/* =================================================================
   Noble Blinds Sydney — SHARED design layer (every content page)
   Implements DESIGN.md ("Noble Blinds — Plates & Light").

   A soft-bound architectural monograph: warm paper, one ink, one
   rationed accent, a 12-column asymmetric grid, square corners
   everywhere, no shadows. Nothing is centred.

   TYPE RULE: Newsreader sets language, IBM Plex Mono sets data — and
   mono is ONLY ever uppercase + .14em tracked. Sentence-case mono reads
   as a third typeface, so any running sentence belongs to the serif.

   Linked LAST on every content page (never on /admin) so its rules win
   over styles.css / quote.css / shop.css / product.css at equal
   specificity. css/home.css loads after this one and holds the hero,
   the ticker and the homepage-only plate spread.
   ================================================================= */

/* -----------------------------------------------------------------
   1. Tokens — see DESIGN.md front matter.
   ----------------------------------------------------------------- */
body{
  /* colors */
  --paper:       #F3F0EA;
  --paper-deep:  #E9E4DA;
  --plate:       #FFFFFF;
  --ink:         #1F1D1A;
  --ink-soft:    #6B655C;
  --line:        #D6D0C4;   /* = rule */
  --rule-strong: #B4AC9C;
  --sienna:      #95542A;
  /* the older layers paint cards/footers with these */
  --cream:       #F3F0EA;
  --cream-2:     #E9E4DA;
  --champagne:   #1F1D1A;
  --champagne-d: #6B655C;
  --blush:       #E9E4DA;

  /* type — Noto Sans KR carries Hangul, which Newsreader has no glyphs for */
  --serif: "Newsreader", "Noto Sans KR", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* shapes — every corner is square (DESIGN.md → Shapes) */
  --r-lg:0; --r-card:0; --r-media:0; --r-input:0; --r-pill:0;

  /* layout */
  --gut:   24px;
  --sheetw:1360px;
  --maxw:  1360px;
  --pad:   clamp(1.25rem, 5vw, 4.5rem);

  font-family:var(--serif);
  font-weight:400;
  line-height:1.65;
  letter-spacing:0;
  color:var(--ink);
  background-color:var(--paper);
  /* uncoated stock — the grain the flat #f9f9f9 layer had removed */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}

/* Inner pages have no hero, so their headings can take the serif wholesale.
   The homepage keeps `--display` as-is because .hero-cat-name uses it and the
   hero is explicitly out of scope. */
body.inner-page{ --display:var(--serif); }

h1,h2,h3{ font-weight:300; letter-spacing:-.015em; line-height:1.1; }
em{ font-style:italic; }

/* eyebrows / section labels — the label voice, everywhere */
.eyebrow, .section-label, .modal-eyebrow, .pdp-cat, .pdp-crumb{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.muted{ color:var(--ink-soft); }

/* -----------------------------------------------------------------
   2. Page chrome — topbar, header, nav, drawer, footer, cart button.
   Injected by layout.js and therefore identical on every page.
   ----------------------------------------------------------------- */
.topbar{
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; padding:.7rem 0;   /* no side inset: the ticker runs edge to edge */
}
.topbar a{ color:var(--paper); border-bottom-color:rgba(243,240,234,.4); }
.topbar a:hover{ border-bottom-color:var(--paper); }

.site-header{ background:var(--paper); border-bottom:1px solid var(--line); }
/* logo.svg is a single solid-black mark, so it needs no flattening on the paper
   header — only the dark surfaces (hero, footer, admin rail) invert it. */
.brand-logo{ height:96px; }
@media (max-width:768px){ .brand-logo{ height:72px; } }

/* The drawer sets these exact links in Newsreader; the header was setting them
   in mono caps, so the same navigation spoke in two voices. Nav labels are
   language, not data — they belong to the serif. */
.nav{ gap:2.3rem; }
.nav a{
  font-family:var(--serif); font-size:1.05rem; font-weight:400;
  letter-spacing:0; text-transform:none;
}
.nav a::after{ background:var(--sienna); }
.nav-cta{ color:var(--sienna); }
.nav-drop{
  background:var(--paper); border:1px solid var(--line);
  border-radius:0; box-shadow:none;
}
.nav-drop a{
  font-family:var(--serif); font-size:1rem; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink-soft); padding:.6rem 1.3rem;
}
.nav-drop a:hover{ background:var(--paper-deep); color:var(--ink); }
.nav-cart [data-cart-count],
.drawer [data-cart-count]{
  border-radius:0; background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:10px; letter-spacing:.04em;
}

/* ---- drawer: the monograph's contents page ----
   On inner pages `.site-top` is `position:static`, so its z-index was inert and
   the fixed drawer painted straight over the header — leaving the close (X)
   button unreachable once the menu was open. Give it a stacking context. */
body.inner-page .site-top{ position:relative; z-index:100; }
.drawer{
  background:var(--paper);
  align-items:stretch; justify-content:flex-start; gap:0;
  padding:8.6rem var(--pad) 2.4rem;   /* clears the topbar + logo above it */
  transform:none;                     /* fade only — nothing travels */
  transition:opacity .28s cubic-bezier(.2,0,0,1), visibility .28s;
}
.drawer.open{ transform:none; }
/* inner pages carry the header in normal flow, so it stands taller than the
   homepage's floating one — the first rule needs room to clear the logo */
body.inner-page .drawer{ padding-top:9.6rem; }
/* colophon, drawn with a pseudo-element so layout.js stays untouched */
.drawer::after{
  content:"Factory-direct · Free measure & quote";
  margin-top:auto; padding-top:2.2rem;
  font-family:var(--mono); font-size:10.5px; line-height:1.7;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.drawer a{
  display:flex; align-items:baseline; gap:.6rem;
  width:100%; max-width:none; text-align:left;
  padding:1.05rem 0;
  border-top:1px solid var(--line);
  font-family:var(--serif); font-weight:300; font-size:1.8rem; line-height:1.15;
  letter-spacing:-.01em; text-transform:none; color:var(--ink);
}
.drawer a:last-of-type{ border-bottom:1px solid var(--line); }
.drawer a::after{
  content:"→"; margin-left:auto;
  font-family:var(--mono); font-size:.8rem; color:var(--rule-strong);
}
.drawer a:hover, .drawer a:active{ color:var(--sienna); }
.drawer a:hover::after, .drawer a:active::after{ color:var(--sienna); }

/* the logo is whitened only to sit over the homepage hero; an open drawer is
   paper, and the logo's own cream monogram would vanish on it */
body.menu-open .brand-logo{ filter:brightness(0); }
/* …and the homepage topbar is transparent-with-white-text for the same reason */
body.home.menu-open .topbar,
body.home.menu-open .topbar a{ color:var(--ink-soft); }
body.home.menu-open .topbar a{ border-bottom-color:var(--rule-strong); }

.site-footer{ background:var(--ink); color:var(--paper); }
.footer-tag{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; color:rgba(243,240,234,.85);
}
.footer-blurb{ font-family:var(--serif); font-size:.92rem; color:rgba(243,240,234,.6); }
.footer-col h4{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; color:var(--paper);
}
.footer-col li{ font-family:var(--serif); font-size:.95rem; color:rgba(243,240,234,.7); }
.footer-col a{ color:rgba(243,240,234,.7); }
.footer-col a:hover{ color:var(--paper); }
.footer-base{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(243,240,234,.45);
}

/* floating cart control — squared so it doesn't contradict the page */
.cart-fab{
  border-radius:0; background:var(--ink); border:1px solid var(--ink); box-shadow:none;
}
.cart-fab:hover{ transform:none; background:var(--sienna); border-color:var(--sienna); box-shadow:none; }
.cart-fab-count{ border-radius:0; font-family:var(--mono); border-color:var(--ink); }
.q-toast{ border-radius:0; box-shadow:none; background:var(--ink); font-family:var(--serif); }
.q-toast a{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; }

/* -----------------------------------------------------------------
   3. The sheet — one section of the monograph, on any page.
   Full-bleed hairline on top, generous paper below the content.
   ----------------------------------------------------------------- */
.sheet{
  border-top:1px solid var(--line);
  padding:clamp(2.8rem,5.5vw,5.5rem) var(--pad) clamp(3.4rem,7vw,7rem);
}
.sheet > *{ max-width:var(--sheetw); margin-inline:auto; }

/* ---- masthead. Every heading block on every page shares this shape:
   optional label, title at column 1, standfirst in a narrow right column.
   The selector list is long because each page came with its own class
   name for the same object. ---- */
.sheet-head,
.block-head,
.range-page-hero,
.q-hero,
.shop-hero,
.article-head{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gut);
  align-items:start;
  text-align:left;
  max-width:var(--sheetw);
  margin:0 auto clamp(2rem,3.6vw,3.4rem);
}
/* the page-level ones carry their own page padding, so they need room for it */
.range-page-hero,
.q-hero,
.shop-hero,
.article-head{
  max-width:calc(var(--sheetw) + 2 * var(--pad));
  padding:clamp(2.6rem,5vw,4.2rem) var(--pad) 0;
  margin-bottom:clamp(1.8rem,3.4vw,2.8rem);
  border-bottom:none;
}

.sheet-head .section-label,
.block-head .section-label,
.range-page-hero .section-label,
.q-hero .section-label,
.shop-hero .section-label,
.sheet-head .eyebrow, .block-head .eyebrow,
.range-page-hero .eyebrow, .q-hero .eyebrow, .shop-hero .eyebrow,
.article-head .article-meta{
  grid-column:1 / -1;
  margin:0 0 .9rem;
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}

.sheet-title,
.block-head h2,
.range-page-hero h1,
.q-hero h1,
.shop-hero h1,
.article-title,
.shop-empty h2,
.co-success h1{
  grid-column:1 / span 6;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.1rem,4.4vw,3.35rem);
  line-height:1.04; letter-spacing:-.02em; color:var(--ink);
  margin:0;
}
.sheet-title em,
.block-head h2 em,
.article-title em{ font-style:italic; }

.sheet-note,
.block-head .muted,
.range-page-hero p:not(.section-label):not(.eyebrow),
.q-hero p:not(.section-label):not(.eyebrow),
.shop-hero p:not(.section-label):not(.eyebrow),
.article-sub{
  grid-column:8 / span 4;
  margin:0; padding-top:.35em;
  font-family:var(--serif); font-size:.98rem; line-height:1.62;
  color:var(--ink-soft); max-width:46ch;
}
.sheet-note a, .block-head .muted a{
  color:var(--ink); border-bottom:1px solid var(--rule-strong); padding-bottom:1px;
}
.sheet-note a:hover, .block-head .muted a:hover{ color:var(--sienna); border-color:var(--sienna); }
.sheet-figure{ font-family:var(--mono); font-size:.94em; color:var(--sienna); }

/* ---- sheet body: the same 12 columns, content placed asymmetrically ---- */
.sheet-body{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gut);
  row-gap:clamp(2rem,4vw,3rem);
}
.sheet-body > *{ grid-column:1 / -1; min-width:0; }
.sheet-body--contact > .contact-intro{ grid-column:1 / span 4; }
.sheet-body--contact > .contact-form{ grid-column:6 / span 7; }

.sheet-more{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}
.sheet-more a{ border-bottom:1px solid var(--rule-strong); padding-bottom:4px; }
.sheet-more a:hover{ color:var(--sienna); border-color:var(--sienna); }

/* -----------------------------------------------------------------
   4. Plate — a photograph with an archive caption. Never a button.
   A caption is two voices: the plate number is data (mono, tracked caps),
   the description is language (serif).
   ----------------------------------------------------------------- */
.plate{ margin:0; }
.plate img{ width:100%; height:auto; display:block; background:var(--paper-deep); border-radius:0; }
.plate figcaption{
  margin-top:14px;
  font-family:var(--serif); font-size:.92rem; line-height:1.55; color:var(--ink-soft);
}
.plate-no{
  margin-right:.85em; white-space:nowrap;
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}

/* -----------------------------------------------------------------
   5. Buttons — rectangular, Plex Mono caps, invert to sienna.
   ----------------------------------------------------------------- */
.btn{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  padding:1.15em 1.9em; border-radius:0;
}
.btn:hover{ transform:none; }
.btn--dark, .btn--light{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn--dark:hover, .btn--light:hover{ background:var(--sienna); border-color:var(--sienna); color:var(--paper); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }

/* -----------------------------------------------------------------
   6. Forms — white field, drawn border, label above in mono caps.
   ----------------------------------------------------------------- */
.field label,
.qfield label,
.install-modal-form .field label{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); text-align:left;
}
.field input, .field select, .field textarea{
  font-family:var(--serif); font-size:1rem; background:var(--plate);
  border:1px solid var(--rule-strong); border-radius:0; padding:.75em .85em;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ink); }
.enquiry-thanks{ font-family:var(--serif); font-size:1.05rem; color:var(--ink); }

/* -----------------------------------------------------------------
   7. Contact — details as a definition table, area as one line of places.
   ----------------------------------------------------------------- */
.contact-grid{ align-items:start; }
.contact-details{ margin:0; display:block; border-top:1px solid var(--line); }
.contact-details > div,
.contact-details > li{
  display:grid; grid-template-columns:5.5rem minmax(0,1fr); column-gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line); align-items:start;
}
.contact-details dt,
.contact-details > li > span:first-child{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); padding-top:.35em;
}
.contact-details dd{ font-family:var(--serif); font-size:1.02rem; color:var(--ink); overflow-wrap:anywhere; }
.contact-details a:hover{ color:var(--sienna); }

.area-label{
  margin:2.2rem 0 0; max-width:none;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.area-line{ list-style:none; margin:.6rem 0 0; display:flex; flex-wrap:wrap; font-family:var(--serif); font-size:1.02rem; }
.area-line li{ white-space:nowrap; }
/* separator hangs off the PREVIOUS item so a wrap never orphans a bare dot */
.area-line li:not(:last-child)::after{ content:" ·"; margin-right:.55em; color:var(--rule-strong); }
.contact-form{ gap:1.05rem; background:var(--paper-deep); padding:clamp(1.5rem,3vw,2.2rem); }
.contact-form .btn{ align-self:flex-start; margin-top:.4rem; }
.area-map{ border:1px solid var(--line); border-radius:0; }
.area-tags li{
  border-radius:0; border-color:var(--line);
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
}

/* -----------------------------------------------------------------
   8. Quote calculator — the only white surface in the system.
   An instrument laid on the paper: drawn, never lifted.
   ----------------------------------------------------------------- */
/* the older layers centre these with `margin-inline:auto`; inside a grid an
   auto inline margin sizes the item to its CONTENT, so reset it */
.qz, #homeDecoWrap, #homeDecoWrap .range-grid,
.post-grid, .insta-carousel, .reviews-carousel, .faq-list{ margin-inline:0; width:100%; }

/* page-level containers stay centred at the sheet measure, padding included, so
   their content aligns with the masthead above them */
#rangeWrap, #rmWrap, .range-filter, .aesthetic-cta, .journal, .article{
  max-width:calc(var(--sheetw) + 2 * var(--pad));
  margin-inline:auto;
}
/* #rmWrap is a bare div in the markup — it never had the page padding #rangeWrap
   carries, so its grid used to sit left of the masthead above it */
#rmWrap{ padding:clamp(1.5rem,3vw,2.4rem) var(--pad) clamp(3rem,7vw,5rem); }
#rangeWrap .range-grid, #rmWrap .range-grid{ max-width:none; margin-inline:0; }

.qz{
  max-width:none; background:var(--plate);
  border:1px solid var(--rule-strong); border-radius:0;
  box-shadow:none; overflow:visible;
}
.qz-section{ max-width:calc(var(--sheetw) + 2 * var(--pad)); margin-inline:auto; }

.qz-steps{ border-bottom:1px solid var(--line); }
.qz-tab{
  position:relative; justify-content:flex-start; gap:.8em;
  padding:1.05rem clamp(1rem,2.4vw,1.6rem);
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  border-right:1px solid var(--line);
}
.qz-tab span{
  width:auto; height:auto; border:0; border-radius:0; background:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--sienna);
}
.qz-tab.is-active{ color:var(--ink); }
.qz-tab.is-active span, .qz-tab.is-done span{ background:none; color:var(--sienna); border:0; }
.qz-tab.is-active::after{
  content:""; position:absolute; left:-1px; right:-1px; bottom:-1px;
  height:2px; background:var(--sienna);
}
.qz-panels{ padding:clamp(1.5rem,3vw,2.4rem) clamp(1.5rem,3vw,2.4rem) clamp(1.8rem,3.4vw,2.8rem); }
.qz-panel.is-active{ animation:none; }
.qz-panel-head{ text-align:left; margin:0 0 clamp(1.4rem,2.6vw,2rem); max-width:54ch; }
.qz-panel-head h3{
  font-family:var(--serif); font-weight:300; letter-spacing:-.01em;
  font-size:clamp(1.35rem,2.4vw,1.7rem); color:var(--ink);
}
.qz-panel-head p{ font-family:var(--serif); font-size:.95rem; color:var(--ink-soft); }

.qcat-cards{ gap:var(--gut); }
.qcat-card, .qprod{ background:var(--plate); border:1px solid var(--line); border-radius:0; }
.qcat-card:hover, .qprod:hover{ transform:none; box-shadow:none; border-color:var(--ink); }
.qcat-card:hover .qcat-card-media img,
.qprod:hover .qprod-media img{ transform:none; }
.qcat-card-media img, .qprod-media img{ transition:none; }
.qcat-card-name{ font-family:var(--serif); font-weight:300; font-size:1.3rem; letter-spacing:-.01em; padding:1.05rem 1.1rem .25rem; }
.qcat-card-meta{ font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.qprod-from{ font-family:var(--serif); color:var(--ink-soft); }
.qprod.is-active{ border:1px solid var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.qprod-name{ font-family:var(--serif); font-size:1rem; letter-spacing:0; }
.qprod-details, .qcat-back{ font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; }
.qprod-details:hover, .qcat-back:hover{ color:var(--sienna); }
.qprod-group{ font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.2em; color:var(--ink-soft); }
.qcatfilter{ justify-content:flex-start; margin-inline:0; }
.qcat, .range-fbtn{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  border-radius:0; border-color:var(--line); background:transparent;
}
.qcat.is-active, .range-fbtn.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
 /* sticky, so it needs an opaque ground for the cards to pass under */
.range-filter{ background:var(--paper); border-bottom:1px solid var(--line); justify-content:flex-start; }
.range-filter--static{ background:transparent; border-bottom:none; }

#qOptColors, #qOptGroups{ max-width:none; margin-inline:0; text-align:left; }
/* option groups read as a two-column spec sheet rather than a tall stack */
#qOptGroups{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.5rem,4vw,3.5rem); }
#qOptGroups .qopt{ margin-bottom:1.4rem; }
#qOptColors .qcolor-grid, #qOptGroups .qopt-choices{ justify-content:flex-start; }
.qcolors-label, .qopt-label, .pdp-opt-label, .pdp-palette-label{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.qcolor, .qchoice, .qchip, .qsize{ border-radius:0; border-color:var(--line); background:var(--plate); }
.qcolor.is-active, .qchoice.is-active{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.qcolor-name, .qchoice{ font-family:var(--serif); font-size:.95rem; }
.qchoice-add{ font-family:var(--mono); font-size:11px; }
.qcolor-dot{ border-radius:0; border-color:var(--rule-strong); }

/* `.qz .qdims` in quote.css centres these — beat it on specificity, not order */
.qdims, .qz .qdims{ margin-inline:0; max-width:600px; }
.qfield input{
  font-family:var(--mono); font-size:1rem; background:var(--plate);
  border:1px solid var(--rule-strong); border-radius:0;
}
.qfield input:focus{ border-color:var(--ink); }
.qfield .unit::after{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); }
.qhint{ font-family:var(--serif); font-size:.92rem; line-height:1.6; color:var(--ink-soft); }

.qz-bar, .qz-foot{ border-top:1px solid var(--line); }
.qz-bar-product{ font-family:var(--serif); font-size:1rem; }
.qz-bar-size{ font-family:var(--serif); font-size:.92rem; letter-spacing:0; color:var(--ink-soft); }
.qz-bar-label{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em; }
.qz-bar-total{ font-family:var(--mono); font-size:1.5rem; letter-spacing:-.01em; color:var(--sienna); }
.qz-back{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em; }
.qz-back:hover{ color:var(--sienna); }
.qz-note{ font-family:var(--serif); font-size:.88rem; letter-spacing:0; color:var(--ink-soft); }
.qz-note a{ color:var(--ink); border-bottom:1px solid var(--rule-strong); }
.qz-note a:hover{ color:var(--sienna); border-color:var(--sienna); }
.q-summary-cart{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.q-summary-cart [data-cart-count]{ border-radius:0; font-family:var(--mono); }
.q-summary{ border:1px solid var(--rule-strong); border-radius:0; background:var(--plate); }
.q-lines .q-line-total b, .qrow-price{ font-family:var(--mono); font-weight:400; }

/* ---- spec-line primitives ----
   A spec line ("1200×1800mm · Ice · PVC · Inside Mount") is language with
   numerals in it, not data. The numerals take the mono; the words do not.
   Setting the whole string in sentence-case mono made it read as a third
   typeface — see DESIGN.md → Typography. */
.spec-num{ font-family:var(--mono); font-size:.9em; letter-spacing:.02em; }
.spec-lbl{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.spec-sep{ color:var(--rule-strong); }

/* -----------------------------------------------------------------
   9. Product cards — captioned plates: no frame, no lift, no zoom.
   ----------------------------------------------------------------- */
.range-grid, .range-grid--dense{ gap:var(--gut); }
.range-card{ background:transparent; border:0; border-radius:0; }
.range-card:hover{ transform:none; box-shadow:none; border-color:transparent; }
.range-media{ aspect-ratio:4/5; background:var(--paper-deep); }
.range-media img{ object-fit:cover; height:100%; transition:none; }
.range-card:hover .range-media img{ transform:none; }
.range-body{ padding:14px 0 0; }
.range-name{ font-family:var(--serif); font-size:1.02rem; letter-spacing:0; }
.range-from{ font-family:var(--serif); font-size:.95rem; color:var(--ink-soft); }
.range-go{
  padding:.4rem 0 0; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; color:var(--ink-soft);
}
.range-card:hover .range-go{ color:var(--sienna); letter-spacing:.14em; }
.aesthetic-note{ font-family:var(--serif); font-size:.95rem; color:var(--ink-soft); }

/* -----------------------------------------------------------------
   10. Carousels — arrows sit below-left as two squares so the track
   stays flush with column 1.
   ----------------------------------------------------------------- */
.insta-carousel, .reviews-carousel{ position:relative; max-width:none; padding:0 0 64px; }
.insta-track, .review-grid{ gap:var(--gut); }
.insta-arrow, .rev-arrow{
  position:absolute; top:auto; bottom:0; transform:none;
  width:40px; height:40px; border-radius:0;
  border:1px solid var(--rule-strong); background:transparent; color:var(--ink);
  font-size:1.15rem;
}
.insta-arrow:hover, .rev-arrow:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.insta-prev, .rev-prev{ left:0; right:auto; }
.insta-next, .rev-next{ left:47px; right:auto; }
.insta-card{
  flex:0 0 clamp(280px,25%,330px);
  background:var(--plate); border:1px solid var(--line); border-radius:0;
}

/* testimonials — a rule above, no card, no stars, no shadow */
.review{
  flex:0 0 clamp(270px,29%,360px);
  background:transparent; border:0; border-top:1px solid var(--ink);
  border-radius:0; box-shadow:none; padding:1.3rem 0 0; gap:1rem;
}
.review blockquote{ font-family:var(--serif); font-weight:400; font-size:1.06rem; line-height:1.55; color:var(--ink); }
.review figcaption{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
}
.review figcaption span{ color:var(--ink-soft); }
.review figcaption span::before{ content:" · "; }

/* -----------------------------------------------------------------
   11. FAQ + policies — index rows, marker in sienna.
   ----------------------------------------------------------------- */
.faq-list{ max-width:none; margin-inline:0; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  font-family:var(--serif); font-weight:400; font-size:1.15rem;
  padding:1.35rem 2.4rem 1.35rem 0; color:var(--ink);
}
.faq-item summary::after{ font-family:var(--mono); font-weight:400; font-size:1rem; top:1.35rem; color:var(--sienna); }
.faq-item p{ font-family:var(--serif); font-size:.98rem; color:var(--ink-soft); max-width:62ch; padding-bottom:1.4rem; }
.faq-more-btn{
  margin:1.6rem 0 0; border-radius:0; border:1px solid var(--ink); background:none;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
}
.faq-more-btn:hover{ background:var(--ink); color:var(--paper); }
.policy-item{ border-top:1px solid var(--line); }
.policy-item summary{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.policy-item summary::after{ color:var(--sienna); }
.policy-body{ font-family:var(--serif); font-size:.95rem; color:var(--ink-soft); }

/* -----------------------------------------------------------------
   12. Journal + article.
   ----------------------------------------------------------------- */
.post-grid{ max-width:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gut); }
.post-media{ border:0; border-radius:0; aspect-ratio:16/9; background:var(--paper-deep); }
.post-media img{ transition:none; }
.post-media:hover img{ transform:none; }
.post-body{ padding-top:14px; }
.post-meta{ font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--sienna); }
.post h3{ font-family:var(--serif); font-weight:300; font-size:1.3rem; line-height:1.22; letter-spacing:-.01em; margin:.55rem 0 .5rem; }
.post h3 a:hover{ color:var(--sienna); }
.post-excerpt{ font-family:var(--serif); font-size:.96rem; color:var(--ink-soft); max-width:44ch; }
.post-link, .article-back{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; border-bottom:1px solid var(--rule-strong); padding-bottom:3px;
}
.post-link:hover, .article-back:hover{ color:var(--sienna); border-color:var(--sienna); }
.blog-empty{ font-family:var(--serif); color:var(--ink-soft); }

.article{ max-width:calc(var(--sheetw) + 2 * var(--pad)); }
.article-head{ margin-inline:0; max-width:none; padding-inline:0; }
.article-figure img{ border:0; border-radius:0; background:var(--paper-deep); }
.article-body{ max-width:64ch; margin-inline:0; font-family:var(--serif); font-size:1.06rem; }
.article-body h2{ font-family:var(--serif); font-weight:300; }
.article-body strong{ font-weight:500; color:var(--ink); }

/* -----------------------------------------------------------------
   13. Shop — cart, summary, checkout.
   ----------------------------------------------------------------- */
/* empty / success states — left aligned like everything else */
.shop-hero{ border-bottom:none; }
.shop-empty, .co-success{ text-align:left; max-width:calc(var(--sheetw) + 2 * var(--pad)); margin-inline:auto; padding-inline:var(--pad); }
.shop-empty h2, .co-success h1{ margin:0 0 .7rem; }
.shop-empty p, .co-success p{ font-family:var(--serif); color:var(--ink-soft); margin-inline:0; max-width:46ch; }
.shop-empty .btn, .co-success .btn{ margin-top:1.4rem; }
.summary-card, .q-cart-inner{ border:1px solid var(--rule-strong); border-radius:0; background:var(--plate); box-shadow:none; }
/* `.co-section` is a BARE block in shop.css — no border, no background, and its
   children carry no inner padding. Boxing it put every label on the border and
   ran the inputs edge to edge. Separate the checkout steps with a hairline. */
.co-section{
  border-top:1px solid var(--line);
  padding-top:clamp(1.6rem,3vw,2.2rem);
  margin-bottom:clamp(2rem,4vw,2.8rem);
}
.shop-main > .co-section:first-child{ border-top:none; padding-top:0; }
.co-section > .co-head{ margin-bottom:1.4rem; }
.summary-card h2, .co-head h2{ font-family:var(--serif); font-weight:300; font-size:1.35rem; letter-spacing:-.01em; }
.summary-rows li{ font-family:var(--serif); }
.summary-rows li.grand b, .citem-price, .qrow-price{ font-family:var(--mono); font-weight:400; }
.summary-note, .install-note, .co-agree{ font-family:var(--serif); font-size:.9rem; color:var(--ink-soft); }
.summary-back{ font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.citem, .qrow{ border-bottom:1px solid var(--line); }
.citem-media{ border-radius:0; background:var(--paper-deep); }
.citem-name{ font-family:var(--serif); font-size:1.02rem; }
.citem-spec, .citem-opts, .qrow-spec{ font-family:var(--serif); font-size:.92rem; letter-spacing:0; color:var(--ink-soft); }
.qty-stepper{ border:1px solid var(--rule-strong); border-radius:0; }
.qty-stepper button, .qty-stepper span{ font-family:var(--mono); border-radius:0; }
.citem-remove, .qrow-del{ border-radius:0; border-color:var(--line); font-family:var(--mono); }
/* a bare tracked numeral, not a chip — the label voice */
.co-step-no{
  border:0; border-radius:0; width:auto; height:auto; background:transparent;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; color:var(--sienna);
}
.install-trigger{ border:1px dashed var(--rule-strong); border-radius:0; background:transparent; }
.install-trigger-txt b{ font-family:var(--serif); font-weight:400; }
.install-trigger-txt small{ font-family:var(--serif); color:var(--ink-soft); }
.modal-box{ border-radius:0; border:1px solid var(--rule-strong); background:var(--paper); box-shadow:none; }
.modal-backdrop{ background:rgba(31,29,26,.55); }
.modal-title{ font-family:var(--serif); font-weight:300; letter-spacing:-.01em; }
.modal-text{ font-family:var(--serif); color:var(--ink-soft); }
.modal-dismiss, .modal-x{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }

/* -----------------------------------------------------------------
   14. Product detail page.
   ----------------------------------------------------------------- */
.pdp-title{ font-family:var(--serif); font-weight:300; letter-spacing:-.02em; }
.pdp-from{ font-family:var(--serif); color:var(--sienna); }
.pdp-from .spec-num{ font-size:1em; }
.pdp-desc{ font-family:var(--serif); color:var(--ink-soft); }
.pdp-desc h1,.pdp-desc h2,.pdp-desc h3,.pdp-desc h4{ font-family:var(--serif); font-weight:300; color:var(--ink); }
.pdp-desc strong{ font-weight:500; color:var(--ink); }
.pdp-slide img, .pdp-slide video, .pdp-main, .pdp-thumb{ border-radius:0; background:var(--paper-deep); }
.pdp-thumb{ border-color:var(--line); }
.pdp-thumb.is-active{ border-color:var(--ink); }
.pdp-arrow{ border-radius:0; border:1px solid var(--rule-strong); background:var(--paper); box-shadow:none; }
.pdp-arrow:hover{ background:var(--ink); color:var(--paper); }
.pdp-dot{ border-radius:0; }
.pdp-opt-select{ border-radius:0; border-color:var(--rule-strong); background:var(--plate); font-family:var(--serif); }
.pdp-swatch{ border-radius:0; }
.pdp-features li{ font-family:var(--serif); }
.pdp-modal-box{ border-radius:0; border:1px solid var(--rule-strong); background:var(--paper); box-shadow:none; }

/* -----------------------------------------------------------------
   15. Motion — opacity only, nothing travels (DESIGN.md → Motion).
   The homepage hero keeps its own entrance (see home.css).
   ----------------------------------------------------------------- */
.reveal{
  transform:none;
  transition:opacity .42s cubic-bezier(.2,0,0,1);
  transition-delay:var(--d,0ms);
}
.reveal.is-visible{ transform:none; }
.hero .reveal{ transform:translateY(26px); transition:opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1); }
.hero .reveal.is-visible{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transition:none; }
}

/* the previous design's decorative bands have no place here */
.marquee, .statement--marquee, #why, .servicearea{ display:none; }

/* -----------------------------------------------------------------
   16. Responsive — columns collapse, the monograph keeps its left
   alignment all the way down.
   ----------------------------------------------------------------- */
@media (max-width:1024px){
  .sheet-body--contact > .contact-intro,
  .sheet-body--contact > .contact-form{ grid-column:1 / -1; }
  .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px){
  .sheet-head, .block-head,
  .range-page-hero, .q-hero, .shop-hero, .article-head{ display:block; }
  .sheet-note, .block-head .muted,
  .range-page-hero p, .q-hero p, .shop-hero p, .article-sub{ margin-top:1rem; padding-top:0; }
  .sheet-title, .block-head h2,
  .range-page-hero h1, .q-hero h1, .shop-hero h1, .article-title{ font-size:clamp(2rem,6.5vw,2.7rem); }
  .contact-intro{ text-align:left; }
  .contact-intro > p{ margin-inline:0; }
  .contact-form{ max-width:none; }
  .contact-form .field label{ text-align:left; }
  .contact-form .btn{ align-self:flex-start; }
  .contact-details li{ align-items:start; }
}

@media (max-width:760px){
  .sheet{ padding-top:clamp(2.2rem,7vw,3rem); padding-bottom:clamp(2.6rem,8vw,3.6rem); }
  #qOptGroups{ grid-template-columns:1fr; }
}

@media (max-width:600px){
  /* reviews revert to the stacked-with-inline-arrows layout from styles.css */
  .reviews-carousel{
    display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center;
    gap:1rem; padding:0;
  }
  .review-grid{ flex:0 0 100%; }
  .review{ flex:0 0 100%; padding:1.2rem 0 0; }
  .rev-arrow{ position:static; bottom:auto; left:auto; }
  .insta-carousel{ padding:0; }
  .insta-arrow{ display:none; }
  .insta-card{ flex-basis:86%; }
  /* quote.css hid the labels below 620px (font-size:0, numerals only); this
     layer's 11px killed that fallback and clipped the third tab. Keep the
     words — just shrink them enough that three fit the measure. */
  .qz-tab{
    justify-content:center; white-space:nowrap; min-width:0;
    font-size:10px; letter-spacing:.06em; gap:.45em;
    padding:.95rem .45rem;
  }
  .qz-tab span{ font-size:10px; }
}