/* ==========================================================================
   Global Design System + Themes
   Brand: #28295f (brand) | #df5d32 (accent) | #ecbb26 (gold)
   ========================================================================== */

:root {
  /* Brand palette (UPDATED) */
  --brand: #28295f;
  --brand-600: #232657;
  --brand-700: #1b1f48;

  --accent: #df5d32;  /* UPDATED */
  --accent-600: #c9532c; /* shade */

  --gold: #ecbb26;    /* NEW */
  --gold-600: #d2a71f;

  /* Base colors (dark defaults; light defined below & via [data-theme]) */
  --bg: #0b0c16;
  --surface: #12142a;
  --elev-1: #17193a;
  --elev-2: #1a1d44;
  --text: #e9eef6;
  --muted: #a7b4cc;
  --line: #2a3151;

  /* Sizing */
  --container: min(1240px, 92vw);
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius: 18px;
  --radius-lg: 24px;

  /* Typography */
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --fs-950: clamp(2.3rem, 1.2rem + 3.2vw, 3.6rem);
  --fs-850: clamp(1.8rem, 1.1rem + 1.9vw, 2.3rem);
  --fs-800: clamp(1.6rem, 1.1rem + 1.6vw, 2.1rem);
  --fs-700: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  --fs-600: 1.15rem;
  --fs-500: 1rem;
  --fs-400: .95rem;

  /* Shadow & glow */
  --shadow-xs: 0 4px 12px rgba(0, 0, 0, .15);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .18);
  --shadow: 0 14px 34px rgba(0, 0, 0, .28);
  --glow-accent: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);

  /* Motion */
  --ease-1: cubic-bezier(.2, .9, .2, 1);
  --ease-2: cubic-bezier(.17, .67, .25, 1.01);

  color-scheme: dark light;
}

/* Light scheme (system preference) */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --surface: #f8f9fd;
    --elev-1: #ffffff;
    --elev-2: #f1f3fb;
    --text: #0e1320;
    --muted: #4b5872;
    --line: #e5e9f4;
    --shadow: 0 14px 34px rgba(17, 24, 39, .10);
  }
}

/* Forced overrides via data-theme */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f8f9fd;
  --elev-1: #ffffff;
  --elev-2: #f1f3fb;
  --text: #0e1320;
  --muted: #4b5872;
  --line: #e5e9f4;
  --shadow: 0 14px 34px rgba(17, 24, 39, .10);
}
:root[data-theme="dark"] { color-scheme: dark; }

/* Base / Reset ------------------------------------------------------------ */
* { box-sizing: border-box; }

html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 var(--fs-500)/1.6 var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 60%),
    var(--bg);
}

/* Links */
a { color: inherit; text-decoration: none; }
.link { color: var(--accent); font-weight: 800; }
.link:hover { text-decoration: underline; }

/* Focus */
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, white); outline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible { box-shadow: var(--glow-accent); }

/* Utilities --------------------------------------------------------------- */
.container { width: var(--container); margin-inline: auto; }
.sr-only { position: absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.muted { color: var(--muted); }

.badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color:#fff; font-size:11px; font-weight:900;
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  --btn-bg: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--gold)));
  display:inline-flex; align-items:center; gap:.55rem;
  height:44px; padding: 0 18px; border-radius:var(--radius-sm);
  background: var(--btn-bg); color:#fff; border:0; box-shadow: var(--shadow);
  font-weight:900; letter-spacing:.1px; cursor:pointer;
  transition: transform .15s var(--ease-1), filter .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); filter: saturate(1.05); }
.btn:active { transform: translateY(0) scale(.99); }
.btn--ghost { background:transparent; color:var(--text); border:1px solid var(--line); box-shadow:none; }
.btn--small { height:36px; padding:0 14px; font-size:.95rem; }

/* Icon button */
.iconbtn {
  --bg: var(--elev-1);
  display:inline-grid; place-items:center; width:40px; height:40px;
  border-radius:12px; border:1px solid var(--line); background: var(--bg);
  transition: transform .15s var(--ease-1), border-color .2s ease, background .2s ease, filter .2s ease;
}
.iconbtn:hover { transform: translateY(-1px) scale(1.02); background: color-mix(in srgb, var(--elev-1) 70%, var(--elev-2)); }
.iconbtn .bi { font-size:1.125rem; }

/* ==========================
   HEADER — Premium Treatment
   ========================== */

.site-header {
  position: sticky; top:0; z-index:80;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent), transparent),
    color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px) saturate(145%);
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-xs); border-color: color-mix(in srgb, var(--brand) 20%, var(--line)); }

.head__bar {
  display:grid; grid-template-columns: 1fr minmax(260px,520px) auto;
  align-items:center; gap:18px; padding:14px 0;
}
.brand { display:inline-flex; align-items:center; gap:.7rem; color:var(--text); }
.brand__img { width:32px; height:32px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.15)); }
.brand__name { font-size:1.22rem; font-weight:900; letter-spacing:.2px; }

.search {
  display:grid; grid-template-columns:24px 1fr; align-items:center; gap:10px;
  background: linear-gradient(180deg, var(--elev-1), color-mix(in srgb, var(--elev-1) 72%, transparent));
  border:1px solid var(--line); padding:10px 14px; border-radius:14px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.search input { background:transparent; border:0; outline:0; color:var(--text); font-size:.98rem; }
.search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

.head__actions { display:inline-flex; align-items:center; gap:10px; }
.only-mobile { display:none; }

/* Navigation */
.nav { border-top:1px solid var(--line); background: color-mix(in srgb, var(--bg) 96%, transparent); }
.nav__inner { display:flex; }
.menu { display:flex; align-items:center; gap:24px; padding:10px 0; margin:0; list-style:none; width:100%; }
.menu .right { margin-left:auto; }
.menu a {
  --u:0; position:relative; padding:10px 12px; border-radius:10px; color:var(--text);
  font-size:.98rem; letter-spacing:.1px; transition: color .15s ease, background .2s ease;
}
.menu a span {
  background: linear-gradient(90deg, var(--accent), var(--gold));
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  transition: background-position .35s var(--ease-1);
}
.menu a:hover span { background-position: 100% 0; }
.menu a::after {
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  transform: scaleX(var(--u)); transform-origin:left;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transition: transform .24s ease;
}
.menu a:hover::after, .menu a.active::after { --u:1; }

/* Disclosure submenu */
.has-sub { position:relative; }
.disclosure {
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:10px;
  border:1px solid var(--line); color:var(--text);
  background: linear-gradient(180deg, var(--elev-1), color-mix(in srgb, var(--elev-1) 70%, transparent));
  cursor:pointer; transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.disclosure:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.submenu {
  position:absolute; top:calc(100% + 8px); left:0; min-width:230px; background:var(--elev-1);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; display:none;
}
.submenu li a { display:block; padding:10px; border-radius:8px; }
.has-sub[aria-expanded="true"] .submenu, .disclosure[aria-expanded="true"] + .submenu { display:block; }

/* Theme switch */
.switch { --w:60px; --h:32px; inline-size:var(--w); block-size:var(--h); border-radius:999px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, var(--elev-1), color-mix(in srgb, var(--elev-1) 70%, transparent));
  position:relative; cursor:pointer; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.switch:focus-visible { outline:2px solid color-mix(in srgb, var(--accent) 60%, white); outline-offset:2px; }
.switch__thumb {
  position:absolute; inset:3px auto 3px 3px; inline-size:calc(var(--h) - 6px); block-size:calc(var(--h) - 6px);
  border-radius:50%; background: radial-gradient(60% 60% at 50% 40%, #fff 0%, #ddd 100%);
  display:grid; place-items:center; transition: transform .28s var(--ease-1), background .2s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.switch[aria-checked="true"] .switch__thumb {
  transform: translateX(calc(var(--w) - var(--h)));
  background: radial-gradient(60% 60% at 40% 40%, #f7f7f7 0%, #e9e9e9 100%)
}
.switch__icon { position:absolute; font-size:14px; transition: opacity .2s ease, transform .3s ease; }
.switch__icon.sun { opacity:1; transform: translateX(0); color:#f39c12; }
.switch__icon.moon { opacity:0; transform: translateX(6px) rotate(-12deg); color:#b0c4ff; }
.switch[aria-checked="true"] .sun { opacity:0; transform: translateX(-6px) rotate(12deg); }
.switch[aria-checked="true"] .moon { opacity:1; transform: translateX(0); }

/* ================
   HERO / SECTIONS
   ================ */

.hero { position:relative; padding:66px 0; }
.hero__inner { display:grid; grid-template-columns: 1.08fr .92fr; gap:44px; align-items:center; }
.eyebrow { font-weight:900; color: var(--accent); text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; }
.hero h1 { font-size:var(--fs-950); line-height:1.06; margin:10px 0 10px; }
.lead { font-size:var(--fs-600); color:var(--muted); max-width:60ch; }
.hero__cta { margin-top:20px; display:flex; gap:12px; }
.hero__art { position:relative; height:360px; }
.blob {
  position:absolute; inset:0 20% 40% 0; border-radius:32px;
  background:
    radial-gradient(60% 60% at 30% 30%, color-mix(in srgb, var(--brand) 50%, transparent) 0%, transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 35%, transparent), color-mix(in srgb, var(--accent) 45%, transparent));
  filter: blur(18px); opacity:.88; transform: translateZ(0);
}
.blob--2 { inset:30% 0 0 20%; background: radial-gradient(60% 60% at 60% 40%, color-mix(in srgb, var(--gold) 55%, transparent), transparent 70%); }
.blob--3 { inset:10% 10% 10% 10%; }

.section { padding:44px 0; }
.section__head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }

/* ==========================
   CARD BASE / PRODUCT CARD
   ========================== */

.card {
  position:relative; background: linear-gradient(180deg, color-mix(in srgb, var(--elev-1) 70%, transparent), var(--elev-1));
  border:1px solid var(--line); border-radius: var(--radius); overflow:clip;
  transition: transform .18s var(--ease-1), box-shadow .22s ease, border-color .2s ease;
}
.card::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 35%, color-mix(in srgb, var(--gold) 12%, transparent) 70%);
  opacity:.18; pointer-events:none;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }

/* Premium product card ring */
.card.product { border-radius:20px; outline:0 solid transparent; transform-style: preserve-3d;
  transition: transform .22s var(--ease-1), box-shadow .25s ease, border-color .2s ease, outline-color .2s ease;
}
.card.product::before {
  content:""; position:absolute; inset:0; padding:1px; border-radius:20px; pointer-events:none;
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--brand) 60%, var(--gold)) 55%, var(--gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition: opacity .35s var(--ease-1);
}
.card.product:hover::before { opacity:.6; }
.card.product::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(75deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .7s var(--ease-2);
}
.card.product:hover::after { transform: translateX(120%); }
.card.product:hover { transform: translateY(-6px) perspective(900px) rotateX(.7deg) rotateY(-.7deg); }

.card__img { aspect-ratio: 4/3; overflow:hidden; position:relative;
  background: radial-gradient(70% 70% at 30% 30%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
}
.card__img img { width:100%; height:100%; object-fit:cover; transform: scale(1.02); transition: transform .6s var(--ease-1); }
.card.product:hover .card__img img { transform: scale(1.08); }

.badge--promo {
  position:absolute; top:10px; left:10px; z-index:1; padding:6px 10px; font-weight:900; letter-spacing:.2px; border-radius:999px; color:#fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--gold)));
  box-shadow: var(--shadow-sm);
}

.card__body { padding:14px; display:grid; gap:8px; }
.card__title { font-weight:950; font-size:1.04rem; margin:0; }
.card__meta { color:var(--muted); font-size:.93rem; }
.price { font-weight:950; }
.old { color:var(--muted); text-decoration:line-through; margin-left:8px; }

/* Rating */
.rating { display:inline-flex; gap:2px; color:#ffb800; transform-origin:left; transition: transform .25s var(--ease-1), filter .2s ease; }
.card.product:hover .rating { transform: scale(1.06); filter: saturate(1.1); }
.rating .bi { font-size:.98rem; }

/* Actions — icon-only cart */
.card .foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.add {
  position:relative; overflow:hidden; display:inline-grid; place-items:center;
  width:42px; height:40px; padding:0; border-radius:12px; border:1px solid var(--line);
  background: linear-gradient(180deg, var(--elev-2), var(--elev-1));
  color:var(--text); font-weight:900;
  transition: transform .15s var(--ease-1), border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}
.add:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); filter: saturate(1.06); }
.add i { font-size:1.1rem; }

/* ==========================
   CATEGORY TILES & STORE CHIPS
   ========================== */

.cat {
  background: linear-gradient(180deg, color-mix(in srgb, var(--elev-1) 80%, transparent), var(--elev-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: center;
  text-align: center;
  min-height: 140px;
  transition: transform .16s var(--ease-1), box-shadow .22s ease, border-color .2s ease, filter .2s ease;
}
.cat i { font-size: 1.7rem; color: var(--accent); }
.cat:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold) 30%, var(--line)); filter: saturate(1.04); }

/* Store chip */
.storechip {
  display:grid; grid-template-columns: 48px 1fr; align-items:center; gap:12px;
  padding:12px; border:1px solid var(--line); border-radius:14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--elev-1) 65%, transparent), var(--elev-1));
  transition: transform .16s var(--ease-1), box-shadow .22s ease, border-color .2s ease, filter .2s ease;
}
.storechip:hover { transform: translateY(-3px); box-shadow: var(--shadow-xs); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.storechip__logo {
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-weight:900; color:#fff;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--gold)));
}
.storechip__name { font-weight:900; }
.storechip__meta { color:var(--muted); font-size:.92rem; display:flex; align-items:center; gap:6px; }

/* ==========================
   HSLIDER (reusable)
   ========================== */

.hslider {
  position:relative;
  isolation:isolate;
  overflow: hidden; /* prevent peeking partials outside the viewport */
}
.hslider__track {
  --card-gap: 16px;
  display:flex;
  gap: var(--card-gap);
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always; /* stop only at snaps */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.hslider__track > * { scroll-snap-align: start; }

.hslider__controls { display:flex; gap:8px; align-items:center; }
.hslider__btn {
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--line);
  background: linear-gradient(180deg, var(--elev-1), color-mix(in srgb, var(--elev-1) 70%, transparent));
  transition: transform .12s var(--ease-1), background .2s ease, border-color .2s ease, opacity .2s ease;
}
.hslider__btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.hslider__btn:disabled { opacity:.45; pointer-events:none; }
.hslider__btn i { font-size:1.05rem; }

/* EXACT COUNTS PER VIEW
   - 4 product cards per view
   - 6 category tiles per view (smaller)
*/
.hslider--cards-4 .hslider__track > * {
  flex: 0 0 calc((100% - 3 * var(--card-gap)) / 4);
}
.hslider--cats .hslider__track > .cat {
  flex: 0 0 calc((100% - 5 * var(--card-gap)) / 6);
}
.hslider--cats .cat {
  min-height: 120px;
  padding: 14px;
}
.hslider--cats .cat i {
  font-size: 1.4rem;
}

/* Chips variant spacing */
.hslider--chips .hslider__track { gap: 12px; }

/* ==========================
   FOOTER — Animated & Polished
   ========================== */

.site-footer {
  position:relative; isolation:isolate; margin-top:46px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, transparent), transparent 70%), var(--bg);
  color:var(--text); border-top:1px solid var(--line); overflow:clip;
}
.site-footer::before {
  content:""; position:absolute; inset:-2px 0 auto 0; height:4px; z-index:1;
  background: linear-gradient(90deg, var(--accent), var(--gold), var(--brand));
  background-size:200% 100%; animation: wave 6.5s linear infinite;
}
@keyframes wave { to { background-position: 200% 0; } }
.site-footer::after {
  content:""; position:absolute; inset:auto -10% -80px -10%; height:180px; z-index:0;
  background: radial-gradient(50% 60% at 50% 0%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 70%);
  filter: blur(24px);
}

.footer__grid { position:relative; z-index:2; width:var(--container); margin-inline:auto; display:grid; gap:26px; padding:34px 0; grid-template-columns: 2fr 1fr 1fr 1.2fr; }
.brand--footer { display:inline-flex; align-items:center; gap:.6rem; }
.brand--footer .brand__img { width:28px; height:28px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.15)); }
.brand--footer .brand__name { font-weight:900; letter-spacing:.2px; }
.site-footer h3 { margin:0 0 10px; font-size:1.02rem; letter-spacing:.2px; }
.list { list-style:none; padding:0; margin:0; display:grid; gap:8px; }

.site-footer .list a { position:relative; display:inline-block; padding:4px 0; }
.site-footer .list a::after {
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--accent), var(--gold)); transition: right .25s var(--ease-1);
}
.site-footer .list a:hover::after { right:0; }

.newsletter { display:grid; grid-template-columns:1fr auto; gap:10px; }
.newsletter input {
  background:var(--elev-1); color:var(--text); border:1px solid var(--line);
  border-radius: var(--radius-sm); padding:10px 12px;
  transition: border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}
.newsletter input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.newsletter .btn { --btn-bg: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--gold)));
  height:42px; padding:0 16px; border:0; border-radius: var(--radius-sm); color:#fff; font-weight:900; cursor:pointer; box-shadow: var(--shadow);
}

.social { display:flex; gap:10px; margin-top:12px; }
.social .s {
  width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px;
  background: linear-gradient(180deg, var(--elev-1), color-mix(in srgb, var(--elev-1) 70%, transparent));
  transition: transform .18s var(--ease-1), border-color .2s ease, background .2s ease, filter .2s ease;
}
.social .s:hover {
  transform: translateY(-3px) scale(1.03) rotate(-1deg);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--elev-2); filter: saturate(1.08);
}

.footline { border-top:1px solid var(--line); position:relative; z-index:2; }
.footline__inner { width:var(--container); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.footline__inner .links { display:inline-flex; gap:14px; }
.footline__inner .links a { position:relative; padding:4px 0; color:var(--muted); }
.footline__inner .links a:hover { color:var(--text); }
.footline__inner .links a::after {
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: right .25s var(--ease-1);
}
.footline__inner .links a:hover::after { right:0; }

/* Back to top */
.backtop {
  position:fixed; right:16px; bottom:16px; z-index:3; width:46px; height:46px; border-radius:12px; border:1px solid var(--line);
  background:var(--elev-1); color:var(--text); display:grid; place-items:center; box-shadow: var(--shadow);
  opacity:0; pointer-events:none; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, filter .2s ease;
}
.backtop.is-visible { opacity:1; pointer-events:auto; transform: translateY(0); }
.backtop:hover { filter: saturate(1.06); transform: translateY(-2px); }

/* Reveal-on-scroll */
.reveal { opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease-2), transform .6s var(--ease-2); }
.reveal.is-in { opacity:1; transform:none; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1120px) {
  .hslider--cards-4 .hslider__track > * {
    /* keep 4 per view on wide tablets; fallback to natural widths if space is tight */
    flex: 0 0 calc((100% - 3 * var(--card-gap)) / 3);
  }
  .hslider--cats .hslider__track > .cat {
    flex: 0 0 calc((100% - 3 * var(--card-gap)) / 4);
  }
}
@media (max-width: 920px) {
  .head__bar { grid-template-columns: 1fr auto auto; }
}
@media (max-width: 860px) {
  .search { display:none; }
  .only-mobile { display:inline-grid; }
  .nav { display:none; }
  .nav.is-open { display:block; }
  .menu { flex-direction:column; align-items:stretch; gap:6px; padding:8px 0 16px; }
  .menu .right { margin-left:0; }

  .hero__inner { grid-template-columns:1fr; }

  /* on mobile, one card per view naturally due to width */
}
@media (max-width: 540px) {
  .hslider--cats .hslider__track > .cat {
    flex: 0 0 calc((100% - 1 * var(--card-gap)) / 2);
  }
}

/* Reduced Motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .btn, .iconbtn, .switch__thumb, .menu a::after, .social .s, .card.product, .hslider__btn { transition: none !important; }
  .site-footer::before { animation: none; }
}