/* ============================================================
   v27.32 · آوا · generated 2026-10-21
   css/style.css — ALL styles for this shop.
   Edit colors, fonts, spacing here. Sections are marked
   with ===== banners. See README.md for the full guide.
   ============================================================ */

:root{--accent:#e11d48;--gold:#c9a96a;--bg:#fbfaf7;--card:#ffffff;
--ink:#1d1a16;--muted:#8a8478;--line:#ece5d8;--radius:18px;
--shadow:0 10px 30px rgba(29,26,22,.08);--shadow-lg:0 18px 44px rgba(29,26,22,.13)}
*{box-sizing:border-box;margin:0;padding:0}
/* v42.08: visually-hidden helper — the logo brand carries the shop
   name in an .sr-only span (screen readers only). The class was used
   since v41.24 but NEVER defined, so the name printed visibly next
   to the logo image (his hands-on find: «عکس آمد، نام نباید بیاید»). */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Tahoma,'Vazirmatn',sans-serif;background:var(--bg);color:var(--ink);line-height:1.75;
-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:Georgia,'Times New Roman','Noto Naskh Arabic',serif;letter-spacing:.01em}
a{color:inherit;text-decoration:none;transition:color .25s ease}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--line)}
/* v27.29: sticky per the original's behavior DNA */
header.top.no-sticky{position:static}
/* v27.29: back-to-top, only when the original has one */
.btt{position:fixed;bottom:22px;inset-inline-end:22px;z-index:60;width:44px;
height:44px;border-radius:50%;border:none;cursor:pointer;display:none;
background:var(--accent);color:#fff;font-size:20px}
.btt.show{display:block}
.top-in{display:flex;align-items:center;gap:16px;padding:5px 0}
/* v27.25: slimmer header (mirrors the original's thin bar) */
/* v27.27: slimmer still — the user asked the header narrower */
.brand{font-weight:700;font-size:1.1rem;color:var(--ink)}
.brand::after{content:"";display:block;height:2px;width:34px;background:var(--gold);
margin-top:2px;border-radius:2px}
nav.main{display:flex;gap:4px;margin-inline-start:auto;align-items:center;flex-wrap:nowrap}
nav.main a{padding:7px 13px;border-radius:999px;font-size:.95rem;color:var(--muted);white-space:nowrap;flex-shrink:0}
/* v27.40: uniform nav — labels never wrap to two lines (the user's
   screenshot showed ragged two-line items); on narrow screens the row
   scrolls horizontally instead of breaking. */
/* v27.43: one row, always inside the frame — the nav scrolls
   horizontally (no visible scrollbar) at ANY width when items exceed
   the space; the header can never overflow the site frame. */
nav.main{max-width:100%;overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
/* v27.43: symbolic professional nav — icon + title, special style. */
nav.main a .nav-ic{margin-inline-end:6px;font-size:1.02rem;vertical-align:-2px}
nav.main a:hover .nav-ic,nav.main a.active .nav-ic{filter:saturate(1.4)}
.top-in{max-width:100%}
.nav-search{max-width:100%;flex-shrink:1;min-width:0}
/* v27.46: 3-part slim header — [shop name] | [nav middle] | [icons+search].
   The user's order: slimmer header, name on one side, account/cart/
   wishlist/search icons on the other side, shop options in the middle. */
.top.slim{box-shadow:0 1px 0 var(--line)}
.top.slim .top-in{padding:6px 0;gap:12px}
.hd-3part{display:flex;align-items:center;gap:14px}
.hd-3part .brand{flex-shrink:0;margin-inline-end:4px}
/* v27.52: two-row elegant header — brand centered, nav below centered */
.hd-row1{display:flex;align-items:center;justify-content:space-between;
padding:10px 0 6px;direction:ltr}
/* v27.58: header row stays LTR so search-left/brand-center/icons-right
   is stable in both FA and EN views. */
.hd-row1 .hd-brand{flex:1;text-align:center}
.hd-row1 .hd-brand .brand{font-size:1.5rem;letter-spacing:.18em;
font-weight:700}
.hd-row1 .hd-left,.hd-row1 .hd-right{display:flex;align-items:center;
gap:8px;min-width:80px}
.hd-row1 .hd-right{justify-content:flex-end}
.hd-row2{border-top:1px solid var(--line);padding:6px 0}
.hd-row2 .nav-center{display:flex;justify-content:center;gap:4px;
flex-wrap:wrap}
.hd-row2 .nav-center a{padding:6px 12px;font-size:.9rem;
text-decoration:none;color:var(--ink)}
.hd-row2 .nav-center a:hover{color:var(--accent)}
/* v40.55: fashion nav — clean 6-item luxury menu */
nav.main.fashion-nav a,nav.main a.fashion-link{letter-spacing:.04em;font-weight:500}
/* v40.55: hamburger — hidden on desktop, slide-down menu on mobile */
.nav-burger{display:none;background:none;border:1px solid var(--line);
border-radius:10px;padding:8px 14px;font-size:1.2rem;line-height:1;
cursor:pointer;color:inherit;align-items:center;justify-content:center}
.hd-row2{position:relative}
@media(max-width:760px){
.nav-burger{display:inline-flex}
.hd-row2 nav.main{display:none;width:100%;flex-direction:column;
align-items:stretch;gap:0;padding:4px 0 8px}
.hd-row2 nav.main.open{display:flex}
.hd-row2 nav.main.open a{padding:12px 14px;border-top:1px solid var(--line);
font-size:1rem}
header.top .wrap nav.main{display:none;width:100%;flex-direction:column;
align-items:stretch;gap:0}
header.top .wrap nav.main.open{display:flex}
header.top .wrap nav.main.open a{padding:12px 14px;
border-top:1px solid var(--line);font-size:1rem}
header.top .wrap.top-in{flex-wrap:wrap}
}
/* v40.55: sold-out badge + order-design form */
.badge-soldout{display:inline-block;background:#6b7280;color:#fff;
font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:999px;
letter-spacing:.03em}
.soldout-note{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;
border-radius:10px;padding:10px 14px;font-weight:600;margin:10px 0}
.od-box{max-width:640px;margin:0 auto;padding:8px 0 32px}
.od-intro{color:var(--muted,#666);margin:0 0 20px;line-height:1.7}
#odForm label{display:block;margin:0 0 14px;font-weight:600}
#odForm input,#odForm textarea{display:block;width:100%;margin-top:6px;
padding:10px 12px;border:1px solid var(--line);border-radius:10px;
font:inherit;font-weight:400}
#odForm textarea{resize:vertical}
.od-msg{margin-top:12px;padding:10px 14px;border-radius:10px;font-weight:600}
.od-msg.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.od-msg.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.nav-mid{display:flex;gap:2px;align-items:center;flex:1 1 auto;
justify-content:center;flex-wrap:nowrap;max-width:100%;overflow-x:auto;
scrollbar-width:none}
.nav-mid::-webkit-scrollbar{display:none}
.nav-mid a{padding:6px 11px;border-radius:999px;font-size:.92rem;
color:var(--muted);white-space:nowrap;flex-shrink:0}
.nav-mid a .nav-ic{margin-inline-end:5px}
.nav-mid a.active,.nav-mid a:hover{background:var(--ink);color:#fff}
.hd-side{display:flex;align-items:center;gap:8px;flex-shrink:0;
margin-inline-start:auto}
.hd-side .hd-ic{font-size:1.15rem;padding:6px;border-radius:50%;
line-height:1;position:relative}
.hd-side .hd-ic:hover{background:var(--line)}
.hd-side .nav-search input{width:130px;transition:width .3s ease,
border-color .25s ease,box-shadow .25s ease}
.hd-side .nav-search input:focus{width:190px;border-color:var(--gold);
box-shadow:0 0 0 3px rgba(212,175,55,.16)}
@media(max-width:760px){
.hd-3part{flex-wrap:wrap}
.nav-mid{order:3;flex:1 1 100%;justify-content:flex-start}
}
nav.main a.active,nav.main a:hover{background:var(--ink);color:#fff}
.cart-link{position:relative}
.cart-count{position:absolute;top:2px;inset-inline-end:2px;background:var(--accent);
color:#fff;font-size:.7rem;min-width:20px;height:20px;border-radius:999px;
display:flex;align-items:center;justify-content:center;padding:0 5px}
.hero{background:linear-gradient(135deg,var(--accent) 0%,#2b241c 130%);color:#fff;
padding:88px 0 76px;text-align:center;position:relative;overflow:hidden}
/* v27.29: hero slider — the original's carousel mirrored */
.hero-slider{position:relative;overflow:hidden;background:#111}
.hslides{position:relative;height:min(66vh,540px);min-height:340px}
.hslide{position:absolute;inset:0;background-size:cover;background-position:center;
opacity:0;transition:opacity .9s ease;pointer-events:none}
.hslide.on{opacity:1;pointer-events:auto}
.hslide::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 60%)}
.hslide-tx{position:absolute;bottom:14%;inset-inline-start:0;z-index:2}
.hslide-tx .hero-kicker{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hslide-tx .btn{margin-top:14px}
.harr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
background:rgba(255,255,255,.85);color:#222;font-size:26px;line-height:1}
.harr.prev{inset-inline-start:16px}.harr.next{inset-inline-end:16px}
.hdots{position:absolute;bottom:16px;inset-inline:0;z-index:3;text-align:center}
.hdot{width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;
background:rgba(255,255,255,.5);margin:0 4px;padding:0}
.hdot.on{background:#fff}
.hero::before{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at 20% 10%,rgba(201,169,106,.35),transparent 55%),
radial-gradient(ellipse at 85% 90%,rgba(255,255,255,.12),transparent 50%)}
.hero .wrap{position:relative}
.hero h1{font-size:2.6rem;margin-bottom:10px;font-weight:700}
.hero p{opacity:.92;margin-bottom:26px;font-size:1.08rem;max-width:640px;
margin-inline:auto}
.hero-rule{width:64px;height:3px;background:var(--gold);margin:0 auto 22px;
border-radius:3px}
/* v41.93: DESIGN VARIANTS — body classes from the shop's design set.
   simple/classic/center are the defaults (rules above unchanged). */
/* hero: grand — tall, dramatic, centered display title */
body.dz-hero-grand .hero{padding:130px 0 115px}
body.dz-hero-grand .hero h1{font-size:3.4rem;letter-spacing:.01em}
body.dz-hero-grand .hero-rule{width:96px;height:4px}
/* hero: split — text beside a visual tile with the shop initial */
body.dz-hero-split .hero{text-align:start;padding:64px 0 58px}
body.dz-hero-split .hero .wrap{display:grid;
grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
body.dz-hero-split .hero-rule{margin:0 0 22px}
body.dz-hero-split .hero p{margin-inline:0}
.hero-visual{display:none}
body.dz-hero-split .hero-visual{display:flex;align-items:center;
justify-content:center;min-height:230px;border-radius:22px;
background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.25)}
body.dz-hero-split .hero-visual span{font-size:6rem;font-weight:800;
color:rgba(255,255,255,.92);line-height:1}
@media(max-width:760px){body.dz-hero-split .hero .wrap{grid-template-columns:1fr}
body.dz-hero-split .hero-visual{min-height:150px}
body.dz-hero-split .hero-visual span{font-size:4rem}
body.dz-hero-grand .hero h1{font-size:2.4rem}}
/* card: modern — borderless, soft shadow, lift on hover */
body.dz-card-modern .card{border:none;border-radius:18px;
box-shadow:0 10px 30px rgba(20,18,12,.10)}
body.dz-card-modern .card:hover{transform:translateY(-6px);
box-shadow:0 20px 42px rgba(20,18,12,.16)}
/* header: side — nav row aligned to the start instead of centered */
body.dz-header-side .hd-row2 .nav-center{justify-content:flex-start}
body.dz-header-side nav.main{margin-inline-start:0}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;
padding:14px 34px;border-radius:999px;font-size:1rem;cursor:pointer;
font-family:inherit;letter-spacing:.04em;transition:transform .25s ease,
box-shadow .25s ease,background .25s ease;box-shadow:0 6px 18px rgba(0,0,0,.16)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.2)}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,.85);
color:#fff;box-shadow:none}
.btn.small{padding:9px 20px;font-size:.9rem}
.btn:disabled{opacity:.55;cursor:wait;transform:none}
.section-title{font-size:1.65rem;margin:44px 0 20px;font-weight:700;
display:flex;align-items:center;gap:12px}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.chip{border:1px solid var(--line);background:var(--card);padding:8px 20px;
border-radius:999px;cursor:pointer;font-size:.92rem;font-family:inherit;
transition:all .25s ease}
.chip:hover{border-color:var(--gold)}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:22px}
.card{background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
/* v27.46: story at end-of-page (in footer area) when the original
   had no story position — the user's order. */
.story-foot{max-width:720px;margin:0 auto;text-align:center;
padding:26px 0 6px;color:var(--muted);font-size:.95rem;line-height:1.9}
.story-foot .section-title{font-size:1.1rem;margin-bottom:10px}
/* v27.42: frame integrity — cards can NEVER break out of the site frame,
   no matter what content or skeleton data arrives. */
.grid>*{min-width:0;max-width:100%}
.card{max-width:100%}
.card .ph{max-width:100%}
.card img{max-width:100%}
.card-media,.sk-media{overflow:hidden;max-width:100%}
.card .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#f3ede1,#e7dcc8);
display:flex;align-items:center;justify-content:center;color:#b9a888;
font-size:2.6rem;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:contain;
transition:transform .5s ease;background:#fff}
.card:hover .ph img{transform:scale(1.06)}
/* v27.78: product image grow animation on load */
@keyframes prodGrow{from{transform:scale(.85);opacity:.5}to{transform:scale(1);opacity:1}}
.card .ph img{animation:prodGrow .6s ease}
/* v27.35: card hover-swap — the original's second image crossfades in
   on hover. Rendered only when the analyzer detected the behavior AND
   captured a real second image (img.hov); otherwise nothing changes. */
.card .ph{position:relative}
.card .ph img.hov{position:absolute;inset:0;opacity:0;transform:none;
transition:opacity .35s ease}
.card:hover .ph img.hov{opacity:1;transform:none}
/* v27.35: product-view image zoom — the original's magnifier. The
   .zoomable class is added by JS only when the behavior was detected
   on the source site; the zoom uses the real product photo. */
.detail .ph.zoomable{cursor:zoom-in}
.detail .ph.zoomable img{transition:transform .25s ease}
.card .bd{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:1.08rem}
.card .cat{font-size:.78rem;color:var(--muted);text-transform:uppercase;
letter-spacing:.08em}
.card .pr{font-weight:700;color:var(--accent);font-size:1.18rem}
.card .pr::before{content:"";display:inline-block;width:22px;height:2px;
background:var(--gold);margin-inline-end:8px;vertical-align:middle;
border-radius:2px}
.card .row{margin-top:auto;display:flex;gap:8px;align-items:center;
padding-top:6px}
.toolbar{display:flex;gap:12px;margin:24px 0;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:12px 16px;border:1px solid var(--line);
border-radius:12px;font-size:1rem;font-family:inherit;background:#fff;flex:1;
min-width:180px;transition:border-color .25s ease,box-shadow .25s ease}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--gold);
box-shadow:0 0 0 3px rgba(201,169,106,.18)}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin:36px 0}
.detail .ph{border-radius:var(--radius);overflow:hidden;
background:linear-gradient(135deg,#f3ede1,#e7dcc8);
min-height:340px;display:flex;align-items:center;justify-content:center;
font-size:4rem;color:#b9a888;box-shadow:var(--shadow)}
.detail .ph img{width:100%;height:100%;object-fit:contain;background:#fff;animation:prodGrow .6s ease}
.detail h1{font-size:2rem;margin-bottom:8px}
.detail .pr{font-size:1.6rem;color:var(--accent);font-weight:700;margin:14px 0}
.detail .desc{color:#4b453a;margin:14px 0}
.qtyrow{display:flex;gap:12px;align-items:center;margin:18px 0}
.qtyrow input{width:74px;padding:11px;border:1px solid var(--line);
border-radius:12px;font-size:1rem;font-family:inherit}
table.cart{width:100%;border-collapse:collapse;background:var(--card);
border-radius:var(--radius);overflow:hidden;margin:24px 0;
box-shadow:var(--shadow)}
table.cart th,table.cart td{padding:14px;text-align:start;
border-bottom:1px solid var(--line)}
table.cart th{background:#f7f2e9;font-size:.88rem;letter-spacing:.05em;
text-transform:uppercase;color:var(--muted)}
table.cart input[type=number]{width:64px;padding:8px;border:1px solid var(--line);
border-radius:8px;font-family:inherit}
.linklike{background:none;border:0;color:#b91c1c;cursor:pointer;
font-size:.9rem;font-family:inherit}
.totals{background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);padding:22px;max-width:400px;
margin-inline-start:auto;box-shadow:var(--shadow)}
.totals .tr{display:flex;justify-content:space-between;padding:7px 0}
.totals .grand{font-weight:700;font-size:1.35rem;color:var(--accent);
border-top:2px solid var(--gold);margin-top:10px;padding-top:12px}
form.box{background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);padding:26px;margin:24px 0;display:grid;gap:16px;
box-shadow:var(--shadow)}
form.box label{display:grid;gap:7px;font-size:.95rem}
form.box input,form.box select,form.box textarea{padding:12px 15px;
border:1px solid var(--line);border-radius:12px;font-size:1rem;
font-family:inherit;width:100%;transition:border-color .25s ease}
form.box input:focus,form.box select:focus,form.box textarea:focus{
outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,169,106,.18)}
.notice{border-radius:14px;padding:15px 18px;margin:18px 0;font-size:.95rem}
.notice.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.notice.err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.notice.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}
.step{background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);padding:26px 20px;text-align:center;
box-shadow:var(--shadow);transition:transform .3s ease}
.step:hover{transform:translateY(-4px)}
.step .n{width:48px;height:48px;border-radius:999px;
background:linear-gradient(135deg,var(--accent),#2b241c);
color:#fff;display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:1.25rem;margin:0 auto 12px}
/* v27: elegant contact cards */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:16px;margin:20px 0}
.ccard{display:flex;gap:14px;align-items:center;background:var(--card);
border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;
box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease,
border-color .3s ease}
a.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);
border-color:var(--gold)}
.cic{font-size:1.7rem;width:52px;height:52px;flex:none;border-radius:999px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--accent),#2b241c);filter:saturate(.9)}
.ctx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ctx b{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
color:var(--muted);font-family:'Segoe UI',Tahoma,'Vazirmatn',sans-serif}
.ctx span:last-child{font-weight:600;overflow-wrap:anywhere}
.foot-contact .contact-cards{margin:0}
/* v40.51: footer owner-credit + contact page */
.foot-credit{margin:0 12px;font-size:.82rem;opacity:.85}
.foot-credit a{color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.foot-credit a:hover{opacity:1}
.contact-box{max-width:640px;margin:32px auto;padding:28px;border:1px solid var(--line,#e5e5e5);border-radius:14px}
.contact-box h1{margin:0 0 18px}
.contact-box .crow{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line,#eee)}
.contact-box .crow:last-of-type{border-bottom:0}
.contact-box .crow b{min-width:90px}
.credit-line{margin-top:22px;padding-top:14px;border-top:1px solid var(--line,#eee);font-size:.85rem;opacity:.75;text-align:center}
/* v27.25: the footer mirrors the original — WHITE, not dark. */
.foot-copy{display:flex;justify-content:space-between;align-items:center;
/* v27.47: subtle admin link in footer */
.adm-link{font-size:.78rem;color:var(--muted);text-decoration:none;margin-inline-end:12px}
.adm-link:hover{color:var(--ink)}
gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.82rem;
padding:14px 0 4px;border-top:1px solid var(--line);margin-top:10px}
.pay-badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pay-badge{border:1px solid var(--line);border-radius:6px;padding:3px 10px;
font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--muted);
background:#fff;white-space:nowrap}
footer.bot{margin-top:64px;border-top:1px solid var(--line);
background:#ffffff;color:var(--ink);padding:36px 0;font-size:.92rem}
footer.bot .cols{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start}
footer.bot b{color:var(--ink);font-size:1.05rem}
footer.bot .contact-cards{margin-top:14px}
footer.bot .ccard{background:#faf8f4;border-color:var(--line);
color:var(--ink);box-shadow:none}
footer.bot .ccard .ctx b{color:var(--muted)}
/* v27.2: rich clone sections — hero banner, deals strip, category tiles,
   discount badges, ratings, perks strip, footer link columns, nav search */
.hero.has-banner{background-size:cover;background-position:center 12%;
box-sizing:border-box;padding:44px 0;
/* v42.01/02: a tall hero so wide photos are not halved.
   v42.03: EQUAL TO HABAYEB by his screenshot comparison — their hero
   is ~54% of the screen, total height INCLUDING padding (border-box);
   78vh + content-box padding became a full-screen wall. The focus
   sits near the top (12%) so faces are never the cropped part; only
   the floor trims, exactly like the source's own banners. */
min-height:clamp(400px,56vh,580px);display:flex;align-items:center}
.hero.has-banner::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(20,16,12,.55),rgba(20,16,12,.35))}
.hero.has-banner .wrap{position:relative;z-index:1;width:100%}
/* v27.9: hero headline kicker + perfume showcase */
.hero-kicker{font-size:1.02rem;letter-spacing:.16em;text-transform:uppercase;
opacity:.88;margin-bottom:12px;font-weight:600}
.perfume-showcase{background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);padding:30px;margin:8px 0 26px;overflow:hidden}
.perfume-showcase .ph{border-radius:12px;overflow:hidden;margin-bottom:18px;
max-height:340px}
.perfume-showcase .ph img{width:100%;height:100%;object-fit:cover;
display:block;max-height:340px}
/* v27.25: full-width background banner with the text OVERLAID on one
   side (the original's anatomy) — the overlay classes existed but
   their CSS was missing, so the text rendered as a plain block. */
.perfume-showcase.has-bg{position:relative;background-size:cover;
background-position:center;border:0;border-radius:var(--radius);
overflow:hidden;min-height:360px;display:flex;align-items:stretch;
padding:0;margin:8px 0 26px}
.perfume-showcase.has-bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(15,12,9,.42),rgba(15,12,9,.22))}
.perfume-overlay{position:relative;z-index:1;display:flex;
flex-direction:column;justify-content:center;gap:10px;padding:44px;
max-width:560px;width:100%;color:#fff}
.perfume-overlay h2{color:#fff;margin:0}
.perfume-overlay p{margin:0;opacity:.92}
.perfume-overlay .overline{color:#f3e9d3}
.perfume-overlay.text-side-right{margin-inline-start:auto} /* v40.70: logical */
.perfume-overlay.text-side-left{margin-inline-end:auto} /* v40.70: logical */
.perfume-overlay.text-side-center{margin-inline-start:auto;margin-inline-end:auto; /* v40.70: logical */
text-align:center}
/* v40.63: manual promo banners (homepage layout builder) */
.promo-link{display:block;text-decoration:none;color:inherit}
.promo-banner{position:relative;border-radius:var(--radius);overflow:hidden;
margin:8px 0 26px;background:var(--card);border:1px solid var(--line)}
.promo-banner.promo-large{min-height:320px;display:flex;align-items:stretch}
.promo-banner.promo-large img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover}
.promo-banner.promo-large .promo-overlay{position:relative;z-index:1;
display:flex;flex-direction:column;justify-content:center;gap:10px;
padding:44px;max-width:560px;color:#fff;
background:linear-gradient(90deg,rgba(15,12,9,.55),rgba(15,12,9,.15))}
.promo-banner.promo-large .promo-overlay h2{color:#fff;margin:0}
.promo-banner.promo-large .promo-overlay p{margin:0;opacity:.92}
.promo-banner.promo-half{display:flex;align-items:center;gap:20px;padding:20px}
.promo-banner.promo-half img{width:45%;border-radius:12px;object-fit:cover;
max-height:220px}
.promo-banner.promo-half .promo-overlay{flex:1}
.promo-banner.promo-half .promo-overlay h2{margin:0 0 8px}
.promo-banner.promo-half .promo-overlay p{margin:0;opacity:.85}
@media(max-width:760px){.promo-banner.promo-half{flex-direction:column}
.promo-banner.promo-half img{width:100%;max-height:200px}}
.nav-search{display:flex;align-items:center;margin-inline-start:8px}
.nav-search input{padding:8px 14px;border:1px solid var(--line);
border-radius:999px;font-size:.88rem;font-family:inherit;width:150px;
transition:width .3s ease,border-color .25s ease,box-shadow .25s ease;background:#fff}
/* v37: search visibly expands on focus like the original (defect 25) */
.nav-search input:focus{outline:none;width:230px;border-color:var(--gold);
box-shadow:0 0 0 3px rgba(212,175,55,.16)}
.deal-strip{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 14px;
scroll-snap-type:x mandatory}
.deal-card{flex:0 0 210px;scroll-snap-align:start;background:var(--card);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow);transition:transform .3s ease}
.deal-card:hover{transform:translateY(-4px)}
.deal-card .ph{height:130px;background:linear-gradient(135deg,#f3ede1,#e7dcc8);
display:flex;align-items:center;justify-content:center;font-size:2rem;
color:#b9a888;overflow:hidden;position:relative}
.deal-card .ph img{width:100%;height:100%;object-fit:cover}
.deal-card .bd{padding:12px 14px;display:grid;gap:4px}
.deal-card h4{font-size:.92rem;font-weight:600;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.badge-off{position:absolute;top:10px;inset-inline-start:10px;
background:#e11d48;color:#fff;font-size:.75rem;font-weight:700;
padding:4px 10px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.old-price{text-decoration:line-through;color:var(--muted);font-size:.85rem;
margin-inline-start:8px;font-weight:400}
/* v27.30: master-clone — rotating promo bar, cookie banner,
   choose-options card button, instagram feed, shipping progress */
.announce{display:flex;align-items:center;justify-content:center;gap:12px;
background:var(--ink,#111);color:#fff;font-size:.82rem;padding:8px 12px;
text-align:center}
/* v27.47: thinner, more delicate announcement bar (user's order) */
.announce{padding:5px 12px;font-size:.76rem;letter-spacing:.02em}
.announce .ann-nav{padding:2px 8px;font-size:.9rem;opacity:.7}
.announce .ann-nav:hover{opacity:1}
.ann-items{flex:1;display:flex;justify-content:center;min-height:1.4em}
.ann-item[hidden]{display:none!important}
.ann-code{background:#fff;color:#111;border-radius:4px;padding:1px 8px;
margin-inline-start:8px;font-weight:700;letter-spacing:.04em}
.ann-nav{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;
width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:1rem;
line-height:1;flex:none}
.ann-nav:hover{background:rgba(255,255,255,.15)}
.cookie-bar{position:fixed;bottom:0;left:0;right:0;z-index:90;display:flex;
align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
background:#1c1c1e;color:#fff;padding:12px 20px;font-size:.85rem;
box-shadow:0 -4px 18px rgba(0,0,0,.25)}
.cookie-bar p{margin:0;flex:1;min-width:200px}
.cookie-btns{display:flex;gap:8px}
.cookie-btn{background:#fff;color:#111;border:0;border-radius:6px;
padding:8px 18px;font-weight:600;cursor:pointer}
.cookie-btn:hover{opacity:.85}
.choose-btn{position:absolute;left:0;right:0;bottom:0;display:block;
background:rgba(17,17,17,.82);color:#fff;text-align:center;font-size:.82rem;
font-weight:600;padding:10px 6px;text-decoration:none;letter-spacing:.02em}
.choose-btn:hover{background:var(--accent,#b98a2f);color:#fff}
/* v27.40: adaptive card body buttons are normal flow buttons — the
   media-overlay style (position:absolute) broke out of .bd as a
   full-width black bar. They wear the original's button colors. */
.sk-bd .choose-btn{position:static;display:inline-block;margin-top:10px;
background:var(--btnbg,var(--accent,#b98a2f));color:var(--btntx,#fff);
border-radius:6px;padding:10px 22px;text-align:center}
.card-media{position:relative}
.insta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:10px;margin:8px 0 4px}
.insta-post{position:relative;border-radius:var(--radius);overflow:hidden;
border:1px solid var(--line);background:var(--card)}
.insta-post img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.insta-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;
background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;
font-size:.75rem;line-height:1.4}
.insta-likes{font-weight:700;margin-inline-end:6px}
.ship-progress{border:1px solid var(--line);border-radius:var(--radius);
background:var(--card);padding:14px 16px;margin-bottom:16px}
.ship-progress .sp-msg{font-size:.9rem;font-weight:600;margin-bottom:8px}
.ship-progress .sp-bar{height:8px;border-radius:99px;background:#e8e2d4;
overflow:hidden}
.ship-progress .sp-fill{height:100%;border-radius:99px;
background:var(--accent,#b98a2f);transition:width .4s ease}
.stars{color:#f59e0b;font-size:.85rem;letter-spacing:.06em}
.stars .rc{color:var(--muted);font-size:.78rem;margin-inline-start:6px}
.sold-tag{font-size:.78rem;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:16px;margin:8px 0 4px}
.tile{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
background:var(--card);box-shadow:var(--shadow);transition:transform .3s ease;
text-align:center}
.tile:hover{transform:translateY(-4px)}
.tile-sub{display:block;font-size:.82rem;color:var(--muted);font-weight:400;
margin:2px 0 6px}
.tile .ph{aspect-ratio:1;background:linear-gradient(135deg,#f3ede1,#e7dcc8);
display:flex;align-items:center;justify-content:center;font-size:2rem;
color:#b9a888;overflow:hidden}
.tile .ph img{width:100%;height:100%;object-fit:cover}
.tile b{display:block;padding:12px 12px 14px;font-size:.95rem}
/* v27.25: the original's small gold rule under each tile name */
.tile b::after{content:"";display:block;width:38px;height:2px;
background:var(--gold);margin:8px auto 0;border-radius:2px}
/* v27.26: the brand-statement strip under the hero — STATIC, one clean
   row like the original (the scrolling marquee duplicated the text and
   looked disorganized). */
.brand-strip{background:#faf7f1;border-top:1px solid var(--line);
border-bottom:1px solid var(--line);text-align:center;
padding:.6rem 1rem;font-size:.85rem;color:#4a4238;line-height:1.7}
.brand-strip span{display:inline-block;max-width:1100px}
/* v41.97: MOVING slogan strip (habayeb model) — renders only when a
   manual hero banner took the headline and the slogan moved here.
   Two identical halves + a -50% loop = seamless; RTL runs reversed;
   reduced-motion users get a static strip. */
.brand-strip.mq{overflow:hidden;padding:.6rem 0}
.brand-strip.mq .mq-track{display:flex;width:max-content;
animation:mqmove 26s linear infinite}
.brand-strip.mq .mq-half{white-space:nowrap}
.brand-strip.mq .mq-half span{max-width:none;margin:0 30px}
[dir="rtl"] .brand-strip.mq .mq-track{animation-direction:reverse}
@keyframes mqmove{from{transform:translateX(0)}
to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
.brand-strip.mq .mq-track{animation:none}}
/* v27.25: trust-badge strip mirrors the original — a bordered band
   with 4 icon badges, no section title, no pills. */
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
margin:28px 0;padding:20px 0;border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.perk{display:flex;align-items:center;justify-content:flex-start;gap:12px;
background:none;border:0;border-radius:0;box-shadow:none;padding:6px;
font-size:.9rem;font-weight:600}
.perk i{font-style:normal;font-size:1.55rem;color:var(--ink);line-height:1}
/* v27.27: bordered icon square + title/description like the screenshot */
.perk-ic{display:flex;align-items:center;justify-content:center;width:52px;
height:52px;border:1px solid var(--line);font-size:1.5rem;flex:none;font-style:normal}
.perk-tx b{display:block;font-size:.92rem}
.perk-tx small{display:block;color:var(--muted);font-size:.78rem;
font-weight:400;line-height:1.5;margin-top:2px}
.story{max-width:720px;line-height:1.9;color:var(--muted);margin:4px 0 8px}
.foot-links{display:flex;gap:40px;flex-wrap:wrap}
.foot-links .fcol b{display:block;margin-bottom:10px}
.foot-links .fcol a{display:block;color:var(--muted);font-size:.88rem;
padding:3px 0;transition:color .2s}
.foot-links .fcol a:hover{color:var(--accent)}
/* v27.27: NEED HELP? rows like the screenshot — labeled lines + socials */
.fcol .hrow{display:block;color:var(--muted);font-size:.88rem;margin-bottom:8px}
.fcol .hrow b{color:var(--ink);font-weight:600}
.fcol .hrow a{display:inline;margin:0;padding:0;color:var(--muted)}
.fcol .hrow.socs{display:flex;gap:8px;margin-top:6px}
.soc{display:flex;align-items:center;justify-content:center;width:34px;
height:34px;border:1px solid var(--line);font-size:.7rem;font-weight:700;
color:var(--muted);text-decoration:none;flex:none}
.soc:hover{color:var(--ink);border-color:var(--ink)}
/* v27.15: 5-column footer — mirrors the original's brand | COLLECTIONS |
   CUSTOM CARE | INFORMATION | NEED HELP? layout */
.foot-links.foot-5col{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;
gap:32px}
.foot-links .fabout{color:var(--muted);font-size:.85rem;line-height:1.6;
margin:8px 0 12px;max-width:260px}
@media(max-width:900px){.foot-links.foot-5col{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-links.foot-5col{grid-template-columns:1fr}}
/* v40.60: habayeb-style trust badges row above footer columns */
.foot-trust{border-bottom:1px solid var(--line);padding:28px 0;margin-bottom:32px}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.trust-item{display:flex;gap:14px;align-items:flex-start}
.trust-ic{flex:none;width:52px;height:52px;border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.trust-tx b{display:block;font-size:.95rem;margin-bottom:4px}
.trust-tx span{font-size:.8rem;color:var(--muted);line-height:1.5}
@media(max-width:900px){.trust-row{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.trust-row{grid-template-columns:1fr}}
.muted{color:var(--muted)}
.center{text-align:center;padding:48px 0}
/* v27.4: pro-engineer polish — micro-interactions, focus states, premium
   placeholders, elegant truncation, refined empty states */
.card .pname{font-size:1.08rem;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
/* v27.25: product-card anatomy mirrors the original — the photo is
   clean; cart / quick-view / wishlist are icon buttons that appear
   over the photo on hover (always visible on touch screens). No text
   button row under the card. */
.card .card-media{position:relative;overflow:hidden}
.card .hover-icons{position:absolute;left:0;right:0;bottom:12px;display:flex;
gap:8px;justify-content:center;z-index:3;opacity:0;transform:translateY(8px);
transition:opacity .25s ease,transform .25s ease}
.card:hover .hover-icons,.card:focus-within .hover-icons{opacity:1;transform:none}
@media (hover:none){.card .hover-icons{opacity:1;transform:none}}
.hi-btn{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.96);
border:1px solid var(--line);font-size:1.05rem;cursor:pointer;display:flex;
align-items:center;justify-content:center;box-shadow:var(--shadow);color:var(--ink);
text-decoration:none}
.hi-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* v40.61: active toggle state (wishlist/compare on) */ .hi-btn.on{background:var(--accent);border-color:var(--accent);color:#fff} .cmp-x{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:.85rem;line-height:1} .cmp-x:hover{background:rgba(255,255,255,.15)}
.ph-empty{background:linear-gradient(135deg,#efe7d6,#e2d5ba)}
/* v40.47: professional product detail page */
.crumbs{display:flex;align-items:center;gap:8px;margin:20px 0;font-size:.88rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs b{color:var(--ink);font-weight:600}
.pdetail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;margin:8px 0 36px;align-items:start}
.pgal-main{position:relative;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,#f3ede1,#e7dcc8);min-height:420px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.pgal-main img{width:100%;height:100%;max-height:520px;object-fit:contain;background:#fff;display:block}
.pgal-main.pg-empty{min-height:420px}
.pgal-main .ph-icon{font-size:5rem}
.pg-badge{position:absolute;top:14px;inset-inline-start:14px}
.pgal-video iframe,.pgal-video video{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#000}.pgal-vidwrap{margin-top:14px}.pgal-vidlabel{font-weight:600;margin-bottom:8px;font-size:.95rem}.pgal-thumbs{display:flex;gap:10px;margin-top:12px}
.pgal-thumb{width:76px;height:76px;border-radius:12px;overflow:hidden;border:2px solid transparent;background:#fff;cursor:pointer;padding:0;box-shadow:var(--shadow)}
.pgal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pgal-thumb.active{border-color:var(--accent)}
.pdetail-info .pname{font-size:1.9rem;line-height:1.3;margin:0 0 10px;font-weight:700}
.ppr{font-size:1.7rem;color:var(--accent);font-weight:800;margin:16px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stock-ok{color:#1e8449;font-weight:600;font-size:.92rem;margin:6px 0 16px}
.popt{margin:16px 0}
.popt>label{display:block;font-weight:600;margin-bottom:8px;font-size:.95rem}
.pcolors{display:flex;gap:10px;flex-wrap:wrap}
.pcolor{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0;transition:transform .15s ease,border-color .15s ease}
.pcolor:hover{transform:scale(1.12)}
.pcolor.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,169,106,.3)}
.pselect{width:100%;max-width:320px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:1rem;font-family:inherit;background:#fff;cursor:pointer}
.pselect:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,169,106,.2)}
.pbuy{display:flex;gap:12px;align-items:stretch;margin:22px 0;flex-wrap:wrap}
.qty-step{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.qty-step button{width:44px;height:100%;min-height:48px;border:0;background:#f7f2e9;font-size:1.3rem;cursor:pointer;color:var(--ink)}
.qty-step button:hover{background:var(--accent);color:#fff}
.qty-step input{width:56px;border:0;text-align:center;font-size:1.05rem;font-family:inherit;padding:12px 0}
.qty-step input:focus{outline:none}
.p-add{flex:1;min-width:180px;font-size:1.05rem;padding:14px 28px}
.p-wish{padding:14px 18px;font-size:1.2rem}
.ptabs{margin:12px 0 36px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.ptab-hd{display:flex;border-bottom:1px solid var(--line);background:#faf7f0}
.ptab{flex:1;padding:15px;border:0;background:none;font-size:1rem;font-weight:600;cursor:pointer;color:var(--muted);font-family:inherit;border-bottom:3px solid transparent}
.ptab.on{color:var(--accent);border-bottom-color:var(--accent);background:#fff}
.ptab-bd{padding:24px;line-height:1.8;color:#4b453a}
.spec-table{width:100%;border-collapse:collapse}
.spec-table th,.spec-table td{padding:12px 16px;text-align:start;border-bottom:1px solid var(--line)}
.spec-table th{width:180px;color:var(--muted);font-weight:600;background:#faf7f0}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
/* v40.81: habayeb-parity expandable sections (specs / size guide / delivery) */
.pacc{margin:0 0 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}
.pacc summary{cursor:pointer;padding:16px 20px;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center}
.pacc summary::-webkit-details-marker{display:none}
.pacc summary::after{content:"+";font-size:1.3rem;color:var(--accent)}
.pacc[open] summary::after{content:"−"}
.pacc .pacc-body{padding:0 20px 20px;line-height:1.9;color:#4b453a}
.pacc .spec-table{margin:0}
/* v40.52: product reviews — honest localStorage reviews, never faked */
.previews{margin:0 0 36px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);padding:24px}
.previews h2{font-size:1.15rem;margin:0 0 16px}
.preview-item{border-top:1px solid var(--line);padding:14px 0}
.preview-item:first-of-type{border-top:0}
.preview-item .pv-name{font-weight:700;margin-bottom:4px}
.preview-item .pv-date{font-size:.78rem;color:var(--muted);margin-bottom:6px}
.preview-item .pv-text{line-height:1.7;color:#4b453a}
.preview-form{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.preview-form h3{font-size:1rem;margin:0 0 12px}
.preview-form label{display:block;margin-bottom:10px;font-size:.9rem;color:var(--muted)}
.preview-form input,.preview-form textarea{width:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:.95rem;box-sizing:border-box}
.preview-form textarea{min-height:90px;resize:vertical}
.preview-ok{color:#15803d;font-weight:600;margin-top:10px}
.muted.small{font-size:.82rem}
@media(max-width:700px){.pdetail{grid-template-columns:1fr;gap:24px}
.pgal-main{min-height:300px}.pbuy{flex-direction:column}.p-add{min-width:0}}
.ph-mono{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.65);
display:flex;align-items:center;justify-content:center;font-size:1.7rem;
font-weight:700;color:#a08c5f;box-shadow:inset 0 0 0 1px rgba(160,140,95,.35)}
/* v40.42: relevant icon placeholder */
.ph-icon{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.7);
display:flex;align-items:center;justify-content:center;font-size:2.2rem;
box-shadow:inset 0 0 0 1px rgba(160,140,95,.35),0 2px 8px rgba(0,0,0,.06)}
.ph.noimg{background:linear-gradient(135deg,#efe7d6,#e2d5ba)}
.cart-count{transition:transform .22s ease}
[data-add]{transition:transform .16s ease,box-shadow .2s ease,filter .2s ease}
[data-add]:active{filter:brightness(.93)}
.btn{transition:transform .16s ease,box-shadow .25s ease,filter .2s ease,background .25s ease}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.empty-state{text-align:center;padding:56px 20px;color:var(--muted)}
.empty-state .big{font-size:3rem;margin-bottom:12px}
/* v41.08: catalog pagination — clean numbered pager under the grid */
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;
margin:28px 0 8px;padding:0;list-style:none}
.pager[hidden]{display:none}
.pager button{min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);
border-radius:10px;background:var(--card,#fff);color:var(--ink);font-size:.95rem;
cursor:pointer;transition:background .2s ease,transform .15s ease}
.pager button:hover:not(:disabled){transform:translateY(-1px)}
.pager button:disabled{opacity:.45;cursor:not-allowed}
.pager button.cur{background:var(--accent);border-color:var(--accent);color:#fff;
font-weight:700;cursor:default}
.pager .pg-dots{padding:0 4px;color:var(--muted);user-select:none}
@media(max-width:700px){.pager button{min-width:36px;height:36px;font-size:.85rem}}
.chip{transition:background .2s ease,color .2s ease,transform .15s ease}
.chip:hover{transform:translateY(-1px)}
.tile,.deal-card{transition:transform .3s ease,box-shadow .3s ease}
input,select,textarea{transition:border-color .2s ease,box-shadow .2s ease}
input:focus,select:focus,textarea:focus{border-color:var(--gold);
box-shadow:0 0 0 3px rgba(201,169,106,.18);outline:none}
@media(max-width:700px){.detail{grid-template-columns:1fr}
.steps{grid-template-columns:1fr}nav.main a{padding:7px 10px;font-size:.85rem}
.hero h1{font-size:1.7rem}.hero{padding:60px 0 52px}
.contact-cards{grid-template-columns:1fr}
/* v27.4: mobile polish — comfortable tap targets, single-column grids */
.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.card .bd{padding:14px}.btn.small{padding:9px 14px;font-size:.85rem}
.top-in{flex-wrap:wrap}.nav-search{order:3;width:100%;margin:8px 0 0}
.nav-search input{width:100%}.nav-search input:focus{width:100%}
table.cart{font-size:.85rem}}
/* v27.5: A-to-Z components — swatches, wishlist, compare, blog, newsletter,
   auth, language switcher */
.swatches{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}
.swatch{width:22px;height:22px;border-radius:50%;border:2px solid #fff;
box-shadow:0 0 0 1px var(--line);cursor:default}
.card .wish-btn{position:absolute;top:10px;inset-inline-end:10px;width:36px;height:36px;
border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;font-size:1.05rem;cursor:pointer;
transition:transform .18s ease,background .2s ease;z-index:2}
.card .wish-btn:hover{transform:scale(1.12)}
.card .wish-btn.on{background:#ffe4ec;border-color:#f9a8c9}
/* v27.15: compare icon button on the photo, under the wishlist heart */
.card .cmp-btn{position:absolute;top:54px;inset-inline-end:10px;width:36px;height:36px;
border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;font-size:1.05rem;cursor:pointer;
transition:transform .18s ease,background .2s ease;z-index:2}
.card .cmp-btn:hover{transform:scale(1.12)}
.card .cmp-btn.on{background:#e0e7ff;border-color:#a5b4fc}
.cmp-row{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.82rem;color:var(--muted)}
.cmp-row input{width:16px;height:16px;accent-color:var(--accent)}
.compare-bar{position:fixed;bottom:0;inset-inline:0;background:#16130e;color:#fff;
padding:12px 20px;display:none;align-items:center;gap:14px;z-index:60;
box-shadow:0 -8px 28px rgba(0,0,0,.25)}
.compare-bar.show{display:flex}
.compare-bar .btn{margin-inline-start:auto}
.cmp-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);
overflow:hidden;box-shadow:var(--shadow)}
.cmp-table th,.cmp-table td{padding:14px;border-bottom:1px solid var(--line);
text-align:start;vertical-align:top}
.cmp-table th{background:#faf8f4;font-size:.85rem;color:var(--muted);width:130px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.blog-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;box-shadow:var(--shadow);transition:transform .3s ease}
.blog-card:hover{transform:translateY(-4px)}
.blog-card .ph{aspect-ratio:16/9;background:linear-gradient(135deg,#f3ede1,#e7dcc8)}
.blog-card .ph img{width:100%;height:100%;object-fit:cover}
.blog-card .bd{padding:18px}
.blog-card h3{font-size:1.05rem;margin-bottom:8px}
.blog-card p{font-size:.9rem;color:var(--muted)}
.newsletter{background:#16130e;color:#f5f1e8;border-radius:var(--radius);
padding:44px 30px;text-align:center;margin:40px 0}
.newsletter h2{color:#fff;margin-bottom:8px}
.newsletter p{color:#b9b2a4;margin-bottom:18px}
.newsletter form{display:flex;gap:10px;max-width:440px;margin:0 auto}
.newsletter input{flex:1;padding:12px 16px;border-radius:999px;border:1px solid #3a352c;
background:#242019;color:#fff}
.newsletter input::placeholder{color:#8a8478}
.newsletter .ok{color:#9fe6b8;margin-top:12px}
.auth-box{max-width:420px;margin:40px auto;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.auth-box h1{margin-bottom:20px;text-align:center}
.auth-box label{display:block;margin-bottom:14px;font-size:.9rem}
.auth-box input{width:100%;padding:11px 14px;border:1px solid var(--line);
border-radius:10px;margin-top:6px}
.auth-box .btn{width:100%;margin-top:6px}
.auth-box .swap{text-align:center;margin-top:16px;font-size:.9rem}
.auth-box .swap a{color:var(--accent);font-weight:600}
.lang-sw select{padding:8px 12px;border-radius:999px;border:1px solid var(--line);
background:#fff;font-size:.85rem;cursor:pointer}
.custom-order{background:linear-gradient(135deg,var(--accent),#8f1d3f);color:#fff;
border-radius:var(--radius);padding:48px 30px;text-align:center;margin:40px 0}
.custom-order h2{color:#fff;margin-bottom:10px}
.custom-order p{opacity:.92;margin-bottom:20px}
.custom-order .btn{background:#fff;color:#16130e}
.testi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.testi-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:26px;box-shadow:var(--shadow);position:relative}
.testi-card::before{content:"“";font-size:3.4rem;color:var(--gold);line-height:1;
position:absolute;top:10px;inset-inline-start:18px;opacity:.5}
.testi-card p{font-style:italic;margin:14px 0 12px}
.testi-card .who{font-weight:700;font-size:.9rem}
.testi-card .stars{color:#d9a441}
/* v27.6: smart-suggestion templates — FAQ accordion, gallery grid,
   honest empty states (never fake content) */
.faq-list{max-width:760px;margin:0 auto}
.faq-list details{background:#fff;border:1px solid var(--line);
border-radius:var(--radius);margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
.faq-list summary{padding:18px 22px;cursor:pointer;font-weight:700;list-style:none;
display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:1.4rem;color:var(--accent);flex-shrink:0}
.faq-list details[open] summary::after{content:"–"}
.faq-list .faq-a{padding:0 22px 20px;color:var(--muted);font-size:.95rem}
.faq-hint{text-align:center;color:var(--muted);font-size:.85rem;margin-top:10px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.gallery-ph{aspect-ratio:1;border-radius:var(--radius);border:2px dashed var(--line);
display:flex;align-items:center;justify-content:center;font-size:2.2rem;
background:#faf8f4;color:var(--muted)}
.empty-note{text-align:center;color:var(--muted);padding:26px 10px;font-size:.95rem}
.size-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);
overflow:hidden;box-shadow:var(--shadow);max-width:640px;margin:0 auto}
.size-table th,.size-table td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:center}
.size-table th{background:#faf8f4;font-size:.85rem;color:var(--muted)}
.soon-card .ph{display:flex;align-items:center;justify-content:center;font-size:2.6rem;
color:var(--muted)}
.nav-dd{position:relative;display:inline-flex;align-items:center}
.nav-dd-menu{display:none;position:absolute;top:100%;inset-inline-start:0;
background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
min-width:180px;z-index:50;overflow:hidden}
.nav-dd-menu a{display:block;padding:10px 14px}
.nav-dd-menu a:hover{background:#f7f5f0}
.nav-dd:hover .nav-dd-menu{display:block}
.nav-dd.open .nav-dd-menu{display:block}
/* v27.15: two-option language toggle («EN | FA») — current language
   highlighted, the other switches the whole shop. */
.lang-toggle{display:inline-flex;align-items:center;gap:8px;
border:1px solid var(--line);border-radius:999px;padding:6px 14px;
font-size:.8rem;font-weight:700;background:#fff}
.lang-toggle .lang-cur{color:var(--accent)}
.lang-toggle .lang-sep{color:var(--muted);font-weight:400}
.lang-toggle .lang-other{color:var(--ink);text-decoration:none}
.lang-toggle .lang-other:hover{color:var(--accent)}
.compare-bar{position:fixed;bottom:16px;inset-inline:16px;max-width:720px;
margin-inline:auto;background:#1c1917;color:#fff;border-radius:14px;
box-shadow:0 14px 30px rgba(0,0,0,.25);display:none;align-items:center;
justify-content:space-between;padding:10px 16px;z-index:60}
.compare-bar.show{display:flex}
.compare-bar .n{background:var(--accent);border-radius:999px;padding:2px 9px;font-size:.8rem}
/* v27.14: layout mirror — ARRANGEMENT follows the original site's layout
   (colors/fonts may shift slightly per the tasteful-difference rule, but
   placement mirrors). Every class below is opt-in via the layout dict;
   without layout the shop keeps its current look. */
/* v27.15: full section-anatomy mirror (top-to-bottom walkthrough):
   hero left + dark CTA, marquee strip, tile title+link, perfume overlay
   text side, story 60/40 + side label + dark button, blog header row +
   3-col cards, 5-column footer. */
.hero.hero-align-left{text-align:start} /* v40.70: logical */
.hero.hero-align-left p{margin-inline:0}
.hero.hero-align-left .hero-rule{margin:0 auto 22px 0}
.hero.hero-align-right{text-align:end} /* v40.70: logical */
.hero.hero-align-right p{margin-inline-start:auto;margin-inline-end:0}
.hero.hero-align-right .hero-rule{margin:0 0 22px auto}
.hero.hero-align-center{text-align:center}
.hero.hero-align-center p{margin-inline:auto}
.hero.hero-align-center .hero-rule{margin:0 auto 22px}
.story-sec{display:flex;gap:30px;align-items:center;margin:8px 0 12px}
.story-img-left{flex-direction:row}
.story-img-right{flex-direction:row-reverse}
/* v27.25: image side is PHYSICAL (mirrors the original) — in RTL a
   plain row would flip the image to the wrong side. */
[dir="rtl"] .story-sec.story-img-left{flex-direction:row-reverse}
[dir="rtl"] .story-sec.story-img-right{flex-direction:row}
.story-sec .story-media{flex:0 0 42%;border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow)}
.story-sec .story-media:empty{display:none}
.story-sec .story-media img{width:100%;height:100%;object-fit:cover;display:block}
.story-sec .story-body{flex:1;min-width:0}
.story-sec .story{max-width:none}
/* v27.15: story 60/40 split — image ~60%, text column with a vertical
   side label like the original */
.story-sec.story-60 .story-media{flex:0 0 58%}
.story-sec.story-60 .story-body{position:relative;padding-inline-start:26px}
.story-side-label{position:absolute;inset-inline-start:0;top:50%;
transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--muted);white-space:nowrap}
.sw-tl-overlay{position:absolute;top:10px;inset-inline-end:10px; /* v40.70: logical */z-index:2;display:flex;
flex-direction:column;gap:6px;margin:0}
.sw-tl-overlay .swatch{width:20px;height:20px}
.vid-btn{position:absolute;bottom:10px;inset-inline-end:10px; /* v40.70: logical */z-index:2;width:44px;height:44px;
border-radius:50%;background:rgba(20,16,12,.72);color:#fff;display:flex;
align-items:center;justify-content:center;font-size:1rem;text-decoration:none;
border:2px solid rgba(255,255,255,.85);box-shadow:0 6px 16px rgba(0,0,0,.3);
transition:transform .2s ease}
.vid-btn:hover{transform:scale(1.08)}
.catalog-wrap{display:flex;gap:26px;align-items:flex-start}
@media(min-width:701px){.catalog-wrap.side-left{flex-direction:row}
.catalog-wrap.side-right{flex-direction:row-reverse}
[dir="rtl"] .catalog-wrap.side-left{flex-direction:row-reverse}
[dir="rtl"] .catalog-wrap.side-right{flex-direction:row}}
.catalog-side{width:252px;flex-shrink:0;background:var(--card);
border:1px solid var(--line);border-radius:var(--radius);padding:20px;
box-shadow:var(--shadow);position:sticky;top:76px}
.catalog-main{flex:1;min-width:0}
.filter-group{border:0;border-bottom:1px solid var(--line);
padding:0 0 14px;margin:0 0 14px}
.filter-group:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.filter-group legend{font-weight:700;margin-bottom:8px;font-size:.95rem;padding:0}
.filter-group>b{display:block;font-weight:700;margin-bottom:8px;font-size:.95rem}
.filter-group label{display:flex;align-items:center;gap:8px;font-size:.9rem;
padding:4px 0;cursor:pointer;color:var(--muted)}
.filter-group label:hover{color:var(--ink)}
.filter-group input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
.fcat{display:block;width:100%;text-align:start;background:none;border:0;
padding:7px 4px;font-size:.92rem;cursor:pointer;color:var(--muted);
font-family:inherit;border-radius:8px}
.fcat:hover{color:var(--ink);background:#faf8f4}
.fcat.active{color:var(--accent);font-weight:700}
.price-range{display:flex;gap:8px}
.price-range input{width:100%;padding:10px 12px;border:1px solid var(--line);
border-radius:10px;font-family:inherit;font-size:.9rem}
.top-in.hd-mirror{flex-wrap:wrap}
.top-in.hd-mirror nav.main.nav-row{order:10;flex:1 1 100%;margin:10px 0 0;justify-content:center}
.hd-icons{display:flex;align-items:center;gap:8px}
.hd-ic{position:relative;width:36px;height:36px;border-radius:50%;
border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
font-size:1.15rem;background:#fff;transition:border-color .2s}
.hd-ic:hover{border-color:var(--gold)}
.hd-ic .cart-count{top:-4px;inset-inline-end:-4px}
.top-in.hd-logo-center .brand{margin-inline:auto}
.top-in.hd-logo-right .brand{order:9;margin-inline-start:auto}
/* v27.17: black top bar + section-head anatomy */
.topbar{background:#111;color:#eee;font-size:.82rem}
.topbar-in{display:flex;justify-content:space-between;align-items:center;
gap:12px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.tb-left{opacity:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-right{display:flex;align-items:center;gap:10px;white-space:nowrap}
.tb-sep{opacity:.4;margin:0 8px}
.topbar .lang-toggle{border:0;padding:0;background:none}
/* v27.25: the language toggle lives on the black bar — its text must
   be light, or it is invisible (dark-on-black). */
.topbar .lang-toggle .lang-cur{color:#fff}
.topbar .lang-toggle .lang-other{color:#e8e8e8}
.topbar .lang-toggle .lang-sep{color:#777}
.topbar .tb-cur{color:#eee}
/* v37: currency hover-dropdown (mirrors the original's top-bar switcher) */
.tb-cur-dd{position:relative;display:inline-block}
.tb-cur-btn{background:none;border:0;color:#eee;font:inherit;cursor:pointer;
padding:4px 6px;display:inline-flex;align-items:center;gap:4px}
.tb-cur-btn:hover{color:#fff}
.tb-cur-arrow{font-size:.7em;opacity:.7}
.tb-cur-menu{display:none;position:absolute;top:100%;inset-inline-end:0;
min-width:150px;list-style:none;margin:4px 0 0;padding:6px;background:#fff;
color:#222;border:1px solid var(--line);border-radius:10px;
box-shadow:0 10px 28px rgba(0,0,0,.18);z-index:60}
.tb-cur-dd:hover .tb-cur-menu,.tb-cur-dd:focus-within .tb-cur-menu{display:block}
.tb-cur-opt{display:block;width:100%;text-align:start;background:none;border:0;
padding:9px 12px;cursor:pointer;font-size:.9rem;color:#222;border-radius:7px}
.tb-cur-opt:hover{background:#f4f4f4}
.feat-head{display:flex;justify-content:space-between;align-items:flex-end;
gap:16px;margin:34px 0 18px}
.feat-head .section-title{margin:0}
.overline{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin-bottom:6px}
.see-all{font-size:.9rem;color:var(--ink);text-decoration:underline;
text-underline-offset:3px;white-space:nowrap}
.blog-head{display:flex;justify-content:space-between;align-items:flex-end;
gap:16px;margin:34px 0 18px}
.blog-head .section-title{margin:0}
@media(max-width:700px){.catalog-wrap{flex-direction:column}
.catalog-side{width:100%;position:static}
.story-sec{flex-direction:column}
.story-sec .story-media{flex-basis:auto;width:100%}}

/* v40.62: per-theme design overrides (body.theme-<key>) */

/* v27.28: visual DNA overrides — the original's own colors/shapes */

/* v40.74: DNA layout variant composition */
.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}.hero{padding:56px 0}
/* v40.79: design.md card/hero/spacing choices */

/* v40.74: tasteful motion — professional, never cluttered */
/* v40.74 motion: soft reveal on scroll */.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}/* v40.74 motion: subtle Ken Burns on the active banner slide */@keyframes dna-kb{from{transform:scale(1)}to{transform:scale(1.07)}}.hslide.on{animation:dna-kb 14s ease-in-out infinite alternate}/* v40.74 motion: respect users who prefer no motion */@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}