/* =====================================================================
   SASA STORE — واجهة الموقع
   Concept: the shop's own artifacts — the gold channel-letter sign,
   opening-night string lights, the hang tag, gold hangers.
   ===================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Messiri";src:url(../fonts/el-messiri-arabic-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Messiri";src:url(../fonts/el-messiri-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Ruqaa";src:url(../fonts/aref-ruqaa-arabic-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Cinzel";src:url(../fonts/cinzel-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --gold:#B48B4A; --gold-hi:#DAC5A5; --gold-lo:#7A5E32; --gold-rgb:180 139 74;
  --offer:#B31922; --offer-hi:#C2474E; --offer-lo:#741016; --offer-rgb:179 25 34;
  --ink:#121212; --ink-2:#1A1511; --ink-3:#221B15;
  --cream:#F8F5EF; --beige:#E7D8C5; --muted:#CDC3B4; --muted-2:#A39888;
  --paper-ink:#1D1913; --paper-muted:#5B5247; --paper-line:#E7DCCB;
  --r-lg:24px; --r-md:16px;
  --wrap:1180px; --pad:clamp(18px,5vw,40px);
  --font:"Plex","Segoe UI",Tahoma,system-ui,sans-serif;
  --font-display:"Messiri","Plex","Segoe UI",Tahoma,sans-serif;
  --font-ruqaa:"Ruqaa","Messiri","Plex",serif;
  --font-sign:"Cinzel","Trajan Pro","Times New Roman",serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --header-h:64px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--ink);color:var(--cream);font:400 17px/1.75 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.32;margin:0;letter-spacing:0}
p,figure,dl,dd{margin:0}
.i{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:middle}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:min(100% - 2*var(--pad),var(--wrap));margin-inline:auto}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px;border-radius:8px}
.skip{position:absolute;inset-inline-start:12px;top:-80px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
[hidden]{display:none!important}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:15px;font-weight:700;font-size:17px;line-height:1.25;border:1.5px solid transparent;position:relative;overflow:hidden;text-align:center;transition:transform .18s var(--ease),box-shadow .2s,background-color .2s,border-color .2s,color .2s}
.btn .i{width:22px;height:22px}
.btn:active{transform:scale(.97)}
.btn-wa{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 70%);color:#1B1307;box-shadow:0 12px 28px -14px rgb(var(--gold-rgb)/.95),inset 0 1px 0 rgb(255 255 255/.5)}
.btn-wa:hover{box-shadow:0 16px 34px -12px rgb(var(--gold-rgb)/1),inset 0 1px 0 rgb(255 255 255/.55)}
.btn-line{background:rgb(255 255 255/.04);border-color:rgb(var(--gold-rgb)/.55);color:var(--cream)}
.btn-line .i{color:var(--gold-hi)}
.btn-line:hover{background:rgb(var(--gold-rgb)/.13);border-color:var(--gold)}
.btn-xl{min-height:58px;font-size:18.5px;padding-inline:26px}
.btn-block{width:100%}
.anim .btn-xl::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgb(255 255 255/.6) 50%,transparent 70%);transform:translateX(130%);animation:shine 6s 2.6s infinite;pointer-events:none}
@keyframes shine{0%,70%{transform:translateX(130%)}100%{transform:translateX(-130%)}}
.theme-light .btn-line{background:#fff;color:var(--paper-ink);border-color:rgb(var(--gold-rgb)/.6)}
.theme-light .btn-line .i{color:var(--gold-lo)}
.cta{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Ticker (شريط العروض) ---------- */
.ticker{position:relative;z-index:31;overflow:hidden;background:linear-gradient(90deg,var(--offer-lo),var(--offer) 22%,var(--offer) 78%,var(--offer-lo));color:#FFF5EA;font-weight:600;font-size:15px;line-height:1.4;border-bottom:1px solid rgb(0 0 0/.3)}
.ticker-track{display:flex;width:max-content}
.ticker-track.is-ready{animation:tick var(--dur,30s) linear infinite}
.ticker-list{display:flex;list-style:none;margin:0;padding:0}
.ticker-list li{display:flex;align-items:center;gap:10px;padding:9px 20px 9px 4px;white-space:nowrap}
.ticker-sep{width:19px;height:19px;color:#FFD69B}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(var(--shift,0px))}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:rgb(18 18 18/.84);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid rgb(var(--gold-rgb)/.22);transition:box-shadow .3s}
.site-header.is-scrolled{box-shadow:0 10px 30px -18px rgb(0 0 0/.9)}
.header-in{display:flex;align-items:center;gap:14px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;margin-inline-end:auto;min-height:48px}
.brand img{width:44px;height:44px;object-fit:contain}
.brand-text b{display:block;font-family:var(--font-sign);font-weight:700;font-size:17px;letter-spacing:.14em;color:var(--gold-hi);line-height:1.15}
.brand-text small{display:block;font-size:12.5px;color:var(--muted-2);line-height:1.35}
.nav{display:none}
.header-actions{display:flex;gap:8px}
.hbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:46px;height:46px;padding:0 11px;border-radius:999px;border:1px solid rgb(var(--gold-rgb)/.45);color:var(--gold-hi);font-weight:700;transition:background-color .2s,border-color .2s}
.hbtn .i{width:21px;height:21px}
.hbtn:hover{background:rgb(var(--gold-rgb)/.12)}
.hbtn-wa{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#1B1307;border-color:transparent}
.hbtn-wa:hover{background:var(--gold-hi)}
.hbtn-text{display:none}
@media (min-width:960px){
  .nav{display:flex;gap:2px}
  .nav a{padding:8px 12px;border-radius:10px;font-weight:600;font-size:15.5px;color:var(--muted);transition:color .2s,background-color .2s}
  .nav a:hover{color:var(--gold-hi);background:rgb(var(--gold-rgb)/.09)}
  .hbtn-text{display:inline}
  .hbtn-wa{padding-inline:16px}
}

/* ---------- Hero: lights + sign + vitrine ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:84px 0 60px;background:
  radial-gradient(90% 46% at 50% 12%,rgb(var(--gold-rgb)/.2),transparent 70%),
  radial-gradient(60% 40% at 85% 95%,rgb(var(--offer-rgb)/.14),transparent 70%),
  var(--ink)}
.lights{position:absolute;inset-inline:0;top:0;height:100px;pointer-events:none;z-index:2}
.lights svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lights path{fill:none;stroke:#4A3B2A;stroke-width:1.6}
.lights--d{display:none}
.bulb{position:absolute;left:var(--x);top:var(--y);width:9px;height:13px;margin:-1px 0 0 -4.5px;border-radius:50% 50% 50% 50%/42% 42% 58% 58%;background:radial-gradient(circle at 50% 38%,#fff 0 16%,var(--b) 46%,var(--b2) 100%);box-shadow:0 0 12px 3px var(--glow),0 0 2px 1px var(--glow)}
.bulb::before{content:"";position:absolute;left:50%;top:-4px;width:5px;height:5px;margin-left:-2.5px;border-radius:1px;background:#2B231B}
.bulb-w{--b:#FFF2D2;--b2:#F4C877;--glow:rgb(255 214 140/.6)}
.bulb-a{--b:#FFD592;--b2:#E39A3B;--glow:rgb(255 170 70/.55)}
.bulb-g{--b:#FBE5AE;--b2:var(--gold);--glow:rgb(var(--gold-rgb)/.6)}
.anim .bulb{animation:bulb-on .45s var(--d) both,twinkle var(--t) calc(var(--d) + .45s) ease-in-out infinite alternate}
@keyframes bulb-on{0%{opacity:.08}60%{opacity:1}100%{opacity:1}}
@keyframes twinkle{0%{opacity:1}100%{opacity:.5}}
@media (min-width:760px){.lights--m{display:none}.lights--d{display:block}}

.fascia{position:relative;width:min(100% - 28px,1060px);margin:0 auto;padding:20px 10px 22px;border-radius:12px;background:
  repeating-linear-gradient(90deg,rgb(255 255 255/.012) 0 2px,transparent 2px 5px),
  linear-gradient(180deg,#262626,#171717 58%,#1d1d1d);
  box-shadow:0 34px 60px -34px rgb(0 0 0/.95),0 0 0 1px rgb(255 255 255/.04),0 0 80px -20px rgb(var(--gold-rgb)/.35)}
.fascia::before{content:"";position:absolute;inset:0 0 auto;height:5px;border-radius:12px 12px 0 0;background:linear-gradient(90deg,#8E6A30,#F3D99B 30%,var(--gold) 55%,#F7E2AC 78%,#8E6A30)}
.sign{text-align:center;line-height:1}
.sign-letters{display:inline-flex;align-items:flex-end;font-family:var(--font-sign);font-weight:700;font-size:clamp(34px,10.4vw,116px);letter-spacing:.035em}
.sign .l{display:inline-block;color:var(--gold-hi);padding:0 .01em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .sign .l{background:linear-gradient(180deg,#FFF6DC 0%,#F2D899 22%,var(--gold) 50%,#ECCF91 72%,#94702F 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.sign .l{filter:drop-shadow(0 1px 0 #7C5B27) drop-shadow(0 2px 0 #5A411B) drop-shadow(0 0 14px rgb(255 206 120/.4))}
.sign .gap{width:.3em}
.anim .sign .l{animation:sign-on 1.15s calc(.5s + var(--i) * .085s) steps(1,end) both}
@keyframes sign-on{0%{opacity:.07}16%{opacity:1}24%{opacity:.22}36%{opacity:1}46%{opacity:.5}58%,100%{opacity:1}}
.slogan{margin:16px auto 0;text-align:center;font-family:var(--font-ruqaa);font-weight:700;font-size:clamp(25px,6.6vw,42px);line-height:1.5;color:var(--gold-hi)}
.anim .slogan{animation:rise .8s 1.5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hero-grid{display:grid;gap:36px;margin-top:22px}
.hero-copy{text-align:center}
.hero h1{font-size:clamp(30px,7.6vw,58px);line-height:1.3;color:var(--cream);text-wrap:balance}
.lead{margin:14px auto 0;max-width:34em;color:var(--muted);font-size:clamp(16.5px,4.3vw,19px)}
.cta-hero{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cta-hero .btn-wa{grid-column:1/-1}
.cta-hero .btn-line{padding-inline:10px;gap:8px;font-size:16.5px;white-space:nowrap}
.trust{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;color:var(--muted);font-size:15px}
.trust li{display:flex;align-items:center;gap:7px}
.trust .i{width:21px;height:21px;color:var(--gold-hi)}
.anim .hero-copy{animation:rise .8s 1.7s var(--ease) both}

.hero-media{position:relative}
.vitrine{position:relative;max-width:500px;margin-inline:auto;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:#000;border:1px solid rgb(var(--gold-rgb)/.55);box-shadow:0 44px 80px -44px rgb(0 0 0/.95),0 0 0 7px rgb(var(--gold-rgb)/.08)}
.hero-video{width:100%;height:100%;object-fit:cover}
.sticker{position:absolute;top:16px;inset-inline-start:16px;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;padding:14px;text-align:center;background:radial-gradient(circle at 34% 28%,var(--offer-hi),var(--offer) 58%,var(--offer-lo));color:#FFF4E4;font-family:var(--font-ruqaa);font-weight:700;font-size:20px;line-height:1.25;transform:rotate(-12deg);box-shadow:0 12px 26px -10px rgb(0 0 0/.7),inset 0 0 0 2px rgb(255 255 255/.22)}
.sticker::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1.5px dashed rgb(255 240 220/.55)}
.anim .sticker{animation:pop 0.7s 2.1s cubic-bezier(.3,1.6,.5,1) both,wobble 6s 3s ease-in-out infinite}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(-12deg)}}
@keyframes wobble{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-5deg) scale(1.04)}}

@media (min-width:900px){
  .hero{padding:80px 0 80px}
  .fascia{padding:14px 10px 16px}
  .sign-letters{font-size:clamp(56px,7.2vw,100px)}
  .slogan{font-size:clamp(28px,2.6vw,36px);margin-top:10px}
  .hero h1{font-size:clamp(38px,3.9vw,54px)}
  .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:start;gap:56px;margin-top:26px}
  .hero-copy{padding-top:clamp(8px,4vh,48px)}
  .hero-copy{text-align:start}
  .lead{margin-inline:0}
  .cta-hero{display:flex;flex-wrap:wrap}
  .cta-hero .btn-wa{flex:1 1 100%}
  .cta-hero .btn-line{flex:1 1 0}
  .trust{justify-content:flex-start}
  .vitrine{max-width:460px;margin-inline-start:auto;margin-inline-end:0}
  .sticker{width:124px;height:124px;font-size:23px}
}

/* ---------- Sections ---------- */
.sec{position:relative;padding:clamp(60px,9vw,108px) 0}
.theme-dark{background:var(--ink);color:var(--cream)}
.theme-warm{background:linear-gradient(180deg,#16110D,#1E1712 60%,#17120E);color:var(--cream)}
.theme-light{background:var(--cream);color:var(--paper-ink)}
.sec-head{max-width:38em;margin-bottom:clamp(26px,4vw,40px)}
.sec-head h2{font-size:clamp(29px,6.4vw,48px);line-height:1.3;text-wrap:balance}
.sec-head p{margin-top:10px;color:var(--muted);font-size:clamp(16.5px,2.4vw,18.5px)}
.theme-light .sec-head p{color:var(--paper-muted)}
.theme-light h2,.theme-light h3{color:var(--paper-ink)}

/* ---------- Offers ---------- */
.offers{display:grid;gap:16px}
@media (min-width:760px){.offers{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}}
.offer{position:relative;display:grid;border-radius:22px;overflow:hidden;background:var(--ink-2);border:1px solid rgb(var(--gold-rgb)/.28);min-height:200px}
.offer.has-img{grid-template-columns:38% 1fr}
.offer--red{background:linear-gradient(155deg,var(--offer) 0%,var(--offer-lo) 78%);border-color:rgb(255 255 255/.12);color:#FFF6EC}
.offer--gold{background:linear-gradient(155deg,#2D2317,#17120D 80%);border-color:rgb(var(--gold-rgb)/.55)}
.offer-media{position:relative}
.offer-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.offer-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 20px 22px}
.offer-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:rgb(255 255 255/.12);color:#FFE3BA}
.offer--gold .offer-ico{background:rgb(var(--gold-rgb)/.18);color:var(--gold-hi)}
.offer-ico .i{width:24px;height:24px}
.offer h3{font-size:clamp(22px,5.4vw,28px);line-height:1.3}
.offer p{font-size:15.5px;color:rgb(255 246 236/.86)}
.offer .btn{margin-top:auto}
.offer--red .btn-wa{background:#FFF5E8;color:var(--offer-lo);box-shadow:0 12px 26px -14px rgb(0 0 0/.8)}
.countdown{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.cd-label{font-weight:700;margin-inline-end:4px}
.cd-box{display:grid;justify-items:center;min-width:54px;padding:6px 4px 5px;border-radius:11px;background:rgb(0 0 0/.28);border:1px solid rgb(255 255 255/.14)}
.cd-box b{font:700 22px/1.1 var(--font);font-variant-numeric:tabular-nums}
.cd-box small{font-size:11.5px;opacity:.85}
@media (max-width:420px){.offer.has-img{grid-template-columns:1fr}.offer-media{aspect-ratio:16/9}}

/* ---------- Products as hang tags ---------- */
.tags{list-style:none;margin:0 calc(var(--pad) * -1);padding:18px var(--pad) 20px;display:grid;grid-auto-flow:column;grid-auto-columns:74%;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none}
.tags::-webkit-scrollbar{display:none}
.tags li{scroll-snap-align:start;display:flex}
@media (min-width:700px){.tags{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin-inline:0;padding-inline:0;row-gap:28px}}
@media (min-width:1100px){.tags{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tcard{position:relative;display:flex;flex-direction:column;width:100%;border-radius:20px;background:linear-gradient(180deg,#241C15,#1B1510);border:1px solid rgb(var(--gold-rgb)/.24);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.tcard:hover{transform:translateY(-5px);border-color:rgb(var(--gold-rgb)/.65);box-shadow:0 26px 40px -26px rgb(0 0 0/.9)}
.tcard-media{display:block;aspect-ratio:4/5;border-radius:19px 19px 0 0;overflow:hidden;background:#2A2119}
.tcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tcard:hover .tcard-media img{transform:scale(1.045)}
.tag{position:absolute;z-index:2;top:-10px;inset-inline-start:14px;width:46%;min-width:118px;max-width:152px;padding:30px 10px 14px;text-align:center;color:var(--paper-ink);transform-origin:50% 8px;transform:rotate(-5deg);filter:drop-shadow(0 10px 10px rgb(0 0 0/.45));isolation:isolate}
.tag::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#FFFDF8,var(--cream) 55%,#EEE3D1);clip-path:polygon(20% 0,80% 0,100% 13%,100% 100%,0 100%,0 13%)}
.tag::after{content:"";position:absolute;inset:22% 6px 6px;z-index:-1;border:1px dashed rgb(var(--gold-rgb)/.8);border-radius:4px}
.tag-hole{position:absolute;top:9px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#1C1610;box-shadow:inset 0 1px 2px rgb(0 0 0/.7),0 0 0 2.5px var(--gold)}
.tag-hole::before{content:"";position:absolute;left:50%;bottom:50%;width:1.6px;height:26px;margin-left:-.8px;background:linear-gradient(var(--gold-hi),var(--gold));transform-origin:50% 100%;transform:rotate(10deg)}
.tag-name{display:block;font-family:var(--font-ruqaa);font-weight:700;font-size:clamp(20px,5.4vw,23px);line-height:1.4}
.tag-badge{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;background:var(--offer);color:#FFF5EA;font-size:12.5px;font-weight:700;line-height:1.6}
.tag-price{display:block;margin-top:6px;font-weight:700;font-size:15px;color:var(--gold-lo)}
.tcard-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:14px 16px 16px}
.tcard-desc{color:var(--muted);font-size:15px;line-height:1.7}
.tcard-cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;min-height:28px;color:var(--gold-hi);font-weight:700}
.tcard-cta .i{width:18px;height:18px;transition:transform .25s var(--ease)}
.tcard:hover .tcard-cta .i{transform:translateX(-5px)}
.anim .tcard.in .tag{animation:swing 1.9s cubic-bezier(.3,.6,.3,1) calc(var(--k) * .12s) both}
@keyframes swing{0%{transform:rotate(-26deg)}24%{transform:rotate(13deg)}44%{transform:rotate(-10deg)}62%{transform:rotate(5deg)}80%{transform:rotate(-7deg)}100%{transform:rotate(-5deg)}}
.notice{display:flex;align-items:flex-start;gap:8px;margin-top:6px;font-size:15px;color:var(--beige)}
.notice .i{margin-top:3px;color:var(--gold-hi)}

/* ---------- Steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.step{position:relative;display:flex;align-items:flex-start;gap:16px;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--paper-line)}
.step-n{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;font-family:var(--font-display);font-size:27px;line-height:1;color:#fff;background:linear-gradient(180deg,var(--gold),var(--gold-lo));box-shadow:0 8px 16px -8px rgb(var(--gold-rgb)/.9)}
.step:not(:last-child)::after{content:"";position:absolute;z-index:2;inset-inline-start:44px;top:72px;bottom:-32px;border-inline-start:2px dashed rgb(var(--gold-rgb)/.65)}
.step h3{font-size:20px;line-height:1.4}
.step p{margin-top:4px;color:var(--paper-muted);font-size:15.5px}
.steps-cta{margin-top:26px}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(3,1fr);gap:18px}
  .step{flex-direction:column;padding:22px}
  .step:not(:last-child)::after{top:48px;bottom:auto;inset-inline-start:auto;inset-inline-end:-20px;width:22px;border-inline-start:0;border-top:2px dashed rgb(var(--gold-rgb)/.65)}
}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;grid-auto-flow:dense;gap:10px}
.g-item{position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;background:#E5DACB}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.g-item:hover img{transform:scale(1.05)}
.g-item:nth-child(6n+1),.g-item:nth-child(6n+4){grid-row:span 2}
@media (min-width:800px){
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:230px;gap:14px}
  .g-item:nth-child(6n+4){grid-row:auto}
  .g-item:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
}

/* ---------- Videos ---------- */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.vid--horizontal{grid-column:1/-1}
.vid-frame{position:relative;overflow:hidden;border-radius:18px;background:#000;border:1px solid rgb(var(--gold-rgb)/.3)}
.vid--horizontal .vid-frame{aspect-ratio:16/9}
.vid--vertical .vid-frame{aspect-ratio:9/16}
.vid video{width:100%;height:100%;object-fit:cover}
.vid.is-playing video{object-fit:contain}
.vid-play{position:absolute;inset:0;margin:auto;width:70px;height:70px;display:grid;place-items:center;border:0;border-radius:50%;background:rgb(18 18 18/.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--gold-hi);box-shadow:0 0 0 2px rgb(var(--gold-rgb)/.75),0 10px 30px rgb(0 0 0/.5);transition:transform .2s var(--ease)}
.vid-play:hover{transform:scale(1.06)}
.vid-play .i{width:30px;height:30px}
.vid.is-playing .vid-play{display:none}
.vid figcaption{margin-top:9px;font-weight:600;font-size:15px;color:var(--muted)}
@media (min-width:900px){.videos{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:center}.vid--horizontal{grid-column:span 2}}

/* ---------- Visit ---------- */
.visit-sign{width:min(100% - 2*var(--pad),1100px);margin:0 auto clamp(30px,5vw,52px);border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -30px rgb(0 0 0/.95),0 0 60px -12px rgb(var(--gold-rgb)/.4)}
.visit-sign img{width:100%}
.visit-grid{display:grid;gap:24px}
.visit-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:22px;border:1px solid rgb(var(--gold-rgb)/.3)}
.visit-info{display:grid;gap:10px;margin:0 0 22px}
.visit-info div{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:15px;background:rgb(255 255 255/.04);border:1px solid rgb(var(--gold-rgb)/.22)}
.visit-info dt{display:flex;align-items:center;gap:8px;color:var(--gold-hi);font-weight:700;font-size:14.5px}
.visit-info dt .i{width:19px;height:19px}
.visit-info dd{font-size:19px;font-weight:600}
.visit-info dd a{text-decoration:underline;text-decoration-color:rgb(var(--gold-rgb)/.6);text-underline-offset:5px}
.cta-stack{display:grid;gap:10px}
.visit-card .sec-head{margin-bottom:22px}
.map-embed{margin-top:30px;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid rgb(var(--gold-rgb)/.3);background:#1d1d1d}
.map-embed iframe{display:block;width:100%;height:100%;border:0}
@media (min-width:900px){.visit-grid{grid-template-columns:1fr 1fr;align-items:center;gap:52px}.cta-stack{grid-template-columns:1fr 1fr}.cta-stack .btn-wa{grid-column:1/-1}}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:860px}
.qa{border-radius:16px;background:#fff;border:1px solid var(--paper-line);overflow:hidden}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:16px 20px;font-weight:700;font-size:17.5px;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary .i{color:var(--gold-lo);transition:transform .25s var(--ease)}
.qa[open] summary .i{transform:rotate(45deg)}
.qa-a{padding:0 20px 18px;color:#4D463C}

/* ---------- Social ---------- */
.socials{display:grid;gap:12px;max-width:900px}
@media (min-width:700px){.socials{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.soc{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 18px;border-radius:18px;border:1px solid rgb(var(--gold-rgb)/.32);background:rgb(255 255 255/.03);transition:border-color .2s,background-color .2s,transform .2s var(--ease)}
.soc:hover{border-color:var(--gold);background:rgb(var(--gold-rgb)/.08);transform:translateY(-2px)}
.soc .i{width:30px;height:30px;padding:9px;box-sizing:content-box;border-radius:14px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#1B1307}
.soc b{display:block;font-size:18px}
.soc small{display:block;color:var(--muted);font-size:14.5px}

/* ---------- Optional section types ---------- */
.features{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:760px){.features{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.features li{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:18px;background:rgb(255 255 255/.04);border:1px solid rgb(var(--gold-rgb)/.22)}
.theme-light .features li{background:#fff;border-color:var(--paper-line)}
.feat-ico{width:30px;height:30px;color:var(--gold-hi)}
.theme-light .feat-ico{color:var(--gold-lo)}
.features h3{font-size:19px}
.features p{margin-top:2px;font-size:15px;color:var(--muted)}
.theme-light .features p{color:var(--paper-muted)}
.ti-grid{display:grid;gap:26px;align-items:center}
.ti-media img{width:100%;border-radius:22px;border:1px solid rgb(var(--gold-rgb)/.3)}
.ti-copy .sec-head{margin-bottom:20px}
@media (min-width:900px){.ti-grid{grid-template-columns:1fr 1fr;gap:56px}.ti--start .ti-media{order:0}.ti--end .ti-media{order:2}.ti--noimg{grid-template-columns:1fr}}
.sec-banner{position:relative;isolation:isolate;min-height:clamp(340px,52vw,520px);display:grid;align-items:end;padding:0;background:var(--ink-2);overflow:hidden}
.banner-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.sec-banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgb(10 8 6/.92) 0%,rgb(10 8 6/.35) 55%,transparent)}
.banner--plain{align-items:center;background:linear-gradient(150deg,var(--offer),var(--offer-lo))}
.banner--plain::after{display:none}
.banner-copy{padding:40px 0;display:grid;gap:12px;justify-items:start}
.banner-copy h2{font-size:clamp(30px,6.4vw,54px);max-width:16em}
.banner-copy p{max-width:34em;color:rgb(255 246 236/.9);font-size:clamp(16.5px,2.4vw,19px)}
.cta-wrap{max-width:820px;text-align:center}
.cta-wrap .sec-head{margin-inline:auto}
.cta-center{justify-content:center}

/* ---------- Footer ---------- */
.site-footer{background:#0C0B0A;border-top:1px solid rgb(var(--gold-rgb)/.25);padding:48px 0 calc(116px + env(safe-area-inset-bottom));color:var(--muted)}
.foot{display:grid;gap:26px}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand img{width:76px;height:76px}
.foot-name{font-family:var(--font-sign);font-weight:700;color:var(--gold-hi);letter-spacing:.14em;font-size:20px;line-height:1.3}
.foot-slogan{font-family:var(--font-ruqaa);font-weight:700;color:var(--cream);font-size:21px;line-height:1.5}
.foot-info{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.foot-info li{display:flex;align-items:center;gap:10px}
.foot-info .i{color:var(--gold-hi)}
.foot-info a{text-decoration:underline;text-decoration-color:rgb(var(--gold-rgb)/.5);text-underline-offset:4px}
.foot-social{display:flex;gap:10px}
.foot-soc{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgb(var(--gold-rgb)/.45);color:var(--gold-hi);transition:background-color .2s}
.foot-soc:hover{background:rgb(var(--gold-rgb)/.14)}
.foot-note{margin-top:30px;padding-inline:var(--pad);text-align:center;font-size:14.5px;color:var(--muted-2)}
.foot-copy{margin-top:6px;text-align:center;font-size:13.5px;color:#82796C}
@media (min-width:900px){.foot{grid-template-columns:1.2fr 1fr auto;align-items:center}.site-footer{padding-bottom:110px}}

/* ---------- Dock (sticky actions) ---------- */
.dock{position:fixed;z-index:40;inset-inline:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:6px;padding:6px;border-radius:20px;background:rgb(22 18 14/.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgb(var(--gold-rgb)/.42);box-shadow:0 18px 40px -12px rgb(0 0 0/.85);transition:transform .4s var(--ease),opacity .3s}
.dock a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:52px;border-radius:14px;font-weight:700;font-size:15.5px;color:var(--cream)}
.dock a:hover{background:rgb(var(--gold-rgb)/.1)}
.dock .i{width:21px;height:21px;color:var(--gold-hi)}
.dock .dock-wa{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#1B1307}
.dock .dock-wa .i{color:#1B1307}
.dock.is-hidden{transform:translateY(140%);opacity:0;pointer-events:none}
@media (min-width:900px){.dock{inset-inline:auto 24px;bottom:24px;grid-template-columns:auto auto auto;padding:6px}.dock a{padding-inline:16px}}

/* ---------- Dialogs: sheet / lightbox / popup ---------- */
dialog{color:inherit}
.sheet,.popup{padding:0;border:0;background:#19140F;color:var(--cream);overscroll-behavior:contain}
.sheet::backdrop,.popup::backdrop{background:rgb(6 5 4/.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:560px;max-height:92vh;max-height:92dvh;border-radius:26px 26px 0 0;overflow:auto;box-shadow:0 -24px 60px rgb(0 0 0/.6)}
.sheet[open]{animation:sheet-up .4s var(--ease)}
.sheet.closing{animation:sheet-down .24s ease-in forwards}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-down{to{transform:translateY(100%)}}
.sheet-in{position:relative}
.sheet-in:focus,.popup-in:focus,.lb-fig:focus{outline:none}
.sheet-in::before{content:"";position:absolute;z-index:3;top:9px;left:50%;width:46px;height:5px;margin-left:-23px;border-radius:3px;background:rgb(255 255 255/.55)}
.sheet-media{aspect-ratio:16/10;overflow:hidden;background:#2A2119}
.sheet-media img{width:100%;height:100%;object-fit:cover}
.sheet-body{display:grid;gap:10px;padding:18px 20px calc(22px + env(safe-area-inset-bottom))}
.sheet-kicker{display:flex;align-items:center;gap:8px;color:var(--gold-hi);font-weight:700;font-size:14.5px}
.sheet-kicker .i{width:19px;height:19px}
.sheet h3{font-size:clamp(25px,6.4vw,32px);line-height:1.3}
.sheet-price{font-weight:700;font-size:19px;color:var(--gold-hi)}
.sheet-desc{color:var(--muted)}
.sheet-note{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:rgb(var(--gold-rgb)/.1);border:1px solid rgb(var(--gold-rgb)/.3);font-size:14.5px;color:var(--beige)}
.sheet-note .i{margin-top:2px;color:var(--gold-hi)}
.sheet-actions{display:grid;gap:10px;margin-top:6px}
.xbtn{position:absolute;z-index:4;top:12px;inset-inline-end:12px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgb(255 255 255/.22);background:rgb(12 10 8/.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff}
.xbtn .i{width:22px;height:22px}
@media (min-width:760px){
  .sheet{inset:0;margin:auto;max-width:860px;height:fit-content;border-radius:26px}
  .sheet-in{display:grid;grid-template-columns:1fr 1fr}
  .sheet-in::before{display:none}
  .sheet-media{aspect-ratio:auto;min-height:100%}
  .sheet-body{align-content:center;padding:30px 28px}
  .sheet[open]{animation:pop-in .32s var(--ease)}
  .sheet.closing{animation:pop-out .2s ease-in forwards}
}
@keyframes pop-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes pop-out{to{opacity:0;transform:scale(.96)}}

.lightbox{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgb(8 6 4/.96);color:#fff}
.lightbox[open]{display:grid;place-items:center}
.lightbox::backdrop{background:rgb(0 0 0/.8)}
.lb-fig{display:grid;justify-items:center;gap:12px;padding:62px 12px 76px}
.lb-fig img{max-width:min(96vw,1100px);max-height:76vh;max-height:76dvh;width:auto;height:auto;object-fit:contain;border-radius:12px}
.lb-fig figcaption{max-width:40em;text-align:center;color:var(--muted);font-size:15px}
.lb-nav{position:absolute;top:50%;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1px solid rgb(255 255 255/.25);background:rgb(0 0 0/.45);color:#fff}
.lb-prev{inset-inline-start:12px}
.lb-next{inset-inline-end:12px}
.lb-count{position:absolute;inset-inline:0;bottom:22px;text-align:center;color:var(--muted);font-size:15px}

.popup{position:fixed;inset:0;margin:auto;width:min(100% - 28px,440px);height:fit-content;max-height:90vh;max-height:90dvh;border-radius:24px;overflow:auto;box-shadow:0 30px 80px rgb(0 0 0/.7)}
.popup[open]{animation:pop-in .38s cubic-bezier(.3,1.4,.5,1)}
.popup--red{background:linear-gradient(160deg,var(--offer),var(--offer-lo) 85%)}
.popup--gold{background:linear-gradient(160deg,#2D2317,#151009 85%);border:1px solid rgb(var(--gold-rgb)/.5)}
.popup-media{aspect-ratio:16/10;overflow:hidden}
.popup-media img{width:100%;height:100%;object-fit:cover}
.popup-body{display:grid;gap:10px;justify-items:center;text-align:center;padding:22px 22px 18px}
.popup-stamp{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgb(255 255 255/.14);color:#FFE3BA}
.popup-stamp .i{width:28px;height:28px}
.popup h3{font-size:clamp(25px,6.6vw,30px)}
.popup p{color:rgb(255 246 236/.88)}
.popup--red .btn-wa{background:#FFF5E8;color:var(--offer-lo)}
.popup-later{min-height:44px;padding:8px 16px;border:0;background:none;color:rgb(255 246 236/.8);text-decoration:underline;text-underline-offset:4px}

/* ---------- Confetti burst (on contact taps) ---------- */
.burst{position:fixed;z-index:70;left:0;top:0;width:8px;height:12px;border-radius:2px;pointer-events:none;will-change:transform,opacity}

/* ---------- Motion preferences ---------- */
.no-anim *,.no-anim *::before,.no-anim *::after{animation:none!important}
.no-anim .ticker-track{animation:none!important}
.no-anim .ticker{overflow-x:auto}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ticker-track.is-ready{animation:none!important}
  .ticker{overflow-x:auto}
}