/** Shopify CDN: Minification failed

Line 5164:2 Unexpected "{"
Line 5164:3 Expected identifier but found "%"
Line 5164:80 Unexpected "`"
Line 5164:230 Expected identifier but found "%"
Line 19070:50 Expected identifier but found whitespace

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
/* A scheme has to be painted, not merely named. `.color-scheme-N` declares the custom properties and stops there, so a section that offers the setting and never draws with it leaves the merchant's choice invisible. Restating the section grid here is what lets the background reach the viewport edges while the contents stay in the content column. */
  .error-page {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .error-page > * {
    grid-column: 2;
  }

  .error-page__inner {
    width: min(44rem, var(--content-width));
    margin-inline: auto;
    text-align: center;
  }

  .error-page__title {
    margin: 0 0 0.75rem;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--font-size-h1);
    line-height: 1.15;
  }

  .error-page__text {
    margin: 0 0 2rem;
    color: rgba(var(--color-foreground), 0.75);
  }

  /* The field and its button on one line, because they are one action. Wraps under 30rem, where a field beside a button is left too narrow to show what has been typed into it. */
  .error-page__search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-block-end: 1.5rem;
  }

  .error-page__search .field__input {
    flex: 1 1 16rem;
    min-width: 0;
  }

  .error-page__button {
    display: inline-flex;
  }
/* END_SECTION:404 */

/* START_SECTION:age-verification (INDEX:2) */
/* Full bleed. A gate that leaves the store visible around its edges has not
     gated anything. */
  .age-gate {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    border: 0;
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
    overflow: auto;
  }

  .age-gate::backdrop {
    background: rgb(var(--color-background));
  }

  html:not(.js) .age-gate {
    display: none;
  }

  .age-gate__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .age-gate__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .age-gate__veil {
    position: absolute;
    inset: 0;
    background: rgb(var(--color-background));
    opacity: var(--veil, 0.5);
  }

  .age-gate__body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.25rem;
    align-content: center;
    justify-items: start;
    width: min(var(--gate-width, 460px), calc(100vw - 3rem));
    min-height: 100%;
    margin-inline: auto;
    padding-block: 3rem;
  }

  .age-gate__body.text-center {
    justify-items: center;
  }

  .age-gate__body.text-end {
    justify-items: end;
  }

  .age-gate__body > [data-age-step] {
    display: grid;
    gap: 0.875rem;
    justify-items: inherit;
    width: 100%;
    padding: 1.5rem;
    border-radius: var(--gate-radius, 0px);
  }

  .age-gate__logo {
    width: auto;
    max-height: 2.75rem;
    object-fit: contain;
  }

  .age-gate__heading {
    margin: 0;
    font-size: var(--font-size-h3);
  }

  .age-gate__text {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  .age-gate__dob {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .age-gate__dob-field {
    display: grid;
    gap: 0.25rem;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .age-gate__dob input {
    width: 3.5rem;
    min-height: 2.75rem;
    padding: 0.5rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: 16px;
    text-align: center;
  }

  .age-gate__dob-field--year input {
    width: 5rem;
  }

  .age-gate__error {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-accent));
  }

  .age-gate__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
/* END_SECTION:age-verification */

/* START_SECTION:announcement-bar (INDEX:3) */
.announcement {
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  /* --- Sticky --- Sticky sits on the section wrapper: .announcement is a grid child of .shopify-section, and a sticky element can never travel beyond its own parent's box, so sticking the child would do nothing. */
  .shopify-section:has(.announcement--sticky) {
    position: sticky;
    inset-block-start: 0;
    z-index: 41;
  }

  /* Two different numbers, for two different jobs. */
  :root:has(.announcement) {
    --announcement-height: 2.5rem;
  }

  :root:has(.announcement--compact) {
    --announcement-height: 2rem;
  }

  /* Narrow phones wrap the message to a second line. Measured at 54px on a
     320px viewport, so the static value is corrected here rather than left to
     JavaScript, which would move the header after first paint. */
  @media screen and (max-width: 374px) {
    :root:has(.announcement) {
      --announcement-height: 3.375rem;
    }
  }

  /* CSS-only fallback for the header's offset, so the stack is right before any
     script runs. theme.js overwrites this with the measured height. */
  :root:has(.announcement--sticky) {
    --announcement-offset: 2.5rem;
  }

  :root:has(.announcement--sticky.announcement--compact) {
    --announcement-offset: 2rem;
  }

  @media screen and (max-width: 749px) {
    .shopify-section:has(.announcement--sticky-desktop-only) {
      position: relative;
      z-index: auto;
    }

    :root:has(.announcement--sticky-desktop-only) {
      --announcement-offset: 0px;
    }
  }

  /* --- Layout --- */

  .announcement__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
  }

  /* `flex: 1 1 0` and `min-width: 0`, not `flex: 1 1 auto`. */
  .announcement__track {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .announcement__track::-webkit-scrollbar {
    display: none;
  }

  .announcement__item {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    scroll-snap-align: start;
  }

  .announcement__message {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.125rem 0.5rem;
    padding-block: 0.5rem;
    font-size: var(--font-size-xs);
    text-align: center;
  }

  /* Normal weight, like every other label in the theme. Uppercase and the wide eyebrow tracking already separate this from body copy; a bold face on top turns a quiet notice into a shout, which is the one thing a bar pinned to the top of every page should never be. */
  .announcement__heading {
    font-weight: var(--font-body--weight);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: var(--transform-eyebrow);
  }

  .announcement__body {
    color: rgba(var(--color-foreground), 0.78);
  }

  a.announcement__message:hover .announcement__heading,
  a.announcement__message:hover .announcement__body {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* --- Compact --- */

  .announcement--compact .announcement__item {
    min-height: 2rem;
  }

  .announcement--compact .announcement__message {
    padding-block: 0.25rem;
    font-size: 0.6875rem;
  }

  .announcement--compact .announcement__arrow {
    min-height: 2rem;
  }

  /* --- Controls --- */

  .announcement__arrow {
    flex: 0 0 auto;
    min-width: 2.5rem;
    min-height: 2.5rem;
  }

  .announcement__arrow svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  [data-announcement-previous] svg {
    transform: rotate(90deg);
  }

  [data-announcement-next] svg {
    transform: rotate(-90deg);
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:article (INDEX:4) */
/* A scheme has to be painted, not merely named. `.color-scheme-N` declares the custom properties and stops there, so a section that offers the setting and never draws with it leaves the merchant's choice invisible. Restating the section grid here is what lets the background reach the viewport edges while the contents stay in the content column. */
  .article {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .article > * {
    grid-column: 2;
  }

  /* The measure. Body text past about 70 characters loses the eye on the way back from the right edge; the cover is allowed to be wider, because a photograph has no line to lose. */
  .article__measure {
    max-width: var(--article-measure, 44rem);
    margin-inline: auto;
  }

  /* --- Shop this story --- */
  /* No background or box: a clean section separated by a top rule, matching the
     theme's minimalist blocks (user request to drop the tinted background). */
  .article__shop {
    margin-block: clamp(2rem, 4vw, 3rem);
    padding-block-start: clamp(1.5rem, 3vw, 2rem);
    border-block-start: 1px solid rgb(var(--color-border));
  }

  .article__shop-eyebrow {
    margin: 0 0 0.25rem;
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: var(--transform-eyebrow);
    color: rgb(var(--color-accent));
  }

  .article__shop-title {
    margin: 0 0 1.25rem;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
  }

  .article__shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.25rem);
  }

  @media screen and (min-width: 750px) {
    .article__shop-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* --- Per-article FAQ --- */
  .article__faq {
    margin-block: clamp(2rem, 4vw, 3rem);
    padding-block-start: clamp(1.5rem, 3vw, 2rem);
    border-block-start: 1px solid rgb(var(--color-border));
  }

  .article__faq-title {
    margin: 0 0 1rem;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
  }

  .article__faq-item {
    border-block-end: 1px solid rgba(var(--color-foreground), 0.12);
  }

  .article__faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.875rem;
    font-size: var(--font-size-body);
    font-weight: var(--font-body--weight-bold);
    cursor: pointer;
    list-style: none;
  }

  .article__faq-q::-webkit-details-marker {
    display: none;
  }

  .article__faq-mark {
    position: relative;
    flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
  }

  .article__faq-mark::before,
  .article__faq-mark::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .article__faq-mark::after {
    transform: rotate(90deg);
  }

  .article__faq-item[open] .article__faq-mark::after {
    transform: rotate(0deg);
  }

  .article__faq-a {
    padding-block: 0 1rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.8);
  }

  @media (prefers-reduced-motion: reduce) {
    .article__faq-mark::before,
    .article__faq-mark::after {
      transition: none;
    }
  }

  /* Left by default, and with the author beside the date rather than under a centred title — the arrangement a magazine uses, and the one that reads as a byline rather than as a title card. */
  .article__header {
    display: grid;
    gap: 0.75rem;
    margin-block-end: 1.75rem;
  }

  .article--head-start .article__header {
    justify-items: start;
    text-align: start;
  }

  .article--head-center .article__header {
    justify-items: center;
    text-align: center;
  }

  .article--head-end .article__header {
    justify-items: end;
    text-align: end;
  }

  .article--head-start .article__byline {
    justify-content: flex-start;
  }

  .article--head-end .article__byline {
    justify-content: flex-end;
  }

  /* The trail answers to the page, not to the measure. */
  .article__crumbs {
    margin-block-end: 1.25rem;
  }

  .article__eyebrow {
    margin: 0;
  }

  .article__eyebrow a {
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .article__eyebrow a:hover {
    color: rgb(var(--color-foreground));
  }

  /* The merchant's number, capped against the viewport. */
  .article__title {
    margin: 0;
    font-size: min(var(--article-title-size, 44px), 9vw);
    line-height: 1.1;
  }

  .article__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .article__author {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgb(var(--color-foreground));
  }

  .article__avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(var(--color-accent), 0.12);
    color: rgb(var(--color-accent));
    font-size: var(--font-size-xs);
    font-weight: var(--font-body--weight-bold);
  }

  /* The same width as the words. A cover wider than the column it introduces
     reads as two elements rather than one article. */
  .article__cover {
    max-width: var(--article-measure, 44rem);
    overflow: hidden;
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.05);
    margin-inline: auto;
    margin-block-end: 2rem;
    aspect-ratio: var(--cover-ratio, 16 / 9);
  }

  .article__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .article__content {
    font-size: var(--font-size-base);
    line-height: 1.7;
  }

  /* Smaller in-body headings, scoped to the article so the theme's global rich
     text is untouched. The post title stays the largest; section headings sit
     clearly below it. */
  .article__content h2 {
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    line-height: 1.3;
  }

  .article__content h3 {
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    line-height: 1.35;
  }

  .article__content h4 {
    font-size: 1rem;
    line-height: 1.4;
  }

  /* --- Layout --- * One column until 990px, and the rail follows the post rather than * preceding it — a reader who arrived for an article should meet the article, * not a newsletter form. Above that the two sit side by side and the measure * stops centring, because it now has a column of its own to sit in. */
  .article__layout--sidebar .article__measure,
  .article__layout--sidebar .article__cover {
    margin-inline: 0;
  }

  /* The header is outside the grid now, so it takes the same treatment on its
     own — otherwise the title centres over a column that no longer does. */
  .article--has-rail .article__header,
  .article--has-rail .article__crumbs {
    margin-inline: 0;
  }

  /* The article is a frame, not the whole page. */
  .article--has-rail .article__crumbs,
  .article--has-rail .article__header,
  .article--has-rail .article__layout {
    max-width: var(--article-frame);
    margin-inline: auto;
  }

  @media screen and (min-width: 990px) {
    .article__layout--sidebar {
      display: grid;
      grid-template-columns: minmax(0, var(--article-measure, 44rem)) var(--article-rail);
      gap: var(--article-rail-gap);
      align-items: start;
    }

    .article--rail-start .article__layout--sidebar {
      grid-template-columns: var(--article-rail) minmax(0, var(--article-measure, 44rem));
    }

    .article--rail-start .article__main {
      order: 2;
    }

    .article__sidebar--sticky {
      position: sticky;
      /* Under the header, wherever it currently is. */
      inset-block-start: calc(var(--header-offset, 0px) + 1.5rem);
    }
  }

  .article__main {
    min-width: 0;
  }

  .article__sidebar {
    display: grid;
    gap: 2rem;
    min-width: 0;
    margin-block-start: 3rem;
  }

  /* Without a rail the frame is just the measure, so nothing else has to
     change when a merchant turns the sidebar off. */
  .article:not(.article--has-rail) .article__layout {
    max-width: none;
  }

  @media screen and (min-width: 990px) {
    .article__sidebar {
      margin-block-start: 0;
    }
  }

  /* --- Reading progress --- */

  .article__progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 39;
    height: 3px;
    pointer-events: none;
  }

  .article__progress span {
    display: block;
    height: 100%;
    background: rgb(var(--color-accent));
    transform-origin: left center;
    scale: 0 1;
    animation: article-progress linear both;
    animation-timeline: scroll();
  }

  [dir='rtl'] .article__progress span {
    transform-origin: right center;
  }

  @keyframes article-progress {
    to {
      scale: 1 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .article__progress {
      display: none;
    }
  }

  /* --- Tags --- */

  .article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 2rem;
  }

  .article__tag {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: 999px;
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-xs);
    text-decoration: none;
  }

  .article__tag:hover {
    border-color: rgb(var(--color-foreground));
  }

  /* --- The rail --- */

  .rail {
    display: grid;
    gap: 0.75rem;
  }

  .rail--panel {
    padding: 1.25rem;
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: var(--style-border-radius-inputs);
    background: rgba(var(--color-foreground), 0.03);
  }

  .rail__title {
    margin: 0;
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.7);
  }

  .rail__text {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  .rail__posts {
    display: grid;
    gap: 0.875rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .rail-post {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }

  .rail-post__media {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.05);
  }

  .rail-post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .rail-post__copy {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .rail-post__title {
    font-size: var(--font-size-sm);
    line-height: 1.3;
    color: rgb(var(--color-foreground));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .rail-post:hover .rail-post__title {
    color: rgb(var(--color-accent));
  }

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

  /* --- Stacked --- * One per line, each a full-width row with a hairline under it and a chevron * at the end. Run together on one line they read as a sentence rather than as * a set of links — which is exactly how they looked, and why nobody would * think to press one. */
  .rail__tags--list {
    display: grid;
  }

  .rail__tags--list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.625rem;
    border-block-end: 1px solid rgba(var(--color-foreground), 0.1);
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  .rail__tags--list li:last-child a {
    border-block-end: 0;
  }

  .rail__tags--list a:hover {
    color: rgb(var(--color-accent));
  }

  .rail__tag-arrow {
    display: flex;
    color: rgba(var(--color-foreground), 0.35);
    transition: translate var(--duration-fast) var(--ease-out);
  }

  .rail__tags--list a:hover .rail__tag-arrow {
    translate: 0.1875rem 0;
    color: rgb(var(--color-accent));
  }

  .rail__tag-arrow svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  /* --- Pills --- */

  .rail__tags--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .rail__tags--buttons a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: 999px;
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-xs);
    text-decoration: none;
    transition:
      border-color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out);
  }

  .rail__tags--buttons a:hover {
    border-color: rgb(var(--color-foreground));
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  /* --- One card around the whole rail --- * Three bordered boxes stacked in a 272px column is nine edges and three * radii in a space narrower than a phone. The rail is one object — a set of * things beside the article — so it gets one edge, and the blocks inside are * divided by hairlines instead. Calmer, and it survives a merchant adding a * fourth block. */
  .article__sidebar--boxed {
    padding: 1.5rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--sidebar-radius, 0px);
    background: rgba(var(--color-foreground), 0.02);
    gap: 0;
  }

  .article__sidebar--boxed .rail + .rail {
    padding-block-start: 1.5rem;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
    margin-block-start: 1.5rem;
  }

  .article__sidebar--boxed .rail--panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* --- A card per block --- * Kept for merchants who want each one to read as its own module — useful * when the blocks are unrelated, or when only one of them matters. */
  .article__sidebar--card .rail {
    padding: 1.25rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--sidebar-radius, 0px);
    background: rgba(var(--color-foreground), 0.02);
  }

  .article__sidebar--card .rail--panel {
    background: rgba(var(--color-foreground), 0.02);
  }

  .rail__form {
    display: grid;
    gap: 0.5rem;
  }

  .rail__note {
    margin: 0;
    font-size: var(--font-size-sm);
  }

  .rail__promo {
    display: grid;
    gap: 0.5rem;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }

  .rail__promo img {
    width: 100%;
    height: auto;
    border-radius: var(--style-border-radius-media);
  }

  .rail__promo-caption {
    font-size: var(--font-size-sm);
  }

  /* --- Share --- */

  .article__share {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block-start: 1.75rem;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
    margin-block-start: 2.5rem;
  }

  .article__share-label {
    font-size: var(--font-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.7);
  }

  .article__share-link {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: 999px;
    color: rgb(var(--color-foreground));
    transition:
      border-color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out);
  }

  .article__share-link:hover {
    border-color: rgb(var(--color-foreground));
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  .article__share-link svg {
    width: 1rem;
    height: 1rem;
  }

  /* --- Read next --- */

  .article__related {
    padding-block-start: 3rem;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
    margin-block-start: 3.5rem;
  }

  .article__related-title {
    margin: 0 0 1.5rem;
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.7);
    text-align: center;
  }

  /* Two numbers, because a gap that reads as generous on a desktop is a third
     of a phone screen spent on nothing. */
  .article__related-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--card-gap-mobile, 32px);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .article__related-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--card-gap, 40px);
    }
  }

  /* --- Comments --- */

  .article__comments {
    padding-block-start: 3rem;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
    margin-block-start: 3.5rem;
  }

  .article__comments-title,
  .article__form-title {
    margin: 0 0 1.25rem;
    font-size: var(--font-size-h6);
  }

  .article__comment-list {
    display: grid;
    gap: 1.5rem;
    padding: 0;
    margin: 0 0 2.5rem;
    list-style: none;
  }

  .article__comment {
    padding: 1rem 1.125rem;
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: var(--style-border-radius-inputs);
    background: rgba(var(--color-foreground), 0.02);
  }

  .article__comment-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.375rem;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .article__comment-author {
    color: rgb(var(--color-foreground));
    font-weight: var(--font-body--weight-bold);
  }

  .article__comment-body {
    font-size: var(--font-size-sm);
  }

  .article__form {
    display: grid;
    justify-items: start;
    gap: 1rem;
  }

  .article__field-row {
    display: grid;
    gap: 1rem;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .article__field-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .article__form .field {
    width: 100%;
  }

  .article__notice {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--style-border-radius-inputs);
    background: rgba(var(--color-accent), 0.08);
    font-size: var(--font-size-sm);
  }
/* END_SECTION:article */

/* START_SECTION:banner (INDEX:5) */
/* The band paints its scheme like every other section. It is only visible around an inset banner — behind a full-bleed one the photograph covers all of it — but a merchant who picks a scheme and sees nothing has been given a control that lies, which is the defect this theme has now fixed twenty times. `--content-grid` so an inset banner sits in the content column. */
  .banner {
    display: grid;
    grid-template-columns: var(--content-grid);
    margin-block: var(--margin-top) var(--margin-bottom);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  /* Padding only when the banner is inset, so the band reads as a frame around
     it. A full-bleed banner has nothing to frame. */
  .banner--inset {
    padding-block: var(--band-padding, 0);
  }

  .banner > * {
    grid-column: 1 / -1;
  }

  /* Inset keeps the banner in the content column, so it reads as a card on the
     page rather than as a break in it. */
  .banner--inset > .banner__frame {
    grid-column: 2;
  }

  .banner__frame {
    position: relative;
    display: grid;
    isolation: isolate;
    overflow: hidden;
    min-height: min(var(--banner-height), var(--banner-height-max, 900px));
  }

  .banner--inset .banner__frame {
    border-radius: var(--banner-radius, 0);
  }

  @media screen and (max-width: 749px) {
    .banner__frame {
      min-height: var(--banner-height-mobile, 60vh);
    }
  }

  .banner__media {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .banner__image,
  .banner__placeholder,
  .banner__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
  }

  .banner__placeholder {
    background: rgba(var(--color-foreground), 0.08);
  }

  /* An embedded player cannot be cropped the way a file can, so it is scaled past the frame — a 16:9 iframe in a taller banner would otherwise letterbox. `pointer-events: none` so the provider's own overlays cannot take a click the merchant did not put there. */
  .banner__video--external {
    inset: 50% auto auto 50%;
    width: max(100%, 177.78vh);
    height: max(100%, 56.25vw);
    translate: -50% -50%;
    pointer-events: none;
  }

  /* The poster is already underneath, so hiding the video leaves a still image
     rather than a hole. */
  @media (prefers-reduced-motion: reduce) {
    .banner__video {
      display: none;
    }
  }

  .banner__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--overlay, 0.3));
  }

  .banner__content {
    display: grid;
    padding: clamp(1.5rem, 5vw, 4rem);
  }

  .banner--x-start .banner__content {
    justify-items: start;
  }

  .banner--x-center .banner__content {
    justify-items: center;
  }

  .banner--x-end .banner__content {
    justify-items: end;
  }

  .banner--y-start .banner__content {
    align-items: start;
  }

  .banner--y-center .banner__content {
    align-items: center;
  }

  .banner--y-end .banner__content {
    align-items: end;
  }

  .banner__text {
    display: grid;
    gap: 1rem;
    max-width: var(--measure);
    /* The scheme is painted on the content, not on the band: a colour scheme
       behind words that sit on a photograph would hide the photograph. */
    color: rgb(var(--color-foreground));
  }

  .banner__text--align-start {
    justify-items: start;
    text-align: start;
  }

  .banner__text--align-center {
    justify-items: center;
    text-align: center;
  }

  .banner__text--align-end {
    justify-items: end;
    text-align: end;
  }

  .banner__app {
    grid-column: 2;
    margin-block-start: 1.5rem;
  }
/* END_SECTION:banner */

/* START_SECTION:beauty-editorial (INDEX:6) */
.bty-ed__inner {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    padding-block: clamp(28px, 4vw, 56px);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
  }

  .bty-ed__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f2ece1;
  }

  .bty-ed__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .bty-ed__eyebrow {
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #d17a8d;
  }

  .bty-ed__title {
    margin: 12px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1.1;
    font-size: clamp(22px, 2.6vw, 32px);
    color: #2a251f;
  }

  .bty-ed__text {
    margin: 14px 0 0;
    max-width: 52ch;
    font-family: var(--font-body--family);
    font-size: 14.5px;
    line-height: 1.7;
    color: #7c7264;
  }

  .bty-ed__list {
    margin: 22px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .bty-ed__row {
    padding-block-end: 14px;
    border-block-end: 1px solid #ece3d4;
  }

  .bty-ed__row:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }

  .bty-ed__row dt {
    font-family: var(--font-heading--family);
    font-size: 16px;
    color: #2a251f;
  }

  .bty-ed__row dd {
    margin: 4px 0 0;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    line-height: 1.6;
    color: #7c7264;
  }

  .bty-ed__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-start: 24px;
    padding: 0.8rem 1.6rem;
    background: #2a251f;
    color: #faf8f3;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background 0.2s ease;
  }

  .bty-ed__btn:hover { background: #d17a8d; }

  .bty-ed__note {
    margin: 14px 0 0;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    color: #6f6250;
  }

  @media screen and (min-width: 768px) {
    .bty-ed__inner {
      grid-template-columns: 0.9fr 1.1fr;
    }
  }
/* END_SECTION:beauty-editorial */

/* START_SECTION:beauty-hero (INDEX:7) */
.bty-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: clamp(480px, 72vh, 680px);
    background: #efe7d9;
  }

  .bty-hero__pic, .bty-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .bty-hero__img { object-fit: cover; object-position: right center; }

  .bty-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(28,24,20,.55) 0%, rgba(28,24,20,.34) 55%, rgba(28,24,20,.20) 100%);
  }

  @media (min-width: 48em) {
    .bty-hero__overlay {
      background: linear-gradient(90deg, rgba(28,24,20,.62) 0%, rgba(28,24,20,.32) 45%, rgba(28,24,20,.05) 75%);
    }
  }

  .bty-hero__container {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
  }

  .bty-hero__content {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  @media (min-width: 640px) {
    .bty-hero__content { margin-inline: 0; text-align: left; }
  }

  .bty-hero__eyebrow {
    display: inline-block;
    margin-block-end: 1.25rem;
    font-family: var(--font-body--family);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: #e6b7c2;
  }

  .bty-hero__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(30px, 4.2vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: #f7f1e7;
  }

  .bty-hero__text {
    max-width: 460px;
    margin: 1.5rem auto 34px;
    font-family: var(--font-body--family);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.65;
    color: #f0e2e0;
  }

  @media (min-width: 640px) { .bty-hero__text { margin-inline: 0; } }

  .bty-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background: #f7f1e7;
    color: #2a251f;
    font-family: var(--font-body--family);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background 0.2s ease;
  }

  .bty-hero__btn:hover { background: #ffffff; }
/* END_SECTION:beauty-hero */

/* START_SECTION:blog (INDEX:8) */
.blog {
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  [data-blog-posts][aria-busy='true'] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  /* --- Header --- */
  .blog__crumbs {
    margin-block-end: 24px;
    font-family: var(--font-body--family);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: rgba(var(--color-foreground), 0.55);
  }
  .blog__crumbs a { color: inherit; text-decoration: none; }
  .blog__crumbs a:hover { color: rgb(var(--color-foreground)); }
  .blog__crumbs [aria-current] { color: rgb(var(--color-foreground)); }
  .blog__crumbs span[aria-hidden] { margin-inline: 6px; }

  .blog__head { max-width: 640px; }
  .blog__eyebrow {
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgb(var(--color-accent));
  }
  .blog__title {
    margin: 10px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(25px, 3.2vw, 40px);
    line-height: 1.06;
  }
  .blog__intro {
    margin: 12px 0 0;
    font-family: var(--font-body--family);
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(var(--color-foreground), 0.72);
  }

  /* --- Category chips (left-aligned, Hydrogen parity) --- */
  .blog__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block: clamp(20px, 3vw, 32px) 0;
  }
  .blog__tag {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.875rem;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: 999px;
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-xs);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .blog__tag:hover { border-color: rgb(var(--color-foreground)); }
  .blog__tag.is-current {
    border-color: rgb(var(--color-foreground));
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  .blog__search-mobile { margin-block-start: 20px; }
  @media screen and (min-width: 990px) {
    .blog__search-mobile { display: none; }
  }

  /* --- Layout: content + sidebar --- */
  .blog__layout {
    margin-block-start: clamp(24px, 3.5vw, 44px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
  @media screen and (min-width: 990px) {
    .blog__layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .blog__layout--full { grid-template-columns: minmax(0, 1fr); }
  }
  .blog__main { min-width: 0; }

  /* Featured hero spacing */
  .blog .article-card--featured { margin-block-end: var(--blog-gap-mobile, 32px); }
  @media screen and (min-width: 750px) {
    .blog .article-card--featured { margin-block-end: var(--blog-gap, 40px); }
  }

  /* Two columns inside the content column (the sidebar takes the third). */
  .blog__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--blog-gap-mobile, 32px);
    padding: 0; margin: 0; list-style: none;
  }
  @media screen and (min-width: 750px) {
    .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--blog-gap, 40px); }
  }
  /* With no sidebar the content column is full width, so a third card fits. */
  @media screen and (min-width: 990px) {
    .blog__layout--full .blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .blog__cell { min-width: 0; }
  .blog__app { margin-block-start: 2.5rem; }
  .blog__empty {
    padding-block: 3rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
    text-align: center;
  }

  /* --- Sidebar --- */
  .blog__sidebar {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.5vw, 24px);
  }
  @media screen and (min-width: 990px) {
    .blog__sidebar {
      position: sticky;
      inset-block-start: calc(var(--header-offset, var(--header-height, 4rem)) + 20px);
    }
    /* The top search hides on desktop only when it also sits in the sidebar. */
    .blog__box--search { display: block; }
  }

  .blog__box {
    border: 1px solid rgba(var(--color-foreground), 0.12);
    background: rgb(var(--color-background));
    padding: clamp(16px, 2vw, 20px);
  }
  .blog__box-title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: 15px;
  }
  .blog__box-text {
    margin: 12px 0 0;
    font-family: var(--font-body--family);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(var(--color-foreground), 0.7);
  }
  .blog__box .footer-news { margin-block-start: 12px; }

  /* --- Latest posts --- */
  .blog__latest {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .blog__latest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
  }
  .blog__latest-thumb {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(var(--color-foreground), 0.06);
  }
  .blog__latest-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
  .blog__latest-item:hover .blog__latest-thumb img { transform: scale(1.05); }
  .blog__latest-copy { min-width: 0; }
  .blog__latest-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: rgb(var(--color-foreground));
  }
  .blog__latest-item:hover .blog__latest-title { color: rgb(var(--color-accent)); }
  .blog__latest-date {
    display: block;
    margin-block-start: 2px;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    color: rgba(var(--color-foreground), 0.55);
  }

  /* --- Journal search box --- */
  .journal-search { position: relative; }
  .journal-search input {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: 0.5rem 2.5rem 0.5rem 0.875rem;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: 999px;
    background: rgba(var(--color-foreground), 0.03);
    color: rgb(var(--color-foreground));
    font-family: var(--font-body--family);
    font-size: 13.5px;
  }
  .journal-search input:focus { outline: none; border-color: rgb(var(--color-foreground)); }
  .journal-search input::placeholder { color: rgba(var(--color-foreground), 0.55); }
  .journal-search button {
    position: absolute;
    inset-inline-end: 4px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgba(var(--color-foreground), 0.6);
    cursor: pointer;
  }
  .journal-search button:hover { color: rgb(var(--color-foreground)); }
/* END_SECTION:blog */

/* START_SECTION:cart-drawer (INDEX:9) */
/* --- Panel --- */

  /* Pinned to the inline end and sized here rather than centred, so `margin` is
     reset: the browser's own stylesheet centres a dialog with `margin: auto`. */
  .cart-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inset-inline-start: auto;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(27rem, 100%);
    max-width: 100%;
    /* Dynamic viewport height, not 100%. For a fixed dialog `100%` resolves to
       the large mobile viewport (URL bar hidden), so on a phone with the bar
       showing the foot sat below the fold and the page showed through at the
       bottom. `dvh` tracks the visible height. */
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    border: 0;
    margin: 0;
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
    overflow: hidden;
  }

  .cart-drawer::backdrop {
    background: rgba(var(--color-shadow), 0.4);
  }

  /* Lock the page behind the open drawer. showModal() alone does not stop the
     background from scrolling on iOS Safari, so scrolling the drawer dragged the
     page underneath it. The dialog is in the top layer, so hiding the page's own
     overflow never clips the drawer. */
  html:has(.cart-drawer[open]) {
    overflow: hidden;
  }

  /* Animated from the closed state with `@starting-style`, so the panel slides in without script toggling a class. `display` and `overlay` transition discretely, which keeps the dialog in the top layer for the whole of the exit instead of vanishing on the first frame and animating out of sight. */
  .cart-drawer {
    translate: 100% 0;
    opacity: 0;
    transition:
      translate var(--duration-base) var(--ease-out),
      opacity var(--duration-fast) var(--ease-out),
      display var(--duration-base) allow-discrete,
      overlay var(--duration-base) allow-discrete;
  }

  .cart-drawer[open] {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .cart-drawer[open] {
      translate: 100% 0;
      opacity: 0;
    }
  }

  .cart-drawer::backdrop {
    opacity: 0;
    transition:
      opacity var(--duration-fast) var(--ease-out),
      display var(--duration-fast) allow-discrete,
      overlay var(--duration-fast) allow-discrete;
  }

  .cart-drawer[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    .cart-drawer[open]::backdrop {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-drawer,
    .cart-drawer[open] {
      translate: none;
      transition:
        opacity var(--duration-fast) ease,
        display var(--duration-fast) allow-discrete,
        overlay var(--duration-fast) allow-discrete;
    }
  }

  /* --- Frame --- */

  /* The form is the flex column, not the dialog's child, because the summary has to sit at the bottom of the panel and the checkout submit has to be inside the same form as the quantity fields. */
  .cart-drawer__form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .cart-drawer__contents {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  /* A scheme sets colour tokens and paints nothing, so the panel fills itself — otherwise choosing a dark scheme would recolour the text and leave it on the theme's own pale surface. Set once on the panel; the bands inherit. */
  .cart-drawer {
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    /* Tight. The bar sits directly beneath and the list beneath that, so every
       row of padding here is a row of cart a phone does not show. */
    padding: 0.625rem 1rem;
    border-block-end: 1px solid rgba(var(--color-foreground), 0.1);
  }

  /* Centred on each other, not on the baseline. */
  .cart-drawer__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
    line-height: 1.1;
  }

  /* A bubble, sized from its own type so it stays a circle at one digit and
     becomes a pill at three rather than clipping. */
  .cart-drawer__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.375rem;
    border-radius: 999px;
    /* No margin: the title's own gap already spaces it, and carrying both put
       16px between the word and the number instead of 8. */
    background: rgb(var(--color-accent));
    color: rgb(var(--color-background));
    font-family: var(--font-body--family);
    font-size: 0.75rem;
    font-weight: var(--font-body--weight-bold);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
  }

  .cart-drawer__close {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    padding: 0.375rem;
    margin-inline-end: -0.375rem;
  }

  .cart-drawer__close svg {
    width: 1rem;
    height: 1rem;
  }

  /* Only the list scrolls. The heading stays put so the shopper can always see what they are in, and the total stays put so it never scrolls out of view while they are changing the numbers that drive it. */
  .cart-drawer__scroll {
    flex: 1 1 auto;
    padding: 0 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The tier bar at the top of the drawer, ruled off from the items below it,
     matching the Hydrogen storefront. */
  .cart-drawer__tier {
    padding-block: 0.625rem 0.75rem;
    border-block-end: 1px solid rgba(var(--color-foreground), 0.1);
  }

  /* A quieter surface than the list above it. */
  /* Tighter on a phone, where the drawer is the whole screen and every row of padding is a row of cart. The icons are left alone: 34px is already close to the floor for a thumb, and shrinking a touch target to buy margin is the wrong trade. */
  .cart-drawer__foot {
    /* The collapse control straddles this element's top border — see
       .cart-tool__collapse in cart-tools.liquid. */
    position: relative;
    flex: 0 0 auto;
    padding: 0.75rem 1rem 0.875rem;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.1);
    background:
      linear-gradient(rgba(var(--color-foreground), 0.035), rgba(var(--color-foreground), 0.035)),
      var(--gradient-background);
  }

  /* While an update is in flight the panel dims rather than showing a spinner:
     the numbers on screen are about to be replaced, and dimming says so without
     adding a moving part. Pointer events go too, so a second press cannot queue
     a change against figures that are already stale. */
  .cart-drawer__contents[data-cart-busy] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:cart (INDEX:12) */
/* An empty block — a recommendations block on a cart whose products have no pairings — takes no room rather than leaving a gap where a merchant put something. */
  .cart-page__block:empty {
    display: none;
  }

  /* Sub-line under the title. */
  .cart-page__subtitle {
    margin: 0.375rem 0 1.75rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.6);
  }

  /* Continue shopping beside Update, at the foot of the items column. */
  .cart-page__actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 1.25rem;
  }

  .cart-page__continue {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }

  .cart-page__continue:hover {
    color: rgb(var(--color-accent));
  }

  .cart-page__continue-arrow {
    font-size: 1.1em;
    line-height: 1;
  }

  /* The panel: the tools and the total in one frame. */
  .cart-page__panel {
    display: grid;
    gap: 0;
    padding: 1.125rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.03);
  }

  /* With a scheme of its own the panel takes that scheme's background outright rather than tinting whatever is behind it — a tint of a colour the merchant chose deliberately is not the colour they chose. Its border and text follow from the same scheme, because the class sets every token at once. */
  .cart-page__panel--scheme {
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  /* One rule between each thing and the next, not three. */
  .cart-page__panel .cart-tools--stacked {
    border-block-start: 0;
  }

  /* The last tool's own closing rule is the line above the total, so nothing is
     added here — only the room to sit off it. */
  .cart-page__panel .cart-summary {
    padding-block-start: 0.875rem;
  }

  /* ...and the total must not draw a second one. It carries its own top border
     everywhere else, which in the panel landed a few pixels under the last
     disclosure's closing rule and read as a double line. */
  .cart-page__panel .cart-summary__row--total {
    border-block-start: 0;
    padding-block-start: 0;
  }

  /* The bar sits against the panel's own top padding, and closes itself the way each tool below it does. It renders nothing when the merchant has set no threshold, so there is no rule left behind on a shop without one. */
  .cart-page__panel .cart-progress {
    padding-block: 0 0.875rem;
    border-block-end: 1px solid rgba(var(--color-border), 0.9);
  }

  .cart-page__aside {
    display: grid;
    gap: 1.5rem;
  }

  /* --- Icon with text --- */

  .cart-line {
    display: flex;
    align-items: start;
    gap: 0.625rem;
    padding-block: 0.125rem;
  }

  .cart-line__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: rgba(var(--color-foreground), 0.7);
  }

  .cart-line__icon svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .cart-line__copy {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
  }

  .cart-line__heading {
    margin: 0;
    font-size: var(--font-size-sm);
  }

  .cart-line__text,
  .cart-line__text p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_SECTION:cart */

/* START_SECTION:collection-banner (INDEX:13) */
.collection-banner {
    position: relative;
    display: grid;
    align-items: center;
    justify-items: center;
    overflow: hidden;
  }

  /* The scheme is applied whether or not there is an image, but only drawn as a background when there is not one: with an image the photograph is the background and the overlay carries the contrast, so painting behind it would be paint nobody ever sees. Without an image the banner would otherwise take the scheme's setting and show none of it. */
  .collection-banner:not(.collection-banner--image) {
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  /* Text only: no image, no fixed height, just a heading sitting on the page background at the width everything else uses. The section wrapper already supplies the page gutter, so nothing is added here. */
  .collection-banner:not(.collection-banner--image) {
    min-height: 0;
    padding-block: 1.5rem 0.5rem;
    justify-items: start;
    text-align: start;
  }

  /* The page's own width, not the screen's. */
  .collection-banner--image {
    color: rgb(var(--color-foreground));
  }

  /* The same left and right edge as the trail above it, the subcollections below it and the products under those. The grid narrows its own gutter on a phone, so everything in the column follows it — otherwise the page has two edges eight pixels apart and the band looks inset by mistake. */
  @media screen and (max-width: 749px) {
    .collection-banner {
      margin-inline: calc(min(var(--page-margin), var(--spacing-grid)) - var(--page-margin));
    }
  }

  .collection-banner--small.collection-banner--image {
    min-height: 14rem;
  }

  .collection-banner--medium.collection-banner--image {
    min-height: 20rem;
  }

  .collection-banner--large.collection-banner--image {
    min-height: 28rem;
  }

  /* The image's own proportions, for a merchant who has cropped a banner to the
     shape they want and does not want it cropped again. */
  .collection-banner--adapt.collection-banner--image {
    min-height: 0;
  }

  /* A separate height for phones. */
  @media screen and (max-width: 749px) {
    .collection-banner--m-small.collection-banner--image {
      min-height: 11rem;
    }

    .collection-banner--m-medium.collection-banner--image {
      min-height: 15rem;
    }

    .collection-banner--m-large.collection-banner--image {
      min-height: 20rem;
    }

    .collection-banner--m-adapt.collection-banner--image {
      min-height: 0;
    }
  }

  .collection-banner--adapt .collection-banner__media {
    position: relative;
  }

  .collection-banner--adapt .collection-banner__text {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--page-margin);
  }

  /* Room around the words, not just under them. */
  /* Anchored low by default. */
  .collection-banner--text-bottom {
    align-items: end;
  }

  .collection-banner--text-middle {
    align-items: center;
  }

  /* Small, spaced, and quieter than the heading — a line of fact under a name,
     the way a caption sits under a plate in a magazine. */
  .collection-banner__count {
    margin: 0;
    color: rgba(var(--color-foreground), 0.75);
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Inset from the picture, level with the page when there is none. */
  .collection-banner--image .collection-banner__text {
    padding-inline: 2rem;
  }

  @media screen and (max-width: 749px) {
    .collection-banner--image .collection-banner__text {
      padding-inline: 1.25rem;
    }
  }

  .collection-banner__text {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.625rem;
    max-width: 44rem;
    padding-block: 3.25rem;
  }

  @media screen and (max-width: 749px) {
    .collection-banner__text {
      padding-block: 2.25rem;
    }
  }

  /* With no photograph there is nothing to sit on top of, and the padding that keeps a heading clear of an image edge becomes an empty band above and below a line of text. A name and a count need room to breathe, not a third of a screen. */
  .collection-banner:not(.collection-banner--image) .collection-banner__text {
    padding-block: 0;
  }

  .collection-banner:not(.collection-banner--image) {
    padding-block: 0.25rem 0;
  }

  .collection-banner--center .collection-banner__text {
    text-align: center;
    justify-items: center;
  }

  .collection-banner--start .collection-banner__text {
    justify-self: start;
    text-align: start;
  }

  .collection-banner__title {
    margin: 0;
    font-size: var(--font-heading-scale-h1, 2rem);
    font-weight: var(--font-heading--weight);
    letter-spacing: var(--font-heading--letter-spacing);
  }

  /* Capped at a readable measure and held to two lines. A hero line that wraps
     four times is a paragraph that wandered into the wrong place. */
  .collection-banner__subtitle {
    max-width: 34rem;
    color: rgba(var(--color-foreground), 0.85);
    font-size: var(--font-size-md);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .collection-banner__subtitle > :first-child {
    margin-block-start: 0;
  }

  .collection-banner__subtitle > :last-child {
    margin-block-end: 0;
  }
/* END_SECTION:collection-banner */

/* START_SECTION:collection-insights (INDEX:14) */
.collection-insights__inner {
    display: grid;
    gap: clamp(3.25rem, 7vw, 5rem);
    padding-block-start: clamp(2.5rem, 6vw, 4rem);
    border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
  }

  /* Shared heading + eyebrow. */
  .collection-insights .ci-eyebrow {
    display: block;
    font-size: 0.71875rem;
    font-weight: var(--font-body--weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ci-accent);
  }
  .collection-insights .ci-heading {
    margin: 0.625rem 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1.12;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    color: rgb(var(--color-foreground));
  }

  /* --- Buying guide: centred single column, like the FAQ --- */
  .ci-guide {
    max-width: 47.5rem;
    margin-inline: auto;
    text-align: left;
  }
  .ci-guide__body {
    margin-block-start: 1.25rem;
    font-size: 0.96875rem;
    line-height: 1.78;
    color: rgba(var(--color-foreground), 0.82);
  }
  .ci-guide__body p { margin: 0 0 1rem; }
  .ci-guide__body p:last-child { margin-block-end: 0; }
  .ci-guide__body strong { font-weight: var(--font-body--weight-bold); color: rgb(var(--color-foreground)); }
  .ci-guide__body a,
  .ci-journal__link {
    color: var(--ci-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-color: color-mix(in srgb, var(--ci-accent) 30%, transparent);
  }
  .ci-guide__body a:hover,
  .ci-journal__link:hover { text-decoration-color: var(--ci-accent); }

  /* Explore more + journal rows. */
  .ci-explore,
  .ci-journal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.5rem;
    font-size: 0.84375rem;
  }
  .ci-explore { margin-block-start: 2rem; }
  .ci-journal { margin-block-start: 1.5rem; }
  .ci-explore__label,
  .ci-journal__label { color: rgba(var(--color-foreground), 0.6); }
  .ci-pill {
    padding: 0.4375rem 0.875rem;
    border: 1px solid rgba(var(--color-foreground), 0.2);
    border-radius: 2rem;
    color: rgb(var(--color-foreground));
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .ci-pill:hover { border-color: var(--ci-accent); color: var(--ci-accent); }
  .ci-journal__link { white-space: nowrap; }

  /* Centre from the small breakpoint up (Hydrogen: left on mobile, centre on sm+). */
  @media screen and (min-width: 750px) {
    .ci-guide { text-align: center; }
    .ci-explore, .ci-journal { justify-content: center; }
  }

  /* --- Why shop: boxed trust cards with a blush icon circle --- */
  .ci-why { max-width: 62.5rem; margin-inline: auto; }
  .ci-why__heading { text-align: left; }
  .ci-why__grid {
    margin-block-start: 1.75rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.625rem, 2vw, 1.125rem);
  }
  @media screen and (min-width: 990px) {
    .ci-why__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .ci-why__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: clamp(1rem, 2.5vw, 1.375rem);
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: var(--style-border-radius-cards, 0);
    background: rgba(var(--color-foreground), 0.02);
    color: rgb(var(--color-foreground));
    text-decoration: none;
    transition: border-color 0.15s ease;
  }
  a.ci-why__card:hover { border-color: var(--ci-accent); }
  .ci-why__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-block-end: 0.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ci-accent) 12%, transparent);
    color: var(--ci-accent);
  }
  .ci-why__title {
    font-family: var(--font-heading--family);
    font-size: 1rem;
    line-height: 1.2;
    color: rgb(var(--color-foreground));
  }
  .ci-why__text {
    margin-block-start: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(var(--color-foreground), 0.72);
  }
  @media screen and (min-width: 750px) {
    .ci-why__heading { text-align: center; }
    .ci-why__card { align-items: center; text-align: center; }
  }

  /* --- FAQ: centred heading, hairline accordion (self-contained) --- */
  .ci-faq { max-width: 47.5rem; margin-inline: auto; }
  .ci-faq__heading { text-align: left; }
  .ci-faq__list {
    margin-block-start: 1.75rem;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
  }
  .ci-panel { border-block-end: 1px solid rgba(var(--color-foreground), 0.12); }
  .ci-panel__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.125rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading--family);
    font-size: 1rem;
    color: rgb(var(--color-foreground));
  }
  .ci-panel__summary::-webkit-details-marker { display: none; }
  .ci-panel__plus {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1;
    color: rgba(var(--color-foreground), 0.55);
    transition: transform 0.2s ease;
  }
  .ci-panel[open] .ci-panel__plus { transform: rotate(45deg); }
  .ci-panel__a {
    margin-block-start: -0.25rem;
    padding-block-end: 1.125rem;
    font-size: 0.90625rem;
    line-height: 1.75;
    color: rgba(var(--color-foreground), 0.82);
  }
  .ci-panel__a p { margin: 0; }
  @media (prefers-reduced-motion: reduce) {
    .ci-panel__plus { transition: none; }
  }
  @media screen and (min-width: 750px) {
    .ci-faq__heading { text-align: center; }
  }
/* END_SECTION:collection-insights */

/* START_SECTION:collection (INDEX:15) */
.collection__app {
    margin-block: 2rem;
  }

  /* In-collection search, matching the Hydrogen collection. */
  .collection__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 1rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid #d8ccb8;
    background: rgb(var(--color-background));
  }
  .collection__search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: rgba(var(--color-foreground), 0.55);
  }
  .collection__search-icon svg { width: 1.05rem; height: 1.05rem; }
  .collection__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--font-size-sm);
    color: inherit;
    outline: none;
  }
  .collection__search-input::placeholder { color: rgba(var(--color-foreground), 0.5); }
  /* Hide the browser's own search clear so ours is the only one. */
  .collection__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

  /* Clear (when typed) and voice mic (when empty), at the right of the pill. */
  .collection__search-clear,
  .collection__search-mic {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgba(var(--color-foreground), 0.55);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .collection__search-clear:hover,
  .collection__search-mic:hover { color: rgb(var(--color-foreground)); }
  .collection__search-mic { color: var(--offer-accent, #c04a63); }
  /* Listening: accent tint + a gentle pulse, matching Hydrogen. */
  .collection__search-mic.is-listening {
    background: rgba(var(--color-accent), 0.14);
    color: rgb(var(--color-accent));
    animation: collection-mic-pulse 1.1s ease-in-out infinite;
  }
  @keyframes collection-mic-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }
  @media (prefers-reduced-motion: reduce) {
    .collection__search-mic.is-listening { animation: none; }
  }

  /* Collection H1 — Marcellus, matching the Hydrogen collection header. */
  .collection__title {
    margin: 0 0 0.65rem;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1.08;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: rgb(var(--color-foreground));
  }

  /* The description runs the full width of the page like everything else. It used to be capped at 42rem and centred, which was right for a caption under a heading and wrong for a block a merchant can put anywhere. */
  .collection__description {
    color: rgba(var(--color-foreground), 0.8);
  }

  /* --- Layout --- */

  .collection__layout {
    display: grid;
    gap: 1.5rem;
  }

  .collection__main {
    min-width: 0;
  }

  /* Room around the description wherever it is placed. It sits directly against either the banner above it or the last row of products, and prose with no space around it reads as part of whatever it is touching. */
  /* No top margin. The block above it already ends with its own spacing — the banner's bottom margin, or the subcollection row's — and stacking a second gap on top left the description floating away from the heading it belongs to. */
  .collection__description {
    margin-block: 0 1.75rem;
  }

  .collection__description-short {
    margin: 0;
  }

  /* A link, not a button, and on the same line as the words it belongs to. */
  .collection__description-toggle {
    display: inline;
    padding: 0;
    border: 0;
    margin-inline-start: 0.375rem;
    background: none;
    color: rgb(var(--color-foreground));
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    white-space: nowrap;
  }

  .collection__description-toggle:hover {
    color: rgb(var(--color-accent));
  }

  /* Prose follows the same left edge as everything else on a phone. */
  @media screen and (max-width: 749px) {
    .collection__description {
      margin-inline: calc(min(var(--page-margin), var(--spacing-grid)) - var(--page-margin));
    }

    /* Full-bleed on mobile, like Hydrogen — the grid runs edge to edge with only
       a hairline between columns, but a comfortable gap between the rows. */
    .collection .product-grid:not(.product-grid--swipe) {
      margin-inline: calc(var(--page-margin) * -1);
      column-gap: 2px;
      row-gap: 1.25rem;
    }

    /* Smaller price, like Hydrogen's mobile grid. */
    .collection .card .price {
      font-size: 0.75rem;
    }

    /* The image runs full-bleed, but the product info keeps a small left/right
       inset (Hydrogen's px-2) so the title and price don't touch the screen edge.
       The extra ancestor out-specifies `.card--plain .card__content`, which zeros
       the inline padding on the unboxed card style this collection uses. */
    .collection .card .card__content {
      padding-inline: 0.5rem;
    }
  }

  /* Density column overrides (Hydrogen DensityToggle). Applied from an ancestor
     of the region the Section Rendering API swaps, so the choice survives every
     filter change. `!important` beats the inline custom property the grid writes
     for itself; a class on the grid would be replaced on the next filter. */
  .collection[data-cols-desktop='3'] .product-grid { --columns-desktop: 3 !important; }
  .collection[data-cols-desktop='4'] .product-grid { --columns-desktop: 4 !important; }
  .collection[data-cols-desktop='6'] .product-grid { --columns-desktop: 6 !important; }
  .collection[data-cols-mobile='2'] .product-grid { --columns-mobile: 2 !important; }
  .collection[data-cols-mobile='3'] .product-grid { --columns-mobile: 3 !important; }
  .collection[data-cols-mobile='4'] .product-grid { --columns-mobile: 4 !important; }

  /* Tightest phone grid (4 across) drops cards to price-only, like Hydrogen:
     image + price, nothing else — the rest is unreadable at a quarter width. */
  @media screen and (max-width: 749px) {
    .collection[data-cols-mobile='4'] .card__content > *:not(.price) { display: none !important; }
    .collection[data-cols-mobile='4'] .card__sizes,
    .collection[data-cols-mobile='4'] .card__bag,
    .collection[data-cols-mobile='4'] .card__quick-add { display: none !important; }
    .collection[data-cols-mobile='4'] .card__content { padding-block: 0.35rem 0.5rem; }

    /* Denser phone grids get a smaller price, like Hydrogen — the tighter the
       column, the smaller the type. */
    .collection[data-cols-mobile='3'] .price { font-size: var(--font-size-xs); }
    .collection[data-cols-mobile='4'] .price {
      font-size: 0.6875rem;
      line-height: 1.2;
    }
  }

  /* Filter, count and sort on one line. `nowrap` because these three are a single row of controls, not a paragraph: allowed to wrap they stack into a tall block on the narrowest phones, which is where the space matters most. */
  .collection__toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.625rem;
    margin-block-end: 1.25rem;
  }
  /* Below 990px the mobile toolbar (Sort/Colors/Size/Filter/density) takes over,
     and the sidebar's own "Filter" summary is hidden so there is one filter
     control, not two. Without script the sidebar stays open (all filters shown),
     so hiding the summary costs nothing there. */
  @media screen and (max-width: 989px) {
    .collection__toolbar { display: none; }
    .collection__filters--sidebar > .collection__filters-toggle { display: none; }
    .collection__layout { gap: 0; }
    /* The desktop toolbar (which carries the search) is hidden here; the mobile
       copy of the search runs inside the sticky bar below. */

    /* Search + toolbar are one sticky bar that pins to the top as the grid
       scrolls, like Hydrogen. Full-bleed so the edge-to-edge grid never shows
       beside it when it scrolls under. */
    .collection__mobilebar {
      position: sticky;
      inset-block-start: var(--header-offset, 0px);
      z-index: 30;
      background: rgb(var(--color-background));
      margin-inline: calc(var(--page-margin) * -1);
      padding-inline: var(--page-margin);
      /* A little breathing room above the search — a gap between the header and
         the bar when it pins, carried by the bar's own background. */
      padding-block-start: 0.6rem;
      /* Gap between the hairline under the tabs and the first row of products. */
      margin-block-end: 1rem;
    }
    /* A hairline gap under the search, above the tabs. */
    .collection__search { margin-block-end: 0.15rem; }
  }

  /* Desktop: the sticky mobile bar is off; the search runs as the first item in
     the toolbar row (search, then count, then sort and the toggles). */
  @media screen and (min-width: 990px) {
    .collection__mobilebar { display: none; }
  }

  /* Search first in the desktop toolbar row: it takes the space to the left of
     the count, up to a cap, and drops the stacked bottom margin it carries when
     it sits alone on mobile. */
  .collection__toolbar-search {
    flex: 0 1 clamp(11rem, 22vw, 20rem);
    min-width: 0;
  }
  .collection__toolbar-search .collection__search {
    margin-block-end: 0;
  }

  /* Sort — a native select with its own chevron, like the Hydrogen control. */
  .collection__sort {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .collection__sort-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.4rem 1.9rem 0.4rem 0.75rem;
    border: 1px solid #d8ccb8;
    border-radius: 0;
    background: rgb(var(--color-background));
    font: inherit;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground));
    cursor: pointer;
    line-height: 1.2;
  }
  .collection__sort-chevron {
    position: absolute;
    inset-inline-end: 0.6rem;
    display: inline-flex;
    pointer-events: none;
    color: rgba(var(--color-foreground), 0.6);
  }
  .collection__sort-chevron svg { width: 0.8rem; height: 0.8rem; }

  /* SHOW per-page — "SHOW" label + a segmented 60 / 120 pill, like Hydrogen. */
  .collection__show {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .collection__show-label {
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-eyebrow, 0.08em);
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.6);
  }
  .collection__show-btn {
    min-width: 2.4rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid #d8ccb8;
    background: rgb(var(--color-background));
    font: inherit;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground));
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  /* One segmented control: the two buttons share a single edge (overlap by 1px),
     and the pressed one lifts its own border on top so it reads as one clean box
     rather than a doubled line. */
  .collection__show-btn + .collection__show-btn { margin-inline-start: -1px; }
  .collection__show-btn[aria-pressed='true'] {
    position: relative;
    z-index: 1;
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    border-color: rgb(var(--color-foreground));
  }

  /* Density sits at the far right, after SHOW; even, small gaps between icons. */
  .collection__toolbar .density { flex: 0 0 auto; gap: 0.25rem; }

  /* Pushed to the far end, so the two controls sit at opposite edges with the
     count reading between them. */
  .collection__sort {
    margin-inline-start: auto;
  }

  /* Two controls, one each, on a phone. */
  @media screen and (max-width: 749px) {
    .collection__count {
      display: none;
    }

    /* Below 990px the desktop toolbar is replaced by the mobile toolbar
       (snippets/collection-toolbar-mobile), so this old sticky version stays
       hidden. Kept as a rule (not deleted) so the drawer styling below, which
       references it, still resolves. */
    .collection__toolbar {
      display: none;
    }

    /* A stacking context is the price of `z-index`, and it traps the filter drawer inside it: the panel and its scrim are children, so at the toolbar's level they would paint under the header rather than over the page. Lifting the whole bar while the drawer is open puts them back on top, and costs nothing the rest of the time. */
    .collection__toolbar:has(.collection__filters--drawer[open]) {
      z-index: 61;
    }

    /* Hidden, not removed: this label is the select's accessible name, and
       `display: none` would take that away rather than just the ink. */
    .collection__sort-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      border: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    /* Filter and Sort share what is left after the icons, so they stay equal to each other whether or not the density pair is switched on. Stated as flex rather than as grid tracks for exactly that reason: `1fr auto 1fr` with the middle control absent hands Sort the `auto` track and the row goes lopsided. */
    /* Each control at the width it needs, and the room left over spent on the spaces between them. */
    .collection__toolbar {
      justify-content: space-between;
    }

    .collection__sort {
      flex: 0 1 11rem;
      min-width: 0;
      margin-inline-start: 0;
    }

    .collection__toolbar > .collection__filters--drawer {
      flex: 0 0 auto;
      min-width: 0;
      margin-inline-start: 0;
    }

    .collection__toolbar > .density {
      flex: 0 0 auto;
    }

    /* Tighter gutters than the desktop control: on a phone this is a third of a fixed row, so every pixel spent on padding is a pixel taken off the option name. */
    .collection__sort .facets__select {
      width: 100%;
    }

    /* Has to out-specify `.collection__filters--drawer .collection__filters- toggle`, which sizes the summary to its own text so it can sit inline beside the count on a wide screen. That rule is written further down the file, so at equal specificity it wins on order — a media query adds none of its own. Hence the extra ancestor rather than a second guess at where to move the block. */
    .collection__toolbar .collection__filters--drawer .collection__filters-toggle {
      justify-content: center;
      width: 100%;
    }
  }

  .collection__count {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .collection__sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .collection__sort-label {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
    white-space: nowrap;
  }

  .collection__empty {
    padding-block: 3rem 1rem;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* --- Filters --- */

  /* Slim: 36px, matching the sort control beside it rather than the 44px of a primary button. These two frame the products; they are not the action on the page, and a pair of tall buttons above a grid reads as a form. Still clears the 24px minimum target with room to spare. */
  .collection__filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-height: 2.25rem;
    padding-inline: 0.75rem;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: var(--style-border-radius-inputs);
    cursor: pointer;
    font-size: var(--font-size-xs);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .collection__filters-toggle:hover {
    border-color: rgba(var(--color-foreground), 0.7);
  }

  /* The icon does not rotate: it is a filter mark, not a disclosure arrow, and
     spinning it would say the control had changed meaning. */
  .collection__filters-toggle svg {
    width: 0.9375rem;
    height: 0.9375rem;
    flex: 0 0 auto;
  }

  .collection__filters-panel {
    padding-block-start: 0.75rem;
  }

  /* The drawer's own header. Hidden in sidebar mode, where the column has no
     edge to escape from and a close button would close nothing useful. */
  .collection__filters-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: 0.75rem;
    margin-block-end: 0.5rem;
    border-block-end: 1px solid rgba(var(--color-border), 0.7);
  }

  .collection__filters--drawer[open] .collection__filters-head {
    display: flex;
  }

  .collection__filters-title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
  }

  .collection__filters-close {
    min-width: 2.25rem;
    min-height: 2.25rem;
  }

  .collection__filters-close svg {
    width: 1rem;
    height: 1rem;
  }

  /* In a drawer the results are behind the panel, so applying as each box is ticked updates something the visitor cannot see. The button is the point at which they look again, so it stays. */
  /* A real footer, not a sticky one. */
  .collection__filters--drawer .facets__actions {
    flex: 0 0 auto;
    padding-block: 0.75rem 0;
    background: var(--gradient-background);
  }

  /* The list is the only thing that scrolls, and the scroll stops here rather
     than carrying on into the page behind the drawer. */
  .collection__filters--drawer[open] .facets__groups {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Out to the panel edge and back, so the scrollbar rides the edge instead
       of cutting through the middle of the values. */
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }

  /* Stacked, not side by side. */
  .facets__actions {
    display: grid;
    gap: 0.625rem;
    justify-items: center;
    margin-block-start: 1rem;
  }

  .facets__apply {
    width: 100%;
  }

  .facets__clear {
    font-size: var(--font-size-sm);
  }

  /* Below 990px the sidebar is a disclosure in the flow, and its summary has to line up with the products underneath it. The grid narrows its own gutter on a phone, so the column is pulled out by the same amount rather than sitting 8px inside everything else on the page. */
  @media screen and (max-width: 989px) {
    /* On mobile the sidebar is a slide-in drawer popup (opened by the mobile
       toolbar's Filter / Colors / Size), not a column in the flow — matching the
       Hydrogen MobileFilterDrawer. It reuses the drawer-mode scrim + panel
       animations defined below. */
    .collection__filters--sidebar:not([open]) .collection__filters-panel {
      display: none;
    }

    .collection__filters--sidebar[open]::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 59;
      background: rgba(var(--color-shadow), 0.4);
      animation: facets-scrim var(--duration-fast) ease both;
    }

    .collection__filters--sidebar[open] .collection__filters-panel {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      z-index: 60;
      display: flex;
      flex-direction: column;
      width: min(22rem, 86vw);
      padding: 1.25rem;
      overflow: hidden;
      background: var(--gradient-background);
      box-shadow: 0 0 60px -20px rgba(var(--color-shadow), 0.5);
      animation: facets-panel-in var(--duration-base) var(--ease-out) both;
    }

    .collection__filters--sidebar[open] .collection__filters-head {
      display: flex;
    }

    .collection__filters--sidebar[open] .facets__groups {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      margin-inline: -1.25rem;
      padding-inline: 1.25rem;
    }

    /* Colour and size are handled by the toolbar's inline tabs on mobile, so the
       full Filter drawer shows only everything else (price, length, ...). Their
       inputs stay in the DOM but disabled (theme.js) so nothing submits twice. */
    .collection__filters--sidebar [data-filter-label*='colour'],
    .collection__filters--sidebar [data-filter-label*='color'],
    .collection__filters--sidebar [data-filter-label*='size'] {
      display: none;
    }

    /* Small filter type on mobile, like Hydrogen. */
    .collection__filters--sidebar .facets__summary { font-size: 12px; }
    .collection__filters--sidebar .facets__value,
    .collection__filters--sidebar .facets__value-label,
    .collection__filters--sidebar .facets__value-count { font-size: 12px; }

    /* Slim drawer header. */
    .collection__filters--sidebar[open] .collection__filters-head {
      padding-block-end: 0.5rem;
      margin-block-end: 0.4rem;
    }
    .collection__filters-title { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
    .collection__filters-close { min-width: 1.9rem; min-height: 1.9rem; }

    /* Show results — the mobile drawer footer button (Hydrogen), slim. */
    .facets__show-results {
      display: block;
      width: 100%;
      min-height: 0;
      padding-block: 0.6rem;
      font-size: 12px;
    }
    /* Apply is not used on mobile (filters apply live); Show results replaces it. */
    .collection__filters--sidebar .facets__apply { display: none; }
  }

  /* Show results is mobile-only. */
  @media screen and (min-width: 990px) {
    .facets__show-results { display: none; }
  }

  /* --- Drawer mode --- One panel, off the inline-start edge, at every width. The trigger stays in flow above the products, so nothing is hidden behind an icon, and the panel itself is the same markup the sidebar uses — only its position changes. */
  .collection__filters--drawer .collection__filters-toggle {
    display: inline-flex;
    width: fit-content;
  }

  /* A closed drawer contributes nothing to the row. */
  .collection__filters--drawer:not([open]) .collection__filters-panel {
    display: none;
  }

  .collection__filters--drawer[open]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(var(--color-shadow), 0.4);
    animation: facets-scrim var(--duration-fast) ease both;
  }

  @keyframes facets-scrim {
    from {
      opacity: 0;
    }
  }

  .collection__filters--drawer[open] .collection__filters-panel {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(21rem, 86vw);
    padding: 1.25rem;
    /* The panel itself no longer scrolls — the groups list inside it does — so
       the header and the buttons stay put while the values move. */
    overflow: hidden;
    background: var(--gradient-background);
    box-shadow: 0 0 60px -20px rgba(var(--color-shadow), 0.5);
    animation: facets-panel-in var(--duration-base) var(--ease-out) both;
  }

  @keyframes facets-panel-in {
    from {
      transform: translateX(-100%);
    }
  }

  [dir='rtl'] .collection__filters--drawer[open] .collection__filters-panel {
    animation-name: facets-panel-in-rtl;
  }

  @keyframes facets-panel-in-rtl {
    from {
      transform: translateX(100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .collection__filters--drawer[open]::before,
    .collection__filters--drawer[open] .collection__filters-panel {
      animation: none;
    }

    .collection__toolbar {
      transition: none;
    }
  }

  @media screen and (min-width: 990px) {
    .collection__layout--sidebar {
      grid-template-columns: 16.5rem minmax(0, 1fr);
      gap: 2.25rem;
    }

    /* Sticky, so a long filter list stays reachable while the grid scrolls past it. `align-self: start` is what lets it be: a stretched grid item is as tall as its row and has nothing to stick within. */
    /* Pinned below the header, not below the viewport top.

       The header is sticky, so a column pinned at the viewport edge slides
       underneath it — the filter labels ended up behind the navigation. The
       offset is the measured header height plus a gap, and the available height
       is what is left of the screen beneath it, so a long filter list scrolls
       within the column instead of past the bottom of the window.

       The fallback matters: theme.js publishes the height, and before it runs
       the column simply pins a sensible distance down rather than jumping. */
    .collection__sidebar {
      position: sticky;
      /* `--header-offset`, not `--header-height`: it is zero while the header is hidden or not sticky, so the column rises to meet the top of the screen instead of holding a gap for a bar that is not there, and drops back as the header returns. The transition is what makes that read as the two being connected rather than as a jump. */
      inset-block-start: calc(var(--header-offset, 0px) + 1rem);
      align-self: start;
      max-height: calc(100svh - var(--header-offset, 0px) - 2rem);
      overflow-y: auto;
      /* A thin, quiet scrollbar like Hydrogen's — it rides inside the column and
         only reads as a track, not a control. */
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: rgba(var(--color-foreground), 0.25) transparent;
      transition:
        inset-block-start var(--duration-base) var(--ease-out),
        max-height var(--duration-base) var(--ease-out);
    }
    .collection__sidebar::-webkit-scrollbar {
      width: 6px;
    }
    .collection__sidebar::-webkit-scrollbar-thumb {
      background: rgba(var(--color-foreground), 0.25);
      border-radius: 3px;
    }
    .collection__sidebar::-webkit-scrollbar-track {
      background: transparent;
    }

    @media (prefers-reduced-motion: reduce) {
      .collection__sidebar {
        transition: none;
      }
    }

    .collection__filters--sidebar .collection__filters-toggle {
      display: none;
    }

    .collection__filters--sidebar .collection__filters-panel {
      padding-block-start: 0;
    }

    /* The whole sidebar footer is hidden on desktop. Filters apply live here
       (the Section Rendering API swaps the grid as each box is ticked), so the
       Apply button is not needed, and the applied-filter chips above the grid
       already carry "Clear all" — shown only when something is applied. Leaving
       the footer's Clear link in would put a lone, always-on Clear at the bottom
       of the column, which is the one the merchant flagged. No-script desktop
       visitors still submit via Enter in any field. */
    .collection__filters--sidebar .facets__actions {
      display: none;
    }
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:16) */
/* A scheme has to be painted, not merely named — see the note in sections/page.liquid. The band reaches the viewport edges; the grid inside stays in the content column. */
  .collections-page {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .collections-page > * {
    grid-column: 2;
  }

  .collections-page__head {
    display: grid;
    gap: 0.625rem;
    max-width: 40rem;
    margin-block-end: 2.5rem;
  }

  .collections-page__title {
    margin: 0;
    font-size: var(--font-size-h2);
  }

  .collections-page__lead {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  .collections-page__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns-mobile, 2), minmax(0, 1fr));
    gap: var(--grid-gap-mobile, 16px);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .collections-page__grid {
      grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
      gap: var(--grid-gap, 24px);
    }
  }

  /* Alignment is a class rather than an inline style so a media query can still override it — a centred heading that a phone wants left-aligned has somewhere to say so. `start` and `end` rather than left and right: the start edge follows the language, so an RTL storefront gets the heading on the correct side without a second setting. */
  .collections-page__head--align-start {
    text-align: start;
  }

  .collections-page__head--align-center {
    text-align: center;
    /* The block is capped at 40rem, so centring the words inside a box that is
       still hard against the start edge only half does it. */
    margin-inline: auto;
  }

  .collections-page__head--align-end {
    text-align: end;
    margin-inline-start: auto;
  }

  .collections-page__empty {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
  }

  .collections-page__app {
    margin-block-start: 2.5rem;
  }
/* END_SECTION:collections */

/* START_SECTION:compare-images (INDEX:17) */
/* `full-width` on the band, so the section re-establishes the content column
     itself — see the note in sections/featured-collections.liquid. */
  .compare {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .compare > * {
    grid-column: 2;
  }

  .compare__inner {
    display: grid;
    gap: calc(var(--gap) * 0.6);
  }

  @media screen and (min-width: 990px) {
    .compare__inner {
      grid-template-columns: var(--media-width) minmax(0, 1fr);
      gap: var(--gap);
      align-items: center;
    }

    .compare--media-end .compare__media {
      order: 2;
    }

    .compare--media-end .compare__inner {
      grid-template-columns: minmax(0, 1fr) var(--media-width);
    }
  }

  /* No text: the pair takes the column on its own and is capped so it does not
     become a billboard on a wide screen. */
  .compare--alone .compare__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: 52rem;
    margin-inline: auto;
  }

  .compare__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--compare-ratio);
    border-radius: var(--compare-radius);
    /* Touch drags the handle rather than scrolling the page, but only across —
       a vertical swipe still scrolls, so the section cannot trap a shopper. */
    touch-action: pan-y;
  }

  .compare__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The "before" is revealed from the start edge. `inset-inline-end` rather than `right`, so an RTL storefront wipes from the side its reader starts on. */
  .compare__clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    inset-inline-end: calc(100% - var(--compare-position, 50%));
  }

  /* The clipped image is sized to the media box, not to the shrinking clip, or
     it would squash as the handle moves instead of being revealed. */
  .compare__clip .compare__image {
    width: var(--compare-media-width, 100%);
  }

  .compare__line {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--compare-position, 50%);
    width: 2px;
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(-1px);
    pointer-events: none;
  }

  .compare__label {
    position: absolute;
    inset-block-start: 1rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
  }

  .compare__label--before {
    inset-inline-start: 1rem;
  }

  .compare__label--after {
    inset-inline-end: 1rem;
  }

  /* The input covers the photographs so the whole area is draggable, with only its thumb drawn. Everything else about it is removed rather than hidden, so it keeps its keyboard behaviour and its role. */
  .compare__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: ew-resize;
  }

  .compare__range::-webkit-slider-thumb {
    appearance: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    cursor: ew-resize;
  }

  .compare__range::-moz-range-thumb {
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    cursor: ew-resize;
  }

  .compare__range:focus-visible {
    outline: 3px solid rgb(var(--color-accent));
    outline-offset: 3px;
  }

  .compare__placeholder {
    display: grid;
    place-items: center;
    gap: 0.75rem;
    height: 100%;
    background: rgba(var(--color-foreground), 0.06);
  }

  .compare__placeholder-svg {
    width: 40%;
    height: auto;
    opacity: 0.4;
  }

  .compare__note {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .compare__text {
    display: grid;
    gap: 1rem;
    align-content: center;
  }

  .compare__text--align-start {
    justify-items: start;
    text-align: start;
  }

  .compare__text--align-center {
    justify-items: center;
    text-align: center;
  }

  .compare__text--align-end {
    justify-items: end;
    text-align: end;
  }

  .compare__app {
    margin-block-start: 2rem;
  }
/* END_SECTION:compare-images */

/* START_SECTION:contact-form (INDEX:18) */
/* A scheme has to be painted, not merely named. `.color-scheme-N` declares the custom properties and stops there, so a section that offers the setting and never draws with it leaves the merchant's choice invisible. Restating the section grid here is what lets the background reach the viewport edges while the contents stay in the content column. */
  .contact {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .contact > * {
    grid-column: 2;
  }

  .contact__head {
    display: grid;
    justify-items: center;
    gap: 0.625rem;
    max-width: 40rem;
    margin-inline: auto;
    margin-block-end: 2.5rem;
    text-align: center;
  }

  .contact__title {
    margin: 0;
    font-size: var(--font-size-h2);
  }

  .contact__lead {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  /* The form takes the room; the details are a column beside it. Stacked below 990px, where two columns would leave the message box too narrow to write anything in. */
  .contact__layout {
    display: grid;
    gap: 2.5rem;
    max-width: 60rem;
    margin-inline: auto;
  }

  @media screen and (min-width: 990px) {
    .contact__layout {
      grid-template-columns: 1.4fr 1fr;
      gap: 4rem;
      align-items: start;
    }
  }

  /* No details set, no second column to make room for. */
  .contact__layout--single {
    max-width: 38rem;
  }

  @media screen and (min-width: 990px) {
    .contact__layout--single {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Two columns, so a block can ask for half a row. One column below 750px,
     where half of a phone is not a field. */
  .contact__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  @media screen and (min-width: 750px) {
    .contact__form {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .contact__form .field {
    width: 100%;
  }

  .field--full,
  .contact__notice,
  .contact__submit {
    /* Its own height, not the row's. */
    align-self: start;
    justify-self: start;
    grid-column: 1 / -1;
  }

  .contact__submit {
    justify-self: start;
  }

  /* A half-width block is only half at the width where halves exist. */
  .field--half {
    grid-column: span 1;
  }

  @media screen and (max-width: 749px) {
    .field--half {
      grid-column: 1 / -1;
    }
  }

  .contact__fieldset-title {
    margin: 0.75rem 0 0;
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.7);
  }

  .contact__fieldset-note {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* The box and its words on one line, and the help text under both rather
     than under the box, where it would sit in the label's indent. */
  .field--check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem 0.625rem;
  }

  .field__check {
    width: 1rem;
    height: 1rem;
    margin: 0.15rem 0 0;
    accent-color: rgb(var(--color-foreground));
  }

  .field__check-label {
    font-size: var(--font-size-sm);
    cursor: pointer;
  }

  .field--check .field__help {
    grid-column: 2;
  }

  .field__help {
    margin: 0.35rem 0 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* A select is not a text box and should not be mistaken for one. */
  .field__select {
    appearance: none;
    padding-inline-end: 2.25rem;
    background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
      linear-gradient(135deg, currentcolor 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
  }

  .contact__textarea {
    min-height: 9rem;
    resize: vertical;
    font-family: inherit;
  }

  .contact__notice {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--style-border-radius-inputs);
    background: rgba(var(--color-foreground), 0.06);
    font-size: var(--font-size-sm);
  }

  .contact__notice--error {
    background: rgba(var(--color-sale, var(--color-accent)), 0.08);
  }

  .contact__details {
    display: grid;
    gap: 1.5rem;
    align-content: start;
  }

  .contact__detail {
    display: grid;
    gap: 0.25rem;
    font-size: var(--font-size-sm);
  }

  .contact__detail-label {
    margin: 0;
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.7);
  }

  .contact__detail a {
    color: rgb(var(--color-foreground));
  }
/* END_SECTION:contact-form */

/* START_SECTION:country-popup (INDEX:20) */
.geo {
    width: min(var(--geo-width, 420px), calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    /* See the note in newsletter-popup: the base stylesheet zeroes dialog
       margins, so a modal has to ask to be centred. */
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--geo-radius, 0px);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
    /* Visible, so the country list can hang out of the panel rather than
       scrolling inside it. */
    overflow: visible;
  }

  .geo::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  @media (prefers-reduced-motion: no-preference) {
    .geo,
    .geo::backdrop {
      transition: opacity 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
    }

    .geo {
      opacity: 1;
    }

    @starting-style {
      .geo,
      .geo::backdrop {
        opacity: 0;
      }
    }
  }

  .geo__close {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    z-index: 1;
    color: inherit;
  }

  .geo__body {
    display: grid;
    gap: 0.875rem;
    padding: 2.25rem 1.75rem 1.75rem;
    justify-items: start;
  }

  .geo__body.text-center {
    justify-items: center;
  }

  .geo__body.text-end {
    justify-items: end;
  }

  .geo__body.text-center .geo__stay {
    justify-self: center;
  }

  .geo__body.text-end .geo__stay {
    justify-self: end;
  }

  .geo__heading {
    margin: 0;
    font-size: var(--font-size-h4);
  }

  .geo__text {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  .geo__current {
    margin: 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .geo__switch,
  .geo__switch form {
    width: 100%;
    margin: 0;
  }

  .geo__go {
    width: 100%;
  }

  .geo__selector {
    width: 100%;
  }

  .geo__stay {
    justify-self: start;
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(var(--color-foreground), 0.7);
    font-family: inherit;
    font-size: var(--font-size-xs);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }
/* END_SECTION:country-popup */

/* START_SECTION:custom-liquid (INDEX:21) */
/* A colour scheme only declares custom properties — a section that picks one
     has to paint with them or the choice does nothing. */
  .custom-liquid {
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  /* A full-width band sits in column 1 of the section grid and has to re-establish the page grid for its own contents, or everything inside runs edge to edge. */
  .custom-liquid--full {
    display: grid;
    grid-template-columns: var(--content-grid);
  }

  .custom-liquid--full > .custom-liquid__inner {
    grid-column: 2;
  }

  .custom-liquid--narrow .custom-liquid__inner {
    max-width: 46rem;
    margin-inline: auto;
  }
/* END_SECTION:custom-liquid */

/* START_SECTION:custom-section (INDEX:22) */
.builder {
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  /* Heights are a floor, not a fixed size: content taller than the setting grows the section rather than spilling out of it. `svh` because on a phone `vh` is the viewport with the browser chrome hidden, so a full height band is taller than the screen on load. */
  .builder--h-medium {
    min-height: clamp(24rem, 60svh, 34rem);
  }

  .builder--h-large {
    min-height: clamp(30rem, 80svh, 46rem);
  }

  .builder--h-full {
    min-height: 100svh;
  }

  /* A floor only does something if the content can be placed against it. */
  .builder--h-medium .builder__inner,
  .builder--h-large .builder__inner,
  .builder--h-full .builder__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: inherit;
  }

  /* Only with a picture, so no section that does not need one becomes a stacking
     context a child cannot escape. */
  .builder--media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .builder__bg,
  .builder__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .builder__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .builder__scrim {
    background: rgb(var(--color-shadow, 0 0 0));
  }

  .builder__inner {
    display: grid;
    gap: var(--builder-gap, 24px);
  }

  /* Shopify wraps every theme block in a `div.shopify-block` of its own, so the
     flex items of a row are those wrappers and not the columns inside them —
     measured, `.row-block > .column-block` matched nothing and every width
     setting had no element to act on. `display: contents` drops the wrapper's
     box and promotes the block itself to be the child, which is what the
     layout is written against.

     One rule for the whole builder rather than one per container: rows,
     columns and accordion bodies all have the same wrapper between them and
     their children, and a rule per file is a rule per file to forget. */
  .builder .shopify-block {
    display: contents;
  }

  /* A full-width band lands in column 1 of the section grid, so it has to
     re-establish the page grid for its own contents. */
  .builder--full {
    display: grid;
    grid-template-columns: var(--content-grid);
  }

  .builder--full > .builder__inner {
    grid-column: 2;
  }

  .builder--narrow .builder__inner {
    max-width: 46rem;
    margin-inline: auto;
  }
/* END_SECTION:custom-section */

/* START_SECTION:faq (INDEX:24) */
/* The bar reads as a field, not as a button: it sits above the list it acts on, full width of the measure, so it is obviously attached to the questions rather than to the page. */
  /* Narrower than the list it filters, and centred under the centred heading — a field as wide as the questions reads as another row of the list rather than as a control over it. */
  .faq__search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 24rem;
    margin-inline: auto;
    margin-block-end: 1.5rem;
  }

  .faq__search-field {
    width: 100%;
    /* Slim, like every other control in the theme. The font stays at 1rem: any
       smaller and iOS zooms the page when the field takes focus. */
    padding-block: 0.5rem;
    padding-inline: 0.875rem 2.5rem;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: var(--style-border-radius-inputs);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
  }

  .faq__search-field::placeholder {
    color: rgba(var(--color-foreground), 0.7);
  }

  .faq__search-field:focus-visible {
    border-color: rgba(var(--color-foreground), 0.7);
    outline: none;
  }

  /* Safari draws its own clear affordance on a search field and it does not
     match anything else here. */
  .faq__search-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  .faq__search-icon {
    position: absolute;
    inset-inline-end: 0.875rem;
    display: flex;
    pointer-events: none;
  }

  .faq__search-icon svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.55;
  }

  .faq__tally {
    margin: 0 0 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Empty rather than removed, so the live region keeps its place in the
     accessibility tree and later announcements are heard. */
  .faq__tally:empty {
    margin: 0;
  }

  .faq__none {
    margin: 1.5rem 0 0;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* `[hidden]` loses to any display rule at equal specificity, and both of
     these are laid out by one, so each has to say it again. */
  .faq__none[hidden],
  .faq__item[hidden],
  .faq__group[hidden] {
    display: none;
  }


  /* A scheme has to be painted, not merely named. `.color-scheme-N` declares the custom properties and stops there, so a section that offers the setting and never draws with it leaves the merchant's choice invisible. Restating the section grid here is what lets the background reach the viewport edges while the contents stay in the content column. */
  .faq {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .faq > * {
    grid-column: 2;
  }

  .faq__head {
    display: grid;
    justify-items: center;
    gap: 0.625rem;
    max-width: 40rem;
    margin-inline: auto;
    margin-block-end: 2.5rem;
    text-align: center;
  }

  .faq__title {
    margin: 0;
    font-size: var(--font-size-h2);
  }

  .faq__lead {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  .faq__list {
    max-width: 48rem;
    margin-inline: auto;
  }

  .faq__group {
    margin: 2.5rem 0 0.5rem;
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.7);
  }

  .faq__group:first-child {
    margin-block-start: 0;
  }

  .faq__item {
    border-block-end: 1px solid rgba(var(--color-foreground), 0.12);
  }

  .faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.125rem;
    font-size: var(--font-size-base);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Safari draws its own triangle and ignores `list-style` on the summary. */
  .faq__question::-webkit-details-marker {
    display: none;
  }

  .faq__question:hover {
    color: rgb(var(--color-accent));
  }

  .faq__marker {
    display: flex;
    flex: 0 0 auto;
    color: rgba(var(--color-foreground), 0.7);
    transition: rotate var(--duration-fast) var(--ease-out);
  }

  .faq__marker svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .faq__item[open] .faq__marker {
    rotate: 180deg;
  }

  .faq__answer {
    padding-block-end: 1.25rem;
    font-size: var(--font-size-sm);
    line-height: 1.65;
    color: rgba(var(--color-foreground), 0.8);
  }

  .faq__more {
    max-width: 48rem;
    margin: 2rem auto 0;
    font-size: var(--font-size-sm);
    text-align: center;
    color: rgba(var(--color-foreground), 0.7);
  }

  .faq__more a {
    color: rgb(var(--color-foreground));
  }

  @media (prefers-reduced-motion: reduce) {
    .faq__marker {
      transition: none;
    }
  }
/* END_SECTION:faq */

/* START_SECTION:featured-blog (INDEX:25) */
/* `full-width` on the band, so the section re-establishes the content column
     itself — see the note in sections/featured-collections.liquid. */
  .feat-blog {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .feat-blog > * {
    grid-column: 2;
  }

  .feat-blog__header .section-header__text {
    width: 100%;
    max-width: none;
  }

  .feat-blog__align-start {
    text-align: start;
  }

  .feat-blog__align-center {
    text-align: center;
  }

  .feat-blog__align-end {
    text-align: end;
  }

  .feat-blog__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-mobile);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .feat-blog__grid {
      grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
      gap: var(--gap);
    }
  }

  .feat-blog__grid--swipe {
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  /* Bleeds only on a phone; inside the column above it, where the arrows straddle the row's edge and that edge has to be the content edge. Snap has to be told about the padding or the row lands scrolled by exactly it. */
  @media screen and (max-width: 749px) {
    .feat-blog__grid--swipe {
      padding-inline: var(--page-margin);
      scroll-padding-inline-start: var(--page-margin);
      margin-inline: calc(-1 * var(--page-margin));
    }
  }

  .feat-blog__grid--swipe::-webkit-scrollbar {
    display: none;
  }

  .feat-blog__grid--swipe > .feat-blog__item {
    scroll-snap-align: start;
  }

  .feat-blog__grid--swipe {
    grid-auto-columns: min(20rem, 78vw);
  }

  @media screen and (min-width: 750px) {
    .feat-blog__grid--swipe {
      grid-auto-columns: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
    }
  }

  .feat-blog__row-frame {
    position: relative;
    overflow: visible;
  }

  /* Straddling the row's edge — see the note in sections/text-icons.liquid. */
  .feat-blog__arrow {
    --arrow-size: 2.5rem;

    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    display: none;
    place-items: center;
    width: var(--arrow-size);
    height: var(--arrow-size);
    padding: 0;
    border: 1px solid var(--arrow-border);
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    translate: 0 -50%;
    cursor: pointer;
  }

  @media screen and (min-width: 990px) {
    .feat-blog__arrow {
      display: grid;
    }
    /* `hidden` is only a UA stylesheet rule, and the `display: grid` above beats it on specificity alone. theme.js sets the attribute when the row has nothing to page through — four cards in four columns — so without this the arrows stayed on screen and did nothing when clicked. */
    .feat-blog__arrow[hidden] {
      display: none;
    }
  }

  .feat-blog__arrow svg {
    width: 1rem;
    height: 1rem;
  }

  .feat-blog__arrow--prev {
    inset-inline-start: calc(var(--arrow-size) / -2);
    rotate: 180deg;
  }

  .feat-blog__arrow--next {
    inset-inline-end: calc(var(--arrow-size) / -2);
  }

  .feat-blog__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .feat-blog__row-wrap .scroll-dots {
    margin-block-start: 1.25rem;
  }

  .feat-blog__empty {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
  }

  .feat-blog__app {
    margin-block-start: 2rem;
  }
/* END_SECTION:featured-blog */

/* START_SECTION:featured-collection (INDEX:26) */
/* A scheme has to be painted, not merely named. `.color-scheme-N` declares the custom properties and stops there, so a section that offers the setting and never draws with it leaves the merchant's choice invisible. Restating the section grid here is what lets the background reach the viewport edges while the contents stay in the content column. */
  .featured-collection {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .featured-collection > * {
    grid-column: 2;
  }

  /* Shared by every section that opens with a heading and an optional link. */
  .section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    /* Close to the products on purpose. The heading and the row are one unit;
       a large gap makes the heading read as belonging to whatever is above it. */
    margin-block-end: 1.25rem;
  }

  /* Alignment for the shared header, defined beside the base rules rather than
     in whichever section happened to need it first.

     The header is a flex row with the heading at one end and the view-all link
     at the other, so the text block shrinks to its own content. `text-align`
     alone therefore does nothing visible: it centres the words inside a box
     that is still hard against the start edge. Measured before the fix: the
     heading sat at x=46 in all three states.

     Aligning the heading has to move the box, not the text inside it. Off
     `start`, the row stops being a row: the two stack and the whole column
     takes the alignment, which is the arrangement that reads as centred.

     `start` and `end` rather than left and right, so an RTL storefront follows
     the language. */
  .section-header--align-center,
  .section-header--align-end {
    flex-direction: column;
    gap: 0.75rem;
  }

  .section-header--align-center {
    align-items: center;
  }

  .section-header--align-end {
    align-items: flex-end;
  }

  /* Full width so a long description wraps symmetrically around the centre
     rather than around wherever the longest line happened to end. */
  .section-header--align-center .section-header__text,
  .section-header--align-end .section-header__text {
    width: 100%;
  }

  .section-header--align-center .section-header__text {
    text-align: center;
  }

  .section-header--align-end .section-header__text {
    text-align: end;
  }

  .section-header__text {
    max-width: 40rem;
  }

  .section-header__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    line-height: 1.15;
  }

  /* Multiplied by `--type-scale`, the merchant's Heading font size setting.

     Without it this clamp is an island: the theme setting moves every heading
     that uses `--font-size-h*` and silently does nothing here, which is exactly
     how it was reported — the slider moved and the hero did not. Any heading
     that sets its own size has to opt back in. */
  .section-header__heading--small {
    font-size: var(--font-size-h4);
  }

  .section-header__heading--medium {
    font-size: calc(clamp(1.5rem, 2.6vw, 2rem) * var(--type-scale));
  }

  .section-header__heading--large {
    font-size: calc(clamp(1.75rem, 3.4vw, 2.75rem) * var(--type-scale));
  }

  .section-header__description {
    margin-block-start: 0.375rem;
    color: rgba(var(--color-foreground), 0.75);
  }

  /* The heading-row link is a desktop affordance. On a phone it would sit under the heading and above the products, splitting the two things that belong together; the copy below the row takes over there. */
  .section-header__link {
    display: none;
    flex: 0 0 auto;
    padding-block-end: 0.25rem;
  }

  @media screen and (min-width: 750px) {
    .section-header {
      flex-wrap: nowrap;
      margin-block-end: 1.75rem;
    }

    .section-header__link {
      display: inline-flex;
    }
  }

  .collection-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Close to the products it belongs to. The row is the section signing off, not a separate block, and the paging in particular has to read as part of the row above it rather than as something floating below the section. */
    margin-block-start: 1.25rem;
  }

  /* With nothing on the right, the paging has the row to itself and centres
     rather than hanging off the left edge. */
  .collection-actions:not(:has(.collection-actions__link)) {
    justify-content: center;
  }

  /* A button is a heavier thing than a strip of segments, so it gets its own
     line rather than sitting on one with them. */
  .collection-actions:has(.button) {
    flex-direction: column;
    gap: 1.25rem;
  }

  @media screen and (min-width: 750px) {
    .collection-actions {
      margin-block-start: 1.75rem;
    }

    /* The text link is already beside the heading up here; a second copy would be the same destination twice on one screen. `display: none` takes it out of the accessibility tree too, so it is not announced twice either. */
    .collection-actions__link.link {
      display: none;
    }

    .collection-actions:has(.collection-actions__link.link) {
      justify-content: center;
    }
  }

  .featured-collection__empty {
    padding-block: 2rem;
    text-align: center;
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_SECTION:featured-collection */

/* START_SECTION:featured-collections (INDEX:27) */
/* `full-width` puts the band across all three columns of `.shopify-section`,
     so the section has to re-establish the content column itself — otherwise
     its children are as wide as the viewport, and the swipe row's -14px bleed
     margins push 14px past each edge instead of landing flush with them.
     Measured before the fix: the row's right edge at 404 on a 390px screen,
     which is 15px of horizontal page scroll. */
  .featured-collections {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .featured-collections > * {
    grid-column: 2;
  }

  .featured-collections__empty {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
  }

  .featured-collections__app {
    margin-block-start: 2rem;
  }
/* END_SECTION:featured-collections */

/* START_SECTION:featured-product (INDEX:28) */
/* `full-width` on the band, so the section re-establishes the content column
     itself — see the note in sections/featured-collections.liquid. */
  .featured-product {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .featured-product > * {
    grid-column: 2;
  }

  .featured-product__inner {
    display: grid;
    gap: calc(var(--gap) * 0.6);
  }

  @media screen and (min-width: 990px) {
    .featured-product__inner {
      grid-template-columns: var(--media-width) minmax(0, 1fr);
      gap: var(--gap);
      align-items: start;
    }

    .featured-product--media-end .featured-product__media {
      order: 2;
    }

    .featured-product--media-end .featured-product__inner {
      grid-template-columns: minmax(0, 1fr) var(--media-width);
    }
  }

  .featured-product__media {
    display: grid;
    gap: 0.625rem;
  }

  .featured-product__image,
  .featured-product__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: var(--media-ratio, 3 / 4);
    object-fit: cover;
    border-radius: var(--media-radius, 0);
  }

  .featured-product__placeholder {
    background: rgba(var(--color-foreground), 0.06);
  }

  .featured-product__thumbs {
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .featured-product__thumb {
    display: block;
    /* Reserves the ring's width at rest, so choosing a thumbnail does not nudge
       the row sideways by two pixels. */
    border: 1px solid transparent;
    border-radius: var(--media-radius, 0);
  }

  .featured-product__thumb img {
    display: block;
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--media-radius, 0);
  }

  /* Which photograph is showing. `aria-current` rather than a class, because the state is the same fact the assistive layer is being told — one source, and it cannot drift out of step with what is on screen. */
  .featured-product__thumb[aria-current] {
    border-color: rgb(var(--color-foreground));
  }

  @media (hover: hover) {
    .featured-product__thumb:hover {
      border-color: rgba(var(--color-foreground), 0.4);
    }
  }

  .featured-product__buy {
    display: grid;
    gap: 1rem;
    align-content: start;
  }

  .featured-product__form {
    display: grid;
    gap: 1rem;
  }

  .featured-product__note {
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    color: rgba(var(--color-foreground), 0.7);
  }

  .featured-product__app {
    width: 100%;
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer-bespoke (INDEX:29) */
.ftr {
    margin-block-start: 8px;
    background: #2a251f;
    color: #cbb891;
  }

  .ftr__inner {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    padding-block-start: clamp(40px, 5vw, 64px);
    padding-block-end: 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .ftr__brand-col {
    margin-block-end: 20px;
  }

  .ftr__logo {
    width: 158px;
    height: auto;
  }

  .ftr__blurb {
    margin: 16px 0 0;
    max-width: 34ch;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    line-height: 1.7;
    color: #a9977166;
    color: rgba(203, 184, 145, 0.7);
  }

  .ftr__social {
    margin-block-start: 18px;
    color: #cbb891;
  }

  .ftr__heading,
  .ftr__heading--static {
    font-family: var(--font-body--family);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(203, 184, 145, 0.6);
  }

  .ftr__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-body--family);
    font-size: 13.5px;
  }

  .ftr__link {
    color: #cbb891;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .ftr__link:hover {
    color: #faf8f3;
  }

  /* Mobile: columns are closed accordions; hairline between them. */
  .ftr__col {
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ftr__acc {
    padding-block: 2px;
  }

  .ftr__acc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 14px;
    cursor: pointer;
    list-style: none;
  }

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

  .ftr__chev {
    display: inline-flex;
    transition: transform 0.2s ease;
  }

  .ftr__acc[open] > summary .ftr__chev {
    transform: rotate(180deg);
  }

  .ftr__acc .ftr__links {
    padding-block-end: 14px;
  }

  .ftr__open {
    display: none;
  }

  .ftr__contact-col {
    padding-block: 14px 0;
  }

  .ftr__contact {
    margin: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    line-height: 1.6;
  }

  .ftr__contact p {
    margin: 0;
    color: #cbb891;
  }

  .ftr__contact-addr,
  .ftr__contact-hours {
    color: rgba(203, 184, 145, 0.7);
  }

  .ftr__contact a {
    color: #faf8f3;
    text-decoration: none;
    text-underline-offset: 4px;
    transition: color 0.2s ease;
  }

  .ftr__contact a:hover {
    color: #d17a8d;
    text-decoration: underline;
  }

  .ftr__bar {
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ftr__bar-inner {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    padding-block: 20px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 14px;
  }

  .ftr__copy {
    font-family: var(--font-body--family);
    font-size: 12px;
    color: rgba(203, 184, 145, 0.55);
  }

  .ftr__payment :where(svg) {
    height: 18px;
    width: auto;
  }

  @media screen and (min-width: 600px) {
    .ftr__col {
      border-block-start: 0;
    }

    .ftr__acc {
      display: none;
    }

    .ftr__open {
      display: block;
    }

    .ftr__open .ftr__heading {
      margin-block-end: 16px;
    }

    .ftr__heading--static {
      margin-block-end: 16px;
    }

    .ftr__contact-col {
      padding-block: 0;
    }

    .ftr__bar-inner {
      flex-direction: row;
      justify-content: space-between;
      gap: 12px;
    }
  }

  /* An intermediate step so four menus do not have to jump straight from a
     stack to a single row: brand full width on its own line, then the four
     menus (and contact) two across. */
  @media screen and (min-width: 600px) and (max-width: 1119px) {
    .ftr__inner {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: clamp(24px, 4vw, 48px);
      row-gap: 28px;
    }

    .ftr__brand-col {
      grid-column: 1 / -1;
      margin-block-end: 4px;
    }
  }

  @media screen and (min-width: 1120px) {
    .ftr__inner {
      grid-template-columns: minmax(210px, 1.3fr) repeat(4, minmax(0, 1fr)) minmax(200px, 1.12fr);
      column-gap: clamp(20px, 2.4vw, 44px);
      row-gap: 0;
    }

    .ftr__brand-col {
      margin-block-end: 0;
    }
  }
/* END_SECTION:footer-bespoke */

/* START_SECTION:footer (INDEX:30) */
.footer {
    margin-block-start: auto;
    padding-block: 3rem 1.75rem;
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .footer__inner {
    display: grid;
    gap: 2.5rem;
  }

  /* --- Newsletter band --- */


  .footer__group > summary {
    list-style: none;
    cursor: pointer;
  }

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

  /* The columns. Restored after a regex tidying the old newsletter band ran
     past the rule it was aiming at — the nested copy inside the media query
     closes at a deeper indent than the pattern expected, so the match consumed
     this one too and the columns silently became a block stack. */
  .footer__columns {
    display: grid;
    gap: 1rem 2rem;
  }

  .footer__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: rgba(var(--color-foreground), 0.7);
  }

  .footer__heading svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
  }

  .footer__group[open] > .footer__heading svg {
    transform: rotate(180deg);
  }

  .footer__list {
    display: grid;
    gap: 0.125rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .footer__link {
    display: inline-block;
    min-height: 1.75rem;
    padding-block: 0.25rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.85);
  }

  .footer__link:hover {
    color: rgb(var(--color-accent));
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .footer__text {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  .footer__brand {
    display: grid;
    gap: 0.875rem;
    justify-items: start;
  }

  .footer__wordmark {
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .footer__logo {
    width: auto;
    max-height: 2.5rem;
    object-fit: contain;
  }

  /* --- Bottom row --- */

  .footer__localization {
    padding-block-start: 0.5rem;
  }

  .footer__bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid rgba(var(--color-border), 0.7);
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .footer__follow {
    margin-block-start: 0.875rem;
  }

  .footer__note {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Centred on its own line, and without the underline Shopify's own markup carries — the link is the whole line here, so an underline reads as a correction rather than as a link. */
  /* Pinned to the middle of the row rather than flexed into it. `flex: 1` grows
     the box but leaves it between two ends of unequal width, so its centre is
     not the row's centre — measured off by the difference between the copyright
     and the payment marks. Absolute against the row is centred whatever those
     two are doing.

     Static again below 750px, where the three parts stack and there is no row
     to be in the middle of. */
  .footer__powered {
    position: absolute;
    inset-inline-start: 50%;
    translate: -50% 0;
    margin: 0;
    text-align: center;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Shopify's own markup, so the link inside is styled rather than the
     paragraph around it. */
  .footer__powered a {
    color: inherit;
    text-decoration: none;
  }

  .footer__powered a:hover {
    text-decoration: underline;
  }

  /* The country selector and the policy links share a row: selector at the
     start, links at the end, stacked on a phone where they would not fit. */
  .footer__utility {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
  }

  /* The small print, set small. It was inheriting body size, so four policy links and two lines of copyright took as much room as a content column — which is what made the bottom of the footer read as a section of its own rather than as a footnote. */
  .footer__legal {
    display: grid;
    gap: 0.375rem;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .footer__legal a {
    color: inherit;
  }

  /* ---- phone ------------------------------------------------------------- * One edge, and less air. The bottom of the footer had the copyright at the start, the credit centred and the payment marks at the start again — three alignments in three stacked lines, which reads as a mistake rather than as a composition. On a phone everything sits on the same rule. */
  @media screen and (max-width: 749px) {
    .footer__powered {
      position: static;
      translate: none;
      width: 100%;
      text-align: start;
    }

    .footer__bottom {
      display: grid;
      justify-items: start;
      gap: 0.625rem;
      padding-block-start: 1.25rem;
    }

    .footer__payment {
      justify-self: start;
    }

    .footer__columns {
      gap: 0;
    }

    /* The rows are the accordion; the space between them was doing the work the
       divider should. */
    .footer__group {
      border-block-start: 1px solid rgba(var(--color-border), 0.5);
    }

    /* The sign-up is not an accordion, so it does not get the rule from the rule above — and without one it was the only row in the stack with no line over it, which reads as the list having ended one row early. */
    .footer__column--newsletter {
      padding-block-start: 1.25rem;
      border-block-start: 1px solid rgba(var(--color-border), 0.5);
    }

    .footer__heading {
      min-height: 2.75rem;
    }

    .footer__brand {
      gap: 0.75rem;
      margin-block-end: 1.25rem;
    }

    .footer__utility {
      justify-content: start;
      gap: 0.75rem;
      margin-block: 1.25rem 0;
    }

    .footer__policies {
      gap: 0.25rem 1rem;
    }
  }

  .footer__policies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .footer__payment {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .footer__payment-icon {
    width: 2.375rem;
    height: auto;
  }

  @media screen and (min-width: 750px) {
    .footer {
      padding-block: 4rem 2rem;
    }

  

    /* An 11rem minimum track was wider than these columns need, and the width it did not need came out of the track count: a five-block footer got four tracks between 900px and 1100px and put the fifth block alone on a second row. One lonely column reads as a fault; the same five on one line read as the layout. 9rem fits all five from roughly 870px up, and `auto-fit` still collapses the tracks a shorter footer does not use, so a two-block footer is unaffected by the change. */
    /* Flex with padding gutters, not a gapped grid — because the widths are percentages and the two do not mix. */
    .footer__columns {
      --col-gap: clamp(1.25rem, 2.5vw, 3rem);

      display: flex;
      flex-wrap: wrap;
      align-content: start;
      row-gap: 2rem;
      column-gap: 0;
      margin-inline: calc(var(--col-gap) / -2);
    }

    .footer__column {
      flex: 1 1 9rem;
      min-width: 0;
      padding-inline: calc(var(--col-gap) / 2);
    }

    .footer__column--sized {
      flex: 0 0 var(--footer-col-width);
    }

    /* Above the accordion breakpoint every column is always open and the
       disclosure affordance is pointless, so it is removed. */
    .footer__group > summary {
      cursor: default;
      pointer-events: none;
    }



    .footer__heading {
      min-height: auto;
      margin-block-end: 0.75rem;
    }

    .footer__heading svg {
      display: none;
    }
  }

  /* Tablet: the sign-up takes the whole second row. */
  @media screen and (min-width: 750px) and (max-width: 899px) {
    .footer__column--newsletter:not(.footer__column--sized) {
      flex-basis: 100%;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:31) */
.header__editor-notice {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--color-accent), 0.12);
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-xs);
  }

  .header {
    z-index: 40;
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
    /* Full-width line under the whole header (the header is a full-width band, so
       this reaches the viewport edges). On an overlay hero it is turned
       transparent until the header goes solid (see .header--overlay rules). */
    border-block-end: 1px solid rgb(var(--color-border));
  }

  /* Sticky has to sit on the section wrapper, not on .header. The header is a grid child of .shopify-section, and a sticky element can never travel beyond its own parent's box, so sticking the child would do nothing. */
  .shopify-section:has(.header--sticky) {
    position: sticky;
    inset-block-start: var(--announcement-offset, 0px);
    z-index: 40;
  }

  /* --- Overlay --- The header lifts out of flow so the section beneath it starts at the top of the viewport and its image runs behind the header. */

  .shopify-section:has(.header--overlay) {
    position: absolute;
    /* Placed explicitly rather than left at its static position. */
    inset-block-start: var(--announcement-height, 0px);
    inset-inline: 0;
    z-index: 40;
  }

  /* Sticky and overlay cannot both be expressed on the wrapper.

     `position: sticky` keeps an element in flow, so the section below it starts
     underneath its box rather than behind it, and the hero image begins below
     the header instead of running up to the top of the viewport. Measured: the
     hero started 164px down with a 124px header above it. Absolute is what takes
     the header out of flow, and it is therefore what overlay needs.

     Sticky then has to come from somewhere else, and it is only needed after the
     header has left the hero: while it is still over the image it is at the top
     of the page anyway. So the fixed position is attached to `is-solid`, the
     class theme.js adds when the sentinel scrolls out. The header moves from
     absolute to fixed at exactly the moment it would otherwise disappear, and
     slides back in rather than snapping, which reads as a deliberate reveal.

     Overlay without sticky is unchanged: the header scrolls away with the page,
     because nothing ever adds the fixed rule. */
  .header--overlay.header--sticky.is-stuck {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
  }

  /* The reveal is for `always` only. In `scroll_up` the same property is being transitioned by the hide and show below, and an animation with `both` holds its final transform indefinitely, which would win against every later transition and leave the bar stuck. */
  .header--overlay.header--sticky:not(.header--sticky-up).is-stuck {
    animation: header-reveal var(--duration-base) var(--ease-out) both;
  }

  /* --- Reveal on scroll up --- The bar is moved rather than unpinned, so it never gives its space back and nothing below it reflows as it comes and goes. `is-hidden` is set by theme.js from the scroll direction. */
  .header--sticky-up {
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .header--sticky-up.is-hidden {
    transform: translateY(-100%);
  }

  /* Reduced motion keeps the behaviour and drops the travel: the bar appears
     and disappears where it is asked to, without sliding. */
  @media (prefers-reduced-motion: reduce) {
    .header--sticky-up {
      transition: none;
    }
  }

  @keyframes header-reveal {
    from {
      transform: translateY(-100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .header--overlay.header--sticky.is-stuck {
      animation: none;
    }
  }

  .header--overlay {
    background: transparent;
    border-block-end-color: transparent;
    transition:
      background-color 0.25s ease,
      border-color 0.25s ease;
  }

  /* A scrim keeps text legible over a bright image. It is a gradient rather
     than a flat tint so the header edge is not visible as a hard band. */
  .header--overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      to bottom,
      rgba(var(--color-shadow), var(--header-scrim, 0.28)),
      rgba(var(--color-shadow), 0)
    );
    transition: opacity 0.25s ease;
  }

  .header--overlay.is-solid {
    background: var(--gradient-background);
    border-block-end-color: rgb(var(--color-border));
  }

  .header--overlay.is-solid::before {
    opacity: 0;
  }

  /* Beauty overlay: same white header content as the home hero, but the beauty
     hero is a LIGHT image, so the scrim is stronger to keep the white logo/nav
     legible across the cream negative space. */
  .header--overlay-beauty:not(.is-solid)::before {
    background: linear-gradient(
      to bottom,
      rgba(28, 24, 20, 0.55),
      rgba(28, 24, 20, 0.12) 60%,
      rgba(28, 24, 20, 0)
    );
  }

  {%- comment -%} When a mega menu opens over a transparent hero, theme.js adds `is-solid` so the bar swaps to the solid (cream) scheme and the cream panel below reads as one surface, matching Hydrogen. No dark background flash. {%- endcomment -%}

  /* --- Layout --- A slim two-tier header, matching the Hydrogen storefront:
     row one is logo / Fashion-Beauty switch / actions; row two (desktop only)
     is the navigation, centred under a hairline rule. */
  .header__inner {
    display: block;
  }

  .header__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
  }

  .header__brand {
    flex: 0 0 auto;
    min-width: 0;
  }

  /* The switch centres in row one on desktop only; the drawer carries it on
     mobile. */
  .header__switch--bar {
    display: none;
  }

  /* Row two is hidden on mobile — the navigation lives in the drawer there —
     so the hairline rule never shows over an empty band. */
  .header__belt {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .header__bar {
      gap: clamp(1rem, 3vw, 2.5rem);
      min-height: 2.75rem;
    }

    .header__switch--bar {
      display: flex;
      flex: 1 1 auto;
      min-width: 0;
      justify-content: center;
    }

    /* Row two: the nav, slim, under a hairline rule (the middle line). */
    .header__belt {
      display: block;
      margin-block-start: 0.35rem;
      padding-block-start: 0.35rem;
      border-block-start: 1px solid rgba(var(--color-border), 0.7);
    }

    .header--overlay:not(.is-solid) .header__belt {
      border-block-start-color: rgba(var(--color-foreground), 0.35);
    }
  }

  /* --- Mobile: no transparent header ---
     The over-the-hero treatment is a desktop-only look. Below the desktop
     breakpoint the overlay header becomes an ordinary solid, in-flow bar that
     sits ABOVE the first section (the hero starts below it), matching the
     Hydrogen mobile header. The colour scheme is swapped to the solid scheme by
     an inline script (below the markup) and by theme.js, so text stays dark on
     the cream bar rather than the light-on-image overlay colours. */
  @media screen and (max-width: 989px) {
    .shopify-section:has(.header--overlay) {
      position: static;
      inset: auto;
    }

    .header--overlay,
    .header--overlay.header--sticky.is-stuck {
      position: static;
    }

    .header--overlay:not(.is-solid) {
      background: var(--gradient-background);
      border-block-end-color: rgb(var(--color-border));
    }

    .header--overlay::before {
      display: none;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:32) */
.slideshow {
    position: relative;
  }

  /* Height is a custom property rather than a class per size on the slide, so the slide file does not need to know what the section's height options are. */
  .hero--small {
    --hero-height: clamp(20rem, 48svh, 28rem);
  }

  .hero--medium {
    --hero-height: clamp(28rem, 76svh, 45rem);
  }

  .hero--large {
    --hero-height: clamp(34rem, 88svh, 54rem);
  }

  .hero--full {
    --hero-height: 100svh;
  }

  /* Sized by shape rather than by height. The slide is a flex item pinned to 100% of the track's width, so an aspect ratio resolves to exactly the height that shows the whole image, and `object-fit: cover` then crops nothing because the box already matches the file. */
  .hero--adapt .hero__slide {
    min-height: 0;
    aspect-ratio: var(--hero-ratio, 16 / 9);
  }

  @media screen and (max-width: 749px) {
    .hero--adapt .hero__slide {
      aspect-ratio: var(--hero-ratio-mobile, var(--hero-ratio, 16 / 9));
    }
  }

  .hero__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Momentum scrolling on iOS, and no rubber-band chaining to the page behind
       when the last slide is reached. */
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .hero__track::-webkit-scrollbar {
    display: none;
  }

  .hero__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* A scroll container is focusable and keyboard scrollable in Chrome, which is what makes the arrow keys work here without any script. The focus ring is kept rather than removed, because it is the only thing telling a keyboard user the arrows will now move the slides. */
  .hero__track:focus-visible {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: -2px;
  }

  .hero-empty {
    padding-block: 3rem;
    text-align: center;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Reduced motion applies to the movement between slides, not to the slideshow
     itself: theme.js jumps rather than scrolls, and does not start autoplay. */
  @media (prefers-reduced-motion: reduce) {
    .hero__track {
      scroll-behavior: auto;
    }
  }
/* END_SECTION:hero */

/* START_SECTION:home-categories (INDEX:33) */
.home-categories__inner {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    padding-block-start: clamp(16px, 2.5vw, 32px);
    padding-block-end: clamp(10px, 2vw, 20px);
  }

  .home-cat__header {
    margin-block-end: clamp(18px, 2.5vw, 30px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
  }

  .home-cat__eyebrow {
    font-family: var(--font-body--family);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #8a5060;
  }

  .home-cat__title {
    margin: 8px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1.1;
    font-size: clamp(20px, 2.4vw, 30px);
    color: #2a251f;
  }

  .home-cat__viewall {
    border-block-end: 1px solid #2a251f;
    padding-block-end: 3px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #2a251f;
    text-decoration: none;
  }

  .home-cat__rail-wrap {
    position: relative;
  }

  .home-cat__rail {
    display: flex;
    gap: clamp(14px, 2vw, 22px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    margin-inline: -4px;
    padding-inline: 4px;
    padding-block-end: 8px;
  }

  .home-cat__tile {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 46%;
    scroll-snap-align: start;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f2ece1;
    box-shadow: 0 0 0 1px rgba(42, 37, 31, 0.05), 0 2px 12px -6px rgba(42, 37, 31, 0.3);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  }

  .home-cat__tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 0 1px rgba(42, 37, 31, 0.05), 0 26px 44px -22px rgba(42, 37, 31, 0.5);
  }

  .home-cat__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease-out;
  }

  .home-cat__img--empty {
    background: #f2ece1;
  }

  .home-cat__tile:hover .home-cat__img {
    transform: scale(1.07);
  }

  .home-cat__scrim {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 33.333%;
    background: linear-gradient(to top, rgba(28, 24, 20, 0.28), transparent);
  }

  .home-cat__pill {
    position: absolute;
    inset-inline: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(253, 248, 241, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 4px 4px 4px 12px;
    box-shadow: 0 4px 14px -6px rgba(42, 37, 31, 0.4);
  }

  .home-cat__pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-heading--family);
    font-size: 13px;
    line-height: 1;
    color: #2a251f;
  }

  .home-cat__pill-arrow {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: #c04a63;
    color: #fdf8f1;
    transition: transform 0.3s ease;
  }

  .home-cat__tile:hover .home-cat__pill-arrow {
    transform: translateX(2px);
  }

  .home-cat__arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    border: 1px solid #e6dcca;
    background: #ffffff;
    color: #2a251f;
    box-shadow: 0 10px 24px -12px rgba(42, 37, 31, 0.5);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .home-cat__arrow:hover {
    background: #2a251f;
    color: #faf8f3;
  }

  .home-cat__arrow--left {
    left: -12px;
  }

  .home-cat__arrow--right {
    right: -12px;
  }

  @media screen and (min-width: 640px) {
    .home-cat__tile {
      width: 31%;
    }
    .home-cat__pill {
      inset-inline: 12px;
      bottom: 12px;
      padding: 8px 8px 8px 16px;
    }
    .home-cat__pill-label {
      font-size: 15px;
    }
    .home-cat__pill-arrow {
      width: 28px;
      height: 28px;
    }
  }

  @media screen and (min-width: 768px) {
    .home-cat__arrow {
      display: flex;
    }
  }

  @media screen and (min-width: 1024px) {
    .home-cat__tile {
      width: 23.5%;
    }
    .home-cat__arrow--left {
      left: -20px;
    }
    .home-cat__arrow--right {
      right: -20px;
    }
  }

  /* Grid layout: a static wrapping grid, no rail/arrows (used on the beauty page). */
  .home-cat--grid .home-cat__rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-block-end: 0;
  }

  .home-cat--grid .home-cat__tile {
    width: auto;
  }

  @media screen and (min-width: 640px) {
    .home-cat--grid .home-cat__rail {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 1024px) {
    .home-cat--grid .home-cat__rail {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
/* END_SECTION:home-categories */

/* START_SECTION:home-cross-promo (INDEX:34) */
.home-cross {
    background: #efe7d9;
  }

  .home-cross__inner {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    padding-block: clamp(24px, 3.5vw, 48px);
  }

  .home-cross__grid {
    display: grid;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
  }

  .home-cross__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f2ece1;
  }

  .home-cross__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-cross__eyebrow {
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #c04a63;
  }

  .home-cross__title {
    margin: 12px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1.1;
    font-size: clamp(22px, 2.8vw, 32px);
    color: #2a251f;
  }

  .home-cross__text {
    margin: 14px 0 0;
    max-width: 52ch;
    font-family: var(--font-body--family);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.7;
    color: #7c7264;
  }

  .home-cross__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-start: 24px;
    padding: 0.8rem 1.6rem;
    background: #2a251f;
    color: #faf8f3;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background 0.2s ease;
  }

  .home-cross__btn:hover {
    background: #c04a63;
  }

  @media screen and (min-width: 768px) {
    .home-cross__grid {
      grid-template-columns: 1fr 1fr;
    }

    .home-cross__copy {
      order: 1;
    }

    .home-cross__media {
      order: 2;
      aspect-ratio: 16 / 10;
    }
  }
/* END_SECTION:home-cross-promo */

/* START_SECTION:home-mission (INDEX:36) */
.home-mission {
    position: relative;
    overflow: hidden;
  }

  .home-mission__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .home-mission__overlay {
    position: absolute;
    inset: 0;
    background: rgba(42, 37, 31, 0.55);
  }

  .home-mission__inner {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    padding-block: clamp(48px, 6vw, 88px);
  }

  .home-mission__content {
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
  }

  .home-mission__eyebrow {
    font-family: var(--font-body--family);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(253, 248, 241, 0.85);
  }

  .home-mission__title {
    margin: 14px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1.14;
    font-size: clamp(22px, 2.8vw, 34px);
    color: #faf8f3;
  }

  .home-mission__text {
    max-width: 520px;
    margin: 20px auto 0;
    font-family: var(--font-body--family);
    font-size: 16px;
    line-height: 1.75;
    color: rgba(253, 248, 241, 0.9);
  }

  .home-mission__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-start: 28px;
    padding: 0.8rem 1.6rem;
    border: 1px solid rgba(253, 248, 241, 0.7);
    color: #fdf8f1;
    background: transparent;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .home-mission__btn:hover {
    background: #fdf8f1;
    color: #2a251f;
    border-color: #fdf8f1;
  }
/* END_SECTION:home-mission */

/* START_SECTION:home-newsletter (INDEX:37) */
.home-news {
    border-block-start: 1px solid #e6dcca;
    background: #faf8f3;
    padding-block: clamp(28px, 3.5vw, 44px);
  }

  .home-news__inner {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
  }

  .home-news__row {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .home-news__copy {
    max-width: 480px;
  }

  .home-news__eyebrow {
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #8a5060;
  }

  .home-news__title {
    margin: 6px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1.15;
    font-size: clamp(21px, 2.4vw, 27px);
    color: #2a251f;
  }

  .home-news__text {
    margin: 6px 0 0;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    line-height: 1.6;
    color: #6f6250;
  }

  .home-news__field {
    width: 100%;
    max-width: 440px;
  }

  .home-news__control {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-block-end: 8px;
    border-block-end: 1px solid rgba(42, 37, 31, 0.6);
    transition: border-color 0.2s ease;
  }

  .home-news__control:focus-within {
    border-block-end-color: #2a251f;
  }

  .home-news__input {
    min-width: 0;
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: var(--font-body--family);
    font-size: 15px;
    color: #2a251f;
    outline: none;
  }

  .home-news__input::placeholder {
    color: #6f6250;
  }

  .home-news__submit {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #2a251f;
    transition: color 0.2s ease;
  }

  .home-news__submit:hover {
    color: #c04a63;
  }

  .home-news__fine {
    margin: 8px 0 0;
    font-family: var(--font-body--family);
    font-size: 11.5px;
    color: #6f6250;
  }

  .home-news__error {
    margin: 8px 0 0;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    color: #c04a63;
  }

  .home-news__success-msg {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 14.5px;
    color: #2a251f;
  }

  .home-news__code {
    display: inline-block;
    margin-block-start: 10px;
    padding: 6px 14px;
    border: 1px dashed #2a251f;
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #2a251f;
  }

  .home-news__success .home-news__fine {
    text-align: start;
  }

  @media screen and (min-width: 1024px) {
    .home-news__success .home-news__fine {
      text-align: end;
    }
  }

  @media screen and (min-width: 1024px) {
    .home-news__row {
      flex-direction: row;
      justify-content: space-between;
      gap: 48px;
      text-align: start;
    }

    .home-news__field {
      width: 440px;
      flex-shrink: 0;
    }

    .home-news__fine {
      text-align: end;
    }
  }
/* END_SECTION:home-newsletter */

/* START_SECTION:home-product-row (INDEX:38) */
.home-row__inner {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    padding-block-start: clamp(6px, 1.4vw, 14px);
    padding-block-end: clamp(16px, 2.5vw, 32px);
  }

  .home-row__header {
    margin-block-end: clamp(18px, 2.5vw, 30px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
  }

  .home-row__eyebrow {
    font-family: var(--font-body--family);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #8a5060;
  }

  .home-row__title {
    margin: 8px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1.1;
    font-size: clamp(20px, 2.4vw, 30px);
    color: #2a251f;
  }

  .home-row__viewall {
    border-block-end: 1px solid #2a251f;
    padding-block-end: 3px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #2a251f;
    text-decoration: none;
  }

  .home-row__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 26px);
  }

  /* Only the first four cards on a phone; the rest return from the tablet grid. */
  @media screen and (max-width: 767px) {
    .home-row__grid > *:nth-child(n + 5) {
      display: none;
    }
  }

  @media screen and (min-width: 768px) {
    .home-row__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 1280px) {
    .home-row__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .home-row__empty {
    font-family: var(--font-body--family);
    font-size: 14px;
    color: rgba(var(--color-foreground), 0.6);
  }
/* END_SECTION:home-product-row */

/* START_SECTION:home-reviews (INDEX:39) */
.home-rev {
    overflow: hidden;
    background: #faf8f3;
    padding-block-start: clamp(20px, 3vw, 40px);
    padding-block-end: clamp(28px, 4vw, 52px);
  }

  .home-rev__head {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    margin-block-end: clamp(18px, 2.5vw, 28px);
    text-align: center;
  }

  .home-rev__eyebrow {
    font-family: var(--font-body--family);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #8a5060;
  }

  .home-rev__title {
    margin: 8px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1.1;
    font-size: clamp(20px, 2.6vw, 30px);
    color: #2a251f;
  }

  .home-rev__viewport {
    position: relative;
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }

  .home-rev__track,
  .home-rev__track-inner {
    display: flex;
    gap: 16px;
    padding-inline-end: 16px;
    margin: 0;
    list-style: none;
    width: max-content;
  }

  .home-rev__track {
    animation: home-rev-marquee 60s linear infinite;
  }

  .home-rev__clone {
    display: block;
  }

  .home-rev__viewport:hover .home-rev__track {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .home-rev__track {
      animation: none;
    }
  }

  @keyframes home-rev-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .home-rev__card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 244px;
    padding: 16px;
    border: 1px solid #ece3d4;
    background: #ffffff;
  }

  .home-rev__stars {
    display: inline-flex;
    gap: 2px;
    color: #2a251f;
  }

  .home-rev__star {
    fill: currentColor;
  }

  .home-rev__star.is-empty {
    fill: rgba(42, 37, 31, 0.18);
  }

  .home-rev__body {
    margin: 12px 0 0;
    font-family: var(--font-body--family);
    font-size: 14px;
    line-height: 1.6;
    color: #5e5547;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .home-rev__foot {
    margin-block-start: 16px;
    padding-block-start: 12px;
    border-block-start: 1px solid #e6dcca;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .home-rev__name {
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 600;
    color: #2a251f;
  }

  .home-rev__prod {
    font-family: var(--font-body--family);
    font-size: 11.5px;
    color: #6f6250;
  }

  @media screen and (min-width: 640px) {
    .home-rev__card {
      width: 300px;
      padding: 20px;
    }
  }
/* END_SECTION:home-reviews */

/* START_SECTION:home-seasonal-edit (INDEX:40) */
.home-edit {
    background: #efe7d9;
  }

  .home-edit__inner {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    padding-block: clamp(20px, 3vw, 40px);
  }

  .home-edit__header {
    margin-block-end: clamp(18px, 2.5vw, 30px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
  }

  .home-edit__eyebrow {
    font-family: var(--font-body--family);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #8a5060;
  }

  .home-edit__title {
    margin: 8px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1.1;
    font-size: clamp(20px, 2.4vw, 30px);
    color: #2a251f;
  }

  .home-edit__viewall {
    border-block-end: 1px solid #2a251f;
    padding-block-end: 3px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #2a251f;
    text-decoration: none;
  }

  .home-edit__rail {
    display: flex;
    gap: clamp(14px, 2vw, 22px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    margin-inline: -4px;
    padding-inline: 4px;
    padding-block-end: 8px;
  }

  .home-edit__tile {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 88%;
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f2ece1;
    box-shadow: 0 0 0 1px rgba(42, 37, 31, 0.05), 0 2px 12px -6px rgba(42, 37, 31, 0.3);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  }

  .home-edit__tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 0 1px rgba(42, 37, 31, 0.05), 0 26px 44px -22px rgba(42, 37, 31, 0.5);
  }

  .home-edit__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease-out;
  }

  .home-edit__img--empty {
    background: #f2ece1;
  }

  .home-edit__tile:hover .home-edit__img {
    transform: scale(1.07);
  }

  .home-edit__scrim {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(28, 24, 20, 0.55), transparent);
  }

  .home-edit__caption {
    position: absolute;
    inset-inline: 20px;
    bottom: 20px;
    color: #fdf8f1;
  }

  .home-edit__label {
    display: block;
    font-family: var(--font-heading--family);
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.15;
  }

  .home-edit__cta {
    margin-block-start: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body--family);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(253, 248, 241, 0.9);
  }

  .home-edit__cta svg {
    transition: transform 0.3s ease;
  }

  .home-edit__tile:hover .home-edit__cta svg {
    transform: translateX(2px);
  }

  @media screen and (min-width: 640px) {
    .home-edit__rail {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      margin-inline: 0;
      padding-inline: 0;
      padding-block-end: 0;
      overflow: visible;
    }

    .home-edit__tile {
      width: auto;
      aspect-ratio: 3 / 4;
    }
  }
/* END_SECTION:home-seasonal-edit */

/* START_SECTION:home-trust (INDEX:41) */
.home-trust {
    background: #efe7d9;
    border-block-end: 1px solid #e6dcca;
  }

  .home-trust__grid {
    list-style: none;
    margin: 0;
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-block: clamp(18px, 2.5vw, 24px);
    padding-inline: clamp(16px, 4vw, 40px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .home-trust__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #ece3d4;
    background: #faf8f3;
    border-radius: 0;
  }

  .home-trust__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: rgba(192, 74, 99, 0.1);
    color: #c04a63;
  }

  .home-trust__icon svg {
    width: 20px;
    height: 20px;
  }

  .home-trust__text {
    min-width: 0;
  }

  .home-trust__title {
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #2a251f;
  }

  .home-trust__sub {
    font-family: var(--font-body--family);
    font-size: 10px;
    line-height: 1.375;
    color: #6f6250;
  }

  @media screen and (min-width: 640px) {
    .home-trust__item {
      gap: 10px;
      padding: 10px 12px;
    }
    .home-trust__icon {
      width: 32px;
      height: 32px;
    }
    .home-trust__title {
      font-size: 12.5px;
    }
    .home-trust__sub {
      font-size: 10.5px;
    }
  }

  @media screen and (min-width: 1024px) {
    .home-trust__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: 16px;
      row-gap: 20px;
    }
    .home-trust__item {
      gap: 12px;
      padding: 0;
      border: 0;
      background: transparent;
    }
    .home-trust__icon {
      width: 36px;
      height: 36px;
    }
    .home-trust__title {
      font-size: 13.5px;
    }
    .home-trust__sub {
      font-size: 11px;
    }
  }
/* END_SECTION:home-trust */

/* START_SECTION:home-wedding (INDEX:42) */
.home-wed__inner {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    padding-block: clamp(24px, 3vw, 44px);
  }

  .home-wed__box {
    display: grid;
    overflow: hidden;
    background: #efe7d9;
  }

  .home-wed__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f2ece1;
  }

  .home-wed__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease-out;
  }

  .home-wed__media:hover .home-wed__img {
    transform: scale(1.05);
  }

  .home-wed__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(22px, 3.5vw, 48px);
  }

  .home-wed__eyebrow {
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #c04a63;
  }

  .home-wed__title {
    margin: 8px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1.15;
    font-size: clamp(20px, 2.8vw, 32px);
    color: #2a251f;
  }

  .home-wed__text {
    margin: 12px 0 0;
    max-width: 46ch;
    font-family: var(--font-body--family);
    font-size: 14.5px;
    line-height: 1.7;
    color: #6f6250;
  }

  .home-wed__actions {
    margin-block-start: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .home-wed__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.9rem;
    font-family: var(--font-body--family);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .home-wed__btn--primary {
    background: #2a251f;
    color: #faf8f3;
  }

  .home-wed__btn--primary:hover {
    background: #c04a63;
  }

  .home-wed__btn--outline {
    border: 1px solid #2a251f;
    color: #2a251f;
    background: transparent;
  }

  .home-wed__btn--outline:hover {
    background: #2a251f;
    color: #faf8f3;
  }

  @media screen and (min-width: 640px) {
    .home-wed__btn {
      padding: 0.75rem 1.5rem;
      font-size: 12px;
      letter-spacing: 0.1em;
    }
  }

  @media screen and (min-width: 768px) {
    .home-wed__box {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }

    .home-wed__media {
      aspect-ratio: auto;
      min-height: 380px;
    }
  }
/* END_SECTION:home-wedding */

/* START_SECTION:logo-list (INDEX:43) */
/* `full-width` on the band, so the section re-establishes the content column
     itself — see the note in sections/featured-collections.liquid. */
  .logos {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .logos > * {
    grid-column: 2;
  }

  .logos__header .section-header__text {
    width: 100%;
    max-width: none;
  }

  .logos__align-start {
    text-align: start;
  }

  .logos__align-center {
    text-align: center;
  }

  .logos__align-end {
    text-align: end;
  }

  .logos__grid {
    display: grid;
    grid-template-columns: repeat(var(--columns-mobile, 2), minmax(0, 1fr));
    gap: var(--gap);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .logos__grid {
      grid-template-columns: repeat(var(--columns, 5), minmax(0, 1fr));
    }
  }

  .logos__item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logos__link {
    display: flex;
  }

  /* Height fixed, width free: a wordmark and a roundel only sit on the same
     optical line when the constraint is the one they share. */
  .logos__image {
    width: auto;
    height: var(--logo-height, 40px);
    max-width: 100%;
    object-fit: contain;
  }

  .logos__placeholder {
    display: grid;
    place-items: center;
    height: var(--logo-height, 40px);
    padding-inline: 1rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Convention rather than decoration: eight marks in eight brand palettes
     fight each other and whatever photograph sits above them. */
  .logos--muted .logos__image {
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter var(--duration-base, 200ms) ease, opacity var(--duration-base, 200ms) ease;
  }

  @media (hover: hover) {
    .logos--muted .logos__item:hover .logos__image {
      filter: grayscale(0);
      opacity: 1;
    }
  }

  /* ---- swipe row ---- */
  .logos__grid--swipe {
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  /* Bleeds only on a phone; inside the column above it, where the arrows
     straddle the row's edge and that edge has to be the content edge. */
  @media screen and (max-width: 749px) {
    .logos__grid--swipe {
      padding-inline: var(--page-margin);
      scroll-padding-inline-start: var(--page-margin);
      margin-inline: calc(-1 * var(--page-margin));
    }
  }

  .logos__grid--swipe::-webkit-scrollbar {
    display: none;
  }

  .logos__grid--swipe > .logos__item {
    scroll-snap-align: start;
  }

  /* After the base rule, not before it — both set `grid-auto-columns` at the
     same specificity, so the later one wins. */
  .logos__grid--swipe {
    grid-auto-columns: calc((100% - (var(--columns-mobile) - 1) * var(--gap)) / var(--columns-mobile));
  }

  @media screen and (min-width: 750px) {
    .logos__grid--swipe {
      grid-auto-columns: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
    }
  }

  .logos__row-frame {
    position: relative;
    overflow: visible;
  }

  /* Straddling the row's edge — see the note in sections/text-icons.liquid. */
  .logos__arrow {
    --arrow-size: 2.5rem;

    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    display: none;
    place-items: center;
    width: var(--arrow-size);
    height: var(--arrow-size);
    padding: 0;
    border: 1px solid var(--arrow-border);
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    translate: 0 -50%;
    cursor: pointer;
  }

  @media screen and (min-width: 990px) {
    .logos__arrow {
      display: grid;
    }
    /* `hidden` is only a UA stylesheet rule, and the `display: grid` above beats it on specificity alone. theme.js sets the attribute when the row has nothing to page through — four cards in four columns — so without this the arrows stayed on screen and did nothing when clicked. */
    .logos__arrow[hidden] {
      display: none;
    }
  }

  .logos__arrow svg {
    width: 1rem;
    height: 1rem;
  }

  .logos__arrow--prev {
    inset-inline-start: calc(var(--arrow-size) / -2);
    rotate: 180deg;
  }

  .logos__arrow--next {
    inset-inline-end: calc(var(--arrow-size) / -2);
  }

  .logos__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .logos__warn {
    display: block;
    margin-block-start: 0.5rem;
    font-size: var(--font-size-xs);
    color: rgb(var(--color-accent));
  }

  .logos__row-wrap .scroll-dots {
    margin-block-start: 1.25rem;
  }

  /* ---- marquee ---- */
  .logos__viewport {
    display: flex;
    gap: var(--gap);
    overflow: hidden;
    margin-inline: calc(-1 * var(--page-margin));
    padding-inline: var(--page-margin);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }

  .logos__track {
    display: flex;
    flex: none;
    gap: var(--gap);
    padding: 0;
    margin: 0;
    list-style: none;
    animation: logos-run var(--marquee-duration, 40s) linear infinite;
  }

  .logos__track > .logos__item {
    flex: none;
  }

  .logos__viewport:hover .logos__track,
  .logos__viewport:focus-within .logos__track {
    animation-play-state: paused;
  }

  @keyframes logos-run {
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .logos__viewport {
      overflow-x: auto;
    }

    .logos__track {
      animation: none;
    }

    .logos__track[aria-hidden='true'] {
      display: none;
    }
  }

  .logos__empty {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
  }

  .logos__app {
    margin-block-start: 2rem;
  }
/* END_SECTION:logo-list */

/* START_SECTION:lookbook (INDEX:45) */
/* `full-width` on the band, so the section re-establishes the content column
     itself — see the note in sections/featured-collections.liquid. */
  .lookbook {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
    /* `clip`, not `hidden`, and only on one axis. */
    overflow-x: clip;
  }

  .lookbook > * {
    grid-column: 2;
  }

  .lookbook--bleed > * {
    grid-column: 1 / -1;
  }

  /* The picture bleeds; the words do not.

     Full bleed spans the whole band across all three columns, and the heading
     sits inside that same wrapper — so it went edge to edge with the photograph
     and its first letter landed hard against the viewport. Only the image was
     ever meant to reach the edges.

     Measured the same way the header and every other section measures itself,
     rather than padded by the page margin: on a wide screen the content column
     is centred with more than a page margin either side, so padding alone would
     have left the heading out of line with the navigation above it. */
  .lookbook--bleed .lookbook__header {
    width: min(
      calc(var(--page-width) - var(--page-margin) * 2),
      calc(100% - var(--page-margin) * 2)
    );
    margin-inline: auto;
  }

  .lookbook__header .section-header__text {
    width: 100%;
    max-width: none;
  }

  .lookbook__align-start {
    text-align: start;
  }

  .lookbook__align-center {
    text-align: center;
  }

  .lookbook__align-end {
    text-align: end;
  }

  /* Capped and centred rather than stretched. A lookbook photograph is usually one tall shot, and a merchant who wants it to fill the column can say 100% — but the section should not force it, because a portrait image at full column width on a desktop is two metres of model. */
  /* Full width of whatever column it is in. There used to be a percentage setting here, which is a second way of saying what the section's own layout already says — this is a banner, and a banner inset to 60% of its band is just a smaller banner with uneven margins. */
  /* Not clipped, and that is the whole point of this rule. */
  .lookbook__frame {
    position: relative;
    width: 100%;
    margin-inline: auto;
  }

  /* `natural` resolves to `auto`, which lets the photograph keep its own
     proportions instead of being cropped to one the merchant did not choose. */
  .lookbook__image,
  .lookbook__placeholder {
    aspect-ratio: var(--look-ratio, auto);
  }

  .lookbook__image,
  .lookbook__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: var(--look-ratio, 4 / 3);
    object-fit: cover;
    /* Was the frame's job until the frame stopped clipping. */
    border-radius: var(--look-radius, 0);
  }

  .lookbook__placeholder {
    background: rgba(var(--color-foreground), 0.08);
  }

  /* Placed from the centre of the dot, so the percentage a merchant types is
     where the dot sits rather than where its top-left corner does. */
  .lookbook__pin {
    position: absolute;
    inset-inline-start: var(--x, 50%);
    inset-block-start: var(--y, 50%);
    translate: -50% -50%;
  }

  /* 44px of target around a 28px mark: the mark is what is seen, the target is what is pressed, and on a photograph the second has to be bigger than the first. */
  .lookbook__dot {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    list-style: none;
    cursor: pointer;
  }

  .lookbook__dot::-webkit-details-marker {
    display: none;
  }

  .lookbook__dot-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #fff;
    color: #111;
    /* Two shadows: a tight one that separates the disc from a pale photograph, and a soft one that separates it from a dark one. A single shadow only ever works against half the pictures a merchant might upload. */
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.08),
      0 2px 10px rgba(0, 0, 0, 0.35);
    transition:
      scale var(--duration-base, 200ms) ease,
      rotate var(--duration-base, 200ms) ease;
  }

  .lookbook__dot-mark svg {
    width: 0.9375rem;
    height: 0.9375rem;
  }

  /* A dot with no glyph needs to be a dot, not an empty ring. */
  .lookbook--pin-dot .lookbook__dot-mark {
    width: 1.125rem;
    height: 1.125rem;
  }

  /* The halo. Drawn behind the disc and pulsing outward, which is what makes a
     pin findable on a busy photograph without drawing a box around it. */
  .lookbook__dot-mark::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    animation: lookbook-pulse 2.4s ease-out infinite;
  }

  @keyframes lookbook-pulse {
    0% {
      scale: 1;
      opacity: 0.55;
    }

    70%,
    100% {
      scale: 2.1;
      opacity: 0;
    }
  }

  .lookbook__pin[open] .lookbook__dot-mark {
    scale: 1.1;
  }

  /* Only the plus. Turning it 45° makes a close cross out of the same glyph;
     turning a shopping bag 45° makes a shopping bag lying on its side. */
  .lookbook--pin-plus .lookbook__pin[open] .lookbook__dot-mark {
    rotate: 45deg;
  }

  .lookbook__pin[open] .lookbook__dot-mark::before {
    animation: none;
    opacity: 0;
  }

  @media (hover: hover) {
    .lookbook__dot:hover .lookbook__dot-mark {
      scale: 1.15;
    }
  }

  /* A pin that pulses forever is a pin that cannot be ignored, which is the
     opposite of what this setting asks for. */
  @media (prefers-reduced-motion: reduce) {
    .lookbook__dot-mark,
    .lookbook__dot-mark::before {
      animation: none;
      transition: none;
    }
  }

  .lookbook__dot:focus-visible {
    outline: 3px solid rgb(var(--color-accent));
    outline-offset: 2px;
    border-radius: 50%;
  }

  /* The card is placed from the dot and pulled back by the translate, so a pin near the right edge does not open off the photograph. */
  .lookbook__pin:not([open]) .lookbook__card {
    display: block;
  }

  .lookbook__card {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 100%;
    z-index: 2;
    width: min(15rem, 60vw);
    /* The top padding is the bridge between dot and card: without it the pointer crosses a gap where neither is hovered and the card closes under the cursor on its way there. */
    padding: 0.75rem;
    padding-block-start: 1.25rem;
    translate: -50% 0;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity var(--duration-base, 200ms) ease,
      translate var(--duration-base, 200ms) ease,
      visibility var(--duration-base, 200ms);
  }

  .lookbook__card-inner {
    padding: 0.75rem;
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  }

  /* Opened by the disclosure — a click, or a keyboard, or a touch. */
  .lookbook__pin[open] .lookbook__card {
    visibility: visible;
    opacity: 1;
    translate: -50% 0;
  }

  /* Opening upward, for a pin low on the picture. The padding swaps ends with it: that padding is the bridge the pointer crosses between dot and card, and left at the top it would be a gap on the side the pointer now travels, closing the card on its way there. */
  .lookbook__pin--up .lookbook__card {
    inset-block-start: auto;
    inset-block-end: 100%;
    padding-block-start: 0.75rem;
    padding-block-end: 1.25rem;
  }

  /* And by hover, but only where hovering exists. On a touch screen this rule
     never matches, so the disclosure is the only way in and behaves normally. */
  @media (hover: hover) {
    .lookbook__pin:hover .lookbook__card,
    .lookbook__pin:focus-within .lookbook__card {
      visibility: visible;
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .lookbook__card {
      transition: none;
    }
  }

  /* On a phone the card stops following its pin and docks to the bottom of the photograph. A pin at 90% across has nowhere to put a 240px card, and the frame clips it — so the pin stays where the garment is and the card goes somewhere a thumb can reach. */
  /* On a phone the card leaves its pin entirely and becomes a sheet across the
     foot of the screen.

     Two earlier attempts failed and are worth recording. Anchored to the pin,
     the card is measured against a 44px box, so `inset-inline: 0.5rem` came out
     28px wide. Making the pin `position: static` so the card could measure
     against the frame instead put the `<details>` into normal flow, which grew
     the frame and pushed every dot off the photograph — measured: the dot no
     longer inside the image at all.

     `position: fixed` takes the card out of both. Only one pin is ever open —
     the script closes the others — so there is only ever one sheet. */
  @media screen and (max-width: 749px) {
    /* The centring transform has to go, and be replaced by margins that do the same thing. A transformed element becomes the containing block for any `position: fixed` descendant, so with `translate` still on the pin the sheet's insets resolved against the 44px dot instead of the viewport and it came out 44 − 24 = 20px wide. Margins move the pin without creating that containing block. */
    .lookbook__pin {
      translate: none;
      margin-inline-start: -1.375rem;
      margin-block-start: -1.375rem;
    }

    .lookbook__card {
      position: fixed;
      inset-inline: 0.75rem;
      inset-block: auto 0.75rem;
      z-index: 20;
      width: auto;
      padding: 0;
      translate: none;
      /* Slides up from under the edge rather than fading in place, so it reads
         as arriving from somewhere. */
      transform: translateY(0.5rem);
      transition:
        opacity var(--duration-base, 200ms) ease,
        transform var(--duration-base, 200ms) ease,
        visibility var(--duration-base, 200ms);
    }

    .lookbook__pin[open] .lookbook__card {
      translate: none;
      transform: translateY(0);
    }

    /* Hover does not exist here, so the sheet is opened by the disclosure and nothing else. The desktop hover rule is already inside `@media (hover: hover)` and never matches on a touch screen. */

    /* Landscape rather than portrait: a sheet across the foot of the screen has
       width to spare and no height. */
    .lookbook__card-inner {
      display: grid;
      grid-template-columns: 4.5rem minmax(0, 1fr);
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem;
    }

  }

  /* Not nested inside the width query above: a `@media` inside a `@media` is valid CSS, but it did not survive the pipeline — the declarations after it were dropped and the sheet came out 20px wide with its insets ignored. */
  @media screen and (max-width: 749px) and (prefers-reduced-motion: reduce) {
    .lookbook__card {
      transition: none;
      transform: none;
    }
  }

  .lookbook__empty {
    margin: 1rem 0 0;
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_SECTION:lookbook */

/* START_SECTION:main-gift-card (INDEX:46) */
/* The layout, the block rhythm and every .product__* control are styled by
     sections/product.liquid and snippets/product-block.liquid, both of which
     ship their CSS into the theme's global stylesheet. Only what is unique to
     the gift card lives here. */

  .gift-card__media {
    align-self: start;
  }

  /* The card at its own aspect ratio, contained rather than cropped, so a
     landscape card is shown whole. A hairline frame and a soft tint behind it,
     in case the card art has transparency. */
  .gift-card__image {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(var(--color-foreground), 0.1);
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.03);
  }

  @media screen and (min-width: 990px) {
    /* Sits with the buy column rather than running the height of the page. */
    .gift-card__media {
      position: sticky;
      inset-block-start: calc(var(--header-offset, var(--header-height, 4rem)) + 0.75rem);
    }
  }

  .gift-card__how {
    margin-block-start: 1.25rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
  }

  .gift-card__how-title {
    margin: 0 0 0.625rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
  }

  .gift-card__steps {
    display: grid;
    gap: 0.625rem;
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: none;
  }

  .gift-card__steps li {
    display: grid;
    grid-template-columns: 1.375rem 1fr;
    gap: 0.625rem;
    align-items: start;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: rgba(var(--color-foreground), 0.85);
  }

  /* A number, not a filled disc: the emphasis is the weight, not a box. */
  .gift-card__step-n {
    font-family: var(--font-heading--family);
    font-size: var(--font-size-md, 1rem);
    line-height: 1.35;
    color: rgb(var(--color-accent));
  }

  .gift-card__terms {
    display: grid;
    gap: 0.4375rem;
    padding: 0;
    margin: 1.25rem 0 0;
    list-style: none;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.85);
  }

  .gift-card__terms li {
    position: relative;
    padding-inline-start: 1rem;
    line-height: 1.5;
  }

  .gift-card__terms li::before {
    content: '';
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0;
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: rgb(var(--color-accent));
  }

  .gift-card__fine {
    margin-block-start: 1rem;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: rgba(var(--color-foreground), 0.6);
  }
/* END_SECTION:main-gift-card */

/* START_SECTION:map (INDEX:47) */
/* `full-width` on the band, so the section re-establishes the content column
     itself — see the note in sections/featured-collections.liquid. */
  .map {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .map > * {
    grid-column: 2;
  }

  .map--bleed > .map__inner {
    grid-column: 1 / -1;
  }

  .map__inner {
    display: grid;
    gap: calc(var(--gap) * 0.6);
  }

  @media screen and (min-width: 990px) {
    .map__inner {
      grid-template-columns: var(--map-width) minmax(0, 1fr);
      gap: var(--gap);
      align-items: center;
    }

    .map--media-end .map__frame {
      order: 2;
    }

    .map--media-end .map__inner {
      grid-template-columns: minmax(0, 1fr) var(--map-width);
    }
  }

  .map__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--map-ratio, 4 / 3);
    border-radius: var(--map-radius, 0);
    background: rgba(var(--color-foreground), 0.06);
  }

  /* Whatever the provider's snippet contains is sized to the frame, so a pasted embed with its own width and height attributes still fills it instead of sitting in a corner at 600x450. */
  .map__custom,
  .map__custom iframe,
  .map__custom > * ,
  .map__embed,
  .map__image,
  .map__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
  }

  .map__note {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline: 1rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.35);
    background: rgb(var(--color-background));
    font-size: var(--font-size-sm);
  }

  /* ---- overlay ---------------------------------------------------------- * The map is the band and the card sits on it. `position: relative` on the inner rather than the frame, so the card is placed against the whole section width and can sit in the gutter if the merchant wants it there. */
  @media screen and (min-width: 750px) {
    .map--overlay .map__inner {
      position: relative;
      display: block;
    }

    .map--overlay .map__frame {
      width: 100%;
    }

    .map--overlay .map__panel {
      position: absolute;
      inset: clamp(1rem, 3vw, 2.5rem);
      display: grid;
      pointer-events: none;
    }

    /* The card takes pointer events back, so the map stays draggable
       everywhere the card is not. */
    .map--overlay .map__text {
      width: min(var(--card-width, 380px), 100%);
      padding: clamp(1.25rem, 2.5vw, 2rem);
      border-radius: var(--card-radius, 0);
      background: var(--gradient-background);
      color: rgb(var(--color-foreground));
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
      pointer-events: auto;
    }

    .map--overlay.map--card-x-start .map__panel {
      justify-items: start;
    }

    .map--overlay.map--card-x-center .map__panel {
      justify-items: center;
    }

    .map--overlay.map--card-x-end .map__panel {
      justify-items: end;
    }

    .map--overlay.map--card-y-start .map__panel {
      align-items: start;
    }

    .map--overlay.map--card-y-center .map__panel {
      align-items: center;
    }

    .map--overlay.map--card-y-end .map__panel {
      align-items: end;
    }
  }

  .map__text {
    display: grid;
    gap: 0.875rem;
    align-content: center;
  }

  .map__text--align-start {
    justify-items: start;
    text-align: start;
  }

  .map__text--align-center {
    justify-items: center;
    text-align: center;
  }

  .map__text--align-end {
    justify-items: end;
    text-align: end;
  }

  /* `<address>` is italic by default in every browser, which is not what an
     address looks like written down. */
  .map__address {
    font-style: normal;
  }

  .map__hours {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .map__app {
    margin-block-start: 2rem;
  }
/* END_SECTION:map */

/* START_SECTION:marquee-text (INDEX:48) */
.marquee {
    padding-block: var(--padding-top) var(--padding-bottom);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
    overflow: hidden;
  }

  .marquee__viewport {
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__track {
    display: flex;
    flex: none;
    gap: var(--marquee-gap);
    animation: marquee-run var(--marquee-duration, 30s) linear infinite;
  }

  .marquee--reverse .marquee__track {
    animation-direction: reverse;
  }

  .marquee__item {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--marquee-gap);
    font-size: var(--marquee-size);
    line-height: 1.1;
    white-space: nowrap;
  }

  .marquee__sep {
    opacity: 0.45;
  }

  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track {
    animation-play-state: paused;
  }

  @keyframes marquee-run {
    to {
      /* The gap belongs to the flex container, so one track travels its own
         width plus the gap that follows it. */
      transform: translateX(calc(-100% - var(--marquee-gap)));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee__viewport {
      overflow-x: auto;
    }

    .marquee__track {
      animation: none;
    }

    .marquee__track[aria-hidden='true'] {
      display: none;
    }
  }

  .marquee__empty {
    margin: 0;
    padding-inline: var(--page-margin);
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_SECTION:marquee-text */

/* START_SECTION:media-text (INDEX:49) */
/* `full-width` on the band, so the section re-establishes the content column itself — see the note in sections/featured-collections.liquid for what happens when it does not. */
  .media-text {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .media-text > * {
    grid-column: 2;
  }

  .media-text__inner {
    display: grid;
    gap: calc(var(--gap) * 0.6);
  }

  @media screen and (min-width: 990px) {
    .media-text__inner {
      grid-template-columns: var(--media-width) minmax(0, 1fr);
      gap: var(--gap);
      align-items: center;
    }

    /* The media is first in the markup because it is first in the reading order on a phone by default; on desktop the merchant decides which side it sits on, which is an ordering change rather than a markup one. */
    .media-text--media-end .media-text__media {
      order: 2;
    }

    .media-text--media-end .media-text__inner {
      grid-template-columns: minmax(0, 1fr) var(--media-width);
    }

    .media-text--v-start .media-text__inner {
      align-items: start;
    }

    .media-text--v-end .media-text__inner {
      align-items: end;
    }
  }

  /* Stacked, the merchant may want the words to arrive first — a statement above the photograph reads as a caption to the whole section rather than a label under a picture. */
  @media screen and (max-width: 989px) {
    .media-text--mobile-text .media-text__media {
      order: 2;
    }
  }

  .media-text__media {
    position: relative;
    border-radius: var(--media-radius);
    /* Clipped on the wrapper rather than set on the image, so the radius holds whatever the image does — including the scale on hover, which would otherwise square off the corners as it grows. */
    overflow: hidden;
  }

  .media-text__image,
  .media-text__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--media-ratio);
    object-fit: cover;
  }

  .media-text__placeholder {
    background: rgba(var(--color-foreground), 0.06);
  }

  /* Off the edge of the screen, by exactly the page's own gutter.

     Two wrong answers were measured before this one. `calc(50% - 50vw)` reads
     its percentage against the media *column* rather than the content width, so
     a half-width column pulls twice as far as it should — the photograph
     started at x=-337 on a 1440px screen. Substituting `--content-width` was no
     better: that variable is defined with a `100%` inside it, and a percentage
     in a custom property resolves where it is *used*, not where it is declared,
     so it re-resolved against the same column and landed at x=-383. Neither
     showed a scrollbar, because leftward overflow does not scroll — the
     photograph was simply cropped.

     The gutter is the page margin, plus half of whatever the viewport exceeds
     the maximum page width by. No percentages, so nothing re-resolves. Logical,
     so RTL bleeds off the other side. Above 990px only: stacked, the image is
     already full width. */
  @media screen and (min-width: 990px) {
    .media-text--bleed {
      --bleed: calc(var(--page-margin) + max(0px, (100vw - var(--page-width)) / 2));
    }
  }

  @media screen and (min-width: 990px) {
    .media-text--bleed .media-text__media {
      margin-inline-start: calc(-1 * var(--bleed));
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    .media-text--bleed.media-text--media-end .media-text__media {
      margin-inline-start: 0;
      margin-inline-end: calc(-1 * var(--bleed));
      border-radius: var(--media-radius);
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

    /* The words step over the photograph's edge. Small on purpose: an overlap
       large enough to notice is large enough to cover the garment. */
    .media-text--overlap .media-text__text {
      position: relative;
      z-index: 1;
      margin-inline-start: calc(var(--gap) * -0.5);
      padding: 2rem;
      background: var(--gradient-background);
    }

    .media-text--overlap.media-text--media-end .media-text__text {
      margin-inline-start: 0;
      margin-inline-end: calc(var(--gap) * -0.5);
    }
  }

  .media-text__text {
    display: grid;
    gap: 1rem;
    align-content: center;
  }

  .media-text__text--align-start {
    justify-items: start;
    text-align: start;
  }

  .media-text__text--align-center {
    justify-items: center;
    text-align: center;
  }

  .media-text__text--align-end {
    justify-items: end;
    text-align: end;
  }
/* END_SECTION:media-text */

/* START_SECTION:multi-column (INDEX:50) */
/* `full-width` on the band, so the section re-establishes the content column
     itself — see the note in sections/featured-collections.liquid. */
  .mcol {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .mcol > * {
    grid-column: 2;
  }

  .mcol__header .section-header__text {
    width: 100%;
    max-width: none;
  }

  .mcol__align-start {
    text-align: start;
  }

  .mcol__align-center {
    text-align: center;
  }

  .mcol__align-end {
    text-align: end;
  }

  .mcol__grid {
    display: grid;
    grid-template-columns: repeat(var(--columns-mobile, 1), minmax(0, 1fr));
    gap: var(--gap);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .mcol__grid {
      grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
    }
  }

  .mcol__card {
    display: grid;
    gap: 0.875rem;
    height: 100%;
    align-content: start;
    color: inherit;
    text-decoration: none;
  }

  .mcol--card-outlined .mcol__card,
  .mcol--card-filled .mcol__card {
    padding: 1rem;
    border-radius: var(--card-radius, 0);
  }

  .mcol--card-outlined .mcol__card {
    border: 1px solid rgba(var(--color-foreground), 0.14);
  }

  .mcol--card-filled .mcol__card {
    background: rgba(var(--color-foreground), 0.05);
  }

  .mcol__card--text-start {
    justify-items: start;
    text-align: start;
  }

  .mcol__card--text-center {
    justify-items: center;
    text-align: center;
  }

  .mcol__card--text-end {
    justify-items: end;
    text-align: end;
  }

  .mcol__media {
    width: 100%;
    overflow: hidden;
    border-radius: var(--card-radius, 0);
  }

  .mcol__image,
  .mcol__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: var(--media-ratio, 1 / 1);
    object-fit: cover;
    transition: scale var(--duration-slow, 400ms) var(--ease-out, ease);
  }

  .mcol__placeholder {
    background: rgba(var(--color-foreground), 0.06);
  }

  @media (hover: hover) {
    a.mcol__card:hover .mcol__image {
      scale: 1.03;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mcol__image {
      transition: none;
    }

    a.mcol__card:hover .mcol__image {
      scale: 1;
    }
  }

  .mcol__body {
    display: grid;
    gap: 0.35rem;
    justify-items: inherit;
  }

  .mcol__heading {
    margin: 0;
    font-size: var(--font-size-base);
  }

  .mcol__text {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .mcol__text > :first-child {
    margin-block-start: 0;
  }

  .mcol__text > :last-child {
    margin-block-end: 0;
  }

  /* A button cue needs room from the words above it; a text cue reads as part
     of them and does not. */
  .mcol__cue {
    font-size: var(--font-size-sm);
  }

  .mcol__cue.button {
    margin-block-start: 0.5rem;
  }

  /* Full width of the card, whatever the card's text alignment is doing to its other children — the body sets `justify-items` from that setting, and a stretched button has to opt out of it rather than be centred at 100%. */
  .mcol__cue--full {
    justify-self: stretch;
    width: 100%;
    text-align: center;
  }

  a.mcol__card:focus-visible {
    outline: 2px solid rgb(var(--color-foreground));
    outline-offset: 3px;
  }

  /* ---- swipe row ---- */
  /* Bleeds to the screen edge on a phone, where a card cut off at the edge reads as "there is more". Inside the column above 750px, where bleeding detached the row from its own heading — and where the arrows straddle the row's edge, which only means anything if that edge is the content edge. */
  .mcol__grid--swipe {
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  @media screen and (max-width: 749px) {
    .mcol__grid--swipe {
      padding-inline: var(--page-margin);
      /* Snap respects padding only when told to, or the row lands scrolled by
         exactly the inset. */
      scroll-padding-inline-start: var(--page-margin);
      margin-inline: calc(-1 * var(--page-margin));
    }
  }

  .mcol__grid--swipe::-webkit-scrollbar {
    display: none;
  }

  .mcol__grid--swipe > .mcol__item {
    scroll-snap-align: start;
  }

  .mcol__grid--swipe {
    grid-auto-columns: min(18rem, 74vw);
  }

  @media screen and (min-width: 750px) {
    .mcol__grid--swipe {
      grid-auto-columns: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
    }
  }

  .mcol__row-frame {
    position: relative;
    overflow: visible;
  }

  /* Straddling the row's edge — half over the first card, half outside it. */
  .mcol__arrow {
    --arrow-size: 2.5rem;

    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    display: none;
    place-items: center;
    width: var(--arrow-size);
    height: var(--arrow-size);
    padding: 0;
    border: 1px solid var(--arrow-border);
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    translate: 0 -50%;
    cursor: pointer;
  }

  @media screen and (min-width: 990px) {
    .mcol__arrow {
      display: grid;
    }
    /* `hidden` is only a UA stylesheet rule, and the `display: grid` above beats it on specificity alone. theme.js sets the attribute when the row has nothing to page through — four cards in four columns — so without this the arrows stayed on screen and did nothing when clicked. */
    .mcol__arrow[hidden] {
      display: none;
    }
  }

  .mcol__arrow svg {
    width: 1rem;
    height: 1rem;
  }

  .mcol__arrow--prev {
    inset-inline-start: calc(var(--arrow-size) / -2);
    rotate: 180deg;
  }

  .mcol__arrow--next {
    inset-inline-end: calc(var(--arrow-size) / -2);
  }

  .mcol__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .mcol__row-wrap .scroll-dots {
    margin-block-start: 1.25rem;
  }

  .mcol__empty {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
  }

  .mcol__app {
    margin-block-start: 2rem;
  }
/* END_SECTION:multi-column */

/* START_SECTION:newsletter-popup (INDEX:51) */
.promo {
    width: min(var(--promo-width, 480px), calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    /* Centred. The theme's base stylesheet zeroes dialog margins so the drawers
       can pin themselves to an edge, which leaves a plain modal in the top left
       corner — measured at x=0, y=0 in a 1280px window. */
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--promo-radius, 0px);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
    overflow: auto;
  }

  .promo::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  /* Animated from the closed state, so opening needs no class toggled by script. Skipped for anyone who has asked for less motion — a panel that appears without sliding is still a panel. */
  @media (prefers-reduced-motion: no-preference) {
    .promo,
    .promo::backdrop {
      transition: opacity 0.25s ease, translate 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
    }

    .promo {
      opacity: 1;
      translate: 0 0;
    }

    @starting-style {
      .promo {
        opacity: 0;
        translate: 0 1rem;
      }

      .promo::backdrop {
        opacity: 0;
      }
    }
  }

  .promo__close {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    z-index: 1;
    color: inherit;
  }

  .promo__body {
    container-type: inline-size;
    display: grid;
    gap: 0.875rem;
    padding: 2.25rem 1.75rem 1.75rem;
    align-content: start;
  }

  .promo__heading {
    margin: 0;
    font-size: var(--font-size-h3);
  }

  .promo__text,
  .promo__consent {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  .promo__consent {
    font-size: var(--font-size-xs);
  }

  .promo__form {
    display: contents;
  }

  .promo__field {
    display: grid;
    gap: 0.5rem;
  }

  /* The field and the button share a line when the panel has room for both.

     Which is the same question as "is there an image": with one, the words take
     half the panel and the field is left with about 288px — a field and a
     button side by side in that is a button with a text box next to it. With no
     image the body is the whole 664px and stacking them wastes a line.

     Measured rather than branched on the setting, because the panel width is a
     setting too. It queries the body, so it answers for the column the field is
     actually in: 664px with no image goes inline, 288px beside an image stays
     stacked, and a 302px phone stays stacked whether there is an image or not. */
  @container (min-width: 24rem) {
    .promo__field {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .promo__submit {
      width: auto;
    }
  }

  .promo__input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: inherit;
  }

  /* iOS zooms a field under 16px on focus. */
  @media screen and (max-width: 749px) {
    .promo__input {
      font-size: 16px;
    }
  }

  .promo__error {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-accent));
  }

  /* The code is selectable text, not an image of a code — a shopper on a phone
     copies it with a long press when the button is not what they reach for. */
  .promo__code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.35);
  }

  .promo__code-value {
    font-family: inherit;
    font-size: var(--font-size-h5);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    user-select: all;
  }

  .promo__note {
    margin: 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* A text button, so declining does not compete with the offer. Still a real
     button with a real target size. */
  /* `justify-self: inherit` was wrong here: it inherits the parent's own `justify-self`, not its `justify-items`, so it resolved to `auto` and the button stretched the full 664px of the panel — which centres its label whatever the alignment setting says. Stated per alignment instead. */
  .promo__decline {
    justify-self: start;
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(var(--color-foreground), 0.7);
    font-family: inherit;
    font-size: var(--font-size-xs);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }

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

  /* The image sits beside the words only where there is room for both. Below that it is dropped rather than stacked: a panel with a photo above a field is taller than a phone, and the field is the part that matters. */
  @media screen and (max-width: 599px) {
    .promo__media {
      display: none;
    }
  }

  @media screen and (min-width: 600px) {
    .promo--has-image {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .promo--start .promo__media {
      order: -1;
    }

    .promo--has-image .promo__body {
      padding: 2.25rem;
    }
  }

  /* Text alignment moves the boxes too, not only the type — a shrink-to-fit
     button ignores `text-align` on its parent. */
  .promo__body.text-center {
    justify-items: center;
  }

  .promo__body.text-end {
    justify-items: end;
  }

  .promo__body.text-center .promo__field,
  .promo__body.text-end .promo__field {
    width: 100%;
  }

  .promo__body.text-center .promo__decline,
  .promo__body.text-center .promo__code {
    justify-self: center;
    justify-content: center;
  }

  .promo__body.text-end .promo__decline,
  .promo__body.text-end .promo__code {
    justify-self: end;
    justify-content: end;
  }
/* END_SECTION:newsletter-popup */

/* START_SECTION:newsletter (INDEX:52) */
/* `full-width` on the band, so the section re-establishes the content column
     itself — see the note in sections/featured-collections.liquid. */
  .newsletter {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .newsletter > * {
    grid-column: 2;
  }

  .newsletter__inner {
    display: grid;
    gap: calc(var(--gap) * 0.6);
  }

  .newsletter__body {
    display: grid;
    gap: 1.25rem;
    align-content: center;
  }

  .newsletter__body--align-start {
    justify-items: start;
    text-align: start;
  }

  /* Centred moves the box as well as the words — the measure caps this column, so aligning text inside a capped box that is still hard against the start edge does nothing visible. */
  .newsletter__body--align-center {
    justify-items: center;
    text-align: center;
  }

  .newsletter__body--align-end {
    justify-items: end;
    text-align: end;
  }

  /* `min(…, 100%)` because a measure in `ch` is a cap on line length, not a
     width: 44ch computes to 394px, which is wider than a 362px column on a
     390px phone, and the block then pushed the page sideways. Measured before
     the fix: document scrollWidth 417 against a 390px viewport. */
  .newsletter__text {
    display: grid;
    gap: 0.75rem;
    max-width: min(var(--measure), 100%);
  }

  .newsletter__body--align-center .newsletter__text {
    margin-inline: auto;
  }

  /* ---- inline ---- */
  .newsletter--inline .newsletter__inner {
    max-width: 46rem;
    margin-inline: auto;
  }

  /* Words on one side of the row, the field on the other. */
  @media screen and (min-width: 900px) {
    /* `width: 100%` as well as the cap. Raising `max-width` alone changed nothing: the inner is shrink-to-fit, so it was sized by what is in it — the text column's 44ch measure plus the form's, 698px in total — and never reached the 1088px it was allowed. The cap sets the ceiling; this makes it actually take the row. */
    .newsletter--text-beside .newsletter__inner {
      width: 100%;
      max-width: 68rem;
    }

    .newsletter--text-beside .newsletter__body {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      align-items: center;
      column-gap: clamp(1.5rem, 4vw, 3rem);
    }

    .newsletter--text-beside .newsletter__form {
      justify-self: end;
      max-width: min(30rem, 100%);
    }

    /* The alignment setting still governs the words. It must not also drag the form back to the middle of its own half, which is what the centred rule does when the two are stacked. */
    .newsletter--text-beside .newsletter__body--align-center .newsletter__form,
    .newsletter--text-beside .newsletter__body--align-end .newsletter__form {
      margin-inline: 0;
    }
  }

  /* ---- split ---- */
  /* No image chosen: the second column would be an empty half of the row, so
     the words take the whole of it instead. */
  /* No image: overlay and split both have nothing to lay out against, so both
     fall back to the single centred column the inline style uses. */
  /* Not when the words sit beside the field. That layout wants the full 68rem to divide; this rule has the same specificity and comes later in the file, so it was winning and capping the row at 46rem — which left the form column 289px, too narrow for the field and the button to share a line. The reason the two rules met at all is that "no image" now covers overlay as well as split, which is what made this reachable. */
  .newsletter--no-media:not(.newsletter--text-beside) .newsletter__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: 46rem;
    margin-inline: auto;
  }

  /* Below the side-by-side breakpoint, a beside section is a stacked section
     and wants the stacked treatment.

     The `:not()` above takes the centring rule away from `--text-beside` at
     every width, but the rule that replaces it lives inside a 900px media
     query — so between the two nothing set a width at all and the inner fell
     back to shrink-to-fit. Measured at 749px: a 361px column of content
     stranded in the middle of a 749px section with 194px of dead margin on
     each side. */
  @media screen and (max-width: 899px) {
    .newsletter--no-media.newsletter--text-beside .newsletter__inner {
      grid-template-columns: minmax(0, 1fr);
      width: 100%;
      max-width: 46rem;
      margin-inline: auto;
    }
  }

  @media screen and (min-width: 990px) {
    .newsletter--split:not(.newsletter--no-media) .newsletter__inner {
      grid-template-columns: var(--media-width) minmax(0, 1fr);
      gap: var(--gap);
      align-items: center;
    }

    .newsletter--split.newsletter--media-end .newsletter__media {
      order: 2;
    }

    .newsletter--split.newsletter--media-end .newsletter__inner {
      grid-template-columns: minmax(0, 1fr) var(--media-width);
    }
  }

  .newsletter__media {
    overflow: hidden;
    border-radius: var(--card-radius, 0);
  }

  .newsletter__image {
    display: block;
    width: 100%;
    aspect-ratio: var(--media-ratio, 4 / 3);
    object-fit: cover;
  }

  /* ---- overlay ---- */
  .newsletter--overlay .newsletter__inner {
    position: relative;
    isolation: isolate;
    min-height: 22rem;
    padding: clamp(2rem, 6vw, 5rem);
    overflow: hidden;
    border-radius: var(--card-radius, 0);
  }

  .newsletter__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* A wash rather than a filter on the image: the words have to stay legible over a photograph that could be any brightness, and a scrim is the only part of that a merchant can tune. */
  .newsletter__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, var(--overlay, 0.35));
  }

  /* The scheme is on the content, not the band — the band is the photograph. */
  .newsletter--overlay .newsletter__body {
    color: rgb(var(--color-foreground));
  }

  .newsletter--overlay .newsletter__consent {
    color: rgba(var(--color-foreground), 0.75);
  }

  .newsletter--overlay .newsletter__input {
    border-color: rgba(var(--color-foreground), 0.35);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
  }

  .newsletter--overlay .newsletter__input::placeholder {
    color: rgba(var(--color-foreground), 0.7);
  }

  .newsletter--overlay .newsletter__notice {
    background: rgba(var(--color-foreground), 0.12);
  }

  /* ---- the field ---- */
  .newsletter__form {
    container-type: inline-size;
    display: grid;
    gap: 0.625rem;
    width: 100%;
    max-width: min(var(--measure), 100%);
  }

  .newsletter__body--align-center .newsletter__form {
    margin-inline: auto;
  }

  /* The field and the button share a line wherever the form has room for both. */
  .newsletter__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  /* 20rem, measured against the form itself. A 332px form on a 360px phone
     clears it and leaves a 178px field beside the button; below that the field
     would be narrower than the address typed into it, so the pair stacks. */
  @container (min-width: 20rem) {
    .newsletter__field:not(.newsletter__field--stack) {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  .newsletter__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: inherit;
  }

  /* iOS zooms the page when a field under 16px takes focus — see the note in
     assets/critical.css. */
  @media screen and (max-width: 749px) {
    .newsletter__input {
      font-size: 16px;
    }
  }

  .newsletter__submit {
    white-space: nowrap;
  }

  .newsletter__consent {
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .newsletter__notice {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--style-border-radius-inputs);
    background: rgba(var(--color-foreground), 0.06);
    font-size: var(--font-size-sm);
  }

  .newsletter__notice--error {
    background: rgba(var(--color-sale, var(--color-accent)), 0.08);
  }

  .newsletter__app {
    margin-block-start: 2rem;
  }
/* END_SECTION:newsletter */

/* START_SECTION:page-about (INDEX:53) */
.about {
    background: #faf8f3;
    color: #2a251f;
    padding-block: var(--padding-top, 24px) var(--padding-bottom, 80px);
  }

  .about__inner,
  .about__values,
  .about__trust,
  .about__business,
  .about__cta {
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    box-sizing: border-box;
  }

  .about__inner { max-width: 1032px; }

  /* Breadcrumb */
  .about__crumbs {
    margin-block-end: 24px;
    font-family: var(--font-body--family);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: #6f6250;
  }
  .about__crumbs a { color: #6f6250; text-decoration: none; }
  .about__crumbs a:hover { color: #2a251f; }
  .about__crumbs [aria-current] { color: #2a251f; }

  /* Header */
  .about__head { text-align: center; }
  .about__eyebrow {
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #c04a63;
  }
  .about__title {
    margin: 10px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(25px, 3.2vw, 40px);
    line-height: 1.05;
    color: #2a251f;
  }
  .about__intro {
    max-width: 600px;
    margin: 16px auto 0;
    font-family: var(--font-body--family);
    font-size: 16px;
    line-height: 1.75;
    color: #7c7264;
  }

  /* Body (Shopify page content) */
  .about__body {
    margin-block-start: clamp(32px, 5vw, 52px);
    font-family: var(--font-body--family);
    font-size: 15.5px;
    line-height: 1.75;
    color: #4a4235;
  }
  .about__body :where(h2) {
    margin: clamp(28px, 4vw, 40px) 0 0.6rem;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(21px, 2.6vw, 28px);
    line-height: 1.15;
    color: #2a251f;
  }
  .about__body :where(h3) {
    margin: 1.4rem 0 0.4rem;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: 18px;
    color: #2a251f;
  }
  .about__body :where(p) { margin: 0 0 1rem; }
  .about__body :where(ul, ol) { margin: 0 0 1rem; padding-inline-start: 1.2rem; }
  .about__body :where(li) { margin-block-end: 0.5rem; }
  .about__body :where(a) { color: #c04a63; text-underline-offset: 3px; }

  /* Shared H2 */
  .about__h2 {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    color: #2a251f;
  }
  .about__h2--center { text-align: center; }

  /* Values */
  .about__values {
    max-width: 1032px;
    margin-block-start: clamp(48px, 7vw, 80px);
  }
  .about__values .about__h2 { font-size: clamp(24px, 3vw, 34px); }
  .about__value-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(14px, 2vw, 22px);
    max-width: 1032px;
    margin: clamp(23px, 3vw, 36px) auto 0;
  }
  @media (min-width: 640px) {
    .about__value-grid { grid-template-columns: 1fr 1fr; }
  }
  .about__value {
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid #ece3d4;
    background: #fff;
  }
  .about__value-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-block-end: 16px;
    border-radius: 50%;
    background: rgba(192, 74, 99, 0.1);
    color: #c04a63;
  }
  .about__value-title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: 19px;
    color: #2a251f;
  }
  .about__value-body {
    margin: 8px 0 0;
    font-family: var(--font-body--family);
    font-size: 14.5px;
    line-height: 1.7;
    color: #5e5547;
  }

  /* Trust strip */
  .about__trust {
    max-width: 1032px;
    margin-block-start: clamp(40px, 6vw, 64px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2.5vw, 26px);
    border: 1px solid #ece3d4;
    background: #fff;
    padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 36px);
    box-sizing: border-box;
  }
  @media (min-width: 900px) {
    .about__trust { grid-template-columns: repeat(4, 1fr); }
  }
  .about__trust-item { display: flex; align-items: center; gap: 12px; }
  .about__trust-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(192, 74, 99, 0.1);
    color: #c04a63;
  }
  .about__trust-title {
    display: block;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    font-weight: 600;
    color: #2a251f;
  }
  .about__trust-sub {
    display: block;
    font-family: var(--font-body--family);
    font-size: 12px;
    color: #6f6250;
  }

  /* Business identity */
  .about__business {
    max-width: 1032px;
    margin-block-start: clamp(40px, 6vw, 64px);
    text-align: center;
  }
  .about__business .about__h2 { font-size: clamp(20px, 2.4vw, 26px); }
  .about__business-body {
    max-width: 580px;
    margin: 12px auto 0;
    font-family: var(--font-body--family);
    font-size: 14.5px;
    line-height: 1.75;
    color: #5e5547;
  }
  .about__business-body a { color: #c04a63; text-underline-offset: 3px; }
  .about__address {
    margin: 20px auto 0;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-style: normal;
    line-height: 1.9;
    color: #6f6250;
  }
  .about__address a { color: #6f6250; text-decoration: none; }
  .about__address a:hover { color: #2a251f; }

  /* CTA */
  .about__cta {
    max-width: 1032px;
    margin-block-start: clamp(40px, 6vw, 64px);
  }
  .about__cta .about__h2 { font-size: clamp(24px, 3vw, 34px); }
  .about__cta {
    background: #efe7d9;
    padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px);
    text-align: center;
  }
  .about__cta-body {
    max-width: 480px;
    margin: 12px auto 0;
    font-family: var(--font-body--family);
    font-size: 15px;
    line-height: 1.7;
    color: #5e5547;
  }
  .about__cta-actions {
    margin-block-start: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  @media (min-width: 640px) {
    .about__cta-actions { flex-direction: row; }
  }
  .about__btn {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--font-body--family);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .about__btn--solid { background: #2a251f; color: #faf8f3; }
  .about__btn--solid:hover { background: #c04a63; }
  .about__btn--outline { border: 1px solid #2a251f; color: #2a251f; }
  .about__btn--outline:hover { background: #2a251f; color: #faf8f3; }
  @media (min-width: 640px) {
    .about__btn { width: auto; }
  }
/* END_SECTION:page-about */

/* START_SECTION:page-care-guide (INDEX:54) */
.cg { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 24px) var(--padding-bottom, 80px); }
  .cg__head-wrap, .cg__section, .cg__cta { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .cg__head-wrap { max-width: 1032px; }
  .cg__section { max-width: 1032px; }

  .cg__crumbs { margin-block-end: 24px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .cg__crumbs a { color: #6f6250; text-decoration: none; }
  .cg__crumbs a:hover { color: #2a251f; }
  .cg__crumbs [aria-current] { color: #2a251f; }

  .cg__head { text-align: center; }
  .cg__eyebrow { font-family: var(--font-body--family); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: #c04a63; }
  .cg__title { margin: 10px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(25px, 3.2vw, 40px); line-height: 1.05; color: #2a251f; }
  .cg__intro { max-width: 620px; margin: 16px auto 0; font-family: var(--font-body--family); font-size: 16px; line-height: 1.75; color: #7c7264; }

  .cg__section { margin-block-start: clamp(48px, 7vw, 80px); }
  .cg__tips { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 2vw, 20px); margin-block-start: clamp(36px, 5vw, 60px); max-width: 1032px; }
  @media (min-width: 560px) { .cg__tips { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 960px) { .cg__tips { grid-template-columns: repeat(4, 1fr); } }
  .cg__tip { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(20px, 2.6vw, 26px); border: 1px solid #ece3d4; background: #fff; }
  .cg__tip-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-block-end: 14px; border-radius: 50%; background: rgba(192, 74, 99, 0.1); color: #c04a63; }
  .cg__tip-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 17px; line-height: 1.2; color: #2a251f; }
  .cg__tip-body { margin: 8px 0 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.6; color: #5e5547; }

  .cg__section-head { text-align: center; }
  .cg__h2 { margin: 8px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(24px, 3vw, 34px); color: #2a251f; }
  .cg__h2--center { text-align: center; }

  .cg__fabric-grid { margin-block-start: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
  @media (min-width: 640px) { .cg__fabric-grid { grid-template-columns: 1fr 1fr; } }
  .cg__fabric { display: flex; flex-direction: column; padding: clamp(22px, 3vw, 30px); border: 1px solid #ece3d4; background: #fff; }
  .cg__fabric-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 19px; color: #2a251f; }
  .cg__dos { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .cg__do { display: flex; gap: 10px; font-family: var(--font-body--family); font-size: 14px; line-height: 1.65; color: #5e5547; }
  .cg__do-ico { margin-top: 3px; flex: 0 0 auto; color: #c04a63; }
  .cg__fabric-link { margin-block-start: 16px; align-self: flex-start; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; color: #c04a63; text-decoration: underline; text-decoration-color: rgba(192, 74, 99, 0.3); text-underline-offset: 2px; }
  .cg__fabric-link:hover { text-decoration-color: #c04a63; }
  .cg__aside { max-width: 680px; margin: 24px auto 0; text-align: center; font-family: var(--font-body--family); font-size: 13px; line-height: 1.7; color: #6f6250; }
  .cg__aside a { color: #c04a63; text-underline-offset: 2px; }

  .cg__faq { max-width: 1032px; }
  .cg__faq-list { margin-block-start: 28px; border-block-start: 1px solid #e6dcca; }
  .cg__faq-item { border-block-end: 1px solid #e6dcca; }
  .cg__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 16px; color: #2a251f; }
  .cg__faq-q::-webkit-details-marker { display: none; }
  .cg__faq-plus { font-size: 20px; line-height: 1; color: #9c6470; transition: transform 0.2s ease; }
  .cg__faq-item[open] .cg__faq-plus { transform: rotate(45deg); }
  .cg__faq-a { margin: -2px 0 0; padding-block-end: 18px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  .cg__cta { max-width: 1032px; margin-block-start: clamp(44px, 6vw, 68px); background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .cg__cta-body { max-width: 480px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .cg__cta-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .cg__cta-actions { flex-direction: row; } }
  .cg__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
  .cg__btn--solid { background: #2a251f; color: #faf8f3; }
  .cg__btn--solid:hover { background: #c04a63; }
  .cg__btn--outline { border: 1px solid #2a251f; color: #2a251f; }
  .cg__btn--outline:hover { background: #2a251f; color: #faf8f3; }
/* END_SECTION:page-care-guide */

/* START_SECTION:page-collab (INDEX:55) */
.clb { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 24px) var(--padding-bottom, 88px); }
  /* Wider than the other content pages, to match the Hydrogen collab layout
     (its hero image needs the room or it over-crops). */
  .clb__inner { width: 100%; max-width: 1264px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }

  .clb__crumbs { font-family: var(--font-body--family); font-size: 12.5px; color: rgba(42,37,31,0.55); }
  .clb__crumbs a { color: inherit; text-decoration: none; }
  .clb__crumbs a:hover { color: #2a251f; }
  .clb__crumbs span[aria-hidden] { margin-inline: 8px; }
  .clb__crumbs [aria-current] { color: #2a251f; }

  /* Hero */
  .clb__hero { margin-block-start: 24px; display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
  @media (min-width: 990px) { .clb__hero { grid-template-columns: 1fr 1fr; } .clb__hero-media { order: 2; } }
  .clb__hero-media { overflow: hidden; border: 1px solid #ece3d4; background: rgba(42,37,31,0.04); aspect-ratio: 5 / 4; }
  @media (min-width: 990px) { .clb__hero-media { aspect-ratio: auto; min-height: 460px; } }
  .clb__hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
  .clb__hero-copy { display: flex; flex-direction: column; justify-content: center; max-width: 560px; }
  .clb__eyebrow { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: #c04a63; }
  .clb__title { margin: 12px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(32px, 5.4vw, 56px); line-height: 1.03; }
  .clb__lead { margin: 20px 0 0; font-family: var(--font-body--family); font-size: 16px; line-height: 1.7; color: #5e5547; }
  .clb__hero-cta { margin-block-start: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

  .clb__btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 32px; border: 0; background: #c04a63; color: #fff; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; transition: background-color 0.2s ease; }
  .clb__btn:hover { background: #d17a8d; }
  .clb__link { font-family: var(--font-body--family); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #2a251f; text-decoration: none; text-underline-offset: 4px; }
  .clb__link:hover { text-decoration: underline; }

  .clb__section { margin-block-start: clamp(56px, 9vw, 100px); scroll-margin-top: 96px; }
  .clb__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(24px, 3.2vw, 34px); }

  /* Benefits */
  .clb__benefits { margin-block-start: 32px; display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 600px) { .clb__benefits { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 990px) { .clb__benefits { grid-template-columns: repeat(4, 1fr); } }
  .clb__benefit { border: 1px solid #ece3d4; background: #fff; padding: 28px; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
  .clb__benefit:hover { transform: translateY(-4px); border-color: rgba(192,74,99,0.3); box-shadow: 0 24px 44px -28px rgba(42,37,31,0.5); }
  .clb__benefit-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(192,74,99,0.1); color: #c04a63; transition: background-color 0.3s ease, color 0.3s ease; }
  .clb__benefit:hover .clb__benefit-ico { background: #c04a63; color: #faf8f3; }
  .clb__benefit-ico svg { width: 22px; height: 22px; }
  .clb__benefit-title { margin: 20px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 19px; }
  .clb__benefit-body { margin: 8px 0 0; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.65; color: #5e5547; }
  .clb__note { margin: 16px 0 0; font-family: var(--font-body--family); font-size: 12.5px; color: rgba(42,37,31,0.55); }

  /* Steps */
  .clb__steps { margin-block-start: 36px; display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 600px) { .clb__steps { grid-template-columns: repeat(3, 1fr); } }
  .clb__step { position: relative; overflow: hidden; border: 1px solid #ece3d4; background: #fff; padding: 28px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .clb__step:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(42,37,31,0.5); }
  .clb__step-bg { position: absolute; inset-inline-end: -4px; inset-block-start: -16px; font-family: var(--font-heading--family); font-size: 92px; line-height: 1; color: rgba(192,74,99,0.08); pointer-events: none; user-select: none; }
  .clb__step-n { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #c04a63; color: #faf8f3; font-family: var(--font-heading--family); font-size: 17px; }
  .clb__step-title { position: relative; margin: 20px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 20px; }
  .clb__step-body { position: relative; margin: 8px 0 0; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.65; color: #5e5547; }

  /* Apply CTA */
  .clb__cta { margin-block-start: clamp(56px, 9vw, 100px); border: 1px solid rgba(192,74,99,0.25); background: rgba(192,74,99,0.06); padding: clamp(32px, 6vw, 64px); text-align: center; }
  .clb__cta-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.6vw, 40px); }
  .clb__cta-body { margin: 12px auto 0; max-width: 520px; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #5e5547; }
  .clb__cta .clb__btn { margin-block-start: 32px; }

  /* FAQ */
  .clb__faq { margin: clamp(56px, 9vw, 100px) auto 0; max-width: 720px; }
  .clb__faq-title { margin: 0; text-align: center; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(24px, 3.2vw, 34px); }
  .clb__faq-list { margin-block-start: 32px; border-block-start: 1px solid rgba(42,37,31,0.14); }
  .clb__faq-item { border-block-end: 1px solid rgba(42,37,31,0.14); }
  .clb__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 16px; }
  .clb__faq-q::-webkit-details-marker { display: none; }
  .clb__faq-plus { font-size: 18px; line-height: 1; color: rgba(42,37,31,0.5); transition: transform 0.2s ease; }
  .clb__faq-item[open] .clb__faq-plus { transform: rotate(45deg); }
  .clb__faq-a { margin: -4px 0 0; padding-block-end: 18px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }
/* END_SECTION:page-collab */

/* START_SECTION:page-contact (INDEX:56) */
.ctc {
    background: #faf8f3;
    color: #2a251f;
    padding-block: var(--padding-top, 24px) var(--padding-bottom, 80px);
  }
  .ctc__inner {
    width: 100%;
    max-width: 1032px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    box-sizing: border-box;
  }

  .ctc__crumbs {
    margin-block-end: 24px;
    font-family: var(--font-body--family);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: #6f6250;
  }
  .ctc__crumbs a { color: #6f6250; text-decoration: none; }
  .ctc__crumbs a:hover { color: #2a251f; }
  .ctc__crumbs [aria-current] { color: #2a251f; }

  .ctc__head { max-width: 620px; }
  .ctc__eyebrow {
    font-family: var(--font-body--family);
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #c04a63;
  }
  .ctc__title {
    margin: 10px 0 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(25px, 3.2vw, 40px);
    line-height: 1.06;
    color: #2a251f;
  }
  .ctc__intro {
    margin: 12px 0 0;
    font-family: var(--font-body--family);
    font-size: 15.5px;
    line-height: 1.7;
    color: #7c7264;
  }

  .ctc__grid {
    margin-block-start: clamp(28px, 4vw, 48px);
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: clamp(20px, 3vw, 40px);
  }
  @media (min-width: 990px) {
    .ctc__grid { grid-template-columns: 1.4fr 1fr; }
  }

  .ctc__card {
    border: 1px solid #ece3d4;
    background: #fff;
  }
  .ctc__form-card { padding: clamp(22px, 3vw, 36px); }

  .ctc__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  @media (min-width: 560px) {
    .ctc__row { grid-template-columns: 1fr 1fr; }
  }
  .ctc__field { margin-block-start: 16px; }
  .ctc__field:first-child, .ctc__row .ctc__field { margin-block-start: 0; }
  .ctc__row + .ctc__field { margin-block-start: 16px; }

  .ctc__label {
    display: block;
    margin-block-end: 6px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    color: #2a251f;
  }
  .ctc__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d8ccb8;
    background: #faf6ef;
    font-family: var(--font-body--family);
    font-size: 14.5px;
    color: #2a251f;
    box-sizing: border-box;
  }
  .ctc__input:focus { outline: none; border-color: #2a251f; }
  .ctc__textarea { resize: vertical; }

  .ctc__submit { margin-block-start: 20px; }
  .ctc__fineprint {
    margin: 12px 0 0;
    font-family: var(--font-body--family);
    font-size: 12px;
    color: #6f6250;
  }
  .ctc__fineprint a { color: #6f6250; text-underline-offset: 3px; }
  .ctc__fineprint a:hover { color: #c04a63; }

  .ctc__error {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #e0b4a8;
    background: #faeae4;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    color: #8a3b27;
  }
  .ctc__error ul { margin: 0; padding-inline-start: 1.1rem; }

  .ctc__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 40px;
    text-align: center;
  }
  .ctc__success-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-block-end: 16px;
    border-radius: 50%;
    background: rgba(192, 74, 99, 0.12);
    color: #c04a63;
  }
  .ctc__success-title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: 24px;
    color: #2a251f;
  }
  .ctc__success-body {
    max-width: 360px;
    margin: 10px 0 0;
    font-family: var(--font-body--family);
    font-size: 14.5px;
    line-height: 1.7;
    color: #6f6250;
  }

  .ctc__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .ctc__method {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: clamp(18px, 2.5vw, 24px);
  }
  .ctc__method-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(192, 74, 99, 0.1);
    color: #c04a63;
  }
  .ctc__method-title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: 16px;
    color: #2a251f;
  }
  .ctc__method-body {
    margin-block-start: 4px;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    line-height: 1.6;
    color: #5e5547;
  }
  .ctc__method-body p { margin: 4px 0 0; color: #6f6250; }
  .ctc__method-body a { color: #c04a63; text-underline-offset: 2px; }
  .ctc__method-body a:hover { text-decoration: underline; }

  .ctc__faq {
    border: 1px solid #e7dccb;
    background: #efe7d9;
    padding: clamp(18px, 2.5vw, 24px);
  }
  .ctc__faq-title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 16px;
    color: #2a251f;
  }
  .ctc__faq-body {
    margin: 6px 0 0;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    line-height: 1.6;
    color: #5e5547;
  }
  .ctc__faq-body a { color: #c04a63; font-weight: 500; text-underline-offset: 2px; }
  .ctc__faq-body a:hover { text-decoration: underline; }

  .ctc__btn {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--font-body--family);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-align: center;
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .ctc__btn--solid { background: #2a251f; color: #faf8f3; }
  .ctc__btn--solid:hover { background: #c04a63; }
/* END_SECTION:page-contact */

/* START_SECTION:page-header (INDEX:57) */
/* The scheme has to be painted, not just declared. */
  .page-header {
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  /* The measure is applied per child, not to the box. */
  .page-header__inner {
    display: grid;
    gap: 0.75rem;
  }

  .page-header__inner > * {
    max-width: var(--header-measure, 44rem);
  }

  .page-header__inner--center > * {
    margin-inline: auto;
  }

  /* Centred is the default for a header over a page; start-aligned suits one used as a section heading further down. The measure is capped either way, because a line of body text run across a full desktop column loses the eye coming back from the right edge. */
  .page-header__inner--center {
    justify-items: center;
    text-align: center;
  }

  .page-header__inner--start {
    justify-items: start;
    text-align: start;
  }

  .page-header__inner--end {
    justify-items: end;
    margin-inline-start: auto;
    text-align: end;
  }

  /* Sizes come from the block, so these only carry what the setting does not:
     the family, the leading, and a margin reset. */
  .page-header__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    line-height: 1.1;
  }

  .page-header__subtitle {
    margin: 0;
    font-weight: var(--font-body--weight);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Editor only, so it is allowed to be loud. */
  .page-header__notice {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px dashed rgba(var(--color-foreground), 0.4);
    border-radius: var(--style-border-radius-inputs);
    font-size: var(--font-size-sm);
    text-align: start;
  }

  .page-header__description {
    line-height: 1.6;
    color: rgba(var(--color-foreground), 0.75);
  }

  .page-header__description > :last-child {
    margin-block-end: 0;
  }

  /* The trail has its own alignment and ignores the section's. */
  /* Full width of the content column, whatever the measure is — a trail is
     navigation, not a line of prose, so it has no reason to be capped. */
  .page-header__crumbs {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    margin-block-end: 0.25rem;
  }

  .page-header__crumbs--start {
    justify-self: start;
    text-align: start;
  }

  .page-header__crumbs--center {
    justify-self: center;
    text-align: center;
  }

  .page-header__crumbs--end {
    justify-self: end;
    text-align: end;
  }

  /* The list itself is the thing that collects, so it is told directly — the
     wrapper's `text-align` alone does not move a flex row. */
  .page-header__crumbs--start :where(ol, ul, nav) {
    justify-content: flex-start;
  }

  .page-header__crumbs--center :where(ol, ul, nav) {
    justify-content: center;
  }

  .page-header__crumbs--end :where(ol, ul, nav) {
    justify-content: flex-end;
  }

  .page-header__rule {
    height: 0;
    border: 0;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.2);
    margin-block: 0.25rem;
  }
/* END_SECTION:page-header */

/* START_SECTION:page-reviews (INDEX:58) */
.rvw { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 88px); }
  .rvw__inner { width: 100%; max-width: 1032px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .rvw__crumbs { font-family: var(--font-body--family); font-size: 12.5px; color: #6f6250; }
  .rvw__crumbs a { color: #6f6250; text-decoration: none; }
  .rvw__crumbs a:hover { color: #2a251f; }
  .rvw__sep { padding-inline: 8px; }
  .rvw__crumbs [aria-current] { color: #2a251f; }

  .rvw__head { max-width: 640px; margin-block-start: 20px; }
  .rvw__eyebrow { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: #c04a63; }
  .rvw__title { margin: 12px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.05; color: #2a251f; }
  .rvw__intro { margin: 16px 0 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #5e5547; }

  /* Score bar */
  .rvw__score { margin-block-start: 32px; border: 1px solid #ece3d4; background: #fff; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 28px; }
  @media (min-width: 640px) { .rvw__score { flex-direction: row; align-items: center; gap: 48px; } }
  .rvw__score-avg { display: flex; align-items: center; gap: 20px; }
  @media (min-width: 640px) { .rvw__score-avg { flex-direction: column; flex-shrink: 0; gap: 6px; text-align: center; } }
  .rvw__avg-num { font-family: var(--font-heading--family); font-size: clamp(48px, 7vw, 60px); line-height: 1; color: #2a251f; }
  .rvw__based { margin-block-start: 6px; font-family: var(--font-body--family); font-size: 13px; color: #7c7264; }
  .rvw__dist { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .rvw__distrow { display: flex; align-items: center; gap: 12px; }
  .rvw__diststar { display: flex; width: 44px; flex-shrink: 0; align-items: center; gap: 4px; font-family: var(--font-body--family); font-size: 12.5px; color: #7c7264; }
  .rvw__star-c { color: #2a251f; }
  .rvw__bar { height: 8px; flex: 1 1 auto; overflow: hidden; border-radius: 999px; background: #ece3d4; }
  .rvw__bar-fill { display: block; height: 100%; border-radius: 999px; background: #2a251f; }
  .rvw__distn { width: 42px; flex-shrink: 0; text-align: right; font-family: var(--font-body--family); font-size: 12.5px; font-variant-numeric: tabular-nums; color: #8a7c66; }

  /* Stars */
  .rvw__stars { position: relative; display: inline-block; font-size: 14px; letter-spacing: 1px; color: #d9ccb6; white-space: nowrap; }
  .rvw__stars .rvw__s { color: #d9ccb6; }
  .rvw__stars .rvw__s--on { color: #2a251f; }
  .rvw__stars--lg { font-size: 18px; }
  .rvw__stars-fill { position: absolute; inset-inline-start: 0; top: 0; overflow: hidden; color: #2a251f; white-space: nowrap; }

  /* Wall */
  .rvw__wall { margin-block-start: 32px; display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 640px) { .rvw__wall { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 960px) { .rvw__wall { grid-template-columns: repeat(3, 1fr); } }
  .rvw__card { display: flex; flex-direction: column; border: 1px solid #ece3d4; background: #fff; padding: 20px; }
  .rvw__card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .rvw__verified { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-family: var(--font-body--family); font-size: 11px; font-weight: 500; color: #5f7a55; }
  .rvw__card-title { margin: 12px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 16px; line-height: 1.3; color: #2a251f; }
  .rvw__body { margin: 8px 0 20px; font-family: var(--font-body--family); font-size: 14px; line-height: 1.6; color: #5e5547; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  .rvw__foot { margin-block-start: auto; display: flex; align-items: center; gap: 12px; border-block-start: 1px solid #e6dcca; padding-block-start: 16px; }
  .rvw__avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(192,74,99,0.12); font-family: var(--font-body--family); font-size: 15px; font-weight: 700; text-transform: uppercase; color: #c04a63; }
  .rvw__who { min-width: 0; flex: 1 1 auto; }
  .rvw__name { display: block; font-family: var(--font-body--family); font-size: 13.5px; font-weight: 600; color: #2a251f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rvw__on { display: block; font-family: var(--font-body--family); font-size: 11.5px; color: #8a7c66; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rvw__on:hover { color: #c04a63; }

  .rvw__more-wrap { margin-block-start: 32px; display: flex; justify-content: center; }
  .rvw__more { border: 1px solid #2a251f; background: none; padding: 12px 28px; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #2a251f; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
  .rvw__more:hover { background: #2a251f; color: #faf8f3; }

  .rvw__cta { margin-block-start: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-block-start: 1px solid #e6dcca; padding-block-start: 40px; }
  .rvw__cta-btn { display: inline-flex; align-items: center; border-radius: 999px; background: #c04a63; padding: 15px 32px; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; text-decoration: none; transition: background-color 0.2s ease; }
  .rvw__cta-btn:hover { background: #d17a8d; }
  .rvw__cta-note { font-family: var(--font-body--family); font-size: 13px; color: #8a7c66; }
/* END_SECTION:page-reviews */

/* START_SECTION:page-sitemap (INDEX:59) */
.sitemap {
    background: #faf8f3;
    color: #2a251f;
    padding-block: var(--padding-top, 8px) var(--padding-bottom, 72px);
  }

  .sitemap__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-block-end: 1.25rem;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.6);
  }

  .sitemap__crumbs a {
    color: inherit;
    text-decoration: none;
  }

  .sitemap__crumbs a:hover {
    color: rgb(var(--color-accent));
  }

  .sitemap__eyebrow {
    margin: 0 0 0.25rem;
    font-size: var(--font-size-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--color-accent));
  }

  .sitemap__title {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading--family);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 400;
    line-height: 1.15;
  }

  .sitemap__intro {
    max-width: 44rem;
    margin: 0 0 2.5rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  .sitemap__intro a {
    color: rgb(var(--color-accent));
    text-underline-offset: 0.15em;
  }

  .sitemap__group {
    margin-block-end: 2.5rem;
  }

  .sitemap__heading {
    margin: 0 0 1rem;
    padding-block-end: 0.5rem;
    border-block-end: 1px solid #e6dcca;
    font-family: var(--font-heading--family);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 400;
  }

  .sitemap__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.5rem 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .sitemap__list a {
    display: inline-block;
    padding-block: 0.1875rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.85);
    text-decoration: none;
  }

  .sitemap__list a:hover {
    color: rgb(var(--color-accent));
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
/* END_SECTION:page-sitemap */

/* START_SECTION:page-size-guide (INDEX:60) */
.sg { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 24px) var(--padding-bottom, 80px); }
  .sg__head-wrap, .sg__section, .sg__cta { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .sg__head-wrap { max-width: 1032px; }
  .sg__section { max-width: 1032px; }

  .sg__crumbs { margin-block-end: 24px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .sg__crumbs a { color: #6f6250; text-decoration: none; }
  .sg__crumbs a:hover { color: #2a251f; }
  .sg__crumbs [aria-current] { color: #2a251f; }

  .sg__head { text-align: center; }
  .sg__eyebrow { font-family: var(--font-body--family); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: #c04a63; }
  .sg__title { margin: 10px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(25px, 3.2vw, 40px); line-height: 1.05; color: #2a251f; }
  .sg__intro { max-width: 620px; margin: 16px auto 0; font-family: var(--font-body--family); font-size: 16px; line-height: 1.75; color: #7c7264; }
  .sg__intro strong { color: #2a251f; font-weight: 600; }

  .sg__section { margin-block-start: clamp(48px, 7vw, 80px); }
  .sg__measures { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 2vw, 20px); margin-block-start: clamp(36px, 5vw, 60px); max-width: 1032px; }
  @media (min-width: 640px) { .sg__measures { grid-template-columns: repeat(3, 1fr); } }
  .sg__measure { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(22px, 2.8vw, 28px); border: 1px solid #ece3d4; background: #fff; }
  .sg__measure-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-block-end: 14px; border-radius: 50%; background: rgba(192, 74, 99, 0.1); color: #c04a63; }
  .sg__measure-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 18px; color: #2a251f; }
  .sg__measure-body { margin: 8px 0 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.65; color: #5e5547; }

  .sg__section-head { text-align: center; }
  .sg__h2 { margin: 8px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(24px, 3vw, 34px); color: #2a251f; }
  .sg__h2--center { text-align: center; }
  .sg__h3 { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.5vw, 26px); color: #2a251f; }

  .sg__table-wrap { margin-block-start: 24px; overflow-x: auto; border: 1px solid #ece3d4; background: #fff; }
  .sg__table { width: 100%; min-width: 640px; border-collapse: collapse; }
  .sg__th { white-space: nowrap; border-block-end: 1px solid #e6dcca; padding: 10px 14px; text-align: left; font-family: var(--font-heading--family); font-size: 13.5px; font-weight: 400; color: #2a251f; }
  .sg__td { white-space: nowrap; border-block-end: 1px solid #ece3d4; padding: 10px 14px; font-family: var(--font-body--family); font-size: 13.5px; color: #5e5547; }
  .sg__td--head { font-weight: 600; color: #2a251f; }
  .sg__table tbody tr:last-child .sg__td { border-block-end: 0; }
  .sg__note { margin: 16px 0 0; text-align: center; font-family: var(--font-body--family); font-size: 13px; line-height: 1.7; color: #6f6250; }
  .sg__note strong { color: #2a251f; font-weight: 600; }

  .sg__faq { max-width: 1032px; }
  .sg__faq-list { margin-block-start: 28px; border-block-start: 1px solid #e6dcca; }
  .sg__faq-item { border-block-end: 1px solid #e6dcca; }
  .sg__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 16px; color: #2a251f; }
  .sg__faq-q::-webkit-details-marker { display: none; }
  .sg__faq-plus { font-size: 20px; line-height: 1; color: #9c6470; transition: transform 0.2s ease; }
  .sg__faq-item[open] .sg__faq-plus { transform: rotate(45deg); }
  .sg__faq-a { margin: -2px 0 0; padding-block-end: 18px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  .sg__cta { max-width: 1032px; margin-block-start: clamp(44px, 6vw, 68px); background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .sg__cta-body { max-width: 480px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .sg__cta-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .sg__cta-actions { flex-direction: row; } }
  .sg__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
  .sg__btn--solid { background: #2a251f; color: #faf8f3; }
  .sg__btn--solid:hover { background: #c04a63; }
  .sg__btn--outline { border: 1px solid #2a251f; color: #2a251f; }
  .sg__btn--outline:hover { background: #2a251f; color: #faf8f3; }
/* END_SECTION:page-size-guide */

/* START_SECTION:page-tools (INDEX:61) */
.thub { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .thub__inner { width: 100%; max-width: 1032px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .thub__crumbs { margin-block-end: 16px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .thub__crumbs a { color: #6f6250; text-decoration: none; }
  .thub__crumbs a:hover { color: #2a251f; }
  .thub__crumbs [aria-current] { color: #2a251f; }
  .thub__head { max-width: 720px; margin-inline: auto; text-align: center; }
  .thub__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .thub__intro { margin: 12px 0 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }
  .thub__grid { margin-block-start: 32px; display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); }
  @media (min-width: 600px) { .thub__grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 960px) { .thub__grid { grid-template-columns: repeat(3, 1fr); } }
  .thub__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ece3d4; background: #fff; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .thub__card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -22px rgba(42, 37, 31, 0.45); }
  .thub__art { display: flex; align-items: center; justify-content: center; height: 112px; background: linear-gradient(135deg, rgba(192,74,99,0.1), #faf8f3 55%, rgba(192,74,99,0.05)); }
  .thub__art--img { display: block; height: auto; aspect-ratio: 3 / 2; overflow: hidden; background: #f2ece1; }
  .thub__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
  .thub__card:hover .thub__img { transform: scale(1.04); }
  .thub__icon { font-size: 42px; line-height: 1; transition: transform 0.3s ease; }
  .thub__card:hover .thub__icon { transform: scale(1.1); }
  .thub__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; padding: 20px; }
  .thub__stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #8a5060; }
  .thub__card-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 19px; line-height: 1.25; color: #2a251f; }
  .thub__card:hover .thub__card-title { color: #c04a63; }
  .thub__blurb { margin: 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.65; color: #7c7264; }
  .thub__open { margin-block-start: auto; padding-block-start: 4px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #c04a63; }
/* END_SECTION:page-tools */

/* START_SECTION:page-track-order (INDEX:62) */
.trk { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 24px) var(--padding-bottom, 80px); }
  .trk__inner { width: 100%; max-width: 1032px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }

  .trk__crumbs { margin-block-end: 24px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .trk__crumbs a { color: #6f6250; text-decoration: none; }
  .trk__crumbs a:hover { color: #2a251f; }
  .trk__crumbs [aria-current] { color: #2a251f; }

  .trk__head { max-width: 620px; }
  .trk__eyebrow { font-family: var(--font-body--family); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: #c04a63; }
  .trk__title { margin: 10px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(25px, 3.2vw, 40px); line-height: 1.06; color: #2a251f; }
  .trk__intro { margin: 12px 0 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }

  .trk__grid { margin-block-start: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr; align-items: start; gap: clamp(20px, 3vw, 40px); }
  @media (min-width: 990px) { .trk__grid { grid-template-columns: 1.4fr 1fr; } }

  .trk__card { border: 1px solid #ece3d4; background: #fff; }
  .trk__main { padding: clamp(22px, 3vw, 36px); }
  .trk__main-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 22px; color: #2a251f; }
  .trk__steps { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .trk__steps li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.6; color: #5e5547; }
  .trk__step-n { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(192, 74, 99, 0.1); color: #c04a63; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; }
  .trk__hint { margin: 20px 0 0; font-family: var(--font-body--family); font-size: 13px; line-height: 1.65; color: #6f6250; }

  /* Lookup form */
  .trk__form { display: flex; flex-direction: column; gap: 16px; }
  .trk__field { display: flex; flex-direction: column; }
  .trk__label { margin-block-end: 6px; font-family: var(--font-body--family); font-size: 13px; font-weight: 500; color: #2a251f; }
  .trk__input { width: 100%; box-sizing: border-box; padding: 12px 16px; border: 1px solid #d8ccb8; background: #faf6ef; font-family: var(--font-body--family); font-size: 14.5px; color: #2a251f; outline: none; }
  .trk__input:focus { border-color: #2a251f; }
  .trk__error { margin: 0; border: 1px solid #e0b4a8; background: #faeae4; padding: 12px 16px; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.5; color: #8a3b27; }
  .trk__submit { align-self: flex-start; margin-block-start: 4px; border: 0; cursor: pointer; }
  .trk__submit:disabled { opacity: 0.6; cursor: default; }

  /* Result */
  .trk__result { display: flex; flex-direction: column; gap: 20px; }
  .trk__res-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .trk__res-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 22px; color: #2a251f; }
  .trk__res-meta { margin: 4px 0 0; font-family: var(--font-body--family); font-size: 13px; color: #6f6250; }
  .trk__pill { border-radius: 999px; background: #efe7d9; padding: 6px 12px; font-family: var(--font-body--family); font-size: 12px; font-weight: 500; color: #7c6f59; white-space: nowrap; }
  .trk__track { border: 1px solid #ece3d4; background: #faf6ef; padding: 16px; }
  .trk__track-label { margin: 0 0 8px; font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #6f6250; }
  .trk__track-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .trk__track-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-body--family); font-size: 14px; color: #2a251f; }
  .trk__track-link { font-family: var(--font-body--family); font-weight: 500; color: #c04a63; text-decoration: none; text-underline-offset: 2px; }
  .trk__track-link:hover { text-decoration: underline; }
  .trk__res-note { margin: 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.7; color: #6f6250; }
  .trk__res-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .trk__res-actions .trk__btn { margin-block-start: 0; }
  .trk__res-actions .trk__btn--outline { border: 0; cursor: pointer; }

  .trk__side { display: flex; flex-direction: column; gap: 16px; }
  .trk__method { padding: clamp(18px, 2.5vw, 24px); }
  .trk__method-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 16px; color: #2a251f; }
  .trk__method-body { margin: 6px 0 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.6; color: #5e5547; }
  .trk__box { border: 1px solid #e7dccb; background: #efe7d9; padding: clamp(18px, 2.5vw, 24px); }
  .trk__box-title { margin: 0; font-family: var(--font-heading--family); font-size: 15px; color: #2a251f; }
  .trk__box-body { margin: 6px 0 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.6; color: #5e5547; }

  .trk__btn { display: inline-block; margin-block-start: 20px; padding: 12px 28px; font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
  .trk__method .trk__btn { margin-block-start: 14px; }
  .trk__btn--solid { background: #2a251f; color: #faf8f3; }
  .trk__btn--solid:hover { background: #c04a63; }
  .trk__btn--outline { border: 1px solid #2a251f; color: #2a251f; background: transparent; }
  .trk__btn--outline:hover { background: #2a251f; color: #faf8f3; }
/* END_SECTION:page-track-order */

/* START_SECTION:page (INDEX:63) */
/* A scheme has to be painted, not merely named. `.color-scheme-N` declares the custom properties and stops there, so a section that offers the setting and never draws with it leaves the merchant's choice invisible. Restating the section grid here is what lets the background reach the viewport edges while the contents stay in the content column. */
  .page-section {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .page-section > * {
    grid-column: 2;
  }

  /* The editor-only stand-in. Dashed, quiet, and obviously not a design. */
  .page-section--empty {
    padding-block: 1.5rem;
  }

  .page-section__empty-note {
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    border-radius: var(--style-border-radius-inputs);
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
    text-align: center;
  }

  .page-section__inner {
    width: var(--content-width);
    margin-inline: auto;
  }

  /* Capped in `ch`, so the measure follows the merchant's own font rather than a pixel number that stops being right the moment they change it. 68ch lands inside the 45–75 characters a line prose has been set to for a century. */
  .page-section__inner--narrow {
    width: min(68ch, var(--content-width));
  }

  .page-section__inner--medium {
    width: min(90ch, var(--content-width));
  }

  .page-section__inner--center {
    text-align: center;
  }

  .page-section__image {
    display: block;
    width: 100%;
    height: auto;
    margin-block-end: 2rem;
    border-radius: var(--style-border-radius-cards, 0);
  }

  .page-section__title {
    margin: 0 0 1.5rem;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    line-height: 1.15;
  }

  .page-section__title--small {
    font-size: var(--font-size-h3);
  }

  .page-section__title--medium {
    font-size: var(--font-size-h2);
  }

  .page-section__title--large {
    font-size: var(--font-size-h1);
  }

  /* A page is read rather than scanned, so the body runs looser than the rest
     of the theme. */
  .page-section__body {
    line-height: 1.7;
  }

  /* Centred prose is unreadable at length: every line begins in a different place, so the eye has to hunt for the start of each one. The setting centres the heading and leaves the body ranged left, which is what "centred" is nearly always meant to mean. */
  .page-section__inner--center .page-section__body {
    text-align: start;
  }
/* END_SECTION:page */

/* START_SECTION:password (INDEX:64) */
/* The whole viewport, because this template has no header or footer to sit
     between. `100dvh` so a phone's chrome is counted while it is on screen. */
  /* Already the whole viewport, so it needs the paint but not the breakout the other sections needed — a scheme named and never drawn with leaves the merchant's choice invisible here as much as anywhere. */
  .password {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 2rem var(--page-margin, 1rem);
    text-align: center;
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .password__inner {
    display: grid;
    gap: 2rem;
    width: 100%;
    max-width: 32rem;
  }

  .password__logo {
    height: auto;
    margin-inline: auto;
  }

  .password__wordmark {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .password__body {
    display: grid;
    justify-items: center;
    gap: 1rem;
  }

  .password__title {
    margin: 0;
    font-size: var(--font-size-h2);
    line-height: 1.15;
  }

  .password__message {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  .password__signup,
  .password__form {
    width: 100%;
    margin-block-start: 0.5rem;
  }

  /* Field and button side by side above 500px, stacked below it — a button
     beside a field on a narrow phone leaves no room to read what was typed. */
  .password__field {
    display: grid;
    gap: 0.5rem;
  }

  @media screen and (min-width: 500px) {
    .password__field {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  .password__input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(var(--color-foreground), 0.25);
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-size-sm);
  }

  .password__notice {
    padding: 0.75rem 1rem;
    border-radius: var(--style-border-radius-inputs);
    background: rgba(var(--color-foreground), 0.06);
    font-size: var(--font-size-sm);
  }

  /* --- The way in --- */

  .password__enter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
    cursor: pointer;
    list-style: none;
  }

  .password__enter-toggle::-webkit-details-marker {
    display: none;
  }

  .password__enter-toggle:hover {
    color: rgb(var(--color-foreground));
  }

  .password__enter-toggle svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .password__enter-body {
    padding-block-start: 1rem;
  }

  .password__powered {
    margin: 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .password__powered a {
    color: inherit;
  }
/* END_SECTION:password */

/* START_SECTION:product-recommendations (INDEX:66) */
/* A scheme has to be painted, not merely named. `.color-scheme-N` declares the custom properties and stops there, so a section that offers the setting and never draws with it leaves the merchant's choice invisible. Restating the section grid here is what lets the background reach the viewport edges while the contents stay in the content column. */
  .recommendations {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .recommendations > * {
    grid-column: 2;
  }

  /* Both recommendation rows are shells that script fills once they come near the viewport, and removes outright when there is nothing to fill them with. */
  .recommendations:empty {
    padding-block: 0;
    background: none;
  }

  .recommendations__note {
    padding: 1.5rem;
    border: 1px dashed rgba(var(--color-border), 0.9);
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
    text-align: center;
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:product (INDEX:67) */
.product__layout {
    display: grid;
    gap: 1.5rem;
    /* Narrower than the page when the merchant asks for it, centred in what is
       left. Applied to the layout rather than the section, so a background
       colour still reaches the edges of the band while the words inside it sit
       in a measured column. Unset means the section fills its column, which is
       the page width the rest of the theme uses. */
    max-width: var(--product-max, none);
    margin-inline: auto;
  }

  @media screen and (min-width: 990px) {
    /* The split between the photographs and the buy area. */
    .product__layout {
      grid-template-columns: minmax(0, var(--media-col, 55fr)) minmax(20rem, var(--info-col, 45fr));
      gap: 3rem;
      align-items: start;
    }

    /* Which column follows the shopper is a setting now, not a fixed rule — see the sticky block further down. This used to pin the buy area unconditionally, which fought the setting the moment a merchant chose the photographs instead: both columns ended up sticky at once. */
  }

  /* The column is the container's width, not its widest child's.
   *
   * A grid's implicit column is sized by content, and `min-width: 0` on the
   * grid itself does not stop that — each child still contributes its own
   * min-content. A product description containing a size chart put a table in
   * here, and the table's min-content (the sum of its columns) grew the column
   * to 393px inside a 328px page. Measured on a 360px phone: everything in the
   * buy column came out 393 wide and the viewport itself stretched to 409.
   *
   * `minmax(0, 1fr)` pins the column to the container and pushes the problem
   * down to whichever child is too wide — where it belongs, and where the rule
   * below lets it scroll instead of dragging the page with it. */
  .product__info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    /* Tighter block rhythm, closer to the Hydrogen storefront's buy column. */
    gap: 0.55rem;
    min-width: 0;
  }

  /* Rich text a merchant pasted is not the theme's to reflow, and a size chart is a table whatever width the screen is. So it scrolls inside its own box rather than setting the width of the page. */
  /* Any table a merchant pasted, wherever it ended up. */
  .product__info table,
  .product-tabs__set table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
  }

  /* --- Tabs --------------------------------------------------------------- Built from the disclosures at runtime, so the page ships as panels and is rearranged only when a browser is there to switch them. The rearranging is a move, not a copy: one set of content, one place in the document, so the text a crawler reads is the text a shopper reads. */
  .tabs__list {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-block-end: 1px solid rgba(var(--color-border), 0.7);
  }

  .tabs__list::-webkit-scrollbar {
    display: none;
  }

  .tabs__tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.75rem 0;
    border: 0;
    background: none;
    /* 0.75, not 0.6. At 0.6 an unselected tab measured 3.94:1 against the
       cream background — under the 4.5:1 a label this size has to meet, and the
       tabs are the navigation for everything below them. */
    color: rgba(var(--color-foreground), 0.75);
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
    white-space: nowrap;
    cursor: pointer;
    /* The underline is drawn on the element itself so the selected tab does not
       shift by a pixel when it gains one. */
    box-shadow: inset 0 -2px 0 transparent;
  }

  .tabs__tab[aria-selected='true'] {
    color: rgb(var(--color-foreground));
    box-shadow: inset 0 -2px 0 rgb(var(--color-foreground));
  }


  .tabs__count {
    margin-inline-start: 0.25rem;
    font-weight: var(--font-body--weight);
    color: rgba(var(--color-foreground), 0.7);
  }

  .tabs__group[hidden] {
    display: none;
  }

  /* The first panel inside a tab has the strip above it, so its own top border
     would draw a second line a few pixels below the first. */
  .tabs__group > .panel:first-child,
  .tabs__group > [data-tab-group]:first-child > .panel:first-child {
    border-block-start: 0;
  }

  .product__description {
    margin-block-start: 0.5rem;
  }

  .product__panel {
    border-block-start: 1px solid rgba(var(--color-border), 0.7);
  }

  .product__panel-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
  }

  .product__panel-summary svg {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .product__panel[open] > .product__panel-summary svg {
    transform: rotate(180deg);
  }

  .product__panel-body {
    padding-block-end: 1rem;
  }

  /* --- Accordion ---------------------------------------------------------- The disclosure a merchant builds a tab out of. `<details>` opens and closes with nothing running, which is why this is not a button and a div. */

  .panel {
    border-block-end: 1px solid rgba(var(--color-foreground), 0.12);
  }

  .panel__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    cursor: pointer;
    list-style: none;
  }

  .panel__summary::-webkit-details-marker {
    display: none;
  }

  .panel__label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
    line-height: 1.3;
  }

  /* Sized here, not left to the file. An icon with no width rule renders at its
     own intrinsic size, which for these is the full 20px box scaled to the
     font — measured: a heart four hundred pixels tall down the middle of the
     page. */
  .panel__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: rgb(var(--color-accent));
  }

  .panel__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .panel__summary > svg {
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
    color: rgba(var(--color-foreground), 0.7);
    transition: rotate var(--duration-fast) var(--ease-out);
  }

  .panel[open] > .panel__summary > svg {
    rotate: 180deg;
  }

  .panel__body {
    padding-block-end: 1.25rem;
  }

  .panel__policy {
    margin: 0.75rem 0 0;
  }

  .panel[open] > .panel__body {
    animation: panel-open var(--duration-base) var(--ease-out);
  }

  @keyframes panel-open {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .panel__summary > svg {
      transition: none;
    }

    .panel[open] > .panel__body {
      animation: none;
    }
  }

  /* --- Tab content as one bordered card ----------------------------------- The
     Details and FAQ panels read as a single framed list of accordions, the way
     the Hydrogen storefront draws them: a hairline box around the group, the
     panels' own bottom borders as the dividers between rows, and inner padding
     so the icon and chevron sit off the frame rather than against it. Scoped by
     :has(.panel) so a tab with no accordions (Reviews) stays unboxed. */
  .product-tabs__content:has(.panel) {
    border: 1px solid rgba(var(--color-foreground), 0.14);
  }

  .product-tabs__content:has(.panel) > .panel:last-child {
    border-block-end: 0;
  }

  .product-tabs__content:has(.panel) .panel__summary,
  .product-tabs__content:has(.panel) .panel__body,
  .product-tabs__content:has(.panel) .panel__label--static {
    padding-inline: 1rem;
  }

  /* --- Tabs --------------------------------------------------------------- The strip is built by script from the tab headings, so the page ships as a stack of headed sections and stays readable with nothing running. */

  /* Pinned to its container, for the same reason `.product__info` is. */
  .product-tabs__set {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-block-start: 2.5rem;
  }

  /* `min-width: auto` is the default for a grid and flex child: "never smaller
     than my contents". Every link in the chain has to opt out of it. */
  .product-tabs__panel,
  .product-tabs__section,
  .product-tabs__content,
  .product-tabs__list,
  .product__info .rte {
    min-width: 0;
  }

  /* In the details column the tabs are one more row of a grid that already spaces its children, so the margin that separates them from the gallery in the full width placement would double up here. */
  .product__info > .product-tabs__set {
    margin-block-start: 0.5rem;
  }

  .product__info > .product-tabs__set .product-tabs__tab,
  .product__info > .product-tabs__set .product-tabs__heading {
    font-size: var(--font-size-body);
  }

  .product__info > .product-tabs__set .product-tabs__list {
    gap: 1.125rem;
  }

  /* The accordion headings come down with everything else. At h4 in a 518px column they are the same size as the product title two rows above, which reads as two headings competing rather than a heading and its contents. */
  .product__info > .product-tabs__set .panel__label {
    font-size: var(--font-size-body);
  }

  .product__info > .product-tabs__set .panel__icon svg {
    width: 1.0625rem;
    height: 1.0625rem;
  }

  .product-tabs__list {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    border-block-end: 1px solid rgba(var(--color-foreground), 0.14);
    scrollbar-width: none;
  }

  .product-tabs__list::-webkit-scrollbar {
    display: none;
  }

  /* A tab is a heading that can be pressed, so it keeps the heading face and gains only what it needs to read as selectable. The rule under the current one is the whole selected state — a filled tab would be a second block of colour competing with the buy button above it. */
  .product-tabs__tab {
    position: relative;
    flex: 0 0 auto;
    padding: 0.75rem 0;
    border: 0;
    background: none;
    color: rgba(var(--color-foreground), 0.7);
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
  }

  .product-tabs__tab:hover,
  .product-tabs__tab[aria-selected='true'] {
    color: rgb(var(--color-foreground));
  }

  .product-tabs__tab[aria-selected='true']::after {
    content: '';
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0;
    height: 2px;
    background: rgb(var(--color-accent));
  }

  .product-tabs__panel[hidden] {
    display: none;
  }

  .product-tabs__panel {
    padding-block-start: 0.5rem;
  }

  .product-tabs__section + .product-tabs__section {
    margin-block-start: 2rem;
  }

  .product-tabs__heading {
    margin: 0 0 0.75rem;
    font-size: var(--font-size-h4);
  }

  /* Gone once the heading has been lifted into the strip. */
  .product-tabs__set--tabbed .product-tabs__heading {
    display: none;
  }

  .product-tabs__set--tabbed .product-tabs__section + .product-tabs__section {
    margin-block-start: 0;
  }


  /* --- Divider ------------------------------------------------------------ */

  .block-divider {
    margin-block: var(--divider-space, 8px);
  }

  .block-divider--line {
    border-block-start: var(--divider-weight, 1px) solid rgba(var(--color-foreground), 0.14);
  }

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

  .block-image {
    display: flex;
  }

  .block-image--center { justify-content: center; }
  .block-image--left   { justify-content: flex-start; }
  .block-image--right  { justify-content: flex-end; }

  .block-image img {
    width: var(--image-width, 100%);
    height: auto;
    border-radius: var(--style-border-radius-media);
  }

  /* --- Icon with text ----------------------------------------------------- */

  .icon-text {
    display: flex;
    gap: 0.75rem;
  }

  .icon-text--row { align-items: flex-start; }

  .icon-text--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .icon-text__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    color: rgb(var(--color-accent));
  }

  .icon-text__mark svg { width: 1.375rem; height: 1.375rem; }

  .icon-text__heading {
    margin: 0;
    font-weight: var(--font-body--weight-bold);
  }

  .icon-text__body {
    color: rgba(var(--color-foreground), 0.75);
    font-size: var(--font-size-sm);
  }

  /* --- Flash message ------------------------------------------------------ */

  /* A card paints itself from the scheme's tokens, because a scheme in this theme sets tokens and never paints — the same reasoning the trust badges follow. */
  .flash {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .flash--card {
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: var(--style-border-radius-inputs);
  }

  /* A band reaches the edges of the column and leans on a rule rather than a
     box, for a merchant who wants the message quieter. */
  .flash--band {
    border-block: 1px solid rgba(var(--color-foreground), 0.12);
    padding-inline: 0;
  }

  .flash__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: rgb(var(--color-accent));
  }

  .flash__icon svg { width: 1.25rem; height: 1.25rem; }

  .flash__heading {
    margin: 0;
    font-weight: var(--font-body--weight-bold);
    font-size: var(--font-size-sm);
  }

  .flash__text {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.78);
  }


  /* Alignment. The card is a flex row with the icon beside the copy, so the row is what moves; the text inside it is told separately or a centred card ends up with its icon centred and its words still hard left. */
  .flash--align-center {
    justify-content: center;
    text-align: center;
  }

  .flash--align-end {
    justify-content: flex-end;
    text-align: end;
  }

  /* --- Specifications ----------------------------------------------------- */

  /* Rows of label and value. A definition list, because that is what it is — and it lets the two halves line up without a table promising columns that can be read downward. */
  .specs {
    display: grid;
    gap: 0;
    margin: 0;
  }

  .specs__row {
    display: grid;
    grid-template-columns: minmax(6rem, 32%) minmax(0, 1fr);
    gap: 1rem;
    padding: 0.625rem 0;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.08);
  }

  .specs__row:first-child { border-block-start: 0; }

  .specs__label {
    margin: 0;
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: var(--transform-eyebrow);
    color: rgba(var(--color-foreground), 0.7);
  }

  .specs__value {
    margin: 0;
    font-size: var(--font-size-sm);
  }

  /* --- Fit guide ---------------------------------------------------------- */

  .fit {
    display: grid;
    gap: 0.5rem;
  }

  .fit__heading {
    margin: 0;
    font-weight: var(--font-body--weight-bold);
    font-size: var(--font-size-sm);
  }

  /* The merchant's sentence and the scale are two separate statements, and the
     `.rte` rules strip the trailing margin off the last paragraph in a block —
     correct where the block ends, wrong here, where a scale follows it. */
  .fit__intro {
    margin-block-end: 0.875rem;
  }

  .fit__intro > :last-child {
    margin-block-end: 0;
  }

  .fit__reading {
    margin: 0;
    font-size: var(--font-size-sm);
  }

  /* A rule with a marker on it. The dot is centred on its position, so at 1 and
     5 it sits over the line's ends rather than beyond them. */
  .fit__bar {
    position: relative;
    height: 0.625rem;
    margin-block: 0.125rem;
  }

  .fit__bar::before {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    height: 1px;
    background: rgba(var(--color-foreground), 0.45);
  }

  .fit__dot {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--fit-offset, 50%);
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--fit-active, rgb(var(--color-foreground)));
    translate: -50% -50%;
  }

  /* The middle label is centred and the outer two hug the ends, so the three read as the two extremes of a scale with its midpoint — which is what the bar underneath is measuring. */
  .fit__labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .fit__labels > :nth-child(2) { text-align: center; }

  .fit--align-center { justify-items: center; text-align: center; }
  .fit--align-end { justify-items: end; text-align: end; }

  /* The bar and the labels under it stay full width whatever the alignment — they are a scale, and a scale narrower than the words describing it stops lining up with them. */
  .fit--align-center .fit__bar,
  .fit--align-end .fit__bar,
  .fit--align-center .fit__labels,
  .fit--align-end .fit__labels {
    width: 100%;
  }

  /* --- Measurement table ---------------------------------------------------
     Every rule below reaches an element rather than a class, because the
     markup is not the theme's: it arrives in a metafield, pasted from a
     supplier feed, a spreadsheet or a merchant's own hand, carrying whatever
     structure and inline colours it was born with. Anything that reads as a
     table gets the same treatment — three columns or nine, thead or a bare
     first row. */

  /* Attribute grid under the description text — a hairline off the prose above
     it, the way the Hydrogen storefront separates the two. */
  .specs--attrs {
    margin-block-start: 1rem;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
    padding-block-start: 0.875rem;
  }

  .size-chart {
    margin-block-start: 0.875rem;
  }

  /* Wider than the column, it is dragged sideways rather than crushed. Six
     measurements across cannot be made to fit a phone, and shrinking the type
     until they do produces numbers nobody can read. */
  .size-chart__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid rgba(var(--color-border), 0.7);
  }

  .size-chart__scroll:focus-visible {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: 2px;
  }

  /* Separate borders rather than collapsed: a collapsed border belongs to the
     table, not to the cell that appears to own it, and the sticky column below
     loses its hairline as the rest of the table scrolls under it. Spacing is
     zeroed, so it reads as one grid either way. */
  /* The tabs area turns any table it finds into a shrink-to-fit block with its
     own sideways scroll, which is right for a table pasted into a description
     and wrong here — this one already sits in a scroll box, and as a block it
     shrank to its contents instead of filling the panel. Same specificity as
     that rule and declared later in the sheet, so it needs the extra class to
     win rather than depend on source order. */
  .size-chart .size-chart__scroll table {
    display: table;
    width: 100%;
    max-width: none;
    overflow: visible;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
  }

  /* `nowrap` is what makes the scrolling work: it holds every cell at its
     natural width, so a table too wide for the panel overflows instead of
     folding "Bottom Length" into three lines. Where the columns do fit, the
     100% above still fills the panel edge to edge. */
  .size-chart th,
  .size-chart td {
    padding: 0.5rem 0.5rem;
    border-block-end: 1px solid rgba(var(--color-border), 0.7);
    text-align: start;
    white-space: nowrap;
  }

  /* Two backgrounds, not one translucent tint: the header is sticky-adjacent
     and a translucent cell lets the rows scrolling underneath show through
     it. A flat layer over the page colour is opaque at any scheme. */
  /* Base header colour is the tan, but WITHOUT !important — so a size chart
     pasted from a supplier feed with its own inline header colour (usually
     lightgray) keeps that colour, exactly like the Hydrogen storefront (whose
     thead tint is also an ordinary rule the inline style beats). Clean authored
     charts with no inline colour fall back to the tan on both sites. */
  .size-chart thead th,
  .size-chart table:not(:has(thead)) tr:first-child th {
    background: #efe7d9;
    color: rgb(var(--color-foreground));
    font-weight: var(--font-body--weight-bold);
  }

  .size-chart tr:last-child td {
    border-block-end: 0;
  }

  /* The size column stays put while the measurements scroll past it —
     otherwise a shopper three columns deep is reading numbers with nothing
     left on screen to say which size they belong to. */
  .size-chart th:first-child,
  .size-chart td:first-child {
    position: sticky;
    inset-inline-start: 0;
    border-inline-end: 1px solid rgba(var(--color-border), 0.7);
    background: rgb(var(--color-background));
  }

  /* The header's own first cell keeps the tan of the rest of the header, not the
     page colour the sticky rule hands the body rows below it. */
  .size-chart thead th:first-child,
  .size-chart table:not(:has(thead)) tr:first-child th:first-child {
    background: #efe7d9;
  }

  .size-chart__note {
    margin: 0.5rem 0 0;
    color: rgba(var(--color-foreground), 0.65);
    font-size: var(--font-size-xs);
  }

  /* Smaller on a phone, and tighter across. A measurement table is columns of
     two- and four-character numbers, and on a 390px screen the width spent on
     type and gutters is width that costs a whole column of visible data. Row
     height is left as it is — that is what keeps a row readable across. */
  @media screen and (max-width: 749px) {
    .size-chart .size-chart__scroll table {
      font-size: var(--font-size-xs);
    }

    .size-chart th,
    .size-chart td {
      padding: 0.5rem 0.375rem;
    }
  }



  /* --- Countdown ---------------------------------------------------------- Tiles rather than a run of numbers, because the four readings are separate facts and a shopper reads whichever one still matters. Calm by design: no pulsing, no colour change as it runs down. The theme does not shout, and a merchant who wants this louder has the colour scheme to do it with. */

  .countdown {
    display: grid;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .countdown--card {
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: var(--style-border-radius-inputs);
  }

  .countdown--band {
    border-block: 1px solid rgba(var(--color-foreground), 0.12);
    padding-inline: 0;
  }

  /* Nothing around it at all, for a merchant who wants the timer to sit in the
     column like a line of copy rather than as a thing in a box. */
  .countdown--plain {
    padding: 0;
    background: none;
  }

  .countdown__heading {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
  }

  .countdown__icon { display: grid; place-items: center; color: rgb(var(--color-accent)); }
  .countdown__icon svg { width: 1rem; height: 1rem; }

  .countdown__units {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .countdown__unit {
    display: grid;
    justify-items: center;
    gap: 0.125rem;
    min-width: 3rem;
    padding: 0.4375rem 0.5rem;
    border-radius: var(--style-border-radius-inputs);
    background: rgba(var(--color-foreground), 0.07);
  }

  /* Fixed-width digits and a fixed minimum width, so the row is the same size
     at 09 as at 10 and nothing beside it moves once a second. */
  .countdown__unit b {
    font-size: 1.125rem;
    font-weight: var(--font-body--weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  .countdown__unit i {
    font-style: normal;
    font-size: 0.625rem;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: var(--transform-eyebrow);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* The colon sits between tiles, lifted to the height of the digits rather
     than centred against the labels underneath them. */
  .countdown__sep {
    align-self: start;
    padding-block-start: 0.5rem;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--color-foreground), 0.35);
  }

  .countdown__done {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  /* Alignment. The container is a grid and the heading is a flex row, so both have to be told — `text-align` alone moves the words inside each tile and leaves the row of tiles where it was. */
  .countdown--align-center {
    justify-items: center;
    text-align: center;
  }

  .countdown--align-center .countdown__heading {
    justify-content: center;
  }

  .countdown--align-end {
    justify-items: end;
    text-align: end;
  }

  .countdown--align-end .countdown__heading {
    justify-content: flex-end;
  }

  /* --- Share -------------------------------------------------------------- */

  .share {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .share__label {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .share__list {
    display: flex;
    gap: 0.375rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .share__item {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(var(--color-foreground), 0.14);
    border-radius: 50%;
    background: none;
    color: rgb(var(--color-foreground));
    cursor: pointer;
  }

  .share__item:hover {
    border-color: rgb(var(--color-accent));
    color: rgb(var(--color-accent));
  }

  .share__item svg { width: 0.9375rem; height: 0.9375rem; }

  .share__said {
    font-size: var(--font-size-xs);
    color: rgb(var(--color-accent));
  }

  /* --- Contact form ------------------------------------------------------- */

  .contact__form { display: grid; gap: 0.75rem; }
  .contact__intro { margin-block-end: 0.75rem; font-size: var(--font-size-sm); }
  .contact__ok { color: rgb(var(--color-accent)); font-size: var(--font-size-sm); }
  .contact__error { color: rgb(var(--color-accent)); font-size: var(--font-size-sm); }
  .contact__form textarea { resize: vertical; font-family: inherit; }

  /* --- Complementary products --------------------------------------------- */

  .addons { display: grid; gap: 0.625rem; }

  .addons__heading {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
  }

  .addons__list {
    display: grid;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* A row, not a card. These sit in a column beside the thing being bought, so
     a grid of tiles would compete with the product's own photography. */
  .addons__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: var(--style-border-radius-inputs);
  }

  .addons__media {
    display: block;
    width: 3rem;
    overflow: hidden;
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.05);
    aspect-ratio: 3 / 4;
  }

  .addons__media img { width: 100%; height: 100%; object-fit: cover; }

  .addons__copy { display: grid; gap: 0.125rem; min-width: 0; }

  /* One line, cut with an ellipsis. A row of cards whose titles run to one or
     two lines sets the price at a different height in every card, and the eye
     reads a ragged row as a broken one. The full name stays in the markup, so
     the link still announces the whole product name — the cut is visual. */
  .addons__title {
    display: block;
    overflow: hidden;
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-sm);
    line-height: 1.3;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .addons__title:hover { color: rgb(var(--color-accent)); }
  .addons__price { font-size: var(--font-size-sm); }

  /* Read, not pressed — so they are smaller than the picker's own and carry no
     hover or focus state to suggest otherwise. */
  .addons__swatches {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-block-start: 0.25rem;
  }

  .addons__swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--swatch-radius, 50%);
    box-shadow: inset 0 0 0 1px rgba(var(--color-foreground), 0.16);
    background-color: var(--swatch-color, transparent);
    background-image: var(--swatch-image, none);
    background-size: cover;
    background-position: center;
  }

  .addons__swatch-more {
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .addons__unavailable {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
    white-space: nowrap;
  }

  /* --- Carousel ------------------------------------------------------------- A rail of cards instead of a column of rows, for a merchant whose pairings run to five or six. The shape sits on the wrapper rather than the list, because the recommended path fetches its list from a section and would otherwise arrive without the modifier. */
  /* Bounded, so the rail can scroll.
   *
   * A grid and flex child defaults to `min-width: auto`, which means "at least
   * as wide as my contents" — so six 168px cards made the rail 1068px inside a
   * 390px column. `overflow-x: auto` then had nothing to overflow: measured
   * scrollWidth 1068 against clientWidth 1068, and the arrows correctly hid
   * themselves because by their own test the row did not scroll.
   *
   * Set on the wrapper and the block, because either one expanding is enough to
   * defeat it. */
  .addons,
  .addons__rail {
    position: relative;
    min-width: 0;
    max-width: 100%;
  }

  .addons--carousel .addons__list {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Room after the last card, so scrolling to the end leaves it standing clear of the edge rather than jammed against it — and the snap stops there rather than a card's width short. */
    padding-inline-end: 0.75rem;
    scroll-padding-inline: 0 0.75rem;
  }

  .addons--carousel .addons__list::-webkit-scrollbar {
    display: none;
  }

  /* Cards of one height. */
  .addons--carousel .addons__list {
    align-items: stretch;
  }

  /* Narrower than half the column on a phone, so a second card is always partly in view. A card that ends exactly at the edge looks like the row stops there; one cut deliberately says there is more. */
  .addons--carousel .addons__item {
    flex: 0 0 9.25rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    align-items: start;
    gap: 0.5rem;
    scroll-snap-align: start;
  }

  .addons--carousel .addons__media {
    width: 100%;
  }

  /* The control moves onto the picture. */
  .addons--carousel .addons__media {
    grid-area: 1 / 1;
  }

  .addons--carousel .addons__form,
  .addons--carousel .addons__item > .addons__add {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: end;
    margin: 0.375rem;
  }

  .addons--carousel .addons__form {
    display: grid;
  }

  /* 32px, past the 24px minimum target and small enough to read as a mark on the image rather than a control competing with the product. */
  .addons--carousel .addons__add {
    width: 2rem;
    min-width: 0;
    height: 2rem;
    /* `.button` sets a min-height for comfortable text targets; without
       releasing it the circle comes out 32 wide and 44 tall. */
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 10px -4px rgba(var(--color-shadow), 0.45);
  }

  /* No wipe on the round one. The sweep is written for a rectangle read from
     its leading edge; inside a 32px circle it is a shape crossing a shape. */
  .addons--carousel .addons__add::after {
    content: none;
  }

  .addons--carousel .addons__add:hover,
  .addons--carousel .addons__add:focus-visible {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  /* The word stays in the document at both layouts — hiding it is what makes
     the mark, and the accessible name comes from `aria-label` either way. */
  .addons--carousel .addons__add-icon {
    display: inline-flex;
  }

  .addons--carousel .addons__add-icon svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .addons--carousel .addons__add-label {
    display: none;
  }

  /* --- The card frame, borrowed from the grid --- * These sit beside a grid of the same products wearing the same frame, so the * rail follows settings.card_style rather than carrying a border of its own * invention. Both shapes start from the row's box being taken apart: the row * is a bordered pill with the picture inset, and a card is a picture running * to its own edge with the words underneath. */
  .addons--carousel.addons--panel .addons__item,
  .addons--carousel.addons--plain .addons__item {
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* Panelled: an object on the page, with its own edge and a tint separating it
     from the background. */
  .addons--carousel.addons--panel .addons__item {
    overflow: hidden;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.03);
  }

  /* The card clips the picture now, so the picture drops the radius it carries in the row layout — otherwise its own rounded foot cuts a notch out of the tint behind it. Plain has no box to clip against, so it keeps it. */
  .addons--carousel.addons--panel .addons__media {
    border-radius: 0;
  }

  /* The inset moves off the card and onto the words, which is what puts the picture against the border. Plain keeps the block padding and drops the inline, so the title lines up with the image above it rather than sitting indented from an edge that is no longer there. */
  .addons--carousel.addons--panel .addons__copy {
    padding: 0.5rem 0.5rem 0.625rem;
  }

  .addons--carousel.addons--panel .addons__unavailable {
    padding: 0 0.5rem 0.625rem;
  }

  .addons--carousel.addons--plain .addons__copy {
    padding: 0.5rem 0 0.625rem;
  }

  .addons--carousel.addons--plain .addons__unavailable {
    padding: 0 0 0.625rem;
  }

  .addons__rail .scroll-dots {
    margin-block-start: 0.625rem;
  }

  /* Two to a screen on a phone, and neither of them cut. */
  @media screen and (max-width: 749px) {
    .addons--carousel .addons__list {
      padding-inline-end: 0;
      scroll-padding-inline: 0;
    }

    .addons--carousel .addons__item {
      flex-basis: calc((100% - 0.75rem) / 2);
    }
  }

  /* Half on the card, half off it. */
  .addons__rail .scroll-arrow--prev {
    inset-inline-start: -0.9375rem;
  }

  .addons__rail .scroll-arrow--next {
    inset-inline-end: -0.9375rem;
  }

  /* Level with the middle of the picture, not the middle of the card. */
  .addons__rail .scroll-arrow {
    width: 1.875rem;
    height: 1.875rem;
    inset-block-start: calc(9.25rem * 2 / 3 - 0.9375rem);
  }

  /* Slim. A way into a decision, not the decision — the page's own add to cart
     is the only control here sized like one. */
  .addons__add {
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* The list layout is a row with room at the end for a word, so it keeps the word. The mark is for the carousel, where the card has a picture to put it on and no width to spare for a label. */
  .addons__add-icon {
    display: none;
  }

  /* --- Store pickup ------------------------------------------------------- */

  .pickup {
    display: grid;
    gap: 0.25rem;
  }

  .pickup__lead {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    margin: 0;
    font-size: var(--font-size-sm);
  }

  /* A pin beside the words, never instead of them — colour cannot carry the
     meaning on its own, so the sentence says it and the mark only tints. */
  .pickup__icon {
    display: inline-flex;
    flex: 0 0 auto;
  }

  /* A shade larger than the pin it replaced. The shopfront is a wider, shorter glyph, so at the pin's box it read as the smaller of the two — the size is matched to how much ink lands, not to the viewBox. */
  .pickup__icon svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .pickup__icon--in { color: rgb(var(--color-success, 34, 120, 80)); }
  .pickup__icon--out { color: rgba(var(--color-foreground), 0.7); }

  .pickup__when {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Set off from the collection time it follows, so "Ready in 2 hours" and
     "2 other stores" do not read as one sentence. */
  .pickup__count::before {
    content: '·';
    margin-inline-end: 0.375rem;
  }

  .pickup__details {
    justify-self: start;
    margin-block-start: 0.25rem;
    font-size: var(--font-size-xs);
  }

  /* --- Pickup panel --- */

  /* A drawer, not a centred box. */
  .popup__panel.pickup__panel {
    inset-block: 0;
    inset-inline: auto 0;
    width: min(27rem, 100vw);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    grid-template-rows: auto minmax(0, 1fr);
    /* In from the edge it rests against. `display` and `overlay` are in the transition so the panel is still rendered while it leaves; without them it is removed on the frame it closes and the exit is never seen. */
    translate: 100% 0;
    opacity: 0;
    transition:
      translate 0.3s var(--ease-out),
      opacity 0.3s var(--ease-out),
      overlay 0.3s allow-discrete,
      display 0.3s allow-discrete;
  }

  /* `display` belongs to the open state alone.
   *
   * Set on the base rule it beat the user agent's own `dialog:not([open]) {
   * display: none }` — author styles win — so the closed drawer was laid out,
   * sitting one full viewport to the right of the page. Measured at 390px of
   * horizontal overflow on a 390px screen, on the product page only, whether
   * the drawer had ever been opened or not.
   *
   * The exit still animates: `display` is in the transition above with
   * `allow-discrete`, so it holds `grid` until the slide has finished. */
  .popup__panel.pickup__panel[open] {
    display: grid;
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .popup__panel.pickup__panel[open] {
      translate: 100% 0;
      opacity: 0;
    }
  }

  /* The drawer rests against the inline end, which is the left edge under `dir="rtl"` — but `translate` is physical and has no logical form, so the same +100% that hides it off the right in English would drive it across the page in Arabic. The sign is flipped rather than the inset. */
  [dir='rtl'] .popup__panel.pickup__panel {
    translate: -100% 0;
  }

  @starting-style {
    [dir='rtl'] .popup__panel.pickup__panel[open] {
      translate: -100% 0;
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .popup__panel.pickup__panel {
      transition: none;
    }
  }

  /* The head stays put and the list moves under it, which is the whole reason for the drawer — a merchant with nine shops gets nine, not the first three and a scrollbar in the middle of the page. */
  .pickup__panel .popup__head {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--gradient-background);
  }

  .pickup__panel .popup__body {
    overflow-y: auto;
    overscroll-behavior: contain;
  }


  .pickup-store {
    display: grid;
    gap: 0.375rem;
  }

  /* A rule between shops rather than a box around each: inside a panel that is
     already a box, a second border per shop is a frame around a frame. */
  .pickup-store + .pickup-store {
    padding-block-start: 1rem;
    margin-block-start: 1rem;
    border-block-start: 1px solid rgba(var(--color-border), 0.9);
  }

  .pickup-store__name {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-body--weight-bold);
  }

  .pickup-store__state {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    font-size: var(--font-size-sm);
  }

  .pickup-store__state--in { color: rgb(var(--color-success, 34, 120, 80)); }
  .pickup-store__state--out { color: rgba(var(--color-foreground), 0.7); }

  /* The collection time is a fact about the shop, not about the stock, so it
     drops back to the body colour whichever state precedes it. */
  .pickup-store__when {
    color: rgba(var(--color-foreground), 0.7);
  }

  .pickup-store__when::before {
    content: '·';
    margin-inline-end: 0.375rem;
  }

  /* `format_address` writes its own paragraphs. */
  .pickup-store__address,
  .pickup-store__address p {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: rgba(var(--color-foreground), 0.75);
  }

  .pickup-store__contact {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: var(--font-size-sm);
  }

  .pickup-store__contact-icon {
    display: inline-flex;
    color: rgba(var(--color-foreground), 0.7);
  }

  .pickup-store__contact-icon svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .pickup-store__contact a {
    color: inherit;
    text-decoration: none;
  }

  .pickup-store__contact a:hover { text-decoration: underline; }

  .pickup-store__directions {
    justify-self: start;
    font-size: var(--font-size-sm);
  }

  /* One ratio for both kinds of map, so switching a merchant's uploaded picture
     for a live frame does not move everything under it. */
  .pickup-store__map {
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 0;
    border-radius: var(--style-border-radius-media);
    margin-block-start: 0.5rem;
    object-fit: cover;
  }

  .pickup-store__note {
    padding: 0.5rem 0.625rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    border-radius: var(--style-border-radius-inputs);
    margin: 0.5rem 0 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.75);
  }

  /* Editor only. Never reaches a shopper, so it is allowed to be blunt. */
  .product__editor-note {
    padding: 0.75rem 0.875rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    border-radius: var(--style-border-radius-inputs);
    margin: 0 0 0.75rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  /* --- Popup -------------------------------------------------------------- */

  .popup__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
  }

  .popup__icon { display: grid; place-items: center; }
  .popup__icon svg { width: 1rem; height: 1rem; }

  /* `margin: auto` is what centres a modal dialog, and the theme's reset takes
     it away: `*, ::before, ::after { margin: 0 }` reaches `<dialog>` like
     everything else, so the panel opened hard against the top left corner.
     Measured at 0,0 in a 1440x1000 viewport.

     Restated here rather than exempted in the reset, because every other dialog
     in the theme — the lightbox, the cart drawer, the quick view — positions
     itself explicitly and would not want the browser's centring back. */
  .popup__panel {
    margin: auto;
    width: min(34rem, calc(100% - 2rem));
    max-height: 80svh;
    padding: 0;
    border: 0;
    border-radius: var(--style-border-radius-inputs);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
    overflow: hidden;
  }

  .popup__panel::backdrop { background: rgba(var(--color-shadow), 0.4); }

  /* A size guide lifted in from its own page brings the section's own spacing with it, which was written for a page and is far too much inside a panel. */
  .popup__body .size-guide {
    padding: 0;
    margin: 0;
  }

  .popup__body .size-guide__inner {
    width: 100%;
  }

  /* Its heading is the panel's title, already shown above. */
  .popup__body .size-guide__heading {
    display: none;
  }

  /* The sticky unit bar has to reach the panel's edges. Left at the content
     width it leaves a strip of the panel's padding either side of it, and the
     chart scrolls up through those strips. */
  .popup__body .size-guide__unitbar {
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }

  /* Tabs wrap in a panel rather than scrolling. */
  .popup__body .product-tabs__list {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0 1.25rem;
  }

  .popup__body .product-tabs__tab {
    padding-block: 0.5rem;
    font-size: var(--font-size-body);
  }

  .popup__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-block-end: 1px solid rgba(var(--color-foreground), 0.1);
  }

  .popup__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
  }

  .popup__close {
    min-width: 0;
    min-height: 0;
    padding: 0.375rem;
    margin-inline-end: -0.375rem;
  }

  .popup__close svg { width: 1rem; height: 1rem; }

  .popup__body {
    max-height: calc(80svh - 4rem);
    padding: 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }


  /* --- Text --------------------------------------------------------------- */

  .block-text--center { text-align: center; }
  .block-text--end    { text-align: end; }

  .block-text__heading {
    margin: 0 0 0.375rem;
    font-family: var(--font-heading--family);
    line-height: 1.25;
  }

  .block-text__heading--small  { font-size: var(--font-size-body); }
  .block-text__heading--medium { font-size: var(--font-size-h4); }
  .block-text__heading--large  { font-size: var(--font-size-h3); }

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

  /* Equal width, sized to the wider label, because a pair of buttons of two different widths reads as one being more important than the other when the only difference is how long the words are. */
  .block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
  }

  .block-buttons--center { justify-content: center; }
  .block-buttons--end    { justify-content: flex-end; }

  .block-buttons .button {
    flex: 0 1 auto;
    min-width: 10rem;
  }

  /* A link with no destination is not pressable, and says so rather than
     looking identical to one that is. */
  .block-buttons .button[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.5;
  }

  @media screen and (max-width: 419px) {
    .block-buttons .button { flex: 1 1 100%; }
  }

  /* --- Video -------------------------------------------------------------- */

  .block-video { display: grid; gap: 0.5rem; }

  .block-video video,
  .block-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--style-border-radius-media);
  }

  /* The box is reserved before anything loads, so the page does not jump when
     the frame arrives — the whole point of loading it late. */
  .block-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.05);
  }

  /* The facade fills the frame the player will take, so pressing play swaps one
     for the other without the page moving. */
  .block-video__facade {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
  }

  .block-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .block-video__play {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(var(--color-background), 0.92);
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 14px -4px rgba(var(--color-shadow), 0.6);
    transition: transform 0.15s ease;
  }

  .block-video__facade:hover .block-video__play {
    transform: scale(1.06);
  }

  .block-video__play svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .block-video__play {
      transition: none;
    }
  }

  .block-video__frame iframe {
    position: absolute;
    inset: 0;
  }


  /* --- Sticky column ------------------------------------------------------- Whichever column the merchant chose follows the shopper down the page and stops against the header. */

  @media screen and (min-width: 990px) {
    .product__layout--sticky-gallery .product__media,
    .product__layout--sticky-details .product__info {
      --sticky-gap: 0.75rem;

      position: sticky;
      align-self: start;
      inset-block-start: calc(var(--header-offset, var(--header-height, 4rem)) + var(--sticky-gap));
    }

    /* No `max-height`, and nothing scrolls inside itself. */
  }
/* END_SECTION:product */

/* START_SECTION:rich-text (INDEX:70) */
/* `full-width` on the band, so the section re-establishes the content column
     itself — see the note in sections/featured-collections.liquid. */
  .rich-text {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .rich-text > * {
    grid-column: 2;
  }

  /* The measure caps the column, not the text inside it: capping the text would leave a full-width box with short lines in it, which centres and aligns from the wrong edges. */
  .rich-text__inner {
    display: grid;
    gap: var(--block-gap);
    max-width: var(--measure);
  }

  .rich-text--align-start .rich-text__inner {
    justify-items: start;
    text-align: start;
  }

  /* Centred needs the box centred as well as the words: `text-align` alone centres prose inside a column still hard against the start edge, which is the bug this theme has now shipped twice and fixed twice. */
  .rich-text--align-center .rich-text__inner {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
  }

  .rich-text--align-end .rich-text__inner {
    justify-items: end;
    margin-inline-start: auto;
    text-align: end;
  }

  /* The paragraph block carries its own measure for the image-with-text layout,
     where it sits in a column narrower than this one. Here the section's
     measure is the authority, or the two caps fight and the smaller wins
     silently. */
  .rich-text__inner .text-block__body {
    max-width: none;
  }

  .rich-text__empty {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_SECTION:rich-text */

/* START_SECTION:search-drawer (INDEX:71) */
/* --- The panel: a right-side slide-in drawer, 420px, matching the cart --- */
  .search-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inset-inline-start: auto;
    z-index: 60;
    width: min(27rem, 100%);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    background: none;
    overflow: visible;
  }

  .search-drawer::backdrop {
    background: rgba(var(--color-shadow), 0.4);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out), overlay 0.3s allow-discrete, display 0.3s allow-discrete;
  }

  .search-drawer[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    .search-drawer[open]::backdrop {
      opacity: 0;
    }
  }

  .search-drawer__panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
    box-shadow: -20px 0 60px -30px rgba(var(--color-shadow), 0.5);
    translate: 0 0;
    transition: translate 0.3s var(--ease-out);
  }

  @starting-style {
    .search-drawer[open] .search-drawer__panel {
      translate: 100% 0;
    }
  }

  .search-drawer:not([open]) .search-drawer__panel {
    translate: 100% 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .search-drawer__panel,
    .search-drawer::backdrop {
      transition: none;
    }
  }

  /* --- Header --- */
  .search-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1.125rem;
    border-block-end: 1px solid rgb(var(--color-border));
  }

  .search-drawer__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h5, 1rem);
    letter-spacing: 0.02em;
  }

  .search-drawer__close {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    padding: 0.375rem;
    margin-inline-end: -0.375rem;
  }

  .search-drawer__close svg {
    width: 1rem;
    height: 1rem;
  }

  /* --- The field --- */
  .search-drawer__form {
    padding: 0.875rem 1.125rem 0.5rem;
  }

  .search-drawer__field {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-inline: 0.75rem;
    border: 1px solid rgba(var(--color-foreground), 0.2);
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
  }

  .search-drawer__field:focus-within {
    border-color: rgb(var(--color-foreground));
  }

  .search-drawer__field-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: rgba(var(--color-foreground), 0.6);
  }

  .search-drawer__field-icon svg {
    width: 1.0625rem;
    height: 1.0625rem;
  }

  .search-drawer__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.5rem 0.25rem;
    border: 0;
    background: none;
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-size-sm);
  }

  .search-drawer__input:focus-visible {
    outline: none;
  }

  .search-drawer__input::-webkit-search-cancel-button {
    display: none;
  }

  .search-drawer__clear {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(var(--color-foreground), 0.6);
    cursor: pointer;
  }

  .search-drawer__clear svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .search-drawer__clear[hidden] {
    display: none;
  }

  /* The submit is the drawer's one filled control, uppercase like the cart's. */
  .search-drawer__go {
    flex: 0 0 auto;
    min-height: 2rem;
    padding: 0.3125rem 0.75rem;
    margin-inline-start: 0.25rem;
    font-size: var(--font-size-xs);
  }

  /* --- The body --- */
  .search-drawer__body {
    flex: 1 1 auto;
    padding: 0.75rem 1.125rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .search-drawer__default {
    display: grid;
    gap: 1.75rem;
  }

  .search-drawer__default[hidden] {
    display: none;
  }

  /* Results and default share the group/heading/list/chip/skeleton styles below,
     which are also used by sections/predictive-search.liquid. */
  .psearch {
    display: grid;
    gap: 1.75rem;
  }

  .psearch__group {
    display: grid;
    gap: 0.625rem;
    min-width: 0;
  }

  .psearch__group[hidden],
  .psearch__loading[hidden] {
    display: none;
  }

  .psearch__heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }

  .psearch__heading {
    margin: 0;
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.7);
  }

  .psearch__clear {
    padding: 0;
    border: 0;
    background: none;
    color: rgba(var(--color-foreground), 0.7);
    font-family: inherit;
    font-size: var(--font-size-xs);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
  }

  .psearch__clear:hover {
    color: rgb(var(--color-foreground));
  }

  /* --- Result rows --- */
  .psearch__list {
    display: grid;
    gap: 0.125rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .psearch__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem;
    border-radius: var(--style-border-radius-inputs);
    color: rgb(var(--color-foreground));
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .psearch__row:hover,
  .psearch__row:focus-visible,
  .psearch__row.is-active {
    background: rgba(var(--color-foreground), 0.06);
    outline: none;
  }

  .psearch__thumb {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    overflow: hidden;
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.05);
  }

  .psearch__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .psearch__row--text {
    padding-block: 0.5rem;
  }

  .psearch__copy {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
  }

  .psearch__title {
    font-size: var(--font-size-sm);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .psearch__price {
    font-size: var(--font-size-xs);
  }

  /* --- Chips --- */
  .psearch__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .psearch__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: 999px;
    background: none;
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-size-xs);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }

  .psearch__chip:hover,
  .psearch__chip:focus-visible,
  .psearch__chip.is-active {
    border-color: rgb(var(--color-foreground));
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    outline: none;
  }

  .psearch__chip svg {
    width: 0.8125rem;
    height: 0.8125rem;
    opacity: 0.6;
  }

  .psearch__chip-thumb {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
    overflow: hidden;
    border-radius: 999px;
    margin-inline-start: -0.375rem;
  }

  .psearch__chip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- Browse categories --- */
  .psearch__browse {
    display: grid;
    gap: 0.125rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .psearch__browse-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.375rem;
    border-radius: var(--style-border-radius-inputs);
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .psearch__browse-link:hover,
  .psearch__browse-link:focus-visible {
    background: rgba(var(--color-foreground), 0.06);
    outline: none;
  }

  .psearch__browse-link svg {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.4;
  }

  /* --- The way out --- */
  .psearch__all {
    display: block;
    padding: 0.75rem;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-sm);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .psearch__all:hover,
  .psearch__all.is-active {
    background: rgba(var(--color-foreground), 0.06);
  }

  .psearch__empty {
    margin: 0;
    padding-block: 1rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* --- Waiting --- */
  .psearch__loading {
    display: grid;
    gap: 0.75rem;
  }

  .psearch__skeleton {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .psearch__skeleton-thumb {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--style-border-radius-media);
  }

  .psearch__skeleton-lines {
    display: grid;
    flex: 1 1 auto;
    gap: 0.4375rem;
  }

  .psearch__skeleton-line {
    height: 0.625rem;
    border-radius: 2px;
  }

  .psearch__skeleton-line--short {
    width: 25%;
  }

  .psearch__skeleton-thumb,
  .psearch__skeleton-line {
    background:
      linear-gradient(90deg, rgba(var(--color-foreground), 0.07) 25%, rgba(var(--color-foreground), 0.12) 37%, rgba(var(--color-foreground), 0.07) 63%)
      0 0 / 400% 100%;
    animation: psearch-shimmer 1.4s ease infinite;
  }

  @keyframes psearch-shimmer {
    to {
      background-position: -135% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .psearch__skeleton-thumb,
    .psearch__skeleton-line {
      background: rgba(var(--color-foreground), 0.09);
      animation: none;
    }
  }
/* END_SECTION:search-drawer */

/* START_SECTION:search (INDEX:72) */
/* A scheme has to be painted, not merely named. `.color-scheme-N` declares the custom properties and stops there, so a section that offers the setting and never draws with it leaves the merchant's choice invisible. Restating the section grid here is what lets the background reach the viewport edges while the contents stay in the content column. */
  .search-page {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .search-page > * {
    grid-column: 2;
  }

  .search-page__head {
    display: grid;
    justify-items: center;
    gap: 1rem;
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
  }

  .search-page__title {
    margin: 0;
    font-size: var(--font-size-h2);
  }

  .search-page__form {
    width: 100%;
  }

  /* The same control as the drawer's: one border around the field and its
     submit, with a single hairline between them. */
  .search-page__field {
    display: flex;
    min-width: 0;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
  }

  .search-page__field:focus-within {
    outline: 2px solid rgb(var(--color-foreground));
    outline-offset: -1px;
  }

  .search-page__field:focus-within .search-page__submit {
    border-inline-start-width: 2px;
    border-inline-start-color: rgb(var(--color-foreground));
  }

  .search-page__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3rem;
    padding: 0.5rem 1rem;
    border: 0;
    background: none;
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-size-base);
  }

  .search-page__input:focus-visible {
    outline: none;
  }

  .search-page__input::-webkit-search-cancel-button {
    display: none;
  }

  .search-page__submit {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 3.125rem;
    padding: 0;
    border: 0;
    border-inline-start: 1px solid rgba(var(--color-foreground), 0.18);
    background: none;
    color: rgba(var(--color-foreground), 0.7);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out);
  }

  .search-page__submit:hover,
  .search-page__submit:focus-visible {
    background: rgba(var(--color-foreground), 0.06);
    color: rgb(var(--color-foreground));
  }

  .search-page__submit svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .search-page__count {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .search-page__eyebrow {
    margin: 0 0 1rem;
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* --- Tabs --- */

  .search-page__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    padding-block-end: 0.875rem;
    border-block-end: 1px solid rgba(var(--color-foreground), 0.12);
    margin-block: 2rem 1.75rem;
  }

  /* The current one is marked by weight and a rule under it, not by a filled pill — a row of pills with one solid reads as buttons with one pressed, and these are addresses rather than controls. */
  .search-page__tab {
    position: relative;
    padding-block-end: 0.875rem;
    margin-block-end: -0.875rem;
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  .search-page__tab:hover {
    color: rgb(var(--color-foreground));
  }

  .search-page__tab.is-current {
    color: rgb(var(--color-foreground));
    font-weight: var(--font-body--weight-bold);
  }

  /* While the answer is on its way. */
  [data-search-results][aria-busy='true'] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-search-results][aria-busy='true'] {
      transition: none;
    }
  }

  .search-page__tab.is-current::after {
    content: '';
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0;
    height: 1px;
    background: rgb(var(--color-foreground));
  }

  /* --- Layout --- */

  /* One column on a phone, filters beside the grid above 990px — the same breakpoint and the same 15rem column the collection page uses, so a shopper meets one layout rather than two. */
  .search-page__layout {
    display: grid;
    gap: 1.25rem;
  }

  @media screen and (min-width: 990px) {
    .search-page__layout--sidebar {
      grid-template-columns: 15rem minmax(0, 1fr);
      gap: 3rem;
      align-items: start;
    }
  }

  .search-page__main {
    min-width: 0;
  }

  /* Layout comes from `.collection__toolbar`, which this carries as well — the
     only thing left to say is that the sort sits at the far end. */
  .search-page__toolbar {
    justify-content: space-between;
  }

  .search-page__section-count {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Layout and the mark itself come from `.collection__sort`, which this also carries. The anchor does not: the mark is absolutely positioned and that class sets no `position`, so without this it resolves against the section and lands halfway down the page. */
  .search-page__sort {
    position: relative;
  }

  /* --- Products --- */

  .search-page__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-grid, 1.25rem) calc(var(--spacing-grid, 1.25rem) / 2);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .search-page__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .search-page__cell {
    min-width: 0;
  }

  /* --- Groups --- */

  .search-page__group {
    margin-block-start: 3rem;
  }

  /* --- Articles --- */

  .search-page__articles {
    display: grid;
    gap: 1.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .search-article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }

  .search-article__media {
    display: block;
    width: 7.5rem;
    overflow: hidden;
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.05);
    aspect-ratio: 3 / 2;
  }

  .search-article__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .search-article__copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
  }

  .search-article__title {
    font-size: var(--font-size-base);
    line-height: 1.3;
  }

  .search-article:hover .search-article__title {
    color: rgb(var(--color-accent));
  }

  .search-article__meta {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* --- Pages --- */

  .search-page__pages {
    display: grid;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .search-page__page {
    display: grid;
    gap: 0.1875rem;
    padding: 0.75rem;
    border-radius: var(--style-border-radius-inputs);
    color: rgb(var(--color-foreground));
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .search-page__page:hover {
    background: rgba(var(--color-foreground), 0.06);
  }

  .search-page__page-title {
    font-size: var(--font-size-base);
  }

  .search-page__page-excerpt {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Collections on their own. */
  [data-search-only='products'] [data-search-kind]:not([data-search-kind='products']),
  [data-search-only='collections'] [data-search-kind]:not([data-search-kind='collections']),
  [data-search-only='articles'] [data-search-kind]:not([data-search-kind='articles']),
  [data-search-only='pages'] [data-search-kind]:not([data-search-kind='pages']) {
    display: none;
  }

  /* --- Collections --- * Cards, on the same grid the products use, so the two read as one page. The * drawer keeps its chips: a panel is a list and a chip is the right weight * there, but on a page a row of pills above a grid of photographs reads as a * control strip rather than as results. */
  .search-page__collections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-grid, 1.25rem) calc(var(--spacing-grid, 1.25rem) / 2);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .search-page__collections {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .search-collection {
    min-width: 0;
  }

  .search-collection__link {
    display: grid;
    gap: 0.625rem;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }

  /* 4:3, not the products' 3:4. A collection is a place rather than a garment, and a landscape crop is what keeps it from being mistaken for one more product in the grid below. */
  .search-collection__media {
    display: block;
    overflow: hidden;
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.05);
    aspect-ratio: 4 / 3;
  }

  .search-collection__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .search-collection__link:hover .search-collection__media img {
      transform: scale(1.04);
    }
  }

  .search-collection__body {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
  }

  .search-collection__title {
    font-size: var(--font-size-sm);
    line-height: 1.3;
  }

  .search-collection__link:hover .search-collection__title {
    color: rgb(var(--color-accent));
  }

  .search-collection__count {
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* First in the region, so it carries no top margin of its own. */
  .search-page__group--first {
    margin-block-start: 0;
    margin-block-end: 2.5rem;
  }

  /* --- Nothing found --- */

  .search-page__empty {
    display: grid;
    justify-items: center;
    gap: 1.75rem;
    padding-block: 3rem 1rem;
    text-align: center;
  }

  .search-page__empty-lead {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
    line-height: 1.2;
  }

  .search-page__empty-sub {
    margin: -1.25rem 0 0;
    max-width: 34rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .search-page__empty-terms .psearch__chips {
    justify-content: center;
  }

  .search-page__empty-all {
    min-height: 2.75rem;
    padding-inline: 1.5rem;
  }
/* END_SECTION:search */

/* START_SECTION:shoppable-video (INDEX:73) */
.shopvid {
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .shopvid__header {
    margin-block-end: 1.5rem;
  }

  /* A scroll row on every width. Vertical video is tall, so a wrapping grid makes a very long page out of six clips; a row keeps the section one screen tall and swipes on a phone. */
  /* The arrows are positioned against this, and the dots sit under the row inside it — both have to be in the same box as the row for theme.js to pair them with it. */
  .shopvid__rail-wrap {
    position: relative;
  }

  .shopvid__rail-frame {
    position: relative;
  }

  /* Falls back to the theme's card radius when the merchant has not set one, so
     an existing section keeps the corners it had. */
  .shopvid {
    --shopvid-radius: var(--style-border-radius-cards, 0);
  }

  .shopvid__dots {
    display: flex;
    justify-content: center;
    margin-block-start: 1rem;
  }

  .shopvid__rail {
    display: grid;
    grid-auto-flow: column;
    /* A fixed track, not `minmax(0, …)`. The `0` minimum lets a track shrink
       when the row does not fit — and a scroll row never fits, that is the
       point of it. Measured on a 390px phone: four tracks asking for 62% each
       collapsed to 82px, giving 82×145 tiles. Desktop only looked right because
       the demo had exactly as many videos as columns; a fifth would have
       squeezed all five. A bare track size overflows and scrolls instead. */
    grid-auto-columns: calc((100% - (var(--shopvid-columns) - 1) * 0.75rem) / var(--shopvid-columns));
    gap: 0.75rem;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .shopvid__rail::-webkit-scrollbar {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .shopvid__rail {
      grid-auto-columns: 62%;
    }
  }

  .shopvid__cell {
    position: relative;
    scroll-snap-align: start;
  }

  .shopvid__tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--shopvid-radius);
    background: rgba(var(--color-foreground), 0.06);
    color: rgb(var(--color-background));
    text-decoration: none;
  }

  .shopvid__rail--portrait .shopvid__tile { aspect-ratio: 9 / 16; }
  .shopvid__rail--tall .shopvid__tile { aspect-ratio: 3 / 4; }
  .shopvid__rail--square .shopvid__tile { aspect-ratio: 1; }

  .shopvid__poster,
  .shopvid__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The preview sits over the cover and fades in once it is actually playing,
     so a tile never flashes black while the first frame is decoded. */
  .shopvid__preview {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .shopvid__preview[data-playing] {
    opacity: 1;
  }

  .shopvid__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%);
  }

  /* White, not the colour scheme's foreground. */
  .shopvid__meta,
  .shopvid__meta .price,
  .shopvid__meta .price__current,
  .shopvid__meta .price__unit,
  /* The sale price needs the extra class in the selector, not just the element. */
  .shopvid__meta .price--on-sale .price__current {
    color: #fff;
  }

  /* Muted, but muted against the video rather than against the page. The theme's 0.72 of the foreground colour is a dark grey here, which is the same problem the label had. */
  .shopvid__meta .price__compare {
    color: rgba(255, 255, 255, 0.75);
  }

  .shopvid__meta {
    position: absolute;
    inset-inline: 0.875rem;
    inset-block-end: 0.875rem;
    align-items: center;
    gap: 0.75rem;
    /* Clear of the circle at the end of the line: its width plus the gap it
       sits in. A long product name would otherwise run underneath it. */
    display: flex;
    /* The scrim fades out by 45% of the tile's height, so a long label over a pale frame can still run past its top edge. A shadow costs nothing and covers the case the gradient cannot. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  }

  /* The text column. Takes what is left of the row and stacks inside it, so the
     caption can run to three lines without pushing the circle anywhere. */
  .shopvid__meta-text {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0.125rem;
  }

  .shopvid__label {
    font-size: var(--font-size-sm);
    line-height: 1.3;
  }

  .shopvid__count {
    font-size: var(--font-size-xs);
    opacity: 0.85;
  }

  /* The price sits under the name, and the pair sits on one row with the arrow. */
  .shopvid__caption {
    display: grid;
    justify-items: start;
    gap: 0.05rem;
    min-width: 0;
  }

  /* Truncated rather than wrapped. Wrapping is what put the price on a second line in the first place, and a caption that changes height from one tile to the next drags the control below it out of line with its neighbours. */
  .shopvid__solo-title {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    font-size: var(--font-size-sm);
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
  }



  .shopvid__solo-price {
    font-size: var(--font-size-xs);
    opacity: 0.9;
  }

  /* ---- single-product reveal ---- */

  /* Pinned to the bottom of the tile and sized by its own contents, so the closed state is a control and the open state is a panel. It sits over the video rather than under the tile, because a row of tiles that grow when one opens pushes the whole rail around. */
  .shopvid__reveal {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
  }

  /* The control sits at the end of the caption's line rather than as a bar of its own across the tile. */
  .shopvid__reveal-summary {
    display: flex;
    justify-content: flex-end;
    padding: 0.875rem;
    list-style: none;
    color: #fff;
    cursor: pointer;
  }

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

  /* One circle, two places: the disclosure's summary on a single product tile and the decorative mark on a list tile. Declared together so the two cannot drift apart — a row where one tile's control is 4px wider than its neighbour's reads as a mistake. */
  .shopvid__reveal-arrow,
  .shopvid__arrow {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    /* Literal white and a near-black glyph, not the colour scheme's pair. */
    background: #fff;
    color: #1a1a1a;
    transition:
      background-color var(--duration-fast, 200ms) var(--ease-out, ease),
      color var(--duration-fast, 200ms) var(--ease-out, ease);
  }

  /* Level with the caption's last line rather than with the tile's floor, so a two line caption does not leave the control stranded below it. Both the decorative mark and the disclosure use the same offset, so a single product tile and a list tile put their circle in exactly the same place. */
  /* In the row now, so it needs no coordinates of its own. */
  .shopvid__arrow {
    flex: 0 0 auto;
  }

  .shopvid__reveal-summary {
    align-items: flex-end;
  }

  .shopvid__tile:hover .shopvid__reveal-arrow,
  .shopvid__tile:hover .shopvid__arrow,
  .shopvid__reveal-summary:hover .shopvid__reveal-arrow {
    background: #1a1a1a;
    color: #fff;
  }

  .shopvid__reveal-arrow svg,
  .shopvid__arrow svg {
    width: 0.75rem;
    height: 0.75rem;
    /* Points up when closed: the panel comes from below. */
    rotate: 180deg;
    transition: rotate 0.2s ease;
  }

  .shopvid__reveal[open] .shopvid__reveal-arrow svg {
    rotate: 0deg;
  }

  .shopvid__reveal-body {
    /* A container in its own right, and that is the fix rather than a detail. */
    container-type: inline-size;
    padding: 0.75rem;
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  @media (prefers-reduced-motion: no-preference) {
    .shopvid__reveal-body {
      animation: shopvid-rise 0.22s ease;
    }
  }

  @keyframes shopvid-rise {
    from { translate: 0 100%; opacity: 0; }
    to { translate: 0 0; opacity: 1; }
  }

  /* The reveal owns the bottom of the tile, so the caption moves above it. */
  .shopvid__cell:has(.shopvid__reveal) .shopvid__meta {
    inset-block-end: 2.5rem;
  }

  .shopvid__play {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
  }

  .shopvid__play svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .shopvid__poster--empty svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---- player ---- */

  .shopvid-player {
    width: min(64rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    /* The base stylesheet zeroes dialog margins so drawers can pin to an edge;
       a centred modal has to ask. */
    margin: auto;
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
    overflow: hidden;
  }

  .shopvid-player::backdrop {
    background: rgba(0, 0, 0, 0.72);
  }

  .shopvid-player[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* `minmax(0, 1fr)` on the panel's row, not plain `1fr`. */
    grid-template-rows: auto minmax(0, 1fr);
  }

  @media screen and (min-width: 750px) {
    .shopvid-player[open] {
      grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
      /* Side by side now, so the two panes share one row — and that row needs the same floor lifted as the stacked layout above, or the panel grows the dialog instead of scrolling inside it. */
      grid-template-rows: minmax(0, 1fr);
    }
  }

  .shopvid-player__stage {
    position: relative;
    background: #000;
  }

  .shopvid-player__video {
    display: block;
    width: 100%;
    max-height: calc(100dvh - 2rem);
    aspect-ratio: 9 / 16;
    /* `cover`, not `contain`. The stage is a fixed 9:16 portrait box and a clip is rarely cut to exactly that, so `contain` fitted the whole frame inside and left black bars down both sides. Cover fills the width and takes the overflow off the top and bottom, which is the edge of a video frame rather than its subject. */
    object-fit: cover;
  }

  @media screen and (max-width: 749px) {
    .shopvid-player__video {
      max-height: 55dvh;
    }
  }

  .shopvid-player__close {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    z-index: 2;
    color: rgb(var(--color-foreground));
  }

  .shopvid-player__nav {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
  }

  /* One chevron asset, flipped — the same trick the blog and product rows use,
     so there is one icon file rather than a mirrored pair to keep in step. */
  .shopvid-player__nav--prev {
    inset-inline-start: 0.5rem;
    scale: -1 1;
  }
  .shopvid-player__nav--next {
    inset-inline-end: 0.5rem;
  }

  .shopvid-player__nav svg {
    width: 1rem;
    height: 1rem;
  }

  /* The count, the title and the "featured in" label stay put; only the list of products moves. Scrolling the whole panel took the label away with it, so a shopper three products down had nothing saying what they were looking at. */
  /* The whole panel scrolls, header and all. */
  .shopvid-player__panel {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.5rem;
    /* Both, and both are needed: the floor lets it shrink inside the dialog's
       grid, the overflow gives it somewhere to put what does not fit. */
    min-height: 0;
    overflow-y: auto;
    /* Keeps a flick that reaches the end from scrolling the page behind. */
    overscroll-behavior: contain;
  }

  .shopvid-player__counter {
    margin: 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .shopvid-player__heading {
    margin: 0;
    font-size: var(--font-size-h5);
  }

  .shopvid-player__heading:empty {
    display: none;
  }

  .shopvid-player__featured {
    margin: 0;
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.7);
  }

  .shopvid-player__products {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* `hidden` is a UA stylesheet rule, and any author `display` beats it — so every group stayed on screen while `element.hidden` reported true. The property was not the thing to measure; the screenshot was. */
  .shopvid-player__products[hidden] {
    display: none;
  }

  .shopvid-product {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
  }

  .shopvid-product__image {
    width: 3.5rem;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  .shopvid-product__body {
    display: grid;
    gap: 0.125rem;
  }

  .shopvid-product__title {
    font-size: var(--font-size-sm);
    color: inherit;
  }

  /* On the row, not under it. Stacked, six products made a panel three screens long and the button read as belonging to the product below it. It drops to its own line only where the row is too narrow to hold all three. */
  .shopvid-product__add {
    justify-self: end;
    min-height: 1.875rem;
    padding-inline: 0.75rem;
    font-size: 0.6875rem;
    white-space: nowrap;
  }

  @container (max-width: 20rem) {
    /* Still three columns on a phone. */
    .shopvid-product {
      gap: 0.625rem;
    }

    .shopvid-product__add {
      padding-inline: 0.625rem;
    }
  }

  .shopvid__empty {
    padding: 2rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    text-align: center;
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_SECTION:shoppable-video */

/* START_SECTION:size-guide (INDEX:74) */
/* A scheme has to be painted, not merely named. `.color-scheme-N` declares the custom properties and stops there, so a section that offers the setting and never draws with it leaves the merchant's choice invisible. Restating the section grid here is what lets the background reach the viewport edges while the contents stay in the content column. */
  .size-guide {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .size-guide > * {
    grid-column: 2;
  }

  .size-guide__inner {
    width: var(--content-width);
    margin-inline: auto;
  }

  .size-guide__heading {
    margin: 0 0 0.75rem;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h2);
    line-height: 1.15;
  }

  .size-guide__intro {
    max-width: 62ch;
    margin-block-end: 1.5rem;
  }

  /* A full-width band, not a sticky pill. The pill is rounded and mostly
     transparent, so stuck on its own the chart would scroll through the gaps
     around it. The band carries the page colour across the panel and the pill
     rides on top of it. */
  .size-guide__unitbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    padding-block: 0.75rem;
    background: var(--gradient-background);
  }

  .size-guide__units {
    display: inline-flex;
    padding: 0.1875rem;
    border: 1px solid rgba(var(--color-border), 0.9);
    border-radius: 999px;
    margin: 0;
  }

  .size-guide__unit {
    padding: 0.3125rem 0.9375rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .size-guide__units input:checked + .size-guide__unit {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  .size-guide__units input:focus-visible + .size-guide__unit {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: 2px;
  }

  /* The unit swap, read off the section rather than the fieldset's siblings. */
  .size-guide__b {
    display: none;
  }

  .size-guide:has(.size-guide__units input:last-of-type:checked) .size-guide__a {
    display: none;
  }

  .size-guide:has(.size-guide__units input:last-of-type:checked) .size-guide__b {
    display: inline;
  }

  /* One chart follows another down the panel, separated by a rule rather than
     by space alone — five charts with nothing between them read as one very
     long table with headings in it. */
  .size-guide__chart + .size-guide__chart {
    padding-block-start: 2rem;
    border-block-start: 1px solid rgba(var(--color-border), 0.9);
    margin-block-start: 2rem;
  }

  /* Smaller than a section heading. This one names a table inside a panel that
     already has a title, and set at h3 it competed with it. */
  .size-guide__chart-heading {
    margin: 0 0 0.375rem;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
    line-height: 1.2;
  }

  .size-guide__chart-intro {
    max-width: 62ch;
    margin: 0 0 0.875rem;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* The table scrolls inside itself rather than pushing the page sideways. */
  .size-guide__scroll {
    overflow-x: auto;
  }

  /* Every rule below is prefixed with the section class on purpose. In the
     product panel this markup is fetched from the page and dropped into a
     `.rte` container, whose table rules box every cell and fill the headers
     grey — that is the boxed, shaded chart this used to render. Prefixing wins
     on specificity rather than on the order two stylesheets happen to be
     concatenated in. */
  .size-guide .size-guide__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    /* Figures line up in a column when they are all the same width, which is
       what makes a chart scannable rather than merely readable. */
    font-variant-numeric: tabular-nums;
  }

  .size-guide .size-guide__table th,
  .size-guide .size-guide__table td {
    padding: 0.5rem 0.5rem;
    border: 0;
    border-block-end: 1px solid rgba(var(--color-border), 0.7);
    background: none;
    text-align: start;
    white-space: nowrap;
  }

  /* The headings are labels, not data. One size for all of them, muted and
     tracked — a row of bold black column names competes with the numbers
     underneath, which are the thing being read. */
  .size-guide .size-guide__table thead th {
    border-block-end-color: rgba(var(--color-foreground), 0.3);
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
    font-weight: var(--font-body--weight);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .size-guide .size-guide__table tbody th {
    font-weight: var(--font-body--weight-bold);
  }

  /* The size column stays put while the regions and measurements scroll past
     it — the same as the measurement table on a product. */
  .size-guide .size-guide__table th:first-child,
  .size-guide .size-guide__table td:first-child {
    position: sticky;
    inset-inline-start: 0;
    border-inline-end: 1px solid rgba(var(--color-border), 0.7);
    background: rgb(var(--color-background));
  }

  .size-guide .size-guide__table tbody tr:last-child th,
  .size-guide .size-guide__table tbody tr:last-child td {
    border-block-end: 0;
  }

  .size-guide__chart-note,
  .size-guide__note {
    margin-block-start: 1rem;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Smaller on a phone, and tighter across. Eight columns of sizing on a 390px
     screen is a chart that has to be dragged sideways to be read at all; every
     millimetre taken out of the type and the gutters is another column visible
     without moving it. Row height is left alone — that is what keeps a row
     readable across. */
  @media screen and (max-width: 749px) {
    .size-guide .size-guide__table {
      font-size: var(--font-size-xs);
    }

    .size-guide .size-guide__table th,
    .size-guide .size-guide__table td {
      padding: 0.5rem 0.375rem;
    }

    .size-guide .size-guide__table thead th {
      font-size: 0.6875rem;
      letter-spacing: 0.04em;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .size-guide__unit {
      transition: none;
    }
  }
/* END_SECTION:size-guide */

/* START_SECTION:testimonials (INDEX:75) */
/* `full-width` on the band, so the section re-establishes the content column
     itself — see the note in sections/featured-collections.liquid. */
  .quotes {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .quotes > * {
    grid-column: 2;
  }

  .quotes__header .section-header__text {
    width: 100%;
    max-width: none;
  }

  .quotes__align-start {
    text-align: start;
  }

  .quotes__align-center {
    text-align: center;
  }

  .quotes__align-end {
    text-align: end;
  }

  .quotes__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .quotes__grid {
      grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
    }
  }

  .quote {
    display: grid;
    gap: 0.875rem;
    align-content: start;
    height: 100%;
    margin: 0;
  }

  .quotes--card-outlined .quote,
  .quotes--card-filled .quote {
    padding: 1.5rem;
    border-radius: var(--card-radius, 0);
  }

  .quotes--card-outlined .quote {
    border: 1px solid rgba(var(--color-foreground), 0.14);
  }

  .quotes--card-filled .quote {
    background: rgba(var(--color-foreground), 0.05);
  }

  /* The words, set larger than the attribution because they are the reason the section exists. Quotation marks are drawn rather than typed, so a screen reader is not read a punctuation character before every quote. */
  .quote__text {
    position: relative;
    margin: 0;
    font-size: var(--quote-size, 18px);
    line-height: 1.5;
  }

  /* The character itself rather than an escape. Written as `\201C` it went through one layer of escaping too many and rendered as the literal text `\201C` on the page. */
  .quotes--mark .quote__text::before {
    content: '“';
    display: block;
    font-size: 2.5em;
    line-height: 0.8;
    opacity: 0.25;
  }

  .quote__by {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: var(--font-size-sm);
  }

  .quote__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
  }

  .quote__by-text {
    display: grid;
  }

  .quote__author {
    font-style: normal;
  }

  .quote__detail {
    color: rgba(var(--color-foreground), 0.7);
  }

  .quotes__summary {
    display: grid;
    gap: 0.5rem;
    margin-block-end: 2rem;
  }

  /* `grid` with `justify-items`, so the alignment classes below reach it the same way they reach the summary — on a block element `text-align` alone would leave a full width anchor looking left aligned whatever was set. */
  .quotes__actions {
    display: grid;
    justify-items: start;
    margin-block-start: 2rem;
  }

  .quotes__align-center.quotes__actions {
    justify-items: center;
  }

  .quotes__align-end.quotes__actions {
    justify-items: end;
  }

  .quotes__align-center.quotes__summary {
    justify-items: center;
  }

  .quotes__align-end.quotes__summary {
    justify-items: end;
  }

  .quotes__summary-text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .quote__on {
    color: rgba(var(--color-foreground), 0.7);
  }

  .quote__product {
    color: inherit;
  }

  .quotes__row-frame {
    position: relative;
    overflow: visible;
  }

  /* Straddling the row's edge, half over the first card — see the note in
     sections/text-icons.liquid for why they are not parked in the gutter. */
  .quotes__arrow {
    --arrow-size: 2.5rem;

    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    display: none;
    place-items: center;
    width: var(--arrow-size);
    height: var(--arrow-size);
    padding: 0;
    border: 1px solid var(--arrow-border);
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    translate: 0 -50%;
    cursor: pointer;
  }

  @media screen and (min-width: 990px) {
    .quotes__arrow {
      display: grid;
    }
    /* `hidden` is only a UA stylesheet rule, and the `display: grid` above beats it on specificity alone. theme.js sets the attribute when the row has nothing to page through — four cards in four columns — so without this the arrows stayed on screen and did nothing when clicked. */
    .quotes__arrow[hidden] {
      display: none;
    }
  }

  .quotes__arrow svg {
    width: 1rem;
    height: 1rem;
  }

  .quotes__arrow--prev {
    inset-inline-start: calc(var(--arrow-size) / -2);
    rotate: 180deg;
  }

  .quotes__arrow--next {
    inset-inline-end: calc(var(--arrow-size) / -2);
  }

  .quotes__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  /* ---- the two scrollers ----
     One row of markup, two independent behaviours, each shut inside its own
     media query so neither can leak into the other's breakpoint. Outside its
     query a class does nothing at all, which is what lets a merchant stack on a
     desktop and swipe on a phone from one piece of HTML. */
  .quotes__grid--swipe::-webkit-scrollbar,
  .quotes__grid--slider::-webkit-scrollbar {
    display: none;
  }

  /* Phone. Bleeds to the viewport and pads itself back to the page margin, so the first card lines up with the heading above while the row still runs off both edges. */
  @media screen and (max-width: 749px) {
    .quotes__grid--swipe {
      grid-auto-flow: column;
      grid-template-columns: none;
      grid-auto-columns: min(22rem, 82vw);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      padding-inline: var(--page-margin);
      scroll-padding-inline-start: var(--page-margin);
      margin-inline: calc(-1 * var(--page-margin));
    }

    .quotes__grid--swipe > .quotes__item {
      scroll-snap-align: start;
    }

    /* A pointer control on a touch screen: hidden, and hidden here rather than left to the arrow's own rules, so a phone swipe row never reserves room for something it will not draw. */
    .quotes__arrow {
      display: none;
    }
  }

  /* Desktop. Stays inside the content column — the arrows straddle the row's edge and that edge has to be the column's, not the viewport's — and shows a whole number of cards so a page never lands mid-quote. */
  @media screen and (min-width: 750px) {
    .quotes__grid--slider {
      grid-auto-flow: column;
      grid-template-columns: none;
      grid-auto-columns: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

    .quotes__grid--slider > .quotes__item {
      scroll-snap-align: start;
    }
  }

  .quotes__row-wrap .scroll-dots {
    margin-block-start: 1.25rem;
  }

  /* ---- marquee ---- */
  .quotes__viewport {
    display: flex;
    gap: var(--gap);
    overflow: hidden;
    margin-inline: calc(-1 * var(--page-margin));
    padding-inline: var(--page-margin);
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  }

  .quotes__track {
    display: flex;
    flex: none;
    gap: var(--gap);
    padding: 0;
    margin: 0;
    list-style: none;
    animation: quotes-run var(--marquee-duration, 60s) linear infinite;
  }

  .quotes__track > .quotes__item {
    flex: none;
    width: min(24rem, 80vw);
  }

  .quotes__viewport:hover .quotes__track,
  .quotes__viewport:focus-within .quotes__track {
    animation-play-state: paused;
  }

  @keyframes quotes-run {
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quotes__viewport {
      overflow-x: auto;
    }

    .quotes__track {
      animation: none;
    }

    .quotes__track[aria-hidden='true'] {
      display: none;
    }
  }

  .quotes__empty {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
  }

  .quotes__app {
    margin-block-start: 2rem;
  }
/* END_SECTION:testimonials */

/* START_SECTION:text-icons (INDEX:76) */
/* `full-width` on the band, so the section re-establishes the content column
     itself — see the note in sections/featured-collections.liquid. */
  .text-icons {
    display: grid;
    grid-template-columns: var(--content-grid);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .text-icons > * {
    grid-column: 2;
  }

  /* One child, so the flex row leaves it shrink-to-fit and per-element alignment has nothing to move within. Widened here so each element can be aligned on its own. */
  .text-icons__header .section-header__text {
    width: 100%;
    /* The shared header caps its text block at 40rem so a paragraph beside a view-all link keeps a readable measure. This section has no link beside it and aligns its two lines independently, so the cap has to go — with it in place `width: 100%` loses to `max-width` and the box stays 640px, which is why aligning the title appeared to do nothing. */
    max-width: none;
  }

  .text-icons__align-start {
    text-align: start;
  }

  .text-icons__align-center {
    text-align: center;
  }

  .text-icons__align-end {
    text-align: end;
  }

  .text-icons__grid {
    display: grid;
    grid-template-columns: repeat(var(--columns-mobile, 1), minmax(0, 1fr));
    gap: var(--gap);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .text-icons__grid {
      grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr));
    }
  }

  /* Icon above the words: a feature grid. */
  .text-icons--above .text-icons__item {
    display: grid;
    gap: 0.75rem;
  }

  /* Icon beside them: a list. `align-items: start` keeps the icon level with the
     first line rather than floating to the middle of a three-line paragraph. */
  .text-icons--beside .text-icons__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.875rem;
  }

  /* Alignment applies to the words, and to where the icon sits when it is above them. Beside, the icon is fixed to the start edge by the grid — an icon centred over a column while its text is centred beside it reads as two columns rather than one item. */
  .text-icons__grid--align-start .text-icons__item {
    justify-items: start;
    text-align: start;
  }

  .text-icons__grid--align-center.text-icons__grid .text-icons__item {
    text-align: center;
  }

  .text-icons--above .text-icons__grid--align-center .text-icons__item,
  .text-icons__grid--align-center .text-icons__item {
    justify-items: center;
  }

  .text-icons--beside .text-icons__grid--align-center .text-icons__item {
    justify-items: start;
  }

  .text-icons__grid--align-end .text-icons__item {
    justify-items: end;
    text-align: end;
  }

  .text-icons--beside .text-icons__grid--align-end .text-icons__item {
    justify-items: start;
  }


  /* ---- card styles ---------------------------------------------------- * The frame groups a mark with its sentence, which the gap alone stops doing once the columns are narrow. Plain is the default: a promise does not need a box to be read. */
  .text-icons--card-outlined .text-icons__item,
  .text-icons--card-filled .text-icons__item {
    padding: 1.25rem;
    border-radius: var(--card-radius, 0);
  }

  .text-icons--card-outlined .text-icons__item {
    border: 1px solid rgba(var(--color-foreground), 0.14);
  }

  .text-icons--card-filled .text-icons__item {
    background: rgba(var(--color-foreground), 0.05);
  }

  /* ---- swipe row ------------------------------------------------------ */
  .text-icons__row-wrap {
    position: relative;
  }

  /* Holds the row and nothing else, so an arrow at 50% is at the middle of the cards rather than the middle of the cards plus the paging under them. The half of each arrow that hangs outside has to be allowed out. */
  .text-icons__row-frame {
    position: relative;
    overflow: visible;
  }

  /* The paging sat flush against the bottom of the row, which read as part of the last card rather than as a control over the whole of it. Close enough to still belong to the row, far enough to be a separate thing. */
  /* Straddling the row's edge — half the button over the first card, half outside it. Parked entirely in the gutter they would need the row inset to make room, and the cards would stop filling the column; sitting on the edge costs a quarter of one card's padding and nothing else. */
  .text-icons__arrow {
    --arrow-size: 2.5rem;
    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    display: none;
    place-items: center;
    width: var(--arrow-size);
    height: var(--arrow-size);
    padding: 0;
    border: 1px solid var(--arrow-border);
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    /* Lifted off the row so it reads as sitting above the cards rather than
       cut into them. */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    translate: 0 -50%;
    cursor: pointer;
  }

  @media screen and (min-width: 990px) {
    .text-icons__arrow {
      display: grid;
    }
    /* `hidden` is only a UA stylesheet rule, and the `display: grid` above beats it on specificity alone. theme.js sets the attribute when the row has nothing to page through — four cards in four columns — so without this the arrows stayed on screen and did nothing when clicked. */
    .text-icons__arrow[hidden] {
      display: none;
    }
  }

  .text-icons__arrow svg {
    width: 1rem;
    height: 1rem;
  }

  .text-icons__arrow--prev {
    inset-inline-start: calc(var(--arrow-size) / -2);
    rotate: 180deg;
  }

  .text-icons__arrow--next {
    inset-inline-end: calc(var(--arrow-size) / -2);
  }

  /* Turned off rather than removed at the ends, so the pair does not shift
     position as a shopper reaches either edge. */
  .text-icons__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .text-icons__row-wrap .scroll-dots {
    margin-block-start: 1.25rem;
  }

  /* Below 750px the row bleeds to the screen edge, so the item at the edge reads as cut off rather than as the last one. */
  .text-icons__grid--swipe {
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(16rem, 72vw), 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  @media screen and (max-width: 749px) {
    .text-icons__grid--swipe {
      padding-inline: var(--page-margin);
    scroll-padding-inline-start: var(--page-margin);
      margin-inline: calc(-1 * var(--page-margin));
    }
  }

  .text-icons__grid--swipe::-webkit-scrollbar {
    display: none;
  }

  /* After the rule above, not before it: both set `grid-auto-columns` at the
     same specificity, so the later one wins. Placed first, this was silently
     losing and the row sized itself from the phone track and never overflowed.

     At every width, not just on a phone — a merchant who chose a swipe row and
     has seven promises would otherwise get a wrapped grid on desktop and a row
     only below 990px, so the setting would mean two different things depending
     on the screen. A fixed track rather than a minmax with a zero floor, or the
     items compress to fit and a swipe row that fits is a grid. */
  @media screen and (min-width: 750px) {
    .text-icons__grid--swipe {
      grid-template-columns: none;
      grid-auto-columns: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
    }
  }

  .text-icons__grid--swipe > .text-icons__item {
    scroll-snap-align: start;
  }

  /* ---- marquee -------------------------------------------------------- * Two identical tracks side by side, the pair translated the width of one. */
  .text-icons__marquee {
    display: flex;
    gap: var(--gap);
    overflow: hidden;
    /* Edge to edge: a strip that stops at the content column reads as a row
       that has run out rather than one that continues. */
    margin-inline: calc(-1 * var(--page-margin));
    padding-inline: var(--page-margin);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }

  .text-icons__track {
    display: flex;
    flex: none;
    gap: var(--gap);
    padding: 0;
    margin: 0;
    list-style: none;
    animation: text-icons-marquee var(--marquee-duration, 30s) linear infinite;
  }

  .text-icons__track > .text-icons__item {
    flex: none;
    width: min(18rem, 70vw);
  }

  /* Paused while a shopper is reading one, or tabbing through the links in it. */
  .text-icons__marquee:hover .text-icons__track,
  .text-icons__marquee:focus-within .text-icons__track {
    animation-play-state: paused;
  }

  @keyframes text-icons-marquee {
    to {
      /* The gap belongs to the flex container, so one track's travel is its own
         width plus the gap that follows it. */
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

  /* Asked to be spared moving text, so it stops being a marquee and becomes a
     row that moves when pushed. */
  @media (prefers-reduced-motion: reduce) {
    .text-icons__marquee {
      overflow-x: auto;
    }

    .text-icons__track {
      animation: none;
    }

    .text-icons__marquee > .text-icons__track[aria-hidden='true'] {
      display: none;
    }
  }

  .text-icons__empty {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
  }

  .text-icons__app {
    margin-block-start: 2rem;
  }
/* END_SECTION:text-icons */

/* START_SECTION:tool-body-shape-calculator (INDEX:77) */
.bsc { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .bsc__head-wrap, .bsc__section, .bsc__cta { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .bsc__head-wrap { max-width: 1032px; }
  .bsc__section { max-width: 1032px; }

  .bsc__crumbs { margin-block-end: 24px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .bsc__crumbs a { color: #6f6250; text-decoration: none; }
  .bsc__crumbs a:hover { color: #2a251f; }
  .bsc__crumbs [aria-current] { color: #2a251f; }

  .bsc__head { text-align: center; }
  .bsc__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .bsc__intro { max-width: 640px; margin: 14px auto 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }

  .bsc__section { margin-block-start: clamp(40px, 5vw, 56px); }
  .bsc__tool-section { margin-block-start: clamp(28px, 4vw, 40px); }

  /* Quiz card */
  .bsc__tool { max-width: 1032px; margin-inline: auto; }
  .bsc__card { border: 1px solid #ece3d4; background: #fff; padding: clamp(20px, 3.5vw, 34px); }
  .bsc__card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .bsc__step-count { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }
  .bsc__dots { display: flex; gap: 6px; }
  .bsc__dot { width: 6px; height: 6px; border-radius: 50%; background: #e0d4c0; }
  .bsc__dot--on { background: #c04a63; }
  .bsc__q-title { margin: 16px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; color: #2a251f; }
  .bsc__q-sub { margin: 6px 0 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.6; color: #7c7264; }
  .bsc__card-body { margin-block-start: 20px; }

  /* Choice grid */
  .bsc__choices { display: grid; grid-template-columns: 1fr; gap: 10px; }
  @media (min-width: 640px) { .bsc__choices { grid-template-columns: repeat(2, 1fr); } }
  .bsc__choice { display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; border: 1px solid #ece3d4; background: #fff; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; font-family: var(--font-body--family); }
  .bsc__choice:hover { border-color: #2a251f; }
  .bsc__choice--on { border-color: #c04a63; background: rgba(192, 74, 99, 0.06); }
  .bsc__choice-label { font-family: var(--font-body--family); font-size: 14.5px; font-weight: 600; color: #2a251f; }

  /* Number field */
  .bsc__field { display: block; }
  .bsc__label { display: block; margin-block-end: 6px; font-family: var(--font-body--family); font-size: 13px; font-weight: 500; color: #2a251f; }
  .bsc__input-row { display: flex; align-items: center; gap: 8px; }
  .bsc__input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #d8ccb8; background: #faf6ef; font-family: var(--font-body--family); font-size: 16px; color: #2a251f; outline: none; transition: border-color 0.2s ease; }
  .bsc__input:focus { border-color: #c04a63; }
  .bsc__unit-suffix { font-family: var(--font-body--family); font-size: 13px; font-weight: 600; color: #7c7264; }
  .bsc__submit { margin-block-start: 18px; padding: 12px 32px; border: 0; border-radius: 999px; background: #2a251f; color: #faf8f3; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background-color 0.2s ease; }
  .bsc__submit:hover { background: #c04a63; }
  .bsc__submit:disabled { opacity: 0.45; cursor: default; }
  .bsc__submit:disabled:hover { background: #2a251f; }

  .bsc__back { margin-block-start: 20px; display: inline-block; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; color: #7c7264; }
  .bsc__back:hover { color: #2a251f; text-decoration: underline; text-underline-offset: 2px; }

  /* Summary bar */
  .bsc__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #ece3d4; background: #fff; padding: clamp(14px, 2.5vw, 20px); }
  .bsc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .bsc__chip { display: inline-block; border-radius: 999px; background: #f6f1e9; padding: 6px 12px; font-family: var(--font-body--family); font-size: 12px; font-weight: 600; color: #2a251f; }
  .bsc__summary-actions { display: flex; gap: 16px; }
  .bsc__ilink { padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; color: #7c7264; }
  .bsc__ilink:hover { color: #2a251f; text-decoration: underline; text-underline-offset: 2px; }
  .bsc__ilink--accent { color: #c04a63; }
  .bsc__ilink--accent:hover { color: #c04a63; }

  /* Result */
  .bsc__result-wrap { margin-block-start: 24px; }
  .bsc__result { border: 1px solid #ece3d4; background: #f6f1e9; padding: clamp(18px, 3vw, 28px); }
  .bsc__result-eyebrow { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #7c7264; }
  .bsc__result-name { margin-block-start: 4px; font-family: var(--font-heading--family); font-weight: 400; font-size: 30px; line-height: 1.15; color: #2a251f; }
  .bsc__result-ico { margin-inline-end: 8px; }
  .bsc__result-summary { max-width: 560px; margin: 8px 0 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.7; color: #5e5547; }
  .bsc__result-links { margin-block-start: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

  /* Tips list (shared) */
  .bsc__tips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  .bsc__tip { display: flex; gap: 8px; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.6; color: #5e5547; }
  .bsc__bullet { color: #c04a63; }

  .bsc__hint { margin: 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.7; color: #6f6250; }

  /* Section heads */
  .bsc__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #2a251f; }
  .bsc__h2--center { text-align: center; }

  /* How to measure */
  .bsc__steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .bsc__step-item { font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .bsc__step-item strong { color: #2a251f; font-weight: 600; }

  /* Shape guides */
  .bsc__shapes { margin-block-start: 20px; display: flex; flex-direction: column; gap: 16px; }
  .bsc__shape { border: 1px solid #ece3d4; background: #fff; padding: clamp(16px, 2.5vw, 24px); }
  .bsc__shape-name { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 19px; color: #2a251f; }
  .bsc__shape-ico { margin-inline-end: 6px; }
  .bsc__shape-summary { margin: 6px 0 0; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.7; color: #5e5547; }
  .bsc__pills { margin-block-start: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
  .bsc__pill { display: inline-block; border: 1px solid #2a251f; border-radius: 999px; padding: 6px 14px; font-family: var(--font-body--family); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #2a251f; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
  .bsc__pill:hover { background: #2a251f; color: #faf8f3; }

  /* FAQ */
  .bsc__faq { max-width: 1032px; }
  .bsc__faq-list { margin-block-start: 24px; border-block-start: 1px solid #e6dcca; }
  .bsc__faq-item { border-block-end: 1px solid #e6dcca; }
  .bsc__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .bsc__faq-q::-webkit-details-marker { display: none; }
  .bsc__faq-plus { font-size: 20px; line-height: 1; color: #9c6470; transition: transform 0.2s ease; }
  .bsc__faq-item[open] .bsc__faq-plus { transform: rotate(45deg); }
  .bsc__faq-a { margin: -2px 0 0; padding-block-end: 16px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  /* More tools */
  .bsc__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .bsc__more-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .bsc__more-all { font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #c04a63; text-decoration: none; white-space: nowrap; }
  .bsc__more-all:hover { text-decoration: underline; text-underline-offset: 2px; }
  .bsc__more-grid { margin-block-start: 18px; display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .bsc__more-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .bsc__more-grid { grid-template-columns: repeat(4, 1fr); } }
  .bsc__more-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .bsc__more-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(42, 37, 31, 0.45); }
  .bsc__more-ico { font-size: 22px; line-height: 1; }
  .bsc__more-name { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.2; color: #2a251f; }
  .bsc__more-card:hover .bsc__more-name { color: #c04a63; }
  .bsc__more-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  /* CTA */
  .bsc__cta { max-width: 1032px; margin-block-start: clamp(44px, 6vw, 68px); background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .bsc__cta-body { max-width: 480px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .bsc__cta-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .bsc__cta-actions { flex-direction: row; } }

  /* Buttons */
  .bsc__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
  .bsc__btn--sm { padding: 11px 20px; font-size: 11.5px; }
  .bsc__btn--solid { background: #2a251f; color: #faf8f3; }
  .bsc__btn--solid:hover { background: #c04a63; }
  .bsc__btn--outline { border: 1px solid #2a251f; color: #2a251f; }
  .bsc__btn--outline:hover { background: #2a251f; color: #faf8f3; }
/* END_SECTION:tool-body-shape-calculator */

/* START_SECTION:tool-capsule-wardrobe-planner (INDEX:78) */
.cwp { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .cwp__head-wrap, .cwp__section, .cwp__cta { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .cwp__head-wrap { max-width: 1032px; }
  .cwp__section { max-width: 1032px; }

  .cwp__crumbs { margin-block-end: 24px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .cwp__crumbs a { color: #6f6250; text-decoration: none; }
  .cwp__crumbs a:hover { color: #2a251f; }
  .cwp__crumbs [aria-current] { color: #2a251f; }

  .cwp__head { text-align: center; }
  .cwp__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .cwp__intro { max-width: 620px; margin: 14px auto 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }

  .cwp__section { margin-block-start: clamp(40px, 5vw, 56px); }
  .cwp__planner-section { margin-block-start: clamp(28px, 4vw, 40px); }

  .cwp__eyebrow { display: block; font-family: var(--font-body--family); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #8a5060; }
  .cwp__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #2a251f; }
  .cwp__h2--center { text-align: center; }
  .cwp__section-intro { margin: 12px 0 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }

  /* Planner card */
  .cwp__planner { border: 1px solid #ece3d4; background: #fff; padding: clamp(18px, 3vw, 28px); }
  .cwp__selectors { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.4vw, 22px); }
  @media (min-width: 760px) { .cwp__selectors { grid-template-columns: 1fr 1fr; } }
  .cwp__selector-label { display: block; margin-block-end: 10px; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; color: #2a251f; }
  .cwp__options { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .cwp__option { display: block; width: 100%; text-align: left; cursor: pointer; border: 1px solid #ece3d4; background: #faf6ef; padding: 12px 14px; transition: border-color 0.2s ease, background-color 0.2s ease; }
  .cwp__option:hover { border-color: #2a251f; }
  .cwp__option--active { border-color: #c04a63; background: rgba(192, 74, 99, 0.06); }
  .cwp__option-title { display: block; font-family: var(--font-body--family); font-size: 14.5px; font-weight: 600; color: #2a251f; }
  .cwp__option-note { display: block; margin-block-start: 2px; font-family: var(--font-body--family); font-size: 12.5px; line-height: 1.5; color: #7c7264; }

  /* Progress */
  .cwp__progress-wrap { margin-block-start: clamp(20px, 3vw, 26px); border-block-start: 1px solid #ece3d4; padding-block-start: clamp(18px, 2.5vw, 22px); }
  .cwp__progress { margin-block-start: 8px; }
  .cwp__progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--font-body--family); font-size: 13px; color: #7c7264; }
  .cwp__progress-count strong { color: #2a251f; font-weight: 600; }
  .cwp__progress-pct { font-weight: 600; color: #c04a63; }
  .cwp__progress-track { margin-block-start: 8px; height: 6px; overflow: hidden; background: #e0d4c0; }
  .cwp__progress-fill { height: 100%; background: #c04a63; transition: width 0.5s ease; }

  /* Checklist */
  .cwp__checklist { margin-block-start: clamp(22px, 3vw, 28px); display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
  @media (min-width: 760px) { .cwp__checklist { grid-template-columns: 1fr 1fr; } }
  .cwp__cat { border: 1px solid #ece3d4; background: #faf6ef; padding: 18px; }
  .cwp__cat-title { margin: 0 0 12px; font-family: var(--font-heading--family); font-weight: 400; font-size: 18px; color: #2a251f; }
  .cwp__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .cwp__item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .cwp__item-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; flex: 1 1 auto; min-width: 0; }
  .cwp__check { margin-block-start: 2px; width: 18px; height: 18px; flex-shrink: 0; accent-color: #c04a63; cursor: pointer; }
  .cwp__item-text { min-width: 0; }
  .cwp__item-name { display: block; font-family: var(--font-body--family); font-size: 14.5px; font-weight: 600; color: #2a251f; }
  .cwp__item-note { display: block; margin-block-start: 1px; font-family: var(--font-body--family); font-size: 12.5px; line-height: 1.5; color: #7c7264; }
  .cwp__item--done .cwp__item-name { text-decoration: line-through; font-weight: 400; color: #9c8f7c; }
  .cwp__item--done .cwp__item-note { color: #9c8f7c; }
  .cwp__item-shop { flex-shrink: 0; align-self: flex-start; margin-block-start: 2px; font-family: var(--font-body--family); font-size: 12px; font-weight: 600; color: #c04a63; text-decoration: none; white-space: nowrap; }
  .cwp__item-shop:hover { text-decoration: underline; text-underline-offset: 2px; }
  .cwp__item--done .cwp__item-shop { display: none; }

  /* Crawlable reference */
  .cwp__ref { margin-block-start: 16px; display: flex; flex-direction: column; gap: 16px; }
  .cwp__ref-group-title { margin: 0 0 4px; font-family: var(--font-heading--family); font-weight: 400; font-size: 16px; color: #2a251f; }
  .cwp__ref-line { margin: 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.75; color: #5e5547; }
  .cwp__ref-line a { color: #2a251f; text-decoration: none; }
  .cwp__ref-line a:hover { color: #c04a63; text-decoration: underline; text-underline-offset: 2px; }

  /* How-to steps */
  .cwp__steps { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .cwp__steps li { font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .cwp__steps strong { color: #2a251f; font-weight: 600; }

  /* Commercial bridge */
  .cwp__bridge { border: 1px solid #ece3d4; background: #fff; padding: clamp(20px, 3vw, 30px); text-align: center; }
  .cwp__bridge-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .cwp__bridge-body { max-width: 460px; margin: 8px auto 0; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.65; color: #7c7264; }
  .cwp__bridge-actions { margin-block-start: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

  /* Buttons */
  .cwp__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
  .cwp__btn--sm { padding: 11px 20px; font-size: 11.5px; }
  .cwp__btn--solid { background: #2a251f; color: #faf8f3; }
  .cwp__btn--solid:hover { background: #c04a63; }
  .cwp__btn--outline { border: 1px solid #2a251f; color: #2a251f; }
  .cwp__btn--outline:hover { background: #2a251f; color: #faf8f3; }

  /* FAQ */
  .cwp__faq { max-width: 1032px; }
  .cwp__faq-list { margin-block-start: 20px; border-block-start: 1px solid #e6dcca; }
  .cwp__faq-item { border-block-end: 1px solid #e6dcca; }
  .cwp__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .cwp__faq-q::-webkit-details-marker { display: none; }
  .cwp__faq-plus { font-size: 20px; line-height: 1; color: #9c6470; transition: transform 0.2s ease; }
  .cwp__faq-item[open] .cwp__faq-plus { transform: rotate(45deg); }
  .cwp__faq-a { margin: -2px 0 0; padding-block-end: 16px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  /* More tools */
  .cwp__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .cwp__more-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .cwp__more-all { font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #c04a63; text-decoration: none; white-space: nowrap; }
  .cwp__more-all:hover { text-decoration: underline; text-underline-offset: 2px; }
  .cwp__more-grid { margin-block-start: 18px; display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .cwp__more-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .cwp__more-grid { grid-template-columns: repeat(4, 1fr); } }
  .cwp__more-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .cwp__more-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(42, 37, 31, 0.45); }
  .cwp__more-ico { font-size: 22px; line-height: 1; }
  .cwp__more-name { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.2; color: #2a251f; }
  .cwp__more-card:hover .cwp__more-name { color: #c04a63; }
  .cwp__more-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  /* CTA */
  .cwp__cta { max-width: 1032px; margin-block-start: clamp(44px, 6vw, 68px); background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .cwp__cta-body { max-width: 480px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .cwp__cta-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .cwp__cta-actions { flex-direction: row; } }
/* END_SECTION:tool-capsule-wardrobe-planner */

/* START_SECTION:tool-clothing-size-calculator (INDEX:79) */
.csc { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .csc__head-wrap, .csc__section, .csc__cta { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .csc__head-wrap { max-width: 1032px; }
  .csc__section { max-width: 1032px; }

  .csc__crumbs { margin-block-end: 24px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .csc__crumbs a { color: #6f6250; text-decoration: none; }
  .csc__crumbs a:hover { color: #2a251f; }
  .csc__crumbs [aria-current] { color: #2a251f; }

  .csc__head { text-align: center; }
  .csc__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .csc__intro { max-width: 620px; margin: 14px auto 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }

  .csc__section { margin-block-start: clamp(40px, 5vw, 56px); }
  .csc__tool-section { margin-block-start: clamp(28px, 4vw, 40px); }

  .csc__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #2a251f; }
  .csc__h2--center { text-align: center; }
  .csc__lead { max-width: 640px; margin: 8px 0 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.7; color: #7c7264; }

  /* Calculator card */
  .csc__tool { max-width: 1032px; margin-inline: auto; display: flex; flex-direction: column; gap: 18px; border: 1px solid #ece3d4; background: #fff; padding: clamp(18px, 3vw, 28px); box-sizing: border-box; }
  .csc__field { display: block; }
  .csc__label { display: block; margin-block-end: 8px; padding: 0; font-family: var(--font-body--family); font-size: 13px; font-weight: 500; color: #2a251f; }
  legend.csc__label { margin: 0 0 8px; }
  .csc__inline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
  .csc__group { display: inline-flex; align-items: center; gap: 10px; }

  .csc__inputwrap { display: inline-flex; align-items: center; border: 1px solid #d8ccb8; background: #faf6ef; padding: 0 12px; transition: border-color 0.2s ease; }
  .csc__inputwrap:focus-within { border-color: #c04a63; }
  .csc__num { width: 62px; border: 0; background: transparent; padding: 12px 0; font-family: var(--font-body--family); font-size: 15px; color: #2a251f; outline: none; }
  .csc__inputwrap--wide .csc__num { width: 100px; }
  .csc__inputwrap--fill { display: flex; }
  .csc__inputwrap--fill .csc__num { width: 100%; }
  .csc__unit { margin-inline-start: 6px; font-family: var(--font-body--family); font-size: 12px; color: #7c7264; white-space: nowrap; }

  .csc__toggle { display: inline-flex; border: 1px solid #d8ccb8; }
  .csc__toggle button { border: 0; background: transparent; padding: 10px 12px; font-family: var(--font-body--family); font-size: 12px; color: #7c7264; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
  .csc__toggle button.is-active { background: #2a251f; color: #faf8f3; }

  .csc__shapes { display: grid; grid-template-columns: 1fr; gap: 18px; }
  @media (min-width: 560px) { .csc__shapes { grid-template-columns: 1fr 1fr; } }
  .csc__seg { border: 0; padding: 0; margin: 0; min-width: 0; }
  .csc__seg-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .csc__seg-opt { position: relative; display: block; }
  .csc__seg-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
  .csc__seg-opt span { display: block; text-align: center; border: 1px solid #d8ccb8; background: #fff; padding: 10px 6px; font-family: var(--font-body--family); font-size: 13.5px; color: #2a251f; cursor: pointer; transition: border-color 0.2s ease; }
  .csc__seg-opt span:hover { border-color: #2a251f; }
  .csc__seg-opt input:checked + span { border-color: #2a251f; font-weight: 600; box-shadow: inset 0 0 0 1px #2a251f; }
  .csc__seg-opt input:focus-visible + span { outline: 2px solid #c04a63; outline-offset: 2px; }

  .csc__pref-cur { margin: 0 0 6px; font-family: var(--font-body--family); font-size: 14px; font-weight: 600; color: #2a251f; }
  .csc__range { width: 100%; accent-color: #c04a63; }
  .csc__pref-ends { display: flex; justify-content: space-between; margin-block-start: 4px; font-family: var(--font-body--family); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  .csc__optional { border: 1px solid #d8ccb8; background: #faf6ef; }
  .csc__optional-sum { padding: 12px 14px; cursor: pointer; list-style: none; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; color: #2a251f; }
  .csc__optional-sum::-webkit-details-marker { display: none; }
  .csc__optional-body { padding: 0 14px 16px; display: flex; flex-direction: column; gap: 16px; }
  .csc__optional-body .csc__label { color: #2a251f; }
  .csc__tape { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .csc__select { width: 100%; box-sizing: border-box; border: 1px solid #d8ccb8; background: #fff; padding: 11px 12px; font-family: var(--font-body--family); font-size: 15px; color: #2a251f; outline: none; }
  .csc__select:focus { border-color: #c04a63; }
  .csc__hint { margin: 0; font-family: var(--font-body--family); font-size: 12px; line-height: 1.55; color: #7c7264; }

  .csc__error { margin: 0; font-family: var(--font-body--family); font-size: 13px; color: #c04a63; }
  .csc__submit { align-self: flex-start; }

  /* Result */
  .csc__result { max-width: 520px; margin: clamp(20px, 4vw, 28px) auto 0; border: 1px solid #ece3d4; background: #fff; padding: clamp(24px, 4vw, 32px); text-align: center; }
  .csc__result-eyebrow { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #8a5060; }
  .csc__result-size { display: block; margin-block-start: 6px; font-family: var(--font-heading--family); font-size: 44px; line-height: 1; color: #2a251f; }
  .csc__result-measure { margin: 14px 0 0; font-family: var(--font-body--family); font-size: 12.5px; line-height: 1.5; color: #7c7264; }
  .csc__result-between { max-width: 400px; margin: 12px auto 0; border: 1px solid #d8ccb8; background: #faf6ef; padding: 10px 14px; font-family: var(--font-body--family); font-size: 12.5px; line-height: 1.5; color: #5e5547; }
  .csc__result-copy { max-width: 400px; margin: 14px auto 0; font-family: var(--font-body--family); font-size: 13px; line-height: 1.6; color: #6f6250; }
  .csc__result-actions { margin-block-start: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

  /* How it works */
  .csc__steps { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .csc__step { display: flex; gap: 14px; border: 1px solid #ece3d4; background: #fff; padding: 16px; }
  .csc__step-num { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(192, 74, 99, 0.1); font-family: var(--font-body--family); font-size: 13px; font-weight: 700; color: #c04a63; }
  .csc__step-text { font-family: var(--font-body--family); font-size: 14px; line-height: 1.65; color: #5e5547; }
  .csc__step-text strong { color: #2a251f; font-weight: 600; }

  /* Size chart */
  .csc__table-wrap { margin-block-start: 20px; overflow-x: auto; border: 1px solid #ece3d4; background: #fff; }
  .csc__table { width: 100%; min-width: 520px; border-collapse: collapse; }
  .csc__th { white-space: nowrap; border-block-end: 1px solid #e6dcca; padding: 12px 16px; text-align: left; font-family: var(--font-heading--family); font-size: 14px; font-weight: 600; color: #2a251f; background: #faf6ef; }
  .csc__td { white-space: nowrap; border-block-end: 1px solid #ece3d4; padding: 10px 16px; font-family: var(--font-body--family); font-size: 14px; color: #5e5547; }
  .csc__td--head { font-weight: 600; color: #2a251f; }
  .csc__table tbody tr:last-child .csc__td { border-block-end: 0; }
  .csc__note { margin: 12px 0 0; font-family: var(--font-body--family); font-size: 13px; line-height: 1.6; color: #6f6250; }

  /* Buttons */
  .csc__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; cursor: pointer; border: 0; transition: background-color 0.2s ease, color 0.2s ease; }
  .csc__btn--solid { background: #2a251f; color: #faf8f3; }
  .csc__btn--solid:hover { background: #c04a63; }
  .csc__btn--outline { background: transparent; border: 1px solid #2a251f; color: #2a251f; }
  .csc__btn--outline:hover { background: #2a251f; color: #faf8f3; }

  /* FAQ */
  .csc__faq { max-width: 1032px; }
  .csc__faq-list { margin-block-start: 20px; border-block-start: 1px solid #e6dcca; }
  .csc__faq-item { border-block-end: 1px solid #e6dcca; }
  .csc__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .csc__faq-q::-webkit-details-marker { display: none; }
  .csc__faq-plus { font-size: 20px; line-height: 1; color: #9c6470; transition: transform 0.2s ease; }
  .csc__faq-item[open] .csc__faq-plus { transform: rotate(45deg); }
  .csc__faq-a { margin: -2px 0 0; padding-block-end: 16px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  /* More tools */
  .csc__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .csc__more-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .csc__more-all { font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #c04a63; text-decoration: none; white-space: nowrap; }
  .csc__more-all:hover { text-decoration: underline; text-underline-offset: 2px; }
  .csc__more-grid { margin-block-start: 18px; display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .csc__more-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .csc__more-grid { grid-template-columns: repeat(4, 1fr); } }
  .csc__more-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .csc__more-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(42, 37, 31, 0.45); }
  .csc__more-ico { font-size: 22px; line-height: 1; }
  .csc__more-name { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.2; color: #2a251f; }
  .csc__more-card:hover .csc__more-name { color: #c04a63; }
  .csc__more-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  /* CTA */
  .csc__cta { max-width: 1032px; margin-block-start: clamp(44px, 6vw, 68px); background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .csc__cta-body { max-width: 480px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .csc__cta-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .csc__cta-actions { flex-direction: row; } }
/* END_SECTION:tool-clothing-size-calculator */

/* START_SECTION:tool-color-analysis-quiz (INDEX:80) */
.caq { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .caq__head-wrap, .caq__section, .caq__cta { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .caq__head-wrap { max-width: 1032px; }
  .caq__section { max-width: 1032px; margin-block-start: clamp(40px, 5vw, 56px); }
  .caq__quiz-section { margin-block-start: clamp(28px, 4vw, 44px); }

  .caq__crumbs { margin-block-end: 24px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .caq__crumbs a { color: #6f6250; text-decoration: none; }
  .caq__crumbs a:hover { color: #2a251f; }
  .caq__crumbs [aria-current] { color: #2a251f; }

  .caq__head { text-align: center; }
  .caq__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .caq__intro { max-width: 600px; margin: 14px auto 0; font-family: var(--font-body--family); font-size: 16px; line-height: 1.7; color: #7c7264; }

  /* Quiz card */
  .caq__card { border: 1px solid #ece3d4; background: #fff; padding: clamp(20px, 3.5vw, 34px); }
  .caq__card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .caq__step { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #6f6250; }
  .caq__dots { display: flex; gap: 6px; }
  .caq__dot { width: 6px; height: 6px; border-radius: 50%; background: #e0d4c0; }
  .caq__dot--on { background: #c04a63; }
  .caq__q { margin: 16px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; color: #2a251f; }
  .caq__choices { margin-block-start: 20px; display: grid; gap: 10px; }
  .caq__choice { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border: 1px solid #ece3d4; background: #fff; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; font-family: var(--font-body--family); }
  .caq__choice:hover { border-color: #2a251f; }
  .caq__choice--active { border-color: #c04a63; background: rgba(192, 74, 99, 0.06); }
  .caq__choice-label { font-size: 14.5px; font-weight: 600; color: #2a251f; }
  .caq__back { margin-block-start: 20px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; color: #6f6250; }
  .caq__back:hover { color: #2a251f; text-decoration: underline; text-underline-offset: 2px; }

  .caq__noscript { margin-block-start: 16px; font-family: var(--font-body--family); font-size: 14px; line-height: 1.7; color: #5e5547; }
  .caq__noscript a { color: #c04a63; }

  /* Summary bar */
  .caq__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #ece3d4; background: #fff; padding: clamp(14px, 2.5vw, 20px); }
  .caq__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .caq__chip { padding: 6px 12px; border-radius: 999px; background: #efe7d9; font-family: var(--font-body--family); font-size: 12px; font-weight: 600; color: #2a251f; }
  .caq__summary-actions { display: flex; gap: 16px; }
  .caq__link-btn { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; color: #6f6250; }
  .caq__link-btn:hover { color: #2a251f; text-decoration: underline; text-underline-offset: 2px; }
  .caq__link-btn--accent { color: #c04a63; }
  .caq__link-btn--accent:hover { color: #c04a63; }

  /* Result card */
  .caq__result { margin-block-start: 24px; border: 1px solid #ece3d4; background: #efe7d9; padding: clamp(18px, 3vw, 28px); }
  .caq__result-eyebrow { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #7c7264; }
  .caq__result-name { margin-block-start: 4px; font-family: var(--font-heading--family); font-weight: 400; font-size: 30px; line-height: 1.2; color: #2a251f; }
  .caq__result-vibe { max-width: 560px; margin: 8px 0 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.7; color: #5e5547; }
  .caq__swatches { margin-block-start: 16px; display: flex; flex-wrap: wrap; gap: 12px; }
  .caq__swatch-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .caq__swatch { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(42, 37, 31, 0.15); }
  .caq__swatch-label { font-family: var(--font-body--family); font-size: 10.5px; color: #6f6250; }
  .caq__result-avoid { max-width: 560px; margin: 12px 0 0; font-family: var(--font-body--family); font-size: 13px; line-height: 1.6; color: #6f6250; }
  .caq__result-links { margin-block-start: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

  /* Buttons */
  .caq__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
  .caq__btn--solid { background: #2a251f; color: #faf8f3; border: 1px solid #2a251f; }
  .caq__btn--solid:hover { background: #c04a63; border-color: #c04a63; }
  .caq__btn--outline { border: 1px solid #2a251f; color: #2a251f; background: transparent; }
  .caq__btn--outline:hover { background: #2a251f; color: #faf8f3; }
  .caq__btn--sm { padding: 9px 16px; font-size: 11.5px; letter-spacing: 0.06em; }

  /* Section headings */
  .caq__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #2a251f; }

  /* Seasons grid */
  .caq__seasons { margin-block-start: 20px; display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 640px) { .caq__seasons { grid-template-columns: repeat(2, 1fr); } }
  .caq__season { border: 1px solid #ece3d4; background: #fff; padding: 20px; }
  .caq__season-name { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 19px; color: #2a251f; }
  .caq__season-swatches { margin-block-start: 8px; display: flex; gap: 6px; }
  .caq__season-swatch { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(42, 37, 31, 0.1); }
  .caq__season-vibe { margin: 10px 0 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.65; color: #5e5547; }

  /* FAQ */
  .caq__faq-list { margin-block-start: 20px; border-block-start: 1px solid #e6dcca; }
  .caq__faq-item { border-block-end: 1px solid #e6dcca; }
  .caq__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .caq__faq-q::-webkit-details-marker { display: none; }
  .caq__faq-plus { font-size: 20px; line-height: 1; color: #7c7264; transition: transform 0.2s ease; }
  .caq__faq-item[open] .caq__faq-plus { transform: rotate(45deg); }
  .caq__faq-a { margin: -2px 0 0; padding-block-end: 16px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  /* More tools */
  .caq__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .caq__more-link { font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #c04a63; text-decoration: none; white-space: nowrap; }
  .caq__more-link:hover { text-decoration: underline; text-underline-offset: 2px; }
  .caq__more-grid { margin-block-start: 16px; display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .caq__more-grid { grid-template-columns: repeat(3, 1fr); } }
  .caq__tool-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
  .caq__tool-card:hover { border-color: #2a251f; transform: translateY(-2px); }
  .caq__tool-ico { font-size: 22px; line-height: 1; }
  .caq__tool-title { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.2; color: #2a251f; }
  .caq__tool-card:hover .caq__tool-title { color: #c04a63; }
  .caq__tool-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  /* CTA */
  .caq__cta { max-width: 1032px; margin-block-start: clamp(44px, 6vw, 68px); background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .caq__cta-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(24px, 3vw, 34px); color: #2a251f; }
  .caq__cta-body { max-width: 480px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .caq__cta-actions { margin-block-start: 28px; display: flex; justify-content: center; }
/* END_SECTION:tool-color-analysis-quiz */

/* START_SECTION:tool-denim-fit-finder (INDEX:81) */
.dff { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .dff__wrap { width: 100%; max-width: 1032px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }

  .dff__crumbs { margin-block-end: 22px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .dff__crumbs a { color: #6f6250; text-decoration: none; }
  .dff__crumbs a:hover { color: #2a251f; }
  .dff__crumbs [aria-current] { color: #2a251f; }

  .dff__head { max-width: 640px; margin-inline: auto; text-align: center; }
  .dff__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .dff__intro { margin: 14px auto 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }

  .dff__noscript { margin: 20px 0 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.7; color: #5e5547; }
  .dff__noscript a { color: #c04a63; }

  /* Quiz card */
  .dff__quiz { margin-block-start: clamp(24px, 3.5vw, 34px); }
  .dff__card { border: 1px solid #ece3d4; background: #fff; padding: clamp(20px, 3.5vw, 34px); }
  .dff__card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .dff__stepno { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }
  .dff__dots { display: inline-flex; gap: 6px; }
  .dff__dot { width: 6px; height: 6px; border-radius: 50%; background: #e0d4c0; }
  .dff__dot.is-on { background: #c04a63; }
  .dff__card-title { margin: 16px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; color: #2a251f; }

  .dff__choices { display: grid; grid-template-columns: 1fr; gap: 10px; margin-block-start: 20px; }
  @media (min-width: 640px) { .dff__choices { grid-template-columns: repeat(2, 1fr); } }
  .dff__choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; text-align: left; cursor: pointer; border: 1px solid #ece3d4; background: #fff; transition: border-color 0.2s ease, background-color 0.2s ease; }
  .dff__choice:hover { border-color: #2a251f; }
  .dff__choice.is-active { border-color: #c04a63; background: rgba(192, 74, 99, 0.06); }
  .dff__choice-label { font-family: var(--font-body--family); font-size: 14.5px; font-weight: 600; color: #2a251f; }
  .dff__back { margin-block-start: 20px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; color: #7c7264; }
  .dff__back:hover { color: #2a251f; text-decoration: underline; text-underline-offset: 2px; }

  /* Summary bar */
  .dff__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #ece3d4; background: #fff; padding: clamp(14px, 2.5vw, 20px); }
  .dff__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .dff__chip { padding: 6px 12px; font-family: var(--font-body--family); font-size: 12px; font-weight: 600; color: #2a251f; background: #efe7d9; }
  .dff__summary-actions { display: flex; gap: 16px; }
  .dff__link-btn { padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; }
  .dff__link-btn--accent { color: #c04a63; }
  .dff__link-btn--accent:hover { text-decoration: underline; text-underline-offset: 2px; }
  .dff__link-btn--muted { color: #7c7264; }
  .dff__link-btn--muted:hover { color: #2a251f; text-decoration: underline; text-underline-offset: 2px; }

  /* Result card */
  .dff__result { margin-block-start: 24px; border: 1px solid #ece3d4; background: #efe7d9; padding: clamp(18px, 3vw, 28px); }
  .dff__result-eyebrow { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #8a5060; }
  .dff__result-name { margin-block-start: 4px; font-family: var(--font-heading--family); font-weight: 400; font-size: 30px; line-height: 1.15; color: #2a251f; }
  .dff__result-why { max-width: 560px; margin: 8px 0 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.7; color: #5e5547; }
  .dff__result-links { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 18px; }
  .dff__result-btn { display: inline-block; padding: 9px 16px; border: 1px solid #2a251f; background: transparent; font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; color: #2a251f; transition: background-color 0.2s ease, color 0.2s ease; }
  .dff__result-btn:hover { background: #2a251f; color: #faf8f3; }

  /* Sections */
  .dff__section { margin-block-start: clamp(40px, 5vw, 56px); }
  .dff__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #2a251f; }
  .dff__h2--center { text-align: center; }
  .dff__h2--flush { font-size: clamp(20px, 2.4vw, 26px); }

  .dff__fits { display: flex; flex-direction: column; gap: 16px; margin-block-start: 20px; }
  .dff__fit { border: 1px solid #ece3d4; background: #fff; padding: clamp(16px, 2.5vw, 24px); }
  .dff__fit-name { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 19px; color: #2a251f; }
  .dff__fit-why { margin: 6px 0 0; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.7; color: #5e5547; }
  .dff__fit-links { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 14px; }
  .dff__pill { display: inline-block; padding: 6px 14px; border: 1px solid #2a251f; border-radius: 999px; font-family: var(--font-body--family); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; color: #2a251f; transition: background-color 0.2s ease, color 0.2s ease; }
  .dff__pill:hover { background: #2a251f; color: #faf8f3; }

  .dff__rise-note { margin: 16px 0 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.65; color: #6f6250; }
  .dff__rise-note strong { color: #2a251f; font-weight: 600; }
  .dff__rise-note a { font-weight: 600; color: #c04a63; text-underline-offset: 2px; text-decoration: none; }
  .dff__rise-note a:hover { text-decoration: underline; }

  /* FAQ */
  .dff__faq-list { margin-block-start: 20px; border-block-start: 1px solid #e6dcca; }
  .dff__faq-item { border-block-end: 1px solid #e6dcca; }
  .dff__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .dff__faq-q::-webkit-details-marker { display: none; }
  .dff__faq-plus { font-size: 18px; line-height: 1; color: #7c7264; transition: transform 0.2s ease; }
  .dff__faq-item[open] .dff__faq-plus { transform: rotate(45deg); }
  .dff__faq-a { margin: -2px 0 0; padding-block-end: 16px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  /* More tools */
  .dff__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .dff__more-all { font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; color: #c04a63; }
  .dff__more-all:hover { text-decoration: underline; text-underline-offset: 2px; }
  .dff__more-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-block-start: 18px; }
  @media (min-width: 560px) { .dff__more-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .dff__more-grid { grid-template-columns: repeat(4, 1fr); } }
  .dff__tool { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .dff__tool:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(42, 37, 31, 0.45); }
  .dff__tool-ico { font-size: 22px; line-height: 1; }
  .dff__tool-title { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.2; color: #2a251f; }
  .dff__tool:hover .dff__tool-title { color: #c04a63; }
  .dff__tool-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  /* CTA */
  .dff__cta { width: 100%; max-width: 1032px; margin: clamp(44px, 6vw, 68px) auto 0; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); box-sizing: border-box; background: #efe7d9; text-align: center; }
  .dff__cta-body { max-width: 480px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .dff__cta-actions { margin-block-start: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .dff__cta-actions { flex-direction: row; } }
  .dff__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
  .dff__btn--solid { background: #2a251f; color: #faf8f3; }
  .dff__btn--solid:hover { background: #c04a63; }
  .dff__btn--outline { border: 1px solid #2a251f; color: #2a251f; }
  .dff__btn--outline:hover { background: #2a251f; color: #faf8f3; }
/* END_SECTION:tool-denim-fit-finder */

/* START_SECTION:tool-gift-finder (INDEX:82) */
.gf { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .gf__head-wrap, .gf__section, .gf__cta { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .gf__head-wrap { max-width: 1032px; }
  .gf__section { max-width: 1032px; }

  .gf__crumbs { margin-block-end: 24px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .gf__crumbs a { color: #6f6250; text-decoration: none; }
  .gf__crumbs a:hover { color: #2a251f; }
  .gf__crumbs [aria-current] { color: #2a251f; }

  .gf__head { text-align: center; }
  .gf__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .gf__intro { max-width: 620px; margin: 14px auto 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }

  .gf__section { margin-block-start: clamp(40px, 5vw, 56px); }
  .gf__tool-section { margin-block-start: clamp(28px, 4vw, 40px); }

  .gf__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #2a251f; }
  .gf__h2--center { text-align: center; }

  /* Quiz card */
  .gf__tool { min-height: 200px; }
  .gf__card { border: 1px solid #ece3d4; background: #fff; padding: clamp(20px, 3.5vw, 34px); }
  .gf__card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .gf__step { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #6f6250; }
  .gf__dots { display: inline-flex; gap: 6px; }
  .gf__dot { width: 6px; height: 6px; border-radius: 50%; background: #e0d4c0; }
  .gf__dot--on { background: #c04a63; }
  .gf__q { margin: 16px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; color: #2a251f; }

  .gf__choices { margin-block-start: 20px; display: grid; grid-template-columns: 1fr; gap: 10px; }
  @media (min-width: 640px) { .gf__choices { grid-template-columns: 1fr 1fr; } }
  .gf__choice { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; border: 1px solid #ece3d4; background: #fff; padding: 14px; text-align: left; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; font-family: var(--font-body--family); }
  .gf__choice:hover { border-color: #2a251f; }
  .gf__choice--active { border-color: #c04a63; background: rgba(192, 74, 99, 0.06); }
  .gf__choice-label { font-size: 14.5px; font-weight: 600; color: #2a251f; }

  .gf__back { margin-block-start: 20px; border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; color: #6f6250; }
  .gf__back:hover { color: #2a251f; text-decoration: underline; text-underline-offset: 2px; }

  /* Summary bar */
  .gf__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #ece3d4; background: #fff; padding: clamp(14px, 2.5vw, 20px); }
  .gf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .gf__chip { display: inline-block; background: #efe7d9; padding: 6px 12px; font-family: var(--font-body--family); font-size: 12px; font-weight: 600; color: #2a251f; }
  .gf__summary-actions { display: flex; gap: 16px; }
  .gf__link { border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; color: #c04a63; }
  .gf__link:hover { text-decoration: underline; text-underline-offset: 2px; }
  .gf__link--muted { color: #6f6250; }
  .gf__link--muted:hover { color: #2a251f; }

  /* Result */
  .gf__result { margin-block-start: clamp(24px, 3.5vw, 36px); background: #efe7d9; padding: clamp(22px, 3.5vw, 32px); }
  .gf__result-eyebrow { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #8a5060; }
  .gf__result-title { margin: 10px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; color: #2a251f; }
  .gf__result-body { margin: 12px 0 0; max-width: 560px; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .gf__result-actions { margin-block-start: 22px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  @media (min-width: 560px) { .gf__result-actions { flex-direction: row; align-items: center; } }

  /* Prose */
  .gf__prose { max-width: 1032px; }
  .gf__prose-body { margin: 16px 0 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.75; color: #5e5547; }

  /* FAQ */
  .gf__faq { max-width: 1032px; }
  .gf__faq-list { margin-block-start: 20px; border-block-start: 1px solid #e6dcca; }
  .gf__faq-item { border-block-end: 1px solid #e6dcca; }
  .gf__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .gf__faq-q::-webkit-details-marker { display: none; }
  .gf__faq-plus { font-size: 20px; line-height: 1; color: #9c6470; transition: transform 0.2s ease; }
  .gf__faq-item[open] .gf__faq-plus { transform: rotate(45deg); }
  .gf__faq-a { margin: -2px 0 0; padding-block-end: 16px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  /* More tools */
  .gf__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .gf__more-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .gf__more-all { font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #c04a63; text-decoration: none; white-space: nowrap; }
  .gf__more-all:hover { text-decoration: underline; text-underline-offset: 2px; }
  .gf__more-grid { margin-block-start: 18px; display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .gf__more-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .gf__more-grid { grid-template-columns: repeat(4, 1fr); } }
  .gf__more-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .gf__more-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(42, 37, 31, 0.45); }
  .gf__more-ico { font-size: 22px; line-height: 1; }
  .gf__more-name { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.2; color: #2a251f; }
  .gf__more-card:hover .gf__more-name { color: #c04a63; }
  .gf__more-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  /* Buttons */
  .gf__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
  .gf__btn--solid { background: #2a251f; color: #faf8f3; border: 1px solid #2a251f; }
  .gf__btn--solid:hover { background: #c04a63; border-color: #c04a63; }
  .gf__btn--outline { border: 1px solid #2a251f; color: #2a251f; background: none; }
  .gf__btn--outline:hover { background: #2a251f; color: #faf8f3; }

  /* CTA */
  .gf__cta { max-width: 1032px; margin-block-start: clamp(44px, 6vw, 68px); background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .gf__cta-body { max-width: 520px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .gf__cta-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .gf__cta-actions { flex-direction: row; } }
/* END_SECTION:tool-gift-finder */

/* START_SECTION:tool-packing-list-generator (INDEX:83) */
.plg { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .plg__head-wrap, .plg__section, .plg__cta { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .plg__head-wrap { max-width: 1032px; }
  .plg__section { max-width: 1032px; }

  .plg__crumbs { margin-block-end: 24px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .plg__crumbs a { color: #6f6250; text-decoration: none; }
  .plg__crumbs a:hover { color: #2a251f; }
  .plg__crumbs [aria-current] { color: #2a251f; }

  .plg__head { text-align: center; }
  .plg__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .plg__intro { max-width: 640px; margin: 14px auto 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }

  .plg__section { margin-block-start: clamp(40px, 5vw, 56px); }
  .plg__tool-section { margin-block-start: clamp(28px, 4vw, 40px); }

  .plg__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #2a251f; }
  .plg__h2--center { text-align: center; }

  /* Controls card */
  .plg__tool { border: 1px solid #ece3d4; background: #fff; padding: clamp(18px, 3vw, 26px); }
  .plg__fields { display: flex; flex-wrap: wrap; gap: 18px 40px; }
  .plg__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  .plg__legend { padding: 0; margin-block-end: 10px; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; color: #2a251f; }
  .plg__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .plg__chip { border: 1px solid #ece3d4; background: #fff; color: #2a251f; padding: 8px 16px; border-radius: 9999px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
  .plg__chip:hover { border-color: #2a251f; }
  .plg__chip--active { background: #2a251f; color: #faf8f3; border-color: #2a251f; }
  .plg__chip--active:hover { border-color: #2a251f; }

  /* Progress */
  .plg__progress { margin-block-start: 20px; }
  .plg__progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--font-body--family); font-size: 13px; color: #7c7264; }
  .plg__progress-label strong { color: #2a251f; font-weight: 600; }
  .plg__progress-pct { font-weight: 600; color: #c04a63; }
  .plg__bar-track { margin-block-start: 6px; height: 6px; overflow: hidden; border-radius: 9999px; background: #e0d4c0; }
  .plg__bar-fill { height: 100%; border-radius: 9999px; background: linear-gradient(to right, #c04a63, #d17a8d); transition: width 0.5s ease; }

  /* Checklist */
  .plg__list { margin-block-start: clamp(20px, 3vw, 30px); display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); }
  @media (min-width: 720px) { .plg__list { grid-template-columns: repeat(2, 1fr); } }
  .plg__cat { border: 1px solid #ece3d4; background: #fff; padding: 20px; }
  .plg__cat-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 18px; color: #2a251f; }
  .plg__items { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .plg__item { margin: 0; }
  .plg__check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
  .plg__cb { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; accent-color: #c04a63; cursor: pointer; }
  .plg__item-text { display: block; }
  .plg__item-name { display: block; font-family: var(--font-body--family); font-size: 14.5px; font-weight: 600; color: #2a251f; }
  .plg__item-name--done { color: #6f6250; text-decoration: line-through; }
  .plg__item-note { display: block; margin-block-start: 2px; font-family: var(--font-body--family); font-size: 12.5px; line-height: 1.5; color: #6f6250; }
  .plg__item-shop { display: inline-block; margin-block-start: 2px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; color: #c04a63; text-decoration: none; }
  .plg__item-shop:hover { text-decoration: underline; text-underline-offset: 2px; }
  .plg__item-shop[hidden] { display: none; }

  /* Tips */
  .plg__tips-list { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .plg__tips-list strong { color: #2a251f; font-weight: 600; }

  /* Wardrobe bridge */
  .plg__bridge { border: 1px solid #ece3d4; background: #fff; padding: clamp(20px, 3vw, 30px); text-align: center; }
  .plg__bridge-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .plg__bridge-body { max-width: 460px; margin: 8px auto 0; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.65; color: #7c7264; }
  .plg__bridge-actions { margin-block-start: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

  /* Buttons */
  .plg__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
  .plg__btn--sm { padding: 11px 20px; font-size: 11.5px; }
  .plg__btn--solid { background: #2a251f; color: #faf8f3; }
  .plg__btn--solid:hover { background: #c04a63; }
  .plg__btn--outline { border: 1px solid #2a251f; color: #2a251f; }
  .plg__btn--outline:hover { background: #2a251f; color: #faf8f3; }

  /* FAQ */
  .plg__faq { max-width: 1032px; }
  .plg__faq-list { margin-block-start: 20px; border-block-start: 1px solid #e6dcca; }
  .plg__faq-item { border-block-end: 1px solid #e6dcca; }
  .plg__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .plg__faq-q::-webkit-details-marker { display: none; }
  .plg__faq-plus { font-size: 20px; line-height: 1; color: #9c6470; transition: transform 0.2s ease; }
  .plg__faq-item[open] .plg__faq-plus { transform: rotate(45deg); }
  .plg__faq-a { margin: -2px 0 0; padding-block-end: 16px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  /* More tools */
  .plg__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .plg__more-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .plg__more-all { font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #c04a63; text-decoration: none; white-space: nowrap; }
  .plg__more-all:hover { text-decoration: underline; text-underline-offset: 2px; }
  .plg__more-grid { margin-block-start: 18px; display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .plg__more-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .plg__more-grid { grid-template-columns: repeat(4, 1fr); } }
  .plg__more-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .plg__more-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(42, 37, 31, 0.45); }
  .plg__more-ico { font-size: 22px; line-height: 1; }
  .plg__more-name { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.2; color: #2a251f; }
  .plg__more-card:hover .plg__more-name { color: #c04a63; }
  .plg__more-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  /* CTA */
  .plg__cta { max-width: 1032px; margin-block-start: clamp(44px, 6vw, 68px); background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .plg__cta-body { max-width: 480px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .plg__cta-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .plg__cta-actions { flex-direction: row; } }
/* END_SECTION:tool-packing-list-generator */

/* START_SECTION:tool-ring-size-calculator (INDEX:84) */
.rsc { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .rsc__inner { width: 100%; max-width: 1032px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }

  .rsc__crumbs { max-width: 1032px; margin: 0 auto 20px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .rsc__crumbs a { color: #6f6250; text-decoration: none; }
  .rsc__crumbs a:hover { color: #2a251f; }
  .rsc__crumbs [aria-current] { color: #2a251f; }

  .rsc__head { max-width: 1032px; margin-inline: auto; text-align: center; }
  .rsc__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .rsc__intro { margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }

  /* Calculator shell */
  .rsc__calc { max-width: 1032px; margin: 32px auto 0; border: 1px solid #ece3d4; background: #fff; padding: clamp(18px, 3vw, 26px); box-sizing: border-box; }
  .rsc__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
  .rsc__tab { border: 1px solid #ece3d4; background: #fff; color: #2a251f; padding: 8px 16px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
  .rsc__tab:hover { border-color: #2a251f; }
  .rsc__tab--active { background: #2a251f; border-color: #2a251f; color: #faf8f3; }

  .rsc__panel { display: none; }
  .rsc__panel--active { display: block; }
  .rsc__step { display: none; }
  .rsc__step--active { display: block; }

  /* Wizard header */
  .rsc__steps { margin-top: 20px; }
  .rsc__steps-bar { display: flex; align-items: center; gap: 8px; }
  .rsc__seg { display: block; height: 3px; flex: 1; background: #e6dcca; }
  .rsc__seg--on { background: #c04a63; }
  .rsc__back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid #ece3d4; background: #fff; color: #6f6250; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
  .rsc__back:hover { border-color: #2a251f; color: #2a251f; }
  .rsc__steps-cap { margin-top: 6px; text-align: center; font-family: var(--font-body--family); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: #6f6250; }
  .rsc__steps-dot { margin-inline: 6px; color: #e6dcca; }
  .rsc__steps-now { font-weight: 600; color: #2a251f; }

  .rsc__body { margin: 16px 0 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.65; color: #5e5547; }
  .rsc__body strong { color: #2a251f; font-weight: 600; }

  /* Drag stages */
  .rsc__stage { margin-top: 16px; display: flex; align-items: center; justify-content: center; background: #faf6ef; padding: 20px; }
  .rsc__stage--ring { min-height: 220px; }
  .rsc__cardbox { display: flex; align-items: flex-end; justify-content: flex-start; width: 320px; height: 202px; border: 2px dashed #c04a63; background: rgba(255, 255, 255, 0.5); cursor: ew-resize; user-select: none; touch-action: none; box-sizing: border-box; }
  .rsc__cardbox-label { margin: 8px; font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #6f6250; }
  .rsc__circle { position: relative; width: 64px; height: 64px; border: 2px solid #c04a63; border-radius: 50%; cursor: ew-resize; user-select: none; touch-action: none; box-sizing: border-box; }
  .rsc__cross { position: absolute; left: 50%; top: 50%; background: rgba(192, 74, 99, 0.6); }
  .rsc__cross--h { width: 12px; height: 1px; transform: translate(-50%, -50%); }
  .rsc__cross--v { width: 1px; height: 12px; transform: translate(-50%, -50%); }

  .rsc__range { margin-top: 20px; width: 100%; accent-color: #c04a63; }

  .rsc__btn-solid { margin-top: 16px; display: inline-flex; align-items: center; border: 1px solid #2a251f; background: #2a251f; color: #faf8f3; padding: 12px 28px; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
  .rsc__btn-solid:hover { background: #c04a63; border-color: #c04a63; }
  .rsc__arrow { margin-inline-start: 8px; }
  .rsc__recal { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ece3d4; background: #faf6ef; color: #2a251f; padding: 8px 16px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease; }
  .rsc__recal:hover { border-color: #2a251f; }

  /* Results */
  .rsc__result { margin-top: 20px; }
  .rsc__prompt { margin: 0; font-family: var(--font-body--family); font-size: 13.5px; color: #6f6250; }
  .rsc__result-card { background: #faf6ef; padding: 16px; }
  .rsc__result-label { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #7c7264; }
  .rsc__stats { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px 32px; }
  .rsc__stat-label { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #6f6250; }
  .rsc__stat-val { font-family: var(--font-heading--family); font-size: 26px; line-height: 1.15; color: #2a251f; }
  .rsc__stat-val--big { font-size: 34px; }
  .rsc__result-sub { margin-top: 8px; font-family: var(--font-body--family); font-size: 12.5px; color: #6f6250; }

  /* Manual entry */
  .rsc__manual { margin-top: 20px; }
  .rsc__field { display: block; }
  .rsc__field-label { display: block; margin-bottom: 6px; font-family: var(--font-body--family); font-size: 13px; font-weight: 500; color: #2a251f; }
  .rsc__input { width: 100%; border: 1px solid #d8ccb8; background: #faf6ef; padding: 12px 14px; font-family: var(--font-body--family); font-size: 16px; color: #2a251f; outline: none; box-sizing: border-box; transition: border-color 0.2s ease; }
  .rsc__input:focus { border-color: #c04a63; }

  /* Print ruler */
  .rsc__print { margin-top: 20px; }
  .rsc__print-h { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(19px, 2.2vw, 24px); color: #2a251f; }
  .rsc__print-p { margin: 12px 0 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .rsc__print-p strong { color: #2a251f; font-weight: 600; }
  .rsc__print-head { display: none; margin: 24px 0 0; font-family: var(--font-heading--family); font-size: 16px; color: #2a251f; }
  .rsc__print-note { margin: 12px 0 0; font-family: var(--font-body--family); font-size: 13px; line-height: 1.6; color: #6f6250; }
  .rsc__strip-wrap { margin-top: 24px; display: flex; justify-content: center; overflow-x: auto; padding-block: 8px; zoom: 1.5; }
  @media (min-width: 640px) { .rsc__strip-wrap { zoom: 2.2; } }
  .rsc__strip { width: 80mm; margin-inline: auto; font-family: var(--font-body--family); color: #2a251f; }
  .rsc__strip-sizes { position: relative; height: 12mm; }
  .rsc__ssz-wrap { position: absolute; bottom: 0; }
  .rsc__ssz { position: absolute; left: 50%; transform: translateX(-50%); font-size: 7.5pt; font-weight: 600; line-height: 1; color: #2a251f; }
  .rsc__strip-stick { position: absolute; bottom: 0; left: 0; width: 0.3mm; height: 3mm; background: #c04a63; }
  .rsc__strip-cap { position: absolute; font-size: 5.5pt; line-height: 1; color: #7c7264; }
  .rsc__strip-rule { height: 0.4mm; width: 100%; background: #2a251f; }
  .rsc__strip-mm { position: relative; height: 7mm; }
  .rsc__mm-wrap { position: absolute; top: 0; }
  .rsc__strip-tick { background: #2a251f; }
  .rsc__strip-cm { position: absolute; left: 50%; transform: translateX(-50%); font-size: 6.5pt; line-height: 1; color: #2a251f; }
  .rsc__strip-note { margin: 10px 0 0; font-size: 7.5pt; line-height: 1.5; color: #2a251f; }
  .rsc__strip-card { width: 85.6mm; height: 54mm; margin-top: 10px; display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(42, 37, 31, 0.6); box-sizing: border-box; }
  .rsc__strip-card span { padding-inline: 16px; text-align: center; font-size: 7.5pt; line-height: 1.5; color: #7c7264; }

  /* Supporting sections */
  .rsc__sec { max-width: 1032px; margin: clamp(40px, 5vw, 56px) auto 0; }
  .rsc__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #2a251f; }
  .rsc__h3 { margin: 24px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(17px, 2vw, 21px); color: #2a251f; }
  .rsc__lead { margin: 8px 0 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.7; color: #6f6250; }

  .rsc__steplist { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .rsc__stepitem { display: flex; gap: 12px; border: 1px solid #ece3d4; background: #fff; padding: 16px; }
  .rsc__num { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: rgba(192, 74, 99, 0.1); font-family: var(--font-body--family); font-size: 13px; font-weight: 700; color: #c04a63; }
  .rsc__steptext { font-family: var(--font-body--family); font-size: 14px; line-height: 1.65; color: #5e5547; }
  .rsc__steptext strong { color: #2a251f; }

  .rsc__need { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 500; color: #2a251f; }
  .rsc__need-label { color: #6f6250; }
  .rsc__pill { border: 1px solid #ece3d4; background: #fff; padding: 4px 12px; }
  .rsc__tip { margin: 16px 0 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.65; color: #6f6250; }
  .rsc__tip strong { color: #2a251f; }

  /* Conversion table */
  .rsc__table-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid #ece3d4; background: #fff; }
  .rsc__table { width: 100%; min-width: 520px; border-collapse: collapse; font-family: var(--font-body--family); font-size: 14px; color: #2a251f; }
  .rsc__th { border-block-end: 1px solid #e6dcca; background: #faf6ef; padding: 12px 16px; text-align: left; font-weight: 600; white-space: nowrap; }
  .rsc__td { border-block-end: 1px solid #ece3d4; padding: 10px 16px; white-space: nowrap; }
  .rsc__td--head { font-weight: 600; }
  .rsc__table tbody tr:last-child .rsc__td { border-block-end: 0; }

  /* Commercial bridge */
  .rsc__cta { max-width: 1032px; margin: clamp(40px, 5vw, 56px) auto 0; border: 1px solid #ece3d4; background: #fff; padding: clamp(20px, 3vw, 30px); text-align: center; box-sizing: border-box; }
  .rsc__cta-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .rsc__cta-body { max-width: 440px; margin: 8px auto 0; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.65; color: #7c7264; }
  .rsc__cta-actions { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .rsc__btn { display: inline-block; padding: 12px 26px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
  .rsc__btn--solid { background: #2a251f; color: #faf8f3; }
  .rsc__btn--solid:hover { background: #c04a63; }
  .rsc__btn--outline { border: 1px solid #2a251f; color: #2a251f; }
  .rsc__btn--outline:hover { background: #2a251f; color: #faf8f3; }

  /* FAQ */
  .rsc__faq-list { margin-top: 16px; border-block-start: 1px solid #e6dcca; }
  .rsc__faq-item { border-block-end: 1px solid #e6dcca; }
  .rsc__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .rsc__faq-q::-webkit-details-marker { display: none; }
  .rsc__faq-plus { font-size: 18px; line-height: 1; color: #9c6470; transition: transform 0.2s ease; }
  .rsc__faq-item[open] .rsc__faq-plus { transform: rotate(45deg); }
  .rsc__faq-a { margin: -2px 0 0; padding-block-end: 16px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  /* More tools */
  .rsc__more { max-width: 1032px; margin: clamp(40px, 5vw, 56px) auto 0; }
  .rsc__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .rsc__more-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .rsc__more-all { font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #c04a63; text-decoration: none; }
  .rsc__more-all:hover { text-decoration: underline; text-underline-offset: 2px; }
  .rsc__more-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .rsc__more-grid { grid-template-columns: repeat(4, 1fr); } }
  .rsc__more-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .rsc__more-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(42, 37, 31, 0.45); }
  .rsc__more-icon { font-size: 22px; line-height: 1; }
  .rsc__more-name { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.25; color: #2a251f; }
  .rsc__more-card:hover .rsc__more-name { color: #c04a63; }
  .rsc__more-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  /* Print isolation: only the ruler prints. */
  @media print {
    body *:not(#ring-print):not(#ring-print *) { visibility: hidden !important; max-height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: clip !important; }
    #ring-print, #ring-print * { visibility: visible !important; max-height: none !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    #ring-print { position: fixed; left: 0; top: 0; width: 100%; padding: 14mm; background: #fff; }
    .rsc__panel--print { display: block !important; }
    .rsc__print-head { display: block !important; }
    .rsc__strip-wrap { zoom: 1 !important; }
    .ring-noprint { display: none !important; }
  }
/* END_SECTION:tool-ring-size-calculator */

/* START_SECTION:tool-shoe-size-finder (INDEX:85) */
.shf { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); padding-inline: clamp(16px, 4vw, 40px); }
  .shf__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; }

  .shf__crumbs, .shf__head, .shf__hero, .shf__calc, .shf__section, .shf__cta { width: 100%; max-width: 1032px; margin-inline: auto; box-sizing: border-box; }

  /* Breadcrumb */
  .shf__crumbs { margin-block-end: 24px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .shf__crumbs a { color: #6f6250; text-decoration: none; }
  .shf__crumbs a:hover { color: #2a251f; }
  .shf__crumbs-sep { margin-inline: 6px; }
  .shf__crumbs [aria-current] { color: #2a251f; }

  /* Header */
  .shf__eyebrow { margin: 0; font-family: var(--font-body--family); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: #8a5060; }
  .shf__title { margin: 6px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; color: #2a251f; }
  .shf__intro { margin: 12px 0 0; max-width: 62ch; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #7c7264; }

  /* Hero */
  .shf__hero { margin-block-start: clamp(20px, 3vw, 32px); overflow: hidden; border: 1px solid #ece3d4; }
  .shf__hero-img { display: block; width: 100%; aspect-ratio: 1717 / 916; object-fit: cover; }

  /* Calculator */
  .shf__calc { margin-block-start: clamp(28px, 3.5vw, 40px); }
  .shf__calc-card { border: 1px solid #ece3d4; background: #fff; padding: clamp(20px, 3vw, 32px); }
  .shf__calc-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
  .shf__field { flex: 1 1 200px; }
  .shf__label { display: block; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; color: #2a251f; }
  .shf__input { margin-block-start: 6px; width: 100%; box-sizing: border-box; border: 1px solid #d8ccb8; background: #faf6ef; padding: 10px 14px; font-family: var(--font-body--family); font-size: 15px; color: #2a251f; outline: none; }
  .shf__input:focus { border-color: #2a251f; }

  .shf__unit { display: flex; overflow: hidden; border: 1px solid #d8ccb8; }
  .shf__unit-btn { padding: 10px 16px; border: 0; background: #fff; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; color: #7c7264; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; }
  .shf__unit-btn:hover { color: #2a251f; }
  .shf__unit-btn.is-active { background: #2a251f; color: #faf8f3; }

  .shf__result { margin-block-start: 20px; }
  .shf__result-empty { margin: 0; font-family: var(--font-body--family); font-size: 14px; color: #7c7264; }
  .shf__resnote { border: 1px solid #ece3d4; background: #faf6ef; padding: 16px; }
  .shf__resnote p { margin: 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.6; color: #2a251f; }

  .shf__match { background: rgba(192, 74, 99, 0.08); padding: 20px; text-align: center; }
  .shf__match-label { margin: 0; font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: #8a5060; }
  .shf__match-size { margin: 4px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(30px, 4vw, 42px); line-height: 1; color: #c04a63; }
  .shf__match-meta { margin: 8px 0 0; font-family: var(--font-body--family); font-size: 13.5px; color: #7c7264; }
  .shf__match-tip { margin: 12px 0 0; font-family: var(--font-body--family); font-size: 13px; line-height: 1.6; color: #7c7264; }
  .shf__match-tip strong { color: #2a251f; }
  .shf__match-cta { margin-block-start: 16px; }

  /* Sections */
  .shf__section { margin-block-start: clamp(40px, 5vw, 56px); }
  .shf__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .shf__lead { margin: 8px 0 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.7; color: #7c7264; }
  .shf__lead strong { color: #2a251f; font-weight: 600; }

  /* How-to steps */
  .shf__steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .shf__step { display: flex; gap: 12px; border: 1px solid #ece3d4; background: #fff; padding: 16px; }
  .shf__step-num { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: rgba(192, 74, 99, 0.1); font-family: var(--font-body--family); font-size: 13px; font-weight: 700; color: #c04a63; }
  .shf__step-text { font-family: var(--font-body--family); font-size: 14px; line-height: 1.65; color: #5e5547; }
  .shf__step-text strong { color: #2a251f; font-weight: 600; }

  /* Chart */
  .shf__table-wrap { margin-block-start: 16px; overflow-x: auto; }
  .shf__table { width: 100%; min-width: 420px; border-collapse: collapse; text-align: left; font-family: var(--font-body--family); font-size: 14px; }
  .shf__th { border-block-end: 1px solid #ece3d4; padding: 10px 16px 10px 0; font-weight: 600; color: #2a251f; }
  .shf__th:last-child { padding-inline-end: 0; }
  .shf__td { border-block-end: 1px solid rgba(236, 227, 212, 0.6); padding: 10px 16px 10px 0; color: #7c7264; }
  .shf__td:last-child { padding-inline-end: 0; }
  .shf__td--head { font-weight: 600; color: #2a251f; }
  .shf__note { margin: 16px 0 0; font-family: var(--font-body--family); font-size: 13px; line-height: 1.7; color: #7c7264; }

  /* FAQ */
  .shf__faq-list { margin-block-start: 16px; display: grid; gap: 12px; }
  .shf__faq-item { border: 1px solid #ece3d4; background: #fff; padding: 16px; }
  .shf__faq-q { cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .shf__faq-q::-webkit-details-marker { display: none; }
  .shf__faq-a { margin: 8px 0 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.7; color: #7c7264; }

  /* More tools */
  .shf__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .shf__more-all { flex: 0 0 auto; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #c04a63; text-decoration: none; }
  .shf__more-all:hover { text-decoration: underline; text-underline-offset: 2px; }
  .shf__more-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-block-start: 16px; }
  @media (min-width: 560px) { .shf__more-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 860px) { .shf__more-grid { grid-template-columns: repeat(4, 1fr); } }
  .shf__tool { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .shf__tool:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(42, 37, 31, 0.45); }
  .shf__tool-ico { font-size: 22px; line-height: 1; }
  .shf__tool-title { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.2; color: #2a251f; }
  .shf__tool:hover .shf__tool-title { color: #c04a63; }
  .shf__tool-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  /* CTA */
  .shf__cta { margin-block-start: clamp(44px, 6vw, 68px); background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .shf__cta-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(24px, 3vw, 34px); color: #2a251f; }
  .shf__cta-body { max-width: 520px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .shf__cta-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .shf__cta-actions { flex-direction: row; } }

  /* Buttons */
  .shf__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
  .shf__btn--solid { background: #2a251f; color: #faf8f3; }
  .shf__btn--solid:hover { background: #c04a63; color: #faf8f3; }
  .shf__btn--outline { border: 1px solid #2a251f; color: #2a251f; }
  .shf__btn--outline:hover { background: #2a251f; color: #faf8f3; }
/* END_SECTION:tool-shoe-size-finder */

/* START_SECTION:tool-size-converter (INDEX:86) */
.szc { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .szc__head-wrap, .szc__section, .szc__cta { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .szc__head-wrap { max-width: 1032px; }
  .szc__section { max-width: 1032px; }

  .szc__crumbs { margin-block-end: 24px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .szc__crumbs a { color: #6f6250; text-decoration: none; }
  .szc__crumbs a:hover { color: #2a251f; }
  .szc__crumbs [aria-current] { color: #2a251f; }

  .szc__head { text-align: center; }
  .szc__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .szc__intro { max-width: 620px; margin: 14px auto 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }

  .szc__section { margin-block-start: clamp(40px, 5vw, 56px); }
  .szc__tool-section { margin-block-start: clamp(28px, 4vw, 40px); }

  .szc__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #2a251f; }
  .szc__h2--center { text-align: center; }

  /* Converter card */
  .szc__tool { border: 1px solid #ece3d4; background: #fff; padding: clamp(18px, 3vw, 26px); }
  .szc__fields { display: grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 640px) { .szc__fields { grid-template-columns: 1fr 1fr; } }
  .szc__field { display: block; }
  .szc__label { display: block; margin-block-end: 6px; font-family: var(--font-body--family); font-size: 13px; font-weight: 500; color: #2a251f; }
  .szc__select { width: 100%; box-sizing: border-box; border: 1px solid #d8ccb8; background: #faf6ef; padding: 12px 14px; font-family: var(--font-body--family); font-size: 15px; color: #2a251f; outline: none; }
  .szc__select:focus { border-color: #c04a63; }

  .szc__out { margin-block-start: 20px; }
  .szc__hint { margin: 0; font-family: var(--font-body--family); font-size: 13.5px; color: #6f6250; }

  .szc__result { background: #efe7d9; padding: 16px; }
  .szc__result-eyebrow { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #8a5060; }
  .szc__result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; margin-block-start: 12px; }
  @media (min-width: 640px) { .szc__result-grid { grid-template-columns: repeat(7, 1fr); } }
  .szc__cell--us { order: -1; }
  .szc__cell-label { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #6f6250; }
  .szc__cell-value { font-family: var(--font-heading--family); font-size: 20px; line-height: 1.15; color: #2a251f; }
  .szc__cell-value--us { font-size: 26px; }
  .szc__result-note { margin: 14px 0 0; font-family: var(--font-body--family); font-size: 12.5px; line-height: 1.6; color: #6f6250; }

  /* Chart */
  .szc__table-wrap { margin-block-start: 20px; overflow-x: auto; border: 1px solid #ece3d4; background: #fff; }
  .szc__table { width: 100%; min-width: 560px; border-collapse: collapse; }
  .szc__th { white-space: nowrap; border-block-end: 1px solid #e6dcca; padding: 12px 16px; text-align: left; font-family: var(--font-heading--family); font-size: 14px; font-weight: 600; color: #2a251f; background: #faf6ef; }
  .szc__td { white-space: nowrap; border-block-end: 1px solid #ece3d4; padding: 10px 16px; font-family: var(--font-body--family); font-size: 14px; color: #5e5547; }
  .szc__td--us { font-weight: 600; color: #2a251f; }
  .szc__table tbody tr:last-child .szc__td { border-block-end: 0; }
  .szc__note { margin: 12px 0 0; font-family: var(--font-body--family); font-size: 13px; line-height: 1.6; color: #6f6250; }

  /* Related tools bridge */
  .szc__bridge { border: 1px solid #ece3d4; background: #fff; padding: clamp(20px, 3vw, 30px); text-align: center; }
  .szc__bridge-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .szc__bridge-body { max-width: 460px; margin: 8px auto 0; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.65; color: #7c7264; }
  .szc__bridge-actions { margin-block-start: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

  /* Buttons */
  .szc__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
  .szc__btn--sm { padding: 11px 20px; font-size: 11.5px; }
  .szc__btn--solid { background: #2a251f; color: #faf8f3; }
  .szc__btn--solid:hover { background: #c04a63; }
  .szc__btn--outline { border: 1px solid #2a251f; color: #2a251f; }
  .szc__btn--outline:hover { background: #2a251f; color: #faf8f3; }

  /* FAQ */
  .szc__faq { max-width: 1032px; }
  .szc__faq-list { margin-block-start: 20px; border-block-start: 1px solid #e6dcca; }
  .szc__faq-item { border-block-end: 1px solid #e6dcca; }
  .szc__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .szc__faq-q::-webkit-details-marker { display: none; }
  .szc__faq-plus { font-size: 20px; line-height: 1; color: #9c6470; transition: transform 0.2s ease; }
  .szc__faq-item[open] .szc__faq-plus { transform: rotate(45deg); }
  .szc__faq-a { margin: -2px 0 0; padding-block-end: 16px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  /* More tools */
  .szc__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .szc__more-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .szc__more-all { font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #c04a63; text-decoration: none; white-space: nowrap; }
  .szc__more-all:hover { text-decoration: underline; text-underline-offset: 2px; }
  .szc__more-grid { margin-block-start: 18px; display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .szc__more-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .szc__more-grid { grid-template-columns: repeat(4, 1fr); } }
  .szc__more-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .szc__more-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(42, 37, 31, 0.45); }
  .szc__more-ico { font-size: 22px; line-height: 1; }
  .szc__more-name { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.2; color: #2a251f; }
  .szc__more-card:hover .szc__more-name { color: #c04a63; }
  .szc__more-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  /* CTA */
  .szc__cta { max-width: 1032px; margin-block-start: clamp(44px, 6vw, 68px); background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .szc__cta-body { max-width: 480px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .szc__cta-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .szc__cta-actions { flex-direction: row; } }
/* END_SECTION:tool-size-converter */

/* START_SECTION:tool-skincare-routine (INDEX:87) */
.srb { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .srb__head-wrap, .srb__section, .srb__cta { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .srb__head-wrap { max-width: 1032px; }
  .srb__section { max-width: 1032px; }

  .srb__crumbs { margin-block-end: 24px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .srb__crumbs a { color: #6f6250; text-decoration: none; }
  .srb__crumbs a:hover { color: #2a251f; }
  .srb__crumbs [aria-current] { color: #2a251f; }

  .srb__head { text-align: center; }
  .srb__eyebrow { font-family: var(--font-body--family); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: #8a5060; }
  .srb__title { margin: 10px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .srb__intro { max-width: 620px; margin: 14px auto 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }

  .srb__section { margin-block-start: clamp(40px, 5vw, 56px); }
  .srb__tool-section { margin-block-start: clamp(28px, 4vw, 40px); }

  .srb__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #2a251f; }
  .srb__h2--center { text-align: center; }

  /* Tool card */
  .srb__tool { border: 1px solid #ece3d4; background: #fff; padding: clamp(20px, 3.4vw, 34px); }

  /* Progress */
  .srb__progress { display: flex; gap: 8px; }
  .srb__progress-bar { height: 3px; flex: 1 1 0; background: #e6dcca; transition: background-color 0.2s ease; }
  .srb__progress-bar--on { background: #c04a63; }

  /* Panels */
  .srb__steps { margin-block-start: 28px; }
  .srb__panel { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  .srb__q { padding: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .srb__hint { margin: 8px 0 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.6; color: #7c7264; }

  .srb__opts { margin-block-start: 20px; }
  .srb__opts--grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
  @media (min-width: 640px) { .srb__opts--grid { grid-template-columns: 1fr 1fr; } }
  .srb__opts--pills { display: flex; flex-wrap: wrap; gap: 10px; }

  /* Single-select option */
  .srb__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; border: 1px solid #ece3d4; background: #fff; padding: 16px 20px; text-align: left; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; font-family: var(--font-body--family); }
  .srb__opt:hover { border-color: #2a251f; }
  .srb__opt[aria-pressed="true"] { border-color: #c04a63; background: rgba(192, 74, 99, 0.05); }
  .srb__opt-text { display: block; }
  .srb__opt-label { display: block; font-family: var(--font-body--family); font-size: 14.5px; font-weight: 600; color: #2a251f; }
  .srb__opt-sub { display: block; margin-block-start: 2px; font-family: var(--font-body--family); font-size: 12.5px; color: #7c7264; }
  .srb__radio { position: relative; flex-shrink: 0; width: 18px; height: 18px; border: 2px solid #c9bda6; border-radius: 50%; }
  .srb__opt[aria-pressed="true"] .srb__radio { border-color: #c04a63; }
  .srb__opt[aria-pressed="true"] .srb__radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #c04a63; }

  /* Multi-select pill */
  .srb__pill { border: 1px solid #d8ccb8; background: #fff; color: #2a251f; padding: 11px 20px; border-radius: 999px; cursor: pointer; font-family: var(--font-body--family); font-size: 13.5px; font-weight: 500; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
  .srb__pill:hover { border-color: #2a251f; }
  .srb__pill[aria-pressed="true"] { border-color: #2a251f; background: #2a251f; color: #faf8f3; }

  /* Nav */
  .srb__nav { margin-block-start: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .srb__back { border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; color: #7c7264; transition: color 0.2s ease; }
  .srb__back:hover { color: #2a251f; }
  .srb__back:disabled { opacity: 0; cursor: default; }
  .srb__next { border: 0; cursor: pointer; background: #2a251f; color: #faf8f3; padding: 14px 32px; border-radius: 999px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; transition: background-color 0.2s ease, color 0.2s ease; }
  .srb__next:hover { background: #c04a63; }
  .srb__next--off, .srb__next:disabled { background: #e6dcca; color: #7c7264; cursor: not-allowed; }
  .srb__next--off:hover, .srb__next:disabled:hover { background: #e6dcca; }

  /* Result */
  .srb__result-head { text-align: center; }
  .srb__result-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.8vw, 32px); color: #2a251f; }
  .srb__result-summary { max-width: 560px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.7; color: #5e5547; }
  .srb__result-summary strong { color: #2a251f; font-weight: 600; }

  .srb__cols { margin-block-start: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 48px); }
  @media (min-width: 720px) { .srb__cols { grid-template-columns: 1fr 1fr; } }
  .srb__weekly { margin-block-start: clamp(28px, 4vw, 44px); }

  .srb__col-head { display: flex; align-items: center; gap: 10px; margin-block-end: 18px; }
  .srb__col-ico { font-size: 18px; line-height: 1; color: #c04a63; }
  .srb__col-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }

  .srb__steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
  .srb__step { display: flex; gap: 16px; }
  .srb__step-num { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin-block-start: 2px; border-radius: 50%; background: #c04a63; color: #fff; font-family: var(--font-body--family); font-size: 13px; font-weight: 700; }
  .srb__step-num--dashed { background: transparent; border: 1px dashed #c9bda6; color: #7c7264; font-weight: 700; }
  .srb__step-body { min-width: 0; flex: 1 1 0; }
  .srb__step-label { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: #6f6250; }
  .srb__step-title { margin-block-start: 3px; font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.25; color: #2a251f; }
  .srb__step-desc { margin: 5px 0 0; font-family: var(--font-body--family); font-size: 13px; line-height: 1.55; color: #5e5547; }
  .srb__step-sub { margin: 3px 0 0; font-family: var(--font-body--family); font-size: 12px; line-height: 1.5; color: #6f6250; }
  .srb__step-note { display: inline-block; margin-block-start: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(192, 74, 99, 0.1); font-family: var(--font-body--family); font-size: 11px; font-weight: 500; color: #c04a63; }
  .srb__step-shop { display: inline-block; margin-block-start: 8px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; color: #c04a63; text-decoration: none; }
  .srb__step-shop:hover { text-decoration: underline; text-underline-offset: 2px; }

  .srb__disclaimer { max-width: 560px; margin: clamp(28px, 4vw, 40px) auto 0; text-align: center; font-family: var(--font-body--family); font-size: 12.5px; line-height: 1.7; color: #6f6250; }
  .srb__result-actions { margin-block-start: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  @media (min-width: 640px) { .srb__result-actions { flex-direction: row; justify-content: center; } }
  .srb__retake { border: 0; background: none; cursor: pointer; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; color: #2a251f; text-decoration: underline; text-underline-offset: 4px; transition: color 0.2s ease; }
  .srb__retake:hover { color: #c04a63; }

  /* Learn */
  .srb__learn-intro { max-width: 700px; margin: 16px 0 0; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }
  .srb__learn-grid { margin-block-start: 24px; display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .srb__learn-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .srb__learn-grid { grid-template-columns: repeat(4, 1fr); } }
  .srb__learn-card { border: 1px solid #ece3d4; background: #fff; padding: 20px; }
  .srb__learn-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 16px; color: #2a251f; }
  .srb__learn-body { margin: 8px 0 0; font-family: var(--font-body--family); font-size: 13px; line-height: 1.65; color: #5e5547; }

  /* FAQ */
  .srb__faq { max-width: 1032px; }
  .srb__faq-list { margin-block-start: 20px; border-block-start: 1px solid #e6dcca; }
  .srb__faq-item { border-block-end: 1px solid #e6dcca; }
  .srb__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .srb__faq-q::-webkit-details-marker { display: none; }
  .srb__faq-plus { font-size: 20px; line-height: 1; color: #9c6470; transition: transform 0.2s ease; }
  .srb__faq-item[open] .srb__faq-plus { transform: rotate(45deg); }
  .srb__faq-a { margin: -2px 0 0; padding-block-end: 16px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  /* More tools */
  .srb__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .srb__more-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); color: #2a251f; }
  .srb__more-all { font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #c04a63; text-decoration: none; white-space: nowrap; }
  .srb__more-all:hover { text-decoration: underline; text-underline-offset: 2px; }
  .srb__more-grid { margin-block-start: 18px; display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 640px) { .srb__more-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .srb__more-grid { grid-template-columns: repeat(4, 1fr); } }
  .srb__more-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .srb__more-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(42, 37, 31, 0.45); }
  .srb__more-ico { font-size: 22px; line-height: 1; }
  .srb__more-name { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.2; color: #2a251f; }
  .srb__more-card:hover .srb__more-name { color: #c04a63; }
  .srb__more-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  /* CTA */
  .srb__cta { max-width: 1032px; margin-block-start: clamp(44px, 6vw, 68px); background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .srb__cta-body { max-width: 480px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .srb__cta-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .srb__cta-actions { flex-direction: row; } }

  /* Buttons */
  .srb__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
  .srb__btn--solid { background: #2a251f; color: #faf8f3; }
  .srb__btn--solid:hover { background: #c04a63; }
  .srb__btn--outline { border: 1px solid #2a251f; color: #2a251f; }
  .srb__btn--outline:hover { background: #2a251f; color: #faf8f3; }
/* END_SECTION:tool-skincare-routine */

/* START_SECTION:tool-swimwear-size-calculator (INDEX:88) */
.swc { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .swc__wrap { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
  .swc__wrap--narrow { max-width: 1032px; }
  .swc__wrap--wide { max-width: 1032px; }

  .swc__crumbs { margin-block-end: 20px; font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .swc__crumbs a { color: #6f6250; text-decoration: none; }
  .swc__crumbs a:hover { color: #2a251f; }
  .swc__crumbs [aria-current] { color: #2a251f; }

  .swc__head { text-align: center; }
  .swc__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .swc__intro { max-width: 620px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }

  .swc__noscript { margin: 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.6; color: #5e5547; }

  /* Calculator */
  .swc__calc { margin-block-start: clamp(28px, 3vw, 36px); }
  .swc__card { border: 1px solid #ece3d4; background: #fff; padding: clamp(20px, 3.5vw, 34px); }
  .swc__card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .swc__stepno { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #6f6250; }
  .swc__dots { display: flex; gap: 6px; }
  .swc__dot { width: 6px; height: 6px; background: #e0d4c0; }
  .swc__dot--on { background: #c04a63; }
  .swc__card-title { margin: 16px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; color: #2a251f; }
  .swc__card-sub { margin: 6px 0 0; font-family: var(--font-body--family); font-size: 14px; line-height: 1.6; color: #7c7264; }
  .swc__card-body { margin-block-start: 20px; }

  .swc__choices { display: grid; gap: 10px; }
  @media (min-width: 640px) { .swc__choices { grid-template-columns: repeat(2, 1fr); } }
  .swc__choice { display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; border: 1px solid #ece3d4; background: #fff; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; }
  .swc__choice:hover { border-color: #2a251f; }
  .swc__choice--on { border-color: #c04a63; background: rgba(192, 74, 99, 0.06); }
  .swc__choice-label { display: block; font-family: var(--font-body--family); font-size: 14.5px; font-weight: 600; color: #2a251f; }

  .swc__field { display: block; }
  .swc__field-label { display: block; margin-block-end: 6px; font-family: var(--font-body--family); font-size: 13px; font-weight: 500; color: #2a251f; }
  .swc__input-row { display: flex; align-items: center; gap: 8px; }
  .swc__input { width: 100%; border: 1px solid #d8ccb8; background: #faf6ef; padding: 12px 14px; font-family: var(--font-body--family); font-size: 16px; color: #2a251f; outline: none; box-sizing: border-box; }
  .swc__input:focus { border-color: #c04a63; }
  .swc__unit { font-family: var(--font-body--family); font-size: 13px; font-weight: 600; color: #6f6250; }
  .swc__submit { margin-block-start: 16px; border: 0; background: #2a251f; color: #faf8f3; padding: 12px 32px; font-family: var(--font-body--family); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background-color 0.2s ease; }
  .swc__submit:hover { background: #c04a63; }
  .swc__submit:disabled { opacity: 0.45; cursor: default; }
  .swc__submit:disabled:hover { background: #2a251f; }

  .swc__back { margin-block-start: 20px; border: 0; background: none; padding: 0; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; color: #6f6250; cursor: pointer; }
  .swc__back:hover { color: #2a251f; text-decoration: underline; text-underline-offset: 2px; }

  /* Summary + result */
  .swc__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #ece3d4; background: #fff; padding: clamp(14px, 2.5vw, 20px); }
  .swc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .swc__chip { background: #efe7d9; padding: 6px 12px; font-family: var(--font-body--family); font-size: 12px; font-weight: 600; color: #2a251f; }
  .swc__summary-actions { display: flex; gap: 16px; }
  .swc__link { border: 0; background: none; padding: 0; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; cursor: pointer; }
  .swc__link--accent { color: #c04a63; }
  .swc__link--accent:hover { text-decoration: underline; text-underline-offset: 2px; }
  .swc__link--muted { color: #6f6250; }
  .swc__link--muted:hover { color: #2a251f; text-decoration: underline; text-underline-offset: 2px; }

  .swc__result-wrap { margin-block-start: 24px; }
  .swc__result { border: 1px solid #ece3d4; background: #efe7d9; padding: clamp(16px, 3vw, 24px); }
  .swc__result-eyebrow { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #7c7264; }
  .swc__result-row { display: flex; align-items: baseline; gap: 16px; margin-block-start: 4px; }
  .swc__result-size { font-family: var(--font-heading--family); font-size: 38px; line-height: 1.15; color: #2a251f; }
  .swc__result-us { font-family: var(--font-body--family); font-size: 14px; color: #5e5547; }
  .swc__result-note { margin: 6px 0 0; font-family: var(--font-body--family); font-size: 12.5px; line-height: 1.55; color: #6f6250; }
  .swc__result-links { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }
  .swc__shop { display: inline-block; border: 1px solid #2a251f; padding: 6px 16px; font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #2a251f; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
  .swc__shop:hover { background: #2a251f; color: #faf8f3; }
  .swc__invalid { margin: 0; font-family: var(--font-body--family); font-size: 13.5px; line-height: 1.6; color: #6f6250; }

  /* Sections */
  .swc__section { margin-block-start: clamp(40px, 5vw, 56px); }
  .swc__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #2a251f; }
  .swc__h2--center { text-align: center; }
  .swc__h2--flush { margin: 0; }

  .swc__steps { margin: 16px 0 0; padding-inline-start: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .swc__steps strong { color: #2a251f; font-weight: 600; }

  .swc__table-wrap { margin-block-start: 16px; overflow-x: auto; border: 1px solid #ece3d4; background: #fff; }
  .swc__table { width: 100%; min-width: 520px; border-collapse: collapse; }
  .swc__th { white-space: nowrap; border-block-end: 1px solid #ece3d4; background: #efe7d9; padding: 12px 16px; text-align: left; font-family: var(--font-body--family); font-size: 14px; font-weight: 600; color: #2a251f; }
  .swc__td { white-space: nowrap; border-block-end: 1px solid rgba(236, 227, 212, 0.6); padding: 10px 16px; font-family: var(--font-body--family); font-size: 14px; color: #2a251f; }
  .swc__td--head { font-weight: 600; }
  .swc__table tbody tr:last-child .swc__td { border-block-end: 0; }
  .swc__note { margin: 12px 0 0; max-width: 720px; font-family: var(--font-body--family); font-size: 13px; line-height: 1.6; color: #6f6250; }

  .swc__faq-list { margin-block-start: 16px; border-block-start: 1px solid #e6dcca; }
  .swc__faq-item { border-block-end: 1px solid #e6dcca; }
  .swc__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .swc__faq-q::-webkit-details-marker { display: none; }
  .swc__faq-plus { font-size: 18px; line-height: 1; color: #9c6470; transition: transform 0.2s ease; }
  .swc__faq-item[open] .swc__faq-plus { transform: rotate(45deg); }
  .swc__faq-a { margin: -2px 0 0; padding-block-end: 16px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  /* More tools */
  .swc__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .swc__all { font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #c04a63; text-decoration: none; }
  .swc__all:hover { text-decoration: underline; text-underline-offset: 2px; }
  .swc__more-grid { display: grid; gap: 12px; margin-block-start: 16px; grid-template-columns: 1fr; }
  @media (min-width: 560px) { .swc__more-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .swc__more-grid { grid-template-columns: repeat(4, 1fr); } }
  .swc__tool { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .swc__tool:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(42, 37, 31, 0.45); }
  .swc__tool-ico { font-size: 22px; line-height: 1; }
  .swc__tool-title { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.2; color: #2a251f; }
  .swc__tool:hover .swc__tool-title { color: #c04a63; }
  .swc__tool-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #7c7264; }

  /* CTA */
  .swc__cta { background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .swc__cta-body { max-width: 480px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .swc__cta-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .swc__cta-actions { flex-direction: row; } }
  .swc__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; }
  .swc__btn--solid { background: #2a251f; color: #faf8f3; }
  .swc__btn--solid:hover { background: #c04a63; }
  .swc__btn--outline { border: 1px solid #2a251f; color: #2a251f; }
  .swc__btn--outline:hover { background: #2a251f; color: #faf8f3; }
/* END_SECTION:tool-swimwear-size-calculator */

/* START_SECTION:tool-wedding-guest-dress-finder (INDEX:89) */
.wgf { background: #faf8f3; color: #2a251f; padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px); }
  .wgf__container { width: 100%; margin-inline: auto; max-width: 1032px; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }

  .wgf__crumbs-wrap { margin-block-end: 20px; }
  .wgf__crumbs { font-family: var(--font-body--family); font-size: 12.5px; letter-spacing: 0.04em; color: #6f6250; }
  .wgf__crumbs a { color: #6f6250; text-decoration: none; }
  .wgf__crumbs a:hover { color: #2a251f; }
  .wgf__crumbs [aria-current] { color: #2a251f; }

  .wgf__head { text-align: center; }
  .wgf__title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; color: #2a251f; }
  .wgf__intro { max-width: 600px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15.5px; line-height: 1.7; color: #7c7264; }

  .wgf__quiz { margin-block-start: clamp(20px, 3.5vw, 34px); }

  .wgf__card { border: 1px solid #ece3d4; background: #fff; }
  .wgf__quizcard { padding: clamp(20px, 3.5vw, 34px); }
  .wgf__fallback { margin: 0; padding: clamp(20px, 3.5vw, 34px); font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.7; color: #5e5547; }
  .wgf__fallback a { color: #c04a63; }

  .wgf__quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .wgf__stepno { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #6f6250; }
  .wgf__dots { display: flex; gap: 6px; }
  .wgf__dot { width: 6px; height: 6px; border-radius: 50%; background: #e0d4c0; }
  .wgf__dot.is-on { background: #c04a63; }

  .wgf__qtitle { margin: 16px 0 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; color: #2a251f; }

  .wgf__choices { margin-block-start: 20px; display: grid; gap: 10px; grid-template-columns: 1fr; }
  @media (min-width: 640px) { .wgf__choices { grid-template-columns: repeat(2, 1fr); } }
  .wgf__choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; text-align: left; border: 1px solid #ece3d4; background: #fff; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; font-family: var(--font-body--family); }
  .wgf__choice:hover { border-color: #2a251f; }
  .wgf__choice.is-active { border-color: #c04a63; background: rgba(192, 74, 99, 0.06); }
  .wgf__choice-label { font-size: 14.5px; font-weight: 600; color: #2a251f; }

  .wgf__back { margin-block-start: 20px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; color: #6f6250; }
  .wgf__back:hover { color: #2a251f; text-decoration: underline; text-underline-offset: 2px; }

  .wgf__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #ece3d4; background: #fff; padding: clamp(14px, 2.5vw, 20px); }
  .wgf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .wgf__chip { background: #efe7d9; padding: 6px 12px; font-family: var(--font-body--family); font-size: 12px; font-weight: 600; color: #2a251f; }
  .wgf__summary-actions { display: flex; gap: 16px; }
  .wgf__link { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; }
  .wgf__link--accent { color: #c04a63; }
  .wgf__link--accent:hover { text-decoration: underline; text-underline-offset: 2px; }
  .wgf__link--muted { color: #6f6250; }
  .wgf__link--muted:hover { color: #2a251f; text-decoration: underline; text-underline-offset: 2px; }

  .wgf__brief { margin-block-start: 24px; background: #efe7d9; padding: clamp(18px, 3vw, 28px); }
  .wgf__brief-eyebrow { font-family: var(--font-body--family); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #6f6250; }
  .wgf__brief-heading { margin-block-start: 4px; font-family: var(--font-heading--family); font-size: 26px; line-height: 1.15; color: #2a251f; }
  .wgf__brief-body { margin: 8px 0 0; max-width: 620px; font-family: var(--font-body--family); font-size: 14px; line-height: 1.7; color: #5e5547; }
  .wgf__brief-links { margin-block-start: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
  .wgf__brief-cta { margin-block-start: 16px; }

  .wgf__tag { display: inline-block; border: 1px solid #2a251f; padding: 7px 14px; font-family: var(--font-body--family); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #2a251f; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
  .wgf__tag:hover { background: #2a251f; color: #faf8f3; }

  .wgf__section { margin-block-start: clamp(40px, 5vw, 56px); }
  .wgf__h2 { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #2a251f; }
  .wgf__h2--center { text-align: center; }

  .wgf__decoder-list { margin-block-start: 20px; display: flex; flex-direction: column; gap: 16px; }
  .wgf__decoder-item { border: 1px solid #ece3d4; background: #fff; padding: clamp(16px, 2.5vw, 24px); }
  .wgf__decoder-title { margin: 0; font-family: var(--font-heading--family); font-weight: 400; font-size: 19px; color: #2a251f; }
  .wgf__decoder-body { margin: 6px 0 0; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.7; color: #5e5547; }
  .wgf__decoder-tags { margin-block-start: 12px; display: flex; flex-wrap: wrap; gap: 8px; }

  .wgf__faq { max-width: 1032px; }
  .wgf__faq-list { margin-block-start: 16px; border-block-start: 1px solid #e6dcca; }
  .wgf__faq-item { border-block-end: 1px solid #e6dcca; }
  .wgf__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--font-heading--family); font-size: 15.5px; color: #2a251f; }
  .wgf__faq-q::-webkit-details-marker { display: none; }
  .wgf__faq-plus { font-size: 18px; line-height: 1; color: #9c6470; transition: transform 0.2s ease; }
  .wgf__faq-item[open] .wgf__faq-plus { transform: rotate(45deg); }
  .wgf__faq-a { margin: -4px 0 0; padding-block-end: 16px; font-family: var(--font-body--family); font-size: 14.5px; line-height: 1.75; color: #5e5547; }

  .wgf__more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .wgf__more-all { font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #c04a63; text-decoration: none; white-space: nowrap; }
  .wgf__more-all:hover { text-decoration: underline; text-underline-offset: 2px; }
  .wgf__more-grid { margin-block-start: 16px; display: grid; gap: 12px; grid-template-columns: 1fr; }
  @media (min-width: 640px) { .wgf__more-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .wgf__more-grid { grid-template-columns: repeat(4, 1fr); } }
  .wgf__more-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid #ece3d4; background: #fff; padding: 16px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .wgf__more-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(42, 37, 31, 0.45); }
  .wgf__more-ico { font-size: 22px; line-height: 1; }
  .wgf__more-title { font-family: var(--font-heading--family); font-size: 15.5px; line-height: 1.2; color: #2a251f; }
  .wgf__more-card:hover .wgf__more-title { color: #c04a63; }
  .wgf__more-stat { font-family: var(--font-body--family); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #6f6250; }

  .wgf__cta { margin-block-start: clamp(44px, 6vw, 68px); background: #efe7d9; padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
  .wgf__cta-body { max-width: 480px; margin: 12px auto 0; font-family: var(--font-body--family); font-size: 15px; line-height: 1.7; color: #5e5547; }
  .wgf__cta-actions { margin-block-start: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  @media (min-width: 640px) { .wgf__cta-actions { flex-direction: row; } }
  .wgf__btn { display: inline-block; padding: 14px 32px; font-family: var(--font-body--family); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; text-align: center; border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
  .wgf__btn--solid { background: #2a251f; color: #faf8f3; border-color: #2a251f; }
  .wgf__btn--solid:hover { background: #c04a63; border-color: #c04a63; }
  .wgf__btn--outline { border-color: #2a251f; color: #2a251f; background: transparent; }
  .wgf__btn--outline:hover { background: #2a251f; color: #faf8f3; }
/* END_SECTION:tool-wedding-guest-dress-finder */

/* START_SECTION:wishlist-page (INDEX:90) */
.wl {
    background: #faf8f3;
    color: #2a251f;
    padding-block: var(--padding-top, 16px) var(--padding-bottom, 80px);
  }
  .wl__inner {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
    box-sizing: border-box;
  }
  /* Author display rules below (grid/flex) would otherwise beat the UA
     [hidden] rule, so keep hidden authoritative within the section. */
  .wl [hidden] { display: none !important; }

  /* Breadcrumb */
  .wl__crumbs {
    font-family: var(--font-body--family);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: #6f6250;
  }
  .wl__crumbs a { color: #6f6250; text-decoration: none; }
  .wl__crumbs a:hover { color: #2a251f; }
  .wl__sep { padding-inline: 6px; }
  .wl__crumbs [aria-current] { color: #2a251f; }

  /* Header */
  .wl__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-block-start: 16px;
  }
  @media (min-width: 1024px) {
    .wl__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  }
  .wl__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(25px, 3.2vw, 40px);
    line-height: 1.06;
    color: #2a251f;
  }
  .wl__subtitle {
    margin: 10px 0 0;
    font-family: var(--font-body--family);
    font-size: 15px;
    line-height: 1.5;
    color: #7c7264;
  }

  /* Header actions */
  .wl__actions { width: 100%; }
  @media (min-width: 640px) { .wl__actions { width: auto; flex-shrink: 0; } }
  .wl__actions-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  @media (min-width: 640px) { .wl__actions-inner { width: auto; gap: 12px; } }
  .wl__selectall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2a251f;
    cursor: pointer;
    user-select: none;
  }
  @media (min-width: 640px) { .wl__selectall { gap: 8px; font-size: 12px; letter-spacing: 0.08em; } }
  .wl__selectall input { width: 16px; height: 16px; accent-color: #c04a63; cursor: pointer; }
  .wl__btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1 1 auto;
  }
  @media (min-width: 640px) { .wl__btns { display: flex; flex: 0 0 auto; gap: 12px; } }
  .wl__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    white-space: nowrap;
    border-radius: 999px;
    padding: 8px 12px;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  @media (min-width: 640px) { .wl__btn { width: auto; padding: 12px 20px; font-size: 12px; letter-spacing: 0.08em; } }
  .wl__btn--outline { border: 1px solid #2a251f; background: transparent; color: #2a251f; }
  .wl__btn--outline:hover { background: #2a251f; color: #faf8f3; }
  .wl__btn--solid { border: 1px solid transparent; background: #2a251f; color: #faf8f3; }
  .wl__btn--solid:hover { background: #c04a63; }
  .wl-sm { display: inline; }
  .wl-lg { display: none; }
  @media (min-width: 640px) { .wl-sm { display: none; } .wl-lg { display: inline; } }

  /* Grid */
  .wl__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 26px);
    margin-block-start: clamp(24px, 4vw, 40px);
  }
  @media (min-width: 750px) { .wl__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 990px) { .wl__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* Card */
  .wl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: transform 0.3s ease, outline-color 0.2s ease;
  }
  .wl-card:hover { transform: translateY(-4px); }
  .wl-card--selected { outline-color: #c04a63; }
  .wl-card__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f2ece1;
  }
  .wl-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Select overlay (top-left of image) */
  .wl-card__select {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    cursor: pointer;
    line-height: 0;
  }
  .wl-card__select-input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  .wl-card__select-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid #fff;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: 0 1px 4px rgba(42, 37, 31, 0.18);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .wl-card__select-input:checked + .wl-card__select-box {
    border-color: #c04a63;
    background: #c04a63;
    color: #faf8f3;
  }
  .wl-card__select-input:focus-visible + .wl-card__select-box {
    box-shadow: 0 0 0 2px #c04a63, 0 0 0 4px #faf8f3;
  }

  /* Info block */
  .wl-card__info { display: flex; flex-direction: column; flex: 1 1 auto; margin-block-start: 10px; }
  .wl-card__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .wl-card__title {
    margin: 0;
    min-width: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.25;
    color: #2a251f;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  @media (min-width: 640px) { .wl-card__title { font-size: 13px; } }
  .wl-card__title a { color: inherit; text-decoration: none; }
  .wl-card__title a:hover { color: #c04a63; }
  .wl-card__remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #c04a63;
    cursor: pointer;
    line-height: 0;
    transition: color 0.15s ease, transform 0.15s ease;
  }
  .wl-card__remove:hover { color: #d17a8d; transform: scale(1.08); }
  .wl-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 7px;
    margin-block-start: 4px;
    font-family: var(--font-body--family);
  }
  .wl-card__now { font-size: 12.5px; font-weight: 700; color: #2a251f; }
  @media (min-width: 640px) { .wl-card__now { font-size: 13.5px; } }
  .wl-card__price--sale .wl-card__now { color: #c04a63; }
  .wl-card__was { font-size: 11px; color: #8a7c66; text-decoration: line-through; }
  @media (min-width: 640px) { .wl-card__was { font-size: 12px; } }

  /* Empty state */
  .wl__empty {
    margin-block-start: clamp(24px, 4vw, 40px);
    border: 1px solid #ece3d4;
    background: #fff;
    padding: 70px 20px;
    text-align: center;
  }
  .wl__empty-heart { margin-block-end: 14px; font-size: 42px; line-height: 1; color: #c04a63; }
  .wl__empty-title { font-family: var(--font-heading--family); font-weight: 400; font-size: 24px; color: #2a251f; }
  .wl__empty-body { margin: 10px 0 22px; font-family: var(--font-body--family); font-size: 14px; color: #8a7c66; }
  .wl__empty-btn {
    display: inline-block;
    border-radius: 999px;
    background: #2a251f;
    padding: 14px 30px;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #faf8f3;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }
  .wl__empty-btn:hover { background: #c04a63; }

  /* Trust strip */
  .wl__trust {
    margin-block-start: clamp(40px, 6vw, 64px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2.5vw, 26px);
    border: 1px solid #ece3d4;
    background: #fff;
    padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 36px);
    box-sizing: border-box;
  }
  @media (min-width: 900px) { .wl__trust { grid-template-columns: repeat(4, 1fr); } }
  .wl__trust-item { display: flex; align-items: center; gap: 12px; }
  .wl__trust-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(192, 74, 99, 0.1);
    color: #c04a63;
  }
  .wl__trust-title { display: block; font-family: var(--font-body--family); font-size: 13.5px; font-weight: 600; color: #2a251f; }
  .wl__trust-sub { display: block; font-family: var(--font-body--family); font-size: 12px; color: #6f6250; }

  /* Loading skeleton */
  .wl-skel { display: flex; flex-direction: column; }
  .wl-skel__img { aspect-ratio: 3 / 4; background: #f2ece1; }
  .wl-skel__line { height: 12px; margin-block-start: 10px; background: #f2ece1; }
  .wl-skel__line--sm { width: 40%; margin-block-start: 8px; }
  .wl__skeleton .wl-skel__img,
  .wl__skeleton .wl-skel__line {
    background: linear-gradient(100deg, #f2ece1 30%, #f7f2e9 50%, #f2ece1 70%);
    background-size: 200% 100%;
    animation: wl-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes wl-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wl-card, .wl-card__remove, .wl-card__select-box { transition: none; }
    .wl__skeleton .wl-skel__img, .wl__skeleton .wl-skel__line { animation: none; }
  }
/* END_SECTION:wishlist-page */

/* CSS from block stylesheet tags */
/* START_BLOCK:accordion (INDEX:91) */
.acc-block {
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .acc-block__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.75rem;
    list-style: none;
    cursor: pointer;
    color: var(--box-color, inherit);
  }

  .acc-block__summary::-webkit-details-marker { display: none; }

  .acc-block__icon svg {
    width: 1rem;
    height: 1rem;
    transition: rotate 0.2s ease;
  }

  .acc-block[open] .acc-block__icon svg { rotate: 180deg; }

  .acc-block__body {
    display: grid;
    gap: 0.75rem;
    padding-block-start: 0.5rem;
  }
/* END_BLOCK:accordion */

/* START_BLOCK:blog-posts (INDEX:92) */
.bp-block {
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .bp-block__grid {
    display: grid;
    grid-template-columns: repeat(var(--bp-columns, 3), minmax(0, 1fr));
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (max-width: 749px) {
    .bp-block__grid { grid-template-columns: minmax(0, 1fr); }
  }

  .bp-block__note {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_BLOCK:blog-posts */

/* START_BLOCK:button (INDEX:93) */
.btn-block { display: flex; }
  .btn-block--start { justify-content: flex-start; }
  .btn-block--center { justify-content: center; }
  .btn-block--end { justify-content: flex-end; }

  .btn-block__link {
    font-size: var(--btn-size, 14px);
    border-radius: var(--box-radius, var(--style-border-radius-buttons, 0));
  }

  .btn-block__link--full { width: 100%; }

  .btn-block__note {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_BLOCK:button */

/* START_BLOCK:collection-list (INDEX:94) */
.cl-block__note {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

.cl-block {
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .cl-block__grid {
    display: grid;
    grid-template-columns: repeat(var(--cl-columns, 3), minmax(0, 1fr));
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (max-width: 749px) {
    .cl-block__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
/* END_BLOCK:collection-list */

/* START_BLOCK:column (INDEX:95) */
.column-block {
    display: flex;
    flex-direction: column;
    gap: var(--column-gap-block, 16px);
    /* `min-width: 0` or a long word in a child sets the column's floor and the
       percentages stop meaning anything. */
    min-width: 0;
    flex: 1 1 0;
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
    color: var(--box-color, inherit);
  }

  /* The gutter comes out of the declared width, so two 50% columns fill the row
     instead of overflowing it by one gap. */
  /* The gutter comes out of each column in proportion to its share, so widths a merchant types add up to a row rather than to a row and a gap. */
  .column-block--sized {
    flex: 0 0 calc(var(--column-span) - var(--row-column-gap, 24px) * var(--column-share) / 100 - 0.5px);
    max-width: 100%;
  }

  /* Mobile widths.
     `.column-block` is repeated in each selector purely for weight. The row's
     stacking rule is `.row-block--stack > .shopify-block > .column-block`, three
     classes, and these started at three as well — a tie, decided by source
     order, and block stylesheets are concatenated with this file before the
     row's, so stacking won and the setting did nothing. Measured in the compiled
     sheet. Four classes wins wherever the two end up in the bundle.

     The gutter comes out of the width the same way it does on desktop; without
     that, two 50% columns and one gap add up to more than the row and the second
     wraps. */
  @media screen and (max-width: 749px) {
    .row-block > .shopify-block > .column-block.column-block--m-100 {
      flex: 1 1 100%;
      max-width: 100%;
    }

    .row-block > .shopify-block > .column-block.column-block--m-50 {
      flex: 0 0 calc(50% - var(--row-column-gap, 24px) / 2 - 0.5px);
      max-width: 100%;
    }

    .row-block > .shopify-block > .column-block.column-block--m-33 {
      flex: 0 0 calc(33.333% - var(--row-column-gap, 24px) * 2 / 3 - 0.5px);
      max-width: 100%;
    }
  }

  .column-block--start { align-items: flex-start; text-align: start; }
  .column-block--center { align-items: center; text-align: center; }
  .column-block--end { align-items: flex-end; text-align: end; }
  .column-block--stretch { align-items: stretch; }
/* END_BLOCK:column */

/* START_BLOCK:countdown (INDEX:96) */
.countdown--align-start { justify-items: start; text-align: start; }
  .countdown--align-center { justify-items: center; text-align: center; }
  .countdown--align-end { justify-items: end; text-align: end; }
/* END_BLOCK:countdown */

/* START_BLOCK:counter (INDEX:97) */
.ct-block {
    display: grid;
    gap: 0.25rem;
    color: var(--box-color, inherit);
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .ct-block--start { justify-items: start; text-align: start; }
  .ct-block--center { justify-items: center; text-align: center; }
  .ct-block--end { justify-items: end; text-align: end; }

  .ct-block__value {
    margin: 0;
    font-size: clamp(1.75rem, 5vw, var(--count-size, 48px));
    line-height: 1;
    /* Digits of one width, or the row jogs sideways on every frame. */
    font-variant-numeric: tabular-nums;
  }

  .ct-block__label {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }
/* END_BLOCK:counter */

/* START_BLOCK:coupon (INDEX:98) */
.cp-block {
    display: grid;
    gap: 0.5rem;
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .cp-block--start { justify-items: start; }
  .cp-block--center { justify-items: center; }
  .cp-block--end { justify-items: end; }

  .cp-block__note {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  .cp-block__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.35);
  }

  .cp-block__code {
    font-family: inherit;
    font-size: var(--font-size-h5);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    user-select: all;
  }
/* END_BLOCK:coupon */

/* START_BLOCK:divider (INDEX:99) */
.rule-block {
    width: var(--rule-width, 100%);
    height: var(--rule-thickness, 1px);
    border: 0;
    background: var(--rule-color, rgba(var(--color-foreground), 0.2));
    margin-block: var(--box-padding-block, 0);
  }

  .rule-block--start { margin-inline: 0 auto; }
  .rule-block--center { margin-inline: auto; }
  .rule-block--end { margin-inline: auto 0; }
/* END_BLOCK:divider */

/* START_BLOCK:form (INDEX:100) */
.fm-block__hint {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

.fm-block {
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .fm-block__form {
    display: grid;
    gap: 0.5rem;
    margin: 0;
  }

  .fm-block__field {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: inherit;
  }

  .fm-block__field--area { min-height: 6rem; }

  /* iOS zooms a field under 16px on focus. */
  @media screen and (max-width: 749px) {
    .fm-block__field { font-size: 16px; }
  }

  .fm-block__submit { justify-self: start; }

  .fm-block__note {
    margin: 0;
    font-size: var(--font-size-sm);
  }

  .fm-block__note--error { color: rgb(var(--color-accent)); }
/* END_BLOCK:form */

/* START_BLOCK:gallery (INDEX:101) */
.gl-block__hint {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

.gl-block {
    display: grid;
    grid-template-columns: repeat(var(--gal-columns, 3), minmax(0, 1fr));
    gap: var(--gal-gap, 12px);
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  @media screen and (max-width: 749px) {
    .gl-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
/* END_BLOCK:gallery */

/* START_BLOCK:heading (INDEX:102) */
.hd-block {
    margin: 0;
    /* The setting is a desktop ceiling. The floor and the rate it grows at stay
       the theme's, so 56px does not become 56px on a 390px screen. */
    font-size: clamp(1.25rem, 3.2vw, var(--heading-size, 32px));
    line-height: 1.15;
    color: var(--box-color, inherit);
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .hd-block--start { text-align: start; }
  .hd-block--center { text-align: center; }
  .hd-block--end { text-align: end; }
  .hd-block--light { font-weight: 300; }
  .hd-block--normal { font-weight: 400; }
  .hd-block--medium { font-weight: 500; }
  .hd-block--bold { font-weight: 700; }
/* END_BLOCK:heading */

/* START_BLOCK:icon-text (INDEX:103) */
.it-block {
    display: flex;
    gap: 0.75rem;
    color: var(--box-color, inherit);
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .it-block--stacked { flex-direction: column; }
  .it-block--inline { flex-direction: row; align-items: flex-start; }

  .it-block--start { align-items: flex-start; text-align: start; }
  .it-block--center { align-items: center; text-align: center; }
  .it-block--end { align-items: flex-end; text-align: end; }

  .it-block__icon svg {
    width: var(--it-icon, 28px);
    height: var(--it-icon, 28px);
    flex: none;
  }

  .it-block__heading {
    margin: 0 0 0.25rem;
    font-weight: 500;
  }

  .it-block__text {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }
/* END_BLOCK:icon-text */

/* START_BLOCK:icon (INDEX:104) */
.icon-block { display: flex; }
  .icon-block--start { justify-content: flex-start; }
  .icon-block--center { justify-content: center; }
  .icon-block--end { justify-content: flex-end; }

  .icon-block__mark {
    display: grid;
    place-items: center;
    color: var(--box-color, inherit);
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .icon-block__mark svg {
    width: var(--icon-block-size, 32px);
    height: var(--icon-block-size, 32px);
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:105) */
.img-block { display: flex; }
  .img-block--start { justify-content: flex-start; }
  .img-block--center { justify-content: center; }
  .img-block--end { justify-content: flex-end; }

  .img-block__frame {
    width: min(var(--img-width, 1200px), 100%);
    overflow: hidden;
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .img-block__frame--square { aspect-ratio: 1; }
  .img-block__frame--portrait { aspect-ratio: 3 / 4; }
  .img-block__frame--landscape { aspect-ratio: 4 / 3; }
  .img-block__frame--wide { aspect-ratio: 16 / 9; }

  .img-block__link { display: block; height: 100%; }

  .img-block__image {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Only a cropped frame can crop. With the original shape the height is the
     image's own, so `object-fit` has nothing to fit against. */
  .img-block__frame:not(.img-block__frame--natural) .img-block__image {
    object-fit: cover;
  }

  .img-block__frame--contain:not(.img-block__frame--natural) .img-block__image {
    object-fit: contain;
  }

  .img-block__frame--natural .img-block__image { height: auto; }
/* END_BLOCK:image */

/* START_BLOCK:liquid (INDEX:106) */
.lq-block {
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }
/* END_BLOCK:liquid */

/* START_BLOCK:map (INDEX:107) */
.mp-block {
    overflow: hidden;
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  /* Whatever the merchant pasted, sized to the block rather than to whatever
     width and height Google wrote into the snippet. */
  .mp-block iframe {
    display: block;
    width: 100%;
    height: var(--map-height, 400px);
    border: 0;
  }

  .mp-block__note {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_BLOCK:map */

/* START_BLOCK:marquee (INDEX:108) */
.mq-block {
    overflow: hidden;
    color: var(--box-color, inherit);
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .mq-block__track {
    display: flex;
    width: max-content;
    gap: 2rem;
    font-size: var(--mq-size, 20px);
    animation: mq-slide var(--mq-speed, 20s) linear infinite;
  }

  .mq-block--right .mq-block__track { animation-direction: reverse; }

  .mq-block__item { padding-inline-end: 2rem; }

  @keyframes mq-slide {
    from { translate: 0 0; }
    to { translate: -50% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mq-block__track { animation: none; }
  }
/* END_BLOCK:marquee */

/* START_BLOCK:product-list (INDEX:109) */
.pl-block {
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .pl-block__note {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_BLOCK:product-list */

/* START_BLOCK:product (INDEX:110) */
.pd-block {
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .pd-block__note {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_BLOCK:product */

/* START_BLOCK:progress (INDEX:111) */
.pg-block {
    display: grid;
    gap: 0.375rem;
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .pg-block__label {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: var(--font-size-sm);
  }

  .pg-block__track {
    height: var(--pg-height, 8px);
    border-radius: 999px;
    background: rgba(var(--color-foreground), 0.12);
    overflow: hidden;
  }

  .pg-block__fill {
    display: block;
    width: var(--pg-value, 50%);
    height: 100%;
    background: var(--pg-fill, rgb(var(--color-foreground)));
  }
/* END_BLOCK:progress */

/* START_BLOCK:quote (INDEX:112) */
.qt-block {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    color: var(--box-color, inherit);
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .qt-block--start { justify-items: start; text-align: start; }
  .qt-block--center { justify-items: center; text-align: center; }
  .qt-block--end { justify-items: end; text-align: end; }

  .qt-block__quote {
    margin: 0;
    font-size: var(--quote-size, 20px);
    line-height: 1.4;
  }

  .qt-block__by {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  .qt-block__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
  }

  .qt-block__names { display: grid; }
  .qt-block__author { font-style: normal; font-weight: 500; }

  .qt-block__role {
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_BLOCK:quote */

/* START_BLOCK:row (INDEX:113) */
/* Flex, not grid. The columns carry their own widths as percentages and a row can hold any number of them, so the container cannot know its track list up front — which is exactly the case flex is for. Gutters are the gap here rather than padding, because a column's own padding is a separate setting the merchant controls. */
  /* Only when there is a picture. A stacking context on every row would trap any block that positions itself out of one — the lookbook card, a sticky column — inside a box it was meant to escape. */
  .row-block--media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .row-block__bg,
  .row-block__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
  }

  .row-block__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .row-block__scrim {
    background: rgb(var(--color-shadow, 0 0 0));
  }

  .row-block {
    display: flex;
    flex-wrap: wrap;
    gap: var(--row-row-gap, 24px) var(--row-column-gap, 24px);
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
    color: var(--box-color, inherit);
  }

  .row-block--v-start { align-items: flex-start; }
  .row-block--v-center { align-items: center; }
  .row-block--v-end { align-items: flex-end; }
  .row-block--v-stretch { align-items: stretch; }

  /* Through the wrapper, not past it.

     `display: contents` removes the wrapper's box, but selectors still match
     against the DOM — and in the DOM every theme block is a child of its own
     `div.shopify-block`. `.row-block > .column-block` therefore matched nothing
     and the stack setting did nothing at all: measured on a 360px phone, two
     50% columns stayed 45% each side by side. Naming the wrapper is exact,
     where a descendant selector would also reach a nested row's columns. */
  @media screen and (max-width: 749px) {
    .row-block--stack > .shopify-block > .column-block {
      flex: 1 1 100%;
      max-width: 100%;
    }

    .row-block--reverse {
      flex-direction: column-reverse;
    }
  }
/* END_BLOCK:row */

/* START_BLOCK:social (INDEX:114) */
.so-block {
    display: flex;
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .so-block--start { justify-content: flex-start; }
  .so-block--center { justify-content: center; }
  .so-block--end { justify-content: flex-end; }
/* END_BLOCK:social */

/* START_BLOCK:spacer (INDEX:115) */
.spacer-block { height: var(--space-desktop, 40px); }

  @media screen and (max-width: 749px) {
    .spacer-block { height: var(--space-mobile, 24px); }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:star-rating (INDEX:116) */
.rate-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .rate-block--start { justify-content: flex-start; }
  .rate-block--center { justify-content: center; }
  .rate-block--end { justify-content: flex-end; }

  .rate-block .stars__row svg {
    width: var(--rating-size, 16px);
    height: var(--rating-size, 16px);
  }

  .rate-block__count {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_BLOCK:star-rating */

/* START_BLOCK:tab (INDEX:117) */
.tab-block__body {
    display: grid;
    gap: 0.75rem;
  }

  /* Hidden only once the script has built a strip that shows the same words. */
  [data-tabs-ready] .tab-block__title { display: none; }
/* END_BLOCK:tab */

/* START_BLOCK:tabs (INDEX:118) */
.tb-block {
    display: grid;
    gap: 0.75rem;
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  /* The strip the script builds. Absent until then, so no empty bar. */
  .tb-block__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-block-end: 1px solid rgba(var(--color-foreground), 0.15);
  }

  .tb-block__tab {
    min-height: 2.75rem;
    padding-inline: 0.875rem;
    border: 0;
    border-block-end: 2px solid transparent;
    background: none;
    color: rgba(var(--color-foreground), 0.7);
    font-family: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
  }

  .tb-block__tab[aria-selected='true'] {
    border-block-end-color: rgb(var(--color-foreground));
    color: rgb(var(--color-foreground));
  }
/* END_BLOCK:tabs */

/* START_BLOCK:text (INDEX:119) */
.txt-block {
    font-size: var(--text-size, 16px);
    color: var(--box-color, inherit);
    /* `min(…, 100%)` because a measure in `ch` is a cap on line length, not a
       width — 60ch is wider than a phone and would push the page sideways. */
    max-width: min(var(--text-measure, 60ch), 100%);
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .txt-block--start { text-align: start; }
  .txt-block--center { text-align: center; margin-inline: auto; }
  .txt-block--end { text-align: end; margin-inline-start: auto; }
/* END_BLOCK:text */

/* START_BLOCK:video (INDEX:120) */
.vid-block {
    width: min(var(--video-width, 1200px), 100%);
    overflow: hidden;
    padding-block: var(--box-padding-block, 0);
    padding-inline: var(--box-padding-inline, 0);
    border: var(--box-border, 0);
    border-radius: var(--box-radius, 0);
    background: var(--box-background, transparent);
  }

  .vid-block__media,
  .vid-block__media iframe {
    display: block;
    width: 100%;
    height: auto;
  }

  .vid-block__media--embed {
    aspect-ratio: 16 / 9;
  }

  .vid-block__media--embed iframe {
    height: 100%;
  }

  .vid-block__note {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.3);
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:article-card (INDEX:122) */
.article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .article-card__link {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }

  .article-card__media {
    display: block;
    overflow: hidden;
    background: rgba(var(--color-foreground), 0.05);
    aspect-ratio: var(--card-ratio, 3 / 2);
  }

  .article-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* Slow and slight. A fast, large zoom reads as a effect; this reads as the
     photograph responding. */
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .article-card__link:hover .article-card__media img {
      transform: scale(1.05);
    }
  }

  .article-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  .article-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4375rem;
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* The category carries the weight — it is the one part of the line a reader
     scans for. */
  .article-card__category {
    color: rgb(var(--color-accent));
    font-weight: var(--font-body--weight-bold);
  }

  .article-card__dot {
    color: rgba(var(--color-foreground), 0.3);
  }

  .article-card__title {
    margin: 0;
    font-size: var(--font-size-h6);
    line-height: 1.3;
    transition: color var(--duration-fast) var(--ease-out);
    /* Two lines, then stop. A long title otherwise pushes the excerpt and the
       foot down and breaks the level line across a row of cards. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .article-card__link:hover .article-card__title {
    color: rgb(var(--color-accent));
  }

  .article-card__excerpt {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: rgba(var(--color-foreground), 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Pushed to the bottom, so the foot sits on one line across a row of cards
     whatever the titles above it did. */
  .article-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: auto;
    padding-block-start: 0.875rem;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
  }

  .article-card__author {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .article-card__avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgba(var(--color-accent), 0.12);
    color: rgb(var(--color-accent));
    font-size: var(--font-size-xs);
    font-weight: var(--font-body--weight-bold);
  }

  .article-card__author-name {
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .article-card__read {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.3125rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-body--weight-bold);
  }

  .article-card__arrow {
    display: flex;
    transition: translate var(--duration-fast) var(--ease-out);
  }

  .article-card__arrow svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  .article-card__link:hover .article-card__arrow {
    translate: 0.1875rem 0;
  }

  /* --- Panel --- * An object on the page, with its own edge and the picture flush to it. The * lift is the panel's, not the photograph's: a shadow needs a surface to be * cast by, and without a background there is nothing to cast it. */
  .article-card--panel {
    overflow: hidden;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--card-radius, 0px);
    background: rgba(var(--color-foreground), 0.02);
    transition:
      transform 0.3s var(--ease-out),
      box-shadow 0.3s var(--ease-out);
  }

  .article-card--panel .article-card__body {
    padding: 1.125rem 1.25rem 1.25rem;
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .article-card--panel:hover {
      transform: translateY(-0.25rem);
      box-shadow: 0 18px 38px -22px rgba(var(--color-shadow), 0.45);
    }
  }

  /* --- Plain --- * No frame at all: the photograph is the card and the words sit under it on * the page. The radius moves to the picture, which is the only box left. */
  .article-card--plain .article-card__media {
    border-radius: var(--card-radius, 0px);
  }

  .article-card--plain .article-card__body {
    padding-block-start: 0.875rem;
  }

  .article-card--plain .article-card__foot {
    border-block-start: 0;
    padding-block-start: 0.5rem;
  }

  /* --- Overlay --- * The words on the picture, behind a scrim. The scrim is a gradient rather * than a flat tint because a photograph is rarely dark where the text lands * and always dark somewhere else. */
  .article-card--overlay {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius, 0px);
  }

  .article-card--overlay .article-card__link {
    position: relative;
  }

  .article-card--overlay .article-card__media {
    aspect-ratio: var(--card-ratio, 3 / 2);
  }

  .article-card--overlay .article-card__body {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    justify-content: flex-end;
    padding: 3.5rem 1.25rem 1.25rem;
    background: linear-gradient(
      to top,
      rgba(var(--color-shadow), 0.8),
      rgba(var(--color-shadow), 0.45) 45%,
      transparent
    );
    color: rgb(var(--color-background));
  }

  .article-card--overlay .article-card__title,
  .article-card--overlay .article-card__author-name,
  .article-card--overlay .article-card__excerpt,
  .article-card--overlay .article-card__meta {
    color: rgb(var(--color-background));
  }

  .article-card--overlay .article-card__link:hover .article-card__title {
    color: rgb(var(--color-background));
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .article-card--overlay .article-card__category {
    color: rgb(var(--color-background));
  }

  .article-card--overlay .article-card__foot {
    border-block-start-color: rgba(var(--color-background), 0.25);
  }

  .article-card--overlay .article-card__avatar {
    background: rgba(var(--color-background), 0.2);
    color: rgb(var(--color-background));
  }

  /* --- Featured --- * Side by side above 990px, with the picture taking rather more than half — * it is the reason to stop. Stacked below that, where two columns would give * the words a measure nobody can read. */
  .article-card--featured {
    margin-block-end: 3rem;
  }

  @media screen and (min-width: 990px) {
    .article-card--featured .article-card__link {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      align-items: center;
      gap: 2.5rem;
    }

    .article-card--featured.article-card--panel .article-card__link {
      gap: 0;
    }

    .article-card--featured .article-card__title {
      font-size: var(--font-size-h3);
      -webkit-line-clamp: 3;
      line-clamp: 3;
    }

    .article-card--featured .article-card__excerpt {
      font-size: var(--font-size-base);
      -webkit-line-clamp: 3;
      line-clamp: 3;
    }

    /* The overlay lead keeps its words on the picture rather than beside it. */
    .article-card--featured.article-card--overlay .article-card__link {
      display: flex;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .article-card__media img,
    .article-card--panel,
    .article-card__arrow {
      transition: none;
    }
  }
/* END_SNIPPET:article-card */

/* START_SNIPPET:breadcrumbs (INDEX:127) */
/* The content column, not the screen. */
  .breadcrumbs-bar {
    width: min(calc(var(--page-width) - var(--page-margin) * 2), calc(100% - var(--page-margin) * 2));
    margin-inline: auto;
    padding-block-start: 0.5rem;
  }

  /* On the product page the buy grid is narrowed (section width, ~1340px) and
     centred; cap the trail to the same width so it lines up with the gallery
     instead of starting from the full page edge. Both are margin-auto centred. */
  @media screen and (min-width: 990px) {
    .breadcrumbs-bar--product {
      max-width: 1340px;
    }
  }

  /* On a phone the product grid narrows its own gutter and the toolbar follows. */
  @media screen and (max-width: 749px) {
    .breadcrumbs-bar {
      width: calc(100% - min(var(--page-margin), var(--spacing-grid)) * 2);
    }

    /* Product page leads straight into the gallery on a phone (Hydrogen parity),
       so the trail is hidden there. The BreadcrumbList JSON-LD still renders —
       CSS display does not affect structured data — so SEO is unchanged. Other
       templates keep their visible trail on mobile. */
    .breadcrumbs-bar--product {
      display: none;
    }
  }

  .breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    margin: 0 0 0.5rem;
    list-style: none;
    font-size: var(--font-size-xs);
  }

  .breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(var(--color-foreground), 0.7);
  }

  .breadcrumbs__item a {
    color: inherit;
    text-decoration: none;
  }

  .breadcrumbs__item a:hover {
    color: rgb(var(--color-foreground));
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .breadcrumbs__sep {
    color: rgba(var(--color-foreground), 0.4);
  }

  /* The page you are on, told apart by weight rather than by colour alone. */
  .breadcrumbs__item [aria-current='page'] {
    color: rgb(var(--color-foreground));
  }
/* END_SNIPPET:breadcrumbs */

/* START_SNIPPET:cart-addon (INDEX:128) */
/* One line by default. The description is a sentence a shopper reads once,
     so it costs a tap rather than permanent height in the tightest part of the
     cart — directly above the checkout button. */
  .cart-addon {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(var(--color-border), 0.9);
    border-radius: var(--style-border-radius-cards, 0);
  }

  .cart-addon:has(.cart-addon__input:checked) {
    border-color: rgba(var(--color-success, 34, 120, 80), 0.5);
  }

  /* Green, because this is the same promise the free-shipping bar makes:
     something has gone right. */
  /* `inline-flex` alone leaves the svg on the text baseline, which sat it a
     couple of pixels low against the title. Centred in its own box instead. */
  .cart-addon__icon {
    display: grid;
    place-items: center;
    align-self: center;
    line-height: 0;
    color: rgb(var(--color-success, 34, 120, 80));
  }

  .cart-addon__title {
    align-self: center;
  }

  .cart-addon__icon svg {
    width: 1.375rem;
    height: 1.375rem;
  }

  .cart-addon__title {
    font-size: var(--font-size-sm);
  }

  .cart-addon__info {
    display: grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 1px solid rgba(var(--color-foreground), 0.3);
    border-radius: 50%;
    background: none;
    color: rgba(var(--color-foreground), 0.7);
    font-size: 0.625rem;
    line-height: 1;
    cursor: pointer;
  }

  .cart-addon__info:hover {
    border-color: rgba(var(--color-foreground), 0.6);
    color: rgb(var(--color-foreground));
  }

  .cart-addon__price {
    justify-self: end;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
  }

  /* --- The switch --- */

  .cart-addon__switch {
    position: relative;
    display: inline-flex;
    cursor: pointer;
  }

  /* Kept in the document rather than removed: a control that is not rendered
     is not focusable, and the switch would be unreachable by keyboard. */
  .cart-addon__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .cart-addon__track {
    display: block;
    width: 2rem;
    height: 1.125rem;
    border-radius: 1rem;
    background: rgba(var(--color-foreground), 0.22);
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .cart-addon__thumb {
    display: block;
    width: 0.875rem;
    height: 0.875rem;
    margin: 0.125rem;
    border-radius: 50%;
    background: rgb(var(--color-background));
    transition: translate var(--duration-fast) var(--ease-out);
  }

  .cart-addon__input:checked + .cart-addon__track {
    background: rgb(var(--color-success, 34, 120, 80));
  }

  .cart-addon__input:checked + .cart-addon__track .cart-addon__thumb {
    translate: 0.875rem 0;
  }

  .cart-addon__input:focus-visible + .cart-addon__track {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: 2px;
  }

  .cart-addon__text {
    grid-column: 1 / -1;
    margin: 0.375rem 0 0;
    color: rgba(var(--color-foreground), 0.65);
    font-size: var(--font-size-xs);
    line-height: 1.4;
  }

  .cart-addon__text[hidden] {
    display: none;
  }

  /* Mid-request the switch is neither on nor off; saying so stops a second
     press queueing a second add. */
  .cart-addon[data-busy] {
    opacity: 0.55;
    pointer-events: none;
  }
/* END_SNIPPET:cart-addon */

/* START_SNIPPET:cart-drawer-foot (INDEX:129) */
.cart-foot {
    display: grid;
    gap: 0.5rem;
  }

  .cart-foot__total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .cart-foot__total-label {
    font-size: var(--font-size-body);
  }

  .cart-foot__total-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
  }

  .cart-foot__total-was {
    color: rgba(var(--color-foreground), 0.55);
    font-weight: var(--font-body--weight);
  }

  .cart-foot__total-now {
    font-size: var(--font-size-body);
    font-weight: var(--font-body--weight-bold);
  }

  .cart-foot__save {
    margin: 0.125rem 0 0;
    font-size: var(--font-size-xs);
    color: rgb(var(--color-accent));
    text-align: end;
  }

  /* --- The single note/discount disclosure --- */
  .cart-foot__more {
    border-block: 1px solid rgba(var(--color-foreground), 0.1);
  }

  .cart-foot__more-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: var(--font-size-sm);
    cursor: pointer;
    list-style: none;
  }

  .cart-foot__more-toggle::-webkit-details-marker {
    display: none;
  }

  .cart-foot__more-icon {
    display: inline-flex;
    color: rgb(var(--color-accent));
  }

  .cart-foot__more-icon svg {
    width: 0.9375rem;
    height: 0.9375rem;
  }

  .cart-foot__more-label {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cart-foot__more-chev {
    display: inline-flex;
    flex: 0 0 auto;
    color: rgba(var(--color-foreground), 0.6);
  }

  .cart-foot__more-chev svg {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .cart-foot__more[open] .cart-foot__more-chev svg {
    transform: rotate(180deg);
  }

  .cart-foot__more-body {
    display: grid;
    gap: 0.5rem;
    padding-block-end: 0.5rem;
  }

  .cart-foot__field {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
  }

  .cart-foot__field .field__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.375rem;
    padding: 0.3125rem 0.625rem;
    font-size: var(--font-size-sm);
  }

  .cart-foot__field .button {
    flex: 0 0 auto;
    width: auto;
    min-height: 2.375rem;
    padding-block: 0.375rem;
    white-space: nowrap;
  }

  .cart-foot__error {
    margin: 0;
    font-size: var(--font-size-xs);
    color: rgb(var(--color-accent));
  }

  .cart-foot__applied {
    display: grid;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: var(--font-size-sm);
  }

  .cart-foot__applied li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .cart-foot__applied li > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
  }

  .cart-foot__applied svg {
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
  }

  .cart-foot__applied-saved {
    color: rgb(var(--color-accent));
    font-variant-numeric: tabular-nums;
  }

  .cart-foot__note-label {
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .cart-foot__note {
    font-family: inherit;
    min-height: 3rem;
    padding: 0.4375rem 0.625rem;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    resize: vertical;
  }

  .cart-foot__note-save {
    justify-self: start;
    width: auto;
    min-height: 2.25rem;
    padding: 0.3125rem 0.875rem;
    font-size: var(--font-size-xs);
  }

  /* --- Actions --- */
  .cart-foot__actions {
    display: grid;
    gap: 0.625rem;
  }

  .cart-foot__actions--pair {
    grid-template-columns: 1fr 1fr;
  }

  .cart-foot__actions .button {
    min-height: 2.25rem;
    padding-inline: 0.5rem;
    padding-block: 0.375rem;
    white-space: nowrap;
  }

  /* The View-cart label swaps to a shorter form on a phone (user request), so
     both buttons keep one line side by side instead of stacking. */
  .cart-foot__view-short { display: none; }

  @media screen and (max-width: 749px) {
    .cart-foot__view-full { display: none; }
    .cart-foot__view-short { display: inline; }
  }

  /* Slim the accelerated wallet buttons (Shop Pay / PayPal / Google Pay). The
     custom property must be set ON the web component itself — it defines its own
     value, so an ancestor declaration does not cascade in. Verified 48px -> 40px. */
  .cart-foot__accelerated shopify-accelerated-checkout-cart,
  .cart-foot__accelerated shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-block-size: 40px;
  }
/* END_SNIPPET:cart-drawer-foot */

/* START_SNIPPET:cart-empty-grid (INDEX:130) */
.cart-empty__grid {
    display: grid;
    gap: var(--spacing-grid, 1.25rem) calc(var(--spacing-grid, 1.25rem) / 2);
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: start;
  }

  /* Two across in a panel that is 400px at its widest, four on a page. */
  .cart-empty__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media screen and (min-width: 750px) {
    .cart-empty--page .cart-empty__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .cart-empty__cell {
    min-width: 0;
  }
/* END_SNIPPET:cart-empty-grid */

/* START_SNIPPET:cart-empty (INDEX:131) */
.cart-empty {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 3rem 0;
    text-align: center;
  }

  .cart-empty--page {
    padding: 5rem 0;
  }

  /* Less air above when something follows. Five rows of empty page made sense when the sentence was the whole of it; with products underneath it is a gap the shopper scrolls past to reach them. */
  .cart-empty--page:has(.cart-empty__more) {
    padding-block: 3rem;
  }

  .cart-empty__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
  }

  .cart-empty__body {
    margin: 0 0 0.75rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* The way out stays the centred, quiet thing it was; what follows is a band under it with a rule between, so it reads as a second offer rather than as part of the sentence above. */
  .cart-empty__more {
    width: 100%;
    margin-block-start: 2rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid rgba(var(--color-border), 0.9);
    text-align: start;
  }

  /* A heading, not a styled paragraph. */
  .cart-empty__more-heading {
    margin: 0 0 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
  }

  .cart-empty__links {
    display: grid;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .cart-empty__link {
    font-size: var(--font-size-sm);
  }
/* END_SNIPPET:cart-empty */

/* START_SNIPPET:cart-items (INDEX:132) */
.cart-items {
    display: grid;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* A rule between rows, not around them. The line is there to stop two photographs running together; a box around each row would be a second surface inside a surface that is already one. */
  .cart-item {
    display: grid;
    gap: 0 1rem;
    padding: 1.25rem 0;
    border-block-end: 1px solid rgba(var(--color-foreground), 0.1);
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'media details'
      'media controls';
    align-content: start;
  }

  .cart-item:last-child {
    border-block-end: 0;
  }

  /* The crop the merchant chose for product cards. */
  .cart-item__media {
    grid-area: media;
    display: block;
    width: 4.5rem;
    overflow: hidden;
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.05);
    aspect-ratio: var(--cart-image-ratio, 3 / 4);
  }

  .cart-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The leading, trimmed off the top. */
  .cart-item__details {
    grid-area: details;
    display: grid;
    gap: 0.25rem;
    align-content: start;
    margin-block-start: -0.175em;
  }

  /* The name and the corner remove mark share the top line: the name takes what
     is left, the close mark sits hard right at the top of the row. */
  .cart-item__head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* The remove mark, a close glyph in the row's top corner (Hydrogen parity). */
  .cart-item__remove-x {
    flex: 0 0 auto;
    margin-inline-start: auto;
    display: inline-flex;
    padding: 0.125rem;
    color: rgba(var(--color-foreground), 0.5);
    line-height: 0;
    transition: color 0.15s ease;
  }

  .cart-item__remove-x:hover {
    color: rgb(var(--color-accent));
  }

  .cart-item__remove-x svg {
    width: 0.9375rem;
    height: 0.9375rem;
  }

  /* Two lines, then stop. A name that runs to four lines makes one row as tall as three and pushes the summary beside it off the screen; the whole of it is a press away on the row's own link, and in the title attribute. */
  .cart-item__title {
    min-width: 0;
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-body);
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cart-item__title:hover {
    color: rgb(var(--color-accent));
  }

  .cart-item__variant,
  .cart-item__property,
  .cart-item__terms,
  .cart-item__unit {
    margin: 0;
    font-size: var(--font-size-sm);
    /* 0.7, not 0.6: 0.6 measured 3.97:1 against the theme's default background
       and body text does not go below 4.5:1. */
    color: rgba(var(--color-foreground), 0.7);
  }

  /* After the shared rule, not before it — same specificity, so the one written later is the one that lands. */
  .cart-item__unit {
    color: rgb(var(--color-foreground));
    font-weight: var(--font-body--weight-bold);
  }

  .cart-item__unit-was {
    color: rgba(var(--color-foreground), 0.7);
  }

  .cart-item__discounts {
    padding: 0;
    margin: 0.125rem 0 0;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-accent));
    list-style: none;
  }

  /* Subscription chip on the line: a recurring mark and the plan name in an
     accent-tint pill, matching the Hydrogen storefront. */
  .cart-item__subscription {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    align-self: start;
    width: fit-content;
    margin: 0.1875rem 0 0;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--color-accent), 0.1);
    color: rgb(var(--color-accent));
    font-size: var(--font-size-xs);
    line-height: 1.15;
  }

  .cart-item__subscription-icon {
    flex: 0 0 auto;
  }

  .cart-item__error {
    margin: 0.25rem 0 0;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-accent));
  }

  .cart-item__controls {
    grid-area: controls;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-block-start: 0.375rem;
  }

  .cart-item__remove {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .cart-item__remove:hover {
    color: rgb(var(--color-accent));
  }

  /* Save for later: a quiet text control beside Remove, an icon and a word. */
  .cart-item__save {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
    cursor: pointer;
  }

  .cart-item__save:hover {
    color: rgb(var(--color-accent));
  }

  .cart-item__save-icon {
    flex: 0 0 auto;
  }

  .cart-items--drawer .cart-item__save {
    font-size: var(--font-size-xs);
  }

  /* "each" sits behind the number, not beside it in weight. */
  .cart-item__unit-each {
    color: rgba(var(--color-foreground), 0.55);
    font-weight: var(--font-body--weight);
  }

  /* On the title's line, not in a column of its own. */
  /* Hard right, on the title's line. */
  .cart-item__price {
    flex: 0 0 auto;
    margin: 0;
    margin-inline-start: auto;
    font-size: var(--font-size-body);
    font-weight: var(--font-body--weight-bold);
    text-align: end;
    /* The one number on the row that has to line up with the one above it, so the digits keep a fixed width and the column does not shimmer as quantities change. */
    font-variant-numeric: tabular-nums;
  }

  .cart-item__price-was {
    display: block;
    font-weight: var(--font-body--weight);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* --- Drawer --- */

  /* A narrower photograph and the price dropped under the details, because at
     380px a third column leaves the title wrapping every two words. */
  /* --- Drawer: slim --------------------------------------------------------- A drawer is a narrow column a shopper is passing through, not a page they are reading. Every dimension here is smaller than the cart page's on purpose, and the row is built so that a phone shows three items before it needs scrolling rather than one and a half. */
  .cart-items--drawer .cart-item {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'media details'
      'media controls';
    gap: 0 0.75rem;
    padding: 0.75rem 0;
  }

  .cart-items--drawer .cart-item__media {
    width: 4.5rem;
  }

  .cart-items--drawer .cart-item__price {
    font-size: var(--font-size-sm);
  }

  /* The price sits on the title's line rather than under the variant, so the row reads name-then-cost the way a receipt does. Reserving the space stops a long title running under it. */
  .cart-items--drawer .cart-item__details {
    gap: 0.125rem;
  }

  /* One line. A wrapped title in a drawer pushes the stepper down and turns a three-item cart into a scroll; the whole name is a click away on the row's own link, and in the title attribute. */
  .cart-items--drawer .cart-item__title {
    font-size: var(--font-size-sm);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cart-items--drawer .cart-item__variant,
  .cart-items--drawer .cart-item__property,
  .cart-items--drawer .cart-item__unit {
    font-size: var(--font-size-xs);
  }

  /* The stepper and the remove control share the foot of the row, with the stepper pulled in to its own height so the row is as tall as the photograph and no taller. */
  .cart-items--drawer .cart-item__controls {
    padding-block-start: 0.25rem;
    gap: 0.625rem;
  }

  .cart-items--drawer .cart-item__remove {
    font-size: var(--font-size-xs);
  }

  /* --- Page --- */

  @media screen and (min-width: 750px) {
    .cart-items--page .cart-item {
      gap: 0 1.5rem;
      padding: 1.75rem 0;
    }

    /* Smaller than it was. At 120px the photograph was the widest thing in the row and the name beside it wrapped early; the picture is here to identify a line already chosen, not to sell it again. */
    .cart-items--page .cart-item__media {
      width: 5.5rem;
    }
  }

  /* Below 750px the price column has nowhere to go, so it joins the controls row opposite the stepper — where a total belongs next to the number that drives it. */
  @media screen and (max-width: 749px) {
    .cart-items--page .cart-item {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        'media details'
        'media controls';
    }

    .cart-items--page .cart-item__controls {
      justify-content: start;
    }

  }
/* END_SNIPPET:cart-items */

/* START_SNIPPET:cart-notification (INDEX:133) */
/* Out of the way and small. */
  .cart-toast {
    position: fixed;
    /* Above the header, which is 40. It should never need to overlap it — the rule below keeps it clear — but a message clipped by the bar it is pointing at is worse than one that overlaps for a frame. */
    z-index: 60;
    inset-inline-end: var(--page-margin, 1rem);
    width: min(22rem, calc(100vw - 2 * var(--page-margin, 1rem)));
    display: grid;
    gap: 0.625rem;
    padding: 0.875rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-media);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 18px 38px -22px rgba(var(--color-shadow), 0.45);
  }

  /* Below the header rather than at the top of the screen, so it does not cover
     the cart icon it is telling the shopper to press.
   *
   * `--toast-top` is where the bar's bottom edge actually was at the moment the
   * message appeared, measured by script — see the note in theme.js for why
   * neither published header variable can answer this on its own.
   *
   * The fallback is the bar's full height, which is the safe answer when there
   * is no measurement: it can leave a gap, but it never puts the message under
   * the header. */
  .cart-toast--top {
    inset-block-start: calc(var(--toast-top, var(--header-height, 4rem)) + 0.75rem);
  }

  .cart-toast--bottom {
    inset-block-end: var(--page-margin, 1rem);
  }

  .cart-toast[hidden] {
    display: none;
  }

  /* In from the edge it sits against, and out the same way. */
  .cart-toast {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 0.24s var(--ease-out),
      translate 0.24s var(--ease-out);
  }

  .cart-toast[data-leaving] {
    opacity: 0;
    translate: 0 -0.5rem;
  }

  .cart-toast--bottom[data-leaving] {
    translate: 0 0.5rem;
  }

  @starting-style {
    .cart-toast {
      opacity: 0;
      translate: 0 -0.5rem;
    }
  }

  @starting-style {
    .cart-toast--bottom {
      opacity: 0;
      translate: 0 0.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-toast {
      transition: none;
    }
  }

  .cart-toast__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .cart-toast__eyebrow {
    margin: 0;
    font-size: var(--font-size-xs);
    letter-spacing: var(--type-eyebrow-tracking, 0.08em);
    text-transform: uppercase;
  }

  .cart-toast__close {
    width: 1.5rem;
    height: 1.5rem;
    min-height: 0;
    margin-inline-end: -0.25rem;
  }

  .cart-toast__close svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  .cart-toast__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  .cart-toast__image {
    flex: 0 0 auto;
    width: 3rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.05);
  }

  .cart-toast__image[hidden] {
    display: none;
  }

  .cart-toast__copy {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
  }

  .cart-toast__title {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.3;
    /* Two lines, then stop — a long title should not push the buttons down the
       screen on a message this size. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cart-toast__variant {
    margin: 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .cart-toast__variant[hidden] {
    display: none;
  }

  .cart-toast__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  /* The form is only there to carry the button's name to Shopify, so it takes
     the width of the cell it sits in rather than a shape of its own. */
  .cart-toast__checkout {
    display: grid;
    margin: 0;
  }

  /* Slim, like everything else that is a way into a decision rather than the
     decision — the cart's own checkout button is the only one sized like one. */
  .cart-toast__button {
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-xs);
  }
/* END_SNIPPET:cart-notification */

/* START_SNIPPET:cart-progress (INDEX:134) */
.cart-progress {
    display: grid;
    gap: 0.5rem;
    padding: 0.875rem 0;
  }

  /* In the foot now, beside the tools, so it carries no band of its own — see
     snippets/cart-summary.liquid. */
  .cart-progress--drawer {
    padding: 0;
    gap: 0.375rem;
  }

  .cart-progress__message {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: rgba(var(--color-foreground), 0.8);
  }

  /* The amount still to go is the part being read, so it carries the weight and the colour rather than the sentence around it. */
  .cart-progress__message strong {
    color: rgb(var(--color-accent));
    font-weight: var(--font-body--weight-bold);
  }

  /* Earned: the one moment this line reports a win rather than a shortfall, so it changes colour outright. Green is the same success token the pickup block uses for "available", with the theme's foreground behind it for a scheme that has not defined one. */
  .cart-progress.is-qualified .cart-progress__message {
    color: rgb(var(--color-success, 34, 120, 80));
    font-weight: var(--font-body--weight-bold);
  }

  .cart-progress__track {
    position: relative;
    height: 0.25rem;
    border-radius: 999px;
    background: rgba(var(--color-foreground), 0.12);
    overflow: hidden;
  }

  .cart-progress__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: rgb(var(--color-accent));
    transition: width 0.3s ease;
  }

  .cart-progress.is-qualified .cart-progress__fill {
    background: rgb(var(--color-success, 34, 120, 80));
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-progress__fill {
      transition: none;
    }
  }
/* END_SNIPPET:cart-progress */

/* START_SNIPPET:cart-recommendations (INDEX:135) */
.cart-recs {
    border-block-start: 1px solid rgba(var(--color-border), 0.9);
    padding-block-start: 1rem;
    margin-block-start: 1rem;
  }

  /* Room under the last card. */
  .cart-recs--drawer {
    margin-block-end: 1rem;
  }

  .cart-recs__heading {
    margin: 0 0 0.625rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
  }

  .cart-recs__list {
    display: grid;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .cart-recs__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
  }

  .cart-recs__media {
    display: block;
    width: 3.5rem;
    aspect-ratio: 3 / 4;
    border-radius: var(--style-border-radius-cards, 0);
    overflow: hidden;
    background: rgba(var(--color-foreground), 0.04);
  }

  .cart-recs__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-recs__copy {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
  }

  .cart-recs__title {
    font-size: var(--font-size-sm);
    line-height: 1.3;
    text-decoration: none;
    color: inherit;
    /* Two lines, then stop. A long title in a drawer this narrow otherwise
       pushes the price and the button onto a third and fourth row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cart-recs__title:hover {
    color: rgb(var(--color-accent));
  }

  .cart-recs__price {
    font-size: var(--font-size-xs);
  }

  /* Slim. It is a way into a decision, not the decision — the cart's own
     checkout button is the only control here sized like one. */
  .cart-recs__add {
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* The list layout is a row with room at the end for a word, so it keeps the word. The mark is for the carousel, where the card has a picture to put it on and no width to spare for a label. */
  .cart-recs__add-icon {
    display: none;
  }

  /* --- Carousel ------------------------------------------------------------- A rail of cards instead of a column of rows. In a drawer it shows two at a time where the list shows two and stops; on the cart page it keeps a long suggestion list from pushing the summary off the screen. */
  /* The rail is positioned so the arrows have something to sit against. */
  .cart-recs__rail {
    position: relative;
  }

  .cart-recs--carousel .cart-recs__list {
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Room after the last card — see the same note in sections/product.liquid. */
    padding-inline-end: 0.625rem;
    scroll-padding-inline: 0 0.625rem;
  }

  .cart-recs--carousel .cart-recs__list::-webkit-scrollbar {
    display: none;
  }

  /* One height, buttons on one line — see the same note in sections/product.liquid. */
  .cart-recs--carousel .cart-recs__list {
    align-items: stretch;
  }

  .cart-recs--carousel .cart-recs__item {
    flex: 0 0 9.5rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    align-items: start;
    gap: 0.375rem;
    scroll-snap-align: start;
  }

  .cart-recs--carousel .cart-recs__media {
    width: 100%;
  }

  /* The control moves onto the picture — the same mark, in the same corner, as the product page's pairings and the cards on a phone. */
  .cart-recs--carousel .cart-recs__media {
    grid-area: 1 / 1;
  }

  .cart-recs--carousel .cart-recs__form,
  .cart-recs--carousel .cart-recs__item > .cart-recs__add {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: end;
    margin: 0.375rem;
  }

  .cart-recs--carousel .cart-recs__form {
    display: grid;
  }

  /* 32px, past the 24px minimum target and small enough to read as a mark on the image rather than a control competing with the product. The chip is the scheme's background rather than a literal white, so it follows a merchant's colours, and it is what gives the glyph its contrast — which is why the icon carries no fill of its own. */
  /* A solid charcoal circle with a white plus, matching the Hydrogen
     storefront's cart-recommendation add control: the filled dark mark is the
     default, and it warms to the accent on hover. */
  .cart-recs--carousel .cart-recs__add {
    width: 2rem;
    min-width: 0;
    height: 2rem;
    /* `.button` sets a min-height for comfortable text targets; without
       releasing it the circle comes out 32 wide and 44 tall. */
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    box-shadow: 0 2px 10px -4px rgba(var(--color-shadow), 0.45);
  }

  /* No wipe on the round one — see the note in sections/product.liquid. */
  .cart-recs--carousel .cart-recs__add::after {
    content: none;
  }

  .cart-recs--carousel .cart-recs__add:hover,
  .cart-recs--carousel .cart-recs__add:focus-visible {
    background: rgb(var(--color-accent));
    color: rgb(var(--color-background));
  }

  /* The word stays in the document — hiding it is what makes the mark, and the
     accessible name comes from `aria-label` at both layouts. */
  .cart-recs--carousel .cart-recs__add-icon {
    display: inline-flex;
  }

  .cart-recs--carousel .cart-recs__add-icon svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .cart-recs--carousel .cart-recs__add-label {
    display: none;
  }

  .cart-recs--carousel .cart-recs__title {
    -webkit-line-clamp: 2;
  }

  /* Inside the rail, not hanging off it — the cart has no page gutter for them
     to sit in, the same reason the product gallery's arrows moved inwards. */
  .cart-recs__rail .scroll-arrow--prev {
    inset-inline-start: 0.25rem;
  }

  .cart-recs__rail .scroll-arrow--next {
    inset-inline-end: 0.25rem;
  }

  /* Level with the middle of the picture, not the middle of the rail. */
  .cart-recs__rail .scroll-arrow {
    width: 1.875rem;
    height: 1.875rem;
    inset-block-start: calc(9.5rem * 2 / 3 - 0.9375rem);
  }

  /* In the drawer the cards are two to the panel, so a card's width is a share of the rail rather than a number — which is what the container unit is for. */
  .cart-recs--drawer .cart-recs__rail {
    container-type: inline-size;
  }

  .cart-recs--drawer .cart-recs__rail .scroll-arrow {
    inset-block-start: calc((100cqw - 0.625rem) / 2 * 2 / 3 - 0.9375rem);
  }

  .cart-recs__rail .scroll-dots {
    margin-block-start: 0.5rem;
  }

  /* Two to a panel, neither of them cut. */
  .cart-recs--drawer.cart-recs--carousel .cart-recs__list {
    padding-inline-end: 0;
    scroll-padding-inline: 0;
  }

  .cart-recs--drawer.cart-recs--carousel .cart-recs__item {
    flex-basis: calc((100% - 0.625rem) / 2);
  }

  /* The cart page has room for a proper rail on a desktop and none at all on a phone, so it takes the same pairing only where the drawer's problem is actually its problem too. */
  @media screen and (max-width: 749px) {
    .cart-recs--carousel .cart-recs__list {
      padding-inline-end: 0;
      scroll-padding-inline: 0;
    }

    .cart-recs--carousel .cart-recs__item {
      flex-basis: calc((100% - 0.625rem) / 2);
    }
  }
/* END_SNIPPET:cart-recommendations */

/* START_SNIPPET:cart-save-bag (INDEX:137) */
.save-bag {
    border-block-start: 1px solid rgba(var(--color-foreground), 0.1);
  }

  .save-bag__toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0;
    border: 0;
    background: none;
    color: rgb(var(--color-foreground));
    text-align: start;
    cursor: pointer;
  }

  .save-bag__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: rgb(var(--color-accent));
  }

  .save-bag__prompt {
    display: grid;
    gap: 0.0625rem;
    min-width: 0;
    flex: 1 1 auto;
  }

  .save-bag__prompt-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
  }

  .save-bag__prompt-sub {
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .save-bag__chev {
    display: inline-flex;
    flex: 0 0 auto;
    color: rgba(var(--color-foreground), 0.6);
  }

  .save-bag__chev svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .save-bag__toggle[aria-expanded='true'] .save-bag__chev svg {
    transform: rotate(180deg);
  }

  .save-bag__panel {
    padding-block-end: 0.625rem;
  }

  .save-bag__lede {
    margin: 0 0 0.625rem;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.75);
  }

  .save-bag__row {
    display: flex;
    gap: 0.5rem;
  }

  .save-bag__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.5rem;
    padding-inline: 0.75rem;
  }

  .save-bag__submit {
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding-block: 0.5rem;
    white-space: nowrap;
  }

  .save-bag__error {
    margin: 0.5rem 0 0;
    font-size: var(--font-size-xs);
    color: rgb(var(--color-accent));
  }

  .save-bag__fine {
    margin: 0.5rem 0 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.6);
  }

  .save-bag__fine a {
    color: inherit;
    text-decoration: underline;
  }

  .save-bag__note {
    margin: 0.25rem 0 0.5rem;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground));
  }

  .save-bag__done {
    display: flex;
    align-items: start;
    gap: 0.625rem;
    padding-block: 0.25rem 0.5rem;
  }

  .save-bag__done-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: rgb(var(--color-accent));
  }

  .save-bag__done-title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
  }

  .save-bag__done-sub {
    margin: 0.125rem 0 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_SNIPPET:cart-save-bag */

/* START_SNIPPET:cart-summary (INDEX:138) */
/* Slim, like the rest of the theme's controls. `.button` ships a 44px target for a label that can be tapped anywhere on a page; this one is full width in a column of its own, so the height is spent on air rather than on reach. */
  /* Slim, like the rest of the theme's controls. `.button` ships a 44px target for a label that can be tapped anywhere on a page; these are full width in a column of their own, so the height would be spent on air rather than on reach. */
  .cart-summary .cart-summary__actions .button {
    min-height: 2.5rem;
    padding-block: 0.5rem;
  }

  /* Reassurance under the checkout button (cart page). */
  /* Shopify's accelerated wallet buttons on the cart page, slimmed to match the
     theme's controls (the custom property must be set on the web component
     itself; it does not cascade in from an ancestor). Mirrors the cart drawer. */
  .cart-summary__accelerated {
    margin-block-start: 0.625rem;
  }

  .cart-summary__accelerated shopify-accelerated-checkout-cart,
  .cart-summary__accelerated shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-block-size: 40px;
  }

  /* --- Terms --- */

  .cart-terms {
    display: flex;
    align-items: start;
    gap: 0.5rem;
    /* Clear of the checkout button it gates. Pressed together, the checkbox
       read as part of the button rather than as a condition on it. */
    margin-block: 0.125rem 0.5rem;
  }

  /* Sized against the text it sits beside rather than left at the browser's default, which is a different size in every engine. `margin-block-start` rather than centring: the label can run to three lines, and a box centred on three lines floats away from the sentence it belongs to. */
  .cart-terms__box {
    flex: 0 0 auto;
    width: 0.9375rem;
    height: 0.9375rem;
    margin: 0.1875rem 0 0;
    accent-color: rgb(var(--color-foreground));
    cursor: pointer;
  }

  .cart-terms__label,
  .cart-terms__label p {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 1.45;
    color: rgba(var(--color-foreground), 0.8);
    cursor: pointer;
  }

  .cart-terms__error {
    margin: 0.375rem 0 0;
    font-size: var(--font-size-xs);
    color: rgb(var(--color-error, 176, 32, 32));
  }

  .cart-terms__error[hidden] {
    display: none;
  }

  .cart-page__title {
    margin: 0 0 1.5rem;
    font-size: var(--font-size-h2);
  }

  .cart-page__form {
    display: grid;
    gap: 2.5rem;
    align-items: start;
  }

  .cart-page__update {
    margin-block-start: 1.5rem;
  }

  .js .cart-page__update {
    display: none;
  }

  /* While an update is in flight the figures on screen are about to be
     replaced, so the column dims to say so and stops taking presses that would
     be made against stale numbers. Dimming rather than a spinner: nothing here
     is slow enough to need a moving part. */
  .cart-page__contents[data-cart-busy] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  @media screen and (min-width: 990px) {
    .cart-page__form {
      /* The panel carries three disclosures, a subtotal with two adjustment
         lines, the add-on row and the wallet buttons. At 20rem the discount
         field and its button were fighting for the same line. */
      grid-template-columns: minmax(0, 1fr) 23rem;
      gap: 3.5rem;
    }

    /* Sticky under the header, so the total and the way out stay reachable however long the list is. `--header-height` is published by the theme for the sticky bar; the fallback covers pages where it has not been set yet. */
    .cart-page__aside {
      position: sticky;
      inset-block-start: calc(var(--header-height, 4rem) + 1.5rem);
    }
  }

  /* The cards taken, set off from the button they sit under and stepped back — reassurance rather than another thing to press. */
  .cart-summary .payment-icons {
    margin-block-start: 0.625rem;
    gap: 0.25rem;
  }

  .cart-summary .payment-icons__icon,
  .cart-summary .payment-icons__icon svg,
  .cart-summary .payment-icons svg {
    width: 2.25rem;
    height: 1.4375rem;
  }

  /* One row on the drawer, where the icons are a compact cluster. The cart page keeps them stacked — its tools are disclosures, not icons, and a full-width column of them beside a progress bar would be a column of one. */
  .cart-summary--drawer .cart-summary__top {
    /* Tight to the subtotal beneath it: the bar and the three icons are one
       band, and the grid's own gap was enough on its own. */
    margin-block-end: -0.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    /* The panels are a third child of this row and must not sit beside the
       other two — they wrap onto their own full-width line beneath. */
    flex-wrap: wrap;
  }

  .cart-summary__top .cart-tool-panels {
    flex: 1 0 100%;
  }

  .cart-summary--drawer .cart-summary__top .cart-progress {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
  }

  .cart-summary--drawer .cart-summary__top .cart-tools {
    flex: 0 0 auto;
  }

  /* One row, two equal columns. `1fr 1fr` rather than `auto` so the pair stays even whatever the two words are — "View cart" and "Checkout" are different lengths in every language the theme is translated into. */
  .cart-summary__actions--pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .cart-summary__actions--pair .button {
    width: 100%;
  }

  .cart-summary {
    display: grid;
    gap: 0.5rem;
  }

  /* --- Rows --- */

  .cart-summary__discounts {
    display: grid;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .cart-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
  }

  .cart-summary__row--discount {
    font-size: var(--font-size-sm);
    color: rgb(var(--color-accent));
  }

  /* Quieter than the subtotal above it. Both numbers are true and the shopper
     needs both, but the goods are what they are buying and the deposit is how
     it is being paid — a deposit set louder than the price reads as the price. */
  .cart-summary__row--due {
    font-size: var(--font-size-sm);
  }

  .cart-summary__due {
    font-variant-numeric: tabular-nums;
  }

  .cart-summary__fineprint {
    margin: 0.125rem 0 0;
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
  }

  /* The price is the one thing in the theme that is bold. Everything else here — the label, the terms, the button — is normal weight, so the number is the only thing on the panel asking to be read first. */
  /* The word carries the same weight as the figure: they are one statement, and
     a bold number beside a regular label reads as the number interrupting. */
  .cart-summary__total-label {
    font-weight: var(--font-body--weight-bold);
  }

  .cart-summary__total {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4375rem;
    font-weight: var(--font-body--weight-bold);
    font-variant-numeric: tabular-nums;
  }

  .cart-summary__was {
    font-weight: var(--font-body--weight);
    color: rgba(var(--color-foreground), 0.55);
    text-decoration-thickness: 1px;
  }

  .cart-summary__discounts {
    display: grid;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .cart-summary__row--discount {
    color: rgb(var(--color-accent));
    font-size: var(--font-size-sm);
  }

  .cart-summary__extras {
    display: grid;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .cart-summary__row--extra {
    color: rgba(var(--color-foreground), 0.75);
    font-size: var(--font-size-sm);
  }

  .cart-summary__row--extra > span:first-child,
  .cart-summary__row--discount > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
  }

  .cart-summary__row--discount svg,
  .cart-summary__row--extra svg {
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
  }

  .cart-summary__row--extra svg {
    color: rgb(var(--color-success, 34, 120, 80));
  }

  .cart-summary__row--total {
    padding-block-start: 0.75rem;
    border-block-start: 1px solid rgba(var(--color-foreground), 0.12);
  }

  .cart-summary__terms {
    margin: -0.25rem 0 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Both buttons, one height. */
  /* One line each. */
  .cart-summary__actions--pair > * {
    min-height: 2.75rem;
    padding-inline: 0.5rem;
    padding-block: 0.375rem;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .cart-summary__checkout {
    width: 100%;
    min-height: 2.75rem;
    margin-block-start: 0.25rem;
  }

  .cart-summary__actions--pair .cart-summary__checkout {
    margin-block-start: 0;
  }

  .cart-summary__accelerated {
    display: grid;
    gap: 0.5rem;
  }

  /* Nothing at all, now. */
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:cart-tools (INDEX:139) */
.cart-tools {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  /* --- On the cart page: disclosures ---------------------------------------- A column with room in it, so nothing is hidden behind an icon and a shopper can leave one open while working on another. */
  .cart-tools--stacked {
    display: grid;
    gap: 0;
    border-block-start: 1px solid rgba(var(--color-border), 0.9);
  }

  .cart-tool-row {
    border-block-end: 1px solid rgba(var(--color-border), 0.9);
  }

  .cart-tool-row__toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0;
    cursor: pointer;
    font-size: var(--font-size-sm);
    list-style: none;
  }

  .cart-tool-row__toggle::-webkit-details-marker {
    display: none;
  }

  .cart-tool-row__icon {
    display: inline-flex;
    color: rgb(var(--color-accent));
  }

  .cart-tool-row__icon svg {
    width: 1rem;
    height: 1rem;
  }

  .cart-tool-row__label {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cart-tool-row__toggle > svg {
    flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
    transition: rotate var(--duration-fast) var(--ease-out);
  }

  .cart-tool-row[open] .cart-tool-row__toggle > svg {
    rotate: 180deg;
  }

  .cart-tool-row__body {
    display: grid;
    gap: 0.5rem;
    padding-block-end: 0.875rem;
  }

  .cart-tool-row__body .cart-tool__estimator {
    display: grid;
    gap: 0.5rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-tool-row__toggle > svg {
      transition: none;
    }
  }

  /* Round, quiet, and the size of a thumb. They sit beside a total that is the
     loudest thing in the foot, so they are deliberately the softest. */
  .cart-tools__button {
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    border: 1px solid rgba(var(--color-border), 0.9);
    border-radius: 50%;
    background: transparent;
    color: rgb(var(--color-foreground));
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .cart-tools__button:hover {
    border-color: rgba(var(--color-foreground), 0.4);
    background: rgba(var(--color-foreground), 0.05);
  }

  .cart-tools__button svg {
    width: 1rem;
    height: 1rem;
  }

  .cart-tool {
    width: min(24rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid rgba(var(--color-border), 0.9);
    border-radius: var(--style-border-radius-cards, 0);
    /* Declared: the theme's reset zeroes margins, which takes the browser's own
       centring with it. */
    margin: auto;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 30px 60px -30px rgba(var(--color-shadow), 0.6);
  }

  .cart-tool::backdrop {
    background: rgba(var(--color-shadow), 0.5);
  }

  /* --- Over the drawer, not over the page ----------------------------------- A modal dialog sits in the top layer, which is positioned against the viewport rather than against any parent — so it centres on the whole screen however deeply it is nested. That is right for the cart page and wrong in a drawer, where the shopper's attention is inside a 27rem column on one edge and a panel in the middle of the screen reads as having left it. */
  .cart-tool--in-drawer {
    inset-block: auto 0;
    inset-inline: auto 0;
    /* `100vw`, not `100%`. A dialog in the top layer is sized against the viewport, so a percentage here is a percentage of the screen — which is the same number only while the drawer happens to be full width. The drawer's own `min(27rem, 100%)` is mirrored exactly so the two edges agree at every width. */
    width: min(27rem, 100vw);
    /* The browser's own dialog rule is `max-width: calc(100% - 6px - 2em)` —
       about 38px it keeps clear so a centred dialog never touches the edges.
       Right for a centred dialog and wrong for a sheet pinned to one: measured
       at 390px the panel came out 355 wide with a 35px gap down its left, while
       above 432 the width was under the clamp and nothing showed. */
    max-width: 100vw;
    max-height: 85svh;
    margin: 0;
    border-inline: 0;
    border-block-end: 0;
    border-start-start-radius: var(--style-border-radius-cards, 0);
    border-start-end-radius: var(--style-border-radius-cards, 0);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    box-shadow: 0 -20px 50px -30px rgba(var(--color-shadow), 0.6);
    overflow-y: auto;

    /* Rises from the bottom, where the icon that opened it is. */
    translate: 0 0;
    opacity: 1;
    transition:
      translate var(--duration-default, 0.28s) var(--ease-out, ease),
      opacity var(--duration-default, 0.28s) var(--ease-out, ease),
      overlay var(--duration-default, 0.28s) allow-discrete,
      display var(--duration-default, 0.28s) allow-discrete;
  }

  /* Where it comes from, and where it goes back to. */
  @starting-style {
    .cart-tool--in-drawer[open] {
      translate: 0 100%;
      opacity: 0;
    }
  }

  .cart-tool--in-drawer:not([open]) {
    translate: 0 100%;
    opacity: 0;
  }

  .cart-tool--in-drawer::backdrop {
    opacity: 1;
    transition:
      opacity var(--duration-default, 0.28s) var(--ease-out, ease),
      overlay var(--duration-default, 0.28s) allow-discrete,
      display var(--duration-default, 0.28s) allow-discrete;
  }

  @starting-style {
    .cart-tool--in-drawer[open]::backdrop {
      opacity: 0;
    }
  }

  .cart-tool--in-drawer:not([open])::backdrop {
    opacity: 0;
  }

  /* A sheet that slides is motion for its own sake to someone who has asked for less of it. The fade stays, because appearing from nothing still reads as arriving. */
  @media (prefers-reduced-motion: reduce) {
    @starting-style {
      .cart-tool--in-drawer[open] {
        translate: 0 0;
      }
    }

    .cart-tool--in-drawer:not([open]) {
      translate: 0 0;
    }
  }

  /* Only the drawer is dimmed behind it, not the whole page — the drawer's own
     backdrop is already covering that. */
  .cart-tool--in-drawer::backdrop {
    background: rgba(var(--color-shadow), 0.35);
  }

  @media screen and (min-width: 750px) {
    /* The drawer sits above everything at z-index 60; a top-layer dialog is
       above that by definition, so nothing here needs a z-index of its own. */
    .cart-tool--in-drawer {
      max-height: 90svh;
    }
  }

  /* --- Slim, throughout ------------------------------------------------------ Three small tasks in a sheet over a cart. Nothing here is the point of the page, so nothing here is sized as though it were: the theme's default control heights make a panel that dominates the drawer it is covering. */
  .cart-tool__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-block-end: 1px solid rgba(var(--color-border), 0.9);
  }

  .cart-tool__title {
    margin: 0;
    font-family: var(--font-heading--family);
    /* Body size. A panel title is a label for what is already open, not a
       heading competing with the cart behind it. */
    font-size: var(--font-size-body);
    line-height: 1.2;
  }



  .cart-tool__body {
    display: grid;
    gap: 0.5rem;
    padding: 0.875rem;
  }

  .cart-tool__body .cart-tool__estimator {
    display: grid;
    gap: 0.5rem;
  }

  .cart-tool__label {
    font-size: var(--font-size-xs);
    line-height: 1.2;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Scoped to the panels: the same classes are the checkout button one layer
     down, which is the one control here that should look like a decision. */
  .cart-tool__body .field__input,
  .cart-tool-row__body .field__input {
    min-height: 2.25rem;
    padding: 0.3125rem 0.625rem;
    font-size: var(--font-size-sm);
  }

  .cart-tool__body textarea.field__input,
  .cart-tool-row__body textarea.field__input {
    min-height: 3.5rem;
    line-height: 1.4;
  }

  .cart-tool__body .button,
  .cart-tool-row__body .button {
    min-height: 2.25rem;
    padding: 0.3125rem 0.875rem;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
  }

  .cart-tool__note {
    font-family: inherit;
    resize: vertical;
  }

  .cart-tool__applied {
    display: grid;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: var(--font-size-sm);
  }

  .cart-tool__applied li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  /* Icon beside the code, not above it. The span was inline, so at this width
     the tag and the word broke onto separate lines. */
  .cart-tool__applied li > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
  }

  .cart-tool__applied svg {
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
  }

  .cart-tool__saved {
    color: rgb(var(--color-accent));
    font-variant-numeric: tabular-nums;
  }

  .cart-tool__rates:empty {
    display: none;
  }

  .cart-tool__rates {
    display: grid;
    gap: 0.25rem;
    font-size: var(--font-size-sm);
  }

  .cart-tool__rate {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .cart-tool__rate span:last-child {
    font-weight: var(--font-body--weight-bold);
    font-variant-numeric: tabular-nums;
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-tools__button {
      transition: none;
    }
  }

  /* ---------------------------------------------------------------- *
   * Inline panels
   *
   * The drawer's tools used to be dialogs in the top layer, which sat
   * over the cart they were editing. In the flow they push the subtotal
   * down instead, so the line being annotated and the total being
   * discounted both stay on screen.
   * ---------------------------------------------------------------- */
  .cart-tool-panels:has(.cart-tool--inline:not([hidden])) {
    margin-block-start: 0.75rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid rgba(var(--color-border), 0.9);
  }

  .cart-tool--inline {
    width: auto;
    max-width: none;
    margin: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .cart-tool--inline .cart-tool__head {
    padding-inline: 0;
  }

  .cart-tool--inline .cart-tool__body {
    padding-inline: 0;
  }

  /* The attribute is honoured out loud: `[hidden]` carries only the
     browser's own `display: none`, which the rules above would beat. */
  .cart-tool--inline[hidden] {
    display: none;
  }

  /* Which one is open, said by inversion rather than a tint. A 6% wash was
     legible next to the other two only if you were looking for it, and the
     panel below gives no clue which icon opened it. */
  .cart-tools__button[aria-expanded='true'] {
    border-color: rgb(var(--color-foreground));
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  .cart-tools__button[aria-expanded='true']:hover {
    border-color: rgb(var(--color-foreground));
    background: rgba(var(--color-foreground), 0.85);
  }


  /* Code and Apply on one line: the field takes the room, the button only as
     much as its word needs. Stacked full width, the pair cost more vertical
     space than the cart lines they sit under. */
  /* Both layouts. The drawer opens these as inline panels and the cart page as
     disclosures, but the field and its button are the same pair in each — the
     rule was scoped to the drawer, so the page stacked them full width. */
  .cart-tool__field-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
  }

  .cart-tool__field-row .field__input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cart-tool__field-row .button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }


  /* The collapse control sits astride the panel's top edge — half over the rule
     that separates it from the icons, half inside the panel. One way to close,
     in the place the panel opened from, rather than an X in a corner competing
     with the icon that toggles the same panel. */
  .cart-tool--inline {
    padding-block-start: 0.75rem;
  }

  .cart-tool__collapse {
    /* Anchored to `.cart-drawer__foot`, which draws the rule. `top: 0` is that
       element's padding-box edge — immediately inside its border — so shifting
       up by half the circle leaves the top half above the line and the bottom
       half below it. */
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    translate: -50% -50%;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    /* A stronger edge than the rule it sits on, so it is findable. Not a
       filled circle: the drawer's one filled dark control is CHECKOUT, and a
       second would compete with it for the eye — this only dismisses a panel. */
    border: 1px solid rgba(var(--color-foreground), 0.35);
    border-radius: 50%;
    /* The foot's own fill, so the circle reads as a notch cut into the rule
       rather than a token floating on top of it. */
    background:
      linear-gradient(rgba(var(--color-foreground), 0.035), rgba(var(--color-foreground), 0.035)),
      var(--gradient-background);
    color: rgb(var(--color-foreground));
    cursor: pointer;
    /* Above the panel body and the rule it straddles. */
    z-index: 1;
  }

  .cart-tool__collapse:hover {
    border-color: rgba(var(--color-foreground), 0.6);
    background:
      linear-gradient(rgba(var(--color-foreground), 0.08), rgba(var(--color-foreground), 0.08)),
      var(--gradient-background);
  }

  .cart-tool__collapse svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  /* No rule under the title. The panel already sits between two of them — the
     foot's border above and the subtotal's below — and a third divided a label
     from the field it labels. */
  .cart-tool--inline .cart-tool__head {
    padding-block: 0 0.5rem;
    border-block-end: 0;
  }
/* END_SNIPPET:cart-tools */

/* START_SNIPPET:collection-banner-media (INDEX:141) */
.collection-banner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
  }

  .collection-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Sized by the image rather than by the frame, so the banner is exactly as
     tall as the crop the merchant made. */
  .collection-banner--adapt .collection-banner__media {
    position: relative;
    inset: auto;
  }

  .collection-banner--adapt .collection-banner__image {
    height: auto;
  }

  /* The wash. Strongest at the edge the text sits against and clearing towards the other, so the photograph is dimmed where the words are and left alone where they are not. */
  .collection-banner--image .collection-banner__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, calc(var(--banner-overlay, 0.25) * 1.4)) 0%,
      rgba(0, 0, 0, var(--banner-overlay, 0.25)) 55%,
      rgba(0, 0, 0, calc(var(--banner-overlay, 0.25) * 0.4)) 100%
    );
  }

  .collection-banner--center.collection-banner--image .collection-banner__media::after {
    background: rgba(0, 0, 0, var(--banner-overlay, 0.25));
  }
/* END_SNIPPET:collection-banner-media */

/* START_SNIPPET:collection-card (INDEX:142) */
.collection-card {
    display: grid;
    color: inherit;
    text-decoration: none;
  }

  .collection-card__media {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: var(--card-ratio, 1 / 1);
    border-radius: var(--card-radius, 0);
    background: rgba(var(--color-foreground), 0.05);
  }

  .collection-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Held on the card rather than the image so the scale has something that
       does not move to grow against. */
    transition: scale var(--duration-slow, 400ms) var(--ease-out, ease);
  }

  @media (hover: hover) {
    .collection-card:hover .collection-card__image {
      scale: 1.03;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-card__image {
      transition: none;
    }

    .collection-card:hover .collection-card__image {
      scale: 1;
    }
  }

  .collection-card__initial {
    font-size: 2.5rem;
    line-height: 1;
    color: rgba(var(--color-foreground), 0.25);
  }

  .collection-card__body {
    display: grid;
    gap: 0.25rem;
    padding-block-start: 0.75rem;
  }

  /* Logical, so the tile follows the language rather than the layout it was designed in. `justify-items` as well as `text-align` because the body is a grid: text-align alone leaves a short line sitting in a full-width cell, which looks aligned until a line wraps. */
  .collection-card--align-start .collection-card__body {
    justify-items: start;
    text-align: start;
  }

  .collection-card--align-center .collection-card__body {
    justify-items: center;
    text-align: center;
  }

  .collection-card--align-end .collection-card__body {
    justify-items: end;
    text-align: end;
  }

  .collection-card__title {
    margin: 0;
    font-size: var(--font-size-base);
  }

  /* No box of its own anywhere but reveal, so the count and the text stay grid
     items of the body and the gap between them is the body's own. */
  .collection-card__details {
    display: contents;
  }

  .collection-card__count,
  .collection-card__text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Not a control, so it carries no control's affordances beyond the look: no
     pointer cursor of its own and nothing focusable. The card owns both. */
  .collection-card__cta {
    display: none;
  }

  /* Panel — the words sit on a surface of their own under the cover. */
  .collection-card--panel .collection-card__body {
    padding: 0.875rem 1rem 1rem;
    border: 1px solid rgba(var(--color-foreground), 0.1);
    border-block-start: 0;
    border-end-start-radius: var(--card-radius, 0);
    border-end-end-radius: var(--card-radius, 0);
  }

  .collection-card--panel .collection-card__media {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  /* Overlay — the words sit on the cover, over a wash dark enough to read
     against a photograph that could be any brightness. */
  .collection-card--overlay {
    position: relative;
  }

  .collection-card--overlay .collection-card__body {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 2.5rem 1rem 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
    color: #fff;
    border-end-start-radius: var(--card-radius, 0);
    border-end-end-radius: var(--card-radius, 0);
  }

  .collection-card--overlay .collection-card__count,
  .collection-card--overlay .collection-card__text {
    color: rgba(255, 255, 255, 0.8);
  }

  /* Reveal — the name reads as a button over the cover, and opens into a panel
     carrying the description and the count when a visitor points at it. */
  .collection-card--reveal {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius, 0);
  }

  /* One box at two heights: the bar and the panel are the same element, so the white surface is continuous through the movement rather than one rectangle fading out under another fading in. */
  .collection-card--reveal .collection-card__body {
    /* One number, and every button in the row is this tall. Deliberately slim: the bar is a label over a photograph, not a form control, so it wants the height of the theme's small buttons rather than its primary ones. */
    --reveal-button-height: 2.5rem;

    position: absolute;
    inset-inline: 6%;
    inset-block-end: 8%;
    z-index: 1;
    height: var(--reveal-button-height);
    display: grid;
    /* Everything is one centred group — name, description, count and button together — rather than the name on a track of its own with the rest centred in the leftover space. That earlier arrangement is what stranded the name at the very top of the open panel with a hole beneath it. */
    align-content: center;
    justify-items: center;
    gap: 0;
    overflow: hidden;
    padding: 0 0.25rem;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.92);
    text-align: center;
    transition:
      height var(--duration-slow, 400ms) var(--ease-out, ease),
      border-color var(--duration-slow, 400ms) var(--ease-out, ease);
  }

  /* The name, as a button. Uppercase and tracked to match the theme's own small controls rather than the card titles elsewhere, which are sentence case — this one is a control, not a caption. */
     A long name is truncated rather than wrapped. The button is a fixed height
     by design, so a second line would be clipped mid-letter and read as a
     rendering fault; an ellipsis reads as a name that did not fit. */
  .collection-card--reveal .collection-card__title {
    /* The exact height of the closed bar, and that is load bearing: it is what lets the body centre its whole contents and still close flush on the name. A line box alone is not reliable enough — it changes with the merchant's heading font. */
    display: grid;
    place-items: center;
    height: var(--reveal-button-height);
    max-width: 100%;
    overflow: hidden;
    font-weight: var(--font-body--weight-bold);
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgb(var(--color-foreground));
  }

  /* The block under the name: description, count and the call to action, centred
     as a group in whatever height the open panel leaves them. */
  .collection-card--reveal .collection-card__details {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    /* Collapsed rather than merely transparent. At its natural height it would still occupy the closed bar and push the name off centre — the bug this card has had twice now. Zero height contributes nothing to the group the body is centring, so the closed state is the name and nothing else. */
    height: 0;
    overflow: hidden;
    /* Held back until the panel opens. Opacity only, so nothing about the text moves and the words are never mid-slide while being read. It stays in the accessibility tree throughout: the card is one link, and a visitor using a screen reader has no pointer to reveal it with. */
    opacity: 0;
    transition: opacity var(--duration-slow, 400ms) var(--ease-out, ease);
  }

  /* Ordered after the description rather than before it: the count is a detail and the sentence is the reason to click. Done with `order` so the DOM keeps the count first and the other three card styles are untouched. */
  .collection-card--reveal .collection-card__text {
    order: 1;
    max-width: 32ch;
    line-height: 1.5;
  }

  .collection-card--reveal .collection-card__count {
    order: 2;
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: var(--transform-eyebrow);
  }

  /* The button's look, on a span. Bordered rather than filled: the panel behind it is already a solid white surface, and a filled block on a filled block flattens the two into one shape. */
  .collection-card--reveal .collection-card__cta {
    order: 3;
    display: inline-block;
    margin-block-start: 0.35rem;
    padding: 0.6rem 1.5rem;
    border: 1px solid rgb(var(--color-foreground));
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: var(--transform-eyebrow);
    color: rgb(var(--color-foreground));
    transition:
      background-color var(--duration-fast, 200ms) var(--ease-out, ease),
      border-color var(--duration-fast, 200ms) var(--ease-out, ease),
      color var(--duration-fast, 200ms) var(--ease-out, ease);
  }

  /* Hovering the button itself, not the card. */
  @media (hover: hover) {
    .collection-card--reveal .collection-card__cta:hover {
      border-color: rgb(var(--color-foreground));
      background: rgb(var(--color-foreground));
      color: rgb(var(--color-background));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-card--reveal .collection-card__cta {
      transition: none;
    }
  }

  /* Focus opens it too. Without this the description and the count are reachable with a mouse and by nothing else, and the card is the only focusable thing here, so a keyboard would land on it and see the closed bar. */
  .collection-card--reveal:focus-visible .collection-card__body {
    height: 72%;
    gap: 1.1rem;
    border-color: rgba(var(--color-foreground), 0.15);
  }

  .collection-card--reveal:focus-visible .collection-card__details {
    height: auto;
    opacity: 1;
  }

  /* Pointer devices only. A touch screen has no hover, so the panel would open on the tap that is already navigating away — the bar with the name on it is the whole control there, which is what it is designed to be. */
  @media (hover: hover) {
    .collection-card--reveal:hover .collection-card__body {
      height: 72%;
      gap: 1.1rem;
      border-color: rgba(var(--color-foreground), 0.15);
    }

    .collection-card--reveal:hover .collection-card__details {
      height: auto;
      opacity: 1;
    }
  }

  /* The panel still opens, it just stops travelling: the description and the count are content, not decoration, so removing the movement must not remove the reveal. */
  @media (prefers-reduced-motion: reduce) {
    .collection-card--reveal .collection-card__body,
    .collection-card--reveal .collection-card__details {
      transition: none;
    }
  }

  /* The whole card is one link, so the focus ring belongs to the card. */
  .collection-card:focus-visible {
    outline: 2px solid rgb(var(--color-foreground));
    outline-offset: 3px;
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:collection-filters (INDEX:143) */
.facets {
    display: grid;
    gap: 1rem;
  }

  .facets__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
  }

  .facets__count {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .facets__sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .facets__sort-label {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
    white-space: nowrap;
  }

  /* A real `select`, not a custom listbox. The native control is keyboard operable, screen reader operable and uses the platform's own picker on a phone, which no scripted replacement matches. */
  /* Matched to the filter button beside it, so the toolbar reads as one row of
     controls rather than two of different heights. */
  /* Border and type matched to the filter button beside it. They are a pair on a phone, sharing a row at equal width, and a hairline of a different colour with a larger label reads as two controls from two themes. */
  /* The UA's own arrow is drawn hard against the inline edge and ignores the control's padding, so it sat on the border. Turning the appearance off and drawing the mark on the wrapper is the only way to place it — a `select` cannot carry a pseudo-element of its own. */
  .facets__select {
    min-height: 2.25rem;
    padding: 0.25rem 2rem 0.25rem 0.625rem;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: var(--style-border-radius-inputs);
    background: transparent;
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-size-xs);
    -webkit-appearance: none;
    appearance: none;
    /* The option names are longer than the control that has to hold them, so
       the label trails off rather than being cut mid-letter. */
    text-overflow: ellipsis;
  }

  .facets__sort,
  .collection__sort {
    position: relative;
  }

  /* Two borders of a square, turned. Drawn rather than shipped as an asset: it inherits `currentColor`, so it follows the control through every colour scheme without a second file. */
  .collection__sort::after {
    content: '';
    position: absolute;
    inset-inline-end: 0.75rem;
    inset-block-start: 50%;
    width: 0.4375rem;
    height: 0.4375rem;
    border-inline-end: 1.5px solid rgba(var(--color-foreground), 0.6);
    border-block-end: 1.5px solid rgba(var(--color-foreground), 0.6);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }

  .facets__group {
    border-block-end: 1px solid rgba(var(--color-border), 0.7);
  }

  .facets__summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.4rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
  }

  .facets__summary svg {
    width: 0.875rem;
    height: 0.875rem;
    margin-inline-start: auto;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .facets__group[open] > .facets__summary svg {
    transform: rotate(180deg);
  }

  .facets__applied {
    display: grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.25rem;
    border-radius: 1rem;
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    font-size: 0.6875rem;
  }

  /* No inner scroll. A scrollbar inside a filter group hides values behind a gesture nobody expects there, and nests a scroller inside the drawer's own scroller. Long lists are handled by showing fewer and offering more, below. */
  .facets__panel {
    display: grid;
    gap: 0.125rem;
    padding-block-end: 0.75rem;
  }

  /* Values past the visible limit, revealed by the button beneath them. */
  .facets__group:not(.is-expanded) .facets__value--extra {
    display: none;
  }

  .facets__more {
    justify-self: start;
    padding: 0.375rem 0;
    border: 0;
    background: none;
    color: rgb(var(--color-accent));
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-xs);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* Two per row for short values. `auto-fit` with a minimum means a list of sizes packs into two columns while a list of long colour names falls back to one on its own — no breakpoint guessing what the values will be. */
  /* Exactly two columns, stated rather than derived. */
  .facets__panel--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.75rem;
  }

  /* Two columns on a phone as well. */

  .facets__panel--split .facets__value-label {
    overflow-wrap: anywhere;
  }

  .facets__value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.9rem;
    padding-inline: 0.125rem;
    cursor: pointer;
    font-size: 0.8125rem;
  }

  .facets__value:hover {
    color: rgb(var(--color-accent));
  }

  /* Kept visible but inert, so the list does not reshuffle as choices are made
     and a visitor can see that the option exists at all. */
  .facets__value--empty {
    cursor: default;
    opacity: 0.45;
  }

  .facets__value input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    accent-color: rgb(var(--color-foreground));
  }

  .facets__value-label {
    flex: 1 1 auto;
    min-width: 0;
  }

  .facets__value-count {
    color: rgba(var(--color-foreground), 0.5);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
  }

  /* The same tokens the product card uses, so a swatch is one idea in the theme
     rather than two that happen to look similar. */
  .facets__swatch {
    flex: 0 0 auto;
    width: var(--swatch-size, 0.75rem);
    height: var(--swatch-size, 0.75rem);
    border-radius: var(--swatch-radius, 50%);
    box-shadow: inset 0 0 0 1px rgba(var(--color-foreground), 0.2);
    background-color: var(--swatch-color, transparent);
    background-image: var(--swatch-image, none);
    background-size: cover;
  }

  .facets__price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.5rem;
  }

  .facets__price-field {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 0;
    min-width: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
  }

  .facets__price-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: var(--font-size-sm);
  }

  .facets__price-field input:focus {
    outline: none;
  }

  .facets__price-field:focus-within {
    border-color: rgb(var(--color-foreground));
  }

  .facets__currency {
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-sm);
  }

  /* `.facets__actions` and `.facets__apply` are laid out in the collection section, which is where that markup lives. A second copy here fought it, and which one won came down to the order the stylesheets happened to be concatenated in. */

  /* --- Sidebar, desktop --- */
  @media screen and (min-width: 990px) {
    .facets--sidebar .facets__header {
      display: none;
    }

    .facets--sidebar .facets__apply {
      display: none;
    }
  }
/* END_SNIPPET:collection-filters */

/* START_SNIPPET:collection-subnav (INDEX:146) */
/* Self-contained so it does not depend on the general subcollections snippet's
     stylesheet (which is no longer rendered on the collection page). The scroll
     arrows and dots carry their own styles; only the row and tiles live here. */
  .subnav {
    position: relative;
    margin-block-end: 0.75rem;
  }

  /* Desktop scrolls with the arrows, so the dots are a mobile-only affordance.
     The `:not([hidden])` mirrors (and out-specifies) product-grid's reveal rule,
     which otherwise ties on specificity and wins on source order. */
  @media screen and (min-width: 990px) {
    .subnav .scroll-dots:not([hidden]) { display: none; }
  }

  /* Minimal dots on mobile: small, round and quiet, so the row reads as simply
     sliding rather than as a bar of controls. A little air above them, and the
     active one filled. */
  .subnav .scroll-dots {
    margin-block-start: 0.7rem;
    gap: 0.3rem;
  }
  .subnav .scroll-dots__dot {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
  }

  @media screen and (max-width: 749px) {
    /* Pulled to the grid's gutter on a phone, like the rest of the page. */
    .subnav {
      margin-inline: calc(min(var(--page-margin), var(--spacing-grid)) - var(--page-margin));
    }
  }

  .subnav__list {
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .subnav__list::-webkit-scrollbar { display: none; }

  .subnav__item {
    flex: 0 0 40vw;
    scroll-snap-align: start;
  }
  @media screen and (min-width: 750px) {
    .subnav__item { flex-basis: 12rem; }
  }
  @media screen and (min-width: 990px) {
    .subnav__item { flex-basis: 8.5rem; }
  }

  .subnav__tile {
    display: grid;
    gap: 0.5rem;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }

  .subnav__media {
    display: block;
    overflow: hidden;
    border-radius: var(--style-border-radius-cards, 0);
    aspect-ratio: 3 / 4;
    background: rgba(var(--color-foreground), 0.05);
  }
  .subnav__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-base) var(--ease-out);
  }
  .subnav__tile:hover .subnav__media img {
    transform: scale(1.03);
  }
  @media (prefers-reduced-motion: reduce) {
    .subnav__media img { transition: none; }
    .subnav__tile:hover .subnav__media img { transform: none; }
  }

  /* Uppercase label, centred under the tile, like the Hydrogen chips. */
  .subnav__label {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(var(--color-foreground), 0.75);
  }

  /* The category being viewed: bold and underlined, matching Hydrogen. */
  .subnav__tile.is-active .subnav__label {
    font-weight: var(--font-body--weight-bold);
    color: rgb(var(--color-foreground));
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .subnav__tile:hover .subnav__label {
    color: rgb(var(--color-foreground));
  }
/* END_SNIPPET:collection-subnav */

/* START_SNIPPET:collection-toolbar-mobile (INDEX:147) */
.mtoolbar { display: none; }
  @media screen and (max-width: 989px) {
    .mtoolbar { display: block; margin-block-end: 0; }
  }

  /* No line above the row (that middle line between the search and the tabs is
     gone); one full-page hairline sits under the tabs, edge to edge, just above
     the product grid. */
  .mtoolbar__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 0;
  }
  .mtoolbar__row::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: calc(var(--page-margin) * -1);
    border-block-end: 1px solid #d8ccb8;
  }

  /* Even width/height/gap across the tabs; small type like Hydrogen. */
  .mtoolbar__tab,
  .mtoolbar__filter {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.7rem 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    color: rgb(var(--color-foreground));
    cursor: pointer;
    white-space: nowrap;
  }
  .mtoolbar__tab svg { width: 0.7rem; height: 0.7rem; transition: transform 0.2s ease; }
  .mtoolbar__tab[aria-expanded='true'] svg { transform: rotate(180deg); }

  .mtoolbar__filter { margin-inline-start: auto; }
  .mtoolbar__filter svg { width: 0.95rem; height: 0.95rem; }
  .mtoolbar .density--mobile {
    padding-inline-start: 0.4rem;
    position: relative;
  }
  .mtoolbar .density--mobile::before {
    content: '';
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: 0;
    width: 1px;
    background: #d8ccb8;
  }

  /* Inline panels */
  .mtoolbar__panel {
    padding: 1rem 0.2rem 0.4rem;
    border-block-end: 1px solid #d8ccb8;
  }
  .mtoolbar__panel-title {
    margin: 0 0 0.7rem;
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-eyebrow, 0.08em);
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.6);
  }

  .mtoolbar__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .mtoolbar__pill,
  .mtoolbar__size {
    padding: 0.3rem 0.7rem;
    border: 1px solid #d8ccb8;
    background: rgb(var(--color-background));
    font: inherit;
    font-size: 12px;
    color: rgb(var(--color-foreground));
    cursor: pointer;
  }
  /* Colour family names in the inline panel — small, like Hydrogen. */
  .mtoolbar__panel .facets__value-label { font-size: 12px; }
  .mtoolbar__panel .facets__value--color { min-height: 2.1rem; }
  .mtoolbar__pill[aria-pressed='true'] {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    border-color: rgb(var(--color-foreground));
  }

  /* Colours in two columns, like the Hydrogen inline panel, with room to breathe
     between the swatches. */
  .mtoolbar__panel .facets__panel--colors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.5rem;
  }
  .mtoolbar__panel .facets__value--color {
    gap: 0.75rem;
  }

  /* Sizes as pills. */
  .mtoolbar__sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .mtoolbar__size {
    display: inline-flex;
    align-items: center;
  }
  .mtoolbar__size input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%);
  }
  .mtoolbar__size:has(input:checked) {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    border-color: rgb(var(--color-foreground));
  }
  .mtoolbar__size.is-empty { opacity: 0.4; cursor: not-allowed; }

  .mtoolbar__done-row {
    display: flex;
    justify-content: flex-end;
    margin-block-start: 0.75rem;
  }
  .mtoolbar__done {
    padding: 0.3rem 0.2rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: rgb(var(--color-foreground));
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }
/* END_SNIPPET:collection-toolbar-mobile */

/* START_SNIPPET:dropdown-panel (INDEX:151) */
/* Same technique as the mega panel: a closed <details> renders no content, so an animation, which starts when the element becomes rendered, is used instead of a transition, which would have nothing to start from. */
  /* Scoped to `details[open]`, and that scoping is the whole trick.

     A closed <details> in Chrome hides its content with `content-visibility:
     hidden` rather than `display: none`, and hidden content still runs CSS
     animations. An animation declared on the panel unconditionally therefore
     played out silently during page load and was already finished by the time
     anyone clicked, so the panel appeared instantly. Measured: currentTime 380
     of 380, state "finished", on the first frame after the click.

     Applying the rule only while the disclosure is open means the animation is
     attached at the moment it opens, so it starts from zero every time. */
  details[open] > .dropdown {
    animation: dropdown-in var(--duration-fast) var(--ease-out) both;
  }

  /* The rows rise in behind the wipe, same idea as the mega panel but tighter: a dropdown is a short list opened far more often, so the step is 18ms rather than 26ms and the whole list has landed inside 300ms. `--i` is clamped at 8 so a long menu's tail does not trail after the wipe has finished. */
  details[open] > .dropdown .dropdown__item > .dropdown__link {
    animation: dropdown-item-in 220ms var(--ease-out) both;
    animation-delay: calc(30ms + min(var(--i, 0), 8) * 18ms);
  }

  @keyframes dropdown-item-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
  }

  .dropdown {
    transform-origin: top center;
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 30;
    min-width: 13rem;
    max-width: 20rem;
    padding: 0.5rem 0;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    background: var(--gradient-background);
    box-shadow: 0 18px 40px -24px rgba(var(--color-shadow), 0.5);
  }

  /* Same unfold as the mega panel, scaled down: a dropdown is smaller and gets opened far more often, so it moves less and finishes sooner. */
  @keyframes dropdown-in {
    from {
      opacity: 0;
      clip-path: inset(0 -50vw 100% -50vw);
      transform: translateY(-0.5rem);
    }

    to {
      opacity: 1;
      clip-path: inset(0 -50vw -50vh -50vw);
      transform: translateY(0);
    }
  }

  .dropdown__list,
  .dropdown__flyout {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .dropdown__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.25rem;
    padding: 0.375rem 1rem;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.85);
  }

  .dropdown__link svg {
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.5;
  }

  .dropdown__link:hover,
  .dropdown__link:focus-visible {
    background: rgba(var(--color-foreground), 0.06);
    color: rgb(var(--color-accent));
  }

  /* Bold marks a group heading. A flat dropdown has no headings, so nothing in
     it is bold and the rows read as the peers they are. */
  .dropdown__link--parent {
    font-weight: var(--font-body--weight-bold);
    color: rgb(var(--color-foreground));
  }

  /* --- Flyout --- */

  /* Anchored to the panel, not to the hovered row. */
  .dropdown__flyout {
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: 100%;
    z-index: 1;
    display: none;
    min-width: 12rem;
    max-width: 18rem;
    min-height: calc(100% + 2px);
    padding: 0.5rem 0;
    /* Pulled back by exactly the border width so the flyout's leading border lands on the panel's trailing one. Two adjacent borders with a gap read as two boxes; a single shared line reads as one panel in two columns. */
    margin-inline-start: -1px;
    border: 1px solid rgb(var(--color-border));
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--style-border-radius-inputs);
    border-end-end-radius: var(--style-border-radius-inputs);
    background: var(--gradient-background);
    box-shadow: 0 18px 40px -24px rgba(var(--color-shadow), 0.5);
  }

  /* Hover for pointers, focus-within for keyboards. Both are CSS, so a third
     level is reachable with no script running. */
  .dropdown__item--parent:hover > .dropdown__flyout,
  .dropdown__item--parent:focus-within > .dropdown__flyout {
    display: block;
    animation: flyout-in var(--duration-fast) var(--ease-out) both;
  }

  /* The flyout arrives from the direction it opens toward, so the movement points away from the panel. The distance is carried in a custom property because keyframes cannot be scoped by a selector, and it flips under RTL. */
  .dropdown__flyout {
    --flyout-from: -0.75rem;
  }

  [dir='rtl'] .dropdown__flyout,
  .dropdown__flyout--flip {
    --flyout-from: 0.75rem;
  }

  [dir='rtl'] .dropdown__flyout--flip {
    --flyout-from: -0.75rem;
  }

  @keyframes flyout-in {
    from {
      opacity: 0;
      transform: translateX(var(--flyout-from));
    }
  }

  /* As with the mega panel: the wipe and the slide travel, so they go, but a
     plain fade has no motion vector and is kept. */
  /* `data-motion="fade"` on the markup exempts these from the blanket reduced motion rule in critical.css, which zeroes every animation with `!important` and would otherwise leave the panel appearing with no cue at all. */
  @media (prefers-reduced-motion: reduce) {
    details[open] > .dropdown,
    .dropdown__item--parent:hover > .dropdown__flyout,
    .dropdown__item--parent:focus-within > .dropdown__flyout {
      animation: dropdown-fade-in 160ms ease both;
    }

    /* Dropped rather than faded: a per row delay leaves rows invisible while
       they wait, which is the opposite of what reduced motion is asking for. */
    details[open] > .dropdown .dropdown__item > .dropdown__link {
      animation: none;
    }
  }

  @keyframes dropdown-fade-in {
    from {
      opacity: 0;
    }
  }

  /* Set by theme.js on a flyout that would otherwise open past the viewport
     edge, so a menu on the right of the bar opens inwards instead. */
  .dropdown__flyout--flip {
    inset-inline-start: auto;
    inset-inline-end: 100%;
    margin-inline: 0 -1px;
    border-start-start-radius: var(--style-border-radius-inputs);
    border-end-start-radius: var(--style-border-radius-inputs);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
/* END_SNIPPET:dropdown-panel */

/* START_SNIPPET:facet-active (INDEX:153) */
.facets-active:empty {
    display: none;
  }

  .facets-active__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    margin: 0 0 1rem;
    list-style: none;
  }

  /* Lined up with the products, not with the page. */
  @media screen and (max-width: 749px) {
    .facets-active__list {
      margin-inline: calc(min(var(--page-margin), var(--spacing-grid)) - var(--page-margin));
    }
  }

  /* Outlined, not filled. These are a record of what the shopper did, sitting directly above the products they did it to — filled pills in a row would out-shout the grid they are describing. */
  .facets-active__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
    padding-inline: 0.625rem;
    border: 1px solid rgba(var(--color-foreground), 0.2);
    border-radius: var(--style-border-radius-inputs);
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-xs);
    text-decoration: none;
    white-space: nowrap;
  }

  .facets-active__chip:hover {
    border-color: rgb(var(--color-foreground));
  }

  /* The cross is the whole chip's job, so it is not a second target inside a target — the link is the button, and at 32px tall it clears the 24px minimum on its own. */
  .facets-active__chip svg {
    width: 0.625rem;
    height: 0.625rem;
    opacity: 0.6;
  }

  .facets-active__chip:hover svg {
    opacity: 1;
  }

  .facets-active__clear {
    padding-inline: 0.25rem;
    color: rgba(var(--color-foreground), 0.75);
    font-size: var(--font-size-xs);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .facets-active__clear:hover {
    color: rgb(var(--color-foreground));
  }
/* END_SNIPPET:facet-active */

/* START_SNIPPET:facet-colors (INDEX:155) */
/* The dot carries the state, so the checkbox is taken out of the painting while staying in the form and in the accessibility tree. Not `display: none`, which would drop it from both. */
  .facets__value--color input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .facets__value--color {
    gap: 0.5rem;
    min-height: 2rem;
  }

  .facets__swatch--lg {
    width: var(--facet-swatch-size, 1.125rem);
    height: var(--facet-swatch-size, 1.125rem);
    /* The ring sits inside so a pale swatch has an edge, and the two outer rings are transparent until the value is chosen — declared here rather than added on selection so the swatch never changes size or moves when it is picked. */
    box-shadow:
      inset 0 0 0 1px rgba(var(--color-foreground), 0.18),
      0 0 0 2px rgb(var(--color-background)),
      0 0 0 2px transparent;
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }

  .facets__value--color input:checked + .facets__swatch--lg {
    box-shadow:
      inset 0 0 0 1px rgba(var(--color-foreground), 0.18),
      0 0 0 2px rgb(var(--color-background)),
      0 0 0 3px rgb(var(--color-foreground));
  }

  /* The label is the only thing a keyboard user can see move, so focus lands on
     the dot rather than nowhere. */
  .facets__value--color input:focus-visible + .facets__swatch--lg {
    box-shadow:
      inset 0 0 0 1px rgba(var(--color-foreground), 0.18),
      0 0 0 2px rgb(var(--color-background)),
      0 0 0 3px rgb(var(--color-accent));
  }

  .facets__value--color input:checked ~ .facets__value-label {
    font-weight: var(--font-body--weight-bold);
  }

  /* Multicolour has no one colour to show, so it shows all of them. */
  .facets__swatch--multi {
    background-image: conic-gradient(
      #b5483b,
      #e6c341,
      #5d7a4c,
      #4a6d99,
      #7a5f9e,
      #b5483b
    );
  }
/* END_SNIPPET:facet-colors */

/* START_SNIPPET:facet-price (INDEX:156) */
.facets__bands {
    display: grid;
    gap: 0.125rem;
    padding-block-end: 0.25rem;
  }

  /* Sized and aligned to the checkbox rows above it, so the price group reads
     as part of the same list rather than a different kind of control. */
  .facets__band {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0 0.125rem;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-sm);
    text-align: start;
  }

  .facets__band:hover {
    color: rgb(var(--color-accent));
  }

  /* A square that fills, matching the checkboxes beside it. Drawn rather than borrowed from `accent-color` because this is a button, and a real checkbox here would promise a form field that does not exist. */
  .facets__band-mark {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 1px solid rgba(var(--color-foreground), 0.4);
    border-radius: 0.125rem;
  }

  .facets__band[aria-pressed='true'] .facets__band-mark {
    border-color: rgb(var(--color-foreground));
    background: rgb(var(--color-foreground));
    box-shadow: inset 0 0 0 2px rgb(var(--color-background));
  }

  .facets__band:focus-visible {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: 2px;
  }
/* END_SNIPPET:facet-price */

/* START_SNIPPET:fit-finder-banner (INDEX:157) */
.fit-banner {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(var(--color-border), 0.7);
    background: rgb(var(--color-background));
    text-align: start;
    cursor: pointer;
    transition: border-color var(--duration-fast, 150ms) var(--ease-out, ease-out);
  }
  .fit-banner:hover { border-color: rgb(var(--color-foreground)); }

  .fit-banner__badge {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }
  .fit-banner__badge svg { width: 1.05rem; height: 1.05rem; }

  .fit-banner__text { flex: 1 1 auto; min-width: 0; }
  .fit-banner__title {
    display: block;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    font-weight: var(--font-body--weight-bold);
    color: rgb(var(--color-foreground));
  }
  .fit-banner__sub {
    display: block;
    font-size: 12.5px;
    line-height: 1.35;
    color: rgba(var(--color-foreground), 0.6);
  }

  .fit-banner__cta {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: var(--font-body--weight-bold);
    color: var(--offer-accent);
  }
/* END_SNIPPET:fit-finder-banner */

/* START_SNIPPET:gift-card-recipient (INDEX:162) */
.recipient {
    display: grid;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 1px solid rgba(var(--color-border), 0.8);
    border-radius: var(--style-border-radius-inputs);
  }

  .recipient__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    cursor: pointer;
  }

  .recipient__toggle input {
    width: 1rem;
    height: 1rem;
    accent-color: rgb(var(--color-foreground));
  }

  .recipient__fields[hidden] {
    display: none;
  }

  .recipient__fields {
    display: grid;
    gap: 0.625rem;
  }

  .recipient__field {
    display: grid;
    gap: 0.25rem;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.8);
  }

  .recipient__field input,
  .recipient__field textarea {
    padding: 0.5rem 0.625rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    background: transparent;
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-size-sm);
  }
/* END_SNIPPET:gift-card-recipient */

/* START_SNIPPET:grid-density (INDEX:163) */
.density {
    display: flex;
    align-items: center;
    gap: 0.125rem;
  }

  /* Each group shows only at its own breakpoint, so the two never overlap. */
  .density--mobile { display: none; }
  @media screen and (max-width: 989px) {
    .density--desktop { display: none; }
    .density--mobile { display: flex; }
  }

  .density__button {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--style-border-radius-inputs);
    background: none;
    color: rgba(var(--color-foreground), 0.5);
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .density__button:hover { color: rgb(var(--color-foreground)); }

  /* The chosen count is the darker mark. No fill, no box. */
  .density__button[aria-pressed='true'] { color: rgb(var(--color-foreground)); }

  .density__icon { width: 0.95rem; height: 0.95rem; }
  /* Bars are drawn wider than tall, so size by height and let width follow. */
  .density__icon--bars { width: auto; height: 0.9rem; }

  @media screen and (max-width: 749px) {
    .density__button { width: 1.85rem; height: 2.1rem; }
  }

  .density__button:focus-visible {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: -2px;
  }
/* END_SNIPPET:grid-density */

/* START_SNIPPET:header-actions (INDEX:164) */
.header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-inline-start: auto;
  }

  @media screen and (min-width: 990px) {
    .header__actions {
      gap: clamp(0.4rem, 1.1vw, 0.75rem);
    }
  }

  /* Mobile: give every control the same slot width so the gaps between glyphs
     read as equal. Left to their natural sizes the 44px search target sits in a
     much wider box than the 28px icons, which makes the spacing look uneven. */
  @media screen and (max-width: 989px) {
    .header__actions {
      gap: 0.35rem;
    }

    .header__actions > .header__search-trigger,
    .header__actions > .icon-button,
    .header__actions > .header__drawer {
      width: 2rem;
      min-width: 2rem;
      justify-content: center;
    }

    .header__actions > .header__search-trigger {
      padding-inline: 0;
    }

    .header__drawer-toggle {
      width: 100%;
      justify-content: center;
    }
  }

  /* One glyph size across the cluster, matching the Hydrogen storefront's 21px
     line icons. (The desktop search pill sets its own smaller glyph.) */
  .header__actions .icon-button {
    min-width: 1.75rem;
  }

  /* The account web component injects a zero-width <shopify-store> sibling; as a
     flex child it still claimed a gap slot on each side, which read as a large
     gap before the account icon. It has no visual, so drop it from the flow. */
  .header__actions > shopify-store {
    display: none;
  }

  .header__actions .icon-button svg {
    width: 19px;
    height: 19px;
    transition: opacity 0.2s ease;
  }

  .header__actions .icon-button:hover svg {
    opacity: 0.6;
  }

  .header__localization {
    display: flex;
    align-items: center;
  }

  /* The localization control is desktop-only in the bar. On mobile it lives in
     the menu drawer (country/region + language), which keeps the bar clear and
     stops the icons crowding the logo on a small phone. */
  @media screen and (max-width: 989px) {
    .header__localization {
      display: none;
    }
  }

  /* Recently viewed rides the bar at every width, the same as desktop. */
  .header__recent {
    display: inline-flex;
  }

  /* Account is desktop-bar only; the drawer foot carries it on mobile. */
  .header__account {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .header__account {
      display: inline-flex;
    }
  }

  .header__wish,
  /* Both badge carriers must be positioned, or the badge anchors to the wrong
     ancestor (the wishlist count was jumping because only the cart was relative). */
  .header__cart,
  .header__wish {
    position: relative;
    overflow: visible;
  }

  .header__count {
    position: absolute;
    inset-block-start: 0.35rem;
    inset-inline-end: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    border-radius: 1rem;
    background: rgb(var(--color-accent));
    color: rgb(var(--color-button-label));
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
  }

  /* Wishlist badge — the brand accent, which blushes on Beauty surfaces. */
  .header__count--wish {
    background: var(--offer-accent);
    color: #fff;
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-brand-switch (INDEX:165) */
.brand-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid rgba(var(--color-foreground), 0.16);
    border-radius: 999px;
  }

  .brand-switch--full {
    display: flex;
    width: 100%;
  }

  .brand-switch__seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding-block: 0.25rem;
    padding-inline: 0.9rem;
    border-radius: 999px;
    color: rgb(var(--color-foreground));
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }

  .brand-switch--full .brand-switch__seg {
    flex: 1 1 0;
    min-height: 2rem;
    font-size: 0.8125rem;
  }

  /* Fashion active — charcoal fill, page-ground text. Tokens rather than fixed
     hexes so the pair always contrasts with the header background, including
     when the header overlays a dark hero and the scheme inverts. */
  .brand-switch__seg.is-active {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  /* Beauty active — the sub-brand blush, a fixed brand value. */
  .brand-switch__seg--beauty.is-active {
    background: #d17a8d;
    color: #fff;
  }
/* END_SNIPPET:header-brand-switch */

/* START_SNIPPET:header-brand (INDEX:166) */
/* --- Brand --- */

  .header__brand-heading {
    margin: 0;
    font-size: inherit;
    line-height: 1;
  }

  .header__brand-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .header__wordmark {
    font-family: var(--font-heading--family);
    font-size: calc(clamp(1.25rem, 0.9rem + 1vw, 1.75rem) * var(--type-scale));
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .header__logo {
    width: var(--logo-width-mobile);
    /* `height: auto` matters: the img carries width and height attributes so the browser can reserve the right box before the file loads, but those are the desktop numbers. Without this the height attribute keeps applying while CSS narrows the width, so the logo is letterboxed inside a too tall box. */
    height: auto;
    max-height: 3rem;
    object-fit: contain;
  }

  @media screen and (min-width: 750px) {
    .header__logo {
      width: var(--logo-width);
    }
  }

  /* The wordmark asset has a fixed ~7:1 ratio, so it is sized on its own rather
     than through the merchant logo-width tokens. */
  .header__logo--wordmark {
    /* Fluid on mobile so the wordmark scales with the viewport and never crowds
       the action icons on a small phone; fixed from tablet up. */
    width: clamp(100px, 30vw, 150px);
    height: auto;
    max-height: none;
  }

  @media screen and (min-width: 750px) {
    .header__logo--wordmark {
      width: 175px;
    }
  }

  /* Only one of the pair is ever visible. The overlay logo takes over while the
     header is transparent, and hands back the moment it goes solid. */
  .header__logo--overlay {
    display: none;
  }

  .header--overlay:not(.is-solid) .header__logo--primary {
    display: none;
  }

  .header--overlay:not(.is-solid) .header__logo--overlay {
    display: block;
  }
/* END_SNIPPET:header-brand */

/* START_SNIPPET:header-drawer (INDEX:167) */
/* --- Drawer --- */

  /* The toggle is the last control in the actions cluster and mobile-only:
     from the desktop breakpoint up, navigation lives in the header's second
     row instead. Hiding the whole disclosure hides its summary with it. */
  .header__drawer {
    display: inline-flex;
  }

  @media screen and (min-width: 990px) {
    .header__drawer {
      display: none;
    }
  }

  /* Three-line menu glyph. Wider than the square bar icons so the lines read
     long; height matches the icon set (via the more specific rule below, which
     overrides the shared .header__actions .icon-button svg size). */
  .header__menu-icon {
    display: block;
  }

  .header__actions .icon-button svg.header__menu-icon {
    width: 25px;
    height: 20px;
  }

  .header__drawer-switch {
    padding: 1rem 1.25rem 0.5rem;
  }

  /* Off-canvas sidebar, not a dropdown band. The panel is fixed to the inline start edge and the overlay dims the page behind it. */

  details[open] > .header__drawer-overlay {
    animation: drawer-overlay-in var(--duration-base) var(--ease-out) both;
  }

  details[open] > .header__drawer-panel {
    animation: drawer-panel-in var(--duration-slow) var(--ease-out) both;
  }

  .header__drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(var(--color-shadow), 0.42);
  }

  .header__drawer-panel {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(23rem, 85vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--gradient-background);
    box-shadow: 0 0 60px -20px rgba(var(--color-shadow), 0.5);

    /* Keyframes cannot be scoped by a selector, so direction is carried in a custom property that the keyframe reads. In RTL the panel is pinned to the right edge and must therefore slide in from the right. */
    --drawer-slide-from: -100%;
  }

  [dir='rtl'] .header__drawer-panel {
    --drawer-slide-from: 100%;
  }

  @keyframes drawer-overlay-in {
    from {
      opacity: 0;
    }
  }

  /* The slide is motion and goes, but the panel still needs to register as arriving, so it fades. `data-motion="fade"` on both elements exempts them from the blanket reduced motion rule in critical.css. */
  @keyframes drawer-fade-in {
    from {
      opacity: 0;
    }
  }

  @keyframes drawer-panel-in {
    from {
      transform: translateX(var(--drawer-slide-from));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    details[open] > .header__drawer-overlay,
    details[open] > .header__drawer-panel {
      animation: drawer-fade-in var(--duration-fast) ease both;
    }
  }

  .header__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0.4rem 0.3rem 1.25rem;
    border-block-end: 1px solid #ece3d4;
  }

  /* A slim head: the close control does not need the full 44px tap box here,
     which was setting the band height. */
  .header__drawer-head .icon-button {
    min-height: 0;
    min-width: 0;
    padding: 0.4rem;
  }

  .header__drawer-head .icon-button svg {
    width: 18px;
    height: 18px;
  }

  .header__drawer-title {
    /* 0.7, not the 0.6 this started at: 0.6 measures 3.97:1 on the default light scheme, below the 4.5:1 the Theme Store requires for text this size. 0.65 is the first value that passes, at 4.60:1, but that leaves nothing for a merchant who picks a softer background, so the next step up is used. */
    color: rgba(var(--color-foreground), 0.7);
  }

  .header__drawer-nav {
    flex: 1 1 auto;
    padding-inline: 1.25rem;
  }

  .header__drawer-localization {
    padding: 1rem 1.25rem;
    border-block-start: 1px solid rgba(var(--color-border), 0.6);
  }

  /* --- Foot --- `.header__drawer-nav` is `flex: 1 1 auto`, so it absorbs the slack and everything below is pushed to the bottom of the panel. */

  .drawer-promo {
    padding: 0.75rem 1.25rem 0;
  }

  .drawer-promo__inner {
    display: grid;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
  }

  /* The Shop pay login button ships as a fixed purple pill that fights the
     drawer's calm palette. Kept out of the minimalist menu. */
  .header__drawer-shop-login {
    display: none;
  }

  .drawer-promo__media {
    display: block;
    overflow: hidden;
    margin-block-end: 0.25rem;
    border-radius: calc(var(--style-border-radius-media) * 0.75);
    background: rgba(var(--color-foreground), 0.05);
  }

  .drawer-promo__media--landscape {
    aspect-ratio: 4 / 3;
  }

  .drawer-promo__media--square {
    aspect-ratio: 1 / 1;
  }

  .drawer-promo__media--portrait {
    aspect-ratio: 3 / 4;
  }

  .drawer-promo__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .drawer-promo__heading {
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
    line-height: 1.2;
  }

  .drawer-promo__text {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.72);
  }

  .drawer-promo__button {
    justify-self: start;
    margin-block-start: 0.25rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-body--weight);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: var(--transform-eyebrow);
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }

  .header__drawer-foot {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1rem 1.25rem 0.25rem;
  }

  .drawer-foot__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid #2a251f;
    border-radius: 999px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #2a251f;
    background: transparent;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .drawer-foot__btn:hover {
    background: #2a251f;
    color: #faf8f3;
  }

  .drawer-foot__btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  .header__drawer-social {
    padding: 0.5rem 0.875rem 1.25rem;
  }

  /* --- Nested accordion --- Three levels, each a step quieter than the one above: level one carries the brand voice, level two drops to the body face, level three is indented behind a rule so it reads as belonging to its parent rather than as a peer. */

  .drawer-nav,
  .drawer-nav__level {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .drawer-nav__item + .drawer-nav__item {
    border-block-start: 1px solid #ece3d4;
  }

  .drawer-nav__group > summary {
    list-style: none;
    cursor: pointer;
  }

  .drawer-nav__group > summary::-webkit-details-marker {
    display: none;
  }

  .drawer-nav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: 0;
    font-family: var(--font-body--family);
    color: rgb(var(--color-foreground));
  }

  /* Slim, body-face rows matching the Hydrogen mobile menu: small type, tight
     rhythm, thin card-border dividers. No serif headings, no 60px rows. */
  .drawer-nav__row--1 {
    padding-block: 0.7rem;
    font-size: 15.5px;
    line-height: 1.3;
    color: #2a251f;
  }

  .drawer-nav__row--2 {
    padding-block: 0.5rem;
    padding-inline-start: 0.75rem;
    font-size: 14px;
    line-height: 1.35;
    color: #6f6250;
  }

  /* A level-two row that is itself a group heading reads a step stronger than a
     plain link beside it. */
  .drawer-nav__group > .drawer-nav__row--2 {
    color: #2a251f;
    font-weight: 600;
  }

  .drawer-nav__row--3 {
    padding-block: 0.4rem;
    padding-inline-start: 1.5rem;
    font-size: 14px;
    line-height: 1.35;
    color: #6f6250;
  }

  .drawer-nav__row:hover {
    color: rgb(var(--color-accent));
  }

  .drawer-nav__level--2 {
    padding-block-end: 0.35rem;
  }

  .drawer-nav__level--3 {
    padding-block-end: 0.35rem;
  }

  /* --- Chevrons --- */

  /* A bare, thin chevron aligned to the row end. No filled bubble: on a cream
     drawer a same-tone circle just reads as an empty blob. Minimal and quiet;
     the rotation on open carries the state. */
  .drawer-nav__chevron {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: rgba(var(--color-foreground), 0.5);
    transition: transform 0.2s ease;
  }

  .drawer-nav__chevron svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .drawer-nav__chevron--circled svg {
    width: 0.8125rem;
    height: 0.8125rem;
  }

  .drawer-nav__group[open] > .drawer-nav__row > .drawer-nav__chevron {
    transform: rotate(180deg);
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:header-nav (INDEX:168) */
/* --- Desktop navigation --- */

  .header__nav {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .header__nav {
      display: block;
    }
  }

  .header__nav-list {
    display: flex;
    /* Single line, always: on a small laptop 11 items used to wrap to two rows.
       They stay on one row now and the fluid gap tightens to fit instead. */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.4vw, 1.4rem);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-height: 2rem;
    /* Fluid size: a comfortable ~13px on normal screens, easing down to ~11.5px
       on a narrow laptop so all 11 items still fit one line without wrapping. */
    font-size: clamp(11.5px, 0.4vw + 7.6px, 13px);
    letter-spacing: 0.03em;
    text-transform: var(--transform-eyebrow);
    white-space: nowrap;
    cursor: pointer;
  }

  .header__nav-link svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s ease;
  }

  .header__nav-link:hover {
    color: rgb(var(--color-accent));
  }

  /* Only a nav item holding a dropdown becomes a containing block. A blanket `position: relative` on every nav item would also capture the mega panel, which is positioned against the section so it can span the viewport, and collapse it to the width of its menu item. */
  .header__nav-item:has(.dropdown) {
    position: relative;
  }

  /* Hide the default disclosure triangle without losing the semantics. */
  .header__mega > summary {
    list-style: none;
  }

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

  .header__mega[open] > summary svg {
    transform: rotate(180deg);
  }
/* END_SNIPPET:header-nav */

/* START_SNIPPET:header-search (INDEX:169) */
.header__search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: inherit;
    cursor: pointer;
  }

  .header__search-glyph {
    display: inline-flex;
  }

  .header__search-glyph svg {
    width: 19px;
    height: 19px;
  }

  /* The label rides only on the desktop pill. */
  .header__search-text {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .header__search-trigger {
      justify-content: flex-start;
      gap: 0.5rem;
      width: 13rem;
      min-width: 0;
      min-height: 2.25rem;
      padding-block: 0.4rem;
      padding-inline: 0.85rem;
      border: 1px solid rgb(var(--color-border));
      border-radius: 999px;
      background: rgba(var(--color-foreground), 0.03);
      transition: border-color 0.2s ease;
    }

    .header__search-trigger:hover {
      border-color: rgba(var(--color-foreground), 0.45);
    }

    .header__search-glyph svg {
      width: 16px;
      height: 16px;
    }

    .header__search-text {
      display: inline;
      flex: 1 1 auto;
      font-size: 13px;
      color: rgba(var(--color-foreground), 0.6);
      text-align: start;
    }

    /* Over the hero the pill sits on a photograph, where the border token
       (tuned for a solid background) all but disappears. Give it a light rule
       so the search field stays legible while the header is transparent. */
    .header--overlay:not(.is-solid) .header__search-trigger {
      border-color: rgba(255, 255, 255, 0.55);
      background: rgba(255, 255, 255, 0.08);
    }

    .header--overlay:not(.is-solid) .header__search-trigger:hover {
      border-color: rgba(255, 255, 255, 0.85);
    }

    .header--overlay:not(.is-solid) .header__search-text {
      color: rgba(255, 255, 255, 0.85);
    }
  }
/* END_SNIPPET:header-search */

/* START_SNIPPET:header-utility (INDEX:170) */
/* Mirrors `.header__actions`, but aligned to the opposite edge so the two
     groups sit against the outer margins and the logo keeps the middle. */
  .header__utility {
    display: none;
    align-items: center;
    justify-self: start;
    gap: 0.5rem;
  }

  @media screen and (min-width: 990px) {
    .header__inner--logo-center.header__inner--menu-below .header__utility {
      display: flex;
    }
  }
/* END_SNIPPET:header-utility */

/* START_SNIPPET:hero-slide (INDEX:171) */
.hero__slide {
    position: relative;
    display: grid;
    /* One cell, three layers: the image, the overlay and the copy all stack in the same grid area. Absolute positioning would take the copy out of flow and stop it contributing any height, which matters for the `auto` height where the slide is as tall as its content demands. */
    grid-template-areas: 'stack';
    align-items: stretch;
    min-height: var(--hero-height);
  }

  .hero__slide > * {
    grid-area: stack;
    min-width: 0;
  }

  /* The three layers are ordered explicitly rather than left to document order. */
  .hero__media {
    position: relative;
    z-index: 0;
    display: block;
    overflow: hidden;
  }

  .hero__overlay {
    position: relative;
    z-index: 1;
  }

  .hero__content-area {
    position: relative;
    z-index: 2;
  }

  /* Absolutely positioned, and that is the whole point: an in-flow image
     contributes its own aspect ratio to the row height, so a portrait slide
     dragged the entire track to its own height and every other slide was
     cropped to match. Measured: one 1000x1333 slide made a 720px hero 1920px
     tall. Out of flow, the row is sized by `--hero-height` alone and each image
     simply fills whatever that is.

     There is no layout shift from this, because the height never depended on
     the file: it comes from the section setting, which is known before any image
     arrives. The intrinsic width and height attributes stay on the img so the
     browser can still pick the right source and reserve decode work. */
  /* The video sits over its own poster and covers the same box. `object-fit` rather than a background, so the element keeps its intrinsic size and the slide does not jump when the first frame arrives. */
  .hero__media--video {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  /* The video covers the slide, exactly as the poster underneath it does. */
  .hero__video,
  .hero__video iframe {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
  }

  /* Editor only, so it sits over the slide rather than in the layout. */
  .hero__note {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline: 1rem;
    z-index: 3;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: var(--font-size-xs);
  }

  .hero__media--video .hero__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
  }

  /* An embedded player cannot be cropped the way a file can, so it is scaled past the frame instead — a 16:9 iframe in a taller hero would otherwise letterbox. */
  .hero__video--external {
    inset: 50% auto auto 50%;
    width: max(100%, 177.78vh);
    height: max(100%, 56.25vw);
    translate: -50% -50%;
    pointer-events: none;
  }

  /* Asked not to be moved: the poster is already underneath, so hiding the
     video leaves a still image rather than a hole. */
  @media (prefers-reduced-motion: reduce) {
    .hero__video {
      display: none;
    }
  }

  .hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero__image--placeholder {
    background: rgba(var(--color-foreground), 0.06);
    fill: rgba(var(--color-foreground), 0.2);
  }

  /* --- Overlay --- */

  .hero__overlay {
    /* Never intercepts a click: it covers the whole slide, and a button under it
       would stop working. */
    pointer-events: none;
  }

  /* Flat wash: for a busy photograph where text sits anywhere over it. */
  .hero__overlay--scrim {
    background: rgba(var(--overlay-color), var(--overlay-opacity));
  }

  /* Darkens the side the copy is on and releases the far side, so the photograph is still readable as a photograph. */
  .hero__overlay--gradient-inline {
    background: linear-gradient(
      to right,
      rgba(var(--overlay-color), var(--overlay-opacity)) 0%,
      rgba(var(--overlay-color), calc(var(--overlay-opacity) * 0.55)) 45%,
      rgba(var(--overlay-color), 0) 78%
    );
  }

  [dir='rtl'] .hero__overlay--gradient-inline {
    background: linear-gradient(
      to left,
      rgba(var(--overlay-color), var(--overlay-opacity)) 0%,
      rgba(var(--overlay-color), calc(var(--overlay-opacity) * 0.55)) 45%,
      rgba(var(--overlay-color), 0) 78%
    );
  }

  /* Bottom weighted, for copy anchored to the foot of the slide. */
  .hero__overlay--gradient-block {
    background: linear-gradient(
      to top,
      rgba(var(--overlay-color), var(--overlay-opacity)) 0%,
      rgba(var(--overlay-color), calc(var(--overlay-opacity) * 0.4)) 45%,
      rgba(var(--overlay-color), 0) 80%
    );
  }

  /* Phones show the copy over the full width of a brighter, tighter crop, so a directional gradient leaves half the text on an undarkened background. The wash is flattened and lifted for that reason. */
  @media screen and (max-width: 749px) {
    .hero__overlay--gradient-inline,
    .hero__overlay--gradient-block {
      background: linear-gradient(
        to top,
        rgba(var(--overlay-color), min(1, calc(var(--overlay-opacity) + 0.18))) 0%,
        rgba(var(--overlay-color), calc(var(--overlay-opacity) * 0.85)) 60%,
        rgba(var(--overlay-color), calc(var(--overlay-opacity) * 0.55)) 100%
      );
    }
  }

  /* --- Content --- */

  .hero__content-area {
    display: grid;
    padding-block: 3rem;
  }

  /* The copy is the only interactive layer, so it takes pointer events back. */
  .hero__content {
    pointer-events: auto;
  }

  .hero__content {
    /* Wide enough that a headline breaks where the writer intended rather than where a narrow column forces it. Still capped: a line of body copy running the full width of a 1920px screen is measurably harder to read, because the eye loses its place on the return sweep. */
    max-width: 42rem;
    color: rgb(var(--color-foreground));
  }

  .hero__content--x-start {
    justify-self: start;
  }
  .hero__content--x-center {
    justify-self: center;
  }
  .hero__content--x-end {
    justify-self: end;
  }

  .hero__content--y-start {
    align-self: start;
  }
  .hero__content--y-center {
    align-self: center;
  }
  .hero__content--y-end {
    align-self: end;
  }

  .hero__eyebrow {
    margin: 0 0 1rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-body--weight);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: var(--transform-eyebrow);
    color: rgba(var(--color-foreground), 0.85);
  }

  .hero__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    line-height: 1.06;
    letter-spacing: -0.01em;
  }

  /* Multiplied by `--type-scale`, the merchant's Heading font size setting.

     Without it this clamp is an island: the theme setting moves every heading
     that uses `--font-size-h*` and silently does nothing here, which is exactly
     how it was reported — the slider moved and the hero did not. Any heading
     that sets its own size has to opt back in. */
  .hero__heading--medium {
    font-size: calc(clamp(1.75rem, 3.4vw, 2.5rem) * var(--type-scale));
  }
  .hero__heading--large {
    font-size: calc(clamp(2rem, 5vw, 3.75rem) * var(--type-scale));
  }
  .hero__heading--xlarge {
    font-size: calc(clamp(2.25rem, 6.4vw, 4.75rem) * var(--type-scale));
  }

  .hero__body {
    max-width: 34rem;
    margin-block: 1.25rem 0;
    font-size: calc(clamp(0.9375rem, 1.5vw, 1.125rem) * var(--body-scale));
    line-height: 1.65;
    color: rgba(var(--color-foreground), 0.9);
  }

  /* The centred variants have to centre the body's own max-width box as well,
     or the text is centred inside a block that is still hard against one edge. */
  .text-center .hero__body {
    margin-inline: auto;
  }

  .text-right .hero__body {
    margin-inline-start: auto;
  }

  /* A grid, not a flex row, so a pair of buttons comes out the same width. */
  .hero__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.75rem;
    width: fit-content;
    margin-block-start: 1.75rem;
  }

  .text-center .hero__actions {
    margin-inline: auto;
  }

  .text-right .hero__actions {
    margin-inline-start: auto;
  }

  /* Phones centre the copy regardless of the desktop alignment: a narrow column with the text hard left reads as unfinished. */
  @media screen and (max-width: 749px) {
    .hero__content {
      justify-self: center;
      max-width: 30rem;
      text-align: center;
    }

    .hero__body {
      margin-inline: auto;
    }

    .hero__actions {
      margin-inline: auto;
    }
  }

  /* Two buttons side by side stop fitting on a narrow phone once either label runs past a couple of words, so they stack. They stay equal, because a single column is still one track and both fill it. */
  @media screen and (max-width: 479px) {
    .hero__actions {
      grid-auto-flow: row;
    }
  }
/* END_SNIPPET:hero-slide */

/* START_SNIPPET:icon (INDEX:173) */
/* Sized and contained rather than trusted from the file. A merchant's own artwork arrives at whatever dimensions and aspect it was drawn at, and one badge a head taller than the other three is the thing the eye lands on. */
  .icon-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
/* END_SNIPPET:icon */

/* START_SNIPPET:localization-form (INDEX:175) */
.localization {
    display: flex;
    gap: 1rem;
  }

  .localization--stacked {
    flex-direction: column;
    gap: 0.75rem;
  }

  .localization__form {
    margin: 0;
  }

  .localization--stacked .localization__label {
    display: block;
    margin-block-end: 0.25rem;
    /* 0.7, not the 0.6 this started at: 0.6 measures 3.97:1 on the default light scheme, below the 4.5:1 the Theme Store requires for text this size. 0.65 is the first value that passes, at 4.60:1, but that leaves nothing for a merchant who picks a softer background, so the next step up is used. */
    color: rgba(var(--color-foreground), 0.7);
  }

  /* The header bar has no room for a visible field label, but it stays in the
     accessibility tree so the toggle is named "Country/region, United States". */
  .localization--inline .localization__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .localization__disclosure {
    position: relative;
  }

  .localization__toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding-inline: 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--style-border-radius-inputs);
    font-size: var(--font-size-sm);
    cursor: pointer;
    list-style: none;
  }

  .localization__toggle::-webkit-details-marker {
    display: none;
  }

  .localization--stacked .localization__toggle {
    justify-content: space-between;
    border-color: rgba(var(--color-foreground), 0.25);
  }

  .localization__toggle:hover {
    color: rgb(var(--color-accent));
  }

  .localization__toggle > svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s ease;
  }

  .localization__disclosure[open] > .localization__toggle > svg {
    transform: rotate(180deg);
  }

  .localization__current {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
  }

  .localization__flag {
    display: block;
    width: 1.25rem;
    height: 0.9375rem;
    object-fit: cover;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(var(--color-foreground), 0.12);
  }

  .localization__list {
    position: absolute;
    z-index: 50;
    inset-block-start: calc(100% + 0.25rem);
    inset-inline-start: 0;
    min-width: 13rem;
    max-height: 17rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem;
    margin: 0;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
    box-shadow: 0 18px 40px -24px rgba(var(--color-shadow), 0.5);
    list-style: none;
  }

  .localization--drop-up .localization__list {
    inset-block-start: auto;
    inset-block-end: calc(100% + 0.25rem);
  }

  .localization__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: calc(var(--style-border-radius-inputs) * 0.75);
    background: none;
    color: inherit;
    font-size: var(--font-size-sm);
    text-align: start;
    cursor: pointer;
  }

  .localization__option:hover {
    background: rgba(var(--color-foreground), 0.06);
  }

  /* The current option is marked with colour, not weight. `aria-current` already carries the state for assistive technology, so the visual job is only to be findable in a short list, and the accent does that without a bold face appearing in a menu where nothing else is bold. */
  .localization__option[aria-current='true'] {
    color: rgb(var(--color-accent));
  }

  .localization__option-name {
    flex: 1 1 auto;
  }

  .localization__option-currency {
    flex: 0 0 auto;
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:mega-panel (INDEX:178) */
/* Positioning layer: full width under the header, but transparent — only the
     centred box inside is visible (a floating panel, not a full-bleed bar).
     pointer-events:none so the transparent full-width band does NOT hold the
     menu open: without it, dragging the cursor to the empty sides kept the
     <details> "hovered" and the panel never closed. Only the visible box below
     re-enables pointer events, so leaving that box triggers the mouseleave
     close. */
  .header__mega-panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 30;
    padding-block-start: 4px;
    pointer-events: none;
  }

  details[open] > .header__mega-panel {
    animation: mega-panel-in var(--duration-fast, 240ms) var(--ease-out) both;
  }

  @keyframes mega-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
  }

  .mega {
    display: flex;
    align-items: stretch;
    gap: 40px;
    width: max-content;
    max-width: min(94vw, 1200px);
    margin-inline: auto;
    /* Re-enable interaction on the visible box (the layer above is none). */
    pointer-events: auto;
    padding-inline-start: clamp(20px, 3vw, 44px);
    border: 1px solid #ece3d4;
    background: #fdf8f1;
    box-shadow: 0 24px 50px -24px rgba(42, 37, 31, 0.45);
  }

  .mega--packed { width: min(94vw, 1120px); }

  .mega__links {
    flex: 1 1 auto;
    padding-block: 32px;
    padding-inline-end: clamp(20px, 3vw, 44px);
    min-width: 0;
  }

  /* Flat 2-level menu: a label + a two-column link grid. */
  .mega__label {
    margin: 0 0 12px;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #8a5060;
  }

  .mega__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* Grouped 3-level menu: headed columns (wrap, or masonry when packed). */
  .mega__groups {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: clamp(28px, 4vw, 72px);
    row-gap: 28px;
  }

  .mega__groups--packed {
    display: block;
    column-width: 160px;
    column-gap: clamp(28px, 3vw, 56px);
  }

  .mega__group { min-width: 7.5rem; }
  .mega__groups--packed .mega__group { margin-block-end: 28px; break-inside: avoid; }

  .mega__group-heading {
    display: block;
    margin-block-end: 8px;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #8a5060;
    text-decoration: none;
  }

  .mega__group-heading:hover { color: #c04a63; }

  .mega__list {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .mega__link {
    display: block;
    padding-block: 7px;
    font-family: var(--font-body--family);
    font-size: 13.5px;
    line-height: 1.2;
    color: rgba(42, 37, 31, 0.85);
    text-decoration: none;
    transition: color 0.15s ease;
  }

  .mega__link:hover { color: #c04a63; }

  /* Image column on the right. */
  .mega__feature {
    position: relative;
    display: none;
    width: 264px;
    flex-shrink: 0;
    overflow: hidden;
    background: #f2ece1;
  }

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

  .mega__feature:hover .mega__feature-img { transform: scale(1.04); }

  .mega__feature-cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(28, 24, 20, 0.7), transparent);
    color: #fdf8f1;
  }

  .mega__feature-kicker {
    display: block;
    font-family: var(--font-body--family);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(253, 248, 241, 0.85);
  }

  .mega__feature-title {
    display: block;
    margin-block-start: 2px;
    font-family: var(--font-heading--family);
    font-size: 15px;
    color: #fdf8f1;
  }

  .mega__feature-price {
    display: block;
    margin-block-start: 2px;
    font-family: var(--font-body--family);
    font-size: 13px;
    color: rgba(253, 248, 241, 0.9);
  }

  .mega__feature-price:empty { display: none; }

  @media screen and (min-width: 990px) {
    .mega__feature { display: block; }
  }

  @media (prefers-reduced-motion: reduce) {
    details[open] > .header__mega-panel { animation: none; }
    .mega__feature-img { transition: none; }
  }
/* END_SNIPPET:mega-panel */

/* START_SNIPPET:mega-promotions (INDEX:179) */
.mega-promos {
    display: grid;
    gap: 1rem;
    align-content: start;
  }

  .mega-promos--before {
    order: -1;
  }

  .mega-promo {
    display: grid;
    gap: 0.375rem;
    align-content: start;
    color: inherit;
    text-decoration: none;
  }

  .mega-promo__media {
    display: block;
    overflow: hidden;
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.05);
  }

  .mega-promo__media--landscape {
    aspect-ratio: 4 / 3;
  }

  .mega-promo__media--square {
    aspect-ratio: 1 / 1;
  }

  .mega-promo__media--portrait {
    aspect-ratio: 3 / 4;
  }

  .mega-promo__media--arch {
    aspect-ratio: 3 / 4;
    border-start-start-radius: 50vw;
    border-start-end-radius: 50vw;
  }

  .mega-promo__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  a.mega-promo:hover .mega-promo__image {
    transform: scale(1.04);
  }

  .mega-promo__heading {
    font-family: var(--font-heading--family);
    line-height: 1.2;
  }

  .mega-promo__heading--small {
    font-size: var(--font-size-sm);
  }

  .mega-promo__heading--medium {
    font-size: var(--font-size-h4);
  }

  .mega-promo__heading--large {
    font-size: var(--font-size-h3);
  }

  .mega-promo__text {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.72);
  }

  /* Both styles are a span, never a nested <button>. The whole tile is already one anchor, so this is a visual affordance; a real button inside an anchor is invalid HTML and gives a screen reader two controls for one destination. */
  .mega-promo__button {
    justify-self: start;
    font-size: var(--font-size-xs);
    font-weight: var(--font-body--weight);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: var(--transform-eyebrow);
  }

  .mega-promo__button--link {
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }

  .mega-promo__button--button {
    margin-block-start: 0.25rem;
    padding: 0.625rem 1.25rem;
    border: var(--style-border-width-buttons) solid currentcolor;
    border-radius: var(--style-border-radius-buttons);
  }

  a.mega-promo:hover .mega-promo__button--button {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  .mega-promos.text-center .mega-promo__button {
    justify-self: center;
  }

  .mega-promos.text-right .mega-promo__button {
    justify-self: end;
  }

  a.mega-promo:hover .mega-promo__heading {
    color: rgb(var(--color-accent));
  }

  @media (prefers-reduced-motion: reduce) {
    .mega-promo__image {
      transition: none;
    }
  }
/* END_SNIPPET:mega-promotions */

/* START_SNIPPET:newsletter-form (INDEX:181) */
.footer-news {
    container-type: inline-size;
    display: grid;
    gap: 0.625rem;
    align-content: start;
  }

  .footer-news__intro {
    display: contents;
  }

  .footer-news__heading {
    margin: 0;
    font-size: var(--font-size-h5, 1.125rem);
  }

  .footer-news__text {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Its own container, so `auto` measures the form and not the block. */
  .footer-news__form {
    container-type: inline-size;
    margin: 0;
  }

  /* Two lines is the floor, and the layout setting decides what happens above it. */
  .footer-news__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  /* `inline` and `stacked` are the merchant answering for themselves, so they hold at every width — a setting that a media query overrules is a setting the merchant will re-set and re-set. `inline` is the one that can be made to look wrong in a narrow column, and that is the merchant's call. */
  .footer-news--inline .footer-news__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .footer-news--inline .footer-news__submit {
    width: auto;
  }

  /* `auto` measures its own column, not the window. */
  @container (min-width: 24rem) {
    .footer-news--auto .footer-news__row {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .footer-news--auto .footer-news__submit {
      width: auto;
    }
  }

  .footer-news__input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: inherit;
  }

  .footer-news__input::placeholder {
    color: rgba(var(--color-foreground), 0.7);
  }

  /* iOS zooms the page when a field under 16px takes focus — see the note in
     assets/critical.css. */
  @media screen and (max-width: 749px) {
    .footer-news__input {
      font-size: 16px;
    }
  }

  .footer-news__submit {
    width: 100%;
  }

  .footer-news__note {
    margin: 0 0 0.5rem;
    font-size: var(--font-size-sm);
  }

  .footer-news__note--error {
    color: rgb(var(--color-accent));
  }
/* END_SNIPPET:newsletter-form */

/* START_SNIPPET:offer-tiers (INDEX:182) */
.offer-tiers {
    --oa: var(--offer-accent);
    font-family: var(--font-body--family);
    color: var(--oa);
  }

  .offer-tiers__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
  }

  .offer-tiers__gift {
    display: inline-flex;
    flex: 0 0 auto;
  }
  .offer-tiers__gift svg { width: 15px; height: 15px; }

  /* Animated ticker — one line at a time; a new line slides up into view. */
  .offer-ticker {
    display: inline-block;
    overflow: hidden;
    height: 1.4em;
    line-height: 1.4em;
    flex: 1 1 auto;
    min-width: 0;
  }
  .offer-ticker__line {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .offer-ticker__line.is-sliding { animation: offer-slide 0.45s var(--ease-out, ease-out); }
  @keyframes offer-slide {
    from { transform: translateY(1.4em); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* Unlock / Hide chip. */
  .offer-toggle {
    margin-inline-start: auto;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.25rem;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    background: var(--oa);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    transition: opacity var(--duration-fast, 150ms) ease;
  }
  .offer-toggle:hover { opacity: 0.85; }
  .offer-toggle__x { display: none; }
  .offer-toggle__x svg { width: 11px; height: 11px; }
  .offer-toggle[aria-expanded="true"] .offer-toggle__x { display: inline-flex; }

  /* On the product page at desktop, the Unlock chip sits inline right after the
     ticker text rather than pushed to the right edge (Hydrogen). On mobile it
     stays right-aligned (the base rules above: ticker grows, toggle margin auto). */
  @media screen and (min-width: 990px) {
    .pdp-offer .offer-ticker { flex: 0 1 auto; }
    .pdp-offer .offer-toggle { margin-inline-start: 0.6rem; }
  }

  /* Pulse the chip while the panel is closed, to invite a tap. */
  .offer-toggle:not([aria-expanded="true"]) { animation: offer-pulse 2.2s ease-in-out infinite; }
  @keyframes offer-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--offer-accent) 50%, transparent); }
    50% { transform: scale(1.06); box-shadow: 0 0 0 7px transparent; }
  }
  @media (prefers-reduced-motion: reduce) {
    .offer-toggle:not([aria-expanded="true"]) { animation: none; }
    .offer-ticker__line.is-sliding { animation: none; }
  }

  .offer-tiers__progress { margin-block-start: 0.6rem; }

  .offer-tiers__caption {
    margin: 0.4rem 0 0;
    font-size: 10.5px;
    font-weight: 400;
    color: rgba(var(--color-foreground), 0.6);
  }
  .offer-tiers__caption b { color: var(--oa); }

  /* Milestone journey bar: a rose medal per tier, connectors that fill. */
  .offer-ms { display: flex; align-items: center; }
  .offer-ms__seg {
    height: 4px;
    flex: 1 1 auto;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--color-foreground), 0.1);
  }
  .offer-ms__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--oa);
    transition: width 0.5s var(--ease-out, ease-out);
  }
  .offer-ms__medal { display: inline-flex; flex: 0 0 auto; margin: 0 2px; }
  .offer-ms__c { fill: #fff; stroke: rgba(0, 0, 0, 0.18); }
  .offer-ms__star { fill: none; stroke: rgba(0, 0, 0, 0.18); }
  .offer-ms__medal.is-preview .offer-ms__c { stroke: var(--oa); }
  .offer-ms__medal.is-preview .offer-ms__star { stroke: var(--oa); }
  .offer-ms__medal.is-next .offer-ms__c { stroke: var(--oa); }
  .offer-ms__medal.is-next .offer-ms__star { stroke: var(--oa); }
  .offer-ms__medal.is-next { filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--offer-accent) 50%, transparent)); }
  .offer-ms__medal.is-unlocked .offer-ms__c { fill: var(--oa); stroke: var(--oa); }
  .offer-ms__medal.is-unlocked .offer-ms__star { fill: #fff; stroke: none; }

  /* Expandable panel. */
  .offer-panel {
    margin-block-start: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--offer-accent) 20%, transparent);
    border-radius: 8px;
    padding: 0.75rem;
    background: color-mix(in srgb, var(--offer-accent) 4%, transparent);
    animation: offer-open 0.28s var(--ease-out, ease-out);
  }
  @keyframes offer-open {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) { .offer-panel { animation: none; } }

  .offer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: rgb(var(--color-foreground));
  }
  .offer-table--pdp { margin-block-start: 0.75rem; }
  .offer-row { border-block-start: 1px solid rgba(var(--color-foreground), 0.1); }
  .offer-row:first-child { border-block-start: 0; }
  .offer-row.is-applied { background: color-mix(in srgb, var(--tier) 8%, transparent); }

  .offer-row__spend {
    white-space: nowrap;
    padding: 0.35rem 0.75rem 0.35rem 0.5rem;
    box-shadow: inset 3px 0 0 var(--tier);
  }
  .offer-row__min { font-weight: 700; font-variant-numeric: tabular-nums; }
  .offer-row__get {
    border-inline-start: 1px solid rgba(var(--color-foreground), 0.1);
    padding: 0.35rem 0.75rem;
  }
  .offer-row__val { font-weight: 700; color: var(--tier); }
  .offer-row__ship { color: var(--tier); white-space: nowrap; }
  .offer-row__ship svg { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; }
  .offer-row__plus { font-weight: 700; }

  .offer-row__live {
    white-space: nowrap;
    border-inline-start: 1px solid rgba(var(--color-foreground), 0.1);
    padding: 0.35rem 0 0.35rem 0.75rem;
    text-align: end;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--color-foreground), 0.55);
  }
  .offer-row__live .offer-live__applied { color: var(--tier); }
  .offer-row__live svg { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; }
  /* Live column only shows once the cart has items. */
  .offer-tiers:not(.is-live) .offer-row__live { display: none; }

  .offer-note {
    margin: 0.6rem 0 0;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 400;
    color: rgba(var(--color-foreground), 0.6);
  }

  /* --- PDP placement (Hydrogen parity) --------------------------------------
     Desktop: the panel sits where the block is, under the price — plain, no tint.
     Mobile: it lifts to the top of the buy column (order:-1), above the title, as
     a rose-tinted full-bleed strip flush under the gallery. */
  @media (max-width: 749px) {
    .pdp-offer { order: -1; }

    /* Close the gallery -> info row-gap so the strip butts the gallery. */
    .product__info:has(> .pdp-offer) { margin-block-start: calc(-1 * 1.5rem); }

    .pdp-offer .offer-tiers[data-place="pdp"] {
      background: color-mix(in srgb, var(--offer-accent) 5%, transparent);
      border-block-end: 1px solid color-mix(in srgb, var(--offer-accent) 15%, transparent);
      margin-inline: calc(50% - 50vw);
      padding: 0.3rem max(1rem, calc(50vw - 50%));
    }
    /* Slim single-line strip: tighten the head row on mobile. */
    .pdp-offer .offer-tiers__head { font-size: 13.5px; }
    .pdp-offer .offer-toggle { padding-block: 0.1rem; }
  }
/* END_SNIPPET:offer-tiers */

/* START_SNIPPET:pagination (INDEX:183) */
.pagination-more {
    display: grid;
    justify-items: center;
    gap: 0.625rem;
    margin-block-start: 2.5rem;
  }

  .pagination-more__progress {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
  }

  /* A rule the width of the row, with the count sitting on it, so the end of
     the grid reads as a boundary rather than as the page running out. */
  .pagination-more__progress::after {
    content: '';
    display: block;
    width: 9rem;
    height: 1px;
    margin: 0.625rem auto 0;
    background: rgba(var(--color-foreground), 0.15);
  }

  /* Slimmer than a buy button, because it is not one. */
  .pagination-more__button {
    min-height: 2.25rem;
    padding: 0.375rem 1.5rem;
    border-color: rgba(var(--color-foreground), 0.3);
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
  }

  .pagination-more__button:hover {
    background: rgb(var(--color-foreground));
    border-color: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  .pagination-more[hidden] {
    display: none;
  }

  .pagination {
    display: flex;
    justify-content: center;
    margin-block-start: 3rem;
  }

  /* `hidden` has to be stated, not assumed. */
  .pagination[hidden] {
    display: none;
  }

  /* Compact paging: two chevrons framing a page-number dropdown and an "of N"
     label. Emphasis by spacing, not by fills or boxes. */
  .pagination--compact {
    align-items: center;
    gap: 1rem;
  }

  /* The chevrons: plain marks, not filled buttons. A comfortable tap target
     without a border around it. */
  .pagination__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    color: rgba(var(--color-foreground), 0.7);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  a.pagination__nav:hover {
    color: rgb(var(--color-foreground));
  }

  /* No page that way: the chevron stays for balance but reads as unavailable. */
  .pagination__nav--off {
    opacity: 0.25;
  }

  /* One chevron asset faces each way, mirrored under RTL like the slideshow
     arrows. Previous points back, next points forward. */
  .pagination__nav svg {
    width: 1.1rem;
    height: 1.1rem;
    transform: rotate(180deg);
  }

  .pagination__nav--next svg {
    transform: none;
  }

  [dir='rtl'] .pagination__nav svg {
    transform: none;
  }

  [dir='rtl'] .pagination__nav--next svg {
    transform: rotate(180deg);
  }

  /* The page dropdown: a bordered field with the number centred and a chevron
     drawn on the wrapper (a select cannot carry a pseudo-element of its own). */
  .pagination__picker {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .pagination__select {
    min-width: 3.5rem;
    padding: 0.5rem 2rem 0.5rem 0.9rem;
    border: 1px solid rgba(var(--color-foreground), 0.25);
    border-radius: var(--style-border-radius-inputs);
    background: transparent;
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-size-sm);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .pagination__select:focus-visible {
    outline: none;
    border-color: rgb(var(--color-foreground));
  }

  .pagination__chevron {
    position: absolute;
    inset-inline-end: 0.6rem;
    display: inline-flex;
    pointer-events: none;
    color: rgba(var(--color-foreground), 0.6);
  }

  .pagination__chevron svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  .pagination__of {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
    white-space: nowrap;
  }
/* END_SNIPPET:pagination */

/* START_SNIPPET:payment-icons (INDEX:184) */
.payment-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .payment-icons__item {
    display: flex;
  }

  /* Sized here rather than trusted from the file. The theme's own marks and Shopify's are drawn on the same 38×24 box today, but a provider Shopify adds later need not be, and one mark half a head taller than the rest is the thing the eye lands on. */
  .payment-icons__icon,
  .payment-icons__icon svg,
  .payment-icons svg {
    display: block;
    width: 2.375rem;
    height: 1.5rem;
  }

  /* Under the buy button this is reassurance rather than a feature, so it sits back and comes up to full strength when looked at. In the footer it is already among small print and needs no further stepping back. */
  .payment-icons--buy {
    opacity: 0.75;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .payment-icons--buy:hover {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .payment-icons--buy {
      transition: none;
    }
  }
/* END_SNIPPET:payment-icons */

/* START_SNIPPET:price (INDEX:185) */
.price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.5rem;
  }

  .price__current {
    font-weight: var(--font-body--weight-bold);
  }

  /* "From" is a qualifier, not part of the number. */
  .price__from {
    color: rgba(var(--color-foreground), 0.7);
    font-size: 0.85em;
    font-weight: var(--font-body--weight);
    letter-spacing: 0.02em;
  }

  .price--on-sale .price__current {
    color: rgb(var(--color-accent));
  }

  /* 0.72, not 0.55. The struck-through price is small text carrying real
     information — what the item used to cost — so it has to clear 4.5:1, and at
     0.55 it measured 3.39:1 on the theme's own background. Muted enough to stay
     secondary to the price beside it, legible enough to be a price. */
  .price__compare {
    color: rgba(var(--color-foreground), 0.72);
    text-decoration-thickness: 1px;
  }

  .price__unit {
    flex-basis: 100%;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_SNIPPET:price */

/* START_SNIPPET:product-block (INDEX:189) */
.product__vendor {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Every size is fluid between a floor and a ceiling rather than a single number, so the name scales with the viewport instead of stepping at a breakpoint. Multiplied by the theme's type scale, which is the setting a merchant uses to move all the type at once — a title that ignored it would be the one thing on the page that did. */
  .product__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: calc(clamp(1.5rem, 2.6vw, 2.25rem) * var(--type-scale));
    line-height: 1.15;
  }

  .product__title--small {
    font-size: calc(clamp(1.25rem, 1.9vw, 1.625rem) * var(--type-scale));
  }

  .product__title--large {
    font-size: calc(clamp(1.75rem, 3.4vw, 3rem) * var(--type-scale));
  }

  .product__title--custom {
    font-size: calc(clamp(1rem, 1.3vw, var(--title-size, 1.1875rem)) * var(--type-scale));
  }

  /* Title + heart on one row. The heart only appears on a phone; on desktop the
     gallery overlay carries the wishlist and this stays hidden, so the title
     keeps the full width it had. */
  .product__title-row {
    display: flex;
    align-items: flex-start;
    /* A very small gap only (user request): the heart stays at the right edge,
       just a hair off the title rather than a wide channel. */
    gap: 0.25rem;
  }

  /* Title fills the row so the heart sits at the right edge (user request). */
  .product__title-row .product__title {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* No circular plate on a phone — a bare heart beside the title (Hydrogen). */
  .product__title-wish {
    flex: 0 0 auto;
    display: none;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-block-start: 0.125rem;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(var(--color-foreground));
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .product__title-wish svg {
    width: 1.1875rem;
    height: 1.1875rem;
    fill: none;
  }

  .product__title-wish[aria-pressed='true'] {
    color: #c04a63;
  }

  .product__title-wish[aria-pressed='true'] svg {
    fill: currentColor;
  }

  .product__title-wish:focus-visible {
    outline: 2px solid #c04a63;
    outline-offset: 2px;
  }

  /* Phone only, matching where the gallery heart is hidden. */
  @media screen and (max-width: 749px) {
    .product__title-wish {
      display: grid;
    }
  }

  .product__price {
    font-size: var(--font-size-md);
  }

  /* Editor only, so it needs no colour scheme of its own. */
  .product__rating-note {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .product__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
  }

  /* The rating on the price line. A quiet hairline separates it from the price
     so the two facts read apart without a gap wide enough to look unrelated. */
  .product__price-rating {
    display: inline-flex;
    align-items: center;
    padding-inline-start: 0.625rem;
    border-inline-start: 1px solid rgba(var(--color-foreground), 0.16);
  }

  /* The same badge the grid uses, so a shopper who clicked a card marked 21% off sees the same words in the same colours here. It is sized down because on a card it competes with a photograph and here it sits beside the price it describes. */
  /* Tighter and rounded, unlike the badges on a photograph. */
  .badge.product__savings {
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
  }

  .product__savings[hidden] {
    display: none;
  }


  .product__form {
    display: grid;
    gap: 1rem;
    margin-block-start: 0.25rem;
  }

  /* A picker whose options are every one single-valued renders nothing but hidden fields. The buy column is a grid, so that empty row still collects a gap on each side of it — a band of dead space under the price on every one-colour product, which is most of them on some stores. */
  .product__options:not(:has(> .variant-option:not([hidden]))) {
    display: none;
  }

  /* The buy area owns the space between its own parts.
   *
   * It had none, so the accelerated checkout button sat flush against the
   * bottom of the quantity-and-add row — measured, the row ended at 599px and
   * the button began at 599px. The gap is slightly wider than the 0.625rem
   * inside the row above, so the quantity and the add button still read as one
   * control and the second way to buy reads as the next thing down.
   *
   * The parts that are not always there — the error line, the instalment
   * terms — collapse to `display: none` when empty, and a grid gives a hidden
   * item no gap, so nothing here leaves a hole when it has nothing to say. */
  .product__buy-block {
    display: grid;
    gap: 0.75rem;
  }

  .product__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.625rem;
  }

  /* --- Quick order list ----------------------------------------------------
     The reference this was drawn from stacks grey boxes inside grey boxes and
     rounds every corner. Recto does not: one hairline, one column of white,
     and the numbers doing the work. The behaviour is the same — a card per
     size for the chosen colour, fill-all, packs, a running total — but the
     furniture is gone.

     A card per size in a row that scrolls rather than wrapping into a block
     the height of the page. Only the chosen colour's sizes are shown; the rest
     stay in the document and hidden, so changing colour costs no request. */

  /* --- Quick order list ----------------------------------------------------
     An order form: a column per size, a row per colour, one control repeated
     until it reads as a grid rather than as a pile of boxes. */

  /* A cue, not a rival button.
     A second full-width button beside "Add to cart" makes a page with two
     primary choices, and the shopper has to read both before pressing either.
     Bulk is a minority path even on a product that sells by the dozen, so it
     is demoted to one quiet line: still findable, no longer competing. */
  .qo__cue {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.375rem;
    margin-block: -0.5rem 0.5rem;
    /* Both custom properties fall back rather than being required, so a block
       whose colour and size are untouched inherits the theme and no inline
       style is written at all. */
    font-size: var(--qo-cue-size, var(--font-size-sm));
  }

  .qo__cue-lead {
    color: rgba(var(--color-foreground), 0.6);
  }

  .qo__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
  }

  /* --- As a link --- */
  .qo__cue--link .qo__open {
    color: var(--qo-cue-color, rgb(var(--color-foreground)));
    padding: 0;
    border: 0;
    background: none;
    /* Underlined because it behaves like a link — the arrow alone reads as
       decoration and leaves nothing to aim at. */
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
  }

  .qo__cue--link .qo__open:hover {
    color: var(--qo-cue-color, rgb(var(--color-accent)));
    opacity: var(--qo-cue-hover-fade, 1);
  }

  /* A merchant-picked colour has no accent to shift to on hover, so it dims
     instead. Without this the link would look dead to the pointer. */
  .qo__cue--link.qo__cue--tinted {
    --qo-cue-hover-fade: 0.7;
  }

  .qo__cue--link .qo__open svg {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 0.15s ease;
  }

  .qo__cue--link .qo__open:hover svg {
    transform: translateX(0.125rem);
  }


  /* --- As a button ---
     Full width and stacked under the prompt, which becomes a caption above it
     rather than a fragment sitting beside a block. */
  .qo__cue--button {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-block-start: 0;
  }

  .qo__cue--button .qo__cue-lead {
    text-align: center;
  }

  /* No colour stated here. `.button--secondary` already paints an untouched
     button, hover included; restating the label colour at two classes would
     outrank `.button--secondary:hover` on source order and strand a dark label
     on the dark wipe. */
  .qo__cue--button .qo__open {
    width: 100%;
  }

  /* --- Recolouring the button ---
     The theme's own hover is a wipe: a `::after` layer scaled in from the
     leading edge, painted `rgb(var(--button-hover-bg))`. That property holds a
     triplet — "21 21 21" — because every theme colour does, and a merchant's
     picker hands back `#8a6a3d`. Feeding a hex to `rgb()` yields an invalid
     declaration, so the layer fell back to the theme's dark fill while the
     label kept the custom colour: black on black at the moment of the press.

     So the wipe is painted directly for a recoloured button rather than
     through that property, and the label is told where to go on hover. */

  /* Outlined, recoloured: the colour draws the edge and the label, then fills
     the button on hover with the label flipping to the page behind it. */
  .qo__cue--button.qo__cue--tinted .qo__open {
    border-color: var(--qo-cue-color);
    color: var(--qo-cue-color);
  }

  .qo__cue--button.qo__cue--tinted .qo__open::after {
    background: var(--qo-cue-color);
  }

  .qo__cue--button.qo__cue--tinted .qo__open:hover {
    color: rgb(var(--color-background));
  }

  /* Solid: the background is the fill, so there is nothing left to wipe in.
     The layer is removed rather than left scaling an invisible rectangle, and
     hover dims the whole button instead — which keeps the label legible
     whatever pair of colours was chosen. */
  .qo__cue--button.qo__cue--solid .qo__open {
    border-color: var(--qo-cue-bg);
    background: var(--qo-cue-bg);
    color: var(--qo-cue-color, rgb(var(--color-button-label)));
    transition: filter 0.2s ease;
  }

  .qo__cue--button.qo__cue--solid .qo__open::after {
    display: none;
  }

  .qo__cue--button.qo__cue--solid .qo__open:hover {
    color: var(--qo-cue-color, rgb(var(--color-button-label)));
    filter: brightness(0.9);
  }

  .qo {
    padding-block: 1rem;
    border-block: 1px solid rgba(var(--color-border), 0.9);
    margin-block-end: 1.25rem;
  }

  /* Inside the dialog the panel already has edges, and the sticky footer
     supplies the closing rule. */
  .qo--popup {
    padding-block: 0;
    border: 0;
    margin-block-end: 0;
  }

  .popup__panel--wide {
    width: min(52rem, calc(100% - 2rem));
  }

  /* --- The toolbar ---
     Fill-all and packs on one line, not two ragged ones. */
  .qo__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    /* Every control in this row is set to the same height and centred, rather
       than each finding its own baseline — a select with an underline, a pill
       and a boxed input otherwise sit at three different levels. */
    --qo-control: 2rem;
    gap: 0.75rem 1.5rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid rgba(var(--color-border), 0.7);
    margin-block-end: 1rem;
  }

  .qo__heading {
    margin: 0;
    font-size: var(--font-size-sm);
  }

  .qo__axis,
  .qo__packs,
  .qo__fill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
  }

  .qo__axis-label {
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }

  /* The theme's select: a rule under it, not a box around it. */
  .qo__axis-select {
    height: var(--qo-control, 2rem);
    padding: 0 1.25rem 0 0;
    border: 0;
    border-block-end: 1px solid rgba(var(--color-foreground), 0.28);
    border-radius: 0;
    background: none;
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
    appearance: none;
  }

  .qo__axis-select:focus-visible {
    outline: none;
    border-block-end-color: rgb(var(--color-foreground));
  }

  .qo__fill {
    margin-inline-start: auto;
  }

  .qo__fill-label,
  .qo__packs-label {
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }

  .qo__fill-input {
    width: 3rem;
    height: var(--qo-control, 2rem);
    padding: 0;
    border: 1px solid rgba(var(--color-border), 0.9);
    border-radius: var(--style-border-radius-inputs);
    background: none;
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .qo__fill-input:focus-visible {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: 1px;
  }

  .qo__fill-apply {
    padding: 0;
    border: 0;
    background: none;
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-size-xs);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }

  .qo__fill-apply:hover {
    color: rgb(var(--color-accent));
  }

  /* Packs are choices, so they are drawn as chips — the same pill the theme
     uses anywhere a shopper picks from a short list. */
  .qo__packs {
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .qo__packs-label {
    margin-inline-end: 0.25rem;
  }

  .qo__pack {
    min-width: 2.75rem;
    height: var(--qo-control, 2rem);
    padding: 0 0.75rem;
    border: 1px solid rgba(var(--color-border), 0.9);
    border-radius: 999px;
    background: none;
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  }

  .qo__pack:hover {
    border-color: rgb(var(--color-foreground));
  }

  .qo__pack:active {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  .qo__pack:focus-visible {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: 2px;
  }

  /* --- The grid ---
     Columns rather than a left-packed row: the sizes line up down the form so
     M sits under M, and the row fills the panel instead of trailing off into
     empty space. */
  .qo__group + .qo__group {
    padding-block-start: 1rem;
    border-block-start: 1px solid rgba(var(--color-border), 0.7);
    margin-block-start: 1rem;
  }

  .qo__group-name {
    margin: 0 0 0.625rem;
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .qo__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: 0.75rem;
  }

  .qo__card {
    display: grid;
    justify-items: center;
    gap: 0.3125rem;
    text-align: center;
  }

  .qo__size {
    margin: 0;
    font-size: var(--font-size-sm);
  }

  .qo__card[data-filled] .qo__size {
    font-weight: var(--font-body--weight-bold);
  }

  /* The field is the thing being used, so it gets the full column and the
     other lines stay quiet under it. */
  .qo__card .quantity {
    width: 100%;
  }

  .qo__card .quantity__input {
    width: 100%;
  }

  .qo__price {
    margin: 0;
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
  }

  /* One line. "20 in stock" broken across three was the form looking untidy
     before it looked informative. */
  .qo__stock {
    margin: 0;
    color: rgba(var(--color-foreground), 0.55);
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }

  .qo__out {
    display: grid;
    place-items: center;
    min-height: 2.5rem;
    margin: 0;
    color: rgba(var(--color-foreground), 0.45);
    font-size: var(--font-size-xs);
  }

  /* --- The footer ---
     Stuck to the bottom of the panel. A form this long puts the button below
     the fold, and a buyer who has filled in four sizes should not have to
     scroll to the end to find out what to press. */
  .qo__foot {
    position: sticky;
    inset-block-end: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.875rem;
    border-block-start: 1px solid rgba(var(--color-border), 0.9);
    margin-block-start: 1rem;
    background: var(--gradient-background);
  }

  /* Flush with the panel's edge. The body's own bottom padding would leave the
     sticky bar floating a centimetre above the frame with content sliding
     underneath it. */
  .popup__body:has(.qo--popup) {
    padding-block-end: 0;
  }

  .qo--popup .qo__foot {
    padding-block-end: 1.25rem;
  }

  .qo__total {
    margin: 0;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
  }

  .qo__total[hidden] {
    display: none;
  }

  .qo__submit {
    flex: 1 1 14rem;
    min-height: 2.75rem;
  }

  .qo__submit[disabled] {
    opacity: 0.4;
    cursor: default;
  }

  .qo__error:empty {
    display: none;
  }

  .qo__error {
    margin: 0.625rem 0 0;
    color: rgb(var(--color-accent));
    font-size: var(--font-size-sm);
  }

  @media screen and (max-width: 749px) {
    .qo__grid {
      grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
      gap: 0.5rem;
    }

    .qo__fill {
      margin-inline-start: 0;
    }
  }

  /* --- Volume pricing ------------------------------------------------------
     A ladder of quantities and per-unit prices, set quietly beside the buy
     button rather than dressed as a promotion — a wholesale buyer is reading a
     price list, not being sold to. */

  .volume {
    display: grid;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgba(var(--color-border), 0.9);
    border-radius: var(--style-border-radius-inputs);
    margin-block-end: 0.875rem;
    font-size: var(--font-size-sm);
  }

  .volume[hidden] {
    display: none;
  }

  .volume__table[hidden],
  .volume__rule[hidden] {
    display: none;
  }

  /* Separate borders, not collapsed: a collapsed border belongs to the table
     rather than to the row that appears to own it, which is the same reason
     the measurement table uses them. */
  /* The buy column turns any table it finds into a shrink-to-fit block with
     its own sideways scroll — right for a table pasted into a description,
     wrong for two columns of the theme's own. As a block it shrank to its
     contents, which ran the two headings together and left the prices sitting
     mid-row. Same specificity as that rule and declared later, so it needs the
     extra class to win rather than depend on source order. */
  .volume .volume__table {
    display: table;
    width: 100%;
    max-width: none;
    overflow: visible;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-sm);
  }

  /* Headings are labels, not data — muted and small, so the numbers under them
     are what the eye lands on. */
  .volume__table th {
    padding: 0.25rem 0 0.375rem;
    border-block-end: 1px solid rgba(var(--color-foreground), 0.25);
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
    font-weight: var(--font-body--weight);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: start;
  }

  .volume__table td {
    padding: 0.375rem 0;
    border-block-end: 1px solid rgba(var(--color-border), 0.7);
  }

  /* The last row closes on the rule below it rather than drawing a line the
     container's own border repeats. */
  .volume__table tbody tr:last-child td {
    border-block-end: 0;
  }

  /* The price column is read as a column of figures, so it is set hard right
     and in tabular numerals — the digits line up rather than drifting. */
  .volume__table th:last-child,
  .volume__price {
    text-align: end;
  }

  .volume__price {
    font-variant-numeric: tabular-nums;
  }

  .volume__rule {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
  }

  /* --- Purchase options ----------------------------------------------------
     A radio group drawn as rows rather than as chips: the label is a sentence
     ("Pre-order, ships in March") and the price sits opposite it, which is a
     table of choices, not a set of buttons. */

  .plans {
    display: grid;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    margin: 0 0 0.875rem;
  }

  .plans[hidden] {
    display: none;
  }

  .plans__legend {
    padding: 0;
    margin-block-end: 0.25rem;
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
  }

  .plans__option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(var(--color-border), 0.9);
    border-radius: var(--style-border-radius-inputs);
    font-size: var(--font-size-sm);
    cursor: pointer;
  }

  .plans__option[hidden] {
    display: none;
  }

  .plans__option:has(.plans__input:checked) {
    border-color: rgb(var(--color-foreground));
  }

  /* Kept in the document rather than removed: a control that is not rendered
     is not focusable, and the group would be unreachable by keyboard. */
  .plans__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .plans__mark {
    display: grid;
    place-items: center;
    width: 0.875rem;
    height: 0.875rem;
    border: 1px solid rgba(var(--color-foreground), 0.4);
    border-radius: 50%;
  }

  .plans__option:has(.plans__input:checked) .plans__mark {
    border-color: rgb(var(--color-foreground));
  }

  .plans__option:has(.plans__input:checked) .plans__mark::after {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: rgb(var(--color-foreground));
  }

  .plans__option:has(.plans__input:focus-visible) {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: 2px;
  }

  .plans__price {
    font-variant-numeric: tabular-nums;
  }

  .plans__terms {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
  }

  .plans__terms[hidden] {
    display: none;
  }

  /* 40px, the same as the stepper beside it. */
  .product__add {
    position: relative;
    flex: 1 1 12rem;
    min-height: 2.4rem;
    padding-block: 0.25rem;
    overflow: hidden;
    transition: transform 0.12s ease;
  }

  /* "Notify me when back" — the same slim button, with the bell inline. Never
     wraps; on narrow screens it drops the "when back" tail to stay one line. */
  .product__notify {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
  }
  .product__notify-bell { flex: 0 0 auto; }

  @media screen and (max-width: 749px) {
    .product__notify-tail { display: none; }
  }

  /* --- "Complete the look" — two-row image grid with header arrows --- */
  .look { margin-block-start: 0.5rem; }
  .look__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; }
  .look__heading { margin: 0; font-family: var(--font-heading--family); font-size: var(--font-size-lg); font-weight: 700; line-height: 1.15; }
  .look__arrows { display: inline-flex; gap: 0.4rem; flex: 0 0 auto; }
  /* Reset the shared scroll-arrow's absolute overlay position — here they live in the header row. */
  .look__arrows .look__arrow {
    position: static;
    inset: auto;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid rgba(var(--color-foreground), 0.25);
    border-radius: 50%;
    background: none !important;
    box-shadow: none !important;
    color: rgb(var(--color-foreground));
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .look__arrows .look__arrow:hover { border-color: rgb(var(--color-foreground)); }
  .look__arrows .look__arrow[disabled] { opacity: 0.3; cursor: default; }
  .look__arrows .look__arrow[disabled]:hover { border-color: rgba(var(--color-foreground), 0.25); }
  /* Bolder chevron. These are our own buttons (not the shared scroll-arrows), so
     the prev arrow is turned to face left here. */
  .look__arrows .look__arrow svg { width: 0.7rem; height: 0.7rem; stroke-width: 3; }
  .look__arrows .look__arrow--prev svg { transform: rotate(180deg); }
  .look__arrows .look__arrow[hidden] { display: none; }

  .look__grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc((100% - 2 * 0.6rem) / 3);
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .look__grid::-webkit-scrollbar { display: none; }
  @media screen and (min-width: 750px) {
    .look__grid { grid-auto-columns: calc((100% - 3 * 0.6rem) / 4); }
  }

  .look__cell { position: relative; scroll-snap-align: start; }
  .look__media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: rgba(var(--color-foreground), 0.06); }
  .look__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
  .look__media:hover img { transform: scale(1.06); }

  /* Quick-view bag as a corner button on the image (always shown, like the
     Hydrogen look card — opens quick view, or links to the product). */
  .look__bag {
    position: absolute;
    inset-block-end: 0.4rem;
    inset-inline-end: 0.4rem;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 4px 12px -5px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .look__bag:hover,
  .look__bag:focus-visible { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); }
  .look__bag svg { width: 0.8rem; height: 0.8rem; }

  /* The hover the base button has always had, given a colour it can show.
     `--button-hover-bg` defaults to the foreground, and in most schemes the
     button is already that colour — measured on this store, both are
     42, 37, 31 — so the wipe has been running the whole time with black
     sliding over black.

     Accent, because it is the one colour a scheme can be relied on to keep
     dark: the theme sets links and sale prices in it against the page, so a
     merchant who picks something too pale has already broken those. That is
     what makes the label safe to leave white through the wipe.

     Only the button that adds to the cart. A wipe on every button on the page
     is a page that flickers as the pointer crosses it; this is the one control
     the whole template is built around. */
  .product__add:not([disabled]) {
    --button-hover-bg: var(--color-accent);
  }

  /* The press. */
  .product__add:active:not([disabled]) {
    transform: scale(0.98);
  }

  /* And the wait. */
  .product__add[aria-busy='true']::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 1;
    width: 40%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(var(--color-button-label), 0.18),
      transparent
    );
    animation: product-add-sheen 0.9s ease-in-out infinite;
  }

  @keyframes product-add-sheen {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(350%);
    }
  }

  /* Both of these are feedback, and feedback is exactly what someone who has asked for less motion still needs — so the press becomes a shift in colour weight and the wait stops moving, rather than both disappearing. */
  @media (prefers-reduced-motion: reduce) {
    .product__add {
      transition: none;
    }

    .product__add:active:not([disabled]) {
      transform: none;
      filter: brightness(0.92);
    }

    .product__add[aria-busy='true']::after {
      animation: none;
      width: 100%;
      background: rgba(var(--color-button-label), 0.12);
    }
  }

  /* The label and the total are one centred pair, not a label with a number stuck to the far edge. */
  .product__add-total {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
  }

  /* The rule between the label and the total. */
  .product__add-total::before {
    content: '·';
    margin-inline-end: 0.4375rem;
    opacity: 0.7;
  }

  /* Shopify renders the instalment message into this box and owns everything
     inside it, including its own typography. Only the space around it is ours. */
  .product__instalments:empty {
    display: none;
  }

  .product__instalments,
  .product__instalments shopify-payment-terms {
    font-size: var(--font-size-xs);
  }

  /* Accent, not red. The theme ships no error colour, and inventing one would
     put a second accent on the page — this is a refusal, not an alarm. */
  .product__error:empty {
    display: none;
  }

  .product__error {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-accent));
  }

  .product__app-block:empty {
    display: none;
  }

  /* Nothing to say and nothing to occupy: an empty stock line would otherwise
     hold its own line-height and leave a gap where the sentence used to be. */
  .product__stock:empty {
    display: none;
  }

  /* `hidden` needs saying out loud here. The attribute only carries a
     UA-stylesheet `display: none`, which the author rule below beats, so
     script setting `stock.hidden = true` changed nothing on screen. The
     `:empty` rule above covers only the first render: once the label has been
     written for an in-stock size, the element is no longer empty, and picking
     a sold-out size left "In stock, ready to ship" sitting above a SOLD OUT
     button. */
  .product__stock[hidden] {
    display: none;
  }

  .product__stock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.8);
  }

  .product__stock-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #3f8f5f;
  }

  /* Amber, not green. The green dot is the theme's word for "on a shelf"; a
     pre-order is available but not that, and giving both the same mark makes
     the distinction the sentence draws invisible at a glance. */
  .product__stock--preorder .product__stock-dot {
    background: #b8860b;
  }

  /* Terracotta, and a third colour rather than a second amber. Pre-order and
     low stock are different facts — one is not on a shelf, the other is nearly
     off it — and a shopper reading the dot before the sentence should not have
     to check which. Muted rather than a signal red: this is a nudge, not an
     alarm, and a fashion page that shouts about three units left reads as a
     tactic. */
  .product__stock--low .product__stock-dot {
    background: #c2410c;
  }

  .product__sku,
  .product__note {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
    font-size: var(--font-size-xs);
  }

  /* Narrow buttons run the label into the total. Below that width the total is dropped rather than wrapped: the price is already above the button, and a two-line button is worse than a button without a number on it. */
  @media screen and (max-width: 480px) {
    .product__add-total {
      display: none;
    }
  }

  /* A panel with nothing to press: same rhythm as a disclosure, without the
     summary row's cursor or chevron. */
  .panel--static {
    padding-block: 0.875rem;
  }

  .panel__label--static {
    margin: 0 0 0.625rem;
  }

  /* --- Spend and save tiers --- a quiet accent line under the price that opens
     to the ladder. Minimalist: no heavy fill, thin accent tint, small type. */
  .spend-tiers {
    margin-block-start: 0.75rem;
    border: 1px solid rgba(192, 74, 99, 0.25);
    border-radius: var(--style-border-radius-inputs);
    background: rgba(192, 74, 99, 0.05);
  }

  .spend-tiers__summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    list-style: none;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: rgb(var(--color-foreground));
  }

  .spend-tiers__summary::-webkit-details-marker { display: none; }

  .spend-tiers__icon {
    display: inline-flex;
    color: #c04a63;
  }

  .spend-tiers__icon svg { width: 1rem; height: 1rem; }

  .spend-tiers__lead { flex: 1 1 auto; }

  .spend-tiers__lead strong {
    color: #c04a63;
    font-weight: var(--font-body--weight-bold);
  }

  .spend-tiers__summary > svg {
    width: 0.85rem;
    height: 0.85rem;
    transition: transform 0.2s ease;
  }

  .spend-tiers[open] .spend-tiers__summary > svg { transform: rotate(180deg); }

  .spend-tiers__body {
    padding: 0 0.75rem 0.625rem;
  }

  .spend-tiers__list {
    display: grid;
    gap: 0.1875rem;
    padding: 0;
    margin: 0 0 0.375rem;
    list-style: none;
  }

  .spend-tiers__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--font-size-2xs, 0.6875rem);
    color: rgba(var(--color-foreground), 0.8);
  }

  .spend-tiers__note {
    margin: 0;
    font-size: var(--font-size-2xs, 0.6875rem);
    color: rgba(var(--color-foreground), 0.55);
  }
/* END_SNIPPET:product-block */

/* START_SNIPPET:product-card (INDEX:190) */
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Only the panel animates, so only the panel pays for the transition. */
  .card--panel {
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  /* The plain (unboxed) card lifts on hover too, like the Hydrogen card — a
     transform only, no shadow (there is no surface to cast one). */
  .card--plain {
    transition: transform 0.3s ease;
  }

  /* Panelled: the card is an object sitting on the page, with its own edge and a tint separating it from the background. Suits a busy grid, or a store whose product shots have inconsistent backgrounds, because the panel gives every card the same frame regardless of what is inside it. */
  .card--panel {
    overflow: hidden;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-media);
    background: rgba(var(--color-foreground), 0.03);
  }

  /* Plain: no frame at all. The photograph is the card, and the text below it sits directly on the page. */
  .card--plain .card__content {
    padding-inline: 0;
    padding-block-end: 0;
  }

  /* The radius lived on the card and clipped the image through `overflow`. With
     no card box to clip against, the media has to round itself. */
  .card--plain .card__media {
    overflow: hidden;
    border-radius: var(--style-border-radius-media);
  }

  .card.reveal {
    transition-delay: var(--reveal-delay, 0ms);
  }

  /* --- Media --- */

  .card__media {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: rgba(var(--color-foreground), 0.05);
  }

  .card__media--fixed {
    aspect-ratio: var(--card-image-ratio);
  }

  .card__image-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  .card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .card__image--secondary {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .card__placeholder,
  .card__placeholder-svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: rgba(var(--color-foreground), 0.12);
  }

  /* --- Sale countdown --- Built by theme.js from the register in sections/countdown-campaigns.liquid, so nothing here is ever rendered by Liquid. */

  .card {
    --card-countdown-size: 2.25rem;
    /* `.button`'s own min-height. The timer's hover lift is measured from it, so
       the two cannot drift apart. */
    --card-quick-add-height: 2.75rem;
  }

  .card__countdown {
    position: absolute;
    /* Inset rather than flush into the corner. The reference this follows sits flush, which works on a square card; the media here carries a corner radius a merchant can raise to 40px, and a flush timer runs straight into that curve. */
    inset-block-end: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 2;
    /* The card's link covers the whole photograph. Without this the timer is a
       dead patch in the middle of it where clicks stop working. */
    pointer-events: none;
  }

  /* One white block divided by hairlines, not four tiles with gaps between them. */
  .card__countdown .countdown__units {
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0;
    background: none;
  }

  /* Square, and small on purpose: at the size this started, four tiles competed with the photograph instead of sitting under it. */
  .card__countdown .countdown__unit {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0;
    /* `min-width` reset because the shared `.countdown__unit` rule sets 3rem,
       which outranks a plain `width` and quietly stretched the square. */
    width: var(--card-countdown-size);
    min-width: 0;
    height: var(--card-countdown-size);
    padding-block: 0;
    padding-inline: 0.25rem;
    /* The merchant's colours when a campaign carries them, the card's own colour scheme when it does not. theme.js sets the two properties on the box only if the settings were filled in, so an untouched campaign falls through to the scheme rather than to nothing. */
    border-inline-end: 1px solid rgba(var(--color-foreground), 0.15);
    border-inline-end-color: color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 0;
    background: var(--card-countdown-bg, rgb(var(--color-background)));
    color: var(--card-countdown-fg, rgb(var(--color-foreground)));
    line-height: 1.35;
  }

  .card__countdown .countdown__unit:last-child {
    border-inline-end: 0;
  }

  /* `<b>` for the number is the markup the theme's other countdown uses, so the weight is reset here rather than the element changed — the product page's timer and the card's stay one component. */
  .card__countdown .countdown__unit b {
    font-size: 10px;
    /* Tabular figures, so 59 and 11 are the same width and the tile does not
       breathe once a second. */
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-body--weight);
  }

  /* Its own tracking rather than the eyebrow token. That token is tuned for headings and runs to 2px; on a four letter word inside a 36px tile it eats the whole cell and DAYS ends up touching both edges. */
  .card__countdown .countdown__unit i {
    font-size: 10px;
    font-style: normal;
    /* Lowercase, and that is a space decision before it is a style one. Capitals are drawn on one wide em and need letter-spacing to stay readable, so DAYS runs about 20% wider than days before the tracking is even counted. On a 28px tile that difference is what lets the timer and the quick view icon share a line on a phone. */
    letter-spacing: 0;
    /* Sentence case. Capitals sit on one wide em and need letter-spacing to stay readable, so DAYS runs about 20% wider than Days before the tracking is even counted — and that width is what lets the timer and the quick view icon share a line on a phone. Capitalising the first letter only costs a pixel or two of that back. */
    text-transform: capitalize;
    /* Softer than the number, and derived from whatever colour the tile is carrying rather than from the scheme. Declared twice on purpose: a browser without `color-mix` keeps the first and the label stays legible, while one that has it follows a merchant's white-on-black timer instead of staying dark grey on it. */
    color: rgba(var(--color-foreground), 0.7);
    color: color-mix(in srgb, currentColor 72%, transparent);
  }

  /* The colon belongs to the product page's stacked timer. Here the tiles are already separated by their own gap, and a separator between them would be a ninth box in the row. */
  .card__countdown .countdown__sep {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Phones get their own scale, not the desktop one shrunk by a percentage. */
    .card {
      --card-countdown-size: 1.75rem;
    }

    .card__countdown .countdown__unit {
      padding-inline: 0;
    }

    .card__countdown .countdown__unit b,
    .card__countdown .countdown__unit i {
      font-size: 9px;
    }

    .card__countdown .countdown__unit i {
      letter-spacing: 0;
      padding-inline-start: 0;
    }
  }

  /* --- Badges --- */

  .card__badges {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    pointer-events: none;
  }

  /* Flush into the corner, not floated near it. */
  .badge--top-left {
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .badge--top-right {
    inset-block-start: 0;
    inset-inline-end: 0;
    align-items: flex-end;
  }

  .badge--bottom-left {
    inset-block-end: 0;
    inset-inline-start: 0;
  }

  /* Its own radius rather than the button or media one. A badge is a different kind of object from either, and a merchant running square buttons may still want a pill on the photograph, or the reverse. A large value on a chip this short resolves to a pill on its own, so no separate pill option is needed. */
  .badge {
    padding: 0.3125rem 0.625rem;
    border-radius: var(--badge-radius, 0px);
    font-size: 0.625rem;
    font-weight: var(--font-body--weight);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .badge--accent {
    background: rgb(var(--color-accent));
    color: rgb(var(--color-button-label));
  }

  /* Merchant badges get their own colours rather than reusing the accent, which belongs to Sale. Two badges in the same colour saying different kinds of thing is how a visitor stops reading either of them. */
  .badge--custom {
    background: rgb(var(--badge-custom-bg));
    color: rgb(var(--badge-custom-text));
  }

  /* Smaller on phones, chip and text together. */
  @media screen and (max-width: 749px) {
    .badge {
      padding: 0.125rem 0.375rem;
      font-size: 0.5625rem;
      letter-spacing: 0.04em;
    }

    .card__badges {
      gap: 0.25rem;
    }

    /* The offsets are zero at every width now, so there is nothing to shrink
       here. Only the chip itself gets tighter on a phone. */
    .badge {
      padding: 0.25rem 0.5rem;
    }
  }

  .badge--muted {
    background: rgba(var(--color-foreground), 0.85);
    color: rgb(var(--color-background));
  }

  /* --- Quick add --- */

  .card__quick-add-icon {
    display: none;
  }

  /* A plus, not a bag. This control opens the quick view panel; it does not add to the cart. A cart glyph promises an outcome the button does not deliver, and it repeats the header's own cart icon on every card, so two different actions end up wearing the same mark. A plus promises nothing specific, which is exactly what a panel that asks for a size is. */
  .card__quick-add-icon svg {
    width: 1.125rem;
    height: 1.125rem;
  }


  .card__quick-add {
    position: absolute;
    inset-inline: 0.5rem;
    inset-block-end: 0.5rem;
    /* Above the countdown, which also lives at the foot of the media. Without
       this the timer's z-index wins and the button is buried under it. */
    z-index: 3;
  }

  /* The timer moves, not the button. */
  @media (hover: hover) and (min-width: 750px) {
    .card--countdown .card__countdown {
      transition: translate var(--duration-slow, 400ms) var(--ease-out, ease);
    }

    /* `translate` rather than a change of `inset`: it is composited, so the slide
       costs no layout on a grid where two dozen of these exist at once. */
    .card--countdown:hover .card__countdown,
    .card--countdown:focus-within .card__countdown {
      translate: 0 calc(-1 * (var(--card-quick-add-height) + 0.5rem));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .card--countdown .card__countdown {
      transition: none;
    }
  }

  .card__quick-add-form {
    margin: 0;
  }

  /* Solid by default, inverted on hover. */
  /* No wipe. On desktop it is a bar over a photograph and the invert is the whole effect; on a phone it is a 32px circle, where a sweep is a shape crossing a shape. */
  .card__quick-add-button::after {
    content: none;
  }

  .card__quick-add-button {
    width: 100%;
    min-height: 2.5rem;
    padding-block: 0.5rem;
    border-color: rgb(var(--color-foreground));
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    font-size: var(--font-size-xs);
  }

  .card__quick-add-button:hover,
  .card__quick-add-button:focus-visible {
    border-color: rgb(var(--color-foreground));
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
  }

  /* --- "Add to bag" size panel over the image (Hydrogen parity) --- */
  /* Hidden by default. The over-image panel is a hover affordance and only ever
     appears on hover-capable desktop (the media query below turns it on there).
     On touch/mobile the bag button opens a bottom sheet instead. */
  .card__sizes {
    display: none;
    position: absolute;
    inset-inline: 0.5rem;
    inset-block-end: 0.5rem;
    z-index: 3;
    padding: 0.6rem 0.65rem 0.7rem;
    background: rgba(var(--color-background), 0.96);
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 30px -14px rgba(var(--color-shadow), 0.5);
  }

  /* Mobile/touch bag button — the corner circle that opens the size sheet.
     Hidden by default; shown only where the hover panel cannot be (below). */
  .card__bag {
    display: none;
    position: absolute;
    inset: auto 0.5rem 0.5rem auto;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 10px -4px rgba(var(--color-shadow), 0.45);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .card__bag svg { display: block; width: 1.05rem; height: 1.05rem; }
  .card__bag:hover,
  .card__bag:focus-visible {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }
  /* Touch devices and small screens: no hover panel, so the bag shows. */
  @media (hover: none), (max-width: 749px) {
    .card__bag { display: inline-flex; }
  }
  .card__sizes-label {
    margin: 0 0 0.45rem;
    font-size: 0.625rem;
    font-weight: var(--font-body--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground));
  }
  .card__sizes-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    /* Cap the panel so a product with many sizes (pants, numeric waist sizes)
       scrolls inside a bounded box instead of the panel growing up and off the
       top of the card. ~2 rows visible, the rest a contained scroll. */
    max-height: 4.9rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .card__sizes-cells::-webkit-scrollbar {
    width: 4px;
  }

  .card__sizes-cells::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(var(--color-foreground), 0.25);
  }
  .card__size-form { margin: 0; flex: 1 1 auto; }
  .card__size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    min-width: 2.25rem;
    min-height: 2rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid rgba(var(--color-foreground), 0.25);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font: inherit;
    font-size: var(--font-size-2xs, 0.6875rem);
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }
  .card__size:hover {
    border-color: rgb(var(--color-foreground));
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }
  .card__size-icon svg { display: block; }
  /* Both icons hidden by default; shown per state so a colour swap can re-point
     a cell by toggling data attributes alone. Bolt = low stock, bell = sold out. */
  .card__size-bolt,
  .card__size-bell { display: none; }
  .card__size-bolt { color: var(--offer-accent, #c04a63); }
  .card__size[data-low] .card__size-bolt { display: inline-flex; }
  .card__size[data-low]:hover .card__size-bolt { color: rgb(var(--color-background)); }

  .card__size[data-soldout] {
    border-style: dashed;
    color: rgba(var(--color-foreground), 0.55);
  }
  .card__size[data-soldout] .card__size-bell { display: inline-flex; color: var(--offer-accent, #c04a63); }
  .card__size[data-soldout]:hover {
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border-color: rgb(var(--color-foreground));
  }
  .card__size[data-soldout]:hover .card__size-bell { color: var(--offer-accent, #c04a63); }

  /* Desktop pointer only: the panel exists here (display:none everywhere else),
     hidden until the card is hovered, like the quick-add bar. The min-width pairs
     with the bag button's max-width:749px so the two never both show — a narrow
     desktop window gets the bag + sheet, not both controls at once. */
  @media (hover: hover) and (min-width: 750px) {
    .card__sizes {
      display: block;
      opacity: 0;
      transform: translateY(0.5rem);
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .card:hover .card__sizes,
    .card:focus-within .card__sizes {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
  }
  @media (hover: hover) and (prefers-reduced-motion: reduce) {
    .card__sizes { transition: opacity 0.2s ease; transform: none; }
  }

  /* --- Content --- */

  /* Tighter than it was. */
  .card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.5rem 0.625rem;
  }

  /* No rating: the price hugs the title, with no gap left where the stars would
     sit (Hydrogen behaviour). The colour swatches keep their own small gap below
     the price. Rated cards keep the uniform gap above. */
  .card__content:not(:has(.card__rating)) {
    gap: 0;
  }
  .card__content:not(:has(.card__rating)) .card__swatches {
    margin-block-start: 0.3rem;
  }

  .card__content--center {
    align-items: center;
    text-align: center;
  }

  .card__content--right {
    align-items: flex-end;
    text-align: end;
  }

  .card__vendor {
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Title + wishlist heart on one row, like the Hydrogen card. */
  .card__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .card__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: 0.6875rem;
    line-height: 1.25;
    text-wrap: pretty;
  }
  @media screen and (min-width: 640px) {
    .card__title { font-size: 0.8125rem; }
  }

  /* One line, ellipsis — Hydrogen clamps the card title to a single line. */
  .card__title-link {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  .card__title-link:hover {
    color: rgb(var(--color-accent));
  }

  /* Wishlist heart (uses the theme's localStorage wishlist via data-wish-toggle). */
  .card__wish {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-block-start: 0.05rem;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(var(--color-foreground), 0.75);
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
  }
  .card__wish:hover { transform: scale(1.1); color: rgb(var(--color-foreground)); }
  .card__wish-icon { width: 1rem; height: 1rem; display: block; }
  .card__wish[aria-pressed='true'] {
    color: var(--offer-accent, #c04a63);
  }
  .card__wish[aria-pressed='true'] .card__wish-icon {
    fill: var(--offer-accent, #c04a63);
    stroke: var(--offer-accent, #c04a63);
  }

  /* Scoped to the card rather than changed in the price snippet, because the product page wants the price large and this is the one place it should not be. Unstyled it inherits the body size, which came out at 16px bold against a 13px title: the card read price first and product second, which is the wrong order on a page whose job is browsing. */
  .card__content .price {
    font-size: 0.8125rem;
  }

  .card__content .price__compare {
    font-size: 0.75rem;
  }

  /* --- Rating --- */

  .card__rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-xs);
  }

  .rating__track,
  .rating__fill {
    display: block;
    height: 0.75rem;
  }

  /* Five stars drawn as a repeating mask, so the fill is a single element whose
     width is the rating. No per-star markup and no half-star images. */
  .rating__track {
    position: relative;
    width: 4.25rem;
    background: rgba(var(--color-foreground), 0.22);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.3 5.9.85-4.25 4.15 1 5.8L10 14.85 4.75 17.6l1-5.8L1.5 7.65l5.9-.85z'/%3E%3C/svg%3E");
    mask-size: 0.85rem 0.75rem;
    mask-repeat: repeat-x;
  }

  .rating__fill {
    width: var(--rating-percent);
    background: rgb(var(--color-foreground));
  }

  /* Stars only on the card, like the Hydrogen card — the count stays in the
     accessible label, not shown as text. */
  .rating__count {
    display: none;
  }

  /* --- Swatches --- */

  .card__swatches {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  /* Roomier still between the dots on a phone, where the tap targets sit closer
     to the edge of the card. */
  @media screen and (max-width: 749px) {
    .card__swatches { gap: 0.625rem; }
  }

  /* Shape is one setting for the whole theme, not one per place a swatch appears. Appearance can differ by context — a card can show photographs while a panel shows flat colour — but a circle on the card and a square in the panel would read as a bug rather than a choice, so the shape token is shared and the quick view panel will use the same one. */
  /* Clickable now: tapping a swatch swaps the card image to that colour.
     Sized to match Hydrogen: a 0.875rem (14px) dot. The dot stays small; a
     transparent ::after grows the tap target to ~1.5rem so the mark reads as a
     colour, not a button, while staying comfortable to hit. */
  .card__swatch {
    position: relative;
    display: block;
    width: 0.875rem;
    height: 0.875rem;
    padding: 0;
    border: 0;
    border-radius: var(--swatch-radius, 50%);
    box-shadow: inset 0 0 0 1px rgba(var(--color-foreground), 0.2);
    background-color: var(--swatch-color, transparent);
    background-image: var(--swatch-image, none);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
  }
  .card__swatch::after {
    content: '';
    position: absolute;
    inset: -0.3rem;
  }
  .card__swatch:hover {
    box-shadow: inset 0 0 0 1px rgba(var(--color-foreground), 0.5);
  }
  /* Selected colour — ringed outside so the colour itself stays visible. */
  .card__swatch[aria-current='true'] {
    box-shadow:
      inset 0 0 0 1px rgba(var(--color-foreground), 0.2),
      0 0 0 2px rgb(var(--color-background)),
      0 0 0 3px rgb(var(--color-foreground));
  }

  /* Uniform with the dots (same 1.5rem box), a clickable "+N" that opens the
     quick view, like Hydrogen's overflow counter. */
  .card__swatch-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.15rem;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: var(--font-body--weight-bold);
    line-height: 1;
    color: rgba(var(--color-foreground), 0.7);
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .card__swatch-more:hover {
    color: rgb(var(--color-foreground));
  }

  /* --- Hover, pointer devices only --- On touch there is no hover state, so the quick add bar must be visible from the start or it is unreachable. */

  @media (hover: hover) {
    .card__quick-add {
      opacity: 0;
    }

    .card:hover .card__quick-add,
    .card:focus-within .card__quick-add {
      opacity: 1;
    }

    /* Lift and shadow belong to the panel only. A shadow is a surface casting it, and with no background there is no surface: the effect reads as the photograph floating off the page, and the shadow lands on nothing at the card's edges because the image already runs to them. */
    .card--panel:hover {
      transform: translateY(-0.375rem);
      box-shadow: 0 18px 38px -22px rgba(var(--color-shadow), 0.45);
    }

    /* Plain card: the same lift without the shadow, matching Hydrogen's
       hover:-translate-y-1 on the unboxed card. */
    .card--plain:hover {
      transform: translateY(-0.25rem);
    }

    .card:hover .card__image--secondary {
      opacity: 1;
    }
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .card--zoom:hover .card__image--primary {
      transform: scale(1.06);
    }
  }
  /* Phones get an icon in the corner rather than a bar across the image. */
  @media screen and (max-width: 749px) {
    /* The timer stops short of the icon rather than the icon moving out of the
       timer's way: both keep the line they belong on, which is what the corner
       arrangement is for.

       `inset-inline-end` reserves the icon's own width plus its insets, so the
       row is bounded by the space actually left over. The tiles are then allowed
       to shrink into it — `flex: 0 1` keeps them square at their natural size
       wherever there is room, and only narrows them on a card too small to hold
       four squares and a 32px circle. Measured, that is below about 150px, which
       is a two column grid on a 320px phone. */
    .card--countdown .card__countdown {
      inset-inline-end: calc(0.5rem + var(--card-countdown-size) + 0.5rem);
    }

    .card--countdown .card__countdown .countdown__unit {
      flex: 0 1 var(--card-countdown-size);
    }

    /* Aligned to the timer, not to its own corner. Both sit 0.5rem off the edge and share a baseline, so the circle reads as the last item in the row rather than as a separate thing that happens to be nearby. */
    .card__quick-add {
      inset: auto 0.5rem 0.5rem auto;
      /* Always visible. The hover reveal used on desktop has no equivalent on a
         touch screen, so the control would simply never appear. */
      opacity: 1;
      transform: none;
    }

    .card__quick-add-icon {
      display: inline-flex;
    }

    .card__quick-add-label {
      display: none;
    }

    /* The icon alone, with nothing behind it. A chip is a second shape sitting on the photograph, and on a card the photograph is the product. */
    /* 32px, still past the 24px minimum target size, and small enough to read as a mark on the image rather than a control competing with the product. */
    /* The tile's size, so the circle and the timer are the same height on the
       line they share. One token moves both. */
    .card__quick-add-button {
      width: var(--card-countdown-size, 2rem);
      min-width: 0;
      height: var(--card-countdown-size, 2rem);
      /* `.button` sets a min-height for comfortable text targets; without
         releasing it the circle comes out 36 wide and 44 tall. */
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgb(var(--color-background));
      color: rgb(var(--color-foreground));
      box-shadow: 0 2px 10px -4px rgba(var(--color-shadow), 0.45);
    }

    .card__quick-add-button:hover,
    .card__quick-add-button:focus-visible {
      background: rgb(var(--color-foreground));
      color: rgb(var(--color-background));
    }
  }

  /* --- Mobile size sheet (built by theme.js, appended to <body>) --- */
  /* Hydrogen mobile pattern: the bag button opens this bottom sheet to pick a
     size. Only ever built on touch/small screens; hidden outright above 750px so
     a stray one can never cover a desktop layout. */
  .card-sheet {
    position: fixed;
    inset: 0;
    z-index: 100;
  }
  @media screen and (min-width: 750px) {
    .card-sheet { display: none; }
  }
  .card-sheet__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: rgba(var(--color-shadow, 42 37 31), 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
  }
  .card-sheet.is-open .card-sheet__backdrop { opacity: 1; }
  .card-sheet__panel {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.1rem 1.25rem 1.75rem;
    background: rgb(var(--color-background));
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }
  .card-sheet.is-open .card-sheet__panel { transform: translateY(0); }
  .card-sheet__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.5rem;
    margin-block-end: 0.9rem;
  }
  .card-sheet__title {
    margin: 0;
    font-family: var(--font-heading--family), serif;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground));
  }
  .card-sheet__sub {
    grid-column: 1 / -1;
    margin: 0.25rem 0 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.6);
  }
  .card-sheet__close {
    border: 0;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    color: rgb(var(--color-foreground));
    cursor: pointer;
  }
  /* Sizes share the row, slim buttons — the primary control here. A grid rather
     than wrapping flex, so no single option ever stretches to full width: the
     cells fill the row evenly and wrap to a second even row past what fits. */
  .card-sheet__cells .card__sizes-cells {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr));
    gap: 0.45rem;
  }
  .card-sheet__cells .card__size-form {
    flex: none;
    width: auto;
    min-width: 0;
  }
  .card-sheet__cells .card__size {
    min-height: 2.2rem;
    padding-block: 0.35rem;
    font-size: var(--font-size-xs);
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-gallery (INDEX:193) */
.gallery {
    display: grid;
    gap: 0.75rem;
  }

  .gallery__stage {
    position: relative;
    min-width: 0;
  }

  /* Inside the photograph, not hanging off it.

     The shared arrows sit at -0.75rem, which works in a row that has page
     gutter either side of it. The gallery does not: the stage runs to the edge
     of its column, so half of each arrow fell outside and was clipped —
     measured, two half-circles against the frame. Over the image is the only
     place they can go here, and the plate they already carry is what keeps them
     legible against an arbitrary photograph. */
  /* The shared arrows show only on pointer devices from 750px up, which is the
     right default for a row of cards: a phone has a swipe, and arrows over
     small cards are clutter. The gallery is the exception. It is the largest
     image on the page and the only one where a shopper is looking for the next
     photograph rather than browsing sideways, and the counter alone ("3 / 17")
     tells them more exists without offering a way to reach it that does not
     involve guessing at a gesture. */
  .gallery__stage .scroll-arrow:not([hidden]) {
    display: grid;
  }

  .gallery__stage .scroll-arrow--prev {
    inset-inline-start: 0.75rem;
  }

  .gallery__stage .scroll-arrow--next {
    inset-inline-end: 0.75rem;
  }

  /* Top right, over the photograph. */
  .gallery__zoom {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 10px -4px rgba(var(--color-shadow), 0.5);
    cursor: zoom-in;
  }

  .gallery__zoom:hover {
    border-color: rgba(var(--color-foreground), 0.35);
  }

  .gallery__zoom svg {
    width: 1rem;
    height: 1rem;
  }

  /* Wishlist heart — same circular plate as the zoom. Mobile: top-left (the
     zoom keeps top-right). Desktop swaps them below, matching Hydrogen. */
  .gallery__wish {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 10px -4px rgba(var(--color-shadow), 0.5);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .gallery__wish:hover {
    transform: scale(1.08);
    border-color: rgba(var(--color-foreground), 0.35);
  }

  .gallery__wish svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
  }

  /* Pressed = wished: filled heart in the brand rose. `--color-accent` resolves
     to the foreground in the gallery's colour scheme (it is only rose in the
     price block's scheme), so the Fashorio rose is set literally here — the same
     fixed value the Hydrogen storefront uses for its wished heart (#c04a63). */
  .gallery__wish[aria-pressed='true'] {
    color: #c04a63;
  }

  .gallery__wish[aria-pressed='true'] svg {
    fill: currentColor;
  }

  .gallery__wish:focus-visible {
    outline: 2px solid #c04a63;
    outline-offset: 2px;
  }

  /* Share — bottom-right, same circular plate as the zoom/heart. */
  .gallery__share {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 10px -4px rgba(var(--color-shadow), 0.5);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .gallery__share:hover {
    transform: scale(1.08);
    border-color: rgba(var(--color-foreground), 0.35);
  }

  .gallery__share svg {
    width: 1rem;
    height: 1rem;
  }

  .gallery__share:focus-visible {
    outline: 2px solid #c04a63;
    outline-offset: 2px;
  }

  /* "Link copied" acknowledgement, floating just left of the button. */
  .gallery__share-toast {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: calc(100% + 0.5rem);
    padding: 0.25rem 0.5rem;
    border-radius: 2rem;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: var(--font-size-xs);
    white-space: nowrap;
    pointer-events: none;
  }

  /* Desktop parity: heart top-right, zoom top-left — clear of each other and of
     the two-column thumbnail rail. Kicks in with the rail at 990px. */
  @media screen and (min-width: 990px) {
    .gallery__wish {
      inset-inline-start: auto;
      inset-inline-end: 0.75rem;
    }

    .gallery__zoom {
      inset-inline-start: 0.75rem;
      inset-inline-end: auto;
    }
  }

  /* Video sits in the same box as a photograph, so the arrangement does not
     have to know which it is holding. */
  .gallery__video {
    background: rgb(var(--color-foreground));
  }

  .gallery__facade {
    position: relative;
    display: block;
  }

  .gallery__frame {
    display: block;
    width: 100%;
    aspect-ratio: var(--media-ratio, 4 / 5);
    border: 0;
    border-radius: var(--style-border-radius-cards, 0);
  }

  /* Centred and large, unlike the zoom control in the corner: this is the thing a shopper is looking for on a still that is really a film, and it has to read as one from across the page. */
  .gallery__play {
    position: absolute;
    inset-block-start: calc(50% - 1.75rem);
    inset-inline-start: calc(50% - 1.75rem);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 14px -4px rgba(var(--color-shadow), 0.55);
    cursor: pointer;
  }

  .gallery__play:hover {
    border-color: rgba(var(--color-foreground), 0.35);
  }

  .gallery__play svg {
    width: 1.375rem;
    height: 1.375rem;
    /* The triangle's own weight sits it left of centre in a circle. */
    margin-inline-start: 0.125rem;
  }

  /* One rail, scrolled. Not a stack of absolutely positioned images with one visible: that costs the swipe, costs the no-script path, and gives the browser no reason to decode the next photograph before it is needed. */
  .gallery__rail {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--style-border-radius-cards, 0);
  }

  .gallery__rail::-webkit-scrollbar {
    display: none;
  }

  .gallery__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* Phone parity with Hydrogen: the main image is 82% of the column, so a sliver
     of the next photograph shows on the right — the cue that says "swipe for
     more". Snap still lands each slide on the left edge. Full width again from
     the tablet up, where the thumbnail rail returns. */
  @media screen and (max-width: 749px) {
    .gallery__slide {
      flex-basis: 82%;
    }

    /* No gap around the images on a phone. The gallery breaks out of the page
       gutter to sit edge-to-edge (the classic 50% − 50vw pull, so it works
       whatever the theme's gutter is), and the slides sit flush with no rail
       gap between them. */
    .product__media {
      width: 100vw;
      max-width: 100vw;
      margin-inline: calc(50% - 50vw);
    }

    .gallery__rail {
      gap: 0;
    }

    /* On a phone the heart lives beside the product title (Hydrogen parity), not
       over the image. */
    .gallery__wish {
      display: none;
    }
  }

  /* Two across only when the column is genuinely wide enough for two. */
  @media screen and (min-width: 1280px) {
    .gallery--slider_two .gallery__slide {
      flex-basis: calc(50% - 0.25rem);
    }
  }

  .gallery__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--media-ratio, 4 / 5);
    object-fit: cover;
    border-radius: var(--style-border-radius-cards, 0);
  }

  /* --- Stacks --- No rail, no arrows, no counter: every photograph is on the page and the scroll is the control. */

  .gallery__grid {
    display: grid;
    gap: 0.5rem;
  }

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

  /* The lead shot spans both columns, which is what makes the arrangement read
     as one photograph with details beneath rather than an odd row out. */
  .gallery--stack_mixed .gallery__tile:first-child {
    grid-column: 1 / -1;
  }

  /* One at a time on a phone in every stacked arrangement. Two 190px-wide
     photographs of a garment show nothing either of them was taken for. */
  @media screen and (max-width: 749px) {
    .gallery--stack_two .gallery__grid,
    .gallery--stack_mixed .gallery__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .gallery__tile[hidden],
  .gallery__slide[hidden] {
    display: none;
  }

  /* Counter pill retired for Hydrogen parity: the Hydrogen gallery has no "n / N"
     pill — the dots carry position on a phone and the thumbnail rail carries it
     on desktop, and the bottom-right corner belongs to Share. Kept in the markup
     (still updated by script, still read by assistive tech via the rail) but not
     drawn. */
  .gallery__counter {
    display: none;
  }

  /* --- Progress dots (mobile) --- */

  /* Bottom-centre, over the photograph, on a translucent plate — the Hydrogen
     phone treatment. Non-interactive: the swipe is the control, the dots are
     the read-out. `pointer-events: none` so a tap near the bottom edge still
     reaches the image, not a dot. */
  .gallery__dots {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    width: max-content;
    max-width: 80%;
    margin-inline: auto;
    padding: 0.25rem 0.5rem;
    border-radius: 2rem;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
  }

  .gallery__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.55;
    transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  }

  .gallery__dot[data-active='true'] {
    width: 6px;
    height: 6px;
    opacity: 1;
  }

  /* The window's outermost dots, shrunk to hint that more photographs continue
     past the visible strip (set by the gallery script for large galleries). */
  .gallery__dot[data-edge] {
    width: 2px;
    height: 2px;
    opacity: 0.4;
  }

  .gallery__dot[hidden] {
    display: none;
  }

  /* One control at a time: dots on the phone, the counter pill (and the
     thumbnail rail) from 990px up. */
  .gallery__dots {
    display: flex;
  }

  @media (prefers-reduced-motion: reduce) {
    .gallery__dot {
      transition: none;
    }
  }

  @media screen and (min-width: 990px) {
    .gallery__dots {
      display: none;
    }
  }

  @media screen and (max-width: 989px) {
    /* Hydrogen phone parity: the swipe plus the dots are the whole control.
       No overlaid arrows and no thumbnail strip under the image — those are the
       desktop affordances. Same-specificity selector as the show rule above,
       later in source, so it wins without !important. */
    .gallery__stage .scroll-arrow:not([hidden]) {
      display: none;
    }

    .gallery__thumbs-wrap {
      display: none;
    }
  }

  /* --- Thumbnails --- */

  /* Holds the rail and its arrows. Static underneath the photograph, where the
     rail is as tall as one thumbnail and there is nothing to cap. */
  .gallery__thumbs-wrap {
    position: relative;
    min-width: 0;
  }

  .gallery__thumbs {
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  /* Follows the pointer's own reading of the page rather than a preference this theme invents. A rail that animates for someone who has asked things not to is the kind of detail the accessibility review looks for. */
  @media (prefers-reduced-motion: reduce) {
    .gallery__thumbs {
      scroll-behavior: auto;
    }
  }

  .gallery__thumbs::-webkit-scrollbar {
    display: none;
  }

  /* Drawn inside, not around. */
  .gallery__thumb {
    display: block;
    flex: 0 0 auto;
    width: 4.5rem;
    overflow: hidden;
    border-radius: var(--style-border-radius-cards, 0);
    /* A real border, not an inset shadow and not an outline. An inset shadow
       is painted on the element's own box and the photograph is painted after
       it, so the ring ended up underneath the image and never appeared — the
       reason this used to dim the unselected ones instead. An outline would be
       clipped at the ends of a rail that scrolls sideways. A border sits
       outside the content box, where the image cannot reach it.

       It is here rather than only on the selection, in the page colour, so
       every thumbnail reserves the same 2px and nothing shifts when the
       selection moves. */
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
  }

  /* A ring rather than the dimming this used to do. Every photograph is shown
     at full strength — a shopper scanning the strip is comparing the pictures,
     and half of them held at 50% is a strip that all looks faded. */
  .gallery__thumb:hover {
    border-color: rgba(var(--color-foreground), 0.2);
  }

  .gallery__thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .gallery__thumb[aria-current='true'],
  .gallery__thumb[aria-current='true']:hover {
    border-color: rgba(var(--color-foreground), 0.45);
  }

  /* Keyboard focus has to stay visible on top of all this, and it cannot be the same mark as the selection or the two become indistinguishable while tabbing. */
  .gallery__thumb:focus-visible {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: -2px;
  }

  /* The mark itself stays; only the easing between marks goes. Someone who has
     asked for less motion still needs to know which photograph is showing. */
  @media (prefers-reduced-motion: reduce) {
    .gallery__thumb {
      transition: none;
    }
  }

  .gallery__thumb[hidden] {
    display: none;
  }

  /* Beside the photograph, once there is room. Below that width a column of thumbnails would take from the largest image on the page to show smaller copies of it, so they go back underneath. */
  @media screen and (min-width: 990px) {
    /* `stretch`, not `start`. Stretch is what gives the thumbnail wrapper the row's height to be absolute inside; with `start` it shrinks to its own content and the cap has nothing to bite on. The photograph is unaffected either way — it is the taller of the two and sets the row. */
    .gallery--thumbs-left,
    .gallery--thumbs-right {
      grid-template-columns: 4.5rem minmax(0, 1fr);
      align-items: stretch;
    }

    /* Match the Hydrogen storefront: the LEFT rail is a two-column grid of
       thumbnails, so the column is wider (two thumbs + the gap). Right/bottom
       keep the single 4.5rem rail. */
    .gallery--thumbs-left {
      grid-template-columns: 9.5rem minmax(0, 1fr);
    }

    .gallery--thumbs-left .gallery__stage { order: 2; }
    .gallery--thumbs-left .gallery__thumbs-wrap { order: 1; }

    /* Right is the same grid with the columns swapped, rather than a second set of rules: one column is 4.5rem and the other takes what is left, whichever side each ends up on. */
    .gallery--thumbs-right {
      grid-template-columns: minmax(0, 1fr) 4.5rem;
    }

    .gallery--thumbs-right .gallery__stage { order: 1; }
    .gallery--thumbs-right .gallery__thumbs-wrap { order: 2; }

    .gallery--thumbs-left .gallery__thumbs,
    .gallery--thumbs-right .gallery__thumbs {
      position: absolute;
      inset: 0;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
    }

    /* Left rail = two-column grid of thumbnails (Hydrogen parity). */
    .gallery--thumbs-left .gallery__thumbs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: min-content;
      align-content: start;
      gap: 0.5rem;
    }

    .gallery--thumbs-left .gallery__thumb {
      width: 100%;
    }
  }

  /* --- Lightbox ------------------------------------------------------------ The photograph, larger. Sized and pinned itself rather than centred, so `margin` is reset: the browser's own stylesheet centres a dialog with `margin: auto`. */

  /* The photograph is not a control any more. */
  .gallery__tile {
    position: relative;
  }

  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    overflow: hidden;
  }

  .lightbox::backdrop {
    background: rgba(var(--color-shadow), 0.9);
  }

  /* Opened from the closed state with `@starting-style`, so it fades in without script toggling a class. `display` and `overlay` transition discretely, which keeps it in the top layer for the whole exit rather than vanishing on the first frame and animating where nobody can see it. */
  .lightbox {
    opacity: 0;
    transition:
      opacity var(--duration-fast) var(--ease-out),
      display var(--duration-fast) allow-discrete,
      overlay var(--duration-fast) allow-discrete;
  }

  .lightbox[open] { opacity: 1; }

  @starting-style {
    .lightbox[open] { opacity: 0; }
  }

  /* Column layout so the thumbnail strip sits below the image instead of over
     it, and a dark ground like the Hydrogen viewer. The flex layout is applied
     only when the dialog is open — a bare `display: flex` overrides the UA's
     `dialog:not([open]) { display: none }`, leaving the CLOSED lightbox painted
     over the gallery and swallowing every swipe and tap. */
  .lightbox[open] {
    display: flex;
    flex-direction: column;
  }

  .lightbox {
    background: rgba(42, 37, 31, 0.97);
    color: #f6f1e9;
  }

  .lightbox::backdrop {
    background: rgba(42, 37, 31, 0.97);
  }

  .lightbox__rail {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .lightbox__rail::-webkit-scrollbar { display: none; }

  .lightbox__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    place-items: center;
    padding: 3.5rem 1rem;
  }

  .lightbox__slide[hidden] { display: none; }

  /* Contained, not cropped. The gallery crops to a common ratio so a column of
     photographs lines up; here the whole photograph is the point.

     Bounded in viewport units, not percentages. A percentage max-height
     resolves against the grid area, which is itself sized by its content — so
     the image sized itself and the limit had nothing fixed to measure against.
     Measured: a 1458px-tall image inside a 1000px slide, overflowing both ends.
     `svh` is a number the image cannot influence. */
  .lightbox__image {
    max-width: 100%;
    max-height: calc(100svh - 7rem);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Light controls on the dark ground. */
  .lightbox__close {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 2.5rem;
    min-width: 0;
    height: 2.5rem;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(42, 37, 31, 0.55);
    color: #f6f1e9;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  }

  .lightbox__close:hover {
    background: rgba(42, 37, 31, 0.75);
    color: #fff;
  }

  .lightbox__close svg { width: 1.125rem; height: 1.125rem; }

  /* White circular arrows, over the image, mid-height — the Hydrogen viewer's
     controls. Shown on touch too (Hydrogen keeps them on the phone). */
  .lightbox__arrow {
    position: absolute;
    inset-block-start: calc(50% - 1.375rem);
    z-index: 4;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #2a251f;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }

  .lightbox__arrow:hover {
    background: #fff;
    color: #2a251f;
  }

  .lightbox__arrow svg { width: 1rem; height: 1rem; }

  /* One chevron asset, turned, and mirrored again under right-to-left. */
  .lightbox__arrow--prev { inset-inline-start: 0.75rem; }
  .lightbox__arrow--prev svg { transform: rotate(180deg); }
  .lightbox__arrow--next { inset-inline-end: 0.75rem; }

  [dir='rtl'] .lightbox__arrow--prev svg { transform: none; }
  [dir='rtl'] .lightbox__arrow--next svg { transform: rotate(180deg); }

  /* Smaller on a phone, but still there. */
  @media screen and (max-width: 749px) {
    .lightbox__arrow {
      width: 2.25rem;
      height: 2.25rem;
      inset-block-start: calc(50% - 1.125rem);
    }
  }

  /* Counter retired in the viewer — the thumbnail strip carries position, as in
     Hydrogen. Kept in the markup and updated by script for assistive tech. */
  .lightbox__counter {
    display: none;
  }

  /* --- Lightbox thumbnail strip (Hydrogen parity) --- */
  .lightbox__thumbs {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.625rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    scrollbar-width: none;
  }

  .lightbox__thumbs::-webkit-scrollbar { display: none; }

  .lightbox__thumb {
    flex: 0 0 auto;
    width: 3.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 0.5;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: opacity 0.2s ease, outline-color 0.2s ease;
  }

  .lightbox__thumb:hover { opacity: 1; }

  .lightbox__thumb[aria-current='true'] {
    opacity: 1;
    outline-color: #f6f1e9;
  }

  .lightbox__thumb:focus-visible {
    outline-color: #f6f1e9;
  }

  .lightbox__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  /* Phone lightbox — matches the Hydrogen viewer: the image runs full width at
     the top, and the thumbnails are large, flush to the screen bottom, with no
     dark plate or gaps. A partial thumb at the edge hints the strip scrolls. */
  @media screen and (max-width: 749px) {
    /* Image flush to the top, full width — no dark strip above it. The close
       button overlays the top-right corner (Hydrogen does the same). */
    .lightbox__slide {
      place-items: start center;
      padding: 0;
    }

    /* The image area shrinks to the photograph's own height; the thumbnail strip
       then grows to fill whatever is left, so there is no dark band between the
       two — the Hydrogen phone layout. */
    .lightbox__rail {
      flex: 0 0 auto;
    }

    .lightbox__image {
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: 82svh;
      object-fit: contain;
      object-position: top center;
    }

    /* Thumbnails fill the remaining height, flush and gapless, auto-sized. */
    .lightbox__thumbs {
      flex: 1 1 auto;
      height: auto;
      min-height: 0;
      padding: 0;
      gap: 0;
      background: transparent;
      align-items: stretch;
      justify-content: flex-start;
    }

    .lightbox__thumb {
      width: auto;
      height: 100%;
    }

    .lightbox__thumb img {
      width: auto;
      height: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .lightbox { transition: none; }
  }
/* END_SNIPPET:product-gallery */

/* START_SNIPPET:product-grid (INDEX:194) */
/* One gap, both directions, every width. */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns-mobile, 2), minmax(0, 1fr));
    gap: var(--spacing-grid);
  }

  .product-grid__item {
    min-width: 0;
  }

  /* Editorial rhythm: two, two, one, repeating. */
  @media screen and (max-width: 749px) {
    .product-grid__item--wide {
      grid-column: 1 / -1;
    }
  }

  /* A swipe row is one row by definition; promoting a card there would make it wider than its neighbours in a horizontal scroller, which reads as a mistake rather than as emphasis. */
  .product-grid--swipe .product-grid__item--wide {
    grid-column: auto;
  }

  /* Capped at three between tablet and desktop. A merchant asking for five columns means five on a wide screen; five on an iPad is a row of thumbnails with unreadable prices. */
  @media screen and (min-width: 750px) {
    .product-grid {
      grid-template-columns: repeat(min(var(--columns-desktop, 4), 3), minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 990px) {
    .product-grid {
      grid-template-columns: repeat(var(--columns-desktop, 4), minmax(0, 1fr));
    }
  }

  /* --- Desktop slider --- The same scroll-snap container as the phone row, at desktop widths. It stays inside the content column rather than bleeding to the viewport edges: on a phone the row running off the screen is the point, but on a desktop it would break the alignment the whole page reads down, and there is no swipe gesture to reward it. Paging happens through the segments below. */
  @media screen and (min-width: 750px) {
    .product-grid--slider {
      display: flex;
      /* Both axes stated. Setting `overflow-x: auto` on its own makes the other
         axis compute to `auto` as well, so the row quietly became scrollable
         vertically too: measured 347px of content in a 331px box, which showed
         as a stray 16px vertical scroll inside the products.

         The padding and the matching negative margin give the panel card's hover
         lift somewhere to go. Clipping without them would shave the top off every
         card the moment it was hovered. */
      overflow-x: auto;
      overflow-y: hidden;
      padding-block: 0.5rem;
      margin-block: -0.5rem;
      scroll-snap-type: x mandatory;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
      gap: var(--spacing-grid);
    }

    .product-grid--slider::-webkit-scrollbar {
      display: none;
    }

    /* Capped at three below 990px for the same reason the grid is. */
    .product-grid--slider .product-grid__item {
      flex: 0 0 calc(
        (100% - var(--spacing-grid) * (min(var(--columns-desktop, 4), 3) - 1)) /
          min(var(--columns-desktop, 4), 3)
      );
      scroll-snap-align: start;
    }
  }

  @media screen and (min-width: 990px) {
    .product-grid--slider .product-grid__item {
      flex: 0 0 calc(
        (100% - var(--spacing-grid) * (var(--columns-desktop, 4) - 1)) / var(--columns-desktop, 4)
      );
    }
  }

  /* --- Slider arrows --- */

  .product-grid-wrap {
    position: relative;
  }

  .product-grid__arrow {
    position: absolute;
    inset-block-start: 40%;
    z-index: 2;
    display: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--arrow-border);
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 4px 16px -8px rgba(var(--color-shadow), 0.4);
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--duration-fast) var(--ease-out),
      color var(--duration-fast) var(--ease-out),
      opacity var(--duration-fast) var(--ease-out);
  }

  /* Aligned with the images rather than the whole card: the titles and prices below vary in height, so centring on the card would leave the arrows drifting up and down between sections. 40% is the middle of the media. */
  .product-grid__arrow:hover {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  /* Inert at the ends, not removed — a control that disappears shifts the row
     and leaves the visitor unsure what they did. */
  .product-grid__arrow[disabled] {
    opacity: 0.3;
    cursor: default;
  }

  .product-grid__arrow[disabled]:hover {
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
  }

  .product-grid__arrow svg {
    width: 1.0625rem;
    height: 1.0625rem;
  }

  /* One chevron asset turned each way, mirrored under RTL, as everywhere else. */
  .product-grid__arrow--prev {
    inset-inline-start: 0;
    transform: translate(-50%, -50%);
  }

  .product-grid__arrow--prev svg {
    transform: rotate(180deg);
  }

  .product-grid__arrow--next {
    inset-inline-end: 0;
    transform: translate(50%, -50%);
  }

  [dir='rtl'] .product-grid__arrow--prev svg {
    transform: none;
  }

  [dir='rtl'] .product-grid__arrow--next svg {
    transform: rotate(180deg);
  }

  /* Pointers only. A phone swipes the row, and two controls floating over the
     products would cost more than the gesture they replace. */
  @media screen and (min-width: 750px) {
    .product-grid-wrap--slider .product-grid__arrow {
      display: grid;
    }

    /* `hidden` is only a `display: none` in the UA stylesheet, which a media query rule outranks, so it has to be restated to win. theme.js sets it when the row has nothing to page through. */
    .product-grid-wrap--slider .product-grid__arrow[hidden] {
      display: none;
    }
  }

  /* Below 1100px the page gutter is too slim to hold a 40px circle outside the
     row, so they move just inside its edge instead of hanging off the screen. */
  @media screen and (min-width: 750px) and (max-width: 1099px) {
    .product-grid__arrow--prev {
      transform: translate(0, -50%);
    }

    .product-grid__arrow--next {
      transform: translate(0, -50%);
    }
  }

  /* --- Scroll dots --- */

  /* Hidden until theme.js has measured the row and decided there is more than
     one screenful. `hidden` is removed by the script, so a row that fits gets no
     indicator rather than a single lonely dot. */
  /* Segments, not circles, and that shape is what makes them clickable. */
  .scroll-dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
  }

  .scroll-dots[hidden] {
    display: none;
  }

  /* Shown at any width. Whether there is anything to page through is a question of measurement, and theme.js answers it by setting `hidden`, so the desktop slider gets the same indicator without a second rule here. */
  .scroll-dots:not([hidden]) {
    display: flex;
  }

  /* 24px of target around an 6px mark: the dot is an indicator first and a
     control second, but it still has to be tappable. */
  .scroll-dots__dot {
    width: 1.5rem;
    height: 0.125rem;
    padding: 0;
    border: 0;
    border-radius: 1px;
    background: rgba(var(--color-foreground), 0.22);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .scroll-dots__dot:hover {
    background: rgba(var(--color-foreground), 0.45);
  }

  .scroll-dots__dot[aria-current='true'] {
    background: rgb(var(--color-foreground));
  }

  /* --- Phone gutter --- On phones the row's side gutter follows the card spacing rather than the page margin, so tightening the spacing gives each card width instead of just pulling the cards closer to each other. On a 390px screen, dropping the spacing from 20 to 8 is 24px back into the cards, which is most of a size label. */
  @media screen and (max-width: 749px) {
    .product-grid {
      /* The grid used to break the shared gutter here, so products got a little more width on a phone while the heading above them stayed on the page margin. It was a deliberate trade and it cost more than it bought: a section whose cards start eight pixels left of every other section on the site reads as misaligned, not as generous — which is exactly how it was reported. */
      --grid-gutter: var(--page-margin);
    }
  }

  /* --- Swipe row, phones only --- */
  @media screen and (max-width: 749px) {
    .product-grid--swipe {
      display: flex;
      /* Both axes stated. Setting `overflow-x: auto` on its own makes the other
         axis compute to `auto` as well, so the row quietly became scrollable
         vertically too: measured 347px of content in a 331px box, which showed
         as a stray 16px vertical scroll inside the products.

         The padding and the matching negative margin give the panel card's hover
         lift somewhere to go. Clipping without them would shave the top off every
         card the moment it was hovered. */
      overflow-x: auto;
      overflow-y: hidden;
      padding-block: 0.5rem;
      margin-block: -0.5rem;
      scroll-snap-type: x mandatory;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
      /* Pulled out to the viewport edges and padded back in, so the first card lines up with the gutter above while the row itself runs off both sides. */
      /* Out by the page margin, back in by the page margin.
       *
       * The padding used to be `--grid-gutter`, which is
       * `min(--page-margin, --spacing-grid)` — so on any store whose grid
       * spacing is tighter than its page margin the two did not cancel and the
       * first card sat inside the gutter every other section uses. Measured on
       * a 360px phone: recommendation cards at 8px against a page margin of 16,
       * so "You may also like" started half a gutter left of the product title
       * above it.
       *
       * The gap between cards is a separate decision and stays on `gap`. */
      margin-inline: calc(-1 * var(--page-margin));
      padding-inline: var(--page-margin);
    scroll-padding-inline-start: var(--page-margin);
      /* Scroll padding, not just padding. A snap container aligns an item's
         start edge to its own start edge, which is outside the padding, so the
         browser scrolls the padding away and the first card ends up hard against
         the viewport edge while the heading above it sits on the page margin.
         Measured: padding-inline 16px, and scrollLeft 16px cancelling it.
         This moves the snap position inwards to match. */
      scroll-padding-inline: var(--page-margin);
      gap: var(--spacing-grid);
    }

    .product-grid--swipe::-webkit-scrollbar {
      display: none;
    }

    /* Exactly the requested number of cards per screen, with no sliver of the next one showing. */
    .product-grid--swipe .product-grid__item {
      flex: 0 0 calc(
        (100% - var(--spacing-grid) * (var(--columns-mobile, 2) - 1)) / var(--columns-mobile, 2)
      );
      scroll-snap-align: start;
    }
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-rating (INDEX:195) */
.rating {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-size-sm);
  }

  /* One string of stars, filled from the left by a gradient the text is clipped
     to. Half a star is a real position rather than a rounded one. */
  .rating__stars {
    background: linear-gradient(
      to right,
      rgb(var(--color-foreground)) var(--rating, 0%),
      rgba(var(--color-foreground), 0.25) var(--rating, 0%)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.05em;
  }

  .rating__score {
    font-weight: var(--font-body--weight-bold);
  }

  .rating__count {
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_SNIPPET:product-rating */

/* START_SNIPPET:product-sticky-bar (INDEX:196) */
/* Off screen rather than hidden, so it slides rather than appears. `hidden` is still on the element until script decides otherwise — that is what keeps it out of the way for the visitor whose browser never runs the script that would reveal it, while the rule below restores it for everyone else. */
  .sticky-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: 40;
    border-block-end: 1px solid rgb(var(--color-border));
    background: rgba(var(--color-background), 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    translate: 0 -100%;
    transition: translate var(--duration-base, 200ms) var(--ease-out, ease);
  }

  /* Mobile only, like the Hydrogen storefront — on desktop the sticky column
     keeps the buy button in view, so a bar would be redundant. */
  @media screen and (min-width: 750px) {
    .sticky-bar { display: none !important; }
  }

  /* `[hidden]` is a rule in the browser's own stylesheet and any author `display` beats it, so the attribute is honoured explicitly rather than trusted. Without this the bar would sit at the foot of the page from the first paint. */
  .sticky-bar[hidden] {
    display: none;
  }

  .sticky-bar[data-shown] {
    translate: 0 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .sticky-bar {
      transition: none;
    }
  }

  .sticky-bar__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: min(var(--page-width), calc(100% - var(--page-margin) * 2));
    margin-inline: auto;
    padding-block: 0.625rem;
  }

  .sticky-bar__image {
    flex: 0 0 auto;
    width: 2rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: var(--style-border-radius-media);
  }

  /* Takes the space that is left; the button keeps its own. */
  .sticky-bar__text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sticky-bar__title {
    margin: 0;
    overflow: hidden;
    font-size: var(--font-size-xs);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .sticky-bar__price {
    font-size: var(--font-size-xs);
  }

  .sticky-bar__add {
    flex: 0 0 auto;
    min-height: 2.4rem;
    padding-block: 0.25rem;
    padding-inline: 1.5rem;
  }

  .sticky-bar__notify {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding-inline: 1rem;
  }

  .sticky-bar__sold {
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Keep the thumbnail even on the smallest phones (Hydrogen parity); just
     tighten the button so the row still fits. */
  @media screen and (max-width: 479px) {
    .sticky-bar__add {
      padding-inline: 1rem;
    }
  }
/* END_SNIPPET:product-sticky-bar */

/* START_SNIPPET:promotion-tile (INDEX:198) */
.product-grid__item--promo {
    min-width: 0;
  }

  /* Two cells wide reads as an editorial break in the grid; one keeps the rows perfectly even. Both stay inside the row rather than spanning it, so the products either side keep their alignment. */
  @media screen and (min-width: 750px) {
    .product-grid__item--promo-wide {
      grid-column: span 2;
    }
  }

  /* The full row on a phone, whatever width was chosen for the desktop. */
  @media screen and (max-width: 749px) {
    .product-grid__item--promo {
      grid-column: 1 / -1;
    }

  }

  .promo-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 16rem;
    overflow: hidden;
    border-radius: var(--style-border-radius-cards, 0);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }

  .promo-tile__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-base) var(--ease-out);
  }

  .promo-tile:hover .promo-tile__image {
    transform: scale(1.03);
  }

  @media (prefers-reduced-motion: reduce) {
    .promo-tile__image,
    .promo-tile:hover .promo-tile__image {
      transition: none;
      transform: none;
    }
  }

  /* Between the photograph and the words, and stated as three layers. */
  .promo-tile__image {
    z-index: 0;
  }

  .promo-tile:has(.promo-tile__image)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, calc(var(--promo-overlay, 0.35) * 1.6)) 0%,
      rgba(0, 0, 0, var(--promo-overlay, 0.35)) 45%,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
  }

  .promo-tile__body {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: start;
    gap: 0.5rem;
    padding: 1.25rem;
  }

  .promo-tile__heading {
    font-family: var(--font-heading--family);
    font-size: calc(1.375rem * var(--type-scale));
    line-height: 1.2;
  }

  .promo-tile__text {
    font-size: var(--font-size-sm);
    opacity: 0.9;
  }

  /* Painted, not built. The anchor around it is the control; this is the part
     of it the eye reads as pressable. */
  .promo-tile__button {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding-inline: 1.125rem;
    margin-block-start: 0.25rem;
    border: 1px solid rgb(var(--color-button));
    border-radius: var(--style-border-radius-buttons);
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-label));
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: var(--transform-button);
  }

  .promo-tile:hover .promo-tile__button {
    background: transparent;
    color: rgb(var(--color-foreground));
  }

  /* On a phone the shape follows the width the merchant chose. */
  @media screen and (max-width: 749px) {
    .promo-tile {
      min-height: 0;
      aspect-ratio: 4 / 5;
    }

    .product-grid__item--promo-wide .promo-tile {
      aspect-ratio: 16 / 10;
    }
  }
/* END_SNIPPET:promotion-tile */

/* START_SNIPPET:quantity-input (INDEX:199) */
.quantity {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: var(--style-border-radius-inputs);
  }

  /* 40px, matching the buy button beside it so the two read as one row rather
     than a control and a taller control. */
  .quantity__button {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(var(--color-foreground));
    cursor: pointer;
  }

  .quantity__button:hover {
    color: rgb(var(--color-accent));
  }

  /* Inert rather than gone at the limits: a button that vanishes shifts the row
     and leaves the visitor wondering what they did. */
  .quantity__button[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .quantity__button svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .quantity__input {
    width: 2.25rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-size-sm);
    text-align: center;
    /* Digits keep the same width as the number changes, so the row does not
       twitch between 9 and 10. */
    font-variant-numeric: tabular-nums;
  }

  .quantity__input:focus-visible {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: -2px;
  }

  /* The browser's own spinners, removed in both engines. */
  .quantity__input::-webkit-outer-spin-button,
  .quantity__input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  .quantity__input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  /* --- In a cart line ------------------------------------------------------- Smaller than the one on a product page, because it is doing a smaller job. */
  .cart-item .quantity {
    --quantity-height: 1.875rem;
  }

  .cart-item .quantity__button {
    width: 1.625rem;
    height: var(--quantity-height);
  }

  .cart-item .quantity__button svg {
    width: 0.6875rem;
    height: 0.6875rem;
  }

  .cart-item .quantity__input {
    width: 1.75rem;
    height: var(--quantity-height);
    font-size: var(--font-size-xs);
  }
/* END_SNIPPET:quantity-input */

/* START_SNIPPET:quick-view-dialog (INDEX:200) */
/* --- Panel --- */

  .quick-view {
    /* The dialog is sized and pinned itself rather than centred, so `margin` is
       reset: the UA stylesheet centres a dialog with `margin: auto`. */
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inset-inline-start: auto;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(30rem, 100%);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
    overflow: hidden;
  }

  .quick-view::backdrop {
    background: rgba(var(--color-shadow), 0.4);
  }

  /* Opening is animated from the closed state with `@starting-style`, which is what makes a dialog animate in without a class being toggled by script. */
  .quick-view {
    translate: 100% 0;
    opacity: 0;
    transition:
      translate var(--duration-base) var(--ease-out),
      opacity var(--duration-fast) var(--ease-out),
      display var(--duration-base) allow-discrete,
      overlay var(--duration-base) allow-discrete;
  }

  .quick-view[open] {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .quick-view[open] {
      translate: 100% 0;
      opacity: 0;
    }
  }

  .quick-view::backdrop {
    opacity: 0;
    transition:
      opacity var(--duration-fast) var(--ease-out),
      display var(--duration-fast) allow-discrete,
      overlay var(--duration-fast) allow-discrete;
  }

  .quick-view[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    .quick-view[open]::backdrop {
      opacity: 0;
    }
  }

  /* Full screen on phones, rising from the bottom. Held at 88svh it left a
     strip of the collection showing above it, which reads as a card that
     failed to finish opening rather than as a deliberate sheet — and it spent
     that strip on the one thing a shopper in a quick view is not looking at.
     The gesture stays; only the height changes. */
  @media screen and (max-width: 749px) {
    .quick-view {
      inset-block: 0;
      inset-inline: 0;
      width: 100%;
      height: 100%;
      max-height: 100%;
      translate: 0 100%;
    }

    @starting-style {
      .quick-view[open] {
        translate: 0 100%;
      }
    }

    .quick-view[open] {
      translate: 0 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-view,
    .quick-view[open] {
      translate: none;
      transition:
        opacity var(--duration-fast) ease,
        display var(--duration-fast) allow-discrete,
        overlay var(--duration-fast) allow-discrete;
    }
  }

  /* A 36px circle, matching the gallery arrows it sits beside rather than the 44px square it was. It floats over the image, so it needs its own shape and a background of its own; without them the icon lands on whatever the photograph happens to be and disappears against a pale one. */
  .quick-view__close {
    position: absolute;
    z-index: 3;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    min-width: 0;
    height: 2.25rem;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--color-background), 0.92);
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 10px -4px rgba(var(--color-shadow), 0.45);
    -webkit-tap-highlight-color: transparent;
  }

  .quick-view__close:hover {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  .quick-view__close svg {
    width: 1rem;
    height: 1rem;
  }

  /* --- Stock --- */

  .quick-view__stock {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    /* Tight to the price above it, so the two read as one line of terms rather
       than as two separate facts. */
    margin: -0.375rem 0 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  /* A dot, not a coloured word: colour alone cannot carry the meaning, so the text says which state it is and the dot only reinforces it. */
  .quick-view__stock::before {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: currentColor;
  }

  .quick-view__stock[data-stock='in']::before {
    animation: stock-pulse 2.4s var(--ease-out) infinite;
  }

  @keyframes stock-pulse {
    0%,
    100% {
      box-shadow: 0 0 0 0 currentColor;
      opacity: 1;
    }

    50% {
      box-shadow: 0 0 0 3px rgba(var(--color-foreground), 0);
      opacity: 0.55;
    }
  }

  /* The line itself fades in when it changes, so a variant switch is visible
     without the text jumping. */
  .quick-view__stock:not([hidden]) {
    animation: stock-in var(--duration-fast) var(--ease-out) both;
  }

  @keyframes stock-in {
    from {
      opacity: 0;
      transform: translateY(2px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-view__stock[data-stock='in']::before,
    .quick-view__stock:not([hidden]) {
      animation: none;
    }
  }

  .quick-view__stock[data-stock='in'] {
    color: rgb(var(--color-success, 34, 120, 80));
  }

  .quick-view__stock[data-stock='low'] {
    color: rgb(var(--color-accent));
  }

  .quick-view__stock[data-stock='out'] {
    color: rgba(var(--color-foreground), 0.7);
  }

  .quick-view__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* --- Loading --- */

  .quick-view__loading {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
  }

  .quick-view__skeleton {
    background: rgba(var(--color-foreground), 0.07);
  }

  .quick-view__skeleton--media {
    aspect-ratio: 1 / 1;
  }

  .quick-view__skeleton--line {
    height: 1.25rem;
  }

  .quick-view__skeleton--short {
    width: 40%;
  }

  /* --- Content --- */

  /* `minmax(0, 1fr)`, not the implicit `1fr`.

     A grid item's automatic minimum size is its content, so a single track
     defined as `1fr` refuses to shrink below the widest thing inside it — here
     the thumbnail rail — and the column grows past the container instead. The
     padding is then still applied, but the children have already overflowed it,
     which is why the panel looked like it had lost its right padding.
     Measured: children 44px wider than the padded box. */
  .quick-view__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .quick-view__media,
  .quick-view__body {
    min-width: 0;
  }

  /* Repeated clicks on a control drag a selection across whatever is beside it, which is what tinted the image and the button labels. These are controls, not text, so there is nothing in them worth selecting. */
  .quick-view__arrow,
  .quick-view__thumb,
  .quantity__button {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Safari still shows a grey flash on tap without this. */
  .quick-view__arrow,
  .quick-view__thumb,
  .quantity__button,
  .variant-option__value {
    -webkit-tap-highlight-color: transparent;
  }

  /* The merchant's crop, set on the fetched content — see sections/quick-view.liquid. Portrait by default, which is what the product cards and the cart rows use, so a garment is cropped the same way everywhere in the theme. Square was hardcoded here and was the one place that disagreed. */
  .quick-view__image-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--qv-image-ratio, 3 / 4);
    background: rgba(var(--color-foreground), 0.05);
    border-radius: var(--style-border-radius-media);
  }

  .quick-view__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .quick-view__discount {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
  }

  .quick-view__thumbs {
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 0.625rem 0 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
  }

  .quick-view__thumbs::-webkit-scrollbar {
    display: none;
  }

  .quick-view__thumb {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--style-border-radius-media);
    background: none;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .quick-view__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .quick-view__thumb[aria-current='true'],
  .quick-view__thumb:hover {
    border-color: rgb(var(--color-foreground));
    opacity: 1;
  }

  .quick-view__body {
    display: grid;
    gap: 0.75rem;
  }

  .quick-view__vendor {
    margin: 0;
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: var(--transform-eyebrow);
    color: rgba(var(--color-foreground), 0.7);
  }

  .quick-view__titlerow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .quick-view__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-h4);
    line-height: 1.2;
  }

  /* Wishlist heart top-right of the title (Hydrogen parity). */
  .quick-view__wish {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgb(var(--color-border));
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
  }

  .quick-view__wish svg {
    width: 1rem;
    height: 1rem;
  }

  .quick-view__wish[aria-pressed='true'] {
    color: rgb(var(--color-accent));
    border-color: rgb(var(--color-accent));
  }

  .quick-view__wish[aria-pressed='true'] svg {
    fill: currentColor;
  }

  /* The form owns the spacing between its own parts. */
  .quick-view__form {
    display: grid;
    gap: 1.25rem;
  }

  /* No panel behind the options. The tint and border made a box inside a box — the dialog is already a surface, and a second one around the controls added weight without separating anything that was not already separated by space. */
  .quick-view__options {
    padding: 0;
    border: 0;
    background: none;
  }

  /* Quantity and buy on one line at every width, the same row the product page
     shows. The stepper holds its natural width — it already sets `flex: 0 0
     auto` on itself — and the button takes whatever is left, so a label longer
     than English wraps inside the button rather than pushing the stepper onto
     a second row. */
  .quick-view__buy {
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
  }

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

  .quick-view__image-frame {
    position: relative;
  }

  .quick-view__arrow {
    position: absolute;
    inset-block-start: 50%;
    z-index: 1;
    display: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--color-background), 0.9);
    color: rgb(var(--color-foreground));
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 2px 10px -4px rgba(var(--color-shadow), 0.45);
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .quick-view__arrow svg {
    width: 1rem;
    height: 1rem;
  }

  /* One chevron asset, turned, and mirrored under RTL — the same approach the
     slideshow and pagination use. */
  .quick-view__arrow--prev {
    inset-inline-start: 0.75rem;
  }

  .quick-view__arrow--prev svg {
    transform: rotate(180deg);
  }

  .quick-view__arrow--next {
    inset-inline-end: 0.75rem;
  }

  [dir='rtl'] .quick-view__arrow--prev svg {
    transform: none;
  }

  [dir='rtl'] .quick-view__arrow--next svg {
    transform: rotate(180deg);
  }

  /* Inert at the ends rather than removed, so the image does not shift sideways
     as the visitor reaches the first or last shot. */
  .quick-view__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .quick-view__counter {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 1;
    margin: 0;
    padding: 0.1875rem 0.5rem;
    border-radius: 1rem;
    background: rgba(var(--color-shadow), 0.55);
    color: #fff;
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }

  /* Pointers only. On a phone the rail sits directly under the image and an
     arrow would cover the photograph to save a gesture nobody needs. */
  @media screen and (min-width: 750px) {
    .quick-view__arrow {
      display: grid;
    }
  }

  /* 40px, matching the stepper beside it and the product page's own buy row. */
  .quick-view__submit {
    flex: 1 1 auto;
    width: auto;
    min-height: 2.5rem;
    padding-block: 0.375rem;
  }


  .quick-view__description {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.75);
  }

  .quick-view__details {
    justify-self: start;
  }

  /* Accent, not red. The theme ships no error colour, and inventing one would be a second accent on a panel that already has one — this is a refusal, not an alarm, and it is the only coloured text in the form. */
  .quick-view__error:empty {
    display: none;
  }

  .quick-view__error {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-accent));
  }

  /* The way out of a panel that cannot complete this purchase. */
  .quick-view__preorder {
    display: inline-block;
    margin-block-start: 0.5rem;
    font-size: var(--font-size-sm);
  }

  .quick-view__preorder[hidden] {
    display: none;
  }
/* END_SNIPPET:quick-view-dialog */

/* START_SNIPPET:scroll-arrows (INDEX:202) */
/* Over the row rather than beside it: this row sits in the page's own column
     and there is no gutter to put them in without pushing the items narrower. */
  .scroll-arrow {
    position: absolute;
    inset-block-start: calc(50% - 1.25rem);
    z-index: 2;
    display: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--arrow-border);
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 10px -4px rgba(var(--color-shadow), 0.5);
    cursor: pointer;
  }

  /* Pointer devices, and only from tablet width up. */
  @media (hover: hover) and (pointer: fine) and (min-width: 750px) {
    .scroll-arrow:not([hidden]) {
      display: grid;
    }
  }

  .scroll-arrow:hover {
    border-color: var(--arrow-border-hover);
  }

  .scroll-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .scroll-arrow svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .scroll-arrow--prev {
    inset-inline-start: -0.75rem;
    transform: rotate(180deg);
  }

  .scroll-arrow--next {
    inset-inline-end: -0.75rem;
  }

  [dir='rtl'] .scroll-arrow--prev {
    transform: none;
  }

  [dir='rtl'] .scroll-arrow--next {
    transform: rotate(180deg);
  }
/* END_SNIPPET:scroll-arrows */

/* START_SNIPPET:shipping-note (INDEX:204) */
.product__shipping-note {
    margin: -0.25rem 0 0;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Underlined rather than coloured. The line sits directly under the price, where an accent colour would compete with the saving badge beside it for the same glance. */
  .product__shipping-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
/* END_SNIPPET:shipping-note */

/* START_SNIPPET:shipping-returns (INDEX:205) */
.ship-returns {
    margin-block-start: -0.15rem;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: rgb(var(--color-foreground));
  }
  .ship-returns__u { text-decoration: underline; text-underline-offset: 2px; }
  .ship-returns__strong { font-weight: var(--font-body--weight-bold); }

  .ship-returns__loc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; }
  .ship-returns__detect,
  .ship-returns__zip-open,
  .ship-returns__returns,
  .ship-returns__info {
    padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  }
  .ship-returns__detect { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: var(--font-body--weight-bold); }
  .ship-returns__or { color: rgba(var(--color-foreground), 0.55); }
  .ship-returns__zip-open { color: inherit; }
  .ship-returns__zip-open:hover,
  .ship-returns__loc [data-ship-change]:hover { color: rgb(var(--color-foreground)); }
  .ship-returns__change { color: rgba(var(--color-foreground), 0.55); text-decoration: underline; text-underline-offset: 2px; }

  .ship-returns__row { display: flex; gap: 0.6rem; margin-block-start: 0.75rem; }
  .ship-returns__ship { min-width: 0; }
  .ship-returns__ship-line { display: flex; align-items: center; gap: 0.4rem; }
  .ship-returns__info { display: inline-flex; color: rgba(var(--color-foreground), 0.45); }
  .ship-returns__info:hover { color: rgb(var(--color-foreground)); }

  .ship-returns__pill {
    display: inline-flex; align-items: center;
    margin-block-start: 0.4rem;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--offer-accent, #b74e65) 12%, transparent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-body--weight-bold);
    color: var(--offer-accent, #b74e65);
  }

  .ship-returns__eta { display: flex; align-items: center; gap: 0.4rem; margin-block-start: 0.35rem; color: rgba(var(--color-foreground), 0.6); font-size: var(--font-size-xs); }

  .ship-returns__returns { display: inline-flex; align-items: center; gap: 0.6rem; margin-block-start: 0.75rem; }

  .ship-returns__icon { flex: 0 0 auto; }

  /* Shared modal (delivery / details / returns). */
  .sr-modal {
    margin: auto;
    width: min(34rem, calc(100vw - 2rem));
    max-height: 88svh;
    overflow-y: auto;
    padding: 1.25rem;
    border: 1px solid rgba(var(--color-border), 0.9);
    border-radius: var(--style-border-radius-cards, 0);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 30px 60px -30px rgba(var(--color-shadow), 0.6);
  }
  .sr-modal::backdrop { background: rgba(var(--color-shadow), 0.5); backdrop-filter: blur(2px); }
  .sr-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-end: 0.75rem; }
  .sr-modal__title { margin: 0; font-family: var(--font-heading--family); font-size: var(--font-size-md, 1rem); text-transform: uppercase; letter-spacing: 0.02em; }
  .sr-modal__x { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(var(--color-foreground), 0.7); cursor: pointer; }
  .sr-modal__x svg { width: 1rem; height: 1rem; }
  .sr-modal__text { margin: 0 0 0.75rem; font-size: var(--font-size-sm); color: rgba(var(--color-foreground), 0.7); }
  .sr-modal__input { width: 100%; min-height: 2.4rem; padding-block: 0.4rem; }
  .sr-modal__submit { margin-block-start: 0.75rem; min-height: 2.4rem; padding-block: 0.3rem; }

  .sr-modal__field { margin-block-end: 1rem; }
  .sr-modal__flabel { display: block; margin-block-end: 0.35rem; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--font-body--weight-bold); color: rgba(var(--color-foreground), 0.5); }
  .sr-modal__selectwrap { position: relative; display: inline-block; }
  .sr-modal__select { appearance: none; min-width: 12rem; padding: 0.5rem 2.25rem 0.5rem 0.75rem; border: 1px solid rgba(var(--color-foreground), 0.7); background: rgb(var(--color-background)); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-body--weight-bold); color: inherit; cursor: pointer; }
  .sr-modal__caret { position: absolute; inset-inline-end: 0.6rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
  .sr-modal__caret svg { width: 1rem; height: 1rem; }

  .sr-modal__detailrow { display: flex; gap: 0.6rem; }
  .sr-modal__item { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-body--weight-bold); }
  .sr-modal__muted { margin: 0.15rem 0 0; font-size: var(--font-size-sm); color: rgba(var(--color-foreground), 0.6); }
  .sr-modal__free { margin: 0.5rem 0 0; font-size: var(--font-size-sm); font-weight: var(--font-body--weight-bold); color: var(--offer-accent, #b74e65); }

  .sr-modal__notes { margin-block-start: 1rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--font-size-xs); line-height: 1.55; color: rgba(var(--color-foreground), 0.6); }
  .sr-modal__list { margin: 0; padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; font-size: var(--font-size-sm); line-height: 1.55; color: rgba(var(--color-foreground), 0.8); }
  .sr-modal__link { display: inline-block; margin-block-start: 1rem; font-size: var(--font-size-sm); font-weight: var(--font-body--weight-bold); color: rgb(var(--color-foreground)); text-decoration: underline; text-underline-offset: 2px; }
/* END_SNIPPET:shipping-returns */

/* START_SNIPPET:slideshow-controls (INDEX:207) */
/* The controls sit on the image, so they are always light rather than taking a colour from the page: the slide behind them is a photograph and the theme cannot know whether it is dark. A drop shadow does the work a background chip would otherwise do, keeping them legible over a pale image without putting a box on the design. */
  .slideshow__controls {
    position: absolute;
    z-index: 2;
    inset-block-end: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0;
    /* Follows the active slide's colour scheme, like its buttons and copy do. */
    color: rgb(var(--color-foreground));
    filter: drop-shadow(0 1px 3px rgba(var(--color-background), 0.55));
  }

  /* Aligned to the same margin as the copy above them, so the controls read as part of the layout rather than as an element floating over it. Logical properties, so they follow the text direction under RTL. */
  .slideshow__controls--start {
    inset-inline-start: var(--page-margin);
    inset-inline-end: auto;
  }

  .slideshow__controls--center {
    inset-inline: 0;
    justify-content: center;
  }

  .slideshow__controls--end {
    inset-inline-start: auto;
    inset-inline-end: var(--page-margin);
  }

  .slideshow__arrow svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  /* One chevron asset, turned to face each way. Logical rotation is not a thing
     for transforms, so RTL flips them below. */
  .slideshow__arrow--prev svg {
    transform: rotate(90deg);
  }

  .slideshow__arrow--next svg {
    transform: rotate(-90deg);
  }

  [dir='rtl'] .slideshow__arrow--prev svg {
    transform: rotate(-90deg);
  }

  [dir='rtl'] .slideshow__arrow--next svg {
    transform: rotate(90deg);
  }

  /* Negative gap. The dots need a 40px target each for touch, which leaves a lot of empty space between two 6px circles; pulling the buttons together tightens the visible row without shrinking anything anyone has to hit. */
  .slideshow__dots {
    display: flex;
    align-items: center;
    gap: 0;
    margin-inline: -0.375rem;
  }

  .slideshow__dot + .slideshow__dot {
    margin-inline-start: -0.75rem;
  }

  /* 40px of hit area around a 24px icon. The visible dot is small on purpose, the target is not: an 11px circle would fail the minimum target size and be unusable with a thumb. */
  .slideshow__dot {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  .slideshow__dot-icon {
    width: 1.5rem;
    height: 1.5rem;
    overflow: visible;
  }

  .slideshow__dot-core {
    fill: currentColor;
    opacity: 0.45;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .slideshow__dot:hover .slideshow__dot-core {
    opacity: 0.75;
  }

  .slideshow__dot[aria-current='true'] .slideshow__dot-core {
    opacity: 1;
  }

  /* The ring belongs to the running slide only. On the others it would read as
     four competing progress indicators. */
  .slideshow__dot-track,
  .slideshow__dot-progress {
    fill: none;
    stroke-width: 1.5;
    opacity: 0;
  }

  .slideshow__dot[aria-current='true'] .slideshow__dot-track,
  .slideshow__dot[aria-current='true'] .slideshow__dot-progress {
    opacity: 1;
  }

  .slideshow__dot-track {
    stroke: currentColor;
    opacity: 0;
  }

  .slideshow__dot[aria-current='true'] .slideshow__dot-track {
    opacity: 0.28;
  }

  .slideshow__dot-progress {
    stroke: currentColor;
    stroke-linecap: round;
    /* Starts empty and is filled by theme.js through the Web Animations API. */
    stroke-dasharray: 51.836;
    stroke-dashoffset: 51.836;
    transform: rotate(-90deg);
    transform-origin: center;
  }

  /* Paused reads as a state, not as a stalled animation: the ring holds where it
     is and the dot lifts, so a frozen ring cannot be mistaken for a broken one. */
  .slideshow[data-paused='true'] .slideshow__dot[aria-current='true'] .slideshow__dot-track {
    opacity: 0.5;
  }

  @media screen and (max-width: 749px) {
    .slideshow__controls {
      inset-block-end: 0.75rem;
    }

    /* Arrows are for pointers. A phone swipes the track directly, and two more
       tap targets over the image only crowd the copy. */
    .slideshow__arrow {
      display: none;
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:social-links (INDEX:208) */
/* A list, so it is announced as one — but a list of icons does not want the browser's markers or its indent. Lost when this snippet was rewritten and its stylesheet went with it; the bullets came back on the storefront. */
  /* A grid rather than a wrapping flex row. With eleven networks available the row wraps on a narrow column, and flex leaves the second line ragged against the first — fixed tracks put every icon on the same vertical rule however many there are. `auto-fit` so it takes only the columns it needs and `justify-content: start` so three icons do not spread across the whole column like a paginator. */
  /* A fixed number of columns, not `auto-fit`.

     `auto-fit` fills a definite width, and this sits in a footer column that is
     sized by its own contents with `justify-items: start` — so the grid asked
     for 100% of something measuring itself, resolved to one track, and stacked
     all nine icons vertically. Measured: 1 column, 9 rows, ul 36px wide.

     A column count has no such circularity: the icons wrap into even rows on a
     shared vertical rule however many networks the merchant has set. */
  /* Sized from two variables so the box, the glyph and the alignment offset cannot disagree. */
  .social-links {
    --social-size: 1.5rem;
    --social-icon: 1.125rem;

    display: grid;
    grid-template-columns: repeat(var(--social-columns, 6), var(--social-size));
    justify-content: start;
    width: max-content;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    margin-inline-start: calc((var(--social-size) - var(--social-icon)) / -2);
    list-style: none;
  }

  .social-links__link {
    display: grid;
    place-items: center;
    width: var(--social-size, 2.25rem);
    height: var(--social-size, 2.25rem);
    color: inherit;
  }

  .social-links__link svg {
    width: var(--social-icon);
    height: var(--social-icon);
  }

  .social-links--small {
    --social-size: 1.375rem;
    --social-icon: 1rem;
  }

  .social-links--small .social-links__link svg {
    width: 1rem;
    height: 1rem;
  }

  /* One row on a phone. Nine icons in six columns leaves an orphan row of three, which reads as an accident; eleven at 24px plus their gaps is 304px and still fits the narrowest phone column. */
  @media screen and (max-width: 749px) {
    .social-links {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: var(--social-size);
    }
  }
/* END_SNIPPET:social-links */

/* START_SNIPPET:star-rating (INDEX:212) */
.stars {
    position: relative;
    display: inline-grid;
    width: max-content;
  }

  .stars__row {
    display: flex;
    gap: 0.15rem;
    white-space: nowrap;
  }

  .stars__row svg {
    width: 1rem;
    height: 1rem;
    flex: none;
  }

  .stars--large .stars__row svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .stars__row--empty {
    color: rgba(var(--color-foreground), 0.25);
  }

  .stars__row--full {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    overflow: hidden;
    color: rgb(var(--color-foreground));
  }

  /* The filled star is solid where the empty one is an outline, which is what makes a partial star legible at all — two outlines overlapping read as one smudged star. */
  .stars__row--full svg {
    fill: currentColor;
  }
/* END_SNIPPET:star-rating */

/* START_SNIPPET:stock-notify-global (INDEX:213) */
/* Self-contained copy of the .notify styles so the popup is styled on pages
     where the PDP's stock-notify.liquid (which carries the same rules) is not
     rendered — collection, search, home. Identical rules on the PDP are a
     harmless no-op. */
  .notify {
    margin: auto;
    width: min(30rem, calc(100vw - 2rem));
    max-height: 88svh;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(var(--color-border), 0.9);
    border-radius: var(--style-border-radius-cards, 0);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 30px 60px -30px rgba(var(--color-shadow), 0.6);
  }
  .notify::backdrop { background: rgba(var(--color-shadow), 0.5); }

  .notify__head {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 1.25rem;
    border-block-end: 1px solid rgba(var(--color-border), 0.9);
    background: rgb(var(--color-background));
  }
  .notify__head-title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-md, 1rem);
    line-height: 1.2;
  }
  .notify__close {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgba(var(--color-foreground), 0.7);
    cursor: pointer;
  }
  .notify__close:hover { color: rgb(var(--color-foreground)); }
  .notify__close svg { width: 1rem; height: 1rem; }

  .notify__body {
    max-height: calc(88svh - 3.5rem);
    overflow-y: auto;
    padding: 1.25rem;
  }

  .notify__item { display: flex; gap: 0.75rem; margin-block-end: 1.25rem; }
  .notify__item-image {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 6rem;
    object-fit: cover;
    background: rgba(var(--color-foreground), 0.06);
    border-radius: var(--style-border-radius-media, 0);
  }
  .notify__item-text { min-width: 0; }
  .notify__item-title {
    font-family: var(--font-heading--family);
    font-size: var(--font-size-md, 1rem);
    line-height: 1.3;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }
  .notify__item-title:hover { text-decoration: underline; }
  .notify__item-price {
    margin: 0.35rem 0 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
    color: var(--offer-accent, rgb(var(--color-foreground)));
  }
  .notify__item-price .price,
  .notify__item-price .price__regular,
  .notify__item-price .price-item { color: inherit; font-weight: inherit; }

  .notify__form { display: grid; gap: 0.75rem; }
  .notify__lead {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: rgb(var(--color-foreground));
  }
  .notify__lead strong { font-weight: var(--font-body--weight-bold); }

  .notify__email { width: 100%; min-height: 2.4rem; padding-block: 0.4rem; }
  .notify__submit { min-height: 2.4rem; padding-block: 0.3rem; }

  .notify__fine {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: rgba(var(--color-foreground), 0.55);
  }
  .notify__trap {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; border: 0; margin: -1px;
    clip-path: inset(50%);
    overflow: hidden;
  }
  .notify__error { margin: 0; font-size: var(--font-size-sm); color: rgb(var(--color-accent)); }
  .notify__done { display: grid; gap: 0.75rem; padding-block: 0.5rem; }
  .notify__done-text {
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(var(--color-border), 0.9);
    background: rgba(var(--color-foreground), 0.04);
    font-size: var(--font-size-sm);
    line-height: 1.55;
  }

  /* Shop similar grid — same as the PDP popup, with a quick-view bag on each
     tile like the reference. */
  .notify__recs { margin-block-start: 1.5rem; }
  .notify__recs-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-md, 1rem);
  }
  .notify__recs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.75rem;
    row-gap: 1rem;
  }
  .notify__rec { min-width: 0; }
  .notify__rec-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: rgba(var(--color-foreground), 0.06);
  }
  .notify__rec-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .notify__rec-bag {
    position: absolute;
    inset: auto 0.4rem 0.4rem auto;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 0;
    border-radius: 50%;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 2px 10px -4px rgba(var(--color-shadow), 0.45);
    cursor: pointer;
  }
  .notify__rec-bag svg { width: 1rem; height: 1rem; display: block; }
  .notify__rec-bag:hover { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); }
  .notify__rec-title {
    display: block;
    margin: 0.4rem 0 0.1rem;
    overflow: hidden;
    font-size: var(--font-size-xs);
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }
  .notify__rec-price {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-body--weight-bold);
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }
  .notify__rec-price .price,
  .notify__rec-price .price__regular,
  .notify__rec-price .price-item { font-size: inherit; }
/* END_SNIPPET:stock-notify-global */

/* START_SNIPPET:stock-notify (INDEX:214) */
.notify {
    margin: auto;
    width: min(30rem, calc(100vw - 2rem));
    max-height: 88svh;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(var(--color-border), 0.9);
    border-radius: var(--style-border-radius-cards, 0);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 30px 60px -30px rgba(var(--color-shadow), 0.6);
  }

  .notify::backdrop {
    background: rgba(var(--color-shadow), 0.5);
  }

  /* Sticky header bar with the title and close, like the Hydrogen panel. */
  .notify__head {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 1.25rem;
    border-block-end: 1px solid rgba(var(--color-border), 0.9);
    background: rgb(var(--color-background));
  }

  .notify__head-title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-md, 1rem);
    line-height: 1.2;
  }

  .notify__close {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgba(var(--color-foreground), 0.7);
    cursor: pointer;
  }
  .notify__close:hover { color: rgb(var(--color-foreground)); }
  .notify__close svg { width: 1rem; height: 1rem; }

  .notify__body {
    max-height: calc(88svh - 3.5rem);
    overflow-y: auto;
    padding: 1.25rem;
  }

  /* Item row */
  .notify__item {
    display: flex;
    gap: 0.75rem;
    margin-block-end: 1.25rem;
  }
  .notify__item-image {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 6rem;
    object-fit: cover;
    background: rgba(var(--color-foreground), 0.06);
    border-radius: var(--style-border-radius-media, 0);
  }
  .notify__item-text { min-width: 0; }
  .notify__item-title {
    font-family: var(--font-heading--family);
    font-size: var(--font-size-md, 1rem);
    line-height: 1.3;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }
  .notify__item-title:hover { text-decoration: underline; }
  .notify__item-price {
    margin: 0.35rem 0 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
    color: var(--offer-accent, rgb(var(--color-foreground)));
  }
  .notify__item-price .price,
  .notify__item-price .price__regular,
  .notify__item-price .price-item {
    color: inherit;
    font-weight: inherit;
  }

  .notify__form { display: grid; gap: 0.75rem; }

  .notify__lead {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: rgb(var(--color-foreground));
  }
  .notify__lead strong { font-weight: var(--font-body--weight-bold); }

  /* Slim email field + submit, matching the slimmed Add to cart button. */
  .notify__email {
    width: 100%;
    min-height: 2.4rem;
    padding-block: 0.4rem;
  }
  .notify__submit {
    min-height: 2.4rem;
    padding-block: 0.3rem;
  }

  .notify__fine {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: rgba(var(--color-foreground), 0.55);
  }

  .notify__trap {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; border: 0; margin: -1px;
    clip-path: inset(50%);
    overflow: hidden;
  }

  .notify__error {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-accent));
  }

  .notify__done {
    display: grid;
    gap: 0.75rem;
    padding-block: 0.5rem;
  }
  .notify__done-text {
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(var(--color-border), 0.9);
    background: rgba(var(--color-foreground), 0.04);
    font-size: var(--font-size-sm);
    line-height: 1.55;
  }

  /* Shop similar grid */
  .notify__recs { margin-block-start: 1.5rem; }
  .notify__recs-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-heading--family);
    font-size: var(--font-size-md, 1rem);
  }
  .notify__recs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.75rem;
    row-gap: 1rem;
  }
  .notify__rec { min-width: 0; }
  .notify__rec-img {
    display: block;
    aspect-ratio: 3 / 4;
    width: 100%;
    object-fit: cover;
    background: rgba(var(--color-foreground), 0.06);
  }
  .notify__rec-title {
    display: block;
    margin: 0.4rem 0 0.1rem;
    overflow: hidden;
    font-size: var(--font-size-xs);
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }
  .notify__rec-price {
    font-size: var(--font-size-xs);
    font-weight: var(--font-body--weight-bold);
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }
/* END_SNIPPET:stock-notify */

/* START_SNIPPET:subcollections (INDEX:217) */
/* The arrows are positioned against this, so it has to be the containing
     block for them. */
  .subcollections {
    position: relative;
    margin-block-end: 2rem;
  }

  /* The dots sit under the row rather than against it. */
  .subcollections .scroll-dots {
    padding-block-start: 1rem;
  }

  /* A row of text links needs far less room beneath it than a row of photographs. Cards end in an image and want air before the next thing; chips are a line of text, and 32px under them reads as a missing section. */
  .subcollections--chip {
    margin-block-end: 1rem;
  }

  /* Pulled to the grid's own gutter on a phone, where the products narrow theirs. The trail, the toolbar and the cards all share one left edge; a row of chips standing 8px inside them reads as a mistake. */
  @media screen and (max-width: 749px) {
    .subcollections {
      margin-inline: calc(min(var(--page-margin), var(--spacing-grid)) - var(--page-margin));
    }
  }

  /* Carousel or grid, chosen by the merchant rather than by the screen. */
  .subcollections__list {
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .subcollections--carousel .subcollections__list {
    overflow-x: auto;
    /* Both axes stated. `overflow-x: auto` alone makes the other axis compute
       to `auto` as well, which quietly makes the row scrollable up and down. */
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .subcollections--carousel .subcollections__list::-webkit-scrollbar {
    display: none;
  }

  .subcollections--grid .subcollections__list {
    flex-wrap: wrap;
  }

  .subcollections__item {
    scroll-snap-align: start;
  }

  .subcollections__item--chip {
    flex: 0 0 auto;
  }



  /* --- Chips --- */

  /* Outlined and quiet. These sit above a grid of photographs and are a way in, not the thing being sold, so they read as text with an edge rather than as a row of buttons competing with the products. */
  .subcollections__chip {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding-inline: 0.875rem;
    border: 1px solid rgba(var(--color-foreground), 0.2);
    border-radius: 2rem;
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-sm);
    text-decoration: none;
    white-space: nowrap;
  }

  .subcollections__chip:hover {
    border-color: rgb(var(--color-foreground));
  }

  /* Where the shopper is, filled rather than outlined. Colour alone would not
     carry it, so the fill changes the shape of the chip as well as its tone. */
  .subcollections__chip[aria-current='page'] {
    border-color: rgb(var(--color-foreground));
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  .subcollections__card[aria-current='page'] .subcollections__label {
    font-weight: var(--font-body--weight-bold);
  }

  /* --- Cards --- */

  /* Grid: real tracks, capped at three between tablet and desktop. Eight across
     on a laptop is eight thumbnails nobody can read. */
  .subcollections--grid.subcollections--card .subcollections__list {
    display: grid;
    grid-template-columns: repeat(min(var(--subcollection-columns, 4), 2), minmax(0, 1fr));
    gap: var(--spacing-grid);
  }

  @media screen and (min-width: 750px) {
    .subcollections--grid.subcollections--card .subcollections__list {
      grid-template-columns: repeat(min(var(--subcollection-columns, 4), 3), minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 990px) {
    .subcollections--grid.subcollections--card .subcollections__list {
      grid-template-columns: repeat(var(--subcollection-columns, 4), minmax(0, 1fr));
    }
  }

  /* Carousel: the column count sets how many fit the screen, and the rest are
     off the edge. Two and a bit on a phone, so the cut-off card is visible. */
  .subcollections--carousel.subcollections--card .subcollections__list {
    gap: var(--spacing-grid);
  }

  .subcollections--carousel.subcollections--card .subcollections__item {
    flex: 0 0 var(--subcollection-phone-basis, 42%);
  }

  @media screen and (min-width: 750px) {
    .subcollections--carousel.subcollections--card .subcollections__item {
      flex: 0 0 calc(
        (100% - var(--spacing-grid) * (min(var(--subcollection-columns, 4), 3) - 1)) /
          min(var(--subcollection-columns, 4), 3)
      );
    }
  }

  @media screen and (min-width: 990px) {
    .subcollections--carousel.subcollections--card .subcollections__item {
      flex: 0 0 calc(
        (100% - var(--spacing-grid) * (var(--subcollection-columns, 4) - 1)) /
          var(--subcollection-columns, 4)
      );
    }
  }

  /* A card whose collection has no image falls back to a chip, so it stays in
     the row rather than sitting in the grid as an empty box. */
  .subcollections--card .subcollections__item--chip {
    display: flex;
    align-items: center;
  }

  .subcollections__card {
    display: grid;
    gap: 0.5rem;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }

  .subcollections__media {
    display: block;
    overflow: hidden;
    border-radius: var(--style-border-radius-cards, 0);
    aspect-ratio: 4 / 5;
  }

  .subcollections__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-base) var(--ease-out);
  }

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

  @media (prefers-reduced-motion: reduce) {
    .subcollections__media img {
      transition: none;
    }

    .subcollections__card:hover .subcollections__media img {
      transform: none;
    }
  }

  .subcollections__label {
    font-size: var(--font-size-sm);
  }

  .subcollections__card:hover .subcollections__label {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
/* END_SNIPPET:subcollections */

/* START_SNIPPET:subscribe-options (INDEX:218) */
.subplan {
    display: grid;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .subplan__legend {
    padding: 0;
    margin-block-end: 0.125rem;
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: var(--transform-eyebrow);
    color: rgba(var(--color-foreground), 0.7);
  }

  .subplan__row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out);
  }

  .subplan__row:hover {
    border-color: rgba(var(--color-foreground), 0.4);
  }

  /* The chosen option, framed in the accent, matching the Hydrogen storefront. */
  .subplan__row:has(.subplan__radio:checked) {
    border-color: rgb(var(--color-accent));
  }

  .subplan__radio {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: rgb(var(--color-accent));
  }

  .subplan__mark {
    display: none;
  }

  .subplan__name {
    font-size: var(--font-size-sm);
  }

  .subplan__badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    background: rgb(var(--color-accent));
    color: rgb(var(--color-background));
    font-size: var(--font-size-2xs, 0.6875rem);
    font-weight: var(--font-body--weight-bold);
    line-height: 1;
    white-space: nowrap;
  }

  .subplan__name {
    white-space: nowrap;
  }

  .subplan__price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-inline-start: auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-body--weight-bold);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .subplan__was {
    color: rgba(var(--color-foreground), 0.5);
    font-weight: var(--font-body--weight);
  }

  .subplan__freq {
    display: grid;
    gap: 0.25rem;
    padding: 0.125rem 0.125rem 0.25rem;
  }

  .subplan__freq-label {
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.7);
  }

  .subplan__freq-select {
    min-height: 2.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-sm);
    font-family: inherit;
  }

  .subplan__note {
    margin: 0;
    font-size: var(--font-size-xs);
    color: rgba(var(--color-foreground), 0.6);
  }
/* END_SNIPPET:subscribe-options */

/* START_SNIPPET:text-block (INDEX:220) */
.text-block__eyebrow {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
  }

  .text-block__heading {
    margin: 0;
    line-height: 1.1;
    /* Fashion headings are set tight; the theme's default tracking is tuned for
       body copy and reads loose at display sizes. */
    letter-spacing: -0.01em;
  }

  .text-block__body {
    color: rgba(var(--color-foreground), 0.8);
  }

  .text-block__body > :first-child {
    margin-block-start: 0;
  }

  .text-block__body > :last-child {
    margin-block-end: 0;
  }

  .text-block__button {
    margin-block-start: 0.5rem;
  }

  .text-block__button-note {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed rgba(var(--color-foreground), 0.35);
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  /* A hairline, not a border: 1px of the foreground at low opacity reads as a
     pause rather than as a division. */
  .text-block__rule {
    display: block;
    width: 4rem;
    height: 1px;
    background: rgba(var(--color-foreground), 0.25);
  }

  .text-block__app {
    width: 100%;
  }
/* END_SNIPPET:text-block */

/* START_SNIPPET:text-icon-item (INDEX:222) */
.text-icon__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size, 28px);
    height: var(--icon-size, 28px);
    color: rgb(var(--color-foreground));
  }

  /* The icons are drawn on a 20px grid at a fixed stroke weight, so scaling the box scales the line with it — which is what keeps a 48px icon looking like the same family as a 20px one rather than a bolder relative. */
  .text-icon__mark svg {
    width: 100%;
    height: 100%;
  }

  .text-icon__mark--image {
    object-fit: contain;
  }

  .text-icon__body {
    display: grid;
    gap: 0.35rem;
  }

  /* Bigger and heavier than the sentence beneath it. The promise is the thing being scanned — "Free delivery" — and the sentence is the qualification on it. Set at the same size they read as one run-on line. */
  .text-icon__heading {
    margin: 0;
    font-size: calc(var(--font-size-base) * 1.05);
    font-weight: var(--font-body--weight-bold);
    line-height: 1.3;
  }

  .text-icon__text {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-foreground), 0.7);
  }

  .text-icon__text > :first-child {
    margin-block-start: 0;
  }

  .text-icon__text > :last-child {
    margin-block-end: 0;
  }

  .text-icon__link {
    justify-self: inherit;
    font-size: var(--font-size-sm);
  }
/* END_SNIPPET:text-icon-item */

/* START_SNIPPET:trust-badges (INDEX:223) */
/* Every dimension of a card is a token on the list, so the narrow two-up layout is one small block of overrides rather than a second copy of the whole component. */
  .trust {
    --trust-gap: 0.5rem;
    --trust-pad: 0.6875rem 0.75rem;
    --trust-row-gap: 0.625rem;
    --trust-disc: 2rem;
    --trust-glyph: 1.0625rem;
    --trust-art: 1.375rem;
    --trust-type: var(--font-size-xs);

    display: grid;
    gap: var(--trust-gap);
    padding: 0;
    margin: 0.5rem 0 0;
    list-style: none;
  }

  .trust:empty {
    display: none;
  }

  @media screen and (min-width: 520px) {
    .trust {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Two up on a phone as well, when the merchant asks for it. Four badges stacked is a lot of column on a 390px screen, and paired they read as one block the eye takes in at once — which is all they are for. */
  .trust--mobile-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Half the width means everything in the card comes down a step. Scaled rather than merely reflowed: a 32px disc and 12px type in a 187px card leaves the second line wrapping to three words, which reads as broken rather than as compact. Below the two-up layout is never used, so none of this applies to the stacked one. */
  @media screen and (max-width: 519px) {
    .trust--mobile-2 {
      --trust-gap: 0.375rem;
      --trust-pad: 0.5rem 0.5625rem;
      --trust-row-gap: 0.4375rem;
      --trust-disc: 1.75rem;
      --trust-glyph: 0.9375rem;
      --trust-art: 1.125rem;
      /* 11px. The floor for a line that is reassurance rather than reading. */
      --trust-type: 0.6875rem;
    }
  }

  /* The card paints itself. */
  .trust__item {
    display: flex;
    align-items: center;
    gap: var(--trust-row-gap);
    padding: var(--trust-pad);
    border: 1px solid rgba(var(--color-border), 0.9);
    border-radius: var(--style-border-radius-inputs);
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  /* Tinted disc rather than a bare glyph: at this size an unbacked icon reads as a smudge beside the type, and the disc gives the row a left edge for the two lines to hang from. */
  .trust__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--trust-disc);
    height: var(--trust-disc);
    border-radius: 50%;
    background: rgba(var(--color-accent), 0.1);
    color: rgb(var(--color-accent));
  }

  .trust__icon svg {
    width: var(--trust-glyph);
    height: var(--trust-glyph);
  }

  /* An uploaded picture is given the whole disc rather than the glyph's 17px. */
  .trust__icon .icon-image {
    width: var(--trust-art);
    height: var(--trust-art);
  }

  .trust__copy {
    display: grid;
    min-width: 0;
  }

  .trust__heading {
    font-size: var(--trust-type);
    font-weight: var(--font-body--weight-bold);
    line-height: 1.35;
  }

  /* The fallback is only reached if the chosen scheme cannot be found, which
     should not happen; 0.7 rather than the 0.65 this used to be, because 0.65
     measured 4.6:1 on the theme's own background and left nothing in hand. */
  .trust__text {
    color: var(--trust-muted, rgba(var(--color-foreground), 0.7));
    font-size: var(--trust-type);
    line-height: 1.35;
  }
/* END_SNIPPET:trust-badges */

/* START_SNIPPET:variant-options (INDEX:225) */
/* Space between one option and the next, counting only the ones on screen.
   *
   * `+ .variant-option` matched the hidden single-value group as readily as a
   * visible one: `display: none` removes the box but not the sibling
   * relationship, so a one-colour product drew no swatch row and still paid
   * 16px for it — measured, the size row carried a top margin under a colour
   * row that was not there.
   *
   * `~` rather than `+`, so a hidden group in the middle of the list does not
   * strip the margin from whatever follows it either. */
  .variant-option:not([hidden]) ~ .variant-option:not([hidden]) {
    margin-block-start: 1rem;
  }

  .variant-option__set {
    padding: 0;
    border: 0;
    margin: 0;
  }

  /* Sentence case, not the eyebrow treatment. "COLOR Black" reads as a section heading shouting at the value beside it; "Color: Black" reads as a fact about the product, which is what it is. The colon does the separating that the letter-spacing was doing. */
  .variant-option__name {
    display: block;
    padding: 0;
    margin-block-end: 0.4375rem;
    font-size: var(--font-size-xs);
    letter-spacing: normal;
    text-transform: none;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Two ends of one line: the option and its value on the left, the size guide
     on the right. After the base rule, not before it — both are one class, so
     the later one wins and a modifier written above the thing it modifies
     silently loses. Measured: the label stayed `display: block` and the link
     sat under it. */
  .variant-option__name--with-aside {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
  }

  /* The waitlist reads as part of the row it belongs to, so it follows the label rather than sitting across the column from it. The size guide keeps the far edge: it is a reference a shopper goes looking for, where this is a reply to what the row has just told them. */
  .variant-option__name--inline-aside {
    justify-content: flex-start;
  }

  /* Quieter than the label it shares a line with: it is a way out of the
     decision, not part of making it. */
  .variant-option__guide,
  .variant-option__notify {
    font-size: var(--font-size-xs);
  }

  /* The prompt is quiet and the way out of it is not, so the eye lands on the
     part that does something. */
  .variant-option__notify {
    color: rgba(var(--color-foreground), 0.7);
  }

  /* A link, not a button. It sits on the same line as the label and has to read as the way out of the row rather than as a second control competing with the sizes underneath it. */
  .variant-option__notify-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: var(--font-body--weight-bold);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    cursor: pointer;
  }

  .variant-option__notify-link:hover {
    color: rgb(var(--color-accent));
  }

  /* The chosen value sits beside the option's name, so the group reads as
     "Size — Medium" without the visitor having to find the selected control. */
  .variant-option__selected {
    text-transform: none;
    letter-spacing: 0;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* The room for a chosen swatch's ring is made on the buy column, not here — see `.product__info` in sections/product.liquid. Padding this row and pulling it back by the same amount moves the ring exactly as far as it moves the clip, which is to say nowhere. */
  .variant-option__values {
    display: flex;
    flex-wrap: wrap;
    /* Room for the selected swatch's ring, which sits 3px outside its box. At
       the old 5px the ring landed against the next colour. */
    gap: 0.5rem;
  }

  /* A compact 30px chip — smaller, quieter, in line with the minimalist type. */
  .variant-option__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.875rem;
    min-height: 1.875rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: var(--style-border-radius-inputs);
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-2xs, 0.6875rem);
    line-height: 1;
    /* These are links now — see snippets/variant-option-link.liquid — so the underline and the visited colour a link brings by default are cleared. */
    text-decoration: none;
    cursor: pointer;
    transition:
      border-color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out);
  }

  .variant-option__value:hover {
    border-color: rgba(var(--color-foreground), 0.7);
  }

  .variant-option__value:hover {
    border-color: rgba(var(--color-foreground), 0.7);
  }

  /* The input is visually hidden but still focusable, so the focus ring has to be drawn on the label it controls or a keyboard user cannot see where they are in the group. */
  .variant-option__value:focus-visible {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: 2px;
  }

  /* `background-color`, not the `background` shorthand. */
  .variant-option__value[aria-current='true'] {
    border-color: rgb(var(--color-foreground));
    background-color: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  /* Sold out, not removed. A size box shows a bell (Hydrogen parity) rather than
     a strike — the bell says "tap to be notified", which is what the tap does.
     Swatches keep their own fade + diagonal strike below. */
  .variant-option__value.is-unavailable {
    color: rgba(var(--color-foreground), 0.4);
    border-color: rgba(var(--color-foreground), 0.12);
  }

  /* The bell — only in size boxes, only when the value is sold out. It sits in
     the markup for every size box and is revealed by this rule, so it tracks the
     script's is-unavailable toggling per chosen colour with no extra script. */
  .variant-option__bell {
    display: none;
    align-items: center;
    justify-content: center;
    margin-inline-end: 0.25rem;
    color: var(--offer-accent);
  }

  .variant-option__bell svg {
    width: 1em;
    height: 1em;
  }

  .variant-option__value:not(.variant-option__value--swatch).is-unavailable .variant-option__bell {
    display: inline-flex;
  }

  /* Low-stock bolt — few left but still buyable. Same reveal pattern as the bell;
     the script adds .is-low per chosen colour. Brand rose, like the Hydrogen
     storefront's lightning mark. */
  .variant-option__bolt {
    display: none;
    align-items: center;
    justify-content: center;
    margin-inline-end: 0.25rem;
    color: var(--offer-accent);
  }

  .variant-option__bolt svg {
    width: 1em;
    height: 1em;
  }

  .variant-option__value:not(.variant-option__value--swatch).is-low .variant-option__bolt {
    display: inline-flex;
  }

  .variant-option__value[aria-current='true'].is-unavailable {
    color: rgba(var(--color-background), 0.6);
    border-color: rgba(var(--color-foreground), 0.7);
    background-color: rgba(var(--color-foreground), 0.7);
  }

  /* --- Swatches --- */

  /* 24px, the smallest a target is allowed to be, and no border of its own. */
  .variant-option__value--swatch.is-unavailable {
    /* The swatch already owns `background-image`, so the strike is drawn as a
       pseudo-element rather than a second layer that would replace it. */
    background-image: var(--swatch-image, none);
    opacity: 0.55;
  }

  /* --- The colour's name, on hover --- * A swatch is a colour and nothing else, and "which one is Ecru" is a * question a shopper can only answer by selecting one and reading the label * change — which on a variant link is a page they have to come back from. */
  @media (hover: hover) and (pointer: fine) {
    .variant-option__value--swatch::before {
      content: attr(data-option-value) / '';
      position: absolute;
      /* Above its neighbours. Swatches are `position: relative` siblings, so
         without this the label slides under the next one along. */
      z-index: 3;
      /* Above the swatch, which is where a label pointing at something goes. */
      inset-block-end: calc(100% + 0.4375rem);
      /* `left`, not `inset-inline-start`, and deliberately so.
       *
       * The pair that centres this is a 50% offset and a -50% translate, and
       * `translate` is physical — it has no logical form. Under `dir="rtl"` the
       * logical inset flips to the right edge while the translate keeps moving
       * left, and the label lands a full label-width away from the swatch.
       * Measured in RTL: centred 46px left of a 22px swatch.
       *
       * Both physical, the pair is symmetric and centres correctly whichever
       * way the document runs. */
      left: 50%;
      padding: 0.25rem 0.4375rem;
      /* Its own radius, not the merchant's input radius. A tooltip is not a control they styled — it is a small floating label, and on a store that has set inputs to square it came out as a hard rectangle pinned over a circle. Rounded enough to read as a soft label against the round swatch under it, short of the pill a full radius would make. */
      border-radius: 0.5rem;
      background: rgb(var(--color-foreground));
      color: rgb(var(--color-background));
      font-size: var(--font-size-xs);
      /* The chip's own tracking and casing are for a size code. A colour name
         is a word and is set as one. */
      letter-spacing: normal;
      text-transform: none;
      line-height: 1.2;
      white-space: nowrap;
      /* It sits over the swatch above it in a wrapped row; without this the label would take the pointer and the swatch under it would lose the hover that is drawing it, which flickers. */
      pointer-events: none;
      opacity: 0;
      translate: -50% 0.25rem;
      transition:
        opacity var(--duration-fast) var(--ease-out),
        translate var(--duration-fast) var(--ease-out);
    }

    .variant-option__value--swatch:hover::before,
    .variant-option__value--swatch:focus-visible::before {
      opacity: 1;
      translate: -50% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .variant-option__value--swatch::before {
      transition: none;
      translate: -50% 0;
    }
  }

  .variant-option__value--swatch.is-unavailable::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      to top left,
      transparent calc(50% - 0.5px),
      rgba(var(--color-foreground), 0.7) calc(50% - 0.5px),
      rgba(var(--color-foreground), 0.7) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
  }

  .variant-option__value--swatch {
    position: relative;
    /* Colour swatches are now the variant's own photo (like Hydrogen), so the
       tile is a PORTRAIT rectangle showing the garment, not a circle or square.
       Width is the merchant's swatch size; height is ~1.3x for the photo aspect. */
    width: var(--picker-swatch-size, 1.5rem);
    min-width: var(--picker-swatch-size, 1.5rem);
    height: calc(var(--picker-swatch-size, 1.5rem) * 1.32);
    min-height: calc(var(--picker-swatch-size, 1.5rem) * 1.32);
    padding: 0;
    border-color: transparent;
    /* The merchant's shape setting, the same token the product card and the filter list read, so a swatch is one shape everywhere in the theme rather than round here and square there. */
    border-radius: var(--swatch-radius, 50%);
    box-shadow: inset 0 0 0 1px rgba(var(--color-foreground), 0.14);
    background-color: var(--swatch-color, transparent);
    background-image: var(--swatch-image, none);
    background-size: cover;
    background-position: center;
  }

  .variant-option__value--swatch:hover {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(var(--color-foreground), 0.3);
  }

  /* A checked swatch keeps its own colour and is marked with a ring outside it. */
  /* One ring, and the hairline goes with it. Keeping both is what read as a double border; the ring alone is enough to say which is chosen, and it sits outside the circle so it never covers the colour. */
  .variant-option__value--swatch[aria-current='true'] {
    /* The reset has to be repeated here.
     *
     * `.variant-option__value--swatch` clears the border to transparent, but
     * that is one class (0,1,0) against `.variant-option__value[aria-current]`
     * (0,2,0), which paints it solid foreground for the button-shaped options.
     * The swatch lost, so a chosen colour drew a dark hairline AND the ring
     * outside it — the double border. This selector is (0,3,0) and wins. */
    border-color: transparent;
    background-color: var(--swatch-color, transparent);
    background-image: var(--swatch-image, none);
    /* Restated so the selected swatch is framed exactly like the rest of the
       row, whatever any later rule does to the shorthand. */
    background-size: cover;
    background-position: center;
    /* Drawn around it, not on it.
     *
     * An inset ring is the safe choice for a button and the wrong one for a
     * colour: it paints over the two pixels at the edge of the very thing being
     * chosen, and on a mid-tone like khaki the swatch reads as dirty rather
     * than as selected. A ring outside leaves the colour whole, and the extra
     * few pixels are the point — the chosen one is meant to sit slightly
     * proud of the row. The gap below is widened so it never touches its
     * neighbour. */
    /* One crisp frame hugging the tile, not a ring set off from it. The offset
       ring the swatch had before read as a second border against the tile's own
       edge (the "double border"); a solid 1px frame in the full foreground colour
       is a single, clearly visible selected state. */
    box-shadow: 0 0 0 1px rgb(var(--color-foreground));
    outline: none;
  }

  /* A combination with no variant behind it, or one that is sold out. Kept visible and struck through rather than removed: a size disappearing as you pick a colour is disorienting, and "we do not have this" is information. */
  .variant-option__value[data-unavailable] {
    opacity: 0.4;
    text-decoration: line-through;
  }

  .variant-option__value--swatch[data-unavailable] {
    text-decoration: none;
    opacity: 0.35;
  }

  /* --- Dropdown --- */

  /* A disclosure wearing a select's clothes. It has to look like the control a shopper expects while behaving like the one that works without script, so the summary borrows the field styling used everywhere else in the theme. */
  .variant-option__menu {
    position: relative;
  }

  .variant-option__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-sm);
    cursor: pointer;
    list-style: none;
  }

  .variant-option__menu-toggle::-webkit-details-marker {
    display: none;
  }

  .variant-option__menu-toggle svg {
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
    transition: rotate var(--duration-fast) var(--ease-out);
  }

  .variant-option__menu[open] .variant-option__menu-toggle svg {
    rotate: 180deg;
  }

  /* Over the page rather than in it, so opening the list does not push the buy
     button down the column. */
  .variant-option__menu-list {
    position: absolute;
    z-index: 5;
    inset-inline: 0;
    max-height: 15rem;
    padding: 0.25rem;
    margin: 0.25rem 0 0;
    overflow-y: auto;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--style-border-radius-inputs);
    background: rgb(var(--color-background));
    list-style: none;
    box-shadow: 0 8px 24px -12px rgba(var(--color-shadow), 0.5);
  }

  .variant-option__menu-item {
    display: block;
    padding: 0.5rem 0.625rem;
    border-radius: var(--style-border-radius-inputs);
    color: rgb(var(--color-foreground));
    font-size: var(--font-size-sm);
    text-decoration: none;
  }

  .variant-option__menu-item:hover,
  .variant-option__menu-item:focus-visible {
    background: rgba(var(--color-foreground), 0.06);
  }

  .variant-option__menu-item[aria-current='true'] {
    background: rgba(var(--color-foreground), 0.09);
  }

  /* Struck through rather than removed, and still followable: a shopper has to
     be able to see the size exists before learning it is gone. */
  .variant-option__menu-item.is-unavailable,
  .variant-option__menu-item[data-unavailable] {
    color: rgba(var(--color-foreground), 0.7);
    text-decoration: line-through;
  }
/* END_SNIPPET:variant-options */