/* ═══════════════════════════════════════════════════════════════
   CSM SILKS · DESIGN SYSTEM  v1.0
   Pure Handloom Silk · Kanchipuram · Est. 1987

   Layers:  1. Primitive tokens   2. Semantic tokens (light/dark)
            3. Base reset         4. Type utilities
            5. Components         6. Utilities
   Generated from tokens/tokens.json — edit there first.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ── 1. PRIMITIVES ─────────────────────────────────────────── */
:root {
  /* Forest — primary */
  --forest-50:#EEF5F1; --forest-100:#D5E6DC; --forest-200:#A9CDBA; --forest-300:#6FA98A;
  --forest-400:#3C8262; --forest-500:#1F6B4A; --forest-600:#14503A; --forest-700:#0F3F2E;
  --forest-800:#0B2F22; --forest-900:#071F17;
  /* Zari — gold accent */
  --zari-50:#FBF6EA; --zari-100:#F5EDD8; --zari-200:#EAD6A6; --zari-300:#D9BC72;
  --zari-400:#C8954A; --zari-500:#B8862F; --zari-600:#A0692A; --zari-700:#7E5220;
  --zari-800:#5C3B17; --zari-900:#3A250E;
  /* Kumkum — crimson */
  --kumkum-50:#FBEDEB; --kumkum-100:#F5D3CF; --kumkum-300:#E08A80; --kumkum-500:#C93C30;
  --kumkum-600:#B83228; --kumkum-700:#8F261E; --kumkum-900:#4A120E;
  /* Peacock — blue */
  --peacock-50:#EEF3FA; --peacock-100:#DCE6F5; --peacock-300:#7A9BD0; --peacock-500:#1A4A8A; --peacock-700:#1C2B4A;
  /* Paper — warm neutrals */
  --paper-0:#FFFFFF; --paper-50:#FFFDF8; --paper-100:#FAF3E8; --paper-200:#F5EDD8; --paper-300:#EDE0C8; --paper-400:#D9C9AA;
  /* Ink — warm text */
  --ink-500:#9B8468; --ink-600:#7A6248; --ink-700:#5C4530; --ink-800:#3D2E1A; --ink-900:#1A1208;
  --whatsapp:#25D366;

  /* Type */
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'DM Mono',SFMono-Regular,Menlo,monospace;
  --text-2xs:.75rem; --text-xs:.8125rem; --text-sm:.875rem; --text-base:.9375rem; --text-md:1rem;
  --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5625rem; --text-3xl:1.953rem;
  --text-4xl:2.441rem; --text-5xl:3.052rem; --text-6xl:3.815rem;
  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-.01em; --tracking-wide:.04em; --tracking-eyebrow:.18em;

  /* Space (4px grid) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;

  /* Radius */
  --r-xs:3px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-pill:999px;

  /* Shadow */
  --shadow-sm:0 2px 8px rgba(26,18,8,.08);
  --shadow-md:0 8px 24px rgba(26,18,8,.08);
  --shadow-lg:0 18px 50px rgba(26,18,8,.10);
  --shadow-xl:0 24px 64px rgba(26,18,8,.16);
  --shadow-gold:0 4px 16px rgba(184,134,47,.30);

  /* Motion */
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:550ms;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);

  /* Layout */
  --container:1280px; --gutter:20px; --topbar-h:32px; --header-h:68px; --sidebar-w:220px;
}

/* ── 2. SEMANTIC (light) ───────────────────────────────────── */
:root {
  color-scheme: light;
  --bg:var(--paper-100); --bg-elevated:var(--paper-50);
  --surface:var(--paper-0); --surface-muted:var(--paper-200);
  --text:var(--ink-900); --text-2:var(--ink-700); --text-muted:var(--ink-500);
  --border:rgba(168,120,60,.18); --border-strong:rgba(168,120,60,.32);
  --primary:var(--forest-700); --primary-hover:var(--forest-800); --on-primary:var(--paper-50);
  --primary-soft:var(--forest-50);
  --accent:var(--zari-500); --accent-hover:var(--zari-600); --on-accent:var(--ink-900);
  --accent-soft:var(--zari-100);
  --sale:var(--kumkum-600); --sale-soft:var(--kumkum-50);
  --success:var(--forest-500); --warning:var(--zari-600); --danger:var(--kumkum-600); --info:var(--peacock-500);
  --focus-ring:rgba(160,105,42,.35);
  --weave:rgba(168,120,60,.04);
}

/* ── 2b. SEMANTIC (dark) ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:var(--ink-900); --bg-elevated:#241A0E;
    --surface:#2C2114; --surface-muted:#382B1A;
    --text:var(--paper-100); --text-2:var(--paper-300); --text-muted:var(--ink-500);
    --border:rgba(232,200,140,.14); --border-strong:rgba(232,200,140,.28);
    --primary:var(--forest-300); --primary-hover:var(--forest-200); --on-primary:var(--forest-900);
    --primary-soft:rgba(111,169,138,.14);
    --accent:var(--zari-300); --accent-hover:var(--zari-200); --on-accent:var(--ink-900);
    --accent-soft:rgba(217,188,114,.14);
    --sale:var(--kumkum-300); --sale-soft:rgba(224,138,128,.14);
    --success:var(--forest-300); --warning:var(--zari-300); --danger:var(--kumkum-300); --info:var(--peacock-300);
    --focus-ring:rgba(217,188,114,.40);
    --weave:rgba(232,200,140,.035);
    --shadow-sm:0 2px 8px rgba(0,0,0,.35); --shadow-md:0 8px 24px rgba(0,0,0,.4);
    --shadow-lg:0 18px 50px rgba(0,0,0,.5); --shadow-xl:0 24px 64px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:var(--ink-900); --bg-elevated:#241A0E;
  --surface:#2C2114; --surface-muted:#382B1A;
  --text:var(--paper-100); --text-2:var(--paper-300); --text-muted:var(--ink-500);
  --border:rgba(232,200,140,.14); --border-strong:rgba(232,200,140,.28);
  --primary:var(--forest-300); --primary-hover:var(--forest-200); --on-primary:var(--forest-900);
  --primary-soft:rgba(111,169,138,.14);
  --accent:var(--zari-300); --accent-hover:var(--zari-200); --on-accent:var(--ink-900);
  --accent-soft:rgba(217,188,114,.14);
  --sale:var(--kumkum-300); --sale-soft:rgba(224,138,128,.14);
  --success:var(--forest-300); --warning:var(--zari-300); --danger:var(--kumkum-300); --info:var(--peacock-300);
  --focus-ring:rgba(217,188,114,.40);
  --weave:rgba(232,200,140,.035);
  --shadow-sm:0 2px 8px rgba(0,0,0,.35); --shadow-md:0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 18px 50px rgba(0,0,0,.5); --shadow-xl:0 24px 64px rgba(0,0,0,.6);
}

/* ── 3. BASE ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern","liga","calt";
}
/* Optional handloom weave texture — add .weave to body or a section */
.weave{
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 28px,var(--weave) 28px,var(--weave) 30px),
    repeating-linear-gradient(90deg,transparent,transparent 28px,var(--weave) 28px,var(--weave) 30px);
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,svg,video{display:block;max-width:100%}
:focus-visible{outline:none;box-shadow:0 0 0 4px var(--focus-ring)}
::selection{background:var(--zari-200);color:var(--ink-900)}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* ── 4. TYPE ───────────────────────────────────────────────── */
.display,.h1,.h2,.h3,.h4{font-family:var(--font-display);font-weight:500;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text)}
.display{font-size:clamp(var(--text-4xl),6vw,var(--text-6xl));font-weight:500}
.display i,.h1 i,.h2 i{font-style:italic;font-weight:400;color:var(--accent)}
.h1{font-size:clamp(var(--text-3xl),4.5vw,var(--text-5xl))}
.h2{font-size:clamp(var(--text-2xl),3vw,var(--text-4xl))}
.h3{font-size:var(--text-2xl)}
.h4{font-size:var(--text-xl);font-weight:600}
.h5{font-family:var(--font-body);font-size:var(--text-md);font-weight:600;line-height:var(--leading-snug)}
.h6{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;line-height:var(--leading-snug)}
.lead{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-2)}
.body{font-size:var(--text-base);line-height:var(--leading-relaxed)}
.small{font-size:var(--text-sm);color:var(--text-2)}
.caption{font-size:var(--text-xs);color:var(--text-muted)}
.eyebrow{
  font-family:var(--font-body);font-size:var(--text-2xs);font-weight:600;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent)
}
.mono,.price,.sku{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.sku{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:var(--tracking-wide)}
.price{font-size:var(--text-2xl);font-weight:500;color:var(--text);line-height:1}
.price-was{font-family:var(--font-mono);font-size:var(--text-md);color:var(--text-muted);text-decoration:line-through}
.price-off{font-family:var(--font-body);font-size:var(--text-md);font-weight:600;color:var(--sale)}

/* ── 5. COMPONENTS ─────────────────────────────────────────── */

/* Logo */
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--text)}
.logo-mark{width:40px;height:40px;color:var(--accent);flex-shrink:0}
.logo-word{display:flex;flex-direction:column;line-height:1}
.logo-name{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:.02em;color:var(--primary)}
.logo-sub{font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:var(--tracking-eyebrow);color:var(--accent);margin-top:3px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;border:1px solid transparent;border-radius:var(--r-md);
  font-family:var(--font-body);font-size:var(--text-base);font-weight:600;letter-spacing:.01em;
  cursor:pointer;white-space:nowrap;user-select:none;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),box-shadow var(--dur-base) var(--ease),transform var(--dur-fast) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{background:var(--accent-hover);box-shadow:var(--shadow-gold)}
.btn-outline{background:transparent;border-color:var(--border-strong);color:var(--text)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.btn-ghost{background:transparent;color:var(--primary)}
.btn-ghost:hover{background:var(--primary-soft)}
.btn-sale{background:var(--sale);color:#fff}
.btn-sale:hover{background:var(--kumkum-700)}
.btn-whatsapp{background:var(--whatsapp);color:#fff}
.btn-sm{height:40px;padding:0 16px;font-size:var(--text-sm)}
.btn-lg{height:56px;padding:0 30px;font-size:var(--text-md)}
.btn-pill{border-radius:var(--r-pill)}
.btn-icon{width:48px;padding:0;border-radius:var(--r-pill)}
.btn-icon.btn-sm{width:40px}
.btn-block{width:100%}

/* Chips (selectable) */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;
  border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--surface);
  font-size:var(--text-sm);font-weight:500;color:var(--text-2);cursor:pointer;
  transition:all var(--dur-fast) var(--ease)
}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.on,.chip[aria-pressed="true"]{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);font-weight:600}
.chip-sm{height:32px;padding:0 12px;font-size:var(--text-xs)}

/* Badges (status labels) */
.badge{
  display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-xs);
  font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:1
}
.badge-primary{background:var(--primary);color:var(--on-primary)}
.badge-accent{background:var(--accent);color:var(--on-accent)}
.badge-sale{background:var(--sale);color:#fff}
.badge-soft{background:var(--accent-soft);color:var(--zari-700)}
.badge-outline{background:transparent;border:1px solid var(--border-strong);color:var(--text-2)}
.badge-success{background:var(--forest-50);color:var(--forest-600)}
.badge-info{background:var(--peacock-100);color:var(--peacock-500)}
.badge-danger{background:var(--kumkum-50);color:var(--kumkum-700)}
[data-theme="dark"] .badge-success{background:var(--primary-soft);color:var(--forest-200)}
[data-theme="dark"] .badge-danger{background:var(--sale-soft);color:var(--kumkum-300)}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* Counter badge on icons */
.count{
  position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);
  font-family:var(--font-mono);font-size:10px;font-weight:500;display:flex;align-items:center;justify-content:center
}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card-body{padding:var(--sp-5)}
.card-raised{box-shadow:var(--shadow-md);border-color:transparent}
.card-flat{box-shadow:none}

/* Product card */
.product{position:relative;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.product:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.product-media{position:relative;aspect-ratio:3/4;background:var(--surface-muted);overflow:hidden}
.product-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;transition:transform var(--dur-slow) var(--ease-out)}
.product-media img.is-flat{object-position:center center}
.product:hover .product-media img{transform:scale(1.04)}
.product-media .badge{position:absolute;top:10px;left:10px}
.product-wish{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;background:var(--surface);border:0;display:grid;place-items:center;cursor:pointer;color:var(--text-2);box-shadow:var(--shadow-sm)}
.product-wish:hover,.product-wish.on{color:var(--sale)}
.product-body{padding:12px 14px 14px}
.product-cat{font-size:var(--text-2xs);color:var(--text-muted);letter-spacing:var(--tracking-wide);text-transform:uppercase;font-weight:600}
.product-brand{font-size:var(--text-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin:0 0 2px}
.product-name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;line-height:var(--leading-snug);margin:2px 0 6px;color:var(--text)}
.plp .product-name{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 4px}
.plp .product-price .price{font-size:var(--text-sm);font-weight:700}
.plp .product-price .price-off{color:var(--sale);font-weight:600}
.product-price{display:flex;align-items:baseline;gap:8px}
.product-price .price{font-size:var(--text-md)}
.product-price .price-was{font-size:var(--text-xs)}
.product-price .price-off{font-size:var(--text-xs)}

/* Inputs */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:var(--text-sm);font-weight:600;color:var(--text)}
.input,.select,.textarea{
  width:100%;height:48px;padding:0 14px;background:var(--surface);color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:var(--text-base);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)
}
.textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--zari-400)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--focus-ring)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.help{font-size:var(--text-xs);color:var(--text-muted)}
.help.error{color:var(--danger)}
.search{position:relative}
.search .input{border-radius:var(--r-pill);padding-right:44px;background:var(--surface-muted);border-color:transparent}
.search .input:focus{background:var(--surface);border-color:var(--primary)}
.search-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--text-2);cursor:pointer;display:grid;place-items:center}

/* Swatches (colour variants) */
.swatch{width:52px;height:52px;border-radius:var(--r-md);border:2px solid transparent;padding:2px;cursor:pointer;background:var(--surface);transition:border-color var(--dur-fast) var(--ease)}
.swatch>*{width:100%;height:100%;border-radius:calc(var(--r-md) - 3px);object-fit:cover}
.swatch:hover{border-color:var(--zari-400)}
.swatch.on{border-color:var(--primary)}

/* Rating */
.stars{display:inline-flex;gap:1px;color:var(--accent)}
.stars svg{width:14px;height:14px;fill:currentColor}
.rating{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm)}
.rating b{font-weight:600}
.rating span{color:var(--text-muted)}

/* Alerts / notices */
.notice{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:var(--r-md);font-size:var(--text-sm);border:1px solid transparent}
.notice-success{background:var(--forest-50);color:var(--forest-700);border-color:var(--forest-100)}
.notice-accent{background:var(--accent-soft);color:var(--zari-800);border-color:var(--zari-200)}
.notice-info{background:var(--peacock-50);color:var(--peacock-700);border-color:var(--peacock-100)}
.notice-danger{background:var(--kumkum-50);color:var(--kumkum-700);border-color:var(--kumkum-100)}
[data-theme="dark"] .notice-success{background:var(--primary-soft);color:var(--forest-200);border-color:transparent}
[data-theme="dark"] .notice-accent{background:var(--accent-soft);color:var(--zari-200);border-color:transparent}
[data-theme="dark"] .notice-info{background:rgba(122,155,208,.14);color:var(--peacock-300);border-color:transparent}
[data-theme="dark"] .notice-danger{background:var(--sale-soft);color:var(--kumkum-300);border-color:transparent}

/* Topbar ticker */
.topbar{height:var(--topbar-h);background:var(--forest-800);color:var(--paper-100);font-size:var(--text-xs);display:flex;align-items:center}
.topbar a:hover{color:var(--zari-300)}

/* Header */
.header{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--border);backdrop-filter:blur(16px)}
.header-row{display:flex;align-items:center;gap:var(--sp-4);min-height:var(--header-h);padding:10px 0}
.nav{display:flex;gap:2px;align-items:center}
.nav a{padding:10px 12px;font-size:var(--text-base);font-weight:600;color:var(--text);border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease)}
.nav a:hover,.nav a.on{color:var(--primary);border-bottom-color:var(--accent)}
.nav a.sale{color:var(--sale)}
.nav a.ai{color:var(--info)}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border)}
.tab{padding:10px 14px;font-size:var(--text-base);font-weight:500;color:var(--text-2);border:0;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--text)}
.tab.on{color:var(--primary);font-weight:600;border-bottom-color:var(--primary)}

/* Divider with ornament */
.rule{display:flex;align-items:center;gap:12px;color:var(--accent)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--border-strong)}

/* Table (admin) */
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table th{text-align:left;font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);padding:10px 12px;border-bottom:1px solid var(--border-strong)}
.table td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tr:hover td{background:var(--surface-muted)}
.table .num{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums}

/* KPI tile (admin) */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5)}
.kpi-label{font-size:var(--text-2xs);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)}
.kpi-value{font-family:var(--font-mono);font-size:var(--text-3xl);font-weight:500;line-height:1.1;margin-top:6px;color:var(--text)}
.kpi-delta{font-size:var(--text-xs);font-weight:600;margin-top:6px}
.kpi-delta.up{color:var(--success)} .kpi-delta.down{color:var(--danger)}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,var(--surface-muted) 25%,var(--bg-elevated) 50%,var(--surface-muted) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp var(--dur-slow) var(--ease-out) both}

/* ── 6. UTILITIES ──────────────────────────────────────────── */
.text-primary{color:var(--primary)} .text-accent{color:var(--accent)} .text-sale{color:var(--sale)}
.text-muted{color:var(--text-muted)} .text-2{color:var(--text-2)}
.bg-primary{background:var(--primary);color:var(--on-primary)} .bg-accent{background:var(--accent);color:var(--on-accent)}
.bg-surface{background:var(--surface)} .bg-muted{background:var(--surface-muted)}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)} .row{display:flex;align-items:center;gap:var(--sp-3)}
.grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}