/* umenzi — dark mode.
 *
 * The design system defines its palette on bare `:root` in
 * _ds/classical-…/styles.css. Everything here re-declares those same tokens at
 * a higher specificity (`:root[data-theme=…]`, `:root:not([data-theme=…])`) so
 * it wins regardless of which stylesheet the runtime injects last — and so a
 * regenerated design system never has to know this file exists.
 *
 * Three states, as the tokens are stamped by theme.js:
 *   data-theme="dark"   → dark, chosen
 *   data-theme="light"  → light, chosen
 *   no attribute        → follow the operating system
 *
 * The ramps invert rather than shift. In the light palette `neutral-100` is the
 * lightest step and `neutral-900` the darkest; the design leans on that, using
 * 600/700 for muted copy and 100 for text sitting on an accent fill. Flipping
 * the ends keeps every one of those usages reading correctly without touching
 * a single call site.
 */

/* ── Light-mode contrast corrections ──────────────────────────────────────
 * Not part of dark mode, and not cosmetic. Measured against WCAG AA on the
 * shipped light palette, two design-system tokens fall short at the sizes the
 * design actually uses them:
 *
 *   --color-neutral-600      #7d7979 on #eae9e9  → 3.55:1  (muted copy, 10–13px)
 *   .btn-primary/-ghost text #b68235 on #eae9e9  → 2.78:1  (every accent button)
 *
 * AA wants 4.5:1 for text this size. Both corrections below are the smallest
 * step that clears it while keeping the warm grey and the brand gold
 * recognisable — the button keeps its #b68235 border, only the glyph darkens.
 *
 * This block deliberately lives here rather than in the generated design
 * system, so it survives a re-export. Delete it to get the original values
 * back, at the cost of the contrast.
 *
 * Selector note: `:not([data-theme="dark"])` covers both an explicit light
 * choice and the no-attribute default, and sits above the dark blocks below,
 * which re-set the same token for system-dark at equal specificity.
 */
:root:not([data-theme="dark"]) {
  /* Bone, not grey. The shipped light palette was a neutral grey-white
     (#f3f2f2) that read cold against the brand's espresso and brass. These are
     the same values pulled toward the brown — the pale end of the dark palette
     rather than an unrelated neutral, so the two themes read as one family.
     Every value below is measured: the muted step clears 4.5:1 on the surface
     it actually sits on, which the original #7d7979 did not. */
  --color-bg: #f4efe4;
  --color-surface: #ebe4d6;
  --color-text: #241a12;
  --color-divider: color-mix(in srgb, #241a12 15%, transparent);

  --color-neutral-100: #faf7f0;
  --color-neutral-200: #f0ebe0;
  --color-neutral-300: #ded6c6;
  --color-neutral-400: #c2b8a4;
  --color-neutral-500: #a1957f;
  --color-neutral-600: #6b6152;
  --color-neutral-700: #554c3e;
  --color-neutral-800: #3b342a;
  --color-neutral-900: #241a12;
}
:root:not([data-theme="dark"]) .btn-primary,
:root:not([data-theme="dark"]) .btn-ghost {
  color: var(--color-accent-700);
}

:root[data-theme="dark"] {
  --color-bg: #191512;
  --color-surface: #221d19;
  --color-text: #ece7e1;
  --color-accent: #c9963f;
  --color-accent-2: #c08f4a;
  --color-divider: color-mix(in srgb, #ece7e1 16%, transparent);

  --color-neutral-100: #1a1714;
  --color-neutral-200: #241f1b;
  --color-neutral-300: #322c26;
  --color-neutral-400: #4a423a;
  --color-neutral-500: #6d645a;
  --color-neutral-600: #9c9389;
  --color-neutral-700: #bdb4a9;
  --color-neutral-800: #d8d1c8;
  --color-neutral-900: #ece7e1;

  --color-accent-100: #2a2114;
  --color-accent-200: #3a2d1a;
  --color-accent-300: #facb8d; /* text-only, on always-dark panels — stays light */
  --color-accent-400: #6f552c;
  --color-accent-500: #8f6d36;
  --color-accent-600: #b08a45;
  --color-accent-700: #ddb268;
  --color-accent-800: #f0cf95;
  --color-accent-900: #f9e6c4;

  --color-accent-2-100: #29211a;
  --color-accent-2-200: #382c1c;
  --color-accent-2-300: #4e3e26;
  --color-accent-2-400: #6b5533;
  --color-accent-2-500: #8b6f42;
  --color-accent-2-600: #ab8b55;
  --color-accent-2-700: #d3b07a;
  --color-accent-2-800: #eacfa4;
  --color-accent-2-900: #f6e7c9;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.68);
}

/* Same palette again for people who never touched the toggle and whose system
   is set to dark. Guarded so an explicit "light" choice still wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #191512;
    --color-surface: #221d19;
    --color-text: #ece7e1;
    --color-accent: #c9963f;
    --color-accent-2: #c08f4a;
    --color-divider: color-mix(in srgb, #ece7e1 16%, transparent);

    --color-neutral-100: #1a1714;
    --color-neutral-200: #241f1b;
    --color-neutral-300: #322c26;
    --color-neutral-400: #4a423a;
    --color-neutral-500: #6d645a;
    --color-neutral-600: #9c9389;
    --color-neutral-700: #bdb4a9;
    --color-neutral-800: #d8d1c8;
    --color-neutral-900: #ece7e1;

    --color-accent-100: #2a2114;
    --color-accent-200: #3a2d1a;
    --color-accent-300: #facb8d; /* text-only, on always-dark panels — stays light */
    --color-accent-400: #6f552c;
    --color-accent-500: #8f6d36;
    --color-accent-600: #b08a45;
    --color-accent-700: #ddb268;
    --color-accent-800: #f0cf95;
    --color-accent-900: #f9e6c4;

    --color-accent-2-100: #29211a;
    --color-accent-2-200: #382c1c;
    --color-accent-2-300: #4e3e26;
    --color-accent-2-400: #6b5533;
    --color-accent-2-500: #8b6f42;
    --color-accent-2-600: #ab8b55;
    --color-accent-2-700: #d3b07a;
    --color-accent-2-800: #eacfa4;
    --color-accent-2-900: #f6e7c9;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.68);
  }
}

/* ── Objects in the dark ───────────────────────────────────────────────────
 *
 * In light mode an object sits in a mount: a 6px surface border and a hairline
 * outline, the way a print is framed on a pale wall. Carried into dark mode
 * that mount reads as a box drawn around the thing you are meant to be looking
 * at — the frame competes with the object.
 *
 * So the dark treatment drops the frame entirely and lights the object
 * instead: no border, no outline, and a warm brass-tinted glow falling off
 * into the ground, over a deeper shadow that seats it in space. Brightness
 * goes up rather than down — the pale plates should read as lit, not dimmed.
 *
 * Selector shape matches the palette blocks above: an explicit dark choice, or
 * the un-stamped default when the operating system asks for dark. Light mode
 * needs no override at all — it keeps the design system's own framing.
 */
:root[data-theme="dark"] .plate {
  border: 0;
  outline: 0;
  filter: sepia(0.16) saturate(0.92) contrast(1.03) brightness(1.05);
  box-shadow:
    0 0 34px -8px color-mix(in srgb, var(--color-accent) 34%, transparent),
    0 12px 34px -20px rgba(0, 0, 0, 0.9);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plate {
    border: 0;
    outline: 0;
    filter: sepia(0.16) saturate(0.92) contrast(1.03) brightness(1.05);
    box-shadow:
      0 0 34px -8px color-mix(in srgb, var(--color-accent) 34%, transparent),
      0 12px 34px -20px rgba(0, 0, 0, 0.9);
  }
}

/* The home vitrine is the one display built as a case rather than a plate:
 * a bordered box with a glass sheen and a white inner hairline painted over
 * it. In the dark the hairline is the brightest thing on the page, so the
 * case loses its edges and keeps only the fall of light. */
:root[data-theme="dark"] .case {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow:
    0 0 36px -10px color-mix(in srgb, var(--color-accent) 32%, transparent),
    0 12px 34px -20px rgba(0, 0, 0, 0.9);
}
:root[data-theme="dark"] .case-glass { opacity: 0.34; }
:root[data-theme="dark"] .case-edge { box-shadow: none !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .case {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow:
      0 0 36px -10px color-mix(in srgb, var(--color-accent) 32%, transparent),
      0 12px 34px -20px rgba(0, 0, 0, 0.9);
  }
  :root:not([data-theme="light"]) .case-glass { opacity: 0.34; }
  :root:not([data-theme="light"]) .case-edge { box-shadow: none !important; }
}

/* Form errors. Inline `#a33` disappears against the dark ground, so the colour
   lives here where it can answer to the theme. */
.err { color: #a33; }
:root[data-theme="dark"] .err { color: #f0968c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .err { color: #f0968c; }
}

/* The theme toggle in the header. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-neutral-700);
  border: 1px solid transparent;
  line-height: 1;
  flex: none;
}
.theme-toggle:hover {
  color: var(--color-accent-700);
  border-color: var(--color-divider);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
.theme-toggle svg { display: block; width: 15px; height: 15px; }

/* No colour transition on the theme switch, deliberately.
 *
 * A 200ms cross-fade was tried here and had to come out. The page is rendered
 * by a runtime that re-creates DOM nodes on every state change, so a
 * transition mid-flight gets restarted against the outgoing colour and never
 * lands: sections were measured still painting the dark surface
 * (rgb(34,29,25)) minutes after switching to light, while untransitioned
 * siblings were correct. Instant repaint is the honest behaviour here.
 */


/* ── Nav icons ─────────────────────────────────────────────────────────────
 * Account and Basket are icon buttons rather than words: the header already
 * carries five text links, and two more pushed the row to wrap at tablet
 * widths. They match .theme-toggle exactly so the three controls read as one
 * set, and each keeps a title + aria-label so the meaning survives without
 * the word.
 */
.nav-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-neutral-700);
  border: 1px solid transparent;
  line-height: 1;
  flex: none;
  text-decoration: none;
}
.nav-icon:hover {
  color: var(--color-accent-700);
  border-color: var(--color-divider);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
.nav-icon svg { display: block; width: 16px; height: 16px; }

/* The basket count rides on the icon's shoulder. */
.nav-badge {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-accent-700);
  color: var(--color-neutral-100);
  font-size: 10px;
  font-feature-settings: 'tnum';
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Upload field on the application form ──────────────────────────────────
 * A label wrapping a transparent file input: the whole box is the control,
 * which keeps the click target large without a script. Dashed rather than
 * solid so it reads as "put something here" and not as another text field.
 */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 14px;
  border: 1px dashed var(--color-neutral-400);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-text) 2%, transparent);
  cursor: pointer;
}
.dropzone:hover,
.dropzone:focus-within {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}

/* ── Payment method choice ─────────────────────────────────────────────────
 * A row per method with a hand-drawn radio, because a real <input type=radio>
 * inside this runtime does not keep its checked state across a re-render. The
 * selected state is carried in the inline style the template builds, so this
 * rule only has to supply the hover and the hit area.
 */
.paychoice:hover {
  border-color: var(--color-accent) !important;
}
.paydot { transition: none; }

/* ── Native controls in the dark ───────────────────────────────────────────
 * A <select>'s popup list is drawn by the operating system, not by the page.
 * Styling `.input` sets the closed control but leaves the open list rendering
 * against the OS default — dark text on a dark sheet, which is unreadable.
 *
 * `color-scheme` is the switch that actually reaches it: it tells the browser
 * which set of native colours to draw with, so the popup, the scrollbars, the
 * date picker's calendar and the spinner arrows all follow the theme. The
 * explicit option colours below are the belt to that braces, because a few
 * Linux/Windows GTK builds still ignore the scheme for <option>.
 */
:root[data-theme="dark"] { color-scheme: dark; }
:root:not([data-theme="dark"]) { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

select.input option,
select option {
  background-color: var(--color-surface);
  color: var(--color-text);
}
/* Keeps the closed control legible where a UA would otherwise paint its own. */
select.input {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Social row in the footer. Same 26px round button as the header icons, so the
   two icon sets read as one family. */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--color-neutral-700);
  border: 1px solid var(--color-divider);
  text-decoration: none;
  flex: none;
}
.social-icon:hover {
  color: var(--color-accent-700);
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.social-icon svg { display: block; width: 15px; height: 15px; }

/* Country and language pickers in the header. Sized to the two- and three-
   letter codes they hold, so the nav row does not wrap on a tablet. */
.nav-select {
  max-width: 132px;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: .04em;
  padding: 4px 6px;
  cursor: pointer;
  flex: none;
  line-height: 1.2;
}
.nav-select:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.nav-select option { background-color: var(--color-surface); color: var(--color-text); }

/* ── Header on a narrow screen ─────────────────────────────────────────────
 * The bar was one flat flex row left to wrap where it liked, which on a phone
 * produced three ragged lines with the wordmark stranded alone in the middle
 * of the first one. It is now four named groups, and this lays them out:
 *
 *   line 1   brand ......................................... icons
 *   line 2   nav words, on one line, scrolled if they overflow
 *   line 3   currency and language
 *
 * The brand and the icons share the first line because they are the two
 * things a person reaches for, and pairing them leaves the line balanced
 * rather than centred on nothing.
 *
 * 640px rather than a device query: the wrap is caused by the row running out
 * of width, which is what the breakpoint should describe.
 */
@media (max-width: 640px) {
  .headbar {
    justify-content: space-between;
    row-gap: 10px;
  }
  .headbar .brand { flex: 0 1 auto; }
  .headbar .hb-icons { flex: 0 0 auto; gap: 14px; }

  /* The separator earns its place on a wide bar, where the icons sit against
     the nav. On its own line it is a mark between nothing and nothing. */
  .headbar .hb-icons .hb-rule { display: none; }

  /* One line, scrolled rather than wrapped. Six words will not fit across a
     phone at a readable size, and wrapping them is what made the old header
     grow to three lines. */
  .headbar .hb-nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 18px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .headbar .hb-nav::-webkit-scrollbar { display: none; }
  .headbar .hb-nav > a {
    flex: none;
    font-size: 14px;
    padding-bottom: 2px;
  }

  .headbar .hb-region {
    order: 4;
    flex: 1 0 100%;
    justify-content: flex-start;
    gap: 8px;
  }
  .headbar .hb-region .nav-select { font-size: 12.5px; padding: 4px 8px; }

  /* Touch targets. 24px icons in a 14px gap are a miss on a phone. */
  .headbar .nav-icon,
  .headbar .theme-toggle { width: 30px; height: 30px; }
}

/* ── Type scale ────────────────────────────────────────────────────────────
 * The body was set at 15px, which is small for long reading and smaller again
 * on a phone held at arm's length. 16.5px on the page and 17px on a phone —
 * phones get the larger of the two because the viewing distance is greater
 * relative to the screen, not shorter.
 */
@media (max-width: 640px) {
  body, body > div { font-size: 17px; }
}

/* A word that goes somewhere. Underlined on hover rather than always, so a
   heading full of links still reads as a heading. */
.wordlink {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.wordlink:hover {
  color: var(--color-accent-700);
  border-bottom-color: var(--color-accent);
}

/* ── Motion ────────────────────────────────────────────────────────────────
 * Restrained on purpose. The runtime re-creates DOM nodes on every state
 * change, which is what killed the theme cross-fade earlier in this project —
 * anything that animates *between* two states restarts mid-flight and lands
 * wrong. What is safe is animating an element's arrival, because a fresh node
 * genuinely is arriving.
 *
 * So: things fade up as they appear, hover states move, and nothing else. No
 * scroll-linked effects, no parallax, no attempt to animate a value changing.
 *
 * Every rule here is off under prefers-reduced-motion, including the hover
 * lifts — a person who asks for less motion means the hovers too.
 */
@keyframes menzi-rise {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes menzi-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal { animation: menzi-rise .42s cubic-bezier(.22,.61,.36,1) both; }
.reveal:nth-of-type(2) { animation-delay: .06s; }
.reveal:nth-of-type(3) { animation-delay: .12s; }
.reveal:nth-of-type(4) { animation-delay: .18s; }

/* The object plates settle in rather than snapping. Short, because a wall of
   thirty-six of them staggering would be a performance, not a shop. */
.plate { animation: menzi-fade .3s ease-out both; }

/* A plate lifts fractionally under the cursor — enough to say "this is a
   thing you can pick up", not enough to shift the layout. */
.plate { transition: transform .22s cubic-bezier(.22,.61,.36,1); }
div[style*="cursor:pointer"]:hover > .plate,
div[style*="cursor: pointer"]:hover > .plate { transform: translateY(-3px); }

.btn, .nav-icon, .social-icon, .wordlink {
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

/* ── The page transition ───────────────────────────────────────────────────
 * The one place a *change* is animated rather than an arrival, and it works
 * only because standalone-nav.js narrows it to real navigation. It stamps
 * data-nav="in" on <html> before the re-render and clears it afterwards, so
 * this rule is live for one transition and dead for every keystroke, cart
 * change and filter click in between.
 *
 * The view container is the bare <div> the runtime renders between the ribbon
 * and the footer — header, section and footer are all different tags, so the
 * child selector reaches exactly one element.
 */
@keyframes menzi-page-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
:root[data-nav="in"] .sc-host > div > div {
  animation: menzi-page-in .38s cubic-bezier(.22,.61,.36,1) both;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .plate { animation: none; }
  :root[data-nav="in"] .sc-host > div > div { animation: none; }
  .plate, .btn, .nav-icon, .social-icon, .wordlink { transition: none; }
  div[style*="cursor:pointer"]:hover > .plate,
  div[style*="cursor: pointer"]:hover > .plate { transform: none; }
}

/* ── Countdown ─────────────────────────────────────────────────────────────
 * Tabular figures so the seconds column does not jitter the box width as the
 * digits change — the single most distracting thing a countdown can do.
 */
.tnum, .countnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.countbox {
  flex: 0 0 auto;
  min-width: 78px;
  text-align: center;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.countnum {
  font-family: var(--font-heading);
  font-size: 26px;
  margin: 0;
  line-height: 1.1;
}
.countlabel {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin: 5px 0 0;
}

/* ── The opening-list modal ────────────────────────────────────────────────
 * It arrives rather than appearing: a scrim fade with the card rising into
 * it. This is safe under the runtime's re-render behaviour for the same
 * reason .reveal is — the node is genuinely new when the modal opens, so
 * nothing is being animated between two states.
 */
@keyframes menzi-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes menzi-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.modal-scrim { animation: menzi-scrim-in .22s ease-out both; }
.modal-card  { animation: menzi-modal-in .34s cubic-bezier(.22,.61,.36,1) both .04s; }

@media (prefers-reduced-motion: reduce) {
  .modal-scrim, .modal-card { animation: none; }
}

/* Share chips. Small, quiet, and not a row of brand-coloured buttons — the
   object is what the page is selling, not the channels. */
.share-chip {
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--color-divider);
  color: var(--color-neutral-700);
  text-decoration: none;
  flex: none;
  transition: color .16s ease, border-color .16s ease;
}
.share-chip:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
@media (prefers-reduced-motion: reduce) { .share-chip { transition: none; } }

/* ── Shelf inks ────────────────────────────────────────────────────────────
 * Six deep inks plus clay and brass, one per shelf. Not alternative accents —
 * brass stays the only accent — these are how the eight shelves tell
 * themselves apart, and each is drawn from a material the wall actually
 * holds. Indigo because indigo dyeing is the textile tradition this continent
 * gave the world; ox blood from vegetable-tanned hide; malachite and
 * verdigris from oxidised copper; umber from the ground.
 *
 * TWO VALUES EACH, AND THE PAIR IS LOAD-BEARING.
 *   --shelf-*      a FILL. A flat field carrying bone text, measured at
 *                  8.5:1 to 10.4:1 against #f4efe4.
 *   --shelf-*-lit  TEXT. The same ink as a label on espresso, measured at
 *                  5.3:1 to 7.4:1.
 * Use a fill value as text on a dark ground and it vanishes: every one sits
 * within 1.9:1 of espresso. That closeness is what makes them good tinted
 * panels and useless as type.
 *
 * One shelf ink per view. A ceramics page may carry clay; it does not also
 * carry indigo because there is a textile in the corner.
 */
:root {
  --shelf-ceramics:  #ac803e;  --shelf-ceramics-lit:  #d3b07a;
  --shelf-textiles:  #27384f;  --shelf-textiles-lit:  #7d9cc4;
  --shelf-jewellery: #b68235;  --shelf-jewellery-lit: #ddb268;
  --shelf-leather:   #6b2b28;  --shelf-leather-lit:   #c9736a;
  --shelf-wood:      #2d4a3b;  --shelf-wood-lit:      #7fae92;
  --shelf-art:       #43304f;  --shelf-art-lit:       #ab8ec2;
  --shelf-decor:     #4a3527;  --shelf-decor-lit:     #c09a76;
  --shelf-bath:      #26474a;  --shelf-bath-lit:      #6fb0b0;
}