/* ==========================================================================
   CRAFTARA LIVING — Design System
   Pastel boho / earthy artisan aesthetic. Gen-Z leaning, editorial layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Earthy core */
  --clay:        #C97B5A;
  --clay-deep:   #A85F42;
  --terracotta:  #B96A4A;
  --ochre:       #D9A55F;

  /* Pastel neutrals */
  --cream:       #FBF7F1;
  --oat:         #F4EDE3;
  --sand:        #E8D9C5;
  --line:        #E2D6C6;

  /* Pastel accents */
  --blush:       #E5C1B8;
  --lilac:       #C9BBD1;
  --sage:        #A8B5A0;
  --sage-deep:   #7C8B74;
  --mist:        #CBD5D2;

  /* Ink */
  --ink:         #3A322C;
  --ink-soft:    #6B5F55;
  --ink-faint:   #9A8B7C;

  /* Semantic */
  --bg:          var(--cream);
  --surface:     #FFFFFF;
  --accent:      var(--clay);
  --sale:        #B0523F;

  /* Product imagery — boho beige, never plain white */
  --product-bg:  #F8F5F0;
  --grid-gap:    26px;   /* brief: 20–30px between tiles */

  /* ---- Craftara Living brand palette (locked) -------------------------
     The six named tones every rug photograph and every styled scene must
     sit within. Referenced by tools/audit_visuals.py, which flags any
     product image drifting outside this range. */
  --pal-soft-beige:    #F0E7DA;   /* soft beige      */
  --pal-terracotta:    #C0714E;   /* terracotta clay */
  --pal-copper:        #B9663C;   /* muted copper orange */
  --pal-brass:         #C49A4E;   /* brass / golden accent */
  --pal-stone-grey:    #A9A49C;   /* stone gray      */
  --pal-pampas:        #E4D9C6;   /* pampas beige    */

  /* Type */
  --font-logo:    'Cormorant Garamond', Georgia, serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-body:    'Lato', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-btn:     'Montserrat', 'Lato', sans-serif;

  /* Space + shape */
  --wrap:        1280px;
  --wrap-narrow: 860px;
  --r-sm:        6px;
  --r-md:        14px;
  --r-lg:        26px;
  --r-pill:      999px;

  --shadow-sm:  0 2px 10px rgba(58, 50, 44, .06);
  --shadow-md:  0 10px 30px rgba(58, 50, 44, .10);
  --shadow-lg:  0 24px 60px rgba(58, 50, 44, .14);

  --ease:       cubic-bezier(.22, .61, .36, 1);
  --nav-h:      74px;
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 88% -6%, rgba(229,193,184,.30), transparent 60%),
    radial-gradient(1000px 620px at -8% 22%, rgba(168,181,160,.22), transparent 58%),
    linear-gradient(180deg, var(--cream) 0%, var(--oat) 60%, var(--sand) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: 1.18; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 3px; }

/* --------------------------------------------------------------------------
   4. TYPE SCALE
   -------------------------------------------------------------------------- */
.h-display { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4.6rem); }
.h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3.3rem); }
.h2 { font-family: var(--font-display); font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
.h3 { font-family: var(--font-serif); font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 600; }
.h4 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; }

/* Editorial italic — used for artisan storytelling voice */
.italic-rich {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  color: var(--ink-soft);
  line-height: 1.6;
}

.eyebrow {
  font-family: var(--font-btn);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin: 0 0 .9rem;
}
.lede { font-size: 1.06rem; color: var(--ink-soft); max-width: 62ch; }
.muted { color: var(--ink-soft); }
.small { font-size: .86rem; }

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.6rem); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding: clamp(3.4rem, 7vw, 6.4rem) 0; }
.section-tight { padding: clamp(2.2rem, 4vw, 3.4rem) 0; }
.section-head { margin-bottom: clamp(1.8rem, 3.5vw, 3rem); }
.section-head.center { text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 2rem); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   6. BUTTONS — Montserrat bold uppercase
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-btn);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 1.02rem 2.1rem;
  border-radius: var(--r-pill);
  transition: transform .28s var(--ease), background .28s var(--ease),
              color .28s var(--ease), box-shadow .28s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--clay); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--clay-deep); box-shadow: var(--shadow-md); }

.btn-outline { border: 1.5px solid var(--clay); color: var(--clay-deep); }
.btn-outline:hover { background: var(--clay); color: #fff; }

.btn-ghost { border: 1.5px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }

.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: #2A241F; }

.btn-sm { padding: .72rem 1.4rem; font-size: .68rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .42; pointer-events: none; }

/* --------------------------------------------------------------------------
   7. HEADER / NAV
   -------------------------------------------------------------------------- */
.announce {
  background: var(--ink);
  color: var(--oat);
  font-family: var(--font-btn);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-align: center;
  padding: .62rem 1rem;
}
.announce strong { color: var(--ochre); font-weight: 700; }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(251, 247, 241, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-bar {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}

/* --- Brand lockup: CRAFTARA LIVING bold + all caps, always --- */
.brand { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.brand-mark {
  width: 52px; height: 52px; border-radius: var(--r-sm);
  object-fit: contain; background: transparent;   /* whole logo, never cropped */
  display: grid; place-items: center; flex-shrink: 0;
}
.brand-mark-fallback {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
  color: var(--clay-deep);
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;          /* bold + italic, per brief */
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 1.02rem;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.brand-tag {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: .04em;
  font-size: .7rem;
  color: var(--ink-faint);
  margin-top: .22rem;
}

.nav-links { display: flex; align-items: center; gap: 1.7rem; }
.nav-link {
  font-family: var(--font-btn);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  padding: .4rem 0; position: relative;
  transition: color .2s var(--ease);
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1.5px; background: var(--clay);
  transition: width .3s var(--ease);
}
.nav-link:hover { color: var(--clay-deep); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: .7rem; }

/* Currency switcher */
.cur-switch { position: relative; }
.cur-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-btn); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: .52rem .9rem; transition: border-color .2s var(--ease);
}
.cur-btn:hover { border-color: var(--clay); }
.cur-btn .chev { font-size: .55rem; opacity: .6; }
.cur-menu {
  position: absolute; right: 0; top: calc(100% + .5rem);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: .4rem; min-width: 190px; z-index: 120;
  display: none;
}
.cur-menu.open { display: block; }
.cur-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left;
  padding: .6rem .75rem; border-radius: var(--r-sm);
  font-size: .84rem; transition: background .16s var(--ease);
}
.cur-opt:hover { background: var(--oat); }
.cur-opt[aria-selected="true"] { background: var(--sand); font-weight: 700; }
.cur-opt .code { font-family: var(--font-btn); font-weight: 700; font-size: .72rem; letter-spacing: .08em; }

/* Mega dropdown — Collections */
.has-mega { position: relative; }
.mega {
  position: fixed; left: 0; right: 0; top: auto;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 2.2rem 0 2.4rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  z-index: 88;
}
.mega.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.1fr; gap: 2.4rem; }
.mega-col-title {
  font-family: var(--font-btn); font-size: .64rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 1rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
.mega-list li { margin-bottom: .1rem; }
.mega-item {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  font-family: var(--font-serif); font-size: 1.06rem;
  padding: .46rem 0; transition: color .18s var(--ease), padding-left .22s var(--ease);
}
.mega-item:hover { color: var(--clay-deep); padding-left: .35rem; }
.mega-item .count { font-family: var(--font-body); font-size: .72rem; color: var(--ink-faint); }

/* Disabled / coming-soon categories stay visible but unselectable */
.mega-item.is-soon,
.cat-chip.is-soon {
  color: var(--ink-faint);
  pointer-events: none;
  cursor: not-allowed;
  opacity: .72;
}
.badge-soon {
  font-family: var(--font-btn); font-size: .55rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  background: var(--oat); color: var(--ink-faint);
  border: 1px solid var(--line);
  padding: .2rem .5rem; border-radius: var(--r-pill);
  white-space: nowrap;
}
.mega-feature {
  background: var(--oat); border-radius: var(--r-md);
  padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between;
}
.mega-feature .h4 { margin-bottom: .5rem; }
.mega-feature p { font-size: .88rem; color: var(--ink-soft); }

/* Mobile nav */
.nav-toggle { display: none; width: 42px; height: 42px; place-items: center; }
.nav-toggle span {
  display: block; width: 21px; height: 1.6px; background: var(--ink);
  position: relative; transition: background .2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 21px; height: 1.6px; background: var(--ink);
  transition: transform .28s var(--ease);
}
.nav-toggle span::before { top: -6.5px; }
.nav-toggle span::after { top: 6.5px; }
.nav-toggle.active span { background: transparent; }
.nav-toggle.active span::before { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.active span::after { transform: translateY(-6.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: grid; align-items: center;
  background:
    radial-gradient(1100px 620px at 82% 18%, rgba(229, 193, 184, .5), transparent 62%),
    radial-gradient(900px 560px at 12% 82%, rgba(168, 181, 160, .42), transparent 60%),
    linear-gradient(168deg, var(--oat) 0%, var(--cream) 46%, var(--sand) 100%);
  overflow: hidden;
}
.hero::after {
  /* soft woven-texture wash */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(58,50,44,.028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(58,50,44,.022) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.hero-logo {
  width: clamp(180px, 22vw, 280px);
  border-radius: var(--r-md);
  margin-bottom: 1.6rem;
  filter: drop-shadow(0 6px 18px rgba(58, 50, 44, .12));
}
.hero-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;          /* bold + italic display cut */
  text-transform: uppercase;
  letter-spacing: .11em;
  background: linear-gradient(120deg, var(--ink) 0%, var(--clay-deep) 58%, var(--ochre) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2.05rem, 5.6vw, 4.15rem);
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.hero-script {
  font-family: var(--font-logo);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  color: var(--clay-deep);
  line-height: 1.1;
  margin-bottom: 1.3rem;
}
.hero-copy { font-size: 1.08rem; color: var(--ink-soft); max-width: 46ch; margin-bottom: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.2rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 1.6rem 2.2rem; }
.hero-meta-item .k {
  font-family: var(--font-btn); font-size: .6rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
  display: block; margin-bottom: .18rem;
}
.hero-meta-item .v { font-family: var(--font-serif); font-size: 1.06rem; font-weight: 600; }

/* Hero collage — floor rug + wall rug in one frame */
.hero-collage { position: relative; aspect-ratio: 1 / 1.02; }
.hero-collage-wall {
  position: absolute; top: 0; left: 6%; width: 62%; aspect-ratio: 3 / 4;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-lg); transform: rotate(-1.6deg);
  background: var(--sand);
}
.hero-collage-floor {
  position: absolute; bottom: 0; right: 0; width: 66%; aspect-ratio: 4 / 3;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-lg); transform: rotate(1.8deg);
  background: var(--blush);
}
.hero-collage-tag {
  position: absolute; z-index: 4;
  background: rgba(251, 247, 241, .95);
  backdrop-filter: blur(6px);
  border-radius: var(--r-pill); padding: .5rem 1rem;
  font-family: var(--font-btn); font-size: .6rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.hero-collage-tag.t1 { top: 4%; right: 2%; }
.hero-collage-tag.t2 { bottom: 24%; left: 0; }

/* --------------------------------------------------------------------------
   9. PLACEHOLDER IMAGE SYSTEM
   Every product/lifestyle slot renders a woven-look pastel placeholder
   until a real file exists at the path in the data layer.
   -------------------------------------------------------------------------- */
.ph {
  position: relative; width: 100%; height: 100%;
  display: grid; place-items: center; text-align: center;
  overflow: hidden; isolation: isolate;
  background: var(--sand);
}
.ph[data-tone="clay"]  { background: linear-gradient(150deg, #EBC7B4, #D89774); }
.ph[data-tone="sage"]  { background: linear-gradient(150deg, #CBD6C3, #9FB097); }
.ph[data-tone="blush"] { background: linear-gradient(150deg, #F2D6D0, #DFB0A6); }
.ph[data-tone="lilac"] { background: linear-gradient(150deg, #DCD2E2, #B9A9C4); }
.ph[data-tone="oat"]   { background: linear-gradient(150deg, #F6EEE3, #E0CDB4); }
.ph[data-tone="mist"]  { background: linear-gradient(150deg, #D8E1DE, #B0BFBB); }
.ph[data-tone="ochre"] { background: linear-gradient(150deg, #EFD3A5, #D3A059); }
.ph[data-tone="ink"]   { background: linear-gradient(150deg, #6E6157, #423931); }
.ph::before {
  /* tufted pile texture */
  content: ''; position: absolute; inset: 0; z-index: 1; opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(58,50,44,.10)  0 1px, transparent 1px 3px);
}
.ph::after {
  /* raking light */
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(118deg, rgba(255,255,255,.34) 0%, transparent 40%, rgba(58,50,44,.16) 100%);
}
.ph-label {
  position: relative; z-index: 3;
  font-family: var(--font-btn); font-size: .58rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(58, 50, 44, .58);
  background: rgba(251, 247, 241, .8);
  border-radius: var(--r-pill); padding: .42rem .9rem;
  max-width: 84%;
}
.ph[data-tone="ink"] .ph-label { color: rgba(251,247,241,.9); background: rgba(58,50,44,.55); }

/* Shape hints apply to the CSS PLACEHOLDER ONLY.
   They must never touch a real photograph: a border-radius on <img> clips the
   picture into a circle or blob, which is exactly the "cutout" the brief
   forbids. Every product photograph stays a full rectangle, uncropped. */
.shape-round   .ph { border-radius: 50%; }
.shape-organic .ph { border-radius: 54% 46% 39% 61% / 47% 58% 42% 53%; }
.card-media img,
.pdp-stage img,
.inner-shape img { border-radius: 0; }

/* --------------------------------------------------------------------------
   10. CATEGORY / SHAPE CHIP FILTERS
   -------------------------------------------------------------------------- */
.filter-bar {
  /* Not sticky. A sticky filter bar sat over the grid on shorter screens and
     hid the first row of rugs. It scrolls away with the page now. */
  position: static; z-index: 1;
  background: rgba(251, 247, 241, .95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
}
.filter-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.filter-row + .filter-row { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--line); }
.filter-label {
  font-family: var(--font-btn); font-size: .6rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
  flex-shrink: 0; min-width: 78px;
}
.chip-set { display: flex; gap: .5rem; flex-wrap: wrap; }
.cat-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-btn); font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: .55rem 1.05rem; color: var(--ink-soft);
  transition: all .22s var(--ease);
}
.cat-chip:hover { border-color: var(--clay); color: var(--clay-deep); }
.cat-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.cat-chip .n { font-family: var(--font-body); font-weight: 400; font-size: .68rem; opacity: .65; }

/* Shape glyphs */
.shape-glyph { width: 13px; height: 13px; border: 1.5px solid currentColor; flex-shrink: 0; }
.shape-glyph.rect    { border-radius: 2px; }
.shape-glyph.round   { border-radius: 50%; }
.shape-glyph.organic { border-radius: 58% 42% 38% 62% / 45% 60% 40% 55%; }

/* --------------------------------------------------------------------------
   11. PRODUCT CARDS
   -------------------------------------------------------------------------- */
/* Responsive product grid — 3 columns desktop, 2 tablet, 1 mobile.
   Explicit column counts (not auto-fill) so the rhythm is identical on every
   page and the 20–30px gutter is preserved at each breakpoint. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.card {
  background: linear-gradient(175deg, #fff 0%, var(--cream) 100%); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .34s var(--ease), box-shadow .34s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* 4:5 portrait, boho beige ground, rug centred with even margin all round */
.card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--product-bg);
  overflow: hidden;
}
.card-media > img, .card-media > .ph { width: 100%; height: 100%; object-fit: cover; }
.card-media .inner-shape {
  position: absolute; inset: 8%;
  display: grid; place-items: center;
}
.card-media .inner-shape > img {
  width: 100%; height: 100%; object-fit: contain;   /* whole rug, never cropped */
}

/* Hover: 6% zoom on the image only, plus a shadow lift */
.card-media .inner-shape > img,
.card-media .inner-shape > .ph {
  transition: transform .45s var(--ease), filter .45s var(--ease);
  transform-origin: center center;
}
.card:hover .card-media .inner-shape > img,
.card:hover .card-media .inner-shape > .ph {
  transform: scale(1.06);
  filter: drop-shadow(0 12px 26px rgba(58, 50, 44, .22));
}
.card-flags { position: absolute; top: .7rem; left: .7rem; z-index: 5; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.flag {
  font-family: var(--font-btn); font-size: .55rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  padding: .3rem .62rem; border-radius: var(--r-pill);
  background: rgba(251, 247, 241, .94); color: var(--ink); box-shadow: var(--shadow-sm);
}
.flag.sale { background: var(--sale); color: #fff; }
.flag.dup  { background: #E4B34A; color: #43350F; }
/* --------------------------------------------------------------------------
   11b. DUAL-IMAGE PAIR — A: lifestyle scene · B: isolated on boho beige
   Every card that has both shows a next-arrow to toggle between them.
   -------------------------------------------------------------------------- */
.pair-nav {
  position: absolute; z-index: 8; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(251, 247, 241, .92);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  opacity: 0; transition: opacity .26s var(--ease), background .2s var(--ease);
}
.pair-nav:hover { background: #fff; }
.pair-nav.prev { left: .55rem; }
.pair-nav.next { right: .55rem; }
.card:hover .pair-nav,
.card-media:focus-within .pair-nav { opacity: 1; }
.pair-nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* Which of the pair is showing */
.pair-dots {
  position: absolute; z-index: 8; bottom: .6rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .3rem;
}
.pair-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(58, 50, 44, .28); transition: background .2s var(--ease);
}
.pair-dot[aria-current="true"] { background: var(--clay); width: 14px; border-radius: 3px; }

.pair-tag {
  position: absolute; z-index: 8; bottom: .55rem; left: .6rem;
  font-family: var(--font-btn); font-size: .5rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  background: rgba(251, 247, 241, .9); color: var(--ink-soft);
  padding: .24rem .5rem; border-radius: var(--r-pill);
  opacity: 0; transition: opacity .26s var(--ease);
}
.card:hover .pair-tag { opacity: 1; }

/* --------------------------------------------------------------------------
   11c. LIGHTBOX
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(30, 26, 22, .93);
  display: none; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.open { display: grid; }
.lb-stage {
  position: relative;
  width: min(1100px, 100%); max-height: 88vh;
  background: var(--product-bg);
  border-radius: var(--r-md); overflow: hidden;
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  max-width: min(700px, 100%);
}
.lb-stage img { width: 100%; height: 100%; object-fit: contain; }
.lb-close {
  position: absolute; top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(251, 247, 241, .14); color: var(--cream);
  display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
  transition: background .2s var(--ease); z-index: 4;
}
.lb-close:hover { background: rgba(251, 247, 241, .28); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(251, 247, 241, .92); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: background .2s var(--ease);
}
.lb-nav:hover { background: #fff; }
.lb-nav.prev { left: clamp(.5rem, 2vw, 1.4rem); }
.lb-nav.next { right: clamp(.5rem, 2vw, 1.4rem); }
.lb-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.lb-cap {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  padding: 1.6rem 1.2rem .9rem;
  background: linear-gradient(to top, rgba(30,26,22,.6), transparent);
  color: #fff; text-align: center;
}
.lb-cap .t { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; }
.lb-cap .s {
  display: block; margin-top: .15rem;
  font-family: var(--font-btn); font-size: .56rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; opacity: .8;
}
body.lb-open { overflow: hidden; }

.card-body { padding: 1.15rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card-cat {
  font-family: var(--font-btn); font-size: .56rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink-faint);
}
.card-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.28; }
.card-spec { font-size: .76rem; color: var(--ink-faint); }
.card-foot { margin-top: auto; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; padding-top: .35rem; }

.price-now  { font-family: var(--font-serif); font-size: 1.24rem; font-weight: 700; color: var(--ink); }
.price-was  { font-size: .86rem; color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.price-off  { font-family: var(--font-btn); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sale); }
.price-from { font-size: .7rem; color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   12. PRODUCT DETAIL
   -------------------------------------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
.pdp-gallery { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.pdp-stage {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-md);
  overflow: hidden; background: var(--oat); box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}
.pdp-stage > img, .pdp-stage > .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .1s linear; }
.pdp-stage.zoomed { cursor: zoom-out; }
.pdp-stage.zoomed > img, .pdp-stage.zoomed > .ph { transform: scale(2.5); }
.zoom-hint {
  position: absolute; bottom: .8rem; right: .8rem; z-index: 6;
  background: rgba(251, 247, 241, .94); border-radius: var(--r-pill);
  padding: .42rem .85rem;
  font-family: var(--font-btn); font-size: .56rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft);
  box-shadow: var(--shadow-sm); pointer-events: none;
}
.pdp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; margin-top: .7rem; }
.pdp-thumb {
  aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden;
  background: var(--oat); border: 2px solid transparent;
  transition: border-color .2s var(--ease); padding: 0;
}
.pdp-thumb > img, .pdp-thumb > .ph { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb[aria-selected="true"] { border-color: var(--clay); }
.thumb-cap {
  display: block; font-family: var(--font-btn); font-size: .48rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: .3rem; text-align: center;
}

.pdp-info { padding-top: .4rem; }
.pdp-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: .5rem; }
.pdp-price-row { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin: 1.1rem 0 .3rem; }
.pdp-price-row .price-now { font-size: 1.95rem; }
.pdp-price-row .price-was { font-size: 1.05rem; }
.pdp-tax { font-size: .78rem; color: var(--ink-faint); margin-bottom: 1.5rem; }

.spec-table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .9rem; }
.spec-table th, .spec-table td { text-align: left; padding: .68rem .2rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th {
  font-family: var(--font-btn); font-size: .6rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-faint);
  width: 40%; white-space: nowrap;
}

/* Size selector */
.size-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.size-head .h4 { font-size: 1rem; }
.size-opts { display: grid; gap: .55rem; margin-bottom: 1.4rem; }
.size-opt {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  text-align: left; padding: .92rem 1.1rem;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: all .22s var(--ease);
}
.size-opt:hover { border-color: var(--clay); background: #fff; }
.size-opt[aria-checked="true"] { border-color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
.size-opt .dim { font-family: var(--font-serif); font-size: 1.06rem; font-weight: 600; }
.size-opt .cm { display: block; font-size: .74rem; color: var(--ink-faint); margin-top: .1rem; }
.size-opt .use { display: block; font-size: .72rem; color: var(--ink-faint); font-style: italic; margin-top: .22rem; }
.size-opt .sp { text-align: right; }
.size-opt .sp .price-now { font-size: 1.02rem; }
.size-opt .sp .price-was { font-size: .74rem; display: block; }
.size-opt.custom { border-style: dashed; }
.size-opt.custom .dim { color: var(--clay-deep); }

.pdp-actions { display: grid; gap: .65rem; margin: 1.6rem 0; }
.trust-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.3rem 0; }
.trust-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-btn); font-size: .58rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  background: var(--oat); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .45rem .85rem; color: var(--ink-soft);
}

/* Accordion */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem .1rem; text-align: left;
  font-family: var(--font-serif); font-size: 1.06rem; font-weight: 600;
}
.acc-btn .pm { font-size: 1.2rem; color: var(--clay); transition: transform .28s var(--ease); line-height: 1; }
.acc-btn[aria-expanded="true"] .pm { transform: rotate(45deg); }
.acc-panel { display: none; padding: 0 .1rem 1.35rem; font-size: .92rem; color: var(--ink-soft); }
.acc-panel.open { display: block; }
.acc-panel ul { list-style: none; }
.acc-panel li { position: relative; padding-left: 1.15rem; margin-bottom: .5rem; }
.acc-panel li::before { content: '—'; position: absolute; left: 0; color: var(--clay); }

/* Colour disclaimer */
.disclaimer {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--oat); border-left: 3px solid var(--ochre);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1rem 1.15rem; font-size: .84rem; color: var(--ink-soft);
  margin: 1.5rem 0;
}
.disclaimer .ic { flex-shrink: 0; font-size: 1rem; line-height: 1.3; }
.disclaimer em { font-style: italic; }

/* --------------------------------------------------------------------------
   13. STORY / EDITORIAL BLOCKS
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4.5vw, 4rem); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { aspect-ratio: 4 / 3.2; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); }
.split-media.tall { aspect-ratio: 3 / 4; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.6rem; }
.stat .n { font-family: var(--font-display); font-size: 2.1rem; color: var(--clay-deep); line-height: 1; }
.stat .l { font-family: var(--font-btn); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-top: .4rem; }

/* Category tiles */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.cat-tile {
  position: relative; aspect-ratio: 3 / 3.7; border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-sm); display: block;
  transition: transform .34s var(--ease), box-shadow .34s var(--ease);
}
.cat-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.cat-tile > .ph, .cat-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-tile-veil { position: absolute; inset: 0; z-index: 3; background: linear-gradient(to top, rgba(42,36,31,.7) 0%, rgba(42,36,31,.14) 46%, transparent 72%); }
.cat-tile-txt { position: absolute; inset: auto 0 0; z-index: 4; padding: 1.3rem; color: #fff; }
.cat-tile-txt .t { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; }
.cat-tile-txt .s { font-size: .78rem; opacity: .84; margin-top: .18rem; }
.cat-tile.is-soon { pointer-events: none; }
.cat-tile.is-soon::after {
  content: 'Coming Soon'; position: absolute; z-index: 6; top: .8rem; right: .8rem;
  font-family: var(--font-btn); font-size: .55rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  background: rgba(251,247,241,.94); color: var(--ink-soft);
  padding: .3rem .62rem; border-radius: var(--r-pill);
}
.cat-tile.is-soon > .ph { filter: grayscale(.55) opacity(.7); }

/* Reviews */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.3rem; }
.review {
  background: var(--surface); border-radius: var(--r-md);
  padding: 1.5rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: .8rem;
}
.stars { color: var(--ochre); letter-spacing: .12em; font-size: .92rem; }
.review-txt { font-family: var(--font-serif); font-size: 1.04rem; font-style: italic; color: var(--ink); line-height: 1.55; }
.review-by { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.review-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--sand);
  font-family: var(--font-btn); font-size: .66rem; font-weight: 700; color: var(--clay-deep);
}
.review-by .who { font-size: .84rem; font-weight: 700; }
.review-by .where { font-size: .72rem; color: var(--ink-faint); }

/* Certifications */
.cert-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.cert {
  text-align: center; padding: 1.5rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.cert .ic { font-size: 1.55rem; margin-bottom: .55rem; }
.cert .t { font-family: var(--font-btn); font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.cert .d { font-size: .76rem; color: var(--ink-faint); margin-top: .35rem; }

/* Info / guide pages */
.guide-toc {
  background: var(--oat); border-radius: var(--r-md); padding: 1.5rem;
  position: sticky; top: calc(var(--nav-h) + 1.5rem);
}
.guide-toc a { display: block; padding: .48rem 0; font-size: .9rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.guide-toc a:last-child { border-bottom: 0; }
.guide-toc a:hover { color: var(--clay-deep); }
.guide-layout { display: grid; grid-template-columns: 250px 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.prose h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin: 2.6rem 0 .9rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font-serif); font-size: 1.24rem; margin: 1.8rem 0 .6rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { margin: 0 0 1.2rem; }
.prose ul li { position: relative; padding-left: 1.3rem; margin-bottom: .55rem; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--clay); }
.prose ol { counter-reset: n; margin: 0 0 1.2rem; }
.prose ol li { counter-increment: n; position: relative; padding-left: 1.9rem; margin-bottom: .6rem; color: var(--ink-soft); }
.prose ol li::before {
  content: counter(n); position: absolute; left: 0; top: .05em;
  width: 22px; height: 22px; border-radius: 50%; background: var(--sand);
  display: grid; place-items: center;
  font-family: var(--font-btn); font-size: .62rem; font-weight: 700; color: var(--clay-deep);
}

.data-table { width: 100%; border-collapse: collapse; font-size: .89rem; margin: 1.2rem 0 1.8rem; }
.data-table th {
  text-align: left; padding: .8rem .9rem; background: var(--sand);
  font-family: var(--font-btn); font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.data-table td { padding: .78rem .9rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
.data-table tr:nth-child(even) td { background: rgba(244, 237, 227, .5); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.callout {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--sage-deep);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.2rem 1.4rem; margin: 1.5rem 0;
}
.callout .h4 { margin-bottom: .4rem; }
.callout p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. INSTAGRAM STRIP
   -------------------------------------------------------------------------- */
.ig-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
.ig-cell { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; }
.ig-cell > .ph, .ig-cell > img { width: 100%; height: 100%; object-fit: cover; }
.ig-cell::after {
  content: '◉'; position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center; color: #fff; font-size: 1.4rem;
  background: rgba(42, 36, 31, .3); opacity: 0; transition: opacity .26s var(--ease);
}
.ig-cell:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   15. WHATSAPP FLOAT
   -------------------------------------------------------------------------- */
.wa-float { position: fixed; right: clamp(1rem, 3vw, 1.9rem); bottom: clamp(1rem, 3vw, 1.9rem); z-index: 200; }
.wa-btn {
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(37, 211, 102, .42);
  transition: transform .28s var(--ease);
}
.wa-btn:hover { transform: scale(1.07); }
.wa-btn svg { width: 30px; height: 30px; fill: #fff; }
.wa-pulse { position: absolute; inset: 0; border-radius: 50%; background: #25D366; opacity: .55; animation: waPulse 2.4s var(--ease) infinite; z-index: -1; }
@keyframes waPulse { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.65); opacity: 0; } 100% { opacity: 0; } }
.wa-card {
  position: absolute; right: 0; bottom: 74px; width: min(320px, calc(100vw - 2.4rem));
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.97);
  transition: all .3s var(--ease);
}
.wa-card.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.wa-card-head { background: #075E54; color: #fff; padding: 1rem 1.1rem; display: flex; align-items: center; gap: .7rem; }
.wa-card-head .av { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-family: var(--font-btn); font-size: .6rem; font-weight: 700; }
.wa-card-head .nm { font-size: .88rem; font-weight: 700; }
.wa-card-head .st { font-size: .68rem; opacity: .8; }
.wa-card-body { padding: 1.1rem; background: #ECE5DD; }
.wa-bubble {
  background: #fff; border-radius: 0 10px 10px 10px; padding: .8rem .9rem;
  font-size: .86rem; color: #303030; box-shadow: 0 1px 2px rgba(0,0,0,.08); margin-bottom: .9rem;
}
.wa-quick { display: grid; gap: .4rem; }
.wa-q {
  text-align: left; background: #fff; border: 1px solid #D6CFC7; border-radius: var(--r-pill);
  padding: .5rem .85rem; font-size: .78rem; color: #075E54;
  transition: background .18s var(--ease);
}
.wa-q:hover { background: #F0F7F4; }
.wa-card-foot { padding: .85rem 1.1rem; }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: linear-gradient(165deg, #4A4038 0%, var(--ink) 45%, #2A241F 100%); color: var(--oat); padding: clamp(3rem, 6vw, 4.6rem) 0 0; margin-top: clamp(3rem, 6vw, 5rem); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(1.8rem, 4vw, 3.2rem); padding-bottom: 3rem; }
.footer-brand .brand-name { color: var(--cream); font-size: 1.16rem; }
.footer-brand .brand-tag { color: rgba(244, 237, 227, .6); }
.footer-blurb { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: rgba(244, 237, 227, .78); margin: 1.1rem 0 1.4rem; max-width: 34ch; }
.footer-col-title {
  font-family: var(--font-btn); font-size: .6rem; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--ochre); margin-bottom: 1.1rem;
}
.footer-links li { margin-bottom: .58rem; }
.footer-links a { font-size: .88rem; color: rgba(244, 237, 227, .76); transition: color .2s var(--ease); }
.footer-links a:hover { color: var(--cream); }
.footer-links .is-soon { color: rgba(244,237,227,.38); pointer-events: none; }
.footer-contact a { color: var(--cream); border-bottom: 1px solid rgba(217, 165, 95, .5); }
.social-row { display: flex; gap: .6rem; margin-top: 1.2rem; }
.social {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(244, 237, 227, .25); display: grid; place-items: center;
  transition: all .24s var(--ease);
}
.social:hover { background: var(--ochre); border-color: var(--ochre); color: var(--ink); }
.social svg { width: 17px; height: 17px; fill: currentColor; }
.news-form { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.news-form input {
  flex: 1 1 150px; min-width: 0;
  background: rgba(251, 247, 241, .08);
  border: 1px solid rgba(244, 237, 227, .22);
  border-radius: var(--r-pill); padding: .8rem 1.1rem;
  color: var(--cream); font-size: .86rem;
}
.news-form input::placeholder { color: rgba(244, 237, 227, .45); }
.footer-bottom {
  border-top: 1px solid rgba(244, 237, 227, .14);
  padding: 1.4rem 0; display: flex; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: rgba(244, 237, 227, .55);
}
.footer-note { background: rgba(0,0,0,.16); padding: 1rem 0; font-size: .74rem; color: rgba(244,237,227,.5); text-align: center; }

/* --------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */
.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;
}
.bg-oat  { background: linear-gradient(168deg, var(--oat) 0%, var(--cream) 55%, var(--sand) 100%); }
.bg-sand { background: linear-gradient(150deg, var(--sand) 0%, var(--oat) 60%, var(--blush) 140%); }
.bg-white{ background: var(--surface); }
.center  { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .6rem; } .mt-2 { margin-top: 1.2rem; } .mt-3 { margin-top: 2rem; }
.mb-1 { margin-bottom: .6rem; } .mb-2 { margin-bottom: 1.2rem; } .mb-3 { margin-bottom: 2rem; }
.flex-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

.crumbs { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .76rem; color: var(--ink-faint); padding: 1.2rem 0; }
.crumbs a:hover { color: var(--clay-deep); }
.crumbs .sep { opacity: .5; }

.page-head { padding: clamp(2.2rem, 4.5vw, 3.6rem) 0 clamp(1.4rem, 3vw, 2.2rem); }
.page-head .h1 { margin-bottom: .6rem; }

.empty-state { text-align: center; padding: 4rem 1rem; grid-column: 1 / -1; }
.empty-state .h3 { margin-bottom: .5rem; }

/* Duplicate-name warning banner */
.dup-warn {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #FDF4DE; border: 1px solid #E8CF8E;
  border-radius: var(--r-md); padding: 1rem 1.2rem;
  font-size: .86rem; color: #6A5312; margin-bottom: 1.6rem;
}
.dup-warn strong { display: block; margin-bottom: .18rem; }
.dup-warn code { background: rgba(0,0,0,.06); padding: .1rem .35rem; border-radius: 3px; font-size: .82em; }

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .mega-grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
  .mega-feature { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .ig-strip { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  /* Tablet — 2 columns */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-toggle { display: grid; }
  .nav-links {
    position: fixed; inset: calc(var(--nav-h)) 0 auto; z-index: 95;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 1rem clamp(1.15rem, 4vw, 2.6rem) 1.8rem;
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: all .28s var(--ease);
    box-shadow: var(--shadow-md);
  }
  .nav-links.open { transform: none; opacity: 1; visibility: visible; }
  .nav-link { padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: .8rem; }
  .nav-link::after { display: none; }
  .mega {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: .4rem 0 1rem; display: none;
  }
  .mega.open { display: block; }
  .mega-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .mega-feature { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-collage { max-width: 440px; margin: 0 auto; }
  .pdp { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-toc { position: static; }
}

@media (max-width: 620px) {
  :root { --nav-h: 64px; }
  body { font-size: 15.5px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-name { font-size: .82rem; letter-spacing: .13em; }
  .brand-tag { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .card-body { padding: .9rem .85rem 1.05rem; }
  .card-title { font-size: 1.02rem; }
  .price-now { font-size: 1.06rem; }
  .ig-strip { grid-template-columns: repeat(3, 1fr); }
  .pdp-thumbs { grid-template-columns: repeat(4, 1fr); }
  .filter-label { min-width: 100%; }
  .btn { padding: .92rem 1.6rem; }
  .hero-meta { gap: 1.1rem 1.5rem; }
}

/* Touch devices have no hover, so the pair controls stay visible */
@media (hover: none) {
  .pair-nav, .pair-tag { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .wa-float, .filter-bar, .site-footer { display: none !important; }
}


/* ==========================================================================
   AUGUST 2026 REVISION — Foram's feedback
   ========================================================================== */

/* 8. One filter line, not three stacked panels. */
.filter-line {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem .6rem;
}
.filter-sep {
  width: 1px; height: 22px; background: var(--line);
  margin: 0 .35rem; flex-shrink: 0;
}
.filter-tail {
  margin-left: auto; display: flex; align-items: center; gap: .8rem;
}
.filter-sort {
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: .45rem 1rem; background: rgba(255,255,255,.7);
  font-family: var(--font-btn); font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; color: var(--ink-soft);
}
@media (max-width: 620px) {
  .filter-sep { display: none; }
  .filter-tail { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* 1. Logo sits ON the page, not pasted onto it. The logo art has a warm tan
   ground; multiply blends it into the beige so the edge disappears, and a soft
   radial mask feathers the corners. */
.hero-logo, .brand-mark img {
  mix-blend-mode: multiply;
  filter: contrast(1.02) saturate(1.02);
}
.hero-logo {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 84%);
          mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 84%);
  filter: drop-shadow(0 10px 30px rgba(122, 92, 62, .18));
}
.brand-mark { box-shadow: none; }
.brand-mark img {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 64%, transparent 88%);
          mask-image: radial-gradient(circle at 50% 50%, #000 64%, transparent 88%);
}

/* 7. Wordmark — mixed case, mixed weight, cursive second word. Not all caps. */
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  text-transform: none;          /* was uppercase */
  letter-spacing: .015em;
  font-size: 1.16rem;
  -webkit-text-fill-color: currentColor;
  background: none;
}
.brand-name .living {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--clay-deep);
}
.hero-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  text-transform: none;          /* was uppercase */
  letter-spacing: -.005em;
  background: none;
  -webkit-text-fill-color: var(--ink);
}
.hero-wordmark .living {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--clay-deep);
  letter-spacing: .005em;
  margin-top: -.08em;
}

/* 6. More boho: paper grain, softer edges, woven rules, warmer shadows. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(94deg, rgba(150,120,90,.030) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(4deg,  rgba(150,120,90,.022) 0 1px, transparent 1px 6px);
}
body > * { position: relative; z-index: 1; }
.card { border-radius: 18px; box-shadow: 0 3px 16px rgba(122,92,62,.09); }
.card:hover { box-shadow: 0 16px 40px rgba(122,92,62,.16); }
.card-media { border-radius: 18px 18px 0 0; }
.btn-primary { box-shadow: 0 4px 16px rgba(169,110,74,.28); }
.eyebrow { font-family: var(--font-serif); font-style: italic; font-weight: 600;
           font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; }
.section-head .h1, .section-head .h2 { letter-spacing: -.015em; }
.divider, .filter-bar { border-color: rgba(180,150,115,.30); }
.filter-bar { border-bottom: 1px solid rgba(180,150,115,.30); background: transparent; }
.cat-chip { border-color: rgba(180,150,115,.38); background: rgba(255,255,255,.45); }
.cat-chip[aria-pressed="true"] { background: var(--clay-deep); border-color: var(--clay-deep); }

/* 5. Lightbox — show the whole picture, always, on any screen. */
.lightbox { padding: clamp(.6rem, 2.5vw, 2rem); }
.lb-stage {
  aspect-ratio: auto;                 /* was locked to 4:5, which cropped tall shots */
  width: min(94vw, 1100px);
  height: min(88vh, 1100px);
  max-width: none; max-height: none;
  background: var(--product-bg);
  display: grid; place-items: center;
  border-radius: 14px;
}
.lb-stage img {
  width: 100%; height: 100%;
  object-fit: contain;                /* whole image, never cropped */
  image-rendering: auto;
}
@media (max-width: 620px) {
  .lb-stage { width: 96vw; height: 74vh; }
  .lb-nav { width: 40px; height: 40px; }
}

/* 4. No rug name burnt over the picture. */
.ph-label { display: none; }

/* 4/5. Caption below the picture, so nothing is printed over the rug. */
.lb-wrap { display: grid; justify-items: center; gap: .8rem; }
.lb-cap {
  position: static; background: none; padding: 0;
  color: rgba(251,247,241,.92); text-align: center;
}

/* ===========================================================================
   SEPTEMBER 2026 — her review after the catalogue went in.
   =========================================================================== */

/* --- The header carries no logo, wordmark or tagline ---------------------- */
.brand-bare { display: block; width: 2.2rem; height: 2.2rem; }
.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;
}

/* --- The menu panel ------------------------------------------------------
   It is now a child of <body>, not of the header: .site-header carries a
   backdrop-filter, which makes it the containing block for fixed children and
   opens its own stacking context, so nothing given to the panel could lift it
   above the page. Out on the body it simply obeys the viewport.

   It is also no longer the same cream as the page. A panel that matches the
   page behind it reads as text floating in mid-air — so it sits on oat, with a
   real edge and a shadow under it, and is unmistakably a layer on top. */
.mega {
  position: fixed;
  top: var(--header-h, 118px);
  left: 0; right: 0;
  background: #F2E8DA;
  border-top: 1px solid var(--line);
  border-bottom: 2px solid var(--clay, #C0714E);
  box-shadow: 0 26px 50px -18px rgba(58, 50, 44, .38);
  backdrop-filter: none;
  z-index: 9999;
  max-height: calc(100vh - var(--header-h, 118px));
  overflow-y: auto;
}
.mega .mega-col-title { color: var(--clay-deep, #9A5334); }
.mega-feature { background: rgba(255, 255, 255, .62); }

/* --- Product cards: the room photograph fills the frame -------------------
   The no-crop rule protects the RUG — a rug must never be sliced to fit. A
   room photograph is different: it is a photograph of a room, and letterboxing
   it inside a beige box wastes the picture. So scenes fill the card edge to
   edge, and the rug-only view keeps its full-bleed-free, uncropped margin. */
.card .card-media .inner-shape { inset: 0; }
.card .card-media .inner-shape > img { object-fit: cover; }
.card[data-view="b"] .card-media .inner-shape { inset: 8%; }
.card[data-view="b"] .card-media .inner-shape > img { object-fit: contain; }

/* The hero collage on the homepage follows the same rule. */
.hero-figure img, .cat-tile img { object-fit: cover; }

/* --- The card image is a link to the product, not a zoom ------------------ */
.card-media { cursor: pointer; }
.pdp-stage { cursor: zoom-in; }

/* --- Disclaimers ---------------------------------------------------------- */
.note-made {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--oat, #F4EDE3);
  border: 1px solid var(--line);
  border-radius: 14px; padding: .9rem 1rem;
  font-size: .86rem; line-height: 1.55; color: var(--ink-soft);
  margin-block: 1rem;
}
.note-made .ic { font-size: 1rem; line-height: 1.4; }
.note-made strong { color: var(--ink); }

/* --- Hero collage: two rugs, both fully visible ---------------------------
   The cards were overlapping far enough that the floor rug covered the wall
   rug's fringe — the most distinctive part of that design. Pulled apart, and
   the rugs are contained rather than cropped, since these are the product
   shots and a product shot must never lose an edge. */
.hero-collage-wall  { top: 0; left: 0; width: 58%; }
.hero-collage-floor { bottom: 0; right: 0; width: 54%; }
.hero-collage-wall > *, .hero-collage-floor > * { width: 100%; height: 100%; }
.hero-collage-wall img, .hero-collage-floor img {
  width: 100%; height: 100%; object-fit: contain; background: #FBF9F5;
}
.hero-collage-tag.t2 { bottom: 30%; left: 0; }

/* --- The product page scrolls as one -------------------------------------
   The gallery was sticky, so once it was taller than the window it pinned in
   place and the bottom of it could never be reached — only the text column
   moved. Both columns now scroll together. */
.pdp-gallery { position: static; top: auto; }