@charset "UTF-8";

/* ==================================================================
   PHURNISHINGS
   Apple Human Interface Guidelines, applied to a furniture store.

   Section map
     1  Color              — semantic tokens, light + dark appearance
     2  Typography         — the macOS text styles
     3  Layout             — 8pt grid, margins, hit targets
     4  Materials          — blur, saturation, vibrancy
     5  App shell
     6  Sidebar
     7  Toolbar + search field
     8  Scroll views
     9  Product grid
    10  Product sheet + To Scale strip
    11  Menus
    12  Cart
    13  Controls
    14  Motion + accessibility
   ================================================================== */


/* ==================================================================
   1  COLOR
   HIG: use semantic colours rather than fixed values, so the
   interface adapts to appearance and contrast settings. Labels are a
   four-step hierarchy; fills sit behind them; one accent tint carries
   interactivity throughout.
   ================================================================== */

:root {
  /* Light only. A shop window is not a place for a dark theme — the
     goods should look the same for every visitor regardless of what
     their phone decided at sunset. */
  color-scheme: light;

  /* Accent. A warm walnut, taken from the timber rather than added on
     top of it. Holds 6.5:1 against white, so it works for body text
     and for white text on a filled button. */
  --tint:                 #7D5A3C;
  --tint-hover:           #654733;
  --tint-quaternary:      rgba(125, 90, 60, 0.10);

  /* Backgrounds — warm ivory through to white */
  --bg-base:              #FBF9F6;
  --bg-elevated:          #FFFFFF;
  --bg-inset:             #F4F1EB;

  /* Labels. Warm near-black rather than pure black, which reads softer
     and stops the page feeling like a spreadsheet. */
  --label-primary:        rgba(38, 30, 24, 0.92);
  --label-secondary:      rgba(38, 30, 24, 0.56);
  --label-tertiary:       rgba(38, 30, 24, 0.38);
  --label-quaternary:     rgba(38, 30, 24, 0.18);

  /* Fills — tinted warm so they sit on ivory without going grey */
  --fill-primary:         rgba(120, 96, 72, 0.055);
  --fill-secondary:       rgba(120, 96, 72, 0.085);
  --fill-tertiary:        rgba(120, 96, 72, 0.125);

  --separator:            rgba(60, 48, 36, 0.10);
  --separator-opaque:     #E8E2D8;

  --material-thin:        rgba(255, 255, 255, 0.70);
  --material-regular:     rgba(251, 249, 246, 0.82);
  --material-thick:       rgba(255, 255, 255, 0.93);
  --material-blur:        saturate(180%) blur(28px);

  --ill-wood:             #C6A57C;
  --ill-textile:          #A7AE9B;
  --ill-line:             rgba(60, 48, 36, 0.34);
  --ill-glow:             rgba(226, 190, 120, 0.50);

  --success:              #2C7A4B;
  --danger:               #B3402F;
  --danger-quaternary:    rgba(179, 64, 47, 0.12);
  --warning:              #97682A;

  /* Softer, warmer shadows. Premium reads as light touch, not depth. */
  --shadow-sheet:         0 24px 70px rgba(60, 45, 30, 0.16), 0 2px 8px rgba(60, 45, 30, 0.06);
  --shadow-menu:          0 12px 34px rgba(60, 45, 30, 0.14), 0 1px 3px rgba(60, 45, 30, 0.07);
  --shadow-card:          0 1px 2px rgba(60, 45, 30, 0.04);
  --shadow-card-hover:    0 16px 40px rgba(60, 45, 30, 0.10);
}

/* Increase Contrast — HIG asks that colour never be the only signal
   and that contrast settings be honoured. */
@media (prefers-contrast: more) {
  :root {
    --label-secondary:  rgba(0, 0, 0, 0.76);
    --label-tertiary:   rgba(0, 0, 0, 0.58);
    --separator:        rgba(0, 0, 0, 0.34);
    --tint:             #0A5344;
  }
}


/* ==================================================================
   2  TYPOGRAPHY
   HIG: the system font, at the system text styles. San Francisco
   tightens its tracking as it grows, so display sizes get negative
   letter-spacing and body sizes get none. New York — Apple's serif —
   carries the wordmark.
   ================================================================== */

:root {
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro",
               "Helvetica Neue", Inter, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro",
               "Helvetica Neue", Inter, system-ui, sans-serif;
  --font-serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* macOS text styles */
  --text-large-title: 700 34px/1.14 var(--font-display);
  --text-title-1:     700 28px/1.20 var(--font-display);
  --text-title-2:     600 22px/1.26 var(--font-display);
  --text-title-3:     600 20px/1.32 var(--font-display);
  --text-headline:    600 17px/1.42 var(--font-text);
  --text-body:        400 17px/1.52 var(--font-text);
  --text-callout:     400 16px/1.48 var(--font-text);
  --text-subhead:     400 15px/1.46 var(--font-text);
  --text-footnote:    400 13px/1.42 var(--font-text);
  --text-caption:     400 12px/1.36 var(--font-text);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font: var(--text-body);
  color: var(--label-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

.t-large-title { font: var(--text-large-title); letter-spacing: -0.021em; }
.t-title-1     { font: var(--text-title-1);     letter-spacing: -0.019em; }
.t-title-2     { font: var(--text-title-2);     letter-spacing: -0.014em; }
.t-title-3     { font: var(--text-title-3);     letter-spacing: -0.010em; }
.t-headline    { font: var(--text-headline);    letter-spacing: -0.006em; }
.t-body        { font: var(--text-body);        letter-spacing: -0.004em; }
.t-callout     { font: var(--text-callout);     letter-spacing: -0.002em; }
.t-subhead     { font: var(--text-subhead);     letter-spacing: 0; }
.t-footnote    { font: var(--text-footnote);    letter-spacing: 0.002em; }
.t-caption     { font: var(--text-caption);     letter-spacing: 0.005em; }

.t-secondary { color: var(--label-secondary); }
.t-tertiary  { color: var(--label-tertiary); }
.t-tint      { color: var(--tint); }

/* Numerals in prices and dimensions line up column to column. */
.tabular { font-variant-numeric: tabular-nums; }


/* ==================================================================
   3  LAYOUT
   HIG: an 8pt grid, generous and consistent margins, and controls
   no smaller than 44pt on touch.
   ================================================================== */

:root {
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --sidebar-w: 264px;
  --toolbar-h: 56px;
  --content-max: 1320px;
  /* 22px at the narrow end. 20 looked cramped against the bezel once
     the type went lower case, which sits lower and wider. */
  --gutter: clamp(22px, 5vw, 48px);

  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  --hit: 44px;
}

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

/* The hidden attribute has to win over any display rule below it. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; min-height: 100%; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Focus. HIG: keyboard focus must always be visible and must follow
   the shape of the control. */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--tint);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: var(--sp-2); left: var(--sp-2);
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-elevated);
  color: var(--tint);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-menu);
  transform: translateY(-160%);
  transition: transform 0.22s ease;
}
.skip-link:focus-visible { transform: translateY(0); }


/* ==================================================================
   4  MATERIALS
   HIG: materials blur and desaturate what is behind them so that
   layered surfaces stay legible without hard edges. Vibrancy pulls
   the colour of the underlying content up into the labels.
   ================================================================== */

.material-thin,
.material-regular,
.material-thick {
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
}
.material-thin    { background: var(--material-thin); }
.material-regular { background: var(--material-regular); }
.material-thick   { background: var(--material-thick); }

/* Fallback for engines without backdrop-filter — go opaque rather
   than transparent, so text never lands on top of moving content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .material-thin, .material-regular, .material-thick {
    background: var(--bg-elevated);
  }
}


/* ==================================================================
   5  APP SHELL
   ================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}
.app[data-sidebar="collapsed"] { grid-template-columns: 0 minmax(0, 1fr); }

.content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
}

.content-scroll {
  flex: 1;
  padding-bottom: var(--sp-10);
}

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}


/* ==================================================================
   6  SIDEBAR
   HIG: a sidebar is for top-level navigation. It sits on a material,
   groups items under quiet headers, keeps exactly one row selected,
   and stays out of the way of the content it filters.
   ================================================================== */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--separator);
  padding: var(--sp-4) var(--sp-3) var(--sp-5);
  transition: opacity 0.22s ease;
}

/* Pinned to the foot of the column, so the sidebar reads as a
   deliberate panel rather than a list that ran out. */
.sidebar-note { margin-top: auto !important; }
.app[data-sidebar="collapsed"] .sidebar {
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-6);
  text-decoration: none;
  color: inherit;
}
.wordmark-name {
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.012em;
  font-feature-settings: "kern" 1;
}
.wordmark-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tint);
  transform: translateY(-2px);
}

.sidebar-section { margin-bottom: var(--sp-6); }

.sidebar-header {
  font: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--label-tertiary);
  padding: 0 var(--sp-3) var(--sp-2);
}

.sidebar-list { list-style: none; margin: 0; padding: 0; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 36px;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: 1px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--label-primary);
  font: var(--text-subhead);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease;
}
.sidebar-item:hover { background: var(--fill-primary); }
.sidebar-item[aria-current="true"] {
  background: var(--tint-quaternary);
  color: var(--tint);
  font-weight: 600;
}
.sidebar-item[aria-current="true"] .sidebar-icon { color: var(--tint); }

.sidebar-icon {
  flex: none;
  width: 19px; height: 19px;
  color: var(--label-secondary);
}
.sidebar-count {
  margin-left: auto;
  font: var(--text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--label-tertiary);
}
.sidebar-item[aria-current="true"] .sidebar-count { color: var(--tint); }

.sidebar-note {
  margin: var(--sp-4) var(--sp-3) 0;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--fill-primary);
  color: var(--label-secondary);
  font: var(--text-caption);
  line-height: 1.5;
}
.sidebar-note strong {
  display: block;
  color: var(--label-primary);
  font-weight: 600;
  margin-bottom: 2px;
}


/* ==================================================================
   7  TOOLBAR + SEARCH FIELD
   HIG: a search field is a rounded field with a leading magnifying
   glass and a trailing clear button that appears only once there is
   something to clear. Results update as you type.
   ================================================================== */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--toolbar-h);
  padding: var(--sp-2) var(--gutter);
  border-bottom: 1px solid var(--separator);
}

.toolbar-spacer { flex: 1; }

.search {
  position: relative;
  flex: 0 1 380px;
  min-width: 180px;
}
.search-glyph {
  position: absolute;
  left: 9px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--label-tertiary);
  pointer-events: none;
}
.search-field {
  width: 100%;
  height: 32px;
  padding: 0 30px 0 30px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--fill-primary);
  font: var(--text-subhead);
  color: var(--label-primary);
  transition: background 0.16s ease, border-color 0.16s ease;
  appearance: none;
}
.search-field::placeholder { color: var(--label-tertiary); }
.search-field:hover { background: var(--fill-secondary); }
.search-field:focus {
  background: var(--bg-elevated);
  border-color: var(--tint);
  box-shadow: 0 0 0 3px var(--tint-quaternary);
}
.search-field::-webkit-search-decoration,
.search-field::-webkit-search-cancel-button { appearance: none; }

.search-clear {
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--label-tertiary);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, color 0.14s ease;
}
.search-clear:hover { color: var(--label-secondary); }
.search:has(.search-field:not(:placeholder-shown)) .search-clear {
  opacity: 1;
  pointer-events: auto;
}

.search-hint {
  position: absolute;
  right: 9px; top: 50%;
  transform: translateY(-50%);
  font: var(--text-caption);
  color: var(--label-quaternary);
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.search:has(.search-field:focus) .search-hint,
.search:has(.search-field:not(:placeholder-shown)) .search-hint { opacity: 0; }


/* ==================================================================
   8  SCROLL VIEWS
   HIG: content scrolls, chrome does not. Give a horizontal rail a
   clear rhythm, snap it so items land where they should, and never
   trap the pointer — the rail is also reachable by keyboard.
   ================================================================== */

.rail {
  position: relative;
  margin-top: var(--sp-4);
}
.rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(232px, 232px);
  gap: var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding: var(--sp-1) var(--gutter) var(--sp-5);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--label-quaternary) transparent;
}
.rail-track > * { scroll-snap-align: start; }
.rail-track::-webkit-scrollbar { height: 8px; }
.rail-track::-webkit-scrollbar-thumb {
  background: var(--label-quaternary);
  border-radius: var(--r-full);
}
.rail-track::-webkit-scrollbar-track { background: transparent; }

.rail-nav {
  position: absolute;
  top: -46px; right: 0;
  display: flex;
  gap: var(--sp-2);
}
.rail-btn {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--fill-primary);
  color: var(--label-secondary);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.rail-btn:hover:not(:disabled) { background: var(--fill-tertiary); color: var(--label-primary); }
.rail-btn:disabled { opacity: 0.3; cursor: default; }

.collection-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--separator);
  border-radius: var(--r-xl);
  background: var(--bg-elevated);
  text-align: left;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.22s ease;
}
.collection-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.collection-card-art {
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--fill-primary);
}
.collection-card-art svg { width: 82%; height: 82%; }


/* ==================================================================
   9  PRODUCT GRID
   ================================================================== */

/* padding-block, never the `padding` shorthand: this element also
   carries .wrap, and a shorthand here silently zeroes the horizontal
   gutter that .wrap provides. On a wide screen the max-width hides it;
   on a phone the text runs into the bezel. */
.hero {
  padding-block: var(--sp-16) var(--sp-12);
  max-width: 720px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--tint-quaternary);
  color: var(--tint);
  font: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.hero h1 {
  margin: 0 0 var(--sp-4);
  font: 700 clamp(34px, 5.2vw, 56px) / 1.06 var(--font-display);
  letter-spacing: -0.028em;
}
.hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
}
.hero p {
  margin: 0;
  font: 400 clamp(17px, 1.7vw, 21px) / 1.5 var(--font-text);
  color: var(--label-secondary);
  letter-spacing: -0.006em;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--separator);
}
.section-head h2 { margin: 0; }
.section-head p { margin: var(--sp-1) 0 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
  gap: var(--sp-6) var(--sp-5);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-12);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--separator);
  border-radius: var(--r-xl);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.26s ease,
              border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
}
.card:has(.card-open:focus-visible) {
  outline: 3px solid var(--tint);
  outline-offset: 2px;
}

.card-art {
  position: relative;
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--separator);
  overflow: hidden;
}
.card-art svg {
  width: 88%;
  height: 88%;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.card:hover .card-art svg { transform: scale(1.035); }

.card-badge {
  position: absolute;
  z-index: 1;
  top: var(--sp-4); left: var(--sp-4);
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--tint);
  color: #fff;
  font: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  flex: 1;
}
.card-name { margin: 0; }
.card-open {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.card-open::after { content: ""; position: absolute; inset: 0; }
.card-tagline { margin: 0; flex: 1; }

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--separator);
}
.card-price {
  font: var(--text-title-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}

.card-add {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--fill-primary);
  color: var(--label-primary);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.card-add:hover { background: var(--tint); color: #fff; transform: scale(1.06); }

.card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--label-tertiary);
}
.card-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* Empty state — HIG: an empty view says what happened and what to do
   next, in the interface's own voice. */
.empty {
  padding: var(--sp-20) var(--sp-6);
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}
.empty-glyph {
  width: 42px; height: 42px;
  margin: 0 auto var(--sp-5);
  color: var(--label-quaternary);
}
.empty h3 { margin: 0 0 var(--sp-2); }
.empty p { margin: 0 0 var(--sp-6); color: var(--label-secondary); }


/* ==================================================================
   10  PRODUCT SHEET + TO SCALE STRIP
   The To Scale strip is Phurnishings's signature: every piece drawn against
   a 175 cm figure, because the commonest reason furniture goes back
   is that it did not fit.
   ================================================================== */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  z-index: 100;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sheet);
  display: flex;
  flex-direction: column;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Product sheet — centred card on desktop, bottom sheet on phones */
.sheet-product {
  inset: 50% auto auto 50%;
  width: min(940px, calc(100vw - 48px));
  max-height: min(88vh, 860px);
  border-radius: var(--r-2xl);
  transform: translate(-50%, -46%) scale(0.97);
  opacity: 0;
  pointer-events: none;
}
.sheet-product[data-open="true"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--separator);
  position: sticky; top: 0; z-index: 2;
}
.sheet-close {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--fill-secondary);
  color: var(--label-secondary);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.sheet-close:hover { background: var(--fill-tertiary); color: var(--label-primary); }

.sheet-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sheet-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-10) var(--sp-10);
}

.sheet-art {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-xl);
  background: var(--fill-primary);
}
.sheet-art svg { width: 78%; height: 78%; }

.sheet-title { margin: 0 0 var(--sp-2); }
.sheet-tagline { margin: 0 0 var(--sp-5); color: var(--label-secondary); }
.sheet-price { font: var(--text-title-3); font-variant-numeric: tabular-nums; }

.spec-list {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  border-top: 1px solid var(--separator);
}
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--separator);
  font: var(--text-subhead);
}
.spec-row dt { color: var(--label-secondary); }
.spec-row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.swatches { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }
.swatch {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--separator);
  border-radius: var(--r-full);
  background: transparent;
  font: var(--text-footnote);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.swatch:hover { background: var(--fill-primary); }
.swatch[aria-pressed="true"] {
  border-color: var(--tint);
  background: var(--tint-quaternary);
  color: var(--tint);
  font-weight: 600;
}

/* — To Scale strip — */
.scale {
  grid-column: 1 / -1;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--fill-primary);
}
.scale-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.scale-stage {
  --stage-h: 220px;
  height: var(--stage-h);
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-8);
  padding: 0 var(--sp-4);
  border-bottom: 2px solid var(--label-quaternary);
}
/* Height is set inline from the figure's real 175 cm; the width
   follows from the viewBox so the proportions stay honest. */
.scale-figure { flex: none; }
.scale-figure svg { height: 100%; width: auto; display: block; color: var(--label-quaternary); }

.scale-object {
  position: relative;
  flex: none;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--tint);
  opacity: 0.9;
  transform-origin: bottom;
  animation: scale-rise 0.6s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes scale-rise { from { transform: scaleY(0.02); } to { transform: scaleY(1); } }

.scale-label {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  white-space: nowrap;
  font: var(--text-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tint);
}
.scale-caption {
  margin: var(--sp-3) 0 0;
  font: var(--text-footnote);
  color: var(--label-tertiary);
}

.sheet-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-10);
  border-top: 1px solid var(--separator);
  position: sticky; bottom: 0;
}


/* ==================================================================
   11  MENUS
   HIG: menu items are verbs or values, grouped by purpose and split
   by separators. A menu that sets a value shows a checkmark on the
   current one. Escape dismisses; arrow keys move.
   ================================================================== */

.menu-anchor { position: relative; }

.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 232px;
  padding: var(--sp-1);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-menu);
  transform-origin: top right;
  transform: scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.14s ease;
}
.menu[data-open="true"] { transform: scale(1); opacity: 1; pointer-events: auto; }

.menu-label {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--label-tertiary);
}
.menu-sep { height: 1px; margin: var(--sp-1) var(--sp-2); background: var(--separator); }

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--label-primary);
  font: var(--text-subhead);
  text-align: left;
  cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--tint); color: #fff; outline: none; }
.menu-check {
  flex: none;
  width: 14px; height: 14px;
  opacity: 0;
}
.menu-item[aria-checked="true"] .menu-check { opacity: 1; }
.menu-shortcut { margin-left: auto; font: var(--text-footnote); opacity: 0.55; }


/* ==================================================================
   12  CART
   A trailing sheet. Reversible, quiet, and never a surprise: the
   total is visible before anything is committed.
   ================================================================== */

.sheet-cart {
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  border-left: 1px solid var(--separator);
  transform: translateX(100%);
}
.sheet-cart[data-open="true"] { transform: translateX(0); }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--separator);
}
.sheet-cart .sheet-scroll { flex: 1; }
.cart-list { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-6); }
.cart-row {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--separator);
}
.cart-thumb {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--fill-primary);
}
.cart-thumb svg { width: 84%; height: 84%; }
.cart-row-name { margin: 0 0 2px; }
.cart-row-price { font-variant-numeric: tabular-nums; }

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stepper button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: none;
  background: transparent;
  color: var(--label-secondary);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.stepper button:hover { background: var(--fill-secondary); color: var(--label-primary); }
.stepper output {
  min-width: 30px;
  text-align: center;
  font: var(--text-footnote);
  font-variant-numeric: tabular-nums;
  border-inline: 1px solid var(--separator);
  line-height: 28px;
}

.cart-foot { margin-top: auto; padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--separator); }
.cart-line {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-1) 0;
  font: var(--text-subhead);
  color: var(--label-secondary);
}
.cart-line-total {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--separator);
  font: var(--text-headline);
  color: var(--label-primary);
}
.cart-line span:last-child { font-variant-numeric: tabular-nums; }


/* ==================================================================
   13  CONTROLS
   ================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 34px;
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--fill-primary);
  color: var(--label-primary);
  font: var(--text-subhead);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease, transform 0.1s ease;
}
.btn:hover { background: var(--fill-secondary); }
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--tint); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--tint-hover); }

.btn-plain { background: transparent; color: var(--tint); }
.btn-plain:hover { background: var(--tint-quaternary); }

.btn-large { min-height: 46px; padding: 0 var(--sp-6); font: var(--text-headline); }
.btn-block { width: 100%; }

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--label-secondary);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.icon-btn:hover { background: var(--fill-primary); color: var(--label-primary); }

.badge-count {
  position: absolute;
  top: -2px; right: -3px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--tint);
  color: #fff;
  font: 600 10px/1 var(--font-text);
  font-variant-numeric: tabular-nums;
}
.badge-count[hidden] { display: none; }

/* Toast — HIG: confirm quietly, near where the action happened, and
   get out of the way on its own. */
.toast {
  position: fixed;
  left: 50%; bottom: var(--sp-8);
  z-index: 120;
  transform: translate(-50%, 22px);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--separator);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-menu);
  font: var(--text-subhead);
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
.toast[data-open="true"] { opacity: 1; transform: translate(-50%, 0); }
.toast-check { color: var(--success); width: 17px; height: 17px; }


/* ==================================================================
   14  RESPONSIVE, MOTION, ACCESSIBILITY
   ================================================================== */

@media (max-width: 1000px) {
  .sheet-grid { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6); }
  .sheet-foot { padding-inline: var(--sp-6); }
}

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app[data-sidebar="collapsed"] { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 95;
    width: 280px;
    height: 100%;
    transform: translateX(-100%);
    opacity: 1;
    transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .app[data-sidebar="expanded"] .sidebar { transform: translateX(0); }

  /* Dim the catalogue while the sidebar is over it. */
  .app[data-sidebar="expanded"] .content::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 94;
    background: rgba(0, 0, 0, 0.34);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  .app[data-sidebar="collapsed"] .sidebar { opacity: 1; pointer-events: none; }

  .toolbar { padding-inline: var(--sp-4); }
  .search { flex: 1 1 auto; }

  /* Full-height sheets read better than centred cards on a phone. */
  .sheet-product {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    transform: translateY(100%) scale(1);
    opacity: 1;
  }
  .sheet-product[data-open="true"] { transform: translateY(0) scale(1); }

  .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); }
  .hero { padding-block: var(--sp-10) var(--sp-6); }
  .scale-stage { --stage-h: 168px; gap: var(--sp-5); }

  /* Touch targets reach the 44pt minimum. */
  .icon-btn, .card-add { width: var(--hit); height: var(--hit); }
  .sidebar-item { min-height: var(--hit); }
}

@media (max-width: 460px) {
  .grid { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 52px 1fr; row-gap: var(--sp-3); }
  .cart-thumb { width: 52px; height: 52px; }
}

/* HIG: honour Reduce Motion. Cross-fades stand in for movement, and
   nothing that conveys state is removed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
  .collection-card:hover { transform: none; }
  .scale-object { animation: none; }
}

/* Illustration classes referenced by the product SVGs. */
.s-fill-1  { fill: var(--ill-wood); }
.s-fill-2  { fill: var(--ill-textile); }
.s-line    { stroke: var(--ill-line); stroke-width: 3.4; stroke-linecap: round; fill: none; }
.s-line-soft { stroke: var(--ill-line); stroke-width: 2; stroke-linecap: round; fill: none; opacity: 0.5; }
.s-glow-fill { fill: var(--ill-glow); }

@media print {
  .sidebar, .toolbar, .sheet, .scrim, .toast { display: none !important; }
}

/* ==================================================================
   15  ADDITIONS FOR THE LIVE CATALOGUE
   The storefront now loads over the network and takes an email at
   checkout, which needs a loading state and real form controls.
   ================================================================== */

/* Product photographs, when a listing has one instead of an
   illustration. */
.product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.card-art .product-photo { border-radius: 0; }
.sheet-art .product-photo,
.cart-thumb .product-photo,
.collection-card-art .product-photo { border-radius: var(--r-md); }

/* Skeletons. HIG: show the shape of what is coming rather than a
   spinner, so the layout does not jump when content lands. */
.card-skeleton { pointer-events: none; }
.card-skeleton .card-art { background: var(--fill-primary); }
.card-skeleton .card-body { gap: var(--sp-3); }
.skeleton-line {
  display: block;
  height: 11px;
  border-radius: var(--r-full);
  background: var(--fill-secondary);
}
.card-skeleton,
.skeleton-line { animation: skeleton-pulse 1.6s ease-in-out infinite; }
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .card-skeleton, .skeleton-line { animation: none; }
}

/* Text fields, shared by checkout and the staff console. */
.field-label {
  display: block;
  margin: var(--sp-4) 0 var(--sp-2);
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--label-tertiary);
}
.text-field {
  width: 100%;
  min-height: 34px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--separator-opaque);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  color: var(--label-primary);
  font: var(--text-subhead);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  appearance: none;
}
.text-field::placeholder { color: var(--label-tertiary); }
.text-field:focus {
  border-color: var(--tint);
  box-shadow: 0 0 0 3px var(--tint-quaternary);
  outline: none;
}
.text-field[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-quaternary);
}
textarea.text-field { min-height: 92px; resize: vertical; line-height: 1.5; }
select.text-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 15px;
  padding-right: 28px;
}

.field-error {
  margin: var(--sp-2) 0 0;
  color: var(--danger);
  font-weight: 500;
}
.field-error[hidden] { display: none; }


/* ==================================================================
   16  PHONES
   Controls were being clipped at the screen edge and under the home
   indicator. Everything below is about giving them room.
   ================================================================== */

/* Respect the notch and the home indicator on iPhone. */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

@media (max-width: 860px) {
  /* The toolbar had four controls fighting over 375px. Search takes the
     row it needs, the rest sit under it. */
  .toolbar {
    flex-wrap: wrap;
    row-gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4)
             calc(var(--sp-2) + env(safe-area-inset-top, 0px));
  }
  .search { order: 3; flex: 1 1 100%; min-width: 0; }
  .toolbar-spacer { display: none; }

  /* Buttons stop shrinking below a tappable size. */
  .btn { min-height: var(--hit); padding-inline: var(--sp-4); }
  .btn-large { min-height: 50px; }

  /* Sheet footers sat under the home indicator. */
  .sheet-foot {
    flex-wrap: wrap;
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }
  .sheet-foot .btn { flex: 1 1 100%; }
  .sheet-foot > span { flex: 1 1 100%; text-align: center; }

  .cart-foot { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); }

  /* Long product names no longer push the price off the card. */
  .card-foot { flex-wrap: wrap; row-gap: var(--sp-3); }
  .card-price { font-size: 17px; }

  /* Spec rows stack rather than squeezing the value to one character. */
  .spec-row { flex-direction: column; gap: 2px; }
  .spec-row dd { text-align: left; }

  /* Toast was running past both edges on a narrow screen. */
  .toast {
    left: var(--sp-4);
    right: var(--sp-4);
    transform: translateY(22px);
    bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
    justify-content: center;
  }
  .toast[data-open="true"] { transform: translateY(0); }

  /* Menus were opening off the right edge. */
  .menu { right: auto; left: 0; min-width: min(280px, calc(100vw - 32px)); }
}

@media (max-width: 460px) {
  .hero h1 { font-size: clamp(30px, 8.5vw, 40px); }
  .swatches .swatch { flex: 1 1 auto; text-align: center; }
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* Nothing should push the page sideways — but NOT with overflow-x on
   html or body. That makes overflow-y compute to auto, which turns the
   page into a scroll container and stops `position: sticky` working.
   It is why the sidebar vanished as soon as you scrolled.

   `overflow-x: clip` does not create a scroll container, so sticky
   keeps working. */
html, body { max-width: 100%; }
.app { overflow-x: clip; }

/* ==================================================================
   17  A SHOP THAT TAKES PHONE CALLS
   ================================================================== */

.call-btn { text-decoration: none; }

.hero-call {
  margin-top: var(--sp-8);
  text-decoration: none;
  letter-spacing: -0.004em;
}

/* A quiet cue that the card opens, now that there's no add button. */
/* Replaces the add button. Quiet until you approach the card. */
.card-cue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--label-tertiary);
  font-weight: 500;
  transition: color 0.16s ease, gap 0.16s ease;
}
.card-cue::after {
  content: "›";
  font-size: 15px;
  line-height: 1;
  transform: translateY(-1px);
}
.card:hover .card-cue { color: var(--tint); gap: 7px; }

/* ------------------------------------------------------------------
   Footer

   Full-bleed band with the content in a wrap inside it. The wrap has
   `margin: 0 auto`, and an auto margin on a flex item makes it shrink
   to fit rather than fill — which is why this has to be a plain block
   inside the footer rather than the footer itself.
------------------------------------------------------------------- */

.site-foot {
  flex: none;
  border-top: 1px solid var(--separator);
  background: var(--bg-inset);
}
.site-foot-inner {
  padding-top: var(--sp-10);
  padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
}

.site-foot-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: var(--sp-10) var(--sp-8);
  align-items: start;
}

.site-foot-brand { max-width: 34ch; }
.site-foot-brand .wordmark-name {
  margin: 0 0 var(--sp-3);
  font-size: 22px;
}
.site-foot-brand p + p { margin: 0; }
.site-foot-brand .t-footnote { margin: 0; line-height: 1.55; }

.site-foot-place {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4) !important;
}
.site-foot-place svg { opacity: 0.6; }

.site-foot-head {
  margin: 0 0 var(--sp-3);
  font: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label-tertiary);
}

.site-foot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.site-foot-list a {
  font: var(--text-subhead);
  color: var(--tint);
  text-decoration: none;
  cursor: pointer;
}
.site-foot-list a:hover { text-decoration: underline; }

.site-foot-legal {
  margin: var(--sp-10) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--separator);
}

@media (max-width: 1000px) {
  .site-foot-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-6); }
  .site-foot-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .site-foot-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .site-foot-inner { padding-top: var(--sp-8); }
}

/* The eyebrow now carries a pin glyph alongside the text. */
.hero-eyebrow svg { opacity: 0.8; }

/* Premium is mostly restraint: a touch more air and a lighter card edge. */
.card { border-color: rgba(60, 48, 36, 0.07); }
.hero { padding-bottom: var(--sp-8); }

@media (max-width: 860px) {
  /* On a phone the label would push the toolbar to two rows on its own. */
  .call-btn-text { display: none; }
  .call-btn { padding-inline: var(--sp-4); }
  .hero-call { width: 100%; }
}

/* Call and text sitting together. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.hero-actions .btn { text-decoration: none; }
.hero-text {
  border-color: var(--separator-opaque);
  background: var(--bg-elevated);
}
.hero-text:hover { background: var(--fill-primary); }

.toolbar .call-btn + .call-btn { margin-left: var(--sp-1); }

@media (max-width: 860px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  /* Two labelled buttons won't fit a phone toolbar; the glyphs carry it. */
  .toolbar .call-btn .call-btn-text { display: none; }
}

/* ==================================================================
   18  LOWERCASE
   The shop is set entirely in lower case. It reads quieter and less
   declarative than title case, which suits browsing over selling at.
   The underlying text is unchanged, so screen readers and search
   engines still see normal capitalisation.
   ================================================================== */

.shop { text-transform: lowercase; }

/* Things that would be wrong in lower case. */
.shop .wordmark-name,
.shop [lang],
.shop abbr { text-transform: none; }

/* Slightly looser tracking: lower case has fewer vertical strokes to
   separate the words, so it needs a touch more air. */
.shop { letter-spacing: 0.004em; }
.shop .hero h1 { letter-spacing: -0.022em; }

/* ==================================================================
   19  CONTACT PANEL AND DELIVERY CHECKER
   ================================================================== */

.sheet-contact {
  inset: 50% auto auto 50%;
  width: min(520px, calc(100vw - 40px));
  max-height: min(88vh, 780px);
  border-radius: var(--r-2xl);
  transform: translate(-50%, -46%) scale(0.97);
  opacity: 0;
  pointer-events: none;
}
.sheet-contact[data-open="true"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.sheet-contact .sheet-head { justify-content: flex-start; }

.contact-body { padding: var(--sp-6); }

.contact-direct {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--separator-opaque);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  color: var(--label-primary);
  text-decoration: none;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.contact-direct:hover { background: var(--fill-primary); border-color: var(--tint); }
.contact-direct svg { color: var(--tint); flex: none; }
.contact-direct > span { display: flex; flex-direction: column; }

.contact-or {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-2);
  color: var(--label-tertiary);
  font: var(--text-caption);
}
.contact-or::before, .contact-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--separator);
}

.contact-sent { text-align: center; padding: var(--sp-10) var(--sp-4); }
.contact-sent .empty-glyph { color: var(--success); }
.contact-sent h3 { margin: 0 0 var(--sp-2); }
.contact-sent p { margin: 0 0 var(--sp-6); }

/* Bait field for bots. Off-screen rather than display:none, because
   some bots skip anything hidden. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Delivery checker */
.ship-box {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--fill-primary);
}
.ship-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  font: var(--text-headline);
}
.ship-head svg { color: var(--tint); }
.ship-row { display: flex; gap: var(--sp-2); }
.ship-row .text-field { flex: 1; min-width: 0; }
.ship-row .btn { flex: none; }

.ship-result {
  margin: var(--sp-3) 0 0;
  font: var(--text-footnote);
  line-height: 1.5;
}
.ship-result[hidden] { display: none; }
.ship-free  { color: var(--success); font-weight: 600; }
.ship-paid  { color: var(--label-primary); font-weight: 500; }
.ship-error { color: var(--danger); }

@media (max-width: 860px) {
  .sheet-contact {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    transform: translateY(100%) scale(1);
    opacity: 1;
  }
  .sheet-contact[data-open="true"] { transform: translateY(0) scale(1); }
  .contact-body { padding: var(--sp-5); }
  .ship-row { flex-direction: column; }
  .ship-row .btn { width: 100%; }
}

/* ==================================================================
   20  WHAT WE DO
   Three lines under the hero. The service is the offer; the fact that
   a piece had an earlier life is just part of how it got here.
   ================================================================== */

.promise-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-6);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-4);
}
.promise {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.promise svg { flex: none; color: var(--tint); margin-top: 2px; }
.promise span { display: flex; flex-direction: column; gap: 2px; }
.promise strong {
  font: var(--text-headline);
  font-weight: 600;
  letter-spacing: -0.004em;
}
.promise span { font: var(--text-footnote); color: var(--label-secondary); line-height: 1.5; }

/* ==================================================================
   21  PHONE REFINEMENT
   The layout worked on a phone but did not feel considered. Type was
   set at desktop proportions, the hero ran the full width of the
   screen, and the sections all had the same rhythm regardless of how
   little room there was.
   ================================================================== */

@media (max-width: 700px) {
  /* Display type wants a tighter line and more negative tracking as it
     scales down, or it reads as a shrunken headline rather than one
     designed for the size. */
  .hero h1 {
    font-size: clamp(31px, 8.6vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.025em;
  }
  .hero p {
    font-size: 16.5px;
    line-height: 1.55;
    max-width: 32ch;
  }

  .hero-eyebrow {
    margin-bottom: var(--sp-3);
    font-size: 11.5px;
  }

  /* Two stacked full-width buttons was a wall of colour. The primary
     one leads; the second is quieter. */
  .hero-actions { gap: var(--sp-2); margin-top: var(--sp-6); }
  .hero-actions .btn-large { min-height: 52px; font-size: 17px; }

  /* The three promises were competing with the hero for attention.
     Smaller, closer together, clearly secondary. */
  .promise-strip {
    gap: var(--sp-4);
    padding-block: var(--sp-6) var(--sp-2);
    margin-top: var(--sp-2);
    border-top: 1px solid var(--separator);
  }
  .promise strong { font-size: 15px; }
  .promise span { font-size: 13px; }
  .promise svg { width: 17px; height: 17px; }

  /* Section headings were as large as the hero's supporting text. */
  .section-head { padding-top: var(--sp-8); }
  .section-head h2 { font-size: 20px; letter-spacing: -0.012em; }

  /* One card per row reads better than two cramped ones. */
  .grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding-bottom: var(--sp-8);
  }
  .card-art { aspect-ratio: 16 / 10; }
  .card-body { padding: var(--sp-4); }
  .card-price { font-size: 19px; }

  /* The rooms rail bled to the screen edge, which looked like an
     accident rather than a scroll affordance. */
  .rail-track {
    grid-auto-columns: minmax(190px, 190px);
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
  }
  .collection-card { padding: var(--sp-4); }
  .collection-card-art { height: 74px; }

  .site-foot-inner { padding-block: var(--sp-8) var(--sp-8); }
  .site-foot-brand .wordmark-name { font-size: 20px; }
}

/* Very narrow phones: give the words a little more of the screen. */
@media (max-width: 380px) {
  :root { --gutter: 18px; }
  .hero h1 { font-size: 29px; }
}

/* Product gallery — only appears when a listing has more than one photo. */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64px;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-top: var(--sp-3);
  scrollbar-width: thin;
}
.gallery-thumb {
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  background: var(--fill-primary);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.14s ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { border-color: var(--separator-opaque); }
.gallery-thumb.is-current { border-color: var(--tint); }