/* ============================================================
   HACKIEE — V2 REDESIGN LAYER
   A complete new visual identity built on top of the existing
   markup & JavaScript. Loaded AFTER style.css so it wins the
   cascade. Zero markup/logic changes — pure visual layer.

   Identity:  editorial "paper" canvas · Space Grotesk display
   type · solid near-black primary CTAs · single violet accent ·
   hairline borders · soft layered elevation · dark footer/admin.
   ============================================================ */

/* ---- 1. Design tokens (redefined — cascade everywhere) ---- */
:root{
  /* Warm editorial canvas + crisp white surfaces */
  --bg:#f3f3ef;
  --bg-soft:#ecece6;
  --card:#ffffff;

  /* High-contrast monochrome ink ramp */
  --ink:#111318;
  --ink-soft:#565c67;
  --ink-faint:#8b909c;
  --line:#e6e6df;
  --line-soft:#efefe9;

  /* One deliberate accent (violet). Deepened to clear WCAG AA (>=4.5:1)
     for accent text/badges on white. Primary CTAs use ink (below). */
  --accent:#5b46e5;
  --accent-press:#4c39d6;
  --accent-2:#5b46e5;
  --accent-3:#5b46e5;
  --accent-grad:linear-gradient(135deg,#7566f4,#5b46e5);
  --accent-grad-3:linear-gradient(135deg,#7566f4,#5b46e5);
  --accent-soft:rgba(91,70,229,.10);

  /* Ink button surface */
  --ink-btn:#111318;
  --ink-btn-hover:#000000;

  /* Soft, neutral, layered elevation */
  --shadow-xs:0 1px 2px rgba(17,19,24,.05);
  --shadow-sm:0 1px 3px rgba(17,19,24,.06),0 1px 2px rgba(17,19,24,.04);
  --shadow-md:0 4px 14px rgba(17,19,24,.08),0 2px 4px rgba(17,19,24,.04);
  --shadow-lg:0 20px 44px rgba(17,19,24,.13),0 6px 14px rgba(17,19,24,.06);
  --shadow-accent:0 8px 20px rgba(17,19,24,.20);

  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;

  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.22s;

  --font-display:'Space Grotesk','Inter','Segoe UI',system-ui,sans-serif;
  --font:'Inter','Segoe UI',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
}

/* ---- 2. Canvas & base typography ---- */
body{
  background:var(--bg) !important;          /* drop the cool-white + blue/purple glows */
  background-attachment:initial;
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,.brand,.section-head h1,.section-head h2,.hero h1,
.hero-stats .n,.stat .n,.pv-title,.auth-title,.sum-total .val,
.product-card .price,.pv-price,.amount-box .big,.ph h1{
  font-family:var(--font-display);
  letter-spacing:-.02em;
}
h1,h2{font-weight:700}
::selection{background:var(--accent-soft)}

/* ---- 3. Header: clean bar, hairline divider, squared brand ---- */
.site-header{
  background:rgba(243,243,239,.80);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{padding:.7rem 0}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:-.03em}
.brand .logo{
  border-radius:9px;background:var(--ink);color:#fff;box-shadow:none;font-weight:700;
}
.brand:hover .logo{transform:none}
.brand .logo-img{border-radius:9px}
.nav-links a{
  font-family:var(--font);font-weight:500;color:var(--ink-soft);
  padding:.5rem .8rem;border-radius:8px;transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.nav-links a::after{background:var(--accent);height:2px;bottom:.28rem}
.nav-links a:hover{color:var(--ink);background:rgba(17,19,24,.04)}
.nav-links a.active{color:var(--ink)}
.cart-badge{background:var(--accent);color:#fff}
.pill{background:#fff;border:1px solid var(--line);color:var(--ink-soft);border-radius:8px;font-weight:600}
.lang-switch{background:#fff;border:1px solid var(--line);border-radius:9px}
.lang-switch a.active{background:var(--ink);color:#fff;box-shadow:none}
.nav-toggle{background:#fff;border:1px solid var(--line);border-radius:10px}

/* ---- 4. Buttons: solid ink primary + hairline ghost ---- */
.btn{
  font-family:var(--font);font-weight:600;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--ink);box-shadow:var(--shadow-xs);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn::after{display:none}                         /* drop the radial sheen for a cleaner look */
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:#d7d7cf}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none;
}
.btn-primary{background:var(--ink-btn);color:#fff;border-color:var(--ink-btn);box-shadow:var(--shadow-accent)}
.btn-primary:hover{background:var(--ink-btn-hover);border-color:var(--ink-btn-hover);box-shadow:0 10px 26px rgba(17,19,24,.26)}
.btn-ghost{background:#fff}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---- 5. Hero: editorial, no floating gimmick ---- */
.hero{padding:clamp(32px,5vw,72px) 0 clamp(20px,3vw,36px)}
.hero .orb{display:none}
.hero-grid{gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.eyebrow{
  background:transparent;color:var(--ink-soft);padding:0;border-radius:0;
  font-family:var(--font);font-weight:700;font-size:.72rem;letter-spacing:.16em;
  display:inline-flex;align-items:center;gap:.5rem;
}
.eyebrow::before{content:"";width:18px;height:1.5px;background:var(--accent);display:inline-block}
.hero h1{
  font-size:clamp(2.3rem,1.6rem + 3.4vw,4rem);line-height:1.02;font-weight:700;letter-spacing:-.035em;
  margin-top:.6rem;
}
.hero h1 .grad{
  background:var(--accent-grad-3);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:none;
}
.hero p.lead{font-size:clamp(1.02rem,1rem + .3vw,1.2rem);line-height:1.55;color:var(--ink-soft);max-width:48ch;margin:1rem 0 1.6rem}
.hero-stats{gap:2.4rem;margin-top:1.6rem}
.hero-stats .s .n{font-size:1.9rem;font-weight:700}
.hero-stats .s .l{color:var(--ink-faint);font-weight:500}

/* Turn the floating product cards into a tidy, static preview stack.
   Single-row layout via flex `order` so the discount badge sits in the
   flow (after the price) instead of overlapping it. */
.hero-visual{position:relative;height:auto;display:flex;flex-direction:column;gap:.9rem;perspective:none}
.float-card{
  position:static;inset:auto;top:auto;left:auto;right:auto;bottom:auto;
  width:auto;animation:cardIn .5s var(--ease) both;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);
  display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;flex-wrap:nowrap;
}
.float-card .ic{order:0;flex:0 0 auto;margin:0;background:var(--bg-soft)}
.float-card .t{order:1;flex:1 1 auto;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.float-card .p{order:2;flex:0 0 auto;margin:0;font-family:var(--font-display);white-space:nowrap;display:flex;align-items:baseline;gap:.3rem}
.float-card .p small{color:var(--ink-faint);text-decoration:line-through;font-weight:500}
.float-card .off{
  order:3;position:static;flex:0 0 auto;top:auto;right:auto;margin:0;align-self:center;
  background:var(--ink);color:#fff;box-shadow:none;white-space:nowrap;
}
.float-card.c1{animation-delay:.05s}
.float-card.c2{animation-delay:.13s;transform:none}
.float-card.c3{animation-delay:.21s}

/* ---- 6. Trust strip ---- */
.trust{gap:.7rem;margin-top:1.4rem}
.trust .t{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);font-weight:600}
.trust .t:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px);border-color:#dcdcd4}

/* ---- 7. Section heads: big display type, refined underline ---- */
.section-head{margin-bottom:1.6rem}
.section-head h2,.section-head h1{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);font-weight:700;padding-bottom:.5rem}
.section-head h2::after,.section-head h1::after{height:2px;width:36px;background:var(--accent);border-radius:2px}

/* ---- 8. Cards & product cards: image-forward, hairline, clean ---- */
.card,.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs)}
.card::before{display:none}                       /* remove colored top-bar; use elevation instead */
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#dcdcd4}
.product-card{padding:.85rem}
.product-card .thumb{
  height:clamp(140px,20vw,180px);border-radius:12px;margin-bottom:.85rem;
  background:linear-gradient(135deg,#efefe9,#f6f6f2);
}
.product-card .thumb .off{background:var(--ink);color:#fff;border-radius:7px;font-weight:700}
.product-card .chip,.chip{background:var(--bg-soft);color:var(--ink-soft);border-radius:7px;font-weight:600}
.product-card h3{font-family:var(--font);font-weight:600;font-size:1rem;letter-spacing:-.01em}
.product-card h3 a:hover{color:var(--accent)}
.product-card .price{font-size:1.32rem;font-weight:700;gap:.35rem}
.product-card .price .was{color:var(--ink-faint)}
.product-card .actions{padding-top:.9rem}

/* ---- 9. Category tiles + how steps ---- */
.cat-tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.cat-tile:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-3px);background:#fff}
.cat-tile .n{font-family:var(--font-display);font-weight:700}
.cat-pills a{background:#fff;border:1px solid var(--line);border-radius:9px;font-weight:600}
.cat-pills a.active{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:none}
.cat-pills a:hover{border-color:var(--accent);color:var(--accent)}
.cat-pills a.active:hover{color:#fff}
.how-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.how-step:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.how-step .how-n{background:var(--ink);color:#fff;box-shadow:none;font-family:var(--font-display)}
.how-step h3{font-family:var(--font);font-weight:700}

/* ---- 10. Reviews ---- */
.review-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.review-card:hover{box-shadow:var(--shadow-md)}
.review-ava{background:var(--accent-grad);font-family:var(--font-display)}
.review-stars{color:#f5a623}

/* ---- 11. Forms, inputs, panels ---- */
.panel{border-radius:var(--radius)}
.input,select,textarea{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.input:hover,select:hover,textarea:hover{border-color:#cfcfc7}
.input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:#fff}
.field label{font-weight:600;color:var(--ink)}
.pay-opt{background:#fff;border:1px solid var(--line);border-radius:10px}
.pay-opt:hover{border-color:var(--accent)}
.pay-opt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:#fff}
.amount-box{background:var(--bg-soft);border:1px solid var(--line)}
.stepper{background:#fff;border:1px solid var(--line);border-radius:10px}
.stepper .st-btn{background:var(--bg-soft);border-radius:8px}
.stepper .st-btn:hover{background:var(--ink);color:#fff}

/* ---- 12. Alerts & badges ---- */
.alert{border-radius:10px}
.alert-ok{background:#eefaf3;color:#0b7a52;border-color:#cbeedd}
.alert-error{background:#fdf0f0;color:#b42323;border-color:#f6d5d5}
.alert-info{background:var(--accent-soft);color:#4a3fd0;border-color:rgba(109,94,252,.25)}
.badge{border-radius:7px;font-weight:700}
.badge,.chip{background:var(--bg-soft);color:var(--ink-soft)}
.badge-ok{background:#eafaf1;color:#0b7a52}
.badge-warn{background:#fff5e6;color:#b8730a}
.badge-danger{background:#fdf0f0;color:#b42323}

/* ---- 13. Cart & product view ---- */
.cart-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.ci-thumb,.pv-thumb{background:linear-gradient(135deg,#efefe9,#f6f6f2)}
.sum-total .val{font-size:1.7rem;font-weight:700}
.pv-title{font-weight:700}
.pv-price{font-weight:700}

/* ---- 14. Tables ---- */
.table-wrap{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs)}
th{background:#fafaf7;color:var(--ink-soft);font-family:var(--font)}
tbody tr:nth-child(even){background:#fbfbf8}
tbody tr:hover{background:var(--accent-soft)}

/* ---- 15. Flash toasts ---- */
.flash{border-radius:11px;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.flash-ok{background:#eefaf3;border-color:#cbeedd;color:#0b7a52}
.flash-error{background:#fdf0f0;border-color:#f6d5d5;color:#b42323}
.flash-info{background:#fff;border-color:var(--line);color:var(--ink)}

/* ---- 16. Promo bar: clean solid ink ---- */
.promo-bar{background:var(--ink);animation:none;background-position:0 0;box-shadow:none}
.promo-x{background:rgba(255,255,255,.16)}
.promo-x:hover{background:rgba(255,255,255,.32)}

/* ---- 17. Scroll progress + Telegram button ---- */
.scroll-progress{background:var(--accent);box-shadow:none}
.tg-float{background:var(--ink);animation:none;box-shadow:var(--shadow-lg)}
.tg-float:hover{background:#000;box-shadow:var(--shadow-lg)}

/* ---- 18. DARK EDITORIAL FOOTER (strong V2 signal) ---- */
.site-footer{background:var(--ink);color:#aeb3bf;border-top:none;margin-top:clamp(32px,5vw,64px)}
.site-footer .footer-top{border-bottom:1px solid rgba(255,255,255,.09)}
.site-footer .brand{color:#fff}
.site-footer .brand .logo{background:#fff;color:var(--ink)}
.site-footer .muted{color:#8a909d}
.footer-col h4{color:#fff}
.footer-col a,.footer-bottom span,.footer-note{color:#aeb3bf}
.footer-col a:hover,.footer-note a:hover{color:#fff}
.footer-note{border-top:1px solid rgba(255,255,255,.08);color:#8a909d}
.footer-note a{color:#c4c8d0}
.site-footer .lang-switch{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.site-footer .lang-switch a{color:#c4c8d0}
.site-footer .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
.site-footer .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}

/* ---- 19. Skeleton loader utility (available for use, no markup req) ---- */
.skeleton{position:relative;overflow:hidden;background:#e9e9e3;border-radius:8px;color:transparent!important}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---- 20. ADMIN — dark sidebar dashboard (premium SaaS) ---- */
.admin-main{background:var(--bg)}
.admin-side{background:var(--ink);border-right:1px solid rgba(255,255,255,.08)}
.admin-side .brand{color:#fff}
.admin-side .brand .logo{background:#fff;color:var(--ink)}
.admin-nav a{color:#aeb3bf;border-radius:9px}
.admin-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.admin-nav a.active{background:var(--accent);color:#fff;box-shadow:none;transform:none}
.admin-nav a:not(.active)::before{background:var(--accent)}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.stat::before{background:var(--accent-grad)}
.stat::after{display:none}
.stat .n{font-family:var(--font-display);font-weight:700}
.quick-action{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
.quick-action:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.help-box,.setup-card{background:var(--accent-soft);border-color:rgba(109,94,252,.22)}
.ph .ph-ic{background:#fff;border:1px solid var(--line);border-radius:11px}
details.adv{background:#fff}
.status-legend .sl{background:#fff}
.vfeed-row:hover{background:var(--accent-soft)}
.cbx-pop{border-radius:12px;box-shadow:var(--shadow-lg)}
.cbx-opt:hover,.cbx-opt.active{background:var(--accent-soft)}
.cbx-new{color:var(--accent)}

/* Admin sidebar as a top bar on tablet/mobile — keep dark, readable */
@media(max-width:960px){
  .admin-side{background:var(--ink);border-right:none;border-bottom:1px solid rgba(255,255,255,.10)}
  .admin-nav a.active{background:var(--accent);color:#fff}
}

/* ---- 21. Responsive: preserve original mobile hero behaviour ---- */
@media(max-width:720px){
  .hero-visual{display:none}
  .hero p.lead{margin:.8rem 0 1.1rem}
}
@media(max-width:600px){
  .hero h1{font-size:clamp(1.9rem,8vw,2.5rem)}
  .product-card{padding:.6rem}
  .product-card .thumb{height:96px}
  .product-card h3{font-size:.82rem}
  .product-card .price{font-size:1rem}
  .eyebrow{font-size:.64rem;letter-spacing:.14em}
  .section-head{margin-bottom:1.1rem}
}

/* ---- 22. Touch targets & focus (accessibility) ---- */
@media(pointer:coarse){
  .btn{min-height:44px}
  .nav-links a{min-height:44px;display:flex;align-items:center}
  .stepper .st-btn{width:40px;height:40px}
  .pv-thumb-btn{width:52px;height:52px}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- 23. Motion accessibility ---- */
@media(prefers-reduced-motion:reduce){
  .float-card{animation:none}
  .skeleton::after{animation:none}
  .btn:hover,.card:hover,.product-card:hover,.cat-tile:hover,.how-step:hover{transform:none}
}

/* ---- 24. Overflow safety (reaffirmed) ---- */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,iframe,canvas,table{max-width:100%}

/* ============================================================
   25. PREMIUM MOTION LAYER  (additive; transform/opacity only)
   Paired with assets/js/motion.js. Hook classes (.tilt, .magnetic,
   .ripple-host, .count-up, .parallax-layer …) are applied by JS at
   runtime — no markup edits. Everything here animates only transform
   and opacity, and is fully guarded for reduced-motion + touch.
   ============================================================ */
:root{
  --motion-fast:.16s;
  --motion-base:.32s;
  --motion-slow:.6s;
  --motion-ease:cubic-bezier(.4,0,.2,1);
  --motion-ease-out:cubic-bezier(.16,1,.3,1);
  --tilt-max:8deg;
  --magnet-max:6px;
  --cursor-size:26px;
}

/* ---- 3D tilt ---- */
.tilt{
  transform:perspective(760px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform var(--motion-base) var(--motion-ease);
}
.tilt.is-tilting{transition:transform .05s linear;will-change:transform}

/* ---- Magnetic buttons ---- */
.magnetic{transform:translate3d(var(--mx,0),var(--my,0),0)}
.magnetic.is-magnetic{will-change:transform}

/* ---- Ripple ---- */
.ripple-host{position:relative;overflow:hidden}
.ripple-ink{
  position:absolute;border-radius:50%;pointer-events:none;
  background:currentColor;opacity:.28;transform:scale(0);
  animation:rippleGrow .6s var(--motion-ease-out) forwards;
}
.btn-primary .ripple-ink,.btn.btn-primary .ripple-ink{background:#fff;opacity:.35}
@keyframes rippleGrow{to{transform:scale(1);opacity:0}}

/* ---- Parallax layers ---- */
.parallax-layer{transform:translate3d(0,var(--py,0),0);will-change:transform}

/* ---- Animated counters (reserve width → zero CLS) ---- */
.count-up{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";display:inline-block;min-width:var(--cw,auto)}

/* ---- Skeleton swap-in (extends existing .skeleton) ---- */
.skeleton-swap{animation:skelFade var(--motion-base) var(--motion-ease) both}
@keyframes skelFade{from{opacity:0}to{opacity:1}}

/* ---- Stepper / button press pulse ---- */
.motion-pulse{animation:motionPulse .28s var(--motion-ease)}
@keyframes motionPulse{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}

/* ---- Focus glow micro-interaction (keeps existing outline) ---- */
.input.is-focus,select.is-focus,textarea.is-focus{transition:box-shadow var(--motion-fast) var(--motion-ease)}

/* ---- Toast entrance / exit ---- */
.flash.motion-in,.alert.motion-in{animation:toastIn var(--motion-base) var(--motion-ease-out) both}
.flash.motion-out,.alert.motion-out{animation:toastOut var(--motion-base) var(--motion-ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-8px) scale(.98)}}

/* ---- Add-to-cart flying confirmation ---- */
.atc-fly{
  position:fixed;z-index:120;pointer-events:none;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;background:var(--ink,#111318);color:#fff;
  box-shadow:var(--shadow-lg);font-size:1.1rem;
  animation:atcFly .7s var(--motion-ease) forwards;
}
@keyframes atcFly{0%{transform:translate(0,0) scale(1);opacity:1}70%{opacity:1}100%{transform:translate(var(--fx,0),var(--fy,-120px)) scale(.3);opacity:0}}
.btn.atc-done{animation:motionPulse .35s var(--motion-ease)}

/* ---- Hero entrance (fires once via JS-added class) ---- */
.motion-hero-in > *{animation:heroRise .7s var(--motion-ease-out) both}
.motion-hero-in > *:nth-child(2){animation-delay:.06s}
.motion-hero-in > *:nth-child(3){animation-delay:.12s}
.motion-hero-in > *:nth-child(4){animation-delay:.18s}
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---- Page transition overlay ---- */
.page-transition-overlay{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;
  background:var(--ink,#111318);
  transform:scaleY(0);transform-origin:bottom;
}
.page-transition-overlay.is-in{
  opacity:1;transform:scaleY(1);transform-origin:bottom;
  transition:transform .4s var(--motion-ease-out),opacity .4s var(--motion-ease-out);
  pointer-events:all;
}
.page-transition-overlay.is-out{
  opacity:0;transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--motion-ease-out),opacity .45s var(--motion-ease-out);
  pointer-events:none;
}

/* ---- Proper white arrow cursor (CSS image cursor + soft shadow) ----
   A white arrow with a thin outline and a soft drop shadow, so it stays
   crisp and visible on light paper, white cards, and the dark footer/admin.
   Applied site-wide; text caret kept for inputs. Zero lag (native cursor). */
:root{
  --cur-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path d='M6 3 L6 23 L11 18 L14.4 25.6 L17.6 24.1 L14.2 16.6 L21 16.6 Z' fill='black' opacity='0.30' transform='translate(1.2,1.5)'/><path d='M6 3 L6 23 L11 18 L14.4 25.6 L17.6 24.1 L14.2 16.6 L21 16.6 Z' fill='white' stroke='%23555' stroke-width='1' stroke-linejoin='round'/></svg>") 6 3;
}
html,body{cursor:var(--cur-arrow), auto}
a,button,.btn,[role="button"],label,summary,.st-btn,.pv-thumb-btn,.cat-tile,.product-card,
.copy-btn,.nav-toggle,.promo-x,.lang-switch a,.ci-remove,.pay-opt,
input[type="checkbox"],input[type="radio"],input[type="file"],input[type="submit"],input[type="button"]{
  cursor:var(--cur-arrow), pointer;
}
input,textarea,select,[contenteditable="true"]{cursor:text}

/* ============================================================
   Motion guards — belt-and-suspenders on top of the JS flags
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .tilt,.magnetic{transform:none !important;transition:none !important}
  .custom-cursor,.custom-cursor-glow,.page-transition-overlay,.ripple-ink,.atc-fly{display:none !important}
  .motion-hero-in > *{animation:none !important}
  body.has-custom-cursor{cursor:auto}
}
@media (hover:none),(pointer:coarse){
  .custom-cursor,.custom-cursor-glow{display:none !important}
  .tilt{transform:none !important}
  body.has-custom-cursor{cursor:auto}
}

/* ============================================================
   26. CHECKOUT — compact, sleek, fits above the fold
   ============================================================ */
.page-checkout .section{padding-top:14px;padding-bottom:28px}
.page-checkout .section-head{margin-bottom:12px}
.page-checkout .section-head h1{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);padding-bottom:.35rem}
.page-checkout .grid-2{gap:1rem;align-items:start}
.page-checkout .panel{padding:1rem 1.1rem}
.page-checkout .panel h3{margin-bottom:.7rem;font-size:1.05rem}
.page-checkout .field{margin-bottom:.7rem}
.page-checkout .field label{margin-bottom:.25rem}
.page-checkout .table-wrap{margin-bottom:.7rem}
.page-checkout table th,.page-checkout table td{padding:.5rem .7rem}
.page-checkout .pay-opt{padding:.6rem .85rem}
.page-checkout .pay-detail{padding:.85rem .9rem;margin-top:.3rem}
.page-checkout .pay-detail .note{margin-bottom:.6rem;font-size:.86rem}
.page-checkout .amount-box{padding:.7rem .9rem;margin-bottom:.7rem}
.page-checkout .amount-box .big{font-size:1.6rem}
.page-checkout .confirm-pay{padding:.7rem .85rem;margin:.7rem 0}
.page-checkout .copyfield{padding:.45rem .6rem}
/* payment intro paragraph tighter */
.page-checkout form + p,.page-checkout .panel > p.muted:first-child{margin-bottom:.7rem;font-size:.88rem}
@media(min-width:901px){
  /* keep both columns visible without scrolling on typical laptops */
  .page-checkout .pay-qr{width:120px;height:120px}
}

/* ============================================================
   27. FOOTER — copyright + cookie note on a single line
   ============================================================ */
.site-footer .footer-bottom{align-items:center;gap:1rem;flex-wrap:wrap}
.site-footer .footer-copy{color:#8a909d;font-size:.82rem;line-height:1.5}
.site-footer .footer-copy a{color:#c4c8d0;text-decoration:underline}
.site-footer .footer-copy a:hover{color:#fff}
.footer-sep{opacity:.45;margin:0 .4rem}
@media(max-width:600px){
  .footer-sep{display:none}
  .site-footer .footer-copy{display:block;text-align:center}
}

/* ============================================================
   28. ADMIN table name cell — keep name on one line + tidy star
   (prevents the featured ★ badge from colliding with a wrapped name)
   ============================================================ */
.admin-main .table-wrap td strong{
  display:inline-block;max-width:200px;vertical-align:middle;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.admin-main .table-wrap td strong + .badge{vertical-align:middle;margin-left:.4rem}
@media(max-width:600px){ .admin-main .table-wrap td strong{max-width:150px} }

/* ============================================================
   29. ADMIN bulk actions — selection column + action bar
   ============================================================ */
.bulk-bar{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  background:var(--accent-soft);border:1px solid rgba(91,70,229,.25);
  border-radius:10px;padding:.55rem .9rem;margin-bottom:.8rem;
}
.bulk-bar .bulk-info{font-weight:600;font-size:.88rem;color:var(--ink)}
.bulk-bar .btn-danger{background:var(--danger);color:#fff;border-color:transparent}
.bulk-bar .btn-danger:hover{filter:brightness(.94)}
.admin-main table th.bulk-col,.admin-main table td.bulk-col{width:36px;text-align:center;padding-left:.55rem;padding-right:.25rem}
.admin-main table input.bulk-cb{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);vertical-align:middle}

/* ============================================================
   30. ADMIN pagination bar + sortable headers
   ============================================================ */
.pagination{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  flex-wrap:wrap;margin:1.1rem 0 .4rem;
}
.pagination .page-info{
  font-size:.85rem;color:var(--ink-muted);font-variant-numeric:tabular-nums;
}
.admin-main table thead th a{font-weight:inherit}
.admin-main table thead th a:hover{color:var(--accent)}

/* ============================================================
   31. REVAMPED HERO — subtle animated constellation woven behind
   the real hero content (text + product preview). Content-first:
   the canvas sits BEHIND everything and never blocks interaction.
   ============================================================ */
.hero{ position:relative; overflow:hidden; }
.hero-fx{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.hero > .container{ position:relative; z-index:1; }

/* Animated gradient on the headline accent (re-enabled, tasteful) */
.hero h1 .grad{
  background:var(--accent-grad-3);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:heroGrad 7s ease infinite;
}
@keyframes heroGrad{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@media(prefers-reduced-motion:reduce){
  .hero h1 .grad{ animation:none; }
}
@media(max-width:720px){
  /* keep the mobile hero clean; the backdrop stays but preview hides (existing rule) */
  .hero-fx{ opacity:.7; }
}

/* ============================================================
   32. HERO POLISH — premium, bolder, glassy product preview
   (CSS-only refinements over the existing hero markup)
   ============================================================ */
.hero{ padding-top:clamp(44px,6vw,92px); }
.hero-grid{ gap:clamp(2rem,5vw,4.5rem); }

/* Eyebrow → refined accent pill */
.hero .eyebrow{
  background:var(--accent-soft); color:var(--accent-press);
  padding:.42rem .85rem; border-radius:100px; letter-spacing:.14em;
  border:1px solid rgba(91,70,229,.18);
}
.hero .eyebrow::before{ background:var(--accent); width:14px; }

/* Headline — larger, tighter, more editorial */
.hero h1{
  font-size:clamp(2.5rem,1.6rem + 3.8vw,4.4rem);
  letter-spacing:-.04em; line-height:.99; margin-top:1rem; max-width:15ch;
}
.hero p.lead{ font-size:clamp(1.04rem,1rem + .35vw,1.24rem); color:var(--ink-soft); max-width:46ch; }

/* CTA sizing */
.hero .hero-cta{ margin-top:.4rem; }
.hero .hero-cta .btn-lg{ padding:.85rem 1.45rem; font-size:1rem; }

/* Stats row — divider + tighter labels */
.hero-stats{
  gap:clamp(1.4rem,4vw,2.4rem); margin-top:2rem; padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.hero-stats .s .n{ font-size:2.05rem; font-variant-numeric:tabular-nums; }
.hero-stats .s .l{ font-size:.82rem; letter-spacing:.01em; }

/* Product preview — soft glow + glassy floating cards */
.hero-visual{ position:relative; }
.hero-visual::before{
  content:""; position:absolute; inset:-10% -8%; z-index:-1; border-radius:44% 56% 60% 40%;
  background:radial-gradient(58% 58% at 62% 40%, rgba(117,102,244,.20), transparent 72%);
  filter:blur(8px); pointer-events:none;
}
.hero-visual .float-card{
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:saturate(150%) blur(9px); backdrop-filter:saturate(150%) blur(9px);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 12px 34px rgba(17,19,24,.12), 0 2px 6px rgba(17,19,24,.05);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.hero-visual .float-card:hover{
  transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(117,102,244,.4);
}
.hero-visual .float-card .ic{ background:linear-gradient(135deg,#efefe9,#ffffff); }
.hero-visual .float-card .t{ font-weight:600; }
.hero-visual .float-card .p{ font-weight:700; letter-spacing:-.01em; }
.hero-visual .float-card .off{ letter-spacing:.02em; }

/* ============================================================
   33. COHESIVE POLISH — section headers + featured cards
   Ties the hero's accent/pill/glow language across the page.
   ============================================================ */

/* Section headers: pill eyebrow + gradient underline (matches hero) */
.section-head .eyebrow{
  background:var(--accent-soft); color:var(--accent-press);
  padding:.4rem .82rem; border-radius:100px; letter-spacing:.14em;
  border:1px solid rgba(91,70,229,.18);
  display:inline-flex; align-items:center; gap:.5rem;
}
.section-head .eyebrow::before{ background:var(--accent); width:14px; }
.section-head h2::after,.section-head h1::after{
  background:var(--accent-grad); width:46px; height:3px; border-radius:3px;
}

/* Featured / store product cards: accent glow + thumb sheen on hover */
.product-card{
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.product-card:hover{
  border-color:rgba(117,102,244,.42);
  box-shadow:0 18px 42px rgba(91,70,229,.16), 0 6px 14px rgba(17,19,24,.08);
}
.product-card .thumb{ position:relative; overflow:hidden; }
.product-card .thumb::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(80% 80% at 50% 28%, rgba(117,102,244,.16), transparent 70%);
  transition:opacity var(--dur) var(--ease);
}
.product-card:hover .thumb::after{ opacity:1; }
.product-card h3 a:hover{ color:var(--accent); }
.product-card .price{ letter-spacing:-.01em; }

/* Category tiles + how steps: same accent-glow hover for consistency */
.cat-tile:hover{ box-shadow:0 14px 34px rgba(91,70,229,.14), var(--shadow-md); }
.how-step:hover{ box-shadow:0 14px 34px rgba(91,70,229,.12), var(--shadow-md); }
.review-card:hover{ box-shadow:0 14px 34px rgba(91,70,229,.12), var(--shadow-md); border-color:rgba(117,102,244,.28); }

/* ============================================================
   34. AUTH — premium split-panel login / register
   ============================================================ */
.auth-wrap{
  min-height:calc(100vh - 90px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(24px,5vw,56px) clamp(14px,4vw,24px);
}
.auth-card{
  width:min(980px,100%);
  display:grid; grid-template-columns:1.02fr .98fr;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
}

/* Left showcase panel */
.auth-aside{
  position:relative; color:#fff; overflow:hidden;
  padding:clamp(1.8rem,4vw,2.9rem);
  display:flex; flex-direction:column; justify-content:space-between; gap:1.6rem;
  background:radial-gradient(130% 120% at 15% 8%, #2c2456 0%, #14132a 45%, #0b0c10 100%);
}
.auth-aside::before{
  content:""; position:absolute; width:70%; aspect-ratio:1; right:-14%; top:-16%;
  background:radial-gradient(circle, rgba(117,102,244,.55), transparent 66%); filter:blur(26px);
  pointer-events:none;
}
.auth-aside::after{
  content:""; position:absolute; width:52%; aspect-ratio:1; left:-14%; bottom:-18%;
  background:radial-gradient(circle, rgba(245,166,35,.14), transparent 64%); filter:blur(28px);
  pointer-events:none;
}
.auth-aside .brand{
  position:relative; z-index:1; color:#fff; text-decoration:none;
  font-family:var(--font-display); font-weight:700; font-size:1.12rem; letter-spacing:-.02em;
  display:inline-flex; align-items:center; gap:.55rem;
}
.auth-aside .brand .logo{ background:linear-gradient(135deg,#7566f4,#5b46e5); color:#fff; }
.auth-aside .brand .logo,.auth-aside .brand .logo-img{ width:32px; height:32px; border-radius:9px; }
.auth-aside-body{ position:relative; z-index:1; }
.auth-aside h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.55rem,1.2rem + 1.3vw,2.15rem); line-height:1.08; margin:0 0 .7rem;
}
.auth-aside p{ color:rgba(255,255,255,.72); line-height:1.6; margin:0 0 1.5rem; max-width:32ch; }
.auth-feats{ display:grid; gap:.7rem; }
.auth-feat{ display:flex; align-items:center; gap:.65rem; color:rgba(255,255,255,.92); font-size:.92rem; }
.auth-feat .fi{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12); }
.auth-aside-foot{ position:relative; z-index:1; color:rgba(255,255,255,.5); font-size:.78rem; }

/* Right form panel */
.auth-form{ padding:clamp(1.8rem,4vw,2.9rem); display:flex; flex-direction:column; justify-content:center; }
.auth-form .auth-head{ margin-bottom:1.4rem; }
.auth-form .auth-head h1{ font-family:var(--font-display); font-size:1.7rem; letter-spacing:-.02em; margin:0 0 .35rem; }
.auth-form .auth-head p{ color:var(--ink-soft); margin:0; font-size:.93rem; }
.auth-form .auth-head p a{ color:var(--accent); font-weight:600; }
.auth-form .field{ margin-bottom:1rem; }
.auth-form .field label{ font-size:.85rem; }
.auth-form .input{ padding:.82rem .9rem; }
.pw-wrap{ position:relative; }
.pw-wrap .input{ padding-right:2.7rem; width:100%; }
.pw-toggle{
  position:absolute; right:.45rem; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; color:var(--ink-faint);
  padding:.35rem; font-size:1rem; line-height:1; border-radius:7px;
}
.pw-toggle:hover{ color:var(--ink); background:var(--bg-soft); }
.auth-form .btn-block{ margin-top:.3rem; }
.auth-switch{ text-align:center; margin-top:1.15rem; color:var(--ink-soft); font-size:.92rem; }
.auth-switch a{ color:var(--accent); font-weight:600; }

@media(max-width:760px){
  .auth-card{ grid-template-columns:1fr; }
  .auth-aside{ display:none; }
  .auth-wrap{ min-height:calc(100vh - 140px); }
}

/* ============================================================
   35. ACCOUNT + ORDER-SUCCESS polish
   ============================================================ */
/* Celebratory success / locked mark on the confirmation page */
.success-mark{
  width:88px; height:88px; margin:0 auto .6rem; border-radius:50%;
  display:grid; place-items:center; font-size:2.5rem;
  background:radial-gradient(circle at 50% 38%, rgba(11,122,82,.16), rgba(11,122,82,.05));
  border:1px solid rgba(11,122,82,.28);
  animation:successPop .55s var(--ease) both;
}
.success-mark.locked{
  background:radial-gradient(circle at 50% 38%, rgba(180,35,35,.12), rgba(180,35,35,.05));
  border-color:rgba(180,35,35,.24);
}
@keyframes successPop{ 0%{transform:scale(.5);opacity:0} 62%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
@media(prefers-reduced-motion:reduce){ .success-mark{ animation:none; } }

/* Account: accent-topped change-password card */
.pw-panel{ position:relative; overflow:hidden; }
.pw-panel::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent-grad); }

/* Account order table: bolder code + tidy actions */
.account-orders td strong{ color:var(--ink); }

/* ============================================================
   36. COOKIE CONSENT banner
   ============================================================ */
.cookie-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:rgba(11,12,16,.96); color:#e9eaee;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.12);
  transform:translateY(110%); transition:transform .35s var(--ease,ease);
}
.cookie-consent.cc-in{ transform:translateY(0); }
.cookie-consent.cc-hide{ transform:translateY(110%); }
.cookie-consent .cc-inner{
  max-width:1100px; margin:0 auto; padding:.85rem clamp(1rem,4vw,2rem);
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:space-between;
}
.cookie-consent .cc-text{ margin:0; font-size:.86rem; line-height:1.5; color:#c4c8d0; max-width:66ch; }
.cookie-consent .cc-text a{ color:#fff; text-decoration:underline; }
.cookie-consent .cc-actions{ display:flex; gap:.5rem; flex:0 0 auto; }
.cookie-consent .btn-ghost{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff; }
.cookie-consent .btn-ghost:hover{ background:rgba(255,255,255,.15); }
@media(prefers-reduced-motion:reduce){ .cookie-consent{ transition:none; } }

/* ============================================================
   37. Low-stock urgency badge on product cards
   ============================================================ */
.product-card .pc-stock-warn{
  color:#b8730a; font-size:.76rem; font-weight:700; letter-spacing:.01em;
  margin:.15rem 0 .1rem;
}

/* ============================================================
   38. Flash-sale countdown bar, resume-cart pill, order timeline
   ============================================================ */
.sale-bar{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--accent-grad); color:#fff; text-align:center;
  padding:.5rem 1rem; font-size:.86rem; font-weight:600; letter-spacing:.01em;
}
.sale-bar .sale-timer{ font-variant-numeric:tabular-nums; background:rgba(255,255,255,.18); padding:.15rem .5rem; border-radius:7px; }

/* Abandoned-cart resume pill (bottom-left, clear of the Telegram button) */
.cart-resume{
  position:fixed; left:18px; bottom:18px; z-index:90;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--ink); color:#fff; text-decoration:none; font-weight:600; font-size:.85rem;
  padding:.6rem .95rem; border-radius:100px; box-shadow:var(--shadow-lg);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cart-resume:hover{ transform:translateY(-2px); }
@media(max-width:600px){ .cart-resume span{ display:none; } .cart-resume{ left:14px; bottom:14px; padding:.7rem; } }

/* Admin order timeline */
.order-timeline{ position:relative; padding-left:.4rem; }
.order-timeline .tl-item{ display:flex; gap:.7rem; padding:.5rem 0; border-left:2px solid var(--line); padding-left:1rem; margin-left:.3rem; }
.order-timeline .tl-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); margin-left:-1.45rem; margin-top:.35rem; flex:0 0 auto; }
.order-timeline .tl-note{ font-size:.9rem; color:var(--ink); }
.order-timeline .tl-meta{ font-size:.76rem; color:var(--ink-faint); margin-top:.15rem; }

/* =====================================================================
   39. RECENTLY VIEWED — compact client-side strip (product page)
   ===================================================================== */
.rv-grid{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(150px,1fr);
  gap:1rem;
  overflow-x:auto;
  padding-bottom:.6rem;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.rv-grid::-webkit-scrollbar{ height:8px; }
.rv-grid::-webkit-scrollbar-thumb{ background:rgba(120,120,150,.35); border-radius:99px; }
.rv-card{
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  padding:.7rem;
  border:1px solid var(--border,rgba(140,140,170,.18));
  border-radius:14px;
  background:var(--bg-soft,rgba(255,255,255,.03));
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.rv-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent,#5b46e5);
  box-shadow:0 10px 26px rgba(20,20,50,.14);
}
.rv-thumb{
  display:grid;
  place-items:center;
  aspect-ratio:16/10;
  border-radius:10px;
  overflow:hidden;
  background:rgba(120,120,150,.10);
}
.rv-thumb img{ width:100%; height:100%; object-fit:cover; }
.rv-thumb .thumb-emoji{ font-size:2rem; }
.rv-card .chip{ align-self:flex-start; font-size:.68rem; }
.rv-name{
  font-weight:600;
  font-size:.9rem;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.rv-price{ font-weight:700; color:var(--accent,#5b46e5); font-size:.92rem; margin-top:auto; }

/* =====================================================================
   40. FOOTER NEWSLETTER — inline subscribe form
   ===================================================================== */
.news-form{ display:flex; gap:.5rem; flex-wrap:wrap; }
.news-form .input{
  flex:1; min-width:0; padding:.55rem .7rem; font-size:.9rem;
  border-radius:10px;
}
.news-form .btn{ white-space:nowrap; }
@media (max-width:520px){
  .news-form{ flex-direction:column; }
  .news-form .btn{ width:100%; }
}

/* =====================================================================
   41. PRODUCT SHARE ROW — social + copy-link buttons
   ===================================================================== */
.pv-share{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
  margin-top:1.4rem;
  padding-top:1.2rem;
  border-top:1px solid var(--border,rgba(140,140,170,.18));
}
.pv-share-label{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted,#8a8aa0);
  margin-right:.15rem;
}
.share-btn{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--border,rgba(140,140,170,.22));
  background:var(--bg-soft,rgba(255,255,255,.03));
  color:var(--text,#e8e8f0);
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.share-btn:hover{
  transform:translateY(-2px);
  border-color:var(--accent,#5b46e5);
  color:var(--accent,#5b46e5);
}
.share-btn.copied{
  border-color:var(--ok,#12805c);
  color:var(--ok,#12805c);
  background:rgba(18,128,92,.12);
}

/* =====================================================================
   42. BACK-IN-STOCK — notify-me box (sold-out products)
   ===================================================================== */
.notify-box{
  margin-top:1.2rem;
  padding:1.1rem 1.2rem;
  border:1px solid var(--border,rgba(140,140,170,.2));
  border-radius:14px;
  background:var(--bg-soft,rgba(255,255,255,.03));
}
.notify-head{ font-weight:700; font-size:1rem; }
.notify-form{ display:flex; gap:.5rem; flex-wrap:wrap; }
.notify-form .input{ flex:1; min-width:0; padding:.6rem .75rem; border-radius:10px; }
.notify-form .btn{ white-space:nowrap; }
@media (max-width:520px){
  .notify-form{ flex-direction:column; }
  .notify-form .btn{ width:100%; }
}

/* =====================================================================
   43. PRODUCT FAQ — accordion
   ===================================================================== */
.faq-list{ display:flex; flex-direction:column; gap:.7rem; max-width:820px; }
.faq-item{
  border:1px solid var(--border,rgba(140,140,170,.2));
  border-radius:12px;
  background:var(--bg-soft,rgba(255,255,255,.03));
  overflow:hidden;
  transition:border-color .18s ease;
}
.faq-item[open]{ border-color:var(--accent,#5b46e5); }
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:1rem 1.2rem;
  font-weight:600;
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+';
  font-size:1.4rem;
  font-weight:400;
  line-height:1;
  color:var(--accent,#5b46e5);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-a{
  padding:0 1.2rem 1.1rem;
  color:var(--muted,#8a8aa0);
  line-height:1.65;
  font-size:.94rem;
}

/* =====================================================================
   44. ORDER STATUS TIMELINE — customer order page
   ===================================================================== */
.otl{ list-style:none; margin:0; padding:0; position:relative; }
.otl-step{
  position:relative;
  display:flex;
  gap:1rem;
  padding:0 0 1.4rem 0;
}
.otl-step:last-child{ padding-bottom:0; }
/* connector line between dots */
.otl-step::before{
  content:'';
  position:absolute;
  left:18px; top:38px; bottom:-4px;
  width:2px;
  background:var(--border,rgba(140,140,170,.25));
}
.otl-step:last-child::before{ display:none; }
.otl-dot{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:1.05rem;
  background:var(--bg-soft,rgba(255,255,255,.04));
  border:2px solid var(--border,rgba(140,140,170,.3));
  z-index:1;
}
.otl-body{ padding-top:.35rem; }
.otl-label{ font-weight:700; font-size:.98rem; }
.otl-desc{ color:var(--muted,#8a8aa0); font-size:.86rem; margin-top:.15rem; line-height:1.5; }
/* states */
.otl-done .otl-dot{ border-color:var(--ok,#12805c); background:rgba(18,128,92,.14); }
.otl-active .otl-dot{
  border-color:var(--accent,#5b46e5);
  background:rgba(91,70,229,.14);
  animation:otlPulse 1.8s ease-in-out infinite;
}
.otl-active .otl-label{ color:var(--accent,#5b46e5); }
.otl-error .otl-dot{ border-color:var(--danger,#d64545); background:rgba(214,69,69,.14); }
.otl-error .otl-label{ color:var(--danger,#d64545); }
.otl-pending{ opacity:.6; }
@keyframes otlPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(91,70,229,.35); }
  50%{ box-shadow:0 0 0 6px rgba(91,70,229,0); }
}
@media (prefers-reduced-motion:reduce){ .otl-active .otl-dot{ animation:none; } }

/* =====================================================================
   45. HOMEPAGE NEWSLETTER BAND
   ===================================================================== */
.news-band{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  padding:2.4rem clamp(1.4rem,4vw,3rem);
  background:linear-gradient(135deg, rgba(91,70,229,.16), rgba(59,108,255,.10));
  border:1px solid var(--border,rgba(140,140,170,.22));
  isolation:isolate;
}
.news-band-glow{
  position:absolute; inset:auto -10% -60% -10%;
  height:200px;
  background:radial-gradient(ellipse at 30% 0%, rgba(91,70,229,.45), transparent 60%),
             radial-gradient(ellipse at 80% 20%, rgba(59,108,255,.35), transparent 55%);
  filter:blur(38px);
  z-index:-1;
  pointer-events:none;
}
.news-band-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.news-band-copy{ flex:1 1 320px; min-width:260px; }
.news-band-copy h2{ margin:.35rem 0 .5rem; font-size:clamp(1.4rem,2.6vw,2rem); }
.news-band-copy p{ max-width:46ch; margin:0; }
.news-band-form{
  flex:1 1 320px;
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  min-width:260px;
}
.news-band-form .input{
  flex:1; min-width:0;
  padding:.85rem 1rem;
  border-radius:12px;
  font-size:1rem;
}
.news-band-form .btn{ white-space:nowrap; }
@media (max-width:560px){
  .news-band-form{ flex-direction:column; }
  .news-band-form .btn{ width:100%; }
}

/* =====================================================================
   46. PRODUCT ASSURANCE BADGES
   ===================================================================== */
.pv-assure{
  list-style:none;
  margin:1.3rem 0 0;
  padding:1rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  border:1px solid var(--border,rgba(140,140,170,.18));
  border-radius:12px;
  background:var(--bg-soft,rgba(255,255,255,.03));
}
.pv-assure li{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.92rem;
  font-weight:500;
}
.pv-assure .pa-ic{
  flex:0 0 auto;
  width:26px; height:26px;
  display:grid; place-items:center;
  font-size:.95rem;
  border-radius:8px;
  background:rgba(91,70,229,.12);
}

/* =====================================================================
   47. BACK TO TOP BUTTON
   ===================================================================== */
.to-top{
  position:fixed;
  right:1.1rem;
  bottom:1.1rem;
  z-index:60;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--border,rgba(140,140,170,.28));
  background:var(--accent,#5b46e5);
  color:#fff;
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
  display:grid; place-items:center;
  opacity:0;
  transform:translateY(12px) scale(.9);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, background .2s ease;
  box-shadow:0 8px 22px rgba(20,20,50,.22);
}
.to-top.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.to-top:hover{ background:var(--accent-2,#4a35d1); }
/* nudge above the mobile sticky checkout bar when present */
.page-cart .to-top{ bottom:5.2rem; }
@media (prefers-reduced-motion:reduce){ .to-top{ transition:opacity .2s ease; transform:none; } .to-top.show{ transform:none; } }

/* =====================================================================
   48. CHECKOUT TRUST BAR
   ===================================================================== */
.checkout-trust{
  list-style:none;
  margin:0 0 1rem;
  padding:.7rem 1rem;
  display:flex;
  gap:.6rem 1.4rem;
  flex-wrap:wrap;
  justify-content:center;
  border:1px solid var(--border,rgba(140,140,170,.18));
  border-radius:12px;
  background:var(--bg-soft,rgba(255,255,255,.03));
  font-size:.86rem;
  font-weight:600;
}
.checkout-trust li{ display:flex; align-items:center; gap:.35rem; white-space:nowrap; }

/* =====================================================================
   49. PRODUCT CARD "NEW" BADGE
   ===================================================================== */
.product-card .thumb{ position:relative; }
.pc-new{
  position:absolute;
  top:.6rem; left:.6rem;
  z-index:2;
  background:var(--ok,#12805c);
  color:#fff;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.06em;
  padding:.2rem .5rem;
  border-radius:6px;
  box-shadow:0 4px 12px rgba(18,128,92,.3);
}

/* =====================================================================
   50. ADMIN — AI STUDIO (chat + publish panel)
   ===================================================================== */
/* Robust chat surface: fixed-height panel · scrolling thread · pinned composer. */
.ai-chat{
  display:flex; flex-direction:column; padding:0; overflow:hidden; min-width:0;
  max-width:100%; height:64vh; min-height:440px; max-height:780px;
}
@supports (height:100dvh){ .ai-chat{ height:min(64dvh,780px); } }
.ai-thread{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:.7rem; padding:1.1rem;
}
.ai-msg{ display:flex; }
.ai-msg.ai-me{ justify-content:flex-end; }
.ai-bubble{
  max-width:min(80%,640px); padding:.65rem .9rem; border-radius:16px; font-size:.92rem; line-height:1.55;
  border:1px solid var(--line); background:#fff; white-space:pre-wrap; overflow-wrap:anywhere;
  box-shadow:var(--shadow-xs);
}
.ai-msg.ai-me .ai-bubble{ background:var(--ink); color:#fff; border-color:var(--ink); border-bottom-right-radius:5px; }
.ai-msg.ai-bot .ai-bubble{ background:var(--bg-soft); border-bottom-left-radius:5px; }
/* typing indicator */
.ai-bubble.ai-typing{ display:inline-flex; gap:5px; align-items:center; }
.ai-bubble.ai-typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-faint); display:inline-block; animation:aiTyp 1s infinite ease-in-out; }
.ai-bubble.ai-typing i:nth-child(2){ animation-delay:.15s; }
.ai-bubble.ai-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes aiTyp{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
/* quick-start chips */
.ai-suggests{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.2rem 1rem .1rem; }
.ai-chip{
  border:1px solid var(--line); background:#fff; color:var(--ink-soft); border-radius:999px;
  padding:.35rem .75rem; font-size:.78rem; cursor:pointer; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ai-chip:hover{ border-color:var(--accent); color:var(--accent); }
/* composer pinned at the bottom of the panel */
.ai-input{ flex:0 0 auto; display:flex; gap:.5rem; align-items:flex-end; padding:.8rem 1rem; border-top:1px solid var(--line); background:#fff; }
.ai-input textarea{
  flex:1; resize:none; min-height:46px; max-height:150px; border:1px solid var(--line);
  border-radius:12px; padding:.7rem .85rem; font:inherit; line-height:1.5; background:#fff; overflow-y:auto;
}
.ai-input textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:none; }
.ai-input .btn{ height:46px; }
.ai-chat-foot{ flex:0 0 auto; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; padding:.15rem 1rem .8rem; }
.ai-chat-foot .ai-provider-row{ margin:0; }
.ai-preview{ margin:0 0 .8rem; display:grid; grid-template-columns:auto 1fr; gap:.3rem .7rem; font-size:.85rem; }
.ai-preview dt{ color:var(--ink-faint); font-weight:600; }
.ai-preview dd{ margin:0; word-break:break-word; }
.ai-preview dd.ai-caption{ font-style:italic; color:var(--ink-soft); }

/* Multi-product drafts: publish bar + responsive card grid */
.ai-drafts-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.7rem 1rem; margin:1rem 0 .8rem;
}
.ai-publish-form{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0; }
.ai-publish-form select{ width:auto; }
.ai-drafts-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1rem; align-items:start; }
.ai-draft-card{ padding:1rem; }
.ai-draft-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.ai-draft-head h3{ margin:0; font-size:1.02rem; }
.ai-draft-x{ background:none; border:0; color:var(--ink-faint); font-size:1rem; cursor:pointer; line-height:1; padding:.2rem; }
.ai-draft-x:hover{ color:var(--danger,#b42323); }

/* ---- AI Settings tab + AI Studio provider row ---- */
.ai-keystate{ margin:.2rem 0 .6rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.ai-clear{ display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--ink-soft); margin:.1rem 0 .6rem; }
.ai-clear input{ accent-color:var(--accent); }
.ai-tests{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); }
.ai-provider-row{ display:flex; align-items:center; gap:.5rem; margin-top:.55rem; font-size:.85rem; }
.ai-provider-row select{ width:auto; padding:.35rem .6rem; }

/* =====================================================================
   51. ADMIN — shared sidebar (grouped, sticky) + mobile drawer
   Consolidated + authoritative: loaded after style.css so it wins.
   ===================================================================== */
.admin-topbar{ display:none; }
.admin-overlay{ display:none; }
.admin-side{ display:flex; flex-direction:column; gap:.1rem; }
.admin-nav{ display:flex; flex-direction:column; }
.admin-nav-group{ display:flex; flex-direction:column; gap:.05rem; margin-bottom:.55rem; }
.admin-nav-label{
  font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; font-weight:800;
  color:rgba(255,255,255,.42); padding:.5rem .7rem .25rem;
}
.admin-nav-foot{ margin-top:auto; padding-top:.5rem; border-top:1px solid rgba(255,255,255,.09); }
.admin-nav a{ display:flex; align-items:center; gap:.5rem; white-space:nowrap; }

/* Small screens: sidebar becomes an off-canvas drawer with a top bar + overlay */
@media(max-width:960px){
  .admin-shell{ display:block !important; }
  .admin-topbar{
    display:flex !important; align-items:center; gap:.7rem;
    position:sticky; top:0; z-index:40; background:var(--ink); color:#fff;
    padding:.55rem .85rem; border-bottom:1px solid rgba(255,255,255,.1);
  }
  .admin-topbar .brand{ color:#fff; font-size:1rem; }
  .admin-topbar .brand .logo{ background:#fff; color:var(--ink); }
  .admin-burger{
    background:rgba(255,255,255,.12); border:0; color:#fff; width:40px; height:40px;
    border-radius:9px; font-size:1.2rem; line-height:1; cursor:pointer; flex:0 0 auto;
  }
  .admin-burger:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .admin-side{
    position:fixed !important; top:0; left:0; height:100vh !important; width:260px; max-width:82vw;
    padding:1rem .75rem !important; transform:translateX(-100%); transition:transform .25s var(--ease);
    z-index:60; overflow-y:auto; box-shadow:var(--shadow-lg);
    flex-direction:column !important; flex-wrap:nowrap !important; border-bottom:none !important;
    border-right:1px solid rgba(255,255,255,.08) !important;
  }
  .admin-side.open{ transform:translateX(0); }
  .admin-side-brand{ display:none; }
  .admin-nav{ display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; gap:.05rem; }
  .admin-nav a{ margin-bottom:.1rem !important; padding:.55rem .7rem !important; font-size:.9rem !important; border-radius:9px !important; }
  .admin-nav a:not(.active)::before{ display:none !important; }
  .admin-nav-label{ display:block !important; }
  .admin-overlay.show{ display:block !important; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:55; }
  body.admin-drawer-open{ overflow:hidden; }
}

/* ---- AI Studio: generated image gallery + picker ---- */
.ai-img-block{ margin:.4rem 0 .9rem; padding-top:.8rem; border-top:1px solid var(--line); }
.ai-img-preview{
  aspect-ratio:1/1; width:100%; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  display:grid; place-items:center; background:var(--bg-soft); margin-bottom:.5rem;
}
.ai-img-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.ai-img-empty{ color:var(--ink-faint); font-size:.85rem; }
.ai-gallery-label{ font-size:.78rem; font-weight:600; margin-bottom:.4rem; }
.ai-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; margin-bottom:.6rem; }
.ai-gopt{ margin:0; }
.ai-gthumb{
  position:relative; width:100%; aspect-ratio:1/1; padding:0; border:2px solid var(--line);
  border-radius:12px; overflow:hidden; background:var(--bg-soft); cursor:pointer; display:block;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ai-gthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ai-gthumb:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.ai-gthumb.sel{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ai-gcheck{
  position:absolute; top:.3rem; right:.3rem; width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center; font-size:.8rem; font-weight:800;
  box-shadow:var(--shadow-sm);
}
.ai-img-form{ display:flex; flex-direction:column; gap:.4rem; }
.ai-img-form .input{ font-size:.85rem; }
.ai-img-controls{ display:flex; align-items:center; gap:.4rem; }
.ai-img-controls select{ width:auto; padding:.35rem .5rem; }
.ai-img-controls .btn{ margin-left:auto; }

/* =====================================================================
   52. ADMIN — desktop fixed sidebar + independently scrolling content
   Fixes: the whole page (incl. sidebar) scrolling together. An ancestor
   overflow-x:hidden turned the grid into a scroll container and broke
   position:sticky. Use a fixed sidebar + margin-left main instead.
   ===================================================================== */
@media(min-width:961px){
  .admin-shell{ display:block !important; overflow:visible !important; }
  .admin-side{
    position:fixed !important; top:0; left:0;
    width:210px; height:100vh !important; overflow-y:auto; overflow-x:hidden;
    z-index:30; border-right:1px solid rgba(255,255,255,.08);
  }
  .admin-main{
    margin-left:210px !important; min-height:100vh;
  }
  .admin-topbar{ display:none !important; }
  /* Sidebar's own scrollbar: subtle on the dark panel */
  .admin-side::-webkit-scrollbar{ width:8px; }
  .admin-side::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:8px; }
  .admin-side::-webkit-scrollbar-track{ background:transparent; }
}

/* ---- AI Studio: image note + in-place toast ---- */
.ai-img-note{ font-size:.8rem; margin:.2rem 0 .6rem; padding:.5rem .6rem; background:var(--bg-soft); border:1px dashed var(--line); border-radius:9px; }
.ai-toast{
  position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%) translateY(140%);
  background:var(--ink); color:#fff; padding:.7rem 1.1rem; border-radius:12px; z-index:200;
  box-shadow:var(--shadow-lg); font-size:.88rem; max-width:min(92vw,520px); text-align:center;
  transition:transform .28s var(--ease), opacity .28s var(--ease); opacity:0; pointer-events:none;
}
.ai-toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }
.ai-toast.err{ background:#b42323; }

/* ---- Busy submit buttons (double-submit guard) ---- */
.btn.is-busy, .is-busy{ cursor:wait; }

/* ---- Store: search result summary + empty state ---- */
.search-summary{
  display:flex; align-items:center; flex-wrap:wrap; gap:.55rem .9rem;
  margin:0 0 1rem; padding:.6rem .9rem;
  background:var(--accent-soft); border:1px solid rgba(91,70,229,.18);
  border-radius:11px; font-size:.9rem;
}
.search-summary .ss-count{ font-weight:700; color:var(--ink); }
.search-summary .ss-for{ color:var(--ink-soft); }
.search-summary .ss-for strong{ color:var(--ink); font-weight:600; }
.search-summary .ss-clear{
  margin-left:auto; font-weight:600; color:var(--accent-press);
  padding:.28rem .7rem; border-radius:100px; border:1px solid rgba(91,70,229,.28);
  background:#fff; white-space:nowrap; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.search-summary .ss-clear:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.store-empty .se-title{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; margin:.2rem 0 .3rem; color:var(--ink); }
@media(max-width:600px){
  .search-summary{ font-size:.84rem; }
  .search-summary .ss-clear{ margin-left:0; }
}

/* ---- Floating action stack: keep Back-to-top clear of the Telegram button ----
   The Telegram float (.tg-float) and Back-to-top (.to-top) both live in the
   bottom-right corner. When Telegram is enabled it renders before .to-top in
   the DOM, so this sibling rule lifts Back-to-top to sit ABOVE it (right edges
   aligned) instead of overlapping. When there's no Telegram button, .to-top
   keeps its default corner position. */
.tg-float ~ .to-top{ right:22px; bottom:5.6rem; }
@media(max-width:640px){
  .tg-float ~ .to-top{ right:16px; bottom:5rem; }
  /* On the cart page the sticky mobile checkout bar pushes Telegram up higher */
  .page-cart .tg-float ~ .to-top{ bottom:9.2rem; }
}

/* ============================================================
   33. DENSITY PASS — tighter vertical rhythm, kill wasted space
   The layout stacked large section padding (up to 48px) + section
   heads (24px) + 3rem inter-block gaps, which read as "bulky". This
   layer compacts the whole storefront to a tight, deliberate rhythm
   while keeping enough breathing room to stay readable. Appended
   last so it wins the cascade; admin/checkout keep their own denser
   overrides (higher specificity, untouched).
   ============================================================ */

/* Vertical section rhythm — the biggest offender */
.section{ padding:clamp(16px,2.2vw,28px) 0; }
.section-head{ margin-bottom:14px; }

/* Hero — trim the tall top/bottom padding */
.hero{ padding:clamp(24px,3.2vw,44px) 0 clamp(12px,1.8vw,22px); }
.hero-grid{ gap:clamp(1.4rem,3vw,2.6rem); }
.hero p.lead{ margin:.7rem 0 1.1rem; }
.hero-stats{ margin-top:1.1rem; }

/* Cards & panels — a touch tighter, still comfortable */
.card{ padding:.85rem; }
.panel{ padding:1rem 1.05rem; }
.grid{ gap:clamp(12px,1.3vw,16px); }
.field{ margin-bottom:.6rem; }

/* Collapse the oversized inter-block gaps set inline in templates
   (related / also-bought / FAQ / recently-viewed / cross-sell).
   !important is required to beat the inline style attribute. */
[style*="margin-top:3rem"]{ margin-top:1.8rem !important; }
[style*="margin-top:2.6rem"]{ margin-top:1.6rem !important; }
[style*="margin-top:2rem"]{ margin-top:1.4rem !important; }

/* Product card internals — reclaim padding around the thumb/text */
.product-card{ padding:.75rem; }
.product-card .thumb{ margin-bottom:.6rem; }
.product-card .actions{ padding-top:.7rem; }

/* Tighten the mobile rhythm too (overrides the desktop values above) */
@media(max-width:600px){
  .section{ padding:14px 0; }
  .section-head{ margin-bottom:11px; }
  .panel{ padding:.85rem; }
  [style*="margin-top:3rem"]{ margin-top:1.4rem !important; }
  [style*="margin-top:2.6rem"]{ margin-top:1.3rem !important; }
}

/* ============================================================
   34. ACCOUNT PAGE — fixed layout
   Was a rigid 2-col grid: short "My Orders" on the left, a tall
   stack (password + rewards + 2FA) on the right → huge empty gap
   and a floating "Danger zone". Now: orders run full-width, then
   all settings flow into an even, responsive card grid.
   ============================================================ */
.acct-orders-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin:0 0 .8rem;
}
.acct-orders-head h3{ font-size:1.15rem; }
.account-orders{ margin-bottom:1.6rem; }

.acct-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem; align-items:start;
}
@media(min-width:760px){
  .acct-grid{ grid-template-columns:1fr 1fr; }   /* even 2-up pairing; forms get comfortable width */
}
.acct-card{ display:flex; flex-direction:column; }
.acct-card-title{
  font-size:1.1rem; margin:0 0 .9rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--line);
}
.acct-stats{
  display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem;
}
.acct-stat-n{ font-family:var(--font-display); font-weight:700; font-size:1.8rem; line-height:1; }
.acct-danger{ border-color:rgba(180,35,35,.28); background:linear-gradient(180deg,rgba(180,35,35,.03),transparent); }


/* ============================================================
   35. CUSTOMER REVIEWS — purchase-verified ratings
   ============================================================ */
/* Product-page rating summary under the title */
.pv-rating{ display:inline-flex; align-items:center; gap:.5rem; margin:.1rem 0 .6rem; text-decoration:none; }
.pv-rating-stars{ color:#f5a623; letter-spacing:1px; font-size:1rem; }
.pv-rating-stars .off{ color:var(--line); }
.pv-rating-txt{ color:var(--ink-soft); font-size:.86rem; font-weight:600; }
.pv-rating:hover .pv-rating-txt{ color:var(--accent); }

.verified-badge{ color:#0b7a52; font-weight:600; font-size:.78rem; }

/* Order page: "Rate your purchase" */
.rev-item{ padding:.85rem 0; border-top:1px solid var(--line); }
.rev-item:first-of-type{ border-top:none; padding-top:.2rem; }
.rev-item-name{ font-weight:600; margin-bottom:.5rem; }
.rev-done{ color:#0b7a52; font-size:.9rem; font-weight:600; }
.rev-form{ display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; }
.rev-text{ width:100%; resize:vertical; }

/* Star rating input — radios rendered right-to-left so hover/checked fills left */
.star-input{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:.1rem; }
.star-input input{ position:absolute; opacity:0; width:0; height:0; }
.star-input label{
  font-size:1.6rem; line-height:1; color:var(--line); cursor:pointer;
  transition:color .12s var(--ease), transform .12s var(--ease);
}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label{ color:#f5a623; }
.star-input label:hover{ transform:scale(1.12); }
.star-input input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* Admin auto-approve toggle row */
.rev-toggle{ display:flex; gap:.6rem; align-items:flex-start; cursor:pointer; }
.rev-toggle input{ margin-top:.25rem; width:16px; height:16px; accent-color:var(--accent); flex:0 0 auto; }