/* Furniture Library — tokens and layout.
 *
 * The tokens are BRANDING.md's, unchanged. The layout is not the reference website's: that is a
 * fixed 980px desktop-only page and none of its measurements belong in a responsive grid.
 *
 * Loads after brand/components.css, which carries the button, field, card, tab and motion rules
 * already in production in the studio's other app. Nothing here restates them.
 */

:root {
  --cream: #F9F6F0;
  --sand:  #F2EDE4;
  --tan:   #D5CFC6;
  --stone: #D4C9B4;
  --gold:  #9B9484;
  --brass: #AF976A;
  --ink:   #1A1916;
  --body:  #52504D;
  --logo:  #6B6458;
  --deep:  #6B655A;
  --char:  #4A4744;
  --alert: #B4574A;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 78px;
  --rail-w: 264px;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: Montserrat, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* Square corners everywhere in this brand. */
input, select, textarea, button { border-radius: 0; }

/* ---------------------------------------------------------------- type roles */
.eyebrow    { font-size: 12px; line-height: 1; letter-spacing: .10em; text-transform: uppercase; color: var(--brass); }
.label-cap  { font-size: 11px; line-height: 1; letter-spacing: .10em; text-transform: uppercase; color: var(--gold); }
.h-page     { font-size: 34px; line-height: 1.1; }
.h-section  { font-size: 22px; }
.serif      { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; }
.num        { font-variant-numeric: tabular-nums; }

@media (min-width: 768px) { .h-page { font-size: 40px; } }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  background: var(--cream);
  border-bottom: 1px solid var(--tan);
  display: flex; align-items: center;
}
.site-header .inner {
  width: 100%; max-width: 1720px; margin: 0 auto;
  padding: 0 20px;
  display: flex; align-items: center; gap: 28px;
}
@media (min-width: 1024px) { .site-header .inner { padding: 0 32px; } }

.wordmark { display: flex; align-items: center; gap: 7px; flex: none; }
.wordmark img { height: 38px; width: 38px; object-fit: contain; }
.wordmark span {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: 15px; letter-spacing: .10em; text-transform: uppercase;
  line-height: 1.3; color: var(--body);
  max-width: 150px;
}
.site-nav { display: none; gap: 30px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.site-nav a { color: var(--gold); transition: color .3s var(--ease); }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); }
@media (min-width: 768px) { .site-nav { display: flex; } }

/* ---------------------------------------------------------------- page shell */
.shell {
  width: 100%; max-width: 1720px; margin: 0 auto;
  padding: 0 20px 120px;
}
@media (min-width: 1024px) {
  .shell {
    padding: 0 32px 64px;
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}

/* ---------------------------------------------------------------- filter rail */
.rail {
  /* Off-canvas panel below 1024px, persistent column above it. */
  position: fixed; inset: 0; z-index: 60;
  background: var(--cream);
  padding: 20px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .38s var(--ease);
  visibility: hidden;
}
.rail.is-open { transform: none; visibility: visible; }
.rail-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(26, 25, 22, .34);
  opacity: 0; visibility: hidden;
  transition: opacity .38s var(--ease), visibility .38s var(--ease);
}
.rail-scrim.is-open { opacity: 1; visibility: visible; }
.rail-close { display: block; margin-left: auto; }

@media (min-width: 1024px) {
  .rail {
    position: sticky; top: var(--header-h); inset: auto;
    transform: none; visibility: visible; padding: 28px 0 0;
    max-height: calc(100vh - var(--header-h));
    display: flex; flex-direction: column;
  }
  .rail-scrim, .rail-close { display: none; }
  .rail-body { overflow-y: auto; flex: 1; padding-bottom: 20px; }
}

.filter-group { border-top: 1px solid var(--tan); padding: 16px 0; }
.filter-group:first-of-type { border-top: 0; }
.filter-group > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: .10em; text-transform: uppercase; color: var(--ink);
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s var(--ease);
}
.filter-group[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.filter-group .options { margin-top: 14px; display: grid; gap: 9px; }

.type-group-name {
  font-size: 10px; letter-spacing: .10em; text-transform: uppercase; color: var(--brass);
  margin: 14px 0 8px;
}
.type-group-name:first-child { margin-top: 0; }

.check { display: flex; align-items: baseline; gap: 9px; cursor: pointer; font-size: 12px; }
.check input {
  appearance: none; -webkit-appearance: none;
  width: 12px; height: 12px; flex: none; margin: 0; position: relative; top: 1px;
  border: 1px solid var(--gold); background: transparent; cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.check:hover { color: var(--ink); }
.check .count { margin-left: auto; color: var(--gold); font-size: 11px; }

.range-row { display: flex; align-items: center; gap: 8px; }
.range-row .field { padding: 8px 10px; background: var(--sand); }
.range-row span { color: var(--gold); font-size: 11px; }

.rail-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }

/* ---------------------------------------------------------------- toolbar */
.toolbar {
  position: sticky; top: var(--header-h); z-index: 30;
  background: var(--cream);
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--tan);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.search {
  flex: 1 1 220px; min-width: 0;
  background: var(--sand);
}
.toolbar .count { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); flex: none; }
.sort-select {
  background: transparent; border: 0; border-bottom: 1px solid var(--tan);
  color: var(--body); font-size: 11px; letter-spacing: .10em; text-transform: uppercase;
  padding: 6px 18px 6px 0; cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sort-select:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.filter-toggle { display: inline-flex; width: auto; padding: 0 18px; height: 36px; }
@media (min-width: 1024px) { .filter-toggle { display: none; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 0; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--tan); background: transparent;
  padding: 4px 9px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--body); cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip::after { content: '\00d7'; font-size: 13px; line-height: 1; color: var(--gold); }

/* ---------------------------------------------------------------- grid */
.grid {
  display: grid; gap: 26px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 26px;
}
@media (min-width: 560px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 22px; } }
@media (min-width: 1500px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.card-wrap { position: relative; }
.card .thumb {
  display: block;
  aspect-ratio: 4 / 5;                 /* a consistent ratio is what makes the grid look composed */
  background: var(--sand);
}
.card .thumb img { width: 100%; height: 100%; }
.card-body { display: block; padding-top: 11px; }
.card-name {
  display: block; font-size: 12px; line-height: 1.45; color: var(--body);
  transition: color .3s var(--ease);
}
.card-meta {
  display: block; margin-top: 3px;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-prices {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; font-size: 11px;
}
.price-trade  { color: var(--gold); }
.price-client { color: var(--ink); }
.price-margin { margin-left: auto; color: var(--gold); font-size: 10px; }
.price-margin.is-negative { color: var(--alert); }
.price-missing { color: var(--alert); }

.flag {
  position: absolute; top: 0; left: 0;
  background: var(--cream); color: var(--alert);
  padding: 5px 8px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  pointer-events: none;
}
.flag.is-status { color: var(--gold); }

.detail-link {
  position: absolute; top: 0; right: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--stone);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.detail-link:hover, .detail-link:focus-visible { background: var(--cream); color: var(--ink); }
.detail-link:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }

.empty { padding: 80px 0; text-align: center; color: var(--gold); }
.empty p { margin: 0 0 20px; }

/* ---------------------------------------------------------------- selection bar
   One element, two homes: a bar across the bottom of a phone, and the foot of the filter rail on
   a desktop. It sits outside .rail in the markup because the rail is an off-canvas transformed
   panel below 1024px, and a transformed ancestor would trap a fixed child inside it. */
.selbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--sand); border-top: 1px solid var(--tan);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 12px;
}
.selbar.is-on { display: flex; }
.selbar .totals { flex: 1; min-width: 0; }
.selbar .totals strong { display: block; color: var(--ink); font-weight: 400; font-size: 13px; }
.selbar .totals small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.selbar .btn { width: auto; padding: 0 16px; height: 38px; flex: none; }
.selbar .selbar-actions { display: flex; gap: 8px; flex: none; }
.selbar-warn { font-size: 10px; color: var(--alert); margin: 0; }
.desk-only { display: none; }

@media (min-width: 1024px) {
  /* Aligned to the rail column: .shell is centred at max-width 1720 with 32px of padding, so the
     rail's left edge is 50% - (1720/2) + 32, and never nearer the window than 32px. */
  .selbar {
    left: max(32px, calc(50% - 828px));
    right: auto;
    width: var(--rail-w);
    padding: 16px 0;
    background: var(--cream);
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .selbar .btn { width: 100%; padding: 0; }
  .selbar .selbar-actions { display: flex; gap: 8px; }
  .selbar .selbar-actions .btn { flex: 1; }
  .desk-only { display: block; }
  /* Pages with no filter rail (the detail view, collections) take the full-width bar instead. */
  .selbar.selbar-wide {
    left: 0; right: 0; width: auto;
    padding: 14px 32px; background: var(--sand);
    flex-direction: row; align-items: center;
  }
  .selbar.selbar-wide .btn { width: auto; padding: 0 18px; }
  /* room for the bar to sit over the foot of the rail without covering a filter */
  .rail-body { padding-bottom: 170px; }
}

/* ---------------------------------------------------------------- modal */
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(26, 25, 22, .34);
}
.modal.is-open { display: flex; }
.modal-panel {
  background: var(--sand);
  width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto;
  padding: 28px 22px calc(28px + env(safe-area-inset-bottom));
}
@media (min-width: 640px) {
  .modal { align-items: center; }
  .modal-panel { padding: 34px; }
}
.modal-panel h2 { font-size: 26px; margin-bottom: 6px; }
.modal-panel .lede { font-size: 12px; color: var(--gold); margin: 0 0 24px; }
.form-row { margin-bottom: 18px; }
.form-actions { display: flex; gap: 10px; margin-top: 26px; }
.form-actions .btn { flex: 1; }

.blocked {
  border-top: 1px solid var(--tan); border-bottom: 1px solid var(--tan);
  padding: 14px 0; margin-bottom: 22px;
}
.blocked p { margin: 0 0 10px; font-size: 12px; color: var(--alert); }
.blocked ul { margin: 0; padding-left: 16px; font-size: 12px; }

/* ---------------------------------------------------------------- item detail */
.item-detail {
  padding: 34px 0 120px;
  display: grid; gap: 34px;
}
@media (min-width: 900px) {
  .item-detail { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; padding-top: 46px; }
}
.gallery-main { aspect-ratio: 4 / 5; background: var(--sand); overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-strip { display: flex; gap: 10px; margin-top: 10px; }
.gallery-strip button {
  width: 62px; aspect-ratio: 4 / 5; padding: 0; border: 0; background: var(--sand);
  overflow: hidden; cursor: pointer;
  box-shadow: inset 0 0 0 0 var(--ink); transition: box-shadow .3s var(--ease);
}
.gallery-strip button[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--ink); }
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 0; border-top: 1px solid var(--tan); vertical-align: top; }
.spec-table th { font-weight: 400; color: var(--gold); width: 38%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.spec-table td { color: var(--body); }

.price-block { border-top: 1px solid var(--tan); border-bottom: 1px solid var(--tan); padding: 4px 0; margin: 26px 0; }
.price-line { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; }
.price-line + .price-line { border-top: 1px solid var(--tan); }
.price-line dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.price-line dd { margin: 0; font-size: 15px; color: var(--ink); }
.price-line.is-margin dd { font-size: 13px; }
.price-line dd.is-negative { color: var(--alert); }
.note { font-size: 11px; color: var(--gold); margin: 0; }
.note.is-alert { color: var(--alert); }

/* ---------------------------------------------------------------- collections */
.coll-grid { display: grid; gap: 26px; padding: 30px 0 120px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.coll-card { border-top: 1px solid var(--tan); padding-top: 14px; display: block; }
.coll-card h3 { font-size: 20px; color: var(--ink); }
.coll-card .label-cap { margin-top: 10px; display: block; }
.coll-covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 14px; }
.coll-covers div { aspect-ratio: 1; background: var(--sand); overflow: hidden; }
.coll-covers img { width: 100%; height: 100%; object-fit: cover; }

.totals-row { display: flex; gap: 26px; flex-wrap: wrap; border-top: 1px solid var(--tan); border-bottom: 1px solid var(--tan); padding: 16px 0; margin: 22px 0; }
.totals-row div { flex: none; }
.totals-row dt { font-size: 10px; letter-spacing: .10em; text-transform: uppercase; color: var(--gold); }
.totals-row dd { margin: 4px 0 0; font-size: 18px; color: var(--ink); }

/* ---------------------------------------------------------------- a listed piece
   The row shape used inside a collection: thumbnail, name, price. Same rhythm as the quote's
   rows, but this one is internal and carries the trade price. */
.list-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 18px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--tan);
}
.list-row .thumb { width: 46px; aspect-ratio: 4 / 5; background: var(--sand); overflow: hidden; }
.list-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.list-row .name { font-size: 13px; line-height: 1.5; color: var(--ink); }
.list-row .name a { border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
.list-row .name a:hover { border-bottom-color: var(--tan); }
.list-row .row-meta { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.list-row .price { font-size: 13px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.list-row .price .row-meta { text-align: right; }

/* ---------------------------------------------------------------- misc */
.page-head { padding: 34px 0 0; }
.page-head .eyebrow { margin-bottom: 12px; }
.back-link { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); transition: color .3s var(--ease); }
.back-link:hover { color: var(--ink); }
.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 10px 16px;
  font-size: 11px; letter-spacing: .10em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  .rail, .rail-scrim, .chip, .detail-link, .check input, .site-nav a,
  .gallery-strip button, .back-link { transition: none !important; }
}

/* ---------------------------------------------------------------- header extras
   Added by shell.js once a session exists. */
.nav-who {
  color: var(--gold); font-size: 10px; letter-spacing: .08em;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: none;
}
.nav-signout {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
  transition: color .3s var(--ease);
}
.nav-signout:hover { color: var(--ink); }
.site-nav { margin-left: auto; align-items: center; }

/* ---------------------------------------------------------------- the add / edit form */
.edit-form { padding: 34px 0 120px; max-width: 720px; }
.form-section { border-top: 1px solid var(--tan); padding: 26px 0; }
.form-section > .eyebrow { display: block; margin-bottom: 14px; }
.form-section > .note { margin-bottom: 20px; }
.edit-form .opt { color: var(--gold); }
.grid-2 { display: grid; gap: 0 18px; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 0 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.edit-form select.field { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.style-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.thumbs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin-top: 6px; }
.thumb-tile { position: relative; aspect-ratio: 4 / 5; background: var(--sand); overflow: hidden; }
.thumb-tile img { width: 100%; height: 100%; object-fit: cover; }
.thumb-tile button {
  position: absolute; top: 0; right: 0; border: 0; cursor: pointer;
  background: var(--cream); color: var(--body);
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px;
}
.thumb-tile button:hover { background: var(--ink); color: var(--cream); }
.thumb-tile .primary {
  position: absolute; left: 0; bottom: 0; background: var(--cream); color: var(--body);
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px;
}