/** Shopify CDN: Minification failed

Line 968:80 Unexpected bad string token
Line 968:113 Unterminated string token
Line 972:19 Expected identifier but found whitespace

**/
/* ============================================================================
   OLD MONEY — SHOPIFY ADDITIONS
   style.css is the static site's stylesheet, copied in unchanged. This file
   holds only what Shopify itself adds to the page: the wrappers it puts around
   every section, its forms, and the pages the static site never had (cart,
   search, account, blog, 404).
   ========================================================================== */

/* Shopify wraps each section in a <div class="shopify-section">. The header is
   position: sticky, and a sticky element can only stick inside its parent, so
   inside a wrapper exactly its own height it never sticks at all. These
   wrappers step out of the layout so the header's parent is <body>, as it was
   on the static site. */
.section-header,
.shopify-section--announce,
.form-shell,
.pdp__form { display: contents; }

/* Two logo files, one wordmark — the same split .brand__mark already makes with colour. The white file shows while the header is transparent over the home hero (and on through the dark-glass ramp, which stays dark), the black one from .header--solid onward. Both ship in the markup, so the swap costs no second request and cannot flash a wrong-colour logo mid-scroll. */

.brand__logo {
  display: block;
  max-height: 36px;
  width: auto;
  height: auto;
  background: none;
}
.brand__logo--dark { display: none; }
.header--solid .brand__logo--light { display: none; }
.header--solid .brand__logo--dark { display: block; }

  /* The mobile menu is a full-bleed --coal panel: always the white file. */
.brand__logo--menu { max-height: 28px; }

/* Waiting on the store */
.is-busy { opacity: 0.55; pointer-events: none; transition: opacity var(--t-fast) var(--ease); }

/* Search overlay: the way through to every result */
.search-all {
  font-family: var(--sans);
  margin-top: 18px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer__logo {
    display: block;
    max-width: 260px;
    width: 100%;
    height: auto;
    background: none;
  }

/* Form results */
.form-status { margin-top: 14px; }
.form-status--ok { color: inherit; }
.form-status--error { color: #E08A78; }
.section:not(.section--dark) .form-status--error { color: var(--seal); }

/* Pagination */
.pagination {
  font-family: var(--sans);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: clamp(40px, 6vh, 72px);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Plain pages: page, article, 404, account */
.page-plain { padding-top: clamp(40px, 7vh, 96px); }
.page-plain .section-head { margin-bottom: clamp(28px, 4vh, 48px); }
.page-plain__figure { margin: 0 0 clamp(28px, 4vh, 48px); }
.page-plain__figure img { width: 100%; height: auto; border-radius: var(--r-md); }
.page-plain__list { display: grid; gap: 14px; margin: 18px 0 40px; padding: 0; list-style: none; }
.page-plain__address { margin-bottom: 48px; }
.page-plain__recover { margin-top: 56px; }
.page-plain .bulk__form { margin-bottom: 32px; }

.rte > * + * { margin-top: 1em; }
.rte ul, .rte ol { padding-left: 1.2em; }
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte a { text-decoration: underline; text-underline-offset: 3px; }
.rte img { max-width: 100%; height: auto; }
.accordion__panel ol { list-style: decimal; padding-left: 1.2em; }
.accordion__panel ol li { padding-left: 0; }
.accordion__panel ol li::before { content: none; }

/* Cart page */
.cart-page__items { display: grid; gap: 4px; margin-bottom: 32px; }
.cart-page__qty { width: 76px; }
.cart-page__note { margin: 28px 0; }
.cart-page__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.cart-page .cart__subtotal,
.cart-page .cart__tax { color: var(--coal); }

/* Search page form */
.page-search { max-width: 620px; margin-bottom: clamp(36px, 5vh, 60px); }

/* Payment icons */
.footer__payments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  opacity: 0.8;
}
.footer__payment-icon { width: 38px; height: 24px; }

/* Theme editor: a hidden section's wrappers should never leave a gap */
.shopify-section:empty { display: none; }

/* The Notes page restyles .pyramid for its dark cards, and that rule reaches
   the product page too, where the notes come out near-white on paper and
   cannot be read. (The static product.html has the same fault.) */
.pdp .pyramid__note { color: var(--coal); }
.pdp .pyramid__note--none { color: var(--ink-soft); }

/* ---- Collection page: breadcrumb, filter and sort bar ---- */
.collection-page .breadcrumb { color: var(--paper-soft); }
.collection-page .breadcrumb a:hover { color: var(--paper); }

.facets {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--paper-hair);
  font-family: var(--sans);
}
.facets__group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.facets__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-soft);
  margin-right: 4px;
}
.facet { position: relative; }
.facet__summary,
.facet__select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--paper-faint);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.facet__summary::-webkit-details-marker { display: none; }
.facet__summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.facet[open] > .facet__summary { border-color: var(--paper); }
.facet[open] > .facet__summary::after { transform: translateY(1px) rotate(-135deg); }
.facet__summary:hover,
.facet__select:hover { border-color: var(--paper-soft); }
.facet__summary:focus-visible,
.facet__select:focus-visible,
.facet__apply:focus-visible,
.facet__chip:focus-visible { outline: 1px solid var(--paper); outline-offset: 3px; }
.facet__select { padding-right: 12px; }
.facet__select option { color: var(--coal); background: var(--paper); }

.facet__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  min-width: 240px;
  display: grid;
  gap: 12px;
  padding: 18px;
  background: var(--graphite);
  border: 1px solid var(--paper-faint);
  border-radius: var(--r-sm);
}
.facet__option { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--paper); cursor: pointer; }
.facet__option input { width: 16px; height: 16px; accent-color: var(--paper); }
.facet__option input:disabled + span { opacity: 0.4; }
.facet__hint { margin: 0; font-size: 12px; color: var(--paper-soft); }
.facet__price { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.facet__price label { display: grid; gap: 2px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-soft); }
.facet__price .field { padding: 10px 2px; }
.facet__apply {
  justify-self: start;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--paper);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--coal);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.facet__apply:hover { background: transparent; color: var(--paper); }

.facets__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 16px 0 clamp(24px, 4vh, 40px);
  font-family: var(--sans);
}
.facets__count { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-soft); }
.facets__active { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.facet__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--paper-faint);
  border-radius: 999px;
  color: var(--paper);
  font-size: 12px;
  text-decoration: none;
}
.facet__chip:hover { border-color: var(--paper); }
.facets__clear {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.facets__clear:hover { color: var(--paper); }

@media (max-width: 640px) {
  .facets { align-items: stretch; }
  .facets__group { width: 100%; }
  .facets__group--sort .facet__select { flex: 1; }
  .facet { position: static; }
  .facets__group { position: relative; }
  .facet__panel { left: 0; right: 0; min-width: 0; }
}

/* ---- Collection page: one plain card for every product, so the grid lines up ---- */
.collection-page .product-grid { align-items: stretch; }
.collection-page .product-card--plain { display: flex; flex-direction: column; }
.collection-page .product-card--plain .product-card__frame,
.collection-page .product-card--plain .product-card__media { background: #FFFFFF; }
.collection-page .product-card--plain .product-card__media::before { display: none; }
.collection-page .product-card--plain .product-card__frame .product-card__img,
.collection-page .product-card--plain:hover .product-card__frame .product-card__img {
  object-fit: contain;
  background-color: #FFFFFF;
  opacity: 1;
  transform: none;
}
.collection-page .product-card--plain .product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.collection-page .product-card--plain .product-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.collection-page .product-card--plain .buy-row {
  grid-template-columns: 1fr;
  margin-top: auto;
  padding-top: 12px;
}
/* ==========================================================================
     WORDMARK — Didone logotype, tight-set.
     Bodoni Moda at a large optical size gives the hairline/stem contrast of
     the printed logo; tracking drops to near zero so the letters set as one
     block rather than the spaced-out lockup in style.css.
     ========================================================================== */
  .brand__mark,
  .footer__wordmark {
    font-family: "Bodoni Moda", "Libre Bodoni", Didot, "Bodoni 72", Georgia, serif;
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 96;
    font-weight: 500;
    text-transform: uppercase;
  }

  .brand__mark {
    font-size: 26px;
    letter-spacing: 0.015em;
    word-spacing: 0.14em;
  }

  .footer__wordmark {
    font-size: 2.1rem;
    letter-spacing: 0.015em;
    word-spacing: 0.14em;
  }

  
/* ---- The About page ------------------------------------------------------
   style.css has no sections for a brand story or for people, so the About
   page's four sections are drawn here with the rest of the Shopify-only
   pages. Everything uses the site's own tokens, so both grounds work. */

.about-hero .section-head { margin-bottom: 0; }
.about-hero .rule { margin-top: clamp(28px, 4vh, 44px); }

/* The chapters: label in the margin, the text in the column. */
.about-chapters .container { display: grid; gap: clamp(44px, 7vh, 88px); }
.about-chapter {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
}
.about-chapter__label {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--stamp-deep);
  margin: 7px 0 0;
}
.section--dark .about-chapter__label { color: var(--stamp); }
.about-chapter__title {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.about-chapter__copy { font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); max-width: 62ch; }
.section--dark .about-chapter__copy { color: var(--paper-soft); }

/* The quote bands. */
.about-quote__block { margin: 0; text-align: center; }
.about-quote__mark {
  font-family: var(--sans);
  font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--stamp);
  margin: 0 0 22px;
}
.about-quote__text {
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.about-quote__text em { font-style: italic; }
.about-quote__by {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-soft);
  margin-top: 22px;
}
.about-quote:not(.section--dark):not(.section--wood) .about-quote__by { color: var(--ink-soft); }

/* The founders: one photograph of them both, then a column each. */
.founders__figure {
  margin: 0 0 clamp(32px, 5vh, 60px);
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-deep);
}
.founders__figure img { width: 100%; height: auto; }
.founders__caption {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stamp-deep);
  text-align: center;
  padding: 14px 16px 0;
}
.section--dark .founders__caption { color: var(--paper-soft); }

.founders__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 54px);
}
.founders__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
.founder__figure {
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-deep);
}
.founder__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.founder:hover .founder__figure img { transform: scale(1.03); }
.founder__quote {
  font-family: var(--serif);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  margin: 0 0 20px;
  padding-left: 18px;
  border-left: 1px solid var(--stamp);
}
.section--dark .founder__quote { color: var(--paper); }
.founder__name {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: 0.01em;
  margin: 0;
}
.founder__role {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--stamp-deep);
  margin: 6px 0 0;
}
.section--dark .founder__role { color: var(--stamp); }
.founder__link { display: inline-block; margin-top: 14px; }

@media (max-width: 700px) {
  .about-chapter { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .about-chapter__label { margin-top: 0; }
  .founders__grid { grid-template-columns: minmax(0, 1fr); }
}

  /* style.css re-applies 0.18em tracking at 2474 / 3806 — hold the tight
     setting on small screens or the phone header drifts back open. */
  @media (max-width: 900px) {
    .brand__mark { font-size: 21px; letter-spacing: 0.015em; }
  }
  @media (max-width: 600px) {
    .brand__mark { font-size: 19px; letter-spacing: 0.015em; }
    .footer__wordmark { font-size: 1.7rem; }
  }

  /* ---- Founder image sizing -------------------------------------------------
     Four knobs. Change the values here, not the rules below. A ratio of `auto`
     means no crop at all: the photograph keeps its own proportions. */
  .founders {
    --founders-photo-max: 900px;    /* width cap on the group photograph */
    --founders-photo-ratio: 16 / 9; /* 3 / 2 · 4 / 5 · 1 / 1 · auto */
    --founder-portrait-max: 100%;   /* width cap on each portrait, e.g. 340px */
    --founder-portrait-ratio: 3 / 4;
  }

  .founders__figure {
    max-width: var(--founders-photo-max);
    margin-inline: auto;
  }
  .founders__figure img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--founders-photo-ratio);
    object-fit: cover;
    object-position: center 35%;    /* lift the crop towards the faces */
  }

  .founder__figure {
    max-width: var(--founder-portrait-max);
  }
  .founder__figure img {
    aspect-ratio: var(--founder-portrait-ratio);
    object-fit: cover;
    object-position: center 30%;
  }

  @media (max-width: 700px) {
    .founders { --founders-photo-ratio: 4 / 5; }   /* taller crop on a phone */
  }

  /* ---- Mobile menu: the links ran too large on a phone -------------------- */
  /* style.css sets clamp(2rem, 9vw, 2.75rem) on .mobile-menu__link — 32px on a
     small phone and 44px from 490px wide, which fills the whole panel. This
     file loads after style.css, so the same selector wins here without
     !important. The row still clears a 44px touch target: 24px of type on a
     1.1 line-height inside 14px of padding-block gives 54px. */
  .mobile-menu__link {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
  }


  /* ==========================================================================
     TOUCH DEVICES — the first tap was being eaten, and scrolling stuttered
     ========================================================================== */

  /* ---- 1. iPhone needed two taps to follow a link ------------------------ */
  /* Nothing in style.css gates :hover behind a pointer query, so on iOS every
     :hover rule fires on the first tap. Safari treats that tap as the hover and
     keeps the click for itself, which is why a second tap was needed — and why
     Android, which dispatches the click on the first tap, was never affected.
     The rules that MOVE or REPLACE what is under the finger are the ones that
     cost the click, so wherever hover is not a real thing the card stays at
     rest. Colour-only hovers are left alone: they cannot swallow a tap. */
  @media (hover: none) {
    .product-card:hover .product-card__img           { transform: none; opacity: 1; }
    .product-card:hover .product-card__img--alt      { opacity: 0; }
    .product-card:hover .product-card__body          { transform: none; }
    .product-card:hover .product-card__media::before { opacity: 1; }
  }

  /* ---- 2. The header re-blurred the whole page on every scroll frame ----- */
  /* script.js writes --scroll-depth on scroll, and style.css feeds it straight
     into the blur RADIUS. A changing radius makes iOS re-rasterise everything
     behind the bar each frame, which is the stutter. The radius is frozen here
     and only the background tint keeps animating — that part is cheap, so the
     bar still thickens as the page moves. */
  @media (hover: none) {
    .header:not(.header--solid),
    .header:not(.header--solid).is-stuck {
      -webkit-backdrop-filter: blur(14px) saturate(118%);
      backdrop-filter: blur(14px) saturate(118%);
    }
    .header--solid,
    .header--solid.is-stuck {
      -webkit-backdrop-filter: blur(16px) saturate(115%);
      backdrop-filter: blur(16px) saturate(115%);
    }
  }

  /* ---- 3. Eight live backdrop-filters in the product grid ---------------- */
  /* Quick add is hidden behind hover on a desktop, but style.css sets it to
     opacity 1 below 640px — so on a phone every card on screen carried its own
     smoked-glass blur while the grid scrolled. A flat tint reads the same at
     that size and costs nothing. */
  @media (max-width: 640px) {
    .product-card__quick {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: rgba(11, 11, 13, 0.72);
    }
  }

  /* ---- 4. The grain sheet recomposited the page as it moved -------------- */
  /* .grain is a fixed, full-viewport layer with mix-blend-mode: multiply, which
     forces the whole stacking context to be blended again on every frame of
     every scroll. At 0.035 opacity it is doing nothing visible on a phone. */
  @media (hover: none) {
    .grain { display: none; }
  }
  
/* ============================================================================
   PRODUCT REVIEWS — "Worn in"
   sections/product-reviews.liquid. A narrow summary rail beside a
   hairline-separated list, flat on paper, with the scent's own colour as the
   only hue — the same shape .testimonial already uses on the dark ground.
   Namespaced .revs-/.rev- throughout: .stars and .chip are already taken by
   the testimonials and the notes filter and mean something else there.
   ========================================================================== */
.revs { scroll-margin-top: calc(var(--header-h) + 20px); }

.revs__grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.revs__main { min-width: 0; }

/* ---- Stars ---------------------------------------------------------------
   Two rows of five, the solid one clipped to the rating's percentage. One
   markup for 4.8 and for 3, and no half-star file to draw. */
.rev-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  color: var(--stamp-deep);
  font-size: 13px;
  flex: none;
}
.rev-stars--lg { font-size: 17px; }
.rev-stars__row { display: flex; gap: 2px; }
.rev-stars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
}
.rev-stars__fill .rev-stars__row { width: max-content; }
.rev-star {
  width: 1em;
  height: 1em;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.38;
}
.rev-star--solid { fill: currentColor; stroke: none; opacity: 1; }

/* ---- The summary rail ---- */
.revs-sum {
  display: grid;
  gap: 26px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.revs-sum__score { display: flex; align-items: flex-end; gap: 14px; margin: 0; }
.revs-sum__avg {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 6vw, 4.6rem);
  line-height: 0.86;
  font-variant-numeric: tabular-nums;
}
.revs-sum__of {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 4px;
}
.revs-sum__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
}
.revs-sum__count {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Distribution. Each row is also the filter for its rating. */
.revs-bars { display: grid; gap: 9px; }
.revs-bar {
  display: grid;
  grid-template-columns: 46px 1fr 28px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.revs-bar:hover:not(:disabled),
.revs-bar[aria-pressed="true"] { color: var(--coal); }
.revs-bar:disabled { cursor: default; opacity: 0.45; }
.revs-bar__track { height: 2px; background: var(--ink-faint); overflow: hidden; }
.revs-bar__fill {
  display: block;
  height: 100%;
  background: var(--stamp-deep);
  transition: width var(--t-mid) var(--ease-out);
}
.revs-bar[aria-pressed="true"] .revs-bar__track { background: rgba(19, 19, 22, 0.24); }
.revs-bar__n { text-align: right; font-variant-numeric: tabular-nums; }

.revs-facts {
  display: grid;
  gap: 14px;
  padding: 20px 22px;
  background: var(--paper-deep);
  border-radius: var(--r-md);
}
.revs-fact { display: grid; gap: 3px; margin: 0; }
.revs-fact b {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.revs-fact span {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- Filter and sort ---- */
.revs-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink-faint);
}
.revs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.revs-chip {
  padding: 8px 15px;
  background: none;
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.revs-chip:hover { color: var(--coal); border-color: rgba(19, 19, 22, 0.3); }
.revs-chip[aria-pressed="true"] { background: var(--coal); border-color: var(--coal); color: var(--paper); }

.revs-tools__sort { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.revs-tools__sort label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.revs-tools__sort select {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 11px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-sm);
}

/* ---- The list ------------------------------------------------------------
   Every review is in the markup; the script only hides and reorders, so a
   crawler and a shopper with no JavaScript both get the lot. */
.revs-list { display: flex; flex-direction: column; }
.rev {
  display: grid;
  gap: 14px;
  padding-block: clamp(26px, 3vw, 36px);
  border-bottom: 1px solid var(--ink-faint);
}
.rev__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rev__date {
  font-family: var(--sans);
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.rev__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.3;
  text-wrap: balance;
  margin: 0;
}
.rev__body {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 62ch;
}
.rev__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rev__by { color: var(--coal); font-weight: 500; }
.rev__verified { display: inline-flex; align-items: center; gap: 5px; color: var(--stamp-deep); }
.rev__verified svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rev__size { padding: 3px 10px; border: 1px solid var(--ink-faint); border-radius: var(--r-pill); }
.rev__helpful {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 5px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.rev__helpful svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.rev__helpful:hover { color: var(--coal); border-color: var(--ink-faint); }
.rev__helpful[aria-pressed="true"] { color: var(--stamp-deep); border-color: var(--stamp); }

/* The house answering a review. Where a three-star gets a reply instead of
   being hidden. */
.rev__reply {
  display: grid;
  gap: 7px;
  padding: 16px 18px;
  background: var(--paper-deep);
  border-radius: var(--r-md);
}
.rev__reply p { margin: 0; font-size: 0.925rem; line-height: 1.7; color: var(--ink-soft); }
.rev__reply-who {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stamp-deep);
}

.revs-list__more { display: flex; justify-content: center; padding-top: clamp(26px, 3.4vw, 38px); }
.revs-list__empty {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding-block: clamp(30px, 4vw, 48px);
  color: var(--ink-soft);
}
.revs-list__empty .link-underline { background: none; border: 0; padding: 0 0 4px; cursor: pointer; color: var(--coal); }

/* Nothing published yet */
.revs__none { display: grid; gap: 22px; justify-items: start; max-width: 52ch; }
.revs__none-text { margin: 0; font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.75; color: var(--ink-soft); }

/* ---- Write a review ---- */
.revs-writer {
  margin-bottom: clamp(26px, 3.4vw, 38px);
  padding: clamp(22px, 2.8vw, 34px);
  background: var(--coal);
  color: var(--paper);
  border-radius: var(--r-md);
}
.revs-writer__title { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin: 0 0 6px; }
.revs-writer__note {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-soft);
  margin: 0 0 24px;
}
.revs-writer__fields { display: grid; gap: 14px; }
.revs-writer__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.revs-field { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.revs-field__label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-soft);
  padding: 0;
}
/* .field is built for dark type on paper; on this ground it needs the inverse. */
.revs-writer .field { color: var(--paper); border-bottom-color: var(--paper-faint); }
.revs-writer .field::placeholder { color: rgba(241, 239, 236, 0.34); }
.revs-writer .field:focus { border-bottom-color: var(--stamp); }
.revs-writer textarea.field { resize: vertical; line-height: 1.65; }

/* The rating: five radios wearing stars. It posts, it takes the arrow keys,
   and it is already right before any script runs. */
.revs-field--rating { margin-bottom: 4px; }
.revs-picker { display: flex; align-items: center; gap: 4px; color: var(--stamp); }
.revs-picker__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.revs-picker__star { line-height: 0; padding: 3px; cursor: pointer; }
.revs-picker__star svg {
  width: 22px; height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.5;
  transition: opacity var(--t-fast) var(--ease), fill var(--t-fast) var(--ease);
}
.revs-picker:hover .revs-picker__star svg { opacity: 0.75; }
/* Every star up to the chosen one fills: fill them all, then hollow out the
   ones that come after it. */
.revs-picker:has(:checked) .revs-picker__star svg { fill: currentColor; stroke: none; opacity: 1; }
.revs-picker__input:checked + .revs-picker__star svg { fill: currentColor; stroke: none; opacity: 1; }
.revs-picker__input:checked ~ .revs-picker__input + .revs-picker__star svg {
  fill: none;
  stroke: currentColor;
  opacity: 0.5;
}
.revs-picker__input:focus-visible + .revs-picker__star { outline: 2px solid var(--stamp); outline-offset: 2px; }

.revs-writer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.revs-writer__status { margin: 0; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.revs-writer .form-status--ok { color: var(--stamp); }

@media (max-width: 900px) {
  .revs__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); }
  .revs-sum { position: static; }
  .revs-facts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .revs-facts { grid-template-columns: 1fr 1fr; }
  .revs-writer__pair { grid-template-columns: minmax(0, 1fr); }
  .revs-tools__sort { margin-left: 0; width: 100%; }
  .revs-tools__sort select { flex: 1; }
  .rev__date { margin-left: 0; width: 100%; }
  .rev__helpful { margin-left: 0; }
}

/* ---- The rating under the tagline on a product page ---- */
  .rating-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 18px 0 0;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-soft);
  }
  .rating-line__score { color: var(--ink); font-weight: 600; }
  .rating-line__link {
    color: var(--ink-soft);
    border-bottom: 1px solid var(--ink-faint);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .rating-line__link:hover { color: var(--ink); border-color: var(--ink); }

  And one more line — the snippet uses the --md star size, which the file didn't have. Find this existing line:

  .rev-stars--lg { font-size: 17px; }

  and add above it:

  .rev-stars--md { font-size: 15px; }