:root{
  /* SDCart·9 brand: burgundy #6B0027 (primary), gold #D4AF37 (accent), cream #FFF8F1 (background), white.
     Playfair Display italic for headings, Montserrat for UI, IBM Plex Sans Arabic for Arabic. */
  --burg:#6B0027; --burg2:#8A0A34; --burg-ink:#4E001C; --gold:#D4AF37; --gold-hi:#F3D27A; --gold-lo:#B8892A; --gold-grad:linear-gradient(135deg,#B8892A 0%,#F3D27A 45%,#D4AF37 60%,#A87B22 100%);
  --paper:#FFF8F1; --surface:#FFFFFF; --ink:#2A0A14; --ink2:#4A2A33; --muted:#7A6066; --line:#EFE3D8; --line2:#E2D2C3;
  --brand:var(--burg); --brand-ink:var(--burg-ink); --brand-tint:#F8E9EC; --signal:#C2410C; --error:#B42318; --warn:#8A5A00;
  --tile-electronics:#F7F1EC; --tile-beauty:#FBF0EE; --tile-home:#F6F0E6; --tile:#FAF3EC;
  --display:"Playfair Display",Georgia,serif;
  --body:"Montserrat","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px; --r-sm:12px; --gut:16px; --max:1320px;
  --shadow:0 18px 40px -22px rgba(107,0,39,.35);
  --bg:var(--paper); --bg2:var(--surface); --card:var(--surface); --card2:var(--paper); --mint:var(--brand); --mint-ink:#fff; --mint-soft:var(--brand-tint); --accent:var(--brand); --canvas:var(--paper); --num:var(--body); --go:#15803D;
  color-scheme:light;
}
@media (min-width:768px){:root{--gut:32px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
[dir="rtl"] body{font-family:"IBM Plex Sans Arabic","Montserrat",system-ui,sans-serif;line-height:1.65}
img,video{max-width:100%;display:block}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:8px;inset-inline-start:8px;z-index:99;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px}
.muted{color:var(--muted)}
h1,h2,h3{margin:0;font-family:var(--display);font-style:italic;font-weight:700;letter-spacing:-.005em;text-wrap:balance;color:var(--burg)}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0;font-family:"IBM Plex Sans Arabic",sans-serif;font-style:normal}
.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}

/* logo */
.logo{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.logo img{width:40px;height:40px;object-fit:contain}
.logo b{font:700 italic 26px/1 var(--display);color:var(--burg);letter-spacing:-.01em;white-space:nowrap}
.logo b i,.wordmark i{font-style:italic;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo b em,.wordmark em{font-style:italic;color:var(--burg)}
.brand{text-decoration:none;display:inline-flex}
[dir="rtl"] .logo b{direction:ltr}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;font-weight:600;text-decoration:none;border:1px solid var(--burg);background:transparent;color:var(--burg)}
.btn.primary{background:var(--burg);color:#fff;box-shadow:0 10px 24px -12px rgba(107,0,39,.6)}
.btn.primary:hover{background:var(--burg2)}
.btn.ghost:hover{background:var(--surface)}

/* promise bar */
.promise{background:var(--burg);color:#FBE9EE}
.promise-in{display:flex;align-items:center;justify-content:center;gap:10px;min-height:36px;padding-block:6px;font-size:13px;line-height:1.35;font-weight:500;text-align:center}
.promise .pdot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 0 3px rgba(212,175,55,.3)}
.promise b{color:var(--gold-hi);font-weight:700}
.promise strong{color:#fff}
.promise.closed{background:var(--burg-ink)}

/* header */
.top{position:sticky;top:0;z-index:30;padding:10px 0;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px)}
.top-in{display:flex;align-items:center;gap:20px;min-height:68px;background:var(--surface);border-radius:999px;padding:0 10px 0 22px;box-shadow:0 10px 30px -18px rgba(107,0,39,.35);border:1px solid var(--line)}
[dir="rtl"] .top-in{padding:0 22px 0 10px}
.nav{display:flex;gap:4px}
.nav a{color:var(--burg);text-decoration:none;font-weight:600;font-size:15px;padding:9px 16px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--brand-tint)}
.nav a.on{background:var(--burg);color:#fff}
.search{flex:1;display:flex;align-items:center;gap:10px;max-width:380px;margin-inline-start:auto;border:1px solid var(--line2);border-radius:999px;padding:0 16px;height:46px;background:var(--surface)}
.search:focus-within{border-color:var(--burg)}
.search svg{width:20px;height:20px;fill:none;stroke:var(--burg);stroke-width:2;flex:none}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:15px}
.top-actions{display:flex;align-items:center;gap:4px}
.tl{border:0;background:transparent;color:var(--burg);font-size:14px;font-weight:600;padding:0 12px;min-height:44px;border-radius:999px}
.tl:hover{background:var(--brand-tint)}
.cart-btn{position:relative;width:48px;height:48px;border-radius:999px;border:0;background:transparent;display:grid;place-items:center}
.cart-btn:hover{background:var(--brand-tint)}
.cart-btn svg{width:26px;height:26px;fill:none;stroke:var(--burg);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.count{position:absolute;top:2px;inset-inline-end:2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--burg);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums;border:2px solid #fff}

/* hero: sidebar + arch stage */
.hero{display:grid;grid-template-columns:250px 1fr;gap:20px;padding-top:8px}
.side-cats{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px;align-self:start;box-shadow:var(--shadow)}
.sc-all{display:flex;align-items:center;gap:12px;background:var(--burg);color:#fff;border-radius:999px;padding:12px 16px;text-decoration:none;font-weight:600;font-size:15px}
.sc-all svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.6}
.sc-all .chev{margin-inline-start:auto;width:16px;height:16px;stroke-width:2}
[dir="rtl"] .sc-all .chev{transform:scaleX(-1)}
#cats{display:grid;margin-top:6px}
.cat{display:flex;align-items:center;gap:14px;padding:13px 14px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:start;font-weight:600;font-size:15px;color:var(--burg);cursor:pointer;border-radius:10px}
.cat:last-child{border-bottom:0}
.cat:hover,.cat[aria-pressed="true"]{background:var(--brand-tint)}
.cat svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--burg);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cat small{margin-inline-start:auto;color:var(--muted);font-weight:500;font-size:12px}
.stage{position:relative;min-height:600px;border-radius:28px;overflow:hidden;background:radial-gradient(80% 70% at 50% 40%,#FFFDF9 0%,#FBEFE6 60%,#F4E2D6 100%);border:1px solid var(--line)}
.ribbon{position:absolute;pointer-events:none;border-radius:50%}
.ribbon.r1{width:120%;height:260px;left:-10%;top:-150px;border-bottom:34px solid var(--burg);transform:rotate(-6deg);opacity:.9}
.ribbon.r1::after{content:"";position:absolute;inset:auto 0 -40px;height:6px;border-radius:50%;background:var(--gold-grad)}
.ribbon.r2{width:140%;height:240px;left:-20%;bottom:-200px;border-top:26px solid var(--burg);transform:rotate(3deg)}
.arches{position:absolute;inset:40px 26px 168px;display:grid;grid-template-columns:1fr 1fr 1.6fr 1fr 1fr;gap:14px;align-items:end}
.niche{position:relative;height:var(--h,72%);border-radius:999px 999px 18px 18px;background:linear-gradient(180deg,#FFFFFF 0%,#FBF3EC 100%);box-shadow:inset 0 0 0 1px #F0DFD0,inset 0 18px 30px -10px rgba(212,175,55,.35),0 20px 40px -26px rgba(107,0,39,.45);display:flex;align-items:flex-end;justify-content:center;padding:0 10px 26px;cursor:pointer;border:0;text-align:center}
.niche::before{content:"";position:absolute;inset:7px;border-radius:999px 999px 14px 14px;border:1.5px solid rgba(212,175,55,.55);pointer-events:none}
.niche .shelf{position:absolute;left:12px;right:12px;bottom:18px;height:9px;border-radius:5px;background:var(--gold-grad);box-shadow:0 6px 12px -4px rgba(168,123,34,.6)}
.niche img{position:relative;z-index:1;max-width:92%;max-height:64%;object-fit:contain;filter:drop-shadow(0 16px 14px rgba(42,10,20,.22));transition:transform .35s ease}
.niche:hover img{transform:translateY(-6px) scale(1.04)}
.niche .np{position:absolute;top:22%;left:0;right:0;font-size:12px;font-weight:600;color:var(--burg);opacity:0;transition:opacity .2s;z-index:2}
.niche:hover .np{opacity:1}
.niche.center{visibility:hidden}
.center-arch{position:absolute;z-index:2;left:50%;transform:translateX(-50%);top:22px;width:min(380px,36%);height:calc(100% - 176px);border-radius:999px 999px 24px 24px;background:radial-gradient(120% 80% at 50% 20%,#FFFFFF 0%,#FFF7EE 70%);box-shadow:inset 0 0 0 2px rgba(212,175,55,.6),0 0 0 8px rgba(255,255,255,.5),0 30px 60px -30px rgba(107,0,39,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 24px 20px}
.center-arch .mark{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(107,0,39,.25))}
.wordmark{font:700 italic clamp(34px,3.4vw,50px)/1 var(--display);color:var(--burg);margin-top:4px;direction:ltr}
.tagline{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-size:10px;font-weight:600;letter-spacing:.26em;white-space:nowrap;text-transform:uppercase;color:var(--burg)}
.tagline::before,.tagline::after{content:"";width:22px;height:1.5px;background:var(--gold)}
[dir="rtl"] .tagline{letter-spacing:0;font-size:13px}
.hero-sub{margin:10px 0 14px;font-size:13px;line-height:1.55;color:var(--ink2);max-width:28ch}
.plinths{position:absolute;z-index:3;left:0;right:0;bottom:26px;display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,2vw,28px);pointer-events:none}
.plinth{pointer-events:auto;position:relative;display:flex;flex-direction:column;align-items:center;border:0;background:transparent;cursor:pointer;padding:0}
.plinth img{position:relative;z-index:1;height:var(--ih,130px);width:auto;max-width:200px;object-fit:contain;margin-bottom:-14px;filter:drop-shadow(0 18px 14px rgba(42,10,20,.25));transition:transform .35s ease}
.plinth:hover img{transform:translateY(-6px)}
.plinth .disc{width:var(--pw,170px);height:38px;border-radius:50%;background:linear-gradient(180deg,#FFFFFF 0%,#F3E7DC 100%);box-shadow:inset 0 -6px 0 0 #D4AF37,0 16px 24px -14px rgba(107,0,39,.45)}
.trustbar{position:relative;z-index:4;margin-top:-34px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);padding:6px 10px;max-width:1000px}
.trustbar div{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 10px;font-size:15px;color:var(--burg)}
.trustbar div+div{border-inline-start:1px solid var(--line2)}
.trustbar svg{width:32px;height:32px;flex:none;fill:none;stroke:var(--gold-lo);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.trustbar b{font-weight:600}
.lede,.intro{display:none}

/* section heads */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sec-head h2{font-size:30px}
.sec-head p{margin:0;font-size:14px}

/* deals rail */
.rail-sec{padding-top:56px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(156px,200px);gap:12px;overflow-x:auto;padding:2px var(--gut) 8px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);max-width:var(--max);margin:0 auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .card{scroll-snap-align:start}

/* product grid + card */
.shop{padding-top:40px;padding-bottom:24px;scroll-margin-top:110px}
.filters{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.chip{border:1px solid var(--line2);background:var(--surface);border-radius:999px;min-height:40px;padding:0 14px;font-size:14px;font-weight:500;white-space:nowrap;color:var(--ink2)}
.chip small{color:var(--muted);margin-inline-start:4px;font-variant-numeric:tabular-nums}
.chip[aria-selected="true"]{background:var(--burg);border-color:var(--burg);color:#fff}
.chip[aria-selected="true"] small{color:#C9CDD3}
.sortsel select{min-height:40px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);padding:0 12px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,1fr);gap:16px}}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0;transition:border-color .15s,transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card:hover{border-color:var(--line2)}
.card.in{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.card > a{display:block;color:inherit;text-decoration:none}
.tile{position:relative;aspect-ratio:1/1;background:radial-gradient(70% 60% at 50% 45%,#FFFFFF 0%,var(--t,var(--tile)) 100%);display:grid;place-items:center;overflow:hidden}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10%;transition:transform .3s ease}
.tile img.cut{padding:17%;filter:drop-shadow(0 14px 12px rgba(18,20,23,.16))}
.tile img.nocut{padding:12%;border-radius:20px}
.card:hover .tile img{transform:scale(1.03)}
.tile svg{width:34%;stroke:var(--ink2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.badge{position:absolute;top:10px;inset-inline-start:10px;background:var(--burg);color:#fff;font-size:12px;font-weight:600;padding:3px 7px;border-radius:6px;font-variant-numeric:tabular-nums}
.qty-chip{position:absolute;top:8px;inset-inline-end:8px;background:var(--brand);color:#fff;font-size:12px;font-weight:600;min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;padding:0 7px}
.vid-dot{position:absolute;bottom:8px;inset-inline-start:8px;display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.9);font-size:11px;font-weight:600;padding:3px 7px;border-radius:6px;color:var(--ink2)}
.vid-dot svg{width:10px;height:10px;fill:currentColor}
.cb{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;flex:1}
.brand-name{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
[dir="rtl"] .brand-name{letter-spacing:0}
.card h3{font-size:14px;font-weight:500;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.spec{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px}
.price{font-size:17px;font-weight:700;color:var(--burg);font-variant-numeric:tabular-nums}
.was{font-size:12px;color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums}
.add{margin-inline-start:auto;height:36px;min-width:64px;padding:0 14px;border-radius:999px;border:0;background:var(--burg);color:#fff;font-weight:600;font-size:13px}
.add:hover{background:var(--burg2)}
.add:disabled{border-color:var(--line2);color:var(--muted);background:transparent;cursor:not-allowed}
.step{margin-inline-start:auto;display:flex;align-items:center;height:36px;border-radius:999px;background:var(--brand);color:#fff}
.step button{width:34px;height:36px;border:0;background:transparent;color:#fff;font-size:18px;border-radius:999px}
.step span{min-width:18px;text-align:center;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.empty{grid-column:1/-1;padding:40px 0;color:var(--muted)}
.err-box{grid-column:1/-1;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:20px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}

/* how + trust + zones */
.how{padding-top:48px}
.how h2,.zones h2{font-size:30px;margin-bottom:18px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.steps .n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--gold-grad);color:var(--burg-ink);font-weight:600;font-size:14px;display:grid;place-items:center}
.steps h3{font-size:19px}
.steps p{margin:4px 0 0;font-size:14px;color:var(--muted)}
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding-top:28px}
@media (min-width:800px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust div{display:grid;gap:2px;padding:14px;border-radius:var(--r);border:1px solid var(--line)}
.trust svg{width:22px;height:22px;fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.trust b{font-size:14px;font-weight:600}
.trust span{font-size:13px;color:var(--muted)}
.zones{padding-top:48px;padding-bottom:56px}
.zone-list{display:grid;gap:10px}
@media (min-width:800px){.zone-list{grid-template-columns:repeat(3,1fr)}}
.zone{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.zone header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.zone h3{font-size:20px}
.zone .fee{font-size:13px;font-weight:600;color:var(--brand-ink);background:var(--brand-tint);padding:2px 8px;border-radius:6px;white-space:nowrap}
.zone p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.zones > p{margin:12px 0 0;font-size:14px}
.foot{position:relative;overflow:hidden;background:var(--burg);color:#FBE9EE;padding:56px 0 calc(96px + env(safe-area-inset-bottom));border-top:4px solid var(--gold)}
.foot .logo b{color:#fff}.foot .logo b em{color:#fff}
.foot a{color:var(--gold-hi)}
.foot-in{display:grid;gap:8px}
.foot p{margin:0;font-size:14px;color:#E9C9D2}

/* sticky cart bar */
.cartbar{position:fixed;z-index:25;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none}
.cartbar button{pointer-events:auto;width:100%;max-width:520px;min-height:56px;border:0;border-radius:999px;background:var(--burg);color:#fff;display:flex;align-items:center;gap:12px;padding:0 8px 0 22px;font-weight:500;box-shadow:0 12px 30px -10px rgba(18,20,23,.45)}
[dir="rtl"] .cartbar button{padding:0 22px 0 8px}
.cartbar b{font-weight:600;font-variant-numeric:tabular-nums}
.cb-go{margin-inline-start:auto;background:var(--gold-grad);color:var(--burg-ink);border-radius:999px;padding:10px 16px;font-weight:600}
.cartbar[hidden]{display:none}

/* product page (dialog) */
.scrim{position:fixed;inset:0;background:rgba(18,20,23,.42);z-index:40}
.pp{position:fixed;z-index:50;inset:0;background:var(--paper);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.pp.open{transform:none;visibility:visible}
.pp-head{position:absolute;top:10px;inset-inline-end:10px;z-index:3}
.x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:24px;line-height:1;display:grid;place-items:center;color:var(--ink)}
.pp-body{flex:1;overflow:auto;padding-bottom:96px}
.pp-grid{display:grid;gap:0}
.gal{background:var(--t,var(--tile));position:relative}
.gal-main{aspect-ratio:1/1;position:relative;display:grid;place-items:center;overflow:hidden}
.gal-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%}
.gal-main img.cut{padding:16%;filter:drop-shadow(0 22px 18px rgba(18,20,23,.18))}
.gal-main video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gal-main model-viewer{position:absolute;inset:0;width:100%;height:100%;--poster-color:transparent;background:transparent}
.gal-main svg.ph{width:30%;stroke:var(--ink2);fill:none;stroke-width:1.4;opacity:.5}
.gal-tag{position:absolute;bottom:12px;inset-inline-start:12px;z-index:2;font-size:12px;font-weight:500;background:rgba(255,255,255,.92);padding:4px 9px;border-radius:6px;color:var(--ink2)}
.gal-thumbs{display:flex;gap:8px;padding:10px var(--gut);overflow-x:auto;background:var(--paper);border-bottom:1px solid var(--line)}
.gal-thumbs button{flex:none;width:60px;height:60px;border-radius:10px;border:1px solid var(--line);background:var(--t,var(--tile));padding:5px;display:grid;place-items:center;gap:0;font-size:10px;font-weight:600;color:var(--ink2)}
.gal-thumbs button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.gal-thumbs img{width:100%;height:100%;object-fit:contain}
.gal-thumbs svg{width:20px;height:20px;fill:var(--ink2)}
.info{padding:18px var(--gut) 0;display:grid;gap:14px;align-content:start}
.info .brand-name{font-size:12px}
.pp-name{font-size:30px;line-height:1.15}
.pp-spec{font-size:14px;color:var(--muted);margin-top:-8px}
.pp-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pp-price b{font-size:30px;font-weight:700;color:var(--burg);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pp-price s{font-size:14px;color:var(--muted)}
.pp-price .save{font-size:13px;font-weight:600;color:var(--brand-ink);background:var(--brand-tint);padding:3px 8px;border-radius:6px}
.dbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:8px;font-size:14px}
.dbox div{display:flex;gap:10px;align-items:flex-start}
.dbox svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dbox .sig{color:var(--signal);font-weight:600}
.dbox.off svg{stroke:var(--warn)}
.var{display:grid;gap:8px}
.var > span{font-size:14px;font-weight:600}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opts button{min-height:44px;border:1px solid var(--line2);background:var(--surface);border-radius:var(--r-sm);padding:0 14px;font-size:14px}
.opts button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset;font-weight:600}
.desc{margin:0;color:var(--ink2);line-height:1.65}
.specs{border-top:1px solid var(--line);padding-top:14px}
.specs h3,.related h3{font-size:16px;margin-bottom:10px}
.specs dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.specs dt{color:var(--muted)}
.specs dd{margin:0}
.credit{font-size:12px;color:var(--muted);margin:0}
.credit a{color:var(--muted)}
.related{border-top:1px solid var(--line);padding-top:14px}
.rel{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.buybar{position:absolute;z-index:4;inset-inline:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center}
.qty{display:flex;align-items:center;border:1px solid var(--line2);border-radius:999px;height:52px}
.qty button{width:44px;height:50px;border:0;background:transparent;font-size:20px;border-radius:999px}
.qty span{min-width:20px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.buy{flex:1;height:52px;border:0;border-radius:999px;background:var(--burg);color:#fff;font-weight:600;font-size:16px}
.buy:hover:not(:disabled){background:var(--burg2)}
.buy:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
@media (min-width:900px){
  .pp{inset:24px;max-width:1120px;margin:0 auto;border-radius:20px;overflow:hidden;transform:translateY(24px);opacity:0;transition:transform .25s ease,opacity .25s ease;box-shadow:0 40px 80px -30px rgba(18,20,23,.5)}
  .pp.open{transform:none;opacity:1}
  .pp-body{padding-bottom:0;overflow:hidden;display:flex}
  .pp-grid{grid-template-columns:1.05fr 1fr;flex:1;min-height:0}
  .gal{display:flex;flex-direction:column;min-height:0}
  .gal-main{flex:1;aspect-ratio:auto}
  .gal-main img{padding:14%}
  .gal-thumbs{background:transparent;border:0;justify-content:center;padding:14px}
  .info{overflow:auto;padding:36px 36px 120px;position:relative}
  .buybar{inset-inline-start:auto;width:calc(100% * 1 / 2.05);border-start-start-radius:0}
}

/* drawer + checkout */
.drawer{position:fixed;top:0;inset-inline-end:0;height:100%;width:min(460px,100%);background:var(--paper);z-index:60;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);visibility:hidden}
[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.open{transform:none!important;visibility:visible}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 10px var(--gut);border-bottom:1px solid var(--line);background:var(--surface)}
[dir="rtl"] .drawer-head{padding:10px var(--gut) 10px 12px}
.drawer-head h2{font-size:20px}
.drawer-body{flex:1;overflow:auto;padding:14px var(--gut) 28px;display:flex;flex-direction:column;gap:12px}
.drawer-body > *{flex-shrink:0}
.line-item{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px}
.li-tile{width:56px;height:56px;border-radius:8px;background:var(--t,var(--tile));display:grid;place-items:center;overflow:hidden}
.li-tile img{width:100%;height:100%;object-fit:contain;padding:4px}
.li-tile svg{width:28px;stroke:var(--ink2);fill:none;stroke-width:1.6}
.li-name{font-size:14px;font-weight:500;line-height:1.3}
.li-opts{font-size:12px;color:var(--muted)}
.li-sub{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center;margin-top:6px;font-variant-numeric:tabular-nums}
.li-sub button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background:transparent}
.li-price{font-weight:600;font-variant-numeric:tabular-nums}
.sum{display:grid;gap:6px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sum div{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.sum div span:last-child{font-variant-numeric:tabular-nums}
.sum .total{font-weight:600;font-size:18px}
.notice{font-size:14px;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);margin:0}
.notice.ok{background:var(--brand-tint);border-color:#CFE6DA;color:var(--brand-ink)}
.notice.warn{background:#FBF3E3;border-color:#EADFC9;color:var(--warn)}
.notice.err{background:#FDF0F0;border-color:#F2C6C6;color:var(--error)}
.form{display:grid;gap:12px}
.form h3{font-size:15px;margin-top:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:grid;gap:5px;font-size:13px;font-weight:500;color:var(--ink2)}
.field input,.field select,.field textarea{font-size:16px;border:1px solid var(--line2);background:var(--surface);border-radius:var(--r-sm);padding:11px 12px;width:100%;min-height:46px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ink)}
.field textarea{resize:vertical;min-height:70px}
.field small{font-weight:400;color:var(--muted)}
.paybox{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--ink);background:var(--surface);font-size:14px}
.paybox svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.7}
.place{min-height:54px;border-radius:999px;border:0;background:var(--burg);color:#fff;font-weight:600;font-size:16px}
.place:hover:not(:disabled){background:var(--burg2)}
.place:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.done{text-align:center;padding:20px 4px;display:grid;gap:12px;justify-items:center}
.done .ok-ic{width:56px;height:56px;border-radius:50%;background:var(--brand-tint);display:grid;place-items:center}
.done .ok-ic svg{width:28px;height:28px;fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.done h3{font-size:28px}
.done code{font:600 20px/1 var(--body);letter-spacing:.06em;background:var(--surface);border:1px solid var(--line);padding:10px 14px;border-radius:10px;direction:ltr}
.done p{margin:0;color:var(--ink2);max-width:32ch}
.toast{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:500;z-index:70}

@media (max-width:1100px){
  .nav{display:none}
  .hero{grid-template-columns:1fr}
  .side-cats{display:none}
}
@media (max-width:760px){
  .top{padding:8px 0}
  .promise .pdot{display:none}
  .promise-in{font-size:12px}
  .top-in{flex-wrap:wrap;border-radius:22px;padding:8px 8px 8px 14px;gap:8px;min-height:0}
  [dir="rtl"] .top-in{padding:8px 14px 8px 8px}
  .logo b{font-size:22px}.logo img{width:34px;height:34px}
  .search{order:3;flex-basis:100%;max-width:none;margin:0;height:44px}
  .top-actions{margin-inline-start:auto}
  .stage{min-height:520px;border-radius:22px}
  .arches{inset:24px 10px 150px;grid-template-columns:1fr 1.8fr 1fr;gap:8px}
  .arches .niche.n1,.arches .niche.n4{display:none}
  .center-arch{width:60%;top:14px;height:calc(100% - 156px);padding:14px 10px}
  .center-arch .mark{width:70px;height:70px}
  .center-arch .btn{min-height:42px;padding:0 20px}
  .hero-sub{font-size:12px;margin:10px 0 12px}
  .tagline{font-size:8.5px;letter-spacing:.16em}
  .stage{min-height:540px}
  .plinth img{height:calc(var(--ih,130px) * .56);max-width:110px}
  .plinth .disc{width:calc(var(--pw,170px) * .62);height:26px}
  .trustbar{grid-template-columns:1fr 1fr;border-radius:20px;margin-top:-26px}
  .trustbar div{font-size:13px;gap:8px;justify-content:flex-start;padding:12px 8px}
  .trustbar div+div{border-inline-start:0}
  .trustbar svg{width:26px;height:26px}
  .ribbon.r1{height:180px;top:-120px;border-bottom-width:22px}
}
@media (max-width:560px){
  .card .was{display:none}
  .add{min-width:56px;padding:0 12px}
  .row2{grid-template-columns:1fr}
  .filters .sortsel{flex:1}
  .filters .sortsel select{width:100%}
}
.card h3,.related h3.x{font-family:var(--body);font-style:normal;font-weight:500;color:var(--ink);letter-spacing:0}
[dir="rtl"] .wordmark,.wordmark{font-family:var(--display)!important;font-style:italic!important}
.li-name,.specs dd{color:var(--ink)}

/* hero = brand showroom artwork with tappable product hotspots */
.stage{position:relative;min-height:0;aspect-ratio:1394/690;border-radius:28px;overflow:hidden;background:#F7EDE6;border:1px solid var(--line)}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hot{position:absolute;inset:0}
.hs{position:absolute;left:var(--dl);top:var(--dt);width:var(--dw);height:var(--dh);display:var(--doff,block);border:0;background:transparent;border-radius:18px;cursor:pointer;padding:0}
.hs span{position:absolute;left:50%;bottom:-6px;transform:translate(-50%,6px);opacity:0;transition:opacity .18s,transform .18s;background:var(--burg);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(107,0,39,.6);border:1px solid var(--gold)}
.hs:hover,.hs:focus-visible{box-shadow:0 0 0 2px rgba(212,175,55,.85),0 0 30px 4px rgba(255,236,190,.45) inset;background:rgba(255,255,255,.08)}
.hs:hover span,.hs:focus-visible span{opacity:1;transform:translate(-50%,0)}
.hero-cta{position:absolute;left:50%;transform:translateX(-50%);top:53.5%;min-height:40px;padding:0 22px;font-size:14px;z-index:2}
@media (max-width:760px){
  .stage{aspect-ratio:820/690;border-radius:20px}
  .hs{left:var(--ml);top:var(--mt);width:var(--mw);height:var(--mh);display:var(--moff,block)}
  .hs span{display:none}
  .trustbar{margin-top:12px}
  .hero-cta{top:52%;min-height:34px;padding:0 16px;font-size:12px}
}

/* ===== icon buttons, favorites, tab bar ===== */
.gi{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .gi.flip{transform:scaleX(-1)}
.ib{position:relative;width:48px;height:48px;border-radius:999px;border:0;background:transparent;display:grid;place-items:center;color:var(--burg);text-decoration:none}
.ib:hover{background:var(--brand-tint)}
.ib svg{width:25px;height:25px;fill:none;stroke:var(--burg);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ib .count[data-n="0"],.cart-btn .count[data-n="0"]{display:none}
.menu-btn{display:none}
.nav a.on{background:var(--burg);color:#fff}
.heart{position:absolute;z-index:3;top:8px;inset-inline-end:8px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--burg);box-shadow:0 4px 10px -6px rgba(107,0,39,.5)}
.heart .gi{width:19px;height:19px}
.heart[aria-pressed="true"] .gi{fill:var(--burg)}
.card .qty-chip{top:auto;bottom:8px}
.tabbar{display:none}
.row-head{align-items:center}
.see-all{color:var(--burg);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.see-all:hover{text-decoration:underline}

/* ===== type strip (icons under hero) ===== */
.types{padding-top:28px}
.type-strip{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px;scroll-snap-type:x mandatory}
.type-strip::-webkit-scrollbar{display:none}
.type{flex:1 0 96px;max-width:130px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;text-decoration:none;color:var(--burg);font-size:12.5px;font-weight:600;text-align:center;transition:transform .2s,box-shadow .2s}
.type:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--gold)}
.ti{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#FFFFFF,#FBEFE6);box-shadow:inset 0 0 0 1.5px rgba(212,175,55,.6)}
.ti svg{width:24px;height:24px;fill:none;stroke:var(--burg);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ===== breadcrumbs + generic views ===== */
.view{padding-top:12px;padding-bottom:64px;min-height:60vh}
.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;color:var(--ink2);padding:10px 0 14px}
.crumbs a{color:var(--ink2);text-decoration:none;display:inline-flex}
.crumbs a:hover{color:var(--burg)}
.crumbs .gi{width:18px;height:18px}
.crumbs .sep{width:14px;height:14px;color:var(--muted)}
[dir="rtl"] .crumbs .sep{transform:scaleX(-1)}
.crumbs span[aria-current]{color:var(--ink);font-weight:600}
.v-head{margin-bottom:18px}
.v-head h1{font:700 30px/1.15 var(--body);font-style:normal;color:var(--burg)}
.v-head p{margin:4px 0 0}
.v-sub{font-size:24px;margin:36px 0 14px}
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:700px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.cat-grid{grid-template-columns:repeat(4,1fr);gap:18px}}
.cat-tile{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;box-shadow:0 14px 30px -24px rgba(107,0,39,.5);transition:transform .2s,box-shadow .2s}
.cat-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold)}
.ct-img{position:relative;aspect-ratio:4/3;background:radial-gradient(70% 70% at 50% 45%,#FFFFFF 0%,#F6E9DF 100%);display:grid;place-items:center}
.ct-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12%}
.ct-img img.cut{padding:14%;filter:drop-shadow(0 16px 14px rgba(42,10,20,.2))}
.ct-img svg{width:30%;stroke:var(--ink2);fill:none;opacity:.5}
.ct-name{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;font-weight:600;color:var(--burg);font-size:16px}
.ct-name small{color:var(--muted);font-weight:500;font-size:12px}
.ct-name .gi{width:15px;height:15px}
.dept-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.dept{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;text-decoration:none;color:var(--burg)}
.dept svg{grid-row:span 2;width:30px;height:30px;fill:none;stroke:var(--burg);stroke-width:1.5}
.dept small{color:var(--muted)}
.empty-box{display:grid;justify-items:center;gap:12px;text-align:center;padding:56px 16px;background:var(--surface);border:1px solid var(--line);border-radius:22px;color:var(--ink2)}
.empty-box .gi{width:40px;height:40px;color:var(--burg)}

/* ===== listing with filters ===== */
.list-layout{display:grid;gap:18px}
@media (min-width:900px){.list-layout{grid-template-columns:250px 1fr;gap:24px;align-items:start}}
.lside{display:grid;gap:14px}
@media (min-width:900px){.lside{position:sticky;top:100px}}
.lcats{display:grid;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:10px;box-shadow:0 14px 30px -26px rgba(107,0,39,.5)}
.lcats a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:999px;text-decoration:none;color:var(--burg);font-weight:600;font-size:14px}
.lcats a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5}
.lcats a .gi.flip{margin-inline-start:auto;width:14px;height:14px;opacity:0}
.lcats a:hover{background:var(--brand-tint)}
.lcats a.on{background:var(--burg);color:#fff}
.lcats a.on .gi.flip{opacity:1}
.fbox{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px 16px}
.fbox summary{font-weight:700;color:var(--burg);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.fbox summary::-webkit-details-marker{display:none}
.fbox summary::after{content:"";margin-inline-start:auto;width:8px;height:8px;border-right:2px solid var(--burg);border-bottom:2px solid var(--burg);transform:rotate(45deg);transition:transform .2s}
.fbox[open] summary::after{transform:rotate(-135deg)}
.fdot{background:var(--burg);color:#fff;font-size:11px;border-radius:999px;padding:1px 7px}
.fbox fieldset{border:0;border-top:1px solid var(--line);margin:12px 0 0;padding:12px 0 0;display:grid;gap:8px}
.fbox legend{font-weight:600;font-size:14px;color:var(--ink);padding:0;float:left;width:100%;margin-bottom:6px}
.ck{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2);cursor:pointer;min-height:30px}
.ck input{width:18px;height:18px;accent-color:var(--burg)}
.ck small{color:var(--muted)}
#priceMax{width:100%;accent-color:var(--burg)}
.range-lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2)}
.linkbtn{border:0;background:none;color:var(--burg);font-weight:600;padding:12px 0 0;text-decoration:underline}
.lhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.lhead h1{font:700 28px/1.2 var(--body);font-style:normal;color:var(--burg)}
.lhead h1 small{font-size:14px;font-weight:500;color:var(--muted);margin-inline-start:6px}
.sortsel{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.sortsel select{border:1px solid var(--line2);border-radius:999px;padding:8px 14px;background:var(--surface);color:var(--burg);font-weight:600;font-size:14px}
.lsub{margin:-6px 0 14px;font-size:14px}

/* ===== product page ===== */
.pv{padding-top:6px;padding-bottom:64px}
.pv-top{display:grid;gap:18px}
@media (min-width:1100px){.pv-top{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:start}}
.pv-main,.pv-side,.pv-more,.pv-banner{background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:0 20px 44px -34px rgba(107,0,39,.55)}
.pv-main{padding:18px;display:grid;gap:18px}
@media (min-width:800px){.pv-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:22px;gap:24px}}
.pv-media{display:flex;gap:12px}
.pv-thumbs{display:flex;flex-direction:column;gap:10px;flex:none}
.pv-thumbs button{width:74px;height:74px;border-radius:14px;border:1.5px solid var(--line);background:radial-gradient(circle at 50% 40%,#fff,var(--t,var(--tile)));padding:6px;display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--burg)}
.pv-thumbs button[aria-pressed="true"]{border-color:var(--burg);box-shadow:0 0 0 1px var(--burg) inset}
.pv-thumbs img{width:100%;height:100%;object-fit:contain}
.pv-thumbs .gi{width:22px;height:22px}
.pv-stage{position:relative;flex:1;min-width:0;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:radial-gradient(60% 55% at 50% 42%,#FFFFFF 0%,#FCF1E9 55%,#F4E1D4 100%);display:grid;place-items:center}
.podium{position:absolute;left:14%;right:14%;bottom:9%;height:15%;border-radius:50%;background:linear-gradient(180deg,#FFFFFF 0%,#F3E4D6 60%,#E9D3BE 100%);box-shadow:inset 0 -5px 0 #D4AF37,0 0 34px 6px rgba(243,210,122,.45),0 18px 24px -14px rgba(107,0,39,.4)}
.pv-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12% 14% 17%;z-index:1}
.pv-stage>img.cut{filter:drop-shadow(0 22px 16px rgba(42,10,20,.22))}
.pv-stage video,.pv-stage model-viewer{position:absolute;inset:0;width:100%;height:100%;z-index:1;background:transparent;--poster-color:transparent}
.pv-stage video{object-fit:cover}
.pv-stage.live .podium{display:none}
.pv-stage svg.ph{width:34%;stroke:var(--ink2);fill:none;opacity:.5;z-index:1}
.b360{position:absolute;z-index:2;top:14px;inset-inline-start:14px;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:rgba(255,255,255,.85);border-radius:16px;padding:8px 10px;color:var(--burg);font-weight:700;font-size:13px;box-shadow:0 6px 16px -10px rgba(107,0,39,.6)}
.b360 .gi{width:26px;height:26px}
.bexp{position:absolute;z-index:2;top:14px;inset-inline-end:14px;width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--ink)}
.bexp .gi{width:19px;height:19px}
.pv-stage .badge{top:auto;bottom:14px;z-index:2}
.pv-info{display:grid;gap:12px;align-content:start}
.pv-info .pp-name{font:700 clamp(24px,2.4vw,32px)/1.15 var(--body);font-style:normal;color:var(--ink)}
.pv-info .pp-spec{margin:0;color:var(--ink2);font-size:15px}
.pp-price{align-items:center}
.pp-price b{font-size:34px}
.offchip{background:#FCEFC7;color:var(--burg-ink);font-weight:700;font-size:14px;padding:4px 10px;border-radius:8px}
.stock{display:inline-flex;align-items:center;gap:5px;margin-inline-start:auto;background:#E7F4EA;color:#1E6B34;font-weight:600;font-size:13px;padding:5px 11px;border-radius:999px}
.stock .gi{width:15px;height:15px;stroke-width:2.6}
.stock.low{background:#FBF3E3;color:var(--warn)}.stock.no{background:#F6E6E8;color:var(--error)}
.opts.sw button{width:36px;height:36px;min-height:0;border-radius:50%;padding:0;background:var(--sw);border:2px solid #fff;box-shadow:0 0 0 1px var(--line2)}
.opts.sw button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--burg)}
.kb-h{font:700 20px/1.2 var(--body);font-style:normal;color:var(--ink);margin-top:4px}
.kb{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kb div{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px 6px;border:1px solid var(--line);border-radius:14px;font-size:12.5px;font-weight:600;line-height:1.25;color:var(--ink);background:linear-gradient(180deg,#fff,#FFFBF7)}
.kb .gi{width:30px;height:30px;color:var(--burg);stroke-width:1.5}
.pv-buy{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.pv-buy .qty{height:52px}
.pv-buy .buy{flex:1 1 180px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;box-shadow:0 12px 24px -12px rgba(107,0,39,.7)}
.wish{flex:1 1 180px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;border:1.5px solid var(--burg);background:var(--surface);color:var(--burg);font-weight:600;font-size:16px}
.wish[aria-pressed="true"] .gi{fill:var(--burg)}
.wish:hover{background:var(--brand-tint)}
.pv-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;border:1px solid var(--line);border-radius:999px;padding:5px;background:#FFFBF7}
@media (min-width:800px){.pv-tabs,.pv-panel{grid-column:1/-1}}
.pv-tabs::-webkit-scrollbar{display:none}
.pv-tabs button{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;border-radius:999px;padding:11px 16px;color:var(--burg);font-weight:600;font-size:14.5px;white-space:nowrap}
.pv-tabs button[aria-selected="true"]{background:var(--burg);color:#fff}
.pv-tabs .gi{width:19px;height:19px}
.pv-panel{padding:4px 4px 0}
.pv-panel .desc{margin:0 0 14px}
.spec-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:14.5px}
.spec-dl dt{color:var(--muted)}.spec-dl dd{margin:0;color:var(--ink)}
.ht-full{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ht-full li{display:flex;gap:12px;align-items:flex-start}
.ht-full p{margin:2px 0 0;color:var(--ink2);font-size:14px}
.n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--burg);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
.pv-side{padding:18px;display:grid;gap:16px}
.ph-h{display:flex;gap:12px;align-items:center}
.ph-ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--burg);color:#fff;display:grid;place-items:center}
.ph-ic .gi{width:24px;height:24px}
.ph-ic svg.gi{stroke:#fff}
.ph-h h2{font:700 24px/1.1 var(--body);font-style:normal;color:var(--burg)}
.ph-h p{margin:2px 0 0;font-size:13.5px;color:var(--ink2)}
.ht{display:grid;gap:12px}
@media (min-width:520px){.ht{grid-template-columns:1.25fr 1fr}}
.ht-player{position:relative;aspect-ratio:4/3;border:0;border-radius:18px;overflow:hidden;background:radial-gradient(70% 70% at 50% 40%,#fff,#F3E2D5);padding:0;display:grid;place-items:center}
.ht-player img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12%}
.ht-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ht-player .play{position:relative;z-index:1;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--burg);box-shadow:0 10px 24px -10px rgba(42,10,20,.5);transition:transform .2s}
.ht-player .play .gi{width:26px;height:26px;fill:var(--burg);stroke:none;margin-inline-start:3px}
.ht-player:hover .play{transform:scale(1.07)}
.ht-cap{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:22px 12px 10px;background:linear-gradient(transparent,rgba(42,10,20,.65));color:#fff;font-size:13px;font-weight:600;text-align:start}
.ht-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start}
.ht-steps button{width:100%;display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#FFFBF7;border-radius:14px;padding:10px 12px;text-align:start;font-size:13.5px;color:var(--ink)}
.ht-steps button:hover{border-color:var(--gold);background:#fff}
.ht-steps b{font-weight:600;flex:1;line-height:1.25}
.ht-steps .gi.flip{width:15px;height:15px;color:var(--muted)}
.ht-steps .n{width:24px;height:24px;font-size:12px}
.uses{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:520px){.uses{grid-template-columns:repeat(4,1fr)}}
.uses.wide{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.use{position:relative;aspect-ratio:1/1.05;border-radius:16px;overflow:hidden;background:radial-gradient(80% 70% at 50% 35%,#FFFFFF 0%,#F7E7DC 70%,#EFD6C6 100%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0}
.use .gi{position:absolute;top:24%;width:44px;height:44px;color:var(--burg);stroke-width:1.3}
.use b{width:100%;background:linear-gradient(90deg,var(--burg),var(--burg2));color:#fff;font-size:12.5px;font-weight:600;padding:9px 8px;text-align:center;line-height:1.2}
.pv-bottom{display:grid;gap:18px;margin-top:18px}
@media (min-width:1000px){.pv-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)}}
.pv-banner{position:relative;overflow:hidden;min-height:250px;display:flex;align-items:center;padding:26px 28px;background:radial-gradient(90% 90% at 80% 40%,#FFFFFF 0%,#FBEFE6 60%,#F4E0D2 100%)}
.pv-banner::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-70px;height:120px;border-radius:50%;border-top:22px solid var(--burg);box-shadow:0 -6px 0 0 var(--gold) inset;transform:rotate(-4deg)}
.pv-banner>div{position:relative;z-index:1;max-width:58%}
.pv-banner h2{font:700 clamp(22px,2.2vw,30px)/1.15 var(--body);font-style:normal;color:var(--burg)}
.bn-k{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lo)}
.bn-s{margin:10px 0 0;font-size:13.5px;color:var(--ink2)}
.pv-banner img{position:absolute;z-index:1;inset-inline-end:4%;top:8%;height:76%;width:40%;object-fit:contain}
.pv-banner img.cut{filter:drop-shadow(0 20px 16px rgba(42,10,20,.25))}
.pv-more{padding:18px 18px 12px;min-width:0}
.pv-more header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pv-more h2{font:700 22px/1.2 var(--body);font-style:normal;color:var(--burg);flex:1}
.pv-more .ph-ic{width:40px;height:40px}
.pv-more .ph-ic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6}
.more-wrap{position:relative}
.rail.more{padding:2px 2px 8px;max-width:none;grid-auto-columns:minmax(160px,190px)}
.arrow{position:absolute;z-index:4;top:38%;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--burg);display:grid;place-items:center;box-shadow:0 6px 16px -8px rgba(42,10,20,.4)}
.arrow.prev{inset-inline-start:-14px}.arrow.next{inset-inline-end:-14px}
[dir="rtl"] .arrow .gi{transform:scaleX(-1)}
.arrow .gi{width:18px;height:18px}

/* ===== modals ===== */
.modal{position:fixed;inset:0;z-index:80;background:rgba(42,10,20,.45);display:grid;place-items:center;padding:16px;backdrop-filter:blur(3px)}
.modal[hidden]{display:none}
.md-card{position:relative;width:min(1080px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--paper);border-radius:26px;box-shadow:0 40px 80px -30px rgba(42,10,20,.6);padding:20px}
.md-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.md-logo{width:44px;height:44px;display:grid;place-items:center;color:var(--burg)}
.md-logo img{width:44px;height:44px;object-fit:contain}
.md-logo .gi{width:30px;height:30px}
.md-h h2{font:700 24px/1.1 var(--body);font-style:normal;color:var(--burg)}
.md-h p{margin:2px 0 0;color:var(--ink2);font-size:14px}
.md-x{margin-inline-start:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink)}
.hw{display:grid;gap:18px}
@media (min-width:860px){.hw{grid-template-columns:220px minmax(0,1.3fr) minmax(0,1fr);align-items:start}}
.hw-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px}
.hw-list button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:999px;padding:9px 10px;text-align:start;font-size:14px;color:var(--ink);font-weight:500}
.hw-list button[aria-current="true"]{background:var(--burg);color:#fff;font-weight:600}
.hw-list button[aria-current="true"] .n{background:#fff;color:var(--burg)}
.hw-list .n{width:26px;height:26px}
.hw-media{position:relative;aspect-ratio:16/11;border-radius:20px;overflow:hidden;background:radial-gradient(70% 70% at 50% 40%,#fff,#F3E2D5);display:grid;place-items:center}
.hw-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10% 14% 16%;z-index:1}
.hw-media video{width:100%;height:100%;object-fit:cover}
.dots{position:absolute;z-index:2;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(107,0,39,.25)}
.dots i.on{background:var(--burg);width:18px;border-radius:5px}
.hw-text h3{font:700 22px/1.2 var(--body);font-style:normal;color:var(--burg)}
.hw-text>p{margin:8px 0 16px;color:var(--ink2);line-height:1.6}
.hw-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.hw-facts div{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px;font-size:13px;font-weight:600}
.hw-facts .gi{width:26px;height:26px;color:var(--burg)}
.hw-nav{display:flex;justify-content:space-between;gap:10px}
.hw-nav .btn{min-height:46px}
.hw-nav .btn:disabled{opacity:.4;cursor:default}
.hw-nav .gi{width:17px;height:17px}
.v3{display:grid;gap:16px}
@media (min-width:800px){.v3{grid-template-columns:1fr 230px;align-items:center}}
.v3-stage{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:radial-gradient(60% 60% at 50% 42%,#fff,#F3E2D5)}
.v3-stage model-viewer{position:absolute;inset:0;width:100%;height:100%;z-index:1;background:transparent}
.v3-stage .deg{position:absolute;z-index:2;bottom:7%;left:50%;transform:translateX(-50%);font-weight:700;color:var(--burg);font-size:20px}
.v3-tips{list-style:none;margin:0;padding:12px;display:grid;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.v3-tips li{display:flex;align-items:center;gap:12px;padding:12px 8px;font-size:14px;font-weight:600;color:var(--ink)}
.v3-tips li+li{border-top:1px solid var(--line)}
.v3-tips .gi{width:28px;height:28px;color:var(--burg)}
.zoom{display:grid;gap:12px}
.zoom img{width:100%;max-height:75vh;object-fit:contain;background:#fff;border-radius:16px}

/* ===== mobile: app-style header + bottom tab bar ===== */
@media (max-width:760px){
  .menu-btn{display:grid}
  .top-in{display:grid;grid-template-columns:auto 1fr auto;padding:6px 6px 8px;border-radius:24px}
  [dir="rtl"] .top-in{padding:6px 6px 8px}
  .brand{justify-self:center}
  .top-actions{margin:0;gap:0}
  .top-actions .tl{padding:0 6px;font-size:12.5px;min-height:40px}
  .acct-btn{display:none}
  .cart-btn{width:42px;height:42px}
  .ib{width:42px;height:42px}
  .search{grid-column:1/-1;order:0}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:35;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px -20px rgba(107,0,39,.4)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:16px;color:var(--burg);text-decoration:none;font-size:11.5px;font-weight:600}
  .tabbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
  .tabbar a.on{background:var(--burg);color:#fff}
  .cartbar{bottom:calc(76px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(150px + env(safe-area-inset-bottom))}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .types{padding-top:18px}
  .type{flex:0 0 84px;font-size:11.5px;padding:12px 6px 10px;border-radius:16px}
  .ti{width:40px;height:40px}
  .sec-head h2{font-size:24px}
  .pv-main,.pv-side,.pv-more,.pv-banner{border-radius:20px}
  .pv-main{padding:12px}
  .pv-media{flex-direction:column-reverse}
  .pv-thumbs{flex-direction:row;overflow-x:auto}
  .pv-thumbs button{width:62px;height:62px;flex:none}
  .kb{grid-template-columns:repeat(2,1fr)}
  .pv-banner>div{max-width:60%}
  .arrow{display:none}
  .md-card{padding:14px;border-radius:20px}
  .lhead h1{font-size:22px}
  .cat-tile .ct-name{font-size:14px}
}
@media (max-width:1100px) and (min-width:761px){.nav{display:none}}
.ht-player svg.ph{width:34%;stroke:var(--ink2);fill:none;stroke-width:1.4;opacity:.5}
.hw-media svg.ph{width:30%}
@media (max-width:760px){
  .top-in>.menu-btn{grid-area:1/1}
  .top-in>.brand{grid-area:1/2}
  .top-in>.top-actions{grid-area:1/3}
  .top-in>.search{grid-area:2/1/3/4}
  .pv-banner{min-height:230px;padding:22px 20px 70px;align-items:flex-start}
  .pv-banner::after{bottom:-90px}
}
.img-fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:12px;font-weight:500}
.img-fb svg{width:34%;max-width:90px;stroke:var(--ink2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.pv-stage .img-fb,.ht-player .img-fb{z-index:1}
.ht-pending{display:grid;gap:12px;justify-items:start;padding:16px;border:1px dashed var(--line2);border-radius:18px;background:#FFFBF7;color:var(--ink2);font-size:14px}
.ht-pending p{margin:0}
.ht-pending video{width:100%;border-radius:14px}
.ht-pending .btn .gi,.manual-link .gi{width:18px;height:18px}
.manual-link{display:inline-flex;align-items:center;gap:8px;color:var(--burg);font-weight:600;font-size:14px}
.pp-model{margin:-4px 0 0;font-size:14px;color:var(--ink2)}
.grid.more{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.grid.more{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
.rail-sec .wrap .grid{margin-top:2px}

/* ===== refined, smaller wordmark ===== */
.logo b{font-size:21px}
.logo img{width:30px;height:30px}
@media (max-width:760px){.logo b{font-size:19px}.logo img{width:28px;height:28px}}

/* ===== interactive 3D showroom ===== */
.stage.live3d{aspect-ratio:auto;height:clamp(460px,62vh,660px)}
.stage.live3d picture,.stage.live3d .hot{display:none}
.showroom{position:absolute;inset:0}
.showroom[hidden]{display:none}
.sr-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:pan-y;cursor:grab;outline:none}
.sr-canvas:active{cursor:grabbing}
.sr-cats{position:absolute;z-index:3;top:14px;left:14px;right:14px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;pointer-events:none}
.sr-cats::-webkit-scrollbar{display:none}
.sr-cats button{pointer-events:auto;flex:none;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(212,175,55,.6);background:rgba(255,255,255,.88);backdrop-filter:blur(8px);color:var(--burg);font-weight:600;font-size:13.5px;box-shadow:0 6px 16px -10px rgba(107,0,39,.5)}
.sr-cats button[aria-pressed="true"]{background:var(--burg);color:#fff;border-color:var(--burg)}
.sr-hint{position:absolute;z-index:2;left:50%;top:66px;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;background:rgba(42,10,20,.72);color:#fff;font-size:12.5px;font-weight:500;white-space:nowrap;pointer-events:none;transition:opacity .5s}
.sr-hint.gone{opacity:0}
.sr-ctl{position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 10px 24px -14px rgba(107,0,39,.55)}
.sr-ctl button{width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;color:var(--burg)}
.sr-ctl button:hover{background:var(--brand-tint)}
.sr-ctl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--burg);font-weight:600;font-size:14px;background:radial-gradient(60% 60% at 50% 45%,#fff,#F6E8DD);z-index:4}
.sr-loading[hidden]{display:none}
.sr-card{position:absolute;z-index:5;right:14px;top:66px;width:340px;max-width:calc(100% - 28px);display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,.55);border-radius:20px;box-shadow:0 24px 48px -24px rgba(42,10,20,.55);animation:scIn .22s ease}
@keyframes scIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sr-card[hidden]{display:none}
.sc-img{position:relative;display:block;aspect-ratio:1;border-radius:14px;background:radial-gradient(70% 70% at 50% 45%,#fff,#F6E9DF);overflow:hidden}
.sc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%}
.sc-img svg{width:50%;margin:25%;stroke:var(--ink2);fill:none;opacity:.5}
.sc-img .img-fb small{display:none}
.sc-body{display:grid;gap:3px;align-content:start;min-width:0}
.sc-name{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.sc-model{font-size:12px;color:var(--muted)}
.sc-body .pr{padding-top:4px;flex-wrap:wrap}
.sc-body .offchip{font-size:11.5px;padding:2px 7px}
.sc-act{grid-column:1/-1;display:flex;gap:8px;align-items:center;margin-top:6px}
.sr-card .sc-act{grid-column:auto}
.sc-act .btn{min-height:38px;padding:0 14px;font-size:13px}
.sc-act .add,.sc-act .step{margin-inline-start:auto}
.sc-x{position:absolute;top:-10px;right:-10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink);box-shadow:0 4px 10px -6px rgba(0,0,0,.4)}
.sc-x .gi{width:16px;height:16px}
.sr-card{grid-template-columns:96px 1fr}
.sr-card .sc-act{grid-column:1/-1}
@media (max-width:760px){
  .stage.live3d{height:min(74vh,600px);border-radius:22px}
  .sr-cats{top:10px;left:10px;right:10px}
  .sr-cats button{min-height:36px;padding:0 13px;font-size:12.5px}
  .sr-card{left:10px;right:10px;top:auto;bottom:70px;width:auto;max-width:none}
  .sr-hint{top:56px;font-size:11px}
  .sr-ctl{bottom:10px}
  .sr-ctl button{width:40px;height:40px}
}

/* ===== official demo videos ===== */
.ht-demos{display:grid;gap:12px}
.demo{margin:0;display:grid;gap:8px}
.demo-play{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border:0;padding:0;border-radius:16px;overflow:hidden;background:#1c0a10}
.demo-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.demo-play .play{position:relative;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--burg);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.demo-play .play .gi{width:26px;height:26px;fill:var(--burg);stroke:none;margin-inline-start:3px}
.demo-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;background:#000}
.demo figcaption{display:grid;gap:2px;font-size:13px}
.demo figcaption b{color:var(--ink);font-weight:600}
.demo figcaption span{color:var(--muted);font-size:12px}
.pv-panel .demo{max-width:640px;margin-bottom:16px}
.stage.live3d + .trustbar,.hero:has(.live3d) + .trustbar{margin-top:18px}
.sr-hint{max-width:calc(100% - 28px);white-space:normal;text-align:center}
@media (max-width:760px){
  .sr-ctl{left:auto;right:8px;bottom:auto;top:50%;transform:translateY(-50%);flex-direction:column;padding:4px;gap:2px}
  .sr-ctl button{width:38px;height:38px}
  .sr-ctl [data-sr="left"] svg{transform:rotate(0)}
  .sr-hint{top:auto;bottom:12px;max-width:calc(100% - 24px)}
  .sr-card{bottom:12px}
}
.sc-act .btn{white-space:nowrap}
.pv-banner{align-self:start}