/* Livesummers type (11 Nov 2026, the owner's brand sheet): Fraunces for the
   wordmark and headings, Jost for everything else. Self-hosted variable
   files (fonts/, SIL Open Font License 1.1 - OFL-*.txt). Fraunces keeps its
   optical size axis, so the browser draws sturdier letters at small sizes
   and finer ones in big headings; its Soft and Wonk axes are fixed at 0
   (the classic cut, like the logo). Weights 300-600. The latin-ext files
   only download if an accented letter appears. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/fonts/fraunces-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/fonts/jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ===== Livesummers design (Nov 2026; layout from Oct 2026, after liveouter.com) =====
   Loaded after styles.css on every public page. It re-sets the shared
   tokens (so the cart, checkout, booking and review widgets pick up the
   look without being rewritten) and styles the page sections.

   The system, in one place (the owner's brand sheet, 11 Nov 2026):
     colour   Linen page (#F6F1EA), Latte bands and tiles (#E8DCCB),
              Espresso text and dark bands (#2F231C, never pure black),
              Walnut brand colour (#5E4130: logo, labels, links, focus),
              Forest green (#2E5339) ONLY for sales - sale bar, sale tags,
              offer prices, "you save" - and the "added" tick. Kraft is
              for cartons, not the site. Every text pair passes WCAG AA.
     type     Fraunces 400 for headings (the wordmark's face), Jost 400
              for everything else, Jost 500 tracked capitals for labels
     space    sections 96 / 72 / 56px (desktop / tablet / phone),
              1360px container, 40px / 32px / 20px gutters
     shape    square corners, 1px hairlines, no drop shadows
     motion   slow and quiet: 250-900ms, cubic-bezier(.2,.7,.2,1) */

:root {
  --linen: #f6f1ea;
  --latte: #e8dccb;
  --espresso-c: #2f231c;
  --walnut: #5e4130;
  --forest: #2e5339;

  --bg: var(--linen);
  --bg-2: var(--latte);
  --bg-3: #ddcdb6;
  --ink: var(--espresso-c);
  --ink-2: #4a3a2f;
  --mute: #6b5a4c;
  --terra: var(--walnut);          /* the brand accent (named before the rebrand) */
  --terra-text: var(--walnut);
  --sage: var(--walnut);           /* dots and small marks */
  --sale: var(--forest);           /* sales only */
  --sale-tint: #e4ebe3;
  --ok: var(--forest);
  --rule: rgba(47, 35, 28, 0.12);
  --rule-2: rgba(47, 35, 28, 0.22);
  --dark: var(--espresso-c);
  --on-dark: var(--linen);
  --on-dark-2: #c9bba8;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --h1: clamp(2.5rem, 4.4vw, 4rem);
  --h2: clamp(1.9rem, 3vw, 2.75rem);
  --h3: 1.5rem;

  /* Space above and below each section (owner, 24 Oct 2026: 128px left
     250px+ of nothing between sections - "some look ridiculous"). */
  --sec: 96px;
  --wrap: 1360px;
  --gutter: 40px;

  /* The shared tokens styles.css uses, mapped to this palette. */
  --cream: var(--bg);
  --cream-deep: var(--bg-2);
  --paper: #fbf8f3;
  --espresso: var(--ink);
  --espresso-soft: var(--ink-2);
  --terracotta: var(--ink);
  --terracotta-deep: var(--dark);
  --line: var(--rule);
  --shadow: none;
  --radius: 0px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}
@media (max-width: 1024px) { :root { --sec: 72px; --gutter: 32px; } }
@media (max-width: 640px) { :root { --sec: 56px; --gutter: 20px; } }

body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.005em;
}
body.no-scroll { overflow: hidden; }
strong, b { font-weight: 500; color: var(--ink); }
a { color: inherit; }

.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); padding: 0 var(--gutter); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.12;
  font-variant-numeric: lining-nums proportional-nums;
  margin: 0;
}
h1 { font-size: var(--h1); line-height: 1.05; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.25; }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra-text);
  margin: 0 0 16px;
}
.lede { color: var(--ink-2); font-size: 1.0625rem; max-width: 58ch; }
.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;
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 36px;
  border-radius: 0; border: 1px solid var(--ink);
  font-family: var(--sans); font-size: 0.875rem; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; box-shadow: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:hover { transform: none; }
.btn::after { content: "→"; font-size: 1rem; letter-spacing: 0; transition: transform 0.3s var(--ease); }
.btn:hover::after { transform: translateX(3px); }
.btn.no-arrow::after, .qty-stepper + .btn::after, .btn[type="submit"]::after { content: none; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-ghost, .btn-light { background: transparent; color: var(--ink); }
.btn-ghost:hover, .btn-light:hover { background: var(--ink); color: var(--bg); }
.btn-white { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.btn-white:hover { background: transparent; color: #fff; border-color: #fff; }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.8); }
.btn-outline-white:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.btn-block { width: 100%; }

.text-link {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding-bottom: 4px;
}
.text-link::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: left; transition: transform 0.4s var(--ease);
}
.text-link:hover::before { transform: scaleX(0.35); }
.text-link::after { content: "→"; letter-spacing: 0; transition: transform 0.3s var(--ease); }
.text-link:hover::after { transform: translateX(3px); }

input, select, textarea { border-radius: 0 !important; font-family: var(--sans); }

/* The server-added announcement (src/announce.js) stays hidden: the
   header's strip below reads the owner's message from it and shows it. */
.announce { display: none; }

/* ---------- Announcement strip (scrolls away with the page) ----------
   Every message sits in the same grid cell, on one line (owner, 3 Nov
   2026): a long one is split into parts that take turns (js/site-chrome.js),
   so nothing moves when they swap. Slimmer and quieter on a phone, no
   arrows there (swipe). */
.announce-bar { background: var(--dark); color: var(--on-dark); font-size: 0.75rem; letter-spacing: 0.08em; line-height: 1.4; }
.announce-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: stretch; min-height: 36px; }
.announce-track { flex: 1; min-width: 0; display: grid; }
.announce-item {
  grid-area: 1 / 1; align-self: center; min-width: 0; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 8px 16px; text-align: center; color: var(--on-dark); text-decoration: none;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.announce-item.on { opacity: 1; visibility: visible; transition: opacity 0.25s ease 0.25s, visibility 0s; }
a.announce-item:hover { text-decoration: underline; text-underline-offset: 3px; }
.announce-arrow {
  flex: 0 0 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; color: var(--on-dark-2); cursor: pointer; transition: color 0.2s ease;
}
.announce-arrow:hover { color: var(--bg); }
.announce-bar :focus-visible { outline-color: var(--on-dark); outline-offset: -3px; }
/* The sale strip under it (messages ticked Sale on /manage): terracotta, not bold. */
.announce-sale { background: var(--sale); }
.announce-sale .announce-item, .announce-sale .announce-arrow { color: #fff; }
.announce-sale .announce-inner { min-height: 32px; }
.announce-sale :focus-visible { outline-color: #fff; }
@media (max-width: 640px) {
  .announce-bar { font-size: 0.6875rem; letter-spacing: 0.06em; }
  .announce-inner, .announce-sale .announce-inner { min-height: 30px; }
  .announce-item { padding: 6px 16px; }
  .announce-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .announce-item, .announce-item.on { transition: none; } }

/* ---------- Header: hides on the way down, back on the way up ---------- */
#site-header { display: contents; }
/* Until site-chrome.js fills it in, the mount keeps the strip's and the
   header's room (36 + 88px, phones and tablets 36 + 68px), so the page
   doesn't jump down when they arrive. */
#site-header:empty { display: block; height: 124px; }
@media (max-width: 1023px) { #site-header:empty { height: 104px; } }
@media (hover: none) and (max-width: 1279px) { #site-header:empty { height: 104px; } }
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg); border-bottom: 1px solid transparent;
  transition: transform 0.35s var(--ease), border-color 0.3s ease, background 0.3s ease;
}
.site-header.scrolled { border-bottom-color: var(--rule); }
.site-header.away { transform: translateY(-100%); }
.site-header.menu-open { transform: none; }
.hdr {
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.hdr-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); justify-self: start; }
.hdr-brand img { height: 40px; width: auto; }
.hdr-brand-name { font-family: var(--serif); font-size: 0.9375rem; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.hdr-brand-name span { display: inline; }
.hdr-nav { display: flex; align-items: stretch; height: 100%; gap: 36px; }
.hdr-item { display: flex; align-items: center; }
.hdr-item.has-drop { position: relative; }
.hdr-link {
  position: relative; display: flex; align-items: center; gap: 6px; height: 100%;
  text-decoration: none; color: var(--ink); font-size: 0.9375rem; font-weight: 400; letter-spacing: 0.02em;
}
.hdr-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 28px; height: 1px; background: var(--terra);
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
}
.hdr-link[aria-current="page"]::after, .hdr-item:hover > .hdr-link::after, .hdr-item:focus-within > .hdr-link::after { transform: scaleX(1); }
.hdr-link svg { transition: transform 0.25s var(--ease); }
.hdr-item:hover > .hdr-link svg { transform: rotate(180deg); }
.hdr-tools { display: flex; align-items: center; gap: 4px; justify-self: end; }
.hdr-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; padding: 0 6px; background: none; border: 0; color: var(--ink);
  cursor: pointer; text-decoration: none; position: relative; font: inherit;
  transition: color 0.2s ease;
}
.hdr-icon:hover { color: var(--terra-text); }
.hdr-icon svg { width: 20px; height: 20px; }
.hdr-menu { display: none; }
.nav-cart-count {
  position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; border-radius: 9px;
  background: var(--terra); color: #fff; font-size: 0.625rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.nav-cart-count[hidden] { display: none; }

/* Mega menu: a cream panel over a dimmed page */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-top: 1px solid var(--rule);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s var(--ease), visibility 0s linear 0.22s;
}
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transition-delay: 0s; }
.mega-inner { animation: none; }
.has-mega:hover .mega-inner, .has-mega:focus-within .mega-inner { animation: mega-in 0.28s var(--ease) both; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; background: rgba(47, 35, 28, 0.3);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s var(--ease), visibility 0s linear 0.22s;
}
body:has(.has-mega:hover)::after, body:has(.has-mega:focus-within)::after { opacity: 1; visibility: visible; transition-delay: 0s; }
.mega-inner {
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 36px var(--gutter) 44px;
  display: grid; grid-template-columns: 1fr 220px; gap: 48px;
}
/* "Shop by style": a photo and one label per collection, in one row. */
.mega-style { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mega-tiles { display: grid; grid-template-columns: repeat(var(--tiles, 6), 1fr); gap: 16px; }
.mega-tile { text-decoration: none; color: var(--ink); }
.mega-tile-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
.mega-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.mega-tile:hover img { transform: scale(1.04); }
.mega-tile-name { display: block; margin-top: 12px; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.3; color: var(--ink); }
.mega-tile:hover .mega-tile-name { color: var(--terra-text); }
.mega-tile-from { display: block; font-size: 0.8125rem; color: var(--mute); margin-top: 2px; }
.mega-list { display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--rule); padding-left: 32px; }
.mega-types { display: flex; flex-direction: column; gap: 12px; }
.mega-types:empty { display: none; }
.mega-list a { text-decoration: none; color: var(--ink); font-size: 0.9375rem; transition: color 0.2s ease; }
.mega-list a:hover { color: var(--terra-text); }
.mega-list-title { display: block; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 500; color: var(--terra-text); margin-bottom: 4px; }
.mega-types a { font-family: var(--serif); font-size: 1.125rem; }
.mega-list a.mega-list-all { margin-top: 14px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }

.drop {
  position: absolute; top: 100%; left: -24px; min-width: 240px; background: var(--bg);
  border: 1px solid var(--rule); padding: 14px 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.drop a { display: block; padding: 9px 24px; text-decoration: none; color: var(--ink); font-size: 0.9375rem; }
.drop a:hover { color: var(--terra-text); }

/* Drawer (mobile menu) and search */
.drawer, .search {
  position: fixed; inset: 0; z-index: 90; background: rgba(47, 35, 28, 0.45);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.drawer.open, .search.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.drawer-panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(420px, 88vw); background: var(--bg);
  overflow-y: auto; padding: 0 24px 32px; transform: translateX(-100%); transition: transform 0.35s var(--ease);
}
.drawer.open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 68px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.drawer-head img { height: 30px; width: auto; }
.drawer-title { display: block; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 500; color: var(--terra-text); }
.drawer-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.drawer-types:empty { display: none; }
.drawer-types .drawer-title { margin-bottom: 0; }
.drawer-link-gap { margin-top: 18px; }
.drawer-tiles .mega-tile-name { font-size: 1rem; margin-top: 8px; }
.drawer-tiles .mega-tile-from { display: none; }
.drawer-link { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); font-family: var(--serif); font-size: 1.125rem; }
.drawer-link-sub { font-family: var(--sans); font-size: 0.9375rem; color: var(--ink-2); }
.drawer-cta { width: 100%; margin-top: 24px; }

.search-panel { background: var(--bg); max-width: 760px; margin: 0 auto; transform: translateY(-16px); transition: transform 0.3s var(--ease); max-height: 80vh; overflow-y: auto; }
.search.open .search-panel { transform: none; }
.search-row { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--rule); height: 72px; color: var(--ink); }
.search-row input { flex: 1; border: 0; font-family: var(--serif); font-size: 1.25rem; outline: none; min-width: 0; background: none; color: var(--ink); }
.search-results { padding: 10px 0 18px; }
.search-label { margin: 14px 20px 8px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 500; color: var(--terra-text); }
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 6px; }
.search-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--rule-2); color: var(--ink); text-decoration: none; font-size: 0.875rem; transition: border-color 0.2s ease, background 0.2s ease; }
.search-chips a:hover { border-color: var(--ink); background: var(--bg-2); }
.search-hit { display: flex; gap: 16px; align-items: center; padding: 8px 20px; text-decoration: none; color: var(--ink); }
.search-hit:hover, .search-hit:focus-visible { background: var(--bg-2); }
.search-hit img { flex-shrink: 0; }
.search-hit-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-hit strong { font-family: var(--serif); font-weight: 400; font-size: 1.0625rem; }
.search-hit-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.9375rem; }
.search-hit-price .price-was { font-size: 0.8125rem; color: var(--mute); }
.search-hit-price .price-offer { font-size: 0.8125rem; color: var(--sale); }
.search-hit-out { font-size: 0.8125rem; color: var(--mute); letter-spacing: 0.04em; }
.search-all { display: inline-block; margin: 12px 20px 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-underline-offset: 4px; }
.search-none { padding: 18px 20px; color: var(--ink-2); }
@media (max-width: 640px) { .search-panel { max-height: 88vh; max-height: 88dvh; } }

/* Welcome pop-up (the announcement's messages): a centred box over the
   dimmed page; on a phone a bottom sheet under half the screen. It sits
   above the page (position: fixed), so nothing on the page moves. */
.welcome {
  position: fixed; inset: 0; z-index: 150; background: rgba(47, 35, 28, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; transition: opacity 0.3s ease;
}
.welcome.open { opacity: 1; }
.welcome-panel {
  position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--bg); color: var(--ink-2); padding: 44px 48px 28px; text-align: center;
  transform: translateY(12px); transition: transform 0.35s var(--ease);
}
.welcome.open .welcome-panel { transform: none; }
.welcome-panel:focus { outline: none; }
.welcome-x {
  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer;
}
.welcome-x[aria-disabled] { cursor: wait; color: var(--mute); }
.welcome-x.ready:hover { color: var(--terra-text); }
/* Fills round the close button over the 7 seconds it waits. */
.welcome-ring { position: absolute; inset: 4px; width: 36px; height: 36px; transform: rotate(-90deg); }
.welcome-ring circle {
  fill: none; stroke: var(--terra); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 119.4; stroke-dashoffset: 119.4; animation: welcome-ring 7s linear forwards;
}
.welcome-x.ready .welcome-ring { opacity: 0; transition: opacity 0.3s ease; }
@keyframes welcome-ring { to { stroke-dashoffset: 0; } }
.welcome-logo { display: block; height: 36px; width: auto; margin: 0 auto 22px; }
.welcome-panel h2 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 20px; }
.welcome-list { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--rule); text-align: left; }
.welcome-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px; border-bottom: 1px solid var(--rule); color: var(--ink); font-size: 1rem; line-height: 1.45; }
/* Each line's mark: a linen tick in a small walnut seal; a sale line (any
   line ticked Sale on /manage) is a forest-green band with a tag. */
.welcome-mark {
  flex-shrink: 0; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sage); color: var(--paper);
}
.welcome-mark svg { width: 14px; height: 14px; stroke-width: 2; }
.welcome-list li.welcome-sale {
  margin-top: 10px; padding: 12px 14px; border: 0; border-left: 3px solid var(--sale);
  background: var(--sale-tint); color: var(--sale); /* not bold (owner, 3 Nov 2026) */
}
.welcome-list li.welcome-sale + li.welcome-sale { margin-top: 6px; }
.welcome-sale .welcome-mark { background: var(--sale); }
@media (max-width: 640px) {
  .welcome { align-items: flex-end; padding: 0; }
  .welcome-panel {
    width: 100%; max-height: 45vh; max-height: 45dvh; text-align: left;
    padding: 20px 20px calc(8px + env(safe-area-inset-bottom)); transform: translateY(100%);
  }
  .welcome-logo { display: none; }
  .welcome-panel h2 { font-size: 1.3125rem; margin: 0 44px 10px 0; }
  .welcome-list { margin-bottom: 8px; }
  .welcome-list li { padding: 7px 0; font-size: 0.9375rem; gap: 10px; }
  .welcome-list li.welcome-sale { padding: 9px 12px; }
  .welcome-mark { width: 22px; height: 22px; }
}
/* The ring keeps filling with animations off: it's the countdown to the ×
   working (a full ring from the start looked ready but did nothing). */
@media (prefers-reduced-motion: reduce) { .welcome, .welcome-panel { transition: none; } }

.hdr-start { display: flex; align-items: center; justify-self: start; }
@media (max-width: 1279px) { .hdr-nav { gap: 28px; } }
@media (max-width: 1023px) {
  .hdr { grid-template-columns: 1fr auto 1fr; height: 68px; gap: 8px; }
  .hdr-start { display: contents; }
  .hdr-nav { display: none; }
  .hdr-menu { display: inline-flex; margin-left: -10px; justify-self: start; }
  .hdr-brand { justify-self: center; }
  .hdr-brand img { height: 32px; }
  .hdr-brand-name { display: none; }
}

/* ---------- Sections ---------- */
.sec { padding: var(--sec) 0; }
.sec-tight { padding: calc(var(--sec) * 0.5) 0; }
.sec-soft { background: var(--bg-2); }
.sec-ink { background: var(--dark); color: var(--on-dark); }
.sec-ink h2, .sec-ink h3, .sec-ink strong { color: var(--bg); }
.sec-ink .eyebrow { color: var(--on-dark-2); }
.sec:not(.sec-soft):not(.sec-ink) + .sec:not(.sec-soft):not(.sec-ink) { padding-top: 0; }
.sec-soft + .sec-soft { padding-top: 0; }
.sec-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.sec-head p { color: var(--ink-2); font-size: 1.0625rem; margin: 18px auto 0; max-width: 56ch; }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.sec-head-row p { margin: 12px 0 0; max-width: 56ch; }
@media (max-width: 640px) { .sec-head { margin-bottom: 36px; } .sec-head-row { margin-bottom: 28px; } }

/* ---------- Hero: one calm scene, one message ---------- */
.hero-show { position: relative; height: calc(100vh - 124px); min-height: 560px; max-height: 860px; overflow: hidden; background: var(--dark); color: #fff; }
.hero-slide { position: absolute; inset: 0; }
.hero-slide img, .hero-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(47, 35, 28, 0.55) 0%, rgba(47, 35, 28, 0.18) 50%, rgba(47, 35, 28, 0) 72%),
              linear-gradient(0deg, rgba(47, 35, 28, 0.3), rgba(47, 35, 28, 0) 35%);
}
.hero-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(56px, 11vh, 120px); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.hero-copy-inner { max-width: 620px; }
.hero-copy .eyebrow { color: rgba(255, 255, 255, 0.85); }
.hero-copy h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.04; margin: 0 0 20px; }
.hero-copy p { font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.92); margin: 0 0 32px; max-width: 46ch; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .hero-show { height: 78vh; min-height: 520px; }
  .hero-slide::after { background: linear-gradient(0deg, rgba(47, 35, 28, 0.7) 0%, rgba(47, 35, 28, 0.25) 55%, rgba(47, 35, 28, 0.05) 100%); }
  .hero-copy h1 { font-size: 2.5rem; }
  .hero-copy p { font-size: 1rem; margin-bottom: 26px; }
  .hero-ctas .btn { flex: 1 1 100%; }
}

/* The three reasons, as a band attached to the hero */
.value-strip { background: var(--dark); color: var(--on-dark); }
.value-strip ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: calc(var(--wrap) + 2 * var(--gutter)); display: grid; grid-template-columns: repeat(3, 1fr); }
.value-strip li { display: flex; justify-content: center; }
.value-strip li + li { border-left: 1px solid rgba(246, 241, 234, 0.14); }
.value-strip a { display: flex; gap: 12px; align-items: center; height: 64px; color: var(--on-dark); text-decoration: none; font-size: 0.875rem; letter-spacing: 0.02em; }
.value-strip a:hover { color: #fff; }
.value-strip svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--on-dark-2); }
.value-strip strong { color: var(--bg); font-weight: 500; }
.value-strip .vs-sub { color: var(--on-dark-2); }
@media (max-width: 860px) {
  .value-strip ul { grid-template-columns: 1fr; padding: 8px var(--gutter); }
  .value-strip li { justify-content: flex-start; }
  .value-strip li + li { border-left: 0; border-top: 1px solid rgba(246, 241, 234, 0.14); }
  .value-strip a { height: 52px; }
}

/* Warranty block */
.warranty-band { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.warranty-band h2 { margin-bottom: 18px; }
.warranty-band p { color: var(--ink-2); margin: 0 0 28px; max-width: 44ch; }
.warranty-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.warranty-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.warranty-list strong { font-family: var(--serif); font-weight: 400; font-size: 1.1875rem; }
.warranty-list span { color: var(--terra-text); font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.sec-ink .warranty-list { border-color: rgba(246, 241, 234, 0.3); }
.sec-ink .warranty-list li { border-color: rgba(246, 241, 234, 0.14); }
.sec-ink .warranty-list span { color: var(--on-dark-2); }
.sec-ink .warranty-band p { color: var(--on-dark-2); }
.fine { font-size: 0.8125rem; color: var(--mute); margin-top: 16px; }
@media (max-width: 860px) { .warranty-band { grid-template-columns: 1fr; } }

/* ---------- Carousels ---------- */
.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 24px) / 4);
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-btns { display: flex; gap: 8px; flex-shrink: 0; }
.rail-btn {
  width: 48px; height: 48px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s var(--ease);
}
.rail-btn:hover:not(:disabled) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rail-btn:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 1024px) { .rail { grid-auto-columns: calc((100% - 24px) / 2.4); } }
@media (max-width: 640px) { .rail { grid-auto-columns: 78%; gap: 14px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); } .rail-btns { display: none; } }

.cat-tile { text-decoration: none; color: var(--ink); display: block; }
.cat-tile-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-3); }
.cat-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.cat-tile:hover img { transform: scale(1.03); }
.cat-tile-name { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 16px; font-family: var(--serif); font-size: 1.25rem; }
.cat-tile-name small { font-family: var(--sans); color: var(--mute); font-size: 0.8125rem; white-space: nowrap; }

/* Heritage line */
.proof-line { text-align: center; padding: 44px var(--gutter); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.proof-line p { margin: 0 auto; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ink); max-width: 46ch; line-height: 1.5; }
.proof-line img { height: 40px; width: auto; margin: 0 auto 16px; opacity: 0.85; }

/* Featured sets: image, then the words underneath */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 64px 32px; }
.feature-card { display: block; text-decoration: none; color: var(--ink); }
.feature-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); }
.feature-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.feature-card:hover .feature-card-img img { transform: scale(1.03); }
.feature-card-copy { padding-top: 24px; display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: baseline; }
.feature-card-copy h3 { font-size: 1.75rem; grid-column: 1; }
.feature-card-copy .fc-price { grid-column: 2; grid-row: 1; font-size: 1rem; color: var(--ink); white-space: nowrap; }
.feature-card-copy p { grid-column: 1 / -1; margin: 0 0 14px; color: var(--ink-2); }
.feature-card-copy .text-link { grid-column: 1; justify-self: start; }
@media (max-width: 760px) { .feature-grid { grid-template-columns: 1fr; gap: 48px; } .feature-card-copy h3 { font-size: 1.5rem; } }

/* Video feature */
.video-feature { position: relative; height: min(80vh, 760px); min-height: 480px; overflow: hidden; color: #fff; background: var(--dark); }
.video-feature video, .video-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-feature::after { content: ""; position: absolute; inset: 0; background: rgba(47, 35, 28, 0.42); }
.video-feature-copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gutter); }
.video-feature-copy .eyebrow { color: rgba(255, 255, 255, 0.85); }
.video-feature-copy h2 { color: #fff; font-size: clamp(2.25rem, 4.4vw, 3.75rem); max-width: 15ch; margin: 0 0 20px; }
.video-feature-copy p { max-width: 50ch; margin: 0 0 32px; font-size: 1.0625rem; color: rgba(255, 255, 255, 0.92); }

/* Service columns: photo, then words - no boxes */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.service-card-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-3); }
.service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.service-card:hover .service-card-img img { transform: scale(1.03); }
.service-card-body { padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.service-card-body h3 { font-family: var(--serif); font-size: 1.5rem; }
.service-card-body p { color: var(--ink-2); margin: 0 0 8px; }
.service-card-body .text-link { align-self: flex-start; }
@media (max-width: 900px) { .service-grid { grid-template-columns: 1fr; gap: 48px; } .service-card-img { aspect-ratio: 4 / 3; } }

/* ---------- Reviews ---------- */
.rv-summary { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 0 auto 56px; flex-wrap: wrap; }
.rv-score { font-family: var(--serif); font-size: 4rem; line-height: 1; color: var(--ink); }
.rv-score-meta { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.rv-score-meta .rv-stars { font-size: 1.125rem; }
.rv-score-meta span { color: var(--ink-2); font-size: 0.9375rem; }
.rv-seal { height: 48px; width: auto; opacity: 0.8; padding-left: 28px; border-left: 1px solid var(--rule-2); }
.rv-stars { color: var(--ink); letter-spacing: 3px; font-size: 0.875rem; }
.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
.rv-card { display: flex; flex-direction: column; gap: 18px; padding-top: 28px; border-top: 1px solid var(--rule-2); }
.rv-card-img { display: none; }
.rv-card-body { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.rv-card-body h3 { font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.45; color: var(--ink); }
.rv-card-body p { color: var(--ink-2); margin: 0; flex: 1; font-size: 0.9375rem; }
.rv-who { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--mute); letter-spacing: 0.04em; }
.rv-who strong { color: var(--ink); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem; }
.rv-photos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 64px; }
.rv-photos a { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-3); }
.rv-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.rv-photos a:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .rv-grid { grid-template-columns: 1fr; gap: 36px; } .rv-photos { grid-template-columns: repeat(3, 1fr); } }

/* Split image + text */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.split-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-3); }
.split-img img, .split-img video { width: 100%; height: 100%; object-fit: cover; }
.split h2 { margin-bottom: 20px; }
.split p { color: var(--ink-2); font-size: 1.0625rem; }
.split-points { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.split-points li { padding: 18px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 180px 1fr; gap: 20px; }
.split-points strong { font-family: var(--serif); font-weight: 400; font-size: 1.125rem; }
.split-points span { color: var(--ink-2); }
.split-rev .split-img { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-img { aspect-ratio: 4 / 3; }
  .split-rev .split-img { order: 0; }
  .split-points li { grid-template-columns: 1fr; gap: 4px; }
}

/* Three-up image columns */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.trio-card { text-decoration: none; color: inherit; }
.trio-card-img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-3); }
.trio-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.trio-card:hover .trio-card-img img { transform: scale(1.03); }
.trio-card h3 { font-family: var(--serif); font-size: 1.375rem; margin: 22px 0 8px; }
.trio-card p { color: var(--ink-2); margin: 0; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; gap: 44px; } }

/* ---------- Footer, with the newsletter inside ---------- */
.site-footer { background: var(--dark); color: var(--on-dark-2); padding: 96px 0 32px; font-size: 0.9375rem; }
.site-footer a { color: var(--on-dark); text-decoration: none; transition: color 0.2s ease; }
.site-footer a:hover { color: #fff; }
.ftr-news { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; padding-bottom: 72px; margin-bottom: 64px; border-bottom: 1px solid rgba(246, 241, 234, 0.14); }
.ftr-news h2 { color: var(--bg); font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-bottom: 10px; }
.ftr-news p { margin: 0; max-width: 46ch; }
.newsletter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 20px; }
.newsletter-form input {
  flex: 1; min-width: 0; height: 52px; border: 0; border-bottom: 1px solid rgba(246, 241, 234, 0.5); padding: 0;
  font-size: 1.0625rem; background: transparent; color: var(--bg); outline: none; transition: border-color 0.2s ease;
}
.newsletter-form input::placeholder { color: var(--on-dark-2); }
.newsletter-form input:focus { border-bottom-color: var(--bg); }
.newsletter-form .btn { min-height: 52px; padding: 0 28px; background: transparent; color: var(--bg); border-color: rgba(246, 241, 234, 0.5); }
.newsletter-form .btn:hover { background: var(--bg); color: var(--ink); }
.newsletter-msg { flex-basis: 100%; margin: 12px 0 0; font-size: 0.875rem; min-height: 1.3em; color: var(--on-dark); }
.newsletter-form.done input, .newsletter-form.done .btn { display: none; }
.ftr-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.ftr-logo { display: inline-block; margin-bottom: 20px; }
.ftr-logo img { height: 48px; width: auto; }
.ftr-brand p { margin: 0 0 14px; max-width: 32ch; line-height: 1.7; }
.ftr-col { display: flex; flex-direction: column; gap: 12px; }
.ftr-col h3 { font-family: var(--sans); color: var(--on-dark-2); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; margin: 0 0 8px; }
.ftr-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(246, 241, 234, 0.14); margin-top: 64px; padding-top: 26px; font-size: 0.8125rem; color: var(--on-dark-2); }
@media (max-width: 900px) {
  .ftr-news { grid-template-columns: 1fr; gap: 28px; padding-bottom: 48px; margin-bottom: 48px; }
  .ftr-cols { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .ftr-brand { grid-column: 1 / -1; }
  .site-footer { padding-top: 64px; }
}

/* Hide the old footer/header if a page still has its markup. */
footer.site:not(.site-footer), header.site:not(.site-header) { display: none; }

/* ---------- Product cards ---------- */
.collection-grid, .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 28px; }
@media (max-width: 1024px) { .collection-grid, .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 20px; } }
@media (max-width: 480px) { .collection-grid, .shop-grid { gap: 36px 12px; } }
.card { container-type: inline-size; position: relative; display: flex; flex-direction: column; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; transform: none !important; }
.card:hover { box-shadow: none; }
.card-media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--bg-2); overflow: hidden; }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-img { object-fit: contain; padding: 8% 7%; mix-blend-mode: multiply; transition: opacity 0.4s var(--ease); }
.card-img-hover { object-fit: cover; opacity: 0; transition: opacity 0.4s var(--ease), transform 0.9s var(--ease); }
/* A photo (not a cut-out on white) in the Shop card field fills the box. */
.card-img.card-img-photo { object-fit: cover; padding: 0; mix-blend-mode: normal; }
@media (hover: hover) {
  .card:hover .card-img-hover { opacity: 1; transform: scale(1.03); }
  .card:hover .card-img { opacity: 0; }
}
.card-tag {
  position: absolute; z-index: 2; top: 14px; left: 14px; background: var(--bg); color: var(--ink);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px;
}
.card-tag-muted { color: var(--mute); }
.card-quick {
  /* Bottom-right of the square photo: the card is a size container, so 100cqw is the photo's height. */
  position: absolute; z-index: 3; right: 14px; top: calc(100cqw - 14px - 38px);
  background: var(--ink); color: var(--bg); border: 0; font: inherit; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 16px; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), background 0.2s ease;
}
.card-quick:hover { background: var(--ink-2); }
.card:hover .card-quick, .card-quick:focus-visible, .card-quick.added { opacity: 1; transform: none; }
@media (hover: none) { .card-quick { opacity: 1; transform: none; padding: 8px 10px; font-size: 0.6875rem; } }
.card-body { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; text-decoration: none; color: var(--ink); }
.card-body h3 { font-family: var(--serif); font-size: 1.375rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.005em; }
.card-sub { margin: 0; font-size: 0.875rem; color: var(--mute); }
.card-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.card-price { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--ink); }
.card-status { font-size: 0.75rem; color: var(--terra-text); text-transform: uppercase; letter-spacing: 0.1em; }
.card-unavailable .card-media img { opacity: 0.55; }
@media (max-width: 480px) { .card-body h3 { font-size: 1.125rem; } .card-sub { font-size: 0.8125rem; } }

/* Finish dot (shop cards, product page) */
.card-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(47, 35, 28, 0.18); background: #c9a77c; vertical-align: -2px; }
.card-swatch[data-tone="Light grey"] { background: #8a8a86; }
.card-swatch[data-tone="Mocha"] { background: #6b5a4c; }
.card-swatch[data-tone="Slate grey"] { background: #5f666c; }
.card-swatch[data-tone="Stone"] { background: #c8c3b8; }
.card-swatch[data-tone="Sand"] { background: #c4b498; }

/* ---------- Collection page ---------- */
.col-hero { position: relative; height: 52vh; min-height: 400px; max-height: 560px; color: #fff; overflow: hidden; background: var(--dark); }
.col-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.col-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(47, 35, 28, 0.58), rgba(47, 35, 28, 0.12) 62%, rgba(47, 35, 28, 0) 80%); }
.col-hero-copy { position: relative; z-index: 2; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(44px, 8vh, 80px); }
.col-hero-copy .crumbs { position: absolute; top: 28px; left: var(--gutter); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); }
.col-hero-copy .crumbs a { color: #fff; text-decoration: none; }
.col-hero-copy .crumbs a:hover { text-decoration: underline; }
.col-hero-copy .eyebrow { color: rgba(255, 255, 255, 0.85); }
.col-hero-copy h1 { color: #fff; margin: 0 0 16px; max-width: 16ch; }
.col-hero-copy p { max-width: 48ch; margin: 0; font-size: 1.0625rem; color: rgba(255, 255, 255, 0.92); }

.shop-tabs-bar { border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; background: var(--bg); transition: top 0.35s var(--ease); }
body.hdr-shown .shop-tabs-bar { top: 88px; }
@media (max-width: 1023px) { body.hdr-shown .shop-tabs-bar { top: 68px; } }
.shop-tabs-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.shop-tabs { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab {
  position: relative; flex-shrink: 0; padding: 22px 0; text-decoration: none; color: var(--ink-2); font-size: 0.9375rem; white-space: nowrap;
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.shop-tab small { color: var(--mute); font-size: 0.75rem; margin-left: 4px; }
.shop-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
.shop-tab:hover { color: var(--ink); }
.shop-tab.active { color: var(--ink); }
.shop-tab.active::after { transform: scaleX(1); }
.shop-tools { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.shop-bar-count { color: var(--mute); font-size: 0.875rem; white-space: nowrap; }
.shop-tools select { height: 40px; border: 0; border-bottom: 1px solid var(--rule-2); padding: 0 26px 0 0; background: transparent; color: var(--ink); font-size: 0.875rem; cursor: pointer; }
.shop-instock { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.shop-instock input { accent-color: var(--ink); width: 15px; height: 15px; margin: 0; }
.shop-grid-sec { padding: 56px 0 var(--sec); }
.shop-empty { grid-column: 1 / -1; padding: 40px 0; color: var(--ink-2); }
.shop-note { margin: 0 0 36px; font-size: 0.9375rem; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.shop-note svg { color: var(--terra); flex-shrink: 0; }
@media (max-width: 860px) {
  .shop-tabs-inner { flex-direction: column; align-items: stretch; gap: 0; }
  .shop-tabs { gap: 24px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .shop-tools { justify-content: space-between; padding: 10px 0 12px; border-top: 1px solid var(--rule); }
}

.breadcrumb { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 24px var(--gutter) 0; font-size: 0.8125rem; color: var(--mute); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Product page ---------- */
.product-page { padding-top: 0; }
/* Square gallery (22 Oct 2026, Outer-style): 60% of a wider page, every thumbnail shown. */
.product-page .wrap.pdp, .breadcrumb.pdp-crumb, body:has(.product-page) .hdr { max-width: calc(1560px + 2 * var(--gutter)); }
.product-page .wrap.pdp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(40px, 5vw, 88px); align-items: start; padding-top: 24px; padding-bottom: 32px; }
.pdp-gallery, .pdp-info { min-width: 0; }
/* Sticks once its thumbnails are in view: --gal-fit (js/product.js) is the
   top that lines its bottom up with the screen's when it's taller than the screen. */
.pdp-gallery { position: sticky; top: min(24px, var(--gal-fit, 24px)); transition: top 0.35s var(--ease); }
body.hdr-shown .pdp-gallery { top: min(112px, var(--gal-fit, 112px)); }
.pdp-main { position: relative; aspect-ratio: 1 / 1; background: var(--bg-2); overflow: hidden; touch-action: pan-y; }
.pdp-main img, .pdp-main video { width: 100%; height: 100%; display: block; cursor: zoom-in; }
.pdp-main img.pd-main-img { object-fit: contain; padding: 9%; mix-blend-mode: multiply; }
.pdp-main img.is-scene { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.pdp-main video { object-fit: cover; }
.pdp-main .pd-nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: #fff; border: 0; color: var(--ink); cursor: pointer; box-shadow: 0 2px 10px rgba(40, 28, 22, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pdp-main .pd-nav-arrow svg { width: 16px; height: 16px; }
.pdp-main .pd-nav-arrow:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 4px 14px rgba(40, 28, 22, 0.2); }
.pdp-main .pd-nav-prev { left: 16px; }
.pdp-main .pd-nav-next { right: 16px; }
.pdp-main .pd-counter { position: absolute; right: 16px; bottom: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 0.75rem; letter-spacing: 0.08em; padding: 5px 11px; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 12px; }
.pdp-thumbs > * { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: pointer; background: var(--bg-2); opacity: 1; border: 0; border-bottom: 1px solid transparent; padding-bottom: 0; transition: opacity 0.2s ease; }
.pdp-thumbs > *:hover { opacity: 0.85; }
.pdp-thumbs > .active { opacity: 1; box-shadow: 0 1px 0 0 var(--ink), 0 2px 0 0 var(--ink); }
/* Video thumbnails: a frame of the clip with a small play badge (like Outer). */
.pdp-thumbs .pd-thumb-video { position: relative; display: block; overflow: hidden; }
.pdp-thumbs .pd-thumb-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pdp-thumbs .pd-thumb-play { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; }
.pdp-thumbs .pd-thumb-play svg { width: 8px; height: 8px; }
.pdp-info { padding-top: 8px; }
.pdp-info h1 { font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1.1; margin: 0 0 8px; }
.pdp-subtitle { margin: 0 0 14px; color: var(--ink-2); font-size: 0.9375rem; }
.pdp-rating { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 0.875rem; text-decoration: none; }
.pdp-rating .review-stars, .pdp-rating [class*="star"] { color: var(--ink); }
.pdp-price { font-size: 1.5rem; margin: 22px 0 6px; color: var(--ink); }
.pdp-price .pd-price { margin: 0; }
.pdp-price .pd-price-direct { font-family: var(--sans); font-size: inherit; font-weight: 400; color: var(--ink); }
/* Sold out: the price isn't shown (owner, 12 Oct 2026). */
.pdp-price .pd-price-soldout { font-family: var(--sans); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.1em; color: var(--terra-text); }
.pdp-paynote { margin: 0 0 18px; font-size: 0.875rem; color: var(--ink-2); }
.pdp-lead { color: var(--ink-2); margin: 0 0 20px; }
.pdp-bullets { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pdp-bullets li { padding-left: 22px; position: relative; font-size: 0.9375rem; }
.pdp-bullets li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }
.pdp-finish { margin: 0 0 22px; font-size: 0.9375rem; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.pdp-finish strong { font-weight: 500; }
.pdp-buy { display: flex; gap: 10px; align-items: stretch; margin-bottom: 14px; }
.pdp-buy .qty-stepper { border-radius: 0; border: 1px solid var(--rule-2); height: 56px; background: transparent; }
.pdp-buy .qty-stepper button { border-radius: 0; color: var(--ink); background: transparent; }
.pdp-buy .qty-stepper button:disabled { color: var(--ink); opacity: 0.35; }
.pdp-buy .btn { flex: 1; min-height: 56px; }
.pdp-micro { list-style: none; padding: 20px 24px; margin: 0 0 22px; display: grid; gap: 12px; font-size: 0.875rem; color: var(--ink-2); background: var(--bg-2); }
.pdp-micro li { display: flex; gap: 12px; align-items: flex-start; }
.pdp-micro svg { flex-shrink: 0; margin-top: 2px; color: var(--ink); width: 18px; height: 18px; }
.pdp-micro a { color: var(--ink); text-underline-offset: 3px; }
.pdp-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 32px; }
.pdp-alt .btn { min-height: 48px; padding: 0 16px; font-size: 0.8125rem; }
.pdp-alt .btn::after { content: none; }
.pdp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 0 0 18px; }
.pdp-chips li { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 6px; }
.pdp-chips li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--sage); }
.acc { border-top: 1px solid var(--rule); }
.acc:last-of-type { border-bottom: 1px solid var(--rule); }
.acc summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-size: 1.125rem; color: var(--ink); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; width: 11px; height: 11px; background: linear-gradient(currentColor, currentColor) center / 11px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 11px no-repeat; transition: transform 0.3s var(--ease); flex-shrink: 0; }
.acc[open] summary::after { transform: rotate(45deg); }
.acc-body { padding: 0 0 22px; color: var(--ink-2); font-size: 0.9375rem; }
.acc-body p { margin: 0 0 10px; }
.acc-body .spec-list { margin: 0; }
.acc-body .pd-features { margin: 0; padding-left: 18px; }
.spec-list li { border-color: var(--rule); }
.spec-list strong { font-weight: 500; color: var(--ink); }
.acc-body .spec-head { margin: 18px 0 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.acc-body .spec-head:first-child { margin-top: 0; }
.acc-body .spec-head + .spec-list { margin-bottom: 4px; }
.pdp-help { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; background: var(--bg-2); padding: 36px 40px; }
.pdp-help img { width: 64px; height: auto; }
.pdp-help h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 6px; }
.pdp-help p { margin: 0; color: var(--ink-2); }
.pdp-help ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 6px 22px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--mute); letter-spacing: 0.04em; }
.pdp-help li { display: flex; align-items: center; gap: 8px; }
.pdp-help li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--sage); }
.pdp-help-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 860px) { .pdp-help { grid-template-columns: 1fr; padding: 28px 24px; gap: 18px; } }
@media (max-width: 900px) {
  .product-page .wrap.pdp { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 0; }
  .pdp-gallery { position: static; margin: 0 calc(-1 * var(--gutter)); }
  .pdp-main .pd-nav-arrow { display: none; }
  .pdp-thumbs { display: flex; overflow-x: auto; padding: 0 var(--gutter); scrollbar-width: none; }
  .pdp-thumbs::-webkit-scrollbar { display: none; }
  .pdp-thumbs > * { flex: 0 0 64px; width: 64px; }
  .pdp-alt { grid-template-columns: 1fr 1fr; }
}
.pd-sticky { border-radius: 0; background: var(--bg); border-top: 1px solid var(--rule); box-shadow: none; }
.pd-sticky .btn { min-height: 46px; padding: 0 22px; }
.pd-sticky .btn::after { content: none; }
.pd-sticky-name { font-family: var(--serif); color: var(--ink); }
.faq-list { max-width: 880px; margin: 0 auto; }

/* ---------- Content pages (story, warranty, FAQ, showroom, reviews) ---------- */
.page-hero { position: relative; height: 64vh; min-height: 440px; max-height: 680px; overflow: hidden; color: #fff; background: var(--dark); }
.page-hero img, .page-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(47, 35, 28, 0.62), rgba(47, 35, 28, 0.12) 62%); }
.page-hero-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(44px, 8vh, 88px); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.page-hero-copy .eyebrow { color: rgba(255, 255, 255, 0.85); }
.page-hero-copy h1 { color: #fff; margin: 0 0 14px; max-width: 18ch; }
.page-hero-copy p { margin: 0; max-width: 52ch; font-size: 1.0625rem; color: rgba(255, 255, 255, 0.92); }
.page-hero-copy p a { color: #fff; }
.page-hero.short { height: 46vh; min-height: 340px; max-height: 480px; }
.mission { max-width: 900px; margin: 0 auto; text-align: center; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.45; color: var(--ink); }
.doc { max-width: 820px; margin: 0 auto; }
.doc h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 56px 0 16px; }
.doc h3 { font-size: 1.25rem; margin: 28px 0 10px; }
.doc p, .doc li { color: var(--ink-2); }
.doc li { margin-bottom: 6px; }
.doc .updated { color: var(--mute); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cover-block { background: var(--bg-2); padding: 28px; }
.cover-block h3 { margin: 0 0 6px; }
.cover-block .cb-period { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra-text); margin: 0 0 12px; }
.cover-block p { margin: 0; }
@media (max-width: 640px) { .cover-grid { grid-template-columns: 1fr; } }
.faq-nav { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; margin-bottom: 64px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.faq-nav a { text-decoration: none; color: var(--ink-2); font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.faq-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.faq-group { margin-bottom: 64px; scroll-margin-top: 120px; }
.faq-group h2 { font-size: 1.875rem; margin-bottom: 14px; }
.wide-cta { position: relative; height: min(70vh, 640px); min-height: 420px; overflow: hidden; color: #fff; background: var(--dark); display: block; }
.wide-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wide-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(47, 35, 28, 0.6), rgba(47, 35, 28, 0) 60%); }
.wide-cta-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(44px, 8vh, 80px); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wide-cta-copy .eyebrow { color: rgba(255, 255, 255, 0.85); }
.wide-cta-copy h2 { color: #fff; margin: 0 0 12px; }
.wide-cta-copy p { margin: 0 0 28px; color: rgba(255, 255, 255, 0.92); max-width: 46ch; }

/* ---------- Legacy widgets, re-skinned ---------- */
.band { background: var(--bg-2); }
.section-head h2 { font-family: var(--serif); font-weight: 400; }
.badge { border-radius: 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem; }
.badge-bestseller, .badge-hotsale { background: var(--ink); color: var(--bg); }
.review-card { border-radius: 0; box-shadow: none; border: 0; border-top: 1px solid var(--rule-2); background: transparent; padding-left: 0; padding-right: 0; }
.review-stars { color: var(--ink); }
.reviews-summary, .reviews-trust { color: var(--ink-2); }
.checkout-card, .booking-card, .checkout-summary { border-radius: 0; box-shadow: none; border: 1px solid var(--rule); background: var(--paper); }
.checkout-title, .booking-title { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.checkout-step { font-family: var(--serif); font-weight: 400; }
.choice { border-radius: 0; background: var(--paper); border-color: var(--rule); }
.choice.selected { background: var(--bg-2); border-color: var(--ink); }
.qty-stepper { border-radius: 0; }
.img-lightbox { background: rgba(47, 35, 28, 0.95); }
.pd-price-direct { font-family: var(--sans); }
.checkout-page, .booking-section, .policy-page { background: var(--bg); }
.policy-page h1 { font-family: var(--serif); font-weight: 400; }
.booking-cal-day.available, .booking-time { border-radius: 0; }
.field-label { color: var(--ink); }
input[type="text"], input[type="tel"], input[type="email"], textarea { background: var(--paper); }

/* AI clips: shown over their still photo only once they can play. */
.hero-slide video, .video-feature video { opacity: 0; transition: opacity 1.2s ease; }
.hero-slide video.ready, .video-feature video.ready { opacity: 1; }

/* ---------- Motion: quiet and slow ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  .hero-slide img { animation: hero-drift 14s var(--ease) both; }
  @keyframes hero-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
}


/* ---------- QA fixes (11 Oct) ---------- */
/* styles.css pads every <section> 84px; this design spaces sections itself. */
section { padding: 0; }
.booking-section { padding: calc(var(--sec) * 0.6) 0 var(--sec); }
.checkout-page, .policy-page { padding-top: 48px; padding-bottom: var(--sec); }

/* Headings break in balanced lines, never leaving one word alone. */
h1, h2, h3, .mission, .proof-line p, .hero-copy p, .page-hero-copy p { text-wrap: balance; }
p { text-wrap: pretty; }

/* Text over photos: a deeper shade under the words. */
.hero-slide::after {
  background: linear-gradient(90deg, rgba(47, 35, 28, 0.66) 0%, rgba(47, 35, 28, 0.32) 46%, rgba(47, 35, 28, 0) 74%),
              linear-gradient(0deg, rgba(47, 35, 28, 0.42), rgba(47, 35, 28, 0) 42%);
}
.col-hero::after { background: linear-gradient(90deg, rgba(47, 35, 28, 0.7), rgba(47, 35, 28, 0.28) 58%, rgba(47, 35, 28, 0.05) 85%), linear-gradient(0deg, rgba(47, 35, 28, 0.35), rgba(47, 35, 28, 0) 50%); }
.page-hero::after, .wide-cta::after { background: linear-gradient(0deg, rgba(47, 35, 28, 0.74) 0%, rgba(47, 35, 28, 0.3) 48%, rgba(47, 35, 28, 0.08) 100%); }
.video-feature::after { background: rgba(47, 35, 28, 0.5); }
.hero-copy h1, .hero-copy p, .col-hero-copy h1, .col-hero-copy p, .page-hero-copy h1, .page-hero-copy p, .video-feature-copy h2, .video-feature-copy p, .wide-cta-copy h2, .wide-cta-copy p {
  text-shadow: 0 1px 18px rgba(30, 20, 14, 0.35);
}
@media (max-width: 640px) {
  .hero-slide::after, .col-hero::after { background: linear-gradient(0deg, rgba(47, 35, 28, 0.82) 0%, rgba(47, 35, 28, 0.45) 50%, rgba(47, 35, 28, 0.12) 100%); }
}

/* Breadcrumbs never push the page sideways. */
.breadcrumb { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; }
.breadcrumb > * { flex-shrink: 0; }
.breadcrumb > :last-child { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Keyboard focus, everywhere. */
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.site-footer :focus-visible { outline-color: var(--on-dark); }

/* Search: no second, native clear button beside ours. */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Reviews page widget in the site's type. */
.review-card, .review-card * { font-family: var(--sans); }
.review-name { font-weight: 500; color: var(--ink); }
.review-more-toggle { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; font-size: 0.8125rem; letter-spacing: 0.04em; }
.review-photo-tile, .review-photos img { border-radius: 0 !important; }

/* Policies contents: the same quiet links as the FAQ. */
.policy-toc { display: flex; flex-wrap: wrap; gap: 10px 28px; border: 0; padding: 0 0 22px; margin-bottom: 36px; border-bottom: 1px solid var(--rule); background: none; }
.policy-toc a { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; color: var(--ink-2); font-weight: 400; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.policy-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Quick add: comfortable to tap. */
@media (hover: none) { .card-quick { padding: 11px 12px; min-height: 40px; top: calc(100cqw - 14px - 40px); } }
.card-quick.added { background: var(--ok); }

/* Phones: Quick add is a small "+" in the corner, not a bar over the photo. */
@media (max-width: 640px) {
  .card-quick { font-size: 0; letter-spacing: 0; width: 38px; height: 38px; min-height: 0; padding: 0; top: calc(100cqw - 8px - 38px); right: 8px; display: flex; align-items: center; justify-content: center; }
  .card-quick::before { content: "+"; font-size: 1.375rem; line-height: 1; font-weight: 300; }
  .card-quick.added::before { content: "✓"; font-size: 1rem; }
  .card-tag { top: 8px; left: 8px; padding: 4px 7px; font-size: 0.625rem; }
}


/* ---------- Final cross-check fixes (11 Oct) ---------- */
/* 1. Footer newsletter: transparent field, room to type. */
.site-footer .newsletter-form input[type="email"] { background: transparent; color: var(--bg); }
.ftr-news .newsletter-msg { max-width: none; }
.newsletter-form input { min-width: 220px; }

/* 11. Text links line up along the bottom of a row of cards. */
.service-card { display: flex; flex-direction: column; }
.service-card-body { flex: 1; }
.service-card-body .text-link, .feature-card-copy .text-link { margin-top: auto; }
.feature-card { display: flex; flex-direction: column; }
.feature-card-copy { flex: 1; align-content: start; }

/* 6, 12. Buttons never wrap their label. */
.pdp-buy .btn, .checkout-pay, .checkout-main .btn, .pd-sticky .btn { white-space: nowrap; }
.checkout-pay { font-size: 0.8125rem; letter-spacing: 0.06em; }

/* 9. Our Story / page heroes: shade from the left too, where the words are. */
.page-hero::after { background: linear-gradient(90deg, rgba(47, 35, 28, 0.6) 0, rgba(47, 35, 28, 0.25) 50%, rgba(47, 35, 28, 0) 75%), linear-gradient(0deg, rgba(47, 35, 28, 0.6) 0%, rgba(47, 35, 28, 0.1) 55%); }

/* 10. Phone menu: the collections as two columns of landscape tiles
   (owner, 12 Oct 2026), small enough that the links start on the first screen. */
.drawer-tiles { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.drawer-tiles .mega-tile-img { aspect-ratio: 4 / 3; }
.drawer-tiles .mega-tile-name { font-size: 0.875rem; line-height: 1.3; margin-top: 6px; }

/* 13. Narrow cards drop "3-piece setting". */
@container (max-width: 220px) { .card-sub-kind { display: none; } }

/* 14, 15, 16, 20. Small spacing details. */
.product-page .breadcrumb { margin-bottom: 16px; }
@media (max-width: 640px) { .rv-seal { border-left: 0; padding-left: 0; } .rv-summary { gap: 18px; } }
.ftr-col a { white-space: nowrap; }
.warranty-band { align-items: start; }
.warranty-band .fine { max-width: none; }

/* 18. FAQ topics fit one line on desktop. */
.faq-nav { gap: 10px 24px; }

/* 19. Reviews page: the site's palette, square corners. */
.review-avatar { background: var(--bg-3) !important; color: var(--ink) !important; }
.review-photos img, .review-photo-tile, .review-photo-tile img, .review-video, .review-videos video { border-radius: 0 !important; }

/* Product gallery: every thumbnail shown, about 9 to a row (like Outer). */
.pdp-thumbs { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }

/* Refinement: an editorial tile at the end of the shop grid. */
.card-editorial { position: relative; display: block; text-decoration: none; color: #fff; background: var(--dark); min-height: 100%; overflow: hidden; }
.card-editorial img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.card-editorial:hover img { transform: scale(1.03); }
.card-editorial::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(47, 35, 28, 0.72), rgba(47, 35, 28, 0.1) 60%); }
.card-editorial-copy { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; }
.card-editorial-copy .eyebrow { color: rgba(255, 255, 255, 0.85); margin-bottom: 10px; }
.card-editorial-copy h3 { color: #fff; font-size: 1.625rem; margin-bottom: 8px; }
.card-editorial-copy p { margin: 0 0 16px; color: rgba(255, 255, 255, 0.9); font-size: 0.9375rem; }
.card-editorial-copy .text-link { color: #fff; }
@media (max-width: 1024px) { .card-editorial { min-height: 360px; grid-column: 1 / -1; } }

/* Refinement: quieter tags. */
.card-tag { background: rgba(250, 246, 240, 0.92); border: 1px solid var(--rule); font-size: 0.625rem; letter-spacing: 0.16em; }

/* Refinement: phone crops keep the chairs clear of the buttons. */
@media (max-width: 640px) {
  .hero-slide img, .hero-slide video { object-position: 62% 70%; }
  .col-hero { height: 52svh; min-height: 380px; }
  .page-hero { height: 56svh; min-height: 400px; }
}

/* Refinement: the booking widget in the square system. */
.booking-cal-day, button.booking-cal-day, .booking-time, .booking-times button { border-radius: 0 !important; }
button.booking-cal-day:hover { background: var(--bg-3); }
.booking-cal-day.selected, button.booking-cal-day[aria-pressed="true"], .booking-time.selected { background: var(--ink) !important; color: var(--bg) !important; box-shadow: none; }

/* Refinement: the cart in the same quiet style as the rest. */
.checkout-card, .checkout-summary { border: 0; border-top: 1px solid var(--rule-2); background: transparent; padding-left: 0; padding-right: 0; }
.cart-item-name { font-family: var(--serif); font-size: 1.1875rem; font-weight: 400; color: var(--ink); text-decoration: none; }
.cart-item-sub { color: var(--mute); }
.cart-item img, .cart-item-img { background: var(--bg-2); mix-blend-mode: multiply; object-fit: contain; border-radius: 0; }
.cart-item-price { font-family: var(--sans); font-weight: 400; }
@media (min-width: 901px) { .checkout-summary { position: sticky; top: 120px; } }

/* Refinement: eyebrows breathe a little more. */
.eyebrow { letter-spacing: 0.18em; }

/* Cart thumbnails: a 4:3 cream tile, like the shop cards. */
.cart-item { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; }
.cart-item img { width: 120px; height: 90px; object-fit: contain; padding: 6px; border-radius: 0; background: var(--bg-2); mix-blend-mode: multiply; }
@media (max-width: 480px) { .cart-item { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; } .cart-item img { width: 88px; height: 66px; } }

/* =====================================================================
   Closer to the benchmark (11 Oct, owner): light sans headings set left,
   outline buttons with an arrow, light trust strips (no dark brown
   blocks), long product pages of big video sections with three columns.
   ===================================================================== */
/* Livesummers (11 Nov 2026, owner chose "match the brand drafts"): the big
   headings (h1, h2) in Fraunces, the wordmark's face; every smaller heading,
   card name and menu stays in the clean sans (Jost) - the liveouter feel.
   All-sans headings again: set --display to var(--sans). */
:root { --serif: var(--sans); --display: "Fraunces", Georgia, "Times New Roman", serif; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 400; letter-spacing: -0.012em; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.018em; }
h1 { line-height: 1.08; }
.rv-card-body h3, .proof-line p, .mission { font-style: normal; }
.sec-head { text-align: left; margin-left: 0; margin-right: 0; max-width: 820px; }
.sec-head p { margin-left: 0; }
.btn::after, .text-link::after { content: "\2197"; font-size: 0.9em; }
.btn:hover::after, .text-link:hover::after { transform: translate(2px, -2px); }
.btn-sm { min-height: 42px; padding: 0 20px; font-size: 0.75rem; }

/* Light trust strip (home under the hero, collection, product page) */
.trust-strip, .value-strip { background: var(--bg-3); color: var(--ink); }
.trust-strip ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: center; gap: 12px 56px; flex-wrap: wrap; min-height: 56px; align-items: center; }
.trust-strip li { display: flex; }
.trust-strip a, .value-strip a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(47, 35, 28, 0.35); font-size: 0.875rem; }
.trust-strip a:hover, .value-strip a:hover { text-decoration-color: currentColor; color: var(--ink); }
.trust-strip svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Four longer lines (owner's wording, 29 Oct 2026) don't fit one row: 2 x 2, not 3 + 1. */
@media (min-width: 861px) { .trust-strip ul:has(> li:nth-child(4)) { display: grid; grid-template-columns: auto auto; justify-content: center; padding: 14px var(--gutter); } }
.value-strip li + li { border-left-color: var(--rule-2); }
.value-strip svg { color: var(--ink); }
.value-strip strong { color: var(--ink); }
.value-strip .vs-sub { color: var(--ink-2); }
@media (max-width: 860px) { .value-strip li + li { border-top-color: var(--rule-2); } .trust-strip ul { justify-content: flex-start; padding: 12px var(--gutter); } }

/* Big video sections with three columns (product page, homepage) */
.vsec { padding: var(--sec) 0; }
.vsec:not(.sec-soft) + .vsec:not(.sec-soft) { padding-top: 0; }
.vsec-title { font-size: var(--h2); margin: 0 0 32px; max-width: 24ch; }
.vsec-title-long { max-width: 30ch; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.2; }
.vsec-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-3); }
.vsec-media img, .vsec-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vsec-media video { opacity: 0; transition: opacity 1.2s ease; }
.vsec-media video.ready { opacity: 1; }
.vsec-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
/* Columns' buttons line up at the bottom, however long each text is. */
.vsec-col { display: flex; flex-direction: column; align-items: flex-start; }
.vsec-col > .btn { margin-top: auto; }
.vsec-col h3 { font-size: 1.25rem; margin: 0 0 10px; }
.vsec-col p { margin: 0 0 18px; color: var(--ink-2); font-size: 0.9375rem; }
@media (max-width: 860px) { .vsec-cols { grid-template-columns: 1fr; gap: 28px; } .vsec-media { aspect-ratio: 4 / 3; } }

/* Pause button on every video */
.vid-toggle {
  position: absolute; z-index: 4; right: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(47, 35, 28, 0.35); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease;
}
.vid-toggle:hover { background: rgba(47, 35, 28, 0.6); }
.hero-show .vid-toggle { bottom: 24px; right: var(--gutter); }

/* A customer's words, like a press quote */

/* Product buy box, premium */
/* Badges: all four on one row when the column has room (they need ~500px),
   otherwise an even 2 x 2 across the full width - never 3 + 1 */
.pdp-info { container-type: inline-size; }
.pdp-tags { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0 0 18px; }
.pdp-tags li { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule-2); padding: 6px 10px; font-size: 0.75rem; color: var(--ink); }
@container (max-width: 300px) { .pdp-tags li { gap: 5px; padding: 6px 7px; font-size: 0.6875rem; } }
@container (min-width: 508px) {
  .pdp-tags { grid-template-columns: repeat(4, auto); gap: 5px; }
  .pdp-tags li { gap: 5px; padding: 5px 7px; font-size: 0.6875rem; }
}
.pdp-chips { display: none; }
.pdp-info h1 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-bottom: 12px; }
/* Long product titles fill the line; "balance" (all headings) left a quarter of a phone empty */
.pdp-info h1, .card-body h3 { text-wrap: pretty; }
.pdp-eta { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--ink-2); margin: 0 0 18px; }
.pdp-eta .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--sage); flex-shrink: 0; }
.acc-desc { border-top: 1px solid var(--rule); }
.acc-desc .acc-body p { margin-bottom: 12px; }
.pdp-finish { display: block; margin: 20px 0 22px; }
.pdp-finish p { margin: 0 0 10px; font-size: 0.9375rem; }
.pdp-swatch-sq { display: inline-block; width: 40px; height: 40px; border: 1px solid var(--ink); box-shadow: inset 0 0 0 3px var(--bg); background: #c9a77c; }
.pdp-swatch-sq[data-tone="Light grey"] { background: #8a8a86; }
.pdp-swatch-sq[data-tone="Mocha"] { background: #6b5a4c; }
.pdp-swatch-sq[data-tone="Slate grey"] { background: #5f666c; }
.pdp-swatch-sq[data-tone="Stone"] { background: #c8c3b8; }
.pdp-swatch-sq[data-tone="Sand"] { background: #c4b498; }
.pdp-pairs { border: 1px solid var(--rule); margin: 0 0 22px; }
.pdp-pairs-title { margin: 0; padding: 12px 16px; font-size: 0.875rem; color: var(--ink); border-bottom: 1px solid var(--rule); }
.pdp-pair { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; }
.pdp-pair + .pdp-pair { border-top: 1px solid var(--rule); }
.pdp-pair img { width: 64px; aspect-ratio: 4 / 3; object-fit: contain; background: var(--bg-2); mix-blend-mode: multiply; padding: 3px; }
.pdp-pair div { display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; }
.pdp-pair div a { color: var(--ink); text-underline-offset: 3px; }
.pdp-pair div span { color: var(--ink-2); font-size: 0.8125rem; }
.pdp-pair-add { border: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.pdp-pair-add:hover { background: var(--ink); color: var(--bg); }
.pdp-pair-add.added { background: var(--ok); border-color: var(--ok); color: var(--linen); }
.pdp-ask { margin: 20px 0 0; font-size: 0.875rem; color: var(--ink-2); }
.pdp-ask a { color: var(--ink); text-underline-offset: 3px; }
.pdp-help, .pdp-alt { display: none; }

/* Review cards with photos, in a scrolling row */
.rv-rail { grid-auto-columns: calc((100% - 3 * 24px) / 4); }
@media (max-width: 1024px) { .rv-rail { grid-auto-columns: calc((100% - 24px) / 2.3); } }
@media (max-width: 640px) { .rv-rail { grid-auto-columns: 82%; } }
.rv-card-photo { padding: 0; border: 1px solid var(--rule); background: var(--paper); gap: 0; }
.rv-card-photo .rv-card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); }
.rv-card-photo .rv-card-img img { width: 100%; height: 100%; object-fit: cover; }
.rv-card-photo .rv-card-body { padding: 20px 20px 22px; gap: 10px; }
.rv-card-photo h3 { font-size: 1.0625rem; line-height: 1.35; font-style: normal; }
.rv-card-photo p { font-size: 0.875rem; }
.rv-card-photo .btn { align-self: stretch; margin-top: 8px; }

/* Homepage pieces, premium */
.col-tile { text-decoration: none; color: var(--ink); display: block; }
.col-tile-img { aspect-ratio: 4 / 3; background: var(--bg-2); overflow: hidden; }
.col-tile-img img { width: 100%; height: 100%; object-fit: contain; padding: 10% 8%; mix-blend-mode: multiply; transition: transform 0.9s var(--ease); }
.col-tile-img img.is-photo { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.col-tile:hover img { transform: scale(1.04); }
.col-tile-name { display: block; margin-top: 14px; font-size: 1rem; }
.proof-line { background: var(--bg-2); border: 0; padding: 26px var(--gutter); }
.proof-line p { font-size: 1rem; font-family: var(--sans); color: var(--ink); max-width: none; display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.proof-line p img { height: 32px; margin: 0; }
.feature-card-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 20px; }
.feature-card-copy h3 { font-size: 1.625rem; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.help-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.help-card-img { aspect-ratio: 16 / 10; width: 100%; overflow: hidden; background: var(--bg-3); margin-bottom: 10px; }
.help-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.help-card:hover img { transform: scale(1.03); }
.help-card h3 { font-size: 1.5rem; }
.help-card p { margin: 0 0 6px; color: var(--ink-2); max-width: 52ch; }
@media (max-width: 760px) { .help-grid { grid-template-columns: 1fr; gap: 44px; } }
.room-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; color: #fff; text-decoration: none; background: var(--dark); }
.room-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.room-tile:hover img { transform: scale(1.04); }
.room-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(47, 35, 28, 0.6), rgba(47, 35, 28, 0) 45%); }
.room-tile-copy { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; }
.room-tile-copy strong { color: #fff; font-weight: 500; font-size: 1.0625rem; }
.room-tile-copy span { font-size: 0.875rem; opacity: 0.9; }
.rv-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.rv-head p { margin: 0 0 14px; color: var(--ink-2); max-width: 52ch; }
@media (max-width: 760px) { .rv-head { grid-template-columns: 1fr; gap: 16px; } }
.video-feature-copy h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.hero-copy h1 { font-weight: 400; }


/* Product cards, premium: a lifestyle photo first, the cut-out on hover */
.card-media.has-scene { background: var(--bg-3); }
.card-scene { object-fit: cover; transition: transform 0.9s var(--ease), opacity 0.4s var(--ease); }
.card-media.has-scene .card-img-hover { object-fit: contain; padding: 8% 7%; background: var(--bg-2); mix-blend-mode: normal; opacity: 0; transition: opacity 0.4s var(--ease); }
@media (hover: hover) {
  .card:hover .card-media.has-scene .card-img-hover { opacity: 1; transform: none; }
  .card:hover .card-scene { transform: scale(1.03); }
}
.card .card-quick { background: var(--bg); color: var(--ink); border: 1px solid var(--rule-2); }
.card .card-quick:hover { background: var(--ink); color: var(--bg); }
.card-tag { top: 14px; left: 14px; background: var(--walnut); color: var(--linen); border: 0; letter-spacing: 0.08em; }
.card-body h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
.card-price-row { margin-top: 4px; }
.card-swatch-sq { display: inline-block; width: 26px; height: 26px; border: 1px solid var(--ink); box-shadow: inset 0 0 0 2px var(--bg); background: #c9a77c; margin-top: 10px; }
.card-swatch-sq[data-tone="Light grey"] { background: #8a8a86; }
.card-swatch-sq[data-tone="Mocha"] { background: #6b5a4c; }
.card-swatch-sq[data-tone="Slate grey"] { background: #5f666c; }
.card-swatch-sq[data-tone="Stone"] { background: #c8c3b8; }
.card-swatch-sq[data-tone="Sand"] { background: #c4b498; }
/* Text lines up with the photo's edges (styles.css gave the old boxed card 20px sides) */
.card-body { padding-left: 0; padding-right: 0; }
/* Badges span the card: one row when it has room, else 2 x 2 */
.card-tags { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 10px 0 0; }
@container (min-width: 520px) { .card-tags { grid-template-columns: repeat(4, auto); } }
.card-tags li { display: flex; align-items: center; gap: 5px; border: 1px solid var(--rule-2); padding: 4px 8px; font-size: 0.6875rem; color: var(--ink-2); white-space: nowrap; }
.card-tags svg { flex: none; }
.collection-grid, .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
@media (min-width: 1280px) { .shop-layout .shop-grid { grid-template-columns: repeat(2, 1fr); } .sec .collection-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .collection-grid, .shop-grid { grid-template-columns: 1fr; gap: 40px; } }

/* Collection page: filters down the side */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.filters { position: sticky; top: 24px; }
body.hdr-shown .filters { top: 112px; }
.filters-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 0 0 18px; font: inherit; font-size: 0.9375rem; color: var(--ink); cursor: default; }
.filters-head small { color: var(--mute); }
.facet { border-top: 1px solid var(--rule); padding: 0; }
.facet summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 0.9375rem; color: var(--ink); }
.facet summary::-webkit-details-marker { display: none; }
.facet summary::after { content: ""; width: 9px; height: 9px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.25s var(--ease); }
.facet[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.facet-opts { display: flex; flex-direction: column; gap: 12px; padding: 0 0 18px; }
.facet-opt { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; cursor: pointer; color: var(--ink-2); }
.facet-opt input { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; }
.facet-opt small { color: var(--mute); }
.facet-swatch { width: 16px; height: 16px; border: 1px solid rgba(47, 35, 28, 0.25); }
.filters-clear { background: none; border: 0; border-top: 1px solid var(--rule); width: 100%; text-align: left; padding: 16px 0 0; font: inherit; font-size: 0.8125rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; min-height: 40px; }
.shop-sort { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-2); }
.shop-sort select { border: 0; background: transparent; color: var(--ink); font-size: 0.875rem; cursor: pointer; padding-right: 4px; }
.chips-active { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; }
.chips-active:empty { display: none; }
.chip-active { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--ink); padding: 6px 12px; font: inherit; font-size: 0.8125rem; background: transparent; color: var(--ink); cursor: pointer; }
.shop-grid-sec { padding: 24px 0 var(--sec); }
.trio-card-img.wide { aspect-ratio: 16 / 10; }
.trio-card .btn { margin-top: 16px; }
.col-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; gap: 0; }
  .filters { position: static; border: 1px solid var(--rule); padding: 0 16px; margin-bottom: 24px; }
  .filters-head { cursor: pointer; padding: 14px 0; }
  .filters-body { display: none; padding-bottom: 16px; }
  .filters.open .filters-body { display: block; }
}

/* ---------- Image shapes (11 Oct): every box suits its photos ---------- */
/* Card hover: the cut-out sits on the cream tile, never on a white box. */
.card-media.has-scene .card-img-hover { background: none; mix-blend-mode: multiply; }
/* ...but a photo (not a cut-out) in the Shop card field fills the box. */
.card-media.has-scene .card-img-hover.card-img-photo { object-fit: cover; padding: 0; mix-blend-mode: normal; }
@media (hover: hover) {
  .card-media.has-scene:hover, .card:hover .card-media.has-scene { background: var(--bg-2); }
  .card:hover .card-media.has-scene .card-scene { opacity: 0; }
}
/* Menu tiles are landscape, like the scenes; gallery thumbnails are square like the gallery. */
.mega-tile-img { aspect-ratio: 4 / 3; }
/* Customers' photos are mostly tall phone shots. */
.rv-card-photo .rv-card-img { aspect-ratio: 1 / 1; }
.review-photo-tile img { object-position: 50% 60%; }
/* Our Story chapters use landscape scenes. */
.split-img { aspect-ratio: 4 / 3; }
/* Wide banners keep the furniture (lower middle of every scene) in view. */
.page-hero img, .col-hero img, .wide-cta img { object-position: 50% 66%; }
.page-hero.short img { object-position: 50% 72%; }

/* Small cut-out thumbnails (cart, pairs well with, search): the cream sits
   on the link around the photo, so the photo's white melts into it and the
   set is centred on a cream tile - not a white box in a cream frame. */
.cart-item > a:first-child, .pdp-pair > a:first-child { display: flex; align-items: center; justify-content: center; background: var(--bg-2); aspect-ratio: 1 / 1; overflow: hidden; }
.cart-item > a:first-child { width: 120px; }
.pdp-pair > a:first-child { width: 64px; }
.cart-item img, .pdp-pair img, .search-hit img { background: none !important; mix-blend-mode: multiply; object-fit: contain; width: 100%; height: 100%; padding: 6%; border: 0; }
.search-hit img { width: 72px; height: auto; aspect-ratio: 1 / 1; }
/* A set whose card is a photo ("fills the card" on /manage) fills its tile. */
.search-hit img.is-photo { object-fit: cover; padding: 0; mix-blend-mode: normal; background: var(--bg-3) !important; }
@media (max-width: 480px) { .cart-item > a:first-child { width: 88px; } }

/* Phones: wide scenes in shorter banners, centred, so the whole set
   (it fills the middle ~45% of every scene) stays in view. */
@media (max-width: 640px) {
  .hero-show { height: 128vw; min-height: 0; max-height: none; }
  .hero-slide img, .hero-slide video { object-position: 50% 62%; }
  .hero-copy { bottom: 28px; }
  .hero-copy h1 { font-size: 2.125rem; margin-bottom: 12px; }
  .hero-copy p { font-size: 0.9375rem; margin-bottom: 18px; }
  .hero-ctas { gap: 8px; }
  .hero-ctas .btn { min-height: 46px; flex: 1 1 0; padding: 0 12px; font-size: 0.75rem; }
  .video-feature { height: 125vw; min-height: 0; }
  .video-feature img, .video-feature video { object-position: 50% 60%; }
  .video-feature-copy p { font-size: 0.9375rem; margin-bottom: 20px; }
  .col-hero { height: 110vw; min-height: 0; }
  .col-hero img, .col-hero video { object-position: 50% 62%; }
  .page-hero, .page-hero.short { height: 105vw; min-height: 0; }
  .page-hero img, .page-hero video { object-position: 50% 62%; }
  .wide-cta { height: 110vw; min-height: 0; }
}


/* ---------- Review round (11 Oct): speed, accessibility, phones ---------- */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--bg); padding: 10px 16px; text-decoration: none; font-size: 0.875rem; }
.skip-link:focus { top: 12px; }
/* Image boxes show a warm tone while their photo loads. */
.card-media, .feature-card-img, .room-tile, .help-card-img, .trio-card-img, .vsec-media, .col-tile-img, .cat-tile-img, .split-img { background-color: var(--bg-3); }


/* ---------- Full QA round (11 Oct) ---------- */
/* Footer never forces a 360px phone sideways. */
.ftr-cols { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
.ftr-col a { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 900px) { .ftr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .ftr-cols { grid-template-columns: minmax(0, 1fr); } }
/* Section links keep to one line. */
.sec-head-row .text-link { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) { .sec-head-row { flex-wrap: wrap; align-items: flex-start; } }
/* Pairs well with: a steady button. */
.pdp-pair-add { min-width: 84px; min-height: 42px; }
/* Comfortable tap targets on touch screens. */
@media (hover: none) {
  .card-quick { width: 44px; height: 44px; top: calc(100cqw - 8px - 44px); }
  .booking-cal-arrow, .booking-nav button { min-width: 44px; min-height: 44px; }
  .cart-item-remove { padding: 10px 4px; }
  .checkout-continue, .review-more-toggle { display: inline-flex; align-items: center; min-height: 40px; }
  .shop-sort select { min-height: 40px; }
  .site-footer .ftr-col a { padding: 6px 0; }
  .ftr-col { gap: 4px; }
  .pdp-ask a { display: inline-block; padding: 8px 0; }
}
/* Tablets (touch, no hover): the menu button, as on phones. */
@media (hover: none) and (max-width: 1279px) {
  .hdr { grid-template-columns: 1fr auto 1fr; height: 68px; gap: 8px; }
  .hdr-start { display: contents; }
  .hdr-nav { display: none; }
  .hdr-menu { display: inline-flex; margin-left: -10px; justify-self: start; }
  .hdr-brand { justify-self: center; }
  .hdr-brand img { height: 32px; }
  .hdr-brand-name { display: none; }
}
/* Menus close on Escape. */
.has-mega.shut .mega, .has-drop.shut .drop { opacity: 0 !important; visibility: hidden !important; }
body:has(.has-mega.shut)::after { opacity: 0; visibility: hidden; }


/* The arrow is drawn (an SVG mask), not the ↗ character - iPhones show
   that character as a blue emoji. */
.btn::after, .text-link::after {
  content: ""; display: inline-block; width: 0.72em; height: 0.72em; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9L9 3M4.5 3H9v4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9L9 3M4.5 3H9v4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn.no-arrow::after, .qty-stepper + .btn::after, .btn[type="submit"]::after, .pdp-alt .btn::after, .pd-sticky .btn::after { content: none; }

/* Phones: the tall hero clip, centred, and its pause button out of the way. */
@media (max-width: 700px) {
  .hero-show { height: min(150vw, 84svh); }
  .hero-slide img, .hero-slide video { object-position: 50% 55%; }
  .hero-show .vid-toggle { top: 14px; bottom: auto; right: 14px; }
  .hero-ctas .btn { min-height: 50px; line-height: 1.2; }
}

/* A set in more than one colour: its swatches link to each colour's page. */
.pdp-colours { display: flex; gap: 10px; }
a.pdp-swatch-sq { border-color: var(--rule-2); transition: border-color 0.2s var(--ease); }
a.pdp-swatch-sq:hover, a.pdp-swatch-sq:focus-visible { border-color: var(--ink-2); }
a.pdp-swatch-sq.on { border-color: var(--ink); }

/* Sold out: photos stay in full colour (owner, 11 Oct 2026) - the badge and
   the "Text me when it's back" button say it. */
.card-unavailable .card-media img, .more-card-unavailable .more-card-media img,
.pd-gallery-unavailable .pd-gallery-main img, .pd-gallery-unavailable .pd-gallery-thumbs img,
.pd-gallery-unavailable img { filter: none; opacity: 1; }

/* Sales (offerOf in common.js): the sale price in ink, the normal price
   crossed out in grey, "-8%" / "Save $61 (8%)" in forest green (the
   brand's sale colour, never red), and a forest "Sale" tag on the card photo. */
.price-offer { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; color: var(--sale); white-space: nowrap; }
.price-was { font-size: 0.875rem; color: var(--mute); white-space: nowrap; }
.card-price-row { flex-wrap: wrap; row-gap: 2px; }
.pdp-price .pd-price { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px 14px; text-align: left; }
.pdp-price .price-was { font-size: 0.75em; }
.pd-offer-tag { display: inline-block; font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: var(--sale); border: 1px solid currentColor; padding: 6px 9px 5px; }
.pd-offer-note { font-size: 0.9375rem; color: var(--mute); margin: 6px 0 0; }
.cart-item-sub.cart-item-offer { display: block; color: var(--sale); }
/* Checkout (owner, 26 Oct 2026): each line's normal price crossed out, and "You save $X" by the total. */
.cart-item-price .price-was { display: block; font-size: 0.8125rem; margin-top: 2px; }
.summary-save .summary-line, .summary-save .summary-line span:first-child { color: var(--sale); font-weight: 500; }
.card-tag.card-tag-sale { background: var(--sale); color: var(--linen); }
/* Pre-orders (owner, 25 Oct 2026): a walnut tag (the brand colour - forest is only for sales), and the ready day. */
.pd-preorder-note { font-size: 0.9375rem; color: var(--ink-2); margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pd-preorder-tag { display: inline-block; font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: #fff; background: var(--terra-text); padding: 6px 9px 5px; }
.card-status.card-status-pre { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; }
.pdp-eta .dot.dot-pre { border-color: var(--terra-text); }
.cart-item-sub.cart-item-pre { display: block; color: var(--terra-text); }

/* Top bar with a few shop menus (owner, 27 Oct 2026, after liveouter.com):
   Armchair Sets / Sofas & Dining / Visit us / Explore. */
.mega-note { margin: 0 0 4px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.mega-list a.mega-list-all + a.mega-list-all { margin-top: 0; }
.drawer-title.drawer-link-gap { margin-top: 26px; }
@media (min-width: 1024px) and (max-width: 1279px) { .hdr-brand-name { display: none; } }

/* The menu's product-type items arrive with the catalogue (js/site-chrome.js) */
.hdr-types { display: contents; }

/* Landing pages' words + FAQ, below the grid (src/page-html.js landingCopyHtml) */
.landing-copy { border-top: 1px solid var(--rule); }
.landing-copy-wrap { display: grid; gap: 48px; }
.landing-copy h2 { font-size: 1.5rem; margin: 0 0 18px; }
.landing-copy p { color: var(--ink-2); max-width: 64ch; }
.landing-faq .acc:last-child { border-bottom: 1px solid var(--rule); }
.landing-faq .acc-body p { margin-top: 0; }
@media (min-width: 900px) { .landing-copy-wrap { grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: start; } }