/* ============================================================
   RENUCE — LAYOUT SYSTEM (layout.css)
   Complete page layout, grid system, spacing, and structural
   patterns for the entire Renuce e-commerce store.

   Load order: AFTER reset.css, typography.css
   Depends on:  variables.css (all --space-*, --color-*, --radius-*)

   Sections:
     1.  Box Sizing Reset (safety net)
     2.  Page Shell (html/body scroll lock helpers)
     3.  Skip Link (accessibility)
     4.  Container System
     5.  Section Wrapper
     6.  Section Header Patterns
     7.  CSS Grid Utilities
     8.  Flexbox Utilities
     9.  Spacing Utilities (margin / padding)
    10.  Display / Visibility Utilities
    11.  Position Utilities
    12.  Z-Index Scale
    13.  Overflow Utilities
    14.  Aspect Ratio Utilities
    15.  Dividers & Rules
    16.  Breadcrumb
    17.  Page Layout Shells (with-sidebar, full-bleed, etc.)
    18.  Category Grid Layout
    19.  Products Grid
    20.  Two-Column Editorial Split
    21.  Collection Spotlight Grid
    22.  Promo Banners Grid
    23.  Testimonials Grid
    24.  Trust Strip Layout
    25.  Footer Layout
    26.  Sticky Sidebar
    27.  Pagination Layout
    28.  Form Layout Helpers
    29.  Admin Layout Shell
    30.  Responsive Breakpoints
   ============================================================ */


/* =====================================================
   1. BOX SIZING (safety net — reset.css may already set this)
===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* =====================================================
   2. PAGE SHELL
===================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, 72px); /* offset anchors for sticky header */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;            /* dynamic viewport height */
  display:    flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* When cart/search/mobile-menu overlay is open — lock body scroll */
body.scroll-locked {
  overflow:   hidden;
  /* preserve scrollbar width to prevent layout shift */
  padding-right: var(--scrollbar-width, 0px);
}

/* Main content grows to push footer down */
#main-content {
  flex: 1 0 auto;
  padding-top: 0px;
}

/* When announcement bar is visible, push content down */
body.has-announcement #main-content {
  /* JS sets this CSS var via: document.documentElement.style.setProperty */
}


/* =====================================================
   3. SKIP LINK (keyboard / screen reader accessibility)
===================================================== */

.skip-link {
  position:   absolute;
  top:        -100%;
  left:       var(--space-4);
  z-index:    var(--z-skip-link, 9999);

  padding:    var(--space-3) var(--space-5);
  background: var(--color-brand-black);
  color:      var(--color-brand-white);
  font-size:  var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  white-space: nowrap;

  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-brand-gold);
  outline-offset: 2px;
}


/* =====================================================
   4. CONTAINER SYSTEM
   Three widths: default (1280px), wide (1440px), narrow (840px)
   All have symmetric horizontal padding that collapses on mobile
===================================================== */

.container {
  width:      100%;
  max-width:  var(--container-max, 1280px);
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--container-px, var(--space-6));
  padding-right: var(--container-px, var(--space-6));
}

/* Wide: hero, full-bleed banners */
.container--wide {
  max-width: 1440px;
}

/* Narrow: checkout, account, article pages */
.container--narrow {
  max-width: 840px;
}

/* Extra narrow: forms, single-col content */
.container--xs {
  max-width: 560px;
}

/* Full-width: removes max-width, keeps padding */
.container--full {
  max-width: none;
}

/* Flush: removes padding entirely (for edge-to-edge elements) */
.container--flush {
  padding-left:  0;
  padding-right: 0;
}


/* =====================================================
   5. SECTION WRAPPER
   Consistent vertical rhythm between all homepage sections,
   category pages, and editorial blocks.
===================================================== */

.section {
  padding-top:    var(--section-py, var(--space-20));
  padding-bottom: var(--section-py, var(--space-20));
  position:       relative;
}

/* Tighter sections (trust strip, payment strip, etc.) */
.section--tight {
  --section-py: var(--space-10);
}

/* Looser sections (hero follow-up, editorial) */
.section--loose {
  --section-py: var(--space-28);
}

/* No top padding (when section follows directly after hero) */
.section--no-top {
  padding-top: 0;
}

/* No bottom padding */
.section--no-bottom {
  padding-bottom: 0;
}

/* Dark background section variant */
.section--dark {
  background-color: var(--color-bg-dark, #0A0A0A);
  color:            var(--color-text-inverse);
}

/* Light grey background section */
.section--muted {
  background-color: var(--color-bg-secondary);
}

/* Gold accent top border */
.section--accent-top::before {
  content:    '';
  display:    block;
  position:   absolute;
  top:        0;
  left:       50%;
  transform:  translateX(-50%);
  width:      60px;
  height:     2px;
  background: var(--color-brand-gold);
  border-radius: var(--radius-full);
}


/* =====================================================
   6. SECTION HEADER PATTERNS
   Used above product grids, testimonials, collections.
   Two variants: stacked-center and inline (title + CTA side by side)
===================================================== */

.section-header {
  margin-bottom: var(--space-12);
  text-align:    center;
}

/* Left-aligned sections */
.section-header--left {
  text-align: left;
}

/* Inline: title left, CTA right — used for "View All" links */
.section-header--inline {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             var(--space-4);
  text-align:      left;
  margin-bottom:   var(--space-8);
}

.section-header--inline .section-title {
  margin-bottom: 0;
}

.section-header--inline > a,
.section-header--inline > .btn {
  flex-shrink: 0;
  /* Align to bottom of text block */
  align-self:  flex-end;
  margin-bottom: 4px; /* optical alignment with heading baseline */
}


/* =====================================================
   7. CSS GRID UTILITIES
   Generic utility classes — not tied to any component
===================================================== */

.grid          { display: grid; }
.grid--2       { grid-template-columns: repeat(2, 1fr); }
.grid--3       { grid-template-columns: repeat(3, 1fr); }
.grid--4       { grid-template-columns: repeat(4, 1fr); }
.grid--5       { grid-template-columns: repeat(5, 1fr); }
.grid--6       { grid-template-columns: repeat(6, 1fr); }

.grid--auto    { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Gap variants */
.gap-0    { gap: 0; }
.gap-2    { gap: var(--space-2); }
.gap-4    { gap: var(--space-4); }
.gap-6    { gap: var(--space-6); }
.gap-8    { gap: var(--space-8); }
.gap-10   { gap: var(--space-10); }
.gap-12   { gap: var(--space-12); }

.col-gap-4   { column-gap: var(--space-4); }
.col-gap-6   { column-gap: var(--space-6); }
.row-gap-4   { row-gap:    var(--space-4); }
.row-gap-6   { row-gap:    var(--space-6); }
.row-gap-8   { row-gap:    var(--space-8); }

/* Span helpers */
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-full { grid-column: 1 / -1; }

.row-span-2  { grid-row: span 2; }


/* =====================================================
   8. FLEXBOX 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; }

.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; }
.self-stretch { align-self: stretch; }

.flex-1       { flex: 1 1 0%; }
.flex-auto    { flex: 1 1 auto; }
.flex-none    { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-0   { flex-grow: 0; }

.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);  }


/* =====================================================
   9. SPACING UTILITIES
   Margin and padding in all directions.
   Uses design-token spacing scale from variables.css
===================================================== */

/* Margin */
.m-0    { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0   { margin-top: 0; }
.mb-0   { margin-bottom: 0; }

.mt-2   { margin-top:    var(--space-2);  }
.mt-4   { margin-top:    var(--space-4);  }
.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); }

.mb-2   { margin-bottom: var(--space-2);  }
.mb-4   { margin-bottom: var(--space-4);  }
.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); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

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

.px-4   { padding-left: var(--space-4);  padding-right: var(--space-4);  }
.px-6   { padding-left: var(--space-6);  padding-right: var(--space-6);  }
.px-8   { padding-left: var(--space-8);  padding-right: var(--space-8);  }

.py-2   { padding-top: var(--space-2);   padding-bottom: var(--space-2);  }
.py-4   { padding-top: var(--space-4);   padding-bottom: var(--space-4);  }
.py-6   { padding-top: var(--space-6);   padding-bottom: var(--space-6);  }
.py-8   { padding-top: var(--space-8);   padding-bottom: var(--space-8);  }
.py-10  { padding-top: var(--space-10);  padding-bottom: var(--space-10); }
.py-12  { padding-top: var(--space-12);  padding-bottom: var(--space-12); }
.py-16  { padding-top: var(--space-16);  padding-bottom: var(--space-16); }
.py-20  { padding-top: var(--space-20);  padding-bottom: var(--space-20); }


/* =====================================================
   10. DISPLAY / VISIBILITY UTILITIES
===================================================== */

.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.hidden       { display: none !important; }
.invisible    { visibility: hidden; }

/* Screen-reader only — visually hidden but accessible */
.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;
}

/* Show only on certain screen sizes */
.show-mobile  { display: none; }
.hide-mobile  { display: block; }

/* Opacity states */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }


/* =====================================================
   11. POSITION UTILITIES
===================================================== */

.relative  { position: relative; }
.absolute  { position: absolute; }
.fixed     { position: fixed; }
.sticky    { position: sticky; }
.static    { position: static; }

.inset-0   { top: 0; right: 0; bottom: 0; left: 0; }
.top-0     { top: 0; }
.bottom-0  { bottom: 0; }
.left-0    { left: 0; }
.right-0   { right: 0; }


/* =====================================================
   12. Z-INDEX SCALE
   Defined here as utility classes and also as CSS vars
   for use in component files.
===================================================== */

:root {
  --z-below:        -1;
  --z-base:          0;
  --z-raised:       10;    /* cards on hover */
  --z-dropdown:     100;   /* nav dropdowns */
  --z-sticky:       200;   /* sticky header */
  --z-overlay:      300;   /* cart/search overlay */
  --z-modal:        400;   /* modals, drawers */
  --z-toast:        500;   /* toast notifications */
  --z-tooltip:      600;   /* tooltips */
  --z-skip-link:   9999;   /* skip to content */
}

.z-base     { z-index: var(--z-base);     }
.z-raised   { z-index: var(--z-raised);   }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky   { z-index: var(--z-sticky);   }
.z-overlay  { z-index: var(--z-overlay);  }
.z-modal    { z-index: var(--z-modal);    }
.z-toast    { z-index: var(--z-toast);    }


/* =====================================================
   13. OVERFLOW UTILITIES
===================================================== */

.overflow-hidden   { overflow: hidden; }
.overflow-auto     { overflow: auto; }
.overflow-scroll   { overflow: scroll; }
.overflow-visible  { overflow: visible; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto   { overflow-y: auto; }


/* =====================================================
   14. ASPECT RATIO UTILITIES
   Used for product images, hero, category cards, banners
===================================================== */

.aspect-square    { aspect-ratio: 1 / 1; }
.aspect-portrait  { aspect-ratio: 3 / 4; }    /* product cards */
.aspect-landscape { aspect-ratio: 4 / 3; }    /* promo banners */
.aspect-wide      { aspect-ratio: 16 / 9; }   /* hero, videos */
.aspect-ultra     { aspect-ratio: 21 / 9; }   /* full-bleed hero */
.aspect-banner    { aspect-ratio: 12 / 5; }   /* homepage banners */

/* Images fill their containers */
.img-cover {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
  display:    block;
}

.img-contain {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
}

/* Fallback background for broken images */
.img--fallback,
[class*="__media--fallback"],
[class*="__img-wrap--fallback"] {
  background: var(--color-bg-secondary);
  position:   relative;
}

.img--fallback::after,
[class*="__media--fallback"]::after {
  content:    'Image';
  position:   absolute;
  inset:      0;
  display:    flex;
  align-items: center;
  justify-content: center;
  font-size:  var(--text-xs);
  color:      var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}


/* =====================================================
   15. DIVIDERS & RULES
===================================================== */

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

.divider--gold {
  border-top-color: var(--color-brand-gold);
  border-top-width: 2px;
  width:  60px;
}

.divider--thick {
  border-top-width: 2px;
}

.divider--dashed {
  border-top-style: dashed;
}

/* Vertical divider (inline use) */
.divider-v {
  display:    inline-block;
  width:      1px;
  height:     1em;
  background: var(--color-border);
  margin:     0 var(--space-3);
  vertical-align: middle;
}


/* =====================================================
   16. BREADCRUMB
   Used on: product detail, category, checkout pages
===================================================== */

.breadcrumb {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--space-1);
  padding:     var(--space-4) 0;
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  list-style:  none;
  margin:      0;
}

.breadcrumb__item {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
}

.breadcrumb__item::after {
  content:     '/';
  color:       var(--color-text-disabled);
  font-size:   var(--text-xs);
  margin-left: var(--space-1);
}

.breadcrumb__item:last-child::after {
  display: none;
}

.breadcrumb__link {
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color var(--transition-fast);
  white-space:     nowrap;
}

.breadcrumb__link:hover {
  color: var(--color-text-primary);
}

.breadcrumb__current {
  color:       var(--color-text-primary);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   200px;
}


/* =====================================================
   17. PAGE LAYOUT SHELLS
   High-level structural patterns for different page types
===================================================== */

/* ── Default Page (no sidebar) ── */
.page-layout {
  min-height: calc(100dvh - var(--header-height, 72px));
}

/* ── With Sidebar (shop/category pages) ── */
.page-layout--with-sidebar {
  display:               grid;
  grid-template-columns: var(--sidebar-width, 260px) 1fr;
  gap:                   var(--space-8);
  align-items:           start;
}

/* ── Full Bleed (hero-first pages) ── */
.page-layout--full-bleed > *:first-child {
  margin-top: calc(-1 * var(--header-height, 72px));
}

/* ── Centered Content (about, legal pages) ── */
.page-layout--centered {
  max-width:   840px;
  margin:      0 auto;
  padding:     var(--space-16) var(--space-6);
}

/* ── Two Column (product detail) ── */
.page-layout--product {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-12);
  align-items:           start;
  padding-top:           var(--space-8);
}

/* ── Checkout (form + order summary) ── */
.page-layout--checkout {
  display:               grid;
  grid-template-columns: 1fr 420px;
  gap:                   var(--space-10);
  align-items:           start;
}

/* ── Admin (sidebar + main) ── */
.page-layout--admin {
  display:               grid;
  grid-template-columns: var(--admin-sidebar-width, 240px) 1fr;
  min-height:            100dvh;
}


/* =====================================================
   18. CATEGORY GRID LAYOUT
   The 6-card asymmetric grid on the homepage.
   2 large cards (Women, Men) + 4 small cards
===================================================== */

.categories-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows:    auto auto;
  gap:                   var(--space-4);
}

/* Large cards span 2 columns + 2 rows */
.cat-card--large {
  grid-column: span 2;
  grid-row:    span 2;
}

/*
  Visual layout:
  [ Women (2×2) ] [ Men (2×2) ]
  [ Shawls ] [ Shoes ] [ Caps ] [ Accessories ]
*/


/* =====================================================
   19. PRODUCTS GRID
   Responsive grid for product card listings.
   Used on: homepage sections, category pages, search results
===================================================== */

/* 4-column grid (desktop default) */
.products-grid--4 {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-6) var(--space-5);
}

/* 3-column grid (some listing pages) */
.products-grid--3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-6) var(--space-5);
}

/* 2-column grid (mobile + checkout related) */
.products-grid--2 {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-4);
}

/* Auto-responsive grid (product listing page) */
.products-grid--auto {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   var(--space-6) var(--space-5);
}

/* List view variant (toggled by JS on listing page) */
.products-grid--list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.products-grid--list .product-card {
  display:               grid;
  grid-template-columns: 280px 1fr auto;
  align-items:           center;
  gap:                   var(--space-6);
}

/* Loading skeleton grid — same column structure as real grid */
.products-grid--4 .product-skeleton,
.products-grid--3 .product-skeleton {
  /* skeletons pick up grid sizing automatically */
}


/* =====================================================
   20. TWO-COLUMN EDITORIAL SPLIT
   Used for brand editorial / story sections
===================================================== */

.editorial-split {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-16);
  align-items:           center;
}

.editorial-split--reversed .editorial-split__media {
  order: -1;
}

.editorial-split--60-40 {
  grid-template-columns: 60fr 40fr;
}

.editorial-split--40-60 {
  grid-template-columns: 40fr 60fr;
}


/* =====================================================
   21. COLLECTION SPOTLIGHT GRID
   Shawls section on homepage: content left, stacked images right
===================================================== */

.collection-spotlight__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-16);
  align-items:           center;
}

.collection-spotlight__content {
  /* left side — text, features list, CTAs */
}

.collection-spotlight__media {
  /* right side — stacked image composition */
  position: relative;
}

.collection-spotlight__img-stack {
  position:  relative;
  height:    580px;
}

.collection-spotlight__img-main {
  position:     absolute;
  top:          0;
  left:         0;
  width:        340px;
  height:       480px;
  border-radius: var(--radius-xl);
  overflow:      hidden;
}

.collection-spotlight__img-main img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.collection-spotlight__img-secondary {
  position:      absolute;
  bottom:        0;
  right:         0;
  width:         220px;
  height:        300px;
  border-radius: var(--radius-xl);
  overflow:      hidden;
  border:        4px solid var(--color-bg-primary, #fff);
  box-shadow:    var(--shadow-lg);
}

.collection-spotlight__img-secondary img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Floating badge on the image stack */
.collection-spotlight__badge {
  position:      absolute;
  top:           50%;
  right:         -20px;
  transform:     translateY(-50%);
  background:    var(--color-brand-black);
  color:         var(--color-brand-white);
  padding:       var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  text-align:    center;
  box-shadow:    var(--shadow-xl);
  z-index:       var(--z-raised);
}


/* =====================================================
   22. PROMO BANNERS GRID
   Two side-by-side promotional banners (Shoes + Accessories)
===================================================== */

.promo-banners__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-5);
}


/* =====================================================
   23. TESTIMONIALS GRID
   Three-column card grid on homepage
===================================================== */

.testimonials-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-6);
  margin-bottom:         var(--space-10);
}

.testimonials-section__cta {
  text-align: center;
}


/* =====================================================
   24. TRUST STRIP LAYOUT
   5-item horizontal strip below hero
===================================================== */

.trust-strip {
  padding:    var(--space-6) 0;
  background: var(--color-bg-secondary);
  border-top:    1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.trust-strip__list {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-6);
  list-style:      none;
  margin:          0;
  padding:         0;
}

.trust-strip__item {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex:        1;
  min-width:   160px;
}

.trust-strip__icon {
  flex-shrink:   0;
  width:         40px;
  height:        40px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  background:    var(--color-bg-primary, #fff);
  border-radius: var(--radius-full);
  border:        1px solid var(--color-border);
  color:         var(--color-brand-black);
}

.trust-strip__body {
  flex: 1;
}


/* =====================================================
   25. FOOTER LAYOUT
   Fully handled in footer.css but structural grid here
   for the footer columns.
===================================================== */

.footer-main__grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   var(--space-10);
  padding:               var(--space-16) 0;
}

.footer-col {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.footer-col--brand {
  /* Brand column is wider (2fr) */
}

.footer-bottom__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-4);
  padding:         var(--space-5) 0;
}


/* =====================================================
   26. STICKY SIDEBAR
   Used on: product listing page (filters)
===================================================== */

.sidebar--sticky {
  position:  sticky;
  top:       calc(var(--header-height, 72px) + var(--space-4));
  max-height: calc(100dvh - var(--header-height, 72px) - var(--space-8));
  overflow-y: auto;

  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.sidebar--sticky::-webkit-scrollbar {
  width: 4px;
}

.sidebar--sticky::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar--sticky::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}


/* =====================================================
   27. PAGINATION LAYOUT
===================================================== */

.pagination {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-10) 0;
  flex-wrap:       wrap;
}

.pagination__item {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       40px;
  height:          40px;
  padding:         0 var(--space-3);
  border-radius:   var(--radius-md);
  border:          1px solid var(--color-border);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  color:           var(--color-text-secondary);
  text-decoration: none;
  transition:      all var(--transition-fast);
  cursor:          pointer;
  background:      var(--color-bg-primary, #fff);
  user-select:     none;
}

.pagination__item:hover:not(.pagination__item--active):not(.pagination__item--disabled) {
  border-color:    var(--color-brand-black);
  color:           var(--color-brand-black);
  background:      var(--color-bg-secondary);
}

.pagination__item--active {
  background:   var(--color-brand-black);
  border-color: var(--color-brand-black);
  color:        var(--color-brand-white);
  cursor:       default;
}

.pagination__item--disabled {
  opacity:  0.4;
  cursor:   not-allowed;
  pointer-events: none;
}

.pagination__item--ellipsis {
  border: none;
  background: none;
  cursor: default;
  pointer-events: none;
}

.pagination__info {
  font-size:  var(--text-sm);
  color:      var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-2);
}


/* =====================================================
   28. FORM LAYOUT HELPERS
   Generic form structure used across checkout,
   account, contact, newsletter pages
===================================================== */

.form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-5);
}

.form-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-grid--full {
  grid-template-columns: 1fr;
}

/* Full-width field inside a 2-col grid */
.form-field--full {
  grid-column: 1 / -1;
}

.form-section {
  margin-bottom:   var(--space-8);
  padding-bottom:  var(--space-8);
  border-bottom:   1px solid var(--color-border);
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.form-section__title {
  font-family:   var(--font-serif);
  font-size:     var(--text-xl);
  font-weight:   var(--weight-semibold);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-5);
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
}

.form-section__title svg {
  color:       var(--color-brand-gold);
  flex-shrink: 0;
}

/* Step indicator for multi-step checkout */
.checkout-steps {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0;
  margin-bottom:   var(--space-10);
}

.checkout-step {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-sm);
  font-weight: var(--weight-medium);
  color:       var(--color-text-muted);
  white-space: nowrap;
}

.checkout-step__num {
  width:           28px;
  height:          28px;
  border-radius:   var(--radius-full);
  border:          2px solid var(--color-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--text-xs);
  font-weight:     var(--weight-bold);
  flex-shrink:     0;
  transition:      all var(--transition-fast);
}

.checkout-step--active {
  color: var(--color-text-primary);
}

.checkout-step--active .checkout-step__num {
  background:   var(--color-brand-black);
  border-color: var(--color-brand-black);
  color:        var(--color-brand-white);
}

.checkout-step--done .checkout-step__num {
  background:   var(--color-success);
  border-color: var(--color-success);
  color:        #fff;
}

.checkout-step__connector {
  width:      60px;
  height:     1px;
  background: var(--color-border);
  flex-shrink: 0;
}


/* =====================================================
   29. ADMIN LAYOUT SHELL
===================================================== */

.admin-layout {
  display:        grid;
  grid-template-columns: var(--admin-sidebar-width, 240px) 1fr;
  min-height:     100dvh;
}

.admin-sidebar {
  background:     var(--color-bg-dark, #0A0A0A);
  color:          var(--color-text-inverse);
  height:         100dvh;
  position:       sticky;
  top:            0;
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  z-index:        var(--z-sticky);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.admin-main {
  background:   var(--color-bg-secondary);
  min-height:   100dvh;
  overflow-x:   hidden;
}

.admin-topbar {
  position:   sticky;
  top:        0;
  z-index:    var(--z-raised);
  background: var(--color-bg-primary, #fff);
  border-bottom: 1px solid var(--color-border);
  padding:    var(--space-4) var(--space-6);
  display:    flex;
  align-items: center;
  justify-content: space-between;
  gap:        var(--space-4);
}

.admin-content {
  padding: var(--space-8) var(--space-6);
}

/* Admin stats grid */
.admin-stats-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-5);
  margin-bottom:         var(--space-8);
}

/* Admin table layout */
.admin-table-wrap {
  background:    var(--color-bg-primary, #fff);
  border-radius: var(--radius-xl);
  border:        1px solid var(--color-border);
  overflow:      hidden;
}


/* =====================================================
   30. RESPONSIVE BREAKPOINTS
   Mobile-first approach:
     xs:  < 480px   (small phones)
     sm:  < 640px   (phones)
     md:  < 768px   (large phones / small tablets)
     lg:  < 1024px  (tablets / small laptops)
     xl:  < 1280px  (laptops)
     2xl: ≥ 1280px  (desktops — default styles target this)
===================================================== */

/* ── XL: up to 1280px (laptops) ── */
@media (max-width: 1280px) {

  :root {
    --container-px: var(--space-5);
  }

  .products-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-main__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap:                   var(--space-8);
  }

  .page-layout--checkout {
    grid-template-columns: 1fr 380px;
  }

  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ── LG: up to 1024px (tablets) ── */
@media (max-width: 1024px) {

  :root {
    --container-px: var(--space-5);
  }

  .section {
    --section-py: var(--space-16);
  }

  /* Category grid: 2 large + 3 small in adjusted layout */
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows:    auto;
  }

  .cat-card--large {
    grid-column: span 1;
    grid-row:    span 1;
  }

  /* Products */
  .products-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Spotlight */
  .collection-spotlight__grid {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-10);
  }

  .collection-spotlight__img-stack {
    height: 440px;
  }

  .collection-spotlight__img-main {
    width:  260px;
    height: 380px;
  }

  .collection-spotlight__img-secondary {
    width:  180px;
    height: 240px;
  }

  /* Footer */
  .footer-main__grid {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-8);
  }

  .footer-col--brand {
    grid-column: 1 / -1;
    display:     grid;
    grid-template-columns: 1.5fr 1fr;
    gap:         var(--space-8);
  }

  /* Page layouts */
  .page-layout--with-sidebar {
    grid-template-columns: 220px 1fr;
    gap:                   var(--space-6);
  }

  .page-layout--checkout {
    grid-template-columns: 1fr 340px;
    gap:                   var(--space-8);
  }

  .editorial-split {
    gap: var(--space-10);
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Promo banners — stay 2 col */
  /* Admin */
  .admin-layout {
    grid-template-columns: 200px 1fr;
  }

}

/* ── MD: up to 768px (large phones) ── */
@media (max-width: 768px) {

  :root {
    --container-px: var(--space-4);
  }

  .section {
    --section-py: var(--space-12);
  }

  /* Show/hide mobile toggles */
  .show-mobile { display: block; }
  .hide-mobile { display: none;  }

  /* Category grid: 2×2 on tablet */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .cat-card--large {
    grid-column: span 1;
  }

  /* Products */
  .products-grid--4,
  .products-grid--3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-3);
  }

  .products-grid--auto {
    grid-template-columns: repeat(2, 1fr);
  }

  /* List view on mobile: revert to grid */
  .products-grid--list .product-card {
    grid-template-columns: 120px 1fr;
    gap: var(--space-4);
  }

  /* Spotlight: stack vertically */
  .collection-spotlight__grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-8);
  }

  .collection-spotlight__media {
    order: -1; /* image above text on mobile */
  }

  .collection-spotlight__img-stack {
    height: 340px;
  }

  .collection-spotlight__img-main {
    width:  200px;
    height: 280px;
  }

  .collection-spotlight__img-secondary {
    width:  140px;
    height: 180px;
    right:  var(--space-4);
  }

  .collection-spotlight__badge {
    right: auto;
    left:  var(--space-4);
    top:   auto;
    bottom: var(--space-4);
    transform: none;
  }

  /* Editorial split: stack */
  .editorial-split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Promo banners: stack */
  .promo-banners__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Testimonials: single column */
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  /* Trust strip: 2 per row */
  .trust-strip__list {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    justify-items:         start;
  }

  /* Trust strip 5th item spans full width */
  .trust-strip__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }

  /* Section header inline: stack */
  .section-header--inline {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-3);
  }

  /* Forms */
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid--3 {
    grid-template-columns: 1fr;
  }

  /* Checkout */
  .page-layout--checkout {
    grid-template-columns: 1fr;
  }

  /* Product detail */
  .page-layout--product {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* With sidebar: stack */
  .page-layout--with-sidebar {
    grid-template-columns: 1fr;
  }

  /* Footer: 2 columns */
  .footer-main__grid {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-8) var(--space-6);
    padding:               var(--space-10) 0;
  }

  .footer-col--brand {
    grid-column:           1 / -1;
    grid-template-columns: 1fr;
    gap:                   var(--space-6);
  }

  .footer-bottom__inner {
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    gap:             var(--space-3);
  }

  /* Checkout steps: compact */
  .checkout-step__label {
    display: none;
  }

  .checkout-step__connector {
    width: 30px;
  }

  /* Admin: full width (sidebar becomes off-canvas) */
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    display: none; /* toggled by JS on mobile */
  }

  .admin-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Pagination */
  .pagination__item--ellipsis + .pagination__item:not(.pagination__item--active) {
    display: none;
  }

}

/* ── SM: up to 640px (phones) ── */
@media (max-width: 640px) {

  .section {
    --section-py: var(--space-10);
  }

  .section-header {
    margin-bottom: var(--space-8);
  }

  /* Footer: single column */
  .footer-main__grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-6);
    padding:               var(--space-8) 0;
  }

  .footer-col--brand {
    grid-column: auto;
  }

  /* Trust strip: single column */
  .trust-strip__list {
    grid-template-columns: 1fr;
    gap:                   var(--space-4);
  }

  .trust-strip__item:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: auto;
  }

  /* Admin stats */
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }

}

/* ── XS: up to 480px (small phones) ── */
@media (max-width: 480px) {

  :root {
    --container-px: var(--space-4);
  }

  .section {
    --section-py: var(--space-8);
  }

  /* Products: 2 col stays but tighter */
  .products-grid--4,
  .products-grid--3,
  .products-grid--2 {
    gap: var(--space-3) var(--space-2);
  }

  /* Categories: 2 col tight */
  .categories-grid {
    gap: var(--space-2);
  }

  /* Breadcrumb: truncate middle items */
  .breadcrumb__item:not(:first-child):not(:last-child) {
    display: none;
  }

  /* Pagination: fewer items */
  .pagination {
    gap: var(--space-1);
  }

  .pagination__item {
    min-width: 36px;
    height:    36px;
    font-size: var(--text-xs);
  }

  /* Checkout steps: icon only */
  .checkout-steps {
    gap: 0;
  }

  .checkout-step__connector {
    width: 20px;
  }

}


/* =====================================================
   PRINT STYLES
   Minimal — hide nav/footer, show content cleanly
===================================================== */

@media print {

  .site-header,
  .site-footer,
  .cart-sidebar,
  .search-overlay,
  .mobile-drawer,
  .wa-float,
  .back-to-top,
  .toast-container,
  .announcement-bar {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }

}


/* =====================================================
   REDUCED MOTION
   Respect user preference — disable transitions/animations
===================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }

}