@charset "UTF-8";
/* ==========================================================================
   UR HOME DECOR — site stylesheet
   One file, no framework, no duplicated rule sets.

   Contents
     01  Tokens
     02  Reset & base
     03  Typography
     04  Buttons & links
     05  Header, navigation, mega menu, mobile drawer
     06  Hero
     07  Sections & generic blocks
     08  Price block, badges, product card
     09  Category tiles
     10  Shop controls (filter / sort / search)
     11  Product detail
     12  Story, trade, contact, forms
     13  Footer
     14  Utilities, motion, print
   ========================================================================== */

/* ---------- 01  TOKENS ---------------------------------------------------- */
:root {
  /* Brand — taken from the official bronze-on-charcoal UR medallion */
  --ink:         #14120F;
  --ink-900:     #1B1712;
  --ink-800:     #241F18;
  --ink-700:     #332B21;
  --ink-600:     #4A4034;

  --bronze:      #B08442;   /* accent on dark, large text, rules, icons      */
  --bronze-hi:   #DCB271;   /* highlights on dark                            */
  --bronze-ink:  #7E5A29;   /* accent for SMALL text on light — 5.4:1 on cream */

  --cream:       #FAF7F1;
  --paper:       #FFFFFF;
  --stone:       #F1ECE3;
  --stone-2:     #E7E0D3;

  --line:        #E4DCCD;
  --line-on-ink: rgba(220, 178, 113, .22);

  --text:        #1A1713;   /* 15.6:1 on cream */
  --text-2:      #5F574A;   /*  6.6:1 on cream */
  --text-3:      #6B6355;   /*  5.2:1 on cream — the lightest text allowed on light */
  --text-on-ink: #F3EEE4;
  --text-on-ink-2: #BDB3A2;

  --sale:        #A32E22;   /* 7.3:1 on cream */
  --sale-on-ink: #F2988A;   /* the same warning role, legible on the dark sections */
  --sale-soft:   #FBEFEC;
  --success:     #2E6B4E;
  --focus:       #2E6BE6;

  /* Type */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.6rem, 1.55rem + 4.4vw, 5.1rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.7vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.35rem + 1.9vw, 2.7rem);
  --fs-h3:      clamp(1.2rem, 1.08rem + .6vw, 1.5rem);
  --fs-body:    1.0625rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-eyebrow: .75rem;

  /* Spacing — 4/8 rhythm */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  --wrap: 1280px;
  --gutter: clamp(18px, 4vw, 44px);

  --r-sm: 3px;
  --r:    6px;
  --r-lg: 10px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,18,15,.06), 0 2px 6px rgba(20,18,15,.05);
  --shadow:    0 2px 6px rgba(20,18,15,.06), 0 12px 28px rgba(20,18,15,.09);
  --shadow-lg: 0 10px 24px rgba(20,18,15,.10), 0 28px 64px rgba(20,18,15,.16);

  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 340ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  --z-drawer: 120;
  --z-header: 100;
  --z-menu:   90;

  --header-h: 76px;
}

/* ---------- 02  RESET & BASE ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
svg { flex: none; }

/* Opaque photography gets a stone placeholder tint so the layout never flashes
   white while it loads. It is applied per-component, never globally: a global
   rule paints a visible plate behind transparent PNGs such as the brand mark. */
.pcard__img, .gallery__main, .gallery__thumb, .tile, .megamenu__promo img,
.split__media img, .figure img, .mosaic img { background-color: var(--stone); }
.brand__mark { background: none; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
/* On the dark header a blue ring is invisible; use the bronze highlight. */
.header :focus-visible,
.footer :focus-visible,
.drawer :focus-visible,
.megamenu :focus-visible { outline-color: var(--bronze-hi); }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--text-on-ink);
  padding: 12px 20px; border-radius: var(--r);
  font-weight: 600; text-decoration: none;
  transition: top var(--dur-2) var(--ease);
}
.skip-link:focus { top: 8px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 1460px; }

/* ---------- 03  TYPOGRAPHY ------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: inherit; }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.02em;
}

.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin-bottom: var(--sp-4);
}
.eyebrow--on-ink { color: var(--bronze-hi); }

.lede {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
}
.measure { max-width: 68ch; }

.rule {
  width: 56px; height: 2px; border: 0;
  background: var(--bronze);
  margin: var(--sp-5) 0;
}
.rule--center { margin-inline: auto; }

/* Prices and any figure that sits in a column must not jitter. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- 04  BUTTONS --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px;
  padding: 13px 26px;
  font-family: var(--font-ui);
  font-size: .875rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  border: 1.5px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
.btn--primary:hover { background: var(--ink-700); border-color: var(--ink-700); }

.btn--bronze { background: var(--bronze); color: #17130C; border-color: var(--bronze); }
.btn--bronze:hover { background: var(--bronze-hi); border-color: var(--bronze-hi); }

.btn--outline { background: transparent; color: var(--text); border-color: var(--line); }
.btn--outline:hover { border-color: var(--ink); background: var(--paper); }

.btn--ghost-ink { background: transparent; color: var(--text-on-ink); border-color: var(--line-on-ink); }
.btn--ghost-ink:hover { background: rgba(220,178,113,.12); border-color: var(--bronze); }

.btn--lg { min-height: 58px; padding: 17px 34px; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn[aria-busy="true"], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--bronze-ink); text-decoration: none;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-1) var(--ease), gap var(--dur-1) var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--bronze); gap: 12px; }
.link-arrow svg { width: 15px; height: 15px; }

/* ---------- 05  HEADER / NAV --------------------------------------------- */
.announce {
  background: var(--ink);
  color: var(--text-on-ink-2);
  border-bottom: 1px solid rgba(220,178,113,.14);
  font-size: var(--fs-xs);
}
.announce__inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-5); flex-wrap: wrap;
  min-height: 40px; padding-block: 9px;
  text-align: center;
}
.announce__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.announce__item svg { width: 14px; height: 14px; color: var(--bronze); }
.announce__sep { color: rgba(220,178,113,.32); }
@media (max-width: 700px) {
  .announce__item:nth-child(n+3), .announce__sep { display: none; }
}

.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--ink);
  color: var(--text-on-ink);
  border-bottom: 1px solid rgba(220,178,113,.16);
}
.header__inner {
  display: flex; align-items: stretch;
  gap: clamp(12px, 2vw, 28px);
  min-height: var(--header-h);
}

/* Brand lockup — the one official mark, used at every logo position */
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  flex: none; align-self: center;
  padding-block: 8px;
}
/* The gold medallion carries fine laurel detail, so it needs a little more
   room than a flat wordmark to stay readable next to the name. */
.brand__mark { width: 54px; height: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.22rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-on-ink); white-space: nowrap;
}
.brand__tag {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bronze); font-weight: 600; margin-top: 6px; white-space: nowrap;
}
@media (max-width: 420px) {
  .brand__mark { width: 42px; }
  .brand__name { font-size: 1.02rem; }
  .brand__tag { display: none; }
}

.nav { margin-inline: auto; display: flex; }
.nav__list {
  display: flex; align-items: stretch;
  list-style: none; margin: 0; padding: 0;
  gap: 2px;
}
.nav__item { display: flex; align-items: stretch; }

/* The trigger fills the full header height. That is the fix for the dead zone:
   the item's hover box now touches the panel, so travelling from the trigger to
   the mega menu never crosses a gap where neither element is hovered. */
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-on-ink); text-decoration: none; white-space: nowrap;
  border: 0; border-bottom: 2px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.nav__link:hover { color: var(--bronze-hi); }
.nav__link[aria-current="page"] { color: var(--bronze-hi); border-bottom-color: var(--bronze); }
.nav__link .chev { width: 11px; height: 11px; transition: transform var(--dur-2) var(--ease); }
.nav__item[data-open="true"] > .nav__link { color: var(--bronze-hi); border-bottom-color: var(--bronze); }
.nav__item[data-open="true"] > .nav__link .chev { transform: rotate(180deg); }

/* Mega menu.  Single source of truth is [data-open] on .nav__item — there is no
   competing :hover rule that could disagree with the script. */
.megamenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ink-900);
  color: var(--text-on-ink);
  border-top: 1px solid rgba(220,178,113,.2);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-menu);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
              visibility 0s linear var(--dur-2);
}
.nav__item[data-open="true"] > .megamenu {
  visibility: visible; opacity: 1; transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}
/* Belt-and-braces bridge against sub-pixel rounding between trigger and panel. */
.megamenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.megamenu__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(240px, 300px);
  gap: clamp(20px, 3vw, 44px);
  padding-block: var(--sp-7);
}
.megamenu__title {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(220,178,113,.18);
}
.megamenu__title svg { width: 14px; height: 14px; }
.megamenu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.megamenu__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 8px 7px 0;
  font-size: .9375rem; color: var(--text-on-ink-2); text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--dur-1) var(--ease), padding-left var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.megamenu__list a:hover { color: #fff; background: rgba(220,178,113,.08); padding-left: 8px; }
.megamenu__count {
  font-size: var(--fs-xs); font-weight: 600; color: var(--bronze);
  font-variant-numeric: tabular-nums;
}
.megamenu__promo {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding-left: clamp(20px, 2vw, 36px);
  border-left: 1px solid rgba(220,178,113,.18);
}
.megamenu__promo img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r); background: var(--ink-800);
}
.megamenu__promo p { font-size: var(--fs-sm); color: var(--text-on-ink-2); }
@media (max-width: 1180px) {
  .megamenu__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .megamenu__promo { display: none; }
}

.header__right {
  display: flex; align-items: center; gap: var(--sp-4);
  flex: none; align-self: center;
}
.header__phone {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text-on-ink);
  font-size: var(--fs-xs); line-height: 1.35;
}
.header__phone svg { width: 19px; height: 19px; color: var(--bronze); }
.header__phone b { display: block; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; }
.header__phone span { color: var(--text-on-ink-2); }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 48px; height: 48px; align-self: center;
  color: var(--text-on-ink);
  border: 1px solid rgba(220,178,113,.28); border-radius: var(--r);
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 1080px) {
  .nav, .header__phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .header__right .btn { display: none; }
  .header__inner { justify-content: space-between; }
}
@media (max-width: 1280px) and (min-width: 1081px) {
  .header__phone span { display: none; }
}

/* Mobile drawer — tap only, never hover */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  visibility: hidden;
}
.drawer[data-open="true"] { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(10,9,7,.6);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
.drawer[data-open="true"] .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(420px, 92vw);
  background: var(--ink);
  color: var(--text-on-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4) var(--sp-5) calc(var(--sp-8) + env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform var(--dur-3) var(--ease);
  box-shadow: var(--shadow-lg);
}
.drawer[data-open="true"] .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid rgba(220,178,113,.16);
  margin-bottom: var(--sp-4);
}
.drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  color: var(--text-on-ink);
  border: 1px solid rgba(220,178,113,.28); border-radius: var(--r);
}
.drawer__close svg { width: 20px; height: 20px; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 4px;
  font-size: 1rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-on-ink); text-decoration: none;
  border-bottom: 1px solid rgba(220,178,113,.12);
}
.drawer__acc {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 52px; padding: 12px 4px;
  font-size: 1rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-on-ink); text-align: left;
  border-bottom: 1px solid rgba(220,178,113,.12);
}
.drawer__acc .chev { width: 16px; height: 16px; color: var(--bronze); transition: transform var(--dur-2) var(--ease); }
.drawer__acc[aria-expanded="true"] .chev { transform: rotate(180deg); }
.drawer__panel-body {
  display: none;
  padding: var(--sp-3) 0 var(--sp-4) var(--sp-4);
  border-left: 2px solid rgba(220,178,113,.24);
  margin: var(--sp-3) 0 var(--sp-4) 4px;
}
.drawer__panel-body[data-open="true"] { display: block; }
.drawer__panel-body a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 46px; padding: 8px 0;
  color: var(--text-on-ink-2); text-decoration: none; font-size: .9375rem;
}
.drawer__panel-body a:hover { color: #fff; }
.drawer__sub {
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--bronze);
  margin: var(--sp-4) 0 var(--sp-1);
}
.drawer__panel-body .drawer__sub:first-child { margin-top: 0; }
.drawer__cta { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.drawer__phone {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid rgba(220,178,113,.16);
  color: var(--text-on-ink); text-decoration: none; font-weight: 600;
}
.drawer__phone svg { width: 18px; height: 18px; color: var(--bronze); }

body[data-scroll-locked] { overflow: hidden; }

/* ---------- 06  HERO ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: clamp(520px, 74vh, 780px);
  display: grid; align-items: center;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(12,10,8,.94) 0%, rgba(12,10,8,.80) 34%, rgba(12,10,8,.30) 62%, rgba(12,10,8,.14) 100%),
    linear-gradient(to top, rgba(12,10,8,.6), transparent 42%);
}
.hero__inner { padding-block: clamp(64px, 10vw, 120px); position: relative; }
.hero__body { max-width: 640px; color: var(--text-on-ink); }
.hero__body h1 { color: #fff; }
.hero__body .lede { color: #E4DCCC; margin-top: var(--sp-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid rgba(220,178,113,.24);
}
.hero__stat b {
  display: block; font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 600; color: var(--bronze-hi); line-height: 1;
}
.hero__stat span {
  display: block; margin-top: 7px;
  font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-on-ink-2);
}

/* ---------- 07  SECTIONS -------------------------------------------------- */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--ink { background: var(--ink); color: var(--text-on-ink); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .lede { color: var(--text-on-ink-2); }
.section--stone { background: var(--stone); }
.section--paper { background: var(--paper); }

.section__head { margin-bottom: clamp(32px, 4vw, 56px); }
.section__head--center { text-align: center; }
.section__head--center .lede { margin-inline: auto; }
.section__head--center .rule { margin-inline: auto; }
.section__head--split {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5) var(--sp-7); flex-wrap: wrap;
}
.section__head--split .section__head-text { flex: 1 1 420px; }

.grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

.split {
  display: grid; align-items: center;
  gap: clamp(28px, 5vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}
.split__media img {
  width: 100%; border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

/* Trust strip built from the official Etsy banner artwork */
.trust {
  background: var(--ink);
  padding-block: clamp(28px, 4vw, 44px);
}
.trust__banner {
  width: 100%; max-width: 1100px; margin-inline: auto; height: auto;
  background: transparent;
}

/* Numbered process steps */
.steps { counter-reset: step; }
.step { position: relative; padding-top: var(--sp-5); border-top: 2px solid var(--line); }
.section--ink .step { border-top-color: rgba(220,178,113,.24); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; font-family: var(--font-display); font-size: 1.5rem;
  color: var(--bronze); margin-bottom: var(--sp-3); line-height: 1;
}
.step h3 { margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-sm); color: var(--text-2); }
.section--ink .step p { color: var(--text-on-ink-2); }

/* Feature / value cards — one purpose, one message, generous spacing */
.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  height: 100%;
}
.section--ink .card { background: var(--ink-800); border-color: rgba(220,178,113,.18); }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: var(--sp-4);
  border-radius: var(--r); background: var(--stone); color: var(--bronze-ink);
}
.section--ink .card__icon { background: rgba(220,178,113,.14); color: var(--bronze-hi); }
.card__icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: var(--sp-3); }
.card p { font-size: var(--fs-sm); color: var(--text-2); }
.section--ink .card p { color: var(--text-on-ink-2); }
.card .link-arrow { margin-top: auto; padding-top: var(--sp-5); align-self: flex-start; }
.section--ink .card .link-arrow { color: var(--bronze-hi); }

/* ---------- 08  PRICE, BADGES, PRODUCT CARD ------------------------------- */
/* The sale price is the loudest element in the block; the old price is labelled
   in words so it can never be mistaken for what you pay. */
.price {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: var(--sp-3);
}
.price__now {
  font-family: var(--font-ui);
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--text); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.price__was {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.price__was-label { text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: .6875rem; }
.price__was-value { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.price__save {
  font-size: var(--fs-xs); font-weight: 700; color: var(--sale);
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
  flex-basis: 100%;
}
.price--lg .price__now { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); }
.price--lg .price__was { font-size: var(--fs-sm); }
.price--lg .price__save { font-size: var(--fs-sm); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.badge--sale { background: var(--sale); color: #fff; }
.badge--best { background: var(--bronze); color: #17130C; }
.badge--new  { background: var(--ink); color: var(--text-on-ink); }
.badge--soft { background: var(--stone); color: var(--text-2); }
.badge--freight { background: var(--ink-800); color: var(--bronze-hi); }
.badge svg { width: 12px; height: 12px; }

.pcard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { border-color: var(--stone-2); box-shadow: var(--shadow); transform: translateY(-3px); }
  .pcard:hover .pcard__img img { transform: scale(1.04); }
}
.pcard:focus-within { border-color: var(--bronze); box-shadow: var(--shadow); }

.pcard__img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--stone);
}
.pcard__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}
.pcard__flags {
  position: absolute; inset-inline: 10px; top: 10px;
  display: flex; gap: 6px; flex-wrap: wrap;
  pointer-events: none;
}
.pcard__body {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
}
.pcard__cat {
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bronze-ink);
  margin-bottom: var(--sp-2);
}
.pcard__title {
  font-family: var(--font-ui);
  font-size: .9375rem; font-weight: 600; line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.65em;
}
.pcard__title a { text-decoration: none; }
/* The whole card is clickable, but only the title is the accessible link. */
.pcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard__spec {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs); color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.pcard__spec span { display: inline-flex; align-items: center; gap: 5px; }
.pcard__spec svg { width: 13px; height: 13px; color: var(--text-3); }
.pcard .price { margin-top: auto; padding-top: var(--sp-4); }
.pcard__cta {
  position: relative; z-index: 2;
  margin-top: var(--sp-4);
}

/* Skeletons keep the grid from reflowing while the catalogue loads. */
.pcard--skeleton { pointer-events: none; }
.skel { background: var(--stone-2); border-radius: var(--r-sm); }
.skel--img { aspect-ratio: 1/1; border-radius: 0; }
.skel--line { height: 12px; margin-top: 10px; }
.skel--line.w60 { width: 60%; }
.skel--line.w40 { width: 40%; }
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: shimmer 1.4s var(--ease) infinite; }
  @keyframes shimmer { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
}

/* ---------- 09  CATEGORY TILES ------------------------------------------- */
.tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 300px;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #fff; text-decoration: none;
  background: var(--ink-800);
  isolation: isolate;
}
.tile--tall { min-height: 420px; }
.tile__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10,9,7,.90) 0%, rgba(10,9,7,.55) 38%, rgba(10,9,7,.12) 72%);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile__img { transform: scale(1.05); }
}
.tile h3 { color: #fff; font-size: 1.35rem; }
.tile__meta {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bronze-hi); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tile__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-top: var(--sp-4);
  border: 1.5px solid rgba(255,255,255,.4); border-radius: var(--r-pill);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tile:hover .tile__arrow { background: var(--bronze); border-color: var(--bronze); color: #17130C; }
.tile__arrow svg { width: 15px; height: 15px; }

/* ---------- 10  SHOP CONTROLS -------------------------------------------- */
.shopbar {
  position: sticky; top: var(--header-h); z-index: 40;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding-block: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.shopbar__row {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
}
.shopbar__count {
  font-size: var(--fs-sm); color: var(--text-2);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}
.shopbar__count b { color: var(--text); font-weight: 700; }

.field-inline { display: flex; align-items: center; gap: 8px; }
.field-inline label {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.select, .input {
  min-height: 46px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.select { padding-right: 38px; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F574A' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.input:focus, .select:focus { border-color: var(--bronze); }

.search { position: relative; flex: 1 1 220px; max-width: 340px; }
.search .input { width: 100%; padding-left: 40px; }
.search__icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-3); pointer-events: none;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 8px 16px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  color: var(--text-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--text); }
.chip[aria-pressed="true"], .chip[data-active="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--text-on-ink);
}
.chip__n {
  font-size: .6875rem; font-weight: 700; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] .chip__n, .chip[data-active="true"] .chip__n { color: var(--bronze-hi); }

.empty {
  text-align: center; padding: clamp(48px, 8vw, 96px) var(--sp-5);
  border: 1px dashed var(--line); border-radius: var(--r-lg);
  background: var(--paper);
}
.empty svg { width: 42px; height: 42px; color: var(--text-3); margin: 0 auto var(--sp-4); }
.empty h3 { margin-bottom: var(--sp-2); }
.empty p { color: var(--text-2); margin-bottom: var(--sp-5); }

/* ---------- 11  PRODUCT DETAIL ------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-block: var(--sp-5);
  font-size: var(--fs-xs); color: var(--text-3);
  list-style: none; margin: 0;
}
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--bronze-ink); text-decoration: underline; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs [aria-current] { color: var(--text); font-weight: 500; }

.pdp { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) { .pdp { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); } }

.gallery { display: grid; gap: var(--sp-3); position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 899px) { .gallery { position: static; } }
.gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--stone); border: 1px solid var(--line);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__flags { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.gallery__thumbs {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
}
.gallery__thumb {
  aspect-ratio: 1/1; border-radius: var(--r); overflow: hidden;
  border: 2px solid transparent; background: var(--stone);
  padding: 0; cursor: pointer;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--bronze); }

.pdp__title { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem); line-height: 1.15; }
.pdp__flags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pdp__price { padding: var(--sp-5) 0; border-block: 1px solid var(--line); margin-block: var(--sp-5); }
.pdp__buy { display: grid; gap: var(--sp-3); }
.pdp__note {
  display: flex; gap: 10px;
  font-size: var(--fs-xs); color: var(--text-2); line-height: 1.55;
}
.pdp__note svg { width: 15px; height: 15px; color: var(--bronze-ink); margin-top: 2px; }

.spec {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  border-top: 1px solid var(--line);
}
.spec li {
  display: flex; gap: var(--sp-4); justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.spec dt, .spec .spec__k { color: var(--text-2); flex: none; }
.spec dd, .spec .spec__v { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }

.acc { border-top: 1px solid var(--line); margin-top: var(--sp-6); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  width: 100%; min-height: 58px; padding: 16px 0;
  font-size: var(--fs-sm); font-weight: 600; text-align: left; color: var(--text);
}
.acc__btn .chev { width: 16px; height: 16px; color: var(--bronze-ink); transition: transform var(--dur-2) var(--ease); }
.acc__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.acc__panel { display: none; padding-bottom: var(--sp-5); }
.acc__panel[data-open="true"] { display: block; }
.acc__panel p, .acc__panel li { font-size: var(--fs-sm); color: var(--text-2); }
.acc__panel ul { margin: 0; padding-left: 1.15em; }
.acc__panel li + li { margin-top: 6px; }
.acc__panel .prose { white-space: pre-line; }

/* Shipping tiers — states the size of the job without inventing a promise */
.ship { display: grid; gap: var(--sp-3); }
.ship__row {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper);
}
.ship__row[data-active="true"] { border-color: var(--bronze); background: #FDFBF6; }
.ship__row svg { width: 20px; height: 20px; color: var(--bronze-ink); margin-top: 2px; }
.ship__row b { display: block; font-size: var(--fs-sm); }
.ship__row span { font-size: var(--fs-xs); color: var(--text-2); }

/* ---------- 12  STORY / TRADE / FORMS ------------------------------------ */
.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5;
}
.section--ink .figure figcaption { color: var(--text-on-ink-2); }

.mosaic {
  display: grid; gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(2, 1fr);
}
.mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
.mosaic__tall { grid-row: span 2; }
.mosaic__tall img { aspect-ratio: 3/4; }
.mosaic__wide img { aspect-ratio: 4/3; }

.stat-row {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.stat b {
  display: block; font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); font-weight: 600;
  line-height: 1; color: var(--bronze-ink);
  font-variant-numeric: tabular-nums;
}
.section--ink .stat b { color: var(--bronze-hi); }
.stat span {
  display: block; margin-top: var(--sp-3);
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2);
}
.section--ink .stat span { color: var(--text-on-ink-2); }

.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field { display: grid; gap: 7px; }
.field > label {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-2);
}
.field .req { color: var(--sale); }
.field .input, .field .select, .field textarea {
  width: 100%; min-height: 50px;
  padding: 13px 15px;
  font-size: 1rem;                     /* 16px avoids the iOS focus zoom */
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field .hint { font-size: var(--fs-xs); color: var(--text-3); }
.field .err { font-size: var(--fs-xs); font-weight: 600; color: var(--sale); display: none; }
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] textarea { border-color: var(--sale); background: var(--sale-soft); }
.field[data-invalid="true"] .err { display: block; }

/* A form placed on a dark section inherits none of the light-surface text
   colours. Without these the trade form's labels sat at 2.6:1 on the ink
   background — legible to nobody. */
.section--ink .field > label { color: var(--text-on-ink); }
.section--ink .field .hint   { color: var(--text-on-ink-2); }
.section--ink .field .req    { color: var(--sale-on-ink); }
.section--ink .field .err    { color: var(--sale-on-ink); }
.section--ink .field[data-invalid="true"] .input,
.section--ink .field[data-invalid="true"] .select,
.section--ink .field[data-invalid="true"] textarea { border-color: var(--sale-on-ink); }

.form__summary {
  display: none;
  padding: var(--sp-4) var(--sp-5);
  border: 1.5px solid var(--sale); border-left-width: 4px;
  border-radius: var(--r); background: var(--sale-soft);
}
.form__summary[data-show="true"] { display: block; }
.form__summary h3 { font-size: 1.05rem; color: var(--sale); margin-bottom: var(--sp-2); }
.form__summary ul { margin: 0; padding-left: 1.15em; font-size: var(--fs-sm); }
.form__summary a { color: var(--sale); }

.form__success {
  display: none;
  padding: var(--sp-6);
  border: 1.5px solid var(--success); border-radius: var(--r-lg);
  background: #F1F7F3;
}
.form__success[data-show="true"] { display: block; }
.form__success h3 { color: var(--success); margin-bottom: var(--sp-2); }

/* ---------- 13  FOOTER ---------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--text-on-ink-2);
  padding-block: clamp(48px, 6vw, 80px) var(--sp-6);
  font-size: var(--fs-sm);
}
.footer__grid {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(220,178,113,.16);
}
.footer .brand__name { font-size: 1.15rem; }
.footer__about { margin-top: var(--sp-4); max-width: 34ch; line-height: 1.65; }
.footer h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: var(--sp-4);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer ul a {
  display: inline-block; padding: 6px 0;
  color: var(--text-on-ink-2); text-decoration: none;
}
.footer ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__contact { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer__contact a { display: inline-flex; align-items: center; gap: 10px; color: var(--text-on-ink); text-decoration: none; }
.footer__contact svg { width: 16px; height: 16px; color: var(--bronze); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-top: var(--sp-5);
  font-size: var(--fs-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__legal a { color: var(--text-on-ink-2); text-decoration: none; }
.footer__legal a:hover { color: #fff; }

/* ---------- 14  UTILITIES, MOTION ---------------------------------------- */
.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;
}
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }

/* Scroll reveal is decoration, never a gate on the content.
   .reveal on its own does nothing. The hidden start state lives on
   .reveal--armed, which the script adds to each element immediately before it
   starts observing it. So if the script is blocked, fails, or the frame never
   renders, the content was simply never hidden in the first place. */
.reveal--armed { opacity: 0; transform: translateY(18px); }
.reveal--armed.is-in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .megamenu { transition: none; }
}

@media print {
  .header, .footer, .announce, .drawer, .shopbar, .hero__media { display: none !important; }
  body { background: #fff; color: #000; }
}