/* Jodha Akbar homepage sample v2: sand dunes + tatreez + gold. No white, no cream-white, no orange. */
:root{
  /* D sand family */--sand:#D0AD87;--sand-deep:#BA9169;--sand-a:#CDA883;--sand-b:#D3B18C;--sand-c:#C59E78;
  /* C clay family */--clay-hi:#C08657;--clay:#B37647;--clay-b:#BC814E;--clay-c:#AF7342;--rust:#99612F;
  /* B gold */--gold:#D8B26E;--gold-hi:#E8CB8A;--gold-lo:#B68A55;--apricot:#EAA571;--sand-light:#F0DCC0;
  /* ink: dark brown is allowed for TEXT only */--ink:#2A140A;--ink2:#3A1D0E;--ink-out:#3B1809;--btn-ink:#24120B;
  --bar:#8F5A2B;--gold-lt:#F6E3AE;--bg:#D0AD87;--bg2:#CDA883;--blob:#C08657;--blob2:#BA9169;--dune1:#BA9169;--line:#7A4A1E;
  --f-d:'Rakkas','Aref Ruqaa',serif;--f-a:'Aref Ruqaa',serif;--f-l:'Lalezar','Readex Pro',sans-serif;--f-b:'Readex Pro',system-ui,sans-serif;
  --liquid:cubic-bezier(.34,1.56,.64,1);--expo:cubic-bezier(.16,1,.3,1);
  --tat-h:39px;--ch:clamp(150px,15.5vw,190px);
}
*{box-sizing:border-box;margin:0;scrollbar-width:thin;scrollbar-color:#B68A55 transparent}
html{scrollbar-color:var(--line) var(--bg2)}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-b);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-intro,body.lock{overflow:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}

/* ---------- shared: tatreez band, gold title, pills ---------- */
.tat{height:var(--tat-h);background:var(--rust) var(--tat) repeat-x center;background-size:auto var(--tat-h);border-block:2px solid var(--gold-lo);width:100%;position:relative;z-index:3}
.tat-top{position:absolute;top:0;left:0;right:0}
.tat-bot{position:absolute;bottom:0;left:0;right:0}
.shop .tat-bot{position:relative;margin-top:56px}
.gold-title{font-family:var(--f-d);font-weight:400;background:linear-gradient(180deg,#F6E3AE 0%,#E3C47E 36%,#B8893F 68%,#E8CB8A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(1.6px 0 0 var(--ink-out)) drop-shadow(-1.6px 0 0 var(--ink-out)) drop-shadow(0 1.6px 0 var(--ink-out)) drop-shadow(0 -1.6px 0 var(--ink-out)) drop-shadow(0 8px 10px rgba(122,74,30,.35))}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;font-family:var(--f-b);font-weight:500;font-size:16px;border:1.5px solid transparent;transition:transform .6s var(--liquid),background-color .3s,color .3s,box-shadow .3s;position:relative;overflow:hidden}
.pill:hover{transform:translateY(-2px) scale(1.03)}
.pill:active{transform:scale(.97)}
.pill svg{width:18px;height:18px}
.pill-solid{background:linear-gradient(180deg,#EBCB82,#D8B26E 55%,#B68A55);color:var(--btn-ink);border-color:#E8CB8A;font-weight:600}
.pill-solid:hover{box-shadow:0 0 0 4px rgba(216,178,110,.35),0 8px 22px rgba(122,74,30,.4)}
.pill-gold{background:linear-gradient(180deg,#EBCB82,#D8B26E 55%,#B68A55);color:#24120B;border-color:#E8CB8A;font-weight:600}
.pill-gold:hover{box-shadow:0 0 0 4px rgba(216,178,110,.35),0 10px 26px rgba(122,74,30,.4)}
.pill-ghost{border-color:var(--gold-lo);border-width:2px;color:var(--ink);background:transparent}
.pill-ghost:hover{background:var(--gold);color:var(--btn-ink)}
.pill-wide{width:100%}
.pill::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(243,221,163,.5),transparent);transform:skewX(-18deg);animation:sheen 4.5s ease-in-out infinite;pointer-events:none}
.pill-ghost::after,.pill-solid::after{opacity:.35}
@keyframes sheen{0%,60%{left:-60%}90%,100%{left:130%}}
.x{position:absolute;top:14px;inset-inline-start:14px;z-index:20;width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--btn-ink);border:2px solid var(--gold-hi);display:grid;place-items:center;transition:transform .6s var(--liquid),border-radius .8s var(--liquid)}
.x:hover{transform:rotate(90deg) scale(1.08);border-radius:16px;background:var(--gold-hi)}
.x svg{width:20px;height:20px}
.wipe{position:fixed;left:0;top:0;width:100px;height:100px;border-radius:50%;z-index:55;pointer-events:none;transform:scale(0);will-change:transform}

/* ---------- A) intro ---------- */
#intro{position:fixed;inset:0;z-index:300;background:radial-gradient(90% 70% at 50% 38%,#D3B18C 0%,#CDA883 55%,#C59E78 100%);overflow:hidden}
#intro .tat-top,#intro .tat-bot{z-index:6}
.in-dunes{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none}
.in-dunes svg{width:100%;height:100%;display:block}
.in-sun{position:absolute;left:50%;top:50%;width:min(86vw,560px);aspect-ratio:1;margin:calc(min(86vw,560px)/-2) 0 0 calc(min(86vw,560px)/-2);border-radius:50%;background:radial-gradient(closest-side,rgba(240,220,192,.85),rgba(232,203,138,.45) 58%,transparent);opacity:0;will-change:transform,opacity}
.in-logo{position:absolute;left:50%;top:50%;width:min(300px,62vw);height:auto;will-change:transform,opacity;z-index:3;filter:drop-shadow(1.4px 0 0 var(--ink-out)) drop-shadow(-1.4px 0 0 var(--ink-out)) drop-shadow(0 1.4px 0 var(--ink-out)) drop-shadow(0 -1.4px 0 var(--ink-out)) drop-shadow(0 6px 14px rgba(122,74,30,.4))}
.in-pieces{position:absolute;inset:0;z-index:2;pointer-events:none}
.in-pc{position:absolute;left:50%;top:50%;width:var(--w,110px);height:auto;will-change:transform,opacity;filter:drop-shadow(0 10px 14px rgba(94,56,20,.45))}
.in-map{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(var(--tat-h) + 92px) 12px calc(var(--tat-h) + 8px);opacity:0;visibility:hidden;z-index:4}
.in-title{font-size:clamp(34px,6.2vw,64px);line-height:1.2;text-align:center;margin-bottom:2px;padding-top:6px;white-space:nowrap}
.map-stage{flex:1;min-height:0;width:min(560px,100%);perspective:1100px;display:flex;justify-content:center;touch-action:manipulation}
.map-tilt{height:100%;aspect-ratio:440/700;max-width:100%;transform-style:preserve-3d;will-change:transform}
#palMap{width:100%;height:100%;overflow:visible;display:block}
.in-cap{min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink);gap:2px}
.in-cap b{font-family:var(--f-d);font-weight:400;font-size:30px;line-height:1.2;color:var(--ink);letter-spacing:0}
.in-cap small{font-size:14px;color:var(--ink2)}
.skip{position:absolute;top:calc(var(--tat-h) + 14px);inset-inline-end:14px;z-index:8;font-weight:500;font-size:15px;padding:0 20px;min-height:44px;border-radius:999px;border:2px solid var(--gold-lo);color:var(--ink);background:transparent;transition:background-color .3s,color .3s}
.skip:hover{background:var(--gold);color:var(--btn-ink)}
/* map svg */
.region{cursor:pointer;outline:none;transition:opacity .3s}
.region .slice{transform:translateY(calc(var(--lift,0) * var(--k) * -1px))}
.region .tf{transform:translateY(calc(var(--lift,0) * -1px))}
.region .m-shadow{transform:translateY(calc(16px + var(--lift,0) * 0.5px))}
.region.is-lift .face{filter:drop-shadow(0 0 9px rgba(243,221,163,.75))}
.region.is-lift .stitch{animation:march 1.2s linear infinite;stroke:#7A4A1E;stroke-opacity:.8}
.region:focus-visible .face{stroke:#F3DDA3;stroke-width:3;stroke-opacity:1}
@keyframes march{to{stroke-dashoffset:-14}}
.nmi{opacity:0}
.nm-t{font-family:var(--f-a);font-weight:700;font-size:22px;fill:var(--ink);paint-order:stroke;stroke:#E8CB8A;stroke-width:3px;stroke-linejoin:round}
.gaza-txt{font-family:var(--f-a);font-size:17px;fill:var(--ink2)}
.gaza-txt2{font-family:var(--f-b);font-size:11.5px;fill:var(--ink2)}

@media (min-width:900px) and (min-aspect-ratio:5/4){
  .in-map{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:1fr;align-items:center;padding:calc(var(--tat-h) + 84px) 6vw calc(var(--tat-h) + 14px);column-gap:3vw}
  .in-title{grid-column:1;grid-row:1;font-size:clamp(52px,5.4vw,84px);text-align:start;white-space:normal;line-height:1.25;margin:0}
  .map-stage{grid-column:2;grid-row:1;height:100%;width:auto}
  .in-cap{grid-column:3;grid-row:1;align-items:flex-start;text-align:start}
  .in-cap b{font-size:46px}.in-cap small{font-size:18px}
}
/* ---------- header ---------- */
.top{position:fixed;z-index:60;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;height:calc(62px + env(safe-area-inset-top));padding:env(safe-area-inset-top) clamp(12px,3vw,30px) 0;background:var(--bar);border-bottom:2px solid var(--gold-lo);box-shadow:0 6px 18px rgba(94,56,20,.28);pointer-events:none;opacity:0}
.top>*{pointer-events:auto}
.logo-top{justify-self:center;display:grid;place-items:center;height:48px;padding:0 6px}
.logo-top img{height:40px;width:auto;filter:drop-shadow(1px 0 0 var(--ink-out)) drop-shadow(-1px 0 0 var(--ink-out)) drop-shadow(0 1px 0 var(--ink-out)) drop-shadow(0 -1px 0 var(--ink-out))}
.area-wrap{position:relative;justify-self:start}
.area-chip{display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 4px;color:var(--gold-lt);font-weight:600;font-size:16px;line-height:1.2;white-space:nowrap;transition:opacity .25s}
.area-chip:hover{opacity:.82}
.area-chip svg{width:20px;height:20px;flex:none}
.area-list{position:absolute;top:calc(100% + 8px);inset-inline-start:-6px;min-width:200px;list-style:none;padding:6px;background:var(--sand);border:2px solid var(--gold-lo);border-radius:20px;box-shadow:0 18px 40px rgba(94,56,20,.4);z-index:2}
.area-list button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:48px;padding:0 16px;border-radius:14px;color:var(--ink);font-weight:500;font-size:17px;text-align:start}
.area-list button:hover,.area-list button:focus-visible{background:color-mix(in srgb,var(--clay-hi) 40%,var(--sand))}
.area-list svg{width:20px;height:20px;opacity:0}
.area-list li[aria-selected=true] button{font-weight:700}
.area-list li[aria-selected=true] svg{opacity:1}
.cart-btn{justify-self:end;position:relative;width:48px;height:48px;color:var(--gold-lt);display:grid;place-items:center;transition:transform .6s var(--liquid)}
.cart-btn:hover{transform:scale(1.1)}
.cart-btn svg{width:30px;height:26px}
/* icons: one set, outline, stroke 2.4, one colour */
svg [stroke]{stroke-linecap:round;stroke-linejoin:round}
.cart-n{position:absolute;top:0;inset-inline-end:-4px;min-width:21px;height:21px;padding:0 4px;border-radius:11px;background:var(--bar);color:var(--gold-lt);border:2px solid var(--gold-lt);font:700 12px/17px var(--f-b);text-align:center;transform:scale(0);transition:transform .5s var(--liquid)}
.cart-n.on{transform:scale(1)}

/* ---------- B, C, D) hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:radial-gradient(110% 80% at 50% 36%,color-mix(in srgb,var(--bg) 70%,#E8CB8A) 0%,var(--bg) 64%);isolation:isolate}
.hero-bg{position:absolute;inset:0;opacity:.35;background:radial-gradient(60% 50% at 12% 20%,rgba(232,203,138,.35),transparent),radial-gradient(50% 40% at 90% 70%,rgba(153,97,47,.18),transparent);pointer-events:none}
.blob-wrap{position:absolute;left:50%;top:35%;width:min(80vw,880px);aspect-ratio:1.28;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
.blob{position:absolute;inset:0;background:var(--blob);border-radius:63% 37% 54% 46%/55% 48% 52% 45%;transition:background-color .9s var(--expo);will-change:transform;box-shadow:inset 0 -30px 60px rgba(122,74,30,.14)}
.blob.b2{inset:-7% -5% 5% 7%;background:var(--blob2);opacity:.5;border-radius:46% 54% 38% 62%/52% 63% 37% 48%}
.word{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;line-height:1.05;font-size:clamp(88px,19vw,250px);pointer-events:none;padding-bottom:6vh}
.word span{display:block}
.hint{position:absolute;bottom:64px;left:50%;translate:-50% 0;z-index:6;color:var(--ink);font-weight:500;font-size:16px;display:flex;flex-direction:column;align-items:center;gap:2px;animation:hintb 1.8s ease-in-out infinite}
.hint svg{width:26px;height:26px}
@keyframes hintb{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.orbit{position:absolute;inset:0;pointer-events:none;z-index:2}
.orb{position:absolute;will-change:transform;filter:drop-shadow(0 12px 14px rgba(94,56,20,.35))}
.orb img{width:100%;height:100%;object-fit:contain}
.hp{position:absolute;left:50%;top:35%;z-index:4;will-change:transform;pointer-events:none}
.hp-in{position:absolute;inset:0;animation:floaty 5.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-12px) rotate(1.4deg)}}
.hp img{position:absolute;left:0;width:100%;height:auto;filter:drop-shadow(0 20px 22px rgba(94,56,20,.4));will-change:transform}
.hp-cover{top:0}.hp-plate{bottom:0}
.hp-one{top:0;height:100%!important;object-fit:contain;display:none}
.hp.single .hp-cover,.hp.single .hp-plate{display:none}
.hp.single .hp-one{display:block}
.hero-copy{position:absolute;left:0;right:0;bottom:44px;z-index:5;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 16px;pointer-events:none}
.hero-copy>*{pointer-events:auto}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--ink);font:500 14px var(--f-b);letter-spacing:.14em;margin-bottom:-2px}
.eyebrow svg{width:96px;height:16px;color:var(--ink);opacity:.7}
.cname{font-size:clamp(78px,11.5vw,170px);line-height:1.12;padding:0 .05em;max-width:100%;white-space:nowrap;will-change:transform}
.cname span{display:inline-block}
.tagline{font-family:var(--f-a);font-size:clamp(20px,2.4vw,28px);color:var(--ink);margin:-4px 0 14px;line-height:1.4}
.dots{display:flex;gap:6px;margin-top:12px;align-items:center}
.dots button{position:relative;width:22px;height:5px;border-radius:3px;background:var(--line);opacity:.55;transition:width .5s var(--liquid),opacity .3s,background-color .3s}
.dots button::before{content:"";position:absolute;inset:-18px -3px}
.dots button[aria-current=true]{width:46px;background:var(--ink);opacity:1}
.arrow{position:absolute;top:35%;translate:0 -50%;z-index:7;width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--ink);border:2px solid var(--gold-lo);display:grid;place-items:center;transition:transform .6s var(--liquid),border-radius .8s var(--liquid),background-color .3s}
.arrow svg{width:26px;height:26px}
.arrow:hover{border-radius:20px;transform:scale(1.1);background:var(--gold)}
.arrow-r{right:max(14px,2.5vw)}.arrow-l{left:max(14px,2.5vw)}
.hero-dunes{position:absolute;left:0;right:0;bottom:-1px;height:clamp(60px,12vh,120px);width:100%;z-index:3;pointer-events:none}

/* ---------- E) cards ---------- */
.shop{position:relative;background:var(--bg2);padding:46px 18px 0;overflow:hidden;transition:background-color .9s}
.shop-head{text-align:center;max-width:760px;margin:0 auto 28px}
.orn{width:110px;height:18px;color:var(--ink);opacity:.7;margin:0 auto}
.shop-head h2{font-family:var(--f-d);font-weight:400;font-size:clamp(44px,6vw,72px);line-height:1.3;color:var(--ink)}
.shop-head p{font-family:var(--f-a);font-size:clamp(19px,2.2vw,24px);color:var(--ink2);margin-top:4px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:18px 4px 6px;margin-top:6px;scrollbar-width:none;justify-content:safe center}
@media (min-width:821px){.chips{flex-wrap:wrap;overflow:visible}.shop-head{max-width:900px}}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:42px;padding:0 20px;border-radius:999px;border:2px solid var(--gold-lo);color:var(--ink);font-weight:500;font-size:15px;transition:background-color .3s,color .3s,transform .6s var(--liquid)}
.chip:hover{transform:translateY(-2px)}
.chip[aria-current=true]{background:var(--gold);color:var(--btn-ink);border-color:var(--gold-hi);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:34px 20px;max-width:1240px;margin:0 auto}
.card{position:relative;text-align:center;cursor:pointer;outline-offset:6px;-webkit-tap-highlight-color:transparent}
.card-glow{position:absolute;left:50%;top:104px;width:112%;aspect-ratio:1;translate:-50% -50%;scale:.6;background:radial-gradient(closest-side,rgba(243,221,163,.78),rgba(243,221,163,0));opacity:0;transition:opacity .5s,scale .6s var(--liquid);pointer-events:none}
.card.active .card-glow{opacity:1;scale:1}
.card-img{position:relative;height:var(--ch);display:grid;place-items:center;animation:bob 4s steps(2) infinite;animation-delay:var(--d,0s)}
.card.off .card-img{animation-play-state:paused}
.card.active .card-img{animation:none}
.card-img img{max-width:94%;max-height:var(--ch);width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(94,56,20,.3));transition:transform .55s var(--liquid),filter .4s;will-change:transform}
.card.active .card-img img{transform:translateY(-12px) scale(1.15);filter:drop-shadow(0 22px 22px rgba(94,56,20,.4)) drop-shadow(0 0 22px rgba(243,221,163,.65))}
@keyframes bob{0%{transform:translate(0,0)}25%{transform:translate(var(--amp,6px),-3px)}50%{transform:translate(0,0)}75%{transform:translate(calc(var(--amp,6px) * -1),-3px)}100%{transform:translate(0,0)}}
.card-name{font-family:var(--f-a);font-weight:700;font-size:21px;line-height:1.35;margin:12px 0 8px;color:var(--ink);min-height:2.7em;display:flex;align-items:center;justify-content:center}
.price{direction:ltr;position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;perspective:800px}
.price-flip{position:relative;display:grid;transform-style:preserve-3d;transition:transform .65s var(--expo)}
.price-row,.price-buy{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:2px 20px;border-radius:999px;border:2px solid var(--gold-hi);backface-visibility:hidden;-webkit-backface-visibility:hidden;white-space:nowrap}
.price-row{background:var(--bar);color:var(--gold-lt);font-family:var(--f-l);font-size:25px;line-height:1;-webkit-text-stroke:.35px currentColor;box-shadow:0 5px 12px rgba(94,56,20,.28)}
.price-row s{font-family:var(--f-b);font-weight:600;font-size:15px;-webkit-text-stroke:0;text-decoration-thickness:2px}
.price-buy{transform:rotateX(180deg);background:linear-gradient(180deg,#F3DDA3,#D8B26E 60%,#B68A55);color:var(--btn-ink);font-family:var(--f-b);font-weight:700;font-size:17px;direction:rtl;box-shadow:0 0 0 4px rgba(243,221,163,.45),0 8px 18px rgba(94,56,20,.3)}
.card.active .price-flip{transform:rotateX(180deg)}
.foot{background:linear-gradient(180deg,var(--clay),var(--clay-hi));color:var(--ink);text-align:center;padding:48px 18px 0}
.foot img{width:150px;height:auto;margin:0 auto;filter:drop-shadow(1.2px 0 0 var(--ink-out)) drop-shadow(-1.2px 0 0 var(--ink-out)) drop-shadow(0 1.2px 0 var(--ink-out)) drop-shadow(0 -1.2px 0 var(--ink-out))}
.foot p{font-size:14px;color:var(--ink);margin:12px 0 38px}
.foot .tat{margin:0 -18px}

/* ---------- F) product popup ---------- */
.pdp{position:fixed;inset:0;z-index:100;display:grid;place-items:center}
.pdp-scrim{position:absolute;inset:0;background:rgba(175,115,66,.8)}
.pdp-panel{position:relative;width:min(1100px,calc(100vw - 32px));height:min(660px,calc(100svh - 32px));display:grid;grid-template-columns:1fr 1fr;border-radius:56px;overflow:hidden;background:var(--sand);box-shadow:0 30px 80px rgba(94,56,20,.45),0 0 0 2.5px var(--gold)}
.pdp-stage{position:relative;display:grid;place-items:center;background:radial-gradient(75% 70% at 50% 46%,var(--blob) 0%,var(--blob2) 100%);overflow:hidden;padding:28px}
.pdp-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 30% 20%,rgba(243,221,163,.45),transparent);pointer-events:none}
.pdp-glow{position:absolute;left:50%;top:48%;width:80%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(closest-side,rgba(243,221,163,.6),transparent);filter:blur(4px)}
.pdp-slot{position:relative;z-index:3;width:min(84%,440px);height:70%}
.pdp-slot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 20px rgba(94,56,20,.45));animation:floaty 6s ease-in-out infinite}
.pdp-shadow{position:absolute;left:50%;bottom:11%;width:46%;height:22px;translate:-50% 0;background:radial-gradient(closest-side,rgba(94,56,20,.5),transparent)}
.stamp{position:absolute;top:22px;inset-inline-start:24px;width:108px;height:108px;color:var(--ink);animation:spin 26s linear infinite;z-index:4}
.stamp text{font-family:var(--f-a);font-size:12.5px;fill:var(--ink);letter-spacing:.06em}
.stamp use{color:var(--ink)}
@keyframes spin{to{rotate:360deg}}
.pdp-info{order:-1;display:flex;flex-direction:column;min-height:0;background:linear-gradient(160deg,var(--sand-b),var(--sand) 60%,var(--sand-a));color:var(--ink)}
.pdp-body{flex:1;min-height:0;overflow-y:auto;padding:34px 36px 12px;overscroll-behavior:contain}
.pdp-eyebrow{font-size:13px;letter-spacing:0;color:var(--ink2);font-weight:500;margin:0 0 4px}
.pdp-body h2{font-family:var(--f-d);font-weight:400;font-size:clamp(36px,4.2vw,54px);line-height:1.3;padding-top:4px}
.pdp-line{font-family:var(--f-a);font-size:21px;color:var(--ink);margin:2px 0 10px}
.pdp-price{display:flex;align-items:baseline;gap:12px;direction:ltr;justify-content:flex-end;font-family:var(--f-l);font-size:36px;color:var(--ink)}
.pdp-price s{font-size:20px;opacity:.7}
.vars{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.vars button{min-height:40px;padding:0 18px;border-radius:999px;border:2px solid var(--gold-lo);color:var(--ink);font-size:14px;transition:background-color .25s,color .25s}
.vars button[aria-pressed=true]{background:var(--gold);color:var(--btn-ink);border-color:var(--gold-hi);font-weight:600}
.spec{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--gold);border-radius:18px;margin:14px 0}
.spec div{padding:10px 16px}
.spec div+div{border-inline-start:1.5px solid var(--gold)}
.spec dt{font-size:12px;letter-spacing:0;color:var(--ink2)}
.spec dd{margin:0;font-weight:500;color:var(--ink);direction:rtl;font-size:14px;line-height:1.5}
.spec dd bdi{display:block;direction:ltr;text-align:right}
.spec dd.ltr{direction:ltr;text-align:right}
.pdp-sec{border-top:1.5px solid var(--gold)}
.pdp-sec summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:52px;cursor:pointer;font-family:var(--f-a);font-weight:700;font-size:19px;color:var(--ink)}
.pdp-sec summary::-webkit-details-marker{display:none}
.pdp-sec summary i{font:normal 600 13px/26px var(--f-b);width:26px;height:26px;border-radius:50%;border:2px solid var(--gold);text-align:center;color:var(--ink)}
.pdp-sec summary::after{content:"+";margin-inline-start:auto;font:400 24px/1 var(--f-b);color:var(--ink);transition:rotate .4s var(--liquid)}
.pdp-sec[open] summary::after{rotate:45deg}
.pdp-sec p{font-size:15px;line-height:1.75;margin:0 0 12px;color:var(--ink)}
.pdp-sec p.q{font-style:normal;color:var(--ink2)}
.ph{border:1.5px dashed var(--rust);border-radius:10px;padding:6px 12px;color:var(--ink2)!important;font-size:13px!important}
.ph::before{content:"نص مؤقت: ";font-weight:600}
.rel{margin:16px 0 8px}
.rel-label{font-size:13px;letter-spacing:0;color:var(--ink2);font-weight:500;margin-bottom:8px}
.rel-row{display:flex;gap:10px}
.rel-row button{flex:1;max-width:120px;border:1.5px solid var(--gold);border-radius:16px;padding:8px 6px;text-align:center;transition:transform .5s var(--liquid),background-color .3s}
.rel-row button:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--gold) 35%,transparent)}
.rel-row img{height:64px;width:auto;margin:0 auto;object-fit:contain}
.rel-row span{display:block;font-size:12px;margin-top:4px;color:var(--ink);line-height:1.3}
.pdp-bar{display:flex;gap:10px;padding:14px 36px 24px;background:linear-gradient(180deg,rgba(205,168,131,0),var(--sand-a) 38%)}
.pdp-bar .pill{flex:1}
.pdp-bar #btnBuy{flex:1.35}

/* ---------- basket flight ---------- */
.bk{position:relative;width:100%;aspect-ratio:1000/610;transform-origin:50% 76%}
.bk-back,.bk-front{z-index:0;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bk-items{position:absolute;inset:0;pointer-events:none;z-index:1;isolation:isolate}
.bk-item{position:absolute;will-change:transform;pointer-events:none}
.bk-front{z-index:2}
.bk-bounds{position:absolute;pointer-events:none;visibility:hidden}
.bk-item.drag{pointer-events:auto;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.bk-item.drag.grab{cursor:grabbing}
.bk-item img{-webkit-user-drag:none;user-drag:none}
.bk-item img{width:100%;height:auto;filter:drop-shadow(0 6px 8px rgba(94,56,20,.35))}
.bk-layer{position:fixed;inset:0;z-index:140;pointer-events:none;overflow:hidden}
.bk-layer .bk-wrap{position:absolute;left:50%;bottom:6svh;width:min(92vw,560px);margin-left:calc(min(92vw,560px)/-2);will-change:transform}
.fly{position:fixed;left:0;top:0;z-index:150;pointer-events:none;will-change:transform;filter:drop-shadow(0 12px 14px rgba(94,56,20,.4));transform-origin:0 0}

/* ---------- G) checkout / processing / success / one-time offer ---------- */
.co{position:fixed;inset:0;z-index:130;background:var(--clay);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;color:var(--ink)}
.co-panel{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--tat-h) + 28px) 18px calc(var(--tat-h) + 28px);background:radial-gradient(90% 70% at 30% 20%,var(--clay-hi),var(--clay) 75%)}
.co-grid{display:grid;grid-template-columns:1fr minmax(400px,480px);gap:40px;align-items:stretch;max-width:1440px;margin:0 auto;width:100%}
.co-scene{position:relative;min-height:260px}
.co-stick{position:sticky;top:calc(var(--tat-h) + 24px);height:calc(100svh - 2*(var(--tat-h) + 24px));display:grid;place-items:center}
.co-glow{position:absolute;inset:6% 4%;background:radial-gradient(closest-side,rgba(240,220,192,.55),transparent);filter:blur(6px)}
.co-basket{position:relative;width:min(100%,800px)}
.co-form{display:flex;flex-direction:column;gap:12px}
.co-lines{display:flex;flex-direction:column;gap:0;border-top:1.5px solid var(--gold)}
.cl{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1.5px solid var(--gold);font-size:15px;color:var(--ink)}
.cl b{font-family:var(--f-l);font-weight:400;font-size:19px;color:var(--ink);direction:ltr}
.cl.fee span{color:var(--ink)}
.co-free{padding:2px 0}
.co-free p{font-size:14px;color:var(--ink);font-weight:500;margin-bottom:6px}
.bar{height:10px;border-radius:5px;background:var(--rust);overflow:hidden;border:1.5px solid var(--gold)}
.bar i{display:block;height:100%;width:100%;transform-origin:right center;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#B68A55,#EBCB82,#D8B26E);border-radius:5px}
.fld{display:block;position:relative}
.fld span{display:block;font-size:13px;letter-spacing:0;color:var(--ink);font-weight:500;margin-bottom:4px}
.fld input{width:100%;min-height:50px;padding:0 16px;border-radius:14px;border:2px solid var(--gold);background:var(--sand-b);color:var(--ink);font:500 17px var(--f-b);transition:border-color .25s,box-shadow .25s}
.fld input:focus{outline:none;border-color:var(--rust);box-shadow:0 0 0 4px rgba(232,203,138,.7)}
.fld .err{display:block;font-style:normal;font-size:13px;min-height:0;color:#2E0B03;font-weight:700;margin-top:3px}
.fld.bad input{border-color:#7A2A12}
.co-total{display:flex;align-items:baseline;justify-content:space-between;padding-top:4px;font-family:var(--f-a);font-weight:700;font-size:22px;color:var(--ink)}
.co-total b{font-family:var(--f-l);font-weight:400;font-size:34px;direction:ltr}
.co-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;min-height:300px;font-family:var(--f-a);font-weight:700;font-size:clamp(26px,4vw,38px);color:var(--ink)}
.stitch-load{width:min(280px,70vw);height:var(--tat-h);border-radius:999px;border:2px solid var(--gold);background:var(--clay-c);overflow:hidden;position:relative}
.stitch-load i{position:absolute;inset:0;background:var(--rust) var(--tat) repeat-x center;background-size:auto var(--tat-h);transform-origin:right center;transform:scaleX(0)}
.co-state small{font:400 15px/1.5 var(--f-b);color:var(--ink);max-width:340px}
.fld .hint2{display:block;font-size:13px;color:var(--ink);margin-top:3px}
.help{font-size:14px;line-height:1.6;color:var(--ink);margin:0}
.tick{width:110px;height:110px;color:var(--ink)}
.confetti{position:relative;width:0;height:0}
.confetti i{position:absolute;width:10px;height:14px;border-radius:2px;left:0;top:0}
.oto{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:560px;margin:0 auto;padding:10px 0}
.oto-light{position:absolute;left:50%;top:44%;width:min(150vw,820px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;z-index:0}
.oto-light i{position:absolute;inset:0;border-radius:50%}
.oto-light i:first-child{background:radial-gradient(closest-side,rgba(243,221,163,.75),rgba(232,203,138,.3) 55%,transparent)}
.oto-light i:last-child{background:repeating-conic-gradient(from 0deg,rgba(240,220,192,.28) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(closest-side,#000 20%,transparent);mask:radial-gradient(closest-side,#000 20%,transparent)}
.oto>*{position:relative;z-index:1}
.oto>.oto-light{position:absolute;z-index:0}
.oto h2{font-size:clamp(44px,8vw,80px);line-height:1.25}
.oto-piece{width:min(70vw,340px);height:min(40svh,300px);display:grid;place-items:center}
.oto-piece img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 30px rgba(243,221,163,.85)) drop-shadow(0 18px 18px rgba(94,56,20,.45))}
.oto h3{font-family:var(--f-a);font-weight:700;font-size:26px;color:var(--ink);margin-top:14px}
.oto-price{font-family:var(--f-l);font-size:60px;line-height:1.1;color:var(--ink);direction:ltr;text-shadow:0 0 16px rgba(243,221,163,.85),0 0 40px rgba(232,203,138,.7)}
.oto-btns{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap;justify-content:center}

/* ---------- H) cart: a hanging tatreez banner (not a modal sheet) ---------- */
.cart{position:fixed;inset:0;z-index:125}
.cart-scrim{position:absolute;inset:0;background:rgba(175,115,66,.7)}
.cart-hang{position:absolute;top:0;left:max(10px,2vw);width:min(430px,calc(100vw - 20px));transform-origin:34px 0;will-change:transform}
.rope{position:absolute;top:0;width:3px;height:34px;background:linear-gradient(90deg,#8A5A22,#E8CB8A,#8A5A22);z-index:2}
.rope.r1{left:34px}.rope.r2{right:34px}
.cart-panel{position:relative;margin-top:32px;background:linear-gradient(180deg,var(--sand-b),var(--sand) 45%,var(--sand-a));border:2.5px solid var(--gold);border-top:0;border-radius:0 0 26px 26px;max-height:calc(100svh - 56px);display:flex;flex-direction:column;color:var(--ink);box-shadow:0 24px 60px rgba(94,56,20,.45)}
.cart-panel .x{top:50px;inset-inline-start:auto;inset-inline-end:14px}
.cart-title{font-family:var(--f-d);font-weight:400;font-size:38px;text-align:center;margin:14px 0 4px;line-height:1.5;padding-top:4px}
.cart-empty{text-align:center;font-family:var(--f-a);font-size:22px;color:var(--ink);padding:26px 0}
.cart-panel>*{flex-shrink:0}
.cart-panel>.cart-shelves{flex:0 1 auto;overflow-y:auto;padding:4px 20px;min-height:0;overscroll-behavior:contain}
.shelf{display:grid;grid-template-columns:76px 1fr auto;align-items:end;gap:12px;padding:10px 0 0;position:relative}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:3px;background:linear-gradient(180deg,#E8CB8A,#B68A55);box-shadow:0 4px 6px rgba(94,56,20,.4)}
.shelf-pc{height:76px;display:grid;place-items:end center;padding-bottom:5px}
.shelf-pc img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(94,56,20,.5))}
.shelf-tx{padding-bottom:12px;min-width:0}
.shelf-tx b{display:block;font-family:var(--f-a);font-size:18px;line-height:1.3;color:var(--ink)}
.shelf-tx small{font-family:var(--f-l);font-size:17px;color:var(--ink);direction:ltr;display:inline-block}
.q-chip{display:flex;align-items:center;gap:2px;margin-bottom:12px;border:2px solid var(--gold-lo);border-radius:999px;direction:ltr}
.q-chip button{width:34px;height:34px;font-size:20px;color:var(--ink);border-radius:50%}
.q-chip button:hover{background:var(--gold);color:var(--btn-ink)}
.q-chip b{min-width:22px;text-align:center;font-weight:600;color:var(--ink)}
.cart-sum{padding:12px 20px 0}
.cart-sum .co-total{font-size:20px}.cart-sum .co-total b{font-size:30px}
.cart-btns{display:flex;gap:10px;padding:14px 20px 16px}
.cart-btns .pill{flex:1;min-height:46px;padding:0 14px}
.tat-fringe{height:34px;margin-top:0;border-radius:0 0 24px 24px;border-bottom:0;background-image:var(--tat),repeating-linear-gradient(90deg,#D8B26E 0 3px,transparent 3px 10px);background-size:auto var(--tat-h),100% 0;background-repeat:repeat-x}
.tat-fringe::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;background:repeating-linear-gradient(90deg,#D8B26E 0 3px,transparent 3px 9px);-webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  :root{--tat-h:30px}
  .tat{background-size:auto var(--tat-h)}
  .blob-wrap{width:104vw;aspect-ratio:1.02;top:36%}
  .hp{top:36%}
  .cname{font-size:clamp(84px,30vw,150px)}
  .hero-copy{bottom:24px}
  .arrow{top:36%;width:46px;height:46px}.arrow svg{width:22px;height:22px}
  .arrow-r{right:8px}.arrow-l{left:8px}
  .grid{grid-template-columns:repeat(2,1fr);gap:26px 10px}
  :root{--ch:150px}
  .card-glow{top:78px}
  .card-name{font-size:18px}
  .price-row,.price-buy{min-height:42px;padding:2px 16px}
  .price-row{font-size:22px}
  .pdp-panel{width:100vw;height:100svh;border-radius:0;grid-template-columns:1fr;grid-template-rows:38% 1fr}
  .pdp-info{order:0}
  .pdp-stage{padding:14px}
  .stamp{width:72px;height:72px;top:14px;inset-inline-start:10px}
  .pdp-slot{height:78%}
  .pdp-body{padding:20px 20px 8px}
  .pdp-bar{padding:12px 20px calc(env(safe-area-inset-bottom) + 16px)}
  .co-grid{grid-template-columns:1fr;gap:12px}
  .co-scene{min-height:0;order:-1}
  .co-stick{position:relative;top:0;height:42svh;min-height:250px}
  .co-basket{width:min(100%,calc(42svh * 1.45))}
  .co-form{padding:10px;border-radius:30px}
  .co-panel{padding:calc(var(--tat-h) + 20px) 16px calc(var(--tat-h) + 20px);justify-content:flex-start}
  .map-stage{width:100%}
  .in-map{padding-top:calc(var(--tat-h) + 88px)}
  .in-cap{min-height:70px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

.pdp-panel .x{inset-inline-start:auto;inset-inline-end:16px;top:16px}
.notr *{transition:none!important}

/* ---------- top picks / best offers ---------- */
.picks{position:relative;background:var(--bg2);padding:44px 18px 18px;overflow:hidden;transition:background-color .9s}
.picks.offers{background:color-mix(in srgb,var(--bg2) 82%,var(--blob2))}
.sec-head{text-align:center;max-width:760px;margin:0 auto 30px}
.sec-head h2{font-size:clamp(46px,6.4vw,76px);line-height:1.5;padding-top:6px}
.tat-div{height:21px;width:min(340px,70%);margin:6px auto 0;background:var(--rust) var(--tat) repeat-x center;background-size:auto 21px;border-block:2px solid var(--gold);border-radius:11px}
.grid.g3{grid-template-columns:repeat(3,1fr);gap:30px 22px;max-width:1040px}
.grid.g3 .card{--ch:clamp(150px,15vw,190px)}
.shop{padding-top:56px}
@media (max-width:820px){
  .picks{padding:34px 10px 12px}
  .grid.g3{gap:20px 6px}
  .grid.g3 .card{--ch:104px}
  .grid.g3 .card-name{font-size:15px;margin:8px 0 6px;min-height:2.8em;line-height:1.3}
  .grid.g3 .card-glow{top:56px}
  .grid.g3 .price-row,.grid.g3 .price-buy{min-height:36px;padding:1px 10px;gap:7px;border-width:1.5px}
  .grid.g3 .price-row{font-size:18px}
  .grid.g3 .price-row s{font-size:12.5px}
  .grid.g3 .price-buy{font-size:13.5px}
  .grid.g3 .card.active .card-img img{transform:translateY(-8px) scale(1.1)}
}

/* product popup: real text (content.js) */
.pdp-pnote{font-size:13px;color:var(--ink2);margin:2px 0 6px;text-align:end;line-height:1.5}
.spec .wide{grid-column:1/-1;border-bottom:1.5px solid var(--gold)}
.spec{grid-template-columns:1fr 1fr}
.spec div+div{border-inline-start:0}
.spec div:nth-child(3){border-inline-start:1.5px solid var(--gold)}
.spec dd .dm,.sizes .dm{display:inline-block;margin-inline-end:14px;font-weight:500;white-space:nowrap}
.spec dd .dm bdi{display:inline;text-align:start}
.spec dd em,.sizes em{font-style:normal;font-size:12px;color:var(--ink2);margin-inline-end:10px}

.na{color:var(--ink2);font-weight:400;font-size:.92em;border-bottom:1.5px dotted var(--rust)}
.pdp-sec p b{font-weight:600}
.gold-title,.sec-head h2{letter-spacing:0;word-spacing:normal;font-kerning:normal;font-feature-settings:"liga" 1,"calt" 1}
/* gold text is clipped to its box: give swash overhang room (the "gap" in الأكثر اختياراً) */
h2.gold-title,h3.gold-title{padding-inline:.2em;padding-block:.1em}

/* ---- real 3D map (map3d.js) */
.map-stage{position:relative}
.is-3d #palMap{visibility:hidden}
.m3d{position:absolute;inset:0;z-index:5}
.m3d-cv{width:100%;height:100%;display:block;touch-action:manipulation;outline:none}
.m3d-gz{position:absolute;left:0;top:0;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;text-align:end;gap:2px;color:var(--ink);will-change:transform;max-width:150px;text-wrap:balance}
.m3d-gz b{font-family:var(--f-a);font-weight:700;font-size:20px;line-height:1.2}
.m3d-gz span{font:500 14px/1.3 var(--f-b)}
.m3d-kb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.m3-load{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ink);font:500 16px/1.5 var(--f-b);text-align:center}
.m3-load p{margin:0}
/* ---- real 3D hero (hero3d.js) */
.h3d{position:absolute;inset:0;z-index:4;pointer-events:none}
.h3d canvas{width:100%;height:100%;display:block}
.hero.has-3d .hp-cover,.hero.has-3d .hp-plate{visibility:hidden}
.pdp-sec[open] summary::after{content:"\2212";rotate:0deg}
.hero.has-3d .orb img{visibility:hidden}
@media (min-width:900px) and (min-aspect-ratio:5/4){ .m3d-gz{margin-top:92px} .m3d-gz b{font-size:24px} .m3d-gz span{font-size:16px} }

/* ---------- adjustments 2026-11-05 (owner): sections, wavy dividers, wavy image area ---------- */
:root{
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14'%3E%3Cpath d='M0 7Q8 0 16 7T32 7T48 7T64 7' fill='none' stroke='%2399612F' stroke-width='4'/%3E%3C/svg%3E");
  --stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23B68A55' d='M2 0h1v1H2zM1 1h3v1H1zM0 2h5v1H0zM1 3h3v1H1zM2 4h1v1H2z'/%3E%3C/svg%3E");
  --tint-a:color-mix(in srgb,var(--sand-deep) 42%,var(--sand-b));
  --tint-b:color-mix(in srgb,var(--clay-hi) 40%,var(--sand));
}
.wv{display:block;height:22px;margin:8px 0;background:var(--wave) repeat-x center/64px 14px}
/* popup text blocks */
.pdp-body{padding:34px 36px 18px;padding-inline-end:52px}
.pb-head{padding-bottom:6px}
.pdp-price{margin-top:6px}
.pdp-price b{font-weight:400;-webkit-text-stroke:.6px currentColor}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:0;margin:6px 0}
.spec div,.spec div+div{padding:14px 18px 16px;border:0;border-radius:22px;background:var(--tint-b)}
.spec .wide{grid-column:1/-1;background:var(--tint-a);border:0}
.spec dt{display:flex;align-items:center;gap:8px;font:700 15px/1.3 var(--f-a);color:var(--ink);margin-bottom:6px}
.spec dt::before,.pdp-sec summary i::before,.cb-t i::before{content:"";width:16px;height:16px;flex:none;background:var(--stitch) center/contain no-repeat}
.spec dd{font-size:16px;font-weight:500}
.spec dd .dm{display:inline-block;margin-inline-end:12px}
.pdp-sec{border:0;border-radius:24px;padding:4px 22px 10px;margin:0}
.pdp-sec:nth-of-type(odd){background:var(--tint-a)}
.pdp-sec:nth-of-type(even){background:var(--tint-b)}
.pdp-sec summary{min-height:56px;gap:10px}
.pdp-sec summary i{width:18px;height:18px;border:0;border-radius:0;font-size:0;line-height:0;background:none;display:block}
.pdp-sec summary i::before{width:18px;height:18px;display:block}
.pdp-sec summary::after{content:"\2212";color:var(--rust);font-weight:700}
.pdp-sec[open] summary::after{rotate:0deg}
.pdp-sec p{margin:0 0 10px}
.rel{margin:12px 0 8px}
.rel-row button{border:0;background:var(--tint-a);border-radius:18px}
/* wavy, slowly moving studio edge: the image area grows into the info column */
.pdp-stage{clip-path:url(#stageClipD);margin-inline-start:-44px;position:relative;z-index:2;padding-inline-start:72px}
.pdp-info{position:relative;z-index:1}
.pdp-bar{padding-inline:36px;padding-inline-end:52px}
/* checkout blocks */
.co-form{gap:0;align-self:center;padding:16px;border-radius:38px;background:color-mix(in srgb,var(--sand-light) 58%,transparent);border:2px solid var(--gold);box-shadow:0 18px 40px rgba(94,56,20,.22)}
.co-form>.wv{margin:10px 0}
.cb{padding:20px 22px 22px;border-radius:28px;background:color-mix(in srgb,var(--sand-b) 82%,var(--clay-hi));display:flex;flex-direction:column;gap:12px}
.cb+.wv+.cb{background:color-mix(in srgb,var(--sand) 62%,var(--clay-hi))}
.cb.cb-total{background:color-mix(in srgb,var(--sand-deep) 70%,var(--clay-hi))}
.cb-t{display:flex;align-items:center;gap:10px;font:700 21px/1.4 var(--f-a);color:var(--ink);margin:0}
.cb-t i{width:18px;height:18px;display:block}
.cb-t i::before{width:18px;height:18px;display:block}
.co-lines{border-top:0}
.cl{border-bottom:2px dotted var(--rust);padding:12px 2px}
.cl:last-child{border-bottom:0}
.fld input{border-color:var(--rust);background:var(--sand-light)}
.bar{border-color:var(--rust)}
@media (max-width:820px){
  .pdp-stage{clip-path:url(#stageClipM);margin-inline-start:0;margin-bottom:-30px;padding-inline-start:14px}
  .pdp-body{padding:44px 20px 12px;padding-inline-end:20px}
  .pdp-bar{padding-inline:20px}
  .spec{gap:10px}
  .spec div,.spec div+div{padding:12px 14px 14px}
  .pdp-sec{padding:2px 16px 8px}
  .cb{padding:16px 16px 18px;border-radius:24px}
}
.stamp{inset-inline-start:74px}
@media (max-width:820px){.stamp{inset-inline-start:34px;top:20px}}

/* port 2026-11-06: real server errors (checkout + one-time offer) */
.form-err{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:#F3DDA3;border:2px solid #99612F;color:#2A140A;font:600 15px/1.6 var(--f-b);text-align:start}
.form-err a{color:#2A140A;text-decoration:underline;font-weight:700}
.oto .form-err{max-width:420px;margin:14px auto 0}
.btn-busy,#btnConfirm:disabled{opacity:.6;cursor:progress}

/* Sale pill (sale.js): countdown to the end date, or "sale closed". Set in the admin's Jodha dashboard. */
.salebar{position:fixed;inset-inline:0;inset-block-end:14px;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);z-index:60;display:flex;align-items:center;gap:10px;
  padding:8px 18px;border-radius:999px;background:var(--bar);color:var(--gold-lt);font:600 14px/1.3 var(--f-b);box-shadow:0 8px 24px rgb(42 20 10 / .25);border:1.5px solid var(--gold)}
.salebar b{font:700 16px/1 var(--f-b);letter-spacing:.04em;color:var(--gold-hi)}
.salebar.closed{background:var(--ink2);color:var(--gold-lt)}
body.lock .salebar{display:none}