/* Gnome and Garden site stylesheet
   Direction C3, "Rust and sage": a warm linen page, rust as the primary
   accent and button color, a deepened sage for links, focus, and the CTA
   band, and a bookish serif. Change a token here and it changes
   everywhere on the site. */

:root {
  /* Warm surfaces, darkest to lightest */
  --linen: #f4ede3;
  --cream: #f4ede3;
  --paper: #fbf7f0;
  --offwhite: var(--linen);
  --white: var(--cream);

  --cement: #d6c9b6;
  --moss: #6b7f5e;
  --moss-dark: #55684a;
  --ochre: #9e3b24;
  --ochre-hover: #b14a30;
  --ochre-deep: #6e2a19;
  --on-ochre: #fbe3db;

  --charcoal: #3a2a22;
  --ink-soft: #5a473a;
  --ink-muted: #6e5a4a;
  --ink-faint: #8a7768;
  --line: #e1d6c6;
  --line-soft: #e8ded0;
  --field: #d5c8b6;
  --slot: #d9ccb8;

  --footer-bg: #3a2a22;
  --footer-text: #f0e6d8;
  --footer-muted: #cbb9a4;
  --footer-line: #58453a;
  --footer-field: #4a382d;

  --serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;

  --pad: 64px;
  --radius: 14px;
}

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

/* Must beat any display: rule below, or [hidden] elements still paint */
[hidden] {
  display: none !important;
}

/* Visible to screen readers only */
.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;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.serif {
  font-family: var(--serif);
  margin: 0;
  font-weight: 500;
  letter-spacing: 0;
}

p {
  margin: 0;
}

a {
  color: var(--moss);
  text-decoration: none;
}

a:hover {
  color: var(--moss-dark);
}

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

/* Skip link: keyboard users land here first */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--charcoal);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  left: 0;
  color: var(--white);
}

:focus-visible {
  outline: 3px solid var(--moss);
  outline-offset: 2px;
}

/* ---------- Layout ---------- */

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.section {
  padding-top: 88px;
  padding-bottom: 88px;
}

.section--tight {
  padding-top: 32px;
  padding-bottom: 32px;
}

.section--white {
  background: var(--white);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.stack {
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ochre-deep);
}

.mono {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
}

.lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 44px;
}

.section--tight .section-head {
  margin-bottom: 28px;
}

/* Four service cards in one row on the Statue on Demand landing page */
.cards-3.cards-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.section-head h2 {
  font-size: 40px;
}

.section-head p {
  font-size: 18px;
  color: var(--ink-muted);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn--primary {
  background: var(--ochre);
  color: var(--on-ochre);
}

.btn--primary:hover {
  background: var(--ochre-hover);
  color: var(--on-ochre);
}

.btn--secondary {
  border: 1.5px solid var(--charcoal);
  color: var(--charcoal);
  background: transparent;
}

.btn--secondary:hover {
  background: var(--charcoal);
  color: var(--white);
}

.btn--light {
  background: var(--offwhite);
  color: var(--charcoal);
}

.btn--sage {
  background: var(--moss);
  color: var(--paper);
}

.btn--sage:hover {
  background: #5d7051;
  color: var(--paper);
}

.btn--light:hover {
  background: var(--white);
  color: var(--charcoal);
}

.btn--accent {
  background: var(--ochre);
  color: var(--on-ochre);
}

.btn--accent:hover {
  background: var(--ochre-hover);
  color: var(--on-ochre);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--field);
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* ---------- Image slots ---------- */

.slot {
  background: var(--slot);
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shown by js when the real photo is not in place yet. Covers .tile as
   well as .slot; without the .tile case a missing tile photo rendered
   its raw alt text across the tile instead of the gray placeholder. */
.slot img.is-missing,
.tile img.is-missing {
  display: none;
}

.slot__label {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-align: center;
  padding: 12px;
}

.slot.is-empty .slot__label,
.tile.is-empty .slot__label {
  display: flex;
}

.ratio-16x9 {
  aspect-ratio: 16 / 9;
}
.ratio-4x3 {
  aspect-ratio: 4 / 3;
}
.ratio-3x4 {
  aspect-ratio: 3 / 4;
}
.ratio-1x1 {
  aspect-ratio: 1 / 1;
}
.ratio-wide {
  aspect-ratio: 21 / 7;
}
/* Shorter than 4:3 so the hero photo doesn't push the fold below a
   typical laptop viewport once the header and copy are stacked above it */
.ratio-hero {
  aspect-ratio: 16 / 11;
}

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--offwhite);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--charcoal);
}

.brand__mark {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
}

.brand__name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 16px;
  font-weight: 500;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--charcoal);
  background: none;
  border: 0;
  font: inherit;
  padding: 26px 0;
  cursor: pointer;
}

.nav__link[aria-current="page"] {
  color: var(--moss);
  box-shadow: inset 0 -2px 0 var(--moss);
}

/* Section labels are links; the caret beside them opens the list */
.nav__item--menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__caret {
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 26px 4px;
  color: var(--charcoal);
  cursor: pointer;
}

.nav__caret svg {
  transition: transform 0.15s ease;
}

.nav__caret[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* With a mouse the list opens on hover, no click needed */
@media (min-width: 901px) and (hover: hover) {
  .nav__item--menu:hover .nav__menu,
  .nav__item--menu:focus-within .nav__menu {
    display: flex;
  }
}

.nav__menu {
  position: absolute;
  top: 100%;
  left: -8px;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(63, 50, 41, 0.14);
  padding: 8px;
  display: none;
  flex-direction: column;
}

.nav__menu[data-open="true"] {
  display: flex;
}

.nav__menu a {
  padding: 11px 14px;
  border-radius: 6px;
  color: var(--charcoal);
  font-size: 16px;
}

.nav__menu a:hover {
  background: var(--offwhite);
  color: var(--charcoal);
}

.nav__menu hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 8px;
}

.nav__menu .is-all {
  color: var(--moss);
  font-weight: 600;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.cart-btn {
  position: relative;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--charcoal);
  display: flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.cart-btn__count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ochre);
  color: var(--on-ochre);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 9px;
  cursor: pointer;
  color: var(--charcoal);
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 56px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Statue on Demand heroes: same content, less air, so the steps start
   within the first screen. The photo (when there is one) is capped too. */
.hero--compact {
  padding-top: 20px;
  padding-bottom: 32px;
  gap: 48px;
}

.hero--compact .hero__text {
  gap: 14px;
}

.hero--compact h1 {
  font-size: 44px;
}

.hero--compact .lede {
  font-size: 17px;
}

.hero--compact .btn-row {
  margin-top: 6px;
}

.hero--compact .slot {
  aspect-ratio: 3 / 2;
  max-height: 380px;
}

.hero--compact.is-photoless {
  padding-bottom: 20px;
}

/* Optional photos (Statue on Demand pages). The slot stays invisible
   until site.js has checked the file, then either shows or goes away.
   A hero without its photo drops to a single column of text with a
   comfortable measure. */
[data-optional-photo]:not(.has-photo) .slot {
  visibility: hidden;
}

[data-optional-photo].is-photoless .slot {
  display: none;
}

.hero[data-optional-photo].is-photoless {
  grid-template-columns: 1fr;
  padding-bottom: 24px;
}

.hero[data-optional-photo].is-photoless .hero__text {
  max-width: 720px;
}

.hero h1 {
  font-size: 50px;
  line-height: 1.12;
  text-wrap: pretty;
}

.hero .lede {
  max-width: 540px;
}

.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-row.process-cta {
  margin-top: 48px;
}

/* ---------- Sage band (the Boynton section) ----------
   A full-bleed sage block with paper cards on it. Header row: eyebrow,
   title and intro on the left, the collection link top right. */

.band-sage {
  background: var(--moss);
  color: var(--footer-text);
}

.band-sage h2 {
  color: var(--paper);
}

.eyebrow--honey {
  color: var(--honey);
}

.band-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}

.band-head__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
}

.band-head h2 {
  font-size: 40px;
}

.band-head__intro {
  font-size: 18px;
  color: #dce4d5;
  text-wrap: pretty;
}

.band-head__cta {
  flex: none;
}

/* Cards on the band: no border needed against sage; square photos.
   The Chicken photo is on a plain background, so it is shown whole
   (contain) instead of cropped to the square. Coming-soon tiles are a
   solid deep-moss panel until their photos exist. */
.band-sage .card {
  border: 0;
  /* The band's pale text must not leak into the paper cards */
  color: var(--charcoal);
}

/* The Chicken card photo is a square garden shot, so it fills its tile
   like every other card photo */
.card--available .card__media {
  background: var(--paper);
}

/* Coming-soon cards have no photo yet: a solid deep-moss panel with
   just the badge on it, in place of a placeholder */
.card__media--solid {
  position: relative;
  background: var(--moss-dark);
  border-radius: 10px;
}

.band-sage .badge--soon {
  background: var(--charcoal);
  color: var(--paper);
  border: 0;
}

.band-sage .card__price {
  font-weight: 600;
  color: var(--charcoal);
}

/* Card buttons may wrap on narrow cards rather than overflow */
.band-sage .card .btn {
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

/* ---------- Peeking chicken ----------
   Boynton's cartoon chicken rises out of the band's bottom-left corner
   the first time the band scrolls into view (site.js adds .is-in). The
   band itself cannot clip (the seam arrows straddle its edges), so this
   layer covers the band and does the clipping. Clicks pass through it. */
.peek {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.peek img {
  position: absolute;
  left: -14px;
  bottom: -10px;
  width: clamp(150px, 13vw, 240px);
  height: auto;
  transform: translateY(115%) rotate(-6deg);
  transform-origin: bottom left;
}

.peek.is-in img {
  animation: peek-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes peek-pop {
  0% {
    transform: translateY(115%) rotate(-6deg);
  }
  70% {
    transform: translateY(-6%) rotate(2deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

/* The band is not positioned below the desktop breakpoint, and the
   3-up card row leaves no corner to peek from */
@media (max-width: 900px) {
  .peek {
    display: none;
  }
}

/* ---------- Boynton card grid ----------
   One featured card for the Chicken (the only statue you can buy today)
   and the two coming-soon teasers stacked beside it. Above the mobile
   breakpoint every card is a row, photo on the left and details on the
   right, so the grid can stretch to fill the band's height. Below it
   the cards stack the usual way, photo on top. */

.boynton-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  min-height: 0;
}

.boynton-grid__stack {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 24px;
  min-height: 0;
}

.card__eyebrow {
  color: var(--ochre);
  margin-bottom: 0;
}

@media (min-width: 901px) {
  .boynton-grid .card {
    flex-direction: row;
    min-height: 0;
  }

  /* A fixed share of the card's width; the photo is contained inside,
     so the box being a touch off square never shows */
  .boynton-grid .card__media {
    flex: 0 0 50%;
    aspect-ratio: auto;
    min-height: 0;
  }

  .boynton-grid .card__body {
    justify-content: center;
    padding: 24px 28px 24px 8px;
    min-width: 0;
  }

  .boynton-grid .card__body .btn {
    margin-top: 12px;
  }

  .card--feature .card__media {
    flex-basis: 52%;
  }

  .card--feature .card__body {
    gap: 12px;
    padding: 28px 32px 28px 28px;
  }

  .card--feature .card__body h3 {
    font-size: clamp(30px, 5vh, 46px);
  }

  .card--feature .card__teaser {
    font-size: 17px;
  }

  .card--feature .card__price {
    font-size: 24px;
  }

  .boynton-grid .card--soon .card__body h3 {
    font-size: clamp(22px, 3.6vh, 32px);
  }

  .boynton-grid .card--soon .card__body {
    padding-left: 26px;
  }
}

/* ---------- Page hero (inner pages) ---------- */

.page-hero {
  padding-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.page-hero__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: end;
}

.page-hero h1 {
  font-size: 56px;
  line-height: 1.05;
}

.page-hero__title {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- Product cards ---------- */

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.section--white .card {
  background: var(--paper);
}

.card--available:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(63, 50, 41, 0.16);
}

.card--available:hover .card__media img {
  transform: scale(1.03);
}

.card__media {
  position: relative;
}

.card__media img {
  transition: transform 0.3s ease;
}

.badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge--available {
  background: var(--moss);
  color: var(--white);
}

.badge--soon {
  background: var(--offwhite);
  color: var(--charcoal);
  border: 1px solid var(--line);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 24px;
  flex-grow: 1;
}

.card__body h3 {
  font-size: 24px;
}

.card__price {
  font-size: 17px;
  color: var(--ink-soft);
}

.card__teaser {
  font-size: 16px;
  color: var(--ink-muted);
}

/* The teaser soaks up spare height so every card's button sits on the
   same line across a row, however long the copy above it runs */
.card__teaser {
  flex-grow: 1;
}

.card__body .btn {
  margin-top: auto;
  padding-top: 0;
}

.card__body .btn {
  margin-top: 14px;
}

/* ---------- Process steps ---------- */

.process-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
}

.process-intro h2 {
  font-size: 40px;
}

.process-intro p {
  font-size: 18px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step__rule {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step__num {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--ochre);
  color: var(--on-ochre);
  font-family: var(--serif);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step__line {
  flex-grow: 1;
  border-top: 1.5px dashed var(--cement);
}

.step h3 {
  font-size: 22px;
}

.step p {
  font-size: 16px;
  color: var(--ink-soft);
}

/* ---------- Use case tiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 300px);
  gap: 20px;
}

.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--slot);
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tile:hover img {
  transform: scale(1.03);
}

.tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 20px 18px;
  background: linear-gradient(
    180deg,
    rgba(63, 50, 41, 0) 0%,
    rgba(63, 50, 41, 0.58) 100%
  );
  font-family: var(--serif);
  font-size: 20px;
  color: var(--white);
}

.tile--lead {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.tile--lead .tile__label {
  font-size: 26px;
  padding: 28px 24px 22px;
}

.tile--wide {
  grid-column: 3 / span 2;
}

/* ---------- CTA band ---------- */

/* Rust, the direction's primary band, so it reads apart from the sage
   Boynton band above it and the walnut footer below */
.cta-band {
  background: var(--ochre);
  color: var(--on-ochre);
}

.cta-band__inner {
  padding-top: 52px;
  padding-bottom: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.cta-band h2 {
  font-size: 36px;
  color: var(--paper);
}

.cta-band p {
  font-size: 18px;
  color: var(--on-ochre);
}

/* ---------- Collection chips ---------- */

/* ---------- Category tiles (catalogue All page) ----------
   Four photo tiles, one per category, above the grid of everything.
   Two stacked images cross-fade as site.js cycles the photos. */
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}

.cat-tile {
  position: relative;
  display: block;
  aspect-ratio: 1.3 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--slot);
  color: var(--paper);
  text-decoration: none;
}

.cat-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* statues sit mid-frame in their photos; favour the upper half so a
     wide crop keeps heads in */
  object-position: 50% 35%;
  opacity: 0;
  transition: opacity 1.2s ease, transform 0.4s ease;
}

.cat-tile__img.is-front {
  opacity: 1;
}

.cat-tile:hover .cat-tile__img.is-front {
  transform: scale(1.04);
}

.cat-tile--empty .cat-tile__img {
  display: none;
}

.cat-tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 16px 12px;
  background: linear-gradient(transparent, rgba(58, 42, 34, 0.78));
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-tile__label strong {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
}

/* All page header: shorter still, the tiles are the point of the page */
.catalogue-head--all {
  padding-top: 12px;
  padding-bottom: 12px;
  align-items: center;
}

.catalogue-head--all > .lede {
  flex: 0 1 560px;
  font-size: 15px;
  line-height: 1.45;
  padding-bottom: 0;
  color: var(--ink-muted);
}

.cat-tile__label small {
  font-size: 12px;
  opacity: 0.9;
}

.cat-tile--empty .cat-tile__label {
  background: none;
  color: var(--ink-muted);
  top: 0;
  justify-content: center;
}

.cat-tile--empty .cat-tile__label strong {
  color: var(--charcoal);
}

.collection-block__count {
  font-size: 14px;
  color: var(--ink-muted);
}

/* ---------- Catalogue header ----------
   One row: eyebrow, title and intro on the left, the collection chips on
   the right, so the grid starts within the first screen. */
.catalogue-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.catalogue-head__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 640px;
}

.catalogue-head h1 {
  font-size: 40px;
  line-height: 1.02;
}

.catalogue-head .lede {
  font-size: 16px;
  margin-top: 4px;
}

.catalogue-head .chips {
  flex: none;
  justify-content: flex-end;
  padding-bottom: 6px;
}

/* /sandraboynton: the intro sits where the chips would, and the card
   section below loses its top padding since the header already spaces it */
.catalogue-head--boynton > .lede {
  flex: 0 1 520px;
  font-size: 17px;
  padding-bottom: 8px;
}

.section--collection {
  padding-top: 0;
  padding-bottom: 28px;
}

/* Reviews sit close under the cards, as on product pages */
.section--collection ~ #reviews {
  padding-top: 40px;
}

.section--collection ~ #reviews .section-head {
  margin-bottom: 24px;
}

.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid var(--cement);
  color: var(--charcoal);
  font-weight: 500;
  font-size: 15px;
}

.chip:hover {
  border-color: var(--charcoal);
  color: var(--charcoal);
}

.chip[aria-current="page"] {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}

/* ---------- Shopify embed regions ---------- */

.collection-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.collection-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.collection-block__head h2 {
  font-size: 26px;
}

.shopify-embed {
  min-height: 120px;
}

.shopify-embed__fallback {
  border: 1px dashed var(--cement);
  border-radius: var(--radius);
  padding: 28px 32px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shopify-embed__fallback strong {
  font-weight: 600;
}

/* ---------- Numbered steps (how to order) ---------- */

.two-col {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}

.two-col__aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 100px;
}

.two-col__aside h2 {
  font-size: 36px;
}

.two-col__aside p {
  font-size: 18px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

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

.numbered li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.numbered li:last-child {
  border-bottom: 1px solid var(--line);
}

.numbered__num {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--ochre-deep);
  line-height: 1;
}

.numbered h3 {
  font-size: 21px;
  margin-bottom: 6px;
}

.numbered p {
  font-size: 16px;
  color: var(--ink-soft);
}

/* ---------- Specs ---------- */

.specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.specs > div {
  padding: 22px 28px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.specs > div:last-child {
  border-right: 0;
}

.specs .serif {
  font-size: 22px;
}

/* ---------- Gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Hidden until site.js confirms at least one photo has loaded */
.gallery-section:not(.has-photos) {
  display: none;
}

/* The home mosaic with some tiles missing: one row of equal tiles, as
   tall as the two mosaic rows were together */
#our-statues.is-partial .tiles {
  grid-template-columns: repeat(var(--tiles, 1), minmax(0, 1fr));
  grid-template-rows: 620px;
}

#our-statues.is-partial .tile--lead,
#our-statues.is-partial .tile--wide {
  grid-column: auto;
  grid-row: auto;
}

/* A pair with one photo left: that photo takes the full width */
.pair.is-partial {
  grid-template-columns: 1fr;
}

/* ---------- Forms ---------- */

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.field--full {
  grid-column: 1 / span 2;
}

.field .optional {
  font-weight: 400;
  color: var(--ink-faint);
}

.field input,
.field select,
.field textarea {
  min-height: 48px;
  border: 1.5px solid var(--field);
  border-radius: 6px;
  background: var(--offwhite);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--charcoal);
  width: 100%;
}

.field textarea {
  min-height: 132px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--moss);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(63, 90, 58, 0.18);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-faint);
}

.dropzone {
  min-height: 88px;
  border: 1.5px dashed var(--cement);
  border-radius: 6px;
  background: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 400;
  color: var(--ink-muted);
  padding: 16px;
  text-align: center;
  cursor: pointer;
}

.dropzone input {
  display: none;
}

/* Honeypot: off-screen for people, an ordinary field to a bot */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.form__status {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-muted);
  margin: 0;
}

.form__status:empty {
  display: none;
}

.form__status[data-kind="error"] {
  color: var(--ochre);
}

/* Replaces the form once an inquiry has landed */
.form__done {
  align-self: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--moss);
  border-radius: var(--radius);
  padding: 28px 32px;
}

.form__done h3 {
  font-size: 26px;
  margin-bottom: 8px;
}

.form__done p {
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */

.faq {
  display: flex;
  flex-direction: column;
}

.faq details {
  border-top: 1px solid var(--field);
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--field);
}

.faq summary {
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--plus) center / contain no-repeat;
  mask: var(--plus) center / contain no-repeat;
}

.faq {
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E");
  --minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 10h12'/%3E%3C/svg%3E");
}

.faq details[open] summary::after {
  -webkit-mask-image: var(--minus);
  mask-image: var(--minus);
}

.faq details p {
  padding-bottom: 22px;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 620px;
}

/* ---------- Prose (About) ---------- */

/* Story on the left, the two co-founders in a column on the right that
   stays in view while the story scrolls. One column on smaller screens. */
.prose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  column-gap: 72px;
  row-gap: 36px;
  align-items: start;
  padding-top: 8px;
  padding-bottom: 80px;
}

.prose > * {
  grid-column: 1;
  max-width: 760px;
}

.prose > .prose__aside {
  grid-column: 2;
  grid-row: 1 / span 10;
  position: sticky;
  top: 96px;
  max-width: none;
}

.prose__aside .pair {
  grid-template-columns: 1fr;
  gap: 28px;
}

.prose__aside h3 {
  font-size: 22px !important;
}

.prose__aside p {
  font-size: 16px;
}

.prose section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prose h2 {
  font-size: 28px;
}

.prose p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Optional banner under the about header; gone until the photo exists */
.about-banner {
  aspect-ratio: 21 / 6;
  margin-bottom: 24px;
}

[data-optional-photo].is-photoless .about-banner {
  display: none;
}

.pull-quote {
  margin: 0;
  padding: 40px 0;
  border-top: 1px solid var(--field);
  border-bottom: 1px solid var(--field);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

.pull-quote p {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--moss);
  text-wrap: pretty;
}

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* ---------- Reviews (Judge.me, restyled) ----------
   Judge.me renders its widget into the page DOM and ships its own CSS,
   which loads after ours. Everything here is scoped under #reviews (an
   ID beats their class selectors) and uses !important where their sheet
   does, so the site's look wins. Direction: "editorial list", no cards,
   one column of quotes with hairline rules and a numeral summary on
   the left. Star color is honey, shared with the card badge below. */

:root {
  --honey: #d9a85b;
}

/* Judge.me's own "Customer Reviews" title duplicates our section-head */
#reviews .jdgm-rev-widg__title {
  display: none !important;
}

#reviews .jdgm-rev-widg {
  padding: 0 !important;
  border: 0 !important;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}

#reviews .jdgm-rev-widg__header {
  grid-column: 1;
  /* Span every row so the sort control and the review list stack in the
     right column instead of the list starting below the header's row */
  grid-row: 1 / span 20;
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#reviews .jdgm-rev-widg__body,
#reviews .jdgm-rev-widg__reviews,
#reviews .jdgm-paginate {
  grid-column: 2;
}

/* Summary: big numeral in Crimson Pro, stars in honey */
#reviews .jdgm-row-stars {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

#reviews .jdgm-rev-widg__summary {
  text-align: left !important;
  margin: 0 !important;
}

#reviews .jdgm-rev-widg__summary-stars {
  font-size: 22px !important;
  color: var(--honey) !important;
  margin-bottom: 4px;
}

#reviews .jdgm-rev-widg__summary-text {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  color: var(--ink-muted) !important;
  margin: 0 !important;
}

/* Judge.me tacks its own teal "verified" tick after the review count;
   the site does not need a third-party seal in the middle of the copy */
#reviews .jdgm-verified-checkmark {
  display: none !important;
}

/* Judge.me's blue "Diamond authenticity / transparency" medals beside
   the customer photos: off, and the photos take the whole row */
#reviews .jdgm-medals-wrapper {
  display: none !important;
}

#reviews .jdgm-row-media .jdgm-gallery-wrapper {
  flex: 1 1 100%;
  max-width: 100%;
}

/* Judge.me prints "5.00 out of 5" then "Based on N reviews"; make the
   average read like a headline and the count like a caption */
#reviews .jdgm-rev-widg__summary-average {
  font-family: var(--serif) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: var(--ochre) !important;
  display: block;
  white-space: nowrap;
  margin-bottom: 6px;
}

/* Judge.me gives these fixed inline-block widths; let them fill the column */
#reviews .jdgm-rev-widg__summary,
#reviews .jdgm-rev-widg__summary-inner,
#reviews .jdgm-histogram,
#reviews .jdgm-widget-actions-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

/* Histogram: rust fill on a linen track */
#reviews .jdgm-histogram {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#reviews .jdgm-histogram__row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  color: var(--ink-muted) !important;
  padding: 3px 0 !important;
  width: 100% !important;
}

#reviews .jdgm-histogram__star {
  color: var(--honey) !important;
  flex: none;
  width: auto !important;
}

#reviews .jdgm-histogram__bar {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  background: var(--line) !important;
  border-radius: 4px !important;
  height: 6px !important;
  border: 0 !important;
  margin: 0 !important;
}

#reviews .jdgm-histogram__frequency {
  flex: none;
  min-width: 24px;
  text-align: right;
  width: auto !important;
}

#reviews .jdgm-histogram__bar-content {
  background: var(--ochre) !important;
  border-radius: 4px !important;
}

#reviews .jdgm-histogram__frequency {
  color: var(--ink-faint) !important;
}

/* "Write a review": our secondary button */
#reviews .jdgm-widget-actions-wrapper {
  margin: 4px 0 0 !important;
  text-align: left !important;
}

#reviews .jdgm-write-rev-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--charcoal) !important;
  background: transparent !important;
  color: var(--charcoal) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  white-space: nowrap;
  width: auto !important;
}

/* Sort dropdown sits at the top of the review column */
#reviews .jdgm-rev-widg__sort-wrapper,
#reviews .jdgm-sort-dropdown-wrapper {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  color: var(--ink-muted) !important;
  margin: 0 0 8px !important;
  text-align: right !important;
}

#reviews .jdgm-sort-dropdown {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  color: var(--ink-muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: var(--paper) !important;
  padding: 6px 10px !important;
}

#reviews .jdgm-write-rev-link:hover {
  background: var(--charcoal) !important;
  color: var(--paper) !important;
}

/* Customer photo strip */
#reviews .jdgm-row-media {
  margin: 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--line);
}

#reviews .jdgm-gallery-title {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--charcoal) !important;
  margin: 0 0 10px !important;
}

/* Judge.me sizes the strip for all thumbnails in one row (656px here) and
   centers it, which hangs off both sides of a 260px column. Wrap instead. */
#reviews .jdgm-gallery-wrapper,
#reviews .jdgm-gallery {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}

#reviews .jdgm-gallery {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}

#reviews .jdgm-gallery__thumbnail-link {
  flex: 0 0 auto;
  width: 76px !important;
  height: 76px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  overflow: hidden;
}

/* ---- The reviews themselves: quote, then a small-caps byline ---- */
#reviews .jdgm-rev {
  border-top: 1px solid var(--field) !important;
  border-bottom: 0 !important;
  padding: 26px 0 !important;
  margin: 0 !important;
}

#reviews .jdgm-rev:last-of-type {
  border-bottom: 1px solid var(--field) !important;
}

#reviews .jdgm-rev__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 8px !important;
}

/* No avatar, no product row; the byline carries the name */
#reviews .jdgm-rev__icon,
#reviews .jdgm-row-product,
#reviews .jdgm-rev__br {
  display: none !important;
}

#reviews .jdgm-row-rating,
#reviews .jdgm-row-profile,
#reviews .jdgm-row-extra {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

#reviews .jdgm-rev__rating {
  font-size: 14px !important;
  letter-spacing: 1px;
}

#reviews .jdgm-star.jdgm--on {
  color: var(--honey) !important;
}

#reviews .jdgm-star.jdgm--off {
  color: var(--line) !important;
}

#reviews .jdgm-rev__author,
#reviews .jdgm-rev__timestamp,
#reviews .jdgm-rev__location {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted) !important;
  opacity: 1 !important;
}

#reviews .jdgm-rev__timestamp {
  font-weight: 400 !important;
  color: var(--ink-faint) !important;
  order: 10;
}

#reviews .jdgm-rev__buyer-badge {
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--moss-dark) !important;
  background: var(--line-soft) !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
}

#reviews .jdgm-rev__content {
  margin: 0 !important;
}

#reviews .jdgm-rev__title {
  display: block;
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--charcoal) !important;
  margin: 0 0 6px !important;
}

#reviews .jdgm-rev__body,
#reviews .jdgm-rev__body p {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: var(--ink-soft) !important;
  margin: 0 !important;
  max-width: 62ch;
  text-wrap: pretty;
}

#reviews .jdgm-rev__pics {
  margin-top: 14px !important;
}

#reviews .jdgm-rev__pic-link {
  border-radius: 8px !important;
  overflow: hidden;
}

#reviews .jdgm-rev__actions {
  margin-top: 10px !important;
}

#reviews .jdgm-rev__social,
#reviews .jdgm-rev__votes,
#reviews .jdgm-rev__transparency-badge {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  color: var(--ink-faint) !important;
}

/* Pagination */
#reviews .jdgm-paginate {
  margin-top: 24px !important;
  text-align: left !important;
}

#reviews .jdgm-paginate__page {
  font-family: var(--sans) !important;
  color: var(--ink-muted) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
}

#reviews .jdgm-paginate__page.jdgm-curt {
  background: var(--charcoal) !important;
  color: var(--paper) !important;
}

/* The first/prev/next/last arrows are private-use glyphs from Judge.me's
   icon fonts and print as boxes in some browsers. Ours are plain
   guillemets in the site font, which every browser has. */
#reviews .jdgm-paginate__first-page::before,
#reviews .jdgm-paginate__prev-page::before,
#reviews .jdgm-paginate__next-page::before,
#reviews .jdgm-paginate__last-page::before {
  font-family: var(--sans) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

#reviews .jdgm-paginate__first-page::before {
  content: "\00ab" !important;
}

#reviews .jdgm-paginate__prev-page::before {
  content: "\2039" !important;
}

#reviews .jdgm-paginate__next-page::before {
  content: "\203a" !important;
}

#reviews .jdgm-paginate__last-page::before {
  content: "\00bb" !important;
}

/* ---------- Write-a-review window (Judge.me) ----------
   Judge.me appends its review form modal to <body>, outside #reviews,
   with its own teal-and-white styling. Restyled here as a paper card on
   a walnut scrim: Crimson Pro title, round product photo, honey stars,
   rust button. Class names are Judge.me's; !important beats its
   stylesheet, which loads after ours. The flow itself is untouched. */

.jdgm-write-review-modal__overlay {
  /* Judge.me fades the overlay with opacity, so the colour is solid */
  background: var(--charcoal) !important;
  opacity: 0.6 !important;
}

/* Leave .jdgm-write-review-modal__container alone: Judge.me's step
   slider reads its layout, and overriding it froze the form on step 2. */

.jdgm-write-review-modal__content {
  background: var(--paper) !important;
  color: var(--charcoal) !important;
  border-radius: var(--radius) !important;
  border: 0 !important;
  box-shadow: 0 24px 60px rgba(58, 42, 34, 0.35) !important;
  padding: 44px 36px 32px !important;
  width: min(560px, 100%) !important;
  max-width: 560px !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
  font-family: var(--sans) !important;
}

.jdgm-write-review-modal__close-btn {
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--linen) !important;
  color: var(--charcoal) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

.jdgm-write-review-modal__close-btn:hover {
  background: var(--line) !important;
}

.jdgm-write-review-modal__close-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* Headings */
.jdgm-write-review-modal__title {
  font-family: var(--serif) !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: var(--charcoal) !important;
  margin: 0 0 8px !important;
  text-wrap: pretty;
}

.jdgm-write-review-modal__intro {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  color: var(--ink-soft) !important;
  margin: 0 0 24px !important;
}

/* Product */
.jdgm-write-review-modal__product-image {
  width: 132px !important;
  height: 132px !important;
  margin: 0 auto 14px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 4px solid var(--linen) !important;
  box-sizing: border-box;
}

.jdgm-write-review-modal__product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

.jdgm-write-review-modal__product-title {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--charcoal) !important;
  margin: 0 0 18px !important;
  text-wrap: balance;
}

/* Stars */
.jdgm-write-review-modal__stars .jdgm-star {
  color: var(--honey) !important;
  font-size: 40px !important;
  padding: 0 5px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.jdgm-write-review-modal__stars .jdgm-star.jdgm--off {
  color: var(--line) !important;
}

.jdgm-write-review-modal__stars .jdgm-star:hover {
  transform: scale(1.08);
}

.jdgm-write-review-modal__field-group--stars .jdgm-star {
  font-size: 30px !important;
}

/* Fields */
.jdgm-write-review-modal__field-label {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--charcoal) !important;
  margin-bottom: 6px !important;
}

.jdgm-write-review-modal__field-input,
.jdgm-write-review-modal__field-input:focus {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  color: var(--charcoal) !important;
  background: var(--offwhite) !important;
  border: 1.5px solid var(--field) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
  outline: none !important;
}

.jdgm-write-review-modal__field-input:focus {
  border-color: var(--moss) !important;
  background: var(--paper) !important;
  box-shadow: 0 0 0 3px rgba(107, 127, 94, 0.2) !important;
}

.jdgm-write-review-modal__field-input::placeholder {
  color: var(--ink-faint) !important;
}

textarea.jdgm-write-review-modal__field-input {
  min-height: 132px !important;
  resize: vertical;
}

.jdgm-write-review-modal__field-help,
.jdgm-write-review-modal__gdpr-statement {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  color: var(--ink-muted) !important;
}

.jdgm-write-review-modal__gdpr-statement a {
  color: var(--ochre) !important;
}

.jdgm-write-review-modal__field-error {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  color: var(--ochre) !important;
}

/* Checkbox */
.jdgm-write-review-modal__checkbox-text {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  color: var(--charcoal) !important;
}

.jdgm-write-review-modal__checkbox-custom {
  border: 1.5px solid var(--field) !important;
  border-radius: 4px !important;
  background: var(--offwhite) !important;
}

.jdgm-write-review-modal__checkbox-input:checked + .jdgm-write-review-modal__checkbox-custom {
  background: var(--moss) !important;
  border-color: var(--moss) !important;
}

/* Photo upload */
.jdgm-write-review-modal__media-upload {
  border: 1.5px dashed var(--cement) !important;
  border-radius: 6px !important;
  background: var(--offwhite) !important;
  color: var(--ink-muted) !important;
  font-family: var(--sans) !important;
}

.jdgm-write-review-modal__media-upload-prompt b {
  color: var(--ochre) !important;
}

/* Buttons */
.jdgm-write-review-modal__nav-btn,
.jdgm-write-review-modal__thank-you-nav button {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 13px 24px !important;
  border: 0 !important;
  cursor: pointer;
  transition: background 0.15s ease;
}

.jdgm-write-review-modal__nav-btn-next,
.jdgm-write-review-modal__thank-you-nav button {
  background: var(--ochre) !important;
  color: var(--on-ochre) !important;
}

.jdgm-write-review-modal__nav-btn-next:hover,
.jdgm-write-review-modal__thank-you-nav button:hover {
  background: var(--ochre-hover) !important;
}

.jdgm-write-review-modal__nav-btn-back {
  background: transparent !important;
  color: var(--charcoal) !important;
  text-decoration: none !important;
}

.jdgm-write-review-modal__nav-btn-back:hover {
  background: var(--linen) !important;
}

.jdgm-write-review-modal__navigation {
  margin-top: 20px !important;
  gap: 12px !important;
}

/* Status line while sending, and the thank-you */
.jdgm-write-review-modal__status {
  font-family: var(--sans) !important;
  color: var(--ink-soft) !important;
}

@media (max-width: 600px) {
  .jdgm-write-review-modal__content {
    padding: 40px 22px 24px !important;
    max-height: calc(100vh - 24px) !important;
  }

  .jdgm-write-review-modal__title {
    font-size: 26px !important;
  }

  .jdgm-write-review-modal__stars .jdgm-star {
    font-size: 34px !important;
  }
}

@media (max-width: 900px) {
  #reviews .jdgm-rev-widg {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  #reviews .jdgm-rev-widg__header {
    position: static;
    grid-column: 1;
  }

  #reviews .jdgm-rev-widg__body,
  #reviews .jdgm-rev-widg__reviews,
  #reviews .jdgm-paginate {
    grid-column: 1;
  }

  #reviews .jdgm-rev__body,
  #reviews .jdgm-rev__body p {
    font-size: 18px !important;
  }
}

/* ---- Star badge on product cards, same honey. Covers our own cards and
   the products Shopify renders into the catalogue grids (shopify.js adds
   a badge under each title there). ---- */
.card .jdgm-preview-badge,
.shopify-buy__product .jdgm-preview-badge {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
}

.card .jdgm-preview-badge .jdgm-star,
.shopify-buy__product .jdgm-preview-badge .jdgm-star {
  font-size: 14px !important;
  color: var(--honey) !important;
}

.card .jdgm-preview-badge .jdgm-star.jdgm--off,
.shopify-buy__product .jdgm-preview-badge .jdgm-star.jdgm--off {
  color: var(--line) !important;
}

.card .jdgm-prev-badge__text,
.shopify-buy__product .jdgm-prev-badge__text {
  /* Judge.me's stylesheet keeps the count hidden until its own script
     has run, which never happens for badges we fill ourselves */
  visibility: visible !important;
  display: inline !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  color: var(--ink-muted) !important;
}

/* Judge.me's loader also recognises Buy Button products by itself and
   injects a second badge into the price element (seen on the live site,
   not locally, so it depends on timing). Ours is deterministic; hide
   theirs wherever it lands outside our wrapper. */
.shopify-buy__product__price .jdgm-prev-badge,
.shopify-buy__product__title .jdgm-prev-badge,
.shopify-buy__product > .jdgm-prev-badge {
  display: none !important;
}

/* On catalogue cards Shopify's price element is Judge.me's landing spot
   on the live domain (it empties it), so shopify.js writes a .card-price
   of its own and Shopify's is hidden outright */
.shopify-buy__collection-products .shopify-buy__product__price {
  display: none !important;
}

.shopify-buy__product .card-price {
  margin: 0 16px 10px !important;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink-soft);
}

.shopify-buy__collection-products .shopify-buy__btn {
  min-height: 44px;
  font-size: 15px;
}

.shopify-buy__product .card-price:empty {
  display: none;
}

.card-price__was {
  color: var(--ink-faint);
  margin-left: 8px;
}

/* ---------- Catalogue product grids (Shopify, rendered in-page) ----------
   shopify.js renders collection grids with iframe: false so review badges
   can sit inside each product. In that mode the Buy Button SDK injects no
   product styling at all, so the grid is laid out and dressed here to
   match the site's own .card. Class names are the SDK's. */

/* The SDK also tags this container .shopify-buy-frame and injects
   `display: inline-block` for it after our sheet loads, hence !important */
.shopify-buy__collection-products {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.shopify-buy__product {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shopify-buy__product:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(58, 42, 34, 0.14);
}

.shopify-buy__product-img-wrapper {
  /* relative: the .product-link overlay is positioned against this box */
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--slot);
  overflow: hidden;
}

.shopify-buy__product-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.shopify-buy__product:hover .shopify-buy__product-img-wrapper img {
  transform: scale(1.03);
}

/* Everything below the photo shares one padded body, like .card__body */
.shopify-buy__product__title,
.shopify-buy__product .jdgm-preview-badge,
.shopify-buy__product__price,
.shopify-buy__product__variant-selectors,
.shopify-buy__btn-wrapper {
  margin: 0 16px !important;
}

.shopify-buy__product__title {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--charcoal) !important;
  margin-top: 14px !important;
  margin-bottom: 4px !important;
  text-wrap: pretty;
}

.shopify-buy__product__price {
  font-family: var(--sans) !important;
  font-size: 17px !important;
  color: var(--ink-soft) !important;
  margin-bottom: 12px !important;
}

.shopify-buy__product__compare-price {
  color: var(--ink-faint) !important;
  text-decoration: line-through;
  margin-left: 8px;
}

.shopify-buy__product__variant-selectors {
  margin-bottom: 10px !important;
}

.shopify-buy__option-select {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.shopify-buy__option-select__label {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--charcoal) !important;
}

.shopify-buy__option-select-wrapper {
  position: relative;
}

.shopify-buy__option-select__select {
  width: 100%;
  min-height: 40px;
  border: 1.5px solid var(--field) !important;
  border-radius: 8px !important;
  background: var(--linen) !important;
  padding: 0 36px 0 12px !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  color: var(--charcoal) !important;
  appearance: none;
  -webkit-appearance: none;
}

.shopify-buy__option-select__select:focus {
  outline: none;
  border-color: var(--moss) !important;
  box-shadow: 0 0 0 3px rgba(107, 127, 94, 0.2);
}

.shopify-buy__select-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  color: var(--ink-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* margin-top: auto pins the button to the card's bottom edge, and grid
   rows stretch every card to the tallest, so buttons line up across a
   row whether or not a card has a size selector */
.shopify-buy__btn-wrapper {
  margin-top: auto !important;
  margin-bottom: 16px !important;
  padding-top: 4px;
}

.shopify-buy__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--ochre);
  color: var(--on-ochre);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.shopify-buy__btn:hover {
  background: var(--ochre-hover);
}

.shopify-buy__btn-disabled,
.shopify-buy__btn-disabled:hover {
  background: var(--field);
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* ---------- Sold out and the waitlist ----------
   When the selected size has no stock, shopify.js marks the product
   .is-sold-out, hides Shopify's greyed button and drops in our own sage
   "Join the waitlist" control in the same spot. */
.is-sold-out .shopify-buy__btn {
  display: none;
}

/* Card with sizes: the button is a link to the product page, in place
   of Shopify's add-to-cart (which stays for single-size products) */
.has-choices .shopify-buy__btn {
  display: none;
}

.card-choose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--ochre);
  color: var(--on-ochre);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.card-choose:hover {
  background: var(--ochre-hover);
  color: var(--on-ochre);
}

/* Same shape as .shopify-buy__btn, sage instead of rust. Deliberately
   not the SDK's class, which would make Shopify treat a click as
   add to cart. */
.waitlist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--moss);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.waitlist-btn:hover {
  background: #5d7051;
  color: var(--paper);
}

.product__buy .waitlist-btn {
  min-height: 52px;
  font-size: 17px;
}

.badge--soldout {
  top: auto;
  bottom: 16px;
  left: 16px;
}

.badge--inline {
  position: static;
  display: inline-block;
}

.card__soldout {
  margin: 0 0 10px;
}

.waitlist {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

/* ---------- Gift option ----------
   A small sage link with a present icon; clicking it opens the panel
   (To, From, Message). Once set, the link reads "Gift added". */
.gift {
  margin: 0;
}

.gift__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 2px 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--moss);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(107, 127, 94, 0.45);
  text-underline-offset: 3px;
}

.gift__link:hover {
  color: #5d7051;
  text-decoration-color: currentColor;
}

.gift__link svg {
  flex: none;
}

.gift.is-on .gift__link {
  text-decoration: none;
}

.gift__panel {
  margin-top: 10px;
  border: 1.5px solid var(--moss);
  border-radius: 10px;
  background: var(--paper);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gift__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gift__head strong {
  font-size: 15px;
  font-weight: 600;
}

.gift__remove {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gift__remove:hover {
  color: var(--ochre);
}

.gift__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gift__panel .field {
  font-size: 13px;
}

.gift__panel .field input,
.gift__panel .field textarea {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 15px;
}

.gift__panel .field textarea {
  min-height: 78px;
}

.gift__count {
  font-size: 12px;
  color: var(--ink-faint);
  margin: -4px 0 0;
  text-align: right;
}

/* Under the price inside the Shopify buy box (a two-column grid) */
.product__buy .gift--inline {
  grid-column: 1 / -1;
  margin: -4px 0 14px !important;
}

/* Above a catalogue grid: the link on its own line, the panel's fields
   spread across one row when open */
.gift--bar {
  margin: 0 0 20px;
}

.gift--bar .gift__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
  align-items: start;
}

.gift--bar .gift__head {
  grid-column: 1 / -1;
}

.gift--bar .gift__row {
  display: contents;
}

.gift--bar .gift__panel .field textarea {
  min-height: 40px;
  resize: vertical;
}

.gift--bar .gift__count {
  grid-column: 3;
  margin-top: -6px;
}

/* Inside the Boynton card: To and From stack since the column is narrow */
.gift--compact {
  margin-top: 12px;
}

.gift--compact .gift__link {
  font-size: 14px;
}

.gift--compact .gift__row {
  grid-template-columns: 1fr;
}

.waitlist__pill {
  position: static;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: -4px;
}

.waitlist__lead {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.waitlist__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.waitlist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 12px;
}

.waitlist__note {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
}

.waitlist__done {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--moss);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.waitlist__done h3 {
  font-size: 24px;
  margin-bottom: 6px;
}

.waitlist__done p {
  color: var(--ink-soft);
  margin: 0;
}

/* "Load more" under a long collection */
.shopify-buy__collection-pagination {
  margin-top: 32px;
  text-align: center;
}

/* The SDK drops the button straight under the grid with the shared
   .shopify-buy__btn class, which is full width; make it a modest
   centred button with air above it instead */
.shopify-buy__btn.shopify-buy__collection-pagination-button {
  display: flex;
  width: auto;
  min-width: 240px;
  max-width: 100%;
  margin: 28px auto 0;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 32px;
  border: 1.5px solid var(--charcoal);
  border-radius: 8px;
  background: transparent;
  color: var(--charcoal);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

.shopify-buy__btn.shopify-buy__collection-pagination-button:hover {
  background: var(--charcoal);
  color: var(--paper);
}

@media (max-width: 1180px) {
  .shopify-buy__collection-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .catalogue-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .catalogue-head .chips {
    justify-content: flex-start;
    padding-bottom: 0;
  }

  .catalogue-head--boynton > .lede {
    flex: none;
    padding-bottom: 0;
  }
}

@media (max-width: 900px) {
  .shopify-buy__collection-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .cat-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
  }

  .gift--bar .gift__panel {
    grid-template-columns: 1fr;
  }

  .gift--bar .gift__count {
    grid-column: 1;
  }

  .cat-tile {
    aspect-ratio: 1.3 / 1;
  }

  .cat-tile__label strong {
    font-size: 18px;
  }

  .catalogue-head h1 {
    font-size: 36px;
  }
}

@media (max-width: 600px) {
  .shopify-buy__collection-products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Product links ----------
   A product photo carries an invisible link laid over it (shopify.js adds
   one to each grid product; the Chicken card has one in its markup), and
   the title is a link. Together the whole top of a card leads to the
   product's page. */

.product-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.product-link:focus-visible {
  outline: 3px solid var(--moss);
  outline-offset: -3px;
}

.card__body h3 a,
.shopify-buy__product__title a {
  color: inherit;
}

.card__body h3 a:hover,
.shopify-buy__product__title a:hover {
  color: var(--ochre);
}

/* ---------- Product page ----------
   Classic two-column: photos with thumbnails on the left, the buy box on
   the right, description folded beneath it, reviews full width below. */

.crumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 20px;
  font-size: 14px;
  color: var(--ink-faint);
}

.crumbs a {
  color: var(--ink-muted);
}

.crumbs a:hover {
  color: var(--ochre);
}

.crumbs span:last-child {
  color: var(--charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 16px 0 28px;
}

/* Reviews follow the product closely rather than after a full band gap */
.product ~ #reviews {
  padding-top: 40px;
}

.product ~ #reviews .section-head {
  margin-bottom: 24px;
}

/* Gallery: thumbnails run down the left of the main photo rather than
   under it, and the whole thing is capped to the first screen and stays
   put while the description scrolls beside it */
.product__gallery {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  position: sticky;
  top: 92px;
}

.product__main {
  grid-column: 2;
  grid-row: 1;
  border-radius: var(--radius);
  /* Square, but never taller than the first screen leaves room for */
  aspect-ratio: 1 / 1;
  max-height: calc(100vh - 76px - 140px);
}

.product__thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  max-height: calc(100vh - 76px - 130px);
  overflow-y: auto;
  scrollbar-width: none;
}

/* Only one photo: no strip, the main photo takes the whole gallery */
.product__thumbs[hidden] + .product__main,
.product__gallery:has(.product__thumbs[hidden]) .product__main {
  grid-column: 1 / -1;
}

.product__thumbs[hidden] {
  display: none;
}

.product__thumb {
  width: 72px;
  height: 72px;
  flex: none;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--slot);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product__thumb:hover,
.product__thumb.is-current {
  border-color: var(--honey);
}

.product__thumb:focus-visible {
  outline: 3px solid var(--moss);
  outline-offset: 2px;
}

.product__details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 100px;
}

.product__details h1 {
  font-size: 34px;
  line-height: 1.1;
  text-wrap: pretty;
}

.product__rating {
  display: inline-flex;
  color: inherit;
}

.product__rating .jdgm-preview-badge {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.product__rating .jdgm-star {
  font-size: 16px !important;
  color: var(--honey) !important;
}

.product__rating .jdgm-star.jdgm--off {
  color: var(--line) !important;
}

.product__rating .jdgm-prev-badge__text {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  color: var(--ink-muted) !important;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.product__rating:hover .jdgm-prev-badge__text {
  color: var(--ochre) !important;
  text-decoration-color: var(--ochre);
}

/* The buy box is a Shopify product component rendered in-page. The grid
   card rules above give .shopify-buy__product a card frame and 22px side
   margins; undo those here so it reads as part of the details column. */
.product__buy .shopify-buy__product {
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  transform: none !important;
  box-shadow: none !important;
  /* Price and size selector span the row; the quantity stepper and the
     button share the last row. Shopify emits them as siblings, so this
     grid is what puts the stepper beside the button. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: stretch;
}

.product__buy .shopify-buy__product__price,
.product__buy .shopify-buy__product__variant-selectors {
  grid-column: 1 / -1;
}

.product__buy .shopify-buy__quantity-container {
  grid-column: 1;
}

.product__buy .shopify-buy__btn-wrapper {
  grid-column: 2;
}

.product__buy .shopify-buy__product__price,
.product__buy .shopify-buy__product__variant-selectors,
.product__buy .shopify-buy__btn-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Shopify's screen-reader-only text ("Regular price", "Decrement") relies
   on a class its own stylesheet defines, which is not loaded in-page */
.product__buy .visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ...except the option label, which we do want to read as "Size" */
.product__buy .shopify-buy__option-select__label.visuallyhidden {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.product__buy .shopify-buy__product__price {
  font-family: var(--sans) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--charcoal) !important;
  margin: 0 0 18px !important;
}

.product__buy .shopify-buy__product__compare-price {
  font-size: 18px !important;
  font-weight: 400 !important;
}

.product__buy .shopify-buy__product__variant-selectors {
  margin-bottom: 16px !important;
}

.product__buy .shopify-buy__option-select__label {
  font-size: 14px !important;
}

/* Quantity stepper */
.product__buy .shopify-buy__quantity-container {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--field);
  border-radius: 8px;
  overflow: hidden;
  background: var(--linen);
  flex: none;
}

.product__buy .shopify-buy__quantity-decrement,
.product__buy .shopify-buy__quantity-increment {
  width: 44px;
  border: 0;
  background: transparent;
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 20px;
  cursor: pointer;
}

.product__buy .shopify-buy__quantity-decrement:hover,
.product__buy .shopify-buy__quantity-increment:hover {
  background: var(--line-soft);
}

.product__buy .shopify-buy__quantity {
  width: 48px;
  border: 0;
  border-left: 1.5px solid var(--field);
  border-right: 1.5px solid var(--field);
  background: transparent;
  text-align: center;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--charcoal);
  -moz-appearance: textfield;
}

.product__buy .shopify-buy__quantity::-webkit-outer-spin-button,
.product__buy .shopify-buy__quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product__buy .shopify-buy__btn-wrapper {
  flex: 1 1 auto;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0;
}

.product__buy .shopify-buy__btn {
  min-height: 52px;
  font-size: 17px;
}

.product__missing {
  font-size: 17px;
  color: var(--ink-soft);
}

/* Description, folded like the FAQ rows */
.product__accordion {
  margin-top: 8px;
  border-top: 1px solid var(--field);
}

.product__accordion[hidden] {
  display: none;
}

.product__accordion details {
  border-bottom: 1px solid var(--field);
}

.product__accordion summary {
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  list-style: none;
}

.product__accordion summary::-webkit-details-marker {
  display: none;
}

.product__accordion summary::after {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.product__accordion details[open] summary::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 10h12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 10h12'/%3E%3C/svg%3E");
}

.product__desc {
  padding-bottom: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.product__desc p {
  margin: 0 0 12px;
}

.product__desc p:last-child {
  margin-bottom: 0;
}

.product__desc ul,
.product__desc ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.product__desc img {
  border-radius: 8px;
  margin: 8px 0;
}

@media (max-width: 1180px) {
  .product__grid {
    gap: 40px;
  }

  .product__details h1 {
    font-size: 32px;
  }
}

@media (max-width: 900px) {
  .crumbs {
    padding-top: 20px;
  }

  .product__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 12px 0 48px;
  }

  .product__gallery {
    grid-template-columns: 1fr;
    position: static;
  }

  .product__main {
    grid-column: 1;
    max-height: none;
  }

  .product__thumbs {
    grid-row: 2;
    grid-column: 1;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
    margin-top: 12px;
  }

  .product__details {
    position: static;
  }

  .product__details h1 {
    font-size: 28px;
  }

  .product__buy .shopify-buy__product__price {
    font-size: 24px !important;
  }

  .product__thumb {
    width: 60px;
    height: 60px;
  }
}

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

.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 64px 0 32px;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__brand .brand__name {
  color: var(--offwhite);
  font-size: 20px;
}

.footer__brand .brand__mark {
  width: 40px;
  height: 40px;
  background: var(--footer-field);
}

.footer p {
  font-size: 15px;
  color: var(--footer-muted);
  max-width: 260px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}

.footer__col strong {
  color: var(--offwhite);
  margin-bottom: 4px;
  font-weight: 600;
}

.footer__col a {
  color: var(--footer-muted);
}

.footer__col a:hover {
  color: var(--offwhite);
}

.socials {
  display: flex;
  gap: 12px;
}

.socials a {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  border: 1px solid var(--footer-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-muted);
}

.socials a:hover {
  border-color: var(--footer-text);
  color: var(--footer-text);
}

.newsletter {
  display: flex;
  gap: 8px;
}

.newsletter input {
  flex-grow: 1;
  /* Lets the field shrink in a narrow footer column instead of pushing
     the Join button past the edge of the page */
  min-width: 0;
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid var(--footer-line);
  background: var(--footer-field);
  padding: 0 14px;
  color: var(--footer-text);
  font-family: var(--sans);
  font-size: 15px;
}

.newsletter input::placeholder {
  color: var(--footer-muted);
}

.newsletter .btn {
  min-height: 46px;
  padding: 0 18px;
}

/* Result line under the footer signup */
.newsletter__status {
  font-size: 14px;
  margin: 10px 0 0;
  color: var(--footer-muted);
}

.newsletter__status:empty {
  display: none;
}

.newsletter__status[data-kind="error"] {
  color: var(--honey);
}

.newsletter__status[data-kind="done"] {
  color: var(--footer-text);
}

.footer__base {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--footer-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  color: var(--footer-muted);
}

.footer__base a {
  color: var(--footer-muted);
}

.footer__base nav {
  display: flex;
  gap: 24px;
}

/* ---------- Full-screen home sections (desktop) ----------
   Home's four content sections each fill the viewport below the sticky
   header, with a small arrow to jump to the next one. The closing CTA
   band is deliberately NOT full height: on its own it's a heading and a
   button, so stretching it to a whole screen just made a wall of empty
   green. It shares the last screen with the footer instead.

   Snapping is `proximity`, not `mandatory`. Mandatory refuses to settle
   anywhere that isn't a snap point, which parked the footer permanently
   just below the fold and made it unreachable.

   Off by default; switched on only above the mobile breakpoint, where a
   normal flowing page reads better. */

.section-next {
  display: none;
}

@media (min-width: 901px) {
  html {
    scroll-snap-type: y proximity;
  }

  #hero,
  #boynton,
  #process,
  #our-statues {
    min-height: calc(100vh - 76px);
    scroll-margin-top: 76px;
    scroll-snap-align: start;
    position: relative;
  }

  #cta {
    position: relative;
    scroll-margin-top: 76px;
  }

  /* #hero keeps its own two-column grid; the rest center their content
     vertically since they're a single column of stuff, not a row */
  #boynton,
  #process,
  #our-statues {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Bottom padding reserves the strip the next-section arrow sits in,
     so content never ends up underneath it on a full screen */
  #boynton,
  #process,
  #our-statues {
    padding-top: 24px;
    padding-bottom: 72px;
  }

  /* The Boynton band fills its screen edge to edge: the arrow sits on
     the seam with the next section, so only a slim strip stays clear */
  #boynton {
    padding-bottom: 44px;
  }

  #boynton .wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
  }

  #cta .cta-band__inner {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  #our-statues .section-head {
    margin-bottom: 20px;
  }

  #boynton .band-head {
    margin-bottom: 24px;
  }

  /* The grid takes whatever height the header leaves, so the cards grow
     with the screen instead of leaving sage above and below them */
  #boynton .boynton-grid {
    flex: 1;
  }

  #process .process-intro {
    align-items: start;
    gap: 48px;
    margin-bottom: 24px;
  }

  #process .steps {
    gap: 24px;
  }

  #process .steps .slot {
    aspect-ratio: 4 / 2.8;
  }

  #process .step {
    gap: 10px;
  }

  #process .btn-row.process-cta {
    margin-top: 24px;
  }

  #our-statues .tiles {
    grid-template-rows: repeat(2, minmax(150px, 27vh));
  }

  #our-statues.is-partial .tiles {
    grid-template-rows: minmax(300px, calc(54vh + 20px));
  }

  /* Straddles the seam between one section and the next */
  .section-next {
    display: flex;
    position: absolute;
    z-index: 2;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--line);
    align-items: center;
    justify-content: center;
    color: var(--charcoal);
    box-shadow: 0 4px 12px rgba(58, 42, 34, 0.14);
    transition: transform 0.15s ease, background 0.15s ease;
  }

  .section-next:hover {
    background: var(--white);
    transform: translateX(-50%) translateY(3px);
  }
}

/* Short desktop screens (a 1366x768 laptop leaves roughly 700px once
   browser chrome is out). Everything above is sized for room to breathe;
   this claws back the difference so the sections still land on one
   screen instead of spilling. */
@media (min-width: 901px) and (max-height: 800px) {
  /* On a short screen the header is what costs the cards their width:
     drop the intro line and tighten, then hand that room to the grid */
  #boynton {
    padding-bottom: 40px;
  }

  #boynton .band-head {
    margin-bottom: 16px;
  }

  #boynton .band-head__intro {
    display: none;
  }

  #boynton .boynton-grid,
  #boynton .boynton-grid__stack {
    gap: 18px;
  }

  #boynton .card__body .btn {
    font-size: 14px;
    min-height: 42px;
    margin-top: 10px;
  }

  #boynton .card__body {
    padding: 16px 20px 16px 22px;
    gap: 6px;
  }

  #boynton .card--feature .card__body {
    padding-left: 28px;
  }

  #boynton .card--feature .card__teaser {
    font-size: 15px;
  }

  #boynton .card--feature .card__price {
    font-size: 20px;
  }

  #boynton .band-head h2,
  #our-statues .section-head h2,
  #process .process-intro h2 {
    font-size: 32px;
  }

  #boynton .band-head__intro {
    font-size: 16px;
  }

  #process .steps .slot {
    aspect-ratio: 4 / 2.3;
  }

  #process .process-intro {
    margin-bottom: 16px;
    gap: 32px;
  }

  #process .steps {
    gap: 18px;
  }

  #process .step {
    gap: 8px;
  }

  #process .btn-row.process-cta {
    margin-top: 16px;
  }

}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  :root {
    --pad: 40px;
  }

  .hero,
  .process-intro,
  .page-hero__top {
    gap: 40px;
  }

  .hero h1 {
    font-size: 48px;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .cards-3,
  .cards-3.cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .two-col {
    gap: 48px;
  }

  .specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .specs > div:nth-child(2) {
    border-right: 0;
  }

  .specs > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 900px) {
  :root {
    --pad: 20px;
  }

  body {
    font-size: 16px;
  }

  .nav,
  .header__actions .desktop-only {
    display: none;
  }

  .burger {
    display: flex;
  }

  /* Mobile menu */
  .nav.is-open {
    display: flex;
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--offwhite);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 20px 40px;
    overflow-y: auto;
    z-index: 30;
  }

  .nav.is-open .nav__item {
    border-bottom: 1px solid var(--line);
  }

  .nav.is-open .nav__link {
    padding: 18px 0;
    width: 100%;
    justify-content: space-between;
    font-size: 20px;
    font-family: var(--serif);
  }

  .nav.is-open .nav__item--menu {
    flex-wrap: wrap;
  }

  .nav.is-open .nav__item--menu .nav__link {
    flex: 1;
    width: auto;
  }

  .nav.is-open .nav__caret {
    padding: 18px 8px;
  }

  .nav.is-open .nav__menu {
    flex-basis: 100%;
  }

  .nav.is-open .nav__menu {
    position: static;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 12px 0;
    min-width: 0;
  }

  .nav.is-open .nav__menu a {
    padding: 12px 0 12px 14px;
  }

  .header__inner {
    height: 64px;
  }

  .nav.is-open {
    inset: 64px 0 0 0;
  }

  .brand__mark {
    width: 36px;
    height: 36px;
  }

  .brand__name {
    font-size: 19px;
  }

  .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .section--collection {
    padding-top: 0;
  }

  .prose {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .prose > .prose__aside {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }

  .section-head {
    margin-bottom: 24px;
  }

  .section-head h2,
  .process-intro h2,
  .two-col__aside h2,
  .cta-band h2,
  .collection-block__head h2 {
    font-size: 28px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 40px;
    padding-bottom: 48px;
  }

  /* Photo first on mobile: it does the selling above the fold */
  .hero .slot {
    order: -1;
  }

  .hero h1 {
    font-size: 34px;
  }

  .lede {
    font-size: 17px;
  }

  .btn-row {
    flex-direction: column;
  }

  .btn-row .btn {
    width: 100%;
  }

  .page-hero {
    padding-top: 40px;
  }

  .page-hero__top {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-hero h1 {
    font-size: 36px;
  }

  .cards-3,
  .cards-3.cards-4,
  .gallery,
  .pair {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .band-head {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 20px;
  }

  .band-head h2 {
    font-size: 28px;
  }

  .band-head__intro {
    font-size: 16px;
  }

  /* The Boynton grid loses its feature-plus-stack shape on a phone.
     Everywhere it is one column; on the home band all three cards sit
     together in a tight 3-up row rather than one per screen */
  .boynton-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .boynton-grid__stack {
    display: contents;
  }

  #boynton .boynton-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  #boynton .card__eyebrow {
    display: none;
  }

  #boynton .card--feature .card__teaser {
    display: none;
  }

  #boynton .card__media {
    aspect-ratio: 1 / 1;
  }

  #boynton .badge {
    font-size: 8px;
    padding: 3px 6px;
    top: 6px;
    left: 6px;
  }

  #boynton .card__body {
    padding: 8px 8px 10px;
    gap: 4px;
  }

  #boynton .card__body h3 {
    font-size: 13px;
  }

  #boynton .card__teaser {
    font-size: 10px;
    line-height: 1.3;
  }

  #boynton .card__body .btn {
    min-height: 30px;
    font-size: 10px;
    padding: 0 4px;
    margin-top: 6px;
  }

  .process-intro {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Steps go image-beside-text on mobile so the row stays short */
  .step {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-areas:
      "media rule"
      "media title"
      "media body";
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
  }

  .step .slot {
    grid-area: media;
    aspect-ratio: 4 / 3;
  }

  .step__rule {
    grid-area: rule;
  }

  .step__line {
    display: none;
  }

  .step h3 {
    grid-area: title;
    font-size: 19px;
  }

  .step p {
    grid-area: body;
    font-size: 15px;
  }

  .tiles,
  #our-statues.is-partial .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 12px;
  }

  .tile {
    aspect-ratio: 1 / 1;
  }

  .tile--lead,
  .tile--wide {
    grid-column: auto;
    grid-row: auto;
  }

  .tile__label,
  .tile--lead .tile__label {
    font-size: 15px;
    padding: 24px 12px 12px;
  }

  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .cta-band__inner .btn {
    width: 100%;
  }

  .two-col {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .two-col__aside {
    position: static;
  }

  .numbered li {
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 18px 0;
  }

  .numbered__num {
    font-size: 22px;
  }

  .specs {
    grid-template-columns: 1fr;
  }

  .specs > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 20px;
  }

  .specs > div:last-child {
    border-bottom: 0;
  }

  .form {
    grid-template-columns: 1fr;
  }

  .field--full {
    grid-column: auto;
  }

  .prose {
    padding-top: 40px;
    padding-bottom: 56px;
    gap: 36px;
  }

  .prose h2 {
    font-size: 26px;
  }

  .prose p {
    font-size: 17px;
  }

  .pull-quote p {
    font-size: 24px;
  }

  .collection-block__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .footer {
    padding-top: 40px;
  }

  .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .footer__brand {
    grid-column: 1 / span 2;
  }

  .footer__newsletter {
    grid-column: 1 / span 2;
  }

  .footer__base {
    margin-top: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}