/* SHILA Beauty theme 1.0.0 - bright, clear, easy on every screen */
:root {
	--sh-white: #fff;
	--sh-soft: #F6F1EC;
	--sh-tint: #FAF6F1;
	--sh-ink: #2B211D;
	--sh-text: #3E332E;
	--sh-muted: #6F635C;
	--sh-line: #EADFD7;
	--sh-bronze: #8C6440;
	--sh-bronze-d: #6E4C2E;
	--sh-gold: #9E744C;
	--sh-champ: #EAD7CC;
	--sh-rose: #A85F57;
	--sh-danger: #B3372F;
	--sh-r: 16px;
	--sh-r-sm: 12px;
	--sh-max: 1280px;
	--bs-primary: #8C6440;
	--bs-primary-rgb: 140, 100, 64;
	--bs-link-color: #8C6440;
	--bs-link-hover-color: #6E4C2E;
	--bs-body-color: #3E332E;
	--bs-body-bg: #fff;
}

[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

[data-shila] {
	background: #fff;
	color: var(--sh-text);
	font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
}
[data-shila] h1, [data-shila] h2, [data-shila] h3, [data-shila] h4, [data-shila] h5 { color: var(--sh-ink); font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 600; line-height: 1.15; }
[data-shila] a { color: var(--sh-bronze); text-decoration: none; }
[data-shila] a:hover { color: var(--sh-bronze-d); }
[data-shila] img { max-width: 100%; }
[data-shila] .container { max-width: var(--sh-max) !important; padding-inline: 16px; }

.sh-i { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sh-star { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Page layout: undo OpenCart's absolute footer so nothing is ever covered ---------- */
html, body { height: auto; min-height: 100%; }
[data-shila] #container { position: static; display: flex; flex-direction: column; width: 100%; min-height: 100vh; margin: 0; }
[data-shila] main { flex: 1 0 auto; width: 100%; padding-bottom: 2.5rem; }
[data-shila] #content, [data-shila] #column-left, [data-shila] #column-right { padding-bottom: 0 !important; }
[data-shila] footer { position: static; bottom: auto; width: 100%; flex: none; }

/* ---------- Top utility bar: note on the left; currency, language and phone on the right ---------- */
[data-shila] #top { background: var(--sh-ink); border: 0; margin: 0; padding: 0; font-size: .85rem; position: relative; z-index: 1040; }
[data-shila] #top > .container { display: flex; align-items: center; gap: 1rem; min-height: 2.5rem; }
.sh-topnote { order: 1; margin-inline-end: auto; color: #CDBFA9; font-size: .85rem; }
[data-shila] #top > .container > .row { order: 2; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: .4rem; margin: 0; width: auto; flex: none; }
[data-shila] #top > .container > .row > * { width: auto; max-width: none; flex: none; padding: 0; margin: 0; }
[data-shila] #top ul.list-inline { display: flex; align-items: center; gap: .1rem; margin: 0; padding: 0; }
[data-shila] #top .list-inline-item { margin: 0; display: flex; align-items: center; }
[data-shila] #top .text-end ul > li:nth-child(n+2) { display: none; }
[data-shila] #top form { margin: 0; }
[data-shila] #top a, [data-shila] #top .dropdown > a, [data-shila] #top .dropdown > span, [data-shila] #top .list-inline-item > a { color: #E9E2D8 !important; font-size: .85rem; line-height: 1; padding: 0 .7rem; min-height: 2rem; display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; vertical-align: baseline; }
[data-shila] #top a:hover, [data-shila] #top .dropdown > span:hover, [data-shila] #top .dropdown.show > span { background: #34302b; color: #fff !important; }
[data-shila] #top .dropdown > span { cursor: pointer; }
[data-shila] #top .dropdown-menu { z-index: 1045; background: var(--sh-ink); border: 1px solid #4a3f35; border-radius: var(--sh-r-sm); padding: .4rem; min-width: 9rem; }
[data-shila] #top .dropdown-menu a, [data-shila] #top .dropdown-menu .dropdown-item { color: #E9E2D8 !important; border-radius: 8px; padding: .55rem .8rem; display: flex; line-height: 1.3; }
[data-shila] #top .dropdown-menu a:hover, [data-shila] #top .dropdown-menu .dropdown-item:hover { background: #34302b; }

/* ---------- Header: logo | search | account + wishlist | cart ---------- */
[data-shila] header { background: #fff; border-bottom: 1px solid var(--sh-line); padding: .9rem 0; z-index: 1020; }
[data-shila] header > .container > .row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .8rem 1.4rem; width: 100%; margin: 0; }
[data-shila] header .row > * { width: auto; max-width: none; flex: none; padding: 0; margin: 0; }
[data-shila] #logo { text-align: start; margin: 0; }
.sh-logo { display: inline-block; line-height: 0; }
.sh-logo img { height: 58px; width: auto; max-width: none; display: block; }

[data-shila] header .input-group { width: 100%; max-width: 680px; margin: 0 auto !important; background: var(--sh-soft); border: 1px solid transparent; border-radius: 999px; padding: .25rem; flex-wrap: nowrap; transition: border-color .15s, background .15s, box-shadow .15s; }
[data-shila] header .input-group:focus-within { background: #fff; border-color: var(--sh-bronze); box-shadow: 0 0 0 3px rgba(140, 100, 64, .15); }
[data-shila] header .input-group .form-control { background: transparent; border: 0 !important; box-shadow: none !important; min-height: 2.8rem; padding: 0 1.2rem; font-size: 1rem; border-radius: 999px !important; }
[data-shila] header .input-group .btn { border: 0; border-radius: 999px !important; width: 2.8rem; height: 2.8rem; min-height: 0; padding: 0; background: var(--sh-bronze); color: #fff; flex: none; }
[data-shila] header .input-group .btn:hover { background: var(--sh-bronze-d); }

[data-shila] #cart { margin: 0 !important; }
[data-shila] #cart .dropdown { display: block; }
[data-shila] #cart .dropdown > .btn { background: #fff; color: var(--sh-ink); border: 1px solid var(--sh-line); border-radius: 999px; padding: 0 1.2rem; min-height: 2.9rem; font-size: .95rem; font-weight: 500; white-space: nowrap; width: auto; }
[data-shila] #cart .dropdown > .btn:hover, [data-shila] #cart .dropdown.show > .btn { border-color: var(--sh-bronze); color: var(--sh-bronze); background: #fff; }
[data-shila] #cart .dropdown-menu { background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); box-shadow: 0 20px 40px -18px rgba(30, 27, 24, .3); padding: .6rem; min-width: min(22rem, 92vw); }

@media (min-width: 992px) {
	[data-shila] header { position: sticky; top: 0; }
}

.sh-actions { display: flex; align-items: center; gap: .2rem; }
.sh-action { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: 0 .9rem; border-radius: 999px; color: var(--sh-ink) !important; font-weight: 500; white-space: nowrap; }
.sh-action:hover { background: var(--sh-soft); color: var(--sh-bronze) !important; }
.sh-action .sh-i { width: 1.35rem; height: 1.35rem; }

/* Old menu is replaced by the category bar below */
[data-shila] #menu { display: none !important; }

/* ---------- Category bar and mega panel ---------- */
.sh-nav { position: relative; background: #fff; border-bottom: 1px solid var(--sh-line); }
.sh-nav-inner { max-width: var(--sh-max); margin: 0 auto; padding: .5rem 16px; display: flex; align-items: center; gap: .6rem; }
.sh-allcats { display: inline-flex; align-items: center; gap: .6rem; background: var(--sh-ink); color: #fff; border: 0; border-radius: var(--sh-r-sm); padding: 0 1.1rem; min-height: 2.8rem; font: 500 1rem "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; flex: none; }
.sh-allcats:hover, .sh-allcats[aria-expanded="true"] { background: var(--sh-bronze); }
.sh-navlinks { display: flex; gap: .3rem; flex: 1; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.sh-navlinks::-webkit-scrollbar { display: none; }
.sh-navlink { display: inline-flex; align-items: center; min-height: 2.8rem; padding: 0 1rem; color: var(--sh-ink) !important; border-radius: 999px; white-space: nowrap; font-weight: 500; }
.sh-navlink:hover { background: var(--sh-soft); }
.sh-navlink.is-active { background: var(--sh-tint); color: var(--sh-bronze) !important; box-shadow: inset 0 -2px 0 var(--sh-bronze); border-radius: 12px 12px 0 0; }
.sh-navlink-offer { margin-inline-start: auto; color: var(--sh-rose) !important; background: var(--sh-tint); border: 1px solid var(--sh-champ); flex: none; }
.sh-navlink-offer:hover { background: var(--sh-champ); }

.sh-mega { position: absolute; inset-inline: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--sh-line); box-shadow: 0 28px 40px -22px rgba(30, 27, 24, .3); z-index: 1010; }
.sh-mega-bar { display: none; }
.sh-mega-grid { max-width: var(--sh-max); margin: 0 auto; padding: 1.6rem 16px 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.6rem; }
.sh-mega-head { display: flex; align-items: center; gap: .8rem; color: var(--sh-ink) !important; font-weight: 600; }
.sh-mega-img { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--sh-soft); display: grid; place-items: center; flex: none; color: var(--sh-champ); }
.sh-mega-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-mega-subs { display: grid; margin-top: .5rem; padding-inline-start: calc(56px + .8rem); }
.sh-mega-subs a { color: var(--sh-muted); padding: .3rem 0; }
.sh-mega-subs a:hover { color: var(--sh-bronze); }
.sh-scrim { position: fixed; inset: 0; background: rgba(30, 27, 24, .45); z-index: 1050; }

/* ---------- Bottom tab bar (phones) ---------- */
.sh-tabbar { display: none; }
.sh-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 58px; padding: .4rem 0; background: none; border: 0; color: var(--sh-muted) !important; font: 500 .72rem "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; }
.sh-tab[aria-current] { color: var(--sh-bronze) !important; }
.sh-badge { position: absolute; top: .3rem; inset-inline-start: calc(50% + .5rem); min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--sh-bronze); color: #fff; font-size: .68rem; font-weight: 600; display: grid; place-items: center; }

/* ---------- Buttons ---------- */
[data-shila] .btn { border-radius: var(--sh-r-sm); min-height: 2.8rem; font-weight: 500; letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
[data-shila] .btn-primary, [data-shila] .btn-success, [data-shila] #button-cart { background: var(--sh-bronze); border-color: var(--sh-bronze); color: #fff; }
[data-shila] .btn-primary:hover, [data-shila] .btn-success:hover, [data-shila] #button-cart:hover { background: var(--sh-bronze-d); border-color: var(--sh-bronze-d); color: #fff; }
[data-shila] .btn-light, [data-shila] .btn-outline-secondary, [data-shila] .btn-default { background: #fff; border: 1px solid var(--sh-line); color: var(--sh-ink); }
[data-shila] .btn-light:hover { border-color: var(--sh-bronze); color: var(--sh-bronze); background: #fff; }
[data-shila] .btn-danger { background: var(--sh-danger); border-color: var(--sh-danger); }
[data-shila] .btn-inverse { background: var(--sh-ink); border-color: var(--sh-ink); color: #fff; }
[data-shila] #button-cart { width: 100%; min-height: 3.2rem; font-size: 1.05rem; }
.sh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: 0 1.7rem; background: var(--sh-bronze); color: #fff !important; border-radius: var(--sh-r-sm); font-weight: 500; transition: background .15s; }
.sh-btn:hover { background: var(--sh-bronze-d); }
.sh-btn-ghost { background: #fff; color: var(--sh-ink) !important; box-shadow: inset 0 0 0 1px var(--sh-line); }
.sh-btn-ghost:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--sh-bronze); color: var(--sh-bronze) !important; }
.sh-btn-light { background: #fff; color: var(--sh-ink) !important; }
.sh-btn-light:hover { background: var(--sh-champ); }

/* ---------- Home: hero ---------- */
.sh-hero { max-width: var(--sh-max); margin: 1.2rem auto 0; padding: 0 16px; }
.sh-hero-card { background: var(--sh-soft); border-radius: 28px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items: center; padding: clamp(1.4rem, 4vw, 3.4rem); overflow: hidden; }
.sh-hero-copy h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); line-height: 1.04; margin: 0 0 1rem; }
.sh-hero-copy p { color: var(--sh-muted); font-size: 1.12rem; max-width: 27em; margin: 0 0 1.8rem; }
.sh-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.sh-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .75rem; aspect-ratio: 1 / .92; }
.sh-mosaic-item { display: block; border-radius: 20px; overflow: hidden; background: var(--sh-champ); position: relative; }
.sh-mosaic-item:first-child { grid-row: 1 / 3; }
.sh-mosaic[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; max-width: 420px; justify-self: center; width: 100%; aspect-ratio: 1; }
.sh-mosaic[data-count="2"] .sh-mosaic-item:nth-child(2) { grid-row: 1 / 3; }
.sh-mosaic-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sh-mosaic-item:hover img { transform: scale(1.05); }
.sh-mosaic-fallback { display: grid; place-items: center; font-size: 72px; color: rgba(255, 255, 255, .95); background: linear-gradient(160deg, #EAD7CC, #B98557 60%, #8C6440); }

/* The one load moment: the three photos settle in */
@media (prefers-reduced-motion: no-preference) {
	.sh-mosaic-item { animation: sh-settle .7s cubic-bezier(.2, .7, .2, 1) both; }
	.sh-mosaic-item:nth-child(2) { animation-delay: .12s; }
	.sh-mosaic-item:nth-child(3) { animation-delay: .24s; }
}
@keyframes sh-settle { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Home: category shortcuts ---------- */
.sh-cats { max-width: var(--sh-max); margin: 2rem auto 0; padding: 0 16px; }
.sh-cats-row { display: flex; gap: 1.5rem; overflow-x: auto; justify-content: safe center; padding: .4rem .2rem; scroll-snap-type: x proximity; scrollbar-width: none; }
.sh-cats-row::-webkit-scrollbar { display: none; }
.sh-cat { flex: none; width: 104px; text-align: center; scroll-snap-align: start; color: var(--sh-ink) !important; }
.sh-cat-img { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto .6rem; border-radius: 50%; overflow: hidden; background: var(--sh-soft); color: var(--sh-champ); font-size: 1.6rem; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--sh-champ); transition: box-shadow .2s; }
.sh-cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-cat:hover .sh-cat-img { box-shadow: 0 0 0 2px var(--sh-bronze); }
.sh-cat-name { display: block; font-weight: 500; font-size: .95rem; line-height: 1.3; }

/* ---------- Home: trust strip ---------- */
.sh-trust { max-width: var(--sh-max); margin: 1.6rem auto 0; padding: 0 16px; }
.sh-trust-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; padding: 1.1rem 0; border-block: 1px solid var(--sh-line); }
.sh-trust-item { display: flex; align-items: center; gap: .8rem; }
.sh-trust-ico { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--sh-tint); color: var(--sh-bronze); display: grid; place-items: center; flex: none; }
.sh-trust-item strong { display: block; color: var(--sh-ink); font-weight: 600; font-size: .95rem; line-height: 1.3; }
.sh-trust-item small { color: var(--sh-muted); font-size: .85rem; }

/* ---------- Product sections ---------- */
.sh-section { max-width: var(--sh-max); margin: 0 auto; padding: 3rem 16px 0; scroll-margin-top: 5.5rem; }
.sh-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.sh-section-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0; }
.sh-more { font-weight: 500; white-space: nowrap; padding: .5rem 0; }
.sh-more:hover { text-decoration: underline; }
.sh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.sh-card, .sh-card form { height: 100%; }

[data-shila] .product-thumb { background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); overflow: hidden; box-shadow: none; height: 100%; margin: 0; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
[data-shila] .product-thumb:hover { border-color: var(--sh-champ); box-shadow: 0 14px 30px -18px rgba(30, 27, 24, .35); }
[data-shila] .product-thumb .image { aspect-ratio: 1 / 1; background: var(--sh-soft); overflow: hidden; }
[data-shila] .product-thumb .image a { display: block; height: 100%; }
[data-shila] .product-thumb .image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
[data-shila] .product-thumb:hover .image img { transform: scale(1.04); }
[data-shila] .product-thumb .content { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: .9rem 1rem 1rem; }
[data-shila] .product-thumb .description { flex: 1; padding: 0; text-align: start; }
[data-shila] .product-thumb .description h4 { font: 500 1rem/1.35 "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0 0 .35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-shila] .product-thumb .description h4 a { color: var(--sh-ink); }
[data-shila] .product-thumb .description p { display: none; }
[data-shila] .price, [data-shila] .price-new, [data-shila] .price-regular { font-weight: 600; color: var(--sh-ink); font-size: 1.1rem; }
[data-shila] .price-new { color: var(--sh-rose); }
[data-shila] .price-old { color: var(--sh-muted); text-decoration: line-through; font-weight: 400; font-size: .9rem; margin-inline-start: .35rem; }
[data-shila] .product-thumb .content > form { margin: 0; margin-top: auto; }
[data-shila] .product-thumb .button { position: static; width: 100%; display: flex; gap: .5rem; padding: 0; margin: 0; border: 0; background: none; }
[data-shila] .product-thumb .button button, [data-shila] .product-thumb .button .btn { width: auto; flex: 0 0 2.8rem; min-height: 2.8rem; line-height: 1; padding: 0; border: 1px solid var(--sh-line); border-radius: var(--sh-r-sm); background: #fff; color: var(--sh-ink); display: inline-flex; align-items: center; justify-content: center; }
[data-shila] .product-thumb .button button:hover { border-color: var(--sh-bronze); color: var(--sh-bronze); }
[data-shila] .product-thumb .button button[formaction*="cart"], [data-shila] .product-thumb .button a.btn { flex: 1 1 auto; min-width: 0; background: var(--sh-bronze); border-color: var(--sh-bronze); color: #fff; padding: 0 .8rem; border-top: 1px solid var(--sh-bronze); }
[data-shila] .product-thumb .button button[formaction*="cart"]:hover, [data-shila] .product-thumb .button a.btn:hover { background: var(--sh-bronze-d); border-color: var(--sh-bronze-d); color: #fff; }
[data-shila] .product-thumb .button button[formaction*="cart"] i, [data-shila] .product-thumb .button button[formaction*="cart"] .fa-solid { display: none; }
[data-shila] .product-thumb .button button[formaction*="cart"]::after { content: "Add to cart"; font-weight: 500; font-size: .95rem; white-space: nowrap; }
html[lang^="ar"] [data-shila] .product-thumb .button button[formaction*="cart"]::after { content: "أضف للسلة"; }
[data-shila] .product-thumb .button button[formaction*="compare"] { display: none; }
[data-shila] .product-thumb .price-tax { display: none; }
[data-shila] .product-thumb .rating { margin: .2rem 0 0; font-size: .8rem; }
[data-shila] .product-thumb .description { margin: 0; }
/* Always a grid: list view from OpenCart would break the card */
[data-shila] #button-list, [data-shila] #button-grid { display: none; }
[data-shila] .product-list .product-thumb { flex-direction: column; }
[data-shila] .product-list .product-thumb .button { width: 100%; margin-left: 0; }
[data-shila] #product-list { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; margin-top: 0; }
[data-shila] #product-list > .col { margin-bottom: 0 !important; }
[data-shila] #product-list > .col, [data-shila] #product-list > .col > form { display: flex; flex-direction: column; }
[data-shila] #product-list .product-thumb { flex: 1 1 auto; }

/* ---------- Home: closing band ---------- */
.sh-band { max-width: var(--sh-max); margin: 1rem auto 0; width: 100%; padding: 0 16px; }
.sh-band-card { background: var(--sh-ink); color: #EFE8DC; border-radius: 28px; text-align: center; padding: clamp(2rem, 5vw, 3.6rem) 1.4rem; }
.sh-band-title { font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 600; font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.2; color: #fff; margin: 0 auto .6rem; max-width: 22em; }
.sh-band-sub { color: #C9BFAF; margin: 0 0 1.4rem; }

/* ---------- Footer ---------- */
[data-shila] footer { background: var(--sh-ink); color: #D8D0C3; margin-top: 3.5rem; border: 0; padding-top: 0; padding-bottom: 1.5rem; }
.sh-footer-brand { text-align: center; padding: 2.8rem 1rem 1.6rem; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 2rem; }
.sh-footer-brand img { width: min(240px, 70%); height: auto; background: #fff; padding: 1rem 1.6rem; border-radius: var(--sh-r); box-sizing: content-box; }
[data-shila] footer h5 { color: var(--sh-champ); font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 600; font-size: 1rem; }
[data-shila] footer a { color: #D8D0C3; display: inline-block; padding: .2rem 0; }
[data-shila] footer a:hover { color: var(--sh-champ); }
[data-shila] footer hr { border-color: rgba(255, 255, 255, .12); }
[data-shila] footer p { color: #A59C8E; }

.sh-whatsapp { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 1030; display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1.1rem; border-radius: 999px; background: #1FA855; color: #fff !important; font-weight: 500; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35); }
.sh-whatsapp:hover { background: #178f47; }

/* ---------- Inner pages ---------- */
[data-shila] .breadcrumb { background: transparent; border: 0; margin: 1.2rem 0 .6rem; padding: 0; font-size: .9rem; flex-wrap: wrap; }
[data-shila] #content h1, [data-shila] #content h2 { margin-bottom: 1rem; }
[data-shila] #content h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
[data-shila] .form-control, [data-shila] .form-select { border-radius: var(--sh-r-sm); border: 1px solid #D9D4CC; background: #fff; min-height: 2.9rem; font-size: 1rem; }
[data-shila] .form-control:focus, [data-shila] .form-select:focus { border-color: var(--sh-bronze); box-shadow: 0 0 0 3px rgba(140, 100, 64, .15); }
[data-shila] .form-label, [data-shila] .col-form-label, [data-shila] label { font-weight: 500; color: var(--sh-ink); }
[data-shila] .nav-tabs { border-bottom: 1px solid var(--sh-line); }
[data-shila] .nav-tabs .nav-link { color: var(--sh-muted); border: 0; border-bottom: 2px solid transparent; }
[data-shila] .nav-tabs .nav-link.active { color: var(--sh-ink); background: transparent; border-bottom-color: var(--sh-bronze); }
[data-shila] .table { --bs-table-bg: #fff; border-color: var(--sh-line); }
[data-shila] .pagination .page-link { color: var(--sh-ink); border-radius: 10px; border-color: var(--sh-line); margin-inline: .15rem; min-width: 2.6rem; text-align: center; }
[data-shila] .pagination .active .page-link { background: var(--sh-bronze); border-color: var(--sh-bronze); color: #fff; }
[data-shila] .alert { border-radius: var(--sh-r-sm); }
[data-shila] .alert-success { background: #EEF6F0; border-color: #CBE3D2; color: #245A39; }
[data-shila] .list-group-item { border-color: var(--sh-line); }
[data-shila] .list-group-item.active { background: var(--sh-bronze); border-color: var(--sh-bronze); }
[data-shila] .img-thumbnail, [data-shila] .thumbnail { border-color: var(--sh-line); border-radius: var(--sh-r-sm); background: var(--sh-soft); }
[data-shila] .dropdown-menu { border-radius: var(--sh-r-sm); border-color: var(--sh-line); }
[data-shila] .card { border-radius: var(--sh-r); border-color: var(--sh-line); }

/* ---------- Sign in and sign up ---------- */
.sh-auth-intro { text-align: center; padding: 2rem 16px .4rem; }
.sh-auth-intro h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 .3rem; }
.sh-auth-intro p { color: var(--sh-muted); margin: 0; }
[data-shila] #account-login, [data-shila] #account-register { max-width: 980px !important; margin-bottom: 3rem; }
[data-shila] #account-login .breadcrumb, [data-shila] #account-register .breadcrumb { display: none; }
[data-shila] #account-login #content > h1, [data-shila] #account-register #content > h1 { display: none; }
[data-shila] #account-login #content > .row, [data-shila] #account-login #content .row { row-gap: 1.2rem; margin-top: 1.2rem; }
[data-shila] #account-login #content .row > .col:last-child { order: -1; }
[data-shila] #account-login .border.rounded { height: 100%; background: #fff; border: 1px solid var(--sh-line) !important; border-radius: var(--sh-r) !important; box-shadow: 0 18px 36px -24px rgba(30, 27, 24, .3); padding: clamp(1.4rem, 3vw, 2.2rem) !important; }
[data-shila] #account-login #content > .row > .col:first-child .border.rounded { background: var(--sh-tint); box-shadow: none; }
[data-shila] #account-login #content > .row > .col:first-child .btn { background: #fff; color: var(--sh-bronze); border: 1px solid var(--sh-bronze); width: 100%; }
[data-shila] #account-login #content > .row > .col:first-child .btn:hover { background: var(--sh-bronze); color: #fff; }
[data-shila] #account-login #content > .row > .col:first-child .text-end { margin-top: auto; }
[data-shila] #account-login h2, [data-shila] #account-register h2, [data-shila] #account-register legend { font-size: 1.7rem; font-weight: 600; margin-bottom: .8rem; }
[data-shila] #account-login form .btn-primary { width: 100%; min-height: 3.1rem; }
[data-shila] #account-register fieldset { background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); padding: 1.4rem clamp(1rem, 3vw, 2rem); margin-bottom: 1.2rem; }
[data-shila] #account-register legend { float: none; width: auto; padding: 0 .5rem; margin: 0 0 .6rem; border: 0; }
[data-shila] #account-register .row.mb-3 > [class*="col-"] { flex: 0 0 100%; width: 100%; max-width: 100%; }
[data-shila] #account-register .row.mb-3 > label, [data-shila] .col-form-label { padding-bottom: .3rem; text-align: start; }
[data-shila] #account-register .btn-primary { min-height: 3.1rem; padding-inline: 2.4rem; }
.sh-pw-wrap { position: relative; }
.sh-pw-toggle { position: absolute; inset-inline-end: .4rem; top: 50%; transform: translateY(-50%); min-height: 2.4rem; border: 0; background: transparent; color: var(--sh-bronze); font: 500 .9rem "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; padding: 0 .7rem; cursor: pointer; }
.sh-pw-wrap .form-control { padding-inline-end: 4.6rem; }


[data-shila] #account-login #column-right, [data-shila] #account-register #column-right, [data-shila] #account-login #column-left, [data-shila] #account-register #column-left { display: none !important; }

/* ---------- One-time-code sign in ---------- */
.sh-otp { max-width: 520px; margin: 1rem auto 1.4rem; background: #fff; border: 1px solid var(--sh-line); border-radius: 22px; box-shadow: 0 24px 48px -28px rgba(30, 27, 24, .35); padding: clamp(1.4rem, 4vw, 2.2rem); text-align: center; }
.sh-otp h2 { font-size: clamp(1.7rem, 3.4vw, 2.1rem); margin: 0 0 .5rem; }
.sh-otp-hint { color: var(--sh-muted); margin: 0 0 1.2rem; }
.sh-otp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .3rem; margin: 0 0 1rem; background: var(--sh-soft); border-radius: 999px; }
.sh-otp-tabs button { border: 0; background: transparent; border-radius: 999px; min-height: 2.8rem; font: 500 1rem "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--sh-muted); cursor: pointer; }
.sh-otp-tabs button.is-on { background: #fff; color: var(--sh-ink); box-shadow: 0 6px 16px -10px rgba(30, 27, 24, .5); }
.sh-otp-step { display: grid; gap: .8rem; }
.sh-otp .form-control { min-height: 3.4rem; font-size: 1.05rem; text-align: center; }
.sh-otp .btn { min-height: 3.2rem; width: 100%; font-size: 1.05rem; }
.sh-otp-code { letter-spacing: .6em; font-size: 1.6rem !important; font-weight: 600; direction: ltr; }
.sh-otp-sent { margin: 0; font-weight: 500; color: var(--sh-ink); overflow-wrap: anywhere; }
.sh-otp-links { display: flex; justify-content: space-between; gap: 1rem; }
.sh-otp-links button { background: none; border: 0; color: var(--sh-bronze); font: 500 .95rem "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; padding: .5rem 0; cursor: pointer; }
.sh-otp-links button:disabled { color: var(--sh-muted); cursor: default; }
.sh-otp-msg { margin: 1rem 0 0; padding: .7rem .9rem; border-radius: var(--sh-r-sm); background: #FBECEA; color: var(--sh-danger); }
.sh-otp-msg.is-ok { background: #EEF6F0; color: #245A39; }
.sh-otp-alt { max-width: 980px; margin: 1.2rem auto 0; }
.sh-otp-alt > summary { cursor: pointer; text-align: center; color: var(--sh-bronze); font-weight: 500; padding: .8rem; list-style: none; }
.sh-otp-alt > summary::-webkit-details-marker { display: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Customer account dashboard ---------- */
.sh-dash-on #account-account #content > h1, .sh-dash-on #account-account #content > h2, .sh-dash-on #account-account #content > ul.list-unstyled, .sh-dash-on #account-account #column-right, .sh-dash-on #account-account > .breadcrumb { display: none !important; }
.sh-dash { max-width: var(--sh-max); margin: 1.2rem auto 0; }
.sh-dash-hero { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; background: var(--sh-soft); border-radius: 28px; padding: clamp(1.2rem, 3.5vw, 2.4rem); }
.sh-dash-avatar { width: 4.6rem; height: 4.6rem; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font: 600 2rem "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; background: linear-gradient(150deg, #C79B6B, #8C6440 70%); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--sh-champ); }
.sh-dash-who { flex: 1 1 14rem; min-width: 0; }
.sh-dash-hi { margin: 0; color: var(--sh-bronze); font-weight: 500; }
.sh-dash-who h1 { margin: .1rem 0 .2rem; font-size: clamp(1.8rem, 3.6vw, 2.6rem); overflow-wrap: anywhere; }
.sh-dash-contact { margin: 0; color: var(--sh-muted); overflow-wrap: anywhere; }
.sh-dash-cta { display: flex; gap: .6rem; flex-wrap: wrap; }
.sh-dash-cta .sh-btn { min-height: 2.9rem; padding: 0 1.3rem; gap: .5rem; }
.sh-dash-cta .sh-i { width: 1.15rem; height: 1.15rem; }
.sh-dash-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.sh-dash-tile { position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 1.3rem; background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); color: var(--sh-ink) !important; transition: border-color .2s, box-shadow .2s, transform .2s; }
.sh-dash-tile:hover { border-color: var(--sh-champ); box-shadow: 0 16px 30px -20px rgba(30, 27, 24, .4); transform: translateY(-2px); }
.sh-dash-ico { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--sh-tint); color: var(--sh-bronze); }
.sh-dash-ico .sh-i { width: 1.45rem; height: 1.45rem; }
.sh-dash-txt strong { display: block; font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
.sh-dash-txt small { display: block; color: var(--sh-muted); font-size: .88rem; line-height: 1.45; margin-top: .2rem; }
.sh-dash-n { position: absolute; top: 1.1rem; inset-inline-end: 1.1rem; min-width: 2rem; height: 2rem; padding: 0 .55rem; border-radius: 999px; background: var(--sh-ink); color: #fff; font-size: .9rem; font-weight: 600; display: grid; place-items: center; }
.sh-dash-h2 { font-size: 1.5rem; margin: 2rem 0 .8rem; }
.sh-dash-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.sh-dash-link { display: flex; align-items: center; gap: .7rem; min-height: 3.2rem; padding: 0 1rem; background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r-sm); color: var(--sh-ink) !important; font-weight: 500; }
.sh-dash-link:hover { border-color: var(--sh-bronze); color: var(--sh-bronze) !important; }
.sh-dash-link .sh-i { width: 1.25rem; height: 1.25rem; color: var(--sh-bronze); }
@media (max-width: 991.98px) { .sh-dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
	.sh-dash-hero { border-radius: 22px; text-align: center; justify-content: center; }
	.sh-dash-who { flex-basis: 100%; }
	.sh-dash-cta { width: 100%; }
	.sh-dash-cta .sh-btn { flex: 1 1 10rem; }
	.sh-dash-tiles { gap: .7rem; }
	.sh-dash-tile { padding: 1rem; gap: .7rem; }
	.sh-dash-txt small { display: none; }
	.sh-dash-links { grid-template-columns: 1fr 1fr; }
	.sh-dash-link { padding: 0 .8rem; font-size: .92rem; }
}

/* ---------- Direction safety ---------- */
html[dir="rtl"] [data-shila] .dropdown-menu { text-align: right; }
html[dir="rtl"] [data-shila] .float-start { float: right !important; }
html[dir="rtl"] [data-shila] .float-end { float: left !important; }

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
	[data-shila] header > .container > .row { gap: .8rem 1rem; }
	[data-shila] #cart .dropdown > .btn { padding: 0 1rem; }
	.sh-action span { display: none; }
	.sh-action { padding: 0; width: 2.9rem; justify-content: center; }
	.sh-hero-card { grid-template-columns: 1fr; }
	.sh-mosaic { max-width: 560px; justify-self: center; width: 100%; }
	.sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sh-allcats span { display: none; }
	.sh-allcats { padding: 0; width: 2.8rem; justify-content: center; }
}

/* ---------- Phone ---------- */
@media (max-width: 767.98px) {
	[data-shila] { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
	.sh-topnote { display: none; }
	[data-shila] #top > .container { justify-content: center; min-height: 2.3rem; }
	[data-shila] #top > .container > .row { width: 100%; justify-content: space-between; }
	[data-shila] #top .text-end ul > li:first-child .d-md-inline { display: none !important; }
	.sh-actions { display: none; }
	[data-shila] header { padding: .7rem 0; }
	[data-shila] #cart { display: none; }
	[data-shila] header > .container > .row { grid-template-columns: 1fr; justify-items: center; gap: .7rem; }
	.sh-logo img { height: 46px; }
	[data-shila] #search { max-width: none; }
	.sh-nav-inner { padding-block: .4rem; }
	.sh-allcats { display: none; }
	.sh-navlinks { flex: 1; }
	.sh-navlink { background: var(--sh-soft); min-height: 2.5rem; }
	.sh-navlink-offer { display: none; }
	.sh-mega { position: fixed; inset-inline: 0; top: auto; bottom: 0; max-height: 86dvh; overflow-y: auto; border-radius: 22px 22px 0 0; z-index: 1060; box-shadow: 0 -20px 50px rgba(0, 0, 0, .25); }
	.sh-mega-bar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; padding: 1rem 1.2rem; border-bottom: 1px solid var(--sh-line); font-size: 1.1rem; }
	.sh-mega-close { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: var(--sh-soft); display: grid; place-items: center; cursor: pointer; color: var(--sh-ink); }
	.sh-mega-grid { grid-template-columns: 1fr; padding: 1rem 1.2rem 2rem; gap: 1.2rem; }
	.sh-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 1040; background: #fff; border-top: 1px solid var(--sh-line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px -16px rgba(30, 27, 24, .25); }
	.sh-whatsapp { bottom: calc(74px + env(safe-area-inset-bottom)); width: 3.2rem; padding: 0; justify-content: center; }
	.sh-whatsapp span { display: none; }
	.sh-hero { margin-top: .8rem; }
	.sh-hero-card { border-radius: 22px; padding: 1.2rem; gap: 1.4rem; text-align: center; }
	.sh-hero-copy p { margin-inline: auto; }
	.sh-hero-actions { justify-content: center; }
	.sh-hero-actions .sh-btn { flex: 1 1 140px; }
	.sh-mosaic { order: -1; gap: .5rem; }
	.sh-mosaic-item { border-radius: 14px; }
	.sh-cats { margin-top: 1.4rem; }
	.sh-cats-row { gap: 1rem; justify-content: flex-start; }
	.sh-cat { width: 88px; }
	.sh-cat-img { width: 80px; height: 80px; }
	.sh-trust-row { grid-template-columns: 1fr 1fr; }
	.sh-trust-item { gap: .6rem; }
	.sh-trust-ico { width: 2.4rem; height: 2.4rem; }
	.sh-section { padding-top: 2.2rem; }
	.sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
	[data-shila] .product-thumb .content { padding: .7rem; gap: .55rem; }
	[data-shila] .product-thumb .description h4 { font-size: .95rem; }
	[data-shila] .product-thumb .button button[formaction*="cart"]::after { font-size: .9rem; }
	.sh-band-card { border-radius: 22px; }
	[data-shila] #account-register .btn-primary { width: 100%; }
	[data-shila] #account-login #content > .row > .col { flex: 0 0 100%; width: 100%; max-width: 100%; }
	[data-shila] .product-thumb .button { gap: .4rem; }
	[data-shila] #product-list { --bs-gutter-x: .7rem; --bs-gutter-y: .7rem; }
	[data-shila] #product-list > .col { width: 50%; flex: 0 0 auto; }
	[data-shila] .product-thumb .button button, [data-shila] .product-thumb .button .btn { flex-basis: 2.6rem; min-height: 2.6rem; }
	[data-shila] .product-thumb .button button[formaction*="cart"], [data-shila] .product-thumb .button a.btn { padding: 0 .3rem; white-space: nowrap; font-size: .85rem; }
}

:focus-visible { outline: 2px solid var(--sh-bronze); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* Language flags */
[data-shila] #form-language img { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; vertical-align: -3px; }

/* Google sign in */
.sh-google { margin-top: 1.2rem; }
.sh-or { display: flex; align-items: center; gap: .8rem; color: var(--sh-muted); font-size: .9rem; margin-bottom: 1rem; }
.sh-or::before, .sh-or::after { content: ""; flex: 1; height: 1px; background: var(--sh-line); }
.sh-google-btn { display: flex; justify-content: center; min-height: 44px; }

/* ---------- Shopping cart: clear item cards with photos and a sticky summary ---------- */
[data-shila] #checkout-cart { max-width: 1140px; margin-bottom: 3rem; }
[data-shila] #checkout-cart > .breadcrumb { display: none; }
[data-shila] #checkout-cart #column-left, [data-shila] #checkout-cart #column-right { display: none !important; }
[data-shila] #shopping-cart h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 1.2rem 0 1.2rem; }
[data-shila] #shopping-cart > p { color: var(--sh-muted); }
[data-shila] #shopping-cart:not(:has(#output-cart)) { text-align: center; padding: 2.5rem 1rem; background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); margin-top: 1rem; }
[data-shila] #shopping-cart:not(:has(#output-cart)) .text-end { text-align: center !important; }

[data-shila] #shopping-cart:has(#output-cart) { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto auto 1fr; column-gap: 2rem; align-items: start; }
[data-shila] #shopping-cart > .alert { grid-column: 1 / -1; }
[data-shila] #shopping-cart > h1 { grid-column: 1 / -1; grid-row: 1; }
[data-shila] #output-cart, [data-shila] #output-cart > table { display: contents; }
[data-shila] #output-cart thead { display: none; }

[data-shila] #output-cart tbody { grid-column: 1; grid-row: 2 / 5; display: grid; gap: .9rem; width: 100%; }
[data-shila] #output-cart tbody > tr { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; grid-template-areas: "img name name" "img price price" "img qty total"; column-gap: 1.1rem; row-gap: .35rem; align-items: center; background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); padding: 1rem; }
[data-shila] #output-cart tbody td { display: block; border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; width: auto; }
[data-shila] #output-cart tbody td:nth-child(1) { grid-area: img; align-self: start; }
[data-shila] #output-cart tbody td:nth-child(1) img { width: 104px; height: 104px; object-fit: cover; border-radius: var(--sh-r-sm); border: 0; background: var(--sh-soft); padding: 0; display: block; }
[data-shila] #output-cart tbody td:nth-child(2) { grid-area: name; padding-inline-end: 2.6rem !important; align-self: start; font-size: 1.05rem; }
[data-shila] #output-cart tbody td:nth-child(2) > a { color: var(--sh-ink); font-weight: 500; }
[data-shila] #output-cart tbody td:nth-child(2) ul { color: var(--sh-muted); margin-top: .2rem; }
[data-shila] #output-cart tbody td:nth-child(4) { grid-area: price; text-align: start !important; color: var(--sh-muted); font-size: .95rem; align-self: start; }
[data-shila] #output-cart tbody td:nth-child(5) { grid-area: total; font-size: 1.15rem; font-weight: 600; color: var(--sh-ink); white-space: nowrap; text-align: end !important; }
[data-shila] #output-cart tbody td:nth-child(3) { grid-area: qty; }
[data-shila] #output-cart tbody td:nth-child(3) .input-group { flex-wrap: nowrap; width: auto; gap: .5rem; align-items: center; }
[data-shila] #output-cart tbody td:nth-child(3) input[name="quantity"] { flex: 0 0 3.4rem; width: 3.4rem; min-height: 2.6rem; padding: .3rem; text-align: center; border-radius: 999px !important; border: 1px solid var(--sh-line); font-weight: 500; }
[data-shila] #output-cart tbody td:nth-child(3) .btn { width: 2.6rem; min-height: 2.6rem; height: 2.6rem; padding: 0; border-radius: 999px !important; display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; }
[data-shila] #output-cart tbody td:nth-child(3) .btn-primary { background: var(--sh-soft); color: var(--sh-bronze); border: 1px solid var(--sh-line); }
[data-shila] #output-cart tbody td:nth-child(3) .btn-primary:hover { background: var(--sh-bronze); color: #fff; border-color: var(--sh-bronze); }
[data-shila] #output-cart tbody td:nth-child(3) .btn-danger { position: absolute; top: .7rem; inset-inline-end: .7rem; width: 2.2rem; min-height: 2.2rem; height: 2.2rem; background: transparent; border: 0; color: var(--sh-muted); font-size: 1.15rem; }
[data-shila] #output-cart tbody td:nth-child(3) .btn-danger:hover { color: var(--sh-danger); background: #FBECEA; }

[data-shila] #output-cart tfoot { grid-column: 2; grid-row: 2; display: block; background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); padding: 1.2rem 1.3rem .6rem; box-shadow: 0 18px 36px -26px rgba(30, 27, 24, .35); }
[data-shila] #output-cart tfoot::before { content: ""; display: none; }
[data-shila] #output-cart tfoot tr { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--sh-line); }
[data-shila] #output-cart tfoot tr:last-child { border-bottom: 0; padding-top: .9rem; font-size: 1.2rem; }
[data-shila] #output-cart tfoot td { display: block; border: 0 !important; padding: 0 !important; background: none !important; }
[data-shila] #output-cart tfoot tr:last-child td { font-weight: 600; color: var(--sh-ink); }

[data-shila] #shopping-cart:has(#output-cart) > .row { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; gap: .6rem; margin: .8rem 0 0; }
[data-shila] #shopping-cart > .row > .col { flex: none; width: 100%; padding: 0; text-align: center !important; }
[data-shila] #shopping-cart > .row > .col:last-child { order: -1; }
[data-shila] #shopping-cart > .row .btn { width: 100%; min-height: 3.3rem; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; }
[data-shila] #shopping-cart > .row .btn-light { background: transparent; border: 1px solid var(--sh-line); color: var(--sh-bronze); }
[data-shila] #shopping-cart > br { display: none; }
[data-shila] #shopping-cart > h2, [data-shila] #shopping-cart > p, [data-shila] #shopping-cart > #accordion { grid-column: 1; grid-row: auto; }
[data-shila] #shopping-cart:has(#output-cart) > h2 { font-size: 1.5rem; margin: 1.6rem 0 .2rem; grid-row: 5; }
[data-shila] #shopping-cart:has(#output-cart) > p { grid-row: 6; margin-bottom: .8rem; }
[data-shila] #shopping-cart:has(#output-cart) > #accordion { grid-row: 7; }
[data-shila] #accordion .accordion-item { border: 1px solid var(--sh-line); border-radius: var(--sh-r-sm) !important; margin-bottom: .6rem; overflow: hidden; }
[data-shila] #accordion .accordion-button { font-weight: 500; }

@media (max-width: 991.98px) {
	[data-shila] #shopping-cart:has(#output-cart) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	[data-shila] #output-cart tbody, [data-shila] #output-cart tfoot, [data-shila] #shopping-cart:has(#output-cart) > .row, [data-shila] #shopping-cart:has(#output-cart) > h2, [data-shila] #shopping-cart:has(#output-cart) > p, [data-shila] #shopping-cart:has(#output-cart) > #accordion { grid-column: 1; grid-row: auto; position: static; }
	[data-shila] #shopping-cart:has(#output-cart) > .alert { order: -1; }
	[data-shila] #shopping-cart:has(#output-cart) > h1 { order: 0; }
	[data-shila] #output-cart tbody { order: 1; }
	[data-shila] #output-cart tfoot { order: 2; margin-top: 1rem; }
	[data-shila] #shopping-cart:has(#output-cart) > .row { order: 3; }
	[data-shila] #shopping-cart:has(#output-cart) > h2, [data-shila] #shopping-cart:has(#output-cart) > p, [data-shila] #shopping-cart:has(#output-cart) > #accordion { order: 4; }
	[data-shila] #shopping-cart:has(#output-cart) > .row { margin-top: 1rem; }
}
@media (max-width: 575.98px) {
	[data-shila] #output-cart tbody > tr { grid-template-columns: 84px minmax(0, 1fr) auto; padding: .8rem; column-gap: .8rem; }
	[data-shila] #output-cart tbody td:nth-child(1) img { width: 84px; height: 84px; }
}
[data-shila] #output-cart tbody td:nth-child(3) form, [data-shila] #output-cart tbody td:nth-child(3) .input-group { position: static; }
[data-shila] #output-cart tbody td:nth-child(2) ul li:first-child { display: none; }
[data-shila] #output-cart tfoot, [data-shila] #output-cart tfoot tr:first-child, [data-shila] #output-cart tfoot tr:first-child td { border-top-width: 0 !important; }
[data-shila] #output-cart tfoot tr { border-top: 0; }

/* ---------- Checkout: steps, clear cards, sticky order summary ---------- */
[data-shila] #checkout-checkout { max-width: 1140px; margin-bottom: 3rem; }
[data-shila] #checkout-checkout > .breadcrumb { display: none; }
[data-shila] #checkout-checkout #column-left, [data-shila] #checkout-checkout #column-right { display: none !important; }
[data-shila] #checkout-checkout h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 1.2rem 0 1rem; }

.sh-steps { display: flex; list-style: none; padding: 0; margin: 0 0 1.4rem; gap: .4rem; counter-reset: none; }
.sh-steps li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; position: relative; color: var(--sh-muted); font-size: .9rem; text-align: center; }
.sh-steps li::before { content: ""; position: absolute; top: 1.05rem; inset-inline: calc(-50% + 1.4rem) calc(50% + 1.4rem); height: 2px; background: var(--sh-line); }
.sh-steps li:first-child::before { display: none; }
.sh-steps li.is-done::before, .sh-steps li.is-now::before { background: var(--sh-bronze); }
.sh-step-n { position: relative; z-index: 1; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--sh-line); font-weight: 600; font-size: .95rem; }
.sh-steps li.is-now { color: var(--sh-ink); font-weight: 600; }
.sh-steps li.is-now .sh-step-n { border-color: var(--sh-bronze); color: var(--sh-bronze); box-shadow: 0 0 0 4px rgba(140, 100, 64, .15); }
.sh-steps li.is-done .sh-step-n { background: var(--sh-bronze); border-color: var(--sh-bronze); color: #fff; font-size: 0; }
.sh-steps li.is-done .sh-step-n::after { content: "\2713"; font-size: 1rem; }

[data-shila] #checkout-checkout #content > .row { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 2rem; align-items: start; margin: 0; --bs-gutter-x: 0; counter-reset: shstep; }
[data-shila] #checkout-checkout #content > .row > .col-md-7, [data-shila] #checkout-checkout #content > .row > .col { display: contents; }
[data-shila] #checkout-register, [data-shila] #checkout-payment-address, [data-shila] #checkout-shipping-address, [data-shila] #checkout-shipping-method, [data-shila] #checkout-payment-method, [data-shila] #checkout-confirm { grid-column: 1; background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); padding: 1.3rem 1.4rem; margin: 0 0 1rem !important; counter-increment: shstep; width: 100%; }
[data-shila] #checkout-confirm { grid-column: 2; grid-row: 1 / span 8; align-self: start; position: sticky; top: 100px; box-shadow: 0 18px 36px -26px rgba(30, 27, 24, .35); counter-increment: none; }
[data-shila] #checkout-checkout fieldset { border: 0; padding: 0; margin: 0 0 .6rem; }
[data-shila] #checkout-checkout legend { float: none; width: auto; font-size: 1.35rem; font-weight: 600; margin: 0 0 .9rem; display: flex; align-items: center; gap: .7rem; font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--sh-ink); }
[data-shila] #checkout-register form > fieldset:first-of-type > legend::before, [data-shila] #checkout-shipping-method legend::before, [data-shila] #checkout-payment-method legend::before, [data-shila] #checkout-shipping-address > fieldset > legend::before, [data-shila] #checkout-payment-address > fieldset > legend::before { content: counter(shstep); width: 2rem; height: 2rem; border-radius: 50%; background: var(--sh-bronze); color: #fff; display: inline-grid; place-items: center; font: 600 .95rem "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; flex: none; }
[data-shila] #checkout-register > form > p { color: var(--sh-muted); }
[data-shila] #checkout-checkout .form-control, [data-shila] #checkout-checkout .form-select { min-height: 3rem; }
[data-shila] #checkout-checkout .form-label { font-weight: 500; margin-bottom: .3rem; }
[data-shila] #checkout-checkout .required > label::after, [data-shila] #checkout-checkout .required > .form-label::after { content: " *"; color: var(--sh-danger); }
[data-shila] #checkout-checkout .btn-primary { min-height: 3rem; }
[data-shila] #checkout-checkout #button-register, [data-shila] #checkout-checkout #button-shipping-address, [data-shila] #checkout-checkout #button-payment-address { width: 100%; font-size: 1.05rem; }
[data-shila] #checkout-checkout #input-shipping-method, [data-shila] #checkout-checkout #input-payment-method { background: var(--sh-tint); }
[data-shila] #checkout-checkout .input-group > .input-group-text { background: var(--sh-soft); border-color: var(--sh-line); }

/* Order summary */
[data-shila] #checkout-confirm::before { content: attr(data-title); display: block; font: 600 1.35rem "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; margin-bottom: .6rem; }
[data-shila] #checkout-confirm .table-responsive { overflow: visible; }
[data-shila] #checkout-confirm table { border: 0; margin: 0 0 1rem; --bs-table-bg: transparent; }
[data-shila] #checkout-confirm table thead { display: none; }
[data-shila] #checkout-confirm table td, [data-shila] #checkout-confirm table th { border-width: 0 0 1px; border-color: var(--sh-line); padding: .7rem 0; background: none; }
[data-shila] #checkout-confirm tbody td:first-child { font-size: .98rem; }
[data-shila] #checkout-confirm tbody td:first-child ul li:first-child { display: none; }
[data-shila] #checkout-confirm tbody td:last-child { white-space: nowrap; font-weight: 500; }
[data-shila] #checkout-confirm tfoot tr:last-child td { border-bottom: 0; font-size: 1.2rem; font-weight: 600; color: var(--sh-ink); padding-top: .9rem; }
[data-shila] #checkout-confirm #checkout-payment .btn, [data-shila] #checkout-confirm #checkout-payment .btn-primary { width: 100%; min-height: 3.4rem; font-size: 1.1rem; }
[data-shila] #checkout-confirm #checkout-payment .text-end { text-align: center !important; }

/* Shipping / payment choice dialogs */
[data-shila] .modal-content { border: 0; border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(30, 27, 24, .45); }
[data-shila] .modal-header { border-bottom: 1px solid var(--sh-line); }
[data-shila] .modal-title { font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1.4rem; font-weight: 600; }
[data-shila] .modal-body .form-check { border: 1px solid var(--sh-line); border-radius: var(--sh-r-sm); padding: .8rem 1rem .8rem 2.4rem; margin-bottom: .6rem; transition: border-color .2s, background .2s; }
[data-shila] [dir="rtl"] .modal-body .form-check, [dir="rtl"] [data-shila] .modal-body .form-check { padding: .8rem 2.4rem .8rem 1rem; }
[data-shila] .modal-body .form-check:has(input:checked) { border-color: var(--sh-bronze); background: var(--sh-tint); }
[data-shila] .modal-body .form-check .form-check-input { margin-top: .35rem; }
[data-shila] .modal-footer .btn-primary { min-width: 8rem; }

/* Sign in panel at the top of the checkout */
.sh-otp-checkout { max-width: none; margin: 0 0 1.2rem; }
.sh-otp-checkout + .sh-otp-alt, [data-shila] #checkout-checkout .sh-otp-alt { max-width: none; margin: 0 0 1rem; grid-column: 1; width: 100%; background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); padding: 0 1.2rem; }
[data-shila] #checkout-checkout .sh-otp-alt[open] { padding-bottom: 1rem; }
[data-shila] #checkout-checkout .sh-otp-alt #checkout-register { border: 0; padding: 0; margin: 0 !important; background: none; }

@media (max-width: 991.98px) {
	[data-shila] #checkout-checkout #content > .row { grid-template-columns: minmax(0, 1fr); }
	[data-shila] #checkout-confirm { grid-column: 1; grid-row: auto; position: static; }
	[data-shila] #checkout-shipping-method, [data-shila] #checkout-payment-method { grid-row: auto; }
}
@media (max-width: 575.98px) {
	.sh-steps li { font-size: .78rem; }
	.sh-step-n { width: 1.9rem; height: 1.9rem; }
	.sh-steps li::before { top: .95rem; }
	[data-shila] #checkout-register, [data-shila] #checkout-payment-address, [data-shila] #checkout-shipping-address, [data-shila] #checkout-shipping-method, [data-shila] #checkout-payment-method, [data-shila] #checkout-confirm { padding: 1rem; }
}
[data-shila] #checkout-checkout #content:has(.sh-otp-checkout) > .row { counter-reset: shstep 2; }
[data-shila] #checkout-checkout .sh-otp-alt #checkout-register { counter-increment: none; }
[data-shila] #checkout-checkout .sh-otp-alt #checkout-register form > fieldset:first-of-type > legend::before { display: none; }
[data-shila] #checkout-checkout legend { border: 0 !important; padding: 0 !important; }
[data-shila] #checkout-confirm tfoot td:last-child { white-space: nowrap; }
[dir="rtl"] .sh-otp .form-control:placeholder-shown, [dir="rtl"] .sh-otp .form-control::placeholder { direction: rtl; text-align: center; }

/* ===== Simple checkout (3.7): sign in, details, payment ===== */
/* Before sign in: only the sign-in panel. */
[data-shila].sh-co-guest #checkout-checkout #content > .row { display: none !important; }
/* Shipping is automatic. Old address, shipping and register blocks are never shown. */
[data-shila] #checkout-register, [data-shila] #checkout-payment-address, [data-shila] #checkout-shipping-address, [data-shila] #checkout-shipping-method { display: none !important; }
[data-shila] #checkout-payment-method > fieldset, [data-shila] #checkout-payment-method > br { display: none; }
[data-shila].sh-co-need #checkout-payment-method, [data-shila].sh-co-need #checkout-confirm, [data-shila].sh-co-blocked #checkout-payment-method, [data-shila].sh-co-blocked #checkout-confirm { display: none !important; }
[data-shila].sh-co-need #checkout-checkout #content > .row, [data-shila].sh-co-blocked #checkout-checkout #content > .row { grid-template-columns: minmax(0, 640px); justify-content: center; }

.sh-co-card { grid-column: 1; background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); padding: 1.3rem 1.4rem; margin: 0 0 1rem; width: 100%; }
.sh-co-card > h2 { font-size: 1.45rem; margin: 0 0 .5rem; display: flex; align-items: center; gap: .7rem; }
.sh-co-card[data-n] > h2::before { width: 2rem; height: 2rem; border-radius: 50%; background: var(--sh-bronze); color: #fff; display: inline-grid; place-items: center; font: 600 .95rem "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; flex: none; }
.sh-co-card[data-n="2"] > h2::before { content: "2"; }
.sh-co-card[data-n="3"] > h2::before { content: "3"; }
.sh-co-sub { color: var(--sh-muted); margin: 0 0 1rem; }
.sh-co-field { margin: 0 0 .9rem; }
.sh-co-field label { display: block; font-weight: 500; margin-bottom: .3rem; color: var(--sh-ink); }
.sh-co-field label em { font-style: normal; color: var(--sh-muted); font-weight: 400; font-size: .9rem; }
.sh-co-field .form-control, .sh-co-field .form-select { min-height: 3.1rem; border-radius: var(--sh-r-sm); border-color: var(--sh-line); font-size: 1rem; }
.sh-co-field .form-control:focus, .sh-co-field .form-select:focus { border-color: var(--sh-bronze); box-shadow: 0 0 0 3px rgba(140, 100, 64, .15); }
.sh-co-field .form-control[hidden], .sh-co-field .form-select[hidden] { display: none; }
.sh-co-e { display: block; color: var(--sh-danger); min-height: 0; margin-top: .25rem; font-size: .88rem; }
.sh-co-e:empty { display: none; }
.sh-co-err { color: var(--sh-danger); background: #FBEFEE; border-radius: var(--sh-r-sm); padding: .6rem .8rem; margin: 0 0 .8rem; }
.sh-co-more { margin: 0 0 1rem; }
.sh-co-more > summary { cursor: pointer; color: var(--sh-bronze); font-weight: 500; padding: .3rem 0; }
.sh-co-go { width: 100%; min-height: 3.2rem; font-size: 1.05rem; border-radius: var(--sh-r-sm); }

.sh-co-list { list-style: none; margin: .3rem 0 .8rem; padding: 0; display: grid; gap: .55rem; }
.sh-co-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--sh-text); }
.sh-co-list svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .15rem; stroke: var(--sh-bronze); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sh-co-edit { background: none; border: 0; color: var(--sh-bronze); font-weight: 500; padding: .2rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sh-co-editbox { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sh-line); }
.sh-co-editbox[hidden] { display: none; }

/* Payment cards */
[data-shila] #checkout-payment-method .sh-co-pay { border: 0; padding: 0; margin: 0 0 1rem; }
.sh-pay { display: grid; gap: .7rem; margin-top: .6rem; }
.sh-pay-opt { display: flex; align-items: center; gap: .8rem; border: 1.5px solid var(--sh-line); border-radius: var(--sh-r-sm); padding: .9rem 1rem; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; min-height: 3.6rem; }
.sh-pay-opt:hover { border-color: var(--sh-bronze); }
.sh-pay-opt:has(input:checked) { border-color: var(--sh-bronze); background: var(--sh-tint); box-shadow: 0 0 0 3px rgba(140, 100, 64, .12); }
.sh-pay-opt input { width: 1.2rem; height: 1.2rem; accent-color: var(--sh-bronze); flex: none; margin: 0; }
.sh-pay-ico svg { width: 1.5rem; height: 1.5rem; stroke: var(--sh-bronze); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.sh-pay-name { font-weight: 500; color: var(--sh-ink); }
#checkout-confirm.is-loading { opacity: .55; pointer-events: none; }
@media (max-width: 767px) { .sh-co-card { padding: 1rem; } }

/* Terms: big and clear, right under the payment choice */
[data-shila] #checkout-payment-method { display: flex; flex-direction: column; }
[data-shila] #checkout-payment-method > .sh-co-pay { order: 1; }
[data-shila] #checkout-payment-method > .sh-agree { order: 2; }
[data-shila] #checkout-payment-method > div.mb-2 { order: 3; }
[data-shila] .sh-agree { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.1rem !important; padding: 1.1rem 1.2rem; background: var(--sh-tint); border: 1.5px solid var(--sh-champ); border-radius: var(--sh-r-sm); font-size: 1.15rem; line-height: 1.5; transition: box-shadow .2s, border-color .2s; }
[data-shila] .sh-agree .form-check-label { font-size: 1.15rem; font-weight: 500; color: var(--sh-ink); cursor: pointer; flex: 1; margin: 0; }
[data-shila] .sh-agree .form-check-label a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
[data-shila] .sh-agree .form-check-input { width: 3.2rem; height: 1.7rem; flex: none; margin: 0; float: none; cursor: pointer; }
[data-shila] .sh-agree .form-check-input:checked { background-color: var(--sh-bronze); border-color: var(--sh-bronze); }
[data-shila] .sh-agree:has(input:checked) { border-color: var(--sh-bronze); }
[data-shila] .sh-agree.sh-attn { border-color: var(--sh-danger); box-shadow: 0 0 0 4px rgba(179, 55, 47, .18); }
[data-shila] #checkout-payment-method label[for="input-comment"] { font-size: 1rem; }

/* Greyed Confirm: clicking it explains why */
[data-shila] #checkout-confirm #checkout-payment button[disabled] { pointer-events: none; }
[data-shila] #checkout-confirm #checkout-payment { cursor: pointer; }
[data-shila] #checkout-checkout:has(#input-checkout-agree:not(:checked)) #checkout-confirm::after { content: attr(data-hint); display: block; margin-top: .8rem; color: var(--sh-danger); font-size: 1rem; text-align: center; line-height: 1.5; }

/* Product pictures in the order summary */
.sh-sum-img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; border: 1px solid var(--sh-line); background: var(--sh-soft); flex: none; }
[data-shila] #checkout-confirm tbody td.sh-sum-row { display: flex; gap: .8rem; align-items: center; }
[data-shila] #checkout-confirm tbody td.sh-sum-row > ul { display: none; }
[data-shila] #checkout-confirm tbody tr { border-bottom: 1px solid var(--sh-line); }
[data-shila] #checkout-confirm tbody td.sh-sum-row { border-bottom: 0; }
[data-shila] #checkout-confirm tbody td:last-child { vertical-align: middle; }
[data-shila] .sh-pay-opt .sh-pay-name { font-size: 1.05rem; }

/* ===== Order placed page ===== */
.sh-ok-page #common-success .breadcrumb,.sh-ok-page #common-success > .container > nav{display:none}
.sh-ok-page #common-success #content{float:none;width:100%;max-width:560px;margin:0 auto;padding:8px 0 28px}
.sh-ok{text-align:center;background:var(--sh-white);border:1px solid var(--sh-line);border-radius:var(--sh-r);padding:34px 22px 26px;margin:18px 0;box-shadow:0 10px 30px rgba(30,27,24,.06)}
.sh-ok[hidden]{display:none}
.sh-ok-mark{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;background:var(--sh-tint);border:2px solid var(--sh-champ);display:flex;align-items:center;justify-content:center;color:var(--sh-bronze)}
.sh-ok-mark .sh-i{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sh-ok h1{font-size:1.5rem;line-height:1.4;margin:0 0 8px;color:var(--sh-ink)}
.sh-ok-lead{color:var(--sh-muted);margin:0 0 20px;font-size:1rem}
.sh-ok-card{background:var(--sh-tint);border:1px solid var(--sh-champ);border-radius:var(--sh-r-sm);padding:6px 16px;margin:0 0 20px;text-align:start}
.sh-ok-card > div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--sh-line)}
.sh-ok-card > div:last-child{border-bottom:0}
.sh-ok-card span{color:var(--sh-muted)}
.sh-ok-card b{color:var(--sh-ink)}
.sh-ok-num{color:var(--sh-bronze-d)!important;font-size:1.25rem;letter-spacing:.04em}
.sh-ok-actions{display:flex;gap:10px;flex-wrap:wrap}
.sh-ok-btn{flex:1 1 150px;display:block;padding:13px 18px;border-radius:999px;background:var(--sh-bronze);color:#fff!important;font-weight:600;text-decoration:none!important}
.sh-ok-btn:hover{background:var(--sh-bronze-d)}
.sh-ok-btn.is-ghost{background:transparent;color:var(--sh-bronze-d)!important;border:1px solid var(--sh-bronze)}
.sh-ok-wa{display:inline-block;margin-top:16px;color:var(--sh-bronze-d);font-size:.95rem;text-decoration:underline}

/* =====================================================================
   Home page 1.1 — slider, promo tiles, product rails, brands, motion
   ===================================================================== */
.sh-eyebrow { font: 600 .78rem/1.2 "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--sh-bronze); margin: 0 0 .4rem; }
html[lang^="ar"] .sh-eyebrow { letter-spacing: 0; font-size: .9rem; }

/* ---------- Slider ---------- */
.sh-slider { max-width: var(--sh-max); margin: 1rem auto 0; padding: 0 16px; position: relative; }
.sh-slides { display: grid; border-radius: 28px; overflow: hidden; background: var(--sh-soft); isolation: isolate; touch-action: pan-y; }
.sh-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.sh-slide.is-on { opacity: 1; visibility: visible; z-index: 1; }
.sh-slide-img img, .sh-slide-img .sh-slide-link { display: block; width: 100%; height: auto; }
.sh-slide-made { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 2rem; min-height: clamp(330px, 36vw, 470px); padding: clamp(1.6rem, 4.5vw, 3.6rem); position: relative; overflow: hidden; }
.sh-tone-cream { background: #F6EEE7; }
.sh-tone-nude { background: #EAD7CC; }
.sh-tone-rose { background: #F3E1DD; }
.sh-tone-cocoa { background: #2B211D; color: #EFE6DC; }
.sh-tone-cocoa .sh-slide-title { color: #FAF6F1; }
.sh-tone-cocoa .sh-eyebrow { color: #D4B08A; }
.sh-tone-cocoa .sh-slide-text { color: #D8CBBE; }
.sh-tone-cocoa .sh-btn { background: #D4B08A; border-color: #D4B08A; color: #2B211D; }
.sh-slide-copy { position: relative; z-index: 2; }
.sh-slide-title { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.05; margin: 0 0 .9rem; }
.sh-slide-text { color: var(--sh-muted); font-size: 1.12rem; margin: 0 0 1.6rem; max-width: 26em; }
.sh-slide-art { position: relative; height: 100%; min-height: 300px; }
.sh-float { position: absolute; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 24px 50px -28px rgba(43, 33, 29, .45); }
.sh-float img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-float-1 { width: 56%; aspect-ratio: 1; top: 50%; left: 50%; translate: -50% -50%; z-index: 2; border-radius: 50%; }
.sh-float-2 { width: 32%; aspect-ratio: 1; top: 4%; inset-inline-start: 2%; z-index: 1; }
.sh-float-3 { width: 30%; aspect-ratio: 1; bottom: 4%; inset-inline-end: 3%; z-index: 3; }
.sh-slide-art[data-n="1"] .sh-float-1 { width: 66%; }
.sh-orb { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; top: 50%; left: 50%; translate: -50% -50%; background: radial-gradient(circle, rgba(201, 162, 122, .45), rgba(201, 162, 122, 0) 68%); z-index: 0; }
.sh-slider-btn { position: absolute; top: 50%; translate: 0 -50%; z-index: 5; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--sh-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 22px -12px rgba(43, 33, 29, .5); transition: transform .2s, background .2s; }
.sh-slider-btn:hover { background: #fff; transform: scale(1.06); }
.sh-slider-btn[data-dir="prev"] { inset-inline-start: 32px; }
.sh-slider-btn[data-dir="next"] { inset-inline-end: 32px; }
.sh-slider-btn[data-dir="prev"] .sh-i, .sh-rail-btn[data-dir="prev"] .sh-i { transform: scaleX(-1); }
[dir="rtl"] .sh-slider-btn[data-dir="prev"] .sh-i, [dir="rtl"] .sh-rail-btn[data-dir="prev"] .sh-i { transform: none; }
[dir="rtl"] .sh-slider-btn[data-dir="next"] .sh-i, [dir="rtl"] .sh-rail-btn[data-dir="next"] .sh-i { transform: scaleX(-1); }
.sh-dots { position: absolute; bottom: 16px; left: 50%; translate: -50% 0; z-index: 5; display: flex; gap: .45rem; padding: .4rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); }
.sh-dot { width: .55rem; height: .55rem; border-radius: 999px; border: 0; padding: 0; background: rgba(43, 33, 29, .3); cursor: pointer; transition: width .35s, background .35s; }
.sh-dot.is-on { width: 1.6rem; background: var(--sh-bronze); }

/* ---------- Category circles ---------- */
.sh-cat-img { position: relative; transition: box-shadow .25s, transform .25s; }
.sh-cat:hover .sh-cat-img { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--sh-bronze), 0 14px 24px -16px rgba(43, 33, 29, .45); }
.sh-cat-img img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.sh-cat:hover .sh-cat-img img { transform: scale(1.08); }
.sh-cat-offer .sh-cat-img { background: var(--sh-rose); color: #fff; box-shadow: 0 0 0 2px #E5C2BC; }
.sh-cat-offer .sh-cat-img b { font: 600 2rem/1 "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ---------- Promo tiles ---------- */
.sh-promos { max-width: var(--sh-max); margin: 2.2rem auto 0; padding: 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.sh-promo { position: relative; display: block; border-radius: 22px; overflow: hidden; color: var(--sh-ink) !important; }
.sh-promo-img img { display: block; width: 100%; height: auto; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.sh-promo-img:hover img { transform: scale(1.04); }
.sh-promo-made { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 210px; padding: 1.6rem 1.8rem; }
.sh-promo-copy { display: flex; flex-direction: column; gap: .3rem; }
.sh-promo-copy strong { font: 600 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; }
.sh-promo-cta { margin-top: .7rem; font-weight: 600; color: var(--sh-bronze-d); text-decoration: underline; text-underline-offset: 4px; }
.sh-promo-made img { width: 40%; max-width: 190px; aspect-ratio: 1; object-fit: cover; border-radius: 20px; rotate: -5deg; box-shadow: 0 18px 34px -20px rgba(43, 33, 29, .5); transition: rotate .5s, scale .5s; }
.sh-promo-made:hover img { rotate: 0deg; scale: 1.05; }

/* ---------- Product rails ---------- */
.sh-section-head > div { min-width: 0; }
.sh-card { position: relative; }
.sh-off, .sh-soldout { position: absolute; top: .65rem; z-index: 3; font: 600 .78rem/1 "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; padding: .35rem .6rem; border-radius: 999px; pointer-events: none; }
.sh-off { inset-inline-start: .65rem; background: var(--sh-rose); color: #fff; }
.sh-soldout { inset-inline-end: .65rem; background: rgba(43, 33, 29, .85); color: #fff; }
.sh-rail-wrap { position: relative; }
.sh-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 1.2rem) / 5); gap: 1.2rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .2rem .1rem 1rem; }
.sh-rail::-webkit-scrollbar { display: none; }
.sh-rail > .sh-card { scroll-snap-align: start; min-width: 0; }
.sh-rail-btn { position: absolute; top: calc(50% - 2rem); z-index: 4; width: 2.7rem; height: 2.7rem; border-radius: 50%; border: 1px solid var(--sh-line); background: #fff; color: var(--sh-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 22px -14px rgba(43, 33, 29, .5); transition: opacity .2s, transform .2s, border-color .2s; }
.sh-rail-btn:hover { border-color: var(--sh-bronze); color: var(--sh-bronze); transform: scale(1.06); }
.sh-rail-btn[data-dir="prev"] { inset-inline-start: -14px; }
.sh-rail-btn[data-dir="next"] { inset-inline-end: -14px; }
.sh-rail-btn[disabled] { opacity: 0; pointer-events: none; }

/* ---------- Brands strip ---------- */
.sh-brands { max-width: var(--sh-max); margin: 0 auto; padding: 3rem 16px 0; }
.sh-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.sh-marquee-track { display: flex; gap: 1rem; width: max-content; direction: ltr; padding: .3rem 0; }
.sh-marquee-copy { display: contents; }
.sh-brand { flex: none; min-width: 150px; height: 68px; padding: 0 1.4rem; display: grid; place-items: center; border: 1px solid var(--sh-line); border-radius: 18px; background: #fff; color: var(--sh-ink) !important; font: 600 1rem/1.2 "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif; transition: border-color .2s, transform .2s; }
.sh-brand:hover { border-color: var(--sh-bronze); transform: translateY(-2px); }
.sh-brand img { max-height: 42px; max-width: 120px; object-fit: contain; }

/* ---------- Closing band glow ---------- */
.sh-band-card { position: relative; overflow: hidden; }
.sh-band-card > *:not(.sh-band-glow) { position: relative; }
.sh-band-glow { position: absolute; width: 440px; aspect-ratio: 1; border-radius: 50%; top: -180px; inset-inline-end: -140px; background: radial-gradient(circle, rgba(201, 162, 122, .38), rgba(201, 162, 122, 0) 66%); }

/* ---------- Motion (only for people who did not ask for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.sh-anim .sh-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
	.sh-anim .sh-reveal.is-in { opacity: 1; transform: none; }
	.sh-slide.is-on .sh-slide-copy > * { animation: sh-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
	.sh-slide.is-on .sh-slide-copy > :nth-child(2) { animation-delay: .1s; }
	.sh-slide.is-on .sh-slide-copy > :nth-child(3) { animation-delay: .2s; }
	.sh-slide.is-on .sh-slide-copy > :nth-child(4) { animation-delay: .3s; }
	.sh-slide.is-on .sh-float { animation: sh-pop .9s cubic-bezier(.2, .7, .2, 1) both; }
	.sh-slide.is-on .sh-float-2 { animation-delay: .15s; }
	.sh-slide.is-on .sh-float-3 { animation-delay: .3s; }
	.sh-float-2 img, .sh-float-3 img { animation: sh-bob 6s ease-in-out infinite; }
	.sh-float-3 img { animation-delay: -3s; }
	.sh-slide-img.is-on img { animation: sh-kenburns 7s ease-out both; }
	.sh-orb { animation: sh-breathe 7s ease-in-out infinite; }
	.sh-marquee-track { animation: sh-marquee 38s linear infinite; }
	.sh-marquee:hover .sh-marquee-track, .sh-marquee:focus-within .sh-marquee-track { animation-play-state: paused; }
	.sh-band-glow { animation: sh-drift 12s ease-in-out infinite alternate; }
	[data-shila] .product-thumb { transition: border-color .25s, box-shadow .25s, transform .25s; }
	[data-shila] .product-thumb:hover { transform: translateY(-4px); }
}
@keyframes sh-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sh-pop { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
@keyframes sh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sh-kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes sh-breathe { 0%, 100% { scale: 1; opacity: .9; } 50% { scale: 1.08; opacity: 1; } }
@keyframes sh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sh-drift { from { transform: translate(0, 0); } to { transform: translate(-60px, 40px); } }

/* ---------- Home: tablet and phone ---------- */
@media (max-width: 991.98px) {
	.sh-rail { grid-auto-columns: calc((100% - 2 * 1rem) / 3.2); gap: 1rem; }
	.sh-slide-made { gap: 1rem; }
}
@media (max-width: 767.98px) {
	.sh-slider { margin-top: .7rem; }
	.sh-slides { border-radius: 20px; }
	.sh-slide-made { grid-template-columns: 1fr; text-align: center; padding: 1.2rem 1.2rem 3rem; min-height: 0; }
	.sh-slide-art { order: -1; min-height: 0; height: 230px; }
	.sh-slide-title { font-size: 2.3rem; }
	.sh-slide-text { margin-inline: auto; margin-bottom: 1.2rem; font-size: 1rem; }
	.sh-slider-btn { display: none; }
	.sh-dots { bottom: 10px; }
	.sh-promos { grid-template-columns: 1fr; gap: .8rem; margin-top: 1.6rem; }
	.sh-promo-made { min-height: 160px; padding: 1.2rem 1.3rem; }
	.sh-rail { grid-auto-columns: calc((100% - .7rem) / 2.15); gap: .7rem; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
	.sh-rail-btn { display: none; }
	.sh-brands { padding-top: 2.2rem; }
	.sh-brand { min-width: 120px; height: 58px; }
}

/* The theme's home sections replace OpenCart's default home modules (demo slideshow, featured, logo carousel). */
[data-shila] #common-home { display: none; }