/* ==========================================================================
   UNWRITTEN STORY - Core Stylesheet
   A single, well-commented stylesheet used by every page on the site.
   Sections:
     1. Fonts & CSS variables (EDIT COLORS/FONTS HERE)
     2. Reset & base
     3. Layout helpers
     4. Buttons & form controls
     5. Announcement bar
     6. Header & navigation
     7. Cart drawer
     8. Hero & editorial sections
     9. Product grid & cards
     10. Product detail page
     11. Filters / sort / search
     12. Footer
     13. Content pages (about, policy, faq, contact)
     14. Cart & checkout pages
     15. Utilities, motion, accessibility
     16. Responsive breakpoints
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Caveat:wght@500;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- 1. Variables --------------------------------------------- */
:root{
  /* Brand palette - swap these to re-theme the whole site */
  --black:      #0a0908;
  --charcoal:   #1a1714;
  --charcoal-2: #262220;
  --charcoal-3: #34302c;
  --cream:      #f3ece0;
  --beige:      #d9c9ac;
  --sand:       #c7a877;
  --brown:      #4a3324;
  --white:      #ffffff;
  --red:        #a52a22;
  --red-bright: #c73a2f;

  --line: rgba(243,236,224,0.14);
  --line-strong: rgba(243,236,224,0.28);

  --font-display: 'Bebas Neue', Impact, sans-serif;   /* large statement type */
  --font-script:  'Caveat', cursive;                   /* brush/handwritten */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1280px;
  --gap: 24px;
  --radius: 2px;

  --shadow-lg: 0 30px 60px rgba(0,0,0,0.45);
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.3);

  --ease: cubic-bezier(.22,.68,0,1);
}

/* ---------- 2. Reset & base -------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; font-size:1rem; }

/* Distressed background texture applied selectively via .texture */
.texture{
  position:relative;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.03) 0, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.025) 0, transparent 45%);
}
.texture::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0.06;
  mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--sand);
  outline-offset: 3px;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--red); color:var(--white);
  padding:12px 18px; z-index:999; font-weight:700;
}
.skip-link:focus{ left: 12px; top:12px; }

/* ---------- 3. Layout helpers ------------------------------------------ */
.container{ max-width: var(--container); margin:0 auto; padding: 0 24px; }
.section{ padding: 96px 0; }
.section--tight{ padding: 56px 0; }
.grid{ display:grid; gap: var(--gap); }
.flex{ display:flex; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.center{ text-align:center; }
.eyebrow{
  font-family: var(--font-body); font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; font-size:.72rem; color: var(--sand);
}
.divider{
  width:100%; height:1px; background: var(--line); border:0; margin: 0;
}
.divider--thick{ height:2px; background: var(--line-strong); }
.ink-divider{
  display:block; width:120px; height:14px; margin: 18px auto;
  background: linear-gradient(90deg, transparent, var(--red) 20%, var(--red) 80%, transparent);
  clip-path: polygon(0% 40%,10% 0%,25% 60%,40% 10%,55% 70%,70% 5%,85% 55%,100% 20%,100% 80%,85% 45%,70% 95%,55% 30%,40% 90%,25% 40%,10% 100%,0% 60%);
  opacity:.85;
}
.h-display{
  font-family: var(--font-display);
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:0.92;
  color: var(--cream);
}
.h-xl{ font-size: clamp(3rem, 9vw, 8rem); }
.h-lg{ font-size: clamp(2.4rem, 6vw, 4.6rem); }
.h-md{ font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.h-script{
  font-family: var(--font-script);
  color: var(--sand);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height:1;
}
.lede{ font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--beige); max-width: 620px; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-0{margin-top:0} .mt-8{margin-top:8px} .mt-16{margin-top:16px}
.mt-24{margin-top:24px} .mt-32{margin-top:32px} .mt-48{margin-top:48px}
.mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px} .mb-32{margin-bottom:32px}

/* ---------- 4. Buttons & forms ------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 16px 32px;
  font-family: var(--font-body); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:.82rem;
  border:1px solid var(--cream); border-radius: var(--radius);
  background:transparent; color:var(--cream);
  transition: background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:var(--cream); color:var(--black); transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn--solid{ background:var(--cream); color:var(--black); }
.btn--solid:hover{ background:var(--sand); border-color:var(--sand); color:var(--black); }
.btn--red{ background:var(--red); border-color:var(--red); color:var(--white); }
.btn--red:hover{ background:var(--red-bright); border-color:var(--red-bright); color:var(--white); }
.btn--ghost{ border-color: var(--line-strong); color:var(--beige); }
.btn--ghost:hover{ background:var(--charcoal-2); color:var(--cream); border-color:var(--cream); }
.btn--block{ width:100%; }
.btn--sm{ padding:11px 20px; font-size:.72rem; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn[disabled]:hover{ transform:none; }

.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--beige); font-weight:600; }
.field input, .field select, .field textarea{
  background: var(--charcoal-2); border:1px solid var(--line-strong); color:var(--cream);
  padding:14px 16px; border-radius: var(--radius);
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(243,236,224,0.4); }
.field-row{ display:flex; gap:16px; flex-wrap:wrap; }
.field-row .field{ flex:1 1 200px; }
.form-note{ font-size:.82rem; color:var(--beige); opacity:.8; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--beige); }

/* ---------- 5. Announcement bar ----------------------------------------- */
.announce{
  background: var(--red); color: var(--white);
  text-align:center; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:10px 44px 10px 16px; position:relative;
}
.announce__track{ display:inline-block; }
.announce__close{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:var(--white); font-size:1.1rem; line-height:1;
  padding:4px 8px;
}

/* ---------- 6. Header & nav --------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background: rgba(10,9,8,0.92); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px; max-width: var(--container); margin:0 auto;
  gap: 20px;
}
.logo-link{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark{ width:38px; height:38px; }
.logo-word{ display:flex; flex-direction:column; line-height:0.86; }
.logo-word .l1{ font-family: var(--font-display); font-size:1.5rem; letter-spacing:.04em; color:var(--cream); }
.logo-word .l2{ font-family: var(--font-script); font-size:1rem; color:var(--sand); align-self:flex-end; }

.main-nav{ display:flex; align-items:center; gap: 22px; }
.main-nav a{
  font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: var(--beige); position:relative; padding:6px 2px; white-space:nowrap;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--sand); transition: width .25s var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color: var(--cream); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap:18px; }
.icon-btn{
  background:transparent; border:0; color:var(--cream); position:relative;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
}
.icon-btn svg{ width:20px; height:20px; }
.badge-count{
  position:absolute; top:-4px; right:-6px; background:var(--red); color:var(--white);
  font-size:.62rem; font-weight:800; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.search-bar{
  display:flex; align-items:center; gap:8px; background:var(--charcoal-2);
  border:1px solid var(--line-strong); padding:8px 12px; border-radius: var(--radius);
}
.search-bar input{ background:transparent; border:0; color:var(--cream); width:160px; }
.search-bar input:focus{ outline:none; }

.menu-toggle{ display:none; background:transparent; border:0; color:var(--cream); width:34px; height:34px; }
.menu-toggle svg{ width:24px; height:24px; }

.mobile-nav{
  display:none; position:fixed; inset:0 0 0 auto; width:min(86vw,380px); height:100vh;
  background:var(--charcoal); z-index:100; padding:28px 24px; transform:translateX(100%);
  transition:transform .35s var(--ease); overflow-y:auto; border-left:1px solid var(--line);
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.mobile-nav a{
  display:block; padding:14px 0; font-family:var(--font-display); font-size:1.6rem;
  letter-spacing:.02em; border-bottom:1px solid var(--line); color:var(--cream);
}
.scrim{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:90;
  opacity:0; transition:opacity .3s var(--ease);
}
.scrim.is-open{ display:block; opacity:1; }

/* ---------- 7. Cart drawer ------------------------------------------------ */
.cart-drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(94vw,420px);
  background:var(--charcoal); border-left:1px solid var(--line); z-index:110;
  transform:translateX(100%); transition:transform .35s var(--ease);
  display:flex; flex-direction:column;
}
.cart-drawer.is-open{ transform:translateX(0); }
.cart-drawer__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 24px; border-bottom:1px solid var(--line);
}
.cart-drawer__head h2{ font-family:var(--font-display); font-size:1.6rem; letter-spacing:.03em; }
.cart-drawer__items{ flex:1; overflow-y:auto; padding:16px 24px; }
.cart-line{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-line img{ width:76px; height:92px; object-fit:cover; border-radius:var(--radius); background:var(--charcoal-3); }
.cart-line__info{ flex:1; display:flex; flex-direction:column; gap:4px; }
.cart-line__name{ font-weight:700; font-size:.92rem; }
.cart-line__meta{ font-size:.78rem; color:var(--beige); opacity:.8; }
.cart-line__row{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.qty-stepper{ display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--radius); }
.qty-stepper button{ background:transparent; border:0; color:var(--cream); width:26px; height:26px; }
.qty-stepper span{ min-width:24px; text-align:center; font-size:.85rem; }
.cart-line__remove{ background:transparent; border:0; color:var(--beige); font-size:.72rem; text-decoration:underline; }
.cart-drawer__empty{ text-align:center; padding:60px 20px; color:var(--beige); }
.cart-drawer__foot{ padding:20px 24px 28px; border-top:1px solid var(--line); }
.cart-subtotal-row{ display:flex; justify-content:space-between; font-weight:700; margin-bottom:16px; font-family:var(--font-body); }
.cart-drawer__foot .form-note{ margin-top:12px; text-align:center; }

/* ---------- 8. Hero & editorial ------------------------------------------ */
.hero{
  position:relative; min-height: 92vh; display:flex; align-items:flex-end;
  background: linear-gradient(180deg, rgba(10,9,8,.2), rgba(10,9,8,.96)), var(--charcoal);
  overflow:hidden; border-bottom:1px solid var(--line);
}
.hero__bg{
  position:absolute; inset:0; background:
   radial-gradient(ellipse at 30% 20%, rgba(199,168,119,.14), transparent 55%),
   radial-gradient(ellipse at 80% 80%, rgba(165,42,34,.16), transparent 50%),
   repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 26px);
}
.hero__content{ position:relative; padding: 80px 24px 90px; max-width: var(--container); margin:0 auto; width:100%; }
.hero__kicker{ font-family:var(--font-script); color:var(--sand); font-size: clamp(1.4rem,3vw,2.2rem); }
.hero__title{ margin-top:6px; }
.hero__sub{ margin-top:22px; max-width:560px; }
.hero__cta{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }

.editorial{
  position:relative; min-height:70vh; display:flex; align-items:center;
  background: linear-gradient(180deg, rgba(10,9,8,.35), rgba(10,9,8,.85)), var(--charcoal-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.editorial__bg{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 70% 30%, rgba(199,168,119,.12), transparent 60%),
              repeating-linear-gradient(-70deg, rgba(255,255,255,.02) 0 2px, transparent 2px 30px);
}
.editorial__content{ position:relative; max-width:640px; padding: 80px 24px; margin:0 auto; }

/* placeholder media block used wherever a real photo/graphic will go */
.media-frame{
  position:relative; background: var(--charcoal-3); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  aspect-ratio: 4/5; border-radius: var(--radius);
}
.media-frame img{ width:100%; height:100%; object-fit:cover; }
.media-frame .placeholder-tag{
  position:absolute; bottom:10px; left:10px; background:rgba(10,9,8,.75);
  color:var(--sand); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 9px; border:1px solid var(--line-strong); border-radius:var(--radius);
}

/* ---------- 9. Product grid & cards -------------------------------------- */
.grid-products{
  grid-template-columns: repeat(4, 1fr);
}
.product-card{ position:relative; }
.product-card__media{
  position:relative; aspect-ratio: 4/5; background:var(--charcoal-3);
  overflow:hidden; border-radius: var(--radius); border:1px solid var(--line);
}
.product-card__media img{ width:100%; height:100%; object-fit:cover; transition:opacity .35s var(--ease); }
.product-card__media img.img-back{ position:absolute; inset:0; opacity:0; }
.product-card:hover .img-back{ opacity:1; }
.product-card:hover .img-front{ opacity:0; }
.product-card__badges{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.tag{
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; font-weight:800;
  padding:5px 9px; border-radius:var(--radius); background:var(--black); color:var(--cream);
  border:1px solid var(--line-strong);
}
.tag--new{ background:var(--sand); color:var(--black); border-color:var(--sand); }
.tag--limited{ background:var(--red); color:var(--white); border-color:var(--red); }
.tag--low{ background:transparent; color:var(--sand); border-color:var(--sand); }
.wishlist-btn{
  position:absolute; top:10px; right:10px; z-index:2; background:rgba(10,9,8,.6);
  border:1px solid var(--line-strong); border-radius:50%; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; color:var(--cream);
  transition: background .2s, color .2s;
}
.wishlist-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.wishlist-btn.is-active{ color:var(--red-bright); }
.wishlist-btn.is-active svg{ fill:var(--red-bright); }
.product-card__body{ padding-top:14px; }
.product-card__cat{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sand); }
.product-card__name{ font-weight:700; margin-top:4px; font-size:.98rem; }
.product-card__price{ margin-top:4px; color:var(--beige); font-size:.92rem; }
.product-card__price .was{ text-decoration:line-through; opacity:.55; margin-right:8px; }
.swatches{ display:flex; gap:6px; margin-top:10px; }
.swatch{ width:15px; height:15px; border-radius:50%; border:1px solid var(--line-strong); }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:40px; flex-wrap:wrap; }
.section-head .view-all{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; border-bottom:1px solid var(--sand); color:var(--sand); padding-bottom:2px; }

/* ---------- 10. Product detail -------------------------------------------- */
.pdp{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:flex-start; }
.pdp__gallery{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; position:sticky; top:100px; }
.pdp__gallery .media-frame{ aspect-ratio:3/4; }
.pdp__info .eyebrow{ margin-bottom:10px; }
.pdp__price{ font-size:1.4rem; color:var(--cream); margin-top:10px; font-weight:700; }
.pdp__desc{ color:var(--beige); margin-top:18px; max-width:52ch; }
.option-group{ margin-top:26px; }
.option-group__label{ display:flex; justify-content:space-between; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--beige); font-weight:700; margin-bottom:10px; }
.color-options{ display:flex; gap:10px; }
.color-dot{
  width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer;
  position:relative;
}
.color-dot.is-selected{ border-color:var(--sand); }
.color-dot.is-selected::after{ content:""; position:absolute; inset:-5px; border:1px solid var(--sand); border-radius:50%; }
.size-options{ display:flex; gap:10px; flex-wrap:wrap; }
.size-btn{
  min-width:48px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--radius);
  background:transparent; color:var(--cream); font-size:.82rem; font-weight:600;
}
.size-btn.is-selected{ background:var(--cream); color:var(--black); border-color:var(--cream); }
.size-btn[disabled]{ opacity:.3; text-decoration:line-through; cursor:not-allowed; }
.qty-row{ display:flex; align-items:center; gap:16px; margin-top:26px; }
.pdp__actions{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; }
.pdp__actions .btn{ flex:1 1 200px; }
.low-stock-msg{ margin-top:14px; color:var(--red-bright); font-size:.85rem; font-weight:700; }
.accordion{ margin-top:36px; border-top:1px solid var(--line); }
.accordion__item{ border-bottom:1px solid var(--line); }
.accordion__trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:transparent; border:0; color:var(--cream); padding:18px 2px;
  font-weight:700; font-size:.92rem; text-transform:uppercase; letter-spacing:.05em;
}
.accordion__panel{ display:none; padding: 0 2px 20px; color:var(--beige); font-size:.92rem; }
.accordion__item.is-open .accordion__panel{ display:block; }
.accordion__item.is-open .accordion__icon{ transform:rotate(45deg); }
.accordion__icon{ transition:transform .2s var(--ease); font-size:1.2rem; }
.size-guide-link{ font-size:.82rem; text-decoration:underline; color:var(--sand); }

.reviews{ margin-top:20px; }
.review{ border-top:1px solid var(--line); padding:18px 0; }
.review__stars{ color:var(--sand); letter-spacing:2px; }
.review__meta{ font-size:.78rem; color:var(--beige); opacity:.8; margin-top:4px; }
.review__body{ margin-top:8px; color:var(--beige); }

/* ---------- 11. Filters / sort / search ----------------------------------- */
.shop-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:34px; }
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  padding:9px 16px; border:1px solid var(--line-strong); border-radius:20px; font-size:.78rem;
  letter-spacing:.03em; text-transform:uppercase; font-weight:600; color:var(--beige); background:transparent;
}
.chip.is-active{ background:var(--cream); color:var(--black); border-color:var(--cream); }
.sort-select{ background:var(--charcoal-2); border:1px solid var(--line-strong); color:var(--cream); padding:10px 14px; border-radius:var(--radius); font-size:.82rem; }
.results-empty{ text-align:center; padding:80px 20px; color:var(--beige); }

.search-overlay{
  position:fixed; inset:0; background:rgba(10,9,8,.97); z-index:120; display:none;
  flex-direction:column; padding: 100px 24px; align-items:center;
}
.search-overlay.is-open{ display:flex; }
.search-overlay input{
  width:min(700px,90vw); background:transparent; border:0; border-bottom:2px solid var(--cream);
  color:var(--cream); font-family:var(--font-display); font-size:2rem; padding:10px 0; text-align:center;
}
.search-overlay input:focus{ outline:none; }
.search-overlay__close{ position:absolute; top:24px; right:28px; background:transparent; border:0; color:var(--cream); font-size:1.6rem; }
.search-results{ margin-top:30px; width:min(700px,90vw); max-height:50vh; overflow-y:auto; }
.search-results a{ display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); align-items:center; }
.search-results img{ width:50px; height:60px; object-fit:cover; }

/* size guide popup */
.modal-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:130; display:none; align-items:center; justify-content:center; padding:24px; }
.modal-scrim.is-open{ display:flex; }
.modal{ background:var(--charcoal); border:1px solid var(--line-strong); max-width:640px; width:100%; max-height:86vh; overflow-y:auto; padding:32px; border-radius:var(--radius); position:relative; }
.modal__close{ position:absolute; top:16px; right:16px; background:transparent; border:0; color:var(--cream); font-size:1.4rem; }
.size-table{ width:100%; border-collapse:collapse; margin-top:20px; font-size:.88rem; }
.size-table th, .size-table td{ border:1px solid var(--line); padding:10px 12px; text-align:center; }
.size-table th{ background:var(--charcoal-2); text-transform:uppercase; font-size:.72rem; letter-spacing:.06em; }

/* ---------- 12. Footer ---------------------------------------------------- */
.site-footer{ background:var(--charcoal); border-top:1px solid var(--line); }
.footer-signup{ border-bottom:1px solid var(--line); padding:64px 0; }
.footer-signup__inner{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; }
.signup-form{ display:flex; gap:10px; flex-wrap:wrap; }
.signup-form input{ background:var(--charcoal-2); border:1px solid var(--line-strong); color:var(--cream); padding:14px 16px; min-width:260px; border-radius:var(--radius); }
.footer-cols{ display:grid; grid-template-columns: 1.4fr repeat(4,1fr); gap:32px; padding:64px 0 40px; }
.footer-col h3{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sand); margin-bottom:18px; }
.footer-col a, .footer-col p{ display:block; color:var(--beige); font-size:.9rem; margin-bottom:12px; }
.footer-col a:hover{ color:var(--cream); }
.social-row{ display:flex; gap:14px; margin-top:8px; }
.social-row a{ width:36px; height:36px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.social-row svg{ width:16px; height:16px; }
.footer-bottom{ border-top:1px solid var(--line); padding:22px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.78rem; color:var(--beige); opacity:.75; }
.footer-legal-links{ display:flex; gap:18px; }
.payment-icons{ display:flex; gap:10px; opacity:.7; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- 13. Content pages -------------------------------------------- */
.page-header{ padding:70px 0 40px; border-bottom:1px solid var(--line); text-align:center; }
.prose{ max-width:760px; margin:0 auto; color:var(--beige); }
.prose h2{ font-family:var(--font-display); letter-spacing:.02em; font-size:1.8rem; color:var(--cream); margin-top:44px; margin-bottom:14px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin-bottom:16px; }
.prose ul{ margin: 0 0 16px 0; }
.prose li{ position:relative; padding-left:20px; margin-bottom:10px; }
.prose li::before{ content:"—"; position:absolute; left:0; color:var(--sand); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item .accordion__trigger{ font-size:1rem; text-transform:none; letter-spacing:0; }
.founder-section{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap:56px; align-items:center; }
.mission-block{ max-width:720px; margin:0 auto; text-align:center; }
.stat-row{ display:flex; justify-content:center; gap:64px; margin-top:48px; flex-wrap:wrap; }
.stat{ text-align:center; }
.stat__num{ font-family:var(--font-display); font-size:2.6rem; color:var(--sand); }
.stat__label{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--beige); margin-top:6px; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; }
.social-gallery{ grid-template-columns: repeat(6,1fr); }
.social-gallery .media-frame{ aspect-ratio:1/1; }
.review-grid{ grid-template-columns: repeat(3,1fr); }
.review-card{ border:1px solid var(--line); padding:26px; border-radius:var(--radius); background:var(--charcoal-2); }
.category-grid{ grid-template-columns: repeat(4,1fr); }
.category-card{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); }
.category-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.category-card:hover img{ transform:scale(1.06); }
.category-card__label{
  position:absolute; inset:auto 0 0 0; padding:22px; background:linear-gradient(0deg, rgba(10,9,8,.85), transparent);
  font-family:var(--font-display); font-size:1.5rem; letter-spacing:.03em;
}

/* ---------- 14. Cart & checkout ------------------------------------------- */
.cart-page-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap:56px; align-items:flex-start; }
.cart-table__row{ display:grid; grid-template-columns: 90px 1fr auto auto; gap:18px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line); }
.cart-table__row img{ width:90px; height:108px; object-fit:cover; border-radius:var(--radius); }
.summary-box{ border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:var(--charcoal-2); position:sticky; top:100px; }
.summary-row{ display:flex; justify-content:space-between; padding:8px 0; font-size:.92rem; color:var(--beige); }
.summary-row.total{ color:var(--cream); font-weight:800; font-size:1.1rem; border-top:1px solid var(--line); margin-top:10px; padding-top:16px; }
.promo-row{ display:flex; gap:10px; margin:18px 0; }
.promo-row input{ flex:1; }
.checkout-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:56px; align-items:flex-start; }
.checkout-steps{ display:flex; gap:8px; margin-bottom:30px; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--beige); }
.checkout-steps span.active{ color:var(--sand); font-weight:700; }
.payment-placeholder{
  border:1px dashed var(--line-strong); border-radius:var(--radius); padding:26px; background:var(--charcoal-2);
  text-align:center; color:var(--beige);
}
.payment-placeholder strong{ color:var(--sand); display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em; font-size:.82rem; }
.order-mini-line{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); align-items:center; }
.order-mini-line img{ width:52px; height:62px; object-fit:cover; border-radius:var(--radius); }
.order-mini-line .name{ font-size:.86rem; font-weight:600; }
.order-mini-line .meta{ font-size:.74rem; color:var(--beige); opacity:.8; }

/* ---------- 15. Utilities / accessibility --------------------------------- */
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.no-scroll{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- 16. Responsive -------------------------------------------------- */
@media (max-width: 1080px){
  .founder-section{ grid-template-columns:1fr; }
  .pdp{ grid-template-columns:1fr; }
  .pdp__gallery{ position:static; }
  .footer-cols{ grid-template-columns: 1fr 1fr; }
  .review-grid{ grid-template-columns: repeat(2,1fr); }
  .category-grid{ grid-template-columns: repeat(2,1fr); }
  .grid-products{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 860px){
  .main-nav{ display:none; }
  .search-bar{ display:none; }
  .menu-toggle{ display:flex; align-items:center; justify-content:center; }
  .mobile-nav{ display:block; }
  .cart-page-grid, .checkout-grid, .contact-grid{ grid-template-columns:1fr; }
  .summary-box{ position:static; }
  .social-gallery{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 720px){
  .grid-products{ grid-template-columns: repeat(2,1fr); }
  .footer-cols{ grid-template-columns: 1fr 1fr; padding-top:48px; }
  .footer-signup__inner{ flex-direction:column; align-items:flex-start; }
  .review-grid{ grid-template-columns:1fr; }
  .category-grid{ grid-template-columns: repeat(2,1fr); }
  .section{ padding:64px 0; }
}
@media (max-width: 480px){
  .grid-products{ grid-template-columns: repeat(2,1fr); gap:14px; }
  .footer-cols{ grid-template-columns: 1fr; }
  .cart-table__row{ grid-template-columns: 70px 1fr; row-gap:10px; }
  .cart-table__row img{ width:70px; height:84px; }
}