/* ═══ THEMES ═══ */
[data-theme="dark"]{--bg:#06080d;--bg2:#0c0f16;--bg3:#12161f;--bg4:#181d28;--bg5:#1e2432;--rim:rgba(255,255,255,.046);--rim2:rgba(255,255,255,.08);--rim3:rgba(255,255,255,.14);--text:#edeae3;--muted:#88847f;--faint:#484440;--card:#0e1219;--card-bdr:rgba(255,255,255,.06);--inp:#0c0f16;--inp-bdr:rgba(255,255,255,.09);--shadow:0 8px 32px rgba(0,0,0,.55);--hero-rad:radial-gradient(ellipse 60% 50% at 50% -5%,rgba(212,146,10,.075),transparent 68%);--grid-clr:rgba(255,255,255,.045);--nav-bg:rgba(6,8,13,.93)}
[data-theme="light"]{--bg:#eef0f3;--bg2:#e5e8ec;--bg3:#dce0e6;--bg4:#f5f6f8;--bg5:#fff;--rim:rgba(0,0,0,.065);--rim2:rgba(0,0,0,.1);--rim3:rgba(0,0,0,.18);--text:#1b1e26;--muted:#5e6270;--faint:#a0a4ae;--card:#fff;--card-bdr:rgba(0,0,0,.075);--inp:#eef0f3;--inp-bdr:rgba(0,0,0,.12);--shadow:0 4px 20px rgba(0,0,0,.09);--hero-rad:radial-gradient(ellipse 60% 50% at 50% -5%,rgba(212,146,10,.055),transparent 68%);--grid-clr:rgba(0,0,0,.022);--nav-bg:rgba(238,240,243,.95)}
:root{--gold:#d49210;--gold2:#b87a08;--goldL:#f0b030;--green:#14a87a;--blue:#3580d8;--red:#d83535;--f:'Vazirmatn',sans-serif;--ease-out:cubic-bezier(.22,.68,0,1.2)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--f);overflow-x:hidden;direction:rtl;transition:background .28s,color .18s}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}
button,input,select,textarea{font-family:var(--f)}
a{text-decoration:none;color:inherit}

/* ═══ PAGE LOADER ═══ */
#loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;transition:opacity .55s ease,visibility .55s ease}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.ld-gem{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#d4920a,#a85010);display:grid;place-items:center;animation:lPulse 1.5s ease-in-out infinite}
@keyframes lPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,146,10,.35);transform:scale(1)}50%{box-shadow:0 0 0 14px rgba(212,146,10,0);transform:scale(1.06)}}
.ld-gem svg{width:26px;height:26px;fill:#000}
.ld-bar{width:180px;height:3px;background:var(--bg3);border-radius:2px;overflow:hidden}
.ld-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--goldL));border-radius:2px;animation:ldFill 1.1s ease forwards}
@keyframes ldFill{from{width:0}to{width:100%}}
.ld-txt{font-size:12px;color:var(--faint);letter-spacing:.07em}

/* ═══ PAGES ═══ */
.pg{display:none;min-height:100vh;padding-top:84px}
.pg.on{display:block;animation:pgIn .3s ease}
@keyframes pgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ═══ FLOATING LIQUID GLASS NAV ═══ */
#nav-wrap{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:800;width:min(900px,calc(100vw - 24px));transition:top .4s cubic-bezier(.22,.68,0,1.2)}
#nav{
  display:flex;align-items:center;gap:14px;padding:0 20px 0 24px;height:60px;
  background:rgba(6,8,14,0.48);
  backdrop-filter:blur(44px) saturate(210%) brightness(1.08);
  -webkit-backdrop-filter:blur(44px) saturate(210%) brightness(1.08);
  border-top:1.5px solid rgba(255,255,255,0.22);
  border-left:1px solid rgba(255,255,255,0.09);
  border-right:1px solid rgba(255,255,255,0.09);
  border-bottom:1px solid rgba(0,0,0,0.38);
  border-radius:100px;
  box-shadow:0 2px 0 rgba(255,255,255,.08) inset,0 -1px 0 rgba(0,0,0,.32) inset,0 16px 48px rgba(0,0,0,.52),0 4px 16px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.04);
  transition:all .4s cubic-bezier(.22,.68,0,1.2);
  position:relative;overflow:hidden;
}
#nav::before{content:"";position:absolute;top:0;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.28) 25%,rgba(255,255,255,.58) 50%,rgba(255,255,255,.28) 75%,transparent 100%);pointer-events:none}
#nav::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.032) 0%,transparent 55%);pointer-events:none;border-radius:inherit}
[data-theme="light"] #nav{
  background:rgba(255,255,255,0.44);
  backdrop-filter:blur(44px) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter:blur(44px) saturate(180%) brightness(1.06);
  border-top:1.5px solid rgba(255,255,255,0.88);
  border-left:1px solid rgba(255,255,255,0.55);
  border-right:1px solid rgba(255,255,255,0.55);
  border-bottom:1px solid rgba(0,0,0,0.07);
  box-shadow:0 2px 0 rgba(255,255,255,.88) inset,0 -1px 0 rgba(0,0,0,.05) inset,0 14px 44px rgba(0,0,0,.13),0 4px 14px rgba(0,0,0,.07);
}
[data-theme="light"] #nav::before{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.92) 30%,rgba(255,255,255,1) 50%,rgba(255,255,255,.92) 70%,transparent 100%)}
#nav.scrolled{
  background:rgba(4,5,11,0.68);
  backdrop-filter:blur(52px) saturate(240%) brightness(1.06);
  -webkit-backdrop-filter:blur(52px) saturate(240%) brightness(1.06);
  border-top-color:rgba(255,255,255,.25);
  box-shadow:0 2px 0 rgba(255,255,255,.1) inset,0 -1px 0 rgba(0,0,0,.42) inset,0 20px 56px rgba(0,0,0,.62),0 6px 20px rgba(0,0,0,.32);
}
[data-theme="light"] #nav.scrolled{background:rgba(255,255,255,0.70);backdrop-filter:blur(52px) saturate(200%);-webkit-backdrop-filter:blur(52px) saturate(200%);}

.nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0}
.nav-gem{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#d4920a,#a85010);display:grid;place-items:center;position:relative;overflow:hidden;flex-shrink:0;box-shadow:0 2px 10px rgba(212,146,10,.35)}
.nav-gem::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent)}
.nav-gem svg{width:16px;height:16px;fill:#000;position:relative;z-index:1}
.nav-brand b{display:block;font-size:12.5px;font-weight:800;line-height:1.2}
.nav-brand small{font-size:9px;color:var(--faint);letter-spacing:.07em}
.nav-sep{width:1px;height:20px;background:var(--rim2);flex-shrink:0;border-radius:1px}
.nav-links{display:flex;gap:1.1rem}
.nav-links a{font-size:13px;color:var(--muted);font-weight:500;cursor:pointer;transition:color .2s;position:relative;padding-bottom:2px;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;bottom:0;right:0;width:0;height:1px;background:var(--gold);transition:width .25s}
.nav-links a:hover{color:var(--text)}.nav-links a:hover::after,.nav-links a.on::after{width:100%}.nav-links a.on{color:var(--text)}
.nav-sp{flex:1}
.nav-acts{display:flex;gap:6px;align-items:center}
/* Theme toggle — simple CIRCLE button: the sun (light) / moon (dark) icon
   cross-fades + rotates in place. Pure-CSS swap driven by [data-theme]. */
.theme-tog{position:relative;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.05);border:1px solid var(--rim2);cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:background .2s,border-color .2s,transform .12s}
[data-theme="dark"]  .theme-tog{background:rgba(255,255,255,.06)}
.theme-tog:hover{background:rgba(212,146,10,.12);border-color:rgba(212,146,10,.45)}
.theme-tog:active{transform:scale(.9)}
.theme-tog:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.theme-tog .tt-ic{grid-area:1/1;display:flex;align-items:center;justify-content:center;transition:opacity .35s ease,transform .45s cubic-bezier(.4,0,.2,1)}
.theme-tog .tt-ic svg{width:18px;height:18px;stroke:currentColor}
.theme-tog .tt-sun{color:var(--gold)}
.theme-tog .tt-moon{color:var(--goldL)}
/* exactly one icon shows per theme — the other fades + rotates + shrinks out */
[data-theme="light"] .theme-tog .tt-sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-tog .tt-moon{opacity:0;transform:rotate(90deg) scale(.4)}
[data-theme="dark"]  .theme-tog .tt-moon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="dark"]  .theme-tog .tt-sun{opacity:0;transform:rotate(-90deg) scale(.4)}
.nb{padding:6px 15px;border-radius:100px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s;border:1px solid rgba(255,255,255,.11);background:transparent;color:var(--muted)}
.nb:hover{background:rgba(255,255,255,.09);color:var(--text)}
[data-theme="light"] .nb{border-color:rgba(0,0,0,.1)}
[data-theme="light"] .nb:hover{background:rgba(0,0,0,.06)}
.nb.fill{background:var(--gold);color:#000;border-color:var(--gold)}
.nb.fill:hover{background:var(--gold2)}
.u-pill{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);border-radius:100px;cursor:pointer;transition:all .2s;min-width:0;max-width:46vw}
[data-theme="light"] .u-pill{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.09)}
.u-pill:hover{border-color:var(--rim3)}
.u-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 6px var(--green)}
.u-nm{font-size:12.5px;font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.adm-pill{display:flex;align-items:center;gap:5px;padding:6px 13px;background:rgba(212,146,10,.13);border:1px solid rgba(212,146,10,.28);border-radius:100px;font-size:12px;font-weight:700;color:var(--goldL);text-decoration:none;transition:all .2s}
.adm-pill:hover{background:rgba(212,146,10,.22)}

/* ═══ CART BUTTON ═══ */
.cart-btn{position:relative;width:36px;height:36px;border-radius:9px;background:var(--bg3);border:1px solid var(--rim2);cursor:pointer;display:grid;place-items:center;transition:all .2s;flex-shrink:0}
.cart-btn:hover{background:var(--bg4);border-color:rgba(212,146,10,.3);transform:translateY(-1px)}
.cart-btn svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.cart-btn:hover svg{stroke:var(--text)}
.cart-count{position:absolute;top:-5px;left:-5px;min-width:18px;height:18px;background:var(--gold);color:#000;border-radius:100px;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;opacity:0;transform:scale(0);transition:all .3s var(--ease-out);pointer-events:none}
.cart-count.show{opacity:1;transform:scale(1)}
.cart-btn.bounce{animation:cBounce .5s var(--ease-out)}
@keyframes cBounce{0%{transform:scale(1) translateY(0)}30%{transform:scale(1.25) translateY(-4px)}60%{transform:scale(.95) translateY(1px)}100%{transform:scale(1) translateY(0)}}
.cart-btn.shake{animation:cShake .4s ease}
@keyframes cShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-13deg)}75%{transform:rotate(13deg)}}

/* FLYING ITEM */
.fly-item{position:fixed;width:42px;height:42px;border-radius:10px;background:var(--gold);display:grid;place-items:center;font-size:1.1rem;z-index:9000;pointer-events:none;box-shadow:0 4px 20px rgba(212,146,10,.5)}
.fly-item.go{transition:all .55s cubic-bezier(.4,0,.2,1);opacity:0;transform:scale(.25)}

/* ═══ TOASTS ═══ */
#toasts{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:8000;display:flex;flex-direction:column;gap:7px;align-items:center;pointer-events:none}
.tst{padding:10px 18px;border-radius:10px;font-size:12.5px;font-weight:600;backdrop-filter:blur(16px);animation:tIn .3s ease;white-space:nowrap;pointer-events:none;border:1px solid rgba(255,255,255,.1)}
.tst.ok{background:rgba(20,168,122,.9);color:#fff}.tst.err{background:rgba(216,53,53,.9);color:#fff}.tst.nfo{background:rgba(53,128,216,.9);color:#fff}
@keyframes tIn{from{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:none}}

/* ═══ OVERLAYS / MODALS ═══ */
.ovl{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);display:none;place-items:center;padding:1rem;overflow-y:auto}
.ovl.on{display:grid}
.mdl{background:var(--bg4);border:1px solid var(--rim2);border-radius:18px;padding:2rem;width:370px;max-width:100%;max-height:calc(100vh - 2rem);overflow-y:auto;position:relative;animation:mIn .25s ease;box-shadow:var(--shadow);margin:auto}
/* ─── F9: responsive purchase / modal popup on small screens ─── */
@media(max-width:430px){
  .ovl{padding:.6rem}
  .mdl{padding:1.3rem 1.1rem;border-radius:15px;max-height:calc(100vh - 1.2rem);width:100%}
  .mdl-x{top:9px;left:9px;width:30px;height:30px}
  /* keep the nav username from pushing the toggle/cart off-screen on small phones */
  .u-nm{max-width:96px}
}
@keyframes mIn{from{opacity:0;scale:.95;translate:0 10px}to{opacity:1;scale:1;translate:0 0}}
.mdl-x{position:absolute;top:12px;left:12px;width:28px;height:28px;background:var(--bg3);border:1px solid var(--rim);border-radius:7px;cursor:pointer;display:grid;place-items:center;font-size:13px;color:var(--muted);transition:all .2s}
.mdl-x:hover{background:var(--bg2);color:var(--text)}

/* AUTH */
.atabs{display:flex;gap:3px;background:var(--bg3);padding:3px;border-radius:9px;margin-bottom:1.2rem}
.at{flex:1;padding:7px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;text-align:center;color:var(--muted);border:none;background:transparent;transition:all .2s}
.at.on{background:var(--bg5);color:var(--text)}
.fld{margin-bottom:.85rem}
.fld label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:500}
.fld input{width:100%;background:var(--inp);border:1px solid var(--inp-bdr);border-radius:8px;padding:10px 12px;color:var(--text);font-size:13.5px;outline:none;transition:border-color .2s;direction:ltr;text-align:left}
.fld input.rtl{direction:rtl;text-align:right}
.fld input:focus{border-color:rgba(212,146,10,.45)}
.fld-hint{display:block;font-size:10.5px;color:var(--faint);margin-top:5px;line-height:1.6}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-bl{width:100%;padding:12px;background:var(--gold);color:#000;border:none;border-radius:8px;font-size:13.5px;font-weight:800;cursor:pointer;transition:all .2s;margin-top:5px}
.btn-bl:hover{background:var(--gold2)}.btn-bl:disabled{opacity:.5;cursor:not-allowed}

/* ═══ HERO ═══ */
.hero{position:relative;overflow:hidden;padding:3rem 1.5rem;min-height:calc(100vh - 72px);display:flex;align-items:center;contain:layout}
.hero-bg{position:absolute;inset:0;background:var(--hero-rad)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid-clr) 1px,transparent 1px),linear-gradient(90deg,var(--grid-clr) 1px,transparent 1px);background-size:50px 50px;mask-image:radial-gradient(ellipse 85% 85% at center,#000 0%,transparent 78%)}
.hero-inner{max-width:1060px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 360px;gap:4rem;align-items:center;position:relative;z-index:1}

/* Fix 1: Each hero child gets proper isolated block spacing */
.hero-content{display:flex;flex-direction:column;gap:0}
.hero-content>*{opacity:0;transform:translateY(22px)}
.hero-content.loaded>*{animation:hReveal .65s ease forwards}
.hero-content.loaded>*:nth-child(1){animation-delay:.05s}
.hero-content.loaded>*:nth-child(2){animation-delay:.16s}
.hero-content.loaded>*:nth-child(3){animation-delay:.27s}
.hero-content.loaded>*:nth-child(4){animation-delay:.38s}
.hero-content.loaded>*:nth-child(5){animation-delay:.49s}
@keyframes hReveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.h-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(212,146,10,.1);border:1px solid rgba(212,146,10,.25);color:var(--gold);padding:5px 12px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.05em;margin-bottom:1.1rem;align-self:flex-start}
.h-pill::before{content:"";width:5px;height:5px;background:var(--gold);border-radius:50%;animation:blnk 2.5s ease infinite;flex-shrink:0}
@keyframes blnk{0%,100%{opacity:1}50%{opacity:.2}}
.h-h1{font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:900;line-height:1.15;letter-spacing:-.02em;margin-bottom:1rem}
.h-h1 mark{background:none;color:var(--goldL)}
.h-p{font-size:.93rem;color:var(--muted);line-height:1.85;max-width:460px;margin-bottom:1.8rem}
.h-ctas{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:2.2rem;align-items:center}
.cta-a{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:#000;padding:11px 24px;border-radius:9px;font-size:13.5px;font-weight:800;border:none;cursor:pointer;transition:all .25s;white-space:nowrap}
.cta-a:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,146,10,.3)}
.cta-b{display:inline-flex;align-items:center;gap:7px;background:var(--bg4);color:var(--text);padding:11px 24px;border-radius:9px;font-size:13.5px;font-weight:600;border:1px solid var(--rim2);cursor:pointer;transition:all .25s;white-space:nowrap}
.cta-b:hover{background:var(--bg5);border-color:var(--rim3)}
.h-nums{display:flex;gap:2.5rem;align-items:flex-end;flex-wrap:wrap}
.hnum{display:flex;flex-direction:column;gap:3px}
.hnum b{display:block;font-size:1.5rem;font-weight:900;color:var(--goldL);line-height:1}
.hnum small{font-size:11px;color:var(--faint);display:block}

/* BOOK 3D */
.bk-scene{display:flex;flex-direction:column;align-items:center;opacity:0;animation:bkReveal .8s .3s ease forwards;will-change:transform,opacity}
@keyframes bkReveal{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.bk3d{width:196px;height:272px;position:relative;transform:rotateY(-16deg) rotateX(4deg);filter:drop-shadow(0 28px 50px rgba(0,0,0,.65));animation:bflt 5s ease-in-out infinite;transform-style:preserve-3d;transition:transform .5s ease;will-change:transform}
/* Real book cover image — inherits every .bk3d animation (float, reveal, mouse-tilt) */
.bk-cover-img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  user-select:none;-webkit-user-drag:none;
  border-radius:3px 11px 11px 3px;
  transition:filter .35s ease;
}
.bk3d:hover .bk-cover-img{filter:brightness(1.06) saturate(1.05)}
@keyframes bflt{0%,100%{transform:rotateY(-16deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(-16deg) rotateX(4deg) translateY(-9px)}}
.bk-cov{width:196px;height:272px;border-radius:3px 11px 11px 3px;background:linear-gradient(148deg,#12192a,#090d17);border:1px solid rgba(212,146,10,.22);padding:18px 15px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.bk-cov::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,146,10,.05),transparent 55%)}
.bk-tag{font-size:8.5px;font-weight:700;color:var(--gold);letter-spacing:.1em;opacity:.75}
.bk-title{font-size:19px;font-weight:900;color:#ece9e3;line-height:1.2}
.bk-title em{color:var(--goldL);font-style:normal}
.bk-lines{display:flex;flex-direction:column;gap:4px}
.bk-line{height:2px;border-radius:1px}
.bk-meta{font-size:8px;color:#454240;letter-spacing:.06em}
.bk-spine{position:absolute;left:0;top:3px;bottom:3px;width:9px;background:linear-gradient(to right,#040609,#12192a);border-radius:2px 0 0 2px}
.bk-shadow{width:170px;height:16px;background:rgba(0,0,0,.5);border-radius:50%;filter:blur(12px);margin-top:-6px;position:relative;z-index:0}
/* z-index keeps the purchase card painted ABOVE the book's drop-shadow.
   The book uses a transform (stacking context), which otherwise paints
   over later siblings — so the card must claim a higher layer. */
.bk-cta-card{background:var(--bg4);border:1px solid var(--rim2);border-radius:14px;padding:1.1rem;margin-top:1.4rem;width:100%;max-width:260px;box-shadow:var(--shadow);position:relative;z-index:5}
.p-row{display:flex;align-items:baseline;gap:7px;margin-bottom:.75rem}
.p-new{font-size:1.6rem;font-weight:900;color:var(--goldL)}
.p-unit{font-size:11px;color:var(--faint)}
.p-old{font-size:.85rem;color:var(--faint);text-decoration:line-through}

/* ═══ SECTIONS ═══ */
.sec{padding:4.5rem 1.5rem;content-visibility:auto;contain-intrinsic-size:0 500px}
.si{max-width:1060px;margin:0 auto}
.ey{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:.1em;margin-bottom:.7rem;text-transform:uppercase}
.sh2{font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:800;line-height:1.2;margin-bottom:.55rem}
.s-sub{color:var(--muted);font-size:.9rem;line-height:1.75;max-width:500px}

/* ═══ PRODUCT CARDS ═══ */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin-top:2.5rem}
.pc{background:var(--card);border:1px solid var(--card-bdr);border-radius:14px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;cursor:pointer;display:flex;flex-direction:column;box-shadow:var(--shadow);content-visibility:auto;contain-intrinsic-size:0 340px}
.pc:hover{transform:translateY(-4px);border-color:rgba(212,146,10,.2);box-shadow:0 16px 40px rgba(0,0,0,.25)}
[data-theme="light"] .pc:hover{box-shadow:0 12px 28px rgba(0,0,0,.12)}
.pc-img{height:152px;position:relative;overflow:hidden;flex-shrink:0;background:var(--bg3);user-select:none}
.pc-img img{width:100%;height:100%;object-fit:cover;filter:blur(9px) brightness(.58) saturate(.75);transform:scale(1.06) translateZ(0);pointer-events:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none}
.pc-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
/* Placeholder backgrounds driven by data-ptype — theme switch = pure CSS repaint, no DOM rebuild */
.pc-img-ph[data-ptype="book"]{background:linear-gradient(148deg,#12192a,#080d17)}
.pc-img-ph[data-ptype="chapter"]{background:linear-gradient(148deg,#0e1520,#060d18)}
.pc-img-ph[data-ptype="image"]{background:linear-gradient(148deg,#131a14,#080e0a)}
.pc-img-ph[data-ptype="article"]{background:linear-gradient(148deg,#1a1510,#100d08)}
.pc-img-ph[data-ptype="bundle"]{background:linear-gradient(148deg,#2a1f0a,#1a1305)}
[data-theme="light"] .pc-img-ph[data-ptype="book"]{background:linear-gradient(148deg,#dde3ed,#ccd4e0)}
[data-theme="light"] .pc-img-ph[data-ptype="chapter"]{background:linear-gradient(148deg,#d8e0ea,#c8d2e0)}
[data-theme="light"] .pc-img-ph[data-ptype="image"]{background:linear-gradient(148deg,#d8e4d8,#c8d8c8)}
[data-theme="light"] .pc-img-ph[data-ptype="article"]{background:linear-gradient(148deg,#e4ddd8,#d4ccc4)}
[data-theme="light"] .pc-img-ph[data-ptype="bundle"]{background:linear-gradient(148deg,#f3e8cf,#e8dab8)}
.pc-img-ph-ico{font-size:2.8rem;opacity:.18;position:relative;z-index:1}
.pc-img-wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transform:rotate(-28deg)}
.pc-img-wm span{font-size:8px;color:rgba(255,255,255,.06);font-weight:800;letter-spacing:.3em;white-space:nowrap;text-transform:uppercase;user-select:none}
[data-theme="light"] .pc-img-wm span{color:rgba(0,0,0,.05)}
.pc-lock{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.68);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:3px 7px;font-size:10px;color:rgba(255,255,255,.52);display:flex;align-items:center;gap:3px}
.pc-bdg{display:inline-block;padding:2px 8px;border-radius:5px;font-size:10.5px;font-weight:700;margin-bottom:.4rem}
.book-b{background:rgba(20,168,122,.1);color:var(--green)}
.ch-b{background:rgba(53,128,216,.1);color:var(--blue)}
.img-b{background:rgba(212,146,10,.1);color:var(--gold)}
.art-b{background:rgba(200,180,140,.1);color:#b89664}
.pc-body{padding:.9rem;display:flex;flex-direction:column;flex:1}
.pc-nm{font-size:13.5px;font-weight:700;line-height:1.35;margin-bottom:.35rem;flex:1}
.pc-ds{font-size:11.5px;color:var(--muted);line-height:1.6;margin-bottom:.75rem}
.pc-ft{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:6px}
.pc-pr{font-size:14px;font-weight:800;color:var(--goldL)}
.pc-rt{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--muted)}
.pc-rt .s{color:var(--gold)}
/* Fix 2: button group — flex column, no freeze, isolated from card click */
.pc-btn-grp{display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex-shrink:0}
.buy-b{background:rgba(212,146,10,.1);border:1px solid rgba(212,146,10,.25);color:var(--gold);padding:5px 12px;border-radius:7px;font-size:11.5px;font-weight:700;cursor:pointer;transition:background .18s,color .18s;white-space:nowrap}
.buy-b:hover{background:var(--gold);color:#000}
.cart-add-b{background:rgba(53,128,216,.1);border:1px solid rgba(53,128,216,.25);color:var(--blue);padding:5px 9px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;transition:background .18s,color .18s,border-color .18s;white-space:nowrap;display:flex;align-items:center;gap:3px}
.cart-add-b:hover{background:var(--blue);color:#fff}
.cart-add-b.in-cart{background:rgba(20,168,122,.12);border-color:rgba(20,168,122,.28);color:var(--green)}
/* Fix 2: Performance — only promote compositing on hover, not all cards */
.pc:hover{transform:translateY(-4px);border-color:rgba(212,146,10,.2);box-shadow:0 16px 40px rgba(0,0,0,.25);will-change:transform}
/* List view btn group */
.pc.lv .pc-btn-grp{flex-direction:row;align-items:center}
/* ═══ SHOP — INTEGRATED SEARCH ═══ */
.shop-pg{max-width:1060px;margin:0 auto;padding:1.5rem 1.5rem 0}
.is-wrap{background:var(--card);border:1.5px solid var(--card-bdr);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:border-color .25s,box-shadow .25s;margin-bottom:1.2rem}
.is-wrap:focus-within{border-color:rgba(212,146,10,.4);box-shadow:0 0 0 4px rgba(212,146,10,.07)}
.is-top{display:flex;align-items:center}
.is-modes{display:flex;gap:2px;padding:.4rem .6rem;border-left:1px solid var(--rim);flex-shrink:0}
.is-mode{padding:5px 10px;border-radius:7px;font-size:11.5px;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--muted);transition:all .2s;white-space:nowrap}
.is-mode.on{background:rgba(212,146,10,.12);color:var(--gold)}
.is-inp{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:13.5px;padding:.8rem 1rem;direction:rtl}
.is-inp::placeholder{color:var(--faint)}
.is-go{width:38px;height:38px;background:var(--gold);border:none;border-radius:9px;display:grid;place-items:center;cursor:pointer;transition:all .2s;margin:4px;flex-shrink:0}
.is-go:hover{background:var(--gold2)}
.is-go svg{stroke:#000;fill:none;width:14px;height:14px;stroke-width:2.5;stroke-linecap:round}
.is-tags{display:flex;gap:6px;flex-wrap:wrap;padding:.55rem 1rem;border-top:1px solid var(--rim);background:rgba(212,146,10,.03)}
.is-tag{padding:4px 10px;border-radius:100px;font-size:11.5px;color:var(--muted);border:1px solid var(--rim2);cursor:pointer;transition:all .2s;background:transparent}
.is-tag:hover{border-color:rgba(212,146,10,.3);color:var(--gold)}
.is-results{display:none;border-top:1px solid var(--rim);max-height:260px;overflow-y:auto}
.is-results.show{display:block}
.is-r-hd{padding:.6rem 1rem .3rem;font-size:10.5px;font-weight:700;color:var(--faint);letter-spacing:.05em;text-transform:uppercase}
.is-ri{display:flex;align-items:center;padding:.55rem 1rem;cursor:pointer;transition:background .15s;gap:.7rem}
.is-ri:hover{background:var(--bg3)}
.is-ri-ico{font-size:1.1rem;flex-shrink:0}
.is-ri-nm{flex:1;font-size:12.5px;font-weight:600}
.is-ri-pr{font-size:12px;color:var(--goldL);font-weight:700;flex-shrink:0}
.ai-strip{display:none;padding:.85rem 1rem;border-top:1px solid rgba(20,168,122,.15);background:rgba(20,168,122,.04)}
.ai-strip.show{display:block}
.ai-sh{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--green);margin-bottom:.5rem}
.ai-ans{font-size:12.5px;color:var(--muted);line-height:1.75}
.ai-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:.65rem}
.ai-chip{padding:4px 10px;border-radius:7px;font-size:11.5px;font-weight:600;background:rgba(212,146,10,.08);border:1px solid rgba(212,146,10,.2);color:var(--gold);cursor:pointer;transition:all .2s}
.ai-chip:hover{background:rgba(212,146,10,.18)}

/* FILTER BAR */
.shop-fbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:1.2rem}
.sf-btns{display:flex;gap:5px;flex-wrap:wrap}
.sf-b{padding:6px 13px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--rim2);background:transparent;color:var(--muted);transition:all .2s;white-space:nowrap}
.sf-b:hover{background:var(--bg4);color:var(--text)}
.sf-b.on{background:rgba(212,146,10,.1);border-color:rgba(212,146,10,.28);color:var(--goldL)}
.sf-sort{background:var(--inp);border:1px solid var(--inp-bdr);border-radius:8px;padding:7px 10px;color:var(--text);font-size:12px;outline:none;cursor:pointer;min-width:120px}
.sf-sort option{background:var(--bg4)}
.shop-stats{font-size:12px;color:var(--muted);margin-right:auto;white-space:nowrap}
.vt-grp{display:flex;gap:3px;background:var(--bg3);border:1px solid var(--rim);padding:3px;border-radius:8px;flex-shrink:0}
.vt-b{width:30px;height:30px;border-radius:5px;border:none;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--muted);transition:all .2s}
.vt-b.on{background:var(--bg5);color:var(--text)}
.pg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.pg-grid.lv{grid-template-columns:1fr}
/* Fix 4: Horizontal card - 38% image : 62% text, fixed height, no overflow */
.pc.lv{flex-direction:row;height:auto;min-height:0}
.pc.lv .pc-img{width:38%;max-width:160px;min-width:100px;flex-shrink:0;border-radius:14px 0 0 14px;aspect-ratio:4/3;height:auto}
.pc.lv .pc-img-ph{height:100%;min-height:100px;aspect-ratio:unset}
.pc.lv .pc-img img{height:100%}
.pc.lv .pc-body{flex:1;flex-direction:column;align-items:flex-start;padding:.8rem 1rem;gap:.4rem;min-width:0;justify-content:space-between}
.pc.lv .pc-nm{font-size:13px;margin-bottom:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
.pc.lv .pc-ds{display:none}
.pc.lv .pc-bdg{margin-bottom:0}
.pc.lv .pc-ft{width:100%;flex-direction:row;align-items:center;justify-content:space-between;gap:6px;margin-top:0}

/* ═══ PAGINATION ═══ */
.pgn{display:flex;align-items:center;justify-content:center;gap:5px;margin:2rem 0 1rem;flex-wrap:wrap}
.pgn-b{width:36px;height:36px;border-radius:9px;border:1px solid var(--rim2);background:transparent;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:all .22s;display:grid;place-items:center;font-family:var(--f)}
.pgn-b:hover{background:var(--bg4);color:var(--text);border-color:var(--rim3)}
.pgn-b.on{background:var(--gold);color:#000;border-color:var(--gold);box-shadow:0 2px 12px rgba(212,146,10,.35)}
.pgn-b.dis{opacity:.3;cursor:not-allowed;pointer-events:none}
.pgn-dots{padding:0 4px;color:var(--faint);font-size:13px}

/* ═══ DETAIL ═══ */
.dt-w{max-width:1060px;margin:0 auto;padding:1rem 1.5rem 4rem}
/* Modern pill back-button — icon + label, subtle elevation, gold hover */
.back-b{display:inline-flex;align-items:center;gap:.5rem;color:var(--text);font-size:13px;font-weight:700;font-family:var(--f);
  cursor:pointer;background:var(--bg3);border:1px solid var(--card-bdr);border-radius:100px;
  padding:.5rem 1.05rem .5rem .9rem;margin-bottom:1.4rem;box-shadow:var(--shadow);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.back-b svg{width:15px;height:15px;transition:transform .22s ease}
.back-b:hover{background:rgba(212,146,10,.08);border-color:rgba(212,146,10,.45);color:var(--gold)}
.back-b:hover svg{transform:translateX(-3px)}
.back-b:active{transform:scale(.97)}
.dt-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:3rem;align-items:start}
.dt-media{position:sticky;top:90px}
.dt-vis{background:var(--bg3);border:1px solid var(--card-bdr);border-radius:18px;height:420px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.dt-vis img{width:100%;height:100%;object-fit:cover;filter:blur(14px) brightness(.5) saturate(.7);transform:scale(1.08);pointer-events:none;user-select:none;-webkit-user-drag:none;position:absolute;inset:0}
.dt-vis-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:2}
.dt-vis-lock .ico{font-size:5rem;opacity:.12}
.dt-vis-lock span{font-size:12px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.05em}
.dt-wm{position:absolute;inset:0;pointer-events:none;overflow:hidden;display:flex;flex-direction:column;gap:80px;justify-content:center;transform:rotate(-25deg)}
.dt-wm-row{display:flex;gap:100px;white-space:nowrap}
.dt-wm span{font-size:10px;color:rgba(255,255,255,.04);font-weight:800;letter-spacing:.2em;text-transform:uppercase;user-select:none}
.dt-secure{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:5px 10px;font-size:11px;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:5px}
.dt-ey{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.06em;margin-bottom:.5rem}
.dt-title{font-size:1.6rem;font-weight:900;line-height:1.2;margin-bottom:.75rem}
.dt-strs{display:flex;align-items:center;gap:5px;margin-bottom:1rem}
.stx{font-size:14px}.stx.on{color:var(--gold)}.stx.off{color:var(--faint)}
.dt-rn{font-size:13px;font-weight:700}.dt-rc{font-size:12px;color:var(--muted)}
.dt-pb{background:var(--bg3);border:1px solid var(--card-bdr);border-radius:12px;padding:1rem;margin:1rem 0}
.dp-row{display:flex;align-items:baseline;gap:8px}
.dp-new{font-size:1.7rem;font-weight:900;color:var(--goldL)}
.dp-unit{font-size:12px;color:var(--faint)}
.dp-old{font-size:.9rem;color:var(--faint);text-decoration:line-through}
.dp-disc{background:rgba(20,168,122,.1);border:1px solid rgba(20,168,122,.2);color:var(--green);padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700}
.dt-acts{display:flex;gap:9px;margin:1rem 0}
.da-buy{flex:1;padding:12px;background:var(--gold);color:#000;border:none;border-radius:9px;font-size:14px;font-weight:800;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:7px}
.da-buy:hover{background:var(--gold2);transform:translateY(-1px)}
.da-cart{padding:12px 16px;background:rgba(53,128,216,.1);border:1px solid rgba(53,128,216,.25);border-radius:9px;display:grid;place-items:center;cursor:pointer;transition:all .2s;color:var(--blue)}
.da-cart:hover{background:var(--blue);color:#fff}
.da-shr{width:42px;height:42px;background:var(--bg4);border:1px solid var(--rim2);border-radius:9px;display:grid;place-items:center;cursor:pointer;transition:all .2s;color:var(--muted)}
.da-shr:hover{color:var(--text)}
.sp-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--rim)}
.sp-row:last-child{border:none}
.sp-l{font-size:12px;color:var(--muted)}.sp-v{font-size:12.5px;font-weight:600}
/* short lead paragraph under the title (modern, cleaner detail layout) */
.dt-lead{font-size:13px;color:var(--muted);line-height:1.9;margin:0 0 1.1rem}
/* spec rows wrapped in a single card for a tidier look */
.dt-specs{background:var(--bg3);border:1px solid var(--card-bdr);border-radius:12px;padding:.4rem 1rem;margin-top:1.2rem}
/* trust badges row — reassurance without clutter */
.dt-trust{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.dt-trust-i{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--bg4);border:1px solid var(--rim2);border-radius:100px;padding:5px 11px}
.dt-trust-i .ic{color:var(--gold)}
.dt-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:1.2rem}
.dtg{padding:4px 10px;border-radius:100px;font-size:11px;color:var(--muted);border:1px solid var(--rim2);cursor:pointer;transition:all .2s}
.dtg:hover{border-color:rgba(212,146,10,.3);color:var(--gold)}

/* REVIEWS */
.rev-sec{margin-top:2rem;border-top:1px solid var(--rim);padding-top:1.5rem;max-width:680px}
.rev-sec h3{font-size:15px;font-weight:800;margin-bottom:1.2rem}
.rev-write{background:var(--card);border:1px solid var(--card-bdr);border-radius:12px;padding:1.1rem;margin-bottom:1.2rem;box-shadow:var(--shadow)}
.rev-write h4{font-size:13px;font-weight:700;margin-bottom:.75rem}
.star-sel{display:flex;gap:6px;margin-bottom:.75rem}
.ss-star{cursor:pointer;color:var(--faint);transition:color .15s,transform .15s;line-height:0}
.ss-star:hover{transform:scale(1.15)}
.ss-star.on{color:var(--gold)}
.ss-star .ic{display:block}
.ss-star{font-size:1.5rem;cursor:pointer;transition:transform .15s;color:var(--faint)}
.ss-star.on{color:var(--gold)}.ss-star:hover{transform:scale(1.2);color:var(--gold)}
.rev-ta{width:100%;background:var(--inp);border:1px solid var(--inp-bdr);border-radius:9px;padding:10px 13px;color:var(--text);font-size:13px;resize:vertical;min-height:80px;outline:none;transition:border-color .2s;direction:rtl}
.rev-ta:focus{border-color:rgba(212,146,10,.4)}
.rev-sub{margin-top:.6rem;padding:9px 18px;background:var(--gold);color:#000;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
.rev-sub:hover{background:var(--gold2)}
.rev-gate{background:rgba(53,128,216,.06);border:1px solid rgba(53,128,216,.15);border-radius:10px;padding:1rem;text-align:center;font-size:13px;color:var(--muted);margin-bottom:1.2rem}
.rev-gate span{color:var(--gold);cursor:pointer;font-weight:600}
.rev-item{background:var(--card);border:1px solid var(--card-bdr);border-radius:11px;padding:1rem;margin-bottom:.9rem;box-shadow:var(--shadow)}
.ri-top{display:flex;align-items:center;gap:9px;margin-bottom:.6rem}
.ri-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#a05010);display:grid;place-items:center;font-size:11px;font-weight:800;color:#000;flex-shrink:0}
.ri-nm{font-size:13px;font-weight:700}.ri-dt{font-size:11px;color:var(--faint)}
.ri-strs{display:flex;gap:2px;margin-right:auto}
.ri-s{font-size:12px;color:var(--faint)}.ri-s.on{color:var(--gold)}
.ri-txt{font-size:13px;color:var(--muted);line-height:1.7}
/* admin reply shown under a review */
.ri-reply{margin-top:.75rem;margin-right:1.2rem;background:rgba(212,146,10,.07);
  border:1px solid rgba(212,146,10,.2);border-right:3px solid var(--gold);
  border-radius:9px;padding:.7rem .85rem}
.ri-reply-hd{display:flex;align-items:center;gap:.35rem;font-size:11.5px;
  font-weight:800;color:var(--gold);margin-bottom:.35rem}
.ri-reply-hd svg{stroke:var(--gold)}
.ri-reply-txt{font-size:12.5px;color:var(--muted);line-height:1.75}

/* ═══ QR PAGE ═══ */
.qr-land{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 56px);padding:2rem;text-align:center}
.qr-land h2{font-size:1.6rem;font-weight:900;margin-bottom:.5rem}
.qr-land p{font-size:14px;color:var(--muted);margin-bottom:1.5rem;line-height:1.7}
@keyframes qrPls{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.qr-dual{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:560px;width:100%;margin-bottom:1.5rem}
.qr-method{background:var(--card);border:1px solid var(--card-bdr);border-radius:16px;padding:1.4rem;text-align:center;transition:border-color .2s;box-shadow:var(--shadow)}
.qr-method:hover{border-color:rgba(212,146,10,.25)}
.qr-m-ico{font-size:2rem;margin-bottom:.6rem}
.qr-m-title{font-size:13.5px;font-weight:800;margin-bottom:.3rem}
.qr-m-sub{font-size:12px;color:var(--muted);margin-bottom:.9rem;line-height:1.5}
.qr-text-row{display:flex;gap:7px;max-width:560px;width:100%}
.qr-inp{flex:1;background:var(--card);border:1px solid var(--card-bdr);border-radius:9px;padding:11px 14px;color:var(--text);font-size:13px;outline:none;direction:ltr;text-align:left;transition:border-color .2s;box-shadow:var(--shadow)}
.qr-inp:focus{border-color:rgba(212,146,10,.4)}
.qr-sb{background:var(--bg4);border:1px solid var(--rim2);border-radius:8px;padding:8px 12px;color:var(--muted);font-size:12px;cursor:pointer;text-align:right;transition:all .2s;width:100%}
.qr-sb:hover{color:var(--text);background:var(--bg5)}
.qr-ok{background:rgba(20,168,122,.07);border:1px solid rgba(20,168,122,.18);border-radius:12px;padding:1rem;text-align:right}
.qr-err{background:rgba(216,53,53,.07);border:1px solid rgba(216,53,53,.18);border-radius:12px;padding:1rem;color:var(--red);font-size:13px}

/* CAMERA MODAL */
.cam-mdl{width:min(460px,96vw)}
.cam-preview{width:100%;height:280px;border-radius:12px;background:#000;overflow:hidden;position:relative;margin-bottom:.9rem}
.cam-preview video{width:100%;height:100%;object-fit:cover}
/* html5-qrcode container — fill the preview, hide the library's default chrome */
.qr-reader{position:absolute;inset:0;width:100%;height:100%}
.qr-reader video{width:100%!important;height:100%!important;object-fit:cover;display:block}
#qrReader__dashboard,#qrReader__camera_selection,#qrReader img{display:none!important}
#qrReader__scan_region{background:transparent!important}
.cam-cr{position:absolute;width:36px;height:36px;border-color:var(--gold);border-style:solid;opacity:.85}
.cam-cr.tl{top:12px;right:12px;border-width:3px 0 0 3px;border-radius:0 0 0 4px}
.cam-cr.tr{top:12px;left:12px;border-width:3px 3px 0 0;border-radius:0 0 4px 0}
.cam-cr.bl{bottom:12px;right:12px;border-width:0 0 3px 3px;border-radius:4px 0 0 0}
.cam-cr.br{bottom:12px;left:12px;border-width:0 3px 3px 0;border-radius:0 4px 0 0}
.cam-scan{position:absolute;left:12px;right:12px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:scanL 2s ease-in-out infinite;top:50%}
@keyframes scanL{0%,100%{top:20%;opacity:1}50%{top:80%;opacity:.6}}
.cam-stat{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:5px 14px;font-size:12px;color:rgba(255,255,255,.7);white-space:nowrap}
.cam-fallback{background:rgba(212,146,10,.06);border:1px solid rgba(212,146,10,.15);border-radius:9px;padding:.75rem;font-size:12.5px;color:var(--muted);text-align:center;margin-bottom:.8rem;display:none}
.cam-fallback.show{display:block}

/* ═══ CART SIDEBAR ═══ */
.cart-bd{position:fixed;inset:0;z-index:940;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.cart-bd.show{opacity:1;pointer-events:all}
.cart-ovl{position:fixed;top:0;left:0;bottom:0;width:min(400px,100vw);z-index:950;transform:translateX(-100%);transition:transform .38s cubic-bezier(.22,.68,0,1.2);background:var(--bg3);border-right:1px solid var(--rim2);box-shadow:8px 0 40px rgba(0,0,0,.5);display:flex;flex-direction:column}
.cart-ovl.open{transform:translateX(0)}
.cart-hd{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem;border-bottom:1px solid var(--rim2)}
.cart-hd h2{font-size:1rem;font-weight:800}
.cart-close{width:32px;height:32px;background:var(--bg4);border:1px solid var(--rim);border-radius:8px;cursor:pointer;display:grid;place-items:center;font-size:14px;color:var(--muted);transition:all .2s}
.cart-close:hover{background:var(--bg2);color:var(--text)}
.cart-body{flex:1;overflow-y:auto;padding:1rem 1.4rem}
.cart-empty{text-align:center;padding:3rem 1rem;color:var(--faint)}
.cart-empty-ico{font-size:2.5rem;margin-bottom:.75rem;opacity:.4}
.cart-item{display:flex;gap:.9rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--rim)}
.cart-item:last-child{border:none}
.ci-ico{width:44px;height:44px;border-radius:9px;background:var(--bg4);display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}
.ci-info{flex:1}
.ci-nm{font-size:13px;font-weight:700;line-height:1.3;margin-bottom:3px}
.ci-pr{font-size:12px;color:var(--goldL);font-weight:700}
.ci-del{width:28px;height:28px;background:rgba(216,53,53,.1);border:1px solid rgba(216,53,53,.2);border-radius:7px;color:var(--red);cursor:pointer;display:grid;place-items:center;font-size:14px;transition:all .2s;flex-shrink:0}
.ci-del:hover{background:var(--red);color:#fff}
.cart-ft{padding:1rem 1.4rem;border-top:1px solid var(--rim2)}
.cart-tot-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}
.cart-tot-lbl{font-size:13px;color:var(--muted)}
.cart-tot-val{font-size:1.4rem;font-weight:900;color:var(--goldL)}
.cart-pay-btn{width:100%;padding:12px;background:var(--gold);color:#000;border:none;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.cart-pay-btn:hover{background:var(--gold2);transform:translateY(-1px)}

/* ═══ CHECKOUT PAGE ═══ */
.cho-wrap{max-width:660px;margin:2rem auto;padding:0 1.5rem 4rem}
.cho-hd{text-align:center;margin-bottom:2rem}
.cho-hd h1{font-size:1.5rem;font-weight:900;margin-bottom:.4rem}
.cho-hd p{font-size:13px;color:var(--muted)}
.cho-items{background:var(--card);border:1px solid var(--card-bdr);border-radius:14px;overflow:hidden;margin-bottom:1.2rem;box-shadow:var(--shadow)}
.cho-row{display:flex;align-items:center;gap:1rem;padding:.9rem 1.2rem;border-bottom:1px solid var(--rim)}
.cho-row:last-child{border:none}
.cho-ico{width:44px;height:44px;border-radius:9px;background:var(--bg4);display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}
.cho-nm{flex:1;font-size:13.5px;font-weight:700}
.cho-pr{font-size:13px;font-weight:700;color:var(--goldL);flex-shrink:0}
.cho-sum{background:var(--card);border:1px solid var(--card-bdr);border-radius:14px;padding:1.2rem;margin-bottom:1.2rem;box-shadow:var(--shadow)}
.cs-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:.4rem 0}
.cs-row.total{font-size:1.1rem;font-weight:900;color:var(--text);border-top:1px solid var(--rim);margin-top:.4rem;padding-top:.7rem}
.cs-row.total span:last-child{color:var(--goldL)}
.cho-pay-btn{width:100%;padding:14px;background:var(--gold);color:#000;border:none;border-radius:11px;font-size:15px;font-weight:900;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 20px rgba(212,146,10,.35)}
.cho-pay-btn:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 8px 30px rgba(212,146,10,.45)}
.cho-pay-btn:disabled{opacity:.5;cursor:not-allowed}
.cho-secure{text-align:center;font-size:11.5px;color:var(--faint);margin-top:.7rem;display:flex;align-items:center;justify-content:center;gap:5px}

/* ═══ PREMIUM FLOATING DASH SIDEBAR ═══ */
.dash-wrap{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:1.5rem;
  min-height:calc(100vh - 84px);
  padding:1.5rem;
  max-width:1200px;
  margin:0 auto;
  align-items:start;
}
/* Floating island sidebar */
.d-side{
  background:var(--card);
  border:1px solid var(--card-bdr);
  border-radius:20px;
  padding:0;
  position:sticky;
  top:96px; /* nav height + gap */
  box-shadow:var(--shadow),0 0 0 1px rgba(212,146,10,.04);
  overflow:hidden;
  transition:box-shadow .3s;
}
.d-side:hover{box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px rgba(212,146,10,.08)}
.ds-prof{
  padding:1.4rem 1.2rem 1.1rem;
  background:linear-gradient(135deg,rgba(212,146,10,.06),rgba(212,146,10,.02));
  border-bottom:1px solid var(--rim);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;
}
.ds-av{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),#a05010);
  display:grid;place-items:center;
  font-size:16px;font-weight:900;color:#000;
  box-shadow:0 4px 14px rgba(212,146,10,.35);
  margin-bottom:.2rem;
}
.ds-name-wrap{max-width:100%;overflow:hidden}
.ds-name{font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;text-align:center;display:block}
.ds-ph{font-size:13px;font-weight:800}

/* ─── F6: mobile-only profile header with username marquee ─── */
.d-mob-prof{display:none}
@media(max-width:880px){
  .d-mob-prof{
    display:flex;align-items:center;gap:.7rem;
    background:var(--card);border:1px solid var(--card-bdr);
    border-radius:13px;padding:.8rem .9rem;margin-bottom:1rem;
    box-shadow:var(--shadow);
  }
}
.dmp-av{
  flex-shrink:0;width:42px;height:42px;border-radius:11px;
  background:linear-gradient(145deg,var(--gold),var(--gold2));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;
}
.dmp-info{min-width:0;flex:1;overflow:hidden}
.dmp-name-wrap{max-width:100%;overflow:hidden}
.dmp-name{
  font-size:14px;font-weight:800;color:var(--text);
  white-space:nowrap;display:block;
}
/* وقتی نام طولانی است: انیمیشن مارکی نرم رفت‌وبرگشتی */
.dmp-name.marquee{
  display:inline-block;
  animation:dmpMarquee 8s ease-in-out infinite alternate;
}
@keyframes dmpMarquee{
  0%,12%{transform:translateX(0)}
  88%,100%{transform:translateX(calc(-1 * (100% - 150px)))}
}
.dmp-name-wrap:active .dmp-name.marquee{animation-play-state:paused}
.dmp-ph{font-size:12px;color:var(--muted);margin-top:2px}
.dmp-rl{
  flex-shrink:0;font-size:11px;font-weight:700;color:var(--green);
  background:rgba(20,168,122,.1);padding:3px 11px;border-radius:100px;
}
.ds-rl{font-size:11px;color:var(--green);font-weight:600;background:rgba(20,168,122,.08);padding:2px 10px;border-radius:100px;display:inline-block}
.d-nav{padding:.6rem .7rem .7rem}
.di{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:10px;
  font-size:13px;color:var(--muted);cursor:pointer;
  transition:all .2s;font-weight:500;
  border:1px solid transparent;margin-bottom:3px;
}
.di svg{width:15px;height:15px;flex-shrink:0;transition:color .2s}
.di:hover{background:var(--bg4);color:var(--text)}
.di.on{background:rgba(212,146,10,.09);color:var(--gold);border-color:rgba(212,146,10,.18);font-weight:600}
.di.on svg{color:var(--gold)}
.d-sep{height:1px;background:var(--rim);margin:.5rem .3rem}
.d-logout{color:var(--red)!important}.d-logout:hover{background:rgba(216,53,53,.08)!important;color:var(--red)!important}
.d-main{min-width:0}
.dv{display:none}.dv.on{display:block}
.dv-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;padding-bottom:.9rem;border-bottom:1px solid var(--rim)}
.dv-hd h2{font-size:15px;font-weight:800}
.pu-lst{display:flex;flex-direction:column;gap:.8rem}
.pi{background:var(--card);border:1px solid var(--card-bdr);border-radius:12px;padding:.95rem;display:flex;gap:1rem;align-items:center;box-shadow:var(--shadow)}
.pi-ico{width:44px;height:44px;border-radius:10px;background:var(--bg4);display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}
.pi-inf{flex:1;min-width:0}.pi-nm{font-size:13.5px;font-weight:700;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pi-mt{font-size:11.5px;color:var(--muted)}
.pi-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.pi-st{padding:3px 9px;border-radius:6px;font-size:10.5px;font-weight:700;background:rgba(20,168,122,.1);color:var(--green)}
.pi-dl{background:rgba(212,146,10,.09);border:1px solid rgba(212,146,10,.2);color:var(--gold);padding:5px 12px;border-radius:7px;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .2s}
.pi-dl:hover{background:var(--gold);color:#000}
.recs-bx{margin-top:1.5rem}.recs-t{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em;margin-bottom:.9rem;text-transform:uppercase}
.recs-row{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.5rem}.recs-row::-webkit-scrollbar{height:3px}
.rc{background:var(--card);border:1px solid var(--card-bdr);border-radius:11px;padding:.85rem;min-width:170px;flex-shrink:0;cursor:pointer;transition:all .25s;box-shadow:var(--shadow)}
.rc:hover{border-color:rgba(212,146,10,.2);transform:translateY(-2px)}
.rc-ico{font-size:1.6rem;margin-bottom:.4rem}.rc-nm{font-size:12.5px;font-weight:700;line-height:1.3;margin-bottom:.3rem}
.rc-pr{font-size:12px;color:var(--goldL);font-weight:700;margin-bottom:.5rem}
.rc-b{width:100%;padding:6px;background:rgba(212,146,10,.09);border:1px solid rgba(212,146,10,.2);color:var(--gold);border-radius:6px;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .2s}
.rc-b:hover{background:var(--gold);color:#000}
.prof-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;max-width:420px}
.pf{background:var(--card);border:1px solid var(--card-bdr);border-radius:12px;padding:1rem;box-shadow:var(--shadow)}
.pf label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:.35rem}
.pf input{width:100%;background:var(--inp);border:1px solid var(--inp-bdr);border-radius:8px;padding:8px 10px;color:var(--text);font-size:13px;outline:none;transition:border-color .2s;direction:rtl}
.pf input:focus{border-color:rgba(212,146,10,.4)}
.pf input[readonly]{opacity:.55;cursor:not-allowed}
.pf-full{grid-column:1/-1}.pf-num{font-size:1.5rem;font-weight:900;color:var(--goldL)}
.prof-save{padding:9px 20px;background:var(--gold);color:#000;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:.5rem}
.prof-save:hover{background:var(--gold2)}
.empty{text-align:center;padding:3rem 1rem;color:var(--faint)}
.empty-i{font-size:2.5rem;margin-bottom:.75rem;opacity:.5}

/* ══════════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR
   — hidden on desktop, visible only on ≤768px
══════════════════════════════════════════════════════ */

/* The bar itself — display:none by default (desktop) */
#mob-tab-bar{
  display:none;                       /* HIDDEN ON DESKTOP — critical */
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:900;
  height:64px;
  padding:0 0 env(safe-area-inset-bottom,0px);
  /* Liquid glass bar */
  background:rgba(8,10,18,0.82);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-top:1px solid rgba(255,255,255,0.10);
  box-shadow:0 -4px 24px rgba(0,0,0,0.35);
  /* 5 items, horizontal */
  flex-direction:row;
  align-items:center;
  justify-content:space-around;
}
[data-theme="light"] #mob-tab-bar{
  background:rgba(248,249,252,0.88);
  border-top-color:rgba(0,0,0,0.09);
  box-shadow:0 -4px 20px rgba(0,0,0,0.12);
}

/* Each tab item */
.mbt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;height:100%;gap:3px;
  cursor:pointer;
  color:var(--muted);
  font-size:9.5px;font-weight:600;
  letter-spacing:.02em;
  position:relative;
  -webkit-tap-highlight-color:transparent;
  transition:color .22s ease;
  border:none;background:none;padding:0;font-family:var(--f);
}
/* The icon container — circle indicator lives here */
.mbt-ico{
  position:relative;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  transition:background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  z-index:1;
  font-size:19px;
  line-height:1;
}
.mbt-label{
  font-size:9.5px;font-weight:600;
  transition:color .22s ease, font-weight .15s ease;
  white-space:nowrap;line-height:1;
}
/* Active state — circle indicator + scale + gold colour */
.mbt.active{color:var(--gold)}
.mbt.active .mbt-ico{
  background:rgba(212,146,10,0.16);
  transform:scale(1.18) translateY(-2px);
}
.mbt.active .mbt-label{font-weight:800;color:var(--gold)}
[data-theme="light"] .mbt.active .mbt-ico{background:rgba(212,146,10,0.14)}
/* Press feedback */
.mbt:active .mbt-ico{transform:scale(.9)}
.mbt.active:active .mbt-ico{transform:scale(1.05) translateY(-1px)}

/* ─── F8: home button — elevated circle, theme-aware fill ─── */
/* Light theme keeps a white circle; dark theme MUST be a solid dark
   (near-black) circle so it reads as part of the dark bar — never white. */
.mbt-home-ico{
  width:48px !important;height:48px !important;
  background:var(--bg) !important;
  border:3px solid var(--bg) !important;
  border-radius:50% !important;
  box-shadow:0 4px 16px rgba(0,0,0,.22),0 0 0 1px rgba(212,146,10,.3) !important;
}
[data-theme="light"] .mbt-home-ico{background:#fff !important;border-color:#fff !important}
[data-theme="dark"]  .mbt-home-ico{background:#0a0d14 !important;border-color:#0a0d14 !important}
.mbt-home-ico svg{stroke:var(--gold);width:23px;height:23px}
.mbt-home-btn.active .mbt-home-ico{
  transform:scale(1.06) translateY(-2px) !important;
}
[data-theme="light"] .mbt-home-btn.active .mbt-home-ico{background:#fff !important}
[data-theme="dark"]  .mbt-home-btn.active .mbt-home-ico{background:#0a0d14 !important}
.mbt-home-btn.active .mbt-home-ico svg{stroke:var(--gold)}
.mbt-home-btn:active .mbt-home-ico{transform:scale(.94) !important}

/* ═══════════ USER PANEL MOBILE NAV BAR ═══════════
   Replaces #mob-tab-bar on the dashboard page. Hidden on desktop. */
#dash-tab-bar{
  display:none;                       /* hidden on desktop */
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:901;
  height:66px;
  padding:0 .4rem env(safe-area-inset-bottom,0px);
  background:rgba(8,10,18,0.88);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-top:1px solid rgba(255,255,255,0.10);
  box-shadow:0 -4px 26px rgba(0,0,0,0.4);
  flex-direction:row;align-items:center;justify-content:space-around;
}
[data-theme="light"] #dash-tab-bar{
  background:rgba(248,249,252,0.92);
  border-top-color:rgba(0,0,0,0.09);
  box-shadow:0 -4px 22px rgba(0,0,0,0.12);
}
.dtb{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;height:100%;gap:3px;cursor:pointer;
  color:var(--muted);font-size:9.5px;font-weight:600;
  border:none;background:none;padding:0;font-family:var(--f);
  -webkit-tap-highlight-color:transparent;
  transition:color .22s ease;
}
.dtb-ico{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  transition:background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.dtb-label{font-size:9.5px;font-weight:600;white-space:nowrap;line-height:1}
/* active state */
.dtb.active{color:var(--gold)}
.dtb.active .dtb-ico{
  background:rgba(212,146,10,0.16);
  transform:scale(1.16) translateY(-2px);
}
.dtb.active .dtb-label{font-weight:800;color:var(--gold)}
.dtb:active .dtb-ico{transform:scale(.9)}

/* ── Premium Logout button — distinct, professional ── */
.dtb-logout{
  color:#fff;
  position:relative;
}
.dtb-logout .dtb-ico{
  background:linear-gradient(145deg,#e0524a,#b3271f);
  box-shadow:0 4px 14px rgba(216,53,53,.42),
             0 1px 0 rgba(255,255,255,.18) inset,
             0 -1px 0 rgba(0,0,0,.25) inset;
  border:1px solid rgba(255,255,255,.14);
}
.dtb-logout .dtb-ico .ic{color:#fff;stroke:#fff}
.dtb-logout .dtb-label{
  color:#e0524a;font-weight:800;
}
.dtb-logout:active .dtb-ico{
  transform:scale(.9);
  box-shadow:0 2px 8px rgba(216,53,53,.5),0 1px 0 rgba(255,255,255,.12) inset;
}
[data-theme="light"] .dtb-logout .dtb-label{color:#c62f28}

/* ══════════════════════════════════════════════════════
   MOBILE ONLY  ≤ 768px — all responsive overrides
══════════════════════════════════════════════════════ */

.site-footer{background:var(--bg2);border-top:1px solid var(--rim2);padding:0}
.ft-inner{max-width:1060px;margin:0 auto;padding:3.5rem 1.5rem 2rem}
.ft-top{display:grid;grid-template-columns:320px 1fr;gap:4rem;margin-bottom:3rem}
.ft-brand{display:flex;flex-direction:column;gap:1.2rem}
.ft-logo{display:flex;align-items:center;gap:11px}
.ft-brand-name{font-size:15px;font-weight:900;letter-spacing:-.01em}
.ft-brand-sub{font-size:8.5px;color:var(--faint);letter-spacing:.1em;margin-top:2px}
.ft-tagline{font-size:13px;color:var(--muted);line-height:1.8;max-width:280px}
.ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.ft-col-title{font-size:11px;font-weight:700;color:var(--text);letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.1rem}
.ft-links{display:flex;flex-direction:column;gap:.65rem}
.ft-links span{font-size:13px;color:var(--muted);cursor:pointer;transition:color .2s;width:fit-content}
.ft-links span:hover{color:var(--gold)}
.ft-divider{height:1px;background:var(--rim);margin-bottom:1.8rem}
.ft-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.ft-copy{font-size:12px;color:var(--faint);line-height:1.9}
.ft-meta{font-size:11px;color:var(--faint);opacity:.8;margin-top:2px}
.ft-version{font-size:11px;color:var(--faint);opacity:.85;margin-top:3px}
/* designer credit — centered on its own line, separated from the rest */
.ft-designer{text-align:center;font-size:11.5px;font-weight:600;color:var(--faint);letter-spacing:.05em;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--rim)}
.ft-socials{display:flex;gap:8px;align-items:center}
.ft-social{width:34px;height:34px;border-radius:9px;background:var(--bg3);border:1px solid var(--rim2);display:grid;place-items:center;color:var(--muted);transition:all .22s;cursor:pointer}
.ft-social:hover{background:rgba(212,146,10,.1);border-color:rgba(212,146,10,.25);color:var(--gold)}

/* ═══ ABOUT PAGE ═══ */
.abt-hero{padding:5rem 1.5rem 4rem;text-align:center;background:var(--bg2);border-bottom:1px solid var(--rim)}
.abt-hero-kicker{display:inline-flex;align-items:center;gap:7px;background:rgba(212,146,10,.1);border:1px solid rgba(212,146,10,.22);color:var(--gold);padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.07em;margin-bottom:1.3rem}
.abt-hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;line-height:1.1;letter-spacing:-.03em;margin-bottom:1rem}
.abt-hero h1 span{color:var(--goldL)}
.abt-hero p{font-size:1rem;color:var(--muted);max-width:520px;margin:0 auto;line-height:1.8}
.abt-wrap{max-width:1060px;margin:0 auto;padding:4rem 1.5rem 5rem}
.abt-story{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-bottom:5rem}
.abt-story-vis{background:var(--bg3);border:1px solid var(--card-bdr);border-radius:20px;height:340px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.abt-story-vis::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(212,146,10,.07),transparent)}
.abt-story-vis-inner{text-align:center;position:relative;z-index:1}
.abt-big-ico{font-size:5rem;opacity:.8;display:block;margin-bottom:.8rem}
.abt-vis-label{font-size:11px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase}
.abt-story-txt h2{font-size:1.7rem;font-weight:900;line-height:1.2;margin-bottom:1rem}
.abt-story-txt h2 span{color:var(--goldL)}
.abt-story-txt p{font-size:.93rem;color:var(--muted);line-height:1.9;margin-bottom:.9rem}
.abt-values{margin-bottom:5rem}
.abt-values-hd{text-align:center;margin-bottom:3rem}
.abt-values-hd h2{font-size:1.8rem;font-weight:900;margin-bottom:.6rem}
.abt-values-hd p{font-size:.93rem;color:var(--muted)}
.abt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.abt-card{background:var(--card);border:1px solid var(--card-bdr);border-radius:18px;padding:1.8rem 1.5rem;text-align:center;transition:transform .3s,border-color .3s;box-shadow:var(--shadow)}
.abt-card:hover{transform:translateY(-5px);border-color:rgba(212,146,10,.22)}
.abt-card-ico{width:56px;height:56px;border-radius:14px;background:rgba(212,146,10,.09);border:1px solid rgba(212,146,10,.16);display:grid;place-items:center;font-size:1.6rem;margin:0 auto 1.1rem}
.abt-card h3{font-size:15px;font-weight:800;margin-bottom:.5rem}
.abt-card p{font-size:13px;color:var(--muted);line-height:1.75}
.abt-mvv{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:4rem}
.abt-mvv-card{background:var(--bg3);border:1px solid var(--rim2);border-radius:16px;padding:1.8rem;position:relative;overflow:hidden}
.abt-mvv-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:16px 16px 0 0}
.abt-mvv-card.mission::before{background:linear-gradient(90deg,var(--gold),var(--goldL))}
.abt-mvv-card.vision::before{background:linear-gradient(90deg,var(--blue),#60a8f8)}
.abt-mvv-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.abt-mvv-card.mission .abt-mvv-label{color:var(--gold)}
.abt-mvv-card.vision .abt-mvv-label{color:var(--blue)}
.abt-mvv-card h3{font-size:1.25rem;font-weight:900;margin-bottom:.75rem}
.abt-mvv-card p{font-size:.9rem;color:var(--muted);line-height:1.8}
.abt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;background:var(--bg3);border:1px solid var(--rim2);border-radius:18px;padding:2rem}
.abt-stat{text-align:center}
.abt-stat-n{font-size:2.2rem;font-weight:900;color:var(--goldL);line-height:1;margin-bottom:.35rem}
.abt-stat-l{font-size:12px;color:var(--muted)}

/* ═══ CONTACT PAGE ═══ */
.cnt-wrap{max-width:900px;margin:0 auto;padding:3.5rem 1.5rem 5rem}
.cnt-hd{text-align:center;margin-bottom:3.5rem}
.cnt-hd h1{font-size:2rem;font-weight:900;margin-bottom:.6rem}
.cnt-hd p{font-size:.93rem;color:var(--muted);line-height:1.8}
.cnt-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:2.5rem;align-items:start}
.cnt-info{display:flex;flex-direction:column;gap:1rem}
.cnt-info-card{background:var(--bg3);border:1px solid var(--rim2);border-radius:14px;padding:1.2rem 1.4rem;display:flex;align-items:center;gap:1rem}
.cnt-ico{width:42px;height:42px;border-radius:11px;background:rgba(212,146,10,.09);border:1px solid rgba(212,146,10,.16);display:grid;place-items:center;font-size:1.2rem;flex-shrink:0}
.cnt-info-txt h4{font-size:13px;font-weight:700;margin-bottom:3px}
.cnt-info-txt p{font-size:12.5px;color:var(--muted)}
.cnt-form-card{background:var(--card);border:1px solid var(--card-bdr);border-radius:18px;padding:2rem;box-shadow:var(--shadow)}
.cnt-form-card h2{font-size:1rem;font-weight:800;margin-bottom:1.5rem}
.cf-group{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.9rem}
.cf-full{grid-column:1/-1}
.cf-item label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:.4rem;letter-spacing:.02em}
.cf-item input,.cf-item select,.cf-item textarea{width:100%;background:var(--inp);border:1px solid var(--inp-bdr);border-radius:9px;padding:10px 13px;color:var(--text);font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s;direction:rtl}
.cf-item input:focus,.cf-item select:focus,.cf-item textarea:focus{border-color:rgba(212,146,10,.45);box-shadow:0 0 0 3px rgba(212,146,10,.07)}
.cf-item textarea{resize:vertical;min-height:110px;line-height:1.6}
.cf-item input.err,.cf-item textarea.err{border-color:rgba(216,53,53,.5)!important}
.cf-err{font-size:11px;color:var(--red);margin-top:.3rem;display:none}
.cf-item.has-err .cf-err{display:block}
.cnt-send-btn{width:100%;padding:13px;background:var(--gold);color:#000;border:none;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;transition:all .2s;margin-top:.75rem;display:flex;align-items:center;justify-content:center;gap:8px}
.cnt-send-btn:hover{background:var(--gold2);transform:translateY(-1px)}
.cnt-send-btn:disabled{opacity:.55;cursor:not-allowed}
.cnt-success{background:rgba(20,168,122,.07);border:1px solid rgba(20,168,122,.2);border-radius:12px;padding:1.2rem;text-align:center;display:none}
.cnt-success.show{display:block}
.cnt-success-ico{font-size:2rem;margin-bottom:.6rem}
.cnt-success h3{font-size:15px;font-weight:800;color:var(--green);margin-bottom:.4rem}
.cnt-success p{font-size:13px;color:var(--muted)}
.fu{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.fu.v{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
/* ═══════════ PROFESSIONAL ICON SYSTEM ═══════════ */
.ic{display:inline-block;vertical-align:-.16em;flex-shrink:0;line-height:0}
.ico-slot{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.16em;line-height:0;width:1em;height:1em}
.ico-slot.ico-ready{width:auto;height:auto}
.ico-slot .ic{display:block}
/* icon inside buttons/pills aligns nicely with text */
button .ic,a .ic,.cta-a .ic,.cta-b .ic,.nb .ic{vertical-align:-.18em}
/* gold-tinted icons in accent contexts */
.ey .ic,.h-pill .ic{color:var(--gold)}

@media(max-width:768px){
  /* ── Hard overflow guard — zero horizontal scroll ── */
  html,body{overflow-x:hidden;max-width:100%;width:100%}
  *{max-width:100%}
  img,svg,video,iframe{max-width:100%;height:auto}
  .hero-inner,.abt-wrap,.cnt-wrap,.si,.sec,.ft-inner{
    max-width:100%;box-sizing:border-box;
  }

  /* ── Show tab bar ── */
  #mob-tab-bar{display:flex}
  /* User Panel bar — shown only on dashboard via body.on-dash */
  #dash-tab-bar{display:none}
  body.on-dash #mob-tab-bar{display:none}
  body.on-dash #dash-tab-bar{display:flex}

  /* ── All pages need padding at bottom for tab bar ── */
  .pg{padding-bottom:68px}

  /* ── Nav: keep glass pill but remove links + auth buttons ── */
  .nav-links{display:none !important}
  .nav-sep{display:none !important}
  /* Hide login/register buttons on mobile (use tab bar auth) */
  #navActs .nb:not(.fill){display:none}
  /* Also hide the old hamburger if it exists */
  .mob-menu-btn{display:none !important}
  /* Hide old dash bar */
  .mob-dash-bar,.mob-overlay{display:none !important}

  /* ── Scale nav pill to fit mobile screen ── */
  #nav-wrap{
    width:calc(100vw - 1rem);
    top:10px;
  }
  #nav{
    height:52px;
    padding:0 .85rem 0 1rem;
    gap:8px;
  }
  .nav-brand b{font-size:11.5px}
  .nav-brand small{display:none}
  .nav-gem{width:28px;height:28px}
  .theme-tog{width:34px;height:34px}
  .theme-tog .tt-ic svg{width:16px;height:16px}
  .cart-btn{width:32px;height:32px}
  .cart-btn svg{width:15px;height:15px}

  /* ── Page top-padding for smaller nav ── */
  .pg{padding-top:72px}

  /* ── Hero — Fix 1: side-by-side (text + book) on mobile ── */
  .hero{padding:1.75rem 1rem 1.5rem;min-height:auto}
  /* keep 2 columns: text takes most, book takes a compact column */
  .hero-inner{grid-template-columns:1fr auto;gap:.85rem;align-items:start}
  /* Book scene: book sits on top, buy card stacked BELOW it.
     The book has TWO transform animations (bkReveal on .bk-scene,
     bflt on .bk3d). A plain `transform:scale()` would be overridden by
     them, so on mobile we swap .bk3d to a scale-aware float keyframe. */
  .bk-scene{display:flex;flex-direction:column;align-items:center;order:0;
    transform-origin:top center;margin:0 -1.2rem;width:auto;flex-shrink:0}
  /* Lighter drop-shadow on mobile so it doesn't bleed onto the buy card */
  .bk3d{animation:bfltMobile 4s ease-in-out infinite;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5))}
  @keyframes bfltMobile{
    0%,100%{transform:rotateY(-16deg) rotateX(4deg) scale(.66) translateY(0)}
    50%{transform:rotateY(-13deg) rotateX(4deg) scale(.66) translateY(-15px)}
  }
  /* Shrink the floor-shadow ellipse so it stays clear of the card */
  .bk-shadow{width:120px;height:12px;margin-top:-10px}
  /* Buy card: compact, sits below the book; small positive gap + high z-index
     keeps the book shadow from overlapping it (Fix: shadow/box overlap) */
  .bk-cta-card{max-width:170px;padding:.7rem .8rem;margin-top:.4rem;border-radius:11px;position:relative;z-index:5;background:var(--bg4)}
  .bk-cta-card .p-row{margin-bottom:.5rem;gap:.3rem}
  .bk-cta-card .p-new{font-size:1rem}
  .bk-cta-card .p-unit{font-size:9px}
  .bk-cta-card .p-old{font-size:10px}
  .bk-cta-card .cta-a{font-size:11.5px !important;padding:.5rem !important}
  .h-pill{margin-bottom:.6rem}
  /* Smaller heading so it fits next to the book */
  .h-h1{font-size:clamp(1.15rem,5.2vw,1.7rem);letter-spacing:-.01em;line-height:1.25}
  .h-p{font-size:.78rem;margin-bottom:1rem;line-height:1.7}
  .h-ctas{flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
  .cta-a,.cta-b{padding:.5rem .9rem;font-size:11.5px}
  .h-nums{gap:1rem;flex-wrap:wrap}
  .hnum b{font-size:1.05rem}
  .hnum small{font-size:9px}

  /* ── Feature cards 3-col → 1-col ── */
  .feat-3col{grid-template-columns:1fr !important}

  /* ── Fix 2: Editor's Choice → single horizontal-scroll row ── */
  #homeFeatured{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:.75rem;
    margin-top:1.25rem;
    padding-bottom:.5rem;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #homeFeatured::-webkit-scrollbar{display:none}
  #homeFeatured>*{
    flex:0 0 64%;
    max-width:230px;
    scroll-snap-align:start;
  }

  /* ── Shop product grid → 2-col (stays a grid) ── */
  .pg-grid{grid-template-columns:repeat(2,1fr);gap:.65rem}
  .pg-grid.lv{grid-template-columns:1fr}

  /* ── Sections ── */
  .sec{padding:2.5rem 1.25rem}
  .sh2{font-size:1.45rem}
  .s-sub{font-size:.88rem}

  /* ── Shop search ── */
  .shop-pg{padding:1rem 1rem 0}
  .is-top{flex-wrap:wrap}
  .is-modes{
    padding:.3rem .45rem;
    border-left:none;
    border-bottom:1px solid var(--rim);
    width:100%;
    order:-1;
  }
  .is-mode{padding:4px 9px;font-size:11px}
  .is-inp{padding:.65rem .75rem;font-size:13px;min-width:0}
  .is-go{width:34px;height:34px}
  .is-tags{
    overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    gap:5px;
  }
  .is-tags::-webkit-scrollbar{display:none}
  .is-tag{flex-shrink:0;white-space:nowrap;font-size:11px}
  .shop-fbar{flex-wrap:wrap;gap:.5rem}
  .sf-btns{
    overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .sf-btns::-webkit-scrollbar{display:none}
  .sf-b{flex-shrink:0;font-size:11.5px;padding:5px 10px}
  .sf-sort{font-size:11.5px;max-width:110px}
  .shop-stats{display:none}

  /* ── Cards ── */
  .pc-body{padding:.7rem .75rem}
  .pc-nm{font-size:12.5px}
  .pc-pr{font-size:12.5px}
  .buy-b{padding:4px 9px;font-size:11px}
  .cart-add-b{padding:4px 7px;font-size:10.5px}
  .pc-btn-grp{gap:3px}
  .pc-bdg{font-size:10px}

  /* List-view card */
  .pc.lv{height:auto}
  .pc.lv .pc-img{width:35%;min-width:75px;max-width:120px}

  /* ── Detail page ── */
  .dt-w{padding:.75rem 1rem 2.5rem}
  .dt-grid{grid-template-columns:1fr;gap:1.5rem}
  .dt-media{position:static;top:auto}
  .dt-vis{height:260px}
  .dt-title{font-size:1.35rem}
  .rev-sec{max-width:100%;padding-top:1.25rem}

  /* ── Checkout ── */
  .cho-wrap{max-width:100%;padding:0 1rem 2.5rem}

  /* ── QR page ── */
  .qr-dual{grid-template-columns:1fr;gap:.65rem}
  .qr-text-row{max-width:100%}
  .qr-land{padding:1.5rem 1.25rem}
  .qr-land h2{font-size:1.35rem}

  /* ── About ── */
  .abt-hero{padding:2.5rem 1.25rem 2rem}
  .abt-hero h1{font-size:clamp(1.4rem,6.5vw,1.85rem)}
  .abt-hero p{font-size:.92rem}
  .abt-story{grid-template-columns:1fr;gap:1.75rem}
  .abt-story-vis{height:160px;order:-1}
  .abt-story-txt h2{font-size:1.3rem}
  .abt-cards{grid-template-columns:1fr;gap:.75rem}
  .abt-stats{grid-template-columns:repeat(2,1fr);gap:.65rem;padding:1.25rem}
  .abt-stat-n{font-size:1.65rem}
  .abt-mvv{grid-template-columns:1fr}
  .abt-wrap{padding:2.5rem 1.25rem 3.5rem}
  .abt-values-hd h2{font-size:1.4rem}

  /* ── Contact ── */
  .cnt-grid{grid-template-columns:1fr;gap:1.25rem}
  .cnt-wrap{padding:2rem 1.25rem 3.5rem}
  .cnt-hd h1{font-size:1.5rem}
  .cnt-hd p{font-size:.9rem}
  .cf-group{grid-template-columns:1fr}
  .cnt-form-card,.cnt-info{min-width:0;width:100%;box-sizing:border-box}
  .cnt-form-card{padding:1.4rem}
  .cnt-info-card{padding:1rem 1.1rem;min-width:0}
  .cf-item{min-width:0}
  .cf-item input,.cf-item select,.cf-item textarea{font-size:13px;min-width:0;max-width:100%}

  /* ── Footer — Fix 3: clean compact mobile layout ── */
  .ft-top{grid-template-columns:1fr;gap:1.5rem}
  /* Brand block centered at top */
  .ft-brand{align-items:center;text-align:center}
  .ft-tagline{font-size:12px;max-width:300px;text-align:center}
  /* 3 link columns stay side-by-side in a tidy grid */
  .ft-cols{grid-template-columns:repeat(3,1fr);gap:.75rem}
  .ft-col-title{font-size:10px;margin-bottom:.7rem}
  .ft-links{gap:.5rem}
  .ft-links span{font-size:11.5px}
  .ft-inner{padding:2.25rem 1rem 1.25rem}
  /* Bottom row: copyright + socials centered & stacked neatly */
  .ft-bottom{flex-direction:column;gap:.85rem;text-align:center}
  .ft-copy{font-size:11px;order:2}
  .ft-socials{order:1}

  /* ── Dashboard ── */
  .dash-wrap{grid-template-columns:1fr;padding:.85rem;gap:.75rem;min-height:auto}
  .d-side{display:none !important}
  .d-main{padding-bottom:0}  /* tab bar handles spacing via .pg padding-bottom */
  .prof-grid{grid-template-columns:1fr}
  .pi{flex-wrap:wrap}
  .pi-r{flex-direction:row;align-items:center;gap:8px;flex-shrink:0}

  /* ── Pagination ── */
  .pgn{gap:3px}
  .pgn-b{width:32px;height:32px;font-size:12px}
}

/* ── Small phones ≤ 420px ── */
@media(max-width:420px){
  #nav{padding:0 .7rem 0 .8rem;gap:6px}
  .nav-brand b{font-size:10.5px}
  .h-h1{font-size:clamp(1.05rem,5.5vw,1.45rem)}
  .h-nums{gap:.85rem}
  /* shop grid → 1-col; Editor's Choice STAYS a horizontal scroll row */
  .pg-grid{grid-template-columns:1fr;gap:.6rem}
  #homeFeatured>*{flex:0 0 72%}
  .abt-stats{grid-template-columns:repeat(2,1fr)}
  .ft-cols{grid-template-columns:repeat(2,1fr)}
  .sec{padding:2rem 1rem}
  .abt-hero,.abt-wrap,.cnt-wrap{padding-left:1rem;padding-right:1rem}
  .bk3d{animation:bfltTiny 4s ease-in-out infinite}
  @keyframes bfltTiny{
    0%,100%{transform:rotateY(-16deg) rotateX(4deg) scale(.58) translateY(0)}
    50%{transform:rotateY(-13deg) rotateX(4deg) scale(.58) translateY(-13px)}
  }
}

/* ═══════════ TERMS / LEGAL PAGE ═══════════ */
.terms-hero{padding:4.5rem 1.5rem 3rem;text-align:center;background:var(--bg2);border-bottom:1px solid var(--rim);position:relative}
.terms-hero h1{font-size:clamp(1.6rem,3.5vw,2.5rem);font-weight:900;line-height:1.3;margin:.6rem 0}
.terms-hero h1 span{color:var(--goldL)}
.terms-hero p{max-width:560px;margin:0 auto;color:var(--muted);font-size:.95rem;line-height:1.8}
.terms-wrap{max-width:820px;margin:0 auto;padding:3rem 1.5rem 4.5rem;display:flex;flex-direction:column;gap:1rem}
.terms-card{display:flex;gap:1.1rem;background:var(--card);border:1px solid var(--card-bdr);
  border-radius:14px;padding:1.4rem 1.5rem;box-shadow:var(--shadow);transition:border-color .2s,transform .2s}
.terms-card:hover{border-color:rgba(212,146,10,.25);transform:translateY(-2px)}
.terms-num{flex-shrink:0;width:38px;height:38px;border-radius:10px;
  background:linear-gradient(145deg,var(--gold),var(--gold2));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;
  box-shadow:0 4px 12px rgba(212,146,10,.3)}
.terms-body{flex:1;min-width:0}
.terms-body h3{font-size:1.05rem;font-weight:800;margin-bottom:.5rem;color:var(--text)}
.terms-body p{font-size:.9rem;line-height:1.95;color:var(--muted)}
.terms-list{list-style:none;margin-top:.7rem;display:flex;flex-direction:column;gap:.5rem}
.terms-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;line-height:1.7;color:var(--muted)}
.terms-list li .ico-slot{flex-shrink:0;color:var(--gold);margin-top:.15rem}
.terms-foot{display:flex;gap:.8rem;align-items:flex-start;background:rgba(212,146,10,.06);
  border:1px solid rgba(212,146,10,.18);border-radius:12px;padding:1.1rem 1.3rem;margin-top:.6rem}
.terms-foot .ico-slot{flex-shrink:0;color:var(--gold)}
.terms-foot p{font-size:.85rem;line-height:1.8;color:var(--muted)}
.terms-link{color:var(--goldL);cursor:pointer;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.terms-link:hover{color:var(--gold)}
@media(max-width:768px){
  .terms-hero{padding:2.5rem 1.1rem 2rem}
  .terms-wrap{padding:2rem 1rem 3rem;gap:.8rem}
  .terms-card{padding:1.1rem 1.1rem;gap:.85rem}
  .terms-num{width:32px;height:32px;font-size:.9rem}
  .terms-body h3{font-size:.98rem}
  .terms-body p,.terms-list li{font-size:.84rem}
}

/* ═══════════════════════════════════════════════
   NEW COMPONENTS — Legal modal, Download modal,
   Recommendations carousel. Fully responsive.
═══════════════════════════════════════════════ */

/* ─── LEGAL ACCEPTANCE MODAL ─── */
.legal-mdl{max-width:440px;width:100%}
.legal-mdl-hd{text-align:center;margin-bottom:1.1rem}
.legal-mdl-ico{width:52px;height:52px;margin:0 auto .7rem;border-radius:14px;
  background:linear-gradient(145deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 6px 18px rgba(212,146,10,.32)}
.legal-mdl-hd h2{font-size:1.15rem;font-weight:800;margin-bottom:.3rem}
.legal-mdl-sub{font-size:12.5px;color:var(--muted)}
.legal-mdl-body{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1rem}
.legal-point{display:flex;gap:.6rem;align-items:flex-start;
  background:var(--bg3);border:1px solid var(--rim);border-radius:10px;padding:.7rem .8rem}
.legal-point .ico-slot{flex-shrink:0;color:var(--gold);margin-top:.1rem;width:15px;height:15px}
.legal-point span{font-size:12px;line-height:1.8;color:var(--muted)}
.legal-point:last-child .ico-slot{color:var(--red)}
.legal-readmore{display:flex;align-items:center;justify-content:center;gap:.3rem;
  font-size:12.5px;font-weight:700;color:var(--goldL);cursor:pointer;
  text-decoration:none;padding:.5rem;margin-bottom:.6rem;transition:color .2s}
.legal-readmore:hover{color:var(--gold)}
.legal-accept-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.4rem;
  background:linear-gradient(145deg,var(--gold),var(--gold2));color:#fff;
  border:none;border-radius:11px;padding:.85rem;font-size:14px;font-weight:800;
  font-family:var(--f);cursor:pointer;box-shadow:0 5px 16px rgba(212,146,10,.3);
  transition:transform .15s,box-shadow .2s}
.legal-accept-btn:hover{transform:translateY(-1px)}
.legal-accept-btn:disabled{opacity:.6;cursor:wait;transform:none}

/* ─── DOWNLOAD PROGRESS MODAL ─── */
.dl-mdl{max-width:420px;width:100%;text-align:center}
.dl-mdl-hd{margin-bottom:1.2rem}
.dl-mdl-ico{width:52px;height:52px;margin:0 auto .7rem;border-radius:14px;
  background:rgba(212,146,10,.13);display:flex;align-items:center;justify-content:center;
  color:var(--gold)}
.dl-mdl-hd h2{font-size:1.1rem;font-weight:800;margin-bottom:.3rem}
.dl-mdl-sub{font-size:12px;color:var(--muted);line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-progress-track{height:10px;border-radius:100px;background:var(--bg4);
  overflow:hidden;margin-bottom:1rem;border:1px solid var(--rim)}
.dl-progress-fill{height:100%;width:0%;border-radius:100px;
  background:linear-gradient(90deg,var(--gold2),var(--gold));
  transition:width .2s ease;box-shadow:0 0 12px rgba(212,146,10,.4)}
.dl-stats{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:center}
.dl-stat{display:flex;flex-direction:column;gap:3px;
  background:var(--bg3);border:1px solid var(--rim);border-radius:10px;padding:.6rem .5rem}
.dl-stat-lbl{font-size:10px;color:var(--faint);font-weight:600}
.dl-stat-val{font-size:13px;font-weight:800;color:var(--text)}
.dl-stat-rem .dl-stat-val{color:var(--muted)}
.dl-stat-pct{background:linear-gradient(145deg,var(--gold),var(--gold2));border:none}
.dl-stat-pct .dl-stat-val{color:#fff;font-size:15px}
.dl-mdl-foot{margin-top:1rem}
.dl-mdl-foot:empty{margin-top:0}
.dl-close-btn{display:inline-flex;align-items:center;gap:.35rem;
  background:var(--bg4);border:1px solid var(--rim2);color:var(--text);
  border-radius:9px;padding:.6rem 1.4rem;font-size:13px;font-weight:700;
  font-family:var(--f);cursor:pointer;transition:background .2s}
.dl-close-btn:hover{background:var(--bg5)}

/* ─── RECOMMENDATIONS CAROUSEL (detail page) ─── */
.dt-recs{margin-top:2rem}
.dt-recs:empty{display:none}
.dt-recs-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.dt-recs-hd h3{font-size:1.05rem;font-weight:800;display:flex;align-items:center;gap:.4rem}
.dt-recs-hd h3 .ic{color:var(--gold)}
.dt-recs-hint{font-size:11px;color:var(--faint);display:flex;align-items:center;gap:.25rem}
.dt-recs-row{display:flex;gap:.85rem;overflow-x:auto;padding-bottom:.6rem;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--rim3) transparent}
.dt-recs-row::-webkit-scrollbar{height:5px}
.dt-recs-row::-webkit-scrollbar-track{background:transparent}
.dt-recs-row::-webkit-scrollbar-thumb{background:var(--rim3);border-radius:100px}
.dt-rec-card{flex:0 0 200px;scroll-snap-align:start;cursor:pointer;
  background:var(--card);border:1px solid var(--card-bdr);border-radius:13px;
  padding:1rem;display:flex;flex-direction:column;gap:.6rem;
  box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.dt-rec-card:hover{transform:translateY(-3px);border-color:rgba(212,146,10,.3)}
.dt-rec-ico{width:44px;height:44px;border-radius:11px;
  background:rgba(212,146,10,.1);display:flex;align-items:center;justify-content:center;
  color:var(--gold)}
.dt-rec-body{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.dt-rec-type{font-size:10px;font-weight:700;color:var(--faint);letter-spacing:.03em}
.dt-rec-nm{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dt-rec-pr{font-size:12.5px;font-weight:800;color:var(--gold);margin-top:.15rem}

/* ─── Responsive: tablets ─── */
@media(max-width:900px){
  .dt-rec-card{flex-basis:185px}
}
/* ─── Responsive: phones ─── */
@media(max-width:640px){
  .legal-mdl,.dl-mdl{max-width:100%}
  .legal-mdl-ico,.dl-mdl-ico{width:46px;height:46px}
  .legal-mdl-hd h2,.dl-mdl-hd h2{font-size:1.05rem}
  .legal-point span{font-size:11.5px}
  .legal-accept-btn{font-size:13px;padding:.8rem}
  .dl-stats{gap:.4rem}
  .dl-stat{padding:.5rem .35rem}
  .dl-stat-val{font-size:12px}
  .dl-stat-pct .dl-stat-val{font-size:13.5px}
  .dt-recs{margin-top:1.5rem}
  .dt-recs-hd h3{font-size:.98rem}
  .dt-rec-card{flex-basis:160px;padding:.85rem}
  .dt-rec-ico{width:38px;height:38px}
}
@media(max-width:380px){
  .dt-rec-card{flex-basis:145px}
}

/* ═══════════ SUPPORT TICKETS (user panel) ═══════════ */
/* Support layout: Create-ticket form on top, ticket list below */
.sp-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
.sp-form-card,.sp-list-card{background:var(--card);border:1px solid var(--card-bdr);border-radius:14px;padding:1.4rem;box-shadow:var(--shadow)}
.sp-card-t{font-size:.95rem;font-weight:800;margin-bottom:1rem;color:var(--text)}
.sp-prefill{background:var(--bg3);border:1px solid var(--rim);border-radius:10px;padding:.75rem .9rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}
.sp-pf-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
.sp-pf-lbl{color:var(--faint);font-weight:600}
.sp-pf-val{color:var(--text);font-weight:700}
.sp-fld{margin-bottom:.95rem}
.sp-fld label{display:flex;align-items:center;gap:.4rem;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:.4rem}
.sp-fld .req{color:var(--red)}
.sp-fld .hint{color:var(--faint);font-weight:500;font-size:11px}
.sp-count{margin-right:auto;font-size:11px;color:var(--faint);font-weight:600}
.sp-fld input,.sp-fld textarea{width:100%;background:var(--bg4);border:1px solid var(--rim2);border-radius:9px;padding:10px 12px;color:var(--text);font-family:var(--f);font-size:13px;box-sizing:border-box;resize:vertical}
.sp-fld input:focus,.sp-fld textarea:focus{outline:none;border-color:var(--gold)}
.sp-file{position:relative;border:1.5px dashed var(--rim3);border-radius:10px;background:var(--bg4);min-height:54px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s}
.sp-file:hover{border-color:rgba(212,146,10,.4)}
.sp-file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
#spFilePh{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:12.5px;font-weight:600}
.sp-file-picked{display:none;align-items:center;gap:.6rem;width:100%;padding:.5rem .7rem;box-sizing:border-box}
.sp-file-picked img{width:38px;height:38px;border-radius:7px;object-fit:cover;flex-shrink:0}
.sp-file-nm{flex:1;min-width:0;font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-file-x{flex-shrink:0;background:none;border:none;color:var(--muted);cursor:pointer;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.sp-file-x:hover{background:rgba(216,53,53,.12);color:var(--red)}
.sp-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:.4rem;background:linear-gradient(145deg,var(--gold),var(--gold2));color:#fff;border:none;border-radius:10px;padding:.8rem;font-size:13.5px;font-weight:800;font-family:var(--f);cursor:pointer;transition:transform .15s}
.sp-submit:hover{transform:translateY(-1px)}
.sp-submit:disabled{opacity:.6;cursor:wait;transform:none}
.sp-list{display:flex;flex-direction:column;gap:.85rem;max-height:560px;overflow-y:auto}
.tk{background:var(--bg3);border:1px solid var(--rim);border-radius:11px;padding:.9rem 1rem}
.tk-hd{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.tk-subj{font-size:13px;font-weight:800;color:var(--text)}
.tk-badge{font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:100px;white-space:nowrap}
.tk-open{background:rgba(212,146,10,.14);color:var(--gold)}
.tk-answered{background:rgba(20,168,122,.14);color:var(--green)}
.tk-closed{background:rgba(120,130,150,.16);color:var(--muted)}
.tk-msg{font-size:12px;line-height:1.8;color:var(--muted);white-space:pre-wrap;word-break:break-word}
.tk-img{margin-top:.5rem;max-width:120px;max-height:90px;border-radius:8px;cursor:pointer;border:1px solid var(--rim2)}
.tk-date{font-size:10.5px;color:var(--faint);margin-top:.5rem}
.tk-reply{margin-top:.7rem;background:rgba(20,168,122,.07);border:1px solid rgba(20,168,122,.2);border-radius:9px;padding:.65rem .8rem}
.tk-reply-h{display:flex;align-items:center;gap:.3rem;font-size:11px;font-weight:800;color:var(--green);margin-bottom:.35rem}
.tk-reply-b{font-size:12px;line-height:1.8;color:var(--muted);white-space:pre-wrap;word-break:break-word}
.tk-waiting{background:rgba(53,128,216,.14);color:var(--blue)}

/* ─── Ticket list: clickable horizontal cards ─── */
.tk-card{display:flex;align-items:center;gap:.8rem;background:var(--bg3);border:1px solid var(--rim);border-radius:12px;padding:.9rem 1rem;cursor:pointer;transition:border-color .18s,transform .12s,background .18s}
.tk-card:hover{border-color:rgba(212,146,10,.35);transform:translateY(-1px);background:var(--bg4)}
.tk-card-main{flex:1;min-width:0}
.tk-card-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.4rem}
.tk-card-subj{font-size:13px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-card-preview{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.6}
.tk-card-by{color:var(--green);font-weight:700}
.tk-card-by .ic{vertical-align:-2px}
.tk-card-meta{font-size:10.5px;color:var(--faint);margin-top:.4rem;display:flex;align-items:center;gap:.3rem}
.tk-card-arrow{flex-shrink:0;color:var(--faint);display:flex;align-items:center}
.tk-card:hover .tk-card-arrow{color:var(--gold)}

/* ─── Ticket chat modal ─── */
.tkchat-mdl{max-width:560px;width:100%;padding:0;overflow:hidden;display:flex;flex-direction:column;height:min(82vh,720px)}
.tkchat-hd{display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem;border-bottom:1px solid var(--rim);background:var(--bg3)}
.tkchat-hd-info{flex:1;min-width:0}
.tkchat-subj{font-size:14px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkchat-back{flex-shrink:0;background:var(--bg4);border:1px solid var(--rim2);color:var(--muted);width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tkchat-back:hover{color:var(--text)}
.tkchat-body{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--bg2)}
.tkchat-loading{text-align:center;color:var(--muted);font-size:13px;padding:2rem 0}
.tkmsg{display:flex;max-width:82%}
.tkmsg-me{align-self:flex-start}            /* user (RTL: right side) */
.tkmsg-them{align-self:flex-end}            /* support */
.tkmsg-bubble{border-radius:13px;padding:.6rem .8rem;font-size:12.5px;line-height:1.8}
.tkmsg-me .tkmsg-bubble{background:linear-gradient(145deg,rgba(212,146,10,.18),rgba(212,146,10,.1));border:1px solid rgba(212,146,10,.28)}
.tkmsg-them .tkmsg-bubble{background:var(--card);border:1px solid var(--rim2)}
.tkmsg-who{font-size:10px;font-weight:800;color:var(--faint);margin-bottom:.25rem}
.tkmsg-me .tkmsg-who{color:var(--gold)}
.tkmsg-text{color:var(--text);white-space:pre-wrap;word-break:break-word}
.tkmsg-img{max-width:200px;max-height:170px;border-radius:9px;margin-bottom:.35rem;cursor:pointer;display:block;border:1px solid var(--rim2)}
.tkmsg-time{font-size:9.5px;color:var(--faint);margin-top:.35rem;text-align:left}
.tkchat-foot{border-top:1px solid var(--rim);padding:.7rem .8rem;background:var(--card)}
.tkchat-imgwrap{position:relative;display:none;align-items:center;width:fit-content;margin-bottom:.5rem}
.tkchat-imgwrap img{max-width:70px;max-height:70px;border-radius:8px;border:1px solid var(--rim2)}
.tkchat-imgx{position:absolute;top:-7px;left:-7px;background:var(--red);color:#fff;border:none;width:20px;height:20px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tkchat-imgx .ic{width:12px;height:12px}
.tkchat-inputrow{display:flex;align-items:flex-end;gap:.5rem}
.tkchat-attach{position:relative;flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--bg4);border:1px solid var(--rim2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)}
.tkchat-attach:hover{color:var(--gold);border-color:rgba(212,146,10,.4)}
.tkchat-attach input{position:absolute;inset:0;opacity:0;cursor:pointer}
.tkchat-foot textarea{flex:1;background:var(--bg4);border:1px solid var(--rim2);border-radius:10px;padding:10px 12px;color:var(--text);font-family:var(--f);font-size:13px;resize:none;max-height:120px;box-sizing:border-box}
.tkchat-foot textarea:focus{outline:none;border-color:var(--gold)}
.tkchat-send{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:linear-gradient(145deg,var(--gold),var(--gold2));color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tkchat-send:disabled{opacity:.5;cursor:not-allowed}
/* closed-ticket lock */
.tkmsg-locked{align-self:center;text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--bg3);border:1px solid var(--rim2);border-radius:100px;padding:.45rem 1rem;margin-top:.4rem;display:inline-flex;align-items:center;gap:.4rem}
.tkmsg-locked .ic{color:var(--gold)}
.tkchat-foot.chat-locked{opacity:.55;pointer-events:none;filter:grayscale(.3)}
@media(max-width:768px){
  .sp-grid{grid-template-columns:1fr;gap:1rem}
  .sp-form-card,.sp-list-card{padding:1.1rem}
  .sp-list{max-height:none}
}

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE — lighten rendering on phones / low-RAM devices
   ─────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* backdrop-filter blur is the single most expensive effect on low-end
     GPUs (it re-blurs the region every scroll frame). Drop it and use
     near-opaque solid backgrounds instead. */
  #nav,#nav.scrolled,#mob-tab-bar,#dash-tab-bar,.ovl,.cart-bd,.tst{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  [data-theme="dark"]  #nav,[data-theme="dark"]  #nav.scrolled{background:rgba(12,15,22,.97)!important}
  [data-theme="light"] #nav,[data-theme="light"] #nav.scrolled{background:rgba(255,255,255,.97)!important}
  [data-theme="dark"]  #mob-tab-bar,[data-theme="dark"]  #dash-tab-bar{background:rgba(10,12,18,.98)!important}
  [data-theme="light"] #mob-tab-bar,[data-theme="light"] #dash-tab-bar{background:rgba(248,249,252,.99)!important}
  /* Mobile/PWA: KEEP a light, GPU-cheap float (transform-only, no blur) so the
     book stays lively on phones and in installed PWA mode. Per-width scale comes
     from bfltMobile / bfltTiny; it's still disabled for prefers-reduced-motion. */
  /* Static size-pin — NO !important, so the float keyframes (animations rank above
     normal author rules) win for normal motion. This pose is what shows only when
     prefers-reduced-motion turns the animation off. */
  .bk3d{transform:rotateY(-16deg) rotateX(4deg) scale(.66)}
}
@media(max-width:420px){
  .bk3d{transform:rotateY(-16deg) rotateX(4deg) scale(.58)}
}
/* honour users/OSes that request reduced motion — kill non-essential motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .bk3d{animation:none!important}
}