/* Runtime bug fixes and responsive commerce redesign */
/* Profile overview */
.profile-overview{max-width:1120px;margin-left:auto;margin-right:auto}.profile-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 0 0,var(--brand-soft),transparent 48%),linear-gradient(145deg,var(--card),var(--card-2));box-shadow:var(--shadow)}.profile-identity{display:flex;align-items:center;gap:18px;min-width:0}.profile-avatar{width:76px;height:76px;flex:none;display:grid;place-items:center;border-radius:22px;background:var(--brand);color:#fff;font-size:30px;font-weight:900;box-shadow:0 14px 34px rgba(79,138,44,.3)}.profile-eyebrow{display:block;color:var(--brand-1);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.profile-identity h1{margin:5px 0;font-size:clamp(28px,5vw,40px)}.profile-identity p{color:var(--muted);overflow-wrap:anywhere}.profile-hero-actions{display:flex;gap:9px;flex-wrap:wrap}.profile-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.profile-stat{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow-sm);transition:transform var(--t),border-color var(--t)}.profile-stat:hover{transform:translateY(-2px);border-color:var(--brand-1)}.profile-stat>i{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--brand-soft);color:var(--brand-1)}.profile-stat span{display:grid;color:var(--muted);font-size:12px}.profile-stat strong{color:var(--fg);font-size:19px}.profile-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:18px;align-items:start}.profile-main,.profile-card{padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--shadow-sm)}.profile-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.profile-section-head h2,.profile-card h2{margin:4px 0 0;font-size:21px}.profile-section-head p{max-width:38ch;color:var(--muted);font-size:13px;text-align:right}.profile-main .form-card{padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}.profile-main .form-card>h2{display:none}.profile-main .form-card form{max-width:none}.profile-main label{display:grid;gap:7px;font-size:13px;font-weight:700}.profile-main input{width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--line-2);border-radius:12px;background:var(--input)}.profile-main input:focus{outline:0;border-color:var(--brand-1);box-shadow:var(--ring)}.profile-side{display:grid;gap:18px}.profile-status-row{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid var(--line)}.profile-status-row>i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--card-2);color:var(--brand-1)}.profile-status-row span{display:grid;color:var(--muted);font-size:12px}.profile-status-row strong{color:var(--fg);font-size:14px}.profile-card>.btn{margin-top:16px}.profile-links{display:grid;margin-top:10px}.profile-links a{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);font-weight:700}.profile-links a:last-child{border-bottom:0}.profile-links a>i:first-child{color:var(--brand-1)}.profile-links a>i:last-child{color:var(--muted);font-size:11px}.profile-overview>.alert{margin:16px 0}.profile-main>.alert{margin-bottom:14px}
@media(max-width:900px){.profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-layout{grid-template-columns:1fr}.profile-side{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.profile-overview{margin-top:18px}.profile-hero{align-items:stretch;flex-direction:column;padding:20px;border-radius:18px}.profile-identity{align-items:flex-start}.profile-avatar{width:58px;height:58px;border-radius:16px;font-size:23px}.profile-hero-actions{display:grid;grid-template-columns:1fr 1fr}.profile-hero-actions .btn{padding-left:10px;padding-right:10px}.profile-stats{grid-template-columns:1fr 1fr;gap:8px}.profile-stat{padding:12px;gap:9px}.profile-stat>i{width:34px;height:34px}.profile-stat strong{font-size:16px}.profile-main,.profile-card{padding:17px;border-radius:17px}.profile-section-head{align-items:flex-start;flex-direction:column;gap:6px}.profile-section-head p{text-align:left}.profile-side{grid-template-columns:1fr}.profile-main .btn{width:100%}}
@media(max-width:390px){.profile-hero-actions,.profile-stats{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.profile-stat{transition:none}}
/* Account prize history */
.prize-history{width:100%}.prize-history__hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 0 0,var(--brand-soft),transparent 48%),linear-gradient(145deg,var(--card),var(--card-2));box-shadow:var(--shadow)}.prize-history__hero h1{margin:8px 0 6px;font-size:clamp(28px,5vw,40px)}.prize-history__hero p{max-width:58ch;color:var(--muted)}.prize-history__eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--brand-1);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.account-chip-nav{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none}.account-chip-nav::-webkit-scrollbar{display:none}.prize-list{display:grid;gap:14px;margin-top:18px}.prize-card{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;padding:20px;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,var(--card),var(--card-2));box-shadow:var(--shadow-sm)}.prize-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--prize-color)}.prize-card__visual{width:112px;height:112px;display:grid;place-items:center;border-radius:18px;background:color-mix(in srgb,var(--prize-color) 16%,var(--card-2));color:var(--prize-color);font-size:34px}.prize-card__visual img{width:100%;height:100%;padding:10px;object-fit:contain}.prize-card__body{min-width:0}.prize-card__topline{display:flex;align-items:center;justify-content:space-between;gap:10px}.prize-type,.prize-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.prize-type{color:var(--prize-color)}.prize-status{padding:4px 9px;border-radius:999px}.prize-status.is-ready{color:var(--ok);background:var(--ok-s)}.prize-status.is-pending{color:var(--warn);background:var(--warn-s)}.prize-card h2{margin:8px 0 4px;font-size:21px;overflow-wrap:anywhere}.prize-date,.prize-note{color:var(--muted);font-size:13px}.prize-detail{display:flex;gap:8px;margin-top:10px;font-size:13px}.prize-detail span{color:var(--muted)}.prize-delivery{margin-top:12px}.prize-delivery>span{display:block;margin-bottom:5px;color:var(--muted);font-size:12px;font-weight:700}.prize-delivery .delivery-value{max-height:150px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}.prize-value{margin-top:10px;color:var(--brand-1);font-size:26px;font-weight:900}.prize-code{display:inline-block;max-width:100%;margin-top:12px;padding:9px 12px;overflow-wrap:anywhere;border:1px dashed var(--line-2);border-radius:10px;background:var(--input);font-weight:800;letter-spacing:.08em}.prize-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.prize-empty{display:grid;justify-items:center;gap:10px;margin-top:18px;padding:48px 20px;text-align:center;border:1px dashed var(--line-2);border-radius:22px;background:var(--card)}.prize-empty__icon{width:64px;height:64px;display:grid;place-items:center;border-radius:20px;background:var(--brand-soft);color:var(--brand-1);font-size:26px}
@media(max-width:680px){.prize-history{margin-top:18px}.prize-history__hero{align-items:stretch;flex-direction:column;padding:20px;border-radius:18px}.account-chip-nav{width:100%}.account-chip-nav .btn{flex:0 0 auto}.prize-card{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:15px}.prize-card__visual{width:64px;height:64px;border-radius:13px;font-size:22px}.prize-card__topline{align-items:flex-start;flex-direction:column}.prize-card h2{font-size:18px}.prize-actions{grid-column:1/-1}.prize-actions .btn{flex:1 1 auto}.prize-delivery{margin-left:-76px}.prize-empty{padding:36px 16px}}
/* Unified account hero (shared across /account subpages) */
.account-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;width:100%;margin-bottom:8px;padding:26px 28px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(circle at 0 0,var(--brand-soft),transparent 48%),linear-gradient(145deg,var(--card),var(--card-2));box-shadow:var(--shadow)}.account-hero__copy{min-width:0}.account-hero h1{margin:8px 0 6px;font-size:clamp(26px,4.5vw,38px)}.account-hero p{max-width:58ch;margin:0;color:var(--muted);font-size:14px}.account-hero__eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--brand-1);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.account-hero__actions{display:flex;flex-wrap:nowrap;gap:8px;flex:none;overflow-x:auto;scrollbar-width:none}.account-hero__actions::-webkit-scrollbar{display:none}.account-hero__actions .btn{flex:0 0 auto}
@media(max-width:680px){.account-hero{align-items:stretch;flex-direction:column;gap:16px;padding:20px;border-radius:18px}.account-hero__actions{width:100%}}
/* Compact + refined prize cards */
.prize-card{gap:16px;padding:16px;border-radius:18px;transition:transform .15s,box-shadow .15s,border-color .15s}.prize-card:hover{transform:translateY(-2px);border-color:var(--brand-1);box-shadow:var(--shadow)}.prize-card__visual{width:92px;height:92px;border-radius:15px;font-size:28px}.prize-card h2{margin:6px 0 3px;font-size:18px}.prize-card.is-expired{opacity:.55;filter:grayscale(.4)}.voucher-timer{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:5px 11px;border-radius:999px;background:var(--warn-s);color:var(--warn);font-size:12.5px;font-weight:800;letter-spacing:.02em}.voucher-timer--dead{background:var(--bad-s);color:var(--bad)}

.cart-promo-status{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--card-2);font-size:13px}.cart-promo-status span{display:inline-flex;align-items:center;gap:8px;font-weight:700}.cart-promo-status.is-applied{border-color:rgba(104,172,61,.42);background:var(--brand-soft);color:var(--brand-1)}.cart-promo-status.is-pending{border-color:rgba(240,178,58,.4);background:var(--warn-s)}.cart-promo-status small{color:var(--muted);text-align:right}
.cart-page .catalog-head{margin-bottom:20px}.cart-page .cart-line{padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--card),var(--card-2));box-shadow:var(--shadow-sm)}.cart-page .cart-summary{position:sticky;top:90px;border-radius:20px;box-shadow:var(--shadow)}.cart-page .cart-summary-total{padding-top:18px;margin-top:10px;border-top:1px solid var(--line-2);font-size:20px}.cart-page .cart-update-actions{display:flex;justify-content:flex-end}
.promo-redeem-section{margin-top:32px}.promo-page{display:flex;justify-content:center;padding:18px 0}.promo-card{position:relative;width:100%;max-width:620px;padding:34px;border:1px solid var(--line-2);border-radius:24px;background:linear-gradient(145deg,var(--card),var(--card-2));box-shadow:var(--shadow);overflow:hidden}.promo-card:before{content:"";position:absolute;width:220px;height:220px;right:-90px;top:-110px;border-radius:50%;background:var(--brand-soft);filter:blur(4px)}.promo-hero-icon{position:relative;width:58px;height:58px;display:grid;place-items:center;margin-bottom:18px;border-radius:18px;background:var(--brand);color:#fff;font-size:24px;box-shadow:0 14px 30px rgba(79,138,44,.35)}.promo-heading,.promo-form,.promo-active,.promo-back,.promo-card>.alert{position:relative}.promo-eyebrow{display:block;margin-bottom:5px;color:var(--brand-1);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.promo-title{margin:0 0 8px;font-size:clamp(26px,5vw,36px)}.promo-subtitle{max-width:52ch;margin:0 0 24px}.promo-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}.promo-label{grid-column:1/-1;font-size:13px;font-weight:700}.promo-input{width:100%;min-height:52px;padding:13px 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--input);font-size:17px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.promo-input:focus{outline:none;border-color:var(--brand-1);box-shadow:var(--ring)}.promo-submit{min-height:52px}.promo-active{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:14px 16px;border:1px solid rgba(104,172,61,.4);border-radius:14px;background:var(--brand-soft)}.promo-active span{display:inline-flex;align-items:center;gap:8px;color:var(--brand-1);font-weight:700}.promo-active strong{font-family:ui-monospace,monospace;letter-spacing:.08em}.promo-back{display:inline-flex;align-items:center;gap:7px;margin-top:22px;color:var(--muted)}
@media(max-width:760px){.nav-burger{position:relative;z-index:5;background:var(--card-2);border:1px solid var(--line-2)}.nav-drawer-backdrop{z-index:2000}.nav-drawer{z-index:2001}.catalog-listing-page .header-main-row{grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-rows:auto auto!important}.catalog-listing-page .nav-burger{display:inline-flex!important;grid-column:1;grid-row:1}.catalog-listing-page .brand{grid-column:2;grid-row:1;justify-self:start;position:relative!important;z-index:2!important}.catalog-listing-page .header-actions{grid-column:3!important;grid-row:1!important}.catalog-listing-page .search{grid-column:1/-1!important;grid-row:2!important;position:relative!important;z-index:1!important}.cart-page .cart-summary{position:static}.cart-page .cart-line{padding:16px}.promo-card{padding:24px 18px;border-radius:20px}.promo-form{grid-template-columns:1fr}.promo-label{grid-column:auto}.promo-submit{width:100%}.cart-promo-status{align-items:flex-start;flex-direction:column}.cart-promo-status small{text-align:left}}

/* =====================================================================
   Sberegu.com  main.css  (v3 storefront redesign)
   Bold modern digital-goods storefront. Mobile-first. [data-theme] dark/light.
   ===================================================================== */

/* ------------------------------ Tokens ------------------------------ */
:root {
  --radius: 16px;
  --radius-lg: 28px;
  --radius-sm: 12px;
  --radius-xs: 12px;
  --pill: 999px;

  /* Brand: Robinhood green */
  --brand-1: #68ac3d;
  --brand-2: #4f8a2c;
  --brand-3: #68ac3d;
  --brand: linear-gradient(135deg,#68ac3d,#4f8a2c);
  --brand-soft: rgba(104,172,61,.16);
  --glow: 0 0 0 1px rgba(104,172,61,.35), 0 18px 50px -12px rgba(79,138,44,.55);

  --ok: #3ec46d;   --ok-s: rgba(62,196,109,.16);
  --warn: #f0b23a; --warn-s: rgba(240,178,58,.16);
  --bad: #ff5a5f;  --bad-s: rgba(255,90,95,.16);

  --maxw: 1220px;
  --header-h: 60px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --t: .25s var(--ease);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  --ring: 0 0 0 3px rgba(104,172,61,.35);
  --radius-pill: var(--pill);
  --accent: var(--brand-1);
  --accent-grad: var(--brand);
  --accent-grad-soft: var(--brand-soft);
  --success: var(--ok); --success-soft: var(--ok-s);
  --warning: var(--warn); --warning-soft: var(--warn-s);
  --danger: var(--bad); --danger-soft: var(--bad-s);
}

[data-theme="dark"] {
  --bg: #17212b;
  --bg-elev: #0e1621;
  --glass: rgba(23,33,43,.82);
  --card: #1e2a38;
  --card-2: #232e3c;
  --card-3: #2b3846;
  --fg: #ffffff;
  --fg-soft: #dfe6ec;
  --muted-legacy: #7f8ea0;
  --muted: #7d8b99;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --shadow: 0 8px 30px rgba(0,0,0,.45);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --input: #242f3d;
  --bg-2: var(--bg-elev); --card-hover: #28323e; --border: var(--line); --border-strong: var(--line-2);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #eef2f6;
  --bg-elev: #ffffff;
  --glass: rgba(255,255,255,.72);
  --card: #ffffff;
  --card-2: #f4f7fa;
  --card-3: #eef3f7;
  --fg: #0b1620;
  --fg-soft: #34424f;
  --muted: #5b6b7a;
  --line: rgba(11,22,32,.10);
  --line-2: rgba(11,22,32,.16);
  --shadow: 0 16px 44px -18px rgba(20,40,60,.28);
  --shadow-sm: 0 6px 20px -10px rgba(20,40,60,.2);
  --input: rgba(11,22,32,.03);
  --bg-2: var(--bg-elev); --card-hover: var(--card-3); --border: var(--line); --border-strong: var(--line-2);
  color-scheme: light;
}

/* ------------------------------ Reset ------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; max-width: 100vw;
  font-family: var(--font); font-size: 15.5px; line-height: 1.6;
  color: var(--fg); background: var(--bg);
  background-image: radial-gradient(1200px 600px at 50% -10%, rgba(104,172,61,.06), transparent);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
::selection { background: rgba(104,172,61,.35); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }

.muted { color: var(--muted); }
.grad { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ----------------------------- Layout ------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
main.container { flex: 1; padding-top: var(--sp-6); padding-bottom: var(--sp-8); }
.section { margin-top: var(--sp-7); }
.section-title { font-size: 26px; margin-bottom: var(--sp-5); display: flex; align-items: center; gap: 12px; }
.section-title::before { content: ""; width: 6px; height: 26px; border-radius: var(--pill); background: var(--brand); }

/* ----------------------------- Buttons ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--card-2); color: var(--fg); font-weight: 600; font-size: 14.5px;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), opacity var(--t);
}
.btn:not(:disabled):not([disabled]):hover,
.btn:not(:disabled):not([disabled]):focus-visible {
  transform: translateY(-2px); background: var(--card-3); color: var(--fg);
}
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand); border: none; color: #ffffff; font-weight: 700; box-shadow: 0 12px 30px -10px rgba(104,172,61,.6); }
.btn-primary:not(:disabled):not([disabled]):hover,
.btn-primary:not(:disabled):not([disabled]):focus-visible {
  background: var(--brand); color: #ffffff; box-shadow: 0 18px 40px -12px rgba(104,172,61,.75);
}
.btn-ghost { background: transparent; }
.btn-ghost:not(:disabled):not([disabled]):hover,
.btn-ghost:not(:disabled):not([disabled]):focus-visible {
  background: var(--card-2); color: var(--fg); border-color: var(--brand-2);
}
.btn-lg { padding: 15px 28px; font-size: 16px; border-radius: var(--radius); }
.btn-sm { padding: 9px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pill); border: 1px solid var(--line); background: var(--card-2); cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.icon-btn:not(:disabled):not([disabled]):hover,
.icon-btn:not(:disabled):not([disabled]):focus-visible {
  background: var(--card-3); color: var(--fg); border-color: var(--line-2); transform: translateY(-2px);
}

.cart-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
  line-height: 1; color: #fff; background: var(--brand); border-radius: var(--pill); }

/* ---------------------- Storefront redesign v3 --------------------- */
.header-main-row { min-height: 68px; display:flex; align-items:center; gap:12px; transition:min-height var(--t); }
.site-header.is-compact .header-main-row { min-height:56px; }
.brand { display:flex; align-items:center; gap:9px; flex:none; }
.brand-logo { background:linear-gradient(105deg,var(--fg) 0 42%,var(--brand-1) 50%,var(--brand-2) 56%,var(--fg) 64% 100%); background-size:240% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; color:transparent; animation:brand-logo-shimmer 12s ease-in-out infinite; }
.brand-dot { color:var(--brand-1); -webkit-text-fill-color:var(--brand-1); }
@keyframes brand-logo-shimmer {
  0%, 28% { background-position:100% 0; }
  58%, 100% { background-position:0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo { animation:none; background-position:100% 0; }
}
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--brand); box-shadow:0 8px 24px rgba(79,138,44,.35); }
.brand-mark svg { width:23px; height:23px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.btn-catalog { padding:10px 15px; background:var(--brand-soft); border-color:rgba(104,172,61,.3); }
.account-pill { display:flex; align-items:center; gap:9px; padding:6px 11px; border:1px solid var(--line); border-radius:12px; background:var(--card-2); }
.account-pill > i { color:var(--brand-1); font-size:20px; }.account-pill span { display:grid; line-height:1.15; }.account-pill small { color:var(--muted); font-size:10px; }.account-pill strong { font-size:13px; }
.cart-link { position:relative; }
.header-nav { border-top:1px solid var(--line); max-height:54px; overflow:hidden; transition:max-height var(--t), opacity var(--t); }
.site-header.is-compact .header-nav { max-height:0; opacity:0; }
.header-nav-inner { height:52px; display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--fg-soft); }
.header-nav-inner a { position:relative; display:flex; align-items:center; gap:8px; padding:8px 13px; border-radius:var(--pill); font-weight:600; color:var(--fg-soft); transition:background var(--t), color var(--t); }
.header-nav-inner a i { color:var(--muted); font-size:13px; transition:color var(--t); }
.header-nav-inner a:hover, .header-nav-inner a.is-active, .header-nav-inner a[aria-current="page"] { background:var(--brand-soft); color:var(--brand-1); }
.header-nav-inner a:hover i, .header-nav-inner a.is-active i, .header-nav-inner a[aria-current="page"] i { color:var(--brand-1); }
.header-service { margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:var(--pill); font-size:12.5px; font-weight:600; color:var(--ok); background:var(--brand-soft); border:1px solid rgba(104,172,61,.28); }
.header-service i { color:var(--ok); }
.wheel-nav-link:hover .wheel-nav-icon,.wheel-nav-link:focus-visible .wheel-nav-icon { animation:wheel-nav-nudge .45s ease-out 1; }
@keyframes wheel-nav-nudge { 0% { transform:rotate(0); } 55% { transform:rotate(14deg); } 100% { transform:rotate(0); } }
@media (prefers-reduced-motion: reduce) { .wheel-nav-link:hover .wheel-nav-icon,.wheel-nav-link:focus-visible .wheel-nav-icon { animation:none; } }

/* Hamburger (mobile only; hidden on desktop) */
.nav-burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:0 9px; border:0; background:transparent; cursor:pointer; border-radius:11px; transition:background var(--t); }
.nav-burger:hover { background:var(--brand-soft); }
.nav-burger span { display:block; width:20px; height:2px; border-radius:2px; background:var(--fg-soft, currentColor); transition:transform var(--t), opacity var(--t); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile slide-in nav drawer */
.nav-drawer-backdrop { position:fixed; inset:0; background:rgba(5,10,16,.42); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); z-index:315; }
.nav-drawer-backdrop[hidden] { display:none; }
.nav-drawer { position:fixed; top:0; bottom:0; left:0; width:min(82vw,320px); background-color:var(--card); background:var(--bg-elev); isolation:isolate; border-right:1px solid var(--line); transform:translateX(-105%); transition:transform var(--t); z-index:320; display:flex; flex-direction:column; padding:16px; box-shadow:0 10px 40px -10px rgba(0,0,0,.5); }
.nav-drawer.is-open { transform:none; }
.nav-drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.nav-drawer-head .brand-logo { display:inline-flex; font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.03em; }
.nav-drawer-close { width:38px; height:38px; border:0; background:transparent; font-size:20px; color:var(--muted); cursor:pointer; border-radius:10px; transition:background var(--t), color var(--t); }
.nav-drawer-close:hover { background:var(--brand-soft); color:var(--brand-1); }
.nav-drawer-links { display:flex; flex-direction:column; gap:4px; flex:1; }
.nav-drawer-links a { display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:12px; font-weight:600; color:var(--fg-soft, inherit); transition:background var(--t), color var(--t); }
.nav-drawer-links a i { width:20px; text-align:center; color:var(--brand-1); }
.nav-drawer-links a:hover { background:var(--brand-soft); color:var(--brand-1); }
.nav-drawer-service { display:inline-flex; align-items:center; gap:9px; margin-top:auto; padding:12px; font-size:12.5px; font-weight:600; color:var(--muted); border-top:1px solid var(--line); }
.nav-drawer-service i { color:var(--ok); }
body.nav-drawer-open { overflow:hidden; }
.home-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); align-items:center; gap:30px; padding:36px; }
.hero-service-grid { position:relative; z-index:1; display:grid; gap:9px; }
.hero-service-grid span { display:grid; grid-template-columns:34px 1fr; column-gap:10px; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(14,22,33,.45); }
.hero-service-grid i { grid-row:1/3; align-self:center; color:var(--brand-1); font-size:18px; }.hero-service-grid small { color:var(--muted); }
.product-card-action { position:absolute; right:10px; top:10px; z-index:3; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(14,22,33,.78); color:#fff; opacity:0; transform:translateY(5px); transition:var(--t); }
.product-card:hover .product-card-action,.product-card:focus-visible .product-card-action { opacity:1; transform:none; }.product-meta { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.filter-toggle,.filter-mobile-head,.filter-backdrop { display:none; }
.product-gallery { min-width:0; }.gallery-thumb { width:64px; height:64px; margin-top:10px; padding:3px; border:1px solid var(--line-2); border-radius:10px; background:var(--card); cursor:pointer; }.gallery-thumb.active { border-color:var(--brand-1); box-shadow:var(--ring); }.gallery-thumb img { width:100%; height:100%; object-fit:cover; border-radius:7px; }
.purchase-panel { min-width:0; }.drawer-open { overflow:hidden; }
@media (max-width: 760px) {
  .header-main-row { min-height:58px; display:grid; grid-template-columns:auto auto auto minmax(0,1fr); align-items:center; gap:7px; padding-top:7px; padding-bottom:7px; }.brand { position:relative; z-index:3; }.brand-logo { font-size:17px; }.brand-mark { display:none; }.nav-burger { display:inline-flex; }.btn-catalog span,.header-login span,.account-pill span { display:none; }.btn-catalog { width:40px; height:40px; padding:0; }.header-actions { min-width:0; gap:6px; margin-left:auto; flex-wrap:nowrap; }.header-actions .icon-btn { width:40px; height:40px; flex:none; }.search { position:relative; z-index:1; grid-column:1 / -1; grid-row:2; order:initial; width:100%; max-width:none; height:40px; }.header-nav { display:none; }
  .home-hero { grid-template-columns:1fr; padding:24px 18px; }.hero-service-grid { grid-template-columns:repeat(3,1fr); }.hero-service-grid span { display:flex; flex-direction:column; text-align:center; align-items:center; }.hero-service-grid small { display:none; }
  .filter-toggle { display:inline-flex; }.catalog-sidebar { position:fixed; z-index:302; top:0; bottom:0; left:0; width:min(88vw,360px); overflow:auto; background:var(--bg-elev); transform:translateX(-105%); transition:transform var(--t); }.catalog-sidebar.is-open { transform:none; }.catalog-sidebar .filter-card { border:0; border-radius:0; min-height:100%; padding:18px; }.filter-mobile-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }.catalog-sidebar .filter-title { display:none; }.filter-backdrop { display:block; position:fixed; z-index:301; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(2px); }.filter-backdrop[hidden] { display:none; }
  .variation { align-items:stretch; flex-direction:column; }.variation form { width:100%; }.variation form .btn { flex:1; }
}
@media (max-width: 480px) { .hero-service-grid { grid-template-columns:1fr; }.hero-service-grid span { flex-direction:row; justify-content:flex-start; }.product-card-action { display:none; }.header-main-row { grid-template-columns:auto auto minmax(0,1fr); }.btn-catalog { display:none; }.account-pill { display:none; }.account-head-actions .account-logout-action span,.account-head-actions .account-admin-action span { display:none; }.account-head-actions .btn { width:42px; height:42px; padding:0; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* ===== Final catalog/product responsive polish ===== */
.catalog-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:24px; align-items:start; }
.catalog-sidebar { position:sticky; top:126px; }
.filter-card { padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.filter-title { margin-bottom:20px; }
.filter-group + .filter-group { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.filter-label { display:block; margin-bottom:10px; font-weight:700; }
.price-range { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; align-items:center; }
.price-range input,.sort-bar select { min-width:0; padding:11px 12px; border:1px solid var(--line-2); border-radius:10px; background:var(--input); }
.filter-check { display:flex; align-items:center; gap:10px; min-height:40px; cursor:pointer; }
.filter-check input,.filter-tag input { width:18px; height:18px; accent-color:var(--brand-2); }
.filter-tag-list,.filter-cats { display:grid; gap:8px; }
.filter-tag,.filter-cat { display:flex; align-items:center; gap:9px; min-height:40px; padding:8px 10px; border-radius:10px; background:var(--card-2); cursor:pointer; }
.filter-tag.checked { outline:1px solid var(--brand-1); background:var(--brand-soft); }
.filter-actions { display:grid; gap:8px; margin-top:22px; }
.catalog-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.catalog-head .section-title { margin-bottom:4px; }
.result-count { color:var(--muted); font-size:13px; }
.sort-bar { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:0 0 18px; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.product-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow-sm); transition:transform var(--t),border-color var(--t),box-shadow var(--t); }
.product-card:hover { transform:translateY(-4px); border-color:rgba(104,172,61,.45); box-shadow:var(--shadow); }
.product-thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--card-2); }
.product-thumb img { width:100%; height:100%; object-fit:cover; transition:transform var(--t); }
.product-card:hover .product-thumb img { transform:scale(1.035); }
.product-badges { position:absolute; z-index:2; top:10px; left:10px; display:flex; flex-wrap:wrap; gap:5px; max-width:calc(100% - 54px); }
.product-badge { display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border-radius:999px; color:#fff; background:var(--brand-2); font-size:11px; font-weight:800; white-space:nowrap; }
.badge-hit { background:#8b5cf6; }.badge-discount { background:var(--bad); }.badge-low { background:var(--warn); color:#241700; }
.product-body { display:grid; gap:8px; padding:15px; }
.product-title { min-height:2.5em; font-weight:700; line-height:1.25; }
.product-tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag-chip { padding:4px 8px; border-radius:999px; background:var(--card-2); color:var(--muted); font-size:11px; }
.product-price { margin-top:3px; color:var(--brand-1); font-size:20px; font-weight:800; }
.product-price small { color:var(--muted); font-size:12px; font-weight:600; }
.product-stock { display:inline-flex; align-items:center; gap:6px; margin-top:2px; font-size:12px; font-weight:700; }
.product-stock i { font-size:11px; }
.product-stock--ok { color:var(--ok); }
.product-stock--low { color:var(--warn); }
.product-stock--out { color:var(--bad); }
.product-restock { display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:11.5px; font-weight:700; color:var(--muted); }
.product-restock i { font-size:11px; color:var(--brand-1); }
/* ----- Sold-out product cards: greyed out + corner ribbon ----- */
.product-card--sold-out .product-thumb img,
.product-card--sold-out .thumb-placeholder { filter:grayscale(1); opacity:.55; }
.product-card--sold-out .product-body { opacity:.72; }
.product-card--sold-out .product-price { color:var(--muted); }
.product-card--sold-out:hover { transform:none; border-color:var(--line); box-shadow:var(--shadow-sm); }
.product-soldout-ribbon { position:absolute; z-index:4; top:14px; right:-38px; display:inline-flex; align-items:center; gap:5px; padding:5px 42px; font-size:11px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--bad); box-shadow:0 4px 14px rgba(0,0,0,.28); transform:rotate(45deg); pointer-events:none; }
.product-soldout-ribbon i { font-size:10px; }
.product-detail { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); gap:28px; align-items:start; }
.product-detail-media { overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); border-radius:18px; background:var(--card); }
.product-detail-media img { width:100%; height:100%; object-fit:contain; }
.product-detail-info { padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--card); }
.product-detail-title { margin-bottom:16px; font-size:clamp(28px,4vw,42px); }
.product-description { color:var(--fg-soft); }
.trust-row { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.hero-stat { display:inline-flex; align-items:center; gap:7px; padding:8px 10px; border-radius:10px; background:var(--card-2); font-size:13px; }
.variations-title { margin:22px 0 12px; }
.variations { display:grid; gap:10px; }
.variation { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--card-2); }
.variation-info { min-width:0; }.variation-name { font-weight:700; }.variation-price { margin-top:6px; font-size:20px; font-weight:800; }.old-price { margin-left:6px; color:var(--muted); font-size:14px; text-decoration:line-through; }
.gallery-thumb { display:inline-flex; vertical-align:top; }

@media (max-width:1020px) {
  .catalog-layout { grid-template-columns:220px minmax(0,1fr); gap:18px; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product-detail { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  input,select,textarea,button { font-size:16px; }
  .product-page { margin-top:18px; }
  .product-page .product-detail { gap:12px; }
  .product-page .product-detail-media { aspect-ratio:1/1; border-radius:14px; }
  .product-page .product-detail-info { padding:16px; border-radius:14px; }
  .product-page .product-detail-title { margin-bottom:12px; font-size:clamp(24px,8vw,30px); overflow-wrap:anywhere; }
  .product-page .trust-row { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .product-page .trust-row::-webkit-scrollbar { display:none; }
  .product-page .hero-stat,.product-page .product-badge,.product-page .tag-chip { flex:0 0 auto; white-space:nowrap; }
  .product-page .variation { padding:14px; }
  .product-page .variation form { display:flex; gap:8px; }
  .product-page .variation form .btn { min-height:46px; }
  .product-page .product-description { padding:14px 14px 14px 18px; }
  main.container { padding-top:18px; padding-bottom:72px; }
  .section { margin-top:28px; }
  .catalog-layout { display:block; }
  .catalog-sidebar { top:0; }
  .catalog-head { align-items:center; }
  .catalog-head .section-title { font-size:23px; }
  .sort-bar { justify-content:space-between; }
  .sort-bar select { flex:1; max-width:230px; min-height:44px; }
  .product-grid { gap:12px; }
  .product-body { padding:12px; }
  .product-title { font-size:14px; }
  .product-price { font-size:18px; }
  .product-detail { grid-template-columns:1fr; gap:16px; }
  .product-detail-info { padding:18px; }
  .product-detail-title { font-size:28px; }
  .gallery-thumb { width:58px; height:58px; }
  .qty-input { min-height:44px; font-size:16px!important; }
}
@media (max-width:420px) {
  .container { padding-left:14px; padding-right:14px; }
  .catalog-category-nav { margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; }
  .product-grid { grid-template-columns:1fr; }
  .product-thumb { aspect-ratio:16/9; }
  .catalog-head { flex-wrap:wrap; }
  .filter-toggle { min-height:44px; }
  .sort-bar { align-items:stretch; flex-direction:column; }
  .sort-bar select { width:100%; max-width:none; }
}

/* ===== Mobile catalog containment + polished product purchase UI ===== */
.catalog-main,.catalog-layout,.catalog-category-nav,.catalog-benefits,.catalog-head,.sort-bar,.product-grid { min-width:0; max-width:100%; }
.product-description { position:relative; margin:16px 0 18px; padding:16px 18px 16px 20px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,var(--card-2),var(--card)); line-height:1.7; }
.product-description::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--brand); }
.product-trust-row { display:flex; flex-wrap:nowrap; gap:8px; margin:14px 0 20px; overflow-x:auto; scrollbar-width:none; }
.product-trust-row::-webkit-scrollbar { display:none; }
.product-trust-badge { flex:0 0 auto; padding:6px 10px; border-radius:9px; font-size:12px; white-space:nowrap; }
.product-trust-badge .hero-stat-icon { display:grid; width:20px; height:20px; place-items:center; border-radius:7px; color:var(--brand-1); background:var(--brand-soft); font-size:12px; }
@keyframes instantBolt { 0%,100% { transform:translateY(0) rotate(0); filter:drop-shadow(0 0 0 transparent); } 45% { transform:translateY(-2px) rotate(-8deg) scale(1.12); filter:drop-shadow(0 0 5px rgba(104,172,61,.8)); } }
.product-trust-badge--instant .hero-stat-icon i { animation:instantBolt 1.8s var(--ease) infinite; }
.variation { background:linear-gradient(145deg,var(--card-2),var(--card)); }
.variation { align-items:stretch; flex-direction:column; }
.variation-buy-form { width:100%; display:grid; gap:14px; flex:none; }
.purchase-price-card { padding:16px; border:1px solid rgba(104,172,61,.35); border-radius:14px; background:linear-gradient(135deg,var(--brand-soft),var(--card)); }
.purchase-price-label { display:block; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.purchase-price-value { margin-top:3px; color:var(--brand-1); font-size:30px; font-weight:850; line-height:1.1; }
.purchase-price-saving { display:flex; align-items:center; gap:8px; margin-top:8px; }
.purchase-tier-card { padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.purchase-tier-card > strong { display:block; margin-bottom:8px; font-size:13px; }
.purchase-tier-list { display:flex; flex-wrap:wrap; gap:7px; }
.purchase-tier-list span { padding:6px 9px; border-radius:9px; background:var(--ok-s); color:var(--fg-soft); font-size:12px; }
.purchase-tier-list b { color:var(--ok); }
.product-fields { display:grid; gap:13px; min-width:0; padding:15px; border:1px solid var(--line); border-radius:13px; background:var(--card); }
.product-fields legend { padding:0 7px; font-weight:800; }
.product-field-group { display:grid; gap:6px; }
.product-field-group label,.purchase-quantity > label { font-size:13px; font-weight:750; }
.product-field-group input,.product-field-group textarea { width:100%; min-height:46px; padding:11px 12px; border:1px solid var(--line-2); border-radius:10px; background:var(--input); outline:none; }
.product-field-group textarea { min-height:92px; resize:vertical; }
.product-field-group input:focus,.product-field-group textarea:focus { border-color:var(--brand-1); box-shadow:var(--ring); }
.product-field-group input:user-invalid,.product-field-group textarea:user-invalid { border-color:var(--bad); }
.field-help { color:var(--muted); font-size:12px; line-height:1.4; }
.field-error { min-height:0; color:var(--bad); font-size:12px; }
.req { color:var(--bad); }
.purchase-quantity { display:grid; gap:7px; }
.qty-stepper { display:grid; grid-template-columns:44px minmax(54px,1fr) 44px; align-items:center; width:min(100%,240px); height:48px; overflow:hidden; border:1px solid var(--line-2); border-radius:12px; background:var(--input); }
.qty-stepper-btn { width:38px; height:100%; border:0; background:transparent; color:var(--fg); cursor:pointer; transition:background var(--t),color var(--t),transform var(--t); }
.qty-stepper-btn:hover { color:var(--brand-1); background:var(--brand-soft); }
.qty-stepper-btn:active { transform:scale(.9); }
.qty-stepper .qty-input { width:48px; height:100%; padding:0; border:0; border-right:1px solid var(--line); border-left:1px solid var(--line); border-radius:0; background:transparent; font-weight:800; -moz-appearance:textfield; }
.qty-stepper .qty-input::-webkit-inner-spin-button,.qty-stepper .qty-input::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; }
.variation-cart-btn { width:100%; min-height:50px; padding:12px 18px; }
.purchase-total { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.purchase-total span { color:var(--muted); font-weight:700; }
.purchase-total strong { font-size:24px; }
.purchase-cta { display:grid; gap:7px; }
.purchase-cta small { color:var(--muted); text-align:center; font-size:11px; }

@media (max-width:760px) {
  .catalog-layout { width:100%; max-width:100%; overflow:visible; }
  .catalog-main { width:100%; overflow:hidden; }
  .catalog-category-nav { width:100%; margin-left:0; margin-right:0; overflow:hidden; }
  .catalog-category-scroll,.catalog-subcategory-row { width:100%; max-width:100%; }
  .catalog-benefits { width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
  .catalog-head,.sort-bar { width:100%; }
  .product-detail-info { border-radius:16px; }
  .product-description { padding:14px 15px 14px 18px; font-size:14px; }
  .variation { padding:14px; }
  .variation-buy-form { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); }
  .variation-cart-btn { width:100%; }
}
@media (max-width:420px) {
  .catalog-layout { margin-left:0; margin-right:0; }
  .catalog-category-nav { margin-left:0; margin-right:0; padding:9px; }
  .catalog-benefits { padding-bottom:3px; }
  .catalog-benefit { min-width:190px; }
  .catalog-head > div { min-width:0; }
  .catalog-head .section-title { overflow-wrap:anywhere; }
  .product-trust-row { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; }
  .product-trust-badge { flex:none; white-space:nowrap; }
  .variation-buy-form { grid-template-columns:1fr; }
  .qty-stepper { width:100%; grid-template-columns:44px minmax(48px,1fr) 44px; }
  .qty-stepper-btn { width:44px; }
  .qty-stepper .qty-input { width:100%; }
}

/* ===== Catalog/search mobile rebuild ===== */
@media (max-width:760px) {
  .catalog-listing-page .site-header { position:relative; }
  .catalog-listing-page .header-main-row { min-height:56px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding-top:8px; padding-bottom:8px; }
  .catalog-listing-page .brand { min-width:0; }
  .catalog-listing-page .brand-logo { display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; font-size:17px; }
  .catalog-listing-page .btn-catalog { display:none; }
  .catalog-listing-page .header-actions { grid-column:2; grid-row:1; }
  .catalog-listing-page .header-actions > :not(.cart-link):not(#themeToggle) { display:none; }
  .catalog-listing-page .search { grid-column:1 / -1; grid-row:2; height:42px; margin:0; padding:0 14px; border-radius:13px; background:var(--card-2); }
  .catalog-listing-page main.container { width:100%; padding-top:0; padding-left:12px; padding-right:12px; }
  .catalog-listing-page .catalog-layout { margin-top:0; }
  .catalog-listing-page .catalog-main { display:flex; flex-direction:column; gap:12px; overflow:visible; }
  .catalog-listing-page .catalog-category-nav { order:2; margin:0 -12px; padding:8px 12px; border-width:0 0 1px; border-radius:0; background:var(--bg); }
  .catalog-listing-page .catalog-category-link { min-height:38px; padding:7px 11px; border-radius:10px; font-size:12px; }
  .catalog-listing-page .catalog-category-link i { font-size:13px; }
  .catalog-listing-page .catalog-category-link small { display:none; }
  .catalog-listing-page .catalog-subcategory-row { margin-top:7px; padding-top:7px; }
  .catalog-listing-page .catalog-head { order:1; margin:0 -12px; padding:14px 12px 12px; align-items:center; border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--card),var(--bg)); }
  .catalog-listing-page .catalog-head > div { display:flex; min-width:0; align-items:center; gap:9px; }
  .catalog-listing-page .catalog-head .section-title { margin:0; font-size:21px; line-height:1.2; }
  .catalog-listing-page .catalog-head .section-title::before { width:4px; height:22px; }
  .catalog-listing-page .result-count { flex:none; padding:4px 8px; font-size:11px; }
  .catalog-listing-page .filter-toggle { min-height:38px; padding:8px 11px; border-radius:10px; font-size:13px; }
  .catalog-listing-page .sort-bar { order:3; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; margin:0; padding:10px 12px; border:1px solid var(--line); border-radius:13px; background:var(--card); }
  .catalog-listing-page .sort-bar label { align-self:center; font-size:12px; }
  .catalog-listing-page .sort-bar select { width:100%; max-width:none; min-height:40px; padding:8px 10px; font-size:14px; }
  .catalog-listing-page .sort-bar .catalog-view-switch { margin-left:0; flex:none; }
  .catalog-listing-page .product-grid,.catalog-listing-page .product-list,.catalog-listing-page .empty-state { order:4; }
  .catalog-listing-page .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .catalog-listing-page .product-card { border-radius:13px; box-shadow:none; }
  .catalog-listing-page .product-thumb { aspect-ratio:1 / .78; }
  .catalog-listing-page .product-body { gap:6px; padding:10px; }
  .catalog-listing-page .product-title { min-height:2.5em; font-size:13px; }
  .catalog-listing-page .product-price { font-size:17px; }
  .catalog-listing-page .product-tags { display:none; }
  .catalog-listing-page .pagination { order:5; margin-top:12px; }
  .catalog-listing-page .empty-state { padding:42px 16px; }
}
@media (max-width:360px) {
  .catalog-listing-page .brand-logo { font-size:15px; }
  .catalog-listing-page .header-actions .icon-btn { width:38px; height:38px; }
  .catalog-listing-page .catalog-head { flex-wrap:nowrap; gap:8px; }
  .catalog-listing-page .catalog-head .section-title { font-size:19px; }
  .catalog-listing-page .result-count { display:none; }
}

/* ===== Definitive hero + catalog/search rebuild ===== */
.home-hero { min-height:0; grid-template-columns:minmax(0,1fr) 250px; gap:22px; margin-top:18px; padding:18px 28px 22px; }
.home-hero .hero-eyebrow { margin-bottom:11px; padding:5px 11px; font-size:11px; }
.home-hero .hero-title { max-width:680px; margin-bottom:9px; font-size:clamp(30px,3.4vw,43px); }
.home-hero .hero-sub { max-width:650px; font-size:14px; line-height:1.55; }
.home-hero .hero-cta { flex-wrap:nowrap; gap:9px; margin-top:17px; }
.home-hero .hero-cta .btn { min-width:0; padding:11px 16px; font-size:13px; white-space:nowrap; }
.home-hero .hero-service-grid { gap:7px; }
.home-hero .hero-service-grid span { grid-template-columns:28px 1fr; column-gap:8px; padding:9px 10px; }
.home-hero .hero-service-grid i { font-size:15px; }
.home-hero .hero-service-grid b { font-size:12px; }
.home-hero .hero-service-grid small { font-size:10px; }

.catalog-listing-page main.container { padding-top:14px; }
.catalog-listing-page .catalog-layout { margin-top:0; }
.catalog-listing-page .catalog-main { min-width:0; }
.catalog-listing-page .catalog-head { margin-bottom:12px; }
.catalog-listing-page .catalog-category-nav { margin-bottom:12px; }
.catalog-listing-page .sort-bar { margin-bottom:12px; }
.catalog-listing-page .filter-card { padding:14px; }
.catalog-listing-page .filter-title { margin-bottom:12px; font-size:16px; }
.catalog-listing-page .filter-group { margin-bottom:10px; padding-bottom:10px; }
.catalog-listing-page .filter-group + .filter-group { margin-top:10px; padding-top:10px; }
.catalog-listing-page .filter-label { margin-bottom:6px; font-size:11px; }
.catalog-listing-page .price-range input { padding:8px 9px; }
.catalog-listing-page .filter-check { min-height:32px; margin-bottom:3px; font-size:13px; }
.catalog-listing-page .filter-tag-list { display:flex; flex-wrap:wrap; gap:5px; }
.catalog-listing-page .filter-tag { min-height:30px; padding:5px 8px; font-size:11px; }
.catalog-listing-page .filter-cats { gap:4px; }
.catalog-listing-page .filter-cat { min-height:34px; padding:6px 8px; font-size:12px; }
.catalog-listing-page .filter-actions { grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; }
.catalog-listing-page .filter-actions .btn { padding:9px 8px; font-size:12px; }

@media (max-width:760px) {
  .home-hero { position:relative; display:block; margin-top:12px; padding:13px 16px 54px; border-radius:20px; }
  .home-hero .hero-eyebrow { margin-bottom:9px; font-size:10px; }
  .home-hero .hero-title { margin-bottom:8px; font-size:27px; line-height:1.04; }
  .home-hero .hero-sub { font-size:13px; line-height:1.45; }
  .home-hero .hero-cta { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:7px; margin-top:14px; }
  .home-hero .hero-cta .btn { width:100%; padding:10px 8px; font-size:11px; }
  .home-hero .hero-cta .btn i { font-size:11px; }
  .home-hero .hero-service-grid { position:absolute; z-index:2; right:10px; bottom:9px; left:10px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .home-hero .hero-service-grid span { min-width:0; display:flex; flex-direction:row; justify-content:center; gap:5px; padding:6px 5px; border-radius:9px; background:rgba(14,22,33,.78); backdrop-filter:blur(8px); }
  .home-hero .hero-service-grid i { flex:none; font-size:11px; }
  .home-hero .hero-service-grid b { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
  .home-hero .hero-service-grid small { display:none; }

  .catalog-listing-page { overflow-x:hidden; }
  .catalog-listing-page .site-header { position:relative; }
  .catalog-listing-page main.container { padding:0 10px 72px; }
  .catalog-listing-page .catalog-layout { display:block; width:100%; margin:0; padding:0; }
  .catalog-listing-page .catalog-main { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; width:100%; overflow:visible; }
  .catalog-listing-page .catalog-head { order:1; width:auto; margin:0 -10px; padding:11px 10px; border-bottom:1px solid var(--line); background:var(--card); }
  .catalog-listing-page .catalog-head > div { display:flex; min-width:0; align-items:center; gap:7px; }
  .catalog-listing-page .catalog-head .section-title { margin:0; font-size:20px; }
  .catalog-listing-page .catalog-head .section-title::before { width:4px; height:20px; }
  .catalog-listing-page .result-count { padding:3px 7px; font-size:10px; }
  .catalog-listing-page .filter-toggle { min-height:36px; padding:7px 10px; font-size:12px; }
  .catalog-listing-page .catalog-category-nav { order:2; width:auto; margin:0 -10px; padding:7px 10px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--bg); overflow:hidden; }
  .catalog-listing-page .catalog-category-scroll,.catalog-listing-page .catalog-subcategory-row { width:100%; max-width:100%; gap:6px; overflow-x:auto; overflow-y:hidden; }
  .catalog-listing-page .catalog-category-link { min-height:34px; padding:6px 9px; font-size:11px; }
  .catalog-listing-page .catalog-subcategory-row { margin-top:6px; padding-top:6px; }
  .catalog-listing-page .catalog-subcategory-link { padding:5px 9px; font-size:10px; }
  .catalog-listing-page .sort-bar { order:3; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; width:100%; margin:0; padding:7px 9px; border:1px solid var(--line); border-radius:11px; background:var(--card); }
  .catalog-listing-page .sort-bar label { font-size:11px; }
  .catalog-listing-page .sort-bar select { min-height:36px; padding:6px 8px; font-size:13px; }
  .catalog-listing-page .sort-bar .catalog-view-switch { margin-left:0; flex:none; }
  .catalog-listing-page .product-grid { order:4; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; }
  .catalog-listing-page .product-list { order:4; width:100%; }
  .catalog-listing-page .empty-state { order:4; }
  .catalog-listing-page .pagination { order:5; }
  .catalog-listing-page .catalog-sidebar { width:min(92vw,340px); }
  .catalog-listing-page .catalog-sidebar .filter-card { min-height:100%; padding:12px; }
  .catalog-listing-page .filter-mobile-head { margin-bottom:8px; }
  .catalog-listing-page .filter-group { margin-bottom:8px; padding-bottom:8px; }
  .catalog-listing-page .filter-group + .filter-group { margin-top:8px; padding-top:8px; }
  .catalog-listing-page .filter-actions { position:sticky; bottom:0; margin:10px -12px -12px; padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px)); background:var(--bg-elev); border-top:1px solid var(--line); }
}
@media (max-width:380px) {
  .home-hero .hero-title { font-size:24px; }
  .home-hero .hero-cta .btn { font-size:10px; letter-spacing:-.02em; }
  .catalog-listing-page .product-body { padding:8px; }
  .catalog-listing-page .product-title { font-size:12px; }
}

/* ===== Home hero v2 ===== */
.home-hero-v2 { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:24px; min-height:0; margin-top:18px; padding:14px 26px 22px; overflow:hidden; border-radius:24px; background:linear-gradient(125deg,var(--card) 0%,var(--card) 62%,rgba(104,172,61,.16) 100%); }
.home-hero-v2::before { background:radial-gradient(420px 220px at 92% 10%,rgba(104,172,61,.28),transparent 68%); animation:none; }
.home-hero-v2::after { content:""; position:absolute; z-index:0; right:-70px; bottom:-120px; width:300px; height:300px; border:1px solid rgba(104,172,61,.18); border-radius:50%; box-shadow:0 0 0 34px rgba(104,172,61,.035),0 0 0 68px rgba(104,172,61,.025); }
.home-hero-v2 .hero-content { position:relative; z-index:2; max-width:720px; }
.home-hero-v2 .hero-eyebrow { margin-bottom:10px; padding:5px 10px; font-size:10px; }
.home-hero-v2 .hero-title { max-width:680px; margin-bottom:9px; font-size:clamp(31px,4vw,48px); line-height:1.02; letter-spacing:-.05em; text-wrap:balance; }
.home-hero-v2 .hero-sub { max-width:620px; font-size:14px; line-height:1.5; }
.home-hero-v2 .hero-cta { display:flex; flex-wrap:nowrap; gap:8px; margin-top:16px; }
.home-hero-v2 .hero-cta .btn { min-height:42px; padding:10px 15px; font-size:12px; white-space:nowrap; }
.home-hero-v2 .hero-proof { position:relative; z-index:2; display:grid; gap:6px; min-width:150px; }
.home-hero-v2 .hero-proof span { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(104,172,61,.18); border-radius:10px; background:rgba(14,22,33,.42); backdrop-filter:blur(8px); font-size:11px; }
.home-hero-v2 .hero-proof i { width:18px; color:var(--brand-1); text-align:center; }
@media (max-width:760px) {
  .home-hero-v2 { display:block; margin-top:10px; padding:9px 14px 50px; border-radius:19px; }
  .home-hero-v2 .hero-title { max-width:330px; font-size:27px; }
  .home-hero-v2 .hero-sub { max-width:350px; font-size:12px; }
  .home-hero-v2 .hero-cta { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:13px; }
  .home-hero-v2 .hero-cta .btn { width:100%; min-width:0; padding:9px 6px; font-size:10px; }
  .home-hero-v2 .hero-proof { position:absolute; right:7px; bottom:7px; left:7px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; min-width:0; }
  .home-hero-v2 .hero-proof span { justify-content:center; min-width:0; padding:6px 4px; border-radius:8px; font-size:8px; white-space:nowrap; }
  .home-hero-v2 .hero-proof i { width:auto; font-size:9px; }
}

/* ===== Refined home hero ===== */
.home-hero { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(135deg,var(--card) 0%,var(--card) 58%,rgba(104,172,61,.12) 100%); }
.home-hero::after { content:""; position:absolute; z-index:0; right:-90px; bottom:-130px; width:330px; height:330px; border-radius:50%; background:radial-gradient(circle,rgba(104,172,61,.24),transparent 68%); pointer-events:none; }
.home-hero .hero-content,.home-hero .hero-service-grid { position:relative; z-index:2; }
.home-hero .hero-content { align-self:center; }
.home-hero .hero-title { letter-spacing:-.045em; text-wrap:balance; }
.home-hero .hero-sub { color:var(--fg-soft); text-wrap:pretty; }
.home-hero .hero-cta .btn-primary { box-shadow:0 10px 24px -10px rgba(104,172,61,.75); }
.home-hero .hero-service-grid span { border-color:rgba(104,172,61,.16); background:linear-gradient(135deg,rgba(104,172,61,.10),rgba(14,22,33,.34)); }

@media (max-width:760px) {
  .home-hero { padding-top:15px; padding-bottom:52px; }
  .home-hero::after { right:-120px; bottom:-150px; }
  .home-hero .hero-title { max-width:330px; font-size:26px; }
  .home-hero .hero-sub { max-width:340px; }
  .home-hero .hero-service-grid { right:8px; bottom:8px; left:8px; }
  .home-hero .hero-service-grid span { border-color:rgba(255,255,255,.08); box-shadow:0 8px 20px -14px #000; }
}

/* Critical mobile listing fix: the off-canvas filter must not occupy layout height. */
@media (max-width:760px) {
  .catalog-listing-page main.container { max-width:none!important; width:100%!important; padding-left:0!important; padding-right:0!important; }
  .catalog-listing-page .catalog-layout { position:relative; min-height:0; width:100%!important; max-width:none!important; }
  .catalog-listing-page .catalog-main { width:100%!important; max-width:none!important; }
  .catalog-listing-page .catalog-head,.catalog-listing-page .catalog-category-nav { width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; }
  .catalog-listing-page .catalog-head { padding-left:12px!important; padding-right:12px!important; }
  .catalog-listing-page .catalog-category-nav { padding-left:12px!important; padding-right:12px!important; }
  .catalog-listing-page .sort-bar,.catalog-listing-page .product-grid,.catalog-listing-page .product-list,.catalog-listing-page .empty-state,.catalog-listing-page .pagination { width:calc(100% - 20px)!important; margin-left:10px!important; margin-right:10px!important; }
  .catalog-listing-page .catalog-sidebar {
    position:fixed!important;
    z-index:1002;
    inset:0 auto 0 0;
    display:block;
    width:min(92vw,340px);
    height:100dvh;
    max-height:100dvh;
    margin:0;
    /* The sidebar itself does NOT scroll — only its .filter-card does. Two
       nested scroll contexts made the sticky action bar drift with the page
       scroll. Keep a single scroll container (the card) and pin the actions
       with position:fixed to the viewport. */
    overflow:hidden;
    overscroll-behavior:contain;
    transform:translate3d(-105%,0,0);
    visibility:hidden;
    pointer-events:none;
  }
  .catalog-listing-page .catalog-sidebar.is-open {
    transform:translate3d(0,0,0);
    visibility:visible;
    pointer-events:auto;
  }
  .catalog-listing-page .filter-backdrop { z-index:1001!important; }
  .catalog-listing-page .mobile-nav { z-index:300; }
  .catalog-listing-page .catalog-sidebar .filter-card { height:auto; min-height:100%; padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)); }
  .catalog-listing-page .catalog-sidebar .filter-actions { z-index:3; bottom:0; }
  .catalog-listing-page .catalog-main { min-height:0; }
  .catalog-listing-page .catalog-category-scroll,.catalog-listing-page .catalog-subcategory-row { flex-wrap:nowrap; }
  .catalog-listing-page .catalog-category-link,.catalog-listing-page .catalog-subcategory-link { flex:0 0 auto; white-space:nowrap; }
}

/* ----------------------- Compact catalog navigation ---------------- */
.catalog-category-nav { margin-bottom:16px; padding:10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.catalog-category-scroll,.catalog-subcategory-row { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.catalog-category-scroll::-webkit-scrollbar,.catalog-subcategory-row::-webkit-scrollbar { display:none; }
.catalog-category-link,.catalog-subcategory-link { flex:none; display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid var(--line); border-radius:10px; background:var(--card-2); font-size:13px; font-weight:700; white-space:nowrap; transition:var(--t); }
.catalog-category-link i { color:var(--brand-1); }
.catalog-category-link small { color:var(--muted); font-size:11px; }
.catalog-category-link:hover,.catalog-category-link.active,.catalog-subcategory-link:hover,.catalog-subcategory-link.active { border-color:var(--brand-1); background:var(--brand-soft); }
.catalog-subcategory-row { margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.catalog-subcategory-link { padding:6px 10px; font-size:12px; }
.catalog-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:18px; }
.catalog-benefit { display:flex; align-items:center; gap:9px; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--card-2); }
.catalog-benefit i { color:var(--brand-1); }
.catalog-benefit span { display:grid; line-height:1.2; }
.catalog-benefit strong { font-size:12px; }.catalog-benefit small { color:var(--muted); font-size:10px; }
@media (max-width:760px) { .catalog-category-nav { margin-left:-20px; margin-right:-20px; border-left:0; border-right:0; border-radius:0; padding:9px 20px; }.catalog-category-scroll,.catalog-subcategory-row { scroll-snap-type:x proximity; }.catalog-category-link,.catalog-subcategory-link { scroll-snap-align:start; }.catalog-benefits { display:flex; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; }.catalog-benefits::-webkit-scrollbar { display:none; }.catalog-benefit { flex:0 0 210px; scroll-snap-align:start; } }

/* ===== Catalog mobile-first usability refresh ===== */
.catalog-head-copy { min-width:0; }
.filter-count { min-width:22px; height:22px; display:inline-grid; place-items:center; padding:0 6px; border-radius:999px; background:var(--brand); color:#fff; font-size:12px; line-height:1; }
.active-filters { display:flex; align-items:center; gap:7px; margin:0 0 14px; padding:9px 10px; overflow-x:auto; scrollbar-width:none; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.active-filters::-webkit-scrollbar { display:none; }
.active-filters__label,.active-filter-chip,.active-filters__clear { flex:none; white-space:nowrap; }
.active-filters__label { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.active-filter-chip { padding:6px 9px; border-radius:999px; background:var(--brand-soft); color:var(--fg); font-size:12px; font-weight:700; }
.active-filters__clear { margin-left:auto; padding:6px 8px; color:var(--brand-1); font-size:12px; font-weight:800; }
.product-cta { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:38px; margin-top:4px; padding:8px 11px; border-radius:10px; background:var(--brand-soft); color:var(--brand-1); font-size:12px; font-weight:800; }
.product-card--sold-out .product-cta { background:var(--card-2); color:var(--muted); }
.thumb-placeholder { width:100%; height:100%; display:grid; place-items:center; color:var(--muted); font-size:38px; background:linear-gradient(145deg,var(--card-2),var(--card-3)); }
.empty-state h2 { margin-top:10px; font-size:22px; }
.empty-state .muted { max-width:420px; margin:8px auto 18px; }
.empty-state__actions { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; }
.product-list .product-cta { align-self:flex-start; min-height:32px; padding:6px 10px; }

@media (max-width:760px) {
  .catalog-listing-page .catalog-head { min-height:76px; }
  .catalog-listing-page .catalog-head .section-title { font-size:clamp(22px,7vw,28px); overflow-wrap:anywhere; }
  .catalog-listing-page .result-count { display:block; margin-top:5px; font-size:13px; }
  .catalog-listing-page .filter-toggle { min-height:44px; padding:10px 12px; }
  .catalog-listing-page .active-filters { order:2; margin:0; border-radius:11px; }
  .catalog-listing-page .catalog-category-nav { order:3; }
  .catalog-listing-page .sort-bar { order:4; }
  .catalog-listing-page .product-grid,.catalog-listing-page .product-list,.catalog-listing-page .empty-state { order:5; }
  .catalog-listing-page .pagination { order:6; }
  .catalog-listing-page .catalog-category-link,.catalog-listing-page .catalog-subcategory-link { min-height:44px; padding:9px 12px; font-size:13px; }
  .catalog-listing-page .sort-bar select { min-height:44px; }
  .catalog-listing-page .catalog-view-btn { width:40px; height:40px; }
  .catalog-listing-page .product-thumb { aspect-ratio:4 / 3; }
  .catalog-listing-page .product-title { min-height:2.7em; font-size:14px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .catalog-listing-page .product-price { font-size:19px; }
  .catalog-listing-page .product-stock { min-height:20px; font-size:12px; }
  .catalog-listing-page .product-cta { min-height:40px; }
  .catalog-listing-page .product-badge { min-height:23px; font-size:10px; }
  .catalog-listing-page .product-soldout-ribbon { top:12px; right:-42px; }
  .catalog-listing-page .empty-state { padding:34px 18px; }
  .catalog-listing-page .empty-state__actions { flex-direction:column; }
  .catalog-listing-page .empty-state__actions .btn { width:100%; min-height:46px; }
}
@media (max-width:420px) {
  .catalog-listing-page .catalog-head { gap:10px; }
  .catalog-listing-page .filter-toggle span { display:none; }
  .catalog-listing-page .filter-toggle { width:46px; padding:0; position:relative; }
  .catalog-listing-page .filter-count { position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; font-size:11px; }
  .catalog-listing-page .product-grid { gap:10px; }
  .catalog-listing-page .product-body { padding:10px; }
  .catalog-listing-page .product-meta { font-size:10px; }
  .catalog-listing-page .product-cta { padding:8px 9px; font-size:11px; }
  .catalog-listing-page .product-list .product-cta { display:none; }
}

/* ----------------------- Checkout expiry timer ---------------------- */
.checkout-expiry { margin:0 0 18px; padding:12px 16px; border:1px solid rgba(240,178,58,.35); border-radius:var(--radius-sm); background:var(--warn-s); color:var(--warn); font-weight:700; }
.checkout-expiry strong { font-variant-numeric:tabular-nums; }
.checkout-expiry.expired { border-color:rgba(255,90,95,.35); background:var(--bad-s); color:var(--bad); }

/* ----------------------- Footer and resume chip --------------------- */
.resume-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid rgba(240,178,58,.35); border-radius:var(--pill); background:var(--warn-s); color:var(--warn); font-size:12px; font-weight:800; white-space:nowrap; }
.resume-chip:hover { transform:translateY(-1px); }
.site-footer { margin-top:auto; border-top:1px solid var(--line); background:var(--bg-elev); }
.footer-grid { display:grid; grid-template-columns:minmax(240px,1.4fr) repeat(3,minmax(150px,1fr)); gap:36px; padding-top:44px; padding-bottom:34px; }
.footer-brand p { max-width:330px; margin-top:12px; color:var(--muted); }
.footer-links,.footer-trust { display:flex; flex-direction:column; align-items:flex-start; gap:10px; color:var(--muted); font-size:14px; }
.footer-links strong,.footer-trust strong { margin-bottom:3px; color:var(--fg); font-family:var(--font-display); }
.footer-links a,.footer-trust span { display:flex; align-items:center; gap:9px; }
.footer-links a:hover { color:var(--brand-1); }
.footer-support-link { display:flex; align-items:center; gap:8px; margin-top:4px; padding:8px 12px; border-radius:var(--pill); background:var(--brand-soft); color:var(--brand-1); font-weight:700; font-size:13px; align-self:flex-start; transition:background var(--t),transform var(--t); }
.footer-support-link:hover { background:var(--brand-1); color:#fff; transform:translateY(-1px); }
.footer-tg-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.footer-tg-group { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--pill); background:linear-gradient(135deg,#2aabee,#229ed9); color:#fff; font-weight:700; font-size:13px; box-shadow:0 8px 20px -8px rgba(34,158,217,.7); transition:transform var(--t),box-shadow var(--t),filter var(--t); }
.footer-tg-group i { color:#fff; }
.footer-tg-group:hover { color:#fff; transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 12px 26px -8px rgba(34,158,217,.85); }
.footer-legal { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin:0 auto; }
.footer-legal a { color:var(--muted); transition:color var(--t); }
.footer-legal a:hover { color:var(--brand-1); }
.cat-chip--support { background:var(--brand-soft); color:var(--brand-1); border-color:rgba(104,172,61,.3); }
.cat-chip--support:hover { background:var(--brand-1); color:#fff; }
.footer-links i,.footer-trust i { width:16px; color:var(--brand-1); text-align:center; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:18px; padding-bottom:22px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.footer-trust-inline { display:flex; flex-wrap:wrap; gap:6px 18px; }
.footer-trust-inline span { display:inline-flex; align-items:center; gap:7px; }
.footer-trust-inline i { color:var(--brand-1); }
@media (max-width:900px) { .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .resume-chip span { display:none; }.resume-chip { width:40px; height:40px; justify-content:center; padding:0; }.footer-grid { grid-template-columns:1fr; gap:26px; padding-top:34px; }.footer-bottom { flex-direction:column; gap:5px; } }

/* ------------------------------ Header ------------------------------ */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--glass);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 18px; }
.brand-logo { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.03em; }
.brand-dot { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.search { position: relative; flex: 1; max-width: 520px; display: flex; align-items: center; gap: 8px;
  padding: 0 18px; height: 46px; background: var(--input); border: 1px solid var(--line); border-radius: var(--pill);
  transition: border-color var(--t), box-shadow var(--t); }
.search:focus-within { border-color: var(--brand-2); box-shadow: none; }
.search input { flex: 1; border: none; background: transparent; outline: none; font-size: 14.5px; }
/* Kill the global :focus-visible ring on the inner field — it was the glow
   that appeared immediately around the input itself. */
.search input:focus,
.search input:focus-visible { outline: none; box-shadow: none; border-radius: 0; }
.search input::placeholder { color: var(--muted); }
.search button { background: none; border: none; cursor: pointer; font-size: 16px; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.balance { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--pill);
  background: var(--brand-soft); border: 1px solid rgba(104,172,61,.3); font-weight: 700; font-size: 13px; }
.account-name { display: none; font-weight: 600; }

/* Search suggest */
.search-suggest { position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; z-index: 200; display: none; }
.search-suggest.open { display: block; }
.search-suggest a { display: block; padding: 12px 18px; font-size: 14px; border-bottom: 1px solid var(--line); transition: background var(--t); }
.search-suggest a:last-child { border-bottom: none; }
.search-suggest a:hover, .search-suggest a.active { background: var(--card-3); }
/* Bump z-index so the dropdown floats above sticky/adjacent sections, and cap
   its height so long result lists scroll instead of running off-screen. */
.search-suggest { z-index: 400; max-height: min(70vh, 460px); overflow-y: auto; overflow-x: hidden; }
/* Rich suggestion rows: thumbnail + title + "from $" price. */
.search-suggest a.suggest-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.suggest-thumb { flex: none; width: 44px; height: 44px; border-radius: 9px; overflow: hidden; background: var(--card-2); display: grid; place-items: center; }
.suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.suggest-thumb i { color: var(--muted); font-size: 16px; }
.suggest-thumb-cat { background: var(--brand-soft); }
.suggest-thumb-cat i { color: var(--brand-1); }
.suggest-body { min-width: 0; display: grid; gap: 2px; }
.suggest-title { font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-price { font-size: 12.5px; font-weight: 700; color: var(--brand-1); }

/* ------------------------------- Hero ------------------------------- */
.hero { position: relative; margin-top: var(--sp-5); padding: var(--sp-7) var(--sp-6); border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -2px; z-index: 0;
  background: radial-gradient(600px 300px at 85% -10%, rgba(104,172,61,.35), transparent 60%),
              radial-gradient(520px 280px at -5% 120%, rgba(104,172,61,.32), transparent 60%);
  animation: heroGlow 12s var(--ease) infinite alternate; }
@keyframes heroGlow { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1%, 0) scale(1.08); } }
.hero-content { position: relative; z-index: 1; max-width: 640px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--pill);
  background: var(--brand-soft); border: 1px solid rgba(104,172,61,.3); font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; }
.hero-title { font-size: 34px; margin-bottom: 14px; }
.hero-sub { color: var(--fg-soft); font-size: 16px; max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-stat { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--pill);
  background: var(--card-2); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.hero-stat-icon { font-size: 16px; }

/* ---------------------------- Categories ---------------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cat-tile { position: relative; display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 10px 12px; white-space: nowrap; text-decoration: none; color: inherit;
  border-radius: var(--pill); background: var(--card); border: 1px solid var(--line); overflow: hidden;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.cat-tile::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%;
  background: var(--brand-soft); filter: blur(6px); opacity: 0; transition: opacity var(--t), transform var(--t); z-index: 0; }
.cat-tile:hover { transform: translateY(-3px); border-color: var(--brand-2); box-shadow: var(--shadow-sm); }
.cat-tile:hover::after { transform: scale(1.25); }
.cat-tile .cat-icon { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-1); font-size: 13px; position: relative; z-index: 1; }
.cat-tile .cat-name { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; line-height: 1.2; position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-tile .cat-count { flex: none; position: relative; z-index: 1; min-width: 20px; padding: 1px 7px; border-radius: var(--pill); background: var(--card-3); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center; }
.cat-tile:hover .cat-count { background: var(--brand-soft); color: var(--brand-1); }
@media (max-width: 560px) { .cat-tile { padding: 8px 10px; gap: 8px; } .cat-tile .cat-icon { width: 24px; height: 24px; font-size: 12px; } .cat-tile .cat-name { font-size: 12.5px; } .cat-tile .cat-count { font-size: 10px; padding: 1px 6px; min-width: 18px; } }
/* Legacy chip (used in filters / account) */
.cat-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--pill);
  background: var(--card-2); border: 1px solid var(--line); font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
  transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t); }
.cat-chip:hover, .cat-chip:focus-visible { transform: translateY(-2px); border-color: var(--brand-2); background: var(--card-3);
  box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06)); outline: none; }
.cat-chip .cat-icon { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand-1); font-size: 15px; }

/* -------------------------- Product grid ---------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.product-card { position: relative; display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--glow); border-color: transparent; }
.product-thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--card-2); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.product-card:hover .product-thumb img { transform: scale(1.08); }
.thumb-placeholder { width: 100%; height: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  font-size: 48px; background: var(--brand-soft); }
.thumb-placeholder.big { aspect-ratio: 1 / 1; font-size: 88px; }
.product-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: nowrap; gap: 6px; z-index: 2; max-width: calc(100% - 24px); overflow: hidden; pointer-events: none; }
.product-badges .product-badge { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.product-badge { padding: 4px 10px; border-radius: var(--pill); font-size: 11px; font-weight: 800; letter-spacing: .02em;
  color: #ffffff; backdrop-filter: blur(4px); }
.badge-new { background: var(--brand); }
.badge-hit { background: var(--warn); }
.badge-discount { background: var(--bad); color: #2a0a10; }
.badge-low { background: rgba(0,0,0,.6); color: #fff; }
.product-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-title { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.product-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { padding: 3px 9px; border-radius: var(--pill); font-size: 11px; font-weight: 700;
  background: var(--card-3); border: 1px solid var(--line); color: var(--fg-soft); }
.product-price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; font-weight: 800; font-size: 19px; font-family: var(--font-display); }
.product-price small { color: var(--muted); font-weight: 500; font-size: 12px; }

/* Skeleton */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.product-card.skeleton { pointer-events: none; }
.product-card.skeleton .product-thumb, .product-card.skeleton .sk-title, .product-card.skeleton .sk-price {
  background: linear-gradient(90deg, var(--card-2) 25%, var(--card-3) 37%, var(--card-2) 63%); background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite; }
.product-card.skeleton .sk-title { height: 14px; border-radius: 6px; }
.product-card.skeleton .sk-price { height: 18px; width: 55%; border-radius: 6px; }

/* ------------------------- Product detail --------------------------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; margin-bottom: var(--sp-4); color: var(--muted); }
.breadcrumbs a:hover { color: var(--fg); }
.product-detail { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-top: 8px; }
.product-detail-media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-sm); }
.product-detail-media img { width: 100%; }
.product-detail-title { font-size: 30px; margin-bottom: 14px; }
.product-description { color: var(--fg-soft); margin-bottom: 20px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--sp-4) 0; }
.variations-title { font-size: 18px; margin: var(--sp-4) 0 var(--sp-3); }
.variations { display: flex; flex-direction: column; gap: 12px; }
.variation { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px;
  border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); transition: border-color var(--t), box-shadow var(--t); }
.variation:hover { border-color: var(--brand-2); box-shadow: var(--shadow-sm); }
.variation.sold-out { opacity: .55; }
.variation-price { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); }
.old-price { text-decoration: line-through; color: var(--muted); font-size: 13px; font-weight: 500; }
.variation-warning { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-xs); background: var(--warn-s);
  border: 1px solid rgba(251,191,36,.3); font-size: 13px; color: var(--fg-soft); }
.badge-sold { padding: 5px 12px; border-radius: var(--pill); background: var(--bad-s); color: var(--bad); font-size: 12px; font-weight: 800; }
.volume-tiers { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.volume-tiers li { padding: 3px 9px; border-radius: var(--pill); font-size: 11px; font-weight: 700;
  background: var(--brand-soft); border: 1px solid rgba(104,172,61,.3); color: var(--fg-soft); }
.qty-input { width: 68px; padding: 9px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--input); outline: none; text-align: center; transition: border-color var(--t), box-shadow var(--t); }
.qty-input:focus { border-color: var(--brand-2); box-shadow: var(--ring); }
.variation-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.variation-actions form { display: flex; gap: 8px; align-items: center; }
.cart-lines { display: flex; flex-direction: column; gap: 12px; }
.cart-line { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--line); }
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-title { font-weight: 600; }
.cart-line-price { font-weight: 800; font-family: var(--font-display); }
.cart-totals { margin-top: var(--sp-4); padding: 18px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); }
.cart-totals-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.cart-totals-row.grand { font-size: 18px; font-weight: 800; font-family: var(--font-display); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.cart-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-4); }

/* --------------------- Catalog layout / filters --------------------- */
.catalog-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.result-count { font-size: 13px; font-weight: 700; color: var(--muted); padding: 6px 12px; border-radius: var(--pill); background: var(--card-2); border: 1px solid var(--line); }
.catalog-sidebar { order: -1; }
.filter-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: var(--sp-5); position: sticky; top: calc(var(--header-h) + 12px); }
.filter-title { font-size: 17px; margin-bottom: var(--sp-4); }
.filter-group { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.filter-group:last-of-type { border-bottom: none; }
.filter-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: var(--sp-3); }
.price-range { display: flex; align-items: center; gap: 8px; }
.price-range input { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--input); outline: none; transition: border-color var(--t), box-shadow var(--t); }
.price-range input:focus { border-color: var(--brand-2); box-shadow: var(--ring); }
.filter-check { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; font-size: 14px; }
.filter-check input { width: 18px; height: 18px; accent-color: var(--brand-1); }
.filter-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--pill); background: var(--card-2); border: 1px solid var(--line); font-size: 13px; font-weight: 600; cursor: pointer; }
.filter-tag input { display: none; }
.filter-tag.checked, .filter-tag:has(input:checked) { background: var(--brand-soft); border-color: var(--brand-2); color: var(--fg); }
.filter-cats { display: flex; flex-direction: column; gap: 6px; }
.filter-cat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); transition: background var(--t); }
.filter-cat:hover { background: var(--card-3); }
.filter-actions { display: flex; flex-direction: column; gap: 10px; margin-top: var(--sp-4); }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--sp-7); }
.page-link { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--card-2); font-weight: 700; font-size: 14px; transition: all var(--t); }
.page-link:hover { background: var(--card-3); transform: translateY(-2px); }
.page-link.active { background: var(--brand); border: none; color: #ffffff; }

/* Sort bar */
.sort-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--sp-4); }
.sort-bar select { padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--input); outline: none; }

/* --------------------------- Empty state ---------------------------- */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--muted); }
.empty-state .empty-icon { font-size: 54px; margin-bottom: 16px; }
.empty-state .btn { margin-top: 16px; }

/* ------------------------------ Forms ------------------------------- */
.form-card { max-width: 480px; margin: var(--sp-7) auto; padding: var(--sp-6); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.form-card h1, .form-card h2 { margin-bottom: 6px; }
/* Auth pages (login / register): the page container already adds top padding,
   so the card sits much closer to the header — small top gap instead of --sp-7. */
.auth-card { margin-top: var(--sp-2); }
@media (max-width: 600px) { .auth-card { margin-top: 0; } }
.form-group { margin-bottom: var(--sp-4); }
.form-group label { display: block; margin-bottom: 7px; font-weight: 600; font-size: 13px; color: var(--fg-soft); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--input); outline: none; transition: border-color var(--t), box-shadow var(--t); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--brand-2); box-shadow: var(--ring); }
.field-error { display: none; color: var(--bad); font-size: 12px; margin-top: 6px; }
.form-group.invalid input, .form-group.invalid select, .form-group.invalid textarea { border-color: var(--bad); }
.form-group.invalid .field-error { display: block; }

.alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: var(--sp-4); font-size: 14px; border: 1px solid transparent; }
.alert-icon { flex-shrink: 0; }
.alert-error { background: var(--bad-s); color: var(--bad); border-color: rgba(251,113,133,.35); }
.alert-success { background: var(--ok-s); color: var(--ok); border-color: rgba(52,211,153,.35); }
.alert-info { background: var(--brand-soft); color: var(--fg); border-color: rgba(104,172,61,.35); }

/* Step indicator */
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-5); }
.step { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pill); background: var(--card-2); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.step-num { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--line-2); color: var(--fg); }
.step.current { color: var(--fg); border-color: var(--brand-2); }
.step.current .step-num { background: var(--brand); color: #ffffff; }
.step.done .step-num { background: var(--ok); color: #ffffff; }

/* Amount presets */
.amount-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.amount-chip { padding: 9px 16px; border-radius: var(--pill); background: var(--card-2); border: 1px solid var(--line-2); font-weight: 700; font-size: 14px; cursor: pointer; transition: all var(--t); }
.amount-chip:hover { transform: translateY(-1px); border-color: var(--brand-2); }
.amount-chip.active { background: var(--brand); border: none; color: #ffffff; }

/* Checkout / account */
.checkout-page { max-width: 940px; margin: 0 auto; }
.checkout-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.pay-option-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card, .acc-card, .order-card, .order-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px; }
.acc-label { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.acc-value { font-size: 28px; font-weight: 800; font-family: var(--font-display); }
.acc-value.success { color: var(--ok); }
.account-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-5); }
.account-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.account-nav-wrap { position: relative; }
.account-nav-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 40px; pointer-events: none; z-index: 2; background: linear-gradient(to right, rgba(0,0,0,0), var(--card)); border-radius: 0 var(--pill) var(--pill) 0; }
.account-nav { display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 10px; margin: var(--sp-5) 0; padding: 4px 0; }
.account-nav::-webkit-scrollbar { display: none; }
.balance-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-6); border-radius: var(--radius-lg); background:
    radial-gradient(480px 220px at 92% -30%, rgba(104,172,61,.3), transparent 60%), var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow); margin-bottom: var(--sp-5); }
.balance-hero-value { font-size: 44px; font-weight: 800; font-family: var(--font-display); line-height: 1.05; margin: 4px 0 6px; }
.balance-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.order-list { display: flex; flex-direction: column; gap: 14px; }
.order-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.order-total { margin-top: 12px; font-size: 16px; }
.delivered-box { margin-top: 12px; padding: 14px; border-radius: var(--radius-sm); background: var(--ok-s); border: 1px solid rgba(52,211,153,.3); font-family: ui-monospace, Consolas, monospace; font-size: 13px; word-break: break-all; }
.badge-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--pill); font-size: 12px; font-weight: 800; border: 1px solid transparent; white-space: nowrap; }
.badge-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge-status.paid, .badge-status.delivered, .badge-status.active, .badge-status.status-paid, .badge-status.status-delivered, .badge-status.status-active { background: var(--ok-s); color: var(--ok); border-color: rgba(62,196,109,.28); }
.badge-status.awaiting_payment, .badge-status.pending, .badge-status.processing, .badge-status.status-awaiting_payment, .badge-status.status-pending, .badge-status.status-processing { background: var(--warn-s); color: var(--warn); border-color: rgba(240,178,58,.32); }
.badge-status.failed, .badge-status.expired, .badge-status.blocked, .badge-status.refunded, .badge-status.cancelled, .badge-status.status-failed, .badge-status.status-expired, .badge-status.status-blocked, .badge-status.status-refunded, .badge-status.status-cancelled { background: var(--bad-s); color: var(--bad); border-color: rgba(255,90,95,.28); }

/* =========================== Order cards (account) =========================== */
.order-card { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.order-card:hover { border-color: rgba(104,172,61,.35); box-shadow: var(--shadow); }
.order-card .order-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--card-2); }
.order-card .order-card-head:hover { text-decoration: none; }
.order-card-head-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.order-card-id { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.order-card-id i { font-size: 11px; opacity: .5; }
.order-card-date { color: var(--muted); font-size: 12.5px; }
.order-card-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.order-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--card-2); }
.order-card-foot .order-total { margin: 0; }
.order-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.order-item { display: flex; flex-direction: column; gap: 6px; }
.order-item + .order-item { padding-top: 12px; border-top: 1px dashed var(--line); }
.order-item-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-weight: 600; overflow-wrap: anywhere; }
.order-item-qty { color: var(--muted); font-size: 13px; font-weight: 600; }

/* Delivery block — makes it obvious what the buyer receives */
.delivery-block { margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--card-2); }
.delivery-block-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ok); background: var(--ok-s); border-bottom: 1px solid rgba(62,196,109,.22); }
.delivery-block-head i { font-size: 13px; }
.delivery-block-body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.delivery-value { display: block; margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--input); border: 1px solid var(--line); font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.delivery-links { display: flex; flex-direction: column; gap: 8px; }
.delivery-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 11px 16px; border-radius: var(--radius-sm); background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 10px 26px -12px rgba(104,172,61,.7); overflow-wrap: anywhere; transition: transform var(--t), box-shadow var(--t); }
.delivery-link:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 32px -12px rgba(104,172,61,.85); }
.delivery-link i { font-size: 15px; }
.delivery-copy { align-self: flex-start; }
.delivery-hint { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.delivery-hint i { margin-top: 2px; color: var(--brand-1); }
/* Multi-quantity delivery: one card per purchased unit + a small "N items" note. */
.delivery-units-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--brand-1); background: var(--brand-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; }
.delivery-units-note i { font-size: 13px; }
.delivery-unit { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.delivery-unit + .delivery-unit { margin-top: 2px; }
.delivery-unit-head { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.delivery-unit-head::before { content: "#"; color: var(--brand-1); font-weight: 900; }
/* Order pages polish: calmer cards, clearer heads/feet, tidy item separators. */
.order-card { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--card), var(--card-2)); box-shadow: var(--shadow-sm); overflow: hidden; }
.order-list { display: grid; gap: 16px; }
.order-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.order-card-head-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.order-card-id { font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.order-card-date { color: var(--muted); font-size: 12.5px; }
.order-card-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.order-item { display: flex; flex-direction: column; gap: 10px; }
.order-item + .order-item { padding-top: 14px; border-top: 1px dashed var(--line-2); }
.order-item-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 700; }
.order-item-qty { color: var(--muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--card-2); }
.order-total { font-size: 14px; }
.order-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.delivery-pending { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); color: var(--muted); font-size: 13px; background: var(--input); }
@media (max-width: 560px) { .order-card-head, .order-card-body, .order-card-foot { padding-left: 14px; padding-right: 14px; } .order-card-foot { flex-direction: column; align-items: stretch; } .order-card-actions .btn { flex: 1; } }
.delivery-pending { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--warn-s); color: var(--warn); font-size: 13px; font-weight: 600; }

.order-summary-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.order-summary-line strong { color: var(--fg); }

/* Compact recent-order cards (account overview): shorter, denser cards. */
.order-card:has(.order-summary-line) .order-card-head { padding: 10px 16px; }
.order-card:has(.order-summary-line) .order-card-body { gap: 6px; padding: 10px 16px; }
.order-card:has(.order-summary-line) .order-card-foot { padding: 10px 16px; }
.order-card .order-summary-line { min-width: 0; }
.order-card .order-summary-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 600px) {
  .order-card .order-card-head, .order-card-body, .order-card-foot { padding-left: 16px; padding-right: 16px; }
  .order-card-foot { flex-direction: column; align-items: stretch; }
  .order-card-foot .order-total { text-align: center; }
  .order-card-actions { flex-direction: column; }
  .order-card-actions .btn { width: 100%; }
}
.referral-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); margin-bottom: 10px; }
.referral-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-bottom: 20px; }

/* Button loading spinner + toasts */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #ffffff; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast-root { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom,0px) + 20px); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 600; width: min(92vw, 420px); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--card);
  border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 14px; pointer-events: auto; animation: toastIn .3s var(--ease) both; }
.toast.hide { animation: toastOut .25s var(--ease) both; }
.toast.success { border-color: rgba(52,211,153,.45); }
.toast.error { border-color: rgba(251,113,133,.45); }
.toast.info { border-color: rgba(104,172,61,.45); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(14px); } }

/* ------------------------------ Footer ------------------------------ */
.site-footer { margin-top: var(--sp-8); border-top: 1px solid var(--line); background: var(--bg-elev); }
.footer-inner { padding: var(--sp-6) 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.footer-trust { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-nav a { color: var(--muted); font-size: 14px; transition: color var(--t); }
.footer-nav a:hover { color: var(--fg); }
.footer-note { padding-bottom: 8px; font-size: 12px; }
.copyright { color: var(--muted); font-size: 13px; padding-bottom: var(--sp-6); }

/* --------------------------- Accessibility -------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 500; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--brand); color: #ffffff; font-weight: 700; transition: top var(--t); }
.skip-link:focus { top: 12px; }

/* --------------------------- Mobile nav ----------------------------- */
.mobile-nav { display: none; }

/* --------------------------- Animations ----------------------------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
main.container > * { animation: fadeUp .45s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* --------------------------- Responsive ----------------------------- */
@media (min-width: 600px) {
  .account-name { display: inline; }
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-title { font-size: 46px; }
  .hero { padding: var(--sp-8) var(--sp-7); }
  .product-detail { grid-template-columns: 1fr 1.1fr; }
  .account-cards { grid-template-columns: repeat(3, 1fr); }
  .checkout-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; align-items: center; }
}
@media (min-width: 900px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-title { font-size: 54px; }
  .catalog-layout { grid-template-columns: 280px 1fr; align-items: start; }
  .catalog-sidebar { order: 0; }
}
@media (max-width: 720px) {
  /*  ,       */
  .header-inner { height: auto; min-height: 60px; gap: 8px; padding: 10px 0; flex-wrap: wrap; }
  .brand-logo { font-size: 18px; }
  .header-actions { gap: 6px; }
  .search { order: 3; flex: 1 1 100%; max-width: 100%; min-width: 0; height: 42px; padding: 0 14px; margin-top: 2px; }
  .icon-btn { width: 40px; height: 40px; }
  .header-actions .btn { padding: 9px 14px; font-size: 13px; }
  .balance { padding: 6px 10px; font-size: 12px; }

  .mobile-nav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    background: var(--glass); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 24px -12px rgba(0,0,0,.5); }
  .mnav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 8px; font-size: 11px; font-weight: 600; color: var(--muted); transition: color var(--t); }
  .mnav-item.active { color: var(--brand-1); }
  .mnav-icon { font-size: 20px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------- Final cart / checkout responsive overrides ---------------- */
.cart-empty { padding:60px 20px; text-align:center; }
.cart-empty-icon { margin-bottom:16px; font-size:64px; }
.cart-empty-title { margin-bottom:10px; }
.cart-empty-text { margin-bottom:22px; }
.cart-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:24px; align-items:start; }
.cart-lines,.variation-info { min-width:0; }
.cart-line { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:18px; align-items:center; flex-wrap:nowrap; }
.cart-line .variation-info { flex:1; }
.cart-line-qty { display:flex; flex-direction:column; gap:6px; align-items:center; }
.cart-line-qty .filter-label { margin:0; }
.cart-line .qty-input { width:82px; padding:10px; border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--input); text-align:center; }
.cart-line .cart-qty-stepper { width:134px; grid-template-columns:38px 58px 38px; }
.cart-line .cart-qty-stepper .qty-input { width:58px; height:100%; padding:0; border-top:0; border-bottom:0; border-radius:0; }
.cart-line-total { min-width:120px; text-align:right; }
.cart-line-total .product-price { justify-content:flex-end; }
.cart-update-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.cart-summary { position:sticky; top:120px; }
.cart-summary-row,.cart-summary-total { display:flex; justify-content:space-between; gap:16px; }
.cart-summary-row { margin-bottom:8px; }
.cart-summary-discount { color:var(--ok); }
.cart-free-note { display:block; margin-top:4px; color:var(--ok); font-size:11px; font-weight:700; white-space:nowrap; }
.cart-summary-total { margin:12px 0 18px; padding-top:12px; border-top:1px solid var(--line); font-size:20px; font-weight:800; }
.cart-clear-form,.checkout-topup-link { margin-top:10px; }
.checkout-method-copy { margin:6px 0 12px; }
.topup-card { margin-top:0; max-width:none; width:100%; margin-left:0; margin-right:0; }
.topup-copy { margin-bottom:16px; }
.checkout-grid,.checkout-summary,.checkout-methods,.order-card,.pay-option { min-width:0; }
.order-item-title { overflow-wrap:anywhere; }

@media (max-width: 899px) {
  .cart-layout { grid-template-columns:1fr; }
  .cart-summary { position:static; }
}

@media (max-width: 599px) {
  main.container { padding-top:20px; padding-bottom:40px; }
  .section { margin-top:28px; }
  .section-title { margin-bottom:18px; font-size:23px; }
  .steps { overflow-x:auto; justify-content:flex-start; gap:8px; padding-bottom:6px; scrollbar-width:none; }
  .steps::-webkit-scrollbar { display:none; }
  .step { flex:0 0 auto; white-space:nowrap; }
  .cart-line { grid-template-columns:minmax(0,1fr) auto; gap:14px 10px; align-items:start; }
  .cart-line .variation-info { grid-column:1 / -1; }
  .cart-line-qty { align-items:flex-start; }
  .cart-line-total { min-width:0; align-self:center; }
  .cart-line-actions { grid-column:2; grid-row:2; align-self:end; justify-self:end; transform:translateY(48px); }
  .cart-update-actions .btn { width:100%; }
  .cart-summary { padding:18px; }
  .checkout-grid { grid-template-columns:1fr; gap:16px; }
  .checkout-expiry { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; }
  .pay-option-head { align-items:flex-start; gap:10px; }
  .pay-option-head .hero-stat { flex:none; }
  .topup-card { padding:18px; }
  .amount-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .amount-chip { width:100%; min-width:0; }
}

@media (max-width: 380px) {
  .cart-empty { padding:42px 14px; }
  .cart-empty-icon { font-size:52px; }
  .cart-line { display:flex; flex-direction:column; align-items:stretch; }
  .cart-line-qty { align-items:stretch; }
  .cart-line .qty-input { width:100%; }
  .cart-line-total { text-align:left; }
  .cart-line-total .product-price { justify-content:flex-start; }
  .cart-line-actions { align-self:flex-end; transform:none; }
  .amount-presets { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ===== Urgent hero, mobile filters and cart usability fixes ===== */
.home-hero.home-hero-v2 { margin-top:8px; padding-top:8px; }
.home-hero.home-hero-v2 .hero-content { align-self:start; }
.home-hero.home-hero-v2 .hero-eyebrow { margin-top:0; }
.cart-remove-btn { border-color:rgba(255,90,95,.35); color:var(--bad); background:var(--bad-s); }
.cart-remove-btn:hover,.cart-remove-btn:focus-visible { border-color:var(--bad)!important; color:var(--bad)!important; background:var(--bad-s)!important; }
@media (max-width:760px) {
  .home-hero.home-hero-v2 { margin-top:4px; padding-top:6px; }
  /* Bottom mobile-nav is fixed at bottom:0 with height ~66px (+ safe area).
     Reserve that space at the bottom of the scrollable filter card and lift the
     sticky Apply/Reset footer above the nav so its buttons are never covered. */
  .catalog-listing-page .catalog-sidebar { overflow:hidden; }
  /* The card is the single scroll container (height = viewport). Its bottom
     padding reserves room for the FIXED action bar + the bottom mobile-nav so
     the last filters are never hidden behind them. */
  .catalog-listing-page .catalog-sidebar .filter-card { display:flex; flex-direction:column; height:100dvh; min-height:0; padding:12px 12px calc(132px + env(safe-area-inset-bottom,0px)); overflow-y:auto; }
  /* Pin Apply/Reset to the viewport (NOT sticky) so they can't drift with the
     page/sidebar scroll. Anchored to the sidebar's left edge and width, sitting
     just above the bottom mobile-nav (~66px tall). */
  .catalog-listing-page .catalog-sidebar .filter-actions {
    position:fixed;
    left:0;
    bottom:calc(66px + env(safe-area-inset-bottom,0px));
    width:min(92vw,340px);
    z-index:1003;
    margin:0;
    padding:10px 12px;
    background:var(--bg-elev);
    border-top:1px solid var(--line);
    box-shadow:0 -12px 24px rgba(0,0,0,.22);
  }
  .catalog-listing-page .catalog-sidebar .filter-actions .btn { min-height:44px; }
}
@media (max-width:599px) {
  .cart-line-actions { grid-column:1 / -1; grid-row:auto; justify-self:stretch; align-self:stretch; transform:none; }
  .cart-remove-btn { width:100%; min-height:42px; }
}

/* ---------------- Topup layout ---------------- */
.topup-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:20px; align-items:start; }
.topup-benefits { padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,var(--card),var(--card-2)); }
.topup-benefits h2 { margin-bottom:18px; font-size:21px; }
.topup-benefits ul { display:grid; gap:16px; list-style:none; }
.topup-benefits li { display:grid; grid-template-columns:42px minmax(0,1fr); gap:12px; align-items:start; }
.topup-benefits li > i { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--brand-soft); color:var(--brand-1); }
.topup-benefits b,.topup-benefits small { display:block; }
.topup-benefits small { margin-top:3px; color:var(--muted); line-height:1.45; }
.amount-presets { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0 0 18px; }
.amount-chip { min-height:42px; border:1px solid var(--line-2); border-radius:10px; background:var(--card-2); cursor:pointer; font-weight:700; }
.amount-chip:hover,.amount-chip.active { border-color:var(--brand-1); background:var(--brand-soft); color:var(--brand-1); }
@media (max-width:760px) {
  .topup-layout { grid-template-columns:1fr; }
  .topup-benefits { padding:18px; }
  .amount-presets { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---------------- Final scoped checkout / topup overrides ---------------- */
.checkout-page { width:100%; max-width:none; }
.checkout-page > * { width:100%; max-width:none; }
.checkout-page .checkout-grid { width:100%; max-width:none; }

/* Checkout: stack payment method cards with a clear gap between them */
.checkout-methods { display: flex; flex-direction: column; gap: var(--sp-4, 20px); }

/* Checkout order summary: the .order-card uses padding:0 (shared with the
   account order list), so add inner padding here so item text and totals
   aren't flush against the card edges. */
.checkout-summary .order-card .order-item { padding: 16px 20px; }
.checkout-summary .order-card .order-total { padding: 0 20px 16px; margin-top: 0; }
.checkout-page .checkout-expiry { display:flex; align-items:center; gap:9px; }
.checkout-page .checkout-expiry .expiry-time { margin-left:auto; font-variant-numeric:tabular-nums; }
.checkout-page .checkout-expiry i { flex:none; }
.checkout-page .checkout-expiry.expired .expiry-time { margin-left:0; }
.checkout-page .checkout-expiry.expired span { display:none; }
.checkout-page .checkout-steps,
.topup-page .checkout-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; margin:0 0 22px; padding:0; list-style:none; }
.checkout-page .checkout-step,
.topup-page .checkout-step { display:flex; align-items:center; justify-content:center; gap:9px; min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card-2); color:var(--muted); font-weight:700; text-align:center; }
.checkout-page .checkout-step-number,
.topup-page .checkout-step-number { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:var(--card-3); color:var(--fg); }
.checkout-page .checkout-step.is-current,
.topup-page .checkout-step.is-current { border-color:var(--brand-1); background:var(--brand-soft); color:var(--fg); }
.checkout-page .checkout-step.is-current .checkout-step-number,
.topup-page .checkout-step.is-current .checkout-step-number { background:var(--brand); color:#fff; }
.checkout-page .checkout-step.is-complete { color:var(--ok); }
.checkout-page .checkout-step.is-complete .checkout-step-number { background:var(--ok-s); color:var(--ok); }
@media (max-width:599px) {
  .checkout-page .checkout-steps,
  .topup-page .checkout-steps { display:flex; overflow-x:auto; gap:8px; padding-bottom:5px; scrollbar-width:none; }
  .checkout-page .checkout-steps::-webkit-scrollbar,
  .topup-page .checkout-steps::-webkit-scrollbar { display:none; }
  .checkout-page .checkout-step,
  .topup-page .checkout-step { flex:0 0 auto; white-space:nowrap; }
  .checkout-page .checkout-expiry .expiry-time { margin-left:0; }
}

/* ===== Product purchase + topup mobile-first rebuild ===== */
.product-page,.product-detail,.purchase-panel,.variant-picker,.variations,.variation,.variation-info,.variation-buy-form,.product-fields,.product-field-group { min-width:0; max-width:100%; }
.variant-picker { margin-top:18px; }
.variant-picker-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.variant-picker-kicker { display:block; margin-bottom:3px; color:var(--brand-1); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.variant-picker .variations-title { margin:0; font-size:21px; }
.product-tech-meta { flex:none; padding:5px 8px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--card-2); font-size:11px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.variation { position:relative; overflow:hidden; border-color:var(--line-2); }
.variation::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--brand); }
.variation.sold-out::before { background:var(--bad); }
.variation-name,.variation-warning,.product-field-group label,.field-help,.field-error { overflow-wrap:anywhere; word-break:break-word; }
.variation-name { padding-right:4px; font-size:16px; line-height:1.35; }
.variation-stock { display:inline-flex; align-items:center; gap:6px; width:max-content; max-width:100%; margin-top:6px; padding:5px 8px; border-radius:8px; font-size:12px; font-weight:750; }
.variation-stock.is-available { color:var(--ok); background:var(--ok-s); }
.variation-stock.is-low { color:var(--warn); background:var(--warn-s); }
.variation-stock.is-empty { color:var(--bad); background:var(--bad-s); }
.product-fields { display:grid; grid-column:1 / -1; flex:0 0 100%; width:100%; min-width:0; max-width:100%; overflow:hidden; }
.product-field-group { display:grid; grid-template-columns:minmax(0,1fr); grid-column:1 / -1; width:100%; min-width:0; max-width:100%; }
.product-field-group label,.product-field-group input,.product-field-group select,.product-field-group textarea,.product-field-group small { display:block; grid-column:1 / -1; width:100%; min-width:0; max-width:100%; }
.product-field-group input,.product-field-group select,.product-field-group textarea { box-sizing:border-box; }
.product-field-group select { min-height:46px; padding:11px 36px 11px 12px; border:1px solid var(--line-2); border-radius:10px; background:var(--input); }
.topup-amount-field { display:grid; gap:7px; min-width:0; }
.topup-input-wrap { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; min-width:0; overflow:hidden; border:1px solid var(--line-2); border-radius:12px; background:var(--input); }
.topup-input-wrap:focus-within { border-color:var(--brand-1); box-shadow:var(--ring); }
.topup-input-wrap > span { padding-left:14px; color:var(--brand-1); font-size:22px; font-weight:800; }
.topup-input-wrap input { width:100%; min-width:0; min-height:54px; padding:10px 14px 10px 8px; border:0; outline:0; background:transparent; font-size:22px; font-weight:800; }
.topup-total { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--card-2); }
.topup-total span { color:var(--muted); font-weight:700; }
.topup-total strong { color:var(--brand-1); font-size:22px; }
.amount-chip { transition:transform .12s ease,background .12s ease,border-color .12s ease; }
.amount-chip:active,.amount-chip.active { transform:scale(.96); }
@media (max-width:390px) {
  .product-page .product-detail-info { padding:12px; }
  .variant-picker-head { align-items:flex-start; flex-direction:column; gap:7px; }
  .product-tech-meta { align-self:flex-start; }
  .variation { padding:12px; }
  .product-fields { padding:12px; }
  .purchase-price-card,.purchase-tier-card { padding:12px; }
  .amount-presets { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:320px) {
  .container { padding-left:10px; padding-right:10px; }
  .product-page .product-detail-info { padding:10px; }
  .variation { padding:10px; }
  .purchase-total { padding:12px 10px; }
  .purchase-total strong { font-size:20px; }
}

/* Final purchase layout: the earlier mobile form rule used a two-column grid. */
.purchase-stack {
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.purchase-stack > .purchase-price-card,
.purchase-stack > .product-fields,
.purchase-stack > .purchase-tier-card,
.purchase-stack > .purchase-quantity,
.purchase-stack > .purchase-total,
.purchase-stack > .purchase-cta {
  flex:none;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow-wrap:anywhere;
}

@media (max-width:768px) {
  .product-page .purchase-panel,
  .product-page .variant-picker,
  .product-page .variations,
  .product-page .variation,
  .product-page .variation-buy-form,
  .product-page .purchase-stack {
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    overflow-wrap:anywhere;
  }
  .product-page .variation-buy-form {
    grid-template-columns:none;
    grid-auto-flow:row;
    flex-wrap:nowrap;
  }
  .product-page .purchase-stack > .purchase-price-card,
  .product-page .purchase-stack > .product-fields,
  .product-page .purchase-stack > .purchase-tier-card,
  .product-page .purchase-stack > .purchase-quantity,
  .product-page .purchase-stack > .purchase-total,
  .product-page .purchase-stack > .purchase-cta {
    display:flex;
    flex-direction:column;
    flex:none;
    width:100%;
    max-width:100%;
    min-width:0;
    grid-column:auto;
    box-sizing:border-box;
    overflow-wrap:anywhere;
    white-space:normal;
  }
  .product-page .purchase-stack > .purchase-total {
    flex-direction:row;
  }
  .product-page .purchase-stack .qty-stepper,
  .product-page .purchase-stack .variation-cart-btn {
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
}

/* Floating Telegram support button */
.telegram-support-fab {
  position: fixed !important;
  right: 18px !important;
  top: 50% !important;
  z-index: 99999 !important;
  display: grid !important;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  color: #fff !important;
  background: #4f8a2c;
  box-shadow: 0 10px 28px rgba(34, 158, 217, .42);
  font-size: 28px;
  text-decoration: none;
  transform: translateY(-50%);
  transition: transform .25s, box-shadow .25s, background-color .25s;
}
.telegram-support-fab:hover {
  background: #68ac3d;
  box-shadow: 0 14px 34px rgba(34, 158, 217, .58);
  transform: translateY(-50%) scale(1.08);
}
.telegram-support-fab:focus-visible {
  outline: 3px solid rgba(104,172,61,.35);
}
@media (max-width: 640px) {
  .telegram-support-fab {
    right: 12px !important;
    width: 48px;
    height: 48px;
    font-size: 25px;
  }
}

/* Product variation accordion tabs */
.product-page .variation {
  padding: 0;
  gap: 0;
  text-align: left;
}
.variation-tab-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  color: var(--fg);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.variation-tab-button .variation-name {
  flex: 1;
  padding: 0;
  text-align: left;
}
.variation-tab-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--brand-1);
  white-space: nowrap;
}
.variation-tab-meta i {
  color: var(--muted);
  transition: transform .25s ease;
}
.variation.is-open {
  border-color: rgba(104,172,61,.55);
  box-shadow: 0 12px 32px -22px rgba(104,172,61,.8);
}
.variation.is-open .variation-tab-button {
  background: var(--brand-soft);
}
.variation.is-open .variation-tab-meta i {
  transform: rotate(180deg);
}
.variation-tab-panel {
  width: 100%;
  padding: 0 18px 18px;
  border-top: 1px solid var(--line);
}
.variation-tab-panel[hidden] {
  display: none !important;
}
.variation-tab-panel > .variation-info {
  padding-top: 12px;
  text-align: left;
}
@media (max-width: 640px) {
  .variation-tab-button { padding: 14px; }
  .variation-tab-panel { padding: 0 14px 14px; }
}

/* Variation selector buttons and restored full-width card */
.variation-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  padding: 14px 0 16px;
}
.variation-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 15px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  color: var(--fg-soft);
  background: var(--card-2);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, transform .2s, box-shadow .2s;
}
.variation-selector-btn strong {
  color: var(--brand-1);
  font-size: 13px;
}
.variation-selector-btn:hover {
  border-color: var(--brand-1);
  transform: translateY(-1px);
}
.variation-selector-btn.is-active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg,#68ac3d,#4f8a2c);
  box-shadow: 0 10px 24px -14px rgba(79,138,44,.9);
}
.variation-selector-btn.is-active strong { color: #fff; }
.product-page .variations {
  display: block;
  width: 100%;
  max-width: none;
  padding: 16px;
  margin: 0;
  box-sizing: border-box;
  text-align: left;
}
.product-page .variation[hidden] { display: none !important; }
.product-page .variation-tab-panel {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
.product-page .variation-tab-panel > .variation-info {
  padding: 0;
}
.product-page .variation-buy-form,
.product-page .purchase-stack {
  width: 100%;
  max-width: none;
  margin: 0;
}
@media (max-width: 640px) {
  .variation-selector {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .variation-selector-btn {
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
  }
  .product-page .variation { padding: 14px; }
}

/* =====================================================================
   PRODUCT PAGE  v4 clean rebuild (authoritative, self-contained)
   All new markup uses .pd-* classes. This block is the single source of
   truth for the product page layout & variant switching. Mobile-first.
   ===================================================================== */
.product-page { margin-top: 8px; }
.product-page * { min-width: 0; box-sizing: border-box; }

.product-page .breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px; color:var(--muted); font-size:13px; }
.product-page .breadcrumbs a:hover { color:var(--brand-1); }
.product-page .breadcrumbs-current { color:var(--fg-soft); }

/* ---- Layout grid ---- */
.pd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
@media (min-width: 900px) {
  .pd { grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr); gap: 32px; }
  .pd-gallery { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* ---- Gallery ---- */
.pd-media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  display: grid;
  place-items: center;
}
.pd-media img { width: 100%; height: 100%; object-fit: contain; }
.pd-media-placeholder { font-size: 64px; color: var(--muted); opacity: .5; }
.pd-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pd-thumb {
  width: 66px; height: 66px; padding: 3px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--card); cursor: pointer; transition: var(--t);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.pd-thumb:hover { border-color: var(--brand-2); }
.pd-thumb.is-active { border-color: var(--brand-1); box-shadow: var(--ring); }
@media (max-width: 899px) {
  .pd-media { aspect-ratio: 1 / 1; border-radius: 14px; }
}

/* ---- Purchase panel ---- */
.pd-panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 899px) { .pd-panel { padding: 18px; border-radius: 16px; } }
@media (max-width: 400px) { .pd-panel { padding: 14px; } }

.pd-head { margin-bottom: 16px; }
.pd-title {
  margin: 0 0 12px;
  font-size: clamp(24px, 4.5vw, 38px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.pd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.pd-trust { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-trust-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--card-2);
  font-size: 12.5px; font-weight: 650; color: var(--fg-soft);
}
.pd-trust-item i { color: var(--brand-1); }
.pd-trust-item--instant { color: var(--ok); border-color: var(--ok-s); background: var(--ok-s); }
.pd-trust-item--instant i { color: var(--ok); }

.pd-description {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--card-2);
  color: var(--fg-soft);
  font-size: 14.5px; line-height: 1.6;
  overflow-wrap: anywhere;
}

.pd-empty, .pd-soldout {
  display: flex; align-items: center; gap: 10px;
  padding: 16px; margin-top: 12px;
  border-radius: 12px;
  background: var(--warn-s); color: var(--warn);
  font-size: 14px; font-weight: 600;
}

/* ---- Variant chooser (buttons) ---- */
.pd-variants { margin: 20px 0 18px; }
.pd-variants-label {
  display: block; margin-bottom: 10px;
  font-size: 13px; font-weight: 750; color: var(--fg-soft);
}
.pd-variants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.pd-variant-btn {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 15px;
  border: 1.5px solid var(--line-2);
  border-radius: 13px;
  background: var(--card-2);
  color: var(--fg);
  text-align: left; cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
}
.pd-variant-btn:hover { border-color: var(--brand-2); transform: translateY(-1px); }
.pd-variant-btn-name { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.pd-variant-btn-price { font-size: 15px; font-weight: 800; color: var(--brand-1); }
.pd-variant-btn.is-active {
  border-color: transparent;
  background: var(--brand);
  color: #fff;
  box-shadow: var(--glow);
}
.pd-variant-btn.is-active .pd-variant-btn-price { color: #fff; }
.pd-variant-btn.is-soldout { opacity: .6; }
.pd-variant-btn-tag { font-size: 11px; font-weight: 700; color: var(--bad); }
.pd-variant-btn.is-active .pd-variant-btn-tag { color: #ffe0e0; }

/* ---- Variant panels ---- */
.pd-panels { position: relative; }
.pd-variant-panel { display: grid; gap: 14px; }
.pd-variant-panel[hidden] { display: none !important; }
.pd-variant-panel:not([hidden]) { animation: pd-fade .22s var(--ease); }
@keyframes pd-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pd-panel-name { font-size: 16px; font-weight: 750; color: var(--fg-soft); }

/* Price card */
.pd-price-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(104,172,61,.35);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-soft), var(--card));
}
.pd-price-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.pd-price-value { font-size: 32px; font-weight: 850; line-height: 1; color: var(--brand-1); }
.pd-price-old { color: var(--muted); font-size: 16px; text-decoration: line-through; }
.pd-price-badge {
  padding: 3px 9px; border-radius: var(--pill);
  background: var(--bad); color: #fff; font-size: 12px; font-weight: 800;
}
.pd-stock {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--pill);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.pd-stock.is-available { color: var(--ok); background: var(--ok-s); }
.pd-stock.is-low { color: var(--warn); background: var(--warn-s); }
.pd-stock.is-empty { color: var(--bad); background: var(--bad-s); }

/* Notices */
.pd-notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--card-2); color: var(--fg-soft);
  font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere;
}
.pd-notice i { margin-top: 2px; color: var(--brand-1); }
.pd-notice--warn { background: var(--warn-s); color: var(--warn); }
.pd-notice--warn i { color: var(--warn); }

/* Volume tiers */
.pd-tiers { padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.pd-tiers-title { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 13px; font-weight: 750; }
.pd-tiers-title i { color: var(--brand-1); }
.pd-tiers-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-tiers-list span { padding: 6px 10px; border-radius: 9px; background: var(--ok-s); color: var(--fg-soft); font-size: 12px; }
.pd-tiers-list b { color: var(--ok); }

/* Custom fields */
.pd-fields { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 4px; margin: 0; background: var(--card-2); }
.pd-fields legend { padding: 0 8px; font-size: 13px; font-weight: 750; color: var(--fg-soft); }
.pd-fields .form-group { margin-bottom: 12px; }
.pd-fields label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.pd-fields label .req { color: var(--bad); }
.pd-fields input, .pd-fields textarea { width: 100%; }
.pd-fields .field-help { display: block; margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.pd-fields .field-error { display: block; color: var(--bad); font-size: 12px; }
.pd-fields .form-group.invalid input, .pd-fields .form-group.invalid textarea { border-color: var(--bad); }

/* Quantity + total */
.pd-buy { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
@media (max-width: 480px) { .pd-buy { grid-template-columns: 1fr; } }
.pd-qty { display: grid; gap: 7px; }
.pd-qty > label { font-size: 13px; font-weight: 700; }
.pd-total {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  border: 1px dashed var(--line-2); background: var(--card-2);
}
.pd-total span { color: var(--muted); font-weight: 700; font-size: 13px; }
.pd-total strong { font-size: 24px; font-weight: 850; color: var(--fg); }

/* CTA */
.pd-cta { display: grid; gap: 8px; }
.pd-cart-btn { width: 100%; min-height: 52px; font-size: 15.5px; font-weight: 750; }
.pd-cta small { text-align: center; color: var(--muted); font-size: 11.5px; }

.pd-related { margin-top: 40px; }

/* =====================================================================
   HEADER  fix horizontal scroll caused by support button on mobile
   ===================================================================== */
/* Keep the header from clipping the search suggestions dropdown while still
   preventing the horizontal scroll the support button used to cause. We clip
   the inner row horizontally (overflow-x) but let content overflow vertically
   (overflow-y: visible) so the absolutely-positioned dropdown can drop below. */
.site-header { overflow: visible; }
@media (max-width: 760px) {
  .header-support span { display: none; }
  .header-support {
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 0; border-radius: var(--pill); background: var(--brand-soft); border-color: rgba(104,172,61,.3); color: var(--brand-1);
  }
  .header-main-row { overflow: visible; max-width: 100%; }
}
@media (max-width: 480px) {
  .header-support { display: inline-flex; }
}

/* =====================================================================
   PDP2 u2014 Product Detail Page v2 (full redesign, mobile-first)
   ===================================================================== */

/* Layout — the parent <main class="container"> already provides the max-width
   and the side padding, so the product page must NOT add its own. Zero padding
   on every side + no inner max-width lets the page stretch to the sides exactly
   like the catalog page. Bottom breathing room is handled with margin. */
.pdp2 { width: 100%; max-width: none; margin: 0 auto var(--sp-8); padding: 0; }

/* Breadcrumbs */
.pdp2-bc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: var(--sp-4) 0; font-size: 13px; color: var(--muted); }
.pdp2-bc a { color: var(--muted); transition: color var(--t); }
.pdp2-bc a:hover { color: var(--brand-1); }
.pdp2-bc-sep { font-size: 10px; opacity: .5; }
.pdp2-bc span { color: var(--fg); font-weight: 600; }
/* Breadcrumbs adapt to screen: on mobile stay on one line (no wrap), scroll if needed, truncate current title. */
@media (max-width: 600px) {
  .pdp2-bc { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding: var(--sp-3) 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pdp2-bc::-webkit-scrollbar { display: none; }
  .pdp2-bc a, .pdp2-bc span, .pdp2-bc i { flex: 0 0 auto; }
  .pdp2-bc span { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; }
}

/* Main layout: 2-col on desktop, 1-col on mobile */
.pdp2-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-6); align-items: start; margin-top: var(--sp-4); }
@media (max-width: 900px) { .pdp2-layout { grid-template-columns: 1fr; gap: var(--sp-4); } }
/* On phones the image should be small — buy actions matter more than the picture. */
@media (max-width: 600px) {
  .pdp2-img-wrap, .pdp2-img-placeholder { max-width: 190px; aspect-ratio: 1/1; }
  .pdp2-img-placeholder { font-size: 40px; }
  .pdp2-thumb { width: 46px; height: 46px; }
}

/* Gallery */
.pdp2-gallery { display: flex; flex-direction: column; gap: var(--sp-3); }
.pdp2-img-wrap { border-radius: var(--radius); overflow: hidden; background: var(--card-2); aspect-ratio: 4/3; max-width: 340px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: center; }
.pdp2-main-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.pdp2-img-wrap:hover .pdp2-main-img { transform: scale(1.03); }
.pdp2-img-placeholder { border-radius: var(--radius); background: var(--card-2); aspect-ratio: 4/3; max-width: 340px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 52px; color: var(--muted); }
.pdp2-thumbs { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.pdp2-thumb { width: 54px; height: 54px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; background: var(--card-2); cursor: pointer; transition: border-color var(--t), transform var(--t); padding: 0; }
.pdp2-thumb:hover { transform: translateY(-2px); border-color: var(--brand-1); }
.pdp2-thumb.is-active { border-color: var(--brand-1); box-shadow: 0 0 0 3px var(--brand-soft); }
.pdp2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Trust badges */
.pdp2-trust { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.pdp2-trust--mobile { display: none; }
.pdp2-trust-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--card-2); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--fg-soft); }
.pdp2-trust-item i { font-size: 15px; color: var(--brand-1); width: 18px; text-align: center; }
@media (max-width: 900px) {
  .pdp2-trust:not(.pdp2-trust--mobile) { display: none; }
  .pdp2-trust--mobile { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
  .pdp2-trust--mobile .pdp2-trust-item { flex: 1 1 calc(50% - var(--sp-2)); min-width: 130px; font-size: 12px; padding: var(--sp-2) var(--sp-3); }
}
@media (max-width: 480px) {
  .pdp2-trust--mobile .pdp2-trust-item { flex: 1 1 100%; }
}
/* Title block */
.pdp2-title-block { margin-bottom: var(--sp-4); }
.pdp2-title { font-family: var(--font-display); font-size: clamp(22px, 4vw, 32px); font-weight: 800; line-height: 1.2; color: var(--fg); margin: 0 0 var(--sp-3); }
.pdp2-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pdp2-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--pill); background: var(--brand-soft); color: var(--brand-1); font-size: 12px; font-weight: 700; border: 1px solid rgba(104,172,61,.25); }

/* Description */
.pdp2-desc { font-size: 14px; line-height: 1.6; color: var(--fg-soft); margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--card-2); border-radius: var(--radius); border: 1px solid var(--line); }

/* Empty state */
.pdp2-empty { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--radius); background: var(--card-2); border: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.pdp2-empty i { font-size: 20px; color: var(--brand-1); }

/* Variant selector */
.pdp2-variants { margin-bottom: var(--sp-4); }
.pdp2-variants-label { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 var(--sp-3); }
.pdp2-variants-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); }
.pdp2-var-btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 2px solid var(--line); background: var(--card-2); cursor: pointer; text-align: left; transition: border-color var(--t), background var(--t), box-shadow var(--t), transform var(--t); }
.pdp2-var-btn:hover { border-color: var(--brand-1); background: var(--brand-soft); transform: translateY(-2px); }
.pdp2-var-btn.is-active { border-color: var(--brand-1); background: var(--brand-soft); box-shadow: var(--glow); }
.pdp2-var-btn.is-soldout { opacity: .5; cursor: not-allowed; }
.pdp2-var-btn.is-soldout:hover { transform: none; border-color: var(--line); background: var(--card-2); }
.pdp2-var-name { font-size: 14px; font-weight: 700; color: var(--fg); line-height: 1.3; }
.pdp2-var-price { font-size: 13px; font-weight: 800; color: var(--brand-1); }
.pdp2-var-price s { color: var(--muted); font-weight: 500; font-size: 11px; margin-left: 4px; }
.pdp2-var-badge { position: absolute; top: -8px; right: 8px; padding: 2px 7px; border-radius: var(--pill); font-size: 10px; font-weight: 800; }
.pdp2-var-badge--sale { background: var(--ok); color: #fff; }
.pdp2-var-badge--out { background: var(--bad); color: #fff; }

/* Panel */
.pdp2-panel { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Only the selected variation is shown. [hidden] must beat the display:flex above. */
.pdp2-panel[hidden] { display: none !important; }

/* Price row */
.pdp2-price-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); background: var(--card-2); border: 1px solid var(--line); }
.pdp2-price-main { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.pdp2-price-now { font-size: clamp(26px, 5vw, 36px); font-weight: 850; color: var(--fg); font-family: var(--font-display); }
.pdp2-price-old { font-size: 16px; color: var(--muted); text-decoration: line-through; font-weight: 500; }
.pdp2-price-disc { padding: 3px 9px; border-radius: var(--pill); background: var(--ok-s); color: var(--ok); font-size: 13px; font-weight: 800; }
.pdp2-stock { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--pill); font-size: 13px; font-weight: 700; }
.pdp2-stock--ok { background: var(--ok-s); color: var(--ok); }
.pdp2-stock--low { background: var(--warn-s); color: var(--warn); }
.pdp2-stock--out { background: var(--bad-s); color: var(--bad); }

/* Notices */
.pdp2-notice { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5; }
.pdp2-notice i { margin-top: 2px; flex-shrink: 0; font-size: 15px; }
.pdp2-notice--warn { background: var(--warn-s); color: var(--warn); border: 1px solid rgba(240,178,58,.3); }
.pdp2-notice--info { background: var(--brand-soft); color: var(--brand-1); border: 1px solid rgba(104,172,61,.25); }

/* Volume tiers */
.pdp2-tiers { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--card-2); border: 1px solid var(--line); }
.pdp2-tiers-head { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; font-weight: 700; color: var(--fg); margin-bottom: var(--sp-2); }
.pdp2-tiers-head i { color: var(--brand-1); }
.pdp2-tiers-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pdp2-tier-chip { padding: 4px 10px; border-radius: var(--pill); background: var(--brand-soft); color: var(--brand-1); font-size: 12px; border: 1px solid rgba(104,172,61,.2); }
.pdp2-tier-chip b { font-weight: 800; }

/* Custom fields */
.pdp2-fields { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); background: var(--card-2); }
.pdp2-fields legend { font-size: 13px; font-weight: 700; color: var(--fg); padding: 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.pdp2-fields legend i { color: var(--brand-1); }
.pdp2-fields .form-group { margin-top: var(--sp-3); }
.pdp2-fields label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.pdp2-fields label .req { color: var(--bad); }
.pdp2-fields input, .pdp2-fields textarea { width: 100%; }
.pdp2-fields .field-error { display: block; color: var(--bad); font-size: 12px; }
.pdp2-fields .form-group.invalid input,
.pdp2-fields .form-group.invalid textarea { border-color: var(--bad); }

/* Buy row: qty (left) + a COMPACT total box (right) — never stretched.
   Desktop: qty pinned left, a tidy right-aligned total pill.
   Mobile: SAME single line (qty left, total right), not stacked. */
.pdp2-buy { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.pdp2-qty { display: grid; gap: 7px; flex: 0 0 auto; }
.pdp2-qty-label { font-size: 13px; font-weight: 700; color: var(--fg-soft); }
/* Compact, right-aligned total. inline-flex so it hugs its content instead of
   filling the row. Label on top, amount below, right aligned. */
.pdp2-total { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex: 0 0 auto; padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--card-2); text-align: right; }
.pdp2-total-labels { display: flex; align-items: center; gap: 8px; }
.pdp2-total span { color: var(--muted); font-weight: 700; font-size: 12px; }
.pdp2-total-amount { display: flex; align-items: baseline; gap: 8px; }
.pdp2-total strong { font-size: 22px; font-weight: 850; color: var(--fg); line-height: 1.1; }

/* CTA */
.pdp2-cta { display: grid; gap: var(--sp-2); }
.pdp2-cart-btn { width: 100%; min-height: 54px; font-size: 16px; font-weight: 750; letter-spacing: .01em; }
.pdp2-cta-hint { text-align: center; color: var(--muted); font-size: 12px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pdp2-cta-hint i { color: var(--ok); }

/* ---- PDP2 buy area: compact, tidy stepper (fixes stretched +/- on mobile) ---- */
.pdp2-buy .qty-stepper { width: 132px; grid-template-columns: 44px 1fr 44px; height: 48px; }
.pdp2-buy .qty-stepper .qty-stepper-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; }
.pdp2-buy .qty-stepper .qty-input { width: 100%; text-align: center; }
/* Mobile: qty and total stay on the SAME line — qty pinned left, compact total
   pinned right. Nothing stretches full-width. */
@media (max-width: 600px) {
  .pdp2-buy { flex-wrap: nowrap; align-items: flex-end; gap: var(--sp-3); }
  .pdp2-qty { gap: 6px; }
  .pdp2-buy .qty-stepper { width: 132px; max-width: 132px; grid-template-columns: 44px 1fr 44px; height: 48px; }
  .pdp2-total { flex: 0 0 auto; padding: 6px 12px; }
  .pdp2-total strong { font-size: 20px; }
  .pdp2-cart-btn { min-height: 52px; }
  .pdp2-panel { gap: var(--sp-3); }
  .pdp2-price-row { padding: var(--sp-3) var(--sp-4); }
  .pdp2-fields { padding: var(--sp-3) var(--sp-4); }
}
/* Very narrow phones: shrink the stepper a touch so both fit comfortably. */
@media (max-width: 360px) {
  .pdp2-buy .qty-stepper { width: 118px; max-width: 118px; grid-template-columns: 38px 1fr 38px; }
  .pdp2-total strong { font-size: 18px; }
}

/* Soldout state */
.pdp2-soldout { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--radius); background: var(--bad-s); border: 1px solid rgba(255,90,95,.25); }
.pdp2-soldout i { font-size: 28px; color: var(--bad); flex-shrink: 0; }
.pdp2-soldout strong { display: block; font-size: 15px; color: var(--fg); margin-bottom: 4px; }
.pdp2-soldout p { margin: 0; font-size: 13px; color: var(--muted); }

/* =====================================================================
   PDP2 REDESIGN v2 — professional, compact description + order block
   (placed last so it wins the cascade over earlier PDP2 rules)
   ===================================================================== */

/* Description — clean card with a subtle "Description" label */
.pdp2-desc {
  position: relative;
  font-size: 14px; line-height: 1.65; color: var(--fg-soft);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pdp2-desc::before {
  content: "Description";
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}

/* Price row — the top of the buy box: soft brand tint, connected below */
.pdp2-panel .pdp2-price-row {
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(135deg, var(--brand-soft), transparent 70%), var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-bottom: 1px solid var(--line);
}
.pdp2-price-now { line-height: 1; }
.pdp2-price-disc { background: var(--brand); color: #fff; }

/* Buy box — wrap the form contents so they read as ONE professional block */
.pdp2-panel .pdp2-form {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Qty + total on one neat row; total is the hero, qty stays compact */
.pdp2-panel .pdp2-buy {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.pdp2-panel .pdp2-qty { gap: 6px; }
.pdp2-panel .pdp2-qty-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pdp2-panel .qty-stepper {
  width: 128px; grid-template-columns: 42px 1fr 42px; height: 46px;
  border-radius: var(--radius-sm); background: var(--input); border: 1px solid var(--line-2);
}
.pdp2-panel .qty-stepper-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.pdp2-panel .qty-stepper .qty-input { width: 100%; text-align: center; font-weight: 800; }

/* Total — clean, no dashed box; big number aligned right */
.pdp2-panel .pdp2-total {
  flex: 1; min-width: 150px;
  display: flex; align-items: baseline; justify-content: flex-end; gap: var(--sp-2);
  padding: 0; border: 0; background: transparent;
}
.pdp2-panel .pdp2-total span { font-size: 13px; color: var(--muted); font-weight: 600; }
.pdp2-panel .pdp2-total strong { font-family: var(--font-display); font-size: 28px; font-weight: 850; line-height: 1; }

/* CTA — full-width, prominent */
.pdp2-panel .pdp2-cta { gap: var(--sp-2); }
.pdp2-panel .pdp2-cart-btn { min-height: 52px; border-radius: var(--radius); }

/* Tighten inner cards so the block stays compact */
.pdp2-panel .pdp2-tiers,
.pdp2-panel .pdp2-fields { background: var(--card-2); border-radius: var(--radius-sm); }
.pdp2-panel .pdp2-fields { padding: var(--sp-4); }

/* Mobile: keep it tidy and compact, even spacing everywhere */
@media (max-width: 600px) {
  .pdp2-panel .pdp2-price-row { padding: var(--sp-3) var(--sp-4); }
  .pdp2-panel .pdp2-form { padding: var(--sp-4); gap: var(--sp-3); }
  .pdp2-panel .pdp2-buy { align-items: center; gap: var(--sp-3); }
  .pdp2-panel .qty-stepper { width: 118px; height: 48px; }
  .pdp2-panel .pdp2-total strong { font-size: 24px; }
  .pdp2-desc { padding: var(--sp-3) var(--sp-4); }
}

/* Related */
.pdp2-related { margin-top: var(--sp-7); }

/* ===== 3-level catalog & readable home categories ===== */
.catalog-level3-nav { margin-top:-8px; margin-bottom:16px; padding:8px 10px; background:var(--card-2); }
.catalog-subcategory-row--level3 { border-top:0; margin-top:0; padding-top:0; }
.catalog-subcategory-link--level3 { font-size:11px; padding:5px 9px; background:var(--bg-elev); }
.cat-grid--home .cat-tile.is-hidden { display:none; }
.cat-grid--home.is-expanded .cat-tile.is-hidden { display:flex; }
.cat-tile .cat-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-more-wrap { margin-top:14px; text-align:center; }
.cat-more-wrap .btn { padding:8px 16px; font-size:13px; border-radius:var(--pill); }
.cat-grid--home { gap:10px; }
@media (min-width:561px) and (max-width:900px) { .cat-grid--home { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Catalog sidebar category tree */
.filter-cat-tree { display:flex; flex-direction:column; gap:2px; }
.filter-cat-tree a { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; color:var(--fg-soft); font-size:13px; transition:var(--t); }
.filter-cat-tree a:hover { background:var(--card-2); color:var(--fg); }
.filter-cat-tree a.active { background:var(--brand-soft); color:var(--brand-1); font-weight:700; }
.filter-cat-tree__l1 { font-weight:700; }
.filter-cat-tree__l1 i { color:var(--brand-1); width:16px; text-align:center; }
.filter-cat-tree__l2 { padding-left:26px !important; font-size:12.5px; }
.filter-cat-tree__l3 { padding-left:40px !important; font-size:12px; color:var(--muted); }
/* Collapsible subcategory groups */
.fct-group { display:flex; flex-direction:column; }
.fct-row { display:flex; align-items:center; gap:4px; }
.fct-row .filter-cat-tree__l1 { flex:1; min-width:0; }
.fct-toggle { flex:none; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; transition:var(--t); }
.fct-toggle:hover { background:var(--card-2); color:var(--fg); }
.fct-toggle i { transition:transform var(--t); font-size:12px; }
.fct-group.is-open > .fct-row .fct-toggle i { transform:rotate(180deg); }
.fct-children { display:none; flex-direction:column; gap:2px; }
.fct-group.is-open > .fct-children { display:flex; }
/* Catalog breadcrumb */
.catalog-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:8px; font-size:12.5px; color:var(--muted); }
.catalog-breadcrumb a:hover { color:var(--brand-1); }
.catalog-breadcrumb .current { color:var(--fg-soft); }
/* Search result categories block */
.search-categories { margin-bottom:22px; }
.search-categories-title { font-size:16px; margin-bottom:12px; }

/* Rich-text description rendering (product/order pages) */
.rich-text p { margin: 0 0 10px; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text strong { font-weight: 700; color: var(--fg); }
.rich-text em { font-style: italic; }
.rich-text ul { margin: 0 0 10px; padding-left: 20px; }
.rich-text li { margin: 3px 0; }
.pdp2-desc.rich-text { white-space: normal; }

/* =====================================================================
   Comfort & polish layer (v3.1) — modern refinement, same structure & palette
   Appended last so it layers on top without altering existing rules.
   Uses ONLY existing design tokens / colors. No new hues introduced.
   ===================================================================== */

/* Smoother, more premium motion + refined focus ring */
:root {
  --t: .28s var(--ease);
  --ring: 0 0 0 3px rgba(104,172,61,.30);
}

/* Slightly larger comfortable base rhythm without shifting layout */
body { font-size: 15.75px; line-height: 1.62; letter-spacing: .002em; }
p { max-width: 72ch; }
h1, h2, h3, h4 { text-wrap: balance; }

/* More breathing room in the main content column */
main.container { padding-top: calc(var(--sp-6) + 4px); }
.section { margin-top: calc(var(--sp-7) + 4px); }
.section-title { letter-spacing: -.01em; }

/* ---- Cards & surfaces: softer depth, calmer borders, gentle lift ---- */
.product-card,
.filter-card,
.product-detail-media,
.product-detail-info,
.variation,
.product-fields,
.purchase-tier-card {
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.product-card { border-radius: 18px; }
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px -22px rgba(0,0,0,.55), 0 4px 14px -8px rgba(104,172,61,.35);
}
.filter-card { box-shadow: var(--shadow-sm); }

/* Product imagery: a touch more polish on hover */
.product-card:hover .product-thumb img { transform: scale(1.045); }
.product-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,.10));
  opacity: 0; transition: opacity var(--t);
}
.product-card:hover .product-thumb::after { opacity: 1; }

/* ---- Buttons: comfier hit area, refined primary depth ---- */
.btn { border-radius: var(--radius-sm); }
.btn-primary {
  box-shadow: 0 10px 26px -12px rgba(104,172,61,.65), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:not(:disabled):not([disabled]):hover,
.btn-primary:not(:disabled):not([disabled]):focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(104,172,61,.78), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn:active { transform: translateY(0) scale(.99); }

/* ---- Inputs: friendlier, smoother, clearer focus ---- */
input, select, textarea {
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.price-range input:focus,
.sort-bar select:focus {
  border-color: var(--brand-1);
  box-shadow: var(--ring);
  outline: none;
}

/* ---- Chips / tags / badges: rounder, softer ---- */
.tag-chip, .product-badge, .hero-stat, .product-trust-badge {
  transition: background var(--t), color var(--t), transform var(--t);
}
.filter-tag:hover, .filter-cat:hover { background: var(--card-3); }

/* ---- Header: gentle glass depth for a modern sticky feel ---- */
.site-header.is-compact { box-shadow: var(--shadow-sm); }

/* ---- Hero: a bit more comfortable padding on large screens ---- */
@media (min-width: 761px) {
  .home-hero { padding: 40px; gap: 34px; }
}

/* ---- Entrance polish: subtle, respectful of reduced-motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .product-card { animation: pshFadeUp .5s var(--ease) both; }
}
@keyframes pshFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nicer custom scrollbar to match the palette (desktop) */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--pill); border: 2px solid transparent; background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
}

/* =====================================================================
   Designer polish layer (v4) — modern, comfortable, same palette.
   Purely additive. Uses only existing brand/theme tokens.
   Enhances: depth, spacing rhythm, header, hero, cards, buttons,
   forms, footer, mobile-nav + tasteful motion. Mobile-first & a11y.
   ===================================================================== */

/* ---- Elevation + easing tokens (reuse existing brand vars) ---- */
:root {
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-slow: .45s var(--ease-out);
  --elev-1: 0 1px 2px rgba(2,12,20,.06), 0 4px 14px -8px rgba(2,12,20,.18);
  --elev-2: 0 6px 24px -12px rgba(2,12,20,.35), 0 2px 6px -3px rgba(2,12,20,.2);
  --elev-brand: 0 14px 38px -16px rgba(104,172,61,.55);
}

/* Comfortable global type rhythm */
body { letter-spacing: -.005em; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

/* ---- Header: refined translucent glass + hairline ---- */
.site-header {
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t), background var(--t), border-color var(--t);
}
.site-header.is-compact {
  box-shadow: 0 8px 30px -18px rgba(2,12,20,.5);
  border-bottom-color: var(--line-2);
}
.brand-mark { transition: transform var(--t-slow), box-shadow var(--t); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); box-shadow: var(--elev-brand); }
.brand-dot { color: var(--brand-1); }
.brand .brand-dot { background: linear-gradient(90deg, var(--brand-1), #8fe36b, var(--brand-1)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brandDotShimmer 6s linear infinite; }
@keyframes brandDotShimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

/* Search field: softer, focus glow */
.search {
  border-radius: var(--radius-sm);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.search:focus-within {
  border-color: var(--brand-2);
  box-shadow: none;
}

/* ---- Buttons: comfy tactility + primary sheen ---- */
.btn { position: relative; border-radius: var(--radius-sm); will-change: transform; }
.btn-primary { overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease-out);
  pointer-events: none;
}
.btn-primary:not(:disabled):hover::after { transform: translateX(120%); }
.btn-lg { border-radius: var(--radius); }

/* Ripple (added by JS, degrades gracefully) */
.btn > .ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.35); pointer-events: none;
  animation: rh-ripple .6s var(--ease-out);
}
@keyframes rh-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---- Section titles: a touch more presence ---- */
.section-title::before { box-shadow: 0 0 16px -2px rgba(104,172,61,.6); }

/* ---- Product cards: refined depth, image zoom, gradient sheen ---- */
.product-card {
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t);
  transform: translateZ(0);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--elev-2), var(--elev-brand);
  border-color: rgba(104,172,61,.5);
}
.product-thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(2,12,20,.28));
  opacity: 0; transition: opacity var(--t);
}
.product-card:hover .product-thumb::after { opacity: 1; }
.product-card:hover .product-thumb img { transform: scale(1.06); }
.product-price { letter-spacing: -.02em; }
.product-badge { box-shadow: 0 4px 12px -6px rgba(2,12,20,.6); }

/* ---- Filter / detail panels: softer cards ---- */
.filter-card, .product-detail-info, .product-detail-media, .purchase-price-card {
  box-shadow: var(--elev-1);
}
.variation { transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.variation:hover { border-color: rgba(104,172,61,.4); box-shadow: var(--elev-1); }

/* ---- Forms: comfortable, clear focus ---- */
input, select, textarea { border-radius: var(--radius-sm); }
.price-range input:focus, .sort-bar select:focus,
.product-field-group input:focus, .product-field-group textarea:focus {
  box-shadow: 0 0 0 4px var(--brand-soft);
  border-color: var(--brand-1);
}

/* ---- Footer: airy, refined links ---- */
.site-footer { position: relative; }
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(104,172,61,.5), transparent);
}
.footer-links a { transition: color var(--t), transform var(--t); }
.footer-links a:hover { color: var(--brand-1); transform: translateX(3px); }

/* ---- Mobile bottom nav: glassy, animated active state ---- */
@media (max-width: 760px) {
  .mobile-nav {
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    background: var(--glass);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 30px -18px rgba(2,12,20,.6);
  }
  .mnav-item { transition: color var(--t), transform var(--t); }
  .mnav-item .mnav-icon { transition: transform var(--t-slow), color var(--t); }
  .mnav-item.active { color: var(--brand-1); }
  .mnav-item.active .mnav-icon { transform: translateY(-3px) scale(1.12); }
  .mnav-item:active { transform: scale(.94); }
}

/* ---- Scroll-reveal (JS adds .reveal / .is-in). Reduced-motion safe. ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow), transform var(--t-slow); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal-stagger.is-in > * { animation: rh-fade-up .55s var(--ease-out) both; }
  .reveal-stagger.is-in > *:nth-child(2) { animation-delay: .05s; }
  .reveal-stagger.is-in > *:nth-child(3) { animation-delay: .1s; }
  .reveal-stagger.is-in > *:nth-child(4) { animation-delay: .15s; }
  .reveal-stagger.is-in > *:nth-child(5) { animation-delay: .2s; }
  .reveal-stagger.is-in > *:nth-child(n+6) { animation-delay: .25s; }
}
@keyframes rh-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Interactive tilt hint (JS-driven, harmless if unused) */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* Respect reduced motion for the whole polish layer */
@media (prefers-reduced-motion: reduce) {
  .product-card:hover { transform: none; }
  .btn-primary::after { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- Home product rails (Top products / Best sellers / Discover) ---- */
.home-rail { margin-top: var(--sp-6); }
.home-rail .section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.home-rail .section-head .section-title { margin-bottom:0; }
.home-rail .section-sub { margin:0 0 16px; font-size:14px; }
.section-link { flex:none; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--brand); text-decoration:none; white-space:nowrap; }
.section-link:hover { text-decoration:underline; }
.section-link i { font-size:11px; }
@media (max-width:560px) {
  .home-rail .section-head { flex-wrap:wrap; gap:4px 12px; }
  .home-rail .section-head .section-title { font-size:20px; }
  .home-rail .section-sub { margin-bottom:12px; font-size:13px; }
}

/* ---- Special offers banner ---- */
.offer-grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:560px) { .offer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px) { .offer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.offer-card { display:flex; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--card); text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
.offer-card:hover { border-color:var(--brand); transform:translateY(-2px); }
.offer-card-media { position:relative; flex:none; width:72px; height:72px; border-radius:12px; overflow:hidden; background:rgba(104,172,61,.12); display:flex; align-items:center; justify-content:center; }
.offer-card-media img { width:100%; height:100%; object-fit:cover; }
.offer-card-icon { font-size:26px; color:var(--brand); }
.offer-card-flag { position:absolute; left:4px; bottom:4px; display:inline-flex; align-items:center; gap:3px; padding:2px 6px; font-size:10px; font-weight:700; color:#fff; background:var(--brand); border-radius:6px; }
.offer-card-body { min-width:0; }
.offer-card-name { font-weight:700; font-size:15px; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; }
.offer-card-deal { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.offer-card-deal .offer-trigger { color:var(--content-color-secondary,inherit); opacity:.85; }
.offer-card-deal .offer-reward { font-weight:700; color:var(--brand); }
.offer-card-deal .offer-arrow { font-size:10px; opacity:.6; }
/* ---- Offers admin ---- */
.offer-edit { display:inline-block; }
.offer-edit > summary { cursor:pointer; list-style:none; }
.offer-edit > summary::-webkit-details-marker { display:none; }
.offer-edit-body { margin-top:12px; }
.offer-sep { border:0; border-top:1px solid var(--line); margin:18px 0; }

/* ===== Catalog view switcher (grid / compact list) ===== */
.catalog-view-switch { display:inline-flex; gap:4px; margin-left:auto; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--card-2); }
.catalog-view-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; transition:background .15s ease, color .15s ease; }
.catalog-view-btn:hover { color:var(--text); background:rgba(128,128,128,.12); }
.catalog-view-btn.is-active { color:#fff; background:var(--accent,#3fb950); }
.catalog-view-btn.is-active:hover { color:#fff; }

/* Compact horizontal list mode: photo on the left, text on the right */
.product-list { display:flex; flex-direction:column; gap:12px; min-width:0; max-width:100%; }
.product-list .product-card { display:flex; flex-direction:row; align-items:center; gap:16px; width:100%; padding:12px; transition:transform var(--t), border-color var(--t), box-shadow var(--t); }
.product-list .product-card:hover { transform:translateY(-2px); border-color:rgba(104,172,61,.45); box-shadow:var(--shadow); }
.product-list .product-thumb { position:relative; flex:0 0 104px; width:104px; height:104px; aspect-ratio:auto; border-radius:12px; overflow:hidden; margin:0; }
.product-list .product-thumb img { width:100%; height:100%; object-fit:cover; }
.product-list .product-thumb .thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--muted); }
/* Vertical divider between the photo and the text */
.product-list .product-body { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:0 0 0 16px; min-width:0; border-left:1px solid var(--line); align-self:stretch; }
.product-list .product-meta { margin-bottom:1px; }
.product-list .product-title { min-height:0; font-size:15px; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.product-list .product-tags { display:none; }
.product-list .product-card-action { display:none; }
.product-list .product-badges { position:absolute; z-index:2; top:6px; left:6px; max-width:calc(100% - 12px); margin-bottom:0; }
.product-list .product-badge { min-height:20px; padding:2px 7px; font-size:10px; }
/* Price + discount badge shown inline on one row */
.product-list .product-price { display:inline-flex; align-items:baseline; gap:8px; margin-top:2px; font-size:19px; }
.product-list .product-stock { margin-top:1px; }

@media (max-width:480px) {
  .product-list { gap:9px; }
  .product-list .product-card { gap:11px; padding:9px; }
  .product-list .product-thumb { flex:0 0 78px; width:78px; height:78px; }
  .product-list .product-body { padding-left:11px; gap:3px; }
  .product-list .product-title { font-size:14px; }
  .product-list .product-price { font-size:17px; }
}

/* ---------------- Account support/links nav: horizontal scroll on mobile ---------------- */
@media (max-width:640px) {
  .account-nav--scroll {
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    gap:8px;
    margin-left:calc(-1 * var(--sp-2, 8px));
    margin-right:calc(-1 * var(--sp-2, 8px));
    padding:2px var(--sp-2, 8px) 10px;
    scrollbar-width:none;
  }
  .account-nav--scroll::-webkit-scrollbar { display:none; }
  .account-nav-wrap::after { width:32px; transform:translateY(-2mm); }
  .account-nav--scroll .cat-chip {
    flex:0 0 auto;
    white-space:nowrap;
    scroll-snap-align:start;
    padding:9px 14px;
    font-size:13.5px;
  }
  .account-nav--scroll .cat-chip:hover { transform:none; }
  /* nudged up ~2mm to sit on the chip row */
  .account-nav-wrap::before {
    content: "\203A";
    position: absolute;
    top: 44%;
    right: 6px;
    z-index: 3;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--card-3);
    color: var(--brand-1);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    pointer-events: none;
    animation: accNavHint 1.6s var(--ease) infinite;
  }
}
@keyframes accNavHint {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: .9; }
  50% { transform: translateY(-50%) translateX(3px); opacity: .55; }
}

/* -------------------------- Form controls --------------------------- */
.form-control { width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--input); color: var(--fg); font-size: 15px; transition: border-color var(--t), box-shadow var(--t); }
.form-control:focus { outline: none; border-color: var(--brand-2); box-shadow: var(--ring); }
.acc-card form label { display: block; font-weight: 600; font-size: 13px; color: var(--fg-soft); }
.acc-card form label > .form-control { margin-top: 7px; }

/* ============================================================
   Site-wide skeleton loaders
   Add class "is-loading" to a container and drop in .sk blocks,
   or reuse the .sk / .skeleton-* utilities directly.
   ============================================================ */
.sk {
  position:relative;
  display:block;
  border-radius:8px;
  background:linear-gradient(90deg, var(--card-2) 25%, var(--card-3) 37%, var(--card-2) 63%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce) { .sk { animation:none; } }
.sk-text { height:12px; margin:6px 0; border-radius:6px; }
.sk-text.sk-lg { height:18px; }
.sk-text.sk-sm { height:10px; }
.sk-title { height:22px; width:60%; border-radius:8px; }
.sk-line { height:12px; border-radius:6px; }
.sk-line.w-90 { width:90%; } .sk-line.w-75 { width:75%; } .sk-line.w-60 { width:60%; } .sk-line.w-40 { width:40%; }
.sk-btn { height:42px; width:140px; border-radius:var(--pill, 999px); }
.sk-avatar, .sk-circle { border-radius:50%; }
.sk-thumb { width:100%; aspect-ratio:4/3; border-radius:12px; }
.sk-chip { height:34px; width:120px; border-radius:var(--pill, 999px); }

/* Generic skeleton grid used before content is ready */
.skeleton-grid { display:grid; gap:16px; }
.skeleton-card { padding:18px; border:1px solid var(--line); border-radius:var(--radius, 14px); background:var(--card); display:flex; flex-direction:column; gap:12px; }

/* When a wrapper has [data-skeleton] we can hide it once loaded via JS */
[data-skeleton][hidden] { display:none !important; }

/* ===== Catalog and product redesign: canonical final overrides ===== */
.filter-cat-tree{display:grid;gap:4px}.fct-row{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center}.filter-cat-tree__l1,.filter-cat-tree__l2,.filter-cat-tree__l3{display:flex;align-items:center;gap:9px;min-height:42px;padding:8px 10px;border-radius:10px;line-height:1.25}.filter-cat-tree__l2{margin-left:18px;padding-left:14px;border-left:2px solid var(--line)}.filter-cat-tree__l3{margin-left:36px;padding-left:14px;color:var(--muted);border-left:2px solid var(--line)}.filter-cat-tree a.active{color:var(--brand-1);background:var(--brand-soft);font-weight:800}.fct-toggle{width:40px;height:40px;border:0;border-radius:10px;background:transparent;cursor:pointer}.fct-toggle i{transition:transform var(--t)}.fct-group:not(.is-open) .fct-children{display:none}.fct-group.is-open .fct-toggle i{transform:rotate(180deg)}
.catalog-control-surface{display:grid;gap:14px;margin:0 0 20px;padding:18px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,var(--card),var(--card-2));box-shadow:var(--shadow-sm)}.catalog-control-surface .catalog-head{align-items:center}.catalog-control-surface .active-filters{margin:0;overflow-x:auto}.catalog-control-surface .catalog-category-nav,.catalog-control-surface .sort-bar{margin:0;padding-top:14px;border-top:1px solid var(--line)}
.catalog-category-nav{display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--card-2),var(--card));box-shadow:var(--shadow-sm)}.catalog-category-nav::before{content:'Browse categories';color:var(--fg);font-family:var(--font-display);font-size:15px;font-weight:800}.catalog-category-scroll,.catalog-subcategory-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity}.catalog-category-link{display:grid;grid-template-columns:36px minmax(max-content,1fr) auto;align-items:center;gap:10px;min-height:58px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);scroll-snap-align:start}.catalog-category-link>i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--card-3);color:var(--brand-1)}.catalog-category-link.active{border-color:var(--brand-1);background:var(--brand-soft)}.catalog-subcategory-row{padding-top:12px;border-top:1px solid var(--line)}.catalog-subcategory-link{display:inline-flex;align-items:center;min-height:44px;padding:9px 15px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);font-weight:700;white-space:nowrap}.catalog-subcategory-link.active{border-color:var(--brand-1);background:var(--brand);color:#fff}
.pdp2-layout{grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);gap:clamp(24px,4vw,52px)}.pdp2-gallery-col{position:sticky;top:126px;padding:18px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,var(--card),var(--card-2));box-shadow:var(--shadow-sm)}.pdp2-info-col{padding:clamp(18px,3vw,30px);border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:var(--shadow)}.pdp2-title-block{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}.pdp2-title{font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.035em}.pdp2-desc{padding:18px;border:1px solid var(--line-2);border-radius:16px;background:var(--card-2);overflow-wrap:anywhere}.pdp2-panel{padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--card-2),var(--card))}.pdp2-cart-btn{min-height:60px;font-size:17px}
.pdp2-warranty{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;margin:0 0 20px;padding:14px 16px;border:1px solid rgba(62,196,109,.38);border-radius:16px;background:linear-gradient(135deg,var(--ok-s),var(--card));box-shadow:inset 4px 0 0 var(--ok)}.pdp2-warranty__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:13px;background:var(--ok-s);color:var(--ok);font-size:21px}.pdp2-warranty__body{min-width:0}.pdp2-warranty__label{display:block;margin-bottom:3px;color:var(--fg);font-size:15px;line-height:1.3}.pdp2-warranty__text{display:block;color:var(--fg-soft);font-size:13px;line-height:1.5}.pdp2-warranty--none{border-color:var(--line-2);background:linear-gradient(135deg,var(--card-2),var(--card));box-shadow:inset 4px 0 0 var(--muted)}.pdp2-warranty--none .pdp2-warranty__icon{background:var(--card-3);color:var(--muted)}
@media(max-width:900px){.pdp2-layout{grid-template-columns:1fr}.pdp2-gallery-col{position:static}.pdp2-info-col{padding:18px}}@media(max-width:760px){.catalog-control-surface{padding:14px}.catalog-category-nav{padding:14px}.pdp2-gallery-col,.pdp2-info-col{border-radius:18px}.pdp2-warranty{grid-template-columns:46px minmax(0,1fr);gap:12px;padding:12px}.pdp2-warranty__icon{width:46px;height:46px}.pdp2-panel{padding:12px}}@media(max-width:430px){.pdp2-warranty{align-items:start}.pdp2-warranty__label{font-size:14px}.pdp2-warranty__text{font-size:12px}}

/* === Compact catalog control surface (smart, low-height toolbar) ===
   Appended last so it overrides the earlier bulky .catalog-control-surface
   and .catalog-category-nav rules. */
.catalog-control-surface{display:flex;flex-direction:column;gap:10px;margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:none}

/* Row 1: heading + result count on the left, sort/view/filters on the right */
.catalog-control-surface .catalog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;flex-wrap:wrap}
.catalog-head-copy{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
.catalog-head-copy .section-title{margin:0;font-size:20px;line-height:1.2}
.catalog-head-copy .result-count{padding:3px 9px;font-size:12px;font-weight:700}
.catalog-head-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Inline sort bar lives inside the head now — no top border, no margins */
.catalog-control-surface .sort-bar,.sort-bar--inline{display:flex;align-items:center;gap:8px;margin:0;padding:0;border:0}
.sort-bar--inline .sort-bar__label{font-size:12px}
.sort-bar--inline select{padding:6px 9px;font-size:13px;border:1px solid var(--line);border-radius:9px;background:var(--card-2)}
.catalog-control-surface .catalog-view-switch{margin-left:0}
.catalog-control-surface .filter-toggle{min-height:36px;padding:7px 12px;font-size:13px}

/* Active filters: single compact scrollable row */
.catalog-control-surface .active-filters{display:flex;align-items:center;gap:6px;margin:0;padding-top:10px;border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.catalog-control-surface .active-filters::-webkit-scrollbar{display:none}

/* Category nav: back to a single-line horizontal pill scroller (kill the tall grid cards + injected label) */
.catalog-control-surface .catalog-category-nav{display:block;gap:0;margin:0;padding:10px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
.catalog-control-surface .catalog-category-nav::before{content:none!important;display:none!important}
.catalog-category-scroll,.catalog-subcategory-row{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.catalog-category-scroll::-webkit-scrollbar,.catalog-subcategory-row::-webkit-scrollbar{display:none}
.catalog-category-link{display:inline-flex;grid-template-columns:none;align-items:center;gap:7px;min-height:0;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card-2);font-size:13px;font-weight:700;white-space:nowrap;scroll-snap-align:start}
.catalog-category-link>i{width:auto;height:auto;background:none;border-radius:0;color:var(--brand-1)}
.catalog-category-link small{color:var(--muted);font-size:11px;font-weight:700}
.catalog-category-link:hover,.catalog-category-link.active{border-color:var(--brand-1);background:var(--brand-soft)}
.catalog-subcategory-row{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.catalog-subcategory-link{display:inline-flex;align-items:center;min-height:0;padding:6px 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);font-size:12px;font-weight:700;white-space:nowrap;scroll-snap-align:start}
.catalog-subcategory-link.active{border-color:var(--brand-1);background:var(--brand);color:#fff}

/* Standalone level-3 nav sits tight under the category nav, no heavy card */
.catalog-control-surface + .catalog-level3-nav,.catalog-level3-nav{margin:0 0 12px;padding:0;border:0;background:none;box-shadow:none}
.catalog-level3-nav::before{content:none!important;display:none!important}

@media (max-width:600px){
  .catalog-control-surface{padding:11px 12px;gap:9px}
  .catalog-head-copy .section-title{font-size:18px}
  .catalog-head-tools{width:100%;justify-content:space-between}
  .sort-bar--inline{flex:1;min-width:0}
  .sort-bar--inline select{flex:1;min-width:0}
}

/* === Catalog & PDP mobile compaction (final overrides, must load last) === */

/* Desktop: keep the sort/view row visually in the header's top-right so title,
   count and controls read as one line. It lives in the DOM before the grid so
   that on mobile it can flow to sit right above the listing. */
.catalog-control-surface{position:relative}
.catalog-toolbar-row{display:flex;align-items:center;gap:8px}
@media (min-width:761px){
  /* Keep the sort/view/filter row in normal flow as its own right-aligned
     row between the control surface and the product grid. It is a sibling
     that follows .catalog-control-surface in the DOM (not a child), so
     position:absolute anchored to .catalog-main and floated on top of the
     first product cards. Flow layout removes that overlap. */
  .catalog-main .catalog-toolbar-row{position:static;justify-content:flex-end;margin:0 0 12px;padding:0;border:0}
  .catalog-control-surface{padding-top:12px}
}

/* Title + product count always on one baseline-aligned, adaptive row */
.catalog-head-copy{display:flex;align-items:baseline;gap:10px;flex-wrap:nowrap;min-width:0}
.catalog-head-copy .section-title{margin:0;font-size:clamp(17px,4.5vw,24px);line-height:1.15;min-width:0;overflow-wrap:anywhere}
.catalog-head-copy .section-title::before{height:1em;width:4px;flex:none}
.catalog-head-copy .result-count{flex:none;white-space:nowrap;font-size:clamp(10px,2.6vw,13px);padding:3px 9px}

/* ---- Mobile: beat the older .catalog-listing-page rules ---- */
@media (max-width:760px){
  .catalog-listing-page main.container{padding-left:8px;padding-right:8px}

  /* Compact header band; title + count stay on the same line */
  .catalog-listing-page .catalog-head{order:1;margin:0;padding:0;border:0;background:none;align-items:center}
  .catalog-listing-page .catalog-head .section-title{margin:0;font-size:clamp(17px,5vw,22px)}
  .catalog-listing-page .catalog-head .section-title::before{width:4px;height:1em}
  .catalog-listing-page .result-count{display:inline-flex;margin:0;padding:3px 8px;font-size:11px}
  .catalog-listing-page .filter-toggle{min-height:36px;padding:7px 11px;font-size:13px}

  /* Category nav right under the header */
  .catalog-listing-page .catalog-category-nav{order:2}

  /* Sort + view switch: one compact line, sitting right above the listing */
  .catalog-listing-page .catalog-toolbar-row{order:3;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;width:100%;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--card)}
  .catalog-listing-page .catalog-toolbar-row .sort-bar__label{flex:none;font-size:12px}
  .catalog-listing-page .catalog-toolbar-row select{flex:1;min-width:0;min-height:38px;padding:7px 9px;font-size:13px}
  .catalog-listing-page .catalog-toolbar-row .catalog-view-switch{flex:none;margin:0}

  /* Listing after the toolbar; widen cards by trimming side gutters */
  .catalog-listing-page .product-grid,.catalog-listing-page .product-list{order:4}
  .catalog-listing-page .catalog-main .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%!important;margin:0!important}
  .catalog-listing-page .catalog-main .product-list{width:100%!important;margin:0!important}
  .catalog-listing-page .pagination{order:5}
}

@media (max-width:480px){
  .catalog-listing-page main.container{padding-left:6px;padding-right:6px}
  .catalog-listing-page .catalog-head .section-title{font-size:clamp(16px,5.2vw,20px)}
  .catalog-listing-page .catalog-main .product-grid{gap:8px}
}

/* ---- Product page (PDP) title: adaptive, not oversized on mobile ---- */
.pdp2-title{font-size:clamp(19px,4.6vw,40px);line-height:1.12;letter-spacing:-.02em}
@media (max-width:760px){
  .pdp2-info-col{padding:16px}
  .pdp2-title-block{padding-bottom:14px;margin-bottom:14px}
  .pdp2-title{font-size:clamp(18px,5.4vw,26px)}
}
@media (max-width:480px){
  .pdp2-title{font-size:clamp(17px,6vw,22px)}
}

/* === Final mobile cleanup: equal-width cards, tight side gutters, smaller PDP title ===
   Loaded last so it wins over the earlier duplicated .product-grid / .pdp2-title rules. */

/* Product page (PDP) title — smaller on desktop and mobile alike */
.pdp2-title { font-size: clamp(18px, 2.4vw, 30px) !important; line-height: 1.15; letter-spacing: -0.02em; }

/* Product detail (legacy) title, if present */
.product-detail-info h1 { font-size: clamp(19px, 2.6vw, 30px); line-height: 1.18; }

@media (max-width: 900px) {
  .pdp2-title { font-size: clamp(18px, 4.6vw, 26px) !important; }
}
@media (max-width: 480px) {
  .pdp2-title { font-size: clamp(17px, 5.4vw, 22px) !important; }
  .pdp2-info-col { padding: 15px !important; }
}

/* ---------- Cards: equal width + small, even side gutters (whole site, mobile) ---------- */
@media (max-width: 760px) {
  /* Trim the page's own side padding so cards can breathe wider */
  main.container { padding-left: 10px; padding-right: 10px; }
  .catalog-listing-page main.container { padding-left: 10px !important; padding-right: 10px !important; }

  /* Kill the old calc()/margin overrides that made widths uneven */
  .catalog-listing-page .product-grid,
  .catalog-listing-page .product-list,
  .catalog-listing-page .empty-state,
  .catalog-listing-page .pagination,
  .catalog-listing-page .sort-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Grid: exactly two equal columns, consistent gap */
  .product-grid,
  .catalog-listing-page .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  /* Equal cells regardless of content length */
  .product-grid > * { min-width: 0; width: 100%; }

  /* List view spans full width too */
  .product-list,
  .catalog-listing-page .product-list { grid-template-columns: 1fr !important; }
}

@media (max-width: 400px) {
  main.container { padding-left: 8px; padding-right: 8px; }
  .catalog-listing-page main.container { padding-left: 8px !important; padding-right: 8px !important; }
  .product-grid,
  .catalog-listing-page .product-grid { gap: 8px !important; }
}

/* ======================================================================
   MOBILE REFINEMENTS (loaded last — wins over earlier rules)
   Requested tweaks: unified side padding, catalog top gap, compact
   sort bar, compact account cards, list-view cleanup.
   ====================================================================== */

/* ---- 1. Catalog page: breathing room under the sticky header ---- */
/* The listing page previously zeroed its top padding, so the control
   surface sat flush against the header. Give it a proper container gap. */
@media (max-width: 760px) {
  .catalog-listing-page main.container { padding-top: 14px !important; }
  .catalog-listing-page .catalog-layout { margin-top: 0 !important; }
  .catalog-listing-page .catalog-control-surface { margin-top: 2px; }
}

/* ---- 2. Unified side padding across the whole site (homepage feel) ----
   The homepage cards sit inside main.container's gutter — mirror that exact
   gutter on the header and the product page so every screen lines up. */
@media (max-width: 760px) {
  /* Header inner rows share the page gutter instead of a wider one */
  .site-header .container,
  .header-main-row,
  .header-nav-inner { padding-left: 10px !important; padding-right: 10px !important; }

  /* Product page uses the parent container's gutter — no own side padding. */
  .pdp2 { padding-left: 0 !important; padding-right: 0 !important; }
  .catalog-listing-page main.container { padding-left: 10px !important; padding-right: 10px !important; }
}
@media (max-width: 400px) {
  .site-header .container,
  .header-main-row,
  .header-nav-inner { padding-left: 8px !important; padding-right: 8px !important; }
  .pdp2 { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---- 5. List (horizontal tile) view: drop the "Choose options" plate ----
   Removing the CTA plate shortens each row so more products fit on screen. */
.product-list .product-cta { display: none !important; }

/* ---- 6. Sort toolbar: compact, single line, equal-height controls ---- */
/* The Filters button now lives inside this row. Keep everything on one line
   with no wrapping; make the select, view switch and Filters button share
   the same height so the row reads as one clean strip. */
.catalog-toolbar-row {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 8px;
}
.catalog-toolbar-row .sort-bar__label { flex: none; }
.catalog-toolbar-row select { flex: 1 1 auto; min-width: 0; }
.catalog-toolbar-row .catalog-view-switch,
.catalog-toolbar-row .filter-toggle { flex: none; }
/* Match control heights: select, view buttons and Filters button all 38px */
.catalog-toolbar-row select { height: 38px; min-height: 38px; }
.catalog-toolbar-row .catalog-view-btn { width: 38px; height: 38px; }
.catalog-toolbar-row .catalog-view-switch { padding: 2px; }
.catalog-toolbar-row .filter-toggle {
  height: 38px; min-height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

@media (max-width: 760px) {
  .catalog-listing-page .catalog-toolbar-row {
    flex-wrap: nowrap !important; gap: 8px; padding: 6px 8px;
  }
  /* On the narrowest screens, hide the Filters label text to save space
     while keeping the icon + count so the row never wraps. */
  .catalog-listing-page .catalog-toolbar-row select { min-height: 38px; height: 38px; }
  .catalog-listing-page .catalog-toolbar-row .catalog-view-btn { width: 38px; height: 38px; }
  .catalog-listing-page .catalog-toolbar-row .filter-toggle { min-height: 38px; height: 38px; }
}
@media (max-width: 460px) {
  .catalog-toolbar-row .filter-toggle span { display: none; }
  .catalog-toolbar-row .filter-toggle { padding: 0 11px; }
}

/* ---- 4. Account page: compact hero + one-row swipeable stat cards ---- */
@media (max-width: 760px) {
  /* Trim the tall balance hero */
  .balance-hero { padding: 16px 16px 18px !important; gap: 10px; }
  .balance-hero-value { font-size: 34px !important; margin: 2px 0 4px !important; }
  .balance-hero p.muted { font-size: 12px; margin: 0; }
  .balance-hero-actions .btn { padding: 9px 14px; }

  /* Purchases / Spent / Referrals: one horizontal, swipeable row */
  .account-cards {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .account-cards::-webkit-scrollbar { display: none; }
  .account-cards .acc-card {
    flex: 0 0 auto;
    min-width: 40%;
    scroll-snap-align: start;
    padding: 12px 14px;
  }
  .account-cards .acc-card .acc-label { font-size: 12px; }
  .account-cards .acc-card .acc-value { font-size: 22px; }
}
@media (max-width: 480px) {
  .account-cards .acc-card { min-width: 44%; }
}

/* =====================================================================
   Mobile home rails: horizontal scroll + "All products" pill button
   Scoped to .home-rail so the catalog page grids are NOT affected.
   ===================================================================== */

/* Turn the "All products / See more / Browse all" link into a nice pill
   button on every screen size. */
.home-rail .section-head .section-link {
  padding: 7px 14px;
  border-radius: var(--pill);
  border: 1px solid var(--brand-1);
  color: var(--brand-1);
  background: var(--brand-soft);
  font-weight: 600;
  line-height: 1;
  transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.home-rail .section-head .section-link:hover {
  text-decoration: none;
  color: #fff;
  background: var(--brand);
  box-shadow: var(--glow);
  transform: translateY(-1px);
}
.home-rail .section-head .section-link:active { transform: translateY(0); }
.home-rail .section-head .section-link i { transition: transform var(--t); }
.home-rail .section-head .section-link:hover i { transform: translateX(2px); }

@media (max-width: 768px) {
  /* Home rails (Top products, Best sellers, Discover, Special offers) render as
     tiled card grids on mobile — same as desktop — instead of a horizontal
     scroller. This removes the half-cut second card that used to bleed past the
     screen edge. Scoped to .home-rail so catalog listing grids are untouched. */
  .home-rail .product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .home-rail .offer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  /* Cards fill their grid cell — no fixed width, no scroll snap. */
  .home-rail .product-grid > *,
  .home-rail .offer-grid > * {
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .home-rail .section-head .section-link { padding: 6px 12px; font-size: 13px; }
}

/* =====================================================================
   Product page: tighten the top/side gap so it sits like the catalog.
   .pdp2 already provides its own max-width + side padding, so the extra
   padding from main.container was doubling it up (bigger gap than catalog).
   ===================================================================== */
.pdp2 { padding-left: 0; padding-right: 0; }
main.container:has(.pdp2) { padding-top: var(--sp-3); }
/* Fallback for browsers without :has() — pull the page up via the wrapper. */
.pdp2 { margin-top: calc(-1 * var(--sp-4)); }
@media (max-width: 760px) {
  main.container:has(.pdp2) { padding-left: 12px; padding-right: 12px; padding-top: var(--sp-2); }
  .pdp2 { margin-top: calc(-1 * var(--sp-2)); }
}

/* =====================================================================
   Mobile catalog heading: was shifted with a huge min-height. Make it a
   clean, compact header row (title + count aligned, tight padding).
   ===================================================================== */
@media (max-width: 600px) {
  .catalog-listing-page .catalog-head {
    min-height: 0;
    align-items: center;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .catalog-listing-page .catalog-head > div,
  .catalog-listing-page .catalog-head-copy {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .catalog-listing-page .catalog-head .section-title {
    margin: 0;
    font-size: clamp(20px, 6vw, 24px);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .catalog-listing-page .catalog-head .result-count {
    display: inline-block;
    margin-top: 0;
    font-size: 12px;
  }
}

/* =====================================================================
   Filter button: dynamic, eye-catching animated outline.
   ===================================================================== */
.filter-toggle {
  position: relative;
  border-color: var(--brand-1);
  color: var(--brand-1);
  overflow: visible;
}
/* Neon outline that runs clockwise around the border. A conic-gradient sits in
   a ::before layer and is masked to a thin ring so only the border glows, and
   the whole gradient rotates — giving a "light travelling around the edge". */
.filter-toggle::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg,
      transparent 0deg,
      var(--brand-1) 60deg,
      #b6ff7a 90deg,
      var(--brand-1) 120deg,
      transparent 200deg,
      transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: filterNeonSpin 2.4s linear infinite;
}
/* Extra soft outer glow that follows the same brand colour. */
.filter-toggle::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--brand-1);
  opacity: 0;
  pointer-events: none;
  animation: filterPulse 2.2s var(--ease) infinite;
}
.filter-toggle:hover,
.filter-toggle:focus-visible {
  color: #fff;
  background: var(--brand);
  border-color: transparent;
  box-shadow: var(--glow);
}
.filter-toggle:hover::after,
.filter-toggle:focus-visible::after { animation: none; opacity: 0; }
@keyframes filterNeonSpin {
  to { transform: rotate(360deg); }
}
/* Desktop: filters live permanently in the sidebar, so the toggle button is
   redundant — hide it everywhere on >=761px. */
@media (min-width: 761px) {
  .filter-toggle,
  .catalog-toolbar-row .filter-toggle,
  .catalog-control-surface .filter-toggle { display: none !important; }
}
/* Mobile: make the button pop even more — brand fill, white text and a stronger
   glow, with the running neon border on top. */
@media (max-width: 760px) {
  .catalog-listing-page .filter-toggle {
    color: #fff;
    background: var(--brand);
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(104,172,61,.5), 0 8px 22px -6px rgba(104,172,61,.75);
  }
}
/* The active-filter count bubble gets the brand fill so it pops. */
.filter-toggle .filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 2px;
  padding: 0 6px;
  border-radius: var(--pill);
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
@keyframes filterPulse {
  0%   { opacity: .0; transform: scale(1);    }
  35%  { opacity: .55; transform: scale(1);   }
  70%  { opacity: 0;  transform: scale(1.14); }
  100% { opacity: 0;  transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .filter-toggle::after { animation: none; opacity: .5; }
}

/* =====================================================================
   Desktop catalog sidebar: independent, self-contained scroll.
   The sticky sidebar had no height limit, so a long filter list forced
   you to scroll the whole page (and only scrolled after the product list
   ran out). Cap it to the viewport and let it scroll on its own.
   Scoped to >760px so the mobile off-canvas drawer is untouched.
   ===================================================================== */
@media (min-width: 761px) {
  .catalog-sidebar {
    max-height: calc(100vh - 126px - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;   /* don't chain scroll to the page */
    scrollbar-width: thin;
    padding-right: 2px;             /* room for the scrollbar */
  }
  .catalog-sidebar::-webkit-scrollbar { width: 8px; }
  .catalog-sidebar::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border-radius: var(--pill);
  }
  .catalog-sidebar::-webkit-scrollbar-track { background: transparent; }
}

/* =====================================================================
   Catalog refinements (appended last so these win the cascade):
   1. Compact "ёлочка" category tree in the filter sidebar (admin-like).
   2. Catalog heading + product count on one responsive line.
   3. Cleaner categories / subcategories block inside the control card.
   4. Tighter mobile gap between the control card and the toolbar row.
   5. Filter button: calm "heartbeat" pulse instead of the spinning neon.
   6. Mobile filters open as a compact centred modal so Apply/Reset are
      never hidden behind the fixed bottom navigation.
   ===================================================================== */

/* ---- 1 + 3. Filter sidebar category tree — compact fir-tree ("ёлочка") ---- */
.filter-cat-tree {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-2);
}
.filter-cat-tree .fct-group { display: block; }
.filter-cat-tree .fct-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
}
.filter-cat-tree__l1,
.filter-cat-tree__l2,
.filter-cat-tree__l3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.2;
  font-size: 13px;
}
.filter-cat-tree > a:last-child,
.filter-cat-tree .fct-group:last-child .fct-children a:last-child { border-bottom: 0; }
.filter-cat-tree a:hover { background: var(--brand-soft); color: var(--fg); }
.filter-cat-tree a.active { background: var(--brand-soft); color: var(--brand-1); font-weight: 800; }
.filter-cat-tree__l1 { font-weight: 700; }
.filter-cat-tree__l1 i {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: var(--brand-soft);
  color: var(--brand-1);
  font-size: 12px;
}
/* Nested rows: indent + a subtle connector line, exactly like the admin tree. */
.filter-cat-tree__l2,
.filter-cat-tree__l3 { color: var(--fg-soft); }
.filter-cat-tree__l2 { padding-left: 34px; font-size: 12.5px; }
.filter-cat-tree__l3 { padding-left: 52px; font-size: 12px; color: var(--muted); }
.filter-cat-tree__l2::before,
.filter-cat-tree__l3::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 50%;
  width: 10px;
  border-left: 2px solid var(--line-2);
  border-bottom: 2px solid var(--line-2);
  border-bottom-left-radius: 7px;
}
.filter-cat-tree__l2::before { left: 18px; }
.filter-cat-tree__l3::before { left: 36px; }
.filter-cat-tree .fct-toggle {
  width: 34px;
  height: 38px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.filter-cat-tree .fct-toggle i { transition: transform var(--t); }
.filter-cat-tree .fct-group:not(.is-open) .fct-children { display: none; }
.filter-cat-tree .fct-group.is-open .fct-toggle i { transform: rotate(180deg); }

/* ---- 2. Catalog heading + product count: one responsive line ---- */
/* Body-prefixed + repeated selectors so these beat the earlier one-line rules. */
.catalog-listing-page .catalog-control-surface .catalog-head,
.catalog-control-surface .catalog-head { margin: 0 !important; }
.catalog-listing-page .catalog-head-copy,
.catalog-control-surface .catalog-head-copy {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap !important;
  min-width: 0;
  width: 100%;
}
/* Title takes all remaining room and shrinks its font to stay on ONE line. */
.catalog-listing-page .catalog-head-copy .section-title,
.catalog-control-surface .catalog-head-copy .section-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  font-size: clamp(15px, 4.6vw, 24px) !important;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Count pill is glued to the right edge and never shrinks/wraps. */
.catalog-listing-page .catalog-head-copy .result-count,
.catalog-control-surface .catalog-head-copy .result-count {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700;
}
/* Actually reduce the inner padding of the heading card (beats later rules). */
.catalog-listing-page .catalog-control-surface,
.catalog-control-surface { padding: 10px 12px !important; }

/* ---- 4. Tighter gap between the control card and the toolbar row (mobile) ---- */
@media (max-width: 760px) {
  .catalog-listing-page .catalog-control-surface { margin-bottom: 8px; }
  .catalog-listing-page .catalog-main .catalog-toolbar-row { margin-top: 0; margin-bottom: 8px; }
  .catalog-listing-page .catalog-level3-nav { margin-bottom: 8px; }
}

/* ---- 5. Filter button: calm heartbeat pulse (no spinning neon) ---- */
.filter-toggle { position: relative; overflow: visible; }
/* Kill the old rotating conic-gradient ring entirely. */
.filter-toggle::before { content: none !important; display: none !important; animation: none !important; }
/* Reuse ::after as a soft "heartbeat" ring that pulses twice, then rests. */
.filter-toggle::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--brand-1);
  opacity: 0;
  pointer-events: none;
  animation: filterHeartbeat 2s var(--ease) infinite !important;
}
.filter-toggle:hover::after,
.filter-toggle:focus-visible::after { animation: none !important; opacity: 0; }
@keyframes filterHeartbeat {
  0%   { opacity: 0;   transform: scale(1);    }
  12%  { opacity: .6;  transform: scale(1.05); }
  22%  { opacity: .15; transform: scale(1.01); }
  34%  { opacity: .6;  transform: scale(1.08); }
  46%  { opacity: 0;   transform: scale(1.12); }
  100% { opacity: 0;   transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .filter-toggle::after { animation: none !important; opacity: .4; transform: none; }
}

/* ---- 3b. Reworked horizontal category list (control card) ---- */
/* Compact, clearly-tiered chips with an edge fade so it's obvious it scrolls. */
.catalog-listing-page .catalog-control-surface .catalog-category-nav {
  position: relative;
  display: block !important;
  margin: 0 !important;
  padding: 10px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.catalog-listing-page .catalog-control-surface .catalog-category-nav::before { content: none !important; display: none !important; }
.catalog-listing-page .catalog-category-scroll,
.catalog-listing-page .catalog-subcategory-row {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.catalog-listing-page .catalog-category-scroll::-webkit-scrollbar,
.catalog-listing-page .catalog-subcategory-row::-webkit-scrollbar { display: none; }
/* Level 1 — primary chips (pill, icon, optional count) */
.catalog-listing-page .catalog-category-link {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  min-height: 0 !important;
  padding: 7px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: var(--card-2) !important;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: var(--t);
}
.catalog-listing-page .catalog-category-link > i { width: auto; height: auto; background: none !important; border-radius: 0 !important; color: var(--brand-1); font-size: 12px; }
.catalog-listing-page .catalog-category-link small {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--card-3);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.catalog-listing-page .catalog-category-link:hover,
.catalog-listing-page .catalog-category-link.active {
  border-color: var(--brand-1) !important;
  background: var(--brand-soft) !important;
  color: var(--brand-1);
}
.catalog-listing-page .catalog-category-link.active small { background: var(--brand-1); color: #fff; }
/* Level 2 / 3 — lighter sub-chips, visually secondary */
.catalog-listing-page .catalog-subcategory-row {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--line) !important;
}
.catalog-listing-page .catalog-subcategory-link {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  min-height: 0 !important;
  padding: 5px 11px !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 999px !important;
  background: transparent !important;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  scroll-snap-align: start;
}
.catalog-listing-page .catalog-subcategory-link:hover,
.catalog-listing-page .catalog-subcategory-link.active {
  border-color: var(--brand-1) !important;
  background: var(--brand-soft) !important;
  color: var(--brand-1);
}
.catalog-listing-page .catalog-subcategory-row--level3 { border-top: 0 !important; margin-top: 6px !important; padding-top: 0 !important; }
.catalog-listing-page .catalog-subcategory-link--level3 { font-size: 11px; padding: 4px 10px !important; opacity: .95; }
/* Fade hint on the right edge so users see there's more to scroll. */
.catalog-listing-page .catalog-category-scroll,
.catalog-listing-page .catalog-subcategory-row {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
}

/* ---- 6. Mobile filters modal — fixed to viewport, capped height, INTERNAL scroll ----
   Fixes:
   - Modal is anchored to the whole screen (fixed overlay), centred.
   - The CARD height is capped to the viewport, and the CARD scrolls its own
     content (header + footer pinned, middle list scrolls) — so it can never be
     "too long" or clipped: everything is reachable via the inner scroll.
   - Hidden via display:none; shown only when JS adds .is-open.                */
@media (max-width: 760px) {
  /* CRITICAL: main.container > * gets `animation: fadeUp ... both`, and a CSS
     animation on an ancestor makes it the containing block for position:fixed
     — which is why the modal was trapped INSIDE .catalog-layout instead of the
     viewport. Kill that animation on the catalog wrappers so `fixed` anchors to
     the real viewport again. */
  .catalog-listing-page .catalog-layout,
  .catalog-listing-page .catalog-main,
  .catalog-listing-page .catalog-sidebar,
  .catalog-listing-page .catalog-sidebar * { animation: none !important; }
  .catalog-listing-page .catalog-layout,
  .catalog-listing-page .catalog-main { transform: none !important; filter: none !important; will-change: auto !important; }
  /* Full-screen overlay, flex-centred. */
  .catalog-listing-page .catalog-sidebar {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1002 !important;
    display: none !important;              /* hidden by default */
    align-items: center;
    justify-content: center;
    width: 100vw !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;           /* the CARD scrolls, not the overlay */
    background: transparent !important;
    transform: none !important;
  }
  .catalog-listing-page .catalog-sidebar.is-open { display: flex !important; }
  /* The card = the modal. Column layout, height capped so it always fits on
     screen above the bottom nav; its body scrolls internally. */
  .catalog-listing-page .catalog-sidebar .filter-card {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
    width: min(94vw, 420px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 84px - env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    background: var(--bg-elev) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
    overflow: hidden !important;           /* clip to rounded corners */
    text-align: left;
  }
  /* Pinned header (does not scroll). */
  .catalog-listing-page .catalog-sidebar .filter-mobile-head {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--line);
    background: var(--card);
  }
  .catalog-listing-page .catalog-sidebar .filter-title { display: none !important; }
  /* Scrolling middle: every child between head and actions grows/scrolls.
     We make each filter-group a normal block; the SCROLL happens on a wrapper
     we synthesise by letting the groups flex and the card clip. To guarantee a
     single scroll region we mark the groups' shared area scrollable via the
     card's ::-webkit and a min-height:0 flex child trick below. */
  .catalog-listing-page .catalog-sidebar .filter-card > *:not(.filter-mobile-head):not(.filter-actions) {
    flex: 0 0 auto;
  }
  /* The group block is the scroll area: collect groups by giving the FIRST
     scrollable region flex:1. Simplest robust approach — make the whole set of
     groups scroll by wrapping them via overflow on the card's inner region. */
  .catalog-listing-page .catalog-sidebar .filter-card {
    /* re-declared to add the inner scroll behaviour */
  }
  .catalog-listing-page .catalog-sidebar .filter-group,
  .catalog-listing-page .catalog-sidebar .filter-card > .filter-title + * {
    display: block !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--line);
  }
  .catalog-listing-page .catalog-sidebar .filter-group:last-of-type { border-bottom: 0; }
  /* Make the middle scroll: the groups live directly in the flex column, so we
     give them a shared scroll container via a flex spacer. Since there is no
     wrapper element, we instead cap the card and let it scroll, but keep head &
     actions sticky so they never leave the viewport. */
  .catalog-listing-page .catalog-sidebar .filter-card { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .catalog-listing-page .catalog-sidebar .filter-mobile-head { position: sticky; top: 0; z-index: 3; }
  .catalog-listing-page .catalog-sidebar .filter-actions {
    position: sticky !important;
    bottom: 0 !important;
    left: auto !important;
    width: auto !important;
    z-index: 3;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    background: var(--bg-elev) !important;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 18px rgba(0,0,0,.18) !important;
  }
  .catalog-listing-page .catalog-sidebar .filter-actions .btn { min-height: 46px; margin: 0 !important; }
  /* Backdrop fills the whole screen below the modal. */
  .catalog-listing-page .filter-backdrop { z-index: 1001 !important; }
  .catalog-listing-page .mobile-nav { z-index: 300; }
}

/* ---- Cart line: thumbnail + prettier listing (added) ---- */
.cart-page .cart-line{grid-template-columns:64px minmax(0,1fr) auto auto auto;gap:16px}
.cart-line-thumb{width:64px;height:64px;border-radius:14px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--card-2);border:1px solid var(--line-2)}
.cart-line-thumb img{width:100%;height:100%;object-fit:cover}
.cart-line-thumb-fallback{color:var(--muted);font-size:22px}
.cart-line-variation-tag{display:inline-block;padding:2px 9px;margin-left:6px;border-radius:999px;background:var(--card-2);border:1px solid var(--line-2);font-size:12px;font-weight:600;color:var(--muted)}
.product-badge.badge-free{background:var(--brand-soft);color:var(--brand-1);border:1px solid rgba(104,172,61,.42)}
.cart-line-free{border-color:rgba(104,172,61,.42)!important}
.cart-promo-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.cart-promo-remove-form{margin:0;flex-shrink:0}
.cart-promo-remove{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.cart-promo-remove:hover{color:var(--danger,#e5484d)}
.cart-promo-hint{font-size:12px;margin:2px 0 10px;line-height:1.4}
.cart-promo-hint a{color:var(--brand-1);text-decoration:underline}
@media(max-width:760px){.cart-page .cart-line{grid-template-columns:56px minmax(0,1fr) auto}.cart-line-thumb{width:56px;height:56px}.cart-promo-status{align-items:flex-start;flex-direction:column;gap:8px}.cart-promo-info{width:100%;justify-content:space-between}}


/* ==========================================================================
   PDP2 — Compact & Modern product page redesign (brand green palette)
   Appended override block. Uses existing design tokens only:
   --brand-1 #68ac3d, --brand-2 #4f8a2c, --brand (gradient), --brand-soft,
   --card, --card-2, --line, --line-2, --fg, --fg-soft, --muted,
   --ok/--warn/--bad (+ *-s soft variants), --radius, --pill, --t, --ease.
   Loaded last, so these rules win over the earlier pdp2 styles by cascade.
   ========================================================================== */

/* Tighter page shell */
.pdp2 { padding-bottom: var(--sp-6); }
.pdp2-bc { padding: var(--sp-3) 0; font-size: 12.5px; }

/* Compact 2-column layout with a sticky buy column on desktop */
.pdp2-layout {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-3);
}

/* --- Gallery: smaller, crisper, sticky on desktop --- */
.pdp2-gallery-col { position: sticky; top: var(--sp-4); }
.pdp2-gallery { gap: var(--sp-2); }
.pdp2-img-wrap,
.pdp2-img-placeholder {
  aspect-ratio: 1 / 1;
  max-width: 300px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 26px -14px rgba(0,0,0,.45);
}
.pdp2-thumb { width: 48px; height: 48px; border-width: 2px; }

/* Trust badges: compact single-row pills */
.pdp2-trust { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.pdp2-trust-item {
  flex: 1 1 auto;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: var(--pill);
}
.pdp2-trust-item i { font-size: 13px; }

/* --- Info column --- */
.pdp2-info-col { display: flex; flex-direction: column; gap: var(--sp-3); }
.pdp2-title-block { margin-bottom: 0; }
.pdp2-title { font-size: clamp(20px, 3.2vw, 27px); margin-bottom: var(--sp-2); letter-spacing: -0.01em; }
.pdp2-tag { padding: 3px 9px; font-size: 11px; }

/* Warranty chip — compact inline row */
.pdp2-warranty {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card-2);
}
.pdp2-warranty--covered { border-color: rgba(104,172,61,.35); background: var(--brand-soft); }
.pdp2-warranty__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--brand); color: #fff; font-size: 14px; }
.pdp2-warranty--none .pdp2-warranty__icon { background: var(--card); color: var(--muted); }
.pdp2-warranty__body { display: grid; gap: 1px; min-width: 0; }
.pdp2-warranty__label { font-size: 13px; color: var(--fg); }
.pdp2-warranty__text { font-size: 12px; color: var(--muted); }

/* Description — lighter, more compact */
.pdp2-desc {
  font-size: 13.5px; line-height: 1.55;
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  border: 1px solid var(--line);
  margin-bottom: 0;
}

/* --- Variant chips: modern segmented look --- */
.pdp2-variants { margin-bottom: 0; }
.pdp2-variants-label { font-size: 11.5px; margin-bottom: var(--sp-2); }
.pdp2-variants-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pdp2-var-btn {
  gap: 3px;
  padding: 10px 12px;
  border-width: 1.5px;
  border-radius: 12px;
}
.pdp2-var-btn.is-active {
  box-shadow: 0 0 0 1px var(--brand-1), 0 10px 24px -14px rgba(79,138,44,.7);
}
.pdp2-var-name { font-size: 13px; }
.pdp2-var-price { font-size: 12.5px; }

/* --- Buy panel: one cohesive modern card --- */
.pdp2-panel { gap: var(--sp-3); }
.pdp2-panel .pdp2-price-row {
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--brand-soft), var(--card-2));
  border: 1px solid rgba(104,172,61,.28);
}
.pdp2-price-now { font-size: clamp(24px, 4.5vw, 32px); }
.pdp2-price-disc { background: var(--brand); color: #fff; }

/* Stock pill a touch smaller */
.pdp2-stock { padding: 6px 12px; font-size: 12.5px; }

/* The order form as a single grouped card */
.pdp2-panel .pdp2-form {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

/* Volume tiers + fields compact */
.pdp2-tiers { padding: 10px 12px; }
.pdp2-tier-chip { padding: 3px 9px; font-size: 11.5px; }
.pdp2-fields { padding: var(--sp-3) var(--sp-4); border-radius: 12px; }
.pdp2-fields legend { font-size: 12.5px; }

/* Qty + total row */
.pdp2-buy { gap: var(--sp-3); }
.pdp2-panel .pdp2-total {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card-2);
}
.pdp2-panel .pdp2-total strong { font-size: 24px; }
.pdp2-buy .qty-stepper,
.pdp2-panel .qty-stepper { height: 46px; }

/* CTA — bold, modern, brand gradient */
.pdp2-panel .pdp2-cart-btn {
  min-height: 50px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 750;
  box-shadow: 0 14px 30px -12px rgba(104,172,61,.7);
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.pdp2-panel .pdp2-cart-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 18px 38px -12px rgba(104,172,61,.8);
}
.pdp2-panel .pdp2-cart-btn:active { transform: translateY(0); }
.pdp2-cta-hint { font-size: 11.5px; }

/* Sold-out + related tightened */
.pdp2-soldout { padding: var(--sp-4); border-radius: 14px; }
.pdp2-related { margin-top: var(--sp-6); }

/* --- Responsive: release the sticky column, keep it compact --- */
@media (max-width: 900px) {
  .pdp2-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
  .pdp2-gallery-col { position: static; }
  .pdp2-img-wrap, .pdp2-img-placeholder { max-width: 260px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .pdp2-img-wrap, .pdp2-img-placeholder { max-width: 220px; }
  .pdp2-trust-item { flex: 1 1 100%; }
  .pdp2-panel .pdp2-form { padding: var(--sp-3); }
}

/* ==========================================================================
   PDP2 — TOTAL REBUILD (v2). Compact, dense, "spec-sheet" product layout.
   A completely different design from the previous card-heavy version.
   Pure CSS override (markup/classes unchanged). Brand-green tokens only:
   --brand-1 #68ac3d, --brand-2 #4f8a2c, --brand (grad), --brand-soft,
   --card, --card-2, --line, --line-2, --fg, --fg-soft, --muted,
   --ok/--warn/--bad (+ *-s). Loaded last => wins by cascade.
   Strategy: neutralize old card chrome, rebuild flat & tight.
   ========================================================================== */

/* ---- Reset the old "panel/card" chrome so we build fresh & flat ---- */
/* The parent <main class="container"> already caps the width and adds the side
   gutter, so the product page adds NO width cap and NO side padding of its own.
   This stretches it to the sides exactly like the catalog page. Only a little
   bottom breathing room remains (as margin, so padding stays zero). */
.pdp2 { max-width: none; padding: 0; margin-bottom: var(--sp-6); }
.pdp2-gallery-col,
.pdp2-info-col { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }

/* Slim breadcrumb */
.pdp2-bc { padding: var(--sp-3) 0; font-size: 12px; opacity: .85; }

/* ---- New layout: narrow gallery rail + dense info body ---- */
.pdp2-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-2);
  align-items: start;
}
.pdp2-gallery-col { position: sticky; top: 84px; }

/* Square, flat gallery with a thin brand frame */
.pdp2-gallery { gap: 8px; }
.pdp2-img-wrap,
.pdp2-img-placeholder {
  aspect-ratio: 1 / 1; max-width: 260px; width: 100%; margin: 0;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--card-2);
}
.pdp2-img-placeholder { font-size: 44px; }
.pdp2-thumbs { justify-content: flex-start; gap: 6px; }
.pdp2-thumb { width: 42px; height: 42px; border-width: 2px; border-radius: 9px; }

/* Trust => proper brand chips/tags under the gallery */
.pdp2-trust { flex-direction: column; gap: 8px; margin-top: var(--sp-3); }
.pdp2-trust--mobile { display: none !important; }
.pdp2-trust-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(104,172,61,.28);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-soft), var(--card-2));
  font-size: 12.5px; font-weight: 700; color: var(--fg);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.pdp2-trust-item:hover {
  transform: translateY(-1px);
  border-color: var(--brand-1);
  box-shadow: 0 8px 18px -12px rgba(104,172,61,.6);
}
.pdp2-trust-item i {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 7px;
  background: var(--brand); color: #fff; font-size: 11px;
}

/* ================= INFO COLUMN = dense stack ================= */
.pdp2-info-col { display: flex; flex-direction: column; gap: 0; }

/* Title header — inline, tight, with a green accent underline */
.pdp2-title-block {
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--line);
}
.pdp2-title {
  font-size: clamp(16px, 2.4vw, 21px); font-weight: 800;
  line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 8px;
}
.pdp2-tags { gap: 6px; }
.pdp2-tag {
  padding: 2px 8px; font-size: 10.5px; font-weight: 700;
  border-radius: 6px; background: var(--brand-soft); color: var(--brand-1);
  border: 0;
}

/* Warranty => single slim inline line, no big box */
.pdp2-warranty {
  display: flex !important; align-items: center; gap: 8px;
  grid-template-columns: none !important;
  margin: 0 0 var(--sp-3) !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
}
.pdp2-warranty__icon {
  width: 22px !important; height: 22px !important; font-size: 11px !important;
  border-radius: 6px !important; background: var(--brand-soft) !important;
  color: var(--brand-1) !important;
}
.pdp2-warranty--none .pdp2-warranty__icon { background: var(--card-2) !important; color: var(--muted) !important; }
.pdp2-warranty__body { display: flex !important; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pdp2-warranty__label { font-size: 12.5px !important; font-weight: 700; margin: 0 !important; }
.pdp2-warranty__text { font-size: 12px !important; color: var(--muted) !important; }

/* Description => plain, quiet text, no card */
.pdp2-desc {
  font-size: 13px !important; line-height: 1.55 !important;
  color: var(--fg-soft) !important;
  padding: 0 0 var(--sp-3) !important; margin: 0 0 var(--sp-3) !important;
  background: none !important; border: 0 !important;
  border-bottom: 1px dashed var(--line) !important; border-radius: 0 !important;
}
.pdp2-desc::before { display: none !important; }

/* ---- Variant selector => compact segmented pills row ---- */
.pdp2-variants { margin: 0 0 var(--sp-3); }
.pdp2-variants-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px;
}
.pdp2-variants-grid { display: flex; flex-wrap: wrap; gap: 6px; grid-template-columns: none; }
.pdp2-var-btn {
  flex: 0 1 auto; flex-direction: row; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: var(--card-2); min-height: 0;
}
.pdp2-var-btn:hover { transform: none; background: var(--brand-soft); border-color: var(--brand-1); }
.pdp2-var-btn.is-active {
  background: var(--brand-soft); border-color: var(--brand-1);
  box-shadow: inset 0 0 0 1px var(--brand-1);
}
.pdp2-var-name { font-size: 12.5px; font-weight: 700; }
.pdp2-var-price { font-size: 12px; }
.pdp2-var-price s { font-size: 10px; }
.pdp2-var-badge { position: static; margin-left: 2px; padding: 1px 6px; font-size: 9.5px; }

/* ================= BUY BLOCK = one tight bar ================= */
.pdp2-panel { gap: var(--sp-3); }

/* Price + stock => single inline row, flat */
.pdp2-panel .pdp2-price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 0 var(--sp-3) !important; margin: 0;
  background: none !important; border: 0 !important;
  border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
}
.pdp2-price-now { font-size: clamp(26px, 4vw, 34px); font-weight: 850; line-height: 1; }
.pdp2-price-old { font-size: 14px; }
.pdp2-price-disc { padding: 2px 8px; font-size: 12px; background: var(--brand); color: #fff; }
.pdp2-stock { padding: 5px 10px; font-size: 12px; }

/* Notices slim */
.pdp2-notice { padding: 8px 12px; font-size: 12.5px; border-radius: 8px; }

/* Order form flows inline (no wrapper card) */
.pdp2-panel .pdp2-form {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
}

/* Tiers => inline chips line */
.pdp2-tiers { padding: 8px 0 !important; background: none !important; border: 0 !important; }
.pdp2-tiers-head { font-size: 12px; margin-bottom: 6px; }
.pdp2-tier-chip { padding: 2px 8px; font-size: 11px; }

/* Custom fields => flat, no framed fieldset */
.pdp2-fields { padding: 0 !important; background: none !important; border: 0 !important; }
.pdp2-fields legend { font-size: 12px; padding: 0; }

/* Qty + total => compact single row */
.pdp2-buy { display: flex; align-items: flex-end; gap: 12px; }
.pdp2-qty { gap: 5px; }
.pdp2-qty-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pdp2-buy .qty-stepper,
.pdp2-panel .qty-stepper { width: 118px !important; height: 42px !important; grid-template-columns: 38px 1fr 38px; border-radius: 10px; }
.pdp2-panel .pdp2-total {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px !important; border-radius: 10px !important;
  border: 1px solid var(--line) !important; background: var(--card-2) !important;
}
.pdp2-panel .pdp2-total span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.pdp2-panel .pdp2-total strong { font-size: 20px !important; }

/* CTA => full-width flat brand button, tight hint */
.pdp2-cta { gap: 6px; }
.pdp2-panel .pdp2-cart-btn {
  min-height: 46px !important; border-radius: 10px !important;
  font-size: 14.5px; font-weight: 750;
  box-shadow: 0 10px 24px -12px rgba(104,172,61,.65);
  transition: transform var(--t), filter var(--t);
}
.pdp2-panel .pdp2-cart-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.pdp2-cta-hint { justify-content: center; text-align: center; font-size: 11px; }

/* Sold-out slim */
.pdp2-soldout { padding: var(--sp-3) var(--sp-4); border-radius: 10px; gap: 12px; }
.pdp2-soldout i { font-size: 20px; }

/* Related — tighter top gap */
.pdp2-related { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }

/* ================= RESPONSIVE ================= */
@media (max-width: 760px) {
  .pdp2-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
  .pdp2-gallery-col { position: static; display: flex; gap: var(--sp-4); align-items: flex-start; }
  .pdp2-gallery { flex: 0 0 140px; }
  .pdp2-img-wrap, .pdp2-img-placeholder { max-width: 140px; }
  .pdp2-trust { flex: 1; margin-top: 0; }
}
@media (max-width: 480px) {
  .pdp2-gallery-col { flex-direction: column; }
  .pdp2-gallery { flex: none; width: 100%; }
  .pdp2-img-wrap, .pdp2-img-placeholder { max-width: 180px; margin: 0 auto; }
  .pdp2-buy { flex-direction: column; align-items: stretch; }
  .pdp2-buy .qty-stepper, .pdp2-panel .qty-stepper { width: 100% !important; max-width: 100%; }
}

/* ==========================================================================
   STRUCTURE LAYER — group the flat sections back into distinct compact cards
   so the page reads structured (title/desc, variants, and buy each in a card).
   ========================================================================== */

/* Space the info column into separated blocks */
.pdp2-info-col { gap: var(--sp-3) !important; }

/* --- Card 1: header (title + tags + warranty + description) --- */
.pdp2-title-block {
  margin: 0 !important;
  padding: var(--sp-4) !important;
  border: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 14px 14px 0 0 !important;
  background: var(--card-2) !important;
}
.pdp2-warranty {
  margin: 0 !important;
  padding: 10px var(--sp-4) !important;
  border: 1px solid var(--line) !important;
  border-top: 0 !important;
  background: var(--card-2) !important;
}
.pdp2-desc {
  margin: 0 !important;
  padding: var(--sp-4) !important;
  border: 1px solid var(--line) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  background: var(--card-2) !important;
}
/* If there is no description, the warranty becomes the last row -> round it */
.pdp2-warranty:last-child { border-radius: 0 0 14px 14px !important; }

/* --- Card 2: variant selector --- */
.pdp2-variants {
  margin: 0 !important;
  padding: var(--sp-4) !important;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

/* --- Card 3: the buy panel (price + form) as one framed card --- */
.pdp2-panel {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.4);
}
/* keep the price row divider inside the card */
.pdp2-panel .pdp2-price-row { border-bottom: 1px solid var(--line) !important; }

/* Empty-state + sold-out also get a card so nothing floats */
.pdp2-empty { border-radius: 14px; }

@media (max-width: 480px) {
  .pdp2-title-block, .pdp2-warranty, .pdp2-desc,
  .pdp2-variants, .pdp2-panel { padding: var(--sp-3) !important; }
}

/* ==========================================================================
   HERO REBUILD (home page) — sexier, more compact, less gap to the top.
   Overrides .home-hero-v2 and its children. Brand-green tokens only.
   ========================================================================== */

/* Pull the hero up: less gap to the top */
main.container > .home-hero.home-hero-v2 { margin-top: 4px !important; }
.home-hero-v2 {
  margin-top: 4px !important;
  padding: 22px 30px !important;             /* compact but breathable */
  align-items: center !important;
  gap: 28px !important;
  border: 1px solid rgba(104,172,61,.22);
  border-radius: 22px !important;
  /* richer, glossier brand backdrop */
  background:
    radial-gradient(600px 300px at 88% -10%, rgba(104,172,61,.30), transparent 60%),
    linear-gradient(125deg, var(--card) 0%, var(--card) 55%, rgba(104,172,61,.14) 100%) !important;
  box-shadow: 0 24px 60px -30px rgba(79,138,44,.55);
}
/* Brighter glow accent */
.home-hero-v2::before {
  background: radial-gradient(460px 240px at 92% 8%, rgba(104,172,61,.34), transparent 66%) !important;
}
.home-hero-v2::after {
  right: -60px !important; bottom: -110px !important;
  border-color: rgba(104,172,61,.22) !important;
}

/* Eyebrow => glossy brand pill */
.home-hero-v2 .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 12px !important; padding: 5px 12px !important;
  border-radius: 999px;
  background: var(--brand-soft);
  border: 1px solid rgba(104,172,61,.35);
  color: var(--brand-1);
  font-size: 10.5px !important; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}

/* Punchier, tighter title */
.home-hero-v2 .hero-title {
  margin-bottom: 10px !important;
  font-size: clamp(30px, 4.4vw, 46px) !important;
  line-height: 1.02 !important; letter-spacing: -.03em !important;
  font-weight: 850;
}
.home-hero-v2 .hero-sub { font-size: 13.5px !important; line-height: 1.5 !important; color: var(--fg-soft); }
.home-hero-v2 .hero-cta { margin-top: 16px !important; gap: 10px !important; }
.home-hero-v2 .hero-cta .btn { min-height: 44px !important; padding: 11px 18px !important; font-size: 13px !important; }
.home-hero-v2 .hero-cta .btn-primary { box-shadow: 0 14px 30px -12px rgba(104,172,61,.7); }

/* Proof => sexy glass stat chips */
.home-hero-v2 .hero-proof { gap: 8px !important; min-width: 168px !important; }
.home-hero-v2 .hero-proof span {
  gap: 10px !important; padding: 10px 13px !important;
  border: 1px solid rgba(104,172,61,.26) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(104,172,61,.14), rgba(20,28,38,.5)) !important;
  backdrop-filter: blur(10px);
  font-size: 12px !important; font-weight: 700;
  transition: transform var(--t), border-color var(--t);
}
.home-hero-v2 .hero-proof span:hover { transform: translateY(-1px); border-color: var(--brand-1) !important; }
.home-hero-v2 .hero-proof i {
  display: grid; place-items: center;
  width: 26px !important; height: 26px !important;
  border-radius: 8px; background: var(--brand); color: #fff !important; font-size: 12px !important;
}

@media (max-width: 760px) {
  /* Light, compact, single-column hero — no overlap.
     The base theme absolutely-positions .hero-proof over the buttons;
     force it back into normal flow below the CTA. */
  .home-hero-v2 {
    display: block !important;
    margin-top: 6px !important;
    padding: 14px 15px 15px !important;
    border-radius: 18px !important;
  }
  .home-hero-v2 .hero-title { font-size: clamp(22px, 6.5vw, 30px) !important; max-width: none !important; }
  .home-hero-v2 .hero-sub { font-size: 12.5px !important; max-width: none !important; }
  .home-hero-v2 .hero-cta { margin-top: 13px !important; }

  .home-hero-v2 .hero-proof {
    position: static !important;                 /* was absolute -> caused overlap */
    right: auto !important; left: auto !important; bottom: auto !important;
    display: flex !important; flex-wrap: wrap; grid-template-columns: none !important;
    gap: 6px !important; margin-top: 13px !important; min-width: 0 !important;
  }
  .home-hero-v2 .hero-proof span {
    flex: 1 1 auto; justify-content: center;
    gap: 6px !important; padding: 7px 10px !important;
    font-size: 11px !important; white-space: nowrap;
    backdrop-filter: none;                        /* lighter on mobile */
    background: var(--brand-soft) !important;
  }
  .home-hero-v2 .hero-proof i { width: 20px !important; height: 20px !important; font-size: 10px !important; }
}


/* =========================================================================
   Account pages — compact heroes & tighter header→hero gap
   Scoped to account-only hero classes (.account-hero / .balance-hero /
   .profile-hero). Appended after all prior rules so it wins the cascade.
   Marker: account-hero-compact
   ========================================================================= */

/* 1) Smaller gap between the top menu (header) and the hero.
   Account pages open with <section class="section"> (margin-top ~52px) sitting
   under main.container's top padding. Pull that first section up on the pages
   whose hero is one of the account heroes. */
main.container > section.section:has(> .account-hero),
main.container > section.section:has(.balance-hero),
main.container > section.section:has(.profile-hero),
main.container > section.section.sms-page,
main.container > .profile-overview:has(.profile-hero) {
    margin-top: var(--sp-4) !important;   /* 16px instead of ~52px */
}

/* 2) Shared account hero (orders, prizes, tickets, referrals, balance history)
   — simpler & more compact: flat surface, less padding, smaller title. */
.account-hero {
    align-items: center;
    gap: 14px;
    margin-bottom: var(--sp-4);
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--card) !important;   /* drop the heavy radial gradient */
    box-shadow: none !important;
}
.account-hero h1 {
    margin: 2px 0 0;
    font-size: clamp(20px, 3vw, 26px) !important;
}
.account-hero p {
    margin-top: 3px;
    font-size: 13px;
}
.account-hero__eyebrow { font-size: 11px; }

/* 3) Balance hero on /account — compact & flat. */
.balance-hero {
    padding: 16px 18px !important;
    border-radius: 14px !important;
    background: var(--card) !important;
    box-shadow: none !important;
    gap: 12px !important;
}
.balance-hero-value {
    font-size: 34px !important;
    margin: 2px 0 4px !important;
}

/* 4) Profile hero on /account/profile — compact & flat. */
.profile-hero {
    align-items: center;
    gap: 16px;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    background: var(--card) !important;
    box-shadow: none !important;
}
.profile-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    font-size: 22px !important;
    box-shadow: none !important;
}
.profile-identity h1 {
    margin: 3px 0 !important;
    font-size: clamp(22px, 3.4vw, 30px) !important;
}
.profile-identity p { font-size: 13px; }

/* Mobile: keep it tight. */
@media (max-width: 680px) {
    main.container > section.section:has(> .account-hero),
    main.container > section.section:has(.balance-hero),
    main.container > section.section:has(.profile-hero),
    main.container > .profile-overview:has(.profile-hero) {
        margin-top: var(--sp-3) !important;   /* 12px */
    }
    .account-hero { padding: 14px 16px; border-radius: 12px; }
    .balance-hero { padding: 14px 16px !important; border-radius: 12px !important; }
    .profile-hero { padding: 14px 16px !important; border-radius: 12px !important; }
}


/* =========================================================================
   Wheel nav icon — living, color-shifting icon (header + hamburger menu)
   Marker: wheel-nav-shimmer
   Both buttons share .wheel-nav-link / .wheel-nav-icon, so this styles both.
   ========================================================================= */

/* Continuous color-shift + soft glow so the icon feels "alive" at rest. */
.wheel-nav-icon {
    display: inline-block;
    color: var(--brand-1);
    animation: wheel-nav-hue 6s linear infinite, wheel-nav-spin 9s linear infinite;
    transform-origin: 50% 50%;
    will-change: filter, transform;
}

/* Cycle through vivid colors + matching glow. */
@keyframes wheel-nav-hue {
    0%   { color: #68ac3d; filter: drop-shadow(0 0 3px rgba(104,172,61,.75)); }
    25%  { color: #2fb8d6; filter: drop-shadow(0 0 5px rgba(47,184,214,.8)); }
    50%  { color: #8a5cff; filter: drop-shadow(0 0 5px rgba(138,92,255,.8)); }
    75%  { color: #ffd166; filter: drop-shadow(0 0 5px rgba(255,209,102,.85)); }
    100% { color: #68ac3d; filter: drop-shadow(0 0 3px rgba(104,172,61,.75)); }
}

/* Very slow, subtle idle rotation of the wheel. */
@keyframes wheel-nav-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* On hover/focus: brighten the glow and spin the wheel noticeably faster,
   while keeping the color shimmer running. Overrides the old one-shot nudge. */
.wheel-nav-link:hover .wheel-nav-icon,
.wheel-nav-link:focus-visible .wheel-nav-icon {
    animation: wheel-nav-hue 3s linear infinite, wheel-nav-spin 1.6s linear infinite !important;
}

/* Respect users who prefer less motion: keep a gentle color shimmer only,
   no spinning. */
@media (prefers-reduced-motion: reduce) {
    .wheel-nav-icon {
        animation: wheel-nav-hue 8s linear infinite;
    }
    .wheel-nav-link:hover .wheel-nav-icon,
    .wheel-nav-link:focus-visible .wheel-nav-icon {
        animation: wheel-nav-hue 8s linear infinite !important;
    }
}

/* --- Country flag overlay on product image ---------------------------------
   When a product title contains a country flag emoji (e.g. "Amazon 🇺🇸"), we
   show that flag as a small chip pinned to the BOTTOM-LEFT of the product image
   — both on the catalog card (.product-thumb) and the product page
   (.pdp2-img-wrap). The chip has a subtle backing so the flag stays readable on
   any image. Purely decorative (aria-hidden), so no layout shift. */
.product-thumb { position: relative; }
.pdp2-img-wrap { position: relative; }
.product-flag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 20px;
    padding: 3px 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .45);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
}
/* Slightly larger flag on the product page hero image. */
.pdp2-flag {
    left: 10px;
    bottom: 10px;
    font-size: 26px;
    padding: 4px 7px;
    border-radius: 10px;
}

/* --- Prevent iOS auto-zoom on input focus ----------------------------------
   iOS Safari (and some Android browsers) automatically zoom the page in when a
   text field with a font-size BELOW 16px receives focus (e.g. when the on-screen
   keyboard opens). The site had a 16px rule only inside @media(max-width:760px)
   and without !important, so more specific field styles (search box, form
   inputs, modal fields, etc.) overrode it and re-triggered the zoom.

   This block forces a minimum 16px font on every text-entry control on touch
   devices, with enough specificity + !important to win over those overrides.
   We DELIBERATELY do NOT touch the viewport meta (no user-scalable=no), so
   pinch-to-zoom accessibility is preserved — we only stop the unwanted
   auto-zoom-in on focus. 16px is the exact threshold iOS uses; anything >=16px
   disables the behaviour. */
@media (max-width: 820px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
    select,
    textarea {
        font-size: 16px !important;
    }
}
`r`n

/* Compact product title beside the admin edit button */
.pdp2-title-block .pdp2-title{font-size:clamp(14px,1.5vw,18px)!important}
@media(max-width:600px){.pdp2-title-block .pdp2-title{font-size:clamp(13px,3.8vw,16px)!important}}

/* ============================================================
   Volume "Buy more, save more" block — friendly redesign
   These rules are last in the file so they win over earlier
   .pdp2-tiers / .pdp2-tier-chip declarations.
   ============================================================ */
.pdp2-panel .pdp2-tiers {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(104,172,61,.28) !important;
    background:
        linear-gradient(135deg, var(--brand-soft) 0%, transparent 70%),
        var(--card-2) !important;
    margin: 4px 0 2px;
}
.pdp2-tiers-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.pdp2-tiers-badge {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--brand-1);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 4px 12px -4px rgba(104,172,61,.7);
}
.pdp2-tiers-title { display: flex; flex-direction: column; line-height: 1.25; }
.pdp2-tiers-title strong { font-size: 14.5px; font-weight: 800; color: var(--fg); }
.pdp2-tiers-title small { font-size: 12.5px; color: var(--muted); }
.pdp2-tiers-title small b { color: var(--brand-1); font-weight: 800; }

.pdp2-tiers-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp2-tier-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    color: var(--fg) !important;
    font-size: 12.5px !important;
    font-weight: 600;
    transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.pdp2-tier-chip-qty { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.pdp2-tier-chip-qty i { font-size: 11px; opacity: .8; }
.pdp2-tier-chip-off {
    font-weight: 850;
    color: var(--brand-1);
    background: var(--brand-soft);
    padding: 1px 7px;
    border-radius: 999px;
}
/* The tier the current quantity qualifies for. */
.pdp2-tier-chip.is-active {
    background: var(--brand-1) !important;
    border-color: var(--brand-1) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(104,172,61,.8);
}
.pdp2-tier-chip.is-active .pdp2-tier-chip-qty { color: rgba(255,255,255,.9); }
.pdp2-tier-chip.is-active .pdp2-tier-chip-off { background: rgba(255,255,255,.22); color: #fff; }

.pdp2-tiers-hint {
    display: flex; align-items: center; gap: 7px;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--muted);
}
.pdp2-tiers-hint i { color: var(--brand-1); }

/* Total block — show the pre-discount price + savings when a tier kicks in. */
.pdp2-panel .pdp2-total { align-items: center; }
.pdp2-total-labels { display: flex; flex-direction: column; gap: 2px; }
.pdp2-total-was {
    font-size: 12px !important;
    color: var(--muted) !important;
    text-decoration: line-through;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 600 !important;
}
.pdp2-total-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pdp2-total-save {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 800;
    color: var(--brand-1);
    background: var(--brand-soft);
    border: 1px solid rgba(104,172,61,.25);
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .pdp2-total-amount { align-items: flex-end; }
    .pdp2-tiers-title small { font-size: 12px; }
}

/* ==========================================================================
   Catalog category navigator (remade) — .catnav
   A comfortable, fully link-based browser that needs NO JavaScript:
     Row 1 (.catnav-strip)  — main sections as a scrollable pill bar.
     Row 2 (.catnav-subrow) — subcategories of the active section as
                              wrapping chips (was a cramped filter dropdown).
     Row 3 (.catnav-subrow--l3) — level-3 refinements under the active
                              subcategory, lighter chips.
   Every chip is a real <a>, so it works with JS off and is keyboard/screen
   reader friendly. Uses existing theme tokens (--card, --line, --brand-1,
   --brand-soft, …).
   ========================================================================== */
.catnav { display:grid; gap:10px; margin:0; }

/* --- Row 1: main sections --- */
.catnav-strip {
    display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
    scroll-snap-type:x proximity; scrollbar-width:thin;
}
.catnav-strip::-webkit-scrollbar { height:6px; }
.catnav-strip::-webkit-scrollbar-thumb { background:var(--line-2,var(--line)); border-radius:999px; }
.catnav-chip {
    flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
    padding:9px 14px; border:1px solid var(--line); border-radius:999px;
    background:var(--card-2,var(--card)); color:var(--fg);
    font-size:13px; font-weight:700; white-space:nowrap; text-decoration:none;
    scroll-snap-align:start; transition:var(--t);
}
.catnav-chip > i { color:var(--brand-1); font-size:13px; }
.catnav-chip small {
    display:inline-grid; place-items:center; min-width:18px; height:18px;
    padding:0 5px; border-radius:999px; background:var(--line);
    color:var(--muted); font-size:11px; font-weight:800;
}
.catnav-chip:hover { border-color:var(--brand-1); background:var(--brand-soft); }
.catnav-chip.is-active {
    border-color:var(--brand-1); color:#fff;
    background:var(--brand-1); box-shadow:0 6px 16px -8px var(--brand-1);
}
.catnav-chip.is-active > i { color:#fff; }
.catnav-chip.is-active small { background:rgba(255,255,255,.25); color:#fff; }

/* --- Rows 2 & 3: subcategory / refinement chips (wrapping, no dropdown) --- */
.catnav-subrow {
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    padding-top:10px; border-top:1px solid var(--line);
}
.catnav-subrow--l3 {
    padding-top:8px; border-top:0; margin-top:-2px;
    padding-left:2px;
}
.catnav-subchip {
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 12px; border:1px solid var(--line); border-radius:999px;
    background:var(--card); color:var(--fg);
    font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap;
    transition:var(--t);
}
.catnav-subchip > i { color:var(--brand-1); font-size:12px; }
.catnav-subchip:hover { border-color:var(--brand-1); background:var(--brand-soft); }
.catnav-subchip.is-active {
    border-color:var(--brand-1); background:var(--brand-soft);
    color:var(--brand-1); font-weight:800;
}
.catnav-subchip.is-active > i { color:var(--brand-1); }
/* Level-3 chips read as a quieter, secondary tier. */
.catnav-subchip--l3 {
    padding:5px 11px; font-size:12px; font-weight:600;
    background:transparent; border-style:dashed;
}
.catnav-subchip--l3.is-active { border-style:solid; background:var(--brand-soft); }

@media (max-width:760px) {
    /* Keep each tier on a single swipeable line on small screens so the
       navigator never eats the whole viewport height. */
    .catnav-subrow {
        flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin;
        -webkit-overflow-scrolling:touch;
    }
    .catnav-subrow::-webkit-scrollbar { height:5px; }
    .catnav-subrow::-webkit-scrollbar-thumb { background:var(--line-2,var(--line)); border-radius:999px; }
    .catnav-subchip { flex:0 0 auto; }
}

.catalog-listing-page .catnav { margin-bottom:12px; }

/* ==========================================================================
   PDP2 ADD-TO-CART — FINAL authoritative styling (last in file => wins the
   cascade over every earlier .pdp2-buy / .pdp2-total / .pdp2-cta rule).
   Goals: compact & sexy; quantity selector and total card on the SAME line
   and the SAME height; the total card hugs its content (never stretched).
   ========================================================================== */

/* --- The row: qty pinned left, total pinned right, one line, aligned center. */
.pdp2-panel .pdp2-buy {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;      /* same vertical centre line */
  justify-content: space-between !important;
  gap: var(--sp-3) !important;
  flex-wrap: nowrap !important;
  margin-top: 4px;
}

/* Shared control height so stepper + total card line up perfectly. */
.pdp2-panel { --pdp2-ctrl-h: 52px; }

/* --- Quantity label + stepper (left, fixed width, not stretched). */
.pdp2-panel .pdp2-qty {
  display: flex !important; align-items: center !important;
  flex: 0 0 auto !important; gap: 0 !important;
}
.pdp2-panel .pdp2-qty-label { display: none !important; }  /* label is redundant next to the total */
.pdp2-panel .pdp2-buy .qty-stepper,
.pdp2-panel .qty-stepper {
  width: 138px !important; max-width: 138px !important;
  height: var(--pdp2-ctrl-h) !important;
  grid-template-columns: 46px 1fr 46px !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 14px !important;
  background: var(--input) !important;
  overflow: hidden !important;
}
.pdp2-panel .qty-stepper-btn {
  width: 100% !important; height: 100% !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 13px; color: var(--fg);
}
.pdp2-panel .qty-stepper-btn:hover { color: var(--brand-1); background: var(--brand-soft); }
.pdp2-panel .qty-stepper .qty-input {
  width: 100% !important; height: 100% !important; text-align: center;
  font-size: 16px; font-weight: 800; color: var(--fg);
  border-left: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important;
}

/* --- Total card (right): compact pill that HUGS its content, never stretched,
   same height as the stepper. Label + amount sit inline. */
.pdp2-panel .pdp2-total {
  flex: 0 0 auto !important;                 /* <- do NOT stretch */
  width: auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  height: var(--pdp2-ctrl-h) !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(104,172,61,.28) !important;
  background: linear-gradient(135deg, var(--brand-soft), var(--card-2) 85%) !important;
}
.pdp2-panel .pdp2-total-labels {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 0 !important;
}
.pdp2-panel .pdp2-total-labels > span:first-child {
  font-size: 10.5px !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: .06em !important;
  color: var(--muted) !important;
}
.pdp2-panel .pdp2-total-was {
  font-size: 11px !important; color: var(--muted) !important;
  text-decoration: line-through; text-transform: none !important;
  letter-spacing: normal !important; font-weight: 600 !important;
}
.pdp2-panel .pdp2-total-amount {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 8px !important;
}
.pdp2-panel .pdp2-total strong {
  font-family: var(--font-display);
  font-size: 24px !important; font-weight: 850 !important;
  line-height: 1 !important; color: var(--fg) !important;
  white-space: nowrap;
}
.pdp2-panel .pdp2-total-save {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; color: var(--brand-1);
  background: rgba(104,172,61,.14); border: 1px solid rgba(104,172,61,.28);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}

/* --- CTA button: bold, flat brand, comfy but compact. */
.pdp2-panel .pdp2-cta { display: grid; gap: 8px; margin-top: var(--sp-3); }
.pdp2-panel .pdp2-cart-btn {
  width: 100%; min-height: 54px !important;
  border: 0 !important; border-radius: 14px !important;
  background: var(--brand) !important; color: #fff !important;
  font-size: 16px !important; font-weight: 800 !important; letter-spacing: .01em;
  box-shadow: 0 14px 30px -12px rgba(104,172,61,.7) !important;
  transition: transform var(--t), filter var(--t) !important;
}
.pdp2-panel .pdp2-cart-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.pdp2-panel .pdp2-cart-btn:active { transform: translateY(0); }
.pdp2-panel .pdp2-cta-hint {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap; width: 100%;
  text-align: center;
  font-size: 11.5px; color: var(--muted); margin: 0;
}

/* --- Mobile: KEEP the same single line (override the old column-stack rule).
   Slightly smaller controls so qty + total fit side by side on narrow phones. */
@media (max-width: 600px) {
  .pdp2-panel .pdp2-buy {
    flex-direction: row !important; align-items: center !important;
    gap: 10px !important; flex-wrap: nowrap !important;
  }
  .pdp2-panel { --pdp2-ctrl-h: 48px; }
  .pdp2-panel .pdp2-buy .qty-stepper,
  .pdp2-panel .qty-stepper {
    width: 122px !important; max-width: 122px !important;
    grid-template-columns: 40px 1fr 40px !important;
  }
  .pdp2-panel .pdp2-total { padding: 0 13px !important; gap: 10px !important; }
  .pdp2-panel .pdp2-total strong { font-size: 21px !important; }
  .pdp2-panel .pdp2-cart-btn { min-height: 52px !important; }
}
@media (max-width: 360px) {
  .pdp2-panel { --pdp2-ctrl-h: 46px; }
  .pdp2-panel .pdp2-buy .qty-stepper,
  .pdp2-panel .qty-stepper {
    width: 112px !important; max-width: 112px !important;
    grid-template-columns: 36px 1fr 36px !important;
  }
  .pdp2-panel .pdp2-total { padding: 0 11px !important; gap: 8px !important; }
  .pdp2-panel .pdp2-total strong { font-size: 19px !important; }
  .pdp2-panel .pdp2-total-labels > span:first-child { font-size: 10px !important; }
}