/* ==========================================================================
   EDS WoodWorx — base.css
   Design tokens first, then base, layout, components, sections.
   Colors are fixed here on purpose: every pairing below is checked for
   WCAG 2.2 AA contrast. Change them only after re-checking contrast.
   ========================================================================== */

:root {
  /* Color — named for the shop, not the screen */
  --walnut: #3A281C;        /* headings, nav, primary buttons  (12.7:1 on cream) */
  --walnut-deep: #2A1D14;   /* hover state for walnut */
  --charcoal: #23201C;      /* body text                        (14.7:1 on cream) */
  --cream: #F8F3EA;         /* page background */
  --parchment: #EDE3D1;     /* alternate section background */
  --oak: #8A5420;           /* accent TEXT and links            (5.6:1 on cream) */
  --honey: #C8924A;         /* accent FILLS only, never text on cream (2.5:1) */
  --forest: #2E4A3B;        /* utility: made-to-order badge, success (8.8:1) */
  --stone: #5E5246;         /* secondary text                   (6.9:1 on cream) */
  --rule: #8C7B68;          /* form borders, meaningful dividers (3.7:1) */
  --rule-soft: #D9CCB6;     /* decorative dividers only */
  --error: #9B2C1F;         /* errors, always paired with text + icon */
  --white: #FFFDF9;

  /* Type — 18px base for an older, gift-buying audience; 1.25 scale */
  --text-sm: 0.889rem;   /* 16px */
  --text-base: 1rem;     /* 18px */
  --text-md: 1.25rem;    /* 22.5px */
  --text-lg: 1.563rem;   /* 28px */
  --text-xl: 1.953rem;   /* 35px */
  --text-2xl: 2.441rem;  /* 44px */
  --text-hero: clamp(2.6rem, 6.5vw, 4.6rem);
  --leading-body: 1.6;
  --leading-heading: 1.15;
  --measure: 66ch;

  /* Space — 8px base */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4.5rem; --s-9: 6.5rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --page-max: 78rem;

  /* Shape — tool-edge corners: small and consistent by role */
  --radius-control: 4px;
  --radius-media: 2px;
  --tap: 48px;           /* minimum tap target */
  --focus: 3px solid var(--oak);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
/* Keep jump-link targets clear of the sticky header. (Not scroll-padding on html: Chrome applies that
   when restoring the scroll position on refresh, so the page crept a few pixels on every reload.) */
:target { scroll-margin-top: 6.5rem; }
/* Chrome's scroll anchoring restored the position a few pixels off on every refresh (it rounds
   fractional layout sizes). Every image here reserves its space, so anchoring isn't needed. */
html, body { overflow-anchor: none; }
body {
  margin: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-heading, Georgia, serif);
  font-weight: 400;
  line-height: var(--leading-heading);
  color: var(--walnut);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-md); font-weight: 600; }
p { margin: 0 0 var(--s-4); max-width: var(--measure); }
a { color: var(--oak); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--walnut); text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus); outline-offset: 3px; }
.main:focus { outline: none; }
hr { border: 0; border-top: 1px solid var(--rule-soft); margin: var(--s-6) 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--walnut); color: var(--cream); padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-control);
}
.skip-link:focus { top: var(--s-4); color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Layout ---------- */
.page-width { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--s-8) 0; }
.section--tight { padding: var(--s-7) 0; }
.section--parchment { background: var(--parchment); }
.section--walnut { background: var(--walnut); color: var(--cream); }
.section--walnut h2, .section--walnut h3 { color: var(--cream); }
.section--walnut a:not(.button) { color: var(--cream); }
.section__head { margin-bottom: var(--s-6); max-width: 44rem; }
.section__head p { color: var(--stone); font-size: var(--text-md); }
.section--walnut .section__head p { color: #E6DAC6; }
.section__foot { margin-top: var(--s-6); }
.stack > * + * { margin-top: var(--s-4); }
.grid { display: grid; gap: var(--s-6) var(--s-5); }
@media (min-width: 750px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 990px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.rte { max-width: var(--measure); }
.rte h2 { margin-top: var(--s-7); }
.rte h3 { margin-top: var(--s-6); }
.rte ul, .rte ol { padding-left: 1.2em; }
.rte li + li { margin-top: var(--s-2); }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0.7rem 1.6rem;
  font: 600 var(--text-base)/1.2 var(--font-body);
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--walnut); border-radius: var(--radius-control);
  background: var(--walnut); color: var(--cream);
  transition: background-color .15s ease, color .15s ease;
}
.button:hover { background: var(--walnut-deep); border-color: var(--walnut-deep); color: var(--cream); text-decoration: none; }
.button--secondary { background: transparent; color: var(--walnut); }
.button--secondary:hover { background: var(--walnut); color: var(--cream); }
.button--light { background: var(--cream); border-color: var(--cream); color: var(--walnut); }
.button--light:hover { background: var(--white); color: var(--walnut); }
.button--full { width: 100%; }
.button--large { min-height: 56px; font-size: var(--text-md); }
.button[disabled], .button[aria-disabled="true"] {
  background: var(--parchment); border-color: var(--rule); color: var(--stone); cursor: not-allowed;
}
.button-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--oak); text-decoration: underline; cursor: pointer; min-height: var(--tap); }

/* ---------- Made-to-order badge (the brand's signature device) ---------- */
.mto-badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.2em 0.7em 0.2em 0.45em;
  font: 600 var(--text-sm)/1.4 var(--font-body);
  color: var(--forest); background: var(--cream);
  border: 1.5px solid var(--forest); border-radius: 999px;
  white-space: nowrap;
}
.mto-badge svg { width: 1.15em; height: 1.15em; flex: none; }
.mto-badge--ready { color: var(--walnut); border-color: var(--walnut); }
.mto-badge--unavailable { color: var(--stone); border-color: var(--rule); border-style: dashed; }
.section--walnut .mto-badge { background: transparent; color: var(--cream); border-color: var(--cream); }

.lead-time {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); background: var(--parchment);
  border-left: 4px solid var(--forest); border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
.lead-time svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--forest); margin-top: 2px; }
.lead-time p { margin: 0; }
.lead-time p + p { margin-top: var(--s-1); color: var(--stone); font-size: var(--text-sm); }
.availability-note { display: inline-flex; gap: var(--s-2); align-items: center; font-weight: 600; color: var(--forest); }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--s-5); }
.field label, .field legend, .field__label {
  display: block; font-weight: 600; color: var(--walnut); margin-bottom: var(--s-2);
}
.field__hint { display: block; color: var(--stone); font-size: var(--text-sm); margin: calc(-1 * var(--s-1)) 0 var(--s-2); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="number"],
.field input[type="date"], .field input[type="search"], .field select, .field textarea {
  width: 100%; min-height: var(--tap); padding: 0.65rem 0.85rem;
  font: inherit; color: var(--charcoal); background: var(--white);
  border: 1.5px solid var(--rule); border-radius: var(--radius-control);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%233A281C' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 1rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--focus); outline-offset: 1px; border-color: var(--walnut); }
.field [aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.field__error { display: flex; gap: var(--s-2); align-items: center; color: var(--error); font-weight: 600; font-size: var(--text-sm); margin-top: var(--s-2); }
.field__error[hidden] { display: none; }
.field__count { display: block; text-align: right; color: var(--stone); font-size: var(--text-sm); margin-top: var(--s-1); }
.checkbox { display: flex; gap: var(--s-3); align-items: flex-start; min-height: var(--tap); padding-top: var(--s-2); cursor: pointer; }
.checkbox input { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; accent-color: var(--walnut); flex: none; }
.form-status { padding: var(--s-4); border-radius: var(--radius-control); margin-bottom: var(--s-5); border: 2px solid; }
.form-status--success { border-color: var(--forest); color: var(--forest); background: #EAF0EA; }
.form-status--error { border-color: var(--error); color: var(--error); background: #F8E9E6; }
.form-status ul { margin: var(--s-2) 0 0; }
fieldset { border: 0; padding: 0; margin: 0; }
.required { color: var(--error); }

/* Option buttons for variants (radios styled as chips; text, not color, carries meaning) */
.option-group { margin-bottom: var(--s-5); }
.option-group__values { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.option-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-chip span {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0.4rem 1rem;
  border: 1.5px solid var(--rule); border-radius: var(--radius-control); background: var(--white);
  cursor: pointer; font-weight: 600; color: var(--charcoal);
}
.option-chip input:checked + span { border: 2px solid var(--walnut); background: var(--walnut); color: var(--cream); }
.option-chip input:focus-visible + span { outline: var(--focus); outline-offset: 2px; }
.option-chip input.is-unavailable + span { text-decoration: line-through; color: var(--stone); }

.qty { display: inline-flex; border: 1.5px solid var(--rule); border-radius: var(--radius-control); background: var(--white); }
.qty button { width: var(--tap); min-height: var(--tap); border: 0; background: none; font-size: 1.3rem; color: var(--walnut); cursor: pointer; }
.qty input, .field .qty input[type="number"] { width: 3.5rem; min-height: var(--tap); padding: 0; border: 0; text-align: center; font: inherit; background: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Announcement + header ---------- */
.announcement { background: var(--walnut); color: var(--cream); text-align: center; font-size: var(--text-sm); }
.announcement p { margin: 0 auto; padding: var(--s-2) var(--gutter); max-width: none; }
.announcement a { color: var(--cream); }

.site-header { background: var(--cream); border-bottom: 1px solid var(--rule-soft); position: sticky; top: 0; z-index: 20; }
.site-header__inner { display: flex; align-items: center; gap: var(--s-4); min-height: 76px; }
.site-header__logo { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--walnut); margin-right: auto; }
.site-header__logo:hover { color: var(--walnut); }
.wordmark { font-family: var(--font-heading); font-size: 1.45rem; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; }
.wordmark__eds { font-weight: 600; }
.ring-mark { width: 40px; height: 40px; color: var(--walnut); flex: none; }
.site-nav { display: none; }
.site-nav a { white-space: nowrap; }
.site-nav ul { list-style: none; display: flex; gap: var(--s-1); margin: 0; padding: 0; }
.site-nav a { display: flex; align-items: center; min-height: var(--tap); padding: 0 0.45rem; font-size: 0.944rem; color: var(--walnut); text-decoration: none; font-weight: 600; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.header-icons { display: flex; align-items: center; }
.icon-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); color: var(--walnut); background: none; border: 0; cursor: pointer; border-radius: var(--radius-control); }
.icon-link svg { width: 24px; height: 24px; }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 999px; background: var(--forest); color: var(--cream); font-size: 0.72rem; font-weight: 700; line-height: 1.3rem; text-align: center; }
.menu-toggle { display: inline-flex; }
@media (min-width: 1280px) {
  .site-nav { display: block; }
  .menu-toggle { display: none; }
}
.mobile-nav { border-top: 1px solid var(--rule-soft); background: var(--cream); }
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: var(--s-2) 0 var(--s-5); }
.mobile-nav a { display: flex; align-items: center; min-height: 56px; padding: 0 var(--gutter); font-size: var(--text-md); color: var(--walnut); text-decoration: none; border-bottom: 1px solid var(--rule-soft); }
.mobile-nav .mobile-nav__secondary a { font-size: var(--text-base); min-height: var(--tap); color: var(--stone); border: 0; }

.search-bar { background: var(--parchment); padding: var(--s-4) 0; }
.search-bar[hidden] { display: none; }
.search-form { display: flex; gap: var(--s-2); }
.search-form .field { flex: 1; margin: 0; }

/* ---------- Media + placeholders ---------- */
.media { position: relative; overflow: hidden; background: var(--parchment); border-radius: var(--radius-media); }
.media img, .media svg { width: 100%; height: 100%; object-fit: cover; }
.media--square { aspect-ratio: 1; }
.media--portrait { aspect-ratio: 4 / 5; }
.media--landscape { aspect-ratio: 3 / 2; }
.media--wide { aspect-ratio: 16 / 9; }
.placeholder { display: grid; place-items: center; text-align: center; color: var(--stone); background:
  repeating-radial-gradient(ellipse at 30% 110%, transparent 0 14px, rgba(138,84,32,.07) 14px 15px), var(--parchment); }
.placeholder span { padding: var(--s-2) var(--s-3); background: var(--cream); font-size: var(--text-sm); border-radius: var(--radius-control); max-width: 80%; }

/* ---------- Hero ---------- */
.hero { padding: var(--s-7) 0 var(--s-8); }
.hero__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--s-8); } }
.hero__eyebrow { font-family: var(--font-heading); font-style: italic; font-size: var(--text-md); color: var(--oak); margin-bottom: var(--s-3); }
.hero__title { font-size: var(--text-hero); line-height: 1.02; letter-spacing: -0.01em; margin-bottom: var(--s-5); }
.hero__title span { display: block; }
.hero__title .hero__title-last { font-style: italic; color: var(--walnut); margin-top: 0.08em; }
.hero__body { font-size: var(--text-md); color: var(--stone); margin-bottom: var(--s-6); }
.hero__media .media { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .hero__media .media { aspect-ratio: 5 / 6; } }
.hero__availability { margin-top: var(--s-5); }

/* ---------- Category tiles ---------- */
.category-tile { display: block; text-decoration: none; color: inherit; }
.category-tile .media { aspect-ratio: 4 / 5; margin-bottom: var(--s-4); }
.category-tile h3 { font-size: var(--text-lg); font-weight: 400; margin-bottom: var(--s-2); }
.category-tile p { color: var(--stone); margin-bottom: var(--s-2); }
.category-tile__cta { font-weight: 600; color: var(--oak); text-decoration: underline; }
.category-tile:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------- Process steps (a true sequence, so numbered) ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-6); counter-reset: step; }
@media (min-width: 750px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: step; position: relative; padding-top: var(--s-2); }
.step::before {
  content: counter(step); display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem; margin-bottom: var(--s-4);
  font-family: var(--font-heading); font-size: var(--text-lg); color: var(--walnut);
  background: var(--honey); border-radius: 50%;
}
.section--walnut .step::before { background: var(--honey); color: var(--walnut); }
.step h3 { margin-bottom: var(--s-2); }
.step p { margin: 0; }

/* ---------- Product card ---------- */
.product-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 990px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .product-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .product-grid { grid-template-columns: 1fr; } }
.card { position: relative; display: flex; flex-direction: column; height: 100%; }
.card .media { aspect-ratio: 1; margin-bottom: var(--s-3); }
.card .media img { transition: transform .4s ease; }
.card:hover .media img { transform: scale(1.03); }
.card__category { font-size: var(--text-sm); color: var(--stone); margin: 0 0 var(--s-1); }
.card__title { font-family: var(--font-heading); font-size: var(--text-md); font-weight: 400; line-height: 1.25; margin: 0 0 var(--s-2); }
.card__title a { color: var(--walnut); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable, one link in tab order */
.card__title a:focus-visible { outline: none; }
.card:focus-within { outline: var(--focus); outline-offset: 4px; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: auto; }
.price { font-weight: 700; color: var(--charcoal); font-size: var(--text-base); }
.price s { font-weight: 400; color: var(--stone); margin-left: var(--s-2); }

/* ---------- Benefits ---------- */
.benefit { border-top: 2px solid var(--walnut); padding-top: var(--s-4); }
.benefit svg { width: 2rem; height: 2rem; color: var(--oak); margin-bottom: var(--s-3); }
.benefit h3 { margin-bottom: var(--s-2); }
.benefit p { margin: 0; color: var(--stone); }

/* ---------- Split (image + text) ---------- */
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split--reverse .split__media { order: 2; }
}
.split__media .media { aspect-ratio: 4 / 5; }
.placeholder-note { font-size: var(--text-sm); color: var(--stone); font-style: italic; }

/* ---------- Newsletter ---------- */
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; max-width: 36rem; }
.newsletter__form .field { flex: 1 1 16rem; margin: 0; }
.section--walnut .field label { color: var(--cream); }
.newsletter__fine { font-size: var(--text-sm); margin-top: var(--s-3); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: var(--text-sm); padding-top: var(--s-4); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--rule); }
.breadcrumbs a { color: var(--stone); }
.breadcrumbs [aria-current] { color: var(--charcoal); }

/* ---------- Collection ---------- */
.collection-hero { padding-block: var(--s-6) var(--s-5); }
.collection-hero p { color: var(--stone); font-size: var(--text-md); }
.collection-hero .mto-inline { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-4); }
.collection-hero .mto-inline p { font-size: var(--text-base); margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); margin-bottom: var(--s-6); }
.toolbar .field { margin: 0; min-width: 14rem; }
.toolbar__count { color: var(--stone); margin: 0; }
.pagination { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-7); list-style: none; padding: 0; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: 0 var(--s-3); border: 1.5px solid var(--rule); border-radius: var(--radius-control); text-decoration: none; color: var(--walnut); }
.pagination [aria-current] { background: var(--walnut); color: var(--cream); border-color: var(--walnut); }
.empty-state { padding-block: var(--s-7); }

/* ---------- Product page ---------- */
.product { display: grid; gap: var(--s-6); padding-block: var(--s-5) var(--s-8); }
@media (min-width: 990px) { .product { grid-template-columns: 1.15fr 1fr; gap: var(--s-8); align-items: start; } }
@media (min-width: 990px) { .product__info { position: sticky; top: 6.5rem; } }
.gallery__main { position: relative; }
.gallery__main .media { aspect-ratio: 1; }
.gallery__slide[hidden] { display: none; }
.gallery__zoom { position: absolute; right: var(--s-3); bottom: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-4); background: var(--cream); color: var(--walnut); border: 1.5px solid var(--walnut); border-radius: var(--radius-control); font-weight: 600; cursor: pointer; }
.gallery__zoom svg { width: 20px; height: 20px; }
.gallery__thumbs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; }
.gallery__thumb { display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: var(--radius-media); background: none; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--walnut); }
.zoom-dialog { width: min(96vw, 1400px); max-height: 94vh; padding: 0; border: 0; background: var(--cream); border-radius: var(--radius-media); }
.zoom-dialog::backdrop { background: rgba(35, 32, 28, .85); }
.zoom-dialog__inner { position: relative; overflow: auto; max-height: 94vh; }
.zoom-dialog img { width: 100%; height: auto; }
.zoom-dialog__close { position: sticky; top: var(--s-3); float: right; margin: var(--s-3); z-index: 2; }

.product__title { font-size: var(--text-2xl); margin-bottom: var(--s-3); }
.product__badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.product__price { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--s-2); }
.product__summary { font-size: var(--text-md); color: var(--stone); margin-bottom: var(--s-5); }
.product__form { margin-top: var(--s-5); }
.product__form .lead-time { margin-bottom: var(--s-5); }
.product__buttons { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.product__extras { border-top: 1px solid var(--rule-soft); padding-top: var(--s-5); margin-top: var(--s-2); }
.product__help { margin-top: var(--s-5); font-size: var(--text-sm); color: var(--stone); }
.product__help a { font-weight: 600; }
.shopify-payment-button__button { min-height: 56px !important; border-radius: var(--radius-control) !important; font-family: var(--font-body) !important; }
.engraving-preview { margin-top: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--parchment); border: 1px dashed var(--rule); font-family: var(--font-heading); font-size: var(--text-md); color: var(--walnut); min-height: 3rem; overflow-wrap: anywhere; }

/* Accordions: native <details> — keyboard and screen reader support built in */
.accordion { border-top: 1px solid var(--rule); margin-top: var(--s-6); }
.accordion details { border-bottom: 1px solid var(--rule); }
.accordion summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 60px; cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: var(--text-md); color: var(--walnut); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-family: var(--font-body); font-size: 1.6rem; line-height: 1; color: var(--oak); }
.accordion details[open] summary::after { content: "–"; }
.accordion__content { padding: 0 0 var(--s-5); }
.accordion__content p:last-child { margin-bottom: 0; }
.spec-list { display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); gap: var(--s-2) var(--s-5); margin: 0; }
.spec-list dt { font-weight: 600; color: var(--walnut); }
.spec-list dd { margin: 0; }
.variation-note { display: flex; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--rule-soft); border-radius: var(--radius-control); margin-top: var(--s-5); }
.variation-note svg { flex: none; width: 1.6rem; height: 1.6rem; color: var(--oak); }
.variation-note p { margin: 0; }

/* ---------- Cart ---------- */
.cart { padding-block: var(--s-6) var(--s-8); }
.cart__layout { display: grid; gap: var(--s-7); }
@media (min-width: 990px) { .cart__layout { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.cart-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cart-item { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 600px) { .cart-item { grid-template-columns: 130px 1fr auto; } }
.cart-item .media { aspect-ratio: 1; }
.cart-item__title { font-family: var(--font-heading); font-size: var(--text-md); margin: 0 0 var(--s-1); }
.cart-item__title a { color: var(--walnut); text-decoration: none; }
.cart-item__props { margin: var(--s-2) 0; font-size: var(--text-sm); color: var(--stone); }
.cart-item__props dt { display: inline; font-weight: 600; }
.cart-item__props dd { display: inline; margin: 0; }
.cart-item__props div + div { margin-top: var(--s-1); }
.cart-item__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-top: var(--s-3); }
.cart-item__total { font-weight: 700; text-align: right; }
.summary { background: var(--parchment); padding: var(--s-6); border-radius: var(--radius-control); }
.summary h2 { font-size: var(--text-lg); }
.summary__row { display: flex; justify-content: space-between; font-size: var(--text-md); font-weight: 700; padding: var(--s-3) 0; border-top: 1px solid var(--rule); }
.summary__note { font-size: var(--text-sm); color: var(--stone); }
.summary .lead-time { background: var(--cream); margin: var(--s-4) 0; }
.summary .button { margin-top: var(--s-4); }
.summary__policies { font-size: var(--text-sm); margin-top: var(--s-4); }

/* ---------- FAQ / pages ---------- */
.page-head { padding-block: var(--s-7) var(--s-4); }
.page-head p { font-size: var(--text-md); color: var(--stone); }
.owner-note { border: 2px dashed var(--honey); background: #FBF1E2; padding: var(--s-4); border-radius: var(--radius-control); margin: var(--s-5) 0; }
.owner-note strong { color: var(--walnut); }
.faq-group + .faq-group { margin-top: var(--s-7); }
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 750px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-grid figure { margin: 0; }
.gallery-grid figcaption { font-size: var(--text-sm); color: var(--stone); margin-top: var(--s-2); }
.contact-layout { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.4fr 1fr; } }
.contact-aside { background: var(--parchment); padding: var(--s-6); border-radius: var(--radius-control); align-self: start; }
.contact-aside h2 { font-size: var(--text-lg); }
.form-narrow { max-width: 42rem; }

/* ---------- Reviews (hidden until real reviews exist) ---------- */
.review { margin: 0; padding: var(--s-5); background: var(--cream); border-left: 3px solid var(--honey); }
.review p { font-family: var(--font-heading); font-size: var(--text-md); color: var(--walnut); }
.review footer { color: var(--stone); font-size: var(--text-sm); }

/* ---------- Footer ---------- */
.site-footer { background: var(--walnut-deep); color: #E6DAC6; padding: var(--s-8) 0 var(--s-5); font-size: var(--text-sm); }
.site-footer a { color: #F3EBDD; }
.site-footer h2 { color: var(--cream); font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; margin-bottom: var(--s-3); }
.site-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.site-footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .site-footer__brand { grid-column: auto; } }
.site-footer__brand .wordmark { color: var(--cream); font-size: 1.6rem; }
.site-footer__brand .ring-mark { color: var(--honey); width: 48px; height: 48px; margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 40px; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(243,235,221,.25); }
.site-footer__bottom p { margin: 0; }
.social-links { display: flex; gap: var(--s-2); }
.social-links a { display: inline-flex; width: var(--tap); height: var(--tap); align-items: center; justify-content: center; }
.social-links svg { width: 22px; height: 22px; }

/* ---------- Print: keep it plain for order printouts ---------- */
@media print {
  .site-header, .announcement, .site-footer, .skip-link { display: none; }
}
.availability-note svg { width: 1.3em; height: 1.3em; flex: none; }
.filters summary { list-style: none; }
.filters summary::-webkit-details-marker { display: none; }

.gallery__thumbs .placeholder span { font-size: 0.72rem; padding: 2px 4px; max-width: 92%; line-height: 1.25; }
@media (max-width: 480px) {
  .site-header__inner { gap: var(--s-2); }
  .site-header__logo { gap: var(--s-2); }
  .site-header .ring-mark { width: 32px; height: 32px; }
  .wordmark { font-size: 1.15rem; }
}
@media (max-width: 359px) { .site-header .ring-mark { display: none; } }
.product > *, .split > *, .cart__layout > *, .contact-layout > * { min-width: 0; }
.spec-list dd { overflow-wrap: anywhere; }
@media (max-width: 480px) { .hero .button-row .button { width: 100%; } }

/* ==========================================================================
   Static-site additions
   ========================================================================== */
:root {
  --font-heading: Lora, Georgia, "Times New Roman", serif;
  --font-body: Assistant, "Segoe UI", system-ui, -apple-system, sans-serif;
}
ul.grid, ul.gallery-grid { list-style: none; padding: 0; margin: 0; }
.section--flush-top { padding-top: 0; }
.section-pad-bottom { padding-bottom: var(--s-8); }
.section-spacer { height: var(--s-8); }
.mto-heading { margin-top: var(--s-4); }
.section--walnut .section__foot p { color: #E6DAC6; }
.section--walnut .availability-note { color: #CFE3D5; }
.hero__availability:empty { display: none; }
.product__checkout-note { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-3) 0 0; font-size: var(--text-sm); color: var(--stone); }
.product__checkout-note svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.2rem; }
span.button[aria-disabled="true"] { background: var(--parchment); border-color: var(--rule); color: var(--stone); cursor: not-allowed; }
.noscript-variants { margin: var(--s-3) 0 0; padding-left: 1.2em; }
.faq-wrap { max-width: 52rem; }
.accordion--faq { border-top: 0; margin-top: 0; }
.faq-group__title { margin: var(--s-7) 0 var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.faq-group__title:first-child { margin-top: 0; }
.faq-foot { margin-top: var(--s-7); }
.search-results { list-style: none; padding: 0; margin: var(--s-5) 0 0; }
.search-results li { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule-soft); }
.search-results a { font-family: var(--font-heading); font-size: var(--text-md); }
.search-results__kind { margin-left: var(--s-3); font-size: var(--text-sm); color: var(--stone); }
.search-results p { margin: var(--s-1) 0 0; color: var(--stone); }
.site-header .header-icons { margin-left: var(--s-2); }
.form-status p { margin: 0; }