/*** GENERATED LOCALLY ***/

/* sections/404.liquid */

  .notfound {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-start;
    min-height: 48svh;
    justify-content: center;
  }

  .notfound__title {
    font-size: clamp(var(--step-3), 6vw, var(--step-5));
  }

  .notfound__text {
    max-width: 46ch;
    color: var(--color-text-muted);
  }

  .notfound__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-2xs);
  }
/* sections/age-gate.liquid */

  .age-gate {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: var(--space-s);
    background-color: rgb(0 0 0 / 0.82);
    backdrop-filter: blur(3px);
  }

  .age-gate[hidden] {
    display: none;
  }

  .age-gate__panel {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 720px);
    max-height: 92svh;
    overflow: auto;
    border-radius: var(--radius);
    background-color: var(--color-bg);
    border: 1px solid var(--color-hairline);
  }

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

  .age-gate__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-l);
  }

  .age-gate__body[hidden] {
    display: none;
  }

  .age-gate__brand {
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-optical-sizing: auto;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .age-gate__title {
    font-size: var(--step-2);
  }

  .age-gate__text {
    color: var(--color-text-muted);
    font-size: 0.92rem;
  }

  .age-gate__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-2xs);
  }

  .age-gate__remember {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
  }

  .age-gate__remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
  }

  @media screen and (min-width: 750px) {
    .age-gate__panel:has(.age-gate__media) {
      grid-template-columns: minmax(min(280px, 100%), 320px) 1fr;
    }

    .age-gate__media {
      grid-row: 1 / -1;
    }
  }
/* sections/announcement-bar.liquid */

  .announcement {
    background-color: var(--announcement-bg);
    color: var(--announcement-fg);
  }

  .announcement__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: 38px;
  }

  .announcement__track {
    flex: 1 1 auto;
    text-align: center;
  }

  .announcement__slide[hidden] {
    display: none;
  }

  .announcement__text {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
  }

  a.announcement__text:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .announcement__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
  }

  .announcement__nav:hover {
    opacity: 1;
  }

  .announcement__next-icon {
    transform: rotate(-90deg);
  }

  .announcement__nav:first-child .icon {
    transform: none;
  }
/* sections/article.liquid */

  .article {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  .article__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    max-width: 68ch;
  }

  .article__title {
    font-size: clamp(var(--step-2), 4.4vw, var(--step-4));
  }

  .article__body {
    max-width: 68ch;
  }

  .article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
  }

  .article__comments {
    max-width: 68ch;
    padding-block-start: var(--space-l);
    border-block-start: 1px solid var(--color-hairline);
  }

  .article__comments-title {
    font-size: var(--step-1);
    margin-block-end: var(--space-s);
  }

  .article__comment-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    margin-block-end: var(--space-l);
  }

  .comment__meta {
    margin-block-end: var(--space-3xs);
  }

  .article__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: flex-start;
    margin: 0;
  }

  .article__form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--space-s);
    width: 100%;
  }

  .article__form .field {
    width: 100%;
  }

  .article__notice {
    color: var(--color-origin);
  }

  .article__moderated {
    color: var(--color-text-muted);
    font-size: 0.8rem;
  }
/* sections/blog.liquid */

  .blog__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    margin-block-end: var(--space-l);
  }

  .blog__title {
    font-size: clamp(var(--step-2), 4vw, var(--step-4));
  }

  .blog__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
  }

  .blog__tag {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
  }

  .blog__tag:hover,
  .blog__tag--active {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .blog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-xl) var(--space-m);
  }

  .blog__empty {
    color: var(--color-text-muted);
  }
/* sections/boxes.liquid */

  .boxes__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    max-width: 56ch;
    margin-block-end: var(--space-l);
  }

  .boxes__heading {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-3));
  }

  .boxes__text {
    color: var(--color-text-muted);
  }

  .boxes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--space-l) var(--space-m);
  }

  .box {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .box__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    flex: 1 1 auto;
    margin-block-start: calc(var(--space-m) * -1);
    margin-inline: var(--space-s);
  }

  .box__title {
    font-family: var(--font-head);
    font-size: var(--step-1);
    font-optical-sizing: auto;
  }

  .box__link {
    text-decoration: none;
  }

  .box__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .box__contents {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .box__line {
    padding-inline-start: 1em;
    position: relative;
    font-size: 0.86rem;
  }

  /* A rule rather than a bullet: the contents read as a packing list. */
  .box__line::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.68em;
    width: 0.55em;
    border-block-start: 1px solid var(--color-border);
  }

  .box__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    margin-block-start: auto;
    padding-block-start: var(--space-2xs);
  }

  .box__cta {
    pointer-events: none;
  }
/* sections/cart-cross-sell.liquid */

  .xsell__row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-2xs);
    border-block-start: 1px solid var(--color-hairline);
  }

  .xsell__body {
    display: flex;
    flex-direction: column;
    gap: 0.05em;
    min-width: 0;
  }

  .xsell__title {
    font-size: 0.85rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

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

  .xsell__price {
    color: var(--color-accent);
    font-size: 0.8rem;
  }

  .xsell__form {
    margin: 0;
  }

  .xsell__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: none;
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
  }

  .xsell__add:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
/* sections/cart-drawer.liquid */

  .cart-drawer {
    width: min(92vw, 420px);
    max-width: none;
    height: 100%;
    max-height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .cart-drawer::backdrop {
    background-color: rgb(0 0 0 / 0.55);
  }

  .cart-drawer[open] {
    display: flex;
    flex-direction: column;
  }

  .cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    padding: var(--space-s) var(--space-2xs) var(--space-s) var(--space-m);
    border-block-end: 1px solid var(--color-hairline);
  }

  .cart-drawer__title {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    font-size: 1.1rem;
  }

  .cart-drawer__count {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }

  .cart-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

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

  .cart-drawer__empty {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    padding: var(--space-l);
    text-align: center;
  }

  .cart-drawer__empty-text {
    color: var(--color-text-muted);
  }

  .cart-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-m);
  }

  .cart-drawer__xsell {
    margin-block-start: var(--space-s);
  }

  .cart-drawer__xsell[hidden] {
    display: none;
  }

  .cart-drawer__xsell-head {
    margin-block-end: var(--space-3xs);
  }

  .cart-drawer__foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-m);
    border-block-start: 1px solid var(--color-hairline);
  }

  .cart-drawer__note-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-3xs);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    list-style: none;
  }

  .cart-drawer__note-toggle::-webkit-details-marker {
    display: none;
  }

  .cart-drawer__note[open] .cart-drawer__note-toggle .icon {
    transform: rotate(180deg);
  }

  .cart-drawer__discounts {
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
  }

  .cart-drawer__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
    padding-block-start: var(--space-2xs);
  }

  .cart-drawer__amount {
    color: var(--color-accent);
    font-size: var(--step-1);
    font-weight: 500;
  }

  .cart-drawer__tax {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    margin-block-end: var(--space-2xs);
  }

  .cart-drawer__payment {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    padding-block-start: var(--space-2xs);
  }

  .cart-drawer__payment-icon {
    width: 34px;
    height: auto;
    border-radius: 2px;
  }

  /* ---- free shipping bar ---- */

  .shipping-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-xs) var(--space-m);
    border-block-end: 1px solid var(--color-hairline);
  }

  .shipping-bar__text {
    font-size: 0.8rem;
    color: var(--color-text-muted);
  }

  .shipping-bar__track {
    height: 3px;
    border-radius: 2px;
    background-color: var(--color-surface-2);
    overflow: hidden;
  }

  .shipping-bar__fill {
    width: var(--progress);
    height: 100%;
    background-color: var(--color-origin);
    transition: width var(--motion-slow) var(--ease);
  }
/* sections/cart.liquid */

  .cart__title {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    flex-wrap: wrap;
    margin-block-end: var(--space-l);
  }

  .cart__count {
    color: var(--color-text-muted);
  }

  .cart__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    padding-block: var(--space-xl);
    color: var(--color-text-muted);
  }

  .cart__form {
    margin: 0;
  }

  .cart__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: start;
  }

  .cart__summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .cart__discounts {
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
  }

  .cart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
    padding-block-start: var(--space-2xs);
    border-block-start: 1px solid var(--color-hairline);
  }

  .cart__amount {
    color: var(--color-accent);
    font-size: var(--step-2);
    font-weight: 500;
  }

  .cart__tax {
    color: var(--color-text-muted);
    font-size: 0.78rem;
  }

  .cart__continue {
    align-self: center;
  }

  @media screen and (min-width: 750px) {
    .cart__layout {
      grid-template-columns: minmax(0, 1fr) minmax(min(320px, 100%), 380px);
      gap: var(--space-xl);
    }

    .cart__summary {
      position: sticky;
      inset-block-start: var(--space-m);
    }
  }
/* sections/collection-list.liquid */

  .collist__heading {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-3));
    margin-block-end: var(--space-l);
  }

  .collist__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-l) var(--space-m);
  }

  .collist__hint {
    color: var(--color-text-muted);
    font-size: 0.85rem;
  }
/* sections/collection.liquid */

  .collection__banner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    max-width: 60ch;
    margin-block-end: var(--space-l);
  }

  .collection__count {
    color: var(--color-text-muted);
  }

  .collection__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
    align-items: start;
  }

  .collection__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l) var(--space-s);
  }

  .collection__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    padding-block: var(--space-xl);
    color: var(--color-text-muted);
  }

  .collection__filter-toggle > summary {
    list-style: none;
  }

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

  .collection__filter-body {
    padding-block-start: var(--space-s);
  }

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

  @media screen and (min-width: 990px) {
    .collection__layout {
      grid-template-columns: minmax(min(220px, 100%), 260px) minmax(0, 1fr);
      gap: var(--space-xl);
    }

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

    .collection__aside {
      position: sticky;
      inset-block-start: var(--space-m);
    }

    /* From this width the disclosure is always open and its summary is gone:
       the sidebar is simply visible. */
    .collection__filter-toggle > summary {
      display: none;
    }

    .collection__filter-body {
      padding-block-start: 0;
    }
  }
/* sections/collections.liquid */

  .collections__head {
    margin-block-end: var(--space-l);
  }

  .collections__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--space-l) var(--space-m);
  }

  .collection-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    text-decoration: none;
  }

  .collection-card__title {
    font-family: var(--font-head);
    font-size: var(--step-1);
    font-optical-sizing: auto;
  }

  .collection-card:hover .collection-card__title {
    color: var(--color-accent);
  }

  .collection-card__count {
    color: var(--color-text-muted);
  }
/* sections/contact.liquid */

  .contact__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    max-width: 60ch;
    margin-block-end: var(--space-l);
  }

  .contact__title {
    font-size: clamp(var(--step-2), 4vw, var(--step-4));
  }

  .contact__intro {
    color: var(--color-text-muted);
  }

  .contact__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: start;
  }

  .contact__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    margin: 0;
    max-width: 560px;
  }

  .contact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--space-s);
  }

  .contact__required {
    color: var(--color-accent);
  }

  .contact__optional {
    color: var(--color-text-muted);
    letter-spacing: 0;
    text-transform: none;
  }

  .contact__submit {
    align-self: flex-start;
  }

  .contact__notice {
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9rem;
  }

  .contact__notice--success {
    border-color: var(--color-origin);
    color: var(--color-origin);
  }

  .contact__notice--error {
    border-color: var(--color-error);
    color: var(--color-error);
  }

  .contact__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .contact__info-heading {
    margin-block-end: var(--space-3xs);
  }

  .contact__info-text {
    font-size: 0.92rem;
  }

  @media screen and (min-width: 990px) {
    .contact__layout {
      grid-template-columns: minmax(0, 1fr) minmax(min(260px, 100%), 320px);
      gap: var(--space-2xl);
    }
  }
/* sections/countdown.liquid */

  .countdown {
    background-color: var(--color-surface);
    border-block: 1px solid var(--color-hairline);
  }

  .countdown__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block: var(--space-l);
  }

  .countdown__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    max-width: 46ch;
  }

  .countdown__heading {
    font-size: clamp(var(--step-1), 2.8vw, var(--step-3));
  }

  .countdown__button {
    align-self: flex-start;
    margin-block-start: var(--space-3xs);
  }

  .countdown__clock {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
  }

  .countdown__clock[hidden],
  .countdown__done[hidden] {
    display: none;
  }

  .countdown__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
    min-width: 2.6em;
  }

  .countdown__value {
    color: var(--color-accent);
    font-family: var(--font-head);
    font-size: clamp(var(--step-3), 4vw, var(--step-5));
    font-optical-sizing: auto;
    line-height: 1;
  }

  .countdown__sep {
    color: var(--color-text-muted);
    font-size: var(--step-2);
    transform: translateY(-0.4em);
  }

  .countdown__done {
    color: var(--color-origin);
    font-size: var(--step-1);
  }
/* sections/customer-account.liquid */

  .account__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: start;
  }

  .account__section-title {
    margin-block-end: var(--space-s);
  }

  .account__empty {
    color: var(--color-text-muted);
  }

  .account__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .account__address {
    font-size: 0.9rem;
    font-style: normal;
    margin-block-end: var(--space-2xs);
  }

  @media screen and (min-width: 990px) {
    .account__layout {
      grid-template-columns: minmax(0, 1fr) minmax(min(280px, 100%), 320px);
      gap: var(--space-xl);
    }
  }
/* sections/customer-addresses.liquid */

  .addresses__new-toggle {
    list-style: none;
    width: fit-content;
  }

  .addresses__new-toggle::-webkit-details-marker {
    display: none;
  }

  .addresses__new-body,
  .addresses__edit-body {
    padding-block-start: var(--space-s);
  }

  .addresses__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-m);
  }

  .addresses__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .addresses__badge {
    color: var(--color-accent);
  }

  .addresses__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
    margin-block-start: auto;
  }

  .addresses__actions form {
    margin: 0;
  }

  .addresses__delete:hover {
    color: var(--color-error);
  }

  .addresses__default {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: 0.88rem;
  }

  .addresses__default input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
  }
/* sections/customer-order.liquid */

  .account__table tfoot td {
    border-block-end: 0;
    color: var(--color-text-muted);
  }

  .account__total-row td {
    padding-block-start: var(--space-xs);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: 500;
  }

  .account__total-row .data {
    color: var(--color-accent);
    font-size: var(--step-1);
  }

  .account__tracking {
    display: block;
    font-size: 0.8rem;
  }

  .account__addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-l);
  }

  @media screen and (max-width: 749px) {
    .account__table tfoot td[colspan] {
      justify-content: flex-start;
    }
  }
/* sections/faq.liquid */

  .faqsec__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: start;
  }

  .faqsec__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .faqsec__heading {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-3));
  }

  .faqsec__text {
    color: var(--color-text-muted);
  }

  .faqsec__q {
    font-size: 0.98rem;
    font-weight: 500;
  }

  .faqsec__list .disclosure:last-child {
    border-block-end: 1px solid var(--color-hairline);
  }

  @media screen and (min-width: 990px) {
    .faqsec__layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
      gap: var(--space-2xl);
    }

    .faqsec__head {
      position: sticky;
      inset-block-start: var(--space-m);
    }
  }
/* sections/featured-blog.liquid */

  .featblog__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-end: var(--space-l);
  }

  .featblog__heading {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-3));
  }

  .featblog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--space-xl) var(--space-m);
  }

  .featblog__hint {
    padding: var(--space-l);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    text-align: center;
  }
/* sections/featured-collection.liquid */

  .featured__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-end: var(--space-l);
  }

  .featured__heading-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    max-width: 52ch;
  }

  .featured__heading {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-3));
  }

  .featured__text {
    color: var(--color-text-muted);
  }

  .featured__link {
    flex: none;
  }

  .featured__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l) var(--space-s);
  }

  .featured__placeholder {
    padding: var(--space-l);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    text-align: center;
  }

  /* The scroll layout keeps its cards at a readable width and lets the row
     run past the edge, rather than shrinking four cards onto a phone. */
  @media screen and (max-width: 749px) {
    .featured__grid--scroll {
      display: flex;
      gap: var(--space-s);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      margin-inline: calc(var(--page-margin) * -1);
      padding-inline: var(--page-margin);
      scrollbar-width: none;
    }

    .featured__grid--scroll::-webkit-scrollbar {
      display: none;
    }

    .featured__grid--scroll > * {
      flex: 0 0 62%;
      scroll-snap-align: start;
    }
  }

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

  @media screen and (min-width: 990px) {
    .featured__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
/* sections/featured-product.liquid */

  .featprod__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: center;
  }

  .featprod__media-link {
    display: block;
  }

  .featprod__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    max-width: 480px;
  }

  .featprod__origin {
    margin-block-end: calc(var(--space-s) * -0.6);
  }

  .featprod__title {
    font-size: clamp(var(--step-2), 3.6vw, var(--step-4));
    font-weight: 400;
  }

  .featprod__title-link {
    text-decoration: none;
  }

  .featprod__title-link:hover {
    color: var(--color-accent);
  }

  .featprod__desc {
    color: var(--color-text-muted);
  }

  .featprod__cta {
    align-self: flex-start;
  }

  .featprod__hint {
    padding: var(--space-l);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    text-align: center;
  }

  @media screen and (min-width: 990px) {
    .featprod__layout {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: var(--space-2xl);
    }
  }
/* sections/footer.liquid */

  .footer {
    border-block-start: 1px solid var(--color-hairline);
    background-color: var(--color-bg);
  }

  .footer__inner {
    padding-block: var(--space-2xl) var(--space-m);
  }

  .footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--space-xl) var(--space-l);
    padding-block-end: var(--space-xl);
  }

  .footer__column--newsletter {
    grid-column: span 2;
    min-width: 0;
  }

  .footer__heading {
    margin-block-end: var(--space-xs);
  }

  .footer__list,
  .footer__social,
  .footer__policies {
    margin: 0;
    padding: 0;
  }

  .footer__list li,
  .footer__social li {
    padding-block: 0.22rem;
  }

  .footer__link {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    text-decoration: none;
  }

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

  .footer__text {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    margin-block-end: var(--space-xs);
  }

  .footer__field-row {
    display: flex;
    gap: var(--space-2xs);
  }

  .footer__field-row .field__input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .footer__success {
    color: var(--color-origin);
    font-size: 0.88rem;
    margin-block-start: var(--space-3xs);
  }

  .footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--color-hairline);
  }

  .footer__bar-start,
  .footer__bar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
  }

  .footer__copy,
  .footer__policies li {
    color: var(--color-text-muted);
    font-size: 0.8rem;
  }

  .footer__policies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }

  .footer__locale {
    margin: 0;
  }

  .footer__select {
    min-height: 36px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 0.8rem;
  }

  .footer__payment {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
  }

  .footer__payment-icon {
    width: 38px;
    height: auto;
    border-radius: 2px;
  }

  @media screen and (max-width: 749px) {
    .footer__column--newsletter {
      grid-column: span 1;
    }

    .footer__bar {
      flex-direction: column;
      align-items: flex-start;
    }
  }
/* sections/guides.liquid */

  .guides__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin-block-end: var(--space-l);
  }

  .guides__heading {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-3));
  }

  .guides__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--space-l) var(--space-m);
  }

  .guide {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .guide__title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    margin-block-start: var(--space-2xs);
  }

  .guide__link {
    text-decoration: none;
  }

  .guide__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

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

  .guide__text {
    color: var(--color-text-muted);
    font-size: 0.88rem;
  }

  .guide__spec {
    color: var(--color-origin);
    font-size: 0.78rem;
  }
/* sections/header.liquid */

  .header {
    position: relative;
    z-index: 20;
    border-block-end: 1px solid var(--color-hairline);
    background-color: var(--color-bg);
  }

  .header--sticky {
    position: sticky;
    inset-block-start: 0;
  }

  .header__inner {
    display: grid;
    /* minmax(0, 1fr) rather than 1fr: an equal share for each side track no
       matter how wide the icons are, so the wordmark sits on the true centre
       instead of being pushed off by the heavier side. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-s);
    min-height: 68px;
  }

  .header__brand {
    grid-column: 2;
    justify-self: center;
    text-decoration: none;
  }

  .header__logo {
    width: auto;
    max-height: 40px;
  }

  .header__wordmark {
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-optical-sizing: auto;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .header__nav--primary {
    display: none;
    grid-column: 1;
  }

  .header__menu {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    margin: 0;
    padding: 0;
  }

  .header__item {
    position: static;
  }

  .header__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.5rem 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
  }

  .header__link:hover,
  .header__link--active {
    color: var(--color-accent);
  }

  .header__chevron {
    transition: transform var(--motion-fast) var(--ease);
  }

  [data-dropdown-toggle][aria-expanded='true'] .header__chevron {
    transform: rotate(180deg);
  }

  /* The panel spans the viewport and hangs off the header's bottom edge, so
     the pointer never crosses a gap on its way down into the menu. */
  .header__dropdown {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    border-block: 1px solid var(--color-hairline);
    background-color: var(--color-surface);
  }

  .header__dropdown[hidden] {
    display: none;
  }

  .header__dropdown-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding-block: var(--space-l);
  }

  .header__dropdown-inner:has(.header__feature) {
    grid-template-columns: 1fr minmax(0, 320px);
  }

  .header__sublist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--space-s) var(--space-l);
    margin: 0;
    padding: 0;
    align-content: start;
  }

  .header__sublink {
    display: inline-block;
    padding-block: 0.15rem;
    font-size: 0.95rem;
    text-decoration: none;
  }

  .header__sublink:hover,
  .header__sublink--active {
    color: var(--color-accent);
  }

  .header__subsublist {
    margin: var(--space-3xs) 0 0;
    padding: 0;
  }

  .header__subsublink {
    display: inline-block;
    padding-block: 0.1rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-decoration: none;
  }

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

  .header__feature {
    text-decoration: none;
  }

  .header__feature-media {
    margin-block-end: var(--space-2xs);
  }

  .header__feature-heading {
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-optical-sizing: auto;
  }

  .header__feature-text {
    color: var(--color-text-muted);
    font-size: 0.85rem;
  }

  .header__utils {
    display: flex;
    grid-column: 3;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3xs);
  }

  .header__burger {
    justify-self: start;
  }

  .header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
  }

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

  .header__icon--desktop {
    display: none;
  }

  .header__cart,
  .header__wish {
    position: relative;
  }

  .header__count {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 4px;
    min-width: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background-color: var(--color-accent);
    color: var(--color-accent-contrast);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
    letter-spacing: 0;
  }

  .header__count[hidden] {
    display: none;
  }

  /* ---- drawer ---- */

  .drawer {
    width: min(88vw, 380px);
    max-width: none;
    height: 100%;
    max-height: 100%;
    margin: 0 auto 0 0;
    padding: 0;
    border: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .drawer::backdrop {
    background-color: rgb(0 0 0 / 0.55);
  }

  .drawer[open] {
    display: flex;
    flex-direction: column;
  }

  .drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-s) var(--space-s) var(--space-s) var(--space-m);
    border-block-end: 1px solid var(--color-hairline);
  }

  .drawer__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-s) var(--space-m);
  }

  .drawer__menu {
    margin: 0;
    padding: 0;
  }

  .drawer__link,
  .drawer__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    width: 100%;
    padding-block: 0.85rem;
    border-block-end: 1px solid var(--color-hairline);
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-optical-sizing: auto;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
  }

  .drawer__summary::-webkit-details-marker {
    display: none;
  }

  .drawer__details[open] .drawer__summary .icon {
    transform: rotate(180deg);
  }

  .drawer__sublist {
    margin: 0;
    padding: var(--space-2xs) 0 var(--space-s);
  }

  .drawer__sublink {
    display: block;
    padding-block: 0.4rem;
    color: var(--color-text-muted);
    text-decoration: none;
  }

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

  .drawer__foot {
    padding: var(--space-m);
    border-block-start: 1px solid var(--color-hairline);
  }

  /* ---- desktop ---- */

  @media screen and (min-width: 990px) {
    .header__burger {
      display: none;
    }

    .header__nav--primary {
      display: block;
    }

    .header__icon--desktop {
      display: inline-flex;
    }

    .header__inner {
      min-height: 76px;
    }
  }
/* sections/hero.liquid */

  .hero {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    isolation: isolate;
    background-color: var(--color-surface);
    color: var(--hero-text);
  }

  .hero--short { min-height: 62svh; }
  .hero--medium { min-height: 78svh; }
  .hero--tall { min-height: 92svh; }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
  }

  .hero__image,
  .hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* A single scrim rather than a flat wash: darkest where the text sits, so
     the photograph keeps its top end. */
  .hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgb(0 0 0 / var(--overlay)) 0%,
      rgb(0 0 0 / calc(var(--overlay) * 0.72)) 45%,
      rgb(0 0 0 / calc(var(--overlay) * 0.18)) 100%
    );
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-self: end;
    padding-block: var(--space-2xl);
    max-width: 100%;
  }

  .hero--left .hero__content { align-items: flex-start; text-align: start; }
  .hero--center .hero__content { align-items: center; text-align: center; }
  .hero--center { justify-items: center; }

  .hero__eyebrow,
  .hero__fact-label {
    color: inherit;
    opacity: 0.75;
  }

  .hero__heading {
    max-width: 18ch;
    font-size: clamp(var(--step-4), 7vw, calc(var(--step-5) * 1.35));
    font-weight: 300;
    line-height: var(--leading-tight);
  }

  .hero--center .hero__heading {
    max-width: 22ch;
  }

  .hero__text {
    max-width: 46ch;
    font-size: var(--step-1);
    opacity: 0.88;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-2xs);
  }

  /* The strip sits on the cellar, not on the photograph, so the numbers are
     read against a known background rather than against whatever the image
     happens to be doing at that corner. */
  .hero__facts {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: var(--space-s) var(--space-l);
    padding-block: var(--space-m);
    border-block-start: 1px solid var(--color-hairline);
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .hero__fact {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
  }

  .hero__fact-value {
    font-family: var(--font-head);
    font-size: var(--step-2);
    font-optical-sizing: auto;
    line-height: 1.1;
  }

  @media screen and (max-width: 749px) {
    .hero--short { min-height: 56svh; }
    .hero--medium { min-height: 68svh; }
    .hero--tall { min-height: 82svh; }

    .hero__content {
      padding-block: var(--space-xl);
    }
  }
/* sections/image-banner.liquid */

  .imgbanner {
    position: relative;
    overflow: hidden;
    background-color: var(--color-surface);
  }

  .imgbanner--short { height: 42svh; }
  .imgbanner--medium { height: 62svh; }
  .imgbanner--tall { height: 82svh; }

  .imgbanner__image,
  .imgbanner__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .imgbanner__placeholder {
    background: linear-gradient(160deg, var(--color-surface-2), var(--color-bg));
  }

  .imgbanner__caption {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-block: var(--space-s);
    color: var(--color-label);
    background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent);
  }

  .imgbanner__eyebrow {
    color: inherit;
    opacity: 0.8;
  }

  .imgbanner__text {
    font-family: var(--font-head);
    font-size: var(--step-1);
    font-optical-sizing: auto;
  }
/* sections/logo-list.liquid */

  .logos__heading {
    margin-block-end: var(--space-m);
    text-align: center;
  }

  .logos__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-l) var(--space-xl);
  }

  .logos__image {
    width: auto;
    max-width: 140px;
    max-height: 44px;
    object-fit: contain;
    /* Logos arrive in every colour a supplier ever used. Muting them keeps
       the row from turning into a paint chart, and hover gives back the
       original for anyone looking closely. */
    opacity: 0.62;
    filter: grayscale(1);
    transition: opacity var(--motion) var(--ease), filter var(--motion) var(--ease);
  }

  .logos__item:hover .logos__image {
    opacity: 1;
    filter: none;
  }

  .logos__text {
    color: var(--color-text-muted);
    font-family: var(--font-head);
    font-size: var(--step-1);
    font-optical-sizing: auto;
  }
/* sections/multicolumn.liquid */

  .multicol__heading {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-3));
    margin-block-end: var(--space-l);
    max-width: 30ch;
  }

  .multicol__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l) var(--space-m);
  }

  .multicol__cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--color-hairline);
  }

  .multicol__media {
    max-width: 96px;
    margin-block-end: var(--space-2xs);
  }

  .multicol__title {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .multicol__text {
    color: var(--color-text-muted);
    font-size: 0.92rem;
  }

  .multicol__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-block-start: var(--space-3xs);
    font-size: 0.85rem;
    text-decoration: none;
  }

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

  @media screen and (min-width: 750px) {
    .multicol__grid {
      grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
    }
  }
/* sections/newsletter.liquid */

  .newsletter {
    background-color: var(--color-surface);
  }

  .newsletter__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    max-width: 56ch;
    margin-inline: auto;
    text-align: center;
  }

  .newsletter__heading {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-3));
  }

  .newsletter__text {
    color: var(--color-text-muted);
  }

  .newsletter__form {
    width: min(100%, 440px);
    margin-block-start: var(--space-2xs);
  }

  .newsletter__row {
    display: flex;
    gap: var(--space-2xs);
  }

  .newsletter__row .field__input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .newsletter__success {
    margin-block-start: var(--space-2xs);
    color: var(--color-origin);
    font-size: 0.88rem;
  }
/* sections/origins.liquid */

  .origins__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    max-width: 56ch;
    margin-block-end: var(--space-l);
  }

  .origins__heading {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-3));
  }

  .origins__text {
    color: var(--color-text-muted);
  }

  .origins__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: start;
  }

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

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

  .origin-row__link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--space-2xs);
    padding-block: var(--space-xs);
    border-block-end: 1px solid var(--color-hairline);
    text-decoration: none;
  }

  a.origin-row__link:hover .origin-row__place {
    color: var(--color-accent);
  }

  .origin-row__place {
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .origin-row__leader {
    align-self: end;
    margin-block-end: 0.32em;
    border-block-end: 1px dotted var(--color-hairline);
  }

  .origin-row__detail {
    color: var(--color-text-muted);
    font-size: 0.82rem;
  }

  @media screen and (min-width: 990px) {
    .origins__layout {
      grid-template-columns: minmax(0, 1.2fr) minmax(min(280px, 100%), 380px);
      gap: var(--space-2xl);
    }
  }
/* sections/page.liquid */

  .page-content__head {
    margin-block-end: var(--space-l);
  }

  .page-content__title {
    font-size: clamp(var(--step-2), 4vw, var(--step-4));
  }

  /* A measure, not a column: long-form pages are read, not scanned. */
  .page-content__body {
    max-width: 68ch;
  }
/* sections/password.liquid */

  .password {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: var(--space-l) var(--page-margin);
  }

  .password__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);
    width: min(100%, 480px);
    text-align: center;
  }

  .password__logo {
    max-height: 56px;
    width: auto;
  }

  .password__wordmark {
    font-size: var(--step-3);
    letter-spacing: 0.03em;
  }

  .password__text {
    color: var(--color-text-muted);
  }

  .password__row {
    display: flex;
    gap: var(--space-2xs);
  }

  .password__row .field__input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .password__newsletter,
  .password__form {
    width: 100%;
    margin: 0;
  }

  .password__success {
    color: var(--color-origin);
    font-size: 0.85rem;
    margin-block-start: var(--space-3xs);
  }

  .password__enter {
    width: 100%;
    margin-block-start: var(--space-s);
    border-block-start: 1px solid var(--color-hairline);
    padding-block-start: var(--space-s);
  }

  .password__enter-toggle {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    list-style: none;
    margin-block-end: var(--space-2xs);
  }

  .password__enter-toggle::-webkit-details-marker {
    display: none;
  }

  .password__enter-toggle:hover {
    color: var(--color-accent);
  }
/* sections/predictive-search.liquid */

  .suggest {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .suggest__empty {
    color: var(--color-text-muted);
  }

  .suggest__label {
    margin-block-end: var(--space-2xs);
  }

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

  .suggest__item {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) 0;
    border-block-end: 1px solid var(--color-hairline);
    text-decoration: none;
  }

  .suggest__item--text {
    grid-template-columns: 1fr;
  }

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

  .suggest__body {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    min-width: 0;
  }

  .suggest__title {
    font-size: 0.92rem;
  }

  .suggest__meta {
    font-size: 0.72rem;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }

  .suggest__price {
    color: var(--color-accent);
    font-size: 0.85rem;
  }
/* sections/producer.liquid */

  .producer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: center;
  }

  .producer__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: 56ch;
  }

  .producer__heading {
    font-size: clamp(var(--step-2), 3.6vw, var(--step-3));
  }

  .producer__text {
    color: var(--color-text-muted);
  }

  .producer__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
    gap: var(--space-s);
    margin: var(--space-2xs) 0 0;
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--color-hairline);
  }

  .producer__fact-value {
    margin: 0.1em 0 0;
    color: var(--color-origin);
    font-family: var(--font-head);
    font-size: var(--step-1);
    font-optical-sizing: auto;
  }

  .producer__button {
    align-self: flex-start;
    margin-block-start: var(--space-2xs);
  }

  @media screen and (min-width: 990px) {
    .producer__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-2xl);
    }

    .producer__inner--right .producer__media {
      order: 2;
    }
  }
/* sections/product.liquid */

  .product {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: start;
  }

  .product__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    min-width: 0;
  }

  .product__origin {
    margin: 0;
  }

  .product__title {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-4));
    font-weight: 400;
  }

  /* The origin, the title and the price read as one stacked unit, so the gap
     between them is tighter than the gap between blocks. */
  .product__origin + .product__title {
    margin-block-start: calc(var(--space-m) * -1 + var(--space-3xs));
  }

  .product__title + .product__price {
    margin-block-start: calc(var(--space-m) * -1 + var(--space-2xs));
  }

  .product__sku {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    margin-block-start: var(--space-3xs);
  }

  /* ---- gauge ---- */

  .gauge {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .gauge__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
  }

  .gauge__value {
    color: var(--color-accent);
    font-size: 0.85rem;
  }

  .gauge__bar {
    display: flex;
    gap: 3px;
  }

  .gauge__step {
    flex: 1 1 0;
    height: 6px;
    border-radius: 1px;
    background-color: var(--color-surface-2);
  }

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

  .gauge__ends {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-muted);
    font-size: 0.7rem;
  }

  /* ---- disclosure ---- */

  .disclosure {
    border-block-start: 1px solid var(--color-hairline);
  }

  .disclosure__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    padding-block: var(--space-xs);
    cursor: pointer;
    list-style: none;
  }

  .disclosure__summary::-webkit-details-marker {
    display: none;
  }

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

  .disclosure[open] .disclosure__summary .icon {
    transform: rotate(180deg);
  }

  .disclosure__body {
    padding-block-end: var(--space-s);
  }

  .composition__label {
    margin-block-start: var(--space-xs);
  }

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

  .composition__text {
    font-size: 0.9rem;
  }

  .composition__allergens {
    font-weight: 500;
  }

  .composition__note {
    margin-block-start: var(--space-s);
    color: var(--color-text-muted);
    font-size: 0.75rem;
  }

  /* ---- sticky buy bar ---- */

  .stickybar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 30;
    background-color: var(--color-surface);
    border-block-start: 1px solid var(--color-hairline);
    transform: translateY(0);
    transition: transform var(--motion) var(--ease);
  }

  .stickybar[hidden] {
    display: block;
    transform: translateY(110%);
    pointer-events: none;
  }

  .stickybar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--space-2xs);
    min-height: 60px;
  }

  .stickybar__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-head);
    font-size: 1rem;
    font-optical-sizing: auto;
    color: var(--color-text);
  }

  .stickybar__price {
    flex: none;
    color: var(--color-accent);
    font-weight: 500;
  }

  .stickybar__button {
    flex: none;
  }

  .product__wish {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .product__wish-label {
    color: var(--color-text-muted);
    font-size: 0.85rem;
  }

  .product__share {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .product__share-done {
    color: var(--color-origin);
    font-size: 0.82rem;
  }

  .product__share-done[hidden] {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .product {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      gap: var(--space-xl);
    }

    .product__info--sticky {
      position: sticky;
      inset-block-start: var(--space-m);
    }
  }
/* sections/quick-view.liquid */

  .qview {
    width: min(94vw, 720px);
    max-height: 90svh;
    margin: auto;
    padding: 0;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius);
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .qview::backdrop {
    background-color: rgb(0 0 0 / 0.6);
  }

  .qview__panel {
    position: relative;
    padding: var(--space-m);
  }

  .qview__close {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-end: var(--space-2xs);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
  }

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

  .qview__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }

  .qview__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .qview__title {
    font-size: var(--step-2);
    padding-inline-end: var(--space-l);
  }

  .qview__price {
    color: var(--color-accent);
    font-size: var(--step-1);
    font-weight: 500;
  }

  .qview__price[hidden] {
    display: none;
  }

  .qview__unit {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.72em;
    font-weight: 400;
  }

  .qview__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    margin: 0;
  }

  .qview__full {
    font-size: 0.85rem;
    align-self: flex-start;
  }

  @media screen and (min-width: 750px) {
    .qview__content {
      grid-template-columns: 300px 1fr;
    }
  }
/* sections/recently-viewed.liquid */

  .recent[hidden] {
    display: none;
  }

  .recent__heading {
    font-size: clamp(var(--step-1), 3vw, var(--step-2));
    margin-block-end: var(--space-m);
  }

  .recent__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l) var(--space-s);
  }

  @media screen and (min-width: 750px) {
    .recent__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-xl) var(--space-m);
    }
  }
/* sections/related-products.liquid */

  .related {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  .related__block:empty {
    display: none;
  }

  .related__heading {
    font-size: clamp(var(--step-1), 3vw, var(--step-2));
    margin-block-end: var(--space-m);
  }

  .related__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l) var(--space-s);
  }

  @media screen and (min-width: 750px) {
    .related__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-xl) var(--space-m);
    }
  }
/* sections/reviews.liquid */

  .reviews__heading {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-3));
    margin-block-end: var(--space-l);
  }

  .reviews__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--space-m);
  }

  .review {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin: 0;
    padding: var(--space-m);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius);
  }

  .review__stars [aria-hidden] {
    display: flex;
    gap: 2px;
    color: var(--color-accent);
  }

  .review__quote {
    margin: 0;
    font-family: var(--font-head);
    font-size: var(--step-1);
    font-optical-sizing: auto;
    line-height: 1.4;
    text-wrap: pretty;
  }

  .review__author {
    margin-block-start: auto;
    color: var(--color-text-muted);
  }

  .review__detail {
    display: block;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.78rem;
  }
/* sections/rich-text.liquid */

  .richtext__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    max-width: 62ch;
  }

  .richtext--center .richtext__inner {
    margin-inline: auto;
    align-items: center;
    text-align: center;
  }

  .richtext__heading {
    font-size: clamp(var(--step-2), 3.6vw, var(--step-4));
    font-weight: 300;
  }

  .richtext__body {
    color: var(--color-text-muted);
    font-size: var(--step-1);
    line-height: 1.7;
  }

  .richtext__button {
    align-self: flex-start;
  }

  .richtext--center .richtext__button {
    align-self: center;
  }
/* sections/search-modal.liquid */

  .search-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .search-modal::backdrop {
    background-color: rgb(0 0 0 / 0.6);
  }

  .search-modal[open] {
    display: flex;
    flex-direction: column;
  }

  .search-modal__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding-block: var(--space-m);
    overflow: hidden;
  }

  .search-modal__form {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block-end: var(--space-2xs);
    border-block-end: 1px solid var(--color-border);
    margin: 0;
  }

  .search-modal__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    border: 0;
    background: none;
    color: inherit;
    font-family: var(--font-head);
    font-size: var(--step-1);
    font-optical-sizing: auto;
  }

  .search-modal__input::-webkit-search-cancel-button {
    display: none;
  }

  .search-modal__input:focus {
    outline: none;
  }

  .search-modal__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
  }

  .search-modal__reset[hidden] {
    display: none;
  }

  .search-modal__close {
    flex: none;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.5rem;
  }

  .search-modal__close:hover {
    color: var(--color-accent);
  }

  .search-modal__results {
    flex: 1 1 auto;
    overflow-y: auto;
  }
/* sections/search.liquid */

  .search-page__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    max-width: 60ch;
    margin-block-end: var(--space-l);
  }

  .search-page__title {
    font-size: clamp(var(--step-2), 4vw, var(--step-4));
  }

  .search-page__form {
    margin: 0;
  }

  .search-page__row {
    display: flex;
    gap: var(--space-2xs);
  }

  .search-page__row .field__input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .search-page__count {
    color: var(--color-text-muted);
  }

  .search-result__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    text-decoration: none;
  }

  .search-result__title {
    font-size: var(--step-1);
  }

  .search-result__link:hover .search-result__title {
    color: var(--color-accent);
  }

  .search-result__text {
    color: var(--color-text-muted);
    font-size: 0.9rem;
  }
/* sections/store-locator.liquid */

  .stores__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    max-width: 56ch;
    margin-block-end: var(--space-l);
  }

  .stores__heading {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-3));
  }

  .stores__text {
    color: var(--color-text-muted);
  }

  .stores__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: start;
  }

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

  .stores__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

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

  .store {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--color-hairline);
  }

  .store[hidden] {
    display: none;
  }

  .store__name {
    font-family: var(--font-head);
    font-size: var(--step-1);
    font-optical-sizing: auto;
  }

  .store__address {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-style: normal;
  }

  .store__row {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: var(--space-2xs);
    align-items: baseline;
    font-size: 0.85rem;
  }

  .store__label {
    color: var(--color-text-muted);
  }

  .store__directions {
    align-self: flex-start;
    margin-block-start: var(--space-3xs);
  }

  .stores__none[hidden] {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .stores__layout {
      grid-template-columns: minmax(0, 1.1fr) minmax(min(320px, 100%), 420px);
      gap: var(--space-2xl);
    }

    .stores__panel {
      max-height: 70svh;
      overflow-y: auto;
    }
  }
/* sections/subscription-pitch.liquid */

  .subpitch {
    background-color: var(--color-surface);
  }

  .subpitch__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: center;
  }

  .subpitch__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: 56ch;
  }

  .subpitch__heading {
    font-size: clamp(var(--step-2), 3.6vw, var(--step-3));
  }

  .subpitch__text {
    color: var(--color-text-muted);
  }

  .subpitch__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    margin: var(--space-2xs) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
  }

  .subpitch__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2xs) var(--space-s);
    align-items: baseline;
  }

  /* The number is written out, not generated by a counter, so it is read
     aloud as part of the step rather than dropped by the screen reader. */
  .subpitch__step-number {
    color: var(--color-accent);
    font-family: var(--font-head);
    font-size: var(--step-1);
    font-optical-sizing: auto;
    line-height: 1;
  }

  .subpitch__step-body {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
  }

  .subpitch__step-title {
    font-weight: 500;
  }

  .subpitch__step-text {
    color: var(--color-text-muted);
    font-size: 0.9rem;
  }

  .subpitch__button {
    align-self: flex-start;
    margin-block-start: var(--space-2xs);
  }

  @media screen and (min-width: 990px) {
    .subpitch__inner {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: var(--space-2xl);
    }
  }
/* sections/video.liquid */

  .videosec__heading {
    font-size: clamp(var(--step-2), 3.4vw, var(--step-3));
    margin-block-end: var(--space-m);
  }

  .videosec__frame {
    position: relative;
  }

  .videosec__poster,
  .videosec__player,
  .videosec__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
  }

  .videosec__empty {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--color-surface-2), var(--color-bg));
  }

  .videosec__play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border: 1px solid var(--color-label);
    border-radius: 50%;
    background: rgb(18 22 15 / 0.55);
    color: var(--color-label);
    cursor: pointer;
    transition: background-color var(--motion) var(--ease), transform var(--motion) var(--ease);
  }

  .videosec__play:hover {
    background: var(--color-accent);
    transform: translate(-50%, -50%) scale(1.05);
  }
/* sections/wishlist.liquid */

  .wishlist__head {
    margin-block-end: var(--space-l);
  }

  .wishlist__title {
    font-size: clamp(var(--step-2), 4vw, var(--step-4));
  }

  .wishlist__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l) var(--space-s);
  }

  .wishlist__grid:empty {
    display: none;
  }

  .wishlist__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    color: var(--color-text-muted);
  }

  .wishlist__empty[hidden] {
    display: none;
  }

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

  @media screen and (min-width: 990px) {
    .wishlist__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
/* snippets/account-header.liquid */

  .account {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  .account--narrow {
    max-width: 460px;
  }

  .account--wide {
    max-width: var(--page-width);
  }

  .account__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .account__title {
    font-size: clamp(var(--step-2), 3.6vw, var(--step-3));
  }

  .account__subtext {
    color: var(--color-text-muted);
  }

  .account__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    margin: 0;
  }

  .account__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--space-s);
  }

  .account__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-s);
  }

  .account__aside {
    color: var(--color-text-muted);
    font-size: 0.88rem;
  }

  .account__aside a {
    color: var(--color-accent);
  }

  .account__notice {
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9rem;
  }

  .account__notice--error {
    border-color: var(--color-error);
    color: var(--color-error);
  }

  .account__notice--success {
    border-color: var(--color-origin);
    color: var(--color-origin);
  }

  .account__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }

  .account__table th {
    padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0;
    border-block-end: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: var(--tracking-eyebrow);
    text-align: start;
    text-transform: uppercase;
  }

  .account__table td {
    padding: var(--space-xs) var(--space-xs) var(--space-xs) 0;
    border-block-end: 1px solid var(--color-hairline);
    vertical-align: top;
  }

  .account__table td:last-child,
  .account__table th:last-child {
    text-align: end;
    padding-inline-end: 0;
  }

  /* Tables do not fit a phone. Below this width each row becomes a stack and
     the column heading travels with its value as a data-label. */
  @media screen and (max-width: 749px) {
    .account__table thead {
      display: none;
    }

    .account__table tr {
      display: block;
      padding-block: var(--space-xs);
      border-block-end: 1px solid var(--color-hairline);
    }

    .account__table td {
      display: flex;
      justify-content: space-between;
      gap: var(--space-s);
      padding: 0.2rem 0;
      border: 0;
      text-align: end;
    }

    .account__table td::before {
      content: attr(data-label);
      color: var(--color-text-muted);
      font-size: 0.7rem;
      letter-spacing: var(--tracking-eyebrow);
      text-transform: uppercase;
      text-align: start;
    }
  }
/* snippets/article-card.liquid */

  .article-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-decoration: none;
  }

  .article-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .article-card__title {
    font-size: var(--step-1);
  }

  .article-card__link:hover .article-card__title {
    color: var(--color-accent);
  }

  .article-card__excerpt {
    color: var(--color-text-muted);
    font-size: 0.92rem;
  }

  @media screen and (min-width: 750px) {
    .article-card--featured {
      grid-column: 1 / -1;
    }

    .article-card--featured .article-card__title {
      font-size: var(--step-2);
    }
  }
/* snippets/cart-items.liquid */

  .cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .cart-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-2xs) var(--space-xs);
    padding-block-end: var(--space-s);
    border-block-end: 1px solid var(--color-hairline);
  }

  .cart-item:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }

  .cart-item__media {
    align-self: start;
  }

  .cart-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
  }

  .cart-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  .cart-item__title a {
    text-decoration: none;
    font-size: 0.95rem;
  }

  .cart-item__title a:hover {
    color: var(--color-accent);
  }

  .cart-item__variant,
  .cart-item__property {
    color: var(--color-text-muted);
    font-size: 0.8rem;
  }

  .cart-item__plan {
    font-size: 0.78rem;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }

  .cart-item__price {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1em;
    color: var(--color-accent);
    font-size: 0.92rem;
    text-align: end;
  }

  .cart-item__was {
    color: var(--color-text-muted);
    font-size: 0.78rem;
  }

  .cart-item__unit {
    color: var(--color-text-muted);
    font-size: 0.7rem;
  }

  .cart-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  .quantity--small .quantity__button {
    width: 32px;
    min-height: 36px;
  }

  .quantity--small .quantity__input {
    width: 34px;
    min-height: 36px;
    font-size: 0.85rem;
  }

  .cart-item__remove {
    font-size: 0.78rem;
    color: var(--color-text-muted);
  }

  .cart-item__discounts {
    margin: 0;
    padding: 0;
  }

  .cart-item__discount {
    font-size: 0.78rem;
  }

  .cart-items--compact .cart-item {
    grid-template-columns: 64px 1fr;
  }
/* snippets/facets.liquid */

  .facets {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin: 0;
  }

  .facets__sort {
    padding-block-end: var(--space-2xs);
  }

  .facets__group {
    border-block-start: 1px solid var(--color-hairline);
  }

  .facets__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-xs);
    cursor: pointer;
    list-style: none;
  }

  .facets__summary::-webkit-details-marker {
    display: none;
  }

  .facets__summary .icon {
    margin-inline-start: auto;
  }

  .facets__group[open] .facets__summary .icon {
    transform: rotate(180deg);
  }

  .facets__badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border-radius: 9px;
    background-color: var(--color-accent);
    color: var(--color-accent-contrast);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  .facets__body {
    padding-block-end: var(--space-s);
  }

  .facets__values {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .facets__value {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: 0.35rem;
    font-size: 0.9rem;
    cursor: pointer;
  }

  .facets__value input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
  }

  .facets__value-count {
    margin-inline-start: auto;
    color: var(--color-text-muted);
    font-size: 0.75rem;
  }

  /* A value that would return nothing is shown and disabled rather than
     hidden, so the list does not reshuffle as choices are made. */
  .facets__value--empty {
    color: var(--color-text-muted);
    cursor: not-allowed;
  }

  .facets__prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xs);
  }

  .facets__clear {
    align-self: flex-start;
    margin-block-start: var(--space-2xs);
  }
/* snippets/icon.liquid */

  .icon {
    flex: none;
    display: block;
  }
/* snippets/metafield-rows.liquid */

  .mf-rows__heading {
    margin-block-end: var(--space-2xs);
  }

  .mf-rows__list {
    margin: 0;
  }

  .mf-rows__list dd {
    margin: 0;
  }
/* snippets/pagination.liquid */

  .pagination {
    margin-block-start: var(--space-xl);
  }

  .pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3xs);
  }

  .pagination__link,
  .pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding-inline: 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-size: 0.88rem;
    text-decoration: none;
  }

  a.pagination__link:hover {
    border-color: var(--color-border);
    color: var(--color-accent);
  }

  .pagination__link--current {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .pagination__next-icon {
    transform: rotate(-90deg);
  }

  .pagination__list li:first-child .icon {
    transform: none;
  }
/* snippets/pickup-availability-inline.liquid */

  .pickup {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-block: var(--space-xs);
    border-block-start: 1px solid var(--color-hairline);
  }

  .pickup__summary {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
  }

  /* The dot repeats what the sentence already says, so it is decorative and
     hidden from assistive technology. Availability is never carried by the
     colour alone. */
  .pickup__dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-block-start: 0.5em;
    border-radius: 50%;
    background-color: var(--color-origin);
  }

  .pickup__dot--out {
    background-color: var(--color-text-muted);
  }

  .pickup__line {
    font-size: 0.9rem;
  }

  .pickup__time,
  .pickup__store-address {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-style: normal;
  }

  .pickup__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding-block: var(--space-3xs);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    list-style: none;
  }

  .pickup__toggle::-webkit-details-marker {
    display: none;
  }

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

  .pickup__more[open] .pickup__toggle .icon {
    transform: rotate(180deg);
  }

  .pickup__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-block-start: var(--space-2xs);
  }

  .pickup__store {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 var(--space-2xs);
    font-size: 0.85rem;
  }

  .pickup__store-address {
    grid-column: 1 / -1;
  }

  .pickup__store-state {
    color: var(--color-origin);
    font-size: 0.72rem;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }

  .pickup__store-state--out {
    color: var(--color-text-muted);
  }
/* snippets/price.liquid */

  .price {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
  }

  .price__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5em;
  }

  .price__amount {
    color: var(--color-accent);
    font-weight: 500;
  }

  .price__from {
    color: var(--color-text-muted);
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
  }

  /* The struck-through original stays muted so the live price keeps the
     copper to itself. */
  .price__compare {
    color: var(--color-text-muted);
    font-size: 0.85em;
    text-decoration-thickness: 1px;
  }

  .price__unit {
    color: var(--color-text-muted);
    font-size: 0.72em;
  }

  .price--small .price__amount {
    font-size: 0.95rem;
  }

  .price--large .price__amount {
    font-size: var(--step-2);
  }

  .price--sold-out .price__amount {
    color: var(--color-text-muted);
  }
/* snippets/product-card.liquid */

  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .card__media-link {
    display: block;
    text-decoration: none;
  }

  .card__media {
    position: relative;
  }

  .card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--motion) var(--ease), transform var(--motion-slow) var(--ease);
  }

  .card__image--second {
    position: absolute;
    inset: 0;
    opacity: 0;
  }

  /* Hover swaps to the second shot; on touch there is no hover, so the first
     image simply stays. Nothing is hidden that a tap is required to reveal. */
  @media (hover: hover) {
    .card:hover .card__image--second {
      opacity: 1;
    }

    .card:hover .card__image {
      transform: scale(1.02);
    }
  }

  .card__badge {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    padding: 0.28rem 0.5rem;
    border-radius: var(--radius);
    background-color: var(--color-accent);
    color: var(--color-accent-contrast);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }

  .card__badge--out {
    background-color: var(--color-surface-2);
    color: var(--color-text);
  }

  .card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .card__origin {
    margin: 0;
  }

  .card__process {
    color: var(--color-text-muted);
  }

  .card__title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .card__link {
    text-decoration: none;
  }

  /* The whole card is clickable, but only the title is a real link, so the
     tab order holds one stop per product instead of three. */
  .card__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .card {
    position: relative;
  }

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

  .card__form {
    margin: 0;
  }

  /* The add button sits above the title's overlay so it stays clickable. */
  .card__add {
    position: relative;
    z-index: 1;
    margin-block-start: var(--space-2xs);
  }
/* snippets/product-form.liquid */

  .purchase {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .purchase__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
  }

  .purchase__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .purchase__legend {
    padding: 0;
    margin-block-end: var(--space-3xs);
  }

  .purchase__plans {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .purchase__plans[hidden] {
    display: none;
  }

  .purchase__option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0 var(--space-2xs);
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius);
    cursor: pointer;
  }

  /* :has lets the whole row show the selected state without a JS class.
     Browsers without :has still get the radio itself, which is the part
     that carries the meaning. */
  .purchase__option:has(.purchase__radio:checked) {
    border-color: var(--color-accent);
    background-color: var(--color-surface);
  }

  .purchase__option:has(.purchase__radio:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .purchase__radio {
    width: 16px;
    height: 16px;
    margin: 0.25rem 0 0;
    accent-color: var(--color-accent);
  }

  .purchase__option-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
    font-size: 0.92rem;
  }

  .purchase__option-price {
    color: var(--color-accent);
    font-weight: 500;
  }

  .purchase__saving {
    display: inline-block;
    margin-inline-start: 0.4em;
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius);
    background-color: var(--color-accent);
    color: var(--color-accent-contrast);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }

  .purchase__option-note,
  .purchase__note,
  .purchase__tax {
    grid-column: 2;
    color: var(--color-text-muted);
    font-size: 0.78rem;
  }

  .purchase__note,
  .purchase__tax {
    grid-column: auto;
  }

  .purchase__row {
    display: flex;
    gap: var(--space-2xs);
  }

  .quantity {
    display: flex;
    align-items: center;
    flex: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .quantity__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: 44px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

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

  .quantity__input {
    width: 40px;
    min-height: 44px;
    border: 0;
    background: none;
    color: inherit;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
  }

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

  .purchase__submit {
    flex: 1 1 auto;
  }

  .purchase__error[hidden] {
    display: none;
  }

  .purchase__stock {
    color: var(--color-accent);
    font-size: 0.82rem;
  }
/* snippets/product-media.liquid */

  .gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .gallery__main {
    position: relative;
  }

  .gallery__slide[hidden] {
    display: none;
  }

  .gallery__image,
  .gallery__video,
  .gallery__model {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gallery__zoom {
    position: absolute;
    inset-block-end: var(--space-2xs);
    inset-inline-end: var(--space-2xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
  }

  .gallery__zoom:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .gallery__thumb {
    position: relative;
    display: block;
    width: 72px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
  }

  .gallery__thumb img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .gallery__thumb-input:checked + .gallery__thumb {
    border-color: var(--color-accent);
  }

  .gallery__thumb-input:focus-visible + .gallery__thumb {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .gallery__thumb-badge {
    position: absolute;
    inset-block-end: 4px;
    inset-inline-end: 4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .gallery__dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: var(--color-bg);
  }

  .gallery__dialog::backdrop {
    background-color: rgb(0 0 0 / 0.85);
  }

  .gallery__full {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .gallery__close {
    position: absolute;
    inset-block-start: var(--space-s);
    inset-inline-end: var(--space-s);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
  }
/* snippets/variant-picker.liquid */

  .variants {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .variants__group {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .variants__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    padding: 0;
    margin-block-end: var(--space-3xs);
  }

  .variants__selected {
    color: var(--color-text);
    letter-spacing: 0;
    text-transform: none;
  }

  .variants__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
  }

  .variants__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  }

  .variants__label:hover {
    border-color: var(--color-accent);
  }

  .variants__input:checked + .variants__label {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
    color: var(--color-accent-contrast);
  }

  /* The visually hidden radio still receives focus, so the ring is drawn on
     the label the eye is actually looking at. */
  .variants__input:focus-visible + .variants__label {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  /* Unavailable combinations stay in place and stay selectable — choosing one
     shows a sold-out state rather than making the option disappear under the
     pointer. */
  .variants__input[data-unavailable] + .variants__label {
    color: var(--color-text-muted);
    border-color: var(--color-hairline);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }
/* snippets/wishlist-button.liquid */

  .wishbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
  }

  .wishbtn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .wishbtn--card {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-end: var(--space-2xs);
    z-index: 1;
  }

  .wishbtn__on,
  .wishbtn[aria-pressed='true'] .wishbtn__off {
    display: none;
  }

  .wishbtn[aria-pressed='true'] .wishbtn__on {
    display: inline-flex;
    color: var(--color-accent);
  }