/** Shopify CDN: Minification failed

Line 4284:0 All "@import" rules must come first

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-bar-custom (INDEX:2) */
.announcement-bar__slide {
    font-family: var(--font-heading--family);
    transform: translateY(0);
    padding-inline: 3.5rem;
  }
  .announcement-bar__track {
    position: relative;
    min-height: 2.75rem;
  }

  .announcement-bar__toggle {
    position: absolute;
    z-index: 1;
    inset-block-start: 50%;
    inset-inline-end: 0.25rem;
    translate: 0 -50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    color: currentcolor;
    background: transparent;
    border: 0;
  }

  .announcement-bar__toggle:focus-visible {
    outline: 3px solid currentcolor;
    outline-offset: -4px;
  }

  .announcement-bar__toggle .svg-wrapper {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .announcement-bar {
    /* 4.0 is single-palette: the old color_scheme picker (was scheme-5,
       #323232 / white) no longer resolves to a distinct color, so drive the
       bar color from per-section color settings instead. */
    background: var(--ann-bg, #323232);
    color: var(--ann-text, #ffffff);
  }
/* END_SECTION:announcement-bar-custom */

/* START_SECTION:cg-about (INDEX:6) */
[data-cg-about].cg-about {
    isolation: isolate;
    position: relative;
  }

  [data-cg-about].cg-about .cg-about__grain {
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
    mix-blend-mode: multiply;
  }

  [data-cg-about].cg-about .font-display {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-feature-settings: 'liga', 'kern';
  }

  [data-cg-about].cg-about .font-mono {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
  }

  [data-cg-about].cg-about .cg-about__inner {
    padding-top: calc(var(--cg-about-pt, 112px) * 0.7);
    padding-bottom: calc(var(--cg-about-pb, 96px) * 0.7);
    padding-left: calc(var(--cg-about-pl, 40px) * 0.6);
    padding-right: calc(var(--cg-about-pr, 40px) * 0.6);
  }

  @media (min-width: 768px) {
    [data-cg-about].cg-about .cg-about__inner {
      padding-top: var(--cg-about-pt, 112px);
      padding-bottom: var(--cg-about-pb, 96px);
      padding-left: var(--cg-about-pl, 40px);
      padding-right: var(--cg-about-pr, 40px);
    }
  }

  [data-cg-about].cg-about .cg-about__eyebrow {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    margin: 0 0 1rem;
  }

  [data-cg-about].cg-about .cg-about__hero {
    max-width: 760px;
    margin-bottom: 4rem;
  }

  [data-cg-about].cg-about .cg-about__heading {
    font-size: calc(clamp(2.5rem, 6vw, 4.75rem) * var(--cg-about-h-scale, 1));
    line-height: 1;
    letter-spacing: -0.025em;
    text-wrap: balance;
    margin: 0 0 1.5rem;
    font-weight: 400;
    color: var(--cg-about-ink);
  }

  [data-cg-about].cg-about .cg-about__lede {
    font-size: calc(clamp(1.05rem, 1.4vw, 1.25rem) * var(--cg-about-sub-scale, 1));
    line-height: 1.55;
    max-width: 56ch;
  }

  [data-cg-about].cg-about .cg-about__lede > * {
    margin: 0 0 0.75rem;
  }

  [data-cg-about].cg-about .cg-about__lede > *:last-child {
    margin-bottom: 0;
  }

  [data-cg-about].cg-about .cg-about__hero-figure {
    margin: 3rem 0 0;
    border-radius: 1.75rem;
    overflow: hidden;
    background: color-mix(in oklch, var(--cg-about-ink) 3%, var(--cg-about-card));
    border: 1px solid color-mix(in oklch, var(--cg-about-ink) 7%, transparent);
  }

  [data-cg-about].cg-about .cg-about__hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  [data-cg-about].cg-about .cg-about__hero-caption {
    display: block;
    padding: 14px 22px 16px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: color-mix(in oklch, var(--cg-about-ink) 60%, transparent);
    border-top: 1px solid color-mix(in oklch, var(--cg-about-ink) 7%, transparent);
  }

  [data-cg-about].cg-about .cg-about__blocks {
    display: flex;
    flex-direction: column;
    gap: 5rem;
  }

  @media (max-width: 749px) {
    [data-cg-about].cg-about .cg-about__blocks {
      gap: 3.5rem;
    }
  }

  /* Story: editorial split card */
  [data-cg-about].cg-about .cg-about__story {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: center;
    background: var(--cg-about-card);
    border: 1px solid color-mix(in oklch, var(--cg-about-ink) 7%, transparent);
    border-radius: 1.75rem;
    padding: 1.5rem;
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-about-ink) 4%, transparent) inset;
  }

  @media (min-width: 900px) {
    [data-cg-about].cg-about .cg-about__story {
      grid-template-columns: 1.05fr 1fr;
      gap: 3rem;
      padding: 2rem;
    }

    [data-cg-about].cg-about .cg-about__story--right .cg-about__story-media {
      order: 2;
    }
  }

  [data-cg-about].cg-about .cg-about__story-media {
    border-radius: 1.25rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: color-mix(in oklch, var(--cg-about-ink) 3%, var(--cg-about-card));
  }

  [data-cg-about].cg-about .cg-about__story-media-inner {
    position: relative;
    width: 100%;
    height: 100%;
  }

  [data-cg-about].cg-about .cg-about__story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-about].cg-about .cg-about__story:hover .cg-about__story-img {
    transform: scale(1.035);
  }

  [data-cg-about].cg-about .cg-about__story-body {
    padding: 0.5rem 0.75rem 1rem;
  }

  @media (min-width: 900px) {
    [data-cg-about].cg-about .cg-about__story-body {
      padding: 1rem 1rem 1rem 0.5rem;
    }

    [data-cg-about].cg-about .cg-about__story--right .cg-about__story-body {
      padding: 1rem 0.5rem 1rem 1rem;
    }
  }

  [data-cg-about].cg-about .cg-about__story-eyebrow {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    margin: 0 0 0.75rem;
  }

  [data-cg-about].cg-about .cg-about__story-heading {
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0 0 1rem;
    font-weight: 500;
    color: var(--cg-about-ink);
  }

  [data-cg-about].cg-about .cg-about__story-text {
    color: color-mix(in oklch, var(--cg-about-ink) 75%, transparent);
    font-size: 1rem;
    line-height: 1.65;
    letter-spacing: -0.005em;
  }

  [data-cg-about].cg-about .cg-about__story-text > * {
    margin: 0 0 0.85rem;
  }

  [data-cg-about].cg-about .cg-about__story-text > *:last-child {
    margin-bottom: 0;
  }

  [data-cg-about].cg-about .cg-about__story-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cg-about-accent);
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-about].cg-about .cg-about__story-link:hover {
    transform: translateX(3px);
  }

  /* Pillars */
  [data-cg-about].cg-about .cg-about__pillars-header {
    max-width: 640px;
    margin: 0 0 2.5rem;
  }

  [data-cg-about].cg-about .cg-about__pillars-heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0;
    font-weight: 500;
    color: var(--cg-about-ink);
  }

  [data-cg-about].cg-about .cg-about__pillars-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 768px) {
    [data-cg-about].cg-about .cg-about__pillars-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.5rem;
    }
  }

  [data-cg-about].cg-about .cg-about__pillar {
    background: var(--cg-about-card);
    border: 1px solid color-mix(in oklch, var(--cg-about-ink) 7%, transparent);
    border-radius: 1.25rem;
    padding: 1.75rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-about-ink) 4%, transparent) inset;
  }

  [data-cg-about].cg-about .cg-about__pillar-index {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    margin: 0 0 0.5rem;
  }

  [data-cg-about].cg-about .cg-about__pillar-heading {
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0;
    font-weight: 500;
    color: var(--cg-about-ink);
  }

  [data-cg-about].cg-about .cg-about__pillar-body {
    margin: 0;
    color: color-mix(in oklch, var(--cg-about-ink) 72%, transparent);
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Quote */
  [data-cg-about].cg-about .cg-about__quote {
    margin: 0;
    padding: 2.5rem 0;
    text-align: center;
    border-top: 1px solid color-mix(in oklch, var(--cg-about-ink) 10%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--cg-about-ink) 10%, transparent);
  }

  [data-cg-about].cg-about .cg-about__quote-body {
    margin: 0;
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--cg-about-ink);
    font-weight: 400;
    max-width: 24ch;
    margin-inline: auto;
  }

  [data-cg-about].cg-about .cg-about__quote-attribution {
    display: block;
    margin-top: 1.25rem;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.24em;
  }

  /* Stats strip */
  [data-cg-about].cg-about .cg-about__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
    padding: 2rem 0;
    border-top: 1px solid color-mix(in oklch, var(--cg-about-ink) 10%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--cg-about-ink) 10%, transparent);
  }

  @media (min-width: 768px) {
    [data-cg-about].cg-about .cg-about__stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
    }
  }

  [data-cg-about].cg-about .cg-about__stat {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  [data-cg-about].cg-about .cg-about__stat-value {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--cg-about-ink);
  }

  [data-cg-about].cg-about .cg-about__stat-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: color-mix(in oklch, var(--cg-about-ink) 65%, transparent);
  }

  /* CTA panel */
  [data-cg-about].cg-about .cg-about__cta-panel {
    background: var(--cg-about-ink);
    color: var(--cg-about-card);
    border-radius: 1.75rem;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
  }

  @media (min-width: 768px) {
    [data-cg-about].cg-about .cg-about__cta-panel {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 3rem 3.25rem;
      gap: 2.5rem;
    }
  }

  [data-cg-about].cg-about .cg-about__cta-panel .cg-about__eyebrow {
    color: color-mix(in oklch, var(--cg-about-accent) 80%, white) !important;
  }

  [data-cg-about].cg-about .cg-about__cta-heading {
    font-size: clamp(1.65rem, 2.6vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0;
    font-weight: 500;
    color: var(--cg-about-card);
    max-width: 22ch;
  }

  [data-cg-about].cg-about .cg-about__cta-body {
    margin: 0.75rem 0 0;
    color: color-mix(in oklch, var(--cg-about-card) 75%, transparent);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 42ch;
  }

  [data-cg-about].cg-about .cg-about__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--cg-about-card);
    color: var(--cg-about-ink);
    padding: 12px 12px 12px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition:
      box-shadow 0.4s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    flex-shrink: 0;
  }

  [data-cg-about].cg-about .cg-about__cta-btn:hover {
    box-shadow: 0 14px 22px -14px color-mix(in oklch, var(--cg-about-card) 80%, transparent);
  }

  [data-cg-about].cg-about .cg-about__cta-btn:active {
    transform: scale(0.98);
  }

  [data-cg-about].cg-about .cg-about__cta-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: color-mix(in oklch, var(--cg-about-ink) 12%, transparent);
    border-radius: 999px;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-about].cg-about .cg-about__cta-btn:hover .cg-about__cta-btn-icon {
    transform: translateX(2px);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-cg-about].cg-about .cg-about__story-img,
    [data-cg-about].cg-about .cg-about__cta-btn,
    [data-cg-about].cg-about .cg-about__cta-btn-icon,
    [data-cg-about].cg-about .cg-about__story-link {
      transition: none !important;
    }
  }
/* END_SECTION:cg-about */

/* START_SECTION:cg-app-band (INDEX:7) */
.cg-app-band__inner {
    display: flex;
    flex-direction: column;
    justify-content: var(--cg-app-band-alignment, space-between);
    min-height: var(--section-min-height, auto);
    gap: var(--cg-app-band-gap, 0px);
    padding-block: calc(var(--cg-app-band-pt, 0px) * 0.75) calc(var(--cg-app-band-pb, 0px) * 0.75);
    padding-inline: calc(var(--cg-app-band-pl, 0px) * 0.75) calc(var(--cg-app-band-pr, 0px) * 0.75);
  }

  @media screen and (min-width: 750px) {
    .cg-app-band__inner {
      padding-block: var(--cg-app-band-pt, 0px) var(--cg-app-band-pb, 0px);
      padding-inline: var(--cg-app-band-pl, 0px) var(--cg-app-band-pr, 0px);
    }
  }
/* END_SECTION:cg-app-band */

/* START_SECTION:cg-brand-footer (INDEX:8) */
.cg-brand-footer {
    display: block;
    background: var(--cg-bf-bg, #f3f4f6);
    color: var(--cg-bf-ink, #1a1410);
    --cg-bf-rule: color-mix(in oklch, var(--cg-bf-ink, #1a1410) 15%, transparent);
    border-top: 1px solid var(--cg-bf-rule);
  }

  .cg-brand-footer__inner {
    width: min(100%, var(--cg-bf-max, 1024px));
    margin-inline: auto;
    padding-block: calc(var(--cg-bf-pad-t, 64px) * 0.75) calc(var(--cg-bf-pad-b, 64px) * 0.75);
    padding-inline: calc(var(--cg-bf-pad-l, 16px) * 0.75) calc(var(--cg-bf-pad-r, 16px) * 0.75);
  }

  .cg-brand-footer__brand,
  .cg-brand-footer__description,
  .cg-brand-footer__social-list {
    display: flex;
    justify-content: center;
  }

  .cg-brand-footer__logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cg-bf-accent, #0f8f84);
    text-decoration: none;
    transition:
      filter 0.28s ease,
      transform 0.28s ease;
  }

  .cg-brand-footer__logo-link:hover {
    filter: brightness(0.88);
  }

  .cg-brand-footer__logo-link:active {
    transform: scale(0.99);
  }

  .cg-brand-footer__logo-image {
    display: block;
    width: min(var(--cg-bf-logo-width, 180px), 70vw);
    height: auto;
    object-fit: contain;
  }

  .cg-brand-footer__logo-text {
    color: var(--cg-bf-accent, #0f8f84);
    font-family: var(--font-heading--family, var(--font-body--family, system-ui, sans-serif));
    font-size: clamp(2rem, 1.7rem + 1vw, 3rem);
    font-weight: 700;
    line-height: 1;
  }

  .cg-brand-footer__description {
    max-width: var(--cg-bf-text-max, 460px);
    margin: 1.5rem auto 0;
    color: var(--cg-bf-muted, #6b625c);
    font-size: 1rem;
    line-height: 1.65;
    text-align: center;
  }

  .cg-brand-footer__description > * {
    margin: 0;
  }

  .cg-brand-footer__blocks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 3rem;
  }

  .cg-brand-footer .cg-footer-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding-block: calc(var(--cg-fl-pad-t, 0px) * 0.75) calc(var(--cg-fl-pad-b, 0px) * 0.75);
    padding-inline: calc(var(--cg-fl-pad-l, 0px) * 0.75) calc(var(--cg-fl-pad-r, 0px) * 0.75);
    text-align: center;
  }

  .cg-brand-footer .cg-footer-link__link,
  .cg-brand-footer .cg-footer-link__sublink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: filter 0.28s ease;
  }

  .cg-brand-footer .cg-footer-link__link {
    color: color-mix(in oklch, var(--cg-bf-ink, #1a1410) 84%, transparent);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
  }

  .cg-brand-footer .cg-footer-link__sublink {
    color: color-mix(in oklch, var(--cg-bf-ink, #1a1410) 62%, transparent);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.35;
  }

  .cg-brand-footer .cg-footer-link__text {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    transition:
      font-weight 0.18s ease,
      text-shadow 0.18s ease;
  }

  .cg-brand-footer .cg-footer-link__text::after {
    content: attr(data-text);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
  }

  .cg-brand-footer .cg-footer-link__link .cg-footer-link__text::after {
    font-weight: 700;
  }

  .cg-brand-footer .cg-footer-link__sublink .cg-footer-link__text::after {
    font-weight: 500;
  }

  .cg-brand-footer a.cg-footer-link__link:is(:hover, :focus-visible),
  .cg-brand-footer a.cg-footer-link__sublink:is(:hover, :focus-visible) {
    filter: brightness(0.72);
  }

  .cg-brand-footer a.cg-footer-link__link:is(:hover, :focus-visible) .cg-footer-link__text {
    font-weight: 700;
    text-shadow: 0.01em 0 0 currentColor;
  }

  .cg-brand-footer a.cg-footer-link__sublink:is(:hover, :focus-visible) .cg-footer-link__text {
    font-weight: 500;
    text-shadow: 0.01em 0 0 currentColor;
  }

  .cg-brand-footer .cg-footer-link__link--disabled,
  .cg-brand-footer .cg-footer-link__sublink--disabled {
    cursor: default;
  }

  .cg-brand-footer .cg-footer-link__sublist {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .cg-brand-footer__social-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .cg-brand-footer__legal {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    margin-top: 3rem;
    padding-top: 2rem;
    /* 15% (was 10%): at 10% the hairline's antialiased endpoints faded into the
       background, making the flush Home / Contact Us labels above look like
       they overhang the line. */
    border-top: 1px solid var(--cg-bf-rule);
    text-align: center;
  }

  .cg-brand-footer__policies {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* anchor-name / position-anchor are inlined per instance (suffixed with the
     section id in the markup) so two footer instances cannot cross-anchor or
     share a popover id. */
  .cg-brand-footer__policy-trigger {
    color: color-mix(in oklch, var(--cg-bf-ink, #1a1410) 80%, transparent);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter 0.28s ease;
  }

  .cg-brand-footer__policy-trigger:is(:hover, :focus-visible) {
    filter: brightness(0.72);
  }

  .cg-brand-footer__policy-popover {
    inset: unset;
    bottom: calc(anchor(top) + 0.75rem);
    left: anchor(left);
    min-width: 12rem;
    padding: 0.5rem;
    margin: 0;
    background: var(--cg-bf-bg, var(--color-background, #f3f4f6));
    color: var(--cg-bf-ink, #1a1410);
    border: 1px solid color-mix(in oklch, var(--cg-bf-ink, #1a1410) 12%, transparent);
    border-radius: var(--style-border-radius-popover, 12px);
    box-shadow: var(--shadow-popover, 0 12px 32px rgba(0, 0, 0, 0.16));
    opacity: 0;
    scale: 0.96;
    translate: 0 6px;
    transform-origin: 2em 100%;
  }

  .cg-brand-footer__policy-popover.\:popover-open,
  .cg-brand-footer__policy-popover:popover-open {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }

  .cg-brand-footer__policy-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .cg-brand-footer__policy-link {
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: calc(var(--style-border-radius-popover, 12px) - 8px);
    color: color-mix(in oklch, var(--cg-bf-ink, #1a1410) 84%, transparent);
    font-size: 0.8rem;
    text-align: start;
    text-decoration: none;
    transition:
      filter 0.28s ease,
      background-color 0.28s ease;
  }

  .cg-brand-footer__policy-link:is(:hover, :focus-within, :focus-visible) {
    background: color-mix(in oklch, var(--cg-bf-ink, #1a1410) 10%, transparent);
    filter: brightness(0.9);
  }

  @media (prefers-reduced-motion: no-preference) {
    .cg-brand-footer__policy-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.28s;
      transition-timing-function: var(--ease-out-quad, cubic-bezier(0.5, 1, 0.89, 1));
    }

    @starting-style {
      .cg-brand-footer__policy-popover.\:popover-open,
      .cg-brand-footer__policy-popover:popover-open {
        opacity: 0;
        scale: 0.96;
        translate: 0 6px;
      }
    }
  }

  @media screen and (max-width: 749px) {
    .cg-brand-footer__policy-popover {
      left: anchor(center);
      transform: translateX(-50%);
      transform-origin: 0 100%;
    }
  }

  /* No-anchor-positioning fallback (Firefox, Safari <= 18): anchored-popover.js
     inlines --anchor-* from the trigger rect. This block must come AFTER the
     mobile anchor() rules above: `left: anchor(center)` drops as invalid there,
     but `transform: translateX(-50%)` stays valid, so without the nested mobile
     override re-declaring the -100% Y shift the popover would paint on top of
     the trigger (stock footer-policy-list.liquid orders it the same way). */
  @supports not (position-anchor: --cg-bf-policies-trigger) {
    .cg-brand-footer__policy-popover {
      bottom: unset;
      top: calc(var(--anchor-top, 0) * 1px);
      left: calc(var(--anchor-left, 0) * 1px);
      transform: translate(0, calc(-100% - 1rem));
    }

    @media screen and (max-width: 749px) {
      .cg-brand-footer__policy-popover {
        left: calc((var(--anchor-left, 0) + (var(--anchor-width, 0) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1rem));
      }
    }
  }

  .cg-brand-footer__copyright {
    color: var(--cg-bf-muted, #6b625c);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
  }

  .cg-brand-footer__copyright a {
    color: inherit;
    text-decoration: none;
    transition: filter 0.28s ease;
  }

  .cg-brand-footer__copyright a:hover {
    filter: brightness(0.72);
  }

  .cg-brand-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: color-mix(in oklch, var(--cg-bf-ink, #1a1410) 84%, transparent);
    text-decoration: none;
    transition:
      filter 0.28s ease,
      transform 0.28s ease;
  }

  .cg-brand-footer__social-link:hover {
    filter: brightness(0.72);
  }

  .cg-brand-footer__social-link:active {
    transform: scale(0.96);
  }

  .cg-brand-footer__social-icon {
    display: block;
    width: 24px;
    height: 24px;
    fill: currentColor;
  }

  .cg-brand-footer--motion [data-cg-bf-anim] {
    opacity: 0;
    transform: translateY(10px);
  }

  /* The theme editor stamps this class before section scripts run. Keep editor
     renders static even if Shopify.designMode appears after the Vite chunk. */
  .shopify-design-mode .cg-brand-footer [data-cg-bf-anim] {
    opacity: 1 !important;
    transform: none !important;
  }

  @media screen and (min-width: 600px) {
    .cg-brand-footer__blocks {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: center;
      gap: 2rem;
    }
  }

  @media screen and (min-width: 750px) {
    .cg-brand-footer__inner {
      padding-block: var(--cg-bf-pad-t, 64px) var(--cg-bf-pad-b, 64px);
      padding-inline: var(--cg-bf-pad-l, 16px) var(--cg-bf-pad-r, 16px);
    }

    .cg-brand-footer .cg-footer-link {
      padding-block: var(--cg-fl-pad-t, 0px) var(--cg-fl-pad-b, 0px);
      padding-inline: var(--cg-fl-pad-l, 0px) var(--cg-fl-pad-r, 0px);
    }

    /* Span the link columns across the full inner width so the first column's
       left edge lines up with the policies trigger and the last column's right
       edge lines up with the copyright below. */
    .cg-brand-footer__blocks {
      justify-content: space-between;
    }

    .cg-brand-footer__social-list {
      grid-column: 2;
      justify-self: center;
      gap: 1.5rem;
    }

    /* Grid, not flex: minmax(0, 1fr) side rails keep the social icons on the
       exact container center (the logo's axis) even when the policies and
       copyright sides differ in width. flex: 1 rails drift once the longer
       side hits its min-content. Explicit grid-column placement keeps each
       piece in its rail when policies or socials are absent. */
    .cg-brand-footer__legal {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 2rem;
      text-align: left;
    }

    .cg-brand-footer__policies {
      grid-column: 1;
      justify-content: flex-start;
    }

    .cg-brand-footer__copyright {
      grid-column: 3;
      text-align: right;
    }
  }

  @media screen and (min-width: 990px) {
    .cg-brand-footer__blocks {
      gap: 3rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cg-brand-footer--motion [data-cg-bf-anim] {
      transform: none;
    }

    .cg-brand-footer__logo-link,
    .cg-brand-footer__social-link,
    .cg-brand-footer__policy-link,
    .cg-brand-footer__copyright a,
    .cg-brand-footer .cg-footer-link__link,
    .cg-brand-footer .cg-footer-link__sublink,
    .cg-brand-footer .cg-footer-link__text {
      transition: none;
    }
  }
/* END_SECTION:cg-brand-footer */

/* START_SECTION:cg-collection-grid (INDEX:9) */
.shopify-section:has([data-cg-cgrid-hidden]) + .shopify-section:has([data-testid^='divider-']) {
    display: none;
  }

  [data-cg-cgrid].cg-cgrid {
    isolation: isolate;
    position: relative;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__grain {
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
    mix-blend-mode: multiply;
  }

  [data-cg-cgrid].cg-cgrid .font-display {
    font-weight: 400;
    font-feature-settings: 'liga', 'kern';
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__inner {
    padding-top: calc(var(--cg-cgrid-pt, 96px) * 0.75);
    padding-bottom: calc(var(--cg-cgrid-pb, 96px) * 0.75);
    padding-left: calc(var(--cg-cgrid-pl, 40px) * 0.6);
    padding-right: calc(var(--cg-cgrid-pr, 40px) * 0.6);
  }

  @media (min-width: 768px) {
    [data-cg-cgrid].cg-cgrid .cg-cgrid__inner {
      padding-top: var(--cg-cgrid-pt, 96px);
      padding-bottom: var(--cg-cgrid-pb, 96px);
      padding-left: var(--cg-cgrid-pl, 40px);
      padding-right: var(--cg-cgrid-pr, 40px);
    }
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__heading {
    font-size: calc(clamp(2rem, 4.6vw, 3.75rem) * var(--cg-cgrid-h-scale, 1));
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__heading-wrap {
    text-align: left;
  }

  [data-cg-cgrid][data-heading-align='center'].cg-cgrid .cg-cgrid__header {
    align-items: center;
    text-align: center;
  }

  [data-cg-cgrid][data-heading-align='center'].cg-cgrid .cg-cgrid__heading-wrap {
    text-align: center;
  }

  [data-cg-cgrid][data-heading-align='center'].cg-cgrid .cg-cgrid__view-all {
    align-self: center;
  }

  [data-cg-cgrid][data-heading-align='right'].cg-cgrid .cg-cgrid__header {
    align-items: flex-end;
    text-align: right;
  }

  [data-cg-cgrid][data-heading-align='right'].cg-cgrid .cg-cgrid__heading-wrap {
    text-align: right;
  }

  [data-cg-cgrid][data-heading-align='right'].cg-cgrid .cg-cgrid__view-all {
    align-self: flex-end;
  }

  @media (min-width: 768px) {
    [data-cg-cgrid][data-heading-align='center'].cg-cgrid .cg-cgrid__header,
    [data-cg-cgrid][data-heading-align='right'].cg-cgrid .cg-cgrid__header {
      flex-direction: column;
      justify-content: flex-start;
    }
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__view-all {
    background: color-mix(in oklch, var(--cg-cgrid-ink) 6%, transparent);
    color: var(--cg-cgrid-ink);
    border: 1px solid color-mix(in oklch, var(--cg-cgrid-ink) 8%, transparent);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__view-all:hover {
    background: color-mix(in oklch, var(--cg-cgrid-ink) 10%, transparent);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__grid {
    --cg-cgrid-hover-clearance: 10px;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin: 0;
    /* The card shell lifts by 6px on hover/focus. Give the lifted rounded
       border real room inside the section's overflow-hidden clip. */
    padding: var(--cg-cgrid-hover-clearance) 0 0;
    list-style: none;
  }

  @media (min-width: 768px) {
    [data-cg-cgrid].cg-cgrid .cg-cgrid__grid {
      grid-template-columns: repeat(var(--cg-cgrid-cols-md, 2), minmax(0, 1fr));
      gap: 1.5rem;
    }
  }

  @media (min-width: 1024px) {
    [data-cg-cgrid].cg-cgrid .cg-cgrid__grid {
      grid-template-columns: repeat(var(--cg-cgrid-cols-lg, 3), minmax(0, 1fr));
      gap: 1.75rem;
    }
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__item {
    min-width: 0;
    display: block;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__card {
    display: block;
    width: 100%;
    height: 100%;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__shell {
    position: relative;
    height: 100%;
    background: color-mix(in oklch, var(--cg-cgrid-ink) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-cgrid-ink) 7%, transparent);
    padding: 6px;
    border-radius: var(--cg-surface-radius, 8px);
    transition:
      border-color 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__card:hover .cg-cgrid__shell,
  [data-cg-cgrid].cg-cgrid .cg-cgrid__shell:has(.cg-cgrid__card-link:focus-visible) {
    border-color: color-mix(in oklch, var(--cg-cgrid-accent) 45%, transparent);
    box-shadow: 0 10px 24px -20px color-mix(in oklch, var(--cg-cgrid-ink) 22%, transparent);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    border-radius: inherit;
    text-decoration: none;
    color: inherit;
    outline: none;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__card-link:focus-visible {
    outline: 3px solid var(--cg-cgrid-accent);
    outline-offset: -3px;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__pcard {
    display: block;
    width: 100%;
    height: 100%;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__core {
    height: 100%;
    background: var(--cg-cgrid-card);
    border-radius: max(2px, calc(var(--cg-surface-radius, 8px) - 6px));
    padding: 8px 8px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-cgrid-ink) 4%, transparent) inset;
  }

  /* The media root is a plain div while thumbnails are off and upgrades to
     <cg-cgrid-gallery> only when the variant strip is enabled. */
  [data-cg-cgrid].cg-cgrid .cg-cgrid__media {
    display: block;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__media-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--cg-surface-radius, 8px);
    aspect-ratio: 1 / 1;
    background: color-mix(in oklch, var(--cg-cgrid-ink) 3%, var(--cg-cgrid-card));
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__media-inner {
    position: absolute;
    inset: 0;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__media-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse at 50% 35%,
      color-mix(in oklch, var(--cg-cgrid-accent) 12%, transparent) 0%,
      transparent 65%
    );
    pointer-events: none;
    z-index: 1;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Thumbnails-off mode: the cover photo cross-fades on hover to the first
     available variant's featured image (mirrors the home product-hero hover). */
  [data-cg-cgrid].cg-cgrid .cg-cgrid__media-img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__card:hover .cg-cgrid__media-img--hover,
  [data-cg-cgrid].cg-cgrid .cg-cgrid__shell:has(.cg-cgrid__card-link:focus-visible) .cg-cgrid__media-img--hover {
    opacity: 1;
  }

  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    [data-cg-cgrid].cg-cgrid .cg-cgrid__shell {
      transition:
        transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
        border-color 0.45s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    }

    [data-cg-cgrid].cg-cgrid .cg-cgrid__card:hover .cg-cgrid__shell,
    [data-cg-cgrid].cg-cgrid .cg-cgrid__shell:has(.cg-cgrid__card-link:focus-visible) {
      transform: translateY(-6px);
    }

    [data-cg-cgrid].cg-cgrid .cg-cgrid__media-img {
      transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1);
    }

    [data-cg-cgrid].cg-cgrid .cg-cgrid__card:hover .cg-cgrid__media-img,
    [data-cg-cgrid].cg-cgrid .cg-cgrid__shell:has(.cg-cgrid__card-link:focus-visible) .cg-cgrid__media-img {
      transform: scale(1.045);
    }
  }

  /* Variant thumbnail strip. Sits in flow under the image (no overlay, so it
     never collides with the quick-add button), spans the image width, always
     visible. The thumbs need z-index over the stretched card link, which the
     strip's position: relative establishes. */
  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumbs {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    display: flex;
    align-items: stretch;
    gap: 2px;
  }

  /* The track owns the scrolling; the native scrollbar is hidden because the
     paddle buttons are the visible affordance (wheel + drag still scroll). */
  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumbs-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumbs-track::-webkit-scrollbar {
    display: none;
  }

  /* Prev / next paddles. Stretch to the strip's full height and center the
     chevron vertically; hidden entirely while the strip has no overflow
     (JS stamps data-overflowing on the strip when it does). */
  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumbs-nav {
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: color-mix(in oklch, var(--cg-cgrid-ink) 72%, transparent);
    cursor: pointer;
    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumbs:not([data-overflowing]) .cg-cgrid__thumbs-nav {
    display: none;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumbs-nav:hover {
    color: var(--cg-cgrid-accent);
    background: color-mix(in oklch, var(--cg-cgrid-ink) 6%, transparent);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumbs-nav:active {
    transform: scale(0.92);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumbs-nav:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumbs-nav:focus-visible {
    outline: 2px solid var(--cg-cgrid-accent);
    outline-offset: -2px;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cg-cgrid-card);
    border: 1px solid color-mix(in oklch, var(--cg-cgrid-ink) 10%, transparent);
    transition:
      border-color 0.3s ease,
      transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumb:hover {
    border-color: color-mix(in oklch, var(--cg-cgrid-accent) 70%, transparent);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumb--current {
    border-color: var(--cg-cgrid-accent);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumb:active {
    transform: scale(0.96);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumb:focus-visible {
    outline: 2px solid var(--cg-cgrid-accent);
    outline-offset: 1px;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__title {
    font-family: var(--font-heading--family);
    font-size: clamp(1.15rem, 1.4vw, 1.4rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--cg-cgrid-ink);
    margin: 0;
    flex: 1;
    min-width: 0;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__card:hover .cg-cgrid__title,
  [data-cg-cgrid].cg-cgrid .cg-cgrid__shell:has(.cg-cgrid__card-link:focus-visible) .cg-cgrid__title {
    color: color-mix(in oklch, var(--cg-cgrid-ink) 80%, var(--cg-cgrid-accent));
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__product-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__product-rating svg {
    color: var(--cg-cgrid-ink);
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__rating-text {
    font-size: 15px;
    font-weight: 500;
    color: color-mix(in oklch, var(--cg-cgrid-ink) 80%, transparent);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__rating-value {
    font-size: var(--cg-cgrid-rating-size, 14px);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--cg-cgrid-ink);
    margin: 0;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__short-desc {
    font-size: 16px;
    line-height: 1.375;
    color: color-mix(in oklch, var(--cg-cgrid-ink) 70%, transparent);
    font-style: italic;
    margin: 12px 0 12px 0;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__ratings {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 0;
    margin: 4px 0;
    border-top: 1px solid color-mix(in oklch, var(--cg-cgrid-ink) 8%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--cg-cgrid-ink) 8%, transparent);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__rating-label {
    font-size: var(--cg-cgrid-rating-size, 12px);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: color-mix(in oklch, var(--cg-cgrid-ink) 75%, transparent);
    text-transform: lowercase;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__ratings dd {
    margin: 0;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__rating-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__rating-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid color-mix(in oklch, var(--cg-cgrid-ink) 22%, transparent);
    display: inline-block;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__rating-dot--filled {
    background: var(--cg-cgrid-ink);
    border-color: var(--cg-cgrid-ink);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__divider {
    width: 100%;
    height: 1px;
    background: color-mix(in oklch, var(--cg-cgrid-ink) 8%, transparent);
    /* Only rendered when comparison ratings + thickness are off (accessories):
       lift the hairline off the subheading so it doesn't sit flush, balancing
       the 16px gap to the price footer below it. */
    margin-top: 16px;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__price-prefix {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-cgrid-ink) 55%, transparent);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__price-value {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--cg-cgrid-ink);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__price-compare {
    color: color-mix(in oklch, var(--cg-cgrid-ink) 50%, transparent);
    font-size: 13px;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__qa {
    display: contents;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__qa-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: var(--cg-cgrid-ink);
    color: var(--cg-cgrid-card);
    border: 1px solid color-mix(in oklch, var(--cg-cgrid-ink) 18%, transparent);
    border-radius: 999px;
    cursor: pointer;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition:
      background 0.3s ease,
      border-color 0.3s ease,
      visibility 0s linear 0s,
      transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 4px 12px -2px color-mix(in oklch, var(--cg-cgrid-ink) 60%, transparent);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__qa-btn svg {
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__qa-btn:hover {
    background: var(--cg-cgrid-accent);
    border-color: var(--cg-cgrid-accent);
    transform: translateY(0) scale(1.02);
    box-shadow: 0 6px 16px -4px color-mix(in oklch, var(--cg-cgrid-accent) 60%, transparent);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__qa-btn:hover svg {
    transform: scale(1.15) rotate(-2deg);
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__qa-btn:active {
    transform: translateY(0) scale(0.92);
    box-shadow: 0 2px 4px -2px color-mix(in oklch, var(--cg-cgrid-accent) 80%, transparent);
    transition-duration: 0.1s;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__qa-btn:active svg {
    transform: scale(0.95) rotate(0deg);
    transition-duration: 0.1s;
  }

  [data-cg-cgrid].cg-cgrid .cg-cgrid__qa-btn:focus-visible {
    outline: 2px solid var(--cg-cgrid-card);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--cg-cgrid-ink) 40%, transparent);
  }

  /* QA button is always visible on every viewport. Base state above keeps
     visibility:visible + transform:translateY(0) scale(1). Hover/focus styles
     below still apply scale(1.02) + accent bg via .cg-cgrid__qa-btn:hover. */

  @media (max-width: 767px) {
    [data-cg-cgrid].cg-cgrid .cg-cgrid__inner {
      padding-top: 3.5rem;
      padding-bottom: 3.5rem;
    }
    [data-cg-cgrid].cg-cgrid .cg-cgrid__core {
      padding: 8px 8px 22px;
      gap: 14px;
    }
    [data-cg-cgrid].cg-cgrid .cg-cgrid__body {
      gap: 12px;
      padding: 4px 14px 0;
    }
    [data-cg-cgrid].cg-cgrid .cg-cgrid__rating-label,
    [data-cg-cgrid].cg-cgrid .cg-cgrid__rating-value {
      font-size: calc(var(--cg-cgrid-rating-size, 12px) - 1px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Reveal owned by frontend/entrypoints/main.js's item revealer: below-fold
       .motion-item cards fade-rise in on scroll; reduced motion never hides
       them (the revealer's reduced branch shows everything statically).

       Hover: drop all transforms (card lift, image scale, icon rotate, press
       compress). Replace the image scale with a brightness fade. Tonal lift
       within reduced-motion guidance, no parallax/vestibular trigger. The
       non-transform transitions (border-color, box-shadow, background-color)
       keep their cubic-bezier easings so the hover state still tweens to life
       instead of snapping. */
    [data-cg-cgrid].cg-cgrid .cg-cgrid__media-img {
      transition: filter 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    }
    /* Hover image appears instantly (no cross-fade) under reduced motion. */
    [data-cg-cgrid].cg-cgrid .cg-cgrid__media-img--hover {
      transition: none;
    }
    [data-cg-cgrid].cg-cgrid .cg-cgrid__card:hover .cg-cgrid__shell,
    [data-cg-cgrid].cg-cgrid .cg-cgrid__shell:has(.cg-cgrid__card-link:focus-visible) {
      transform: none;
    }
    [data-cg-cgrid].cg-cgrid .cg-cgrid__card:hover .cg-cgrid__media-img,
    [data-cg-cgrid].cg-cgrid .cg-cgrid__shell:has(.cg-cgrid__card-link:focus-visible) .cg-cgrid__media-img {
      transform: none;
      filter: brightness(1.04);
    }
    [data-cg-cgrid].cg-cgrid .cg-cgrid__qa-btn,
    [data-cg-cgrid].cg-cgrid .cg-cgrid__qa-btn:hover,
    [data-cg-cgrid].cg-cgrid .cg-cgrid__qa-btn:active,
    [data-cg-cgrid].cg-cgrid .cg-cgrid__qa-btn:hover svg,
    [data-cg-cgrid].cg-cgrid .cg-cgrid__qa-btn:active svg {
      transform: none;
    }
    /* Thumb strip press compression off. */
    [data-cg-cgrid].cg-cgrid .cg-cgrid__thumb:active,
    [data-cg-cgrid].cg-cgrid .cg-cgrid__thumbs-nav:active {
      transform: none;
    }
  }
/* END_SECTION:cg-collection-grid */

/* START_SECTION:cg-collection-header (INDEX:10) */
/* Collection-page masthead. Uses the shared cg-head component so the title
     reveal + typography match the about / faq (cg-page) and blog headers
     exactly. cg-head force-shows the host .shopify-section via :has(), so no
     extra reveal wiring is needed here. */
  .cg-collh {
    --cg-collh-ink: #1a1410;
    --cg-collh-accent: #8a3a12;

    padding-block-start: calc(var(--cg-collh-pt, 64px) * 0.7);
    padding-block-end: calc(var(--cg-collh-pb, 28px) * 0.85);
    padding-inline-start: calc(var(--cg-collh-pl, 40px) * 0.6);
    padding-inline-end: calc(var(--cg-collh-pr, 40px) * 0.6);
    color: var(--cg-collh-ink);
  }

  @media screen and (min-width: 750px) {
    .cg-collh {
      padding-block-start: var(--cg-collh-pt, 64px);
      padding-block-end: var(--cg-collh-pb, 28px);
      padding-inline-start: var(--cg-collh-pl, 40px);
      padding-inline-end: var(--cg-collh-pr, 40px);
    }
  }

  .cg-collh__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding-block-end: 1.1rem;
  }

  .cg-collh[data-cg-align='center'] .cg-collh__inner {
    align-items: center;
    text-align: center;
  }

  /* Eyebrow: mono uppercase, hairline-underlined badge (the _ph-badge pattern
     shared by cg-page / cg-article headers). */
  .cg-collh__eyebrow {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--cg-collh-accent);
    margin: 0;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid color-mix(in oklch, var(--cg-collh-accent) 45%, transparent);
  }

  /* Title: display heading, tight tracking, brand ink. Matches the cg-page
     (about/faq) masthead sizing so all page headers read as one family. */
  .cg-collh__title {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: calc(clamp(2.25rem, 6vw, 4.25rem) * var(--cg-collh-h-scale, 1));
    line-height: 1;
    letter-spacing: -0.032em;
    text-wrap: balance;
    color: var(--cg-collh-ink);
    margin: 0;
    max-width: none;
    width: 100%;
  }

  @media screen and (max-width: 749px) {
    .cg-collh__title {
      font-size: calc(clamp(1.75rem, 9vw, 2.5rem) * var(--cg-collh-h-scale, 1));
      line-height: 1.05;
    }
  }
/* END_SECTION:cg-collection-header */

/* START_SECTION:cg-contact-form (INDEX:11) */
/* Force the host section visible at first paint. main.css hides every
     non-header .shopify-section under @media (scripting: enabled); a form must
     never be trapped invisible, so this :has() unhide wins. No JS reveal. */
  .shopify-section:has([data-cg-contact-form-root]) {
    opacity: 1 !important;
  }

  .cg-cf {
    display: block;
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .cg-cf__grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    pointer-events: none;
    mix-blend-mode: multiply;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
  }

  .cg-cf__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding-top: calc(var(--cg-cf-pt, 48px) * 0.7);
    padding-bottom: calc(var(--cg-cf-pb, 64px) * 0.7);
    padding-left: calc(var(--cg-cf-pl, 40px) * 0.55);
    padding-right: calc(var(--cg-cf-pr, 40px) * 0.55);
  }

  @media (min-width: 768px) {
    .cg-cf__inner {
      padding-top: var(--cg-cf-pt, 48px);
      padding-bottom: var(--cg-cf-pb, 64px);
      padding-left: var(--cg-cf-pl, 40px);
      padding-right: var(--cg-cf-pr, 40px);
    }
  }

  .cg-cf__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
  }

  .cg-cf__eyebrow {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--cg-cf-accent);
    margin: 0;
  }

  .cg-cf__heading {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--cg-cf-ink);
    margin: 0;
    text-wrap: balance;
  }

  .cg-cf__intro {
    font-family: var(--font-body--family, inherit);
    font-size: clamp(0.96rem, 1.2vw, 1.05rem);
    line-height: 1.6;
    color: color-mix(in oklch, var(--cg-cf-ink) 75%, transparent);
    max-width: 56ch;
    text-wrap: pretty;
  }

  .cg-cf__intro p {
    margin: 0 0 0.6em;
  }

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

  /* Content alignment (left default / center) */
  .cg-cf[data-cg-align='center'] .cg-cf__header {
    align-items: center;
    text-align: center;
  }

  .cg-cf[data-cg-align='center'] .cg-cf__intro {
    margin-inline: auto;
  }

  .cg-cf[data-cg-align='center'] .cg-cf__actions {
    justify-content: center;
  }

  .cg-cf__shell {
    position: relative;
    background: color-mix(in oklch, var(--cg-cf-ink) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-cf-ink) 7%, transparent);
    padding: 6px;
    border-radius: var(--cg-surface-radius, 8px);
  }

  .cg-cf__core {
    background: var(--cg-cf-card);
    border-radius: max(2px, calc(var(--cg-surface-radius, 8px) - 6px));
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-cf-ink) 4%, transparent) inset;
  }

  .cg-cf__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .cg-cf__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
  }

  @media (max-width: 599px) {
    .cg-cf__grid {
      grid-template-columns: 1fr;
    }
  }

  .cg-cf__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
  }

  .cg-cf__label {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: color-mix(in oklch, var(--cg-cf-ink) 82%, transparent);
  }

  .cg-cf__req {
    color: var(--cg-cf-accent);
  }

  .cg-cf__input {
    width: 100%;
    font-family: var(--font-body--family, inherit);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--cg-cf-ink);
    background: color-mix(in oklch, var(--cg-cf-ink) 3%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-cf-ink) 14%, transparent);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    outline: none;
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  .cg-cf__input:focus-visible {
    border-color: var(--cg-cf-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--cg-cf-accent) 15%, transparent);
  }

  /* Inline validation feedback after the field has been interacted with. */
  .cg-cf__input:user-invalid {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px color-mix(in oklch, #c0392b 12%, transparent);
  }

  .cg-cf__input::placeholder {
    color: color-mix(in oklch, var(--cg-cf-ink) 65%, transparent);
  }

  .cg-cf__field-error {
    margin: 0;
    color: #8a1c12;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .cg-cf__textarea {
    resize: vertical;
    min-height: 130px;
  }

  .cg-cf__actions {
    display: flex;
    justify-content: flex-start;
  }

  .cg-cf__submit {
    font-family: var(--font-body--family, 'Montserrat', sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fbf7ef;
    background: var(--cg-cf-accent);
    border: none;
    border-radius: 999px;
    padding: 0.8rem 2.2rem;
    cursor: pointer;
    transition:
      background 0.3s ease,
      transform 0.15s ease;
  }

  .cg-cf__submit:hover {
    background: color-mix(in oklch, var(--cg-cf-accent) 84%, #000000);
  }

  .cg-cf__submit:active {
    transform: scale(0.98);
  }

  .cg-cf__submit:focus-visible {
    outline: 2px solid var(--cg-cf-accent);
    outline-offset: 3px;
  }

  .cg-cf__note {
    margin: 0 0 0.5rem;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    font-family: var(--font-body--family, inherit);
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .cg-cf__note--ok {
    color: var(--cg-cf-ink);
    background: color-mix(in oklch, var(--cg-cf-accent) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-cf-accent) 35%, transparent);
  }

  .cg-cf__note--err {
    color: #8a1c12;
    background: color-mix(in oklch, #c0392b 10%, transparent);
    border: 1px solid color-mix(in oklch, #c0392b 35%, transparent);
  }

  .cg-cf__note--err a {
    color: inherit;
    text-decoration: underline;
  }

  /* Success-only view. On the posted reload Shopify anchors the URL at the
     submitted form's id, so that form is :target. Show just the thank-you +
     home button and hide the field area, so the empty form does not re-render
     under the note. :has() guards a bare form-id deep link (no post,
     no success block) from blanking the form. */
  .cg-cf__success {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .cg-cf__form:target .cg-cf__success {
    display: flex;
  }

  .cg-cf__form:target:has(.cg-cf__success) > *:not(.cg-cf__success) {
    display: none;
  }

  .cg-cf__home {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body--family, 'Montserrat', sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #fbf7ef;
    background: var(--cg-cf-accent);
    border-radius: 999px;
    padding: 0.8rem 2.2rem;
    transition:
      background 0.3s ease,
      transform 0.15s ease;
  }

  .cg-cf__home:hover {
    background: color-mix(in oklch, var(--cg-cf-accent) 84%, #000000);
  }

  .cg-cf__home:active {
    transform: scale(0.98);
  }

  .cg-cf__home:focus-visible {
    outline: 2px solid var(--cg-cf-accent);
    outline-offset: 3px;
  }

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

    .cg-cf__submit {
      transition: background 0.2s ease;
    }

    .cg-cf__submit:active {
      transform: none;
    }
  }

  @media (max-width: 749px) {
    .cg-cf__core {
      padding: clamp(1.1rem, 5vw, 1.6rem);
    }
  }
/* END_SECTION:cg-contact-form */

/* START_SECTION:cg-contact-switcher (INDEX:12) */
/* Force the switcher's host section visible at first paint (main.css hides
     every non-header .shopify-section under @media (scripting: enabled)). */
  .shopify-section:has([data-cg-switcher]) {
    opacity: 1 !important;
  }

  /* The controller stamps data-cg-contact-js on <html> synchronously, before the
     sibling form sections parse, so only the chosen form shows. JS off (or the
     controller failing within 3s) leaves the attribute absent and every form
     renders stacked, a safe degradation that never traps a form invisible. */
  html[data-cg-contact-js] [data-cg-contact-form]:not([data-cg-contact-active]) {
    display: none;
  }

  .cg-cs {
    display: block;
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .cg-cs__grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    pointer-events: none;
    mix-blend-mode: multiply;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
  }

  .cg-cs__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding-top: calc(var(--cg-cs-pt, 96px) * 0.7);
    padding-bottom: calc(var(--cg-cs-pb, 24px) * 0.7);
    padding-left: calc(var(--cg-cs-pl, 40px) * 0.55);
    padding-right: calc(var(--cg-cs-pr, 40px) * 0.55);
  }

  @media (min-width: 768px) {
    .cg-cs__inner {
      padding-top: var(--cg-cs-pt, 96px);
      padding-bottom: var(--cg-cs-pb, 24px);
      padding-left: var(--cg-cs-pl, 40px);
      padding-right: var(--cg-cs-pr, 40px);
    }
  }

  .cg-cs__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .cg-cs__eyebrow {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--cg-cs-accent);
    margin: 0;
  }

  .cg-cs__heading {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: calc(clamp(2.25rem, 6vw, 4.25rem) * var(--cg-cs-h-scale, 1));
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-wrap: balance;
    color: var(--cg-cs-ink);
    margin: 0;
  }

  .cg-cs__intro {
    font-family: var(--font-body--family, inherit);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6;
    color: color-mix(in oklch, var(--cg-cs-ink) 75%, transparent);
    max-width: 58ch;
    text-wrap: pretty;
  }

  .cg-cs__intro p {
    margin: 0 0 0.6em;
  }

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

  .cg-cs__chooser-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .cg-cs__prompt {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: color-mix(in oklch, var(--cg-cs-ink) 100%, transparent);
    margin: 0;
  }

  /* DaisyUI-style menu (menu-vertical lg:menu-horizontal, rounded-box),
     brand-skinned. Built as a tablist for the form-switching behavior. */
  .cg-cs__menu {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    gap: 0.25rem;
    width: 100%;
    max-width: 27rem;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: color-mix(in oklch, var(--cg-cs-ink) 4%, var(--cg-cs-card));
    border: 1px solid color-mix(in oklch, var(--cg-cs-ink) 8%, transparent);
    border-radius: 1rem;
    box-shadow: 0 1px 1px color-mix(in oklch, #ffffff 60%, transparent) inset;
  }

  .cg-cs__menu li {
    display: flex;
    margin: 0;
    padding: 0;
  }

  .cg-cs__item {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 0.65rem;
    padding: 0.62rem 0.95rem;
    min-height: 44px;
    font-family: var(--font-body--family, inherit);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: color-mix(in oklch, var(--cg-cs-ink) 70%, transparent);
    cursor: pointer;
    transition:
      background-color 0.3s cubic-bezier(0.32, 0.72, 0, 1),
      color 0.3s ease,
      border-color 0.3s ease,
      transform 0.12s ease;
  }

  .cg-cs__item:hover {
    color: var(--cg-cs-ink);
    background: color-mix(in oklch, var(--cg-cs-ink) 6%, transparent);
  }

  .cg-cs__item[aria-selected='true'] {
    background: var(--cg-cs-accent);
    color: #fbf7ef;
    box-shadow: 0 1px 2px color-mix(in oklch, var(--cg-cs-ink) 20%, transparent);
  }

  .cg-cs__item[aria-selected='true']:hover {
    color: #fbf7ef;
    background: color-mix(in oklch, var(--cg-cs-accent) 90%, #000000);
  }

  .cg-cs__item:active {
    transform: scale(0.985);
  }

  .cg-cs__item:focus-visible {
    outline: 2px solid var(--cg-cs-accent);
    outline-offset: 2px;
  }

  @media (min-width: 1024px) {
    .cg-cs__menu {
      flex-direction: row;
      flex-wrap: wrap;
      width: auto;
      max-width: 100%;
    }

    .cg-cs__menu li {
      flex: 0 0 auto;
    }

    .cg-cs__item {
      width: auto;
      justify-content: center;
    }
  }

  /* Header + intro alignment (left default / center). The option chooser has
     its own independent, per-breakpoint alignment below. */
  .cg-cs[data-cg-align='center'] .cg-cs__header {
    align-items: center;
    text-align: center;
  }

  .cg-cs[data-cg-align='center'] .cg-cs__intro {
    margin-inline: auto;
  }

  /* Option-button (chooser) alignment, independent per breakpoint. The
     [data-cg-chooser-m] rules apply at every width; the [data-cg-chooser-d]
     block overrides them at >=1024px, so the two breakpoints can differ
     (e.g. center on mobile, left on desktop). */
  .cg-cs[data-cg-chooser-m='left'] .cg-cs__chooser-wrap {
    align-items: flex-start;
  }
  .cg-cs[data-cg-chooser-m='left'] .cg-cs__menu {
    align-self: flex-start;
  }
  .cg-cs[data-cg-chooser-m='left'] .cg-cs__prompt {
    text-align: left;
  }
  .cg-cs[data-cg-chooser-m='left'] .cg-cs__item {
    justify-content: flex-start;
    text-align: left;
  }

  .cg-cs[data-cg-chooser-m='center'] .cg-cs__chooser-wrap {
    align-items: center;
  }
  .cg-cs[data-cg-chooser-m='center'] .cg-cs__menu {
    align-self: center;
  }
  .cg-cs[data-cg-chooser-m='center'] .cg-cs__prompt {
    text-align: center;
  }
  .cg-cs[data-cg-chooser-m='center'] .cg-cs__item {
    justify-content: center;
    text-align: center;
  }

  .cg-cs[data-cg-chooser-m='right'] .cg-cs__chooser-wrap {
    align-items: flex-end;
  }
  .cg-cs[data-cg-chooser-m='right'] .cg-cs__menu {
    align-self: flex-end;
  }
  .cg-cs[data-cg-chooser-m='right'] .cg-cs__prompt {
    text-align: right;
  }
  .cg-cs[data-cg-chooser-m='right'] .cg-cs__item {
    justify-content: flex-end;
    text-align: right;
  }

  @media (min-width: 1024px) {
    .cg-cs[data-cg-chooser-d='left'] .cg-cs__chooser-wrap {
      align-items: flex-start;
    }
    .cg-cs[data-cg-chooser-d='left'] .cg-cs__menu {
      align-self: flex-start;
    }
    .cg-cs[data-cg-chooser-d='left'] .cg-cs__prompt {
      text-align: left;
    }

    .cg-cs[data-cg-chooser-d='center'] .cg-cs__chooser-wrap {
      align-items: center;
    }
    .cg-cs[data-cg-chooser-d='center'] .cg-cs__menu {
      align-self: center;
    }
    .cg-cs[data-cg-chooser-d='center'] .cg-cs__prompt {
      text-align: center;
    }

    .cg-cs[data-cg-chooser-d='right'] .cg-cs__chooser-wrap {
      align-items: flex-end;
    }
    .cg-cs[data-cg-chooser-d='right'] .cg-cs__menu {
      align-self: flex-end;
    }
    .cg-cs[data-cg-chooser-d='right'] .cg-cs__prompt {
      text-align: right;
    }

    /* Desktop pills stay auto-width with centered labels regardless of where
       the row sits, matching the original behavior. */
    .cg-cs[data-cg-chooser-d='left'] .cg-cs__item,
    .cg-cs[data-cg-chooser-d='center'] .cg-cs__item,
    .cg-cs[data-cg-chooser-d='right'] .cg-cs__item {
      justify-content: center;
      text-align: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cg-cs__item {
      transition:
        background-color 0.2s ease,
        color 0.2s ease;
    }

    .cg-cs__item:active {
      transform: none;
    }
  }
/* END_SECTION:cg-contact-switcher */

/* START_SECTION:cg-conversion-boost (INDEX:13) */
/* Reveal is owned entirely by main.js's section revealer: the elements carry
     .motion-item + data-horizon, so main.css hides them and Motion animates them
     in. The old section-local duplicate (a CSS `transition: opacity/transform` on
     [data-horizon] plus an own IntersectionObserver adding .is-visible) fought
     that WAAPI tween per the repo motion rules, and left items resting at the
     stylesheet opacity:0 whenever Motion finished before the local observer
     fired. Do not reintroduce a transition on these elements. */
  .cg-conversion-boost__cta {
    min-width: 16rem;
  }
/* END_SECTION:cg-conversion-boost */

/* START_SECTION:cg-crust-launch (INDEX:14) */
/* Custom element defaults to display:inline; force block for layout. */
  [data-cg-crust].cg-crust {
    display: block;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--cg-crust-bg);
    color: var(--cg-crust-ink);
    padding-top: calc(var(--cg-crust-pt, 96px) * 0.7);
    padding-bottom: calc(var(--cg-crust-pb, 96px) * 0.7);
    padding-left: calc(var(--cg-crust-pl, 24px) * 0.75);
    padding-right: calc(var(--cg-crust-pr, 24px) * 0.75);
  }

  @media (min-width: 750px) {
    [data-cg-crust].cg-crust {
      padding-top: var(--cg-crust-pt, 96px);
      padding-bottom: var(--cg-crust-pb, 96px);
      padding-left: var(--cg-crust-pl, 24px);
      padding-right: var(--cg-crust-pr, 24px);
    }
  }

  /* Paint-time hide for the JS reveal, gated behind the JS-added gate class so
     a failed/missing Vite chunk and JS-off both degrade VISIBLE (the class is
     only ever added by the entrypoint; #snapVisible removes it). */
  .cg-crust--motion [data-cg-crust-anim] {
    opacity: 0;
  }

  .cg-crust--motion .cg-crust__rule-fill {
    transform: scaleX(0);
  }

  [data-cg-crust].cg-crust .cg-crust__grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.035;
    pointer-events: none;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
    mix-blend-mode: multiply;
  }

  [data-cg-crust].cg-crust .cg-crust__inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  [data-cg-crust].cg-crust .cg-crust__eyebrow {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--cg-crust-accent);
    margin: 0 0 1rem;
  }

  [data-cg-crust].cg-crust .cg-crust__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: calc(clamp(2.3rem, 5.2vw, 4rem) * var(--cg-crust-h-scale, 1));
    letter-spacing: -0.025em;
    line-height: 1.02;
    text-wrap: balance;
    max-width: 22ch;
    margin: 0;
  }

  [data-cg-crust].cg-crust .cg-crust__heading em {
    font-style: italic;
    color: var(--cg-crust-accent);
  }

  /* Accent rule: the tape motif. The fill draws center-out (scaleX spring from
     the entrypoint) as a deliberate beat after the cascade lands. Rest state is
     fully drawn so no-JS / chunk-fail users see it. */
  [data-cg-crust].cg-crust .cg-crust__rule {
    width: clamp(72px, 14vw, 150px);
    height: 4px;
    margin-top: 1.4rem;
    overflow: hidden;
    border-radius: 999px;
  }

  [data-cg-crust].cg-crust .cg-crust__rule-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--cg-crust-accent);
    transform: scaleX(1);
    transform-origin: center;
  }

  [data-cg-crust].cg-crust .cg-crust__lede {
    font-family: var(--font-body--family);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 56ch;
    text-wrap: pretty;
    color: color-mix(in oklch, var(--cg-crust-ink) 78%, transparent);
    margin: 1.4rem 0 0;
  }

  /* Bezel-and-core media card (the brand-card recipe). */
  [data-cg-crust].cg-crust .cg-crust__media {
    width: min(100%, var(--cg-crust-media-w, 680px));
    margin-top: 2.25rem;
  }

  [data-cg-crust].cg-crust .cg-crust__media-shell {
    background: color-mix(in oklch, var(--cg-crust-ink) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-crust-ink) 7%, transparent);
    padding: 6px;
    border-radius: 1.75rem;
  }

  [data-cg-crust].cg-crust .cg-crust__media-core {
    position: relative;
    overflow: hidden;
    border-radius: calc(1.75rem - 0.375rem);
    aspect-ratio: var(--cg-crust-ratio, 1 / 1);
    background: var(--cg-crust-card);
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-crust-ink) 4%, transparent) inset;
  }

  [data-cg-crust].cg-crust .cg-crust__media-core::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
      ellipse at 50% 35%,
      color-mix(in oklch, var(--cg-crust-accent) 12%, transparent) 0%,
      transparent 65%
    );
  }

  [data-cg-crust].cg-crust .cg-crust__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--cg-crust-focal, center);
    display: block;
    transform-origin: center;
  }

  [data-cg-crust].cg-crust .cg-crust__img--placeholder {
    opacity: 0.3;
  }

  /* Stat cards overlap the photo's bottom edge. Negative margin (NOT a
     transform offset) so the Motion y reveal on each stat never erases the
     overlap positioning. */
  [data-cg-crust].cg-crust .cg-crust__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: -1.5rem 0 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 2;
  }

  @media (min-width: 750px) {
    [data-cg-crust].cg-crust .cg-crust__stats {
      margin-top: -2.1rem;
    }
  }

  [data-cg-crust].cg-crust .cg-crust__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.9rem 1.5rem;
    border-radius: 16px;
    background: color-mix(in oklch, var(--cg-crust-card) 88%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-crust-ink) 10%, transparent);
    backdrop-filter: blur(8px);
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 60%, transparent) inset,
      0 10px 24px -20px color-mix(in oklch, var(--cg-crust-ink) 22%, transparent);
  }

  [data-cg-crust].cg-crust .cg-crust__stat-value {
    font-family: var(--font-heading--family);
    font-size: 1.45rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--cg-crust-ink);
    font-variant-numeric: tabular-nums;
  }

  [data-cg-crust].cg-crust .cg-crust__stat-label {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-crust-ink) 60%, transparent);
  }

  [data-cg-crust].cg-crust .cg-crust__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 2rem;
  }

  [data-cg-crust].cg-crust .cg-crust__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
  }

  [data-cg-crust].cg-crust .cg-crust__price-prefix {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-crust-ink) 60%, transparent);
  }

  [data-cg-crust].cg-crust .cg-crust__price-value {
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--cg-crust-ink);
  }

  /* CTA pill: brand burnt sienna fill, cream text, grounded hover lift via the
     independent translate/scale properties (this element is Motion-revealed
     via its [data-cg-crust-anim] parent group, never the transform shorthand). */
  [data-cg-crust].cg-crust .cg-crust__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--cg-crust-accent);
    color: var(--cg-crust-card);
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 1px solid transparent;
    translate: 0 0;
    scale: 1;
    transition:
      background-color 0.3s ease,
      box-shadow 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      translate 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      scale 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 6px 16px -10px color-mix(in oklch, var(--cg-crust-accent) 58%, transparent);
  }

  [data-cg-crust].cg-crust .cg-crust__cta svg {
    transition: translate 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    translate: 0 0;
  }

  [data-cg-crust].cg-crust .cg-crust__cta:hover {
    background: color-mix(in oklch, var(--cg-crust-accent) 85%, #000000);
    translate: 0 -2px;
    box-shadow: 0 10px 22px -12px color-mix(in oklch, var(--cg-crust-accent) 65%, transparent);
  }

  [data-cg-crust].cg-crust .cg-crust__cta:hover svg {
    translate: 3px 0;
  }

  [data-cg-crust].cg-crust .cg-crust__cta:active {
    scale: 0.97;
    transition-duration: 0.1s;
  }

  [data-cg-crust].cg-crust .cg-crust__cta:focus-visible {
    outline: 2px solid var(--cg-crust-ink);
    outline-offset: 3px;
  }

  [data-cg-crust].cg-crust .cg-crust__spec {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: color-mix(in oklch, var(--cg-crust-ink) 60%, transparent);
    margin: 1.4rem 0 0;
  }

  @media (prefers-reduced-motion: reduce) {
    /* No opacity:1 !important here on purpose: the reduced reveal is the
       opacity-only fadeInOnView fade, and an !important fallback would pin the
       opacity and snap the WAAPI fade (animation origin sits below author
       !important). JS-off never adds the gate class, so content stays visible.
       Hover physics drop to tonal shifts only. */
    [data-cg-crust].cg-crust .cg-crust__cta:hover,
    [data-cg-crust].cg-crust .cg-crust__cta:active,
    [data-cg-crust].cg-crust .cg-crust__cta:hover svg {
      translate: 0 0;
      scale: 1;
    }
  }
/* END_SECTION:cg-crust-launch */

/* START_SECTION:cg-dual-product (INDEX:15) */
.cg-dual {
    /* custom element defaults to display:inline; force block for layout */
    display: block;
    position: relative;
    background: var(--cg-dual-bg);
    color: var(--cg-dual-text);
    padding-block: var(--cg-dual-pt) var(--cg-dual-pb);
    overflow: hidden;
  }

  /* Paint-time hide for the JS reveal. Gated on scripting so JS-off users see
     the panels/brand immediately (no inline opacity:0, no <noscript> override).
     The entrypoint animates opacity:[0,1]; if its motion chunk fails, the
     try/catch calls #snapVisible() which writes inline opacity:1 to beat this
     rule (this is non-!important stylesheet, inline always wins). */
  @media (scripting: enabled) {
    [data-cg-dual][data-cg-dual-state='pending'] [data-cg-dual-panel],
    [data-cg-dual][data-cg-dual-state='pending'] .cg-dual__brand {
      opacity: 0;
    }
  }

  /* No section header: drop the top padding so the panels sit flush to the top. */
  .cg-dual.cg-dual--no-header {
    padding-top: 0;
  }

  .cg-dual__header {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: calc(clamp(1rem, 5vw, 4rem) + var(--cg-dual-pl, 0px))
      calc(clamp(1rem, 5vw, 4rem) + var(--cg-dual-pr, 0px));
    margin-block-end: clamp(1.5rem, 3vw, 2.75rem);
  }

  .cg-dual__section-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cg-dual-accent);
  }

  .cg-dual__section-heading {
    margin: 0;
    color: var(--cg-dual-ink);
    font-weight: 400;
    font-size: calc(clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem) * var(--cg-dual-h-scale, 1));
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .cg-dual__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cg-dual-gap);
  }

  .cg-dual__panel {
    position: relative;
    min-height: var(--cg-dual-h);
    display: flex;
    overflow: hidden;
    isolation: isolate;
  }

  .cg-dual__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }

  .cg-dual__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--cg-dual-focal, center);
    transform-origin: center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cg-dual__img--placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--cg-dual-accent) 0%, var(--cg-dual-ink) 100%);
  }

  .cg-dual__placeholder-svg {
    width: 40%;
    max-width: 200px;
    opacity: 0.35;
  }

  .cg-dual__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      color-mix(in oklch, #000 calc(var(--cg-dual-overlay, 0.5) * 18%), transparent) 0%,
      transparent 32%,
      color-mix(in oklch, #000 calc(var(--cg-dual-overlay, 0.5) * 58%), transparent) 78%,
      color-mix(in oklch, #000 calc(var(--cg-dual-overlay, 0.5) * 92%), transparent) 100%
    );
    transition: opacity 0.5s ease;
  }

  .cg-dual__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding-block: clamp(1.5rem, 3vw, 2.75rem);
    padding-inline: calc(clamp(1.5rem, 3vw, 2.75rem) + var(--cg-dual-pl, 0px))
      calc(clamp(1.5rem, 3vw, 2.75rem) + var(--cg-dual-pr, 0px));
  }

  .cg-dual__index {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: color-mix(in oklch, var(--cg-dual-text) 70%, transparent);
  }

  .cg-dual__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: auto;
  }

  .cg-dual__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--cg-dual-accent) 80%, #fff);
  }

  .cg-dual__heading {
    margin: 0;
    font-weight: 400;
    font-size: calc(clamp(1.75rem, 1.1rem + 2.2vw, 2.9rem) * var(--cg-dual-h-scale, 1));
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .cg-dual__heading-link {
    color: var(--cg-dual-text);
    text-decoration: none;
  }

  .cg-dual__heading-link:hover,
  .cg-dual__heading-link:focus-visible {
    color: var(--cg-dual-text);
  }

  /* The heading link stretches over the whole panel (::after below); give
     keyboard focus a real ring on the title so it isn't left to the UA default
     over a busy photo (WCAG 2.4.7). */
  .cg-dual__heading-link:focus-visible {
    outline: 2px solid var(--cg-dual-text);
    outline-offset: 3px;
    border-radius: 3px;
  }

  .cg-dual__heading-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .cg-dual__sub {
    margin: 0;
    max-width: min(60ch, 100%);
    font-size: 1rem;
    line-height: 1.5;
    color: color-mix(in oklch, var(--cg-dual-text) 82%, transparent);
  }

  .cg-dual__sub em {
    font-style: italic;
    color: color-mix(in oklch, var(--cg-dual-accent) 85%, #fff);
  }

  /* Price + CTA group. Transparent by default so on desktop and non-brand
     layouts the two stack exactly as before; mobile brand mode (below) flips
     this to a centered flex row. */
  .cg-dual__actions {
    display: contents;
  }

  .cg-dual__price {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: color-mix(in oklch, var(--cg-dual-text) 92%, transparent);
  }

  .cg-dual__price-from {
    font-size: 0.8em;
    opacity: 0.8;
  }

  /* Ghost CTA matching the cg-hero-bg "shop accessories" secondary button:
     thin border + faint tint + blur over the image, brighten on hover.
     Sized a touch narrower and shorter than the hero so it sits as a compact
     partner to the price rather than a tall block. */
  .cg-dual__cta {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.6rem;
    padding: 0.5rem 1.2rem;
    border-radius: 12px;
    background: color-mix(in oklch, var(--cg-dual-text) 6%, transparent);
    border: 0.5px solid color-mix(in oklch, var(--cg-dual-text) 32%, transparent);
    color: var(--cg-dual-text);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none;
    backdrop-filter: blur(2px);
    transition:
      border-color 0.3s ease,
      background-color 0.3s ease,
      filter 0.2s ease;
  }

  .cg-dual__cta:hover {
    filter: brightness(1.05);
    border-color: color-mix(in oklch, var(--cg-dual-text) 72%, transparent);
    background: color-mix(in oklch, var(--cg-dual-text) 12%, transparent);
  }

  .cg-dual__cta:active {
    transform: scale(1);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  }

  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    /* Hover: lift the image, ease the scrim. Transform/filter only (never opacity
       on the panel) so the Motion reveal does not flicker. */
    .cg-dual__panel:hover .cg-dual__img {
      transform: scale(1.01);
    }

    .cg-dual__panel:hover .cg-dual__scrim {
      opacity: 0.82;
    }
  }

  @media screen and (min-width: 750px) {
    .cg-dual__grid {
      grid-template-columns: 1fr 1fr;
    }

    /* Inward: left panel reads toward the center seam (right-aligned) so both
       panels' focus converges in the middle. */
    .cg-dual--align-inward .cg-dual__panel[data-side='left'] .cg-dual__index {
      align-self: flex-end;
    }

    .cg-dual--align-inward .cg-dual__panel[data-side='left'] .cg-dual__body {
      align-items: flex-end;
      text-align: right;
    }

    .cg-dual--align-inward .cg-dual__panel[data-side='left'] .cg-dual__sub {
      margin-inline-start: auto;
    }
  }

  /* Centered: brand-forward composition (collab style). Content sits in the
     middle of each panel, centered, with the index numeral hidden. */
  .cg-dual--align-centered .cg-dual__content {
    justify-content: center;
  }

  .cg-dual--align-centered .cg-dual__index {
    display: none;
  }

  .cg-dual--align-centered .cg-dual__body {
    align-items: center;
    text-align: center;
    margin-top: 0;
  }

  .cg-dual--align-centered .cg-dual__sub {
    margin-inline: auto;
  }

  /* Middle-weighted scrim so centered text stays legible over the image. */
  .cg-dual--align-centered .cg-dual__scrim {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, #000 calc(var(--cg-dual-overlay, 0.5) * 32%), transparent) 0%,
      color-mix(in oklch, #000 calc(var(--cg-dual-overlay, 0.5) * 62%), transparent) 50%,
      color-mix(in oklch, #000 calc(var(--cg-dual-overlay, 0.5) * 80%), transparent) 100%
    );
  }

  /* ----- Collab brand word -----
     One large wordmark straddling the center seam: it spans the full section
     width so its middle letters land on the seam (half over each image), with
     each panel's product text cascading underneath, centered at the bottom. */
  .cg-dual__brand {
    position: absolute;
    inset-inline: 0;
    top: var(--cg-dual-brand-top, 38%);
    z-index: 2;
    transform: translateY(-50%);
    margin: 0;
    padding-inline: 0.5rem;
    text-align: center;
    pointer-events: none;
    color: var(--cg-dual-text);
    font-weight: 400;
    line-height: 0.86;
    letter-spacing: 0.01em;
    font-size: calc(clamp(3rem, 15vw, 12rem) * var(--cg-dual-brand-scale, 1));
    text-shadow: 0 6px 36px color-mix(in oklch, #000 42%, transparent);
  }

  /* Brand layout: hide per-panel eyebrow + index, push product text to a
     centered bottom stack so it cascades below the wordmark. */
  .cg-dual--has-brand .cg-dual__eyebrow,
  .cg-dual--has-brand .cg-dual__index {
    display: none;
  }

  .cg-dual--has-brand .cg-dual__body {
    align-items: center;
    text-align: center;
    margin-top: auto;
  }

  .cg-dual--has-brand .cg-dual__sub {
    margin-inline: auto;
  }

  @media screen and (min-width: 750px) {
    /* Brand mode: each panel's product text leans toward the center seam,
       echoing the wordmark above (left panel right-aligned, right left-aligned). */
    .cg-dual--has-brand .cg-dual__panel[data-side='left'] .cg-dual__body {
      align-items: flex-end;
      text-align: right;
    }

    .cg-dual--has-brand .cg-dual__panel[data-side='left'] .cg-dual__sub {
      margin-inline-start: auto;
      margin-inline-end: 0;
    }

    .cg-dual--has-brand .cg-dual__panel[data-side='right'] .cg-dual__body {
      align-items: flex-start;
      text-align: left;
    }

    .cg-dual--has-brand .cg-dual__panel[data-side='right'] .cg-dual__sub {
      margin-inline-start: 0;
      margin-inline-end: auto;
    }
  }

  @media screen and (max-width: 749px) {
    .cg-dual {
      padding-block: calc(var(--cg-dual-pt) * 0.7) calc(var(--cg-dual-pb) * 0.7);
    }
    .cg-dual__header {
      padding-inline: calc(clamp(1rem, 5vw, 4rem) + var(--cg-dual-pl, 0px) * 0.7)
        calc(clamp(1rem, 5vw, 4rem) + var(--cg-dual-pr, 0px) * 0.7);
    }
    .cg-dual__content {
      padding-inline: calc(clamp(1.5rem, 3vw, 2.75rem) + var(--cg-dual-pl, 0px) * 0.7)
        calc(clamp(1.5rem, 3vw, 2.75rem) + var(--cg-dual-pr, 0px) * 0.7);
    }
    .cg-dual__panel {
      min-height: min(var(--cg-dual-h), 64svh);
    }

    /* ----- Brand/collab mode on mobile -----
       Panels stack, so the wordmark straddles the HORIZONTAL seam between them
       (top half over the bottom edge of the top image, bottom half over the top
       edge of the bottom image). Pin the grid to a definite height with two
       equal rows so the seam lands at exactly top: 50%, then center the wordmark
       on it (the wordmark keeps its translateY(-50%) from the base rule). The
       top panel's text floats UP and the bottom panel's text sinks DOWN so
       neither collides with the wordmark sitting on the seam. */
    .cg-dual--has-brand .cg-dual__grid {
      height: calc(min(var(--cg-dual-h), 64svh) * 2 + var(--cg-dual-gap));
      grid-template-rows: 1fr 1fr;
      /* Clearance so each title sits clear of the wordmark half that overlaps
         its panel (the wordmark is centered on the seam). Derived from the
         same clamp the mobile wordmark uses. */
      --cg-dual-seam-clear: calc((clamp(3.25rem, 20vw, 7rem) * var(--cg-dual-brand-scale, 1)) * 0.6 + 0.5rem);
    }

    .cg-dual--has-brand .cg-dual__brand {
      top: 50%;
      font-size: calc(clamp(3.25rem, 20vw, 7rem) * var(--cg-dual-brand-scale, 1));
    }

    /* Titles hug the seam, mirroring desktop: the first product's title
       cascades just ABOVE the wordmark, the second's just BELOW it. The
       seam-clear padding keeps each clear of the wordmark half that overlaps
       its panel. */
    .cg-dual--has-brand .cg-dual__panel[data-side='left'] .cg-dual__content {
      justify-content: flex-end;
      padding-bottom: var(--cg-dual-seam-clear);
    }

    .cg-dual--has-brand .cg-dual__panel[data-side='left'] .cg-dual__body {
      margin-top: auto;
      margin-bottom: 0;
    }

    .cg-dual--has-brand .cg-dual__panel[data-side='right'] .cg-dual__content {
      justify-content: flex-start;
      padding-top: var(--cg-dual-seam-clear);
    }

    .cg-dual--has-brand .cg-dual__panel[data-side='right'] .cg-dual__body {
      margin-top: 0;
      margin-bottom: auto;
    }

    /* Keep titles legible sitting near the seam over any image. */
    .cg-dual--has-brand .cg-dual__heading {
      text-shadow: 0 2px 18px color-mix(in oklch, #000 55%, transparent);
    }

    /* Titles-only on mobile: drop the subheading, price, and CTA for a
       cleaner collab composition. */
    .cg-dual--has-brand .cg-dual__sub,
    .cg-dual--has-brand .cg-dual__actions {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* No opacity:1 !important here on purpose. The panels/brand are hidden at
       paint by the @media (scripting: enabled) rule above; the JS reduced reveal
       (motion/mini inView + animate) fades them in, and JS-off keeps them visible
       because scripting:none never applies the hide. An !important force-visible
       would pin opacity and make the WAAPI fade snap to 100 before running (WAAPI
       sits below author !important). Transform-only resets stay. */
    .cg-dual [data-cg-dual-panel],
    .cg-dual [data-cg-dual-anim] {
      transform: none !important;
    }
    /* The wordmark relies on translateY(-50%) for centering: keep it (this rule
       follows the reset above so it wins at equal specificity). */
    .cg-dual--has-brand .cg-dual__brand {
      transform: translateY(-50%) !important;
    }

    /* Bg photo hover: kill the scale snap; fade brightness instead. Subtle
       brightness changes are within reduced-motion guidance: vestibular
       triggers are scale, slide, and parallax, not tonal shifts. Scrim opacity
       transition comes from the base .cg-dual__scrim rule, contributing to
       the perceived brighten without doing layout work. */
    .cg-dual__img {
      transition: filter 0.4s ease;
    }
    .cg-dual__panel:hover .cg-dual__img,
    .cg-dual__panel:focus-within .cg-dual__img {
      transform: none;
      filter: brightness(1.06);
    }
  }
/* END_SECTION:cg-dual-product */

/* START_SECTION:cg-edge-launch (INDEX:16) */
[data-cg-edge].cg-edge {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--cg-edge-bg);
    color: var(--cg-edge-ink);
    padding-block: calc(var(--cg-edge-pt, 64px) * 0.7) calc(var(--cg-edge-pb, 64px) * 0.7);
  }

  [data-cg-edge].cg-edge .cg-edge__grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.035;
    pointer-events: none;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
    mix-blend-mode: multiply;
  }

  [data-cg-edge].cg-edge .cg-edge__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  /* ----- Media panel -----
     The frame clips the photo; the wordmark lives in .cg-edge__media OUTSIDE
     the frame so it can straddle the seam without being clipped. */
  [data-cg-edge].cg-edge .cg-edge__media {
    position: relative;
    min-width: 0;
  }

  [data-cg-edge].cg-edge .cg-edge__frame {
    position: relative;
    overflow: hidden;
    min-height: min(var(--cg-edge-h, 580px), 56svh);
    background: var(--cg-edge-card);
  }

  [data-cg-edge].cg-edge .cg-edge__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--cg-edge-focal, center);
    transform-origin: center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-cg-edge].cg-edge .cg-edge__img--placeholder {
    opacity: 0.3;
  }

  /* Subtle hover settle: transform/filter only, never opacity (the wrapper is
     a .motion-item, see the Motion + transition:opacity rule). */
  [data-cg-edge].cg-edge .cg-edge__media:hover .cg-edge__img {
    transform: scale(1.015);
  }

  /* Seam fade: the cream surface bleeds onto the photo at the seam edge so the
     ink wordmark stays legible as it crosses onto the image. Only painted when
     a brand word renders. Mobile seam = the frame's bottom edge. */
  [data-cg-edge].cg-edge--has-brand .cg-edge__frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, color-mix(in oklch, var(--cg-edge-bg) 72%, transparent) 0%, transparent 32%);
  }

  /* Edge strip: the literal edge-guard motif, a slim accent band wrapping the
     seam edge of the photo (the bottom edge on mobile, the seam side on desktop). */
  [data-cg-edge].cg-edge .cg-edge__strip {
    position: absolute;
    inset: auto 0 0 0;
    height: 7px;
    z-index: 2;
    background: var(--cg-edge-accent);
    box-shadow: 0 1px 0 color-mix(in oklch, #ffffff 22%, transparent) inset;
  }

  /* ----- Brand wordmark -----
     Straddles the seam between the cream band and the photo: half over each
     surface, exactly like the cg-dual collab word straddles its center seam.
     Mobile seam is horizontal (frame bottom edge). */
  [data-cg-edge].cg-edge .cg-edge__brand {
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 3;
    transform: translate(-50%, -50%);
    margin: 0;
    pointer-events: none;
    white-space: nowrap;
    font-family: var(--font-heading--family);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.86;
    letter-spacing: 0.02em;
    color: var(--cg-edge-ink);
    font-size: calc(clamp(2.6rem, 13vw, 5rem) * var(--cg-edge-brand-scale, 1));
  }

  /* ----- Content column ----- */
  [data-cg-edge].cg-edge .cg-edge__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    padding-top: 2.25rem;
    padding-left: calc(var(--cg-edge-pl, 40px) * 0.6);
    padding-right: calc(var(--cg-edge-pr, 40px) * 0.6);
  }

  /* Seam clearance on mobile: the wordmark's bottom half hangs into the
     content area, so push the content down clear of it. */
  [data-cg-edge].cg-edge--has-brand .cg-edge__content {
    padding-top: calc(clamp(2.6rem, 13vw, 5rem) * var(--cg-edge-brand-scale, 1) * 0.6 + 1.25rem);
  }

  [data-cg-edge].cg-edge .cg-edge__eyebrow {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--cg-edge-accent);
    margin: 0 0 0.9rem;
  }

  [data-cg-edge].cg-edge .cg-edge__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: calc(clamp(2.1rem, 4.4vw, 3.4rem) * var(--cg-edge-h-scale, 1));
    letter-spacing: -0.02em;
    line-height: 1.04;
    text-wrap: balance;
    margin: 0;
  }

  [data-cg-edge].cg-edge .cg-edge__heading em {
    font-style: italic;
    color: var(--cg-edge-accent);
  }

  [data-cg-edge].cg-edge .cg-edge__lede {
    font-family: var(--font-body--family);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 52ch;
    text-wrap: pretty;
    color: color-mix(in oklch, var(--cg-edge-ink) 78%, transparent);
    margin: 0;
  }

  [data-cg-edge].cg-edge .cg-edge__highlights {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  [data-cg-edge].cg-edge .cg-edge__highlight {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
  }

  [data-cg-edge].cg-edge .cg-edge__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.1em;
    border-radius: 999px;
    color: var(--cg-edge-accent);
    background: color-mix(in oklch, var(--cg-edge-accent) 10%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--cg-edge-accent) 22%, transparent) inset;
  }

  [data-cg-edge].cg-edge .cg-edge__highlight-text {
    font-family: var(--font-body--family);
    font-size: 0.95rem;
    line-height: 1.45;
    color: color-mix(in oklch, var(--cg-edge-ink) 84%, transparent);
  }

  [data-cg-edge].cg-edge .cg-edge__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 0.25rem;
  }

  [data-cg-edge].cg-edge .cg-edge__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
  }

  [data-cg-edge].cg-edge .cg-edge__price-prefix {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-edge-ink) 60%, transparent);
  }

  [data-cg-edge].cg-edge .cg-edge__price-value {
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--cg-edge-ink);
  }

  /* CTA pill: brand burnt sienna fill, cream text, grounded hover lift via the
     independent translate/scale properties (parent is a .motion-item, never
     the transform shorthand). */
  [data-cg-edge].cg-edge .cg-edge__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--cg-edge-accent);
    color: var(--cg-edge-card);
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 1px solid transparent;
    translate: 0 0;
    scale: 1;
    transition:
      background-color 0.3s ease,
      box-shadow 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      translate 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      scale 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 6px 16px -10px color-mix(in oklch, var(--cg-edge-accent) 58%, transparent);
  }

  [data-cg-edge].cg-edge .cg-edge__cta svg {
    transition: translate 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    translate: 0 0;
  }

  [data-cg-edge].cg-edge .cg-edge__cta:hover {
    background: color-mix(in oklch, var(--cg-edge-accent) 85%, #000000);
    translate: 0 -2px;
    box-shadow: 0 10px 22px -12px color-mix(in oklch, var(--cg-edge-accent) 65%, transparent);
  }

  [data-cg-edge].cg-edge .cg-edge__cta:hover svg {
    translate: 3px 0;
  }

  [data-cg-edge].cg-edge .cg-edge__cta:active {
    scale: 0.97;
    transition-duration: 0.1s;
  }

  [data-cg-edge].cg-edge .cg-edge__cta:focus-visible {
    outline: 2px solid var(--cg-edge-ink);
    outline-offset: 3px;
  }

  [data-cg-edge].cg-edge .cg-edge__spec {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: color-mix(in oklch, var(--cg-edge-ink) 60%, transparent);
    margin: 0;
  }

  /* ----- Desktop: asymmetric split, photo bleeds to the viewport edge ----- */
  @media screen and (min-width: 750px) {
    [data-cg-edge].cg-edge {
      padding-block: var(--cg-edge-pt, 64px) var(--cg-edge-pb, 64px);
    }

    [data-cg-edge].cg-edge .cg-edge__inner {
      grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
      align-items: center;
    }

    [data-cg-edge].cg-edge[data-cg-side='right'] .cg-edge__media {
      order: 2;
    }

    [data-cg-edge].cg-edge[data-cg-side='right'] .cg-edge__content {
      order: 1;
    }

    [data-cg-edge].cg-edge .cg-edge__frame {
      min-height: var(--cg-edge-h, 580px);
    }

    /* Seam-side corners round, outer corners square (the photo runs off the
       viewport edge). */
    [data-cg-edge].cg-edge[data-cg-side='right'] .cg-edge__frame {
      border-radius: 1.5rem 0 0 1.5rem;
    }

    [data-cg-edge].cg-edge[data-cg-side='left'] .cg-edge__frame {
      border-radius: 0 1.5rem 1.5rem 0;
    }

    /* Seam fade flips horizontal: cream bleeds in from the seam side. */
    [data-cg-edge].cg-edge--has-brand[data-cg-side='right'] .cg-edge__frame::before {
      background: linear-gradient(
        to right,
        color-mix(in oklch, var(--cg-edge-bg) 72%, transparent) 0%,
        transparent 30%
      );
    }

    [data-cg-edge].cg-edge--has-brand[data-cg-side='left'] .cg-edge__frame::before {
      background: linear-gradient(to left, color-mix(in oklch, var(--cg-edge-bg) 72%, transparent) 0%, transparent 30%);
    }

    /* Edge strip rides the vertical seam edge. */
    [data-cg-edge].cg-edge[data-cg-side='right'] .cg-edge__strip {
      inset: 0 auto 0 0;
      height: auto;
      width: 7px;
      box-shadow: 1px 0 0 color-mix(in oklch, #ffffff 22%, transparent) inset;
    }

    [data-cg-edge].cg-edge[data-cg-side='left'] .cg-edge__strip {
      inset: 0 0 0 auto;
      height: auto;
      width: 7px;
      box-shadow: -1px 0 0 color-mix(in oklch, #ffffff 22%, transparent) inset;
    }

    /* Wordmark centers on the vertical seam at the merchant-set height. */
    [data-cg-edge].cg-edge .cg-edge__brand {
      top: var(--cg-edge-brand-top, 16%);
      font-size: calc(clamp(3rem, 8.5vw, 8.5rem) * var(--cg-edge-brand-scale, 1));
    }

    [data-cg-edge].cg-edge[data-cg-side='right'] .cg-edge__brand {
      left: 0;
    }

    [data-cg-edge].cg-edge[data-cg-side='left'] .cg-edge__brand {
      left: 100%;
    }

    /* Content column: outer edge aligns to the page measure on wide screens,
       seam edge keeps clear breathing room. Merchant padding still wins when
       larger. */
    [data-cg-edge].cg-edge .cg-edge__content {
      padding-block: 3rem;
    }

    [data-cg-edge].cg-edge--has-brand .cg-edge__content {
      padding-top: 3rem;
    }

    [data-cg-edge].cg-edge[data-cg-side='right'] .cg-edge__content {
      padding-left: max(var(--cg-edge-pl, 40px), calc((100vw - 1280px) / 2));
      padding-right: max(var(--cg-edge-pr, 40px), 5vw);
    }

    [data-cg-edge].cg-edge[data-cg-side='left'] .cg-edge__content {
      padding-left: max(var(--cg-edge-pl, 40px), 5vw);
      padding-right: max(var(--cg-edge-pr, 40px), calc((100vw - 1280px) / 2));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Reveal is owned by frontend/entrypoints/main.js (staggered opacity fade
       on the .motion-item elements). Hover physics drop to tonal shifts only. */
    [data-cg-edge].cg-edge .cg-edge__media:hover .cg-edge__img {
      transform: none;
    }

    [data-cg-edge].cg-edge .cg-edge__cta:hover,
    [data-cg-edge].cg-edge .cg-edge__cta:active,
    [data-cg-edge].cg-edge .cg-edge__cta:hover svg {
      translate: 0 0;
      scale: 1;
    }
  }
/* END_SECTION:cg-edge-launch */

/* START_SECTION:cg-event-form (INDEX:17) */
/* Force the host section visible at first paint. main.css hides every
     non-header .shopify-section under @media (scripting: enabled); a form must
     never be trapped invisible, so this :has() unhide wins. No JS reveal. */
  .shopify-section:has([data-cg-event-form-root]) {
    opacity: 1 !important;
  }

  .cg-ef {
    display: block;
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .cg-ef__grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    pointer-events: none;
    mix-blend-mode: multiply;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
  }

  .cg-ef__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding-top: calc(var(--cg-ef-pt, 48px) * 0.7);
    padding-bottom: calc(var(--cg-ef-pb, 96px) * 0.7);
    padding-left: calc(var(--cg-ef-pl, 40px) * 0.55);
    padding-right: calc(var(--cg-ef-pr, 40px) * 0.55);
  }

  @media (min-width: 768px) {
    .cg-ef__inner {
      padding-top: var(--cg-ef-pt, 48px);
      padding-bottom: var(--cg-ef-pb, 96px);
      padding-left: var(--cg-ef-pl, 40px);
      padding-right: var(--cg-ef-pr, 40px);
    }
  }

  .cg-ef__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
  }

  .cg-ef__eyebrow {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--cg-ef-accent);
    margin: 0;
  }

  .cg-ef__heading {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--cg-ef-ink);
    margin: 0;
    text-wrap: balance;
  }

  .cg-ef__intro {
    font-family: var(--font-body--family, inherit);
    font-size: clamp(0.96rem, 1.2vw, 1.05rem);
    line-height: 1.6;
    color: color-mix(in oklch, var(--cg-ef-ink) 75%, transparent);
    max-width: 58ch;
    text-wrap: pretty;
  }

  .cg-ef__intro p {
    margin: 0 0 0.6em;
  }

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

  /* Content alignment (left default / center) */
  .cg-ef[data-cg-align='center'] .cg-ef__header {
    align-items: center;
    text-align: center;
  }

  .cg-ef[data-cg-align='center'] .cg-ef__intro {
    margin-inline: auto;
  }

  .cg-ef[data-cg-align='center'] .cg-ef__actions {
    justify-content: center;
  }

  .cg-ef__shell {
    position: relative;
    background: color-mix(in oklch, var(--cg-ef-ink) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-ef-ink) 7%, transparent);
    padding: 6px;
    border-radius: 1.75rem;
  }

  .cg-ef__core {
    background: var(--cg-ef-card);
    border-radius: calc(1.75rem - 0.375rem);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-ef-ink) 4%, transparent) inset;
  }

  .cg-ef__form {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .cg-ef__fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .cg-ef__legend {
    display: block;
    width: 100%;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cg-ef-accent);
    padding: 0 0 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid color-mix(in oklch, var(--cg-ef-ink) 10%, transparent);
  }

  .cg-ef__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
  }

  @media (max-width: 599px) {
    .cg-ef__grid {
      grid-template-columns: 1fr;
    }
  }

  .cg-ef__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
  }

  .cg-ef__field--full {
    grid-column: 1 / -1;
  }

  .cg-ef__label {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: color-mix(in oklch, var(--cg-ef-ink) 82%, transparent);
  }

  .cg-ef__req {
    color: var(--cg-ef-accent);
  }

  .cg-ef__input {
    width: 100%;
    font-family: var(--font-body--family, inherit);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--cg-ef-ink);
    background: color-mix(in oklch, var(--cg-ef-ink) 3%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-ef-ink) 14%, transparent);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    outline: none;
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  .cg-ef__input:focus-visible {
    border-color: var(--cg-ef-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--cg-ef-accent) 15%, transparent);
  }

  /* Inline validation feedback after the field has been interacted with. */
  .cg-ef__input:user-invalid {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px color-mix(in oklch, #c0392b 12%, transparent);
  }

  .cg-ef__input::placeholder {
    color: color-mix(in oklch, var(--cg-ef-ink) 65%, transparent);
  }

  .cg-ef__field-error {
    margin: 0;
    color: #8a1c12;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .cg-ef__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px;
  }

  .cg-ef__textarea {
    resize: vertical;
    min-height: 120px;
  }

  .cg-ef__actions {
    display: flex;
    justify-content: flex-start;
  }

  .cg-ef__submit {
    font-family: var(--font-body--family, 'Montserrat', sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fbf7ef;
    background: var(--cg-ef-accent);
    border: none;
    border-radius: 999px;
    padding: 0.8rem 2.2rem;
    cursor: pointer;
    transition:
      background 0.3s ease,
      transform 0.15s ease;
  }

  .cg-ef__submit:hover {
    background: color-mix(in oklch, var(--cg-ef-accent) 84%, #000000);
  }

  .cg-ef__submit:active {
    transform: scale(0.98);
  }

  .cg-ef__submit:focus-visible {
    outline: 2px solid var(--cg-ef-accent);
    outline-offset: 3px;
  }

  .cg-ef__note {
    margin: 0 0 0.5rem;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    font-family: var(--font-body--family, inherit);
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .cg-ef__note--ok {
    color: var(--cg-ef-ink);
    background: color-mix(in oklch, var(--cg-ef-accent) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-ef-accent) 35%, transparent);
  }

  .cg-ef__note--err {
    color: #8a1c12;
    background: color-mix(in oklch, #c0392b 10%, transparent);
    border: 1px solid color-mix(in oklch, #c0392b 35%, transparent);
  }

  .cg-ef__note--err a {
    color: inherit;
    text-decoration: underline;
  }

  /* Success-only view. On the posted reload Shopify anchors the URL at the
     submitted form's id, so that form is :target. Show just the thank-you +
     home button and hide the field area, so the empty form does not re-render
     under the note. :has() guards a bare #cg-event-form deep link (no post,
     no success block) from blanking the form. */
  .cg-ef__success {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .cg-ef__form:target .cg-ef__success {
    display: flex;
  }

  .cg-ef__form:target:has(.cg-ef__success) > *:not(.cg-ef__success) {
    display: none;
  }

  .cg-ef__home {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body--family, 'Montserrat', sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #fbf7ef;
    background: var(--cg-ef-accent);
    border-radius: 999px;
    padding: 0.8rem 2.2rem;
    transition:
      background 0.3s ease,
      transform 0.15s ease;
  }

  .cg-ef__home:hover {
    background: color-mix(in oklch, var(--cg-ef-accent) 84%, #000000);
  }

  .cg-ef__home:active {
    transform: scale(0.98);
  }

  .cg-ef__home:focus-visible {
    outline: 2px solid var(--cg-ef-accent);
    outline-offset: 3px;
  }

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

    .cg-ef__submit {
      transition: background 0.2s ease;
    }

    .cg-ef__submit:active {
      transform: none;
    }
  }

  @media (max-width: 749px) {
    .cg-ef__core {
      padding: clamp(1.1rem, 5vw, 1.6rem);
    }
  }
/* END_SECTION:cg-event-form */

/* START_SECTION:cg-flavor-launch (INDEX:18) */
[data-cg-flv].cg-flv {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--cg-flv-bg);
    color: var(--cg-flv-ink);
  }

  [data-cg-flv].cg-flv .cg-flv__grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.035;
    pointer-events: none;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
    mix-blend-mode: multiply;
  }

  [data-cg-flv].cg-flv .cg-flv__inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    padding-top: calc(var(--cg-flv-pt, 96px) * 0.75);
    padding-bottom: calc(var(--cg-flv-pb, 96px) * 0.75);
    padding-left: calc(var(--cg-flv-pl, 40px) * 0.6);
    padding-right: calc(var(--cg-flv-pr, 40px) * 0.6);
  }

  @media (min-width: 768px) {
    [data-cg-flv].cg-flv .cg-flv__inner {
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      align-items: center;
      gap: clamp(2.5rem, 5vw, 4.5rem);
      padding-top: var(--cg-flv-pt, 96px);
      padding-bottom: var(--cg-flv-pb, 96px);
      padding-left: var(--cg-flv-pl, 40px);
      padding-right: var(--cg-flv-pr, 40px);
    }
  }

  /* Bezel-and-core media card (the brand-card recipe). */
  [data-cg-flv].cg-flv .cg-flv__media-shell {
    background: color-mix(in oklch, var(--cg-flv-ink) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-flv-ink) 7%, transparent);
    padding: 6px;
    border-radius: 1.75rem;
  }

  [data-cg-flv].cg-flv .cg-flv__media-core {
    position: relative;
    overflow: hidden;
    border-radius: calc(1.75rem - 0.375rem);
    aspect-ratio: 1 / 1;
    background: var(--cg-flv-card);
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-flv-ink) 4%, transparent) inset;
  }

  [data-cg-flv].cg-flv .cg-flv__media-core::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
      ellipse at 50% 35%,
      color-mix(in oklch, var(--cg-flv-accent) 12%, transparent) 0%,
      transparent 65%
    );
  }

  [data-cg-flv].cg-flv .cg-flv__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  [data-cg-flv].cg-flv .cg-flv__img--placeholder {
    opacity: 0.3;
  }

  [data-cg-flv].cg-flv .cg-flv__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
  }

  [data-cg-flv].cg-flv .cg-flv__eyebrow {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--cg-flv-accent);
    margin: 0 0 0.9rem;
  }

  [data-cg-flv].cg-flv .cg-flv__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: calc(clamp(2.1rem, 4.4vw, 3.5rem) * var(--cg-flv-h-scale, 1));
    letter-spacing: -0.02em;
    line-height: 1.04;
    text-wrap: balance;
    margin: 0;
  }

  [data-cg-flv].cg-flv .cg-flv__subheading {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-flv-ink) 62%, transparent);
    margin: 0.8rem 0 0;
  }

  [data-cg-flv].cg-flv .cg-flv__lede {
    font-family: var(--font-body--family);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 54ch;
    color: color-mix(in oklch, var(--cg-flv-ink) 78%, transparent);
    margin: 0;
  }

  [data-cg-flv].cg-flv .cg-flv__flavors-label {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-flv-ink) 60%, transparent);
    margin: 0 0 0.7rem;
  }

  [data-cg-flv].cg-flv .cg-flv__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Flavor chip: pill with a color dot. Hover warms the border toward the
     accent and lifts via the independent translate property (never the
     transform shorthand, the parent is a .motion-item). */
  [data-cg-flv].cg-flv .cg-flv__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background: var(--cg-flv-card);
    border: 1px solid color-mix(in oklch, var(--cg-flv-ink) 10%, transparent);
    text-decoration: none;
    translate: 0 0;
    scale: 1;
    transition:
      border-color 0.3s ease,
      box-shadow 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      translate 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      scale 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-flv].cg-flv a.cg-flv__chip:hover {
    border-color: color-mix(in oklch, var(--cg-flv-accent) 60%, transparent);
    translate: 0 -2px;
    box-shadow: 0 8px 18px -14px color-mix(in oklch, var(--cg-flv-ink) 30%, transparent);
  }

  [data-cg-flv].cg-flv a.cg-flv__chip:active {
    scale: 0.97;
  }

  [data-cg-flv].cg-flv a.cg-flv__chip:focus-visible {
    outline: 2px solid var(--cg-flv-accent);
    outline-offset: 2px;
  }

  [data-cg-flv].cg-flv .cg-flv__chip-dot {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--cg-flv-chip, var(--cg-flv-accent));
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 40%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-flv-ink) 14%, transparent) inset;
  }

  [data-cg-flv].cg-flv .cg-flv__chip-name {
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: color-mix(in oklch, var(--cg-flv-ink) 86%, transparent);
    white-space: nowrap;
  }

  [data-cg-flv].cg-flv .cg-flv__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 0.25rem;
  }

  [data-cg-flv].cg-flv .cg-flv__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
  }

  [data-cg-flv].cg-flv .cg-flv__price-prefix {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-flv-ink) 60%, transparent);
  }

  [data-cg-flv].cg-flv .cg-flv__price-value {
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--cg-flv-ink);
  }

  /* CTA pill: brand burnt sienna fill, cream text, adaptive darken on hover. */
  [data-cg-flv].cg-flv .cg-flv__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--cg-flv-accent);
    color: var(--cg-flv-card);
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 1px solid transparent;
    translate: 0 0;
    scale: 1;
    transition:
      background-color 0.3s ease,
      box-shadow 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      translate 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      scale 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 6px 16px -10px color-mix(in oklch, var(--cg-flv-accent) 58%, transparent);
  }

  [data-cg-flv].cg-flv .cg-flv__cta svg {
    transition: translate 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    translate: 0 0;
  }

  [data-cg-flv].cg-flv .cg-flv__cta:hover {
    background: color-mix(in oklch, var(--cg-flv-accent) 85%, #000000);
    translate: 0 -2px;
    box-shadow: 0 10px 22px -12px color-mix(in oklch, var(--cg-flv-accent) 65%, transparent);
  }

  [data-cg-flv].cg-flv .cg-flv__cta:hover svg {
    translate: 3px 0;
  }

  [data-cg-flv].cg-flv .cg-flv__cta:active {
    scale: 0.97;
    transition-duration: 0.1s;
  }

  [data-cg-flv].cg-flv .cg-flv__cta:focus-visible {
    outline: 2px solid var(--cg-flv-ink);
    outline-offset: 3px;
  }

  [data-cg-flv].cg-flv .cg-flv__spec {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: color-mix(in oklch, var(--cg-flv-ink) 60%, transparent);
    margin: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    /* Reveal is owned by frontend/entrypoints/main.js (staggered opacity fade
       on the .motion-item elements). Hover physics drop to tonal shifts only:
       border/background transitions stay, lifts and presses go. */
    [data-cg-flv].cg-flv a.cg-flv__chip:hover,
    [data-cg-flv].cg-flv a.cg-flv__chip:active,
    [data-cg-flv].cg-flv .cg-flv__cta:hover,
    [data-cg-flv].cg-flv .cg-flv__cta:active,
    [data-cg-flv].cg-flv .cg-flv__cta:hover svg {
      translate: 0 0;
      scale: 1;
    }
  }
/* END_SECTION:cg-flavor-launch */

/* START_SECTION:cg-gallery (INDEX:19) */
@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Work+Sans:wght@400;500;600;700&display=swap');

  [data-cg-gallery] {
    /* custom element defaults to display:inline; force block for layout */
    display: block;
    --cg-cream: #f4efe6;
    --cg-cream-deep: #f4efe6;
    --cg-ink: #2b1d12;
    --cg-brown: #945e30;
    font-family:
      'Work Sans',
      system-ui,
      -apple-system,
      'Segoe UI',
      sans-serif;
  }

  /* Paint-time hide for the JS reveal, gated on scripting so JS-off users see
     the header + tiles immediately (no inline opacity:0, no <noscript> override).
     The entrypoint animates these in; reduced-motion / motion-load failure set
     inline opacity:1 (beats this non-!important rule). Items also carry the
     start-offset transform here so JS-off paints them un-offset (scripting:none
     drops the whole rule); the scattered per-tile rotation is a JS enhancement. */
  @media (scripting: enabled) {
    [data-cg-gallery] [data-cg-g-anim='h-child'] {
      opacity: 0;
    }
    [data-cg-gallery] [data-cg-g-item] {
      opacity: 0;
      transform: translateY(28px) scale(0.98);
    }
  }

  [data-cg-gallery] .font-display {
    font-family: 'Caprasimo', Georgia, serif;
    font-weight: 400;
  }

  [data-cg-gallery] .font-mono {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  }

  .cg-masonry {
    column-count: var(--cg-cols-mobile, 2);
    column-gap: 1.25rem;
  }

  @media (min-width: 640px) {
    .cg-masonry {
      column-count: var(--cg-cols-tablet, 3);
    }
  }

  @media (min-width: 1024px) {
    .cg-masonry {
      column-count: var(--cg-cols-desktop, 4);
      column-gap: 1.5rem;
    }
  }

  .cg-tile {
    background: var(--cg-cream-deep);
    box-shadow:
      0 1px 0 rgba(43, 29, 18, 0.04),
      0 14px 32px -20px rgba(43, 29, 18, 0.35);
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cg-tile:hover,
  .cg-tile:focus-visible {
    transform: rotate(0deg) translateY(-4px) scale(1.015) !important;
    box-shadow:
      0 2px 0 rgba(43, 29, 18, 0.05),
      0 28px 50px -18px rgba(43, 29, 18, 0.45);
    z-index: 2;
  }

  .cg-tile:focus-visible {
    outline: 2px solid var(--cg-brown);
    outline-offset: 4px;
  }

  .cg-tile__img {
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cg-tile:hover .cg-tile__img,
  .cg-tile:focus-visible .cg-tile__img {
    transform: scale(1.04);
  }

  .cg-tile__scrim {
    background: linear-gradient(to top, rgba(20, 14, 9, 0.55) 0%, rgba(20, 14, 9, 0) 55%);
  }

  .cg-tile__cap {
    color: #f4efe6;
  }

  .cg-lightbox {
    border: 0;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    background: transparent;
    color: #f4efe6;
  }

  .cg-lightbox[open] {
    display: flex;
  }

  .cg-lightbox__inner {
    min-width: 100vw;
    min-height: 100vh;
  }

  .cg-lightbox__img {
    background: #f4efe6;
  }

  @media (prefers-reduced-motion: reduce) {
    .cg-tile,
    .cg-tile__img {
      transition: none !important;
    }
    .cg-tile:hover,
    .cg-tile:focus-visible {
      transform: none !important;
    }
  }
/* END_SECTION:cg-gallery */

/* START_SECTION:cg-hero-cinematic (INDEX:20) */
.cg-cine {
    /* custom element defaults to display:inline; force block for layout */
    display: block;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: rgb(var(--color-background));
    width: 100%;
  }

  .cg-cine__media {
    position: absolute;
    inset: -4% -4%;
    z-index: 0;
  }

  .cg-cine__media img,
  .cg-cine__media-fallback {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
  }

  .cg-cine__media-fallback {
    background:
      radial-gradient(120% 80% at 70% 20%, rgba(120, 80, 40, 0.55), transparent 60%),
      radial-gradient(120% 80% at 20% 80%, rgba(40, 20, 10, 0.7), transparent 60%),
      linear-gradient(180deg, rgb(28, 24, 22), rgb(14, 12, 11));
  }

  .cg-cine__wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(120% 80% at 50% 30%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.85) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55));
    pointer-events: none;
  }

  .cg-cine__grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.18;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image:
      radial-gradient(rgba(255, 255, 255, 0.18) 0.6px, transparent 0.6px),
      radial-gradient(rgba(0, 0, 0, 0.25) 0.5px, transparent 0.5px);
    background-size:
      3px 3px,
      5px 5px;
    background-position:
      0 0,
      1px 2px;
  }

  .cg-cine__scrim {
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    z-index: 2;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
    pointer-events: none;
  }

  .cg-cine__inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cg-cine-min-h, 88vh);
    padding: clamp(4rem, 8vw, 6.5rem) clamp(1rem, 4vw, 2.5rem);
    text-align: center;
  }

  .cg-cine__stage {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
  }

  .cg-cine__heading {
    margin: 0;
    font-size: clamp(2.6rem, 6.4vw, 5.8rem);
    line-height: 0.96;
    letter-spacing: -0.022em;
    text-wrap: balance;
    color: inherit;
  }

  .cg-cine__heading em {
    font-style: italic;
    font-weight: 300;
    opacity: 0.82;
  }

  .cg-cine__heading [data-cg-cine-word] {
    display: inline-block;
    overflow: hidden;
    line-height: 0.96;
    padding-bottom: 0.06em;
  }

  .cg-cine__heading [data-cg-cine-word] > span {
    display: inline-block;
  }

  .cg-cine__lede {
    margin: clamp(1.25rem, 2.4vw, 1.75rem) auto 0;
    font-size: clamp(1rem, 1.45vw, 1.2rem);
    line-height: 1.55;
    max-width: 38ch;
    opacity: 0.86;
  }

  .cg-cine__ctas {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
  }

  .cg-cine__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.6rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    text-decoration: none;
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.3s ease,
      color 0.3s ease,
      border-color 0.3s ease;
  }

  .cg-cine__btn--primary {
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6);
  }

  .cg-cine__btn--primary:hover {
    transform: translateY(-2px);
  }

  .cg-cine__btn--ghost {
    background: transparent;
    color: rgb(var(--color-background));
    border: 1px solid rgba(var(--color-background), 0.5);
  }

  .cg-cine__btn--ghost:hover {
    border-color: rgb(var(--color-background));
    transform: translateY(-2px);
  }

  .cg-cine__btn-arrow {
    width: 0.85em;
    height: 0.85em;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cg-cine__btn:hover .cg-cine__btn-arrow {
    transform: translateX(3px);
  }

  .cg-cine__cue {
    position: absolute;
    left: 50%;
    bottom: clamp(1.5rem, 3vw, 2.5rem);
    z-index: 3;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(var(--color-background), 0.78);
  }

  .cg-cine__cue-line {
    display: inline-block;
    width: 2.25rem;
    height: 1px;
    background: currentColor;
    transform-origin: left center;
  }

  @media (prefers-reduced-motion: reduce) {
    .cg-cine__media img,
    .cg-cine__media-fallback {
      transform: none;
    }
  }
/* END_SECTION:cg-hero-cinematic */

/* START_SECTION:cg-hero-eellaup-hover (INDEX:21) */
.cg-eellaup-image-col {
    position: relative;
    display: block;
    width: 100%;
  }

  .cg-eellaup-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    object-fit: cover;
  }

  .cg-eellaup-image-col:hover .cg-eellaup-hover {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .cg-hero-eellaup-hover-wrapper,
    .cg-hero-eellaup-hover-wrapper .opacity-0,
    .cg-hero-eellaup-hover-wrapper .motion-item {
      opacity: 1 !important;
      transform: none !important;
    }
  }
/* END_SECTION:cg-hero-eellaup-hover */

/* START_SECTION:cg-hero-fresh (INDEX:22) */
/* Above the fold. main.css hides every .shopify-section wrapper at opacity:0
     until main.js clears it post-loadMotion; force this hero visible so the
     inner reveal always plays over a painted section with zero JS race. */
  .shopify-section:has(cg-hero-fresh) {
    opacity: 1 !important;
  }

  [data-cg-hero-fresh].cg-fresh {
    --cg-cream: #f4efe6;
    --cg-ink: #1a1410;
    position: relative;
    min-height: var(--cg-minh, 92svh);
    display: grid;
    background: var(--cg-surface, #f4efe6);
    color: var(--cg-text, #1a1410);
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__bg {
    overflow: hidden;
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Cream scrim keeps the type the hero even with a photo behind it. */
  [data-cg-hero-fresh].cg-fresh .cg-fresh__scrim {
    background: linear-gradient(
      100deg,
      color-mix(in oklch, var(--cg-surface) 92%, transparent) 0%,
      color-mix(in oklch, var(--cg-surface) 70%, transparent) 46%,
      color-mix(in oklch, var(--cg-surface) 24%, transparent) 100%
    );
  }

  /* Oven glow: a warm radial that breathes behind the headline. JS drives the
     scale/opacity loop; this is the resting paint so a missing chunk still
     shows a static warm bloom. */
  [data-cg-hero-fresh].cg-fresh .cg-fresh__glow {
    background: radial-gradient(
      58% 52% at 26% 40%,
      color-mix(in oklch, var(--cg-accent) 22%, transparent) 0%,
      transparent 68%
    );
    opacity: 0.62;
    transform-origin: 30% 42%;
    mix-blend-mode: multiply;
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__noise {
    opacity: 0.05;
    mix-blend-mode: multiply;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 200px 200px;
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__inner {
    min-height: inherit;
    justify-content: center;
    padding-top: calc(var(--cg-pt) + var(--cg-cpad-t, 0px));
    padding-bottom: calc(var(--cg-pb) + var(--cg-cpad-b, 0px));
    padding-inline: var(--cg-cpad-l, 64px) var(--cg-cpad-r, 40px);
  }

  /* ----- Eyebrow ----- */
  [data-cg-hero-fresh].cg-fresh .cg-fresh__eyebrow {
    margin: 0 0 clamp(1.1rem, 2vw, 1.6rem);
    font-family: var(--font-accent--family);
    color: color-mix(in oklch, var(--cg-text) 74%, transparent);
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--cg-accent);
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--cg-accent) 60%, transparent);
  }

  @media (prefers-reduced-motion: no-preference) {
    [data-cg-hero-fresh].cg-fresh .cg-fresh__dot {
      animation: cg-fresh-pulse 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
  }

  @keyframes cg-fresh-pulse {
    0% {
      box-shadow: 0 0 0 0 color-mix(in oklch, var(--cg-accent) 55%, transparent);
    }
    70% {
      box-shadow: 0 0 0 7px color-mix(in oklch, var(--cg-accent) 0%, transparent);
    }
    100% {
      box-shadow: 0 0 0 0 color-mix(in oklch, var(--cg-accent) 0%, transparent);
    }
  }

  /* ----- Monumental headline ----- */
  [data-cg-hero-fresh].cg-fresh .cg-fresh__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.028em;
    text-wrap: balance;
    font-feature-settings: 'liga', 'kern', 'calt';
  }

  /* Each line is a clipped track; the inner span rises out of it. overflow-clip
     is what sells the mask. The padding/negative-margin pair only reserves room
     for descenders (g, y, p) so the tight 0.92 line-height never shears them. */
  [data-cg-hero-fresh].cg-fresh .cg-fresh__line {
    display: block;
    overflow: hidden;
    padding: 0.08em 0.02em 0.18em;
    margin: -0.08em -0.02em -0.18em;
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__line > span {
    display: inline-block;
  }

  /* Emphasis word: warm baked-gradient fill + drawn underline beneath. */
  [data-cg-hero-fresh].cg-fresh .cg-fresh__emph {
    position: relative;
    display: inline-block;
    background-image: linear-gradient(96deg, var(--cg-accent), color-mix(in oklch, var(--cg-accent) 58%, #d98a3d));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__underline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.16em;
    width: 100%;
    height: 0.34em;
    overflow: visible;
  }

  /* WHCM: the clipped gradient renders the emphasis word invisible once the OS
     overrides colors. Restore a solid system color. */
  @media (forced-colors: active) {
    [data-cg-hero-fresh].cg-fresh .cg-fresh__emph {
      background-image: none;
      color: CanvasText;
      -webkit-text-fill-color: CanvasText;
    }
  }

  /* ----- Supporting line ----- */
  [data-cg-hero-fresh].cg-fresh .cg-fresh__lede {
    margin: clamp(1.4rem, 2.4vw, 2.1rem) 0 0;
    max-width: 46ch;
    font-size: clamp(1.02rem, 1.35vw, 1.3rem);
    line-height: 1.6;
    white-space: pre-line;
    color: color-mix(in oklch, var(--cg-text) 82%, transparent);
  }

  /* ----- Calls to action ----- */
  [data-cg-hero-fresh].cg-fresh .cg-fresh__actions {
    margin-top: clamp(1.8rem, 2.8vw, 2.6rem);
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__cta-primary,
  [data-cg-hero-fresh].cg-fresh .cg-fresh__cta-secondary {
    padding: 0.92rem 1.5rem;
    border-radius: 0.85rem;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    gap: 0.5rem;
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__cta-primary {
    border: 1px solid transparent;
    background: var(--cg-accent);
    color: var(--cg-surface);
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #fff 16%, transparent),
      0 12px 28px -14px color-mix(in oklch, var(--cg-accent) 70%, transparent);
    transition:
      box-shadow 0.3s ease,
      filter 0.2s ease;
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__cta-primary:hover {
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #fff 26%, transparent),
      0 18px 34px -16px color-mix(in oklch, var(--cg-accent) 80%, transparent);
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__cta-secondary {
    background: color-mix(in oklch, var(--cg-text) 4%, transparent);
    color: var(--cg-text);
    border: 1px solid color-mix(in oklch, var(--cg-text) 26%, transparent);
    box-shadow: none;
    transition:
      border-color 0.3s ease,
      background-color 0.3s ease;
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__cta-secondary:hover {
    border-color: color-mix(in oklch, var(--cg-text) 52%, transparent);
    background: color-mix(in oklch, var(--cg-text) 9%, transparent);
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__cta-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-cg-hero-fresh].cg-fresh .cg-fresh__cta-secondary:hover .cg-fresh__cta-arrow {
    transform: translateX(3px);
  }

  [data-cg-hero-fresh].cg-fresh a.cg-interactive:hover {
    filter: brightness(1.04);
  }

  [data-cg-hero-fresh].cg-fresh a.cg-interactive:focus-visible {
    outline: 2px solid var(--cg-accent);
    outline-offset: 3px;
  }

  /* Press feedback: independent `scale` so it never fights the reveal transform
     or the hover filter. JS press() drives it; this is the CSS fallback. */
  [data-cg-hero-fresh].cg-fresh [data-cg-hover='squish'] {
    transition: scale 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-cg-hero-fresh].cg-fresh [data-cg-hover='squish']:active {
    scale: 0.96;
  }

  @media (max-width: 768px) {
    [data-cg-hero-fresh].cg-fresh .cg-fresh__inner {
      padding-top: calc(var(--cg-pt) * 0.78 + var(--cg-cpad-t-m, 0px));
      padding-bottom: calc(var(--cg-pb) * 0.78 + var(--cg-cpad-b-m, 0px));
      padding-inline: var(--cg-cpad-l-m, 28px) var(--cg-cpad-r-m, 24px);
    }

    [data-cg-hero-fresh].cg-fresh .cg-fresh__lede {
      max-width: none;
    }
  }

  /* Reduced motion: kill the breathing glow; the JS reveal already degrades to
     an opacity-only fade. */
  @media (prefers-reduced-motion: reduce) {
    [data-cg-hero-fresh].cg-fresh .cg-fresh__glow {
      animation: none;
    }
  }
/* END_SECTION:cg-hero-fresh */

/* START_SECTION:cg-hero-immersive (INDEX:23) */
/* Above the fold. main.css hides every .shopify-section wrapper at opacity:0
     until main.js clears it post-loadMotion; force this hero visible so the
     inner reveal always plays over a painted section with zero JS race. */
  .shopify-section:has(cg-hero-immersive) {
    opacity: 1 !important;
  }

  @keyframes cg-imm-pulse {
    0% {
      box-shadow: 0 0 0 0 color-mix(in oklch, var(--cg-accent) 55%, transparent);
    }
    70% {
      box-shadow: 0 0 0 7px color-mix(in oklch, var(--cg-accent) 0%, transparent);
    }
    100% {
      box-shadow: 0 0 0 0 color-mix(in oklch, var(--cg-accent) 0%, transparent);
    }
  }

  @keyframes cg-imm-cue {
    0% {
      transform: translateY(0);
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    100% {
      transform: translateY(14px);
      opacity: 0;
    }
  }

  [data-cg-hero-immersive].cg-imm {
    --cg-cream: #f4efe6;
    --cg-ink: #1a1410;
    --cg-brown: #945e30;
    position: relative;
    min-height: var(--cg-minh, 100svh);
    display: grid;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__media {
    overflow: hidden;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__img,
  [data-cg-hero-immersive].cg-imm .cg-imm__media-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--cg-focal, center);
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__media-fallback {
    background: linear-gradient(150deg, var(--cg-brown) 0%, var(--cg-ink) 100%);
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__grade {
    background: linear-gradient(155deg, var(--cg-brown), var(--cg-ink));
    mix-blend-mode: soft-light;
    opacity: var(--cg-warmth, 0.24);
  }

  /* Bottom-left legibility scrim + corner vignette so the type reads on any
     photo without flattening the image. */
  [data-cg-hero-immersive].cg-imm .cg-imm__scrim {
    background:
      linear-gradient(
        to top,
        color-mix(in oklch, var(--cg-ink) calc(var(--cg-overlay, 0.55) * 100%), transparent) 0%,
        color-mix(in oklch, var(--cg-ink) calc(var(--cg-overlay, 0.55) * 36%), transparent) 42%,
        transparent 74%
      ),
      linear-gradient(
        105deg,
        color-mix(in oklch, var(--cg-ink) calc(var(--cg-overlay, 0.55) * 64%), transparent) 0%,
        transparent 58%
      ),
      radial-gradient(
        130% 120% at 50% 30%,
        transparent 54%,
        color-mix(in oklch, var(--cg-ink) calc(var(--cg-vignette, 0.28) * 100%), transparent) 100%
      );
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__noise {
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 210px 210px;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__inner {
    min-height: inherit;
    justify-content: flex-end;
    padding-top: calc(var(--cg-pt) + var(--cg-cpad-t, 0px));
    padding-bottom: calc(var(--cg-pb) + var(--cg-cpad-b, 0px));
    padding-inline: var(--cg-cpad-l, 60px) var(--cg-cpad-r, 32px);
  }

  /* ----- Eyebrow ----- */
  [data-cg-hero-immersive].cg-imm .cg-imm__eyebrow {
    margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
    font-family: var(--font-accent--family);
    color: color-mix(in oklch, var(--cg-text) 80%, transparent);
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--cg-accent);
  }

  @media (prefers-reduced-motion: no-preference) {
    [data-cg-hero-immersive].cg-imm .cg-imm__dot {
      animation: cg-imm-pulse 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
  }

  /* ----- Monumental headline ----- */
  [data-cg-hero-immersive].cg-imm .cg-imm__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.028em;
    text-wrap: balance;
    font-feature-settings: 'liga', 'kern', 'calt';
    text-shadow: 0 1px 30px color-mix(in oklch, var(--cg-ink) 32%, transparent);
  }

  /* Each line is a clipped track; the inner span rises out of it. The
     padding/negative-margin pair only reserves room for descenders so the tight
     0.92 line-height never shears them. */
  [data-cg-hero-immersive].cg-imm .cg-imm__line {
    display: block;
    overflow: hidden;
    padding: 0.08em 0.02em 0.18em;
    margin: -0.08em -0.02em -0.18em;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__line > span {
    display: inline-block;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__emph {
    background-image: linear-gradient(96deg, var(--cg-accent), color-mix(in oklch, var(--cg-accent) 55%, #fff));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 0.4em color-mix(in oklch, var(--cg-accent) 34%, transparent));
  }

  @media (forced-colors: active) {
    [data-cg-hero-immersive].cg-imm .cg-imm__emph {
      background-image: none;
      color: CanvasText;
      -webkit-text-fill-color: CanvasText;
      filter: none;
    }
  }

  /* ----- Supporting line ----- */
  [data-cg-hero-immersive].cg-imm .cg-imm__lede {
    margin: clamp(1.3rem, 2.2vw, 1.9rem) 0 0;
    max-width: 48ch;
    font-size: clamp(1.02rem, 1.3vw, 1.28rem);
    line-height: 1.6;
    white-space: pre-line;
    color: color-mix(in oklch, var(--cg-text) 88%, transparent);
  }

  /* ----- Calls to action ----- */
  [data-cg-hero-immersive].cg-imm .cg-imm__actions {
    margin-top: clamp(1.7rem, 2.6vw, 2.4rem);
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__cta-primary,
  [data-cg-hero-immersive].cg-imm .cg-imm__cta-secondary {
    padding: 0.92rem 1.5rem;
    border-radius: 0.85rem;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    gap: 0.5rem;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__cta-primary {
    border: 1px solid transparent;
    background: var(--cg-accent);
    color: var(--cg-ink);
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #fff 16%, transparent),
      0 12px 28px -14px color-mix(in oklch, var(--cg-accent) 64%, transparent);
    transition:
      box-shadow 0.3s ease,
      filter 0.2s ease;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__cta-primary:hover {
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #fff 26%, transparent),
      0 18px 34px -16px color-mix(in oklch, var(--cg-ink) 44%, transparent);
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__cta-secondary {
    color: var(--cg-text);
    background: color-mix(in oklch, var(--cg-text) 5%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-text) 34%, transparent);
    box-shadow: none;
    backdrop-filter: blur(3px);
    transition:
      border-color 0.3s ease,
      background-color 0.3s ease;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__cta-secondary:hover {
    border-color: color-mix(in oklch, var(--cg-text) 64%, transparent);
    background: color-mix(in oklch, var(--cg-text) 12%, transparent);
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__cta-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__cta-secondary:hover .cg-imm__cta-arrow {
    transform: translateX(3px);
  }

  [data-cg-hero-immersive].cg-imm a.cg-interactive:hover {
    filter: brightness(1.05);
  }

  [data-cg-hero-immersive].cg-imm a.cg-interactive:focus-visible {
    outline: 2px solid var(--cg-accent);
    outline-offset: 3px;
  }

  [data-cg-hero-immersive].cg-imm [data-cg-hover='squish'] {
    transition: scale 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-cg-hero-immersive].cg-imm [data-cg-hover='squish']:active {
    scale: 0.96;
  }

  /* ----- Floating product spotlight chip ----- */
  [data-cg-hero-immersive].cg-imm .cg-imm__chip {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1.05rem 0.7rem 0.7rem;
    border-radius: 1.1rem;
    text-decoration: none;
    color: var(--cg-ink);
    background: color-mix(in oklch, var(--cg-cream) 90%, transparent);
    border: 1px solid color-mix(in oklch, #fff 50%, transparent);
    box-shadow:
      0 18px 44px -20px color-mix(in oklch, var(--cg-ink) 70%, transparent),
      inset 0 1px 0 0 color-mix(in oklch, #fff 60%, transparent);
    backdrop-filter: blur(8px) saturate(1.1);
    max-width: min(58vw, 300px);
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__chip-media {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 0.7rem;
    overflow: hidden;
    background: color-mix(in oklch, var(--cg-ink) 6%, transparent);
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__chip-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__chip-body {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__chip-badge {
    align-self: flex-start;
    margin-bottom: 0.16rem;
    padding: 0.12rem 0.46rem;
    border-radius: 999px;
    font-family: var(--font-accent--family);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cg-cream);
    background: var(--cg-brown);
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__chip-title {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__chip-price {
    font-size: 0.85rem;
    color: color-mix(in oklch, var(--cg-ink) 78%, transparent);
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__chip-from {
    font-size: 0.72rem;
    opacity: 0.7;
  }

  /* Chip anchoring. Default top-right; the inner content sits bottom-left, so
     the chip never collides with the headline. */
  [data-cg-hero-immersive].cg-imm.cg-imm--chip-top-right .cg-imm__chip {
    top: clamp(20px, 4vw, 44px);
    right: clamp(20px, 4vw, 44px);
  }

  [data-cg-hero-immersive].cg-imm.cg-imm--chip-top-left .cg-imm__chip {
    top: clamp(20px, 4vw, 44px);
    left: clamp(20px, 4vw, 44px);
  }

  [data-cg-hero-immersive].cg-imm.cg-imm--chip-bottom-right .cg-imm__chip {
    bottom: clamp(20px, 4vw, 44px);
    right: clamp(20px, 4vw, 44px);
  }

  /* ----- Scroll cue ----- */
  [data-cg-hero-immersive].cg-imm .cg-imm__cue {
    left: 50%;
    bottom: clamp(14px, 2.4vw, 26px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.8;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__cue-label {
    font-family: var(--font-accent--family);
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--cg-text) 72%, transparent);
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__cue-track {
    position: relative;
    width: 1px;
    height: 34px;
    background: color-mix(in oklch, var(--cg-text) 32%, transparent);
    overflow: hidden;
  }

  [data-cg-hero-immersive].cg-imm .cg-imm__cue-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 12px;
    background: var(--cg-accent);
  }

  @media (prefers-reduced-motion: no-preference) {
    [data-cg-hero-immersive].cg-imm .cg-imm__cue-dot {
      animation: cg-imm-cue 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
  }

  @media (max-width: 768px) {
    [data-cg-hero-immersive].cg-imm .cg-imm__inner {
      padding-top: calc(var(--cg-pt) * 0.78 + var(--cg-cpad-t-m, 0px));
      padding-bottom: calc(var(--cg-pb) * 0.78 + var(--cg-cpad-b-m, 0px));
      padding-inline: var(--cg-cpad-l-m, 24px) var(--cg-cpad-r-m, 24px);
    }

    [data-cg-hero-immersive].cg-imm .cg-imm__lede {
      max-width: none;
    }

    [data-cg-hero-immersive].cg-imm .cg-imm__chip {
      gap: 0.6rem;
      padding: 0.55rem 0.85rem 0.55rem 0.55rem;
      max-width: min(72vw, 240px);
    }

    [data-cg-hero-immersive].cg-imm .cg-imm__chip-media {
      width: 46px;
      height: 46px;
    }

    [data-cg-hero-immersive].cg-imm .cg-imm__chip-title {
      font-size: 0.84rem;
    }

    [data-cg-hero-immersive].cg-imm.cg-imm--chip-top-right .cg-imm__chip,
    [data-cg-hero-immersive].cg-imm.cg-imm--chip-top-left .cg-imm__chip {
      top: clamp(16px, 4vw, 24px);
    }

    /* The scroll cue crowds the CTAs on short phones; hide it below the fold. */
    [data-cg-hero-immersive].cg-imm .cg-imm__cue {
      display: none;
    }
  }
/* END_SECTION:cg-hero-immersive */

/* START_SECTION:cg-hero-rotate (INDEX:24) */
@keyframes cg-hr-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes cg-hr-kenburns {
    from {
      transform: scale(1.01);
    }
    to {
      transform: scale(1);
    }
  }

  /* Rising cascade: content settles UP into the block. Uses the independent
     `translate` property (NOT `transform`) so the held resting value never
     clobbers the CTA press `scale` or the hover `filter` on interactive
     children. Same recipe as cg-hero-bg, renamed keyframes so the two heros
     never collide if both render on one page. */
  @keyframes cg-hr-rise {
    from {
      opacity: 0;
      translate: 0 1.4rem;
    }
    60% {
      opacity: 1;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @keyframes cg-hr-rise-soft {
    from {
      opacity: 0;
      translate: 0 1.4rem;
      scale: 1.018;
    }
    60% {
      opacity: 1;
    }
    to {
      opacity: 1;
      translate: 0 0;
      scale: 1;
    }
  }

  @keyframes cg-hr-rise-head {
    from {
      opacity: 0;
      translate: 0 2.4rem;
      scale: 1.03;
    }
    55% {
      opacity: 1;
    }
    to {
      opacity: 1;
      translate: 0 0;
      scale: 1;
    }
  }

  /* The hero is above the fold. main.css hides every .shopify-section at
     opacity:0 and only main.js clears it after a dynamic motion import + inView.
     Force the hero's wrapper visible immediately so the inner CSS cascade always
     plays over a visible section, with zero JS and no race. */
  .shopify-section:has(cg-hero-rotate) {
    opacity: 1 !important;
  }

  /* Inner content cascade: pure CSS, staggered by --cg-i, `both` fill holds the
     hidden from-state through the delay. The baseline is opacity-only, so it is
     the reduced-motion-safe reveal; the no-preference block layers the rise on
     top. The word ROTATION is the only JS-driven motion in this section, and it
     is non-load-bearing: a missing chunk just leaves the first word standing. */
  [data-cg-hero-rotate].cg-hr .cg-reveal {
    opacity: 0;
    animation: cg-hr-reveal 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(70ms + var(--cg-i, 0) * 55ms);
  }

  @media (prefers-reduced-motion: no-preference) {
    [data-cg-hero-rotate].cg-hr .cg-reveal {
      animation-name: cg-hr-rise;
      animation-duration: 0.52s;
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    [data-cg-hero-rotate].cg-hr .cg-reveal:not(.cg-interactive) {
      animation-name: cg-hr-rise-soft;
      animation-duration: 0.52s;
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    [data-cg-hero-rotate].cg-hr .cg-hr-heading__line.cg-reveal {
      animation-name: cg-hr-rise-head;
      animation-duration: 0.68s;
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    [data-cg-hero-rotate].cg-hr .cg-hr__img {
      animation: cg-hr-kenburns 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
  }

  /* Reduced motion: a single standard fade-in, no stagger. */
  @media (prefers-reduced-motion: reduce) {
    [data-cg-hero-rotate].cg-hr .cg-reveal {
      animation-duration: 0.5s;
      animation-timing-function: ease;
      animation-delay: 100ms;
    }
  }

  /* Press feedback: independent `scale` so it never fights a transform;
     user-initiated, so safe in reduced motion. */
  [data-cg-hero-rotate].cg-hr [data-cg-hover='squish'] {
    transition: scale 0.14s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-cg-hero-rotate].cg-hr [data-cg-hover='squish']:active {
    scale: 0.96;
  }

  [data-cg-hero-rotate].cg-hr {
    --cg-cream: #f4efe6;
    --cg-ink: #2b1d12;
    --cg-brown: #945e30;
    min-height: var(--cg-minh, 100svh);
    display: grid;
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__inner {
    min-height: inherit;
    justify-content: flex-end;
    padding-top: calc(var(--cg-pt) + var(--cg-cpad-t, 0px));
    padding-bottom: calc(var(--cg-pb) + var(--cg-cpad-b, 0px));
    padding-inline: var(--cg-cpad-l, 56px) var(--cg-cpad-r, 24px);
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__media {
    overflow: hidden;
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__grade {
    background: linear-gradient(160deg, var(--cg-brown), var(--cg-ink));
    mix-blend-mode: soft-light;
    opacity: var(--cg-warmth, 0.22);
  }

  /* Top fade: keeps the transparent header's cream text and inverse logo
     legible over the photo's top edge without a hard band. */
  [data-cg-hero-rotate].cg-hr .cg-hr__scrim {
    background:
      linear-gradient(
        to bottom,
        color-mix(in oklch, var(--cg-ink) calc(var(--cg-topfade, 0.32) * 100%), transparent),
        transparent 240px
      ),
      linear-gradient(
        to right,
        color-mix(in oklch, var(--cg-ink) calc(var(--cg-overlay, 0.45) * 70%), transparent) 0%,
        color-mix(in oklch, var(--cg-ink) calc(var(--cg-overlay, 0.45) * 30%), transparent) 55%,
        transparent 85%
      ),
      linear-gradient(
        157deg,
        transparent 0%,
        color-mix(in oklch, var(--cg-ink) calc(var(--cg-overlay, 0.45) * 65%), transparent) 32%,
        color-mix(in oklch, var(--cg-ink) calc(var(--cg-overlay, 0.45) * 100%), transparent) 100%
      ),
      radial-gradient(
        135% 110% at 62% 22%,
        transparent 52%,
        color-mix(in oklch, var(--cg-ink) calc(var(--cg-vignette, 0.24) * 100%), transparent) 100%
      );
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__noise {
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
  }

  [data-cg-hero-rotate].cg-hr .font-display {
    font-weight: 400;
    font-feature-settings: 'liga', 'kern', 'calt';
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__eyebrow {
    font-family: var(--font-accent--family);
  }

  [data-cg-hero-rotate].cg-hr .cg-hr-heading {
    text-wrap: balance;
  }

  [data-cg-hero-rotate].cg-hr .cg-hr-heading__line {
    display: block;
  }

  /* ----- Rotating word slot -----
     inline-grid stacks every word in the same cell, so the slot auto-sizes to
     the WIDEST word and the line never reflows between swaps (no CLS). The
     overflow clip is what sells the conveyor; the padding/negative-margin pair
     reserves room inside the clip box for descenders (g, y) at the tight 0.94
     heading line-height without changing layout. */
  [data-cg-hero-rotate].cg-hr .cg-hr-slot {
    display: inline-grid;
    justify-items: start;
    overflow: hidden;
    /* Liquid trims the whitespace between the lead text and the slot, so the
       0.22em left margin is the word space. The padding/negative-margin pair
       cancels out: it only reserves clip-box room for descenders. */
    padding: 0.06em 0.06em 0.16em;
    margin: -0.06em -0.06em -0.16em 0.22em;
  }

  [data-cg-hero-rotate].cg-hr .cg-hr-word {
    grid-area: 1 / 1;
    opacity: 0;
    white-space: nowrap;
    position: relative;
    color: var(--cg-accent);
  }

  /* First word ships with data-active from Liquid, so JS-off / chunk-404 /
     pre-upgrade paint all show a complete headline. */
  [data-cg-hero-rotate].cg-hr .cg-hr-word[data-active] {
    opacity: 1;
  }

  /* Reduced motion: the swap is a pure opacity crossfade driven by this
     transition + the data-active attr flip (no Motion import at all). Scoped to
     reduced so it can never re-fire under Motion's WAAPI opacity writes in the
     full-motion path (the transition:opacity flicker trap). */
  @media (prefers-reduced-motion: reduce) {
    [data-cg-hero-rotate].cg-hr .cg-hr-word {
      transition: opacity 0.3s ease;
    }
  }

  /* Accent A: underline */
  [data-cg-hero-rotate].cg-hr.cg-accent--underline .cg-hr-word::after {
    content: '';
    position: absolute;
    left: -0.02em;
    right: -0.02em;
    bottom: 0.04em;
    height: 0.09em;
    background: color-mix(in oklch, var(--cg-accent) 88%, transparent);
    border-radius: 999px;
  }

  /* Accent B: gradient (clipped gradient fill + warm glow) */
  [data-cg-hero-rotate].cg-hr.cg-accent--gradient .cg-hr-word {
    background-image: linear-gradient(92deg, var(--cg-accent), color-mix(in oklch, var(--cg-accent) 55%, #fff));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 0.42em color-mix(in oklch, var(--cg-accent) 38%, transparent));
  }

  /* Forced colors (WHCM): the gradient style clips a gradient into the glyphs
     over a transparent fill, which renders the rotating word invisible once the
     OS overrides colors. Restore a solid system color so the headline word
     stays legible. Underline/plain styles already paint a real color. */
  @media (forced-colors: active) {
    [data-cg-hero-rotate].cg-hr.cg-accent--gradient .cg-hr-word {
      background-image: none;
      color: CanvasText;
      -webkit-text-fill-color: CanvasText;
      filter: none;
    }
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__lede {
    margin-top: clamp(0.6rem, 1vw, 0.95rem);
    max-width: 54ch;
    line-height: 1.6;
    white-space: pre-line;
    color: color-mix(in oklch, var(--cg-text) 88%, transparent);
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__cta-primary {
    border: 1px solid transparent;
    background: var(--cg-accent);
    color: var(--cg-ink);
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #fff 12%, transparent),
      0 8px 24px -12px color-mix(in oklch, var(--cg-accent) 58%, transparent);
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      filter 0.2s ease;
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__cta-primary:hover {
    border-color: color-mix(in oklch, var(--cg-ink, #1a1410) 78%, transparent);
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #fff 22%, transparent),
      0 14px 30px -14px color-mix(in oklch, var(--cg-ink, #1a1410) 42%, transparent);
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__cta-secondary {
    color: var(--cg-text);
    background: color-mix(in oklch, var(--cg-text) 4%, transparent);
    border: 0.5px solid color-mix(in oklch, var(--cg-text) 32%, transparent);
    box-shadow: none;
    backdrop-filter: blur(2px);
    transition:
      border-color 0.3s ease,
      background-color 0.3s ease;
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__cta-secondary:hover {
    border-color: color-mix(in oklch, var(--cg-text) 72%, transparent);
    background: color-mix(in oklch, var(--cg-text) 12%, transparent);
  }

  [data-cg-hero-rotate].cg-hr a.cg-interactive:hover {
    filter: brightness(1.05);
  }

  /* Trust line: mono micro-label under the CTAs. Inline-flex keeps it an
     inline-level box so the content-position text-align rules center it on
     mobile without extra hooks. */
  [data-cg-hero-rotate].cg-hr .cg-hr__trust {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--font-accent--family);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--cg-text) 82%, transparent);
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--cg-accent);
  }

  [data-cg-hero-rotate].cg-hr .cg-hr__stars svg {
    display: block;
  }

  /* ----- Content placement -----
     Desktop and mobile anchor independently via two settings; same model as
     cg-hero-bg. Inner is a flex column: justify-content sets the vertical
     anchor, align-items sets the horizontal anchor. */

  @media (min-width: 769px) {
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='top-center'] .cg-hr__inner {
      justify-content: flex-start;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='center'] .cg-hr__inner {
      justify-content: center;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-left'] .cg-hr__inner,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-right'] .cg-hr__inner,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-center'] .cg-hr__inner {
      justify-content: flex-end;
    }

    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-left'] .cg-hr__inner {
      align-items: flex-start;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-right'] .cg-hr__inner {
      align-items: flex-end;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='top-center'] .cg-hr__inner,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-center'] .cg-hr__inner,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='center'] .cg-hr__inner {
      align-items: center;
    }

    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='top-center'] .cg-hr__content,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-center'] .cg-hr__content,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='center'] .cg-hr__content {
      text-align: center;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='top-center'] .cg-hr-slot,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-center'] .cg-hr-slot,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='center'] .cg-hr-slot {
      justify-items: center;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='top-center'] .cg-hr__lede,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-center'] .cg-hr__lede,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='center'] .cg-hr__lede {
      margin-inline: auto;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='top-center'] .cg-hr__actions,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-center'] .cg-hr__actions,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='center'] .cg-hr__actions {
      justify-content: center;
    }

    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-right'] .cg-hr__content {
      text-align: right;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-right'] .cg-hr-slot {
      justify-items: end;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-right'] .cg-hr__lede {
      margin-left: auto;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-desktop='bottom-right'] .cg-hr__actions {
      justify-content: flex-end;
    }

    /* Desktop supporting line on ONE line. */
    [data-cg-hero-rotate].cg-hr .cg-hr__lede {
      max-width: none;
    }
  }

  /* Portrait monitors / tablets (>=769px so the immersive mobile hero below is
     untouched): a full-viewport svh hero crops the photo to an extreme tall
     sliver and eats the whole screen. Aim for ~half the viewport (the config'd
     height stays the ceiling, so lowering viewport_height still wins), with a
     30rem floor so the bottom-anchored content is never crushed on a shorter
     portrait. min() only shrinks, so landscape keeps the full configured hero. */
  @media (min-width: 769px) and (orientation: portrait) {
    [data-cg-hero-rotate].cg-hr {
      min-height: min(var(--cg-minh, 100svh), max(50svh, 30rem));
    }
  }

  @media (max-width: 768px) {
    [data-cg-hero-rotate].cg-hr {
      min-height: var(--cg-minh, 100svh);
    }
    [data-cg-hero-rotate].cg-hr .cg-hr__inner {
      padding-top: calc(var(--cg-pt) * 0.75 + var(--cg-cpad-t-m, 0px));
      padding-bottom: calc(var(--cg-pb) * 0.75 + var(--cg-cpad-b-m, 0px));
      padding-inline: var(--cg-cpad-l-m, 24px) var(--cg-cpad-r-m, 24px);
    }

    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='top-center'] .cg-hr__inner {
      justify-content: flex-start;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='center'] .cg-hr__inner {
      justify-content: center;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-left'] .cg-hr__inner,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-right'] .cg-hr__inner,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-center'] .cg-hr__inner {
      justify-content: flex-end;
    }

    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-left'] .cg-hr__inner {
      align-items: flex-start;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-right'] .cg-hr__inner {
      align-items: flex-end;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='top-center'] .cg-hr__inner,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-center'] .cg-hr__inner,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='center'] .cg-hr__inner {
      align-items: center;
    }

    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='top-center'] .cg-hr__content,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-center'] .cg-hr__content,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='center'] .cg-hr__content {
      text-align: center;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='top-center'] .cg-hr-slot,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-center'] .cg-hr-slot,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='center'] .cg-hr-slot {
      justify-items: center;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='top-center'] .cg-hr__lede,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-center'] .cg-hr__lede,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='center'] .cg-hr__lede {
      margin-inline: auto;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='top-center'] .cg-hr__actions,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-center'] .cg-hr__actions,
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='center'] .cg-hr__actions {
      justify-content: center;
    }

    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-right'] .cg-hr__content {
      text-align: right;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-right'] .cg-hr-slot {
      justify-items: end;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-right'] .cg-hr__lede {
      margin-left: auto;
    }
    [data-cg-hero-rotate].cg-hr[data-cg-pos-mobile='bottom-right'] .cg-hr__actions {
      justify-content: flex-end;
    }

    /* Keep the headline to two lines on phones. */
    [data-cg-hero-rotate].cg-hr .cg-hr-heading {
      font-size: clamp(1.05rem, 5.4vw, 2.6rem);
    }
  }
/* END_SECTION:cg-hero-rotate */

/* START_SECTION:cg-overgrip-proof (INDEX:25) */
[data-cg-ogp].cg-ogp {
    position: relative;
    display: block;
    overflow: clip;
    isolation: isolate;
    background:
      radial-gradient(circle at 12% 12%, color-mix(in oklch, var(--cg-ogp-accent) 18%, transparent), transparent 32rem),
      radial-gradient(circle at 88% 18%, color-mix(in oklch, var(--cg-ogp-cool) 16%, transparent), transparent 30rem),
      var(--cg-ogp-bg);
    color: var(--cg-ogp-ink);
  }

  [data-cg-ogp] .cg-ogp__grain {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.045;
    background-image:
      linear-gradient(90deg, rgb(26 20 16 / 0.45) 1px, transparent 1px),
      linear-gradient(rgb(26 20 16 / 0.35) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
  }

  [data-cg-ogp] .cg-ogp__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: clamp(0.875rem, 1.8vw, 1.35rem);
    width: min(100%, 1280px);
    margin-inline: auto;
    padding-block: var(--cg-ogp-pad-t) var(--cg-ogp-pad-b);
    padding-inline: var(--cg-ogp-pad-l) var(--cg-ogp-pad-r);
  }

  [data-cg-ogp] .cg-ogp__lead,
  [data-cg-ogp] .cg-ogp__statement,
  [data-cg-ogp] .cg-ogp__point {
    border: 1px solid color-mix(in oklch, var(--cg-ogp-ink) 12%, transparent);
    background: color-mix(in oklch, var(--cg-ogp-card) 88%, white);
    box-shadow: 0 18px 42px rgb(26 20 16 / 0.07);
  }

  [data-cg-ogp] .cg-ogp__lead {
    grid-column: span 5;
    grid-row: span 2;
    min-height: 25rem;
    padding: clamp(1.5rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  [data-cg-ogp] .cg-ogp__heading {
    max-width: 12ch;
    margin: 0;
    font-family: var(--font-heading--family), Georgia, serif;
    font-size: calc(clamp(2.7rem, 5.6vw, 5.35rem) * var(--cg-ogp-heading-scale));
    line-height: 0.96;
    letter-spacing: 0;
    text-wrap: balance;
  }

  [data-cg-ogp] .cg-ogp__heading em {
    color: var(--cg-ogp-accent);
    font-style: italic;
  }

  [data-cg-ogp] .cg-ogp__image-strip {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    margin-inline-start: 0.12em;
    transform: translateY(-0.08em);
  }

  [data-cg-ogp] .cg-ogp__image-pill {
    display: inline-block;
    width: clamp(3rem, 5vw, 4.6rem);
    height: clamp(1.5rem, 2.6vw, 2.2rem);
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid color-mix(in oklch, var(--cg-ogp-ink) 14%, transparent);
    vertical-align: middle;
    background: var(--cg-ogp-bg);
  }

  [data-cg-ogp] .cg-ogp__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.88) contrast(1.08);
    transform: scale(1.02);
  }

  [data-cg-ogp] .cg-ogp__intro {
    max-width: 33rem;
    color: color-mix(in oklch, var(--cg-ogp-ink) 78%, transparent);
    font-family: var(--font-body--family), system-ui, sans-serif;
    font-size: clamp(1rem, 1.45vw, 1.18rem);
    line-height: 1.55;
  }

  [data-cg-ogp] .cg-ogp__intro p {
    margin: 0;
  }

  [data-cg-ogp] .cg-ogp__statement {
    grid-column: span 7;
    min-height: 11.8rem;
    display: grid;
    align-items: center;
    padding: clamp(1.4rem, 2.4vw, 2.35rem);
    background: linear-gradient(
      135deg,
      color-mix(in oklch, var(--cg-ogp-cool) 12%, var(--cg-ogp-card)),
      var(--cg-ogp-card)
    );
  }

  [data-cg-ogp] .cg-ogp__statement p {
    max-width: 48rem;
    margin: 0;
    font-family: var(--font-accent--family), var(--font-heading--family), Georgia, serif;
    font-size: clamp(1.42rem, 2.8vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: 0;
  }

  [data-cg-ogp] .cg-ogp__points {
    grid-column: span 7;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: clamp(0.875rem, 1.8vw, 1.35rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  [data-cg-ogp] .cg-ogp__point {
    min-height: 11.8rem;
    padding: clamp(1.15rem, 2vw, 1.65rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition:
      transform 0.35s ease,
      filter 0.35s ease,
      border-color 0.35s ease;
  }

  [data-cg-ogp] .cg-ogp__point:nth-child(1),
  [data-cg-ogp] .cg-ogp__point:nth-child(2) {
    grid-column: span 3;
  }

  [data-cg-ogp] .cg-ogp__point:nth-child(3) {
    grid-column: span 4;
  }

  [data-cg-ogp] .cg-ogp__point:hover {
    transform: translateY(-4px);
    filter: brightness(1.015);
    border-color: color-mix(in oklch, var(--cg-ogp-accent) 34%, transparent);
  }

  [data-cg-ogp] .cg-ogp__point h3 {
    margin: 0;
    font-family: var(--font-heading--family), Georgia, serif;
    font-size: clamp(1.22rem, 2vw, 1.7rem);
    line-height: 1.04;
    letter-spacing: 0;
  }

  [data-cg-ogp] .cg-ogp__point p {
    margin: 1.15rem 0 0;
    color: color-mix(in oklch, var(--cg-ogp-ink) 72%, transparent);
    font-size: 0.98rem;
    line-height: 1.45;
  }

  [data-cg-ogp].cg-ogp--motion [data-cg-ogp-anim] {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-cg-ogp].cg-ogp--motion [data-cg-ogp-anim] {
      transform: none;
    }

    [data-cg-ogp] .cg-ogp__point {
      transition: none;
    }
  }

  @media screen and (max-width: 989px) {
    [data-cg-ogp] .cg-ogp__inner {
      grid-template-columns: 1fr;
      padding-block: calc(var(--cg-ogp-pad-t) * 0.8) calc(var(--cg-ogp-pad-b) * 0.8);
      padding-inline: calc(var(--cg-ogp-pad-l) * 0.75) calc(var(--cg-ogp-pad-r) * 0.75);
    }

    [data-cg-ogp] .cg-ogp__lead,
    [data-cg-ogp] .cg-ogp__statement,
    [data-cg-ogp] .cg-ogp__points,
    [data-cg-ogp] .cg-ogp__point {
      grid-column: 1;
    }

    [data-cg-ogp] .cg-ogp__lead {
      grid-row: auto;
      min-height: 0;
      gap: 2rem;
    }

    [data-cg-ogp] .cg-ogp__heading {
      max-width: 11ch;
    }

    [data-cg-ogp] .cg-ogp__points {
      grid-template-columns: 1fr;
    }

    [data-cg-ogp] .cg-ogp__point:nth-child(n) {
      grid-column: 1;
    }
  }

  @media screen and (max-width: 749px) {
    [data-cg-ogp] .cg-ogp__lead,
    [data-cg-ogp] .cg-ogp__statement,
    [data-cg-ogp] .cg-ogp__point {
      min-height: 0;
    }

    [data-cg-ogp] .cg-ogp__heading {
      font-size: calc(clamp(2.45rem, 15vw, 4rem) * var(--cg-ogp-heading-scale));
    }
  }
/* END_SECTION:cg-overgrip-proof */

/* START_SECTION:cg-page (INDEX:26) */
/* cg-page owns its OWN reveal (children cascade via cg-page.js). Force the
     section wrapper visible at first paint so that cascade never plays behind a
     still-hidden wrapper while it waits for main.js to reveal it. main.css hides
     .shopify-section under @media (scripting: enabled); this !important beats it.
     The children stay hidden by data-cg-page-state="pending" until cg-page.js
     reveals them, so nothing flashes. Mirrors the cg-hero-bg :has() unhide. */
  .shopify-section:has([data-cg-page]) {
    opacity: 1 !important;
  }

  [data-cg-page].cg-page {
    /* custom element defaults to display:inline; force block for layout */
    display: block;
    isolation: isolate;
    position: relative;
  }

  [data-cg-page][data-cg-page-state='pending'] [data-cg-anim],
  [data-cg-page][data-cg-page-state='pending'] .cg-page__word {
    opacity: 0;
  }

  [data-cg-page].cg-page .cg-page__grain {
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
    mix-blend-mode: multiply;
  }

  [data-cg-page].cg-page .cg-page__inner {
    max-width: 920px;
    padding-top: calc(var(--cg-page-pt, 96px) * 0.7);
    padding-bottom: calc(var(--cg-page-pb, 96px) * 0.7);
    padding-left: calc(var(--cg-page-pl, 40px) * 0.55);
    padding-right: calc(var(--cg-page-pr, 40px) * 0.55);
  }

  @media (min-width: 768px) {
    [data-cg-page].cg-page .cg-page__inner {
      padding-top: var(--cg-page-pt, 96px);
      padding-bottom: var(--cg-page-pb, 96px);
      padding-left: var(--cg-page-pl, 40px);
      padding-right: var(--cg-page-pr, 40px);
    }
  }

  [data-cg-page].cg-page .cg-page__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 1.1rem;
    margin-bottom: 2.5rem;
  }

  [data-cg-page][data-title-align='center'].cg-page .cg-page__header {
    align-items: center;
    text-align: center;
  }

  [data-cg-page][data-title-align='right'].cg-page .cg-page__header {
    align-items: flex-end;
    text-align: right;
  }

  @media (min-width: 768px) {
    [data-cg-page].cg-page .cg-page__header {
      margin-bottom: 3.25rem;
    }
  }

  [data-cg-page].cg-page .cg-page__eyebrow {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--cg-page-accent);
    margin: 0;
    display: inline-flex;
    align-items: center;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid color-mix(in oklch, var(--cg-page-accent) 45%, transparent);
  }

  [data-cg-page].cg-page .cg-page__heading {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: calc(clamp(2.25rem, 6vw, 4.25rem) * var(--cg-page-h-scale, 1));
    line-height: 1;
    letter-spacing: -0.032em;
    text-wrap: balance;
    color: var(--cg-page-ink);
    margin: 0;
  }

  [data-cg-page].cg-page .cg-page__heading-inner {
    display: inline;
  }

  [data-cg-page].cg-page .cg-page__word {
    display: inline-block;
  }

  [data-cg-page].cg-page .cg-page__meta {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: color-mix(in oklch, var(--cg-page-ink) 60%, transparent);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }

  [data-cg-page].cg-page .cg-page__meta-sep {
    color: var(--cg-page-accent);
  }

  [data-cg-page].cg-page .cg-page__subheading {
    font-family: var(--font-subheading--family, inherit);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: color-mix(in oklch, var(--cg-page-ink) 75%, transparent);
    max-width: 56ch;
    text-wrap: pretty;
    margin: 0.5rem 0 0;
  }

  [data-cg-page].cg-page .cg-page__shell {
    position: relative;
    background: color-mix(in oklch, var(--cg-page-ink) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-page-ink) 7%, transparent);
    padding: 6px;
    border-radius: var(--cg-surface-radius, 8px);
  }

  [data-cg-page].cg-page .cg-page__core {
    background: var(--cg-page-card);
    border-radius: max(2px, calc(var(--cg-surface-radius, 8px) - 6px));
    padding: clamp(1.5rem, 4vw, 2.75rem);
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-page-ink) 4%, transparent) inset;
  }

  [data-cg-page].cg-page .cg-page__content {
    font-family: var(--font-body--family, inherit);
    color: color-mix(in oklch, var(--cg-page-ink) 88%, transparent);
    font-size: calc(1rem * var(--cg-page-content-scale, 1));
    line-height: 1.7;
    letter-spacing: -0.003em;
    /* Fill the card width. The card (.cg-page__core inside the 920px inner)
       already caps the reading measure; an extra ch-cap here only left the
       text short of the right edge while centered media spanned full width. */
    max-width: 100%;
  }

  [data-cg-page].cg-page .cg-page__content > rte-formatter,
  [data-cg-page].cg-page .cg-page__content rte-formatter {
    display: block;
  }

  [data-cg-page].cg-page .cg-page__content p {
    margin: 0 0 1.15em;
    text-wrap: pretty;
  }

  [data-cg-page].cg-page .cg-page__content p:last-child {
    margin-bottom: 0;
  }

  [data-cg-page].cg-page .cg-page__content h2 {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.2;
    color: var(--cg-page-ink);
    margin: 2.2rem 0 0.75rem;
    text-wrap: balance;
  }

  [data-cg-page].cg-page .cg-page__content h3 {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.25;
    color: var(--cg-page-ink);
    margin: 1.6rem 0 0.5rem;
    text-wrap: balance;
  }

  [data-cg-page].cg-page .cg-page__content h4,
  [data-cg-page].cg-page .cg-page__content h5,
  [data-cg-page].cg-page .cg-page__content h6 {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    color: var(--cg-page-ink);
    margin: 1.4rem 0 0.4rem;
    letter-spacing: -0.008em;
  }

  [data-cg-page].cg-page .cg-page__content a {
    color: var(--cg-page-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition:
      color 0.3s ease,
      text-decoration-color 0.3s ease;
  }

  [data-cg-page].cg-page .cg-page__content a:hover,
  [data-cg-page].cg-page .cg-page__content a:focus-visible {
    color: color-mix(in oklch, var(--cg-page-accent) 70%, var(--cg-page-ink));
    text-decoration-thickness: 2px;
  }

  [data-cg-page].cg-page .cg-page__content a:focus-visible {
    outline: 2px solid var(--cg-page-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  [data-cg-page].cg-page .cg-page__content strong {
    color: var(--cg-page-ink);
    font-weight: 600;
  }

  [data-cg-page].cg-page .cg-page__content em {
    font-style: italic;
  }

  [data-cg-page].cg-page .cg-page__content ul,
  [data-cg-page].cg-page .cg-page__content ol {
    padding-left: 1.4rem;
    margin: 0 0 1.15em;
  }

  [data-cg-page].cg-page .cg-page__content li {
    margin-bottom: 0.4em;
  }

  [data-cg-page].cg-page .cg-page__content li::marker {
    color: var(--cg-page-accent);
  }

  [data-cg-page].cg-page .cg-page__content blockquote {
    border-left: 3px solid var(--cg-page-accent);
    padding: 0.25rem 0 0.25rem 1.1rem;
    margin: 1.6rem 0;
    font-family: var(--font-body--family, 'Montserrat', sans-serif);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: color-mix(in oklch, var(--cg-page-ink) 92%, transparent);
    font-style: italic;
    text-wrap: pretty;
  }

  [data-cg-page].cg-page .cg-page__content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 1.6rem 0;
    display: block;
  }

  /* Lead paragraph: slightly larger intro under the title. */
  [data-cg-page].cg-page .cg-page__content .cg-lead {
    font-size: calc(1.15rem * var(--cg-page-content-scale, 1));
    line-height: 1.6;
    color: var(--cg-page-ink);
  }

  /* Semantic media: <figure> centers its image + caption, no inline styles
     needed in the page body. */
  [data-cg-page].cg-page .cg-page__content figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0;
    text-align: center;
  }

  [data-cg-page].cg-page .cg-page__content figure img {
    margin: 0 auto;
    border-radius: 1.5rem;
    box-shadow:
      0 4px 6px -1px rgb(0 0 0 / 0.1),
      0 2px 4px -2px rgb(0 0 0 / 0.1);
  }

  [data-cg-page].cg-page .cg-page__content figcaption {
    margin-top: 0.85rem;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-style: normal;
    color: color-mix(in oklch, var(--cg-page-ink) 65%, transparent);
  }

  [data-cg-page].cg-page .cg-page__content hr {
    border: none;
    border-top: 1px solid color-mix(in oklch, var(--cg-page-ink) 10%, transparent);
    margin: 2rem 0;
  }

  [data-cg-page].cg-page .cg-page__content code {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.92em;
    background: color-mix(in oklch, var(--cg-page-ink) 6%, transparent);
    padding: 0.12em 0.4em;
    border-radius: 4px;
  }

  [data-cg-page].cg-page .cg-page__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95em;
  }

  [data-cg-page].cg-page .cg-page__content th,
  [data-cg-page].cg-page .cg-page__content td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid color-mix(in oklch, var(--cg-page-ink) 10%, transparent);
    text-align: left;
  }

  [data-cg-page].cg-page .cg-page__content th {
    font-weight: 600;
    color: var(--cg-page-ink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.82em;
  }

  /* Contact form */
  [data-cg-page].cg-page .cg-page__form {
    margin-top: 2rem;
  }

  [data-cg-page].cg-page .cg-page__content + .cg-page__form {
    margin-top: 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in oklch, var(--cg-page-ink) 8%, transparent);
  }

  [data-cg-page].cg-page .cg-page__form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
  }

  @media (max-width: 599px) {
    [data-cg-page].cg-page .cg-page__form-grid {
      grid-template-columns: 1fr;
    }
  }

  [data-cg-page].cg-page .cg-page__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
  }

  [data-cg-page].cg-page .cg-page__form-grid .cg-page__field {
    margin-bottom: 0;
  }

  [data-cg-page].cg-page .cg-page__label {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-page-ink) 85%, transparent);
  }

  [data-cg-page].cg-page .cg-page__input {
    font-family: var(--font-body--family, inherit);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--cg-page-ink);
    background: color-mix(in oklch, var(--cg-page-ink) 3%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-page-ink) 12%, transparent);
    border-radius: 0.75rem;
    padding: 0.7rem 0.9rem;
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease;
    outline: none;
    width: 100%;
  }

  [data-cg-page].cg-page .cg-page__input:focus {
    border-color: var(--cg-page-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--cg-page-accent) 15%, transparent);
  }

  /* WHCM: the focus ring is box-shadow-only and the input sets outline:none, so
     forced colors leaves no visible focus marker. Restore a real outline. */
  @media (forced-colors: active) {
    [data-cg-page].cg-page .cg-page__input:focus {
      outline: 2px solid CanvasText;
      outline-offset: 2px;
    }
  }

  [data-cg-page].cg-page .cg-page__input::placeholder {
    color: color-mix(in oklch, var(--cg-page-ink) 30%, transparent);
  }

  [data-cg-page].cg-page .cg-page__textarea {
    resize: vertical;
    min-height: 120px;
  }

  [data-cg-page].cg-page .cg-page__submit {
    font-family: var(--font-body--family, 'Montserrat', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--cg-page-accent);
    border: none;
    border-radius: 999px;
    padding: 0.75rem 2rem;
    cursor: pointer;
    transition:
      background 0.3s ease,
      transform 0.15s ease;
    display: block;
    margin: 0 auto;
  }

  [data-cg-page].cg-page .cg-page__submit:hover {
    background: color-mix(in oklch, var(--cg-page-accent) 85%, var(--cg-page-ink));
  }

  [data-cg-page].cg-page .cg-page__submit:active {
    transform: scale(0.96);
  }

  [data-cg-page].cg-page .cg-page__form-note {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-family: var(--font-body--family, inherit);
    font-size: 0.95rem;
    line-height: 1.5;
  }

  [data-cg-page].cg-page .cg-page__form-note--ok {
    color: var(--cg-page-ink);
    background: color-mix(in oklch, var(--cg-page-accent) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-page-accent) 35%, transparent);
  }

  [data-cg-page].cg-page .cg-page__form-note--err {
    color: #8a1c12;
    background: color-mix(in oklch, #c0392b 10%, transparent);
    border: 1px solid color-mix(in oklch, #c0392b 35%, transparent);
  }

  [data-cg-page].cg-page .cg-page__form-note a {
    color: inherit;
    text-decoration: underline;
  }

  @media (max-width: 749px) {
    [data-cg-page].cg-page .cg-page__core {
      padding: clamp(1.1rem, 5vw, 1.6rem);
    }
    [data-cg-page].cg-page .cg-page__header {
      gap: 0.85rem;
    }
  }
/* END_SECTION:cg-page */

/* START_SECTION:cg-photo-collage (INDEX:27) */
.cg-photo-collage {
    display: block;
    padding-block: var(--cg-cpad-t, 32px) var(--cg-cpad-b, 32px);
    padding-inline: var(--cg-cpad-l, 24px) var(--cg-cpad-r, 24px);
  }

  @media (max-width: 749px) {
    .cg-photo-collage {
      padding-block: calc(var(--cg-cpad-t, 32px) * 0.75) calc(var(--cg-cpad-b, 32px) * 0.75);
      padding-inline: calc(var(--cg-cpad-l, 24px) * 0.75) calc(var(--cg-cpad-r, 24px) * 0.75);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cg-photo-collage * {
      transition: none !important;
    }
  }
/* END_SECTION:cg-photo-collage */

/* START_SECTION:cg-product-bento (INDEX:28) */
[data-cg-bento].cg-bento {
    /* custom element defaults to display:inline; force block for layout */
    display: block;
    isolation: isolate;
    position: relative;
  }

  [data-cg-bento].cg-bento .cg-bento__grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    pointer-events: none;
    z-index: 1;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
    mix-blend-mode: multiply;
  }

  [data-cg-bento].cg-bento .cg-bento__inner {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
    padding-top: calc(var(--cg-bento-pt, 96px) * 0.75);
    padding-bottom: calc(var(--cg-bento-pb, 96px) * 0.75);
    padding-left: calc(var(--cg-bento-pl, 40px) * 0.6);
    padding-right: calc(var(--cg-bento-pr, 40px) * 0.6);
  }

  @media (min-width: 768px) {
    [data-cg-bento].cg-bento .cg-bento__inner {
      padding-top: var(--cg-bento-pt, 96px);
      padding-bottom: var(--cg-bento-pb, 96px);
      padding-left: var(--cg-bento-pl, 40px);
      padding-right: var(--cg-bento-pr, 40px);
    }
  }

  [data-cg-bento].cg-bento .cg-bento__header {
    display: flex;
    flex-direction: column;
    margin-bottom: clamp(3rem, 5vw, 5rem);
  }

  [data-cg-bento].cg-bento .cg-bento__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--cg-bento-accent);
  }

  [data-cg-bento].cg-bento .cg-bento__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--cg-bento-accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--cg-bento-accent) 22%, transparent);
  }

  [data-cg-bento].cg-bento .cg-bento__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
    font-size: calc(clamp(2.5rem, 6vw, 4.5rem) * var(--cg-bento-h-scale, 1));
    color: var(--cg-bento-ink);
  }

  [data-cg-bento].cg-bento .cg-bento__subheading {
    margin: 24px 0 0;
    max-width: 55ch;
    line-height: 1.6;
    color: color-mix(in oklch, var(--cg-bento-ink) 75%, transparent);
    font-size: calc(1rem * var(--cg-bento-sub-scale, 1));
  }

  @media (min-width: 768px) {
    [data-cg-bento].cg-bento .cg-bento__subheading {
      font-size: calc(1.125rem * var(--cg-bento-sub-scale, 1));
    }
  }

  /* Asymmetrical Grid Architecture */
  [data-cg-bento].cg-bento .cg-bento__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  @media (min-width: 768px) {
    [data-cg-bento].cg-bento .cg-bento__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: minmax(180px, auto);
      gap: 1.5rem;
    }

    [data-cg-bento].cg-bento .cg-bento__card--featured {
      grid-column: span 2;
    }
  }

  @media (min-width: 1024px) {
    [data-cg-bento].cg-bento .cg-bento__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.75rem;
    }

    /* specific bento layout magic for 4+ items */
    [data-cg-bento].cg-bento .cg-bento__card--featured {
      grid-column: span 2;
      grid-row: span 2;
    }

    [data-cg-bento].cg-bento .cg-bento__card:not(.cg-bento__card--featured) {
      grid-column: span 1;
      grid-row: span 1;
    }
  }

  /* Double-Bezel Card Architecture */
  [data-cg-bento].cg-bento .cg-bento__card {
    display: block;
    width: 100%;
    height: 100%;
  }

  [data-cg-bento].cg-bento .cg-bento__shell {
    height: 100%;
    background: color-mix(in oklch, var(--cg-bento-ink) 3%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-bento-ink) 6%, transparent);
    padding: 6px;
    border-radius: 2rem;
    cursor: default;
    /* transition handled dynamically in JS for hover states, leaving default here */
    box-shadow: 0 4px 24px -12px color-mix(in oklch, var(--cg-bento-ink) 12%, transparent);
  }

  [data-cg-bento].cg-bento .cg-bento__core {
    height: 100%;
    background: var(--cg-bento-card);
    border-radius: calc(2rem - 6px);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2rem;
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 80%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-bento-ink) 4%, transparent) inset;
  }

  [data-cg-bento].cg-bento .cg-bento__card--featured .cg-bento__core {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  @media (max-width: 767px) {
    [data-cg-bento].cg-bento .cg-bento__card--featured .cg-bento__core {
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
    }
  }

  [data-cg-bento].cg-bento .cg-bento__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cg-bento-accent);
    background: color-mix(in oklch, var(--cg-bento-ink) 4%, transparent);
    border-radius: 999px;
    border: 1px solid color-mix(in oklch, var(--cg-bento-ink) 6%, transparent);
    box-shadow: 0 2px 4px color-mix(in oklch, var(--cg-bento-ink) 4%, transparent);
  }

  [data-cg-bento].cg-bento .cg-bento__icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
  }

  [data-cg-bento].cg-bento .cg-bento__card-title {
    font-family: var(--font-heading--family);
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--cg-bento-ink);
    margin: 0 0 12px;
  }

  [data-cg-bento].cg-bento .cg-bento__card--featured .cg-bento__card-title {
    font-size: clamp(2rem, 3.5vw, 3.25rem);
  }

  [data-cg-bento].cg-bento .cg-bento__card-text {
    font-size: 1rem;
    line-height: 1.6;
    color: color-mix(in oklch, var(--cg-bento-ink) 75%, transparent);
    margin: 0;
    max-width: 40ch;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-cg-bento].cg-bento .opacity-0,
    [data-cg-bento].cg-bento .cg-bento__card {
      transform: none !important;
      filter: none !important;
    }
    /* Opacity force-visible ONLY when JS has not claimed the reduced fade
       (the lib stamps data-cg-reveal-js, then fades opacity itself). */
    [data-cg-bento].cg-bento:not([data-cg-reveal-js]) .opacity-0,
    [data-cg-bento].cg-bento:not([data-cg-reveal-js]) .cg-bento__card {
      opacity: 1 !important;
    }
  }
/* END_SECTION:cg-product-bento */

/* START_SECTION:cg-product-drop (INDEX:29) */
[data-cg-drop].cg-drop {
    --cg-drop-radius: 0;
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    min-height: var(--cg-drop-minh);
    color: var(--cg-drop-text);
    container-type: inline-size;
  }

  /* ---- Media + parallax background image ---- */
  [data-cg-drop] .cg-drop__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
  }

  [data-cg-drop] .cg-drop__image {
    position: absolute;
    left: 0;
    top: -8%;
    width: 100%;
    height: 116%;
    object-fit: cover;
    object-position: var(--cg-drop-focal, center);
  }

  [data-cg-drop] .cg-drop__placeholder {
    inset: 0;
    top: 0;
    height: 100%;
    background:
      radial-gradient(
        120% 120% at 18% 12%,
        color-mix(in oklab, var(--cg-drop-accent) 55%, transparent) 0%,
        transparent 55%
      ),
      linear-gradient(135deg, #2b1d12 0%, #6e4724 55%, #8a3a12 100%);
  }

  /* ---- Two-axis scrim: left column anchored, diagonal corners,
     darker top + bottom so content reads over any photo. ---- */
  [data-cg-drop] .cg-drop__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(
        to right,
        color-mix(in oklab, var(--cg-drop-ink) calc(var(--cg-drop-overlay) * 78%), transparent) 0%,
        color-mix(in oklab, var(--cg-drop-ink) calc(var(--cg-drop-overlay) * 34%), transparent) 52%,
        transparent 86%
      ),
      linear-gradient(
        to bottom,
        color-mix(in oklab, var(--cg-drop-ink) calc(var(--cg-drop-overlay) * 70%), transparent) 0%,
        color-mix(in oklab, var(--cg-drop-ink) calc(var(--cg-drop-overlay) * 18%), transparent) 38%,
        color-mix(in oklab, var(--cg-drop-ink) calc(var(--cg-drop-overlay) * 88%), transparent) 100%
      );
  }

  [data-cg-drop] .cg-drop__grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.04;
    pointer-events: none;
    mix-blend-mode: overlay;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
  }

  /* ---- Inner layout ---- */
  [data-cg-drop] .cg-drop__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin-inline: auto;
    padding-inline: var(--cg-drop-pl, 24px) var(--cg-drop-pr, 24px);
    padding-block: var(--cg-drop-pt) var(--cg-drop-pb);
    min-height: var(--cg-drop-minh);
  }

  [data-cg-drop] .cg-drop__content {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.6vw, 1.9rem);
    max-width: min(46rem, 100%);
  }

  /* ---- Heading ---- */
  [data-cg-drop] .cg-drop__heading {
    margin: 0;
    font-weight: 400;
    font-size: calc(clamp(2.4rem, 1.4rem + 4.4vw, 5rem) * var(--cg-drop-heading-scale, 1));
    line-height: 0.98;
    letter-spacing: -0.025em;
    text-wrap: balance;
    text-shadow: 0 2px 18px color-mix(in oklab, var(--cg-drop-ink) 35%, transparent);
  }

  [data-cg-drop] .cg-drop__heading em {
    font-style: italic;
    position: relative;
    color: color-mix(in oklab, var(--cg-drop-accent) 52%, #fff);
  }

  [data-cg-drop] .cg-drop__heading em::after {
    content: '';
    position: absolute;
    left: 0.02em;
    right: 0.02em;
    bottom: 0.04em;
    height: 0.09em;
    border-radius: 999px;
    background: color-mix(in oklab, var(--cg-drop-accent) 60%, #fff);
    opacity: 0.55;
  }

  [data-cg-drop] .cg-drop__tagline {
    margin: 0;
    max-width: 52ch;
    font-size: clamp(1rem, 0.94rem + 0.35vw, 1.18rem);
    line-height: 1.6;
    text-wrap: pretty;
    color: color-mix(in oklab, var(--cg-drop-text) 90%, transparent);
  }

  /* ---- Proof chips ---- */
  [data-cg-drop] .cg-drop__proofs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.7rem;
  }

  [data-cg-drop] .cg-drop__proof {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.85rem 0.42rem 0.7rem;
    border-radius: 999px;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--cg-drop-text) 92%, transparent);
    background: color-mix(in oklab, var(--cg-drop-ink) 28%, transparent);
    border: 1px solid color-mix(in oklab, #fff 16%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  [data-cg-drop] .cg-drop__proof-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--cg-drop-accent) 60%, #fff);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--cg-drop-accent) 30%, transparent);
  }

  /* ---- CTAs ---- */
  [data-cg-drop] .cg-drop__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    margin-top: 0.4rem;
  }

  [data-cg-drop] .cg-drop__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
  }

  /* Primary: solid accent pill with a nested button-in-button arrow circle. */
  [data-cg-drop] .cg-drop__cta--primary {
    padding: 0.85rem 0.85rem 0.85rem 1.5rem;
    font-size: 0.98rem;
    background: var(--cg-drop-accent);
    color: var(--cg-drop-accent-text);
    box-shadow:
      0 1px 0 color-mix(in oklab, #fff 22%, transparent) inset,
      0 16px 34px -18px color-mix(in oklab, var(--cg-drop-accent) 80%, #000);
    transition:
      transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      filter 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-drop] .cg-drop__cta--primary:hover {
    filter: brightness(1.05);
    box-shadow:
      0 1px 0 color-mix(in oklab, #fff 22%, transparent) inset,
      0 22px 44px -16px color-mix(in oklab, var(--cg-drop-accent) 70%, #000);
  }

  [data-cg-drop] .cg-drop__cta--primary:active {
    transform: scale(0.98);
  }

  [data-cg-drop] .cg-drop__cta-price {
    padding-left: 0.7rem;
    border-left: 1px solid color-mix(in oklab, var(--cg-drop-accent-text) 28%, transparent);
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.82rem;
    font-weight: 500;
  }

  [data-cg-drop] .cg-drop__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--cg-drop-accent-text) 16%, transparent);
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-drop] .cg-drop__cta--primary:hover .cg-drop__cta-icon {
    transform: translate(2px, -2px) scale(1.05);
  }

  /* Ghost: on-image text, faint fill, hairline border (mirrors cg-hero ghost). */
  [data-cg-drop] .cg-drop__cta--ghost {
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
    color: var(--cg-drop-text);
    background: color-mix(in oklab, var(--cg-drop-text) 6%, transparent);
    border: 0.5px solid color-mix(in oklab, var(--cg-drop-text) 38%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition:
      border-color 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      background-color 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      filter 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-drop] .cg-drop__cta--ghost svg {
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-drop] .cg-drop__cta--ghost:hover {
    border-color: color-mix(in oklab, var(--cg-drop-text) 72%, transparent);
    background: color-mix(in oklab, var(--cg-drop-text) 12%, transparent);
    filter: brightness(1.05);
  }

  [data-cg-drop] .cg-drop__cta--ghost:hover svg {
    transform: translateX(3px);
  }

  /* ---- Floating product frame (double-bezel) ---- */
  [data-cg-drop] .cg-drop__frame {
    order: -1;
    align-self: center;
    width: min(78%, 360px);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    position: relative;
  }

  [data-cg-drop] .cg-drop__frame-shell {
    padding: 7px;
    border-radius: 1.9rem;
    background: color-mix(in oklab, #fff 8%, transparent);
    border: 1px solid color-mix(in oklab, #fff 16%, transparent);
    box-shadow:
      0 1px 0 color-mix(in oklab, #fff 30%, transparent) inset,
      0 36px 70px -34px color-mix(in oklab, var(--cg-drop-ink) 70%, transparent);
    transform: rotate(-1.4deg);
    transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-drop] .cg-drop__frame:hover .cg-drop__frame-shell {
    transform: rotate(-0.4deg) translateY(-4px);
  }

  [data-cg-drop] .cg-drop__frame-core {
    position: relative;
    overflow: hidden;
    background: var(--cg-drop-card);
    border-radius: calc(1.9rem - 0.4375rem);
    aspect-ratio: 4 / 5;
    box-shadow:
      0 1px 1px color-mix(in oklab, #fff 90%, transparent) inset,
      0 0 0 1px color-mix(in oklab, var(--cg-drop-ink) 8%, transparent) inset;
  }

  [data-cg-drop] .cg-drop__frame-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-drop] .cg-drop__frame:hover .cg-drop__frame-img {
    transform: scale(1.045);
  }

  [data-cg-drop] .cg-drop__price-tag {
    position: absolute;
    bottom: -16px;
    right: -6px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 10px 16px;
    background: var(--cg-drop-card);
    color: var(--cg-drop-ink);
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--cg-drop-ink) 10%, transparent);
    box-shadow:
      0 1px 0 #ffffffb0 inset,
      0 16px 36px -18px color-mix(in oklab, var(--cg-drop-ink) 45%, transparent);
    transform: rotate(2.4deg);
  }

  [data-cg-drop] .cg-drop__price-label {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklab, var(--cg-drop-ink) 60%, transparent);
  }

  [data-cg-drop] .cg-drop__price-value {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
  }

  /* ---- Mobile content position (<= 749px) ---- */
  @media screen and (max-width: 749px) {
    [data-cg-drop].cg-drop {
      min-height: min(var(--cg-drop-minh), 92svh);
    }

    [data-cg-drop] .cg-drop__inner {
      min-height: min(var(--cg-drop-minh), 92svh);
      padding-block: calc(var(--cg-drop-pt) * 0.8) calc(var(--cg-drop-pb) * 0.8);
    }

    [data-cg-drop][data-cg-pos-mobile='bottom-left'] .cg-drop__inner {
      justify-content: flex-end;
      align-items: flex-start;
      text-align: left;
    }

    [data-cg-drop][data-cg-pos-mobile='bottom-center'] .cg-drop__inner {
      justify-content: flex-end;
      align-items: center;
      text-align: center;
    }

    [data-cg-drop][data-cg-pos-mobile='center'] .cg-drop__inner {
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    [data-cg-drop][data-cg-pos-mobile='center'] .cg-drop__content,
    [data-cg-drop][data-cg-pos-mobile='bottom-center'] .cg-drop__content {
      align-items: center;
    }

    [data-cg-drop][data-cg-pos-mobile='bottom-center'] .cg-drop__proofs,
    [data-cg-drop][data-cg-pos-mobile='center'] .cg-drop__proofs,
    [data-cg-drop][data-cg-pos-mobile='bottom-center'] .cg-drop__ctas,
    [data-cg-drop][data-cg-pos-mobile='center'] .cg-drop__ctas {
      justify-content: center;
    }

    [data-cg-drop] .cg-drop__heading {
      font-size: calc(clamp(2rem, 1.2rem + 6vw, 3rem) * var(--cg-drop-heading-scale, 1));
    }

    [data-cg-drop] .cg-drop__frame {
      width: min(70%, 280px);
    }
  }

  /* ---- Desktop content position (>= 750px) ---- */
  @media screen and (min-width: 750px) {
    [data-cg-drop] .cg-drop__inner {
      justify-content: flex-end;
    }

    [data-cg-drop][data-cg-pos-desktop='center'] .cg-drop__inner {
      justify-content: center;
    }

    [data-cg-drop][data-cg-pos-desktop='top-center'] .cg-drop__inner {
      justify-content: flex-start;
      align-items: center;
      text-align: center;
    }

    [data-cg-drop][data-cg-pos-desktop='bottom-center'] .cg-drop__inner {
      align-items: center;
      text-align: center;
    }

    [data-cg-drop][data-cg-pos-desktop='center'] .cg-drop__inner {
      align-items: center;
      text-align: center;
    }

    [data-cg-drop][data-cg-pos-desktop='bottom-right'] .cg-drop__inner {
      align-items: flex-end;
      text-align: right;
    }

    [data-cg-drop][data-cg-pos-desktop='top-center'] .cg-drop__content,
    [data-cg-drop][data-cg-pos-desktop='bottom-center'] .cg-drop__content,
    [data-cg-drop][data-cg-pos-desktop='center'] .cg-drop__content {
      align-items: center;
    }

    [data-cg-drop][data-cg-pos-desktop='bottom-right'] .cg-drop__content {
      align-items: flex-end;
      margin-left: auto;
    }

    [data-cg-drop][data-cg-pos-desktop='top-center'] .cg-drop__proofs,
    [data-cg-drop][data-cg-pos-desktop='bottom-center'] .cg-drop__proofs,
    [data-cg-drop][data-cg-pos-desktop='center'] .cg-drop__proofs,
    [data-cg-drop][data-cg-pos-desktop='top-center'] .cg-drop__ctas,
    [data-cg-drop][data-cg-pos-desktop='bottom-center'] .cg-drop__ctas,
    [data-cg-drop][data-cg-pos-desktop='center'] .cg-drop__ctas {
      justify-content: center;
    }

    [data-cg-drop][data-cg-pos-desktop='bottom-right'] .cg-drop__proofs,
    [data-cg-drop][data-cg-pos-desktop='bottom-right'] .cg-drop__ctas {
      justify-content: flex-end;
    }

    /* Desktop: lift the product frame out of flow so it floats opposite the
       content, against the right edge, instead of stacking above it. */
    [data-cg-drop] .cg-drop__frame {
      position: absolute;
      order: 0;
      margin-bottom: 0;
      width: clamp(260px, 26vw, 400px);
      right: clamp(2rem, 6vw, 6rem);
      bottom: clamp(3rem, 9vh, 7rem);
      z-index: 3;
    }

    [data-cg-drop][data-cg-pos-desktop='bottom-right'] .cg-drop__frame,
    [data-cg-drop][data-cg-pos-desktop='center'] .cg-drop__frame {
      right: auto;
      left: clamp(2rem, 6vw, 6rem);
    }

    /* Keep content clear of the floating frame. */
    [data-cg-drop]:has(.cg-drop__frame) .cg-drop__content {
      max-width: min(40rem, 60%);
    }
  }

  /* ---- Motion: hide gated behind a JS-added class so the section stays
     visible if the Vite chunk fails or has not been built. ---- */
  [data-cg-drop].cg-drop--motion [data-cg-drop-anim] {
    opacity: 0;
  }

  [data-cg-drop].cg-drop--motion [data-cg-drop-anim='item'] {
    transform: translateY(18px);
  }

  [data-cg-drop].cg-drop--motion [data-cg-drop-anim='frame'] {
    transform: translateY(26px) scale(0.97);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-cg-drop].cg-drop--motion [data-cg-drop-anim] {
      transform: none;
    }

    [data-cg-drop] .cg-drop__frame-shell,
    [data-cg-drop] .cg-drop__frame-img,
    [data-cg-drop] .cg-drop__cta,
    [data-cg-drop] .cg-drop__cta-icon,
    [data-cg-drop] .cg-drop__cta--ghost svg {
      transition: none;
    }
  }
/* END_SECTION:cg-product-drop */

/* START_SECTION:cg-product-feature-grip (INDEX:30) */
[data-cg-pfg].cg-pfg {
    --cg-pfg-radius: 0;
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: var(--cg-pfg-minh);
    color: var(--cg-pfg-text);
    container-type: inline-size;
  }

  [data-cg-pfg].cg-pfg--page-width {
    max-width: var(--page-width, 1280px);
    margin-inline: auto;
    border-radius: var(--cg-pfg-radius);
  }

  /* ---- Media + parallax image ---- */
  [data-cg-pfg] .cg-pfg__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
  }

  [data-cg-pfg] .cg-pfg__image {
    position: absolute;
    left: 0;
    top: -8%;
    width: 100%;
    height: 116%;
    object-fit: cover;
    object-position: var(--cg-pfg-focal, center);
  }

  [data-cg-pfg] .cg-pfg__placeholder {
    inset: 0;
    top: 0;
    height: 100%;
    background:
      radial-gradient(
        120% 120% at 18% 12%,
        color-mix(in oklab, var(--cg-pfg-accent) 55%, transparent) 0%,
        transparent 55%
      ),
      linear-gradient(135deg, #2b1d12 0%, #6e4724 55%, #8a3a12 100%);
  }

  /* ---- Directional scrim: anchors the bottom-left where the headline + rail
     sit, lets the photo read through the upper-right. Not a flat dark box. ---- */
  [data-cg-pfg] .cg-pfg__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(
        130% 100% at 12% 118%,
        color-mix(in oklab, var(--cg-pfg-ink) calc(var(--cg-pfg-overlay) * 100%), transparent) 0%,
        transparent 58%
      ),
      linear-gradient(
        to top,
        color-mix(in oklab, var(--cg-pfg-ink) calc(var(--cg-pfg-overlay) * 96%), transparent) 0%,
        color-mix(in oklab, var(--cg-pfg-ink) calc(var(--cg-pfg-overlay) * 24%), transparent) 46%,
        transparent 72%
      ),
      linear-gradient(
        to bottom,
        color-mix(in oklab, var(--cg-pfg-ink) calc(var(--cg-pfg-overlay) * 42%), transparent) 0%,
        transparent 30%
      );
  }

  /* ---- Content (row 1) ---- */
  [data-cg-pfg] .cg-pfg__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin-inline: auto;
    padding-inline: var(--cg-pfg-pl, 24px) var(--cg-pfg-pr, 24px);
    padding-block: var(--cg-pfg-pt) var(--cg-pfg-pb);
  }

  /* ---- Head ---- */
  [data-cg-pfg] .cg-pfg__head {
    display: flex;
    flex-direction: column;
    gap: clamp(0.85rem, 1.6vw, 1.3rem);
    max-width: 22ch;
  }

  [data-cg-pfg] .cg-pfg__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--cg-pfg-accent) 45%, #fff);
  }

  [data-cg-pfg] .cg-pfg__eyebrow-tick {
    width: 1.75rem;
    height: 2px;
    background: color-mix(in oklab, var(--cg-pfg-accent) 70%, #fff);
    transform-origin: left center;
  }

  [data-cg-pfg] .cg-pfg__heading {
    margin: 0;
    font-weight: 400;
    font-size: calc(clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem) * var(--cg-pfg-heading-scale, 1));
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-wrap: balance;
    max-width: 16ch;
  }

  [data-cg-pfg] .cg-pfg__heading em {
    font-style: italic;
    color: color-mix(in oklab, var(--cg-pfg-accent) 50%, #fff);
  }

  [data-cg-pfg] .cg-pfg__intro {
    font-size: clamp(1rem, 0.96rem + 0.3vw, 1.14rem);
    line-height: 1.6;
    text-wrap: pretty;
    max-width: 46ch;
    color: color-mix(in oklab, var(--cg-pfg-text) 90%, transparent);
  }

  [data-cg-pfg] .cg-pfg__intro > * {
    margin: 0 0 0.6em;
  }

  [data-cg-pfg] .cg-pfg__intro > *:last-child {
    margin-bottom: 0;
  }

  /* ---- Actions row: CTA + scroll cue ---- */
  [data-cg-pfg] .cg-pfg__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
  }

  [data-cg-pfg] .cg-pfg__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 1.6rem;
    border-radius: 999px;
    background: var(--cg-pfg-accent);
    color: var(--cg-pfg-text);
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 10px 24px -16px color-mix(in oklab, var(--cg-pfg-accent) 85%, #000);
    transition:
      background 180ms ease,
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 180ms ease;
  }

  [data-cg-pfg] .cg-pfg__cta-arrow {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-cg-pfg] .cg-pfg__cta:hover {
    background: color-mix(in oklab, var(--cg-pfg-accent) 86%, #000);
  }

  [data-cg-pfg] .cg-pfg__cta:hover .cg-pfg__cta-arrow {
    transform: translateX(3px);
  }

  [data-cg-pfg] .cg-pfg__cta:active {
    transform: scale(0.96);
    box-shadow: 0 4px 12px -10px color-mix(in oklab, var(--cg-pfg-accent) 85%, #000);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-cg-pfg] .cg-pfg__cta,
    [data-cg-pfg] .cg-pfg__cta-arrow {
      transition: background 180ms ease;
    }
  }

  [data-cg-pfg] .cg-pfg__cta:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--cg-pfg-accent) 40%, #fff);
    outline-offset: 3px;
  }

  /* ---- Scroll cue ---- */
  [data-cg-pfg] .cg-pfg__scrollcue {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--cg-pfg-text) 64%, transparent);
  }

  [data-cg-pfg] .cg-pfg__scrollcue-chev {
    animation: cg-pfg-bob 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }

  @keyframes cg-pfg-bob {
    0%,
    100% {
      transform: translateY(-2px);
      opacity: 0.55;
    }
    50% {
      transform: translateY(2px);
      opacity: 1;
    }
  }

  /* ---- Spec rail (the scoreboard, replaces the old rounded cards) ---- */
  [data-cg-pfg] .cg-pfg__rail {
    position: relative;
    z-index: 2;
    width: 100%;
    background: color-mix(in oklab, var(--cg-pfg-ink) 74%, transparent);
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    border-top: 1px solid color-mix(in oklab, #fff 12%, transparent);
  }

  /* Sienna scan-line riding the top edge of the rail. Default visible
     (scaleX 1); the JS gate (.cg-pfg--motion) collapses it so the reveal can
     wipe it in. If the chunk fails, it stays at full width. */
  [data-cg-pfg] .cg-pfg__rail-line {
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: 0;
    width: 100%;
    height: 2px;
    background: var(--cg-pfg-accent);
    transform-origin: left center;
  }

  [data-cg-pfg] .cg-pfg__rail-inner {
    list-style: none;
    margin: 0 auto;
    padding: clamp(1.1rem, 2vw, 1.6rem) var(--cg-pfg-pr, 24px) clamp(1.1rem, 2vw, 1.6rem) var(--cg-pfg-pl, 56px);
    max-width: var(--page-width, 1280px);
    display: grid;
    grid-template-columns: repeat(var(--cg-pfg-cols, 3), minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2.5rem);
  }

  [data-cg-pfg] .cg-pfg__spec {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-inline-start: clamp(1rem, 2.4vw, 2.5rem);
    border-inline-start: 1px solid color-mix(in oklab, #fff 14%, transparent);
  }

  [data-cg-pfg] .cg-pfg__spec:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  [data-cg-pfg] .cg-pfg__spec-label {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--cg-pfg-accent) 42%, #fff);
  }

  [data-cg-pfg] .cg-pfg__spec-value {
    font-weight: 400;
    font-size: clamp(1.05rem, 0.92rem + 0.55vw, 1.4rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--cg-pfg-text);
  }

  [data-cg-pfg] .cg-pfg__spec-value em {
    font-style: italic;
    color: color-mix(in oklab, var(--cg-pfg-accent) 50%, #fff);
  }

  /* ---- No head: center the content so there's no empty gap ---- */
  [data-cg-pfg].cg-pfg--no-head .cg-pfg__content {
    justify-content: center;
    align-items: flex-start;
  }

  /* ---- Motion gate: hide reveal items only once JS confirms it can run them ---- */
  [data-cg-pfg].cg-pfg--motion [data-cg-pfg-anim] {
    opacity: 0;
    transform: translateY(16px);
  }

  [data-cg-pfg].cg-pfg--motion .cg-pfg__rail-line {
    transform: scaleX(0);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-cg-pfg].cg-pfg--motion [data-cg-pfg-anim] {
      transform: none;
    }

    [data-cg-pfg].cg-pfg--motion .cg-pfg__rail-line {
      transform: none;
    }

    [data-cg-pfg] .cg-pfg__scrollcue-chev {
      animation: none;
    }
  }

  /* ---- Tablet / mobile ---- */
  @media screen and (max-width: 900px) {
    [data-cg-pfg] .cg-pfg__rail-inner {
      grid-template-columns: 1fr 1fr;
    }

    [data-cg-pfg] .cg-pfg__spec:nth-child(odd) {
      padding-inline-start: 0;
      border-inline-start: 0;
    }
  }

  @media screen and (max-width: 600px) {
    [data-cg-pfg].cg-pfg {
      min-height: min(var(--cg-pfg-minh), 88svh);
    }

    [data-cg-pfg] .cg-pfg__content {
      padding-block: calc(var(--cg-pfg-pt) * 0.8) calc(var(--cg-pfg-pb) * 0.9);
    }

    [data-cg-pfg] .cg-pfg__rail-inner {
      grid-template-columns: 1fr;
      gap: 0;
    }

    [data-cg-pfg] .cg-pfg__spec {
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      padding-inline-start: 0;
      padding-block: 0.85rem;
      border-inline-start: 0;
      border-block-start: 1px solid color-mix(in oklab, #fff 12%, transparent);
    }

    [data-cg-pfg] .cg-pfg__spec:first-child {
      border-block-start: 0;
      padding-block-start: 0;
    }

    [data-cg-pfg] .cg-pfg__spec-value {
      text-align: right;
    }
  }
/* END_SECTION:cg-product-feature-grip */

/* START_SECTION:cg-product-feature (INDEX:31) */
[data-cg-pf].cg-pf {
    /* Square corners on all viewports (page-width layout). */
    --cg-pf-radius: 0;
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    min-height: var(--cg-pf-minh);
    color: var(--cg-pf-text);
    container-type: inline-size;
  }

  [data-cg-pf].cg-pf--page-width {
    max-width: var(--page-width, 1280px);
    margin-inline: auto;
  }

  /* ---- Media + parallax image ---- */
  [data-cg-pf] .cg-pf__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
  }

  [data-cg-pf] .cg-pf__image {
    position: absolute;
    left: 0;
    top: -8%;
    width: 100%;
    height: 116%;
    object-fit: cover;
    object-position: var(--cg-pf-focal, center);
  }

  [data-cg-pf] .cg-pf__placeholder {
    inset: 0;
    top: 0;
    height: 100%;
    background:
      radial-gradient(
        120% 120% at 18% 12%,
        color-mix(in oklab, var(--cg-pf-accent) 55%, transparent) 0%,
        transparent 55%
      ),
      linear-gradient(135deg, #2b1d12 0%, #6e4724 55%, #945e30 100%);
  }

  [data-cg-pf].cg-pf--page-width .cg-pf__media,
  [data-cg-pf].cg-pf--page-width .cg-pf__overlay {
    border-radius: var(--cg-pf-radius);
  }

  /* ---- Scrim: darker top (heading) and bottom (highlights/CTA), lighter
     middle so the photo still reads through. ---- */
  [data-cg-pf] .cg-pf__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      color-mix(in oklab, var(--cg-pf-ink) calc(var(--cg-pf-overlay) * 92%), transparent) 0%,
      color-mix(in oklab, var(--cg-pf-ink) calc(var(--cg-pf-overlay) * 36%), transparent) 40%,
      color-mix(in oklab, var(--cg-pf-ink) calc(var(--cg-pf-overlay) * 58%), transparent) 70%,
      color-mix(in oklab, var(--cg-pf-ink) calc(var(--cg-pf-overlay) * 100%), transparent) 100%
    );
  }

  /* ---- Inner layout ---- */
  [data-cg-pf] .cg-pf__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin-inline: auto;
    padding-inline: var(--cg-pf-pl, 24px) var(--cg-pf-pr, 24px);
    padding-block: var(--cg-pf-pt) var(--cg-pf-pb);
    min-height: var(--cg-pf-minh);
    justify-content: flex-end;
  }

  [data-cg-pf].cg-pf--vpos-top .cg-pf__inner {
    justify-content: flex-start;
  }

  [data-cg-pf].cg-pf--vpos-center .cg-pf__inner {
    justify-content: center;
  }

  /* ---- Head ---- */
  [data-cg-pf] .cg-pf__head {
    display: flex;
    flex-direction: column;
    gap: clamp(0.7rem, 1.4vw, 1.1rem);
    max-width: 42rem;
  }

  [data-cg-pf].cg-pf--align-center .cg-pf__head {
    margin-inline: auto;
    text-align: center;
    align-items: center;
  }

  [data-cg-pf] .cg-pf__eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--cg-pf-accent) 82%, #fff);
  }

  [data-cg-pf] .cg-pf__heading {
    margin: 0;
    font-weight: 400;
    font-size: calc(clamp(2rem, 1.4rem + 2.6vw, 3.2rem) * var(--cg-pf-heading-scale, 1));
    line-height: 1.03;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  [data-cg-pf] .cg-pf__heading em {
    font-style: italic;
    color: color-mix(in oklab, var(--cg-pf-accent) 88%, #fff);
  }

  [data-cg-pf] .cg-pf__intro {
    font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
    line-height: 1.6;
    text-wrap: pretty;
    color: color-mix(in oklab, var(--cg-pf-text) 88%, transparent);
  }

  [data-cg-pf] .cg-pf__intro > * {
    margin: 0 0 0.6em;
  }

  [data-cg-pf] .cg-pf__intro > *:last-child {
    margin-bottom: 0;
  }

  /* ---- Highlights grid ---- */
  [data-cg-pf] .cg-pf__highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }

  [data-cg-pf] .cg-pf__highlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Card treatment: frosted translucent surface so highlights stay legible
     over any merchant photo. Toggled off via cg-pf--plain. */
  [data-cg-pf].cg-pf--cards .cg-pf__highlight {
    padding: clamp(1rem, 1.6vw, 1.45rem);
    border-radius: 16px;
    background: color-mix(in oklab, var(--cg-pf-ink) 32%, transparent);
    border: 1px solid color-mix(in oklab, #fff 14%, transparent);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  [data-cg-pf].cg-pf--plain .cg-pf__highlight {
    padding-top: 0.85rem;
    border-top: 2px solid color-mix(in oklab, var(--cg-pf-accent) 70%, transparent);
  }

  [data-cg-pf] .cg-pf__hl-icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--cg-pf-accent) 26%, transparent);
    border: 1px solid color-mix(in oklab, var(--cg-pf-accent) 50%, transparent);
    margin-bottom: 0.15rem;
  }

  [data-cg-pf] .cg-pf__hl-icon-img {
    width: 56%;
    height: 56%;
    object-fit: contain;
  }

  [data-cg-pf] .cg-pf__hl-title {
    margin: 0;
    font-weight: 400;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--cg-pf-text);
  }

  [data-cg-pf] .cg-pf__hl-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: color-mix(in oklab, var(--cg-pf-text) 82%, transparent);
  }

  [data-cg-pf] .cg-pf__hl-text em {
    font-style: italic;
    color: color-mix(in oklab, var(--cg-pf-accent) 85%, #fff);
  }

  /* ---- CTA (grounded, agency-style interaction) ---- */
  [data-cg-pf] .cg-pf__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.95rem 1.55rem;
    border-radius: 999px;
    background: var(--cg-pf-accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 10px 24px -14px color-mix(in oklab, var(--cg-pf-accent) 80%, #000);
    transition:
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
      filter 180ms ease,
      box-shadow 180ms ease;
  }

  [data-cg-pf].cg-pf--align-center .cg-pf__cta {
    align-self: center;
  }

  [data-cg-pf] .cg-pf__cta-arrow {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-cg-pf] .cg-pf__cta:hover {
    filter: brightness(1.05);
  }

  /* The pill sits on a merchant photo, where the UA default outline can wash
     out. Give keyboard focus a real high-contrast ring (WCAG 2.4.7). */
  [data-cg-pf] .cg-pf__cta:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--cg-pf-accent) 55%, #fff);
    outline-offset: 3px;
  }

  @media (forced-colors: active) {
    [data-cg-pf] .cg-pf__cta:focus-visible {
      outline-color: CanvasText;
    }
  }

  [data-cg-pf] .cg-pf__cta:hover .cg-pf__cta-arrow {
    transform: translateX(3px);
  }

  [data-cg-pf] .cg-pf__cta:active {
    transform: scale(0.96);
    box-shadow: 0 4px 12px -10px color-mix(in oklab, var(--cg-pf-accent) 80%, #000);
  }

  @media screen and (min-width: 600px) {
    [data-cg-pf] .cg-pf__highlights {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 750px) {
    [data-cg-pf] .cg-pf__highlights {
      grid-template-columns: repeat(var(--cg-pf-cols, 3), minmax(0, 1fr));
    }
  }

  /* ---- No head: when eyebrow + heading + intro are all blank (metafields
     empty), center the highlights and CTA so there is no empty gap where the
     heading would have sat. ---- */
  [data-cg-pf].cg-pf--no-head .cg-pf__inner {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  [data-cg-pf].cg-pf--no-head .cg-pf__highlights {
    width: 100%;
    max-width: 60rem;
    justify-items: center;
  }

  [data-cg-pf].cg-pf--no-head .cg-pf__highlight {
    align-items: center;
    text-align: center;
  }

  [data-cg-pf].cg-pf--no-head .cg-pf__cta {
    align-self: center;
  }

  /* ---- Motion: hide gated behind a JS-added class so the section stays
     visible if the Vite chunk fails or has not been built. ---- */
  [data-cg-pf].cg-pf--motion [data-cg-pf-anim] {
    opacity: 0;
    transform: translateY(16px);
  }

  @media (prefers-reduced-motion: reduce) {
    /* JS now staggers an opacity-only fade in reduced mode too, so the hide
       rule's opacity: 0 is allowed to apply (WAAPI fades it back to 1). The
       y-translate is dropped because it is vestibular. The hide is still
       gated on .cg-pf--motion, so if the chunk fails the items stay visible. */
    [data-cg-pf].cg-pf--motion [data-cg-pf-anim] {
      transform: none;
    }
  }

  /* ---- Mobile ---- */
  @media screen and (max-width: 749px) {
    [data-cg-pf].cg-pf {
      min-height: min(var(--cg-pf-minh), 86svh);
    }

    [data-cg-pf] .cg-pf__inner {
      min-height: min(var(--cg-pf-minh), 86svh);
      padding-block: calc(var(--cg-pf-pt) * 0.8) calc(var(--cg-pf-pb) * 0.8);
      padding-inline: var(--cg-pf-pl, 24px) var(--cg-pf-pr, 24px);
    }
  }
/* END_SECTION:cg-product-feature */

/* START_SECTION:cg-product-feel (INDEX:32) */
.cg-feel {
    /* custom element defaults to display:inline; force block for layout */
    display: block;
    position: relative;
    overflow: clip;
    padding-block: clamp(3rem, 7vw, 6rem);
  }

  .cg-feel__inner {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
  }

  .cg-feel__eyebrow {
    margin: 0 0 1.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .cg-feel__headline {
    margin: 0;
    font-size: clamp(2.2rem, 5.4vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.015em;
    text-wrap: balance;
    max-width: 22ch;
  }

  .cg-feel__headline em {
    font-style: italic;
    font-weight: 400;
    opacity: 0.55;
  }

  .cg-feel__sub {
    margin: 1.5rem 0 0;
    font-size: clamp(1.05rem, 1.4vw, 1.18rem);
    line-height: 1.55;
    max-width: 42ch;
    opacity: 0.82;
  }

  .cg-feel__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
  }

  .cg-feel__claims {
    display: grid;
    gap: clamp(1.25rem, 2vw, 1.75rem);
    counter-reset: cg-feel;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cg-feel__claim {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    align-items: baseline;
    padding-block: 1.1rem;
    border-top: 1px solid rgba(var(--color-foreground), 0.14);
  }

  .cg-feel__claim:last-child {
    border-bottom: 1px solid rgba(var(--color-foreground), 0.14);
  }

  .cg-feel__claim::before {
    counter-increment: cg-feel;
    content: counter(cg-feel, decimal-leading-zero);
    font-feature-settings: 'tnum';
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    opacity: 0.55;
    align-self: start;
    margin-top: 0.35rem;
  }

  .cg-feel__claim-body {
    min-width: 0;
  }

  .cg-feel__claim-title {
    margin: 0;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
  }

  .cg-feel__claim-text {
    margin: 0.4rem 0 0;
    font-size: 0.98rem;
    line-height: 1.55;
    opacity: 0.78;
    max-width: 48ch;
  }

  .cg-feel__stack {
    position: relative;
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  .cg-feel__frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: rgba(var(--color-foreground), 0.05);
    box-shadow: 0 22px 60px -28px rgba(0, 0, 0, 0.35);
  }

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

  .cg-feel__frame--back {
    inset: -3% -8% auto auto;
    width: 62%;
    aspect-ratio: 1 / 1;
    transform: rotate(4deg);
    z-index: 1;
  }

  .cg-feel__frame--front {
    inset: auto auto -4% -6%;
    width: 56%;
    aspect-ratio: 3 / 4;
    transform: rotate(-3deg);
    z-index: 3;
  }

  .cg-feel__frame--main {
    inset: 6% 6% 6% 6%;
    z-index: 2;
  }

  .cg-feel__frame--placeholder {
    border: 1px dashed rgba(var(--color-foreground), 0.18);
  }

  .cg-feel__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: clamp(3rem, 6vw, 5rem);
    border-top: 1px solid rgba(var(--color-foreground), 0.14);
    border-bottom: 1px solid rgba(var(--color-foreground), 0.14);
  }

  .cg-feel__metric {
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.5rem);
    border-right: 1px solid rgba(var(--color-foreground), 0.14);
  }

  .cg-feel__metric:last-child {
    border-right: none;
  }

  .cg-feel__metric-value {
    display: block;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum';
  }

  .cg-feel__metric-label {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.65;
  }

  .cg-feel__cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    margin-top: clamp(2rem, 4vw, 3rem);
  }

  .cg-feel__cta-stack {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .cg-feel__caption {
    font-size: 0.85rem;
    opacity: 0.7;
    margin: 0;
  }

  .cg-feel__proof {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.85;
  }

  .cg-feel__stars {
    display: inline-flex;
    gap: 0.1rem;
    color: #f5b13a;
  }

  .cg-feel__stars svg {
    width: 1rem;
    height: 1rem;
  }

  @media screen and (min-width: 750px) {
    .cg-feel__split {
      grid-template-columns: 1fr 1fr;
    }

    .is-stack-left .cg-feel__col-stack {
      order: 1;
    }
    .is-stack-left .cg-feel__col-claims {
      order: 2;
    }
    .is-stack-right .cg-feel__col-claims {
      order: 1;
    }
    .is-stack-right .cg-feel__col-stack {
      order: 2;
    }
  }
/* END_SECTION:cg-product-feel */

/* START_SECTION:cg-product-gallery (INDEX:33) */
.cg-pg {
    /* custom element defaults to display:inline; force block for layout */
    display: block;
    overflow: clip;
  }

  /* Paint-time hide for the JS tile reveal, gated on scripting so JS-off users
     see the tiles immediately (no inline opacity:0, no <noscript> override).
     The entrypoint animates opacity:[0,1]; reduced-motion / motion-load failure
     set inline opacity:1 (beats this non-!important rule). */
  @media (scripting: enabled) {
    .cg-pg [data-cg-pg-tile] {
      opacity: 0;
    }
  }

  .cg-pg__wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.5rem) 1rem;
    display: grid;
    gap: 1.25rem;
  }

  .cg-pg__header {
    display: grid;
    gap: 0.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
  }

  .cg-pg__eyebrow {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.75;
  }

  .cg-pg__heading {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.1;
    text-wrap: balance;
  }

  .cg-pg__lede {
    margin: 0 auto;
    max-width: 56ch;
    font-size: 0.95rem;
    opacity: 0.8;
  }

  .cg-pg__featured {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 1.25rem;
    background: rgba(var(--color-foreground), 0.05);
    aspect-ratio: 4 / 3;
    box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.35);
  }

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

  .cg-pg__featured-cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  }

  .cg-pg__strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--cg-pg-cols, 4), minmax(0, 1fr));
    gap: 0.6rem;
  }

  .cg-pg__tile {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(var(--color-foreground), 0.04);
    border-radius: 0.85rem;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
    transition:
      box-shadow 0.25s ease,
      outline-color 0.2s ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  .cg-pg__tile:focus-visible {
    outline-color: currentColor;
  }

  .cg-pg__tile.is-active {
    outline-color: currentColor;
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.45);
  }

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

  .cg-pg__empty {
    text-align: center;
    padding: 2rem;
    border-radius: 1rem;
    background: rgba(var(--color-foreground), 0.05);
    opacity: 0.75;
    font-size: 0.9rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .cg-pg__tile {
      transition: none;
    }
  }
/* END_SECTION:cg-product-gallery */

/* START_SECTION:cg-product-launch (INDEX:34) */
[data-cg-product-launch].cg-pl {
    /* custom element defaults to display:inline; force block for layout */
    display: block;
    min-height: var(--cg-pl-minh, 720px);
    isolation: isolate;
    position: relative;
  }

  [data-cg-product-launch].cg-pl .cg-pl__grain {
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
    mix-blend-mode: multiply;
  }

  [data-cg-product-launch].cg-pl .font-display {
    font-weight: 400;
    font-feature-settings: 'liga', 'kern';
  }

  [data-cg-product-launch].cg-pl .cg-pl__row {
    align-items: center;
  }

  [data-cg-product-launch].cg-pl.cg-pl--image-left .cg-pl__copy {
    order: 2;
  }
  [data-cg-product-launch].cg-pl.cg-pl--image-left .cg-pl__media {
    order: 1;
  }

  [data-cg-product-launch].cg-pl .cg-pl__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--cg-pl-accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--cg-pl-accent) 22%, transparent);
    display: inline-block;
  }

  [data-cg-product-launch].cg-pl .cg-pl__heading {
    overflow-wrap: break-word;
    max-width: 14ch;
  }

  [data-cg-product-launch].cg-pl .cg-pl__word,
  [data-cg-product-launch].cg-pl .cg-pl__accent {
    display: inline-block;
  }

  [data-cg-product-launch].cg-pl .cg-pl__accent-wrap {
    display: inline-block;
    position: relative;
  }

  [data-cg-product-launch].cg-pl .cg-pl__accent {
    position: relative;
    transform: rotate(-1.5deg);
    padding-inline: 0.06em;
    font-style: italic;
  }

  [data-cg-product-launch].cg-pl .cg-pl__accent::after {
    content: '';
    position: absolute;
    left: -0.04em;
    right: -0.04em;
    bottom: 0.06em;
    height: 0.18em;
    background: color-mix(in oklch, var(--cg-pl-accent) 36%, transparent);
    border-radius: 999px;
    z-index: -1;
  }

  [data-cg-product-launch].cg-pl .cg-pl__cta--primary {
    box-shadow:
      0 1px 0 color-mix(in oklch, var(--cg-pl-accent) 70%, #000 30%) inset,
      0 0 0 0 transparent;
    transition:
      box-shadow 0.6s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-product-launch].cg-pl .cg-pl__cta--primary:hover {
    box-shadow:
      0 1px 0 color-mix(in oklch, var(--cg-pl-accent) 70%, #000 30%) inset,
      0 18px 38px -16px color-mix(in oklch, var(--cg-pl-accent) 55%, transparent);
  }

  [data-cg-product-launch].cg-pl .cg-pl__proof-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--cg-pl-accent);
    display: inline-block;
    opacity: 0.7;
  }

  [data-cg-product-launch].cg-pl .cg-pl__frame-shell {
    background: color-mix(in oklch, var(--cg-pl-ink) 6%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-pl-ink) 8%, transparent);
    padding: 8px;
    border-radius: 2rem;
    box-shadow:
      0 1px 0 color-mix(in oklch, #ffffff 60%, transparent) inset,
      0 30px 60px -30px color-mix(in oklch, var(--cg-pl-ink) 30%, transparent);
    transform: rotate(-1.2deg);
    transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-product-launch].cg-pl .cg-pl__frame:hover .cg-pl__frame-shell {
    transform: rotate(-0.4deg) translateY(-4px);
  }

  [data-cg-product-launch].cg-pl .cg-pl__frame-core {
    position: relative;
    overflow: hidden;
    background: var(--cg-pl-card);
    border-radius: calc(2rem - 0.5rem);
    aspect-ratio: 1 / 1;
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 90%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-pl-ink) 5%, transparent) inset;
  }

  [data-cg-product-launch].cg-pl .cg-pl__frame-core::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse at 50% 35%,
      color-mix(in oklch, var(--cg-pl-accent) 14%, transparent) 0%,
      transparent 65%
    );
    pointer-events: none;
  }

  [data-cg-product-launch].cg-pl .cg-pl__frame-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-product-launch].cg-pl .cg-pl__frame:hover .cg-pl__frame-img {
    transform: scale(1.04);
  }

  [data-cg-product-launch].cg-pl .cg-pl__badge {
    position: absolute;
    top: -14px;
    left: 18px;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    transform: rotate(-3deg);
    box-shadow: 0 6px 18px -6px color-mix(in oklch, var(--cg-pl-accent) 40%, transparent);
  }

  [data-cg-product-launch].cg-pl .cg-pl__price-tag {
    position: absolute;
    bottom: -18px;
    right: 18px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 12px 18px;
    background: var(--cg-pl-card);
    border-radius: 999px;
    border: 1px solid color-mix(in oklch, var(--cg-pl-ink) 8%, transparent);
    box-shadow:
      0 1px 0 #ffffffb0 inset,
      0 16px 36px -18px color-mix(in oklch, var(--cg-pl-ink) 25%, transparent);
    transform: rotate(2deg);
  }

  [data-cg-product-launch].cg-pl .cg-pl__price-label {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-pl-ink) 60%, transparent);
  }

  [data-cg-product-launch].cg-pl .cg-pl__price-value {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
  }

  [data-cg-product-launch].cg-pl .cg-pl__features {
    grid-auto-flow: dense;
  }

  [data-cg-product-launch].cg-pl .cg-pl__feature-shell {
    height: 100%;
    background: color-mix(in oklch, var(--cg-pl-ink) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-pl-ink) 7%, transparent);
    padding: 6px;
    border-radius: 1.5rem;
    transition:
      transform 0.6s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.6s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-product-launch].cg-pl .cg-pl__feature:hover .cg-pl__feature-shell {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -22px color-mix(in oklch, var(--cg-pl-ink) 28%, transparent);
  }

  [data-cg-product-launch].cg-pl .cg-pl__feature-core {
    height: 100%;
    background: var(--cg-pl-card);
    border-radius: calc(1.5rem - 0.375rem);
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 80%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-pl-ink) 4%, transparent) inset;
  }

  [data-cg-product-launch].cg-pl .cg-pl__feature-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklch, var(--cg-pl-accent) 14%, transparent);
    color: var(--cg-pl-accent);
    border-radius: 999px;
  }

  [data-cg-product-launch].cg-pl .cg-pl__feature-icon svg {
    width: 20px;
    height: 20px;
  }

  [data-cg-product-launch].cg-pl .cg-pl__feature-title {
    font-family: var(--font-heading--family);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--cg-pl-ink);
    margin: 0;
  }

  [data-cg-product-launch].cg-pl .cg-pl__feature-text {
    font-size: 14px;
    line-height: 1.55;
    color: color-mix(in oklch, var(--cg-pl-ink) 72%, transparent);
    margin: 0;
  }

  @media (max-width: 1023px) {
    [data-cg-product-launch].cg-pl .cg-pl__heading {
      max-width: 18ch;
    }
    [data-cg-product-launch].cg-pl .cg-pl__media {
      margin-top: 8px;
    }
  }

  @media (max-width: 767px) {
    [data-cg-product-launch].cg-pl .cg-pl__inner {
      padding-top: 5rem;
      padding-bottom: 5rem;
    }
    [data-cg-product-launch].cg-pl .cg-pl__frame-shell {
      transform: rotate(-0.6deg);
    }
    [data-cg-product-launch].cg-pl .cg-pl__price-tag {
      bottom: -14px;
      right: 12px;
      padding: 9px 14px;
    }
    [data-cg-product-launch].cg-pl .cg-pl__price-value {
      font-size: 15px;
    }
    [data-cg-product-launch].cg-pl .cg-pl__heading {
      max-width: none;
    }
  }

  @keyframes cg-pl-fallback-in {
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Paint-time hide for the JS cascade, gated on scripting so JS-off users are
     never held hidden by this rule (no inline opacity:0). With JS off the
     cg-pl-fallback-in animation below (backwards fill) reveals the items; with
     JS on, data-cg-pl-js cancels that animation and this rule holds the items
     hidden until the entrypoint's animate() reveals them (motion-load failure
     runs #snapVisible() which sets inline opacity:1, beating this rule). */
  @media (scripting: enabled) {
    [data-cg-product-launch].cg-pl [data-cg-pl-anim] {
      opacity: 0;
    }
  }

  [data-cg-product-launch].cg-pl [data-cg-pl-anim] {
    animation: cg-pl-fallback-in 0.8s 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  [data-cg-product-launch].cg-pl[data-cg-pl-js] [data-cg-pl-anim] {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-cg-product-launch].cg-pl [data-cg-pl-anim] {
      transform: none !important;
      animation: none !important;
    }
    /* Opacity force-visible ONLY when JS has not claimed the reduced fade
       (the lib stamps data-cg-reveal-js, then fades opacity itself). */
    [data-cg-product-launch].cg-pl:not([data-cg-reveal-js]) [data-cg-pl-anim] {
      opacity: 1 !important;
    }
    [data-cg-product-launch].cg-pl .cg-pl__frame-shell,
    [data-cg-product-launch].cg-pl .cg-pl__frame-img {
      transition: none;
    }
  }
/* END_SECTION:cg-product-launch */

/* START_SECTION:cg-product-recipe (INDEX:35) */
.cg-recipe {
    /* custom element defaults to display:inline; force block for layout */
    display: block;
    --cg-recipe-rule: rgba(var(--color-foreground), 0.18);
    --cg-recipe-mute: rgba(var(--color-foreground), 0.62);
    --cg-recipe-accent: rgba(var(--color-foreground), 0.92);
    position: relative;
    overflow: clip;
    padding-block: clamp(3rem, 7vw, 6rem);
  }

  .cg-recipe__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background-image:
      radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px),
      radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size:
      3px 3px,
      7px 7px;
    background-position:
      0 0,
      1px 1px;
  }

  .cg-recipe__inner {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
  }

  .cg-recipe__ledger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cg-recipe-rule);
    font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cg-recipe-mute);
  }

  .cg-recipe__ledger-label::before {
    content: '\00a7  ';
    opacity: 0.6;
  }

  .cg-recipe__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
  }

  .cg-recipe__title {
    margin: 0;
    font-size: clamp(2.4rem, 6.2vw, 5.6rem);
    line-height: 0.96;
    letter-spacing: -0.02em;
    text-wrap: balance;
    max-width: 14ch;
  }

  .cg-recipe__title em {
    font-style: italic;
    font-weight: 300;
    font-feature-settings: 'ss01';
  }

  .cg-recipe__title-rule {
    display: block;
    width: clamp(3rem, 8vw, 6rem);
    height: 1px;
    background: var(--cg-recipe-accent);
    margin-block: 1.5rem 1.25rem;
    transform-origin: left center;
  }

  .cg-recipe__lede {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.6;
    max-width: 38ch;
    color: var(--cg-recipe-accent);
    opacity: 0.9;
  }

  .cg-recipe__macro {
    position: relative;
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }

  .cg-recipe__macro-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: rgba(var(--color-foreground), 0.05);
    box-shadow: 0 30px 70px -32px rgba(0, 0, 0, 0.4);
  }

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

  .cg-recipe__macro-frame--placeholder {
    border: 1px dashed var(--cg-recipe-rule);
  }

  .cg-recipe__annot {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.85rem 0.45rem 0.55rem;
    background: rgba(var(--color-background), 0.95);
    border: 1px solid var(--cg-recipe-rule);
    border-radius: 999px;
    font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cg-recipe-accent);
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.3);
    top: 8%;
    right: -6%;
  }

  .cg-recipe__annot-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.85;
  }

  .cg-recipe__specs {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--cg-recipe-rule);
    border-bottom: 1px solid var(--cg-recipe-rule);
  }

  .cg-recipe__spec {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
    align-items: baseline;
    gap: 0.75rem;
    padding-block: 0.95rem;
    border-bottom: 1px dashed var(--cg-recipe-rule);
    font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
  }

  .cg-recipe__spec:last-child {
    border-bottom: none;
  }

  .cg-recipe__spec-label {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cg-recipe-mute);
  }

  .cg-recipe__spec-leader {
    border-bottom: 1px dotted var(--cg-recipe-rule);
    transform: translateY(-0.25rem);
    min-width: 1rem;
  }

  .cg-recipe__spec-value {
    font-weight: 600;
    color: var(--cg-recipe-accent);
    font-feature-settings: 'tnum';
  }

  .cg-recipe__process {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
  }

  .cg-recipe__step {
    position: relative;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border: 1px solid var(--cg-recipe-rule);
    background: rgba(var(--color-background), 0.5);
    backdrop-filter: blur(2px);
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.4s ease;
  }

  .cg-recipe__step:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.3);
  }

  .cg-recipe__step-num {
    display: inline-block;
    font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--cg-recipe-mute);
    margin-bottom: 0.85rem;
  }

  .cg-recipe__step-title {
    margin: 0;
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 500;
  }

  .cg-recipe__step-title em {
    font-style: italic;
    font-weight: 300;
  }

  .cg-recipe__step-text {
    margin: 0.6rem 0 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--cg-recipe-mute);
    max-width: 32ch;
  }

  .cg-recipe__cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--cg-recipe-rule);
  }

  .cg-recipe__cta-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .cg-recipe__cta-headline {
    margin: 0;
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  .cg-recipe__cta-headline em {
    font-style: italic;
    font-weight: 300;
  }

  .cg-recipe__cta-caption {
    font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cg-recipe-mute);
  }

  .cg-recipe__cta-actions {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
  }

  .cg-recipe__stamp {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6.5rem;
    height: 6.5rem;
    border: 2px solid var(--cg-recipe-accent);
    border-radius: 999px;
    transform: rotate(-8deg);
    color: var(--cg-recipe-accent);
    font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    opacity: 0.92;
    flex-shrink: 0;
  }

  .cg-recipe__stamp::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--cg-recipe-accent);
    border-radius: 999px;
    opacity: 0.6;
  }

  .cg-recipe__stamp span {
    max-width: 5rem;
    padding: 0.5rem;
  }

  @media screen and (min-width: 750px) {
    .cg-recipe__hero {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }

    .cg-recipe__process {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
/* END_SECTION:cg-product-recipe */

/* START_SECTION:cg-product-reveal (INDEX:36) */
/* Section height is the WHOLE band: min-height on the root (border-box, so the
     padding is included in the total) makes the merchant "Section height" = the
     full section, not just the inner band. Flex column so the stage fills the
     space left by padding; a taller-than-set card still grows the section
     (flex-basis auto) rather than clipping. */
  [data-cg-pr].cg-pr {
    display: flex;
    flex-direction: column;
    min-height: var(--cg-pr-h, 600px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--cg-pr-bg);
    color: var(--cg-pr-ink);
    padding-block: calc(var(--cg-pr-pt, 96px) * 0.7) calc(var(--cg-pr-pb, 96px) * 0.7);
    padding-inline: calc(var(--cg-pr-pl, 24px) * 0.6) calc(var(--cg-pr-pr, 24px) * 0.6);
  }

  @media (min-width: 750px) {
    [data-cg-pr].cg-pr {
      padding-block: var(--cg-pr-pt, 96px) var(--cg-pr-pb, 96px);
      padding-inline: var(--cg-pr-pl, 24px) var(--cg-pr-pr, 24px);
    }
  }

  [data-cg-pr].cg-pr .cg-pr__grain {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: multiply;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
  }

  [data-cg-pr].cg-pr .cg-pr__stage {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    border-radius: 0px;
    overflow: hidden;
    background: color-mix(in oklch, var(--cg-pr-ink) 6%, var(--cg-pr-bg));
  }

  [data-cg-pr].cg-pr .cg-pr__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: color-mix(in oklch, var(--cg-pr-ink) 12%, var(--cg-pr-bg));
  }

  [data-cg-pr].cg-pr .cg-pr__backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        90deg,
        color-mix(in oklch, var(--cg-pr-ink) 62%, transparent) 0%,
        color-mix(in oklch, var(--cg-pr-ink) 18%, transparent) 42%,
        color-mix(in oklch, var(--cg-pr-ink) 52%, transparent) 100%
      ),
      radial-gradient(ellipse at 50% 48%, transparent 0%, color-mix(in oklch, var(--cg-pr-ink) 42%, transparent) 82%);
    opacity: 0.64;
  }

  [data-cg-pr].cg-pr .cg-pr__backdrop-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: blur(18px) saturate(0.92) contrast(1.06);
    scale: 1.08;
    opacity: 0.88;
  }

  /* ----- The single image, split into two halves -----
     Each curtain is 50% of the stage and clips an image sized to the FULL stage
     width (200% of the curtain), anchored to its outer edge, so left + right tile
     the one image seamlessly when closed. They part by translating outward, the
     distance driven by --cg-pr-open (0 = closed/seamless, 1 = parted). */
  [data-cg-pr].cg-pr .cg-pr__curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    backface-visibility: hidden;
  }

  [data-cg-pr].cg-pr .cg-pr__curtain--left {
    left: 0;

    transform: translateX(calc(-1 * var(--cg-pr-part, 100%) * var(--cg-pr-open, 1)));
  }

  [data-cg-pr].cg-pr .cg-pr__curtain--right {
    right: 0;
    transform: translateX(calc(var(--cg-pr-part, 100%) * var(--cg-pr-open, 1)));
  }

  [data-cg-pr].cg-pr .cg-pr__curtain-img {
    position: absolute;
    top: 0;
    width: 200%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  [data-cg-pr].cg-pr .cg-pr__curtain--left .cg-pr__curtain-img {
    left: 0;
  }

  [data-cg-pr].cg-pr .cg-pr__curtain--right .cg-pr__curtain-img {
    right: 0;
  }

  [data-cg-pr].cg-pr .cg-pr__curtain-img--placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--cg-pr-accent) 0%, var(--cg-pr-ink) 100%);
  }

  [data-cg-pr].cg-pr .cg-pr__placeholder-svg {
    width: 40%;
    max-width: 220px;
    opacity: 0.35;
  }

  /* Radial vignette: deepens the image edges and frames the floating card,
     intensity from the merchant overlay setting. Center stays clear. */
  [data-cg-pr].cg-pr .cg-pr__veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(
        ellipse at 50% 48%,
        transparent 0%,
        color-mix(in oklch, var(--cg-pr-ink) calc(var(--cg-pr-overlay, 0.3) * 48%), transparent) 74%
      ),
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--cg-pr-ink) 28%, transparent) 0%,
        transparent 28%,
        transparent 68%,
        color-mix(in oklch, var(--cg-pr-ink) 34%, transparent) 100%
      );
  }

  /* The split highlight: a thin accent line on the seam, pulsed by JS during the
     part and invisible at rest (decorative). */
  [data-cg-pr].cg-pr .cg-pr__seam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in oklch, var(--cg-pr-accent) 90%, #fff) 75%,
      transparent 100%
    );
    mix-blend-mode: screen;
  }

  /* In flow (not absolute) so the band grows with a tall card on mobile instead
     of clipping it under the stage's overflow. flex: 1 1 auto fills the height the
     section root leaves after padding, and (basis auto) still grows when the card
     is taller; the curtains / veil / seam are absolute inset:0 and fill it. */
  [data-cg-pr].cg-pr .cg-pr__stage-inner {
    position: relative;
    z-index: 4;
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    pointer-events: none;
  }

  [data-cg-pr].cg-pr .cg-pr__card {
    pointer-events: auto;
    position: relative;
    width: min(var(--cg-pr-card-w, 460px), 100%);
    container-type: inline-size;
    padding: clamp(1rem, 1.8vw, 1.25rem);
    border-radius: 1rem;
    background: color-mix(in oklch, var(--cg-pr-card) 90%, #ffffff);
    box-shadow:
      0 0 0 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-pr-ink) 8%, transparent),
      0 24px 54px -34px color-mix(in oklch, var(--cg-pr-ink) 58%, transparent),
      0 54px 100px -72px color-mix(in oklch, var(--cg-pr-ink) 72%, transparent);
  }

  [data-cg-pr].cg-pr .cg-pr__core {
    position: relative;
    z-index: 2;
    border-radius: calc(1rem - 0.45rem);
    padding: clamp(1.1rem, 2.4vw, 2rem);
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
  }

  [data-cg-pr].cg-pr .cg-pr__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      ellipse at 50% 28%,
      color-mix(in oklch, #ffffff 68%, transparent) 0%,
      color-mix(in oklch, var(--cg-pr-accent) 7%, transparent) 42%,
      transparent 72%
    );
  }

  [data-cg-pr].cg-pr .cg-pr__core > *:not(.cg-pr__glow) {
    position: relative;
    z-index: 1;
  }

  [data-cg-pr].cg-pr .cg-pr__eyebrow {
    margin: 0;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--cg-pr-accent);
  }

  /* Fills the card's content column, so the photo reads at the same width as the
     title / subheading stacked beneath it (the core is a centered flex column, so
     100% = the padded content box the text occupies). */
  [data-cg-pr].cg-pr .cg-pr__media {
    width: min(100%, 300px);
    margin: 0 auto 0.55rem;
  }

  /* Optional PDP link wrapping the card photo; the pointer cursor is the only
     hover affordance (no scale). */
  [data-cg-pr].cg-pr .cg-pr__media-link {
    display: block;
    border-radius: 0.2rem;
  }

  [data-cg-pr].cg-pr .cg-pr__media-link:focus-visible {
    outline: 2px solid var(--cg-pr-accent);
    outline-offset: 3px;
  }

  [data-cg-pr].cg-pr .cg-pr__media-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 0;
    filter: drop-shadow(0 18px 18px color-mix(in oklch, var(--cg-pr-ink) 16%, transparent));
    outline: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: -1px;
  }

  /* One line always: card is a container (container-type: inline-size), so size
     in cqi (% of card width). Scales with the card at every viewport and keeps
     the title on a single line; a longer title gets smaller, never wraps. */
  [data-cg-pr].cg-pr .cg-pr__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(1rem, 6cqi, 2.6rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--cg-pr-ink);
  }

  [data-cg-pr].cg-pr .cg-pr__title em {
    font-style: italic;
    color: var(--cg-pr-accent);
  }

  [data-cg-pr].cg-pr .cg-pr__sub {
    margin: 0;
    max-width: 42ch;
    font-family: var(--font-body--family);
    font-size: 1rem;
    line-height: 1.5;
    color: color-mix(in oklch, var(--cg-pr-ink) 72%, transparent);
  }

  [data-cg-pr].cg-pr .cg-pr__price {
    margin: 0.1rem 0 0;
    font-family: var(--font-heading--family);
    font-size: 1.2rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--cg-pr-ink);
  }

  [data-cg-pr].cg-pr .cg-pr__price-prefix {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.62em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-pr-ink) 55%, transparent);
  }

  /* Launch CTA mirrors the product-hero (_ph-cta) / cg-hero-bg primary recipe:
     12px rounded rect (not a pill), dual shadow (inset white top highlight +
     colored ambient), transparent rest border so the hover frame adds no layout
     shift, hover brings a fg-tinted hairline frame + deeper ambient + brightness.
     Press is the JS squish (data-cg-hover), so no CSS :active scale here. */
  [data-cg-pr].cg-pr .cg-pr__cta {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.8rem 1.6rem;
    border-radius: 3px;
    background: var(--cg-pr-accent);
    color: var(--cg-pr-card);
    font-family: var(--font-body--family);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #fff 12%, transparent),
      0 4px 14px -8px color-mix(in oklch, var(--cg-pr-accent) 40%, transparent);
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      filter 0.2s ease;
  }

  [data-cg-pr].cg-pr .cg-pr__cta:hover {
    border-color: color-mix(in oklch, var(--cg-pr-card) 60%, transparent);
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #fff 20%, transparent),
      0 8px 20px -12px color-mix(in oklch, var(--cg-pr-accent) 34%, transparent);
    filter: brightness(1.05);
  }

  [data-cg-pr].cg-pr .cg-pr__cta:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--cg-pr-accent) 55%, transparent);
    outline-offset: 3px;
  }

  @media (max-width: 749px) {
    /* Cap the whole section on small screens so a tall desktop value doesn't
       dominate the viewport; a taller card still grows past it (flex-basis auto). */
    [data-cg-pr].cg-pr {
      min-height: min(var(--cg-pr-h, 600px), 78svh);
    }

    [data-cg-pr].cg-pr .cg-pr__backdrop-img {
      filter: blur(12px) saturate(0.9) contrast(1.05);
      scale: 1.06;
    }
  }

  /* Paint-time gate (JS reveal). Scripting on: curtains start closed (seamless
     full image) and the card is hidden until the entrypoint parts them. Scripting
     off: the base rules above stay (curtains parted, card visible), no <noscript>
     needed. If the motion chunk fails, #snapVisible writes inline open + opacity
     to beat these non-!important rules. */
  @media (scripting: enabled) {
    [data-cg-pr].cg-pr {
      --cg-pr-open: 0;
    }
    [data-cg-pr].cg-pr .cg-pr__card {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* No opacity:1 !important: the card is hidden at paint by the scripting gate,
       the reduced JS fade (motion/mini + IntersectionObserver) brings it in, and
       JS-off stays visible because scripting:none never applies the hide. The
       curtains skip the slide and rest open (JS sets --cg-pr-open:1 inline; the
       hover/icon transitions below are tonal only). */
    [data-cg-pr].cg-pr .cg-pr__cta {
      transition: none;
    }
  }
/* END_SECTION:cg-product-reveal */

/* START_SECTION:cg-product-specs (INDEX:37) */
[data-cg-ps].cg-ps {
    background: var(--cg-ps-bg);
    color: var(--cg-ps-ink);
    container-type: inline-size;
  }

  [data-cg-ps] .cg-ps__inner {
    max-width: var(--page-width, 1280px);
    margin-inline: auto;
    padding-block: var(--cg-ps-pt) var(--cg-ps-pb);
    padding-inline: var(--cg-ps-pl, 24px) var(--cg-ps-pr, 24px);
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.25rem);
  }

  /* ---- Bezel-and-core brand card ---- */
  [data-cg-ps] .cg-ps__shell {
    border-radius: 28px;
    padding: 6px;
    border: 1px solid color-mix(in oklch, var(--cg-ps-ink) 10%, transparent);
    background: color-mix(in oklch, var(--cg-ps-ink) 4%, transparent);
  }

  [data-cg-ps] .cg-ps__core {
    border-radius: 22px;
    background: var(--cg-ps-card);
    box-shadow:
      0 1px 1px rgb(255 255 255 / 70%) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-ps-ink) 4%, transparent) inset;
    display: grid;
    grid-template-columns: 1fr;
    overflow: clip;
  }

  [data-cg-ps] .cg-ps__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: clip;
  }

  [data-cg-ps] .cg-ps__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  [data-cg-ps] .cg-ps__placeholder {
    background: color-mix(in oklch, var(--cg-ps-accent) 14%, var(--cg-ps-card));
  }

  [data-cg-ps] .cg-ps__content {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
  }

  /* ---- Head ---- */
  [data-cg-ps] .cg-ps__head {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  [data-cg-ps] .cg-ps__eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cg-ps-accent);
  }

  [data-cg-ps] .cg-ps__heading {
    margin: 0;
    font-weight: 400;
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  [data-cg-ps] .cg-ps__intro {
    font-size: clamp(0.95rem, 0.92rem + 0.2vw, 1.02rem);
    line-height: 1.6;
    text-wrap: pretty;
    color: color-mix(in oklch, var(--cg-ps-ink) 78%, transparent);
  }

  [data-cg-ps] .cg-ps__intro > * {
    margin: 0 0 0.6em;
  }

  [data-cg-ps] .cg-ps__intro > *:last-child {
    margin-bottom: 0;
  }

  /* ---- Shopify-admin rating profile ---- */
  [data-cg-ps] .cg-ps__ratings {
    border-block: 1px solid color-mix(in oklch, var(--cg-ps-ink) 8%, transparent);
    padding-block: clamp(1rem, 2vw, 1.35rem);
  }

  [data-cg-ps] .cg-ps__ratings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  [data-cg-ps] .cg-ps__ratings-kicker,
  [data-cg-ps] .cg-ps__ratings-scale {
    font-family: var(--font-accent--family), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  [data-cg-ps] .cg-ps__ratings-kicker {
    color: var(--cg-ps-ink);
  }

  [data-cg-ps] .cg-ps__ratings-scale {
    color: color-mix(in oklch, var(--cg-ps-ink) 54%, transparent);
  }

  [data-cg-ps] .cg-ps__rating-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
  }

  [data-cg-ps] .cg-ps__rating-row {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.86fr) minmax(0, 1.6fr);
    align-items: center;
    gap: clamp(0.8rem, 1.6vw, 1.25rem);
  }

  [data-cg-ps] .cg-ps__rating-label {
    color: color-mix(in oklch, var(--cg-ps-ink) 76%, transparent);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    text-transform: lowercase;
  }

  [data-cg-ps] .cg-ps__rating-value {
    display: grid;
    grid-template-columns: minmax(4.6rem, max-content) max-content minmax(3rem, 1fr);
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    min-width: 0;
  }

  [data-cg-ps] .cg-ps__rating-word,
  [data-cg-ps] .cg-ps__rating-value--text {
    color: var(--cg-ps-ink);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
  }

  [data-cg-ps] .cg-ps__rating-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  [data-cg-ps] .cg-ps__rating-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid color-mix(in oklch, var(--cg-ps-ink) 24%, transparent);
    border-radius: 999px;
    background: transparent;
  }

  [data-cg-ps] .cg-ps__rating-dot--filled {
    border-color: var(--cg-ps-ink);
    background: var(--cg-ps-ink);
  }

  [data-cg-ps] .cg-ps__rating-track {
    display: block;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in oklch, var(--cg-ps-ink) 8%, transparent);
  }

  [data-cg-ps] .cg-ps__rating-fill {
    display: block;
    width: var(--cg-ps-fill, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--cg-ps-accent);
    transform-origin: left center;
  }

  [data-cg-ps] .cg-ps__rating-row--thickness {
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in oklch, var(--cg-ps-ink) 7%, transparent);
  }

  [data-cg-ps] .cg-ps__rating-value--text {
    display: block;
    margin: 0;
  }

  /* ---- Feature highlights ---- */
  [data-cg-ps] .cg-ps__highlights {
    border-top: 1px solid color-mix(in oklch, var(--cg-ps-ink) 8%, transparent);
    padding-top: clamp(1rem, 2vw, 1.35rem);
  }

  [data-cg-ps] .cg-ps__ratings + .cg-ps__highlights {
    border-top: 0;
    padding-top: 0;
  }

  [data-cg-ps] .cg-ps__highlight-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  [data-cg-ps] .cg-ps__highlight {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.86fr) minmax(0, 1.6fr);
    align-items: baseline;
    gap: clamp(0.8rem, 1.6vw, 1.25rem);
  }

  [data-cg-ps] .cg-ps__highlight-title {
    margin: 0;
    color: var(--cg-ps-ink);
    font-family: var(--font-heading--family), Georgia, serif;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: 0;
    text-wrap: balance;
  }

  [data-cg-ps] .cg-ps__highlight-text {
    margin: 0;
    color: color-mix(in oklch, var(--cg-ps-ink) 72%, transparent);
    font-size: 0.95rem;
    line-height: 1.45;
    text-wrap: pretty;
  }

  [data-cg-ps] .cg-ps__highlight-text:only-child {
    grid-column: 1 / -1;
  }

  /* ---- Manual meter fallback ---- */
  [data-cg-ps] .cg-ps__meters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  [data-cg-ps] .cg-ps__meter-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
  }

  [data-cg-ps] .cg-ps__meter-label {
    font-family: var(--font-accent--family), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cg-ps-ink);
  }

  [data-cg-ps] .cg-ps__meter-value {
    font-size: 0.85rem;
    font-weight: 500;
    color: color-mix(in oklch, var(--cg-ps-ink) 70%, transparent);
  }

  [data-cg-ps] .cg-ps__meter-track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in oklch, var(--cg-ps-ink) 8%, transparent);
    overflow: hidden;
  }

  [data-cg-ps] .cg-ps__meter-fill {
    width: var(--cg-ps-fill, 70%);
    height: 100%;
    border-radius: 999px;
    background: var(--cg-ps-accent);
    transform-origin: left center;
  }

  /* ---- Compare strip ---- */
  [data-cg-ps] .cg-ps__compare {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
  }

  [data-cg-ps] .cg-ps__compare-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in oklch, var(--cg-ps-ink) 10%, transparent);
    background: var(--cg-ps-card);
    text-decoration: none;
    color: var(--cg-ps-ink);
    transition:
      transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-ps] .cg-ps__compare-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -20px color-mix(in oklch, var(--cg-ps-ink) 22%, transparent);
  }

  [data-cg-ps] .cg-ps__compare-media {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: clip;
    background: color-mix(in oklch, var(--cg-ps-ink) 6%, transparent);
  }

  [data-cg-ps] .cg-ps__compare-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  [data-cg-ps] .cg-ps__compare-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }

  [data-cg-ps] .cg-ps__compare-tag {
    font-family: var(--font-accent--family), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cg-ps-accent);
  }

  [data-cg-ps] .cg-ps__compare-title {
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- Motion: hide gated behind JS-added classes so the section stays
     visible if the Vite chunk fails or has not been built. ---- */
  [data-cg-ps].cg-ps--motion [data-cg-ps-anim] {
    opacity: 0;
    transform: translateY(16px);
  }

  [data-cg-ps].cg-ps--motion-fill [data-cg-ps-fill] {
    transform: scaleX(0);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-cg-ps].cg-ps--motion [data-cg-ps-anim] {
      transform: none;
    }
  }

  /* ---- Desktop: two-column core (media + content side by side) ---- */
  @media screen and (min-width: 990px) {
    [data-cg-ps] .cg-ps__core {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }

    [data-cg-ps] .cg-ps__media {
      aspect-ratio: auto;
    }

    [data-cg-ps].cg-ps--image-right .cg-ps__media {
      order: 2;
    }

    [data-cg-ps] .cg-ps__content {
      justify-content: center;
    }
  }

  /* ---- Mobile ---- */
  @media screen and (max-width: 749px) {
    [data-cg-ps] .cg-ps__inner {
      padding-inline: var(--cg-ps-pl, 24px) var(--cg-ps-pr, 24px);
      padding-block: calc(var(--cg-ps-pt) * 0.75) calc(var(--cg-ps-pb) * 0.75);
    }

    [data-cg-ps] .cg-ps__rating-row {
      grid-template-columns: 1fr;
      gap: 0.45rem;
    }

    [data-cg-ps] .cg-ps__highlight {
      grid-template-columns: 1fr;
      gap: 0.35rem;
    }

    [data-cg-ps] .cg-ps__rating-value {
      grid-template-columns: minmax(4.4rem, max-content) max-content minmax(2rem, 1fr);
    }
  }
/* END_SECTION:cg-product-specs */

/* START_SECTION:cg-product-spotlight (INDEX:38) */
/* ---- Surface tokens. Two committed modes; accent is merchant-tunable. The
     value/metric accent is LIFTED on the dark surface so large numerals clear
     3:1, and equals the raw accent on the light surface. ---- */
  [data-cg-spot].cg-spot {
    --cg-spot-radius: 20px;
    display: block;
    position: relative;
    isolation: isolate;
    overflow: clip;
    color: var(--cg-spot-text);
    background: var(--cg-spot-surface);
    padding-block: calc(var(--cg-spot-pt, 96px) * 0.72) calc(var(--cg-spot-pb, 96px) * 0.72);
    padding-inline: var(--cg-spot-pl, 32px) var(--cg-spot-pr, 32px);
  }

  [data-cg-spot].cg-spot--ink {
    --cg-spot-surface: #151718;
    --cg-spot-text: #f4efe6;
    --cg-spot-hair: color-mix(in oklch, #f4efe6 16%, transparent);
    --cg-spot-muted: color-mix(in oklch, #f4efe6 78%, transparent);
    --cg-spot-value: color-mix(in oklch, var(--cg-spot-accent) 58%, #ffffff);
    --cg-spot-well: color-mix(in oklch, #f4efe6 6%, transparent);
    --cg-spot-cta-fg: #f7f2ea;
  }

  [data-cg-spot].cg-spot--cream {
    --cg-spot-surface: #f4efe6;
    --cg-spot-text: #1a1410;
    --cg-spot-hair: color-mix(in oklch, #1a1410 12%, transparent);
    --cg-spot-muted: color-mix(in oklch, #1a1410 66%, transparent);
    --cg-spot-value: var(--cg-spot-accent);
    --cg-spot-well: color-mix(in oklch, #1a1410 5%, transparent);
    --cg-spot-cta-fg: #f7f2ea;
  }

  @media (min-width: 750px) {
    [data-cg-spot].cg-spot {
      padding-block: var(--cg-spot-pt, 96px) var(--cg-spot-pb, 96px);
    }
  }

  /* The inner grid caps at an editorial measure of its own, NOT the raw theme
     page width. The store's page width resolves to ~1520px ("narrow" = 90rem
     content + margins), so a bare var(--page-width) cap never engaged on
     laptop viewports: the media column rode the section padding flush against
     the window edge and the whole band read right-weighted. 78rem keeps the
     52ch feature column + 4/5 media pair centered with real gutters once the
     viewport clears ~1330px. */
  [data-cg-spot] .cg-spot__inner {
    width: 100%;
    max-width: min(var(--page-width, 1280px), 78rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    min-block-size: var(--cg-spot-minh, auto);
  }

  [data-cg-spot].cg-spot--full-width .cg-spot__inner {
    max-width: none;
  }

  /* ---- Media stage ---- */
  [data-cg-spot] .cg-spot__media {
    position: relative;
    margin: 0;
    border-radius: var(--cg-spot-radius);
  }

  [data-cg-spot] .cg-spot__media-glow {
    position: absolute;
    inset: -14% -10% -18%;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(
      60% 55% at 50% 42%,
      color-mix(in oklch, var(--cg-spot-accent) 42%, transparent) 0%,
      transparent 70%
    );
    filter: blur(28px);
    opacity: 0.7;
  }

  [data-cg-spot] .cg-spot__media-clip {
    position: relative;
    z-index: 1;
    overflow: clip;
    border-radius: var(--cg-spot-radius);
    aspect-ratio: 4 / 5;
    background: var(--cg-spot-well);
    box-shadow:
      0 1px 0 color-mix(in oklch, #ffffff 10%, transparent) inset,
      0 40px 80px -50px color-mix(in oklch, #000000 80%, transparent);
  }

  [data-cg-spot] .cg-spot__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--cg-spot-focal, center);
    display: block;
  }

  [data-cg-spot] .cg-spot__img--placeholder {
    background: linear-gradient(150deg, #2b1d12 0%, #6e4724 55%, var(--cg-spot-accent) 100%);
  }

  /* ---- Content ---- */
  [data-cg-spot] .cg-spot__content {
    display: flex;
    flex-direction: column;
    gap: clamp(1.6rem, 3vw, 2.4rem);
  }

  [data-cg-spot] .cg-spot__head {
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 1.4vw, 1.15rem);
    max-width: 44ch;
  }

  [data-cg-spot] .cg-spot__eyebrow {
    margin: 0;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cg-spot-value);
  }

  [data-cg-spot] .cg-spot__heading {
    position: relative;
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: calc(clamp(2rem, 1.3rem + 2.9vw, 3.4rem) * var(--cg-spot-heading-scale, 1));
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
    overflow-wrap: break-word;
    padding-bottom: 0.35rem;
  }

  [data-cg-spot] .cg-spot__heading em {
    font-style: italic;
    color: var(--cg-spot-value);
  }

  /* Accent underline: drawn left-to-right by JS (scaleX). Rests fully drawn so
     no-JS / reduced-motion shows it. Logical inset so it tracks the text edge
     under RTL locales. */
  [data-cg-spot] .cg-spot__underline {
    position: absolute;
    inset-inline-start: 0;
    bottom: -0.1rem;
    width: clamp(3rem, 18%, 5.5rem);
    height: 3px;
    border-radius: 3px;
    background: var(--cg-spot-accent);
    transform-origin: left center;
  }

  [data-cg-spot] .cg-spot__intro {
    font-size: clamp(1rem, 0.96rem + 0.3vw, 1.14rem);
    line-height: 1.62;
    text-wrap: pretty;
    color: var(--cg-spot-muted);
    max-width: 46ch;
  }

  [data-cg-spot] .cg-spot__intro > * {
    margin: 0 0 0.6em;
  }

  [data-cg-spot] .cg-spot__intro > *:last-child {
    margin-bottom: 0;
  }

  /* ---- Feature statements ---- */
  [data-cg-spot] .cg-spot__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Rhythm comes from each feature's own symmetric padding (below), so the
       top rule sits centered between one block's text and the next, not glued
       to its own title. */
    gap: 0;
  }

  [data-cg-spot] .cg-spot__feature {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: clamp(1rem, 2.4vw, 2rem);
    /* row-gap (rule -> content) matches padding-block-end (content -> next rule)
       so the text is evenly spaced above and below within its band. */
    row-gap: clamp(1.3rem, 3vw, 1.7rem);
    padding-block: 0 clamp(1.3rem, 3vw, 1.7rem);
  }

  [data-cg-spot] .cg-spot__feature--metric {
    grid-template-columns: minmax(4.5rem, auto) 1fr;
    align-items: baseline;
  }

  [data-cg-spot] .cg-spot__feature-rule {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--cg-spot-hair);
  }

  [data-cg-spot] .cg-spot__value {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--cg-spot-value);
    overflow-wrap: break-word;
  }

  [data-cg-spot] .cg-spot__feature-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
  }

  [data-cg-spot] .cg-spot__feature-title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
    color: var(--cg-spot-text);
  }

  [data-cg-spot] .cg-spot__feature-title em {
    font-style: italic;
    color: var(--cg-spot-value);
  }

  [data-cg-spot] .cg-spot__feature-text {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    text-wrap: pretty;
    overflow-wrap: break-word;
    color: var(--cg-spot-muted);
    max-width: 52ch;
  }

  [data-cg-spot] .cg-spot__feature-text em {
    font-style: italic;
    color: var(--cg-spot-value);
  }

  [data-cg-spot] .cg-spot__feature-text strong {
    font-weight: 600;
    color: var(--cg-spot-text);
  }

  /* ---- CTA (brand primary recipe: rounded rect, dual shadow, transparent rest
     border so hover adds no layout shift). ---- */
  [data-cg-spot] .cg-spot__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    min-height: 48px;
    padding: 0.85rem 1.55rem;
    border-radius: 12px;
    background: var(--cg-spot-accent);
    color: var(--cg-spot-cta-fg);
    font-family: var(--font-body--family);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #ffffff 14%, transparent),
      0 12px 28px -14px color-mix(in oklch, var(--cg-spot-accent) 62%, transparent);
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      filter 0.2s ease;
  }

  [data-cg-spot] .cg-spot__cta:hover {
    border-color: color-mix(in oklch, var(--cg-spot-cta-fg) 55%, transparent);
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #ffffff 24%, transparent),
      0 16px 32px -16px color-mix(in oklch, var(--cg-spot-accent) 70%, transparent);
    filter: brightness(1.05);
  }

  [data-cg-spot] .cg-spot__cta-arrow {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-cg-spot] .cg-spot__cta:hover .cg-spot__cta-arrow {
    transform: translateX(3px);
  }

  [data-cg-spot] .cg-spot__cta:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--cg-spot-accent) 55%, #ffffff);
    outline-offset: 3px;
  }

  @media (forced-colors: active) {
    [data-cg-spot] .cg-spot__cta:focus-visible {
      outline-color: CanvasText;
    }
  }

  /* ---- Desktop two-column: media sticky, order flips for media-right ---- */
  @media (min-width: 750px) {
    /* Page-width mode: the merchant padding is a FLOOR, and a 4vw fluid gutter
       takes over as the viewport grows, so the media (and its glow) never sit
       nearly flush against the window edge in the 750px-1330px band where the
       inner cap has not engaged yet. Full-width mode keeps the raw settings:
       that mode exists to bleed. */
    [data-cg-spot].cg-spot--page-width {
      padding-inline: max(var(--cg-spot-pl, 32px), 4vw) max(var(--cg-spot-pr, 32px), 4vw);
    }

    [data-cg-spot] .cg-spot__inner {
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    }

    /* Media on the right: keep the image the narrower column (content stays the
       wider one) by flipping the track sizes too, not just the order. Order
       alone would drop the image into the wider 1fr track and squeeze the copy. */
    [data-cg-spot].cg-spot--media-right .cg-spot__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    }

    [data-cg-spot].cg-spot--media-right .cg-spot__media-col {
      order: 2;
    }

    [data-cg-spot] .cg-spot__media-col {
      position: sticky;
      top: calc(var(--header-group-height, 5rem) + 1.5rem);
    }

    [data-cg-spot] .cg-spot__content {
      padding-block: clamp(0.5rem, 2vw, 2rem);
    }

    [data-cg-spot].cg-spot--no-head .cg-spot__content {
      align-self: center;
    }
  }

  /* ---- Mobile: show the WHOLE product (no zoom/crop). object-fit: contain fits
     the full image inside a square stage; the well tint frames any letterbox gap.
     Desktop keeps its edge-to-edge cover crop in the tall sticky frame. ---- */
  @media (max-width: 749px) {
    [data-cg-spot] .cg-spot__media-clip {
      aspect-ratio: 1 / 1;
      max-height: 72svh;
    }

    [data-cg-spot] .cg-spot__img {
      object-fit: contain;
    }

    /* Stack the metric number above the title on phones so a value never
       squeezes the two-column row on a narrow screen. */
    [data-cg-spot] .cg-spot__feature--metric {
      grid-template-columns: 1fr;
    }

    [data-cg-spot].cg-spot {
      padding-inline: calc(var(--cg-spot-pl, 32px) * 0.7) calc(var(--cg-spot-pr, 32px) * 0.7);
    }

    /* Evenly inset just the WORDS so they clear the bottom-left discount popup
       tab. The image (separate column) and the full-width hairline rules stay
       flush: the rule is pulled back out of the content inset. */
    [data-cg-spot] .cg-spot__content {
      padding-inline: 34px;
    }

    [data-cg-spot] .cg-spot__feature-rule {
      margin-inline: -34px;
    }
  }

  /* ---- Right-aligned content (desktop only): the copy hugs the center gutter
     toward the image. Mobile stacks below the image and stays left-aligned for
     readability. Metric rows stack the number above the title (a right-aligned
     two-column value | text row reads awkward). ---- */
  @media (min-width: 750px) {
    [data-cg-spot].cg-spot--text-right .cg-spot__content {
      align-items: flex-end;
    }

    [data-cg-spot].cg-spot--text-right .cg-spot__head {
      align-items: flex-end;
      text-align: right;
    }

    [data-cg-spot].cg-spot--text-right .cg-spot__underline {
      inset-inline-start: auto;
      inset-inline-end: 0;
      transform-origin: right center;
    }

    [data-cg-spot].cg-spot--text-right .cg-spot__intro {
      margin-inline-start: auto;
      text-align: right;
    }

    [data-cg-spot].cg-spot--text-right .cg-spot__feature,
    [data-cg-spot].cg-spot--text-right .cg-spot__feature--metric {
      grid-template-columns: 1fr;
      text-align: right;
    }

    [data-cg-spot].cg-spot--text-right .cg-spot__feature-body {
      align-items: flex-end;
    }

    [data-cg-spot].cg-spot--text-right .cg-spot__feature-text {
      margin-left: auto;
    }

    [data-cg-spot].cg-spot--text-right .cg-spot__cta {
      align-self: flex-end;
    }
  }

  /* ---- Paint-time reveal gate. Scripting on: the media frame + content block
     are hidden until the entrypoint reveals them. Scripting off: base rules stay
     visible. If the chunk fails, #snapVisible / the failsafe script write inline
     opacity:1 to beat these non-!important rules. Inner items carry no CSS hide;
     the entrypoint pre-hides them inline for the stagger. ---- */
  @media (scripting: enabled) {
    [data-cg-spot] .cg-spot__media,
    [data-cg-spot] .cg-spot__content {
      opacity: 0;
    }
  }

  [data-cg-spot][data-cg-spot-failsafe] .cg-spot__media,
  [data-cg-spot][data-cg-spot-failsafe] .cg-spot__content {
    opacity: 1 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-cg-spot] .cg-spot__cta,
    [data-cg-spot] .cg-spot__cta-arrow {
      transition: none;
    }
  }

  /* This section owns its reveal, so opt its wrapper out of the global
     .shopify-section opacity:0 hide (main.css also lists it for :has support). */
  .shopify-section:has([data-cg-spot]) {
    opacity: 1 !important;
  }
/* END_SECTION:cg-product-spotlight */

/* START_SECTION:cg-product-why (INDEX:39) */
.cg-why {
    overflow: clip;
  }

  .cg-why__wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    align-items: start;
  }

  .cg-why__col-art,
  .cg-why__col-text {
    min-width: 0;
  }

  .cg-why__art {
    position: relative;
    overflow: hidden;
    min-height: clamp(20rem, 55vw, 32rem);
    background: rgba(var(--color-foreground), 0.06);
  }

  .cg-why__art--placeholder {
    border: 1px solid rgba(var(--color-foreground), 0.08);
  }

  .cg-why__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cg-why__text {
    display: grid;
    gap: 1rem;
  }

  .cg-why__eyebrow {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
  }

  .cg-why__title {
    margin: 0;
    font-size: clamp(1.75rem, 2.8vw, 2.6rem);
    line-height: 1.05;
    text-wrap: balance;
  }

  .cg-why__sub {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    opacity: 0.9;
  }

  .cg-why__reasons {
    display: grid;
    gap: 1.25rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
  }

  .cg-why__reason {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
  }

  .cg-why__reason-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: rgba(var(--color-foreground), 0.06);
  }

  .cg-why__reason-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .cg-why__reason-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .cg-why__reason-text {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    line-height: 1.55;
    opacity: 0.85;
  }

  .cg-why__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
  }

  .cg-why__caption {
    font-size: 0.8rem;
    opacity: 0.7;
    margin: 0.25rem 0 0;
  }

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

    .is-left .cg-why__col-art {
      order: 1;
    }

    .is-left .cg-why__col-text {
      order: 2;
    }

    .is-right .cg-why__col-art {
      order: 2;
    }

    .is-right .cg-why__col-text {
      order: 1;
    }
  }
/* END_SECTION:cg-product-why */

/* START_SECTION:cg-related-articles (INDEX:40) */
.cg-related {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .cg-related__grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    pointer-events: none;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
    mix-blend-mode: multiply;
    z-index: 0;
  }

  .cg-related__inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin-inline: auto;
    padding-block: var(--cg-rel-pt, 96px) var(--cg-rel-pb, 96px);
    padding-inline: var(--cg-rel-pl, 40px) var(--cg-rel-pr, 40px);
  }

  /* ---- Header ---- */
  .cg-related__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-block-end: clamp(1.75rem, 3.5vw, 2.75rem);
    padding-block-end: 1.25rem;
    border-block-end: 1px solid color-mix(in oklch, var(--cg-related-ink) 10%, transparent);
  }

  .cg-related__heading-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
  }

  .cg-related__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-family: var(--font-accent--family, 'SF Mono', ui-monospace, monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--cg-related-ink) 62%, transparent);
  }

  .cg-related__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cg-related-accent);
  }

  .cg-related__heading {
    margin: 0;
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: calc(clamp(1.6rem, 3.4vw, 2.6rem) * var(--cg-related-h-scale, 1));
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--cg-related-ink);
  }

  .cg-related__subheading {
    margin: 0;
    max-width: 52ch;
    font-size: 0.95rem;
    line-height: 1.6;
    color: color-mix(in oklch, var(--cg-related-ink) 70%, transparent);
  }

  .cg-related__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    font-family: var(--font-accent--family, 'SF Mono', ui-monospace, monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cg-related-accent);
    text-decoration: none;
    padding-block-end: 0.15rem;
    border-block-end: 1px solid color-mix(in oklch, var(--cg-related-accent) 45%, transparent);
    transition:
      border-color 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      filter 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .cg-related__view-all:hover {
    border-block-end-color: var(--cg-related-accent);
    filter: brightness(1.08);
  }

  .cg-related__view-all .cg-related__arrow {
    transition: translate 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .cg-related__view-all:hover .cg-related__arrow {
    translate: 3px 0;
  }

  /* ---- Grid ---- */
  .cg-related__grid {
    display: grid;
    grid-template-columns: repeat(var(--cg-related-cols, 3), minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 989px) {
    .cg-related__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 749px) {
    .cg-related__grid {
      grid-template-columns: 1fr;
    }
  }

  .cg-related__cell {
    display: flex;
  }

  /* ---- Card (whole card is one link) ---- */
  .cg-related__card {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
  }

  .cg-related__card:focus-visible {
    outline: 2px solid var(--cg-related-accent);
    outline-offset: 3px;
    border-radius: 1.85rem;
  }

  .cg-related__shell {
    height: 100%;
    border: 1px solid color-mix(in oklch, var(--cg-related-ink) 7%, transparent);
    border-radius: 1.75rem;
    padding: clamp(0.375rem, 1vw, 0.5rem);
    background: transparent;
    /* translate/scale used for hover (not transform) so main.js's WAAPI
       transform reveal on .motion-item does not clobber the lift. */
    transition:
      translate 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      border-color 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .cg-related__core {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cg-related-card);
    border-radius: calc(1.75rem - clamp(0.375rem, 1vw, 0.5rem));
    overflow: hidden;
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-related-ink) 4%, transparent) inset;
  }

  .cg-related__card:hover .cg-related__shell {
    translate: 0 -6px;
    border-color: color-mix(in oklch, var(--cg-related-accent) 45%, transparent);
    box-shadow: 0 10px 24px -20px color-mix(in oklch, var(--cg-related-ink) 22%, transparent);
  }

  /* ---- Media ---- */
  .cg-related__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: color-mix(in oklch, var(--cg-related-ink) 4%, var(--cg-related-card));
  }

  .cg-related__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      120% 90% at 50% 0%,
      color-mix(in oklch, var(--cg-related-accent) 9%, transparent),
      transparent 60%
    );
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .cg-related__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    scale: 1;
    transition: scale 0.6s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .cg-related__card:hover .cg-related__img {
    scale: 1.045;
  }

  .cg-related__card:hover .cg-related__media::after {
    opacity: 1;
  }

  /* ---- Body ---- */
  .cg-related__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: clamp(1.1rem, 2vw, 1.5rem);
  }

  .cg-related__meta {
    margin: 0;
    font-family: var(--font-accent--family, 'SF Mono', ui-monospace, monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--cg-related-ink) 55%, transparent);
  }

  .cg-related__title {
    margin: 0;
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.22;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--cg-related-ink);
  }

  .cg-related__excerpt {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: color-mix(in oklch, var(--cg-related-ink) 68%, transparent);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cg-related__more {
    margin-block-start: auto;
    padding-block-start: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-accent--family, 'SF Mono', ui-monospace, monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cg-related-accent);
  }

  .cg-related__more .cg-related__arrow {
    transition: translate 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .cg-related__card:hover .cg-related__more .cg-related__arrow {
    translate: 4px 0;
  }

  .cg-related__empty {
    margin: 0;
    padding: 2rem;
    text-align: center;
    font-family: var(--font-accent--family, 'SF Mono', ui-monospace, monospace);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: color-mix(in oklch, var(--cg-related-ink) 60%, transparent);
    border: 1px dashed color-mix(in oklch, var(--cg-related-ink) 22%, transparent);
    border-radius: 1rem;
  }

  /* ---- Responsive padding ---- */
  @media (max-width: 749px) {
    .cg-related__inner {
      padding-block: calc(var(--cg-rel-pt, 96px) * 0.7) calc(var(--cg-rel-pb, 96px) * 0.7);
      padding-inline: calc(var(--cg-rel-pl, 40px) * 0.6) calc(var(--cg-rel-pr, 40px) * 0.6);
    }

    .cg-related__header {
      align-items: flex-start;
    }
  }

  /* ---- Reduced motion: snap visible, kill hover physics ---- */
  @media (prefers-reduced-motion: reduce) {
    .cg-related .motion-item {
      opacity: 1 !important;
      transform: none !important;
    }

    .cg-related__shell,
    .cg-related__img,
    .cg-related__arrow,
    .cg-related__media::after {
      transition: none !important;
    }

    .cg-related__card:hover .cg-related__shell {
      translate: none;
    }

    .cg-related__card:hover .cg-related__img {
      scale: none;
    }

    .cg-related__card:hover .cg-related__more .cg-related__arrow,
    .cg-related__view-all:hover .cg-related__arrow {
      translate: none;
    }
  }
/* END_SECTION:cg-related-articles */

/* START_SECTION:cg-shop-gallery (INDEX:41) */
[data-cg-shop-gallery] {
    --cg-cream: #f4efe6;
    --cg-cream-deep: #f4efe6;
    --cg-ink: #2b1d12;
    --cg-brown: #945e30;
    --cg-line: rgba(43, 29, 18, 0.12);
    --cg-line-soft: rgba(43, 29, 18, 0.06);
    font-family:
      'Work Sans',
      system-ui,
      -apple-system,
      'Segoe UI',
      sans-serif;
  }

  [data-cg-shop-gallery] .font-display {
    font-family: 'Caprasimo', Georgia, serif;
    font-weight: 400;
  }
  [data-cg-shop-gallery] .font-mono {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  }
  [data-cg-shop-gallery] .lowercase {
    text-transform: lowercase;
  }

  /* ── Controls ───────────────────────────────────────────────────────────── */
  .cg-chip {
    appearance: none;
    border: 1px solid var(--cg-line);
    background: transparent;
    padding: 9px 16px;
    border-radius: 999px;
    font-family: 'Work Sans', system-ui, sans-serif;
    font-size: 13px;
    color: var(--cg-ink);
    cursor: pointer;
    transition:
      background 0.15s,
      color 0.15s,
      border-color 0.15s;
  }
  .cg-chip:hover {
    border-color: var(--cg-ink);
  }
  .cg-chip.is-on {
    background: var(--cg-ink);
    color: var(--cg-cream);
    border-color: var(--cg-ink);
  }

  .cg-seg-grp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--cg-line);
    border-radius: 999px;
  }
  .cg-seg-lbl {
    font-size: 9.5px;
    letter-spacing: 0.12em;
    color: var(--cg-brown);
    padding: 0 8px;
    text-transform: lowercase;
  }
  .cg-seg {
    appearance: none;
    border: 0;
    background: transparent;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--cg-ink);
    cursor: pointer;
  }
  .cg-seg:hover {
    background: var(--cg-cream-deep);
  }
  .cg-seg.is-on {
    background: var(--cg-ink);
    color: var(--cg-cream);
  }

  /* ── Masonry ────────────────────────────────────────────────────────────── */
  .cg-masonry {
    column-count: var(--cg-cols-mobile, 2);
    column-gap: 1rem;
  }
  @media (min-width: 640px) {
    .cg-masonry {
      column-count: var(--cg-cols-tablet, 3);
      column-gap: 1.5rem;
    }
  }
  @media (min-width: 1024px) {
    .cg-masonry {
      column-count: var(--cg-cols-desktop, 4);
      column-gap: 1.75rem;
    }
  }

  /* Density modifiers — toggled by JS via `data-cg-density` on grid */
  [data-cg-density='compact'] .cg-card {
    margin-bottom: 16px;
  }
  [data-cg-density='comfy'] .cg-card {
    margin-bottom: 36px;
  }

  /* ── Card ───────────────────────────────────────────────────────────────── */
  .cg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
    margin-bottom: var(--cg-card-gap, 28px);
    color: var(--cg-ink);
    transform: rotate(var(--cg-tilt, 0deg));
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cg-card:hover {
    transform: rotate(0deg) translateY(-5px) scale(1.012);
    z-index: 2;
  }
  .cg-card.is-hidden {
    display: none;
  }

  .cg-card__media-link {
    display: block;
  }
  .cg-card__media {
    position: relative;
    overflow: hidden;
    background: var(--cg-accent, var(--cg-cream-deep));
  }
  .cg-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cg-card:hover .cg-card__img {
    transform: scale(1.04);
  }

  .cg-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    background: repeating-linear-gradient(
      45deg,
      var(--cg-accent, var(--cg-cream-deep)) 0 14px,
      color-mix(in oklch, var(--cg-accent, #f4efe6) 78%, #2b1d12) 14px 28px
    );
    color: rgba(43, 29, 18, 0.7);
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }

  .cg-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--cg-ink);
    color: var(--cg-cream);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 8px 4px;
    border-radius: 999px;
  }

  .cg-card__quick-add {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    appearance: none;
    border: 0;
    background: var(--cg-ink);
    color: var(--cg-cream);
    font-family: 'Work Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 12px 14px;
    border-radius: 999px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.25s,
      transform 0.25s,
      background 0.15s;
    cursor: pointer;
    z-index: 2;
  }
  .cg-card:hover .cg-card__quick-add {
    opacity: 1;
    transform: translateY(0);
  }
  .cg-card__quick-add:hover {
    background: var(--cg-brown);
  }
  .cg-card__quick-add:disabled {
    background: var(--cg-cream-deep);
    color: var(--cg-brown);
    cursor: not-allowed;
  }
  .cg-qa__plus {
    font-size: 16px;
    line-height: 0;
    font-weight: 700;
  }
  .cg-qa__success {
    display: none;
    font-weight: 700;
  }
  .cg-card.is-added .cg-card__quick-add {
    opacity: 1;
    transform: translateY(0);
    background: #2b6a4a;
    color: var(--cg-cream);
  }
  .cg-card.is-added .cg-qa__label,
  .cg-card.is-added .cg-qa__plus {
    display: none;
  }
  .cg-card.is-added .cg-qa__success {
    display: inline;
  }

  /* ── Card meta ──────────────────────────────────────────────────────────── */
  .cg-card__meta {
    padding: 14px 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cg-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .cg-card__pack {
    font-size: 10.5px;
    color: var(--cg-brown);
    letter-spacing: 0.04em;
    text-transform: lowercase;
  }
  .cg-card__tack {
    font-size: 9.5px;
    letter-spacing: 0.08em;
    color: var(--cg-brown);
    padding: 2px 7px;
    border: 1px solid var(--cg-line);
    border-radius: 999px;
  }
  .cg-card__tack[data-tack='high'] {
    color: #c8462c;
    border-color: rgba(200, 70, 44, 0.3);
  }
  .cg-card__tack[data-tack='low'] {
    color: #2b6a4a;
    border-color: rgba(43, 106, 74, 0.25);
  }
  .cg-card__name {
    font-size: clamp(20px, 1.6vw, 28px);
    line-height: 0.98;
    margin: 6px 0 0;
    color: var(--cg-ink);
  }
  .cg-card__name a {
    color: inherit;
    text-decoration: none;
  }
  .cg-card__tag {
    font-size: 13.5px;
    color: rgba(43, 29, 18, 0.7);
    margin: 4px 0 8px;
    line-height: 1.4;
    max-width: 36ch;
  }
  .cg-card__foot {
    color: var(--cg-brown);
    margin-top: 4px;
  }
  .cg-card__sku {
    font-size: 10.5px;
    opacity: 0.8;
  }
  .cg-card__price {
    font-size: 20px;
    color: var(--cg-ink);
  }
  .cg-card__compare {
    color: var(--cg-brown);
    margin-right: 6px;
    opacity: 0.7;
  }

  /* ── Card style: polaroid (signature motif) ────────────────────────────── */
  .cg-card--polaroid .cg-card__media {
    margin: 0;
    padding: 0;
  }
  .cg-card--polaroid .cg-card__media-link {
    background: var(--cg-cream-deep);
    padding: 14px 14px 4px;
    box-shadow:
      0 1px 0 rgba(43, 29, 18, 0.04),
      0 14px 32px -20px rgba(43, 29, 18, 0.35);
    border-radius: 4px;
    transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cg-card--polaroid:hover .cg-card__media-link {
    box-shadow:
      0 2px 0 rgba(43, 29, 18, 0.05),
      0 28px 50px -18px rgba(43, 29, 18, 0.45);
  }
  .cg-card--polaroid .cg-card__quick-add {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }
  .cg-card--polaroid .cg-card__badge {
    top: 22px;
    left: 22px;
  }
  .cg-card--polaroid .cg-card__meta {
    padding: 12px 14px 8px;
  }

  /* ── Card style: receipt (technical) ───────────────────────────────────── */
  .cg-card--receipt {
    background: var(--cg-cream);
    border: 1px solid var(--cg-line);
  }
  .cg-card--receipt .cg-card__media {
    border-bottom: 1px solid var(--cg-line);
  }
  .cg-card--receipt .cg-card__meta {
    padding: 18px 14px 14px;
    background: var(--cg-cream);
    background-image:
      radial-gradient(circle at 0 0, var(--cg-cream-deep) 6px, transparent 6.5px),
      radial-gradient(circle at 100% 0, var(--cg-cream-deep) 6px, transparent 6.5px);
    background-size: 12px 12px;
    background-position:
      0 0,
      100% 0;
    background-repeat: no-repeat;
  }

  /* ── Card style: plate (clean premium) ─────────────────────────────────── */
  .cg-card--plate {
    background: transparent;
  }
  .cg-card--plate .cg-card__media {
    border-radius: 14px;
  }
  .cg-card--plate .cg-card__meta {
    padding: 14px 2px 6px;
  }

  /* ── Toast ─────────────────────────────────────────────────────────────── */
  .cg-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--cg-ink);
    color: var(--cg-cream);
    padding: 12px 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.3s,
      transform 0.3s;
    z-index: 1000;
  }
  .cg-toast.is-open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
  .cg-toast__sku {
    font-size: 10px;
    letter-spacing: 0.12em;
    background: rgba(244, 239, 230, 0.15);
    padding: 3px 8px;
    border-radius: 999px;
  }
  .cg-toast__view {
    color: var(--cg-cream);
    text-decoration: underline;
    font-size: 11px;
  }

  /* ── Empty filter state ────────────────────────────────────────────────── */
  .cg-empty {
    padding: 80px 20px;
    text-align: center;
  }
  .cg-empty.hidden {
    display: none;
  }

  /* ── Responsive ────────────────────────────────────────────────────────── */
  @media (max-width: 720px) {
    .cg-card {
      transform: rotate(0deg) !important;
    }
    .cg-card__quick-add {
      opacity: 1;
      transform: translateY(0);
    }
    .cg-ctrls {
      width: 100%;
      justify-content: space-between;
    }
  }

  /* ── Reduced motion ────────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .cg-card,
    .cg-card__img,
    .cg-card__media-link,
    .cg-toast {
      transition: none !important;
    }
    .cg-card:hover {
      transform: rotate(0deg) !important;
    }
  }

  /* No-JS fallback — show quick-add buttons even without JS */
  .no-js .cg-card__quick-add {
    opacity: 1;
    transform: translateY(0);
  }
/* END_SECTION:cg-shop-gallery */

/* START_SECTION:cg-showcase (INDEX:42) */
[data-cg-showcase].cg-showcase {
    --cg-sc-ink: #1a1410;
    --cg-sc-radius: 24px;
    --cg-sc-maxw: 34rem;
    /* cg-showcase is a custom element: its default display is inline, which
       would collapse the band. Force block so layout matches the old section. */
    display: block;
    position: relative;
    isolation: isolate;
    overflow: clip;
    container-type: inline-size;
  }

  /* ---- Shared media + parallax image ---- */
  [data-cg-showcase] .cg-showcase__media {
    position: relative;
    overflow: clip;
  }

  [data-cg-showcase] .cg-showcase__image {
    position: absolute;
    left: 0;
    top: -8%;
    width: 100%;
    height: 116%;
    object-fit: cover;
    object-position: center;
  }

  [data-cg-showcase] .cg-showcase__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background:
      radial-gradient(
        120% 120% at 18% 12%,
        color-mix(in oklab, var(--cg-sc-accent) 55%, transparent) 0%,
        transparent 55%
      ),
      linear-gradient(135deg, #2b1d12 0%, #6e4724 55%, #945e30 100%);
  }

  /* ---- Content typography ---- */
  [data-cg-showcase] .cg-showcase__content {
    display: flex;
    flex-direction: column;
    gap: clamp(0.9rem, 1.6vw, 1.4rem);
    width: 100%;
    max-width: var(--cg-sc-maxw);
  }

  [data-cg-showcase].cg-showcase--align-center .cg-showcase__content {
    margin-inline: auto;
    text-align: center;
    align-items: center;
  }

  [data-cg-showcase] .cg-showcase__eyebrow {
    margin: 0;
    font-family: var(--font-body--family, inherit);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cg-sc-accent);
  }

  [data-cg-showcase] .cg-showcase__heading {
    margin: 0;
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 800;
    font-size: calc(clamp(2rem, 1.4rem + 2.6vw, 3.2rem) * var(--cg-sc-heading-scale, 1));
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  [data-cg-showcase] .cg-showcase__heading em {
    font-style: italic;
    color: var(--cg-sc-accent);
  }

  [data-cg-showcase] .cg-showcase__body {
    font-family: var(--font-body--family, inherit);
    font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
    line-height: 1.6;
    letter-spacing: -0.004em;
    text-wrap: pretty;
  }

  [data-cg-showcase] .cg-showcase__body > * {
    margin: 0 0 0.6em;
  }

  [data-cg-showcase] .cg-showcase__body > *:last-child {
    margin-bottom: 0;
  }

  /* ---- CTA (grounded, agency-style interaction) ---- */
  [data-cg-showcase] .cg-showcase__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    margin-top: 0.4rem;
    padding: 0.95rem 1.5rem;
    border-radius: 999px;
    background: var(--cg-sc-accent);
    color: #fff;
    font-family: var(--font-body--family, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 10px 24px -14px color-mix(in oklab, var(--cg-sc-accent) 80%, #000);
    transition:
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
      filter 180ms ease,
      box-shadow 180ms ease;
  }

  [data-cg-showcase].cg-showcase--align-center .cg-showcase__cta {
    align-self: center;
  }

  [data-cg-showcase] .cg-showcase__cta-arrow {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-cg-showcase] .cg-showcase__cta:hover {
    filter: brightness(1.04);
  }

  [data-cg-showcase] .cg-showcase__cta:hover .cg-showcase__cta-arrow {
    transform: translateX(3px);
  }

  [data-cg-showcase] .cg-showcase__cta:active {
    transform: scale(0.96);
    box-shadow: 0 4px 12px -10px color-mix(in oklab, var(--cg-sc-accent) 80%, #000);
  }

  /* =========================================================
     Background layout: full-bleed image, content overlaid
     ========================================================= */
  [data-cg-showcase].cg-showcase--background {
    display: grid;
    min-height: var(--cg-sc-minh);
    color: var(--cg-sc-text);
  }

  [data-cg-showcase].cg-showcase--background .cg-showcase__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  [data-cg-showcase].cg-showcase--background .cg-showcase__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to top,
      color-mix(in oklab, var(--cg-sc-ink) calc(var(--cg-sc-overlay) * 130%), transparent) 0%,
      color-mix(in oklab, var(--cg-sc-ink) calc(var(--cg-sc-overlay) * 72%), transparent) 48%,
      color-mix(in oklab, var(--cg-sc-ink) calc(var(--cg-sc-overlay) * 22%), transparent) 100%
    );
  }

  [data-cg-showcase].cg-showcase--background .cg-showcase__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 24px);
    padding-block: var(--cg-sc-pt) var(--cg-sc-pb);
    min-height: var(--cg-sc-minh);
  }

  [data-cg-showcase].cg-showcase--background.cg-showcase--align-center .cg-showcase__inner {
    justify-content: center;
  }

  /* =========================================================
     Split layout: image + content side by side
     ========================================================= */
  [data-cg-showcase].cg-showcase--split .cg-showcase__inner {
    display: grid;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 24px);
    padding-block: var(--cg-sc-pt) var(--cg-sc-pb);
  }

  [data-cg-showcase].cg-showcase--split .cg-showcase__media {
    min-height: clamp(320px, 42vw, var(--cg-sc-minh));
    border-radius: var(--cg-sc-radius);
    box-shadow: 0 30px 60px -40px rgba(26, 20, 16, 0.45);
  }

  @media screen and (min-width: 750px) {
    [data-cg-showcase].cg-showcase--split .cg-showcase__inner {
      grid-template-columns: 1fr 1fr;
    }

    /* Image on the right: swap visual order without touching DOM order. */
    [data-cg-showcase].cg-showcase--split.cg-showcase--media-right .cg-showcase__media {
      order: 2;
    }
  }

  /* =========================================================
     Width
     ========================================================= */
  [data-cg-showcase].cg-showcase--page-width.cg-showcase--background .cg-showcase__media,
  [data-cg-showcase].cg-showcase--page-width.cg-showcase--background .cg-showcase__overlay {
    border-radius: var(--cg-sc-radius);
  }

  [data-cg-showcase].cg-showcase--page-width {
    max-width: var(--page-width, 1280px);
    margin-inline: auto;
  }

  /* =========================================================
     Motion: hide gated behind a JS-added class so the section
     stays visible if the Vite chunk fails or has not been built.
     ========================================================= */
  [data-cg-showcase].cg-showcase--motion [data-cg-showcase-anim] {
    opacity: 0;
    transform: translateY(16px);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-cg-showcase] [data-cg-showcase-anim] {
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* =========================================================
     Mobile
     ========================================================= */
  @media screen and (max-width: 749px) {
    [data-cg-showcase].cg-showcase--background {
      min-height: min(var(--cg-sc-minh), 78svh);
    }

    [data-cg-showcase].cg-showcase--background .cg-showcase__inner {
      min-height: min(var(--cg-sc-minh), 78svh);
      padding-block: calc(var(--cg-sc-pt) * 0.8) calc(var(--cg-sc-pb) * 0.8);
    }

    [data-cg-showcase].cg-showcase--split .cg-showcase__media {
      min-height: clamp(260px, 64vw, 420px);
    }
  }
/* END_SECTION:cg-showcase */

/* START_SECTION:cg-tape-reveal (INDEX:43) */
/* Section height is the WHOLE band: min-height on the root (border-box, so the
     padding is included in the total) makes the merchant "Section height" = the
     full section, not just the inner band. Flex column so the stage fills the
     space left by padding; a taller-than-set card still grows the section
     (flex-basis auto) rather than clipping. */
  [data-cg-trv].cg-trv {
    display: flex;
    flex-direction: column;
    min-height: var(--cg-trv-h, 620px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--cg-trv-bg);
    color: var(--cg-trv-ink);
    padding-block: calc(var(--cg-trv-pt, 96px) * 0.7) calc(var(--cg-trv-pb, 96px) * 0.7);
    padding-inline: calc(var(--cg-trv-pl, 24px) * 0.6) calc(var(--cg-trv-pr, 24px) * 0.6);
  }

  @media (min-width: 750px) {
    [data-cg-trv].cg-trv {
      padding-block: var(--cg-trv-pt, 96px) var(--cg-trv-pb, 96px);
      padding-inline: var(--cg-trv-pl, 24px) var(--cg-trv-pr, 24px);
    }
  }

  [data-cg-trv].cg-trv .cg-trv__grain {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.03;
    mix-blend-mode: multiply;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
  }

  [data-cg-trv].cg-trv .cg-trv__stage {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    border-radius: 1.25rem;
    overflow: hidden;
    background: color-mix(in oklch, var(--cg-trv-ink) 6%, var(--cg-trv-bg));
  }

  /* ----- Full-bleed background ----- */
  [data-cg-trv].cg-trv .cg-trv__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
  }

  [data-cg-trv].cg-trv .cg-trv__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Scrim: a faint even darken so the white card reads against a bright photo,
     plus a radial vignette to frame the floating card. Intensity from overlay. */
  [data-cg-trv].cg-trv .cg-trv__veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(
        ellipse at 50% 50%,
        transparent 26%,
        color-mix(in oklch, var(--cg-trv-ink) calc(var(--cg-trv-overlay, 0.4) * 72%), transparent) 100%
      ),
      linear-gradient(
        0deg,
        color-mix(in oklch, var(--cg-trv-ink) calc(var(--cg-trv-overlay, 0.4) * 12%), transparent),
        color-mix(in oklch, var(--cg-trv-ink) calc(var(--cg-trv-overlay, 0.4) * 12%), transparent)
      );
  }

  /* In flow (not absolute) so the band grows with a tall card on mobile instead
     of clipping it. flex: 1 1 auto fills the height the section root leaves after
     padding, and (basis auto) still grows when the card is taller; the bg + veil
     fill behind it. */
  [data-cg-trv].cg-trv .cg-trv__stage-inner {
    position: relative;
    z-index: 4;
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 4vw, 3rem);
    pointer-events: none;
  }

  /* ----- The instrument card -----
     Soft sleeve frame + core, echoing the rounded edge guard wrapping the paddle. */
  [data-cg-trv].cg-trv .cg-trv__card {
    pointer-events: auto;
    position: relative;
    width: min(var(--cg-trv-card-w, 480px), 100%);
    /* Query container so the header plate can stack when the card is narrow,
       regardless of viewport width. */
    container-type: inline-size;
    padding: 10px;
    border-radius: 2.2rem;
    background: linear-gradient(
      145deg,
      color-mix(in oklch, var(--cg-trv-guard) 76%, #ffffff) 0%,
      var(--cg-trv-guard) 46%,
      color-mix(in oklch, var(--cg-trv-guard) 82%, var(--cg-trv-ink)) 100%
    );
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--cg-trv-ink) 8%, transparent),
      0 1px 0 color-mix(in oklch, #ffffff 58%, transparent) inset,
      0 -18px 34px color-mix(in oklch, var(--cg-trv-ink) 8%, transparent) inset,
      0 2px 8px -3px color-mix(in oklch, var(--cg-trv-ink) 24%, transparent),
      0 44px 90px -48px color-mix(in oklch, var(--cg-trv-ink) 70%, transparent);
  }

  [data-cg-trv].cg-trv .cg-trv__card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.42;
    background:
      radial-gradient(circle at 24% 18%, color-mix(in oklch, #ffffff 70%, transparent) 0 1px, transparent 1.7px),
      radial-gradient(
        circle at 68% 72%,
        color-mix(in oklch, var(--cg-trv-ink) 18%, transparent) 0 0.8px,
        transparent 1.6px
      );
    background-size:
      11px 13px,
      15px 17px;
    mix-blend-mode: soft-light;
  }

  /* The guard seam traces the frame as a quiet inset line. It renders with the
     card itself, avoiding a delayed border pop while preserving the wrapped edge. */
  [data-cg-trv].cg-trv .cg-trv__wrap {
    position: absolute;
    inset: 0;
    /* Explicit 100% size: an SVG is a replaced element, so inset:0 alone leaves
       it at its intrinsic 300x150 anchored top-left (the rect then traced a tiny
       rounded rect in the corner). Filling the card makes the % rect geometry
       resolve against the card box and trace the real perimeter. */
    width: 100%;
    height: 100%;
    display: block;
    z-index: 4;
    pointer-events: none;
    overflow: visible;
  }

  [data-cg-trv].cg-trv .cg-trv__wrap-rect {
    x: 6.5px;
    y: 6.5px;
    width: calc(100% - 13px);
    height: calc(100% - 13px);
    rx: 29px;
    ry: 29px;
    fill: none;
    stroke: color-mix(in oklch, var(--cg-trv-ink) 20%, transparent);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
  }

  [data-cg-trv].cg-trv .cg-trv__core {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: calc(2.2rem - 10px);
    padding: clamp(1.5rem, 2.6vw, 2.1rem);
    background: var(--cg-trv-card);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 75%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-trv-ink) 4%, transparent) inset;
  }

  /* Instrument plate: launch label left, spec readout right, one hairline. */
  [data-cg-trv].cg-trv .cg-trv__plate {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in oklch, var(--cg-trv-ink) 8%, transparent);
  }

  [data-cg-trv].cg-trv .cg-trv__eyebrow {
    margin: 0;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cg-trv-accent);
  }

  /* Solo launch label (no spec readout): center it instead of pinning left.
     Driven by a Liquid modifier class (not :has) so it survives the narrow-card
     container query below, which flips the plate to a left-aligned column. */
  [data-cg-trv].cg-trv .cg-trv__plate--solo {
    justify-content: center;
    align-items: center;
  }

  [data-cg-trv].cg-trv .cg-trv__plate--solo .cg-trv__eyebrow {
    text-align: center;
  }

  /* Narrow card: the label-left / spec-right row can't hold both, so stack them
     left-aligned instead of letting either wrap mid-phrase. */
  @container (max-width: 400px) {
    [data-cg-trv].cg-trv .cg-trv__plate {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.35rem;
    }

    /* Solo plate stays centered even when the card is narrow enough to stack. */
    [data-cg-trv].cg-trv .cg-trv__plate--solo {
      align-items: center;
    }

    [data-cg-trv].cg-trv .cg-trv__plate-spec {
      text-align: left;
    }
  }

  [data-cg-trv].cg-trv .cg-trv__plate-spec {
    margin: 0;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: color-mix(in oklch, var(--cg-trv-ink) 55%, transparent);
    text-align: right;
  }

  /* Media well: shrink-wraps the product photo (img in flow, height auto) so it
     fits any shape with no crop, corners rounded. Grey gradient shows behind
     transparent product PNGs. */
  [data-cg-trv].cg-trv .cg-trv__well {
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(
      165deg,
      color-mix(in oklch, var(--cg-trv-well) 70%, #ffffff) 0%,
      var(--cg-trv-well) 100%
    );
    border: 1px solid color-mix(in oklch, var(--cg-trv-ink) 6%, transparent);
    box-shadow: 0 1px 4px color-mix(in oklch, var(--cg-trv-ink) 7%, transparent) inset;
  }

  /* Optional PDP link wrapping the photo. Block-level so it fills the well;
     the pointer cursor is the only hover affordance (no scale). */
  [data-cg-trv].cg-trv .cg-trv__well-link {
    display: block;
    border-radius: inherit;
  }

  [data-cg-trv].cg-trv .cg-trv__well-link:focus-visible {
    outline: 2px solid var(--cg-trv-accent);
    outline-offset: 3px;
  }

  [data-cg-trv].cg-trv .cg-trv__well-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: inherit;
  }

  /* One line always: the card is a container (container-type: inline-size), so
     size the title in cqi (% of card width). It scales with the card at every
     viewport, keeping the title on a single line; a longer title gets smaller
     rather than wrapping. */
  [data-cg-trv].cg-trv .cg-trv__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: clamp(1rem, 6cqi, 2.7rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-align: center;
    white-space: nowrap;
    /* Reserve space so an italic accent word with a descender (g, y, p) doesn't clip. */
    padding-bottom: 0.08em;
    color: var(--cg-trv-ink);
  }

  [data-cg-trv].cg-trv .cg-trv__title em {
    font-style: italic;
    color: var(--cg-trv-accent);
  }

  [data-cg-trv].cg-trv .cg-trv__sub {
    margin: 0;
    align-self: center;
    max-width: 40ch;
    font-family: var(--font-body--family);
    font-size: 0.98rem;
    line-height: 1.55;
    text-align: center;
    text-wrap: pretty;
    color: color-mix(in oklch, var(--cg-trv-ink) 70%, transparent);
  }

  /* Hairline divider above the price/CTA row. */
  [data-cg-trv].cg-trv .cg-trv__rule {
    width: 100%;
    height: 1px;
    margin-block: 0.4rem 0.1rem;
    background: color-mix(in oklch, var(--cg-trv-ink) 8%, transparent);
  }

  [data-cg-trv].cg-trv .cg-trv__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.9rem;
  }

  [data-cg-trv].cg-trv .cg-trv__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: 1.25rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--cg-trv-ink);
  }

  [data-cg-trv].cg-trv .cg-trv__price-prefix {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-trv-ink) 55%, transparent);
  }

  /* CTA mirrors the product-hero / cg-hero primary recipe: 12px rounded rect,
     dual shadow (inset white top highlight + colored ambient), transparent rest
     border so the hover frame adds no layout shift, hover = fg-tinted hairline
     frame + deeper ambient + brightness. Press is the JS squish (data-cg-hover). */
  [data-cg-trv].cg-trv .cg-trv__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.8rem 1.6rem;
    border-radius: 12px;
    background: var(--cg-trv-accent);
    color: var(--cg-trv-card);
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #ffffff 12%, transparent),
      0 8px 24px -12px color-mix(in oklch, var(--cg-trv-accent) 58%, transparent);
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      filter 0.2s ease;
  }

  [data-cg-trv].cg-trv .cg-trv__cta:hover {
    border-color: color-mix(in oklch, var(--cg-trv-card) 60%, transparent);
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #ffffff 22%, transparent),
      0 14px 30px -14px color-mix(in oklch, var(--cg-trv-card) 42%, transparent);
    filter: brightness(1.05);
  }

  [data-cg-trv].cg-trv .cg-trv__cta:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--cg-trv-accent) 55%, transparent);
    outline-offset: 3px;
  }

  @media (max-width: 749px) {
    /* Cap the whole section on small screens so a tall desktop value doesn't
       dominate the viewport; a taller card still grows past it (flex-basis auto). */
    [data-cg-trv].cg-trv {
      min-height: min(var(--cg-trv-h, 620px), 80svh);
    }
  }

  @media (max-width: 479px) {
    [data-cg-trv].cg-trv .cg-trv__row {
      flex-direction: column;
      align-items: stretch;
      text-align: center;
    }

    [data-cg-trv].cg-trv .cg-trv__price {
      justify-content: center;
    }

    [data-cg-trv].cg-trv .cg-trv__cta {
      justify-content: center;
    }
  }

  /* Paint-time gate (JS reveal). Scripting on: the card is hidden until the
     entrypoint reveals it. Scripting off: the base rules stay visible. If the
     motion chunk fails, #snapVisible writes inline values to beat these
     non-!important rules. The inner items carry no CSS hide: the entrypoint
     pre-hides them inline. */
  @media (scripting: enabled) {
    [data-cg-trv][data-cg-trv-state='pending'].cg-trv .cg-trv__card {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* No opacity:1 !important: the card is hidden at paint by the scripting gate,
       the reduced JS fade (motion/mini + IntersectionObserver) brings it in, and
       JS-off stays visible because scripting:none never applies the hide. The
       guard line rests drawn; the CTA hover stays tonal. */
    [data-cg-trv].cg-trv .cg-trv__cta {
      transition: none;
    }
  }
/* END_SECTION:cg-tape-reveal */

/* START_SECTION:cg-tuning-line (INDEX:44) */
/* Never leave the host section hidden behind main.css's scripting gate. */
  .shopify-section:has([data-cg-tl]) {
    opacity: 1 !important;
  }

  /* Paint-time hides, gated on scripting so JS-off users see everything. The
     element writes inline opacity:0 on each target, stamps the ready attr
     (dropping these rules), then animates: no flash in either direction. */
  @media (scripting: enabled) {
    [data-cg-tl]:not([data-cg-tl-ready]) [data-cg-tl-anim] {
      opacity: 0;
    }

    [data-cg-tl]:not([data-cg-tl-tuned]) .cg-tl__fill {
      transform: scaleX(0);
    }

    [data-cg-tl]:not([data-cg-tl-tuned]) .cg-tl__heading em::after {
      transform: scaleX(0);
    }
  }

  /* ---- Full-bleed root: breaks out of any centered wrapper to the viewport. ---- */
  [data-cg-tl].cg-tl {
    display: block;
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    isolation: isolate;
    overflow: clip;
    min-height: var(--cg-tl-minh);
    padding-block: var(--cg-tl-pt) var(--cg-tl-pb);
    background:
      radial-gradient(
        120% 140% at 84% 0%,
        color-mix(in oklch, var(--cg-tl-ink) 4%, var(--cg-tl-bg)) 0%,
        transparent 60%
      ),
      linear-gradient(180deg, var(--cg-tl-bg) 0%, color-mix(in oklch, var(--cg-tl-ink) 3%, var(--cg-tl-bg)) 100%);
    color: var(--cg-tl-ink);
  }

  /* ---- Optional background photo, washed toward white so ink stays legible
     (the inverse of a dark hero scrim). ---- */
  [data-cg-tl].cg-tl .cg-tl__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  [data-cg-tl].cg-tl .cg-tl__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.5;
    filter: saturate(0.9) contrast(1.02);
  }

  [data-cg-tl].cg-tl .cg-tl__wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--cg-tl-bg) 70%, transparent) 0%,
        color-mix(in oklch, var(--cg-tl-bg) 88%, transparent) 100%
      ),
      radial-gradient(120% 120% at 18% 30%, color-mix(in oklch, var(--cg-tl-bg) 92%, transparent) 0%, transparent 64%);
  }

  /* ---- Capped content rows; the axis between them runs full bleed. ---- */
  [data-cg-tl].cg-tl .cg-tl__inner {
    position: relative;
    z-index: 2;
    max-width: var(--page-width, 1280px);
    margin-inline: auto;
    padding-inline: var(--cg-tl-px);
  }

  [data-cg-tl].cg-tl .cg-tl__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.9rem, 1.8vw, 1.4rem);
    max-width: 30ch;
  }

  [data-cg-tl].cg-tl .cg-tl__eyebrow {
    margin: 0;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--cg-tl-accent);
    border-bottom: 1px solid color-mix(in oklch, var(--cg-tl-accent) 42%, transparent);
    padding-bottom: 0.5em;
  }

  [data-cg-tl].cg-tl .cg-tl__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: calc(clamp(2.5rem, 1.5rem + 3.8vw, 4.4rem) * var(--cg-tl-h-scale, 1));
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  /* JS-created word spans for the heading cascade. */
  [data-cg-tl].cg-tl .cg-tl__word {
    display: inline-block;
  }

  /* The accent word gets a sienna underline that wipes in left-to-right, like
     the tuning indicator landing on its mark. */
  [data-cg-tl].cg-tl .cg-tl__heading em {
    position: relative;
    font-style: italic;
    color: var(--cg-tl-accent);
  }

  [data-cg-tl].cg-tl .cg-tl__heading em::after {
    content: '';
    position: absolute;
    left: 0.02em;
    right: 0.02em;
    bottom: -0.04em;
    height: 0.07em;
    background: var(--cg-tl-accent);
    border-radius: 2px;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1) 0.1s;
  }

  [data-cg-tl].cg-tl .cg-tl__lede {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
    line-height: 1.62;
    max-width: 50ch;
    text-wrap: pretty;
    color: color-mix(in oklch, var(--cg-tl-ink) 78%, transparent);
  }

  /* ---- Full-bleed tuning axis ---- */
  [data-cg-tl].cg-tl .cg-tl__axis {
    position: relative;
    z-index: 2;
    margin-block: clamp(3rem, 8vw, 6rem) 0;
    padding-inline: clamp(1.5rem, 6vw, 7rem);
  }

  [data-cg-tl].cg-tl .cg-tl__axis-ends {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.1rem;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: color-mix(in oklch, var(--cg-tl-ink) 64%, transparent);
  }

  [data-cg-tl].cg-tl .cg-tl__axis-end--right {
    color: var(--cg-tl-accent);
  }

  [data-cg-tl].cg-tl .cg-tl__track {
    position: relative;
    height: 2px;
    background: color-mix(in oklch, var(--cg-tl-ink) 16%, transparent);
  }

  /* Sienna fill grows from the left to the sweet spot. Default scaleX(1); the
     JS gate collapses it so the reveal can draw it in. Fails visible. */
  [data-cg-tl].cg-tl .cg-tl__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--cg-tl-marker, 60%);
    background: var(--cg-tl-accent);
    transform-origin: left center;
  }

  [data-cg-tl].cg-tl .cg-tl__ticks {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  [data-cg-tl].cg-tl .cg-tl__tick {
    position: relative;
    width: 1px;
    height: 7px;
    background: color-mix(in oklch, var(--cg-tl-ink) 24%, transparent);
  }

  [data-cg-tl].cg-tl .cg-tl__tick--mid {
    height: 11px;
    background: color-mix(in oklch, var(--cg-tl-ink) 32%, transparent);
  }

  [data-cg-tl].cg-tl .cg-tl__tick--major {
    height: 16px;
    width: 1.5px;
    background: color-mix(in oklch, var(--cg-tl-ink) 46%, transparent);
  }

  [data-cg-tl].cg-tl .cg-tl__tick-label {
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    color: color-mix(in oklch, var(--cg-tl-ink) 50%, transparent);
    white-space: nowrap;
  }

  /* ---- Indicator riding the sweet spot ---- */
  [data-cg-tl].cg-tl .cg-tl__marker {
    position: absolute;
    left: var(--cg-tl-marker, 60%);
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    white-space: nowrap;
  }

  [data-cg-tl].cg-tl .cg-tl__marker-flag {
    order: -1;
    margin-bottom: 2px;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: color-mix(in oklch, var(--cg-tl-ink) 62%, transparent);
  }

  [data-cg-tl].cg-tl .cg-tl__marker-value {
    order: -1;
    font-family: var(--font-heading--family);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--cg-tl-accent);
  }

  [data-cg-tl].cg-tl .cg-tl__marker-pin {
    width: 2px;
    height: 30px;
    margin-top: 4px;
    border-radius: 2px;
    background: var(--cg-tl-accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--cg-tl-accent) 12%, transparent);
  }

  /* ---- Foot: CTA + price + spec ---- */
  [data-cg-tl].cg-tl .cg-tl__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
  }

  [data-cg-tl].cg-tl .cg-tl__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    background: var(--cg-tl-accent);
    color: #fff;
    font-family: var(--font-body--family);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 10px 24px -16px color-mix(in oklch, var(--cg-tl-accent) 80%, #000);
    transition:
      background 180ms ease,
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 180ms ease;
  }

  [data-cg-tl].cg-tl .cg-tl__cta-arrow {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-cg-tl].cg-tl .cg-tl__cta:hover {
    background: color-mix(in oklch, var(--cg-tl-accent) 88%, #000);
  }

  [data-cg-tl].cg-tl .cg-tl__cta:hover .cg-tl__cta-arrow {
    transform: translateX(3px);
  }

  [data-cg-tl].cg-tl .cg-tl__cta:active {
    transform: scale(0.96);
    box-shadow: 0 4px 12px -10px color-mix(in oklch, var(--cg-tl-accent) 80%, #000);
  }

  [data-cg-tl].cg-tl .cg-tl__cta:focus-visible {
    outline: 2px solid var(--cg-tl-ink);
    outline-offset: 3px;
  }

  [data-cg-tl].cg-tl .cg-tl__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
  }

  [data-cg-tl].cg-tl .cg-tl__price-prefix {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-tl-ink) 62%, transparent);
  }

  [data-cg-tl].cg-tl .cg-tl__price-value {
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--cg-tl-ink);
  }

  [data-cg-tl].cg-tl .cg-tl__spec {
    margin: 0;
    margin-inline-start: auto;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: color-mix(in oklch, var(--cg-tl-ink) 60%, transparent);
  }

  @media (max-width: 749px) {
    [data-cg-tl].cg-tl .cg-tl__spec {
      margin-inline-start: 0;
      flex-basis: 100%;
    }

    [data-cg-tl].cg-tl .cg-tl__axis {
      padding-inline: 1.25rem;
    }

    /* Drop intermediate gram labels on narrow screens so they don't collide. */
    [data-cg-tl].cg-tl .cg-tl__tick-label {
      font-size: 9px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-cg-tl].cg-tl .cg-tl__heading em::after {
      transition: none;
    }

    /* Match the cg-product-feature CTAs: drop the arrow slide + press transform
       transition so the button has no spatial motion in reduced mode. */
    [data-cg-tl].cg-tl .cg-tl__cta,
    [data-cg-tl].cg-tl .cg-tl__cta-arrow {
      transition: background 180ms ease;
    }
  }
/* END_SECTION:cg-tuning-line */

/* START_SECTION:cg-tuning-tape (INDEX:45) */
/* The element owns its own reveal. The host-section wrapper opt-out lives in
     frontend/entrypoints/main.css (`.shopify-section:has(cg-tuning-tape)`),
     paired with STATIC_TARGET_SELECTOR in section-reveal-controller.js and
     guarded by test/section-reveal-static-alignment.test.js. Wrapper opt-outs
     belong there (head-loaded), never in a section stylesheet. */

  /* Paint-time hides, gated on scripting so JS-off users see everything.
     The element writes inline opacity:0 on each target, stamps the ready attr
     (dropping this rule), then animates: no flash in either direction. */
  @media (scripting: enabled) {
    [data-cg-tune]:not([data-cg-tune-ready]) [data-cg-tune-anim] {
      opacity: 0;
    }

    [data-cg-tune]:not([data-cg-tune-taped]) .cg-tune__heading em::before {
      transform: scaleX(0);
    }
  }

  [data-cg-tune].cg-tune {
    display: block;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--cg-tune-bg);
    color: var(--cg-tune-ink);
  }

  [data-cg-tune].cg-tune .cg-tune__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: color-mix(in oklch, var(--cg-tune-ink) 10%, var(--cg-tune-bg));
  }

  [data-cg-tune].cg-tune .cg-tune__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        90deg,
        color-mix(in oklch, var(--cg-tune-bg) 92%, transparent) 0%,
        color-mix(in oklch, var(--cg-tune-bg) 74%, transparent) 46%,
        color-mix(in oklch, var(--cg-tune-bg) 42%, transparent) 100%
      ),
      radial-gradient(ellipse at 76% 48%, transparent 0%, color-mix(in oklch, var(--cg-tune-bg) 76%, transparent) 68%),
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--cg-tune-bg) 76%, transparent),
        transparent 36%,
        color-mix(in oklch, var(--cg-tune-bg) 82%, transparent)
      );
  }

  [data-cg-tune].cg-tune .cg-tune__bg-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: blur(14px) saturate(0.88) contrast(1.06);
    scale: 1.06;
    opacity: 0.72;
  }

  [data-cg-tune].cg-tune .cg-tune__grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.03;
    pointer-events: none;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
    mix-blend-mode: multiply;
  }

  [data-cg-tune].cg-tune .cg-tune__inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding-top: calc(var(--cg-tune-pt, 96px) * 0.75);
    padding-bottom: calc(var(--cg-tune-pb, 96px) * 0.75);
    padding-left: calc(var(--cg-tune-pl, 40px) * 0.6);
    padding-right: calc(var(--cg-tune-pr, 40px) * 0.6);
  }

  @media (min-width: 768px) {
    [data-cg-tune].cg-tune .cg-tune__inner {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      align-items: center;
      gap: clamp(2.5rem, 5.5vw, 5rem);
      padding-top: var(--cg-tune-pt, 96px);
      padding-bottom: var(--cg-tune-pb, 96px);
      padding-left: var(--cg-tune-pl, 40px);
      padding-right: var(--cg-tune-pr, 40px);
    }
  }

  [data-cg-tune].cg-tune .cg-tune__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    min-width: 0;
  }

  /* Hairline-underlined mono label (the page-header eyebrow treatment). */
  [data-cg-tune].cg-tune .cg-tune__eyebrow {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--cg-tune-accent);
    border-bottom: 1px solid color-mix(in oklch, var(--cg-tune-accent) 45%, transparent);
    padding-bottom: 0.45em;
    margin: 0;
  }

  [data-cg-tune].cg-tune .cg-tune__heading {
    font-family: var(--font-heading--family);
    font-weight: 400;
    font-size: calc(clamp(2.3rem, 1.4rem + 3.4vw, 3.9rem) * var(--cg-tune-h-scale, 1));
    letter-spacing: -0.03em;
    line-height: 1.02;
    text-wrap: balance;
    margin: 0;
  }

  /* JS-created word spans for the cascade. */
  [data-cg-tune].cg-tune .cg-tune__word {
    display: inline-block;
  }

  /* The accent word gets "taped": a matte white strip drawn in behind it after
     the word cascade lands, like a strip pressed onto the paddle edge. */
  [data-cg-tune].cg-tune .cg-tune__heading em {
    position: relative;
    isolation: isolate;
    font-style: italic;
    padding-inline: 0.14em;
  }

  [data-cg-tune].cg-tune .cg-tune__heading em::before {
    content: '';
    position: absolute;
    inset: 0.05em -0.16em -0.03em;
    z-index: -1;
    background: var(--cg-tune-card);
    border: 1px solid color-mix(in oklch, var(--cg-tune-ink) 13%, transparent);
    border-radius: 4px;
    rotate: -1.4deg;
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 80%, transparent) inset,
      0 3px 12px -5px color-mix(in oklch, var(--cg-tune-ink) 30%, transparent);
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1) 0.08s;
  }

  [data-cg-tune].cg-tune .cg-tune__subheading {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-tune-ink) 62%, transparent);
    margin: 0;
  }

  [data-cg-tune].cg-tune .cg-tune__lede {
    font-family: var(--font-body--family);
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 52ch;
    text-wrap: pretty;
    color: color-mix(in oklch, var(--cg-tune-ink) 76%, transparent);
    margin: 0;
  }

  /* ----- Gram ruler -----
     A tape-measure strip that "unrolls" on reveal; the accent marker dials in
     on the merchant-set sweet spot. Pure decoration, hidden from AT. */
  [data-cg-tune].cg-tune .cg-tune__ruler {
    position: relative;
    width: 100%;
    max-width: 26rem;
    margin-top: 0.5rem;
    padding-top: 58px;
    padding-bottom: 24px;
  }

  [data-cg-tune].cg-tune .cg-tune__ticks {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 20px;
    border-bottom: 1px solid color-mix(in oklch, var(--cg-tune-ink) 22%, transparent);
  }

  [data-cg-tune].cg-tune .cg-tune__tick {
    position: relative;
    width: 1px;
    height: 8px;
    background: color-mix(in oklch, var(--cg-tune-ink) 26%, transparent);
  }

  [data-cg-tune].cg-tune .cg-tune__tick--mid {
    height: 12px;
    background: color-mix(in oklch, var(--cg-tune-ink) 34%, transparent);
  }

  [data-cg-tune].cg-tune .cg-tune__tick--major {
    height: 18px;
    width: 1.5px;
    background: color-mix(in oklch, var(--cg-tune-ink) 52%, transparent);
  }

  [data-cg-tune].cg-tune .cg-tune__tick-label {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    color: color-mix(in oklch, var(--cg-tune-ink) 52%, transparent);
    white-space: nowrap;
  }

  [data-cg-tune].cg-tune .cg-tune__marker {
    position: absolute;
    left: var(--cg-tune-marker, 62%);
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    white-space: nowrap;
  }

  [data-cg-tune].cg-tune .cg-tune__marker-value {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--cg-tune-accent);
  }

  [data-cg-tune].cg-tune .cg-tune__marker-flag {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: color-mix(in oklch, var(--cg-tune-ink) 58%, transparent);
  }

  [data-cg-tune].cg-tune .cg-tune__marker-pin {
    width: 2px;
    height: 24px;
    margin-top: 3px;
    border-radius: 2px;
    background: var(--cg-tune-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--cg-tune-accent) 12%, transparent);
  }

  [data-cg-tune].cg-tune .cg-tune__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 0.35rem;
  }

  [data-cg-tune].cg-tune .cg-tune__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
  }

  [data-cg-tune].cg-tune .cg-tune__price-prefix {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: color-mix(in oklch, var(--cg-tune-ink) 60%, transparent);
  }

  [data-cg-tune].cg-tune .cg-tune__price-value {
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--cg-tune-ink);
  }

  [data-cg-tune].cg-tune .cg-tune__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.8rem 1.6rem;
    border-radius: 3px;
    background: var(--cg-tune-accent);
    color: var(--cg-tune-card);
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 1px solid transparent;
    translate: 0 0;
    scale: 1;
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      filter 0.2s ease,
      translate 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      scale 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #ffffff 12%, transparent),
      0 4px 14px -8px color-mix(in oklch, var(--cg-tune-accent) 40%, transparent);
  }

  [data-cg-tune].cg-tune .cg-tune__cta:hover {
    border-color: color-mix(in oklch, var(--cg-tune-card) 60%, transparent);
    translate: 0 -2px;
    filter: brightness(1.05);
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #ffffff 20%, transparent),
      0 8px 20px -12px color-mix(in oklch, var(--cg-tune-accent) 34%, transparent);
  }

  [data-cg-tune].cg-tune .cg-tune__cta:active {
    scale: 0.96;
    transition-duration: 0.1s;
  }

  [data-cg-tune].cg-tune .cg-tune__cta:focus-visible {
    outline: 2px solid var(--cg-tune-ink);
    outline-offset: 3px;
  }

  [data-cg-tune].cg-tune .cg-tune__spec {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: color-mix(in oklch, var(--cg-tune-ink) 58%, transparent);
    margin: 0;
  }

  [data-cg-tune].cg-tune .cg-tune__media {
    position: relative;
    min-width: 0;
    justify-self: center;
    width: min(100%, 520px);
  }

  @media (max-width: 767px) {
    [data-cg-tune].cg-tune .cg-tune__media {
      order: -1;
    }
  }

  [data-cg-tune].cg-tune .cg-tune__media-shell {
    position: relative;
    filter: drop-shadow(0 26px 26px color-mix(in oklch, var(--cg-tune-ink) 18%, transparent));
  }

  [data-cg-tune].cg-tune .cg-tune__media-core {
    position: relative;
    overflow: visible;
    border-radius: 0;
    aspect-ratio: var(--cg-tune-ratio, 4 / 5);
    background: transparent;
  }

  [data-cg-tune].cg-tune .cg-tune__media-link {
    display: block;
    text-decoration: none;
  }

  [data-cg-tune].cg-tune .cg-tune__media-link:focus-visible {
    outline: 2px solid var(--cg-tune-ink);
    outline-offset: 4px;
    border-radius: 2px;
  }

  [data-cg-tune].cg-tune .cg-tune__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 0;
    outline: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: -1px;
    opacity: 1;
    transition: opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [data-cg-tune].cg-tune .cg-tune__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
  }

  [data-cg-tune].cg-tune .cg-tune__media[data-cg-tune-hover-active] .cg-tune__img:not(.cg-tune__img--hover) {
    opacity: 0;
  }

  [data-cg-tune].cg-tune .cg-tune__media[data-cg-tune-hover-active] .cg-tune__img--hover {
    opacity: 1;
  }

  @media (hover: hover) {
    [data-cg-tune].cg-tune .cg-tune__media:hover .cg-tune__img:not(.cg-tune__img--hover) {
      opacity: 0;
    }

    [data-cg-tune].cg-tune .cg-tune__media:hover .cg-tune__img--hover {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Reveal becomes an opacity-only staggered fade driven by the element's
       reduced branch; decorative draws show at rest. No opacity !important
       here: WAAPI sits below author !important and the fade would snap. */
    [data-cg-tune].cg-tune .cg-tune__heading em::before {
      transition: none;
    }

    [data-cg-tune].cg-tune .cg-tune__cta:hover,
    [data-cg-tune].cg-tune .cg-tune__cta:active {
      translate: 0 0;
      scale: 1;
    }
  }
/* END_SECTION:cg-tuning-tape */

/* START_SECTION:cg-wholesale-form (INDEX:46) */
/* Force the host section visible at first paint. main.css hides every
     non-header .shopify-section under @media (scripting: enabled); a form must
     never be trapped invisible, so this :has() unhide wins. No JS reveal. */
  .shopify-section:has([data-cg-wholesale]) {
    opacity: 1 !important;
  }

  .cg-wf {
    display: block;
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .cg-wf__grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    pointer-events: none;
    mix-blend-mode: multiply;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
  }

  .cg-wf__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding-top: calc(var(--cg-wf-pt, 80px) * 0.7);
    padding-bottom: calc(var(--cg-wf-pb, 80px) * 0.7);
    padding-left: calc(var(--cg-wf-pl, 40px) * 0.55);
    padding-right: calc(var(--cg-wf-pr, 40px) * 0.55);
  }

  @media (min-width: 768px) {
    .cg-wf__inner {
      padding-top: var(--cg-wf-pt, 80px);
      padding-bottom: var(--cg-wf-pb, 80px);
      padding-left: var(--cg-wf-pl, 40px);
      padding-right: var(--cg-wf-pr, 40px);
    }
  }

  .cg-wf__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 2rem;
  }

  .cg-wf__eyebrow {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--cg-wf-accent);
    margin: 0;
  }

  .cg-wf__heading {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--cg-wf-ink);
    margin: 0;
    text-wrap: balance;
  }

  .cg-wf__intro {
    font-family: var(--font-body--family, inherit);
    font-size: clamp(0.98rem, 1.3vw, 1.1rem);
    line-height: 1.6;
    color: color-mix(in oklch, var(--cg-wf-ink) 75%, transparent);
    max-width: 60ch;
  }

  .cg-wf__intro p {
    margin: 0 0 0.6em;
  }

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

  /* Content alignment (left default / center) */
  .cg-wf[data-cg-align='center'] .cg-wf__header {
    align-items: center;
    text-align: center;
  }

  .cg-wf[data-cg-align='center'] .cg-wf__intro {
    margin-inline: auto;
  }

  .cg-wf[data-cg-align='center'] .cg-wf__actions {
    justify-content: center;
  }

  .cg-wf__shell {
    position: relative;
    background: color-mix(in oklch, var(--cg-wf-ink) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-wf-ink) 7%, transparent);
    padding: 6px;
    border-radius: 1.75rem;
  }

  .cg-wf__core {
    background: var(--cg-wf-card);
    border-radius: calc(1.75rem - 0.375rem);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-wf-ink) 4%, transparent) inset;
  }

  .cg-wf__form {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .cg-wf__fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .cg-wf__legend {
    display: block;
    width: 100%;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cg-wf-accent);
    padding: 0 0 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid color-mix(in oklch, var(--cg-wf-ink) 10%, transparent);
  }

  .cg-wf__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
  }

  @media (max-width: 599px) {
    .cg-wf__grid {
      grid-template-columns: 1fr;
    }
  }

  .cg-wf__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
  }

  .cg-wf__field--full {
    grid-column: 1 / -1;
  }

  .cg-wf__label {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: color-mix(in oklch, var(--cg-wf-ink) 82%, transparent);
  }

  .cg-wf__req {
    color: var(--cg-wf-accent);
  }

  .cg-wf__input {
    width: 100%;
    font-family: var(--font-body--family, inherit);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--cg-wf-ink);
    background: color-mix(in oklch, var(--cg-wf-ink) 3%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-wf-ink) 14%, transparent);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    outline: none;
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  .cg-wf__input:focus-visible {
    border-color: var(--cg-wf-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--cg-wf-accent) 15%, transparent);
  }

  /* Inline validation feedback after the field has been interacted with. */
  .cg-wf__input:user-invalid {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px color-mix(in oklch, #c0392b 12%, transparent);
  }

  .cg-wf__input::placeholder {
    color: color-mix(in oklch, var(--cg-wf-ink) 65%, transparent);
  }

  .cg-wf__field-error {
    margin: 0;
    color: #8a1c12;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .cg-wf__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px;
  }

  .cg-wf__textarea {
    resize: vertical;
    min-height: 110px;
  }

  .cg-wf__hint {
    margin: 0 0 1rem;
    font-family: var(--font-body--family, inherit);
    font-size: 0.85rem;
    line-height: 1.5;
    color: color-mix(in oklch, var(--cg-wf-ink) 60%, transparent);
  }

  .cg-wf__lines {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .cg-wf__line {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: color-mix(in oklch, var(--cg-wf-ink) 2.5%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-wf-ink) 10%, transparent);
    border-radius: 0.9rem;
  }

  .cg-wf__line-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .cg-wf__line-img {
    width: 46px;
    height: 46px;
    flex: none;
    object-fit: cover;
    border-radius: 0.55rem;
    background: var(--cg-wf-card);
    border: 1px solid color-mix(in oklch, var(--cg-wf-ink) 10%, transparent);
  }

  .cg-wf__line-title {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--cg-wf-ink);
  }

  .cg-wf__line-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .cg-wf__packs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .cg-wf__packs--single {
    grid-template-columns: minmax(0, 140px);
  }

  .cg-wf__packs--grips {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(86px, auto);
    align-items: end;
  }

  @media (max-width: 540px) {
    .cg-wf__packs--grips {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .cg-wf__packs--options {
    grid-template-columns: repeat(auto-fit, minmax(76px, 110px));
    justify-content: start;
  }

  .cg-wf__pack--total {
    padding-left: 0.6rem;
    border-left: 1px solid color-mix(in oklch, var(--cg-wf-ink) 12%, transparent);
  }

  @media (max-width: 540px) {
    .cg-wf__pack--total {
      padding-left: 0;
      border-left: none;
    }
  }

  .cg-wf__qty--total {
    font-weight: 700;
    color: var(--cg-wf-accent);
    background: color-mix(in oklch, var(--cg-wf-accent) 8%, var(--cg-wf-card));
    cursor: default;
  }

  .cg-wf__axis {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .cg-wf__axis-label {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: color-mix(in oklch, var(--cg-wf-ink) 78%, transparent);
  }

  .cg-wf__pack {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .cg-wf__pack-label {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: color-mix(in oklch, var(--cg-wf-ink) 65%, transparent);
  }

  .cg-wf__qty {
    width: 100%;
    font-family: var(--font-body--family, inherit);
    font-size: 0.95rem;
    text-align: center;
    color: var(--cg-wf-ink);
    background: var(--cg-wf-card);
    border: 1px solid color-mix(in oklch, var(--cg-wf-ink) 14%, transparent);
    border-radius: 8px;
    padding: 0.55rem 0.5rem;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  .cg-wf__qty:focus-visible {
    border-color: var(--cg-wf-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--cg-wf-accent) 15%, transparent);
  }

  .cg-wf__qty:user-invalid {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px color-mix(in oklch, #c0392b 12%, transparent);
  }

  .cg-wf__note-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .cg-wf__actions {
    display: flex;
    justify-content: flex-start;
  }

  .cg-wf__submit {
    font-family: var(--font-body--family, 'Montserrat', sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fbf7ef;
    background: var(--cg-wf-accent);
    border: none;
    border-radius: 999px;
    padding: 0.8rem 2.2rem;
    cursor: pointer;
    transition:
      background 0.3s ease,
      transform 0.15s ease;
  }

  .cg-wf__submit:hover {
    background: color-mix(in oklch, var(--cg-wf-accent) 84%, #000000);
  }

  .cg-wf__submit:active {
    transform: scale(0.98);
  }

  .cg-wf__submit:focus-visible {
    outline: 2px solid var(--cg-wf-accent);
    outline-offset: 3px;
  }

  .cg-wf__note {
    margin: 0 0 0.5rem;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    font-family: var(--font-body--family, inherit);
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .cg-wf__note--ok {
    color: var(--cg-wf-ink);
    background: color-mix(in oklch, var(--cg-wf-accent) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-wf-accent) 35%, transparent);
  }

  .cg-wf__note--err {
    color: #8a1c12;
    background: color-mix(in oklch, #c0392b 10%, transparent);
    border: 1px solid color-mix(in oklch, #c0392b 35%, transparent);
  }

  .cg-wf__note--err a {
    color: inherit;
    text-decoration: underline;
  }

  /* Success-only view. On the posted reload Shopify anchors the URL at the
     submitted form's id, so that form is :target. Show just the thank-you +
     home button and hide the field area, so the empty form does not re-render
     under the note. :has() guards a bare #cg-wholesale-form deep link (no post,
     no success block) from blanking the form. */
  .cg-wf__success {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .cg-wf__form:target .cg-wf__success {
    display: flex;
  }

  .cg-wf__form:target:has(.cg-wf__success) > *:not(.cg-wf__success) {
    display: none;
  }

  .cg-wf__home {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body--family, 'Montserrat', sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #fbf7ef;
    background: var(--cg-wf-accent);
    border-radius: 999px;
    padding: 0.8rem 2.2rem;
    transition:
      background 0.3s ease,
      transform 0.15s ease;
  }

  .cg-wf__home:hover {
    background: color-mix(in oklch, var(--cg-wf-accent) 84%, #000000);
  }

  .cg-wf__home:active {
    transform: scale(0.98);
  }

  .cg-wf__home:focus-visible {
    outline: 2px solid var(--cg-wf-accent);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .cg-wf__input,
    .cg-wf__qty {
      transition: none;
    }

    .cg-wf__submit {
      transition: background 0.2s ease;
    }

    .cg-wf__submit:active {
      transform: none;
    }
  }

  @media (max-width: 749px) {
    .cg-wf__core {
      padding: clamp(1.1rem, 5vw, 1.6rem);
    }
  }
/* END_SECTION:cg-wholesale-form */

/* START_SECTION:collection-links (INDEX:47) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;
    grid-gap: var(--gap-3xl);

    &:has([ratio='portrait']) {
      --template-column-ratio: 0.8fr;
    }

    &:has([ratio='square']) {
      --template-column-ratio: 1fr;
    }

    &:has([ratio='landscape']) {
      --template-column-ratio: 1.4fr;
    }

    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

    &[layout='spotlight'] {
      position: relative;
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

      @media screen and (min-width: 750px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

      .collection-links__container {
        align-items: var(--alignment);
      }

      @media screen and (max-width: 749px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'text' 'image';
        grid-gap: var(--gap-2xl);

        .collection-links__container {
          gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
          justify-content: var(--alignment);
        }
      }
    }

    &[layout='text'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }
    }
  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media screen and (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:featured-product (INDEX:56) */
.featured-product-section .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .featured-product-section {
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    @media screen and (min-width: 750px) {
      --viewport-offset: 300px;
    }
  }

  .featured-product-section .product-grid__card {
    --padding-block: 20px;
    --padding-inline: 20px;

    @media screen and (min-width: 750px) {
      --padding-block: 40px;
      --padding-inline: 40px;
    }
  }

  @media screen and (max-width: 749px) {
    .featured-product-section .media-block {
      order: -1;
    }
  }

  @media screen and (min-width: 750px) {
    .featured-product-section .product-card__content {
      --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio, var(--media-preview-ratio)));
      width: min(100%, var(--hugged-width));
      margin-left: auto;
      margin-right: auto;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer-utilities (INDEX:57) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--divider-color, var(--color-border));
    color: var(--color-foreground-muted);

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      justify-content: center;
      gap: var(--gap);
      align-items: center;
      text-align: left;
    }
  }

  .utilities a,
  .utilities button {
    color: var(--color-utilities, var(--color-foreground-muted));
  }

  .utilities > * {
    text-align: center;

    @media screen and (min-width: 750px) {
      text-align: left;
      justify-self: start;
    }
  }

  /* Dynamic positioning based on number of blocks */
  @media screen and (min-width: 750px) {
    /* 1 block: Single column, left aligned */
    .utilities--blocks-1 {
      grid-template-columns: 1fr;
      justify-content: start;
    }

    .utilities--blocks-1 > * {
      justify-self: start;
      text-align: left;
    }

    /* 2 blocks: Two equal columns, start and end aligned */
    .utilities--blocks-2 {
      grid-template-columns: 1fr 1fr;
    }

    .utilities--blocks-2 > *:nth-child(2) {
      justify-self: end;
      text-align: right;
    }

    /* 3 blocks: Three columns (1fr auto 1fr), start/center/end aligned */
    .utilities--blocks-3 {
      grid-template-columns: 1fr auto 1fr;
    }

    .utilities--blocks-3 > *:nth-child(2) {
      justify-self: center;
      text-align: center;
    }

    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:58) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

  .footer-content .menu__heading__default {
    font-weight: var(--font-heading--weight);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-content {
      grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
      grid-auto-flow: row;
    }

    .footer-content[style*='--grid-columns: 4'] {
      grid-template-columns: repeat(2, 1fr);
    }

    .footer-content--isolated-grid-item-tablet > :last-child {
      grid-column: 1 / -1;
    }
  }

  @media screen and (min-width: 990px) {
    .footer-content {
      grid-template-columns: repeat(var(--grid-columns), 1fr);
    }

    /* Single item centered */
    .footer-content[style*='--grid-columns: 1'] {
      justify-items: center;
    }

    .footer-content--isolated-grid-item-desktop > :last-child {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:gift-card-product (INDEX:59) */
cg-gift-card-product {
    display: block;
  }

  .cg-gift-card {
    --cg-gift-ink: #1a1410;
    --cg-gift-accent: #8a3a12;
    --cg-gift-accent-bright: #ef6238;
    --cg-gift-accent-soft: color-mix(in oklch, #c47a40 24%, #fbf7ef);
    --cg-gift-panel: #fbf7ef;
    --cg-gift-panel-soft: #f4efe6;
    --cg-gift-line: rgb(26 20 16 / 0.16);

    color: var(--cg-gift-ink);
    background: var(--color-background);
    padding-block: var(--cg-gift-pad-t) var(--cg-gift-pad-b);
    padding-inline: var(--cg-gift-pad-l) var(--cg-gift-pad-r);
  }

  .cg-gift-card__inner,
  .cg-gift-card__faq {
    width: min(100%, var(--cg-gift-max-width));
    margin-inline: auto;
  }

  .cg-gift-card__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.8fr);
    gap: 0;
    align-items: center;
    padding: clamp(10px, 1.3vw, 16px);
    border: 1px solid var(--cg-gift-line);
    border-radius: 8px;
    background: var(--cg-gift-panel);
    box-shadow: 0 24px 60px rgb(26 20 16 / 0.12);
  }

  .cg-gift-card--image-right .cg-gift-card__media {
    order: 2;
  }

  .cg-gift-card__media {
    border: 1px solid rgb(26 20 16 / 0.12);
    border-radius: 8px;
    background: var(--cg-gift-panel-soft);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.68);
  }

  .cg-gift-card__faq {
    border: 1px solid var(--cg-gift-line);
    border-radius: 8px;
    background: var(--cg-gift-panel);
    box-shadow: 0 20px 50px rgb(26 20 16 / 0.1);
  }

  .cg-gift-card__media {
    position: relative;
    overflow: hidden;
    min-height: clamp(360px, 52vw, 620px);
    display: grid;
    align-content: stretch;
  }

  .cg-gift-card__visual {
    min-height: inherit;
    display: grid;
    place-items: center;
    padding: clamp(22px, 5vw, 56px);
    background: linear-gradient(
      145deg,
      var(--cg-gift-panel-soft) 0%,
      color-mix(in oklch, var(--cg-gift-accent) 7%, var(--cg-gift-panel)) 100%
    );
  }

  .cg-gift-card__image {
    width: min(100%, 520px);
    height: auto;
    aspect-ratio: 5 / 3;
    object-fit: contain;
    border-radius: 8px;
    filter: drop-shadow(0 22px 34px rgb(26 20 16 / 0.14));
  }

  .cg-gift-card__image-placeholder {
    width: min(100%, 520px);
    aspect-ratio: 5 / 3;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--cg-gift-ink);
    background:
      linear-gradient(135deg, rgb(251 247 239 / 0.96), color-mix(in oklch, var(--cg-gift-accent-bright) 22%, #fbf7ef)),
      var(--cg-gift-panel);
    border: 1px solid rgb(26 20 16 / 0.12);
    font-family: var(--font-heading--family), var(--font-body--family), sans-serif;
    font-size: clamp(2rem, 5vw, 4.8rem);
    font-weight: 700;
  }

  .cg-gift-card__caption {
    position: absolute;
    inset-inline: clamp(18px, 4vw, 34px);
    inset-block-end: clamp(18px, 4vw, 34px);
    display: flex;
    width: fit-content;
    border: 1px solid rgb(251 247 239 / 0.3);
    border-radius: 999px;
    background: rgb(26 20 16 / 0.82);
    color: var(--cg-gift-panel);
    padding: 7px 11px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
  }

  .cg-gift-card__content {
    padding: clamp(28px, 4.6vw, 58px);
  }

  .cg-gift-card__eyebrow {
    margin: 0 0 10px;
    color: var(--cg-gift-accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cg-gift-card h1,
  .cg-gift-card h2 {
    color: var(--cg-gift-ink);
    font-family: var(--font-heading--family), var(--font-body--family), sans-serif;
    letter-spacing: 0;
  }

  .cg-gift-card h1 {
    margin: 0;
    font-size: var(--cg-gift-heading-mobile);
    line-height: 0.92;
  }

  .cg-gift-card__subheading {
    margin-block-start: 16px;
    color: rgb(26 20 16 / 0.76);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.55;
  }

  .cg-gift-card__description {
    display: grid;
    gap: 0.85em;
    margin-block-start: 18px;
    color: rgb(26 20 16 / 0.72);
    font-size: clamp(0.95rem, 1.2vw, 1.08rem);
    line-height: 1.58;
  }

  .cg-gift-card__description > * {
    margin: 0;
  }

  .cg-gift-card__form {
    display: grid;
    gap: 20px;
    margin-block-start: 26px;
  }

  .cg-gift-card__denominations,
  .gift-card-recipient-form__fields {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .cg-gift-card__denominations legend,
  .gift-card-recipient-form legend {
    margin-block-end: 12px;
    color: var(--cg-gift-ink);
    font-weight: 700;
  }

  .cg-gift-card__variant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
    gap: 10px;
  }

  .cg-gift-card__variant {
    position: relative;
    min-height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cg-gift-line);
    border-radius: 14px;
    background: color-mix(in oklch, var(--cg-gift-panel-soft) 74%, #ffffff);
    color: var(--cg-gift-ink);
    cursor: pointer;
    transition:
      filter 180ms ease,
      border-color 180ms ease,
      background-color 180ms ease,
      color 180ms ease;
  }

  .cg-gift-card__variant:hover {
    border-color: color-mix(in oklch, var(--cg-gift-accent) 44%, transparent);
    background: var(--cg-gift-accent-soft);
  }

  .cg-gift-card__variant input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: inherit;
  }

  .cg-gift-card__variant span {
    width: 100%;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .cg-gift-card__variant:has(:focus-visible) {
    outline: 2px solid var(--cg-gift-accent);
    outline-offset: 3px;
  }

  .cg-gift-card__variant:has(:checked) {
    border-color: var(--cg-gift-accent);
    background: var(--cg-gift-accent);
    color: #ffffff;
  }

  .cg-gift-card__variant--disabled {
    cursor: not-allowed;
    filter: grayscale(1) brightness(0.92);
  }

  .gift-card-recipient-form {
    padding-block: var(--cg-gift-form-pad-t) var(--cg-gift-form-pad-b);
    padding-inline: var(--cg-gift-form-pad-l) var(--cg-gift-form-pad-r);
    border-block: 1px solid transparent;
    border-image: linear-gradient(to right, transparent, rgb(26 20 16 / 0.18), transparent) 1;
  }

  .gift-card-recipient-form__fields {
    display: grid;
    gap: 16px;
  }

  .gift-card-recipient-form__field {
    display: grid;
    gap: 7px;
  }

  .gift-card-recipient-form label {
    color: var(--cg-gift-ink);
    font-size: 0.9rem;
    font-weight: 700;
  }

  .gift-card-recipient-form label span {
    margin-inline-start: 6px;
    color: rgb(26 20 16 / 0.64);
    font-size: 0.75rem;
    font-weight: 500;
  }

  .gift-card-recipient-form input,
  .gift-card-recipient-form textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--cg-gift-line);
    border-radius: 16px;
    background: #ffffff;
    color: var(--cg-gift-ink);
    padding: 11px 12px;
    font: inherit;
  }

  .gift-card-recipient-form textarea {
    resize: vertical;
  }

  .gift-card-recipient-form input:focus-visible,
  .gift-card-recipient-form textarea:focus-visible {
    outline: 2px solid var(--cg-gift-accent);
    outline-offset: 2px;
  }

  .gift-card-recipient-form p,
  .cg-gift-card__custom-note p {
    margin: 0;
    color: rgb(26 20 16 / 0.64);
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .gift-card-recipient-form__field-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .gift-card-recipient-form__errors,
  .gift-card-recipient-form__error {
    color: #8a1f11;
  }

  .gift-card-recipient-form__errors {
    margin-block-end: 16px;
    border: 1px solid rgb(138 31 17 / 0.3);
    border-radius: 8px;
    background: rgb(255 239 235 / 0.9);
    padding: 14px;
  }

  .gift-card-recipient-form__errors ul {
    margin: 8px 0 0;
    padding-inline-start: 18px;
  }

  .cg-gift-card__product-form {
    display: block;
  }

  .cg-gift-card__purchase {
    display: grid;
    gap: 14px;
    align-items: center;
  }

  .cg-gift-card__selected-price {
    margin: 0;
    color: var(--cg-gift-ink);
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 800;
    text-align: center;
  }

  .cg-gift-card__atc {
    display: block;
    width: 100%;
  }

  .cg-gift-card__submit {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    border-radius: 14px;
  }

  .cg-gift-card__accelerated {
    display: grid;
    gap: 8px;
    margin-block-start: 4px;
  }

  .cg-gift-card__accelerated .shopify-payment-button__button {
    min-height: 48px;
  }

  .cg-gift-card__payment-icons {
    margin-block-start: 2px;
  }

  .cg-gift-card__payment-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--cg-gift-pay-align, center);
    gap: var(--cg-gift-pay-gap, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cg-gift-card__payment-item {
    display: flex;
    align-items: center;
  }

  .cg-gift-card__payment-item .icon {
    width: var(--cg-gift-pay-size, 38px);
    height: auto;
    border-radius: 4px;
  }

  .cg-gift-card__trust {
    display: grid;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    color: var(--cg-gift-ink);
    font-size: 0.9rem;
  }

  .cg-gift-card__trust li {
    padding-inline-start: 18px;
    position: relative;
  }

  .cg-gift-card__trust li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.58em;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--cg-gift-accent);
  }

  .cg-gift-card__terms {
    display: inline-flex;
    margin-block-start: 18px;
    color: var(--cg-gift-accent);
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
  }

  .cg-gift-card__faq {
    margin-block-start: clamp(24px, 4vw, 48px);
    padding: clamp(20px, 4vw, 36px);
  }

  .cg-gift-card__faq h2 {
    margin: 0 0 18px;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
  }

  .cg-gift-card__faq-list {
    display: grid;
    gap: 10px;
  }

  .cg-gift-card__faq-item {
    border-block-start: 1px solid transparent;
    border-image: linear-gradient(to right, rgb(26 20 16 / 0.12), rgb(26 20 16 / 0.28), rgb(26 20 16 / 0.12)) 1;
  }

  .cg-gift-card__faq-item summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--cg-gift-ink);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
  }

  .cg-gift-card__faq-item summary::-webkit-details-marker {
    display: none;
  }

  .cg-gift-card__faq-icon {
    width: 14px;
    height: 14px;
    position: relative;
    flex: 0 0 14px;
  }

  .cg-gift-card__faq-icon::before,
  .cg-gift-card__faq-icon::after {
    content: '';
    position: absolute;
    inset: 6px 0 auto;
    height: 2px;
    background: var(--cg-gift-accent);
  }

  .cg-gift-card__faq-icon::after {
    transform: rotate(90deg);
  }

  .cg-gift-card__faq-item[open] .cg-gift-card__faq-icon::after {
    display: none;
  }

  .cg-gift-card__faq-answer {
    padding-block-end: 16px;
    color: rgb(26 20 16 / 0.68);
    line-height: 1.6;
  }

  .cg-gift-card__faq-answer > *:first-child {
    margin-block-start: 0;
  }

  @media (max-width: 989px) {
    .cg-gift-card {
      padding-block: calc(var(--cg-gift-pad-t) * 0.75) calc(var(--cg-gift-pad-b) * 0.75);
      padding-inline: calc(var(--cg-gift-pad-l) * 0.75) calc(var(--cg-gift-pad-r) * 0.75);
    }

    .cg-gift-card__inner {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .cg-gift-card--image-right .cg-gift-card__media {
      order: 0;
    }

    .cg-gift-card__media {
      min-height: min(76vw, 460px);
    }
  }

  @media (min-width: 750px) {
    .cg-gift-card h1 {
      font-size: var(--cg-gift-heading-desktop);
    }
  }

  @media (min-width: 1200px) {
    .cg-gift-card h1 {
      font-size: var(--cg-gift-heading-wide);
    }
  }

  @media (max-width: 599px) {
    .cg-gift-card__inner {
      padding: 8px;
    }

    .cg-gift-card__content,
    .cg-gift-card__faq {
      padding: 18px;
    }
  }
/* END_SECTION:gift-card-product */

/* START_SECTION:header-announcements (INDEX:61) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

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

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition:
      opacity 0.5s ease-in-out,
      visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:62) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  .header {
    /* Set header paddings based on height setting */
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;
    --cg-header-divider-color: rgb(var(--color-foreground-rgb) / 0.12);
    --cg-header-transparent-ink-rgb: 26 20 16;
    --cg-header-transparent-text-shadow: 0 1px 10px rgb(var(--cg-header-transparent-ink-rgb) / 0.36);
    --cg-header-navbar-shadow:
      0 4px 10px -4px rgb(var(--color-foreground-rgb) / 0.16), 0 12px 24px -14px rgb(var(--color-foreground-rgb) / 0.12);

    display: block;
    contain: layout style;
    background: transparent;

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      /* reset style from base.css */
      transition:
        color var(--header-content-transition-timing),
        border-color var(--header-content-transition-timing);
    }
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);

    --closed-underlay-height: 0px;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: var(--layer-overlay);

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: var(--layer-lowest);
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(
        to bottom,
        rgb(var(--cg-header-transparent-ink-rgb) / 0.58) 0%,
        rgb(var(--cg-header-transparent-ink-rgb) / 0.32) 68%,
        rgb(var(--cg-header-transparent-ink-rgb) / 0) 100%
      );
      transition: opacity var(--animation-speed) var(--ease-out-cubic);
    }

    &[transparent='not-sticky'][data-sticky-state='active'] {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --closed-underlay-height: 100%;
    }

    &:not([data-sticky-state='active']):not(:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true'])):not(
        :has(.menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'])
      ):not(:has(.mega-menu__list:hover)) {
      &::before {
        opacity: 1;
      }
    }

    /** For transparent header, apply transparent text color to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true'])):not(
        :has(.menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'])
      ):not(:has(.mega-menu__list:hover))
      .header__row {
      --color-foreground: var(--color-transparent-text);
      --color-foreground-rgb: var(--color-transparent-text-rgb);
      --color-border: var(--color-transparent-text);
      --color-border-rgb: var(--color-transparent-text-rgb);
      --color-primary-button-background: var(--color-transparent-text);
      --color-primary-button-text: var(--color-transparent-text-contrast);
    }

    &:not([data-sticky-state='active']):not(:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true'])):not(
        :has(.menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'])
      ):not(:has(.mega-menu__list:hover))
      :is(.menu-list__link, .header-actions__action, .dropdown-localization__button, .header-logo) {
      text-shadow: var(--cg-header-transparent-text-shadow);
    }

    &:not([data-sticky-state='active']):not(:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true'])):not(
        :has(.menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'])
      ):not(:has(.mega-menu__list:hover))
      :is(.header-actions__action, .dropdown-localization__button, .header-logo__image) {
      filter: drop-shadow(0 1px 8px rgb(var(--cg-header-transparent-ink-rgb) / 0.34));
    }

    /* Swap the cart bubble in transparent state only when using the default
       style. Custom bubble colors apply unchanged across header states. */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(
        :has(.menu-list__link[aria-haspopup='true'][aria-expanded='true'])
      ):not(:has(.menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'])):not(
        :has(.mega-menu__list:hover)
      )
      .header__row {
      --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback));
      --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback));
    }

    /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true']),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true']) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-background='top']:has(.mega-menu__list:hover) .header__row--top,
  [data-transparent-background='top']:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true'])
    .header__row--top,
  [data-transparent-background='top']:has(.menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'])
    .header__row--top,
  [data-transparent-background='both']:has(.mega-menu__list:hover) .header__row--top,
  [data-transparent-background='both']:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true'])
    .header__row--top,
  [data-transparent-background='both']:has(
      .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true']
    )
    .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When bottom row has transparent background, make it inherit colors from header component */
  [data-transparent-background='bottom']:has(.mega-menu__list:hover) .header__row--bottom,
  [data-transparent-background='bottom']:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true'])
    .header__row--bottom,
  [data-transparent-background='bottom']:has(
      .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true']
    )
    .header__row--bottom,
  [data-transparent-background='both']:has(.mega-menu__list:hover) .header__row--bottom,
  [data-transparent-background='both']:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true'])
    .header__row--bottom,
  [data-transparent-background='both']:has(
      .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true']
    )
    .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header-section {
    position: relative;
    z-index: var(--layer-menu-drawer);
  }

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-menu-drawer);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  /* Pair the header across cross-document page navigations even before header.js
     sets data-sticky-state (absent at snapshot capture on a fresh page). Unnamed,
     the header flattens into the root snapshot and the main-content snapshot
     paints over the navbar box-shadow overhang below the header, so the shadow
     vanishes during the transition and pops back in when it finishes. A named
     header snapshot keeps its ink overflow (the shadow) rendered above
     main-content for the whole transition. */
  html:active-view-transition-type(page-navigation) .header {
    view-transition-name: sticky-header;
  }

  /* Harden stacking: keep the header snapshot above the main-content group
     instead of relying on capture paint order. */
  ::view-transition-group(sticky-header) {
    z-index: 1;
  }

  :active-view-transition-type(empty-cart-drawer) {
    .header[data-sticky-state='active'] {
      view-transition-name: none;
    }
  }

  .header[data-sticky-state='idle'] {
    opacity: 0;
  }

  /* ================================
     * Underlays
     * ================================ */
  .header__underlay {
    position: absolute;
    inset: 0;
  }

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-background-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-background-bottom-row) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    /* header-height is updated via js, the transition works automagically */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* When top row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='top']:has(.mega-menu__list:hover),
  [data-transparent-background='top']:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true']),
  [data-transparent-background='top']:has(
    .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true']
  ),
  [data-transparent-background='both']:has(.mega-menu__list:hover),
  [data-transparent-background='both']:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true']),
  [data-transparent-background='both']:has(
    .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true']
  ) {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='bottom']:has(.mega-menu__list:hover),
  [data-transparent-background='bottom']:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true']),
  [data-transparent-background='bottom']:has(
    .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true']
  ),
  [data-transparent-background='both']:has(.mega-menu__list:hover),
  [data-transparent-background='both']:has(.menu-list__link[aria-haspopup='true'][aria-expanded='true']),
  [data-transparent-background='both']:has(
    .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true']
  ) {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-background-top-row) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

    .header__row--bottom {
      z-index: var(--layer-lowest);
    }
  }

  /* End Underlays ================ */

  .header__row {
    /* The account component uses a different background color, but we need to override it to inherit the color of the header row */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite color from section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid
      var(--border-bottom-color, var(--cg-header-divider-color, var(--color-border)));
  }

  .header:not([transparent]) .header__row--bottom,
  .header:not([transparent]):not(:has(.header__row--bottom)):not(:has(.header__navigation-bar-row)) .header__row--top,
  .header:not([transparent]) .header__navigation-bar-row {
    box-shadow: var(--cg-header-navbar-shadow);
  }

  /* cookiegrips patch: while the header is in its transparent overlay state
     (page top, no submenu open) the row hairline reads as a stray line floating
     over the hero photo. Zero the border there; it returns as soon as the
     header goes solid (sticky reveal, submenu hover/open). The width vars are
     set INLINE per row, so this must override the physical longhand, and the
     id anchor keeps it above the drawer-mode #header-component border rules. */
  #header-component[transparent]:not([data-sticky-state='active']):not(
      :has(.menu-list__link[aria-haspopup='true'][aria-expanded='true'])
    ):not(:has(.menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'])):not(
      :has(.mega-menu__list:hover)
    )
    :is(.header__row, .header__row.divider--page-width .header__columns) {
    border-bottom-width: 0;
  }

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
      border-bottom-color: var(--border-bottom-color-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
    border-bottom-color: var(--border-bottom-color-mobile);
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 750px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    gap: var(--gap-xl);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header-logo {
        grid-area: center;
      }

      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }

      &:not(:has(shopify-account)) .search-action {
        grid-area: rightA;
      }

      .search-action {
        grid-area: leftB;
      }

      header-actions {
        grid-area: rightB;
      }
    }
  }

  /* not ideal but we need to duplicate these styles for when touch comes into play
    We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);

    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header-logo {
      grid-area: center;
    }

    &:not(:has(header-actions)) .search-action {
      grid-area: leftB;
    }

    &:not(:has(shopify-account)) .search-action {
      grid-area: rightA;
    }

    .search-action {
      grid-area: leftB;
    }

    header-actions {
      grid-area: rightB;
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
        Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .header__icon--menu {
    transition:
      opacity var(--animation-speed) var(--animation-easing),
      scale 0.14s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Grounded press compression on the simple icon triggers (cart, search,
     hamburger). EXCLUDES .account-button: it hosts the <shopify-account>
     sign-in modal, and :active matches an ancestor whenever any descendant is
     pressed, so without the exclusion clicking inside the modal would compress
     the account icon. */
  .header-actions__action:not(.account-button):active,
  .header__icon--menu:active {
    scale: 0.92;
  }

  .account-button [data-cg-account-press-target] {
    transform-origin: center;
    transition: scale 0.14s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .account-button[data-cg-account-pressing] [data-cg-account-press-target] {
    scale: 0.92;
  }

  @media (prefers-reduced-motion: reduce) {
    .header-actions__action:not(.account-button):active,
    .header__icon--menu:active,
    .account-button[data-cg-account-pressing] [data-cg-account-press-target] {
      scale: none;
    }
  }

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

    &:hover {
      --button-color: var(--color-foreground);
    }
  }

  .header-actions__action:not(.account-button) .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action:not(.account-button) svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

  /* When the header is transparent, add a margin to a potential header-section below it */
  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .svg-wrapper.icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.language-selector--top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:65) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(#header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-grid {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

  .hero__media {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .hero__media-wrapper--desktop {
      display: none;
    }

    .hero__media-wrapper--mobile {
      display: block;
    }

    .hero__media-grid {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-grid,
  .hero__content-wrapper {
    pointer-events: none;

    :is(a, button, input, textarea, select, details, summary) {
      pointer-events: auto;
    }
  }

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

    @media screen and (min-width: 750px) {
      display: block;
    }
  }

  .hero__blurred-image--mobile {
    display: block;

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

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX:66) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition:
        opacity 0.48s,
        transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:67) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:69) */
.cg-article {
    color: var(--cg-art-ink);
    position: relative;
    isolation: isolate;
  }

  .cg-article .cg-article__inner {
    max-width: 920px;
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2.25rem);
    padding-block: clamp(2rem, 5vw, 4rem);
  }

  /* Header block */
  .cg-article .cg-article__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2.25rem;
    text-align: left;
  }

  @media (min-width: 768px) {
    .cg-article .cg-article__header {
      gap: 1.15rem;
      margin-bottom: 3rem;
    }
  }

  /* Eyebrow kicker linking back to the parent blog index */
  .cg-article .cg-article__kicker {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: clamp(0.625rem, 2.9vw, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0;
    max-width: 100%;
  }

  .cg-article .cg-article__kicker a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
    color: var(--cg-art-accent);
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid color-mix(in oklch, var(--cg-art-accent) 45%, transparent);
    transition:
      color 0.3s ease,
      border-color 0.3s ease;
  }

  .cg-article .cg-article__kicker a:hover,
  .cg-article .cg-article__kicker a:focus-visible {
    color: color-mix(in oklch, var(--cg-art-accent) 70%, var(--cg-art-ink));
    border-bottom-color: color-mix(in oklch, var(--cg-art-accent) 75%, transparent);
  }

  /* Title — magazine masthead */
  .cg-article .cg-article__title {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: clamp(2rem, 5.4vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.032em;
    text-wrap: balance;
    color: var(--cg-art-ink);
  }

  /* Meta details (date · author) — mono uppercase, accent separator */
  .cg-article .cg-article__meta {
    display: flex;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: color-mix(in oklch, var(--cg-art-ink) 60%, transparent);
    gap: 0.6rem;
    flex-wrap: wrap;
  }

  .cg-article .cg-article__meta-sep {
    color: var(--cg-art-accent);
  }

  /* Featured image — bezel wrapper for editorial polish */
  .cg-article .cg-article__media {
    margin-block: 0.5rem 2rem;
    border-radius: 1.5rem;
    overflow: hidden;
    background: color-mix(in oklch, var(--cg-art-ink) 4%, var(--cg-art-card));
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 50%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-art-ink) 6%, transparent) inset,
      0 24px 48px -28px color-mix(in oklch, var(--cg-art-ink) 16%, transparent);
  }

  .cg-article .cg-article__image {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Content card — double-bezel mirror of cg-page */
  .cg-article .cg-article__shell {
    position: relative;
    background: color-mix(in oklch, var(--cg-art-ink) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--cg-art-ink) 7%, transparent);
    padding: 6px;
    border-radius: 1.75rem;
    margin-inline: auto;
    width: 100%;
    overflow: hidden;
  }

  .cg-article .cg-article__core {
    background: var(--cg-art-card);
    border-radius: calc(1.75rem - 6px);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    overflow: hidden;
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-art-ink) 4%, transparent) inset;
  }

  .cg-article .cg-article__core > *:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }

  .cg-article .cg-article__core > *:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }

  /* RTE content overrides — match cg-page typography */
  .cg-article .blog-post-content {
    max-width: 68ch;
    margin: 0 auto;
    font-family: var(--font-body--family, inherit);
    color: color-mix(in oklch, var(--cg-art-ink) 88%, transparent);
    font-size: 1.05rem;
    line-height: 1.75;
    letter-spacing: -0.003em;
  }

  .cg-article .blog-post-content rte-formatter {
    display: block;
  }

  .cg-article .blog-post-content p {
    margin: 0 0 1.15em;
    text-wrap: pretty;
  }

  .cg-article .blog-post-content p:last-child {
    margin-bottom: 0;
  }

  .cg-article .blog-post-content h2 {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-size: clamp(1.5rem, 2.2vw, 1.95rem);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.2;
    color: var(--cg-art-ink);
    margin: 2.2rem 0 0.75rem;
    text-wrap: balance;
  }

  .cg-article .blog-post-content h3 {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.25;
    color: var(--cg-art-ink);
    margin: 1.6rem 0 0.5rem;
    text-wrap: balance;
  }

  .cg-article .blog-post-content :is(h4, h5, h6) {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    color: var(--cg-art-ink);
    margin: 1.4rem 0 0.4rem;
    letter-spacing: -0.008em;
  }

  .cg-article .blog-post-content a {
    color: var(--cg-art-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition:
      color 0.3s ease,
      text-decoration-thickness 0.3s ease;
  }

  .cg-article .blog-post-content a:hover,
  .cg-article .blog-post-content a:focus-visible {
    color: color-mix(in oklch, var(--cg-art-accent) 70%, var(--cg-art-ink));
    text-decoration-thickness: 2px;
  }

  .cg-article .blog-post-content a:focus-visible {
    outline: 2px solid var(--cg-art-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .cg-article .blog-post-content strong {
    color: var(--cg-art-ink);
    font-weight: 600;
  }

  .cg-article .blog-post-content em {
    font-style: italic;
  }

  .cg-article .blog-post-content :is(ul, ol) {
    padding-left: 1.4rem;
    margin: 0 0 1.15em;
  }

  .cg-article .blog-post-content li {
    margin-bottom: 0.4em;
  }

  .cg-article .blog-post-content li::marker {
    color: var(--cg-art-accent);
  }

  .cg-article .blog-post-content blockquote {
    border-left: 3px solid var(--cg-art-accent);
    padding: 0.25rem 0 0.25rem 1.1rem;
    margin: 1.6rem 0;
    font-family: var(--font-body--family, 'Montserrat', sans-serif);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: color-mix(in oklch, var(--cg-art-ink) 92%, transparent);
    font-style: italic;
    text-wrap: pretty;
  }

  .cg-article .blog-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 1.6rem 0;
    display: block;
  }

  .cg-article .blog-post-content figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 1.6rem auto;
  }

  .cg-article .blog-post-content figure img {
    margin: 0;
  }

  .cg-article .blog-post-content figcaption {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-align: center;
    color: color-mix(in oklch, var(--cg-art-ink) 60%, transparent);
  }

  .cg-article .blog-post-content hr {
    border: none;
    border-top: 1px solid color-mix(in oklch, var(--cg-art-ink) 10%, transparent);
    margin: 2rem 0;
  }

  .cg-article .blog-post-content code {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.92em;
    background: color-mix(in oklch, var(--cg-art-ink) 6%, transparent);
    padding: 0.12em 0.4em;
    border-radius: 4px;
  }

  /* Comments — keep editorial palette */
  .cg-article .blog-post-comments-container {
    max-width: 68ch;
    margin: 3.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid color-mix(in oklch, var(--cg-art-ink) 10%, transparent);
  }

  .cg-article .blog-post-comments-container .h3 {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    color: var(--cg-art-ink);
    font-weight: 600;
    letter-spacing: -0.012em;
    margin-bottom: 1.25rem;
  }

  .cg-article .blog-post-comment {
    background: var(--cg-art-card);
    border: 1px solid color-mix(in oklch, var(--cg-art-ink) 6%, transparent);
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    color: color-mix(in oklch, var(--cg-art-ink) 85%, transparent);
  }

  .cg-article .blog-post-comment__author {
    color: color-mix(in oklch, var(--cg-art-ink) 55%, transparent);
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
  }

  .cg-article .blog-post-comments-pagination,
  .cg-article .blog-post-comments-pagination a {
    color: var(--cg-art-ink);
  }

  /* Mobile padding compression */
  @media (max-width: 749px) {
    .cg-article .cg-article__core {
      padding: clamp(1.1rem, 5vw, 1.6rem);
    }
    .cg-article .cg-article__header {
      gap: 0.7rem;
      margin-bottom: 1.75rem;
    }
    .cg-article .cg-article__title {
      font-size: clamp(1.6rem, 7.4vw, 2.25rem);
      line-height: 1.08;
      letter-spacing: -0.02em;
    }
    .cg-article .cg-article__media {
      margin-block: 0 1.5rem;
    }
  }

  .blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:70) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .blog-post-item {
    grid-column: span var(--col-span);
  }

  /* ============================================================
     CG editorial blog cards.
     Scoped under .cg-blog-grid. Mirrors cg-collection-grid palette
     (cream surface, burnt-sienna accent, display title) in a single-
     surface editorial structure: image edge-to-edge top, mono eyebrow
     date, balanced title, 3-line excerpt, read-more arrow. The uniform
     3-up grid intentionally overrides Horizon 4.0's count-based
     hero/standard/compact layout so every article reads as one card.
     ============================================================ */
  .cg-blog-grid__grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    pointer-events: none;
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
    background-size: 220px 220px;
    mix-blend-mode: multiply;
    z-index: 0;
  }

  .cg-blog-grid {
    background: var(--cg-blog-bg);
    position: relative;
    isolation: isolate;
  }

  /* Uniform editorial grid: every article is the same card (no featured hero
     row). 3-up desktop, 2-up tablet, 1-up mobile. Overrides the base
     6-col + `grid-column: span var(--col-span)` system. */
  .cg-blog-grid .blog-posts-container {
    grid-template-columns: repeat(3, 1fr);
  }

  .cg-blog-grid .blog-post-item {
    grid-column: auto;
    --blog-post-card-scale: 1;
    background-color: transparent;
    border: none;
    padding: 0;
  }

  @media (max-width: 989px) {
    .cg-blog-grid .blog-posts-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 749px) {
    .cg-blog-grid .blog-posts-container {
      grid-template-columns: 1fr;
    }
  }

  /* Editorial header: cg-head animated title over a full-width hairline
     separator (no accent rule per owner preference for the blog index). */
  .cg-blog-grid__header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding-block-start: var(--cg-blog-header-pt, 32px);
    padding-block-end: var(--cg-blog-header-pb, 24px);
    margin-block-end: 2rem;
  }

  @media (min-width: 768px) {
    .cg-blog-grid__header {
      gap: 0.9rem;
      margin-block-end: 2.5rem;
    }
  }

  @media (max-width: 749px) {
    .cg-blog-grid__header {
      gap: 0.7rem;
      padding-block-start: calc(var(--cg-blog-header-pt, 32px) * 0.6);
      padding-block-end: calc(var(--cg-blog-header-pb, 24px) * 0.7);
      margin-block-end: 1.5rem;
    }
  }

  /* Title h1 typography. cg-head renders the heading via the heading_class
     hook; the --cg-blog-h-scale custom property is driven by the schema's
     `heading_size` range so merchants can tune the size from the editor. */
  .cg-blog-grid__header .cg-blog-grid__title {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: calc(clamp(1.5rem, 3.4vw, 2.6rem) * var(--cg-blog-h-scale, 1));
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--cg-blog-ink);
    margin: 0;
    text-align: left;
    max-width: none;
    width: 100%;
  }

  @media (max-width: 749px) {
    .cg-blog-grid__header .cg-blog-grid__title {
      font-size: calc(clamp(1.25rem, 6vw, 1.8rem) * var(--cg-blog-h-scale, 1));
      line-height: 1.15;
    }
  }

  /* Nested bezel-and-core card structure for blog items */
  .cg-blog-grid .blog-post-item,
  .cg-blog-grid .blog-post-item:has(.blog-post-card__image-container) {
    border: 1px solid color-mix(in oklch, var(--cg-blog-ink) 7%, transparent);
    border-radius: var(--cg-surface-radius, 8px);
    padding: clamp(0.375rem, 1vw, 0.5rem);
    background: transparent;
    transition:
      transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      border-color 0.45s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .cg-blog-grid .blog-post-card {
    position: relative;
    height: 100%;
    background: var(--cg-blog-card);
    border: none;
    border-radius: max(2px, calc(var(--cg-surface-radius, 8px) - clamp(0.375rem, 1vw, 0.5rem)));
    overflow: hidden;
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-blog-ink) 4%, transparent) inset;
  }

  /* Make the whole card clickable: the title link spreads an ::after across
     the entire card. The visual "Read article" CTA is a pseudo (can't carry an
     href), so the title link covers the whole card surface instead. */
  .cg-blog-grid .blog-post-card__content > a {
    position: static;
  }

  .cg-blog-grid .blog-post-card__content > a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .cg-blog-grid .blog-post-card__image-container a {
    z-index: 1;
  }

  .cg-blog-grid .blog-post-item:hover {
    transform: translateY(-6px);
    border-color: color-mix(in oklch, var(--cg-blog-accent) 45%, transparent);
    box-shadow: 0 10px 24px -20px color-mix(in oklch, var(--cg-blog-ink) 22%, transparent);
  }

  /* Image: uniform fixed-ratio box across every card so the 3-up grid reads as
     a clean matrix. The container owns the 3:2 box; the inner <a> and <img>
     fill it and `object-fit: cover` crops to fill (overriding Horizon's
     height-based image sizing). */
  .cg-blog-grid .blog-post-card__image-container {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: color-mix(in oklch, var(--cg-blog-ink) 3%, var(--cg-blog-card));
  }

  .cg-blog-grid .blog-post-card__image-container a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .cg-blog-grid .blog-post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .cg-blog-grid .blog-post-item:hover .blog-post-card__image {
    transform: scale(1.045);
  }

  /* Content area: flex column so the read-more can pin to the bottom */
  .cg-blog-grid .blog-post-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-block-start: var(--cg-blog-pad-block-start, 22px);
    padding-block-end: var(--cg-blog-pad-block-end, 26px);
    padding-inline-start: var(--cg-blog-pad-inline-start, 24px);
    padding-inline-end: var(--cg-blog-pad-inline-end, 24px);
    gap: 0.55rem;
  }

  @media screen and (max-width: 749px) {
    .cg-blog-grid .blog-post-card__content {
      padding-block-start: calc(var(--cg-blog-pad-block-start, 22px) * 0.8);
      padding-block-end: calc(var(--cg-blog-pad-block-end, 26px) * 0.8);
      padding-inline-start: calc(var(--cg-blog-pad-inline-start, 24px) * 0.85);
      padding-inline-end: calc(var(--cg-blog-pad-inline-end, 24px) * 0.85);
    }
  }

  /* Date eyebrow: mono uppercase tracked, no leading dot. */
  .cg-blog-grid .blog-post-details {
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--cg-blog-accent);
    margin: 0;
    padding: 0 !important;
    align-items: center;
    gap: 0.55rem;
    white-space: normal;
  }

  /* Title link wrapper */
  .cg-blog-grid .blog-post-card__content > a {
    display: block;
    padding: 0;
    color: var(--cg-blog-ink);
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .cg-blog-grid .blog-post-card__content > a:hover {
    color: color-mix(in oklch, var(--cg-blog-ink) 78%, var(--cg-blog-accent));
  }

  /* Title typography (heading rendered inside the link via the _heading block) */
  .cg-blog-grid .blog-post-card__content > a > * {
    font-family: var(--font-heading--family, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.5vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0;
    color: inherit;
  }

  /* Description: 3-line clamp, soft body color */
  .cg-blog-grid .blog-post-card__content-text {
    font-family: var(--font-body--family, inherit);
    color: color-mix(in oklch, var(--cg-blog-ink) 75%, transparent);
    font-size: 0.95rem;
    line-height: 1.55;
    letter-spacing: -0.005em;
    margin: 0;
    padding: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Suppress Horizon's inline `Read more` anchor rendered inside the description
     (_blog-post-card hard-codes show_read_more: true). The ::after pseudo below
     is the canonical CTA, so the inline link is redundant and misaligns with the
     card content (it floats wherever the 3-line clamp truncates). */
  .cg-blog-grid .blog-post-card__content-text a {
    display: none;
  }

  /* Read-article CTA pinned to the bottom of the content column. Mono uppercase
     tracked to match the date eyebrow. A short accent tick sits under the label
     at rest and sweeps to full width on card hover. `margin-top: auto` works
     because .blog-post-card__content is a flex column with `flex: 1`.
     `align-self` is derived from the card's `--text-align` setting. */
  .cg-blog-grid .blog-post-card__content::after {
    content: 'Read article';
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    margin-inline: 0;
    padding-block: 1.25rem 0.18rem;
    padding-inline: 0;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--cg-blog-accent);
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 22px 1.25px;
    transition:
      background-size 0.55s cubic-bezier(0.32, 0.72, 0, 1),
      color 0.3s ease;
    /* Pseudo can't be a real link. pointer-events: none lets the title-link's
       full-card overlay receives the click instead of this visual marker. */
    pointer-events: none;
  }

  .cg-blog-grid .blog-post-card[style*='--text-align: center'] .blog-post-card__content::after {
    align-self: center;
  }

  .cg-blog-grid .blog-post-card[style*='--text-align: right'] .blog-post-card__content::after {
    align-self: flex-end;
  }

  .cg-blog-grid .blog-post-item:hover .blog-post-card__content::after {
    background-size: 100% 1.25px;
    color: color-mix(in oklch, var(--cg-blog-accent) 88%, var(--cg-blog-ink));
  }

  @media (prefers-reduced-motion: reduce) {
    /* Card cascade reveal is owned by main.js (staggered opacity fade on
       .motion-item). Drop transforms (card lift, image scale) but keep the
       non-transform transitions tweening; image gets a brightness fade in
       place of the lost scale (tonal lift, within reduced-motion guidance). */
    .cg-blog-grid .blog-post-card__image {
      transition: filter 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .cg-blog-grid .blog-post-item:hover {
      transform: none;
    }
    .cg-blog-grid .blog-post-item:hover .blog-post-card__image {
      transform: none;
      filter: brightness(1.04);
    }
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:71) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  /* cg: cart-page upsell module (re-applied after Horizon 4.0.0). */
  .cart-page__recommendations {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    /* cg: upsell sits at the bottom of the left (items) column, not stretched
       into the flexible 1fr row, so it reads as a module that follows the
       items (re-applied after Horizon 4.0.0). */
    .cart-page__recommendations {
      grid-column: 1;
      align-self: start;
    }

    .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:marquee (INDEX:76) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:77) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

      @media screen and (min-width: 750px) {
        padding-block: var(--page-margin);
      }
    }

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password-footer (INDEX:79) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password (INDEX:80) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:product-hero (INDEX:83) */
.product-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding-block: var(--cg-ph-pt, 32px) var(--cg-ph-pb, 32px);
    padding-inline: var(--cg-ph-pl, 32px) var(--cg-ph-pr, 32px);
  }

  /* Portrait viewports (tall + narrow): 60vh reserves most of a tall screen, so
     the centered card floats in a large empty gap (three stacked heroes on the
     homepage compound it). Cap the floor to content height in portrait; landscape
     keeps the designed 60vh. min() only ever shrinks, never grows. */
  @media (orientation: portrait) {
    .product-hero {
      min-height: min(60vh, 30rem);
    }
  }

  @media screen and (max-width: 749px) {
    .product-hero {
      padding-block: calc(var(--cg-ph-pt, 32px) * 0.75) calc(var(--cg-ph-pb, 32px) * 0.75);
      padding-inline: calc(var(--cg-ph-pl, 32px) * 0.75) calc(var(--cg-ph-pr, 32px) * 0.75);
    }
  }

  .ph__wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
  }

  .ph__image-col {
    position: relative;
    display: block;
    width: 100%;
    max-width: 40rem;
    overflow: hidden;
    border-radius: 1.5rem;
    box-shadow:
      0 0 24px -8px color-mix(in oklch, currentColor 12%, transparent),
      0 0 48px -16px rgb(0 0 0 / 8%);
    transition: box-shadow 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .ph__image {
    display: block;
    width: 100%;
    height: auto;
  }

  .ph__image-hover {
    /* Absolutely positioned over the natural box of the primary image. */
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ph__image-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .ph__image-col:hover {
    box-shadow:
      0 0 12px -4px color-mix(in oklch, currentColor 8%, transparent),
      0 0 24px -8px rgb(0 0 0 / 5%);
  }

  .ph__image-col:hover .ph__image-hover,
  .ph__image-col:focus-visible .ph__image-hover {
    opacity: 1;
  }

  /* Guarantee a visible keyboard focus ring even if a global reset strips the
     UA outline (the link wraps the product photo, WCAG 2.4.7). */
  .ph__image-col:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  .ph__content-col {
    width: 100%;
    max-width: 40rem;
    text-align: center;
  }

  @media screen and (min-width: 1024px) {
    .ph__wrap {
      flex-direction: row;
      align-items: center;
    }

    .ph__wrap--right {
      flex-direction: row-reverse;
    }

    .ph__image-col {
      flex: 0.7 1 0%;
      max-width: 36rem;
    }

    .ph__content-col {
      flex: 1 1 0%;
      max-width: none;
    }

    .ph__content-col {
      padding: 1.5rem;
    }

    .ph__wrap--left .ph__content-col {
      text-align: left;
    }

    .ph__wrap--right .ph__content-col {
      text-align: right;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Reveal is owned by frontend/entrypoints/main.js — it staggers the
       .motion-item / .opacity-0 elements via WAAPI opacity fade. Don't force
       opacity: 1 here or the first paint flashes before the fade kicks in.

       Hover: cross-fade opacity + shadow expansion are both within reduced-motion guidance. */
  }
/* END_SECTION:product-hero */

/* START_SECTION:product-hotspots (INDEX:84) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition:
      border-color 0.2s ease-out,
      box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition:
      width 0.1s ease-out,
      height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition:
      width 0.1s ease-out,
      height 0.1s ease-out,
      background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition:
        width 0.2s ease-out,
        height 0.2s ease-out,
        background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

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

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition:
      opacity 0.22s ease-out,
      translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button.add-to-cart-button {
      width: calc(var(--button-size-md) - 8px);
      position: relative;
      padding-block: 0;
      padding-inline-end: var(--padding-sm);
      justify-self: flex-end;
      height: fit-content;
      border: none;
      color: var(--quick-add-foreground, var(--color-foreground));
      background-color: var(--quick-add-background, var(--color-background));
      pointer-events: all;
      opacity: 1;
      overflow: hidden;
      outline: 2px solid transparent;

      @media (prefers-reduced-motion: no-preference) {
        transition: width var(--animation-speed) var(--ease-out-cubic),
          outline-color var(--animation-speed) var(--ease-out-cubic) var(--animation-speed-slow);
      }

      &:is(:hover, :active) {
        outline-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
      }

      &:focus-visible {
        outline-color: currentcolor;
        transition-delay: 0s;
      }
    }

    .quick-add__button.add-to-cart-button[data-added='true'] {
      color: transparent;
    }
  }

  @media screen and (min-width: 750px) {
    .hotspot-dialog {
      .quick-add__button:is(:hover, :focus-visible) {
        width: max-content;
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:85) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    /* Off-screen + opacity:0 does NOT remove the bar from the tab order or the
       accessibility tree, so the hidden ATC button, title, and price were
       reachable by keyboard and read by screen readers before the bar ever
       slid in. visibility:hidden pulls it from both; it flips back visible when
       stuck, and transitions discretely so it stays visible through the exit
       slide (see the transition-property list below). */
    visibility: hidden;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display, visibility;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
    visibility: visible;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

  .sticky-add-to-cart__info[data-has-image='false'] {
    padding-left: var(--padding-lg);
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-paragraph--line-height);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
  }

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }

    .sticky-add-to-cart__info[data-has-image='false'] {
      padding-left: 0;
    }

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

    .sticky-add-to-cart__button {
      width: var(--height-buy-buttons);
    }

    sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
      display: initial;
    }

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:quick-order-list (INDEX:88) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

  .variant-item__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:slideshow (INDEX:93) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* START_SECTION:slydrs-hero (INDEX:94) */
.glass-hero-img-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
  }

  .glass-hero-img-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .glass-hero-img-wrapper:hover .glass-hero-img-hover {
    opacity: 1;
  }

  .glass-hero-img-wrapper:hover .glass-hero-img-primary {
    transform: scale(1.03);
    transition: transform 0.5s ease-out;
  }

  @media (prefers-reduced-motion: reduce) {
    .slydrs-hero,
    .slydrs-hero .opacity-0,
    .slydrs-hero .motion-item {
      opacity: 1 !important;
      transform: none !important;
    }
  }
/* END_SECTION:slydrs-hero */

/* CSS from block stylesheet tags */
/* START_BLOCK:_announcement (INDEX:97) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:98) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

    &:hover {
      color: var(--color-foreground-subdued);
    }
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:99) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:100) */
.blog-post-card__content-text a {
    color: currentcolor;
  }

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:101) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    position: relative;
    display: block;
    width: var(--width);
    margin-inline: auto;
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:102) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:103) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:105) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:106) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:107) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:108) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(#header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    @media screen and (min-width: 750px) {
      height: 100%;
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:109) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--style-border-radius-50);
    aspect-ratio: auto;
    padding: 0;
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
    padding: 0;
  }

  /* cg: burnt-sienna count bubble + cream text (re-applied after Horizon 4.0.0).
     Do NOT add text-align / translateY / tabular-nums / width overrides to
     .cart-bubble__text: the base flex centering is the only cross-browser-stable one. */
  .cart-title .cart-bubble .cart-bubble__background {
    background-color: #8a3a12;
  }

  .cart-title .cart-bubble__text {
    color: #fbf7ef;
    font-family: var(--font-body--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:112) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:114) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_comparison-ratings (INDEX:116) */
.cg-ratings {
    display: flex;
    flex-direction: column;
    gap: var(--cg-ratings-stack-gap, 8px);
    width: 100%;
  }

  .cg-ratings__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cg-ratings-row-gap, 8px);
  }

  .cg-ratings--column .cg-ratings__row {
    flex-direction: column;
    align-items: var(--cg-ratings-stars-align, center);
  }

  .cg-ratings--row .cg-ratings__row {
    flex-direction: row;
    justify-content: space-between;
  }

  .cg-ratings--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: var(--cg-ratings-stars-align, center);
    column-gap: var(--cg-ratings-row-gap, 8px);
  }

  .cg-ratings--horizontal .cg-ratings__row {
    flex-direction: column;
    align-items: var(--cg-ratings-stars-align, center);
    flex: 0 1 auto;
  }

  .cg-ratings__label {
    color: var(--cg-ratings-label-color, currentColor);
    font-size: var(--cg-ratings-label-size, 1rem);
    text-align: var(--cg-ratings-label-align, center);
    white-space: nowrap;
  }

  .cg-ratings--column .cg-ratings__label {
    align-self: var(--cg-ratings-label-align, center);
  }

  .cg-ratings__stars {
    display: flex;
    align-items: center;
    gap: var(--cg-ratings-star-gap, 4px);
    align-self: var(--cg-ratings-stars-align, center);
  }

  .cg-ratings__star {
    display: inline-block;
    width: var(--cg-ratings-star-size, 12px);
    height: var(--cg-ratings-star-size, 12px);
    border: 1px solid var(--cg-ratings-star-filled, #000);
    border-radius: 9999px;
    background-color: var(--cg-ratings-star-empty, transparent);
    pointer-events: none;
  }

  .cg-ratings__star--filled {
    background-color: var(--cg-ratings-star-filled, #000);
    border-color: var(--cg-ratings-star-filled, #000);
  }

  .cg-ratings__thickness {
    display: flex;
    align-items: center;
    justify-content: var(--cg-ratings-thickness-justify, center);
    gap: var(--cg-ratings-thickness-gap, 8px);
    margin-block-start: var(--cg-ratings-thickness-margin, 0px);
    font-weight: 700;
    color: var(--cg-ratings-label-color, currentColor);
  }

  .cg-ratings--horizontal .cg-ratings__thickness {
    flex-basis: 100%;
  }
/* END_BLOCK:_comparison-ratings */

/* START_BLOCK:_featured-blog-posts-card (INDEX:120) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;

      flex-shrink: 0;
      height: auto;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    gap: var(--gap);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:121) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:123) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:126) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:127) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:128) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 0;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:129) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;

      /* Vertical rhythm comes from the 44px link min-height below, not li padding,
         so the bar stays compact while the touch target is met */
      padding-block: 0;
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);

      /* a11y: keep the scrollable nav-bar links at a 44px touch target.
         Column flex so the bold-ghost ::after stacks under the label. */
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: var(--minimum-touch-target);
    }

    /* Hidden bold ghost reserves the bold width so the scroll row never
       shifts when one link is current (same recipe as the desktop menu) */
    & a::after {
      content: attr(data-text);
      font-weight: 600;
      height: 0;
      visibility: hidden;
      overflow: hidden;
      pointer-events: none;
      user-select: none;
    }

    /* Current page: weight only, no decoration */
    & a[aria-current='page'] {
      font-weight: 600;
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  /* Typographic current-page treatment: the active link simply carries more
     weight (no underline, dot, or hover chrome; hover hierarchy stays
     Horizon's color subdue). The hidden bold ghost below reserves the bold
     width up front so siblings never shift when a link is current. */
  .menu-list__link-title {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }

  .menu-list__link-title::after {
    content: attr(data-text);
    font-weight: 700;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
  }

  .menu-list__link--active .menu-list__link-title {
    font-weight: 700;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item[slot='more']:has(.menu-list__link[aria-expanded='true'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item:is([slot='more'], [slot='overflow']) .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  /* Current page keeps full ink even while a sibling is hovered. The stock
     restore above only un-dims the active link when NOTHING is hovered, so
     hovering another link would fade our bolded current-page link. Higher
     specificity than the subdue rule so it wins in the hovered state too. */
  .menu-list .menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.background-matches-parent,
    .overflow-menu.background-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:132) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

      @media screen and (min-width: 750px) {
        max-width: var(--image-height);
      }
    }

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:136) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_ph-badge (INDEX:138) */
.ph-badge {
    display: inline-block;
    padding: 0 0 0.2rem;
    border-bottom: 1px solid color-mix(in oklch, var(--ph-badge-color) 50%, transparent);
    color: var(--ph-badge-color);
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, monospace);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 1.25rem;
  }
/* END_BLOCK:_ph-badge */

/* START_BLOCK:_ph-cta (INDEX:139) */
.ph-cta {
    margin-top: 2rem;
  }

  .ph-cta__price {
    font-size: 1.5rem;
    font-weight: 700;
  }

  .ph-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    /* a11y: keep the tap target >= 44px tall even at small merchant padding. */
    min-height: 44px;
    background: var(--ph-cta-bg, #000);
    color: var(--ph-cta-fg, #fff);
    /* Transparent rest border so the hover border-color swap does not shift layout.
       Mirrors `cg-hero-bg__cta-primary` recipe. */
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #fff 12%, transparent),
      0 8px 24px -12px color-mix(in oklch, var(--ph-cta-bg, #000) 58%, transparent);
    /* Independent `translate` / `scale` so Motion's reveal `commitStyles` writing
       inline `transform: translateY(0)` on `.motion-item` does not stomp these. */
    translate: 0 0;
    scale: 1;
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      filter 0.2s ease,
      translate 0.3s cubic-bezier(0.32, 0.72, 0, 1),
      scale 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .ph-cta__btn:hover {
    border-color: color-mix(in oklch, var(--ph-cta-fg, #fff) 60%, transparent);
    box-shadow:
      inset 0 1px 0 0 color-mix(in oklch, #fff 22%, transparent),
      0 14px 30px -14px color-mix(in oklch, var(--ph-cta-fg, #fff) 42%, transparent);
    filter: brightness(1.05);
  }

  .ph-cta__btn:active {
    scale: 0.96;
  }

  .ph-cta__btn:focus-visible {
    outline: 2px solid color-mix(in oklch, var(--ph-cta-fg, #fff) 70%, transparent);
    outline-offset: 3px;
  }
/* END_BLOCK:_ph-cta */

/* START_BLOCK:_ph-description (INDEX:140) */
.ph-description {
    margin: 0;
    padding: 1.5rem 0;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
  }
/* END_BLOCK:_ph-description */

/* START_BLOCK:_ph-heading (INDEX:141) */
.ph-heading {
    margin: 0;
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    font-weight: 600;
    line-height: 1.1;
    text-wrap: balance;
    color: black;
  }

  .ph-heading__link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: filter 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .ph-heading__link:hover {
    filter: brightness(0.75);
  }

  /* Keyboard focus ring: the title is a block link, so guarantee a visible
     indicator independent of any global outline reset (WCAG 2.4.7). */
  .ph-heading__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 4px;
  }
/* END_BLOCK:_ph-heading */

/* START_BLOCK:_ph-ratings (INDEX:142) */
.comparison-ratings {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    align-items: center;
    row-gap: 0.25rem;
    column-gap: 0.375rem;
    justify-content: center;
  }

  .comparison-ratings__row {
    display: contents;
  }
  .comparison-ratings__label {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    color: #000;
  }

  .comparison-ratings__colon {
    justify-self: center;
    color: #000;
  }

  .comparison-ratings__stars,
  .comparison-ratings__value {
    justify-self: start;
  }

  .comparison-ratings__stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .comparison-ratings__dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border: 1px solid #000;
    border-radius: 9999px;
    background: transparent;
    pointer-events: none;
  }

  .comparison-ratings__dot--filled {
    background: #0a0a0a;
    border-color: #0a0a0a;
  }

  /* Forced colors (WHCM): filled vs empty is conveyed by background only, which
     the OS overrides. Repaint with system color keywords so a filled dot stays a
     solid fill and an empty dot stays an outline. (sr-only score covers AT.) */
  @media (forced-colors: active) {
    .comparison-ratings__dot {
      background: Canvas;
      border-color: CanvasText;
    }

    .comparison-ratings__dot--filled {
      background: CanvasText;
      border-color: CanvasText;
    }
  }

  .comparison-ratings__value {
    font-weight: 700;
    color: #000;
  }

  .ph-ratings {
    display: flex;
    justify-content: center;
  }

  @media screen and (min-width: 1024px) {
    .ph-ratings--left {
      justify-content: flex-start;
    }

    .ph-ratings--center {
      justify-content: center;
    }

    .ph-ratings--right {
      justify-content: flex-end;
    }
  }
/* END_BLOCK:_ph-ratings */

/* START_BLOCK:_product-details (INDEX:146) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }

  /* Product description. Rendered by the description_aEtTtq custom-liquid block
     as a div.cg-description wrapping the product description. custom-liquid
     blocks emit a bare div with no spacing-style support, so alignment and
     typography are owned here (the old .cg-pdp-shell normalizer was dropped in
     the post-4.0 layout refactor). */
  .product-details .cg-description {
    /* Match the rail's 27px inline edge (product title, variant picker, buy buttons). */
    --cg-desc-accent: #8a3a12;
    --cg-desc-accent-strong: #6f2e0e;
    padding-inline: 27px;
    /* Defensive measure cap. The rail already holds copy near ~60ch; this only
       bites if the block is reused outside the rail. */
    max-inline-size: 68ch;
    color: color-mix(in oklch, var(--color-foreground) 88%, transparent);
    font-family: var(--font-body--family);
    font-size: 1rem;
    line-height: 1.65;
    text-wrap: pretty;
  }

  .product-details .cg-description > :first-child {
    margin-block-start: 0;
  }

  .product-details .cg-description > :last-child {
    margin-block-end: 0;
  }

  .product-details .cg-description p {
    margin-block: 0 1.1em;
  }

  /* Headings own their own rhythm + scale so descriptions can drop the teammate's
     empty <p> </p> spacer paragraphs and inline heading margins/sizes and rely on
     this CSS. Without an explicit font-size, h2/h3 inherit the body 1rem and read
     flat, so set the scale here. */
  .product-details .cg-description :is(h2, h3, h4) {
    margin-block: 1.6em 0.6em;
    font-family: var(--font-heading--family);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--color-foreground);
  }

  .product-details .cg-description h2 {
    font-size: 1.35rem;
  }

  .product-details .cg-description h3 {
    font-size: 1.15rem;
  }

  .product-details .cg-description strong {
    font-weight: 600;
    color: var(--color-foreground);
  }

  .product-details .cg-description a {
    color: var(--cg-desc-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .product-details .cg-description a:hover {
    color: var(--cg-desc-accent-strong);
  }

  /* Tailwind/DaisyUI Preflight resets ol/ul to list-style: none globally, so
     restore real markers here or the description bullets vanish, leaving the
     items indented into an empty gutter with no markers. */
  .product-details .cg-description ul {
    list-style-type: disc;
  }

  .product-details .cg-description ol {
    list-style-type: decimal;
  }

  .product-details .cg-description :is(ul, ol) {
    margin-block: 0 1em;
    padding-inline-start: 1.4em;
    list-style-position: outside;
  }

  .product-details .cg-description li {
    margin-block: 0.4em 0;
    padding-inline-start: 0.25em;
  }

  .product-details .cg-description li::marker {
    color: var(--cg-desc-accent);
    font-size: 0.9em;
  }

  /* Nested <p> inside <li> (ChatGPT paste shape) must not add its own block
     margin, or each bullet gains an extra gap once spacers are stripped. */
  .product-details .cg-description li > p {
    margin-block: 0;
  }

  .product-details .cg-description blockquote {
    margin-block: 1.2em;
    margin-inline: 0;
    /* Warm accent-tinted wash instead of a side-stripe rule: reads as a
       deliberate pull-quote without the banned border accent. */
    padding: 0.75em 1em;
    border-radius: 10px;
    background: color-mix(in oklch, var(--cg-desc-accent) 8%, transparent);
    font-style: italic;
    color: color-mix(in oklch, var(--color-foreground) 82%, transparent);
  }

  .product-details .cg-disclaimer {
    padding: 27px;

    padding-inline: 27px;
    max-inline-size: 68ch;
    font-family: var(--font-body--family);
  }

  .product-details .cg-disclaimer__details {
    border: 1px solid color-mix(in oklch, var(--color-foreground) 16%, transparent);
    border-radius: 10px;
    background: color-mix(in oklch, var(--color-foreground) 4%, transparent);
    overflow: clip;
  }

  .product-details .cg-disclaimer__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    color: var(--color-foreground);
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    list-style: none;
  }

  .product-details .cg-disclaimer__summary::-webkit-details-marker {
    display: none;
  }

  .product-details .cg-disclaimer__icon {
    display: inline-grid;
    place-items: center;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--cg-desc-accent) 12%, transparent);
    color: var(--cg-desc-accent-strong);
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .product-details .cg-disclaimer__details[open] .cg-disclaimer__icon {
    transform: rotate(45deg);
  }

  .product-details .cg-disclaimer p {
    margin: 0;
    padding: 0 1rem 1rem;
    color: color-mix(in oklch, var(--color-foreground) 78%, transparent);
    font-size: 0.9rem;
    line-height: 1.55;
    text-wrap: pretty;
  }

  /* Rail column order (SEO + layout) is set together in one block down in the
     trust-strip section so the equal-specificity order overrides resolve in a
     predictable source order. The description still ends up below the "sweet
     savings" card, preserving the SEO intent (description precedes the savings
     callout in DOM; CSS only reorders visually). */

  /* Mobile: keep the description on the same rail inset as the title, variant
     picker, and buy buttons so the left discount tab cannot clip the copy. */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details .cg-description {
      padding-inline: 27px;
    }

    .product-information.section--page-width .product-details .cg-disclaimer {
      padding-inline: 27px;
    }
  }

  /* ============================================================
     Refined-editorial rail (cg). Overlays Horizon's stock blocks
     (title, price, variant picker, buy buttons, dividers) scoped to
     .product-details so the block files stay un-forked and merge
     cleanly on Horizon updates. State feedback is CSS-transition
     based (interruptible) and gated behind prefers-reduced-motion;
     accent is the burnt-sienna brand mark, used only on selected
     state, links, and markers. */
  .product-details {
    --cg-rail-accent: #8a3a12;
    --cg-rail-accent-strong: #6f2e0e;
    --cg-rail-hair: color-mix(in oklch, var(--color-foreground) 14%, transparent);
    --cg-rail-ease: cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Product title: lift to the heading face with a confident scale. Only one
     <h1> renders in the rail, so this is a stable target across templates. */
  .product-details .text-block h1 {
    font-family: var(--font-heading--family);
    /* Smaller base than before (was clamp(1.5rem … 2rem)). The JS one-line fit only
       ever shrinks from this base, so a smaller starting size keeps the pre-fit →
       fitted jump subtle (less of a load-time size pop) while short titles still
       read confidently. */
    font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
    line-height: 1.1;
    letter-spacing: -0.022em;
    font-weight: 600;
    text-wrap: balance;
    margin-block: 0;
    /* Never let the title exceed the rail column (defensive: the JS pins this
       during the one-line fit, but this keeps a JS-off / pre-fit paint inside the
       breakpoint on mobile too). */
    max-inline-size: 100%;
    color: var(--color-foreground);
    /* One-line fit is handled by cg-product-pdp.js (fit-by-size: it forces
       nowrap and shrinks the font-size until the title fits on a single line, no
       ellipsis). With JS off the title simply wraps naturally and shows in full
       (text-wrap: balance above), so no information is lost without the script. */
  }

  /* Single-line from FIRST paint (only when scripting is on). Without this the H1
     paints wrapped to two lines at the clamp base, then cg-product-pdp.js shrinks
     it to one line once it runs; a late run (slow/cold paint, or the entrypoint
     module landing seconds in) collapses two lines to one and shoves the whole
     rail down on load. Forcing nowrap up front makes the title one line from the
     first frame, so the JS fit only trims font-size (horizontal) and never the
     line count (vertical) -> no rail reflow. `overflow: hidden` keeps a
     not-yet-fitted long title inside the column (it briefly clips the tail until
     the fit lands a few hundred ms later; descenders are unaffected). `min-width: 0`
     lets the flex item shrink instead of stretching the column.
     Gated on `scripting: enabled` AND the main PDP only: with scripting DISABLED
     (noscript) the rule is inert, so the base rule's `text-wrap: balance` wraps the
     full title, no clip. When scripting is enabled the fit normally runs within a
     few hundred ms and restores the full title on one line; only an outright
     failure of cg-product-pdp.js to load would leave a long title clipped (tail
     only, full text still in the DOM for SEO/AT). Desktop only; mobile keeps the
     two-line wrap. */
  @media (min-width: 750px) and (scripting: enabled) {
    .product-information--main-product .product-details .text-block h1 {
      white-space: nowrap;
      overflow: hidden;
      min-width: 0;
    }
  }

  /* Subheading lede: the lone rte text-block in the rail. Softened, set on the
     body face so it reads as a caption under the title, not a second heading. */
  .product-details rte-formatter.text-block :is(p, em) {
    font-family: var(--font-body--family);
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.5;
    letter-spacing: 0;
    color: color-mix(in oklch, var(--color-foreground) 64%, transparent);
    text-wrap: pretty;
  }

  .product-details [id*='__judge_me_reviews_preview_badge_'] {
    min-block-size: 24px;
  }

  /* Price: the primary scannable figure. Large + bold + tabular so the customer
     locks onto it instantly instead of hunting for one small line. Body face for
     clean even numerals. The price block uses the h4 preset (token size, not
     inline), so product-price.text-block specificity overrides cleanly. */
  .product-details product-price.text-block {
    font-family: var(--font-body--family);
    font-size: clamp(1.55rem, 1.2rem + 1.1vw, 1.95rem);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--color-foreground);
  }

  /* Pin the heavy weight onto the actual price spans. Horizon's price items can
     carry their own font-weight that would otherwise beat the wrapper, which is
     why 700 on the wrapper still read thin. */
  .product-details product-price.text-block,
  .product-details product-price .price,
  .product-details product-price .price-item,
  .product-details product-price .price__regular,
  .product-details product-price .price-item--regular {
    font-weight: 800;
  }

  /* Variant picker: the flavors render as named image swatches driven by a stock
     sliding-pill + clip-path selection system. Do NOT restructure the labels /
     swatches (that breaks the animation and the custom flavor-name layout).
     Instead recolor only the SELECTED state through the theme's own variable,
     which both the button border and the swatch ring already read. Selected
     flavor gets a near-black ink ring; layout + animation untouched. */
  .product-details .variant-picker {
    --color-selected-variant-border: #1a1410;
  }

  /* Selected swatch ring: the stock indicator is an offset outline that floats
     off the circle and reads paper-thin. Instead, ink and thicken the swatch's
     OWN circular border so the ring hugs the circle exactly and follows its
     radius. The swatch is box-sizing: border-box with a fixed width/height, so
     growing the border stays inside the same footprint (no layout shift); it
     just eats a hair into the image edge on the selected swatch. */
  .product-details .variant-option__button-label--has-swatch:has(:checked) {
    outline: none;
  }

  .product-details .variant-option__button-label--has-swatch .swatch {
    transition: border-color 0.2s var(--cg-rail-ease);
  }

  .product-details .variant-option__button-label--has-swatch:has(:checked) .swatch {
    border-color: #1a1410;
    border-width: 2.5px;
  }

  /* Hover swatch ring: match the selected state's hugging ring instead of the
     stock floating offset outline (which left a gap off the circle). Drop the
     outline and ink the swatch's OWN border with a softer, thinner ink so it
     reads as a preview of selection and hugs the circle exactly. Scoped to
     non-selected swatches so a checked swatch keeps its full near-black ring. */
  .product-details .variant-option__button-label--has-swatch:not(:has(:checked)):hover {
    outline: none;
  }

  .product-details .variant-option__button-label--has-swatch:not(:has(:checked)):hover .swatch {
    border-color: color-mix(in oklch, #1a1410 50%, transparent);
    border-width: 2px;
  }

  /* Option label → quiet uppercase eyebrow. Type only: no display/layout change
     to the stock legend, and the selected value beside it stays sentence-case. */
  .product-details .variant-option--buttons legend {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--color-foreground) 88%, transparent);
  }

  .product-details .variant-option__swatch-value {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-foreground);
  }

  /* Buy buttons: keep the theme button tokens; add confident weight + tactile
     press. add-to-cart-button is the stable host across the buy-buttons block. */
  .product-details .product-form-buttons {
    gap: 10px;
  }

  .product-details .add-to-cart-button {
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  /* Rail dividers: convert the stock softened border into the brand feathered
     hairline (the _divider block only auto-feathers at full width; the rail runs
     them at 92%). */
  .product-details .divider__line {
    border: 0;
    min-height: 0;
    height: max(var(--divider-border-thickness, 1px), 1px);
    border-radius: 999px;
    background: linear-gradient(
      to right,
      transparent 0%,
      var(--cg-rail-hair) 22%,
      var(--cg-rail-hair) 78%,
      transparent 100%
    );
  }

  /* Rail column order. The purchases pill (emitted after the blocks in DOM)
     slots between the ratings badge and the price, Shop-app style: the price
     block and every sibling after it move to order 2, the pill takes order 1,
     so it lands right after the order-0 run (title, subtitle, ratings). The
     trust strip sits directly under the buy buttons / payment options.
     Everything after the buy buttons in DOM (the divider, the "sweet savings"
     bundle callout, disclosures) is pushed past the trust strip, and the
     description goes to the very end so the savings card still reads above it.
     These rules MUST stay in this source order: the price and buy-buttons
     sibling rules come first so the pill + trust + description overrides
     (equal or higher specificity) win on source order. The buy-buttons block
     renders its own root <span class="buy-buttons-block"> as a direct child of
     the column (no wrapper), so target it directly, NOT via :has() (which looks
     for a descendant and would match nothing); same for the price block's root
     <product-price> element. */
  .product-details .group-block-content > product-price,
  .product-details .group-block-content > product-price ~ * {
    order: 2;
  }

  .product-details .group-block-content > .buy-buttons-block ~ * {
    order: 4;
  }

  .product-details .group-block-content > .cg-rail-purchases {
    order: 1;
  }

  .product-details .group-block-content > .cg-rail-trust {
    order: 3;
  }

  .product-details .group-block-content > :has(.cg-description) {
    order: 5;
  }

  .product-details .group-block-content > :has(.cg-disclaimer) {
    order: 5;
  }

  /* "N bought in past month" pill, Shop-app style: a quiet neutral chip between
     the ratings row and the price. Aligned to the rail's text start. */
  .cg-rail-purchases {
    display: flex;
    justify-content: flex-start;
    /* No top padding: the Judge.me ratings badge above already carries its own
       bottom spacing (~14px visual). Adding more here made the gap above the
       pill read ~10px larger than the gap below it (ordergap.png). */
    padding-block: 5px 2px;
    padding-inline: 27px;
  }

  .cg-rail-purchases--reserve {
    visibility: hidden;
  }

  .product-details
    .group-block-content:has(> .cg-rail-purchases:not(.cg-rail-purchases--reserve))
    > .cg-rail-purchases--reserve {
    display: none;
  }

  .cg-rail-purchases__pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in oklch, var(--color-foreground) 7%, transparent);
    font-family: var(--font-body--family);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: color-mix(in oklch, var(--color-foreground) 82%, transparent);
    white-space: nowrap;
  }

  .cg-rail-trust {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    margin-block-start: 4px;
    padding-block: 16px 0;
    padding-inline: 27px;
  }

  .cg-rail-trust::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 27px;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      var(--cg-rail-hair) 22%,
      var(--cg-rail-hair) 78%,
      transparent 100%
    );
  }

  .cg-rail-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body--family);
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    color: color-mix(in oklch, var(--color-foreground) 64%, transparent);
  }

  .cg-rail-trust__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--cg-rail-accent);
  }

  /* ============================================================
     Bakery-case showcase interior fixes. Active only when the section
     carries .cg-pdp-showcase (see snippets/product-information-content.liquid).
     The rail becomes a bordered card-cream panel there, so pieces that
     leaned on the open cream background get realigned to the panel's
     flat 8px hairline language. */

  /* Disclosures ship 0 inline padding in the product templates and would
     otherwise touch the panel hairline. */
  .cg-pdp-showcase .product-details .disclosures__container {
    padding-inline: 27px;
  }

  /* The "sweet savings" bundle callout is a template custom-liquid card
     (Tailwind utilities: rounded-3xl, 2px gray border, drop shadow).
     Inside a panel that reads as a nested card in a different dialect;
     reshape it to the flat hairline + warm tint of the gift-card note
     surfaces. The #id selector outweighs the utility classes, so the
     auto-generated template JSON stays untouched. */
  .cg-pdp-showcase .product-details #cg-bundle-callout {
    border: 1px solid rgb(26 20 16 / 0.16);
    border-radius: 8px;
    background: color-mix(in oklch, #c47a40 10%, #fbf7ef);
    box-shadow: none;
  }

  /* Doughy grip disclaimer: match the panel's 8px radius (base is 10px). */
  .cg-pdp-showcase .product-details .cg-disclaimer__details {
    border-radius: 8px;
  }

  /* Pack-size variant buttons: align with the gift-card denomination tile
     (flat 8px radius, white fill, 1px ink hairline). Radius goes through the
     theme's OWN --variant-picker-button-radius, resolved where .variant-option
     computes --options-border-radius, so the sliding pill (border-radius:
     inherit) and the label stay in lockstep: no structural overrides, per the
     recolor-only rule above. Flavor swatch labels are excluded on BOTH axes:
     their label radius reads --variant-picker-swatch-radius (untouched) and
     the color overrides skip --has-swatch so no white pill appears behind the
     circle swatches. */
  .cg-pdp-showcase .product-details .variant-option--buttons {
    --variant-picker-button-radius: 8px;
  }

  .cg-pdp-showcase
    .product-details
    .variant-option--buttons
    .variant-option__button-label:not(.variant-option__button-label--has-swatch) {
    --color-variant-background: #ffffff;
    --color-variant-border: rgb(26 20 16 / 0.16);
  }

  /* Buy row: quantity + add-to-cart + accelerated checkout drop to the same
     flat 8px radius, and the quantity field takes the ink hairline. All via
     the theme's own vars scoped to the buy-buttons block root, so the sticky
     ATC bar and every other surface keep the global 14px button radius. */
  .cg-pdp-showcase .product-details .buy-buttons-block {
    --style-border-radius-buttons-primary: 8px;
    --style-border-radius-buttons-secondary: 8px;
    --style-border-radius-inputs: 8px;
    --color-input-border: rgb(26 20 16 / 0.16);
  }

  @media (prefers-reduced-motion: no-preference) {
    .product-details .add-to-cart-button {
      transition-property: scale;
      transition-duration: 0.18s;
      transition-timing-function: var(--cg-rail-ease);
    }

    .product-details .add-to-cart-button:active {
      scale: 0.96;
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_product-media-gallery (INDEX:150) */
/* Refined-editorial gallery polish (cg). Scoped to the main PDP gallery so
     featured-product / quick-add galleries stay stock. Light-mode brand only,
     so the image outline is pure black at low opacity per the image-outline
     principle (a tinted neutral reads as dirt on the edge). */

  /* Subtle hairline ring that respects the media radius. Rendered on a pseudo so
     it never tints the photo and never blocks the zoom click. */
  .product-information--main-product .product-media {
    position: relative;
  }

  .product-information--main-product .product-media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--media-radius, 0);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    pointer-events: none;
  }

  /* The zoom dialog reuses .product-media; it gets no ring (full-bleed view). */
  .product-information--main-product .dialog-zoomed-gallery .product-media::after {
    display: none;
  }

  /* Thumbnail strip: the selection ring is a near-black ink band that hugs the
     thumbnail edge directly (no floating gap), matching the swatch ring so the
     two overlapping selectors read consistently.

     The ring is an `outline` with a NEGATIVE offset, not an inset box-shadow.
     An inset box-shadow paints UNDER child content, so the thumbnail <img>
     (which fills the button with a matching radius) covers the ring's straight
     edges and leaves only the rounded corners showing: that is the "border not
     showing correctly" bug. An outline paints on TOP of the image, and a
     negative offset pulls it inside so it still hugs the rounded edge. Width +
     offset are CONSTANT across states; only the color changes, so there is no
     box jump and no shifting corners between thumbnails. The resting outline
     matches the main-media hairline; the current slide uses the ink color. No
     `border` is used (a border resizes the box on selection and nudges the
     image). */
  .product-information--main-product .slideshow-controls__thumbnail {
    border-radius: var(--thumbnail-radius, 8px);
    outline: 1.5px solid rgba(0, 0, 0, 0.08);
    outline-offset: -1.5px;
    transition: outline-color 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .product-information--main-product .slideshow-controls__thumbnail:hover {
    outline-color: rgba(0, 0, 0, 0.2);
  }

  .product-information--main-product .slideshow-controls__thumbnails .slideshow-control[aria-current='true'] {
    border: 0;
    outline: 1.5px solid #1a1410;
    outline-offset: -1.5px;
  }

  /* Forced colors (WHCM) strips box-shadow, so the selected-thumbnail ring
     disappears and the current slide loses its visible marker. Restore it with a
     real outline (outlines survive forced colors) keyed to the system Highlight. */
  @media (forced-colors: active) {
    .product-information--main-product .slideshow-controls__thumbnails .slideshow-control[aria-current='true'] {
      outline: 2px solid Highlight;
      outline-offset: 1px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .product-information--main-product .slideshow-controls__thumbnail {
      transition:
        outline-color 0.3s cubic-bezier(0.32, 0.72, 0, 1),
        scale 0.18s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .product-information--main-product .slideshow-controls__thumbnail:active {
      scale: 0.96;
    }
  }
/* END_BLOCK:_product-media-gallery */

/* START_BLOCK:_search-input (INDEX:151) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

    @media screen and (max-width: 749px) {
      max-width: 100%;
    }
  }

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:152) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:153) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:cg-app-slot (INDEX:159) */
.cg-app-slot {
    display: flex;
    flex-direction: column;
    align-self: var(--cg-app-slot-alignment, center);
    width: min(var(--cg-app-slot-mobile-width, 100%), 100%);
    gap: var(--cg-app-slot-gap, 0px);
    padding-block: calc(var(--cg-app-slot-pt, 0px) * 0.75) calc(var(--cg-app-slot-pb, 0px) * 0.75);
    padding-inline: calc(var(--cg-app-slot-pl, 0px) * 0.75) calc(var(--cg-app-slot-pr, 0px) * 0.75);
  }

  @media screen and (min-width: 750px) {
    .cg-app-slot {
      width: min(var(--cg-app-slot-width, 100%), 100%);
      padding-block: var(--cg-app-slot-pt, 0px) var(--cg-app-slot-pb, 0px);
      padding-inline: var(--cg-app-slot-pl, 0px) var(--cg-app-slot-pr, 0px);
    }
  }
/* END_BLOCK:cg-app-slot */

/* START_BLOCK:cg-divider (INDEX:160) */
.cg-divider-block {
    width: 100%;
    padding-block: calc(var(--cg-divb-pt, 12px) * 0.75) calc(var(--cg-divb-pb, 12px) * 0.75);
    padding-inline: calc(var(--cg-divb-pl, 0px) * 0.75) calc(var(--cg-divb-pr, 0px) * 0.75);
  }

  @media screen and (min-width: 750px) {
    .cg-divider-block {
      padding-block: var(--cg-divb-pt, 12px) var(--cg-divb-pb, 12px);
      padding-inline: var(--cg-divb-pl, 0px) var(--cg-divb-pr, 0px);
    }
  }
/* END_BLOCK:cg-divider */

/* START_BLOCK:comparison-slider (INDEX:165) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
    container-type: size;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: transform var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: 50%;
    width: 4px;
    transform: translate3d(calc((var(--compare) - 50) * 1cqw - 50%), 0, 0);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: 50%;
    height: 4px;
    transform: translate3d(0, calc((50 - var(--compare)) * 1cqh - 50%), 0);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    color: var(--handle-color, var(--color-foreground));
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    gap: var(--gap-sm);
    padding: var(--padding-xs);
    transition: transform var(--transition-duration, 0s) ease-in-out;
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: translate 0.16s ease-in-out;
  }

  .cs-slider__chevron:first-child {
    translate: -2px 0;
  }

  .cs-slider__chevron:last-child {
    translate: 2px 0;
  }

  @media (hover: hover) {
    .comparison-slider__media-wrapper:hover .cs-slider__chevron {
      translate: 0 0;
    }
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: 50%;
    transform: translate3d(calc((var(--compare) - 50) * 1cqw - 50%), -50%, 0);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, calc((50 - var(--compare)) * 1cqh - 50%), 0) rotate(90deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .comparison-slider__layer,
    .comparison-slider__media-wrapper::after,
    .cs-slider__handle,
    .cs-slider__chevron {
      transition: none;
    }
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:166) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:167) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:disclosures (INDEX:169) */
.disclosures__container {
      width: 100%;
    }

    .disclosures__container:has(> [shopify-block-empty]) {
      display: none;
    }

    .disclosures {
      --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1));

      display: block;
      color: var(--color, inherit);
      width: 100%;
      container-type: inline-size;
    }

    .disclosures.accordion--dividers accordion-custom:first-child .details {
      border-block-start: var(--style-border-width) solid var(--color-border);
    }

    .disclosures.accordion--dividers accordion-custom:last-child .details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .disclosures__heading {
      margin-block-end: var(--margin-lg);
    }

    .disclosures .details__header {
      padding-block: var(--padding-xl);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .disclosures .details__header > .svg-wrapper {
      margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2);
    }

    .disclosures details[open] .details__header {
      padding-block-end: var(--padding-xs);
    }

    .disclosures__summary-content {
      flex: 1 1 0%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--gap-xs);
      min-width: 0;
    }

    .disclosures__summary-item {
      display: flex;
      flex-direction: column;
      row-gap: var(--gap-xs);
      min-width: 0;
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      width: max-content;
      max-width: none;
      visibility: hidden;
      white-space: nowrap;
      pointer-events: none;
      contain: layout style;
    }

    .disclosures__summary-item-row {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      min-width: 0;
      vertical-align: middle;
    }

    .disclosures__summary-item-title {
      font-weight: var(--font-weight-normal, normal);
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-title {
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .disclosures .details__icon {
      display: inline-block;
      flex-shrink: 0;
      width: auto;
      max-inline-size: 100%;
      height: var(--disclosures-icon-size);
      margin: 0;
      object-fit: contain;
      vertical-align: middle;
    }

    .disclosures__summary-item-row:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title {
      grid-column: 2;
    }

    .disclosures details[open] > summary .disclosures__summary-item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__summary-item-extra {
      display: block;
    }

    .disclosures__separator {
      display: none;
      flex-shrink: 0;
      padding-inline: var(--padding-xs);
      line-height: 1;
    }

    @container (min-width: 701px) {
      .disclosures:where([data-summary-layout='inline']) .details__header {
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper {
        margin-block-start: 0;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item {
        display: block;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row {
        display: inline-flex;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) {
        display: inline-grid;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra {
        display: inline-flex;
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__separator {
        display: inline-block;
      }
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row {
      display: inline-flex;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) {
      display: inline-grid;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-extra {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__separator {
      display: inline-block;
    }

    .disclosures details[open] .disclosures__summary-item-extra {
      display: none;
    }

    .disclosures__item {
      display: flex;
    }

    .disclosures__item + .disclosures__item {
      margin-block-start: var(--spacing-lg);
    }

    .disclosures__item-left {
      flex: 0 1 auto;
      min-width: 0;
      cursor: default;
    }

    .disclosures__item-right {
      flex: 1;
      cursor: pointer;
    }

    .disclosures__item-header {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      margin-block-end: var(--spacing-xs);
      padding-block-end: var(--padding-xs);
    }

    .disclosures__item-title {
      margin: 0;
    }

    .disclosures__item-header:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__item-header:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__item-header:has(> .details__icon) > .disclosures__item-title {
      grid-column: 2;
    }

    .disclosures details[open] .disclosures__item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__item-content {
      max-width: var(--normal-content-width);
      padding-block-end: var(--padding-2xl);
    }

    .disclosures details[open] .details-content {
      padding-block-end: 0;
    }
/* END_BLOCK:disclosures */

/* START_BLOCK:email-signup (INDEX:170) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    color: var(--color, inherit);
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    transition:
      background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:172) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    @media screen and (min-width: 750px) {
      padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-subdued);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--theme-drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition:
      text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--theme-drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets--drawer .theme-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition:
      transform var(--animation-values),
      opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);

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

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:follow-on-shop (INDEX:173) */
/* Best-effort tint for the "Following on Shop" label so it matches the footer's
     white social icons. shop-follow-button is a Shopify-branded shadow-DOM web
     component (shop-js); the footer's --color-foreground does NOT cascade into its
     shadow root, and Shopify exposes no documented part/custom-property to recolor
     the label. This only lands IF shop-js paints that text with currentColor /
     inherit; otherwise it is a harmless no-op (the component keeps Shopify's
     default black). Scoped to this block so nothing else is affected. */
  .cg-follow-on-shop {
    color: var(--color-foreground);
  }

  .cg-follow-on-shop shop-follow-button {
    color: inherit;
  }
/* END_BLOCK:follow-on-shop */

/* START_BLOCK:footer-copyright (INDEX:174) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:175) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background:
      linear-gradient(var(--color-background) 0 100%), linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:177) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:178) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:180) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:181) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page-content (INDEX:182) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:183) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:184) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:185) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-custom-property (INDEX:188) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:190) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:191) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:194) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:196) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__wrapper :where(a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--icon-size-lg);
    min-height: var(--icon-size-lg);
    color: inherit;
    text-decoration: none;
    border-radius: 999px;
    transform-origin: center;
    transition:
      filter 0.28s ease,
      transform 0.28s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .social-icons__icon-wrapper:not(.social-icons__icon-wrapper--disabled) :where(a:hover) {
      filter: brightness(0.72);
    }
  }

  .social-icons__icon-wrapper:not(.social-icons__icon-wrapper--disabled) :where(a:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }

  .social-icons__icon-wrapper:not(.social-icons__icon-wrapper--disabled) :where(a:active) {
    transform: scale(0.96);
    transition-duration: 120ms;
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .social-icons__wrapper :where(a) {
      transition: none;
    }

    .social-icons__icon-wrapper:not(.social-icons__icon-wrapper--disabled) :where(a:hover, a:focus-visible, a:active) {
      transform: none;
    }
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:197) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0 0 auto;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:198) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:201) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:202) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition:
          content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:accordion-styles (INDEX:203) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:accordion-styles */

/* START_SNIPPET:add-to-cart-button-styles (INDEX:204) */
/* Add to cart button */
  .button[id^='BuyButtons-ProductSubmitButton-'] {
    position: relative;
    overflow: hidden;
  }

  .add-to-cart-button {
    /* cookiegrips: ATC checkmark-burst tuned faster than Horizon stock
       (0.26/0.1/0.2/0.2/0.32). Ratios preserved so the staggered check/tick/
       ring/burst choreography stays intact, just quicker. Carried from
       base.css when 4.1.3 moved these rules into this snippet. */
    --text-speed: 0.22;
    --base-delay: calc(var(--text-speed) * 0.25);
    --tick-speed: 0.085;
    --ring-speed: 0.17;
    --check-speed: 0.17;
    --burst-speed: 0.27;
    --step-delay: 3;
    --speed: 1;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    user-select: none;
    transition-property: color, box-shadow, background-color, scale, translate;
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--ease-out-cubic);

    &:active {
      scale: 0.99;
      translate: 0 1px;
    }
  }

  .add-to-cart-button .svg-wrapper .checkmark-burst {
    width: 30px;
    height: 30px;
  }

  .add-to-cart-text {
    --atc-opacity: 0;
    --atc-destination: -1em;

    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--ease-out-cubic);
    animation-fill-mode: forwards;
    /* cookiegrips: width stays snap (no width transition; see CLAUDE.md
       quick-add rule), opacity keeps the brand ease-out curve. */
    transition: opacity var(--animation-speed) var(--ease-out-cubic);
  }

  .add-to-cart__added {
    --atc-opacity: 1;
    --atc-destination: 0px;

    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }

  .add-to-cart__added-icon {
    width: 32px;
    height: 32px;
  }

  [data-added='true'] .add-to-cart-text,
  [data-added='true'] .add-to-cart__added {
    animation-name: atc-slide;
  }

  .checkmark-burst {
    opacity: 0;
    overflow: visible;

    .burst {
      rotate: 20deg;
    }

    .check {
      opacity: 0.2;
      scale: 0.8;
      filter: blur(2px);
      transform: translateZ(0);
    }

    :is(.ring, .line, .check, .burst, .tick) {
      transform-box: fill-box;
      transform-origin: center;
    }

    :is(.line) {
      stroke-dasharray: 1.5 1.5;
      stroke-dashoffset: -1.5;
      translate: 0 -180%;
    }

    g {
      transform-origin: center;
      rotate: calc(var(--index) * (360 / 8) * 1deg);
    }
  }

  .add-to-cart-button[data-added='true'] .checkmark-burst {
    opacity: 1;
  }

  .add-to-cart-button[data-added='true'] {
    color: transparent;

    .check {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }

    .tick {
      scale: 1.75;
    }

    .ring {
      opacity: 0;
      scale: 1;
    }

    .line {
      stroke-dashoffset: 1.5;
    }

    .add-to-cart__added {
      color: var(--button-color);
    }

    .add-to-cart-text {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: circle(0% at 50% 50%);
      filter: blur(2px);
      opacity: 0;
      translate: 0 4px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .add-to-cart-button[data-added='true'] {
      .check {
        transition-property: opacity, scale, filter;
        transition-duration: calc(calc(var(--check-speed) * 1s));
        transition-delay: calc((var(--base-delay) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .tick {
        transition-property: scale;
        transition-duration: calc((calc(var(--tick-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
        transition-timing-function: ease-out;
      }

      .ring {
        transition-property: opacity, scale;
        transition-duration: calc((calc(var(--ring-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .line {
        transition-property: stroke-dashoffset;
        transition-duration: calc((calc(var(--burst-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-cubic);
      }
    }

    .add-to-cart-text {
      transition-property: clip-path, opacity, filter, translate;
      transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
      transition-timing-function: ease-out;
    }
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(100% at 50% 50%);
  }

  @keyframes atc-slide {
    to {
      opacity: var(--atc-opacity, 1);
      translate: 0px var(--atc-destination, 0px);
    }
  }
/* END_SNIPPET:add-to-cart-button-styles */

/* START_SNIPPET:bento-grid (INDEX:207) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:208) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:buy-buttons-styles (INDEX:213) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
    color: var(--color, var(--color-foreground));
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    padding-inline: var(--theme-drawer-padding);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

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

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color, var(--color-foreground));
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-body--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition:
      opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
       where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:214) */
.card-gallery {
    position: relative;
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  @container (max-width: 70px) {
    .card-gallery:hover .quick-add__button {
      display: none;
    }
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:215) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--cart-bubble-text, var(--cart-bubble-text-fallback));
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback));
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-disclosure-tooltip (INDEX:216) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer (INDEX:217) */
/* cg: the drawer self-wraps in a .shopify-section, which main.css hides at
     opacity:0 (under @media scripting:enabled) until main.js reveals it on
     scroll-inView. The dialog sits off-screen until opened, so it never enters
     the viewport and the reveal never fires — leaving the whole drawer stuck
     invisible. Force the wrapper visible; the <dialog>'s own open/close
     (right: -width -> 0) controls actual visibility, so this does NOT show the
     closed drawer. */
  #shopify-section-cart-drawer-section {
    /* stylelint-disable-next-line declaration-no-important */
    opacity: 1 !important;
  }

  cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  /* cg (re-applied after Horizon 4.0.0 relocated the drawer to this file):
     first item was hugging the sticky header, so give it the breathing room
     every later row gets from the previous row's gap-xl margin; contain
     overscroll so the page behind doesn't scroll; thin adaptive scrollbar. */
  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    padding-block-start: var(--gap-xl);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  /* cg (re-applied after Horizon 4.0.0 relocated the drawer here and moved the
     heading count + close button onto the SHARED .theme-drawer__* classes).
     Scoped to #cart-drawer so the other theme-drawers (filters, pickup) keep
     4.0.0's stock styling. */

  /* Burnt-sienna count badge (was the .cart-bubble bubble pre-4.0.0). */
  #cart-drawer .theme-drawer__badge {
    background-color: #8a3a12;
    color: #fbf7ef;
  }

  /* Hairline separating the pinned header from the scrolling items
     (4.0.0's .theme-drawer__header ships no separator). */
  #cart-drawer .theme-drawer__header {
    border-bottom: 1px solid color-mix(in oklch, var(--color-foreground) 10%, transparent);
  }

  /* Press-squish on the close button (brand tactile feedback); add `scale` to
     the inherited transition list so it eases. */
  #cart-drawer .theme-drawer__close-button {
    transition-property: color, outline-color, background-color, scale;
  }

  #cart-drawer .theme-drawer__close-button:active {
    scale: 0.92;
  }

  @media (prefers-reduced-motion: reduce) {
    #cart-drawer .theme-drawer__close-button:active {
      scale: none;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:218) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer),
    html:active-view-transition-type(fill-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:219) */
.cart-items {
    /* cg: larger cart thumbnails than stock 2.5/7.5rem (re-applied after Horizon 4.0.0). */
    --cart-item-media-width-min: 6rem;
    --cart-item-media-width-max: 9rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-items__wrapper--drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns:
      clamp(var(--cart-item-media-width-min), 28cqi, var(--cart-item-media-width-max)) minmax(0, 1fr)
      minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-items__table-row--full-width-variants {
    grid-template-columns:
      clamp(var(--cart-item-media-width-min), 28cqi, var(--cart-item-media-width-max)) minmax(0, 1fr)
      auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--xs);
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--xs);
    letter-spacing: 0.01em;
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--line-height);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--2xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
    padding-block-start: var(--padding-2xs);
  }

  /* cg: line-item thumbnails styled as cards to match cart-recommendations
     (re-applied after Horizon 4.0.0). background fills behind transparent
     product PNGs on the cream drawer; two-layer soft shadow for card depth. */
  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid color-mix(in oklch, var(--color-foreground) 14%, transparent);
    background: var(--color-background);
    box-shadow:
      0 1px 2px color-mix(in oklch, var(--color-foreground) 6%, transparent),
      0 4px 12px -8px color-mix(in oklch, var(--color-foreground) 18%, transparent);
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    margin-inline: auto;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition:
      opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: var(--cart-item-media-width-max) 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

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

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-recommendations (INDEX:221) */
.cart-recommendations {
    padding-top: 10em;
    /* Burnt sienna accent: warm, high contrast on cream drawer + light cart page.
       Adaptive everything else (border/title color) tracks --color-foreground.
       Renders at the END of the line items as a scroll-past upsell, so it drops
       the card and reads as a separated section: a rule-label heading +
       generous top margin keep it subordinate to the items above. */
    --cart-accent: #b0411e;

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    width: 100%;
    margin-block-start: var(--margin-2xl);
  }

  .cart-recommendations__rule {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-recommendations__rule::before,
  .cart-recommendations__rule::after {
    content: '';
    flex: 1 1 auto;
    block-size: 1px;
    background: color-mix(in oklch, var(--color-foreground) 12%, transparent);
  }

  /* No heading: the two flush hairlines collapse into one full-width rule. */
  .cart-recommendations__rule--plain {
    gap: 0;
  }

  .cart-recommendations__heading {
    margin: 0;
    flex: 0 0 auto;
    font-family: var(--font-accent--family, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--color-foreground) 58%, transparent);
  }

  .cart-recommendations__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .cart-recommendations__item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
  }

  .cart-recommendations__item + .cart-recommendations__item {
    border-block-start: 1px solid color-mix(in oklch, var(--color-foreground) 7%, transparent);
  }

  .cart-recommendations__media-link {
    display: block;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid color-mix(in oklch, var(--color-foreground) 14%, transparent);
    background: var(--color-background);
  }

  .cart-recommendations__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cart-recommendations__info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xs);
    min-width: 0;
  }

  .cart-recommendations__title {
    font-size: var(--font-size--xs);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-foreground);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.2s ease;
  }

  .cart-recommendations__title:hover {
    color: var(--cart-accent);
    text-decoration: none;
  }

  .cart-recommendations__price {
    font-size: var(--font-size--xs);
    font-weight: 600;
    color: var(--cart-accent);
    white-space: nowrap;
  }
/* END_SNIPPET:cart-recommendations */

/* START_SNIPPET:cart-summary (INDEX:222) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

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

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

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

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  /* cg: frame the estimated total as its own banded zone between the
     free-shipping bar and checkout (re-applied after Horizon 4.0.0). Adaptive
     hairline matches 4.0.0's other cart dividers. */
  .cart-totals__container {
    row-gap: var(--gap-2xs);
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: var(--padding-md);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--font-size--md);
  }

  /* cg: prominent total, tabular figures, tight tracking (re-applied after
     Horizon 4.0.0). Deliberately a fixed --font-size--xl (not the cart scale)
     so the estimated total always reads as the emphasis of the summary. */
  .cart-totals__total-value {
    font-size: var(--font-size--xl);
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  /* Same flush focus ring as the discount input: no gapped double border. */
  .cart-note__instructions:focus-visible {
    outline-offset: calc(var(--style-border-width-inputs) * -1);
  }

  @supports not selector(:focus-visible) {
    .cart-note__instructions:focus {
      outline-offset: calc(var(--style-border-width-inputs) * -1);
    }
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  /* Sit the focus ring flush on the input's own border so it reads as one
     thicker edge instead of a double border with a gap between the two. */
  .cart-discount__input:focus-visible {
    outline-offset: calc(var(--style-border-width-inputs) * -1);
  }

  @supports not selector(:focus-visible) {
    .cart-discount__input:focus {
      outline-offset: calc(var(--style-border-width-inputs) * -1);
    }
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:cart-typography-styles (INDEX:223) */
.cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }
/* END_SNIPPET:cart-typography-styles */

/* START_SNIPPET:cg-contact-form-enhance (INDEX:226) */
.cg-form-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  button[data-cg-busy] {
    opacity: 0.72;
    cursor: progress;
  }
/* END_SNIPPET:cg-contact-form-enhance */

/* START_SNIPPET:cg-divider (INDEX:227) */
.cg-divider {
    display: block;
    width: 100%;
    max-width: var(--cg-divider-max, 100%);
    height: max(var(--cg-divider-thickness, 1px), 1px);
    margin: var(--cg-divider-mt, 1.5rem) auto var(--cg-divider-mb, 1.5rem);
    border: 0;
    border-radius: 999px;
    /* Feathered hairline: solid in the middle, fading to transparent at both
       ends (mirrors snippets/divider.liquid `.divider__line--feather`). */
    background: linear-gradient(
      to right,
      transparent 0%,
      color-mix(in oklch, var(--cg-divider-color, #1a1410) var(--cg-divider-peak, 46%), transparent) 24%,
      color-mix(in oklch, var(--cg-divider-color, #1a1410) var(--cg-divider-peak, 46%), transparent) 76%,
      transparent 100%
    );
  }

  /* Fade in once on load. Default-visible base (so reduced-motion and any browser
     without CSS animations just shows the line); the animation only runs when
     motion is allowed. `both` fill holds opacity 0 through the delay so there is
     no flash before the fade. */
  @media (prefers-reduced-motion: no-preference) {
    .cg-divider:not(.cg-divider--static) {
      animation: cg-divider-fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-delay: var(--cg-divider-delay, 0s);
    }
  }

  @keyframes cg-divider-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
/* END_SNIPPET:cg-divider */

/* START_SNIPPET:cg-head (INDEX:228) */
/* Force the host section visible immediately so the word cascade never plays
     behind main.css's hidden .shopify-section. Children stay hidden via the
     pending state below, so nothing flashes. Mirrors cg-page / cg-hero-bg. */
  .shopify-section:has([data-cg-head]) {
    opacity: 1 !important;
  }

  cg-head[data-cg-head] {
    /* Custom element defaults to display:inline; force block for layout. */
    display: block;
  }

  [data-cg-head] .cg-head__word {
    display: inline-block;
  }

  /* Pending hide: words / eyebrow / rule start invisible (no paint-time flash).
     The custom element clears this by flipping to the ready state once it
     reveals them. The layout <noscript> forces [data-cg-anim] visible when JS
     is off. */
  [data-cg-head][data-cg-head-state='pending'] [data-cg-anim],
  [data-cg-head][data-cg-head-state='pending'] .cg-head__word {
    opacity: 0;
  }

  /* Accent rule: a short bar that draws left to right after the words land. */
  [data-cg-head] .cg-head__rule {
    display: block;
    width: 56px;
    height: 2px;
    background: var(--cg-head-accent, #945e30);
    border-radius: 2px;
    margin-top: 0.85rem;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1) 0.45s;
  }

  [data-cg-head][data-cg-head-state='ready'] .cg-head__rule {
    transform: scaleX(1);
  }

  [data-cg-head] .cg-head__title {
    margin: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    /* Rule appears instantly (the words still fade opacity-only via the element). */
    [data-cg-head] .cg-head__rule {
      transform: scaleX(1) !important;
      transition: none !important;
    }
  }
/* END_SNIPPET:cg-head */

/* START_SNIPPET:chat-drawer (INDEX:230) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:checkbox-styles (INDEX:231) */
.checkbox {
    --checkbox-path-opacity: 0;
    --checkbox-cursor: pointer;

    position: relative;
    display: flex;
    align-items: center;

    &.checkbox--disabled {
      --checkbox-cursor: not-allowed;
    }
  }

  .checkbox:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  .checkbox__input {
    position: absolute;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;

    /* Outline is on the SVG instead, to allow it to have border-radius */
    &:focus-visible {
      outline: none;
    }
  }

  .checkbox__label {
    position: relative;
    display: inline-flex;
    cursor: var(--checkbox-cursor);
    line-height: var(--checkbox-size);
    min-width: var(--minimum-touch-target);
  }

  .checkbox .icon-checkmark {
    height: var(--checkbox-size);
    width: var(--checkbox-size);
    flex-shrink: 0;
    border: var(--checkbox-border);
    border-radius: var(--checkbox-border-radius);
    background-color: var(--color-background);
  }

  .checkbox__input:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  .checkbox__input:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }

  .checkbox__label-text {
    padding-inline-start: var(--checkbox-label-padding);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .checkbox .icon-checkmark path {
    stroke: var(--color-background);
    opacity: var(--checkbox-path-opacity);
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .checkbox__input:disabled + .checkbox__label {
    color: var(--input-disabled-text-color);
  }
/* END_SNIPPET:checkbox-styles */

/* START_SNIPPET:collection-card (INDEX:233) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:collection-wrapper-styles (INDEX:234) */
/* ------------------------------------------------------------------------------ */

  /* Collection Wrapper - Shared layout CSS for collection and search pages */

  /* ------------------------------------------------------------------------------ */

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;

      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  /* Make product media go edge-to-edge by using negative margins */
  :is(.collection-wrapper--full-width) .card-gallery,
  :is(.collection-wrapper--full-width-on-mobile) .card-gallery {
    @media screen and (max-width: 749px) {
      margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
      margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
    }
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }

  .collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }
/* END_SNIPPET:collection-wrapper-styles */

/* START_SNIPPET:deferred-media-product-model-styles (INDEX:241) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /* cg: radius on every .product-media child at all breakpoints/modes, not just
     desktop grid, for consistent corners (carried from product-media.liquid when
     4.1.3 moved its stylesheet into this snippet). */
  .product-media > * {
    border-radius: var(--media-radius, 0);
    overflow: hidden;
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  .product-media product-model {
    position: absolute;
  }

  .product-media-container--model {
    /* Usefull when view in your space is shown */
    flex-direction: column;
  }

  .shopify-model-viewer-ui__controls-area {
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  /* If the product media is already providing an image cover, hide images provided by sibling product-model */
  .product-media__image ~ product-model .deferred-media__poster-image {
    display: none;
  }

  /* If the product model is playing, hide the preview image */
  .product-media-container:has(product-model .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  product-model {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  product-model model-viewer,
  product-model > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  product-model > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  product-model > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .button-shopify-xr {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-md);
  }

  .button-shopify-xr > svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-inline-end: var(--margin-md);
  }

  .button-shopify-xr[data-shopify-xr-hidden] {
    display: none;
  }

  product-model .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  product-model .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:deferred-media-product-model-styles */

/* START_SNIPPET:deferred-media-video-styles (INDEX:242) */
.product-media deferred-media {
    position: absolute;
  }

  /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
  .product-media__image ~ deferred-media .deferred-media__poster-image {
    display: none;
  }

  /* If the product media video is playing, hide the preview image */
  .product-media-container:has(deferred-media .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  deferred-media {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;

    /* The overflow hidden in the deferred-media won't let the button show the focus ring */
    &:has(:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    @supports not selector(:focus-visible) {
      &:has(:focus) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: var(--focus-outline-offset);
      }
    }
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  deferred-media > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  deferred-media.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  deferred-media > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  deferred-media > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  deferred-media img {
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
  }

  deferred-media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  deferred-media[data-media-loaded] img {
    opacity: 0;
  }

  deferred-media .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  deferred-media .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }

  deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    /* only apply this on the video block not product media */
    object-fit: cover;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  .video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:deferred-media-video-styles */

/* START_SNIPPET:discount-popup (INDEX:243) */
.cg-discount-tab {
    position: fixed;
    top: 20rem;
    left: 0.75rem;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.9rem;

    background: var(--cg-tab-bg, #fbf7ef);
    color: var(--cg-tab-ink, #1a1410);
    border: 1px solid color-mix(in oklch, var(--cg-tab-ink, #1a1410) 12%, transparent);
    border-radius: 0 0 0.85rem 0.85rem;
    box-shadow:
      0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
      0 0 0 1px color-mix(in oklch, var(--cg-tab-ink, #1a1410) 4%, transparent) inset;

    transform-origin: left center;
    transform: rotate(-90deg);
    scale: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
      scale 0.14s cubic-bezier(0.32, 0.72, 0, 1),
      background-color 0.22s cubic-bezier(0.32, 0.72, 0, 1),
      border-color 0.22s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .cg-discount-tab__label {
    font-family: var(--font-accent--family, ui-monospace, monospace);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    color: var(--cg-tab-ink, #1a1410);
  }

  .cg-discount-tab__pct {
    font-weight: 700;
    color: var(--cg-tab-pct, #8a3a12);
  }

  @media (hover: hover) {
    .cg-discount-tab:hover {
      background: color-mix(in oklch, var(--cg-tab-accent, #945e30) 8%, var(--cg-tab-bg, #fbf7ef));
      border-color: color-mix(in oklch, var(--cg-tab-accent, #945e30) 55%, transparent);
      box-shadow:
        0 1px 1px color-mix(in oklch, #ffffff 70%, transparent) inset,
        0 10px 24px -18px color-mix(in oklch, var(--cg-tab-ink, #1a1410) 35%, transparent);
    }
  }

  .cg-discount-tab:active {
    scale: 0.98;
  }

  .cg-discount-tab:focus-visible {
    outline: 2px solid var(--cg-tab-accent, #945e30);
    outline-offset: 3px;
  }

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

    .cg-discount-tab:hover {
      scale: 1;
    }

    .cg-discount-tab:active {
      scale: 1;
    }
  }
/* END_SNIPPET:discount-popup */

/* START_SNIPPET:divider (INDEX:244) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  /* Softened seam: the stock hard border color is mixed down so dividers read
     as refined hairlines on the cream surface (works for horizontal AND the
     vertical, row-layout dividers, which keep this border rendering). */
  .divider__line {
    border-bottom: var(--divider-border-thickness) solid color-mix(in oklch, var(--color-border) 46%, transparent);
    border-right: var(--divider-border-thickness) solid color-mix(in oklch, var(--color-border) 46%, transparent);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }

  /* Premium feathered hairline for horizontal dividers: a thin gradient line
     that fades to transparent at both ends instead of a hard edge-to-edge rule.
     Replaces the border with a horizontal gradient, so it must only be applied
     to horizontal dividers (see the `feather` param doc). */
  .divider__line--feather {
    border: 0;
    min-height: 0;
    height: max(var(--divider-border-thickness, 1px), 1px);
    border-radius: 999px;
    background: linear-gradient(
      to right,
      transparent 0%,
      color-mix(in oklch, var(--color-border) 46%, transparent) 24%,
      color-mix(in oklch, var(--color-border) 46%, transparent) 76%,
      transparent 100%
    );
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:245) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:246) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:247) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }

    /* Single-media cards skip the slideshow wrappers, so stretch the plain
     * media container directly to fill the editorial cell. The multi-media
     * container sits under slideshow-component and is unaffected. */
    .card-gallery > a > .product-media-container {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:248) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:fly-to-cart-styles (INDEX:249) */
/* Fly to cart animation */
  fly-to-cart {
    --offset-y: 10px;

    position: fixed;
    width: var(--width, 40px);
    height: var(--height, 40px);
    left: 0;
    top: 0;
    z-index: calc(infinity);
    pointer-events: none;
    border-radius: var(--style-border-radius-buttons-primary);
    overflow: hidden;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    opacity: 0;
    background-color: var(--color-foreground);
    translate: var(--start-x, 0) var(--start-y, 0);
    transform: translate(-50%, -50%);
    animation-name: travel-x, travel-y, travel-scale;
    animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
    /* cookiegrips: faster than stock 0.6s (carried from base.css when 4.1.3
       moved these rules into this snippet). */
    animation-duration: 0.5s;
    animation-composition: accumulate;
    animation-fill-mode: both;
  }

  fly-to-cart.fly-to-cart--main {
    --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
    --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
    --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
  }

  fly-to-cart.fly-to-cart--quick {
    --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
    --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);

    /* cookiegrips: faster than stock 0.6s. */
    animation-duration: 0.5s;
  }

  fly-to-cart.fly-to-cart--sticky {
    --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
    --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
    --radius: var(--style-border-radius-buttons-primary);

    @media screen and (max-width: 749px) {
      --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
    }

    /* cookiegrips: faster than stock 0.8s. */
    animation-duration: 0.65s;
  }

  @keyframes travel-scale {
    0% {
      opacity: var(--start-opacity, 1);
    }

    5% {
      opacity: 1;
    }

    100% {
      border-radius: 50%;
      opacity: 1;
      transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
    }
  }

  @keyframes travel-x {
    to {
      translate: var(--travel-x, 0) 0;
    }
  }

  @keyframes travel-y {
    to {
      translate: 0 var(--travel-y, 0);
    }
  }
/* END_SNIPPET:fly-to-cart-styles */

/* START_SNIPPET:free-shipping-announcement (INDEX:252) */
.cart-shipping {
    --cart-accent: #1f5ed4;

    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    width: 100%;
  }

  .cart-shipping__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin: 0;
    font-size: var(--font-size--md);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-foreground);
  }

  .cart-shipping__amount {
    font-weight: 700;
    color: var(--cart-accent);
  }

  .cart-shipping__check {
    display: inline-flex;
    flex-shrink: 0;
    width: var(--icon-size-sm, 18px);
    height: var(--icon-size-sm, 18px);
    color: var(--cart-accent);
  }

  .cart-shipping__check svg {
    width: 100%;
    height: 100%;
  }

  .cart-shipping__track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in oklch, var(--color-foreground) 12%, transparent);
  }

  .cart-shipping__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in oklch, var(--cart-accent) 78%, #fff) 0%, var(--cart-accent) 100%);
    transform: scaleX(var(--cart-shipping-progress, 0));
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-shipping__fill {
      transition: none;
    }
  }
/* END_SNIPPET:free-shipping-announcement */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:256) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition:
      background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition:
      background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }

  .gift-card-recipient-form {
    --cg-gift-form-ink: #1a1410;
    --cg-gift-form-accent: #8a3a12;
    --cg-gift-form-line: rgb(26 20 16 / 0.16);

    padding-block: var(--cg-gift-form-pad-t, 0) var(--cg-gift-form-pad-b, 0);
    padding-inline: var(--cg-gift-form-pad-l, 0) var(--cg-gift-form-pad-r, 0);
  }

  .gift-card-recipient-form__fields {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .gift-card-recipient-form legend {
    margin-block-end: 12px;
    color: var(--cg-gift-form-ink);
    font-weight: 700;
  }

  .gift-card-recipient-form__field {
    display: grid;
    gap: 7px;
  }

  .gift-card-recipient-form label {
    color: var(--cg-gift-form-ink);
    font-size: 0.9rem;
    font-weight: 700;
  }

  .gift-card-recipient-form label span {
    margin-inline-start: 6px;
    color: rgb(26 20 16 / 0.64);
    font-size: 0.75rem;
    font-weight: 500;
  }

  .gift-card-recipient-form input,
  .gift-card-recipient-form textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--cg-gift-form-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--cg-gift-form-ink);
    padding: 11px 12px;
    font: inherit;
  }

  .gift-card-recipient-form textarea {
    resize: vertical;
  }

  .gift-card-recipient-form input:focus-visible,
  .gift-card-recipient-form textarea:focus-visible {
    outline: 2px solid var(--cg-gift-form-accent);
    outline-offset: 2px;
  }

  .gift-card-recipient-form p {
    margin: 0;
    color: rgb(26 20 16 / 0.64);
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .gift-card-recipient-form__field-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .gift-card-recipient-form__errors,
  .gift-card-recipient-form__error {
    color: #8a1f11;
  }

  .gift-card-recipient-form__errors {
    margin-block-end: 16px;
    border: 1px solid rgb(138 31 17 / 0.3);
    border-radius: 8px;
    background: color-mix(in oklch, #b0411e 12%, #fbf7ef);
    padding: 14px;
  }

  .gift-card-recipient-form__errors ul {
    margin: 8px 0 0;
    padding-inline-start: 18px;
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:govx (INDEX:258) */
.cart-govx {
    --cart-accent: #ef6238;

    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    width: 100%;
    padding-block-end: var(--padding-md);
    border-block-end: 1px solid color-mix(in oklch, var(--color-foreground) 8%, transparent);
  }

  .cart-govx__logo {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    box-shadow: 0 1px 3px color-mix(in oklch, var(--color-foreground) 18%, transparent);
  }

  .cart-govx__text {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xs);
    min-width: 0;
  }

  .cart-govx__desc {
    font-size: var(--font-size--2xs);
    line-height: 1.4;
    color: color-mix(in oklch, var(--color-foreground) 68%, transparent);
  }

  .cart-govx__link {
    align-self: flex-start;
    font-size: var(--font-size--2xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--cart-accent);
    text-decoration: none;
    border-block-end: 1px solid color-mix(in oklch, var(--cart-accent) 45%, transparent);
    padding-block-end: 1px;
    transition: border-color 0.2s ease;
  }

  .cart-govx__link:hover {
    border-block-end-color: var(--cart-accent);
  }
/* END_SNIPPET:govx */

/* START_SNIPPET:grid-density-controls (INDEX:259) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition:
      background-color var(--animation-speed) ease,
      color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:260) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:261) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-body--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:262) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-overlay);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition:
      transform var(--drawer-animation-speed) ease,
      visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    --menu-drawer-fade-stagger: 0.05s;

    animation: menu-drawer-nav-open var(--drawer-animation-speed) var(--ease-out-quad);
    animation-delay: calc((var(--menu-drawer-animation-index) - 1) * var(--menu-drawer-fade-stagger));
    animation-fill-mode: backwards;
  }

  .menu-drawer-container[open] .cg-nav .menu-drawer__animated-element {
    --cg-nav-fade-speed: 0.16s;
    --cg-nav-fade-stagger: 0.04s;

    animation-duration: var(--cg-nav-fade-speed);
    animation-timing-function: var(--cg-nav-ease);
    animation-delay: calc((var(--menu-drawer-animation-index) - 1) * var(--cg-nav-fade-stagger));
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    outline-color: var(--color-foreground-subdued);
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);

    /* Faint 3% ink tint sets the localization/utility row apart from the link
       list above. Slash-alpha form is required: --color-foreground-rgb is a
       space-separated triplet, so the comma rgba() form would be invalid. */
    background-color: rgb(var(--color-foreground-rgb) / 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }

  /* ============================================================
     cg brand mobile nav (scoped to .cg-nav)
     Restyles the LINK list, submenu toggles, and close button to the
     cookiegrips editorial language. Respects the merchant color scheme
     (themes adaptively off --color-foreground) and injects only the brand
     accent. The featured product/collection cards at the bottom
     (.menu-drawer__featured-content) are intentionally left untouched.
     ============================================================ */
  .cg-nav {
    --cg-nav-accent: #8a3a12;
    --cg-nav-line: color-mix(in oklch, rgb(var(--color-foreground-rgb)) 10%, transparent);
    --cg-nav-tap: color-mix(in oklch, var(--cg-nav-accent) 9%, transparent);
    --cg-nav-ease: cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Close button: push to the top-right, pill tap target, accent press */
  .cg-nav > .menu-drawer__close-button {
    margin-inline: auto var(--padding-sm);
    margin-block-start: var(--padding-xs);
  }

  .cg-nav .menu-drawer__close-button {
    border-radius: 999px;
    color: var(--color-foreground);
    transition:
      background-color 0.3s var(--cg-nav-ease),
      scale 0.3s var(--cg-nav-ease);
  }

  .cg-nav .menu-drawer__close-button:active {
    background: var(--cg-nav-tap);
    scale: 0.92;
  }

  /* Give the link list a touch more top breathing room under the close row */
  .cg-nav .menu-drawer__navigation {
    padding-block-start: var(--padding-xs);
  }

  /* Hairline between top-level items (only when merchant dividers are off,
     so we never stack two lines). Restyle the merchant divider to match. */
  .cg-nav .menu-drawer__menu > .menu-drawer__list-item:not(.menu-drawer__list-item--divider):not(:last-child) {
    border-block-end: 1px solid var(--cg-nav-line);
  }

  .cg-nav .menu-drawer__list-item--divider,
  .cg-nav .menu-drawer__menu-container--divider {
    border-block-end-color: var(--cg-nav-line);
  }

  /* Top-level links: editorial type (smaller than the stock 2xl drawer size),
     grounded press nudge */
  .cg-nav .menu-drawer__menu-item--mainlist {
    padding-inline: var(--padding-2xs);
    transition:
      color 0.3s var(--cg-nav-ease),
      translate 0.3s var(--cg-nav-ease);
  }

  .cg-nav .menu-drawer__menu-item--mainlist .menu-drawer__menu-item-text {
    font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important;
    letter-spacing: -0.01em;
    line-height: 1.15;
  }

  .cg-nav .menu-drawer__menu-item--mainlist:active {
    translate: 4px 0;
    color: var(--cg-nav-accent);
  }

  @media (hover: hover) {
    .cg-nav .menu-drawer__menu-item--mainlist:hover {
      color: var(--cg-nav-accent);
    }
  }

  /* Current page: full ink, matching the desktop bold-black treatment
     (accent stays for hover/press only) */
  .cg-nav .menu-drawer__menu-item[aria-current='page'],
  .cg-nav .menu-drawer__menu-item--active {
    color: var(--color-foreground);
  }

  /* Child/parent label spans carry a muted color; the current page's label
     must inherit the full-ink color above */
  .cg-nav .menu-drawer__menu-item[aria-current='page'] .menu-drawer__menu-item-text,
  .cg-nav .menu-drawer__menu-item--active .menu-drawer__menu-item-text {
    color: inherit;
  }

  /* Current page (top-level): typographic only, bold full-ink (the "bold black"
     highlight). No edge bar or indent (owner prefers clean type-driven hierarchy). */
  .cg-nav .menu-drawer__menu-item--mainlist[aria-current='page'],
  .cg-nav .menu-drawer__menu-item--mainlist.menu-drawer__menu-item--active {
    font-weight: 700;
  }

  /* Child / parent links: quieter, still tappable */
  .cg-nav .menu-drawer__menu-item--child,
  .cg-nav .menu-drawer__menu-item--parent {
    padding-inline: var(--padding-2xs);
    transition:
      color 0.3s var(--cg-nav-ease),
      translate 0.3s var(--cg-nav-ease);
  }

  .cg-nav .menu-drawer__menu-item--child .menu-drawer__menu-item-text,
  .cg-nav .menu-drawer__menu-item--parent .menu-drawer__menu-item-text {
    font-size: 1.0625rem !important;
    color: color-mix(in oklch, rgb(var(--color-foreground-rgb)) 78%, transparent);
  }

  .cg-nav .menu-drawer__menu-item--child:active,
  .cg-nav .menu-drawer__menu-item--parent:active {
    translate: 4px 0;
    color: var(--cg-nav-accent);
  }

  /* Submenu toggle icons: accent, and + rotates to x when its group opens */
  .cg-nav .icon-plus,
  .cg-nav .menu-drawer__menu-item .icon-caret {
    color: var(--cg-nav-accent);
    transition:
      transform 0.3s var(--cg-nav-ease),
      color 0.3s var(--cg-nav-ease);
  }

  .cg-nav details[open] > summary .icon-plus {
    transform: rotate(45deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .cg-nav .menu-drawer__animated-element {
      animation: none !important;
    }

    .cg-nav .menu-drawer__menu-item--mainlist,
    .cg-nav .menu-drawer__menu-item--child,
    .cg-nav .menu-drawer__menu-item--parent,
    .cg-nav .menu-drawer__close-button,
    .cg-nav .icon-plus,
    .cg-nav .menu-drawer__menu-item .icon-caret {
      transition: none !important;
    }

    .cg-nav .menu-drawer__menu-item--mainlist:active,
    .cg-nav .menu-drawer__menu-item--child:active,
    .cg-nav .menu-drawer__menu-item--parent:active {
      translate: none;
    }

    .cg-nav details[open] > summary .icon-plus {
      transform: none;
    }
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:268) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition:
        filter 1.6s var(--animation-timing-fade-in),
        opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:271) */
.facets__bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--variant-picker-swatch-height) / 1.5);
    min-width: 20px;
    padding: 0 6px;
    border-radius: 20px;
    font-family: var(--font-body--family);
    font-size: var(--font-size--xs);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .facets__bubble svg {
    width: 12px;
    height: 12px;
  }

  .show-more__button {
    color: var(--color-foreground);
    cursor: pointer;
  }

  .show-more__button:hover {
    @media screen and (min-width: 750px) {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
    }
  }

  .show-more__label {
    text-align: start;
    font-size: var(--font-size--body-md);
    font-family: var(--font-body--family);
  }

  .show-more__button .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .show-more[data-expanded='true'] .show-more__label--more,
  .show-more[data-expanded='false'] .show-more__label--less {
    display: none;
  }

  .show-more__button .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }

  .facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition:
      border-color 0.2s ease,
      background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: var(--color-foreground-subdued);
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .facets .checkbox .checkbox__label-text {
    transition:
      color 0.2s ease,
      font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition:
      color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:272) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-foreground);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector--top-shadow::before {
    content: '';
    box-shadow: 0 0 10px var(--color-shadow);
    position: absolute;
    z-index: var(--layer-lowest);
    inset: 0;
    clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:273) */
.media-block {
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 750px) {
      min-height: var(--media-height);
    }
  }

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:278) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:279) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
    isolation: isolate;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition:
      color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition:
        background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition:
        left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      )::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      ) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

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

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:280) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition:
      opacity var(--animation-values),
      display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:payment-terms-styles (INDEX:281) */
form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_SNIPPET:payment-terms-styles */

/* START_SNIPPET:pills-styles (INDEX:282) */
/* Pills (used in facets and predictive search) */

  .pills__pill {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

    color: var(--color-foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 48px;
    padding: 6px 12px;
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
    background-color: var(--pills-pill-background-color);
    transition: background-color var(--animation-speed) var(--animation-easing);

    &:hover {
      --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    }

    @media screen and (max-width: 749px) {
      padding: var(--padding-xs) var(--padding-md);
    }
  }

  .pills__pill > .svg-wrapper {
    --close-icon-opacity: 0.4;
    --icon-stroke-width: 1px;

    color: var(--color-foreground);
  }

  .pills__pill--swatch {
    @media screen and (max-width: 749px) {
      padding-inline-start: var(--padding-sm);
    }
  }

  .pills__pill--swatch .swatch {
    margin-right: -4px;
  }

  .pills__pill--desktop-small {
    @media screen and (min-width: 750px) {
      font-size: var(--font-size--xs);
    }
  }
/* END_SNIPPET:pills-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:286) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition:
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: var(--color-foreground-subdued);
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition:
      transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition:
      max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition:
      max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:287) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    color: var(--color-foreground-muted);
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:price (INDEX:288) */
.price,
  .compare-at-price {
    font-variant-numeric: tabular-nums;
  }
/* END_SNIPPET:price */

/* START_SNIPPET:product-badges-styles (INDEX:289) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card-gallery-zoom-details-styles (INDEX:290) */
.product-grid-view-zoom-out--details {
    display: none;
  }

  .product-grid-view-zoom-out--details .h4,
  .product-grid-view-zoom-out--details span,
  .product-grid-view-zoom-out--details s {
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
  }

  .product-grid-view-zoom-out--details span {
    font-weight: 500;
  }

  .product-grid-view-zoom-out--details .h4 {
    line-height: 1.3;
    font-weight: 400;
  }

  .product-grid-view-zoom-out--details > span.h6,
  .product-grid-view-zoom-out--details > div.h6 > product-price {
    display: inline-block;
    line-height: 0;
    margin-top: var(--margin-2xs);
  }

  .product-grid-view-zoom-out--details > span.h6 > *,
  .product-grid-view-zoom-out--details > div.h6 > * > * {
    line-height: 1.2;
  }
/* END_SNIPPET:product-card-gallery-zoom-details-styles */

/* START_SNIPPET:product-card-styles (INDEX:291) */
.product-grid__card.product-grid__card {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--product-card-gap);
    align-items: var(--product-card-alignment);
    text-decoration: none;
    color: var(--color, var(--color-foreground));
    padding-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    overflow: hidden;
  }

  .product-grid__card .group-block > * {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  /* Collection and product list cards have equal heights */
  :is(.product-grid__item, .resource-list__item) .product-card {
    display: grid;
    height: 100%;
  }

  /* Product card title truncation - applied on mobile regardless of view */
  @media screen and (max-width: 749px) {
    :is(.product-card, .product-grid__card) :is(h4, .h4) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
    }
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card-styles */

/* START_SNIPPET:product-grid (INDEX:294) */
/* Product grid */
  .product-grid-container {
    display: block;
    width: 100%;
    padding-block: var(--padding-block-start) var(--padding-block-end);

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  [product-grid-view='default'] {
    --product-grid-gap: 16px;
    --padding-block-start: 24px;
    --padding-block-end: 24px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
  }

  .product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--product-grid-gap);
    margin: auto;
    padding: 0;
    list-style: none;
    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);

      grid-template-columns: var(--product-grid-columns-desktop);
    }
  }

  .product-grid :is(h3, p) {
    margin: 0;
  }

  .product-grid__item {
    border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
  }

  [product-grid-view='default'] .product-grid__item {
    padding-block: 0;
  }

  .product-grid--organic[product-grid-view='default'] .product-grid__item {
    height: fit-content;
  }

  [product-grid-view='zoom-out'] .product-grid__card.product-grid__card {
    row-gap: var(--padding-xs);
  }

  [product-grid-view='mobile-single'],
  .product-grid-mobile--large {
    @media screen and (max-width: 749px) {
      grid-template-columns: 1fr;
    }
  }

  ul[product-grid-view='zoom-out'] .product-grid__card > * {
    display: none;
  }

  [product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(
      10,
      minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    :root:active-view-transition-type(product-grid) {
      details[open] floating-panel-component {
        view-transition-name: panel-content;

        .checkbox *,
        .facets__pill-label {
          transition: none;
        }

        .facets--vertical & {
          view-transition-name: none;
        }
      }

      .product-grid {
        view-transition-name: product-grid;
      }

      footer {
        view-transition-name: footer;
      }

      .product-grid__item,
      floating-panel-component {
        transition: none;
      }
    }
  }

  ::view-transition-group(panel-content) {
    z-index: 1;
  }

  ::view-transition-new(product-grid) {
    animation-delay: 150ms;
    animation-name: fadeInUp;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  results-list[initialized] {
    .product-grid__item {
      transition: opacity var(--animation-speed) var(--animation-easing),
        transform var(--animation-speed) var(--animation-easing);

      @starting-style {
        opacity: 0;
        transform: translateY(10px);
      }
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Product card title truncation - applied only to zoom-out view */
  [product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:295) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  @media screen and (min-width: 750px) {
    .product-information--main-product
      .product-information__grid:not(.product-information__grid--half, .product-information--media-none) {
      --cg-pdp-center-gap: clamp(16px, 1.8vw, 28px);

      column-gap: var(--cg-pdp-center-gap);
      align-items: start;
    }

    .product-information--main-product
      .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: minmax(0, 53fr) minmax(22rem, 47fr);
    }

    .product-information--main-product
      .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: minmax(22rem, 47fr) minmax(0, 53fr);
    }

    .product-information--main-product .product-information__media,
    .product-information--main-product .product-details {
      min-width: 0;
      padding-inline: 0;
    }

    /* Stock .product-information__media is width:0 + min-width:100% so it fills
       its grid cell. The min-width:0 above (needed so the details column can
       shrink) collapses the gallery to width 0 on desktop. Restore the fill. */
    .product-information--main-product .product-information__media {
      width: 100%;
      /* Stretch the media column to the full row height so the sticky gallery
         (media-gallery.sticky-content) has travel room and pins while the
         taller details column scrolls. The grid's `align-items: start` above
         would otherwise size this column to the gallery's own height, leaving
         the sticky element nothing to stick within. Details stays top-aligned. */
      align-self: stretch;
    }

    .product-information--main-product .product-details {
      justify-content: flex-start;
    }

    .product-information--main-product .product-details > .group-block {
      width: min(100%, 34rem);
    }

    /* Freeze the constrained gallery against the header-height first-paint jump.
       `--header-height` starts at the stock 60px default (sections/header.liquid) and
       header.js measures the real header (~156px) a beat later, updating the var. The
       constrained image is sized `100vh - --viewport-offset`, so that one correction
       visibly resized the gallery on load (the "gallery pops/resizes on load" bug,
       most obvious on a slow/cold paint where the LCP-preloaded image lands before the
       header settles). Flooring the header term at the real header height makes first
       paint equal the settled size (no resize) while still tracking a genuinely taller
       header. Steady state is unchanged: the live value already settles at the floor.
       Tune the floor with --cg-pdp-header-floor (default 156px). */
    .product-information--main-product .product-media-container.constrain-height {
      --viewport-offset: max(var(--header-height, 156px), var(--cg-pdp-header-floor, 156px));
    }

    /* Shrink the constrained gallery image so the WHOLE sticky gallery (image +
       bottom thumbnail strip + gallery padding) fits the viewport and the thumbs
       don't clip. Stock sizes the image `100vh - header`, which leaves no room for
       the strip below it. We add the strip + padding to the viewport offset. The
       square image's width tracks its height, so the center-seam hug stays tight.
       Gated on a bottom thumbnail strip being present so single-media galleries
       (e.g. s'morey) keep the full-height image. Tune via --cg-pdp-gallery-reserve.
       Uses the same header floor as above so the strip variant also paints stable. */
    .product-information--main-product
      media-gallery:has(slideshow-controls[thumbnails][pagination-position='center'])
      .product-media-container.constrain-height {
      --viewport-offset: calc(
        max(var(--header-height, 156px), var(--cg-pdp-header-floor, 156px)) + var(--cg-pdp-gallery-reserve, 96px)
      );
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* ============================================================
     Bakery-case showcase (cg). Extends the gift-card page's split-panel
     language to the main PDP: a low-opacity diagonal tint wash over the
     section, with the details rail (all widths) and the sticky gallery
     (desktop) each on a translucent card-cream panel: 1px ink hairline,
     8px form-forward radius, one soft ambient shadow, mirroring
     sections/gift-card-product.liquid. Merchant-controlled through the
     "Bakery case showcase" settings on the Product information section
     (toggle, two tint colors, tint strength); the composed tints arrive
     as --cg-pdp-wash-* vars on the wrapper, and the
     fallbacks below match the schema defaults so the section renders
     the same before a template resave. NOTE: --color-background is a
     FULL rgb() value in this theme; never wrap it in rgb(...) or the
     whole declaration dies at computed-value time. */
  .product-information--main-product.cg-pdp-showcase {
    background:
      linear-gradient(135deg, var(--cg-pdp-wash-1, color-mix(in oklch, #c47a40 14%, transparent)), transparent 64%),
      linear-gradient(315deg, var(--cg-pdp-wash-2, color-mix(in oklch, #8a3a12 12%, transparent)), transparent 66%),
      var(--color-background);
  }

  /* Details rail panel (all widths, like the gift-card content panel).
     Interior spacing stays merchant-owned: the rail group's saved 24px
     block padding and each block's 27px inline inset provide the panel
     padding, so this rule adds chrome only. */
  .product-information--main-product.cg-pdp-showcase .product-details > .group-block {
    border: 1px solid rgb(26 20 16 / 0.16);
    border-radius: 8px;
    background: rgb(255 250 242 / 0.92);
    box-shadow: 0 24px 70px rgb(26 20 16 / 0.08);
  }

  /* Media panel: desktop only (mobile keeps the stock full-bleed
     carousel). The panel rides media-gallery, the sticky element, so it
     travels with the pinned gallery. Vertical padding is the block's
     saved 24px; only a horizontal gutter is added, which changes no
     heights, so the constrained-viewport math and the 96px
     --cg-pdp-gallery-reserve are untouched. */
  @media screen and (min-width: 750px) {
    .product-information--main-product.cg-pdp-showcase .product-information__media media-gallery {
      border: 1px solid rgb(26 20 16 / 0.16);
      border-radius: 8px;
      background: rgb(255 250 242 / 0.92);
      box-shadow: 0 24px 70px rgb(26 20 16 / 0.08);
      padding-inline: clamp(12px, 1.4vw, 20px);
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }

  /* The pinned gallery deliberately keeps a CONSTANT sticky offset (0) and does
     NOT bump to clear the revealed sticky header. The constrain-height image is
     sized `viewport - header`, so pinned at top:0 it reserves exactly enough room
     at the bottom for the thumbnail strip. Bumping the offset to header-height on
     header reveal shoved the whole gallery down and pushed the thumbnails off the
     bottom of the viewport (owner call). The revealed header overlapping the image
     top briefly is the accepted tradeoff. */
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-container-styles (INDEX:296) */
:where(:not(.dialog-zoomed-gallery)) > .product-media-container {
    --slide-width: 100%;

    display: flex;
    aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
    max-height: var(--constrained-height);
    width: var(--slide-width, 100%);

    /* Relative position needed for video and 3d models */
    position: relative;
    overflow: hidden;

    &:where(.constrain-height) {
      /* arbitrary offset value based on average theme spacing and header height */
      --viewport-offset: 400px;
      --constrained-min-height: 300px;
      --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

      margin-right: auto;
      margin-left: auto;
    }

    @supports (--test: round(up, 100%, 1px)) {
      /* width and overflow forces children to shrink to parent width */
      --slide-width: round(up, 100%, 1px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-media-container.constrain-height {
      max-height: none;
    }
  }

  @media screen and (min-width: 750px) {
    .product-media-container.constrain-height {
      --viewport-offset: var(--header-height, 100px);
      --constrained-min-height: 500px;
    }

    body:has(header-component[transparent]) .product-media-container.constrain-height {
      --viewport-offset: 0px;
    }
  }

  .product-media-container img {
    aspect-ratio: inherit;
    object-fit: contain;
  }

  .product-media-container.media-fit-contain img {
    object-position: center center;
  }

  .product-media-container.media-fit {
    --product-media-fit: cover;

    img {
      object-fit: var(--product-media-fit);
    }
  }
/* END_SNIPPET:product-media-container-styles */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:297) */
/* Product Media */
  media-gallery {
    display: block;
    width: 100%;
  }

  :where(media-gallery, .product-grid__item) {
    .media-gallery__grid {
      grid-template-columns: 1fr;
      gap: var(--image-gap);
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--large-first-image .product-media-container:first-child,
    .media-gallery--two-column .product-media-container:only-child {
      /* First child spans 2 columns */
      grid-column: span 2;
    }
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:298) */
.dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  .dialog-zoomed-gallery__dialog {
    view-transition-name: zoom-dialog-ui;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-recommendations-styles (INDEX:300) */
.product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }
/* END_SNIPPET:product-recommendations-styles */

/* START_SNIPPET:quantity-selector-styles (INDEX:301) */
/* Quantity selector */
  .quantity-selector {
    --quantity-selector-width: 124px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    flex: 1 1 var(--quantity-selector-width);
    align-self: stretch;
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
    border-radius: var(--style-border-radius-buttons-secondary);
  }

  .quantity-selector :is(.quantity-minus, .quantity-plus) {
    /* Unset button styles */
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
    color: var(--color-input-text);
  }

  .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-inputs);
    border-end-start-radius: var(--style-border-radius-inputs);
  }

  .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-inputs);
    border-end-end-radius: var(--style-border-radius-inputs);
  }

  .product-details .quantity-selector,
  .quick-add-modal .quantity-selector {
    border-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-minus,
  .quick-add-modal .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-buttons-primary);
    border-end-start-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-plus,
  .quick-add-modal .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-buttons-primary);
    border-end-end-radius: var(--style-border-radius-buttons-primary);
  }

  .quantity-selector .svg-wrapper {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .quantity-selector svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  :is(.quantity-minus, .quantity-plus):active .svg-wrapper {
    transform: scale(0.9);
  }

  .quantity-selector input[type='number'] {
    margin: 0;
    text-align: center;
    border: none;
    appearance: none;
    max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
    border-radius: var(--style-border-radius-buttons);
    color: var(--color-input-text);
    background-color: transparent;
  }

  /* Chrome, Safari, Edge, Opera */
  .quantity-selector input[type='number']::-webkit-inner-spin-button,
  .quantity-selector input[type='number']::-webkit-outer-spin-button {
    appearance: none;
  }

  /* Firefox */
  .quantity-selector input[type='number'] {
    appearance: textfield;
  }
/* END_SNIPPET:quantity-selector-styles */

/* START_SNIPPET:quantity-selector (INDEX:302) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal-styles (INDEX:303) */
#quick-add-dialog {
    display: contents;
  }

  .quick-add-modal__content {
    --style-border-radius-buttons-primary: 8px;
    --style-border-radius-buttons-secondary: 8px;
    --style-border-radius-inputs: 8px;
    --color-input-border: rgb(26 20 16 / 0.16);
  }

  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;

      /* Center the modal on desktop. The modal <dialog> is UA position: fixed,
         so inset: 0 + margin: auto centers it; without this 4.0 leaves it
         pinned top-left. modalSlideInTop only animates translateY/opacity, so
         it doesn't fight the centering. */
      inset: 0;
      margin: auto;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  /* cg: on a wide-but-sub-750 modal (large phone / small tablet / resized
     desktop bottom sheet) the stock 4 equal columns pin the product image to
     1/4 width, so it reads tiny next to the PDP and the right half sits empty.
     Widen the media track so the image becomes a proper hero and the header
     spreads into the freed space. Only the column tracks change, so every item
     keeps its grid position (no overlap). True phones (<460px) keep the stock
     compact split, where a small thumbnail is the right call. */
  @media screen and (min-width: 460px) and (max-width: 749px) {
    .quick-add-modal__content {
      grid-template-columns: 2.1fr 1fr 1fr 1fr;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xs);
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-family: var(--font-heading--family);
      font-size: var(--font-size--lg);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.022em;
      text-wrap: balance;
      color: var(--color-foreground);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation:
        0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn,
        scrollStart 1s linear both,
        scrollEnd 1s linear both,
        detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range:
        normal,
        0px 48px,
        calc(100% - 48px) 100%,
        0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content .variant-option--buttons {
    --variant-picker-button-radius: 8px;
  }

  .quick-add-modal__content
    .variant-option--buttons
    .variant-option__button-label:not(.variant-option__button-label--has-swatch) {
    --color-variant-background: #ffffff;
    --color-variant-border: rgb(26 20 16 / 0.16);
  }

  .quick-add-modal__content .variant-option--buttons legend {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--color-foreground) 88%, transparent);
  }

  .quick-add-modal__content .variant-option__swatch-value {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--color-foreground);
  }

  /* cg: bundle the PDP selected-swatch ink ring into the modal. The modal
     injects the PDP variant picker DOM, but on collection / home pages the
     _product-details block that owns this ring CSS isn't on the page, so the
     cloned swatches fall back to the stock floating outline. Re-declare the
     same near-black hugging ring here so the modal matches the product page.
     Easing inlined: --cg-rail-ease is scoped to .product-details and won't
     resolve in the modal context. */
  .quick-add-modal__content .variant-picker {
    --color-selected-variant-border: #1a1410;
  }

  .quick-add-modal__content .variant-option__button-label--has-swatch:has(:checked) {
    outline: none;
  }

  .quick-add-modal__content .variant-option__button-label--has-swatch .swatch {
    transition: border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .quick-add-modal__content .variant-option__button-label--has-swatch:has(:checked) .swatch {
    border-color: #1a1410;
    border-width: 2.5px;
  }

  /* Hover ring: mirror the PDP hover fix so the modal matches. Hugging ink ring
     on the swatch's own border (no stock floating offset outline / gap), softer
     and thinner than selected, scoped to non-selected swatches. */
  .quick-add-modal__content .variant-option__button-label--has-swatch:not(:has(:checked)):hover {
    outline: none;
  }

  .quick-add-modal__content .variant-option__button-label--has-swatch:not(:has(:checked)):hover .swatch {
    border-color: color-mix(in oklch, #1a1410 50%, transparent);
    border-width: 2px;
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-family: var(--font-heading--family);
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.022em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content :is(.product-details, .product-header) product-price {
    font-family: var(--font-body--family);
    font-size: clamp(1.55rem, 1.2rem + 1.1vw, 1.95rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--color-foreground);
  }

  .quick-add-modal__content :is(.product-details, .product-header) product-price,
  .quick-add-modal__content .product-header .price,
  .quick-add-modal__content .product-header .price-item,
  .quick-add-modal__content .product-header .price__regular,
  .quick-add-modal__content .product-header .price-item--regular,
  .quick-add-modal__content .product-details .price,
  .quick-add-modal__content .product-details .price-item,
  .quick-add-modal__content .product-details .price__regular,
  .quick-add-modal__content .product-details .price-item--regular {
    font-weight: 800;
  }

  /* cg: compact mobile quick-add header polish (image, title, price).
     Scoped to the mobile layout so the desktop gallery column is untouched.
     - Price keeps the PDP's heavier tabular treatment so it never jitters
       across variants.
     - The thumbnail gets a hairline ring + soft lift + concentric radius so
       it reads as a deliberate surface, not a flat white box. The modal media
       is not .product-information--main-product, so it carries no PDP ring. */
  @media screen and (max-width: 749px) {
    .quick-add-modal__content .product-information__media .product-media {
      position: relative;
      border-radius: var(--media-radius);
      box-shadow: 0 2px 10px rgb(0 0 0 / 0.07);
    }

    .quick-add-modal__content .product-information__media .product-media img {
      border-radius: var(--media-radius);
    }

    .quick-add-modal__content .product-information__media .product-media::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--media-radius);
      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
      pointer-events: none;
    }
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
        .buy-buttons-block,
        .buy-buttons-block *,
        .view-product-title,
        .view-product-title *,
        variant-picker,
        variant-picker *,
        product-price,
        product-price *,
        product-inventory,
        product-inventory *,
        .view-more-details__wrapper,
        .view-more-details__wrapper *
      ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }

    /* cg: round the modal media column's left corners to the popover radius.
       The stock rule above only rounds .media-gallery__grid, so slideshow /
       carousel galleries kept square left corners and the modal container
       showed through at the top-left. The column already clips its content
       (overflow-y: auto + sticky containing block), so rounding its left
       corners rounds the visible image edge to match the modal. */
    .quick-add-modal__content .product-information__media {
      border-top-left-radius: var(--style-border-radius-popover, 0);
      border-bottom-left-radius: var(--style-border-radius-popover, 0);
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    --media-radius: var(--style-border-radius-popover, 0);
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* cg: quick-add modal add-to-cart CTA uses the brand burnt sienna.
     Overrides the intermediate button vars (rest + hover) so only the
     modal's primary CTA recolors; the PDP buy buttons are untouched.
     Re-applied after the Horizon 4.0.0 update clobbered it. */
  .quick-add-modal .add-to-cart-button {
    --button-background-color: #8a3a12;
    --button-color: #fbf7ef;
    --button-border-color: #8a3a12;

    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .quick-add-modal .add-to-cart-button:hover {
    --button-background-color: #6f2e0e;
    --button-color: #fbf7ef;
    --button-border-color: #6f2e0e;
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:305) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));
    --quick-add-inset-inline-end: max(
      var(--quick-add-right),
      calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg)))
    );
    --quick-add-inset-block-end: max(
      var(--quick-add-bottom),
      calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg)))
    );

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  /* Hide "Add" button when "Choose" button is shown */
  [data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  /* Hide "Choose" button when "Add" button is shown */
  [data-quick-add-button='add'] .quick-add__button--choose {
    display: none;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  button.quick-add__button {
    --quick-add-collapsed-width: var(--button-size-md);
    --quick-add-icon-width: calc(var(--button-size-md) - 4px);
    --quick-add-expanded-width: max-content;

    display: var(--quick-add-mobile-display, none);
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: linear-gradient(var(--quick-add-background, var(--color-background)) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    width: var(--quick-add-collapsed-width);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    pointer-events: all;
    position: absolute;
    inset-inline-end: var(--quick-add-inset-inline-end);
    inset-block-end: var(--quick-add-inset-block-end);
    max-inline-size: calc(100% - var(--quick-add-inset-inline-end));
    min-inline-size: 0;
    white-space: nowrap;
    backdrop-filter: blur(20px) saturate(180%);
    interpolate-size: allow-keywords;

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: flex;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button > .add-to-cart-icon {
    flex-shrink: 0;
    width: var(--quick-add-icon-width);
    height: 100%;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  @media screen and (min-width: 750px) {
    .quick-add__button:is(:hover, :focus-visible) {
      width: var(--quick-add-expanded-width);
      padding-inline-end: var(--padding-sm);
    }
  }

  .quick-add__button[data-added='true'] {
    width: var(--quick-add-collapsed-width);
    color: transparent;
  }

  .quick-add__button[data-added='true'] > .add-to-cart-icon {
    opacity: 0;
  }

  .quick-add__button[data-added='true'] .add-to-cart__added {
    color: var(--quick-add-foreground, var(--color-foreground));
  }

  @media (prefers-reduced-motion: no-preference) {
    button.quick-add__button {
      /* cg: no width in transition-property; quick-add width changes snap
         (docs/motion-animation.md), stock 4.1.3 animates it. */
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:308) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

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

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:309) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:310) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

    /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */
    margin-block: -16px;
    padding-block: 16px;
  }

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:resource-list-styles (INDEX:311) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list (min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-modal (INDEX:315) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  @media screen and (max-width: 749px) {
    .predictive-search-form__header:focus-within {
      outline: var(--focus-outline-width) solid var(--color-foreground);
      outline-offset: var(--focus-outline-offset);
    }
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within) {
    outline: none;
    box-shadow: none;
  }

  .predictive-search__reset-button:focus-visible,
  .predictive-search__close-modal-button:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  @media (forced-colors: active) {
    .predictive-search-form__header:focus-within,
    .predictive-search-form__header-inner:focus-within,
    .predictive-search__reset-button:focus-visible,
    .predictive-search__close-modal-button:focus-visible {
      outline: 2px solid CanvasText;
    }
  }

  input.search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition:
      opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition:
      background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition:
      transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:316) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:317) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(#header-group > .header-section > #header-component[transparent]):not(
      :has(#header-group > .header-section + .shopify-section)
    )
    #MainContent
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:319) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:321) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:322) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:323) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-current='true'] {
            --color: var(--color-active);
          }
        }

        &:hover {
          --color: var(--color-hover);
        }
      }

      &[aria-current='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-current='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

    &:hover {
      color: var(--color-hover);
    }

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }

  /* Thumbnail scroll paddles (PDP gallery, thumbnail_paddles: true).
     The scroll-hint track keeps the native scroll + edge fade; the paddles add
     an explicit prev/next affordance, shown only while the strip overflows
     (the custom element stamps data-overflowing). Scoped under slideshow-controls
     so it out-specifies the generic `slideshow-controls button` size rule. */
  slideshow-controls .slideshow-controls__paddles {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--gap-2xs);
  }

  slideshow-controls .slideshow-controls__paddles .slideshow-controls__thumbnails-container {
    flex: 1 1 auto;
    min-width: 0;
  }

  slideshow-controls .slideshow-controls__paddle {
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-height: var(--minimum-touch-target);
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: var(--style-border-radius-xs, 8px);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    cursor: pointer;
    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Hidden until the strip actually overflows. */
  slideshow-controls .slideshow-controls__paddles:not([data-overflowing]) .slideshow-controls__paddle {
    display: none;
  }

  slideshow-controls .slideshow-controls__paddle:hover {
    color: var(--color-foreground);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  slideshow-controls .slideshow-controls__paddle:active {
    transform: scale(0.92);
  }

  slideshow-controls .slideshow-controls__paddle:disabled {
    opacity: 0.3;
    cursor: default;
    transform: none;
  }

  slideshow-controls .slideshow-controls__paddle svg {
    width: var(--icon-size-sm, 16px);
    height: auto;
  }

  /* Touch devices swipe the rail; the pointer paddles only add clutter. */
  @media (hover: none) {
    slideshow-controls .slideshow-controls__paddle {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    slideshow-controls .slideshow-controls__paddle {
      transition: none;
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:325) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

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

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover)
    > slideshow-container
    > slideshow-slides
    > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:327) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition:
      grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:strikethrough-variant (INDEX:330) */
/* Pills: one centered 45deg currentColor slash, same angle and gradient
     recipe as the swatch slash below (1.1px core, 0.5px anti-alias ramps).
     Fixed 45deg, NOT to-top-right: the corner-to-corner direction flattens
     with the pill's aspect ratio, while 45deg holds on every pill width and
     rasterizes cleanly at 1x DPI (a shallow near-horizontal band here
     stair-stepped). Painted, not transformed, so wide pills (4 / 12 / 36
     Pack) cannot bleed the line past the border the way the old rotate(8deg)
     bar did. The text span must stay non-positioned so the absolute pseudo
     anchors to the label (position: relative in base.css). */
  .variant-option__button-label:not(.variant-option__button-label--has-swatch):has([data-option-available='false'])
    .variant-option__button-label__text::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      45deg,
      transparent calc(50% - 1.05px),
      currentColor calc(50% - 0.55px),
      currentColor calc(50% + 0.55px),
      transparent calc(50% + 1.05px)
    );
  }

  /* Swatches: cream veil + one soft ink hairline (no halo).
     The veil (background-color) lightens the whole swatch toward the surface,
     so a single 75%-ink line stays legible on dark and light swatches alike.
     The 0.5px gradient ramps anti-alias the diagonal. The pseudo is forced
     into its own stacking context (isolation) above the swatch's own
     background+border, and the swatch clips it to its shape. The OOS swatch
     is also a stacking root (z-index via isolation) so 4.0.0's swatch
     sizing/filter machinery can't bury the slash. */
  .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    filter: saturate(0.65);
  }

  .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background-color: color-mix(in oklch, var(--color-background) 50%, transparent);
    background-image: linear-gradient(
      to top right,
      transparent calc(50% - 1.05px),
      color-mix(in oklch, var(--color-foreground) 75%, transparent) calc(50% - 0.55px),
      color-mix(in oklch, var(--color-foreground) 75%, transparent) calc(50% + 0.55px),
      transparent calc(50% + 1.05px)
    );
  }
/* END_SNIPPET:strikethrough-variant */

/* START_SNIPPET:swatch-styles (INDEX:337) */
/* Swatches */
  .swatch {
    --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
    --min-width-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height: 16px;
    --min-width: 16px;

    /* mobile values */
    --scaling-factor: 0.5;
    --max-swatch-size: 28px;
    --max-pill-size: 20px;
    --max-filter-size: 32px;

    /* From the settings */
    --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
    --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

    /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
    --offset-scaled-width: calc(
      var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
    );
    --offset-scaled-height: calc(
      var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
    );
    --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

    /* width = min(m + sU, (m + s * W'/H' * M'), M) */
    --swatch-width: min(
      calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
      calc(var(--min-width) + var(--offset-scaled-width)),
      var(--max-swatch-size)
    );

    /* height = min(m + sV, (m + s * H'/W' * M'), M) */
    --swatch-height: min(
      calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
      calc(var(--min-height) + var(--offset-scaled-height)),
      var(--max-swatch-size)
    );

    display: block;
    background: var(--swatch-background);
    background-position: var(--swatch-focal-point, center);
    border-radius: var(--variant-picker-swatch-radius);
    border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
    width: var(--swatch-width);
    height: var(--swatch-height);

    /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
    background-size: var(--swatch-width) var(--swatch-height);

    &.swatch--unavailable {
      border-style: dashed;
    }

    &.swatch--unscaled {
      /* for when you want fixed sizing (e.g. pdp) */
      --swatch-width: var(--variant-picker-swatch-width);
      --swatch-height: var(--variant-picker-swatch-height);
    }

    &.swatch--filter {
      --swatch-width: var(--max-filter-size);
      --swatch-height: var(--max-filter-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    &.swatch--pill {
      --swatch-width: var(--max-pill-size);
      --swatch-height: var(--max-pill-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    /* swatches in filters and pills always have a border  */
    &.swatch--filter,
    &.swatch--pill {
      --style-border-swatch-width: var(--variant-picker-border-width);
      --style-border-swatch-style: var(--variant-picker-border-style);
      --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
    }

    &.swatch--variant-image {
      background-size: cover;
    }

    @media screen and (min-width: 750px) {
      /* desktop values */
      --max-swatch-size: 32px;
      --max-pill-size: 16px;
      --max-filter-size: 28px;
      --scaling-factor: 0.65;
    }
  }
/* END_SNIPPET:swatch-styles */

/* START_SNIPPET:text-component-shimmer-styles (INDEX:341) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

  @keyframes text-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */

/* START_SNIPPET:text (INDEX:342) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:344) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-body--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-picker-styles (INDEX:357) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    background-color: var(--color-variant-background);
    color: inherit;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }

  .variant-picker .variant-option--buttons label:has(.swatch) {
    border-radius: var(--variant-picker-swatch-radius);
  }

  /* Variant option component */
  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;

    overflow-list::part(list) {
      padding-block: var(--overflow-list-padding-block, 0);
      padding-inline: var(--overflow-list-padding-inline, 0);
    }
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media screen and (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option--buttons legend,
  .variant-option--dropdowns > label,
  .variant-option[data-testid='variant-option-single'] {
    color: var(--variant-option-label-color, var(--color-foreground));
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued));
  }

  @media (prefers-reduced-motion: no-preference) {
    .variant-option__button-label,
    .variant-option__select-wrapper,
    .variant-option__button-label::before,
    .variant-option__button-label::after,
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }

    .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label::after {
      transition-property: clip-path;
    }

    .variant-option__button-label::before {
      transition-property: border-color;
    }

    .variant-option__select-wrapper,
    .variant-option__button-label {
      transition-property: background-color, border-color, color;
    }
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    cursor: pointer;
    display: flex;
    flex: 0 0 3.25em;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    overflow: clip;
    justify-content: center;
    min-height: 3.25em;
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    gap: 0;

    &:hover,
    &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
      --variant-picker-stroke-color: var(--color-variant-hover-border);

      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

    /* so instead use the layered background image trick */
    &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
      border-width: 0;
    }

    /* ::after/::before act as a fake border for the button style variant */

    /* ::after is the unavailable variant border that clips in */
    &:not(.variant-option__button-label--has-swatch)::before,
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: var(--options-border-width) solid var(--color-selected-variant-border);
      border-radius: inherit;
      pointer-events: none;
      z-index: 2;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
    }

    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
      inset: 0;
    }

    &:not(.variant-option__button-label--has-swatch)::before {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(0 0 0 0);
      border-color: var(--color-variant-border);
      inset: calc(var(--options-border-width) * -1);
    }

    &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
      border-color: var(--color-selected-variant-border);
    }

    /* setting left/right accounts for variant buttons of different widths */
    &:not(:has(:checked)):has(~ label > :checked),
    &:has(:checked):has(~ label > [data-previous-checked='true']) {
      .variant-option__button-label__pill {
        right: 0;
        left: unset;
      }
    }

    &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
    &:has(:checked) ~ label {
      .variant-option__button-label__pill {
        left: 0;
        right: unset;
      }
    }

    &:not(:has(:checked)):has(~ label > :checked) {
      --pill-offset: calc(100% + 1px);
    }

    &:has(:checked) ~ label {
      --pill-offset: calc(-100% - 1px);
    }

    &:has([data-current-checked='true']):first-of-type
      ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
    &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
      --clip: 0 0 0 100%;
    }

    &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
        .variant-option__button-label--has-swatch
      ),
    &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
      --clip: 0 100% 0 0;
    }

    &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  /* wrap around only for 3 or more variants in a row */

  /* the more complex selector rules here produce the wrap around effect for first/last variants */
  .variant-option--buttons:has(:nth-of-type(3)) {
    .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
      --pill-offset: calc(100% + 1px);
    }

    .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
        ~ label:last-of-type > :checked
      ) {
      --pill-offset: calc(-100% - 1px);
    }
  }

  .variant-option__button-label__pill {
    background: var(--color-selected-variant-background);
    position: absolute;
    top: calc(var(--options-border-width) * -1);
    bottom: calc(var(--options-border-width) * -1);
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    transform: translateX(var(--pill-offset, 0));
    /* cookiegrips: width is 100% of the padding box, so the fill stops at the
       inner edge of the left/right border, leaving a thin background-colored gap
       between the fill and the selected border. Bleed the fill outward by the
       border width to close it (vertical edges already covered by the
       -border-width top/bottom). Carried from base.css when 4.1.3 moved these
       rules into this snippet. */
    box-shadow: 0 0 0 var(--options-border-width) var(--color-selected-variant-background);
  }

  .variant-option__button-label__text {
    pointer-events: none;
    text-align: start;
    text-wrap: auto;
    z-index: 2;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);

    padding: 0;
    border: none;
    flex-basis: auto;
    min-height: auto;
  }

  /* Override global label:has(input) display rule with higher specificity */
  .variant-option__button-label--has-swatch:has(input) {
    display: block;
  }

  .variant-option__button-label:has(:checked) {
    --variant-picker-stroke-color: var(--color-selected-variant-border);

    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label:has(:checked):hover {
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);

    .variant-option__button-label__pill {
      background-color: var(--color-selected-variant-hover-background);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid var(--color-variant-hover-border);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg,
  .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
    stroke: rgb(var(--color-variant-text-rgb) / var(--opacity-subdued-text));
  }

  /* Disable the duplicate overlay line so the subdued stroke doesn't double up */
  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg line:last-of-type {
    stroke: none;
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-selected-variant-border);

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-strikethrough-color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));

    background-color: var(--color-selected-variant-background);
    color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked):hover {
    background-color: var(--color-selected-variant-hover-background);
    color: var(--color-selected-variant-hover-text);
  }

  .variant-option__button-label input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .variant-option__button-label svg {
    position: absolute;
    left: var(--options-border-width);
    top: var(--options-border-width);
    height: calc(100% - (var(--options-border-width) * 2));
    width: calc(100% - (var(--options-border-width) * 2));
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
    stroke: var(--variant-strikethrough-color, rgb(var(--color-variant-text-rgb) / var(--opacity-60)));

    line {
      stroke-width: var(--options-border-width);
    }

    /* The second stroke line exists for "motion overlay". Disabled for swatches, remove line to avoid overlapping lines  */
    line:last-of-type {
      stroke: none;
    }
  }

  /* Override for swatch labels to maintain block display */
  .variant-option__button-label--has-swatch:has(input[type='radio']) {
    display: block;
  }

  /* Swatches do not take a background-color since a transparent or missing swatch would end up filled */
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked),
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked):hover {
    background-color: inherit;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:358) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video-background-styles (INDEX:359) */
.video-background,
  .video-background * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .video-background--cover * {
    object-fit: cover;
  }

  .video-background--contain * {
    object-fit: contain;
  }

  @media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:video-background-styles */

/* START_SNIPPET:video-placeholder-styles (INDEX:360) */
.video-placeholder-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  :not(deferred-media) > .video-placeholder-wrapper {
    width: var(--video-placeholder-width);
  }

  .video-placeholder-wrapper > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .video-placeholder-wrapper.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  .video-placeholder-wrapper__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-placeholder-wrapper__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:video-placeholder-styles */

/* START_SNIPPET:volume-pricing-info (INDEX:363) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */