/* ============================================================
   HAVIT — DESIGN SYSTEM
   Responsive utilities, grid, fluid type & base components.
   Import AFTER styles.css:
     <link rel="stylesheet" href="styles.css" />
     <link rel="stylesheet" href="design-system.css" />
   ============================================================ */

/* ============================================================
   1. BREAKPOINTS
   Kept as comments — CSS variables can't be used inside
   @media rules, so document them here and keep them consistent.

   --bp-xs  :   0px  →  319px   (very small / landscape phone)
   --bp-sm  : 320px  →  767px   (mobile)
   --bp-md  : 768px  → 1023px   (tablet)
   --bp-lg  : 1024px → 1279px   (desktop)
   --bp-xl  : 1280px → 1439px   (wide desktop)
   --bp-2xl : 1440px+           (ultrawide)

   Shorthand mixins (mobile-first):
     sm+  → @media (min-width: 320px)
     md+  → @media (min-width: 768px)
     lg+  → @media (min-width: 1024px)
     xl+  → @media (min-width: 1280px)

   Max-width (desktop-first):
     <md  → @media (max-width: 767px)
     <lg  → @media (max-width: 1023px)
     <xl  → @media (max-width: 1279px)
   ============================================================ */

/* ============================================================
   2. DESIGN TOKENS — extensions
   ============================================================ */
:root {
  /* Spacing scale (4-base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Fluid type scale */
  --text-2xs:  clamp(10px, 0.9vw,  11px);
  --text-xs:   clamp(11px, 1.0vw,  12px);
  --text-sm:   clamp(12px, 1.1vw,  13px);
  --text-base: clamp(14px, 1.2vw,  15px);
  --text-md:   clamp(15px, 1.3vw,  16px);
  --text-lg:   clamp(16px, 1.6vw,  18px);
  --text-xl:   clamp(18px, 2.0vw,  22px);
  --text-2xl:  clamp(22px, 2.4vw,  28px);
  --text-3xl:  clamp(26px, 3.0vw,  36px);
  --text-4xl:  clamp(32px, 4.0vw,  48px);
  --text-5xl:  clamp(40px, 5.5vw,  64px);
  --text-6xl:  clamp(48px, 7.0vw,  80px);

  /* Container */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* Column gutter */
  --gutter: clamp(16px, 2.5vw, 32px);

  /* Z-index scale */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 20;
  --z-modal:   30;
  --z-nav:     40;
  --z-topmost: 50;

  /* Transition defaults */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4,  0, 1, 1);
  --ease-inout: cubic-bezier(0.4,  0, 0.2, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
}

/* ============================================================
   3. FLUID TYPOGRAPHY — utility classes
   ============================================================ */
.text-2xs  { font-size: var(--text-2xs); }
.text-xs   { font-size: var(--text-xs);  }
.text-sm   { font-size: var(--text-sm);  }
.text-base { font-size: var(--text-base);}
.text-md   { font-size: var(--text-md);  }
.text-lg   { font-size: var(--text-lg);  }
.text-xl   { font-size: var(--text-xl);  }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }
.text-6xl  { font-size: var(--text-6xl); }

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body);    }
.font-mono    { font-family: var(--font-mono);    }

.font-300 { font-weight: 300; }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }

.leading-none   { line-height: 1;    }
.leading-tight  { line-height: 1.15; }
.leading-snug   { line-height: 1.3;  }
.leading-normal { line-height: 1.5;  }
.leading-loose  { line-height: 1.7;  }

.tracking-tight  { letter-spacing: -0.03em; }
.tracking-normal { letter-spacing:  0;       }
.tracking-wide   { letter-spacing:  0.04em;  }
.tracking-wider  { letter-spacing:  0.08em;  }
.tracking-widest { letter-spacing:  0.18em;  }

.uppercase    { text-transform: uppercase;   }
.lowercase    { text-transform: lowercase;   }
.capitalize   { text-transform: capitalize; }

.text-left    { text-align: left;   }
.text-center  { text-align: center; }
.text-right   { text-align: right;  }

.text-ink     { color: var(--ink);    }
.text-muted   { color: var(--muted);  }
.text-red     { color: var(--red);    }
.text-white   { color: #fff;          }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ============================================================
   4. LAYOUT — containers
   ============================================================ */
.container       { width: 100%; max-width: var(--container-2xl); margin-inline: auto; padding-inline: var(--gutter); }
.container-sm    { width: 100%; max-width: var(--container-sm);  margin-inline: auto; padding-inline: var(--gutter); }
.container-md    { width: 100%; max-width: var(--container-md);  margin-inline: auto; padding-inline: var(--gutter); }
.container-lg    { width: 100%; max-width: var(--container-lg);  margin-inline: auto; padding-inline: var(--gutter); }
.container-xl    { width: 100%; max-width: var(--container-xl);  margin-inline: auto; padding-inline: var(--gutter); }
.container-fluid { width: 100%; padding-inline: var(--gutter); }

/* ============================================================
   5. GRID SYSTEM — 12 columns, CSS Grid based
   ============================================================ */

/* Base grid */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

/* Column spans */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
.col-auto { grid-column: auto; }

/* Column offset */
.col-start-1  { grid-column-start: 1;  }
.col-start-2  { grid-column-start: 2;  }
.col-start-3  { grid-column-start: 3;  }
.col-start-4  { grid-column-start: 4;  }
.col-start-5  { grid-column-start: 5;  }
.col-start-6  { grid-column-start: 6;  }
.col-start-7  { grid-column-start: 7;  }

/* ── Tablet: col-md-* ── (768px+) */
@media (min-width: 768px) {
  .col-md-1  { grid-column: span 1;  }
  .col-md-2  { grid-column: span 2;  }
  .col-md-3  { grid-column: span 3;  }
  .col-md-4  { grid-column: span 4;  }
  .col-md-5  { grid-column: span 5;  }
  .col-md-6  { grid-column: span 6;  }
  .col-md-7  { grid-column: span 7;  }
  .col-md-8  { grid-column: span 8;  }
  .col-md-9  { grid-column: span 9;  }
  .col-md-10 { grid-column: span 10; }
  .col-md-11 { grid-column: span 11; }
  .col-md-12 { grid-column: span 12; }
}

/* ── Desktop: col-lg-* ── (1024px+) */
@media (min-width: 1024px) {
  .col-lg-1  { grid-column: span 1;  }
  .col-lg-2  { grid-column: span 2;  }
  .col-lg-3  { grid-column: span 3;  }
  .col-lg-4  { grid-column: span 4;  }
  .col-lg-5  { grid-column: span 5;  }
  .col-lg-6  { grid-column: span 6;  }
  .col-lg-7  { grid-column: span 7;  }
  .col-lg-8  { grid-column: span 8;  }
  .col-lg-9  { grid-column: span 9;  }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; }
  .col-lg-12 { grid-column: span 12; }
}

/* On mobile, all grid children default to full width */
@media (max-width: 767px) {
  .grid-12 > * { grid-column: span 12; }
}

/* ============================================================
   6. PRODUCT GRID — auto-fill responsive layouts
   ============================================================ */

/* 2→3→4 columns product grid */
.grid-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 20px);
}
@media (min-width: 768px) {
  .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 1→2→3 columns */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
@media (min-width: 768px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 1→2 columns */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* auto-fill fluid grid — cards never shrink below 240px */
.grid-fluid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gutter);
}
@media (max-width: 767px) {
  .grid-fluid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ============================================================
   7. FLEX UTILITIES
   ============================================================ */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1 1 0%; }
.flex-auto     { flex: 1 1 auto; }
.flex-none     { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow     { flex-grow: 1; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center;     }
.items-end      { align-items: flex-end;   }
.items-stretch  { align-items: stretch;    }
.items-baseline { align-items: baseline;   }

.justify-start   { justify-content: flex-start;   }
.justify-center  { justify-content: center;        }
.justify-end     { justify-content: flex-end;      }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around;  }
.justify-evenly  { justify-content: space-evenly;  }

.self-start  { align-self: flex-start; }
.self-center { align-self: center;     }
.self-end    { align-self: flex-end;   }

.gap-1  { gap: var(--space-1);  }
.gap-2  { gap: var(--space-2);  }
.gap-3  { gap: var(--space-3);  }
.gap-4  { gap: var(--space-4);  }
.gap-5  { gap: var(--space-5);  }
.gap-6  { gap: var(--space-6);  }
.gap-8  { gap: var(--space-8);  }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* ============================================================
   8. SPACING UTILITIES — margin & padding
   ============================================================ */

/* Padding */
.p-0  { padding: 0; }
.p-1  { padding: var(--space-1);  }
.p-2  { padding: var(--space-2);  }
.p-3  { padding: var(--space-3);  }
.p-4  { padding: var(--space-4);  }
.p-5  { padding: var(--space-5);  }
.p-6  { padding: var(--space-6);  }
.p-8  { padding: var(--space-8);  }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }

.px-0  { padding-inline: 0; }
.px-2  { padding-inline: var(--space-2);  }
.px-3  { padding-inline: var(--space-3);  }
.px-4  { padding-inline: var(--space-4);  }
.px-5  { padding-inline: var(--space-5);  }
.px-6  { padding-inline: var(--space-6);  }
.px-8  { padding-inline: var(--space-8);  }
.px-10 { padding-inline: var(--space-10); }
.px-12 { padding-inline: var(--space-12); }

.py-0  { padding-block: 0; }
.py-2  { padding-block: var(--space-2);  }
.py-3  { padding-block: var(--space-3);  }
.py-4  { padding-block: var(--space-4);  }
.py-5  { padding-block: var(--space-5);  }
.py-6  { padding-block: var(--space-6);  }
.py-8  { padding-block: var(--space-8);  }
.py-10 { padding-block: var(--space-10); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }
.py-20 { padding-block: var(--space-20); }

.pt-0  { padding-top: 0; }
.pt-4  { padding-top: var(--space-4);  }
.pt-6  { padding-top: var(--space-6);  }
.pt-8  { padding-top: var(--space-8);  }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-20 { padding-top: var(--space-20); }

.pb-0  { padding-bottom: 0; }
.pb-4  { padding-bottom: var(--space-4);  }
.pb-6  { padding-bottom: var(--space-6);  }
.pb-8  { padding-bottom: var(--space-8);  }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-20 { padding-bottom: var(--space-20); }

/* Margin */
.m-0  { margin: 0; }
.mx-auto { margin-inline: auto; }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: var(--space-1);  }
.mt-2  { margin-top: var(--space-2);  }
.mt-3  { margin-top: var(--space-3);  }
.mt-4  { margin-top: var(--space-4);  }
.mt-5  { margin-top: var(--space-5);  }
.mt-6  { margin-top: var(--space-6);  }
.mt-8  { margin-top: var(--space-8);  }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--space-1);  }
.mb-2  { margin-bottom: var(--space-2);  }
.mb-3  { margin-bottom: var(--space-3);  }
.mb-4  { margin-bottom: var(--space-4);  }
.mb-5  { margin-bottom: var(--space-5);  }
.mb-6  { margin-bottom: var(--space-6);  }
.mb-8  { margin-bottom: var(--space-8);  }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

/* ============================================================
   9. SIZING UTILITIES
   ============================================================ */
.w-full   { width: 100%; }
.w-auto   { width: auto; }
.h-full   { height: 100%; }
.min-w-0  { min-width: 0; }
.min-h-0  { min-height: 0; }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }
.max-w-xl { max-width: var(--container-xl); }

/* ============================================================
   10. DISPLAY & VISIBILITY UTILITIES
   ============================================================ */
.block        { display: block;        }
.inline-block { display: inline-block; }
.inline       { display: inline;       }
.grid         { display: grid;         }
.hidden       { display: none !important; }
.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;
}
.not-sr-only {
  position: static; width: auto; height: auto;
  padding: 0; margin: 0;
  overflow: visible; clip: auto;
  white-space: normal;
}
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto;   }
.overflow-x-auto { overflow-x: auto; overflow-y: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }

/* ── Show/hide per breakpoint ── */

/* Hide on mobile (<768px) */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
/* Hide on tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}
/* Hide on desktop (1024px+) */
@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

/* Show ONLY on mobile */
.show-mobile { display: none !important; }
@media (max-width: 767px) {
  .show-mobile { display: revert !important; }
}
/* Show ONLY on tablet */
.show-tablet { display: none !important; }
@media (min-width: 768px) and (max-width: 1023px) {
  .show-tablet { display: revert !important; }
}
/* Show ONLY on desktop */
.show-desktop { display: none !important; }
@media (min-width: 1024px) {
  .show-desktop { display: revert !important; }
}

/* ============================================================
   11. SURFACE & DECORATION UTILITIES
   ============================================================ */
.rounded-xs   { border-radius: var(--r-xs);   }
.rounded-sm   { border-radius: var(--r-sm);   }
.rounded-md   { border-radius: var(--r-md);   }
.rounded-lg   { border-radius: var(--r-lg);   }
.rounded-xl   { border-radius: var(--r-xl);   }
.rounded-full { border-radius: var(--r-full); }

.bg-white { background: #fff;            }
.bg-surf  { background: var(--surf);     }
.bg-surf2 { background: var(--surf-2);   }
.bg-ink   { background: var(--ink);      }
.bg-red   { background: var(--red);      }
.bg-night { background: var(--night);    }

.border         { border: 1px solid var(--line); }
.border-2       { border: 2px solid var(--line); }
.border-red     { border-color: var(--red);      }
.border-top     { border-top: 1px solid var(--line); }
.border-bottom  { border-bottom: 1px solid var(--line); }

.shadow-1   { box-shadow: var(--shadow-1);   }
.shadow-2   { box-shadow: var(--shadow-2);   }
.shadow-red { box-shadow: var(--shadow-red); }
.shadow-none { box-shadow: none; }

.opacity-0   { opacity: 0; }
.opacity-50  { opacity: .5; }
.opacity-70  { opacity: .7; }
.opacity-100 { opacity: 1; }

/* ============================================================
   12. RESPONSIVE SECTION WRAPPERS
   ============================================================ */

/* Fluid section padding */
.section-fluid {
  padding-block: clamp(40px, 8vw, 100px);
}
.section-fluid--tight {
  padding-block: clamp(24px, 5vw, 64px);
}
.section-fluid--loose {
  padding-block: clamp(56px, 10vw, 140px);
}

/* Two-panel split: 1 col on mobile, 2 on tablet+ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
@media (min-width: 768px) {
  .split           { grid-template-columns: 1fr 1fr; }
  .split--60-40    { grid-template-columns: 1.5fr 1fr; }
  .split--40-60    { grid-template-columns: 1fr 1.5fr; }
  .split--70-30    { grid-template-columns: 2fr 1fr; }
  .split--30-70    { grid-template-columns: 1fr 2fr; }
  .split--sidebar  { grid-template-columns: 280px 1fr; }
  .split--sidebar-r{ grid-template-columns: 1fr 280px; }
}

/* ============================================================
   13. NAVBAR — responsive enhancements
   These extend the .header / .header__inner from styles.css.
   ============================================================ */

/* Hamburger toggle button */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: background var(--duration-fast) var(--ease-out);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--surf); }
.nav-toggle svg   { width: 22px; height: 22px; stroke-width: 1.8; }

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
}

/* Mobile drawer overlay */
.nav-drawer {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 85vw);
  background: var(--bg);
  border-left: 1px solid var(--line);
  z-index: var(--z-modal);
  padding: var(--space-6);
  gap: var(--space-3);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out),
              visibility  var(--duration-slow);
  visibility: hidden;
  overflow-y: auto;
}
.nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.nav-drawer__close {
  align-self: flex-end;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--muted);
  transition: background var(--duration-fast) var(--ease-out);
  cursor: pointer;
}
.nav-drawer__close:hover { background: var(--surf); color: var(--ink); }
.nav-drawer__close svg   { width: 18px; height: 18px; }

.nav-drawer a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast);
}
.nav-drawer a:hover  { background: var(--surf); color: var(--ink); }
.nav-drawer a.is-active { color: var(--red); background: var(--red-soft); }
.nav-drawer a svg    { width: 18px; height: 18px; stroke-width: 1.6; flex-shrink: 0; }

/* Drawer backdrop */
.nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(11,11,14,.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.nav-backdrop.is-open {
  display: block;
  opacity: 1;
}

/* ============================================================
   14. CARD COMPONENTS — responsive variants
   ============================================================ */

/* Horizontal card (media + text side by side) — stacks on mobile */
.card-h {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  transition: box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base);
}
.card-h:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); }
@media (max-width: 767px) {
  .card-h {
    grid-template-columns: 1fr;
  }
}
.card-h__media {
  background: var(--surf);
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.card-h__media img {
  width: 80%; height: 80%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.card-h__body {
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
}
@media (max-width: 767px) {
  .card-h__body { padding: var(--space-4); }
}

/* Featured / promo card — full-bleed image */
.card-promo {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(240px, 35vw, 420px);
  background: var(--surf);
}
.card-promo__bg {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,14,.7) 0%, rgba(11,11,14,.1) 60%, transparent 100%);
  z-index: 1;
}
.card-promo__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.card-promo__body {
  position: relative; z-index: 2;
  padding: clamp(20px, 3vw, 36px);
  color: #fff;
}
.card-promo__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  color: #fff;
}
.card-promo__sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.8);
  margin-bottom: var(--space-5);
}

/* Info / stat card */
.card-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform  var(--duration-base) var(--ease-out);
}
.card-stat:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card-stat__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 500;
}
.card-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.card-stat__delta {
  font-size: var(--text-xs);
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600;
}
.card-stat__delta--up   { color: #16a34a; }
.card-stat__delta--down { color: var(--red); }

/* ============================================================
   15. BUTTON EXTENSIONS — responsive sizes & states
   ============================================================ */

/* On very small screens, full-width primary CTA by default */
@media (max-width: 479px) {
  .btn--primary-stretch { width: 100%; }
}

/* Icon-only button variant */
.btn--icon {
  width: 44px; height: 44px;
  padding: 0;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.btn--icon svg { width: 18px; height: 18px; }
.btn--icon.btn--sm { width: 34px; height: 34px; }
.btn--icon.btn--sm svg { width: 15px; height: 15px; }
.btn--icon.btn--lg { width: 54px; height: 54px; }
.btn--icon.btn--lg svg { width: 22px; height: 22px; }

/* Loading state */
.btn.is-loading {
  pointer-events: none;
  opacity: .7;
  position: relative;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
.btn.is-loading > * { visibility: hidden; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Button group */
.btn-group {
  display: inline-flex;
  border-radius: var(--r-full);
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.btn-group .btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--line-2);
}
.btn-group .btn:last-child { border-right: none; }
.btn-group .btn:hover { z-index: 1; }

/* Stack buttons on mobile */
.btn-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 480px) {
  .btn-stack { flex-direction: row; flex-wrap: wrap; }
}

/* ============================================================
   16. FORM ELEMENTS — responsive
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.field__hint {
  font-size: var(--text-xs);
  color: var(--muted);
}
.field__error {
  font-size: var(--text-xs);
  color: var(--red);
  display: flex; align-items: center; gap: var(--space-1);
}
.field__error svg { width: 13px; height: 13px; flex-shrink: 0; }

.input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow    var(--duration-fast) var(--ease-out);
  outline: none;
}
.input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11,11,14,.06);
}
.input.has-error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220,61,44,.08);
}
.input--sm  { height: 38px; font-size: 14px; padding: 0 var(--space-3); }
.input--lg  { height: 56px; font-size: 16px; padding: 0 var(--space-5); }

.textarea {
  width: 100%;
  min-height: 112px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  resize: vertical;
  line-height: 1.5;
  transition: border-color var(--duration-fast) var(--ease-out);
  outline: none;
}
.textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11,11,14,.06); }

.select {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-10) 0 var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B6B73' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  appearance: none;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11,11,14,.06); }

/* Stacked form fields gap */
.form-stack { display: flex; flex-direction: column; gap: var(--space-5); }
/* Inline form row — stacks on mobile */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 480px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
.form-row--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .form-row--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   17. BADGE / CHIP / TAG
   ============================================================ */
.badge-pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-pill--default { background: var(--surf-2);   color: var(--ink);    }
.badge-pill--red     { background: var(--red-soft);  color: var(--red);    }
.badge-pill--green   { background: #dcfce7;          color: #16a34a;       }
.badge-pill--ink     { background: var(--ink);       color: #fff;          }
.badge-pill--outline { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }

/* ============================================================
   18. SKELETON LOADER
   ============================================================ */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surf)   0%,
    var(--surf-2) 50%,
    var(--surf)   100%
  );
  background-size: 1200px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
.skeleton--text   { height: 14px; margin-block: 4px; }
.skeleton--title  { height: 24px; margin-block: 4px; }
.skeleton--thumb  { aspect-ratio: 1/1; border-radius: var(--r-md); }
.skeleton--image  { aspect-ratio: 4/3; border-radius: var(--r-md); }
.skeleton--circle { border-radius: 50%; }

/* ============================================================
   19. RESPONSIVE MEDIA — aspect ratios & cover helpers
   ============================================================ */
.media-1-1   { aspect-ratio: 1 / 1;  }
.media-4-3   { aspect-ratio: 4 / 3;  }
.media-16-9  { aspect-ratio: 16 / 9; }
.media-21-9  { aspect-ratio: 21 / 9; }
.media-3-4   { aspect-ratio: 3 / 4;  }
.media-cover { width: 100%; height: 100%; object-fit: cover; }
.media-contain { width: 100%; height: 100%; object-fit: contain; }

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   20. SCROLL CONTAINERS
   ============================================================ */
.scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}
.scroll-x-snap {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
}
.scroll-x-snap::-webkit-scrollbar { display: none; }
.scroll-x-snap > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ============================================================
   21. MODAL / DIALOG BASE
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(11,11,14,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  display: grid; place-items: center;
  padding: var(--space-4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              visibility var(--duration-base);
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }

.modal {
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - var(--space-8));
  overflow-y: auto;
  transform: translateY(16px) scale(.98);
  transition: transform var(--duration-slow) var(--ease-out);
}
.modal-backdrop.is-open .modal { transform: none; }

.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-6) var(--space-6) 0;
  gap: var(--space-4);
}
.modal__title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.modal__body { padding: var(--space-6); }
.modal__foot {
  padding: 0 var(--space-6) var(--space-6);
  display: flex; gap: var(--space-3); justify-content: flex-end;
}
@media (max-width: 767px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 92dvh;
  }
}

/* ============================================================
   22. TOAST / ALERT
   ============================================================ */
.toast-region {
  position: fixed;
  bottom: max(var(--space-5), env(safe-area-inset-bottom));
  right: var(--space-5);
  z-index: var(--z-topmost);
  display: flex; flex-direction: column; gap: var(--space-3);
  pointer-events: none;
  max-width: min(380px, calc(100vw - var(--space-10)));
}
@media (max-width: 767px) {
  .toast-region { left: var(--space-4); right: var(--space-4); }
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  animation: toast-in .25s var(--ease-out) both;
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.toast__body { flex: 1; }
.toast__title { font-size: var(--text-sm); font-weight: 600; }
.toast__sub   { font-size: var(--text-xs); color: rgba(255,255,255,.7); margin-top: 2px; }
.toast--success { background: #16a34a; }
.toast--error   { background: var(--red); }
.toast--warning { background: #d97706; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   23. RESPONSIVE FOOTER GRID HELPER
   ============================================================ */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 480px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); }
  .footer-grid > :first-child { grid-column: 1; }
}

/* ============================================================
   24. PRINT UTILITIES
   ============================================================ */
@media print {
  .no-print { display: none !important; }
  .print-only { display: revert !important; }
  .container, .wrap { max-width: 100%; padding: 0; }
  .header, .mob-nav, .footer { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
}