/** Shopify CDN: Minification failed

Line 28035:2 Unexpected "{"
Line 28035:3 Expected identifier but found "%"
Line 28036:54 Unexpected "("
Line 28039:77 Unterminated string token
Line 28044:20 Unterminated string token
Line 28045:3 Expected identifier but found "%"
Line 34113:2 Unexpected "{"
Line 34113:3 Expected identifier but found "%"
Line 34114:40 Unexpected "1px"
Line 34119:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:article-post (INDEX:2) */
/* ================================================================
     Article page — Figma 2691:1154. 1140px column: 746px article, 44px
     gutter, 350px sticky sidebar. All measurements in rem (16px at 1440).
     ================================================================ */
  .section--article-post {
    --full-page-grid-central-column-width: min(71.25rem, calc(100% - 10rem)); /* 1140px */
  }

  /* One root inside the section wrapper: on mobile the wrapper lays its direct
     children out in a row, which would put the navigation beside the article. */
  .article-page {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .article-post {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21.875rem; /* 746 / 350 */
    column-gap: 2.75rem; /* 44px */
    align-items: start;
  }

  .article-post__main {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 48px */
    min-width: 0;
  }

  /* --- Hero ------------------------------------------------------- */
  .article-post__hero {
    aspect-ratio: 16 / 9;
    border-radius: 1.5rem; /* 24px */
    overflow: hidden;
    box-shadow: 10px 10px 20px rgb(0 0 0 / 0.15);
    background: var(--color-sand-100);
  }

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

  /* --- Title block ------------------------------------------------ */
  .article-post__header {
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* 40px */
    padding-block-end: 2.5rem;
    border-block-end: 1px solid var(--color-sand-200);
  }

  .article-post__heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .article-post .article-post__title {
    margin: 0;
    font-family: var(--font-geom--family);
    font-size: 2.5rem; /* 40px — Heading/H2 */
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-teal-800);
    overflow-wrap: anywhere;
  }

  .article-post .article-post__excerpt {
    margin: 0;
    font-size: 1.125rem; /* 18px */
    line-height: 1.5;
    color: var(--color-sea-grey-700);
  }

  .article-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.875rem; /* 30px */
  }

  .article-post__category {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem; /* 10px 20px */
    border: 1px solid var(--color-sand-500);
    border-radius: 5rem;
    background: var(--color-sand-100);
    font-family: var(--font-geom--family);
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: 1rem; /* a 38px pill */
    letter-spacing: 0.02em;
    color: var(--color-teal-800);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--animation-speed) var(--animation-easing);
  }

  .article-post__category:hover {
    background: var(--color-sand-200);
  }

  .article-post__date {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-teal-800);
  }

  /* --- Article body: the design's editorial type over the RTE ------ */
  .article-post__body.rte {
    font-size: 1.125rem; /* 18px — Body/LG */
    line-height: 1.5;
    color: var(--color-sea-grey-700);
    overflow-wrap: anywhere;
  }

  .article-post__body.rte p,
  .article-post__body.rte ul,
  .article-post__body.rte ol {
    margin: 0 0 1.5rem;
    font-size: inherit;
    line-height: inherit;
  }

  .article-post__body.rte ul,
  .article-post__body.rte ol {
    padding-inline-start: 1.5rem;
  }

  .article-post__body.rte li {
    margin: 0;
    line-height: inherit;
  }

  .article-post__body.rte :is(p, ul, ol):last-child {
    margin-block-end: 0;
  }

  .article-post__body.rte :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-geom--family);
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
  }

  .article-post__body.rte h2,
  .article-post__body.rte h1 {
    margin: 3rem 0 1.5rem; /* 48px above a section, 24px to its copy */
    font-size: 1.5rem; /* 24px — Heading/H4 */
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-teal-800);
  }

  .article-post__body.rte h3,
  .article-post__body.rte h4,
  .article-post__body.rte h5,
  .article-post__body.rte h6 {
    margin: 1.5rem 0 0.5rem; /* 24px between sub-sections, 8px to their copy */
    font-size: 1.125rem; /* 18px — Body/LG SemiBold */
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-teal-600);
  }

  .article-post__body.rte > rte-formatter > :first-child,
  .article-post__body.rte > :first-child {
    margin-block-start: 0;
  }

  .article-post__body.rte strong,
  .article-post__body.rte b {
    font-weight: 600;
    color: var(--color-teal-800);
  }

  .article-post__body.rte a:where(:not(.button, .button-secondary)) {
    color: var(--color-teal-600);
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-underline-offset: 0.125rem;
  }

  /* base.css colours RTE links on hover at (0,3,2); this outranks it. */
  .section--article-post .article-post__body.rte :is(p, ul, ol, table, li, td, th) a:where(:not(.button, .button-secondary)):hover {
    color: var(--color-teal-800);
    text-decoration-color: currentcolor;
  }

  /* --- Inline images — Figma 2691:1487 ------------------------------------
     Default: a full-width 24px-radius image, 24px from the copy around it (the
     editor wraps images in <p>, which already carries that margin).
     Editor "align left/right" (float styles) or .img-left/.img-right: the
     312px square beside the text. <figure> + <figcaption>: 14px caption.
     .img-row: 2 or 3 images in a row (square by default; --16x9 / --4x5 /
     --natural). .img-split: text beside a 4:5 image (--reverse flips). */
  /* The margin lives on the image: the editor wraps images in <p> or in a bare
     <div>, and only the former has spacing of its own. Adjacent margins collapse
     with the paragraph's 24px, so text-to-image and image-to-image both read 24px. */
  .article-post__body.rte img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    border-radius: 1.5rem;
  }

  .article-post__body.rte figure img,
  .article-post__body.rte .img-row img,
  .article-post__body.rte .img-split img {
    margin: 0;
  }

  .article-post__body.rte figure {
    margin: 1.5rem 0;
  }

  .article-post__body.rte figcaption {
    margin-block-start: 0.5rem;
    font-size: 0.875rem; /* 14px — Body/SM */
    line-height: 1.5;
    color: var(--color-sea-grey-700);
  }

  /* Floats: the editor writes style="float: left|right"; classes work too. */
  .article-post__body.rte img[style*="float: right"],
  .article-post__body.rte img[style*="float:right"],
  .article-post__body.rte .img-right,
  .article-post__body.rte img[style*="float: left"],
  .article-post__body.rte img[style*="float:left"],
  .article-post__body.rte .img-left {
    width: 41.8%; /* 312 of 746 */
    max-width: 19.5rem;
    margin-block: 0.25rem 1rem;
  }

  .article-post__body.rte img[style*="float: right"],
  .article-post__body.rte img[style*="float:right"],
  .article-post__body.rte .img-right {
    float: right;
    margin-inline: 1.5rem 0;
  }

  .article-post__body.rte img[style*="float: left"],
  .article-post__body.rte img[style*="float:left"],
  .article-post__body.rte .img-left {
    float: left;
    margin-inline: 0 1.5rem;
  }

  .article-post__body.rte img[style*="float: right"],
  .article-post__body.rte img[style*="float:right"],
  .article-post__body.rte img[style*="float: left"],
  .article-post__body.rte img[style*="float:left"],
  .article-post__body.rte .img-right img,
  .article-post__body.rte .img-left img,
  .article-post__body.rte img.img-right,
  .article-post__body.rte img.img-left {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 1rem;
  }

  .article-post__body.rte .img-right img,
  .article-post__body.rte .img-left img {
    width: 100%;
  }

  .article-post__body.rte :is(h1, h2, h3, h4, h5, h6, .img-row, .img-split, .callout, .rte-table-wrapper, table) {
    clear: both;
  }

  /* Rows of 2 or 3 images. */
  .article-post__body.rte .img-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
  }

  .article-post__body.rte .img-row:has(> :nth-child(3)),
  .article-post__body.rte .img-row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .article-post__body.rte .img-row > figure,
  .article-post__body.rte .img-row > p {
    margin: 0;
  }

  .article-post__body.rte .img-row img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 1rem;
  }

  .article-post__body.rte .img-row--16x9 img {
    aspect-ratio: 16 / 9;
  }

  .article-post__body.rte .img-row--4x5 img {
    aspect-ratio: 4 / 5;
  }

  .article-post__body.rte .img-row--natural img {
    aspect-ratio: auto;
  }

  /* Text beside a 4:5 image. */
  .article-post__body.rte .img-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
    margin: 1.5rem 0;
  }

  .article-post__body.rte .img-split > :first-child > :first-child {
    margin-block-start: 0;
  }

  .article-post__body.rte .img-split > :first-child > :last-child {
    margin-block-end: 0;
  }

  .article-post__body.rte .img-split img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 1rem;
  }

  .article-post__body.rte .img-split > figure {
    margin: 0;
  }

  .article-post__body.rte .img-split--reverse > :last-child {
    order: -1;
  }

  .article-post__body.rte blockquote {
    margin: 0 0 1.5rem;
    padding: 0 0 0 1.5rem;
    border-inline-start: 3px solid var(--color-teal-300);
    font-style: normal;
  }

  /* Boxed list — Figma 2691:1300. Wrap a heading + list in <div class="callout">. */
  .article-post__body.rte .callout {
    margin: 3rem 0;
    padding: 2rem;
    border-radius: 1rem;
    background: var(--color-teal-50);
  }

  .article-post__body.rte .callout > :first-child {
    margin-block-start: 0;
  }

  .article-post__body.rte .callout > h2:first-child,
  .article-post__body.rte .callout > h3:first-child {
    margin-block-end: 1.5rem;
    padding-block-end: 1.5rem;
    border-block-end: 1px solid var(--color-teal-200);
  }

  .article-post__body.rte .callout > :last-child {
    margin-block-end: 0;
  }

  /* Tables — Figma 2691:1228. rte-formatter wraps each table so it can scroll. */
  .article-post__body.rte .rte-table-wrapper {
    margin: 1.5rem 0;
    padding-block-end: 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-teal-400) var(--color-sea-grey-100);
  }

  .article-post__body.rte .rte-table-wrapper::-webkit-scrollbar {
    height: 0.5rem;
  }

  .article-post__body.rte .rte-table-wrapper::-webkit-scrollbar-track {
    margin-inline: 0.5rem;
    border-radius: 1.25rem;
    background: var(--color-sea-grey-100);
  }

  .article-post__body.rte .rte-table-wrapper::-webkit-scrollbar-thumb {
    border-radius: 1.25rem;
    background: var(--color-teal-400);
  }

  .article-post__body.rte .rte-table-wrapper > table {
    margin: 0;
  }

  .article-post__body.rte table {
    width: 100%;
    min-width: 40rem;
    margin: 1.5rem 0;
    border: 1px solid var(--color-sand-200);
    border-radius: 1rem;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--color-white);
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
  }

  /* Exported posts mark the header row <tr class="header">, which the site header's global
     `.header { display: block; contain: layout style }` (sections/header.liquid) turns into a block:
     the header cells then sit inside column 1 and the body cells collapse to ~45px columns. */
  .article-post__body.rte tr {
    display: table-row;
    contain: none;
  }

  .article-post__body.rte th,
  .article-post__body.rte td {
    /* The body's overflow-wrap: anywhere lets table auto-layout squeeze a column below a word ("PRODU CT").
       break-word still breaks over-long strings but sizes columns by whole words. */
    overflow-wrap: break-word;
    padding: 0.75rem 1rem;
    border: 0;
    border-block-end: 1px solid var(--color-sand-200);
    border-inline-end: 1px solid var(--color-sand-200);
    text-align: start;
    vertical-align: middle;
  }

  .article-post__body.rte th {
    background: var(--color-sand-100);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-teal-800);
  }

  .article-post__body.rte td {
    color: var(--color-sea-grey-700);
  }

  .article-post__body.rte td:first-child {
    font-weight: 600;
    color: var(--color-teal-800);
  }

  .article-post__body.rte tbody tr:nth-child(even) td {
    background: rgb(247 241 235 / 0.5);
  }

  .article-post__body.rte tr > :last-child {
    border-inline-end: 0;
  }

  .article-post__body.rte tbody tr:last-child td,
  .article-post__body.rte tr:last-child:not(:has(+ *)) > * {
    border-block-end: 0;
  }

  .article-post__body.rte td a {
    font-weight: 500;
  }

  /* --- Closing card — Figma 2691:1324 -------------------------------- */
  .article-post__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1.25rem;
    background: var(--color-sand-100);
  }

  .article-post .article-post__cta-heading {
    max-width: 31.875rem; /* 510px */
    margin: 0;
    font-size: 1.25rem; /* 20px — Heading/H5 */
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-teal-800);
  }

  /* --- Buttons (blog-featured recipe) --------------------------------- */
  .article-post__button {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: 5rem;
    font-family: var(--font-geom--family);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
  }

  .article-post__button svg {
    flex-shrink: 0;
    transition: var(--button-arrow-transition);
  }

  .article-post__button > span {
    display: block;
    line-height: inherit;
  }

  .article-post__button:is(:hover, :focus-visible) svg {
    transform: var(--button-arrow-hover-transform);
  }

  .article-post__button--outline {
    --button-fill-color: var(--color-teal-800);
    --button-fill-under: transparent;

    padding: 0.875rem 1.75rem; /* 14px 28px */
    border: 1px solid var(--color-teal-800);
    font-size: 1rem;
    line-height: 1.125rem; /* 14 + 18 + 14 + borders = 48px */
    color: var(--color-teal-800);
  }

  /* Shared M-button arrow recipe: the 10px glyph drawn at 12.5px inside a 15px
     window, optically centred on the 16px label. */
  .article-post__button--outline svg {
    box-sizing: content-box;
    width: 0.78125rem; /* 12.5px */
    height: 0.78125rem;
    padding: 0.078125rem; /* 1.25px, the rest of the 15px window */
  }

  .article-post__button--outline:hover {
    color: var(--color-white);
  }

  .article-post__button--ghost {
    --button-fill-color: var(--color-white);
    --button-fill-under: rgb(255 255 255 / 0.16);

    padding: 0.625rem 1.25rem; /* 10px 20px */
    border: 1px solid var(--color-white);
    background: rgb(255 255 255 / 0.16);
    font-size: 0.875rem;
    line-height: 1.125rem; /* a 38px button */
    color: var(--color-white);
  }

  .article-post__button--ghost svg {
    width: 0.625rem;
    height: 0.625rem;
  }

  .article-post__button--ghost:hover {
    color: var(--color-teal-800);
  }

  /* --- Sidebar ------------------------------------------------------- */
  /* Sticky under the header. When the sidebar is taller than the viewport the
     script below flips it between top-pinned (scrolling up) and bottom-pinned
     (scrolling down) so the whole table of contents can be reached. */
  .article-post__aside {
    --aside-gap: 1.5rem;

    position: sticky;
    top: calc(var(--header-height, 3.75rem) + var(--aside-gap));
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .article-post__promo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding: 2rem 2rem 3.5rem; /* 32 / 32 / 56 */
    border-radius: 1.5rem;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-teal-500) 0%, var(--color-teal-800) 60%, var(--color-teal-900) 100%);
    color: var(--color-white);
  }

  .article-post__promo-wordmark {
    position: absolute;
    left: -0.6875rem; /* -11px */
    bottom: -1.25rem; /* the top 75px of a 95px-tall SANA show */
    width: 23.6875rem; /* 379px */
    color: var(--color-teal-300);
    opacity: 0.18;
    pointer-events: none;
  }

  .article-post__promo-wordmark svg {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
  }

  .article-post__promo-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .article-post .article-post__promo-heading {
    margin: 0;
    font-size: 2rem; /* 32px */
    font-weight: 700;
    line-height: 1.15;
    color: inherit;
  }

  .article-post .article-post__promo-copy {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5;
    color: inherit;
  }

  .article-post__promo .article-post__button {
    position: relative;
  }

  .article-post__toc {
    padding: 2rem 1.5rem;
    border-radius: 1.5rem;
    background: var(--color-sand-100);
  }

  .article-post__toc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    background: rgb(230 215 195 / 0.6); /* Sand/200 at 60% */
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: var(--color-teal-800);
    cursor: pointer;
    list-style: none;
  }

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

  .article-post__toc-summary svg {
    flex-shrink: 0;
    width: 0.8125rem;
    height: 0.5rem;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .article-post__toc[open] .article-post__toc-summary svg {
    transform: rotate(180deg);
  }

  .article-post__toc-list {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
  }

  .article-post__toc-item {
    border-block-start: 1px solid var(--color-sand-300);
  }

  .article-post__toc-link {
    display: block;
    padding-block: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--color-teal-800);
    text-decoration: none;
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .article-post__toc-link:hover,
  .article-post__toc-link.is-active {
    color: var(--color-teal-600);
  }

  /* The active bar sits in the card's padding so the link never rewraps
     (a height change would throw off the bottom-pinned sidebar). */
  .article-post__toc-link {
    position: relative;
  }

  .article-post__toc-link.is-active::before {
    content: '';
    position: absolute;
    inset-block: 0.75rem;
    inset-inline-start: -1.5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-teal-400);
  }

  /* Anchor jumps land below the sticky header. */
  .article-post__body.rte [id] {
    scroll-margin-block-start: calc(var(--header-height, 3.75rem) + 1.5rem);
  }

  /* --- Previous / next — Figma 2691:1358 ----------------------------- */
  .article-post__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4375rem; /* 39px */
    margin-block-start: 5rem; /* 80px */
    padding-block-start: 3.125rem; /* 50px */
    border-block-start: 1px solid var(--color-sand-300);
  }

  .article-post__nav-link {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    color: var(--color-teal-800);
    text-decoration: none;
  }

  .article-post__nav-label,
  .article-post__nav-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .article-post__nav-link--next .article-post__nav-label {
    text-align: end;
  }

  .article-post__nav-label-short {
    display: none;
  }

  .article-post__nav-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 1rem;
    background: var(--color-teal-50);
    transition: background-color var(--animation-speed) var(--animation-easing);
  }

  .article-post__nav-link:hover .article-post__nav-card {
    background: var(--color-teal-100);
  }

  .article-post__nav-link--next .article-post__nav-card {
    flex-direction: row-reverse;
  }

  .article-post__nav-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.4375rem; /* 55px */
    height: 3.4375rem;
    border: 1px solid var(--color-teal-300);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--color-teal-100) 0%, var(--color-teal-300) 100%);
    color: var(--color-teal-600);
  }

  .article-post__nav-icon svg {
    width: 1.1875rem; /* 19px */
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .article-post__nav-link--prev .article-post__nav-icon svg {
    transform: rotate(180deg);
  }

  .article-post__nav-link--prev:hover .article-post__nav-icon svg {
    transform: rotate(180deg) translateX(0.125rem);
  }

  .article-post__nav-link--next:hover .article-post__nav-icon svg {
    transform: translateX(0.125rem);
  }

  .article-post__nav-title {
    min-width: 0;
  }

  /* ================================================================
     Mobile — Figma 2691:1989. One column, no sidebar, arrow-tile navigation.
     ================================================================ */
  @media screen and (max-width: 749px) {
    .section--article-post {
      --full-page-grid-central-column-width: calc(100% - 2rem);
    }

    .article-post {
      display: block;
    }

    .article-post__aside {
      display: none;
    }

    .article-post__main {
      gap: 2rem;
    }

    .article-post__header {
      gap: 2rem;
      padding-block-end: 2rem;
    }

    .article-post__heading {
      gap: 0.5rem;
    }

    .article-post .article-post__title {
      font-size: 2rem; /* 32px — Mobile/H2 */
    }

    .article-post .article-post__excerpt {
      font-size: 1rem;
    }

    .article-post__body.rte {
      font-size: 1rem;
    }

    .article-post__body.rte h2,
    .article-post__body.rte h1 {
      margin: 2rem 0 1rem;
      font-size: 1.25rem; /* 20px */
      line-height: 1.2;
    }

    .article-post__body.rte h3,
    .article-post__body.rte h4,
    .article-post__body.rte h5,
    .article-post__body.rte h6 {
      margin: 1rem 0 0.5rem;
    }

    .article-post__body.rte .callout {
      margin: 2rem 0;
      padding: 1.5rem;
    }

    .article-post__body.rte .callout > h2:first-child,
    .article-post__body.rte .callout > h3:first-child {
      margin-block-end: 1rem;
      padding-block-end: 1rem;
    }

    .article-post__cta {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    /* Inline images: floats become full-width, rows tighten, splits stack. */
    .article-post__body.rte img {
      border-radius: 1rem;
    }

    .article-post__body.rte img[style*="float: right"],
    .article-post__body.rte img[style*="float:right"],
    .article-post__body.rte .img-right,
    .article-post__body.rte img[style*="float: left"],
    .article-post__body.rte img[style*="float:left"],
    .article-post__body.rte .img-left {
      float: none !important; /* the editor writes float as an inline style */
      width: 100%;
      max-width: none;
      margin: 1rem 0;
    }

    .article-post__body.rte .img-row {
      gap: 0.75rem;
    }

    .article-post__body.rte .img-split {
      grid-template-columns: minmax(0, 1fr);
    }

    .article-post__body.rte .img-split--reverse > :last-child {
      order: 0;
    }

    .article-post__nav {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin-block-start: 2.5rem;
      padding-block-start: 2rem;
    }

    .article-post__nav-link {
      flex-direction: row;
      align-items: center;
      gap: 1rem;
    }

    .article-post__nav-link--prev {
      flex-direction: row-reverse;
    }

    .article-post__nav-label-full,
    .article-post__nav-title {
      display: none;
    }

    .article-post__nav-label-short {
      display: inline;
    }

    .article-post__nav-card,
    .article-post__nav-link:hover .article-post__nav-card {
      gap: 0;
      padding: 0;
      background: none;
    }

    .article-post__nav-spacer {
      display: none;
    }
  }
/* END_SECTION:article-post */

/* START_SECTION:blog-carousel (INDEX:3) */
/* ------------------------------------------------------------------ *
   * Section shell — same teal band recipe as related-products
   * ------------------------------------------------------------------ */
  .blog-carousel {
    /* Figma: 80px gutter / 48px row gap / 404px card / 32px card gap / 55px arrow */
    --bc-gutter: var(--bc-gutter-desktop, 5rem);
    --bc-gap: var(--bc-gap-desktop, 3rem);
    --bc-card-width: 25.25rem; /* 404px */
    --bc-card-gap: 2rem; /* 32px */
    --bc-card-radius: 1.25rem; /* 20px */
    --bc-arrow-size: 3.4375rem; /* 55px */

    position: relative;
    display: block;
    color: #fff;
  }

  /* The texture multiplies into the gradient at 80% opacity — same layering
     rationale as .related-products__background. */
  .blog-carousel__background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--color-teal-800);
    background-image: linear-gradient(
      186.26deg,
      var(--color-teal-500) 1.59%,
      var(--color-teal-700) 29.74%,
      var(--color-teal-800) 56.45%,
      var(--color-teal-900) 96.97%
    );
  }

  .blog-carousel__texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .blog-carousel .blog-carousel__inner {
    position: relative;
    z-index: 1;
    row-gap: var(--bc-gap);
    /* Horizontal padding is applied per row — the carousel bleeds past it. */
    padding-inline: 0;
  }

  /* ------------------------------------------------------------------ *
   * Header row — heading + "View All Blogs" pill
   * ------------------------------------------------------------------ */
  .blog-carousel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: var(--bc-gutter);
  }

  /* Figma Headling/H3 — 36px/1.2 desktop, 24px/1.1 mobile via the h3 preset. */
  .blog-carousel .blog-carousel__heading {
    margin: 0;
    color: #fff;
    font-family: var(--font-h3--family);
    font-style: var(--font-h3--style);
    font-size: var(--font-h3--size);
    font-weight: var(--font-h3--weight);
    line-height: var(--font-h3--line-height);
    letter-spacing: var(--font-h3--letter-spacing);
    text-transform: var(--font-h3--case);
  }

  /* Figma Button/Secondary/M/outline. .button-fill opts the pill into the theme's
     shared radial hover wipe. */
  .blog-carousel .blog-carousel__cta {
    --button-fill-color: #fff;
    --button-fill-under: transparent;

    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.625rem; /* 10px */
    padding: 0.875rem 1.75rem; /* 14px 28px */
    border: 1px solid #fff;
    border-radius: 5rem; /* 80px */
    color: #fff;
    background: transparent;
    font-family: var(--font-geom--family);
    font-size: 1rem; /* 16px */
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--letter-spacing--002);
    text-decoration: none;
    white-space: nowrap;
  }

  .blog-carousel .blog-carousel__cta:is(:hover, :focus-visible) {
    color: var(--color-teal-900);
  }

  .blog-carousel .blog-carousel__cta[aria-disabled='true'] {
    cursor: default;
  }

  /* 15px window over the 10px arrow glyph — the shared button-arrow recipe. */
  .blog-carousel .blog-carousel__cta::after {
    content: '';
    flex-shrink: 0;
    width: 0.9375rem; /* 15px */
    height: 0.9375rem;
    background-color: currentcolor;
    mask: var(--bc-arrow-icon) center / 0.78125rem 0.78125rem no-repeat;
    transition: var(--button-arrow-transition);
  }

  .blog-carousel .blog-carousel__cta:is(:hover, :focus-visible)::after {
    transform: var(--button-arrow-hover-transform);
  }

  .blog-carousel__cta-label--mobile {
    display: none;
  }

  /* ------------------------------------------------------------------ *
   * Carousel — track starts at the gutter, runs off the right edge
   * ------------------------------------------------------------------ */
  .blog-carousel__track {
    --gutter-slide-width: var(--bc-gutter);
    --slideshow-gap: var(--bc-card-gap);

    row-gap: var(--bc-gap);
  }

  /* slideshow-container paints --color-background by default, which would cover
     the section gradient. */
  .blog-carousel .blog-carousel__track slideshow-container {
    background: transparent;
  }

  .blog-carousel .blog-carousel__track slideshow-slides {
    align-items: stretch;
  }

  /* `flex` has to be restated, not just `--slide-width` — base.css's own
     slideshow-slide rule sets a flex-basis that wins over width. The block
     padding keeps the card's drop shadow clear of the track's clip. */
  .blog-carousel .blog-carousel__slide {
    --slide-width: var(--bc-card-width);

    display: flex;
    width: var(--bc-card-width);
    flex: 0 0 var(--bc-card-width);
    max-height: none;
    height: auto;
    overflow: visible;
    scroll-snap-align: start;
  }

  /* ------------------------------------------------------------------ *
   * Blog card
   * ------------------------------------------------------------------ */
  .blog-carousel__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: var(--bc-card-radius);
    background: #fff;
    box-shadow: 0.5rem 0.5rem 0.9375rem rgb(0 0 0 / 0.15); /* 8px 8px 15px */
  }

  .blog-carousel__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9; /* 404 x 227 */
    overflow: hidden;
  }

  .blog-carousel__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .blog-carousel__image--placeholder {
    background: var(--color-sand-50);
  }

  .blog-carousel__image--placeholder svg {
    width: 100%;
    height: 100%;
  }

  .blog-carousel__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1.875rem; /* 30px */
    padding: 1.5rem; /* 24px */
  }

  .blog-carousel__text {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
  }

  /* Figma Headling/H4 — 24px/1.25 */
  .blog-carousel .blog-carousel__title {
    margin: 0;
    color: var(--color-teal-800);
    font-family: var(--font-geom--family);
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    line-height: var(--line-height--125);
    letter-spacing: 0;
  }

  .blog-carousel__title-link {
    color: inherit;
    text-decoration: none;
  }

  .blog-carousel__title-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.125rem;
  }

  /* The comp's excerpt reads Blue/900 — a one-off outside the Sana scales. */
  .blog-carousel__excerpt {
    margin: 0;
    color: #001a38;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    line-height: var(--line-height--150);
  }

  /* Figma Button/Primary/SM. The auto margin pins the pill to the card's bottom
     edge so buttons align across cards of unequal copy. */
  .blog-carousel .blog-carousel__read-more {
    --button-fill-color: var(--color-teal-900);
    --button-fill-under: var(--color-teal-800);

    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.625rem; /* 10px */
    margin-block-start: auto;
    padding: 0.625rem 1.25rem; /* 10px 20px */
    border-radius: 5rem;
    background: var(--color-teal-800);
    color: #fff;
    font-family: var(--font-geom--family);
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--letter-spacing--002);
    text-decoration: none;
    white-space: nowrap;
  }

  .blog-carousel .blog-carousel__read-more::after {
    content: '';
    flex-shrink: 0;
    width: 0.625rem; /* 10px */
    height: 0.625rem;
    background-color: currentcolor;
    mask: var(--bc-arrow-icon) center / 0.625rem 0.625rem no-repeat;
    transition: var(--button-arrow-transition);
  }

  .blog-carousel .blog-carousel__read-more:is(:hover, :focus-visible)::after {
    transform: var(--button-arrow-hover-transform);
  }

  /* ------------------------------------------------------------------ *
   * Slider navigation — bottom-left desktop, centered mobile
   * ------------------------------------------------------------------ */
  .blog-carousel__nav {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem; /* 12px */
    padding-inline: var(--bc-gutter);
  }

  .blog-carousel .blog-carousel__arrow {
    display: flex;
    width: var(--bc-arrow-size);
    height: var(--bc-arrow-size);
    min-width: 0;
    min-height: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background-color: rgb(43 139 131 / 0.5);
    cursor: pointer;
    transition: background-color var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  .blog-carousel .blog-carousel__arrow:is(:hover, :focus-visible) {
    background-color: rgb(43 139 131 / 0.85);
  }

  .blog-carousel .blog-carousel__arrow[disabled] {
    opacity: 0.4;
    cursor: default;
  }

  .blog-carousel .blog-carousel__arrow .svg-wrapper {
    display: block;
    width: 0.8125rem; /* 13px */
    height: 1.5rem; /* 24px */
  }

  .blog-carousel .blog-carousel__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .blog-carousel .blog-carousel__arrow--previous .svg-wrapper {
    transform: rotate(180deg);
  }

  /* ------------------------------------------------------------------ *
   * Mobile — Figma 2594:659 (390px frame, 393px rem anchor)
   * ------------------------------------------------------------------ */
  @media screen and (max-width: 749px) {
    .blog-carousel {
      --bc-gutter: var(--bc-gutter-mobile, 1rem);
      --bc-gap: var(--bc-gap-mobile, 2rem);
      --bc-card-width: 20.75rem; /* 332px */
      --bc-card-gap: 1rem; /* 16px */
      --bc-arrow-size: 2.5rem; /* 40px */
    }

    .blog-carousel__background {
      background-image: linear-gradient(
        197.4deg,
        var(--color-teal-500) 1.59%,
        var(--color-teal-700) 29.74%,
        var(--color-teal-800) 56.45%,
        var(--color-teal-900) 96.97%
      );
    }

    /* Figma Button/Primary SM */
    .blog-carousel .blog-carousel__cta {
      gap: 0.5rem; /* 8px */
      padding: 0.625rem 1rem; /* 10px 16px */
      font-size: 0.875rem;
    }

    .blog-carousel .blog-carousel__cta::after {
      width: 0.625rem; /* 10px */
      height: 0.625rem;
      mask-size: 0.625rem 0.625rem;
    }

    .blog-carousel__cta-label--desktop {
      display: none;
    }

    .blog-carousel__cta-label--mobile {
      display: inline;
    }

    .blog-carousel__nav {
      justify-content: center;
    }
  }
/* END_SECTION:blog-carousel */

/* START_SECTION:blog-featured (INDEX:4) */
/* ================================================================
     Featured blog posts — Figma 2691:913. 1280px column, Teal/100 band.
     ================================================================ */
  .section--blog-featured {
    --full-page-grid-central-column-width: min(1280px, calc(100% - 160px));
  }

  /* --- Wordmark: a 1286×83 crop of the vector at 15% Teal/400, letters cut at the top --- */
  .blog-featured__wordmark {
    position: absolute;
    top: 0; /* the wrapper's top edge is the band's top edge; its padding sits inside */
    left: 0;
    z-index: 0;
    width: 100%;
    height: 5.1875rem; /* 83px */
    overflow: hidden;
    color: var(--color-teal-400);
    opacity: 0.15;
    pointer-events: none;
  }

  .blog-featured__wordmark svg {
    display: block;
    width: 80.375rem; /* 1286px */
    max-width: none;
    height: 5.1875rem;
  }

  .blog-featured {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 32px */
    font-family: var(--font-geom--family);
  }

  .blog-featured__eyebrow {
    margin: 0;
    color: var(--color-teal-600);
  }

  /* --- Two columns: 687 / 555 with a 38px gutter --- */
  .blog-featured__grid {
    display: grid;
    grid-template-columns: minmax(0, 687fr) minmax(0, 555fr);
    gap: 2.375rem; /* 38px */
    align-items: start;
  }

  /* --- Hero card --- */
  .blog-featured__hero {
    display: flex;
    flex-direction: column;
    border-radius: 1.25rem;
    overflow: hidden;
    background: var(--color-teal-800);
    box-shadow: 10px 10px 17.5px rgb(0 0 0 / 0.1);
  }

  .blog-featured__hero-media {
    display: block;
    aspect-ratio: 16 / 9;
  }

  .blog-featured__hero-media img,
  .blog-featured__card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Figma's gradient export: Teal/800 down the left edge to Teal/500 at the top right. */
  .blog-featured__hero-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem; /* 24px */
    min-height: 18.25rem; /* 292px */
    padding: 2.5rem; /* 40px */
    background: linear-gradient(75deg, var(--color-teal-800) 0%, var(--color-teal-500) 100%);
    color: var(--color-white);
  }

  .blog-featured__hero-copy {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px */
    width: 100%;
  }

  .blog-featured__hero-title {
    margin: 0;
    font-size: 2.25rem; /* 36px — Heading/H3 */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: inherit;
  }

  /* Two lines in the desktop comp, three on mobile. */
  .blog-featured__hero-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
  }

  /* Title links keep the card colour and only underline on hover. */
  .blog-featured__hero-title a,
  .blog-featured__card-title a {
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.15em;
  }

  .blog-featured__hero-title a:hover,
  .blog-featured__card-title a:hover {
    text-decoration: underline;
  }

  /* --- Side cards: 210px square thumbnail, title, date + button row --- */
  .blog-featured__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 24px */
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .blog-featured__card {
    display: flex;
    gap: 1.5rem; /* 24px */
    min-height: 13.125rem; /* 210px */
    border-radius: 1rem;
    overflow: hidden;
    background: var(--color-white);
  }

  .blog-featured__card-media {
    display: block;
    flex: 0 0 13.125rem; /* 210px */
    align-self: stretch;
    min-height: 13.125rem;
  }

  .blog-featured__card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding: 1.5rem 1.5rem 1.5rem 0;
  }

  .blog-featured__card--no-media .blog-featured__card-body {
    padding-inline-start: 1.5rem;
  }

  .blog-featured__card-title {
    margin: 0;
    font-size: 1.25rem; /* 20px — Heading/H5 */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--color-teal-800);
  }

  .blog-featured__card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
  }

  .blog-featured__date {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.02em;
    color: var(--color-teal-500);
    white-space: nowrap;
  }

  /* --- Buttons: UI/Button/Small with the 10px arrow. `button-fill` opts into the
     theme's hover wipe (base.css), so each variant only names its fill colour,
     what it paints beneath the wipe, and the resting/hover text colours. --- */
  .blog-featured__button {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
    padding: 0.625rem 1.25rem; /* 10px 20px */
    border-radius: 5rem;
    font-family: var(--font-geom--family);
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: 1.125rem; /* 18px: a 38px button */
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
  }

  .blog-featured__button svg {
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    transition: var(--button-arrow-transition);
  }

  .blog-featured__button:is(:hover, :focus-visible) svg {
    transform: var(--button-arrow-hover-transform);
  }

  .blog-featured__button--solid {
    --button-fill-color: var(--color-teal-900);
    --button-fill-under: var(--color-teal-800);

    background: var(--color-teal-800);
    color: var(--color-white);
  }

  .blog-featured__button--outline {
    --button-fill-color: var(--color-white);
    --button-fill-under: rgb(255 255 255 / 0.16);

    border: 1px solid var(--color-white);
    background: rgb(255 255 255 / 0.16);
    color: var(--color-white);
  }

  .blog-featured__button--outline:hover {
    color: var(--color-teal-800);
  }

  .blog-featured__empty {
    margin: 0;
    color: var(--color-teal-800);
  }

  /* Figma's 120/125px band: the padding settings stop at 100, so the rest is
     added here (section-padding-ceiling). */
  @media screen and (min-width: 750px) {
    .section--blog-featured > .custom-section-content > .section-content-wrapper {
      padding-block: calc(7.5rem + var(--section-top-offset, 0px)) 7.8125rem;
    }
  }

  /* ================================================================
     Mobile — Figma 2691:1756. 16px gutters, centred eyebrow, stacked
     cards, thumbnails dropped, wordmark full-bleed at 390×65.
     ================================================================ */
  @media screen and (max-width: 749px) {
    .section--blog-featured {
      --full-page-grid-central-column-width: calc(100% - 2rem);
    }

    .blog-featured__wordmark {
      left: -1rem;
      width: calc(100% + 2rem);
      height: 4.0625rem; /* 65px */
    }

    .blog-featured {
      gap: 1.5rem;
    }

    .blog-featured__eyebrow {
      text-align: center;
    }

    .blog-featured__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 1.5rem;
    }

    .blog-featured__hero-panel {
      gap: 1.5rem;
      min-height: 16.875rem; /* 270px */
      padding: 1.5rem;
    }

    .blog-featured__hero-title {
      font-size: 1.5rem; /* 24px — Mobile/H3 */
      line-height: 1.1;
    }

    .blog-featured__hero-text {
      -webkit-line-clamp: 3;
    }

    .blog-featured__card-media {
      display: none;
    }

    .blog-featured__card {
      min-height: 0;
    }

    .blog-featured__card-body {
      gap: 1rem;
      padding: 1.5rem;
    }
  }
/* END_SECTION:blog-featured */

/* START_SECTION:blog-listing (INDEX:5) */
/* ================================================================
     Blog listing — Figma 2691:955. 1280px column on a white → Teal/50 wash.
     ================================================================ */
  .section--blog-listing {
    --full-page-grid-central-column-width: min(1280px, calc(100% - 160px));
  }

  /* Only the .section-background sibling paints (section-background-painting);
     the comp's gradient reaches Teal/50 halfway down and holds it. */
  .section-background:has(+ .section--blog-listing) {
    background-image: linear-gradient(to bottom, var(--color-white) 0%, var(--color-teal-50) 50%);
  }

  .blog-listing {
    display: flex;
    flex-direction: column;
    gap: 4rem; /* 64px */
    font-family: var(--font-geom--family);
  }

  /* --- Heading + pills --- */
  .blog-listing__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem; /* 20px */
  }

  .blog-listing__title {
    margin: 0;
    font-size: 3rem; /* 48px — Heading/H1 */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-teal-800);
  }

  /* The comp's 70px filter row around 36px pills. */
  .blog-listing__filters {
    padding-block: 1.0625rem; /* 17px */
  }

  .blog-listing__filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Button/Primary/SM pills: outline at rest, Teal/800 when active. `button-fill` gives
     the resting pills the theme's fill-up hover (base.css); the active pill already
     wears the fill colour, so its hover is a no-op. */
  .blog-listing__pill {
    --button-fill-color: var(--color-teal-800);
    --button-fill-under: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4375rem 1rem; /* 7px 16px + the 1px border = the comp's 36px pill */
    border: 1px solid var(--color-teal-800);
    border-radius: 5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem; /* 20px: a 36px pill */
    letter-spacing: 0.02em;
    color: var(--color-teal-800);
    text-decoration: none;
    white-space: nowrap;
  }

  .blog-listing__pill:hover,
  .blog-listing__pill.is-active {
    color: var(--color-teal-50);
  }

  .blog-listing__pill.is-active {
    --button-fill-under: var(--color-teal-800);

    background-color: var(--color-teal-800);
  }

  /* --- Two paginated sets (desktop count / mobile count); one is shown per
     viewport. The live set is display: contents so the grid and the pagination
     stay direct children of the .blog-listing flex column. --- */
  .blog-listing__set--desktop {
    display: contents;
  }

  .blog-listing__set--mobile {
    display: none;
  }

  /* --- Card grid: three 405px columns, 32px gutters --- */
  .blog-listing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem; /* 32px */
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .blog-listing__card {
    display: flex;
    flex-direction: column;
    border-radius: 1.25rem;
    overflow: hidden;
    background: var(--color-white);
    box-shadow: 10px 10px 17.5px rgb(0 0 0 / 0.1);
  }

  .blog-listing__media {
    display: block;
    aspect-ratio: 16 / 9;
  }

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

  .blog-listing__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1.875rem; /* 30px */
    padding: 2rem 1.5rem; /* 32px 24px */
  }

  .blog-listing__copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .blog-listing__card-title {
    margin: 0;
    font-size: 1.5rem; /* 24px — Heading/H4 */
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--color-teal-800);
  }

  .blog-listing__card-title a {
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.15em;
  }

  .blog-listing__card-title a:hover {
    text-decoration: underline;
  }

  /* Three lines in the comp; the Liquid truncate is the safety net for no-CSS. */
  .blog-listing__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-blue-900, #001a38);
  }

  .blog-listing__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-block-start: auto;
    padding-inline-end: 0.625rem; /* the comp's 10px inset on the date */
  }

  /* UI/Button/Small with the 10px arrow; same wipe as the featured section. */
  .blog-listing__button {
    --button-fill-color: var(--color-teal-900);
    --button-fill-under: var(--color-teal-800);

    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    border-radius: 5rem;
    background: var(--color-teal-800);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.125rem; /* 18px: a 38px button */
    letter-spacing: 0.02em;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
  }

  .blog-listing__button svg {
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    transition: var(--button-arrow-transition);
  }

  .blog-listing__button:is(:hover, :focus-visible) svg {
    transform: var(--button-arrow-hover-transform);
  }

  .blog-listing__date {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.02em;
    color: var(--color-teal-500);
    white-space: nowrap;
  }

  .blog-listing__empty {
    margin: 0;
    color: var(--color-teal-800);
  }

  /* --- Pagination (V1): 32px squares, Teal/300 rules, gradient on the current page --- */
  .blog-listing__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem; /* 5px */
    padding-block: 2.5rem; /* 40px */
  }

  .blog-listing__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-teal-300);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375rem;
    color: var(--color-teal-800);
    text-decoration: none;
    transition: background-color var(--animation-speed) var(--animation-easing);
  }

  a.blog-listing__page:hover {
    background-color: var(--color-teal-100);
  }

  .blog-listing__page.is-current {
    border-radius: 0.625rem;
    background: linear-gradient(135deg, var(--color-teal-100) 0%, var(--color-teal-300) 100%);
  }

  .blog-listing__page--gap {
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .blog-listing__page.is-disabled {
    opacity: 0.4;
  }

  .blog-listing__page svg {
    width: 1rem;
    height: 1rem;
  }

  /* ================================================================
     Mobile — Figma 2691:1798. Centred H1, pills scroll sideways full-bleed,
     one column of cards, 24px between them.
     ================================================================ */
  @media screen and (max-width: 749px) {
    .section--blog-listing {
      --full-page-grid-central-column-width: calc(100% - 2rem);
    }

    .blog-listing {
      gap: 2rem;
    }

    .blog-listing__header {
      align-items: center;
      gap: 1rem;
    }

    .blog-listing__title {
      font-size: 2.25rem; /* 36px — Mobile/H1 */
      text-align: center;
    }

    /* Inline-size containment stops the non-wrapping pill row (about 1200px of
       pills) from contributing to the wrapper's min-content width; without it
       the grid column, the section and the page all stretch to fit the pills. */
    .blog-listing__filters {
      contain: inline-size;
      align-self: stretch;
      width: calc(100% + 2rem);
      margin-inline: -1rem;
      padding-inline: 1rem;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .blog-listing__filters::-webkit-scrollbar {
      display: none;
    }

    .blog-listing__filter-list {
      flex-wrap: nowrap;
      width: max-content;
      padding-inline-end: 1rem;
    }

    .blog-listing__set--desktop {
      display: none;
    }

    .blog-listing__set--mobile {
      display: contents;
    }

    .blog-listing__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 1.5rem;
    }

    .blog-listing__excerpt {
      -webkit-line-clamp: 4;
    }

    .blog-listing__pagination {
      padding-block: 1.5rem;
    }
  }
/* END_SECTION:blog-listing */

/* START_SECTION:breadcrumbs (INDEX:6) */
.breadcrumbs__nav {
    width: 100%;
  }

  .breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: var(--breadcrumbs-font-size, 0.875rem);
    line-height: 1.4;
    color: var(--color-foreground);
  }

  .breadcrumbs__item {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    overflow-wrap: anywhere;
    gap: 0.5rem;
  }

  .breadcrumbs__item + .breadcrumbs__item::before {
    content: var(--breadcrumbs-separator, '/');
    opacity: 0.6;
    display: inline-block;
    flex-shrink: 0;
  }

  .breadcrumbs__link {
    color: inherit;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 120ms ease;
  }

  .breadcrumbs__link:hover,
  .breadcrumbs__link:focus-visible {
    opacity: 1;
    text-decoration: underline;
  }

  .breadcrumbs__current {
    font-weight: 500;
  }
/* END_SECTION:breadcrumbs */

/* START_SECTION:build-a-box (INDEX:7) */
.section-build-a-box {
    row-gap: var(--gap);
    padding-inline: 0;
  }

  .section-build-a-box .collection-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    row-gap: var(--gap);
    padding-inline: var(--padding-inline-start, 0) var(--padding-inline-end, 0);
  }

  @media screen and (max-width: 749px) {
    .section-build-a-box {
      padding-inline: 0;
      row-gap: var(--mobile-gap, var(--gap));
    }

    .section-build-a-box .collection-tabs {
      padding-inline:
        var(--padding-inline-start-mobile, var(--padding-inline-start, 0))
        var(--padding-inline-end-mobile, var(--padding-inline-end, 0));
      row-gap: var(--mobile-gap, var(--gap));
    }
  }

  .section-build-a-box .collection-tabs__header {
    display: flex;
    flex-direction: column;
    align-items: var(--collection-tabs-header-alignment, center);
    gap: 0.5rem;
    width: 100%;
  }

  .section-build-a-box .collection-tabs__header:empty {
    display: none;
  }

  .section-build-a-box .collection-tabs > .collection-grid-block {
    width: 100%;
  }

  .section-build-a-box .collection-tabs:not([data-hydrated]) > .collection-grid-block ~ .collection-grid-block {
    display: none;
  }

  .section-build-a-box .collection-tabs[data-hydrated] > .collection-grid-block[hidden] {
    display: none;
  }

  .section-build-a-box .collection-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--collection-tabs-alignment, center);
    gap: clamp(1rem, 4vw, 2.5rem);
    width: 100%;
  }

  .section-build-a-box .collection-tabs__tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.5rem 0;
    cursor: pointer;
    color: var(--color-foreground);
    opacity: 0.55;
    border-bottom: 2px solid transparent;
    transition: opacity var(--animation-speed, 0.2s) ease, border-color var(--animation-speed, 0.2s) ease;
  }

  .section-build-a-box .collection-tabs__tab:hover,
  .section-build-a-box .collection-tabs__tab:focus-visible {
    opacity: 1;
  }

  .section-build-a-box .collection-tabs__tab[aria-selected='true'] {
    opacity: 1;
    border-bottom-color: currentColor;
  }

  @media screen and (max-width: 749px) {
    .section-build-a-box .collection-tabs__tab.h6 {
      font-family: var(--font-h7--family);
      font-style: var(--font-h7--style);
      font-weight: var(--font-h7--weight);
      font-size: var(--font-h7--size);
      line-height: var(--font-h7--line-height);
      letter-spacing: var(--font-h7--letter-spacing);
      text-transform: var(--font-h7--case);
    }

    .section-build-a-box .product-quick-add-block .quick-add__button {
      padding-inline: 0;
      white-space: nowrap;
    }

    .section-build-a-box .quick-add__button--choose .add-to-cart-text__content {
      grid-template-columns: 1fr;
    }

    .section-build-a-box .quick-add__button--choose .add-to-cart-text__content span span {
      opacity: 1;
      filter: blur(0);
      translate: 0 0;
    }
  }

  .section-build-a-box .collection-tabs__empty {
    color: var(--color-foreground);
    opacity: 0.6;
    text-align: center;
    padding: 1.5rem 0;
  }

  .section-build-a-box .collection-grid-block__list {
    width: 100%;
  }

  .section-build-a-box .resource-list__item [ref='productTitleLink'] {
    display: block;
    min-height: 2lh;
    @media screen and (max-width: 749px) {
      min-height: 1lh;
    }
  }

  .section-build-a-box .product-card__content > product-price {
    margin-top: auto;
  }
/* END_SECTION:build-a-box */

/* START_SECTION:collection-links (INDEX:12) */
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:collection-tab (INDEX:14) */
.section-collection-tab {
    row-gap: var(--gap);
    /*
      The theme's `.spacing-style` class applies `padding-inline` here, but
      this element is `display: grid` with fixed page-margin side columns —
      so horizontal padding would be absorbed by the margin columns and
      produce no visible change on page-width sections. We zero it here and
      apply horizontal padding on the inner component instead.
    */
    padding-inline: 0;
  }

  .collection-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    row-gap: var(--gap);
    padding-inline: var(--padding-inline-start, 0) var(--padding-inline-end, 0);
  }

  @media screen and (max-width: 749px) {
    .section-collection-tab {
      padding-inline: 0;
      row-gap: var(--mobile-gap, var(--gap));
    }

    .collection-tabs {
      padding-inline:
        var(--padding-inline-start-mobile, var(--padding-inline-start, 0))
        var(--padding-inline-end-mobile, var(--padding-inline-end, 0));
      row-gap: var(--mobile-gap, var(--gap));
    }
  }

  .collection-tabs__header {
    display: flex;
    flex-direction: column;
    align-items: var(--collection-tabs-header-alignment, center);
    gap: 0.5rem;
    width: 100%;
  }

  .collection-tabs__header:empty {
    display: none;
  }

  .collection-tabs > .collection-grid-block {
    width: 100%;
  }

  /*
    Pre-hydration: hide every grid block that has another grid block
    before it. Only the first one is visible on initial paint, so there
    is no flash of all collections.
  */
  .collection-tabs:not([data-hydrated]) > .collection-grid-block ~ .collection-grid-block {
    display: none;
  }

  /* Post-hydration: visibility driven entirely by the [hidden] attribute. */
  .collection-tabs[data-hydrated] > .collection-grid-block[hidden] {
    display: none;
  }

  .collection-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--collection-tabs-alignment, center);
    gap: clamp(1rem, 4vw, 2.5rem);
    width: 100%;
  }

  .collection-tabs__tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.5rem 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-foreground);
    opacity: 0.55;
    border-bottom: 2px solid transparent;
    transition: opacity var(--animation-speed, 0.2s) ease, border-color var(--animation-speed, 0.2s) ease;
  }

  .collection-tabs__tab:hover,
  .collection-tabs__tab:focus-visible {
    opacity: 1;
  }

  .collection-tabs__tab[aria-selected='true'] {
    opacity: 1;
    border-bottom-color: currentColor;
  }

  /*
    Tabs are built in JS with the `.h6` class. On mobile, swap to h7 typography
    so the tab labels match the smaller mobile scale. Same-specificity selector
    wins via source order (this stylesheet is loaded after base.css).
  */
  @media screen and (max-width: 749px) {
    .collection-tabs__tab.h6 {
      font-family: var(--font-h7--family);
      font-style: var(--font-h7--style);
      font-weight: var(--font-h7--weight);
      font-size: var(--font-h7--size);
      line-height: var(--font-h7--line-height);
      letter-spacing: var(--font-h7--letter-spacing);
      text-transform: var(--font-h7--case);
    }

    /*
      Inside the Collection Tabs section the "Choose" quick-add button keeps its
      label visible on mobile (no hover affordance there). Undo the
      .is-visually-hidden-mobile clip and the collapsed grid column from
      quick-add.liquid, drop horizontal button padding, and keep the label on a
      single line.
    */
    .product-quick-add-block .quick-add__button {
      padding-inline: 0;
      white-space: nowrap;
    }

    .section-collection-tab .quick-add__button--choose .add-to-cart-text__content {
      grid-template-columns: 1fr;
    }

    .section-collection-tab .quick-add__button--choose .add-to-cart-text__content span span {
      opacity: 1;
      filter: blur(0);
      translate: 0 0;
    }
  }

  .collection-tabs__empty {
    color: var(--color-foreground);
    opacity: 0.6;
    text-align: center;
    padding: 1.5rem 0;
  }

  .collection-grid-block__list {
    width: 100%;
  }

  /*
    Align prices and CTAs across every card in a row regardless of title
    wrapping or extra blocks (e.g. swatches). Two moves:
    1. Reserve 2 lines of space for each title so the title area height is
       uniform even when only one sibling wraps.
    2. Push the price block to the bottom of the card's flex column via
       `margin-top: auto`; anything after it (typically the quick-add
       button) sticks to it, so prices and buttons share a baseline.
    The card content is already stretched to the row's max height by the
    outer grid, so "bottom" is well-defined.
  */
  .section-collection-tab .resource-list__item [ref='productTitleLink'] {
    display: block;
    min-height: 2lh;
    @media screen and (max-width: 749px) {
      min-height: 1lh;
    }
  }

  .section-collection-tab .product-card__content > product-price {
    margin-top: auto;
  }
/* END_SECTION:collection-tab */

/* START_SECTION:customization-addons (INDEX:17) */
/* Figma paints the band as an image: a Teal/900 → Teal/700 sweep, sampled at its
     corners. background-image, because base.css owns the background sibling's colour. */
  .cz-addons__bg {
    background-image: linear-gradient(160deg, var(--color-teal-900) 0%, var(--color-teal-700) 100%);
  }

  @media screen and (min-width: 750px) {
    .cz-addons__bg {
      background-image: linear-gradient(100deg, var(--color-teal-900) 0%, var(--color-teal-700) 100%);
    }
  }

  .cz-addons__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .cz-addons__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  @media screen and (min-width: 750px) {
    .cz-addons__header {
      flex-direction: row;
      justify-content: space-between;
      gap: 2rem;
    }
  }

  .cz-addons__lockup {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 49.625rem;
    color: var(--color-white);
  }

  @media screen and (min-width: 750px) {
    .cz-addons__lockup {
      gap: 0.375rem;
    }
  }

  /* Headling/H2 40/700/1.15 → Mobile/Heading/H2 32; Headling/H5 20/600/1.3 → 18. */
  .cz-addons__heading {
    margin: 0;
    font-size: var(--font-size--h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    color: inherit;
  }

  .cz-addons__subheading {
    margin: 0;
    font-size: var(--font-size--h5);
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    text-wrap: pretty;
  }

  .cz-addons__button {
    flex-shrink: 0;
  }

  /* Cards: a horizontal scroller bled to the viewport edges below 990px (contain:
     inline-size keeps the non-wrapping row from widening the page), a four-up grid above. */
  .cz-addons__grid {
    display: flex;
    gap: 1rem;
    width: 100%;
    margin: 0 calc(-1 * var(--cz-gutter));
    padding: 0 var(--cz-gutter);
    width: calc(100% + 2 * var(--cz-gutter));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--cz-gutter);
    scrollbar-width: none;
    contain: inline-size;
    list-style: none;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .cz-addons__grid::-webkit-scrollbar {
    display: none;
  }

  .cz-addons__item {
    flex: 0 0 18.875rem;
    scroll-snap-align: start;
  }

  @media screen and (min-width: 990px) {
    .cz-addons__grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.5rem;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: visible;
      contain: none;
    }

    .cz-addons__item {
      flex: none;
      min-width: 0;
    }
  }

  /* One link per card: 302px square, 20px radius, Teal/50 under the photo. */
  .cz-addon {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 1;
    border-radius: 1.25rem;
    background: var(--color-teal-50);
    color: var(--color-white);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
  }

  .cz-addon__media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
  }

  .cz-addon__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform 1.2s var(--cz-ease-out);
  }

  .cz-addon__image--placeholder {
    background: var(--color-teal-100);
  }

  /* Figma's scrim (a 302px gradient PNG): clear to Teal/700 over the bottom 45%. */
  .cz-addon__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(20 107 104 / 0) 55%, rgb(20 107 104 / 0.66) 76%, var(--color-teal-700) 96%);
    transition: opacity 0.45s var(--cz-ease-out);
    pointer-events: none;
  }

  .cz-addon__foot {
    position: relative;
    display: grid;
    padding: 1rem;
  }

  .cz-addon__label,
  .cz-addon__cta {
    grid-area: 1 / 1;
    transition: opacity 0.35s var(--cz-ease-out), transform 0.35s var(--cz-ease-out);
  }

  /* Label pill: Teal/200 → Teal/50 at 15% (glass), 10px radius, Body/Default/Medium. */
  .cz-addon__label {
    display: block;
    padding: 1rem;
    border-radius: 0.625rem;
    background: linear-gradient(-6deg, rgb(179 247 229 / 0.15) 6%, rgb(240 253 250 / 0.15) 75%);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cz-addon__label {
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
  }

  /* Button/Secondary SM: Teal/800 ring, 10 × 20 padding, 14/600 with 2% tracking, 8px arrow.
     Hidden until the card is hovered, 8px below its resting spot. Its own hover is the
     theme's fill wipe (button-fill) in Teal/800 with the label turning white. */
  .cz-addon__cta {
    --button-fill-color: var(--color-teal-800);
    --button-fill-under: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    justify-self: center;
    align-self: center;
    margin: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--color-teal-800);
    border-radius: 5rem;
    background: transparent;
    color: var(--color-teal-800);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(0.5rem);
  }

  /* base.css's button-fill rule sets its own transition list at (0,2,0), which would drop
     the reveal's opacity/transform; restate everything at higher specificity. */
  .cz-addon .cz-addon__foot .cz-addon__cta {
    transition:
      color var(--button-fill-speed) var(--button-fill-easing),
      background-color var(--button-fill-speed) var(--button-fill-easing),
      opacity 0.35s var(--cz-ease-out),
      transform 0.35s var(--cz-ease-out);
  }

  .cz-addon__cta:hover {
    color: var(--color-white);
  }

  .cz-addon__cta-icon {
    display: inline-flex;
    width: 10px;
    height: 10px;
  }

  .cz-addon__cta-icon svg {
    width: 100%;
    height: 100%;
    transition: var(--button-arrow-transition);
  }

  .cz-addon__cta:hover .cz-addon__cta-icon svg {
    transform: var(--button-arrow-hover-transform);
  }

  @media (hover: hover) {
    .cz-addon:hover .cz-addon__image,
    .cz-addon:focus-visible .cz-addon__image {
      transform: scale(1.04);
    }

    .cz-addon:hover .cz-addon__media::after,
    .cz-addon:focus-visible .cz-addon__media::after {
      opacity: 0;
    }

    .cz-addon:hover .cz-addon__label,
    .cz-addon:focus-visible .cz-addon__label {
      opacity: 0;
      transform: translateY(-0.5rem);
    }

    .cz-addon:hover .cz-addon__cta,
    .cz-addon:focus-visible .cz-addon__cta {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cz-addon__image,
    .cz-addon__media::after,
    .cz-addon__label,
    .cz-addon__cta {
      transition: none;
    }
  }
/* END_SECTION:customization-addons */

/* START_SECTION:customization-cta (INDEX:18) */
/* Teal/900 → Teal/800 → Teal/600 → Teal/400 (Figma: -60deg on desktop, -20deg on mobile).
     background-image, because base.css owns the background sibling's colour. */
  .cz-cta__bg {
    background-image: linear-gradient(
      -20deg,
      var(--color-teal-900) 36%,
      var(--color-teal-800) 58%,
      var(--color-teal-600) 88%,
      var(--color-teal-400) 104%
    );
  }

  @media screen and (min-width: 990px) {
    .cz-cta__bg {
      background-image: linear-gradient(
        -60deg,
        var(--color-teal-900) 21%,
        var(--color-teal-800) 55%,
        var(--color-teal-600) 86%,
        var(--color-teal-400) 99%
      );
    }
  }

  .cz-cta.cz-cta {
    overflow: clip;
  }

  /* 628px copy column | 712px photo window on the 1440px canvas, 618px tall. */
  .cz-cta__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
  }

  @media screen and (min-width: 990px) {
    .cz-cta__inner {
      display: grid;
      grid-template-columns: minmax(0, 39.25rem) minmax(0, 44.5rem);
      justify-content: space-between;
      gap: 0;
      height: 38.625rem;
    }
  }

  .cz-cta__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem;
    padding: 3rem 1rem 2rem;
    color: var(--color-white);
  }

  @media screen and (min-width: 990px) {
    .cz-cta__content {
      padding: 7.5rem 3rem 7.5rem 5rem;
    }
  }

  .cz-cta__copy {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Headling/H2 40/700/1.15 in a 476px measure; Body/LG/Regular 18/400/1.5. */
  .cz-cta__heading {
    margin: 0;
    max-width: 29.75rem;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    color: inherit;
  }

  .cz-cta__text {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
    text-wrap: pretty;
  }

  /* Photo window: 198px columns in a 360px window on mobile, 358px columns filling the
     618px band on desktop. */
  .cz-cta__columns {
    --cz-cta-gap: 1rem;

    display: flex;
    justify-content: center;
    gap: var(--cz-cta-gap);
    height: 22.5rem;
    overflow: hidden;
  }

  @media screen and (min-width: 990px) {
    .cz-cta__columns {
      --cz-cta-gap: 1.5rem;

      justify-content: flex-start;
      height: 100%;
    }
  }

  /* Figma's resting offsets: the left column starts 28px (67px) up, the right 99px (196px). */
  .cz-cta__column {
    --cz-cta-offset: -1.75rem;

    flex: 0 0 12.375rem;
  }

  .cz-cta__column--right {
    --cz-cta-offset: -6.1875rem;
  }

  @media screen and (min-width: 990px) {
    .cz-cta__column {
      --cz-cta-offset: -4.1875rem;

      flex-basis: 22.375rem;
    }

    .cz-cta__column--right {
      --cz-cta-offset: -12.25rem;
    }
  }

  .cz-cta__track {
    display: flex;
    flex-direction: column;
    transform: translateY(var(--cz-cta-offset));
  }

  /* The gap is a margin rather than flex gap so the doubled track is exactly twice one
     cycle and a 50% translate lands on the seam. */
  .cz-cta__item {
    aspect-ratio: 3 / 2;
    margin-block-end: var(--cz-cta-gap);
    border-radius: 1.25rem;
    background: var(--color-teal-800);
    overflow: hidden;
  }

  .cz-cta__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cz-cta__image--placeholder {
    background: var(--color-teal-600);
  }

  /* One cycle moves the track by one copy; the duration scales with the column's item
     count so both columns drift at the same speed. */
  @media (prefers-reduced-motion: no-preference) {
    .cz-cta__track {
      animation: cz-cta-up calc(var(--cz-cta-duration, 45s) * var(--cz-cta-items, 3) / 3) linear infinite;
      will-change: transform;
    }

    .cz-cta__column--right .cz-cta__track {
      animation-name: cz-cta-down;
    }

    .cz-cta__columns:hover .cz-cta__track {
      animation-play-state: paused;
    }

    @keyframes cz-cta-up {
      from {
        transform: translateY(var(--cz-cta-offset));
      }

      to {
        transform: translateY(calc(var(--cz-cta-offset) - 50%));
      }
    }

    @keyframes cz-cta-down {
      from {
        transform: translateY(calc(var(--cz-cta-offset) - 50%));
      }

      to {
        transform: translateY(var(--cz-cta-offset));
      }
    }
  }
/* END_SECTION:customization-cta */

/* START_SECTION:customization-equipment-cta (INDEX:19) */
/* Sand/100 → Sand/300 wash (Figma: 5.86deg on desktop, 26deg on mobile). background-image,
     because base.css owns the background sibling's colour. */
  .cz-equipment__bg {
    background-image: linear-gradient(26deg, var(--color-sand-100) 14%, var(--color-sand-300) 114%);
  }

  @media screen and (min-width: 750px) {
    .cz-equipment__bg {
      background-image: linear-gradient(6deg, var(--color-sand-100) 14%, var(--color-sand-300) 114%);
    }
  }

  .cz-equipment.cz-equipment {
    overflow: clip;
  }

  /* Raked-sand texture, multiplied into the wash at the configured opacity. No isolation
     on the section, so the blend sees the background sibling underneath. */
  .cz-equipment__texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .cz-equipment__texture-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: var(--cz-equipment-texture-opacity, 0.3);
    mix-blend-mode: multiply;
  }

  /* Two 720px halves of the 1440px canvas; stacked below 750px with the copy first. */
  .cz-equipment__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
  }

  @media screen and (min-width: 750px) {
    .cz-equipment__inner {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
    }
  }

  /* The cut-out is placed the way Figma places it: scaled past its box and anchored near
     the top-left, so the machines run off the bottom edge. */
  .cz-equipment__media {
    order: 2;
    position: relative;
    height: 16.8rem;
    overflow: hidden;
  }

  .cz-equipment__image {
    position: absolute;
    left: -22.9%;
    top: 0;
    width: 151.5%;
    max-width: none;
    height: auto;
  }

  @media screen and (min-width: 750px) {
    .cz-equipment__media {
      order: 0;
      height: auto;
      min-height: 23rem;
    }

    .cz-equipment__image {
      left: -4.9%;
      top: -6.5%;
      width: 129%;
    }
  }

  .cz-equipment__content {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2.5rem 1rem 0.875rem;
    text-align: center;
  }

  @media screen and (min-width: 750px) {
    .cz-equipment__content {
      order: 0;
      justify-content: center;
      gap: 2rem;
      padding: 6rem 5rem;
    }
  }

  /* Headling/H2 40/700/1.15 on Teal/800 at both sizes. */
  .cz-equipment__heading {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--color-teal-800);
  }
/* END_SECTION:customization-equipment-cta */

/* START_SECTION:customization-formats (INDEX:20) */
.cz-formats__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  /* Mobile stacks copy first, then the two photos side by side (Figma 3067:1401). */
  .cz-formats__media {
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
    align-items: start;
  }

  .cz-formats__content {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  @media screen and (min-width: 990px) {
    .cz-formats__inner {
      grid-template-columns: minmax(0, 40.5rem) minmax(0, 36.25rem);
      justify-content: space-between;
      align-items: center;
      gap: 2rem 3.25rem;
    }

    .cz-formats__media,
    .cz-formats__content {
      order: 0;
    }

    .cz-formats__media {
      gap: 1.5rem;
    }

    .cz-formats__content {
      padding-inline: 1.5rem 3rem;
    }
  }

  /* 172 × 263 frames on mobile, 308 × 447 on desktop; 24px radius (the notched frame's
     is set with its notch variables). */
  .cz-formats__frame {
    position: relative;
    aspect-ratio: 172 / 263;
    border-radius: var(--cz-formats-radius, 1.5rem);
    overflow: hidden;
  }

  @media screen and (min-width: 750px) {
    .cz-formats__frame {
      aspect-ratio: 308 / 447;
    }
  }

  .cz-formats__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cz-formats__frame picture {
    display: contents;
  }

  .cz-formats__image--placeholder {
    background: var(--color-sea-grey-200);
  }

  /* The notch, measured from Figma's mask (2899f383 / d94140bc): a 114 × 58px cut with
     30px fillets on the 308px frame, scaled to 0.56 on the 172px mobile frame. */
  .cz-formats__notched {
    --notch-w: 4rem;
    --notch-h: 2.05rem;
    --notch-r: 1.05rem;
    --notch-slot-w: 3.65rem;
    --notch-slot-h: 1.6rem;
    --notch-icon-w: 2.875rem;
    --cz-formats-radius: 1.05rem;

    position: relative;
  }

  @media screen and (min-width: 750px) {
    .cz-formats__notched {
      --notch-w: 7.125rem;
      --notch-h: 3.65rem;
      --notch-r: 1.875rem;
      --notch-slot-w: 6.5rem;
      --notch-slot-h: 2.7rem;
      --notch-icon-w: 4.1rem;
      --cz-formats-radius: 1.875rem;
    }
  }

  /* Top-right notch: union of two rounded rectangles plus an inverted fillet, the mask
     recipe blocks/image.liquid and sustainability-overview use for their corner notch. */
  .cz-formats__frame--notched {
    mask:
      linear-gradient(#000 0 0) 0 0 / calc(100% - var(--notch-w) - var(--notch-r)) 100% no-repeat,
      linear-gradient(#000 0 0) 0 var(--notch-r) / calc(100% - var(--notch-w)) calc(100% - var(--notch-r)) no-repeat,
      radial-gradient(circle var(--notch-r) at 0 100%, #000 calc(100% - 0.5px), transparent 100%) calc(100% - var(--notch-w)) 0 / var(--notch-r) var(--notch-r) no-repeat,
      linear-gradient(#000 0 0) 0 var(--notch-h) / calc(100% - var(--notch-r)) calc(100% - var(--notch-h)) no-repeat,
      linear-gradient(#000 0 0) 0 calc(var(--notch-h) + var(--notch-r)) / 100% calc(100% - var(--notch-h) - var(--notch-r)) no-repeat,
      radial-gradient(circle var(--notch-r) at 0 100%, #000 calc(100% - 0.5px), transparent 100%) 100% var(--notch-h) / var(--notch-r) var(--notch-r) no-repeat,
      radial-gradient(circle var(--notch-r) at 100% 0, transparent calc(100% - 0.5px), #000 100%) calc(100% - var(--notch-w) + var(--notch-r)) calc(var(--notch-h) - var(--notch-r)) / var(--notch-r) var(--notch-r) no-repeat;
  }

  .cz-formats__notch-icon {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: grid;
    place-items: center;
    width: var(--notch-slot-w);
    height: var(--notch-slot-h);
    color: var(--color-teal-400);
  }

  .cz-formats__notch-icon svg,
  .cz-formats__notch-icon img {
    width: var(--notch-icon-w);
    height: auto;
    max-width: none;
  }

  /* Headling/H1 48/700/1.1 → Mobile/Heading/H1 36. */
  .cz-formats__heading {
    margin: 0;
    font-size: var(--font-size--h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-teal-800);
  }

  @media screen and (min-width: 990px) {
    .cz-formats__heading {
      padding-block-end: 1rem;
    }
  }

  .cz-formats__features {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cz-formats__feature {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Headling/H4 24/600/1.25 on Teal/800; Body/LG/Regular 18/400/1.5 on Sea Grey/700. */
  .cz-formats__feature-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--color-teal-800);
  }

  .cz-formats__feature-text {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
    text-wrap: pretty;
  }

  /* Quote button: Button/Primary (the cz-button-primary recipe) on the column's start edge.
     The column gap is 1rem; the extra 1rem matches the 2rem rhythm of the format list. */
  .cz-formats__actions {
    display: flex;
    justify-content: flex-start;
    margin-block-start: 1rem;
  }

  .cz-formats__actions .cz-formats__button {
    max-width: 100%;
    text-align: center;
    white-space: normal;
  }

  .cz-formats__button > span {
    min-width: 0;
    text-wrap: balance;
  }
/* END_SECTION:customization-formats */

/* START_SECTION:customization-hero (INDEX:21) */
/* Teal/800 under the photo while it loads. background-image, because base.css owns the
     background sibling's background-color. */
  .cz-hero__bg {
    background-image: linear-gradient(var(--color-teal-800), var(--color-teal-800));
  }

  .cz-hero.cz-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: clip;
    isolation: isolate;
  }

  /* Full-bleed media. `overflow: clip` rather than hidden: a hidden box is a scroll
     container and would capture the parallax `view()` timeline. */
  .cz-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    background: linear-gradient(135deg, var(--color-teal-500) 0%, var(--color-teal-800) 100%);
  }

  .cz-hero__media picture {
    display: contents;
  }

  .cz-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }

  /* Figma's wash stack: Teal/800 at 35% on overlay, a screen-blended Teal/400 → Teal/700
     → Teal/800 ramp, then the plain ramp that settles the bottom into Teal/800. */
  .cz-hero__wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .cz-hero__wash--overlay {
    background: rgb(6 76 77 / 0.35);
    mix-blend-mode: overlay;
  }

  .cz-hero__wash--screen {
    background: linear-gradient(183deg, rgb(91 197 173 / 0) 4%, rgb(20 107 104 / 0.58) 42%, var(--color-teal-800) 91%);
    mix-blend-mode: screen;
  }

  .cz-hero__wash--fade {
    background: linear-gradient(
      200deg,
      rgb(91 197 173 / 0) 10%,
      rgb(91 197 173 / 0.4) 32%,
      rgb(43 128 118 / 0.83) 58%,
      var(--color-teal-800) 95%
    );
  }

  @media screen and (min-width: 750px) {
    .cz-hero__wash--screen {
      background: linear-gradient(181deg, rgb(91 197 173 / 0) 4%, rgb(20 107 104 / 0.58) 52%, var(--color-teal-800) 91%);
    }

    .cz-hero__wash--fade {
      background: linear-gradient(
        185deg,
        rgb(91 197 173 / 0) 10%,
        rgb(91 197 173 / 0.4) 32%,
        rgb(43 128 118 / 0.83) 58%,
        var(--color-teal-800) 95%
      );
    }
  }

  /* Parallax: the photo is 20% taller than the band and drifts as the band crosses the
     viewport. Runs on the compositor via the view() timeline; static elsewhere. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .cz-hero--parallax .cz-hero__image {
        height: 120%;
        top: -10%;
        animation: cz-hero-parallax linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
      }
    }
  }

  @keyframes cz-hero-parallax {
    from {
      transform: translate3d(0, -6%, 0);
    }

    to {
      transform: translate3d(0, 6%, 0);
    }
  }

  .cz-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Glass surfaces (panel and cards): white tint over a backdrop blur, a 1px ring that runs
     from bright white at the top-left to almost nothing at the bottom-right (Figma's glass
     stroke), an inner top highlight and a soft drop shadow for depth. The ring is a masked
     pseudo-element so the gradient paints only the border. Panel: 30px radius; cards: 16px. */
  .cz-hero__panel,
  .cz-hero__card {
    position: relative;
    background: rgb(255 255 255 / calc(0.1 * var(--cz-hero-tint, 1)));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.22),
      0 1rem 2.5rem rgb(1 21 21 / 0.16);
  }

  .cz-hero__panel::before,
  .cz-hero__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      135deg,
      rgb(255 255 255 / 0.6) 0%,
      rgb(255 255 255 / 0.14) 48%,
      rgb(255 255 255 / 0.06) 72%,
      rgb(255 255 255 / 0.28) 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  /* Left-aligned on mobile, centred from 750px, as in the two comps. */
  .cz-hero__panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding: 2.5rem 1.5rem;
    border-radius: 1.875rem;
    color: var(--cz-hero-text-color, #fff);
    box-sizing: border-box;
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cz-hero__panel,
    .cz-hero__card {
      -webkit-backdrop-filter: blur(var(--cz-hero-blur, 16px));
      backdrop-filter: blur(var(--cz-hero-blur, 16px));
    }
  }

  @media screen and (min-width: 750px) {
    .cz-hero__panel {
      align-items: center;
      gap: 1.5rem;
      padding: 3.375rem;
      text-align: center;
    }
  }

  .cz-hero__eyebrow,
  .cz-hero__heading,
  .cz-hero__subheading {
    margin: 0;
    color: inherit;
  }

  /* Mobile/Heading/H1 36/700/1.1 → Display/Hero 64/700/1 with 1% tracking. */
  .cz-hero__heading {
    font-size: var(--font-size--h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
  }

  /* Body/LG/Medium 18/500/1.5 → Body/XL/Medium 24/500/1.3. */
  .cz-hero__subheading {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
  }

  @media screen and (min-width: 750px) {
    .cz-hero__heading {
      max-width: 60.25rem;
      font-size: 4rem;
      line-height: 1;
      letter-spacing: 0.01em;
    }

    .cz-hero__subheading {
      max-width: 65.75rem;
      font-size: 1.5rem;
      line-height: 1.3;
    }
  }

  .cz-hero__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media screen and (min-width: 990px) {
    .cz-hero__cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.25rem;
    }
  }

  /* Glass card: 24px padding (32px on desktop), 16px radius, 210px tall on desktop. */
  .cz-hero__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 1rem;
    color: var(--cz-hero-text-color, #fff);
    box-sizing: border-box;
  }

  @media screen and (min-width: 990px) {
    .cz-hero__card {
      min-height: 13.125rem;
      padding: 2rem;
    }
  }

  .cz-hero__card-head {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  /* Mobile/Heading/H4 20/600/1.2 → Headling/H4 24/600/1.25. */
  .cz-hero__card-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: inherit;
    text-wrap: balance;
  }

  /* Body/Default/Regular 16/400/1.5 → Body/LG/Regular 18. */
  .cz-hero__card-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
  }

  @media screen and (min-width: 750px) {
    .cz-hero__card-title {
      font-size: 1.5rem;
      line-height: 1.25;
    }

    .cz-hero__card-text {
      font-size: 1.125rem;
    }
  }

  .cz-hero__actions {
    display: flex;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .cz-hero__actions {
      padding-block-start: 2rem;
    }
  }
/* END_SECTION:customization-hero */

/* START_SECTION:customization-panels (INDEX:22) */
/* The nav bar is full-bleed on a fixed 80px gutter (Figma Navigation/Desktop 2001:385, via
     --nav-bar-padding-inline) and the footer and the product section above both sit on 80 as
     well; this section was still on the theme's default --page-margin of 50px, so the two
     panels overhung the header's content box by 30px each side. Overriding the gutter keeps the
     section's own margin / content / margin grid in charge of the centring, and scoping it to
     the panels class leaves every other use of the generic section type alone. Desktop only —
     below 750px the panels stack and run to the theme's mobile margin.

     --page-width is restated because base.css derives it once, up at the .page-width-* level, as
     `content-width + margin * 2`. The central column is `min(page-width - margin * 2, 100% -
     margin * 2)`, so moving the margin alone leaves the first term built from 50 and subtracted
     with 80 — which caps the content 60px under the 90rem the design asks for once the window is
     wide enough for that term to win. */
  @media screen and (min-width: 750px) {
    .section--customization-panels {
      --page-margin: 80px;
      --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    }
  }

  /* Two panels sitting flush inside one rounded, clipped container. Existing group
     settings cover colour, padding and content; these rules only add what they can't:
     equal-height stretch, the diagonal accent gradient, and the decorative image bleed. */
  .section--customization-panels > .custom-section-content > .section-content-wrapper {
    align-items: stretch;
    overflow: hidden;
    border-radius: 32px;
  }

  .section--customization-panels > .custom-section-content > .section-content-wrapper > .group-block {
    min-height: 448px;
  }

  /* The leading panel butts against the accent panel, so its trailing corners stay square
     and the wrapper's own radius supplies the outer curve.

     `:first-of-type`, not `:first-child`: the wrapper's first element child is the block-scoped
     <style> tag the block renderer emits, so `.group-block:first-child` matches nothing and this
     rule and the mobile one below were both silently dead. The panels are the only DIVs in
     there, so first-of-type is the leading one. */
  .section--customization-panels > .custom-section-content > .section-content-wrapper > .group-block:first-of-type {
    position: relative;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  /* Figma 2123:556 lays the accent panel over the leading one rather than beside it: its left
     corners are rounded, and the wedges outside those corners are filled with the leading
     panel's teal. Butted flush, the wedges expose whatever is behind the pair — the section's
     cream — so the seam reads as a pale notch top and bottom instead of an overlap.

     A box-shadow, not a pseudo-element or a width change:

     - The block renderer puts `overflow: hidden` in the panel's *inline* style, so anything
       drawn outside its box (a ::after at `inset-inline-start: 100%`) is clipped away, and
       inline styles can only be beaten with !important. An element's own box-shadow is not
       clipped by its overflow, so it slips past that.
     - Both panels are sized from their block settings (60/40). Widening the leading one
       re-flows its copy, and pulling the accent left with a negative margin drags it off the
       wrapper's right edge and opens the same gap on the other side. A shadow paints outside
       layout entirely, so both keep the widths the merchant set.

     Offset by the accent's own 32px radius — exactly the strip that shows — and coloured from
     --color-background, the variable the panel's colour setting writes, so an editor colour
     change carries over. The rest of the shadow is covered by the opaque accent above it. */
  @media screen and (min-width: 750px) {
    .section--customization-panels
      > .custom-section-content
      > .section-content-wrapper
      > .group-block:first-of-type {
      box-shadow: 32px 0 0 0 var(--color-background);
    }
  }

  .section--customization-panels > .custom-section-content > .section-content-wrapper > .group-block:last-child {
    z-index: var(--layer-flat);
    border-radius: 32px;
    background-image: linear-gradient(129deg, #5bc5ad 31%, #e6d7c3 84%);
  }

  /* The decorative image slides under the accent panel instead of squeezing the copy. */
  .section--customization-panels .image-block {
    align-self: center;
    margin-inline-end: -140px;
    pointer-events: none;
  }

  /*
   * Figma names this layer "Hover Image" (2123:571): the template stack is parked out of
   * sight and slides into the seam between the two panels when the section is hovered.
   *
   * No extra mask is needed for the resting state. The accent panel is opaque and paints
   * above the leading panel (z-index below), and the negative margin above already tucks
   * the image's trailing edge under it — so translating the image by its own width puts
   * all of it behind the panel, and the wrapper's overflow clip catches anything past the
   * far edge.
   *
   * Hover-capable pointers only, matching the featured card in custom-packaging-grid: a tap
   * on touch leaves :hover stuck on, and on a phone the panels stack so there is no seam to
   * slide out of. Excluding reduced-motion here also means that preference simply leaves the
   * image where the design puts it, visible and still, rather than hiding it outright.
   */
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .section--customization-panels .image-block {
      opacity: 0;
      transform: translateX(100%);
      transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /*
     * Hover is scoped to the rounded two-panel card rather than the .section box, which
     * spans the full page width plus 100px of block padding — triggering from there would
     * fire the reveal with the cursor nowhere near the artwork.
     *
     * :focus-within is the keyboard equivalent: tabbing to any control in either panel
     * counts as being in the section.
     */
    .section--customization-panels
      > .custom-section-content
      > .section-content-wrapper:is(:hover, :focus-within)
      .image-block {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @media screen and (max-width: 989px) {
    .section--customization-panels > .custom-section-content > .section-content-wrapper > .group-block {
      min-height: 420px;
    }
  }

  @media screen and (max-width: 749px) {
    .section--customization-panels > .custom-section-content > .section-content-wrapper,
    .section--customization-panels > .custom-section-content > .section-content-wrapper > .group-block:last-child {
      border-radius: 24px;
    }

    .section--customization-panels > .custom-section-content > .section-content-wrapper > .group-block {
      min-height: 0;
    }

    /* Stacked on mobile, so the leading panel gets its corners back — at whatever the block's
       own corner setting is, not a literal 24px. Its leading corners come from that setting
       (32px as configured) via an inline custom property, and while this rule was dead the two
       matched by default; hard-coding 24 here would now leave the panel lopsided. */
    .section--customization-panels > .custom-section-content > .section-content-wrapper > .group-block:first-of-type {
      border-start-end-radius: var(--border-radius-mobile, 24px);
      border-end-end-radius: var(--border-radius-mobile, 24px);
    }

    .section--customization-panels .image-block {
      margin-inline-end: 0;
    }
  }
/* END_SECTION:customization-panels */

/* START_SECTION:customization-printing (INDEX:23) */
.cz-printing__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  @media screen and (min-width: 750px) {
    .cz-printing__inner {
      gap: 2.5rem;
    }
  }

  /* Headling/H1 48/700/1.1 → Mobile/Heading/H1 36. */
  .cz-printing__heading {
    margin: 0;
    font-size: var(--font-size--h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-teal-800);
  }

  /* The slideshow component holds the pills (its header) and the track. */
  .cz-printing .cz-printing__slideshow {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    --slideshow-gap: 1.5rem;
  }

  /* Filter/Secondary Nav: a row of pills; below 750px it scrolls sideways edge to edge.
     contain: inline-size keeps the non-wrapping row from widening the page. */
  .cz-printing__tabs {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    overflow-x: auto;
    contain: inline-size;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  .cz-printing__tabs::-webkit-scrollbar {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .cz-printing__tabs {
      flex-wrap: wrap;
      gap: 1rem;
      overflow: visible;
      contain: none;
    }
  }

  /* Button/Primary/SM as a tab: 12 × 24 padding, pill, Headling/H5 20/600/1.3 (18 on
     mobile); the idle label is Teal/800 at 50%, the current one sits on Teal/100. */
  .cz-printing__tab {
    flex-shrink: 0;
    margin: 0;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 5rem;
    background: transparent;
    font-family: var(--font-geom--family);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: rgb(6 76 77 / 0.5);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.35s var(--cz-ease-out), color 0.35s var(--cz-ease-out);
  }

  @media screen and (min-width: 750px) {
    .cz-printing__tab {
      font-size: 1.25rem;
    }
  }

  .cz-printing__tab:hover,
  .cz-printing__tab:focus-visible {
    color: var(--color-teal-800);
  }

  .cz-printing__tab[aria-selected='true'] {
    background: var(--color-teal-100);
    color: var(--color-teal-800);
  }

  /* slideshow-container paints --color-background by default; the slides draw their own
     Teal/100 surface, and the clip keeps the 24px radius through the swipe. */
  .cz-printing slideshow-container {
    background: transparent;
    border-radius: 1.5rem;
    overflow: hidden;
  }

  /* `flex` has to be restated, not just `--slide-width` — base.css's own slideshow-slide
     rule sets a flex-basis that wins over width. */
  .cz-printing .cz-printing__slide {
    --slide-width: 100%;

    display: block;
    width: 100%;
    flex: 0 0 100%;
    max-height: none;
    height: auto;
    overflow: visible;
    scroll-snap-align: start;
  }

  /* Features/card: text card | photo, 400px tall on desktop; stacked on mobile. */
  .cz-printing__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    border-radius: 1.5rem;
    background: var(--color-teal-100);
    overflow: hidden;
    box-sizing: border-box;
  }

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

  .cz-printing__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
  }

  @media screen and (min-width: 750px) {
    .cz-printing__card {
      gap: 2rem;
      padding: 3.875rem;
    }
  }

  /* Figma's 74px chip with the 50 × 48 labels mark (60px / 50px on mobile). */
  .cz-printing__chip {
    --cz-chip-icon: 3.125rem;

    width: 3.75rem;
    height: 3.75rem;
  }

  @media screen and (min-width: 750px) {
    .cz-printing__chip {
      width: 4.625rem;
      height: 4.625rem;
    }
  }

  .cz-printing__copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  @media screen and (min-width: 750px) {
    .cz-printing__copy {
      gap: 1.5rem;
    }
  }

  /* Headling/H3 36/600/1.2 → Mobile/Heading/H3 24/1.1. */
  .cz-printing__title {
    margin: 0;
    font-size: var(--font-size--h3);
    font-weight: 600;
    line-height: var(--font-h3--line-height, 1.2);
    letter-spacing: 0;
    color: var(--color-teal-800);
    text-wrap: pretty;
  }

  /* Body/XL/Regular 24/400/1.3 → Body/LG/Regular 18/1.5 on Sea Grey/700. */
  .cz-printing__text {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
    text-wrap: pretty;
  }

  @media screen and (min-width: 750px) {
    .cz-printing__text {
      font-size: 1.5rem;
      line-height: 1.3;
    }
  }

  .cz-printing__media {
    position: relative;
    min-height: 14rem;
    border-radius: 1.5rem;
    overflow: hidden;
  }

  @media screen and (min-width: 750px) {
    .cz-printing__media {
      min-height: 0;
    }
  }

  .cz-printing__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }

  .cz-printing__image--placeholder {
    background: var(--color-teal-200);
  }

  /* Figma's corner shade: transparent to Teal/950 at 20% from the bottom-left. */
  .cz-printing__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(222deg, rgb(0 0 0 / 0) 55%, rgb(1 21 21 / 0.2) 93%);
    pointer-events: none;
  }

  /* Quote button: Button/Primary (the cz-button-primary recipe) centred under the slider.
     The label may wrap on narrow screens rather than widen the page. */
  .cz-printing__actions {
    display: flex;
    justify-content: center;
  }

  .cz-printing__actions .cz-printing__button {
    max-width: 100%;
    text-align: center;
    white-space: normal;
  }

  .cz-printing__button > span {
    min-width: 0;
    text-wrap: balance;
  }
/* END_SECTION:customization-printing */

/* START_SECTION:customization-process (INDEX:24) */
/* Figma paints the band as an image: Teal/100 at the top fading into Sand/100. */
  .cz-process__bg {
    background-image: linear-gradient(180deg, var(--color-teal-100) 0%, var(--color-sand-100) 100%);
  }

  .cz-process__inner {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  @media screen and (min-width: 990px) {
    .cz-process__inner {
      gap: 5rem;
    }
  }

  .cz-process__features {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  /* Headling/H1 48/700/1.1 → Mobile/Heading/H1 36; centred only on desktop. */
  .cz-process__heading {
    margin: 0;
    font-size: var(--font-size--h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-teal-800);
  }

  @media screen and (min-width: 750px) {
    .cz-process__heading {
      text-align: center;
    }
  }

  .cz-process__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

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

  /* Features/card: white, 20px radius, 32px padding, 24px between chip and copy. */
  .cz-process__card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1.25rem;
    background: var(--color-white);
    box-sizing: border-box;
  }

  .cz-process__chip {
    --cz-chip-icon: 2.5rem;
  }

  .cz-process__card-copy {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Headling/H4 24/600/1.25 on Teal/800; Body/LG/Regular 18/400/1.5 on Sea Grey/700. */
  .cz-process__card-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--color-teal-800);
    text-wrap: balance;
  }

  .cz-process__card-text {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
    text-wrap: pretty;
  }

  /* "From Idea to Reorder" panel: white, 24px radius; copy | steps on desktop. The clip
     crops the wordmark at the panel edge, as in Figma. */
  .cz-process__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    border-radius: 1.5rem;
    background: var(--color-white);
    overflow: hidden;
    box-sizing: border-box;
  }

  @media screen and (min-width: 990px) {
    .cz-process__panel {
      grid-template-columns: minmax(0, 34rem) minmax(0, 34.0625rem);
      justify-content: space-between;
      align-items: center;
      gap: 2rem;
      padding: 3.875rem 3rem;
    }
  }

  .cz-process__lead {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  @media screen and (min-width: 990px) {
    .cz-process__lead {
      gap: 1.5rem;
      padding-inline: 3rem;
    }
  }

  .cz-process__panel-heading {
    margin: 0;
    font-size: var(--font-size--h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-teal-800);
  }

  .cz-process__panel-text {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
    text-wrap: pretty;
  }

  /* The "CUSTOM" wordmark: Sand/100 display type pinned to the panel's bottom-left and
     cropped by it. Desktop only — the mobile comp has none. */
  .cz-process__watermark {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .cz-process__watermark {
      position: absolute;
      left: -0.1em;
      bottom: -0.18em;
      z-index: 0;
      display: block;
      font-size: 6.25rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.01em;
      text-transform: uppercase;
      color: var(--color-sand-100);
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
    }
  }

  /* Steps */
  .cz-steps {
    --cz-steps-gap: 2rem;

    position: relative;
    z-index: 1;
    display: block;
  }

  @media screen and (min-width: 990px) {
    .cz-steps {
      --cz-steps-gap: 2.5rem;
    }
  }

  .cz-steps__list {
    display: flex;
    flex-direction: column;
    gap: var(--cz-steps-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cz-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  /* Numbers: a 72px Teal/300 ring on white, with the 56px disc inside — Teal/100 under
     the step's icon, Teal/400 under the check once the step is reached. */
  .cz-step__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid var(--color-teal-300);
    border-radius: 50%;
    background: var(--color-white);
    box-sizing: border-box;
  }

  .cz-step__marker::before {
    content: '';
    position: absolute;
    inset: 0.4375rem;
    border-radius: 50%;
    background: var(--color-teal-100);
    transition: background-color 0.5s var(--cz-ease-out);
  }

  .cz-step__icon,
  .cz-step__check {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    transition: opacity 0.4s var(--cz-ease-out), transform 0.4s var(--cz-ease-out);
  }

  .cz-step__icon svg {
    width: auto;
    height: auto;
    max-width: 2.25rem;
    max-height: 2.25rem;
  }

  /* A custom icon fills Figma's 36px icon frame whatever size the file was exported at —
     an <img> otherwise renders an SVG at its own width attribute, so a 24px export looked
     small and a 144px one was clamped. */
  .cz-step__icon img {
    width: 2.25rem;
    height: 2.25rem;
    max-width: none;
    object-fit: contain;
  }

  /* The built-in icons come from different Figma contexts (white line art for the hero's
     teal chips, Teal/500 for the white cards); on the Teal/100 disc every step reads as the
     same Teal/800 line art, like Figma's own step marks. */
  .cz-step__icon svg path {
    fill: var(--color-teal-800);
  }

  .cz-step__icon svg path[stroke] {
    stroke: var(--color-teal-800);
  }

  .cz-step__check {
    opacity: 0;
    transform: scale(0.6);
  }

  .cz-step__check svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .cz-step.is-done .cz-step__marker::before {
    background: var(--color-teal-400);
  }

  .cz-step.is-done .cz-step__icon {
    opacity: 0;
    transform: scale(0.6);
  }

  .cz-step.is-done .cz-step__check {
    opacity: 1;
    transform: scale(1);
  }

  /* Connector: a dashed Teal/300 line from this marker's centre to the next (it runs
     behind the white rings), with a solid Teal/400 fill that grows down it once the
     step is reached. */
  .cz-step__line {
    position: absolute;
    left: calc(2.25rem - 1px);
    top: 50%;
    z-index: 0;
    width: 2px;
    height: calc(100% + var(--cz-steps-gap));
    background: repeating-linear-gradient(to bottom, var(--color-teal-300) 0 4px, transparent 4px 8px);
  }

  .cz-step__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-teal-400);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.6s var(--cz-ease-out);
  }

  .cz-step.is-done .cz-step__line::after {
    transform: scaleY(1);
  }

  .cz-step__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  /* UI/Eyebrow on Sea Grey/700; Headling/H4 24/600/1.25 → Mobile/Heading/H4 20/1.2. */
  .cz-step__eyebrow {
    color: var(--color-sea-grey-700);
  }

  .cz-step__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--color-teal-800);
    text-wrap: balance;
  }

  @media screen and (min-width: 750px) {
    .cz-step__title {
      font-size: 1.5rem;
      line-height: 1.25;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cz-step__marker::before,
    .cz-step__icon,
    .cz-step__check,
    .cz-step__line::after {
      transition: none;
    }
  }
/* END_SECTION:customization-process */

/* START_SECTION:faq-cta (INDEX:26) */
/* FAQ CTA: the photo sits under a solid teal colour-blend and a diagonal
     gradient (Figma 2651:370), the copy in a frosted 900px panel. */
  .section--faq-cta {
    --full-page-grid-central-column-width: min(1280px, calc(100% - 160px));
  }

  /* The washes live on .section itself (see impact-cta): the content wrapper is
     an isolated compositing group, so a blend layer inside it could never see
     the photo. Explicit z-index keeps them above the background container. */
  .section--faq-cta::before,
  .section--faq-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    pointer-events: none;
  }

  .section--faq-cta::before {
    background: var(--color-teal-800);
    mix-blend-mode: color;
  }

  .section--faq-cta::after {
    background: linear-gradient(34.83deg, rgb(6 76 77 / 0.5) 24.87%, rgb(66 168 153 / 0.4) 68.5%);
  }

  .section--faq-cta > .custom-section-content {
    z-index: var(--layer-raised);
  }

  /* Until a photo is picked, hide the stock placeholder so the teal base shows;
     and opt out of base.css's black mobile scrim, the washes do that job. */
  .section--faq-cta .background-image-container > svg,
  .section--faq-cta .background-image-container::before {
    display: none;
  }

  /* Frosted panel — the Figma export drops the fill; rebuilt from the node render. */
  .faq-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem; /* 32px */
    width: 100%;
    max-width: 56.25rem; /* 900px */
    margin-inline: auto;
    padding: 3rem; /* 48px */
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 2rem;
    background: rgb(255 255 255 / 0.06);
    text-align: center;
    font-family: var(--font-geom--family);
  }

  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .faq-cta {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
  }

  .faq-cta__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
  }

  /* Headling/H2 */
  .faq-cta__title {
    margin: 0;
    font-family: var(--font-geom--family);
    font-size: 2.5rem; /* 40px */
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--color-white);
  }

  /* Headling/H5 in Sand/50, wrapping in a 444px measure. */
  .faq-cta__text {
    margin: 0;
    max-width: 27.75rem;
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-sand-50);
  }

  /* Button/Primary/M/outline — 16% white glass with a white ring. `button-fill` opts into
     the theme's hover wipe; the fill is solid white, and the glass tint is held beneath it
     while it travels (an opaque hover colour keeps the idle colour under the fill). */
  .faq-cta__button {
    --button-fill-color: var(--color-white);
    --button-fill-under: rgb(255 255 255 / 0.16);

    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border: 1px solid var(--color-white);
    border-radius: 5rem;
    background: rgb(255 255 255 / 0.16);
    font-family: var(--font-geom--family);
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    color: var(--color-white);
    text-decoration: none;
  }

  .faq-cta__button:hover {
    color: var(--color-teal-800);
  }

  /* The trailing arrow swings the way every theme button's does (theme-styles-variables). */
  .faq-cta__button svg {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    transition: var(--button-arrow-transition);
  }

  .faq-cta__button:hover svg {
    transform: var(--button-arrow-hover-transform);
  }

  /* Mobile — Figma 2651:601: steeper gradient, 32px panel padding, Mobile/H2 + H5. */
  @media screen and (max-width: 749px) {
    .section--faq-cta {
      --full-page-grid-central-column-width: calc(100% - 2rem);
    }

    .section--faq-cta::after {
      background: linear-gradient(66.37deg, rgb(6 76 77 / 0.5) 24.87%, rgb(66 168 153 / 0.4) 68.5%);
    }

    .faq-cta {
      padding: 2rem;
    }

    .faq-cta__title {
      max-width: 15.375rem; /* 246px — three lines in the comp */
      font-size: 2rem; /* 32px */
    }

    .faq-cta__text {
      max-width: none;
      font-size: 1.125rem; /* 18px */
    }
  }
/* END_SECTION:faq-cta */

/* START_SECTION:featured-product (INDEX:29) */
.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:30) */
.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;
    }
  }

  /* ================================================================
     Sana 2026 footer bottom bar
     Figma: Bottom Bar 169:1025 (desktop)
            Bottom Bar 227:1009 (mobile)
     ================================================================ */

  .footer-utilities .section {
    /* Match the 80px Figma page margin used by the footer columns above. */
    --page-margin: 5rem; /* 80 */
  }

  @media screen and (max-width: 749px) {
    .footer-utilities .section {
      --page-margin: 1rem; /* 16 */
    }

    .footer-utilities .utilities {
      /* The mobile frame has no divider above the bottom bar (227:1009). */
      border-top: 0;
      padding-block: 0 1.5rem; /* 0 / 24 */
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:31) */
.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;
    }
  }

  /* ================================================================
     Sana 2026 footer
     Figma: Footer 169:951 (desktop)
            Footer 227:938 (mobile)

     Two top-level blocks: the brand group (logo, description, social
     chips) and the links group (three menu columns + the Company info
     block). The grid override below replaces the stock equal-column
     layout with the Figma 350px / max-content split.
     ================================================================ */

  .section:has(> .footer-content) {
    /* Figma page margin is 80px at the 1440 anchor, matching the header
       nav's --nav-bar-padding-inline, not the theme's 50px default. */
    --page-margin: 5rem; /* 80 */
  }

  .footer-content.footer-content {
    /* Top divider between the newsletter card and the footer columns
       (Figma Divider 169:964). */
    border-block-start: 1px solid var(--color-sea-grey-100);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    /* Tablet: brand row above the link columns. */
    .footer-content.footer-content {
      grid-template-columns: 1fr;
    }

    .footer-content > .group-block:last-child .group-block-content {
      flex-wrap: wrap;
    }
  }

  @media screen and (min-width: 990px) {
    .footer-content.footer-content {
      grid-template-columns: 21.875rem max-content; /* 350 / hug */
      justify-content: space-between;
    }
  }

  /* --- Menu columns: eyebrow headings + 14px links ------------------ */
  .footer-content .menu__heading {
    padding: 0;
    font-family: var(--font-geom--family);
    font-size: 0.875rem; /* 14 */
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.3em; /* UI/Eyebrow tracking */
    text-transform: uppercase;
    color: var(--color-teal-500);
  }

  /* The stock rule above pins the default-heading span to the heading
     role weight (700); the eyebrow is Medium. */
  .footer-content .menu__heading__default {
    font-weight: inherit;
  }

  .footer-content .menu:not(:has(.menu__heading--empty)) .details-content {
    --spacing--size: 0.875rem; /* 14 — heading to first link */
  }

  .footer-content .menu__item + .menu__item {
    --spacing--size: 0.875rem; /* 14 — link to link */
    margin-block-end: 0;
  }

  /* The child selector covers richtext items (the Company address renders a
     `<p>` inside the item), which base.css `.paragraph > *` would otherwise
     reset to the foreground color and the default paragraph size. */
  .footer-content .menu__item.paragraph,
  .footer-content .menu__item.paragraph > * {
    font-size: 0.875rem; /* 14 */
    line-height: 1.5;
    color: var(--color-sea-grey-700);
  }

  .footer-content .menu__item a {
    color: inherit;
    text-decoration: none;
  }

  .footer-content .menu__item a:hover {
    color: var(--color-teal-500);
  }

  /* --- Brand column -------------------------------------------------- */
  .footer-content .image-block {
    width: 9.5rem; /* 152 — the Sana logo */
  }

  /* --- Social chips (Figma Social Links 169:974) --------------------- */
  /* 29.48px circles, teal border, light gradient fill, teal-800 glyphs.
     The glyph SVGs are authored in chip space, so they render full-bleed. */
  .footer-content .social-icons__wrapper {
    gap: 0.5rem; /* 8 */
    justify-content: flex-start;
  }

  .footer-content .social-icons__icon-wrapper,
  .footer-content .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: 1.8427rem; /* 29.48 */
    height: 1.8427rem; /* 29.48 */
  }

  .footer-content .social-icons__icon-wrapper > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--color-teal-200);
    background: linear-gradient(-26.57deg, var(--color-teal-200) 6%, var(--color-teal-50) 75%);
    color: var(--color-teal-800);
  }

  .footer-content .social-icons__icon-wrapper > a:hover {
    /* Darker gradient from the Figma hover chip (169:975). */
    background: linear-gradient(-26.57deg, var(--color-teal-400) 6%, var(--color-teal-200) 94%);
  }

  .footer-content .social-icons__icon-wrapper:has(.social-icons__icon path) .social-icons__icon {
    width: 100%;
    height: 100%;
  }

  /* --- Mobile: accordion card (Figma menu 228:1018) ------------------ */
  @media screen and (max-width: 749px) {
    .section:has(> .footer-content) {
      --page-margin: 1rem; /* 16 */
    }

    .footer-content.footer-content {
      padding-block: 2rem; /* 32 */
    }

    .footer-content > .group-block:last-child {
      background-color: var(--color-teal-50);
      border: 1px solid var(--color-teal-200);
      border-radius: 1rem; /* 16 */
    }

    .footer-content > .group-block:last-child .menu + .menu {
      border-block-start: 1px solid var(--color-teal-200);
    }

    .footer-content .menu--accordion .menu__heading {
      padding: 1.5rem 2rem; /* 24 / 32 */
    }

    .footer-content .menu.menu--accordion:not(:has(.menu__heading--empty)) .details-content {
      margin-block-start: 0;
      padding: 0 2rem 1.5rem; /* 0 / 32 / 24 */
    }

    .footer-content .menu--accordion .menu__item + .menu__item {
      --spacing--size: 0.5rem; /* 8 */
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header-announcements (INDEX:32) */
.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);
    display: none;
  }

  .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:33) */
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;

    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);

    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__link:not([aria-haspopup]):hover) {
      --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%;
    }

    /* Mobile: when the menu drawer is open, fall back to the default (non-inverse) color scheme — mirrors the sticky-active treatment so header content stays legible against the open drawer */
    @media screen and (max-width: 749px) {
      &:has(#Details-menu-drawer-container[open]) {
        --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%;
      }
    }

    /** For transparent header, apply transparent text color to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))):not(:has(#Details-menu-drawer-container[open])) .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);
    }

    /* 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:is(:hover, [aria-expanded='true']))
      ):not(:has(#Details-menu-drawer-container[open]))
      .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:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [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']:hover .header__row--top,
  [data-transparent-background='top']:focus-within .header__row--top,
  [data-transparent-background='both']:hover .header__row--top,
  [data-transparent-background='both']:focus-within .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']:hover .header__row--bottom,
  [data-transparent-background='bottom']:focus-within .header__row--bottom,
  [data-transparent-background='both']:hover .header__row--bottom,
  [data-transparent-background='both']:focus-within .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;
  }

  :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']:hover,
  [data-transparent-background='top']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :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']:hover,
  [data-transparent-background='bottom']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :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(--color-border));
  }

  @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: 1fr auto auto auto;

      grid-template-areas: 'logo search actions menu';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: var(--padding-sm) var(--padding-3xs);

      .header-logo {
        grid-area: logo;
        justify-self: start;
      }

      .search-action {
        grid-area: search;
      }

      header-actions {
        grid-area: actions;
      }

      header-drawer {
        grid-area: menu;
      }
    }
  }

  /* 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: 1fr auto auto auto;

    grid-template-areas: 'logo search actions menu';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: var(--padding-sm) var(--padding-3xs);

    .header-logo {
      grid-area: logo;
      justify-self: start;
    }

    .search-action {
      grid-area: search;
    }

    header-actions {
      grid-area: actions;
    }

    header-drawer {
      grid-area: menu;
    }
  }

  /* 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);
  }

  /* 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 .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

   .header-actions__action.account-button svg {
    padding: 2px;
  }


  .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(.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);
  }

  /* ================================================================
     Sana 2026 navigation bar
     Figma: Navigation/Desktop 2001:385 · Navigation/Mobile 2001:1842

     Both frames specify the bar as full-bleed with a fixed gutter
     (80px desktop / 24px mobile) rather than a page-width container,
     so the row overrides the section grid and `section_width` no
     longer changes the bar's gutters.
     ================================================================ */

  .header {
    --header-padding: var(--nav-bar-padding-block);
    --color-account-icon: currentcolor;

    color: var(--color-teal-800);
  }

  .header .header__row .header__columns {
    /* stylelint-disable-next-line length-zero-no-unit */
    --padding-block-start: 0px;
    /* stylelint-disable-next-line length-zero-no-unit */
    --padding-block-end: 0px;

    grid-column: 1 / -1;
    grid-gap: var(--nav-bar-gap);

    /* Deliberately NOT `align-items: center` — the columns have to stretch to
       the row's content height so the menu items inherit it, which is what
       lets the dropdown card hang off the bar's bottom edge. Each
       .header__column centres its own contents. */
    align-items: stretch;
    padding-inline: var(--nav-bar-padding-inline);
    padding-block: var(--nav-bar-padding-block);
  }

  /* Logo — Figma "Brand/Logo" 152 x 62, never squeezed by the link row. */
  .header .header-logo {
    flex-shrink: 0;
    padding: 0;
  }

  /* Actions — three 24px icons, 20px apart (Figma "Actions" 2001:506). */
  .header .header__column--right {
    gap: var(--nav-actions-gap);
  }

  .header header-actions {
    gap: var(--nav-actions-gap);
    align-items: center;
  }

  /* Every action resolves to the same 24x24 flex-centred box so the three
     glyphs share a baseline. Without this the boxes disagree: cart-icon is an
     inline box (line-height adds ~4px below it) and shopify-account renders a
     44px box inside the 24px button, so the glyphs land ~3px apart. */
  .header .header-actions__action,
  .header .search-action,
  .header cart-icon,
  .header .account-button .svg-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  .header .header-actions__action {
    --button-color: currentcolor;

    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
    padding: 0;
  }

  .header cart-icon {
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
  }

  /* The .header-actions__action wrapper hit-tests above the shopify-account it
     contains, so real pointer events landed on the div and never reached
     Shopify's button — the account panel could not open. The wrapper carries no
     visuals of its own, so it opts out of hit-testing and the component takes
     the whole target. */
  .header .account-button.header-actions__action {
    pointer-events: none;
  }

  .header .account-button shopify-account {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
    min-width: 0;
    line-height: 0;
  }

  .header .header-actions__action .svg-wrapper,
  .header .header-actions__action svg,
  .header .account-button__icon {
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
  }

  /* Figma draws the cart glyph whole (2001:513). The stock treatment punches a
     donut out of the icon so a 20px bubble can nest inside it — at 24px that
     eats the handle. Instead the bubble is smaller and tucked just outside the
     glyph's top-right corner, and the mask is dropped. */
  .header .header-actions__cart-icon {
    --cart-bubble-size: 14px;
    --cart-bubble-top: -3px;
    --cart-bubble-right: -4px;
  }

  .header .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    mask: none;
  }

  /* Dropping the mask leaves the badge sitting directly on the glyph, where it
     merges into the basket rim. A ring in the bar's own background colour
     separates the two, so the count reads as a badge over the icon. */
  .header .header-actions__cart-icon .cart-bubble__background {
    box-shadow: 0 0 0 2px var(--color-background);
    border-radius: 999px;
  }

  /* The action button is overflow: hidden and exactly 24x24, so a badge that
     sits proud of the glyph's corner gets its top and right sliced off — the
     circle renders as a wedge with the count cut in half. Only the badge
     overflows this box, so it can clip nothing else. */
  .header .header-actions__action:has(cart-icon),
  .header .header-actions__cart-icon {
    overflow: visible;
  }

  /* Fixed width fits one digit; a two-digit count needs to grow into a pill
     rather than overflow the circle. */
  .header .header-actions__cart-icon .cart-bubble {
    width: auto;
    min-width: var(--cart-bubble-size);
    height: var(--cart-bubble-size);
    aspect-ratio: auto;
    border-radius: 999px;
  }

  /* .visually-hidden collapses the bubble to 1px, but the theme's own
     `width: var(--cart-bubble-size)` rule outranks it — leaving an empty cart
     with a 14x1px bar sitting over the glyph. */
  .header .header-actions__cart-icon .cart-bubble.visually-hidden {
    display: none;
  }

  /* .cart-bubble__text reads --font-size--3xs, which this theme deliberately
     leaves undefined, so the count would inherit the bar's font size and
     overflow the circle. */
  .header .header-actions__cart-icon .cart-bubble__text {
    font-size: 0.5625rem; /* 9 */
  }

  .header cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 8px;
    --cart-bubble-top: -1px;
    --cart-bubble-right: -1px;
  }

  /* The stock rules pull these back with negative margins sized for the old
     icon set; the Figma spacing is a plain 20px gap, so neutralise them. */
  @media screen and (min-width: 750px) {
    .header .header__column--right .search-action,
    .header .header__column--right header-actions,
    .header [data-menu-style='menu'] .header__column--left .search-action {
      margin-inline: 0;
    }
  }

  .header .account-button.account-button {
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
    padding: 0;
  }

  .header .account-button shopify-account:not(:defined) {
    min-width: var(--nav-icon-size);
    height: var(--nav-icon-size);
  }

  /* ---- Mobile bar — Figma "Nav/Desktop" 2001:1855 --------------- */
  @media screen and (max-width: 749px) {
    .header .header__row .header__columns {
      grid-template-columns: 1fr auto auto auto;
      grid-template-areas: 'logo search actions menu';
      column-gap: var(--nav-actions-gap-mobile);
      padding-inline: var(--nav-bar-padding-mobile);
      padding-block: var(--nav-bar-padding-mobile);
    }

    .header header-actions {
      gap: var(--nav-actions-gap-mobile);
    }
  }

  /* Touch devices get the drawer layout at any width, so mirror it. */
  #header-component[data-menu-style='drawer'] .header__row .header__columns {
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas: 'logo search actions menu';
    column-gap: var(--nav-actions-gap-mobile);
    padding-inline: var(--nav-bar-padding-mobile);
    padding-block: var(--nav-bar-padding-mobile);
  }

  #header-component[data-menu-style='drawer'] header-actions {
    gap: var(--nav-actions-gap-mobile);
  }

  /* ---- Menu optical centring ------------------------------------
     The stock grid gives both side columns an equal 1fr, which centres the
     menu on the page. But the logo (152px) is wider than the actions cluster
     (112px), so the whitespace either side of the links differs by that 40px
     and the row reads as sitting left. Figma has the same imbalance; this
     centres the links between the logo and the icons instead, which is what
     "centred" looks like. Costs ~20px against Figma's literal x. */
  @media screen and (min-width: 750px) {
    .header .header__row .header__columns:has(.header__column--center .header-menu) {
      --header-left: max-content;
      --header-center: 1fr;
      --header-right: max-content;
    }

    .header .header__column--center {
      justify-content: center;
    }

    .header .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  /* ---- Scrolled state — Figma "Sana_nav_bar_scroll_shadow" ------- */
  .header[data-sticky-state='active'] .header__underlay-closed {
    box-shadow: var(--nav-scroll-shadow);
  }

  @media screen and (max-width: 749px) {
    .header[data-sticky-state='active'] .header__underlay-closed {
      box-shadow: var(--nav-scroll-shadow-mobile);
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:34) */
.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;
  }

  @media screen and (max-width: 749px) {
    .hero__content-wrapper.full-width-mobile {
      grid-column: 1 / -1;
    }
    .hero__content-wrapper.page-width-mobile {
      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:impact-cta (INDEX:35) */
/* Impact CTA: full-bleed photo under two teal washes, a frosted split card,
     and gradient icon-chip cards. */

  /* The washes live on .section itself: the content wrapper is a z-indexed grid
     item, i.e. an isolated compositing group — a blend layer inside it could never
     see the photo. Explicit z-index, because at z-auto the pseudos would paint
     under the tree-later background-image container. */
  .section--impact-cta::before,
  .section--impact-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    pointer-events: none;
  }

  .section--impact-cta::before {
    background: linear-gradient(106deg, rgb(6 76 77 / 0.8) 18.5%, rgb(66 168 153 / 0.8) 81.5%);
    mix-blend-mode: color;
  }

  /* Legibility ramp; paints above ::before at equal z by tree order. */
  .section--impact-cta::after {
    background: linear-gradient(to bottom, rgb(6 76 77 / 0.4), rgb(6 76 77 / 0.9) 72.8%);
  }

  /* Content must clear both pseudos — ::after is tree-last, so a tie buries the copy. */
  .section--impact-cta > .custom-section-content {
    z-index: var(--layer-raised);
  }

  /* Until a photo is uploaded, hide the stock placeholder so the #064c4d base shows. */
  .section--impact-cta .background-image-container > svg {
    display: none;
  }

  /* The design's 120px band exceeds the padding setting's 100px ceiling — same
     arrangement as .section--impact-features. */
  @media screen and (min-width: 750px) {
    .section--impact-cta > .custom-section-content > .section-content-wrapper {
      padding-block: 7.5rem;
    }
  }

  /* CTA card: both halves stretch to the image-driven height; the left panel is
     frosted glass (the Figma export drops the fill — rebuilt from the node render). */
  .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:first-child > .group-block-content {
    align-items: stretch;
  }

  .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:first-child > .group-block-content > .group-block {
    background: rgb(255 255 255 / 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* The text-link button reads semibold in the design; button-unstyled inherits
     body weight. */
  .section--impact-cta .button-unstyled {
    font-weight: 600;
  }

  /* The h2 wraps in a 726px measure; the max_width presets don't reach that. */
  .section--impact-cta .text-block.h2 {
    max-width: 45.375rem;
  }

  /* Button hovers: the kit pins these — BrightTeal fills Sand/100, the glass
     outline fills solid white, both on Teal/800 text — colours the theme's
     derive-from-background hover can't reach. Fill-color feeds the radial wipe;
     the focus-outline var must follow the hover fill or the resting ring colour
     lingers as a visible rim. */
  .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:first-child .button-custom {
    --button-fill-color: #f3ebe1;
  }

  .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:first-child .button-custom:hover {
    --button-background-color: #f3ebe1;
    --button-color: #064c4d;
    --button-border-color: #f3ebe1;
    --button-focus-outline-color: rgb(243 235 225);
  }

  .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:last-child .button-custom {
    --button-fill-color: #ffffff;
  }

  .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:last-child .button-custom:hover {
    --button-background-color: #ffffff;
    --button-color: #064c4d;
    --button-border-color: #ffffff;
    --button-focus-outline-color: rgb(255 255 255);
  }

  /* Feature cards: rgba surface the group setting can't hold (no alpha option, and
     a solid value would wake the contrast engine). */
  .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:last-child > .group-block-content > .group-block:last-child > .group-block-content > .group-block {
    position: relative;
    background: rgb(20 107 104 / 0.3);
  }

  /* The comp's edge is a lit glass ring, not a flat stroke — same masked-gradient
     technique as the testimonial plus discs, in this section's mint. */
  .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:last-child > .group-block-content > .group-block:last-child > .group-block-content > .group-block::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
      180deg,
      rgb(179 247 229 / 0.7) 0%,
      rgb(124 229 204 / 0.12) 45%,
      rgb(179 247 229 / 0.45) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  /* Icon chips: the subfooter treatment in this section's teal. The glyph colour
     rides currentColor. */
  .section--impact-cta .icon-block {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid #b3f7e5;
    border-radius: 10px;
    color: #42a899;
    background: linear-gradient(-26.6deg, #b3f7e5 6%, #f0fdfa 75%);
  }

  .section--impact-cta .icon-block__media {
    width: 30px;
    height: 30px;
  }

  @media screen and (max-width: 749px) {
    /* Flat scrim instead of the ramp, and no stock black mobile scrim on top. */
    .section--impact-cta::after {
      background: rgb(6 76 77 / 0.85);
    }

    .section--impact-cta .background-image-container::before {
      display: none;
    }

    /* Card copy centres on mobile; alignment settings have no mobile variant, and
       the text block hands alignment to its children. */
    .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:first-child .text-block,
    .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:first-child .text-block > * {
      text-align: center;
    }

    .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:first-child .group-block-content {
      align-items: center;
    }

    /* The card photo keeps its taller mobile crop. */
    .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:first-child .image-block :is(.image-block__image, .placeholder-image) {
      aspect-ratio: 358 / 347;
    }

    /* Feature cards swipe sideways, matching the design's peeking carousel —
       the stock panel wraps flex lines, which would stack them instead. */
    .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:last-child > .group-block-content > .group-block:last-child > .group-block-content {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
    }

    .section--impact-cta > .custom-section-content > .section-content-wrapper > .group-block:last-child > .group-block-content > .group-block:last-child > .group-block-content > .group-block {
      flex: 0 0 19.3125rem;
    }
  }
/* END_SECTION:impact-cta */

/* START_SECTION:impact-features (INDEX:36) */
/* Impact features: accordion rows led by a teal plus-disc, title-aligned answers. */

  /* The design's 120px band exceeds the padding setting's 100px ceiling (a wider range
     would need step 2, breaking saved odd values elsewhere). The template stores 100;
     the missing 20px lands here, in the same fluid rem the spacing vars use. Mobile
     stays on the setting's 48px. */
  @media screen and (min-width: 750px) {
    .section--impact-features > .custom-section-content > .section-content-wrapper {
      padding-block: 7.5rem;
    }
  }

  /* The wrapper pins --summary-font-weight to bold, so semibold must land on the
     element itself; size and line-height stay on the h4 preset vars. */
  .section--impact-features .accordion .details__header {
    column-gap: 25px;
    padding-block: 8px;
    font-weight: 600;
  }

  /* The toggle glyph doubles as the row's leading disc — stock pushes it to the far
     right via summary .svg-wrapper { margin-inline-start: auto }. */
  .section--impact-features .details__header .icon-plus {
    order: -1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-inline-start: 0;
    border-radius: 50%;
    background: #b3f7e5;
    color: #064c4d;
  }

  /* base.css sizes summary glyphs to --icon-size-xs; the design draws 12px. */
  .section--impact-features .details__header .icon-plus svg {
    width: 12px;
    height: 12px;
  }

  /* Answer aligns under the title: 40px disc + 25px gap. */
  .section--impact-features .details-content {
    padding-inline-start: 65px;
  }

  @media screen and (max-width: 749px) {
    .section--impact-features .accordion .details__header {
      column-gap: 16px;
    }

    .section--impact-features .details-content {
      padding-inline-start: 56px;
    }
  }
/* END_SECTION:impact-features */

/* START_SECTION:impact-testimonials (INDEX:37) */
/*
   * Impact section — Figma 2282:595 (desktop) / 2282:1033 (mobile).
   *
   * Sizes are px/16 rem wherever they are type, following the convention in
   * 'theme-styles-variables': html{font-size} resolves to exactly 16px at both Figma anchors
   * (393px and 1440px), so rem is pixel-exact at both and scales with the viewport between.
   * Box metrics stay in px because Figma specifies them as fixed rectangles.
   *
   * Every rule is scoped to a .impact-* class. That is deliberate for the slideshow overrides:
   * 'base.css' is emitted AFTER section stylesheets, so a bare element selector would lose the
   * tie. A class beats an element on specificity regardless of order.
   */

  .impact-section {
    padding-block: var(--impact-padding-block-start-mobile) var(--impact-padding-block-end-mobile);
    padding-inline: var(--impact-padding-inline-mobile);
  }

  .impact-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--impact-column-gap, 24px);
    border-radius: var(--impact-outer-radius, 32px);
    overflow: hidden;
  }

  /* ---------------------------------------------------------------
     Left column — sand intro panel + feature cards
     --------------------------------------------------------------- */

  .impact-features {
    display: flex;
    flex-direction: column;
    border-radius: var(--impact-panel-radius, 24px);
    overflow: hidden;
  }

  .impact-features__intro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 316px;
    padding-inline: 32px;
    background-color: var(--impact-intro-background, #f3ebe1);
  }

  .impact-features__texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--impact-intro-texture-opacity, 0.2);
    pointer-events: none;
  }

  .impact-features__heading {
    position: relative;
    margin: 0;
    font-family: var(--font-geom--family);
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--impact-intro-text, #064c4d);
  }

  .impact-features__cards {
    display: flex;
    flex-direction: column;
  }

  /* ---------------------------------------------------------------
     Feature card — a button-driven disclosure at a fixed height
     --------------------------------------------------------------- */

  .impact-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-height: 168px;
    padding: 32px;
    background-color: var(--impact-card-background, #146b68);
    color: var(--impact-card-text, #ffffff);
  }

  .impact-card__heading {
    margin: 0;
  }

  /* A <button>, so reset the UA chrome and let it fill the card row like the old summary */
  .impact-card__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
  }

  .impact-card__summary--static {
    cursor: default;
  }

  /*
   * base.css sets `summary:hover { color: rgb(var(--color-foreground-rgb) / 0.8) }` for
   * accordions on light backgrounds. Here the foreground is dark teal, so on these dark
   * cards the white title all but disappears on hover. Pin the colour and move the hover
   * affordance to the plus disc instead.
   */
  .impact-card__summary:hover {
    color: inherit;
  }

  /*
   * base.css only raises the fill on the disc's own :hover; these are the same two custom
   * properties its hover rule sets, driven from the whole card row instead so the fill
   * rises wherever on the card the pointer lands.
   */
  .impact-card__summary:hover .impact-card__plus {
    --button-fill-scale: 1;
    --button-fill-origin: bottom;

    transform: scale(1.06);
  }

  /* Extra .impact-card outranks the (0,2,0) --open transition rules regardless of order */
  @media (prefers-reduced-motion: reduce) {
    .impact-card.impact-card--open .impact-card__body-reveal,
    .impact-card.impact-card--open .impact-card__body,
    .impact-card.impact-card--open .impact-card__title,
    .impact-card__plus.impact-card__plus.impact-card__plus {
      transition: none;
    }
  }

  .impact-card__summary:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 4px;
  }

  /*
   * ANIMATION STRATEGY (the anti-bounce rule): every open/close transition in this card
   * lives on the --open state only. CSS takes the transition from the TARGET state, so
   * opening animates and closing is instant. That asymmetry is what keeps the section
   * from bouncing: a closing card's title re-wraps to two lines in a single frame while
   * its body is still collapsing, transiently outgrowing the card — measured as a
   * 243->278px spike that the flex:1 intro panel absorbed and released on every click.
   * With closing instant, height only ever moves monotonically toward its settled value,
   * and the cards can stay min-height (growable) so narrow viewports never clip copy.
   */
  .impact-card__title {
    margin: 0;
    font-family: var(--font-geom--family);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    color: inherit;
  }

  /*
   * Figma "Arrow Button" 2282:607 — 73px disc, teal/300 -> teal/200 both at 20%.
   *
   * The disc opts into the theme's signature radial hover fill by carrying the .button-fill
   * class (the documented way in for buttons that don't use .button — see the base.css
   * essay). base.css supplies position/overflow/isolation and the ::before column; this
   * section only sets the two knobs that essay demands of every opt-in:
   *   --button-fill-color  — the rising fill, teal-200 at 30% so it brightens the disc
   *   --button-fill-under  — transparent, because the disc's resting colour is a
   *                          background-image gradient the fill should ride over, not a
   *                          background-color to swap out
   */
  .impact-card__plus {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 73px;
    height: 73px;
    border-radius: 50%;
    background-image: linear-gradient(
      -32.24deg,
      rgb(124 229 204 / 0.2) 11.98%,
      rgb(179 247 229 / 0.2) 71.25%
    );
    color: inherit;
    --button-fill-color: rgb(179 247 229 / 0.3);
    --button-fill-under: transparent;
  }

  /*
   * base.css's .button-fill transition shorthand (0,2,0, emitted later) would drop the
   * transform from a plain .impact-card__plus rule — tripled class outranks it.
   */
  .impact-card__plus.impact-card__plus.impact-card__plus {
    transition:
      transform var(--animation-speed, 0.2s) ease,
      background-color var(--button-fill-speed, 0.75s) var(--button-fill-easing, ease);
  }

  /*
   * Glass rim — a gradient ring rather than a border, brightest at the top and lower edge
   * like the quote card's hairline. The two-layer mask (content-box XOR full box) leaves
   * only the 1.5px padding band of the gradient visible.
   */
  .impact-card__plus::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
      180deg,
      rgb(255 255 255 / 0.7) 0%,
      rgb(255 255 255 / 0.12) 45%,
      rgb(255 255 255 / 0.55) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  .impact-card__plus svg {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
  }

  /* The plus is the "collapsed" affordance — it disappears once the card is open */
  .impact-card--open .impact-card__plus {
    display: none;
  }

  /*
   * Animated reveal — the 0fr -> 1fr grid-row trick, so the body's height genuinely
   * interpolates instead of popping between display:none and block. The margin rides the
   * same transition; collapsed, wrapper + margin + opacity are all zero, so the closed
   * card is pixel-identical to the old display:none state.
   */
  .impact-card__body-reveal {
    display: grid;
    grid-template-rows: 0fr;
  }

  /* Transitions sit on the open state only — see the animation-strategy comment above */
  .impact-card--open .impact-card__body-reveal {
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--animation-speed, 0.2s) ease;
  }

  .impact-card__body {
    min-height: 0;
    overflow: hidden;
    margin-block-start: 0;
    opacity: 0;
    color: inherit;
  }

  .impact-card--open .impact-card__body {
    margin-block-start: 16px;
    opacity: 1;
    transition:
      opacity var(--animation-speed, 0.2s) ease,
      margin-block-start var(--animation-speed, 0.2s) ease;
  }

  .impact-card__body > :first-child {
    margin-block-start: 0;
  }

  .impact-card__body > :last-child {
    margin-block-end: 0;
  }

  /* ---------------------------------------------------------------
     Right column — gradient panel + quote carousel
     --------------------------------------------------------------- */

  .impact-testimonials {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    min-height: 660px;
    padding: 32px 16px;
    border-radius: var(--impact-panel-radius, 24px);
    overflow: hidden;
    background-image: var(--impact-testimonial-gradient);
  }

  /*
   * Figma 2282:615 offsets its water photo with a node transform, but that crop only makes
   * sense for that exact asset. For merchant uploads a plain cover fit is the predictable
   * behaviour — recreate the design's framing by cropping the upload instead.
   */
  .impact-testimonials__texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--impact-testimonial-texture-opacity, 0.3);
    pointer-events: none;
  }

  .impact-testimonials__heading {
    position: relative;
    max-width: 304px;
    margin: 0;
    font-family: var(--font-geom--family);
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    color: var(--impact-testimonial-heading-text, #064c4d);
  }

  /*
   * The slideshow has to become a flex column so the slide track absorbs the free space and
   * the dots sit on the panel's bottom edge. Left alone it is a block element and the track
   * collapses to the tallest quote.
   */
  .impact-testimonials .impact-testimonials__slideshow {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    min-height: 0;
  }

  /*
   * base.css paints slideshow-container white. Left alone it covers the panel gradient with an
   * opaque rectangle and the white quote text lands on white.
   */
  .impact-testimonials .impact-testimonials__slideshow slideshow-container {
    display: flex;
    flex: 1;
    min-height: 0;
    background-color: transparent;
  }

  .impact-testimonials .impact-testimonials__slideshow slideshow-slides {
    align-items: stretch;
    width: 100%;
    min-height: 0;
  }

  /* base.css caps slides at `max-height: 100%`, which crops the taller quotes */
  .impact-testimonials .impact-testimonials__slide {
    display: flex;
    width: 100%;
    max-height: none;
    border-radius: 0;
  }

  /*
   * Figma 2282:618 is a frosted-glass panel: render the node in isolation and the water
   * texture behind it is visibly blurred inside the box but sharp outside, under a faint
   * white tint and a uniform white hairline — clearest along the bottom/right where the
   * panel gradient is darkest.
   *
   * None of that survives `get_design_context` — the export reports only a transparent fill
   * and a 30px radius, because backdrop-filter has no Tailwind equivalent to emit. Rebuilt
   * from the rendered frame.
   */
  .impact-quote {
    display: flex;
    position: relative;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 32px;
    border-radius: 30px;
    /*
     * Two layers: the merchant's optional block image underneath, the translucent tint over
     * it. With no image the second layer is `none` and only the tint paints — identical to a
     * plain background-color.
     */
    background-image:
      linear-gradient(
        var(--impact-quote-background, rgb(255 255 255 / 0.07)),
        var(--impact-quote-background, rgb(255 255 255 / 0.07))
      ),
      var(--impact-quote-bg-image, none);
    background-size: cover;
    background-position: center;
    color: var(--impact-quote-text, #ffffff);
  }

  /*
   * The hairline is the same lit glass rim as the plus discs — a gradient painted into the
   * border band, brightest top and bottom — with the width setting still choosing thickness.
   */
  .impact-quote::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--impact-quote-border-width, 1px);
    background: linear-gradient(
      180deg,
      rgb(255 255 255 / 0.7) 0%,
      rgb(255 255 255 / 0.12) 45%,
      rgb(255 255 255 / 0.55) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  /*
   * Guarded because an unsupported backdrop-filter is simply ignored, and the tint alone still
   * reads as glass. Safari needs the prefix.
   */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .impact-quote {
      -webkit-backdrop-filter: blur(var(--impact-quote-frost, 12px));
      backdrop-filter: blur(var(--impact-quote-frost, 12px));
    }
  }

  .impact-quote__text {
    margin: 0;
    color: inherit;
  }

  .impact-quote__text > :first-child {
    margin-block-start: 0;
  }

  .impact-quote__text > :last-child {
    margin-block-end: 0;
  }

  .impact-quote__logo {
    display: flex;
    align-items: center;
    padding-block-start: 16px;
  }

  .impact-quote__logo img {
    width: var(--impact-logo-width, 72px);
    height: auto;
    object-fit: contain;
  }

  /* Pagination dots — Figma "Scrolls/button": 12px, 14px gap, filled active, outlined rest */
  .impact-testimonials .impact-testimonials__slideshow slideshow-controls {
    display: flex;
    justify-content: center;
    margin-block-start: 32px;
  }

  .impact-testimonials .slideshow-controls__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .impact-testimonials .slideshow-controls__dots > li {
    display: block;
    list-style: none;
  }

  .impact-testimonials .slideshow-controls__dots .slideshow-control {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid var(--impact-dot-color, #7ce5cc);
    border-radius: 50%;
    background-color: transparent;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
    transition: background-color var(--animation-speed, 0.2s) ease;
  }

  .impact-testimonials .slideshow-controls__dots .slideshow-control[aria-selected='true'] {
    background-color: var(--impact-dot-color, #7ce5cc);
  }

  /* ---------------------------------------------------------------
     Desktop — Figma 2282:595
     --------------------------------------------------------------- */

  @media screen and (min-width: 750px) {
    .impact-section {
      padding-block: var(--impact-padding-block-start) var(--impact-padding-block-end);
      padding-inline: var(--impact-padding-inline);
    }
  }

  /*
   * Two columns only from 1024px up. Between 750 and 1023 the columns starve — the pinned
   * right panel leaves the cards ~200px wide and the open card's copy cannot physically fit
   * its Figma band — so tablets keep the stacked mobile arrangement at desktop padding.
   */
  @media screen and (min-width: 1024px) {
    /*
     * 824 / 24 / 432 inside a 1280 content box. The right column holds its Figma width at
     * 1440 and gives ground on narrower laptops (36vw), so the left panel — the one with
     * reflowable copy in it — is never crushed.
     */
    .impact-section__inner {
      flex-direction: row;
      align-items: stretch;
      min-height: 656px;
    }

    .impact-features {
      flex: 1 1 auto;
      min-width: 0;
    }

    .impact-features__intro {
      flex: 1;
      min-height: 0;
      padding-inline: 64px;
    }

    .impact-features__heading {
      max-width: 572px;
      font-size: 3rem;
    }

    .impact-testimonials {
      flex: 0 0 min(432px, 36vw);
      min-height: 0;
      padding: 48px 32px;
    }
  }

  /*
   * Cards sit side-by-side only from 1280 up. In the 1024–1279 band the left column is
   * ~460–560px, and two flex cards there hit the min-width:auto trap — the closed card's
   * intrinsic width (36px title + 73px disc) crushes the open one to a word per line. So
   * that band keeps the mobile stacked cards, full column width, and the title stays at
   * its mobile size with no size swap.
   */
  @media screen and (min-width: 1280px) {
    .impact-features__cards {
      flex-direction: row;
    }

    /*
     * min-height, not height: 243 is exact at 1440 where the copy fits, and narrower
     * laptops grow the card instead of clipping the body. The open-only transitions
     * (see the animation-strategy comment) are what keep that growth bounce-free.
     */
    .impact-card {
      min-height: 243px;
      padding: 48px;
    }

    .impact-card__summary {
      gap: 24px;
    }

    .impact-card__title {
      max-width: 300px;
      font-size: 2.25rem;
      line-height: 1.2;
    }

    /* Expanded state drops the title to Figma's H4 so the body copy has room (2282:613).
       The transition lives here (target state) so opening animates and closing is instant. */
    .impact-card--open .impact-card__title {
      max-width: 294px;
      font-size: 1.5rem;
      line-height: 1.25;
      transition: font-size var(--animation-speed, 0.2s) ease;
    }
  }
/* END_SECTION:impact-testimonials */

/* START_SECTION:layered-slideshow (INDEX:39) */
.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:lead-form (INDEX:40) */
/* ---------- Section shell (Section/Impact: sand-50, 120px band, 80px gutters) ---------- */
  .lead-form-section {
    background-color: var(--lead-form-background, var(--color-sand-50));
    padding-block: 7.5rem;
    overflow: clip;
  }

  /* .page-width-normal only defines --page-width / --page-margin; apply the column here. */
  .lead-form-section__inner {
    box-sizing: border-box;
    max-width: calc(80rem + var(--page-margin) * 2); /* 1280px content column, like main-collection-shop */
    margin-inline: auto;
    padding-inline: var(--page-margin);
  }

  .lead-form__container {
    display: grid;
    grid-template-columns: minmax(0, 704fr) minmax(0, 524fr);
    column-gap: 3.25rem;
    align-items: start;
  }

  .lead-form__content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    min-width: 0;
  }

  .lead-form__intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-inline: 1.5rem;
  }

  .lead-form__eyebrow {
    margin: 0;
    color: var(--color-teal-500);
  }

  .lead-form__heading {
    margin: 0;
    color: var(--color-teal-800);
  }

  .lead-form__description {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
  }

  /* ---------- Card (Form V1 / Step 01) ---------- */
  .lead-form {
    display: block;
    min-width: 0;
  }

  .lead-form__card {
    position: relative; /* absolute descendants (honeypot) stay inside the scroll container */
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 3rem;
    background: #fff;
    border: 1px solid #f1f2f9;
    border-radius: 2rem;
    box-shadow: 10px 10px 12.5px rgba(25, 33, 61, 0.06);
  }

  .lead-form__fields {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .lead-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .lead-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .lead-form__label {
    display: block;
    padding: 0;
    font-family: var(--font-body--family);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-teal-800);
  }

  .lead-form__required {
    color: #ff0004;
  }

  .lead-form__input {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-teal-800);
    background: #fff;
    border: 1px solid var(--color-sand-200);
    border-radius: 14px;
    box-shadow: 0 0.5px 0.5px rgba(25, 33, 61, 0.04);
    appearance: none;
    outline: none;
    transition: border-color var(--animation-speed) var(--animation-easing), box-shadow var(--animation-speed) var(--animation-easing);
  }

  .lead-form__input::placeholder {
    color: var(--color-sand-400);
    opacity: 1;
  }

  .lead-form__input:focus-visible {
    border-color: var(--color-teal-500);
    box-shadow: 0 0 0 3px rgba(66, 168, 153, 0.2);
  }

  .lead-form__input--textarea {
    min-height: 113px;
    padding: 1rem;
    resize: vertical;
  }

  .lead-form__input--select {
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4c4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px 14px;
    cursor: pointer;
  }

  /* Placeholder tone while no option is chosen */
  .lead-form__input--select:has(option[value='']:checked) {
    color: var(--color-sand-400);
  }

  /* File upload: drop zone + chosen files (artwork on the RFQ forms) */
  .lead-form__hint {
    margin: -0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
  }

  /* Shipping address: one box with the suggestion list hanging off it */
  .lead-form__combobox {
    position: relative; /* the suggestion list hangs off the street box */
  }

  .lead-form__suggestions {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 18rem;
    margin: 0;
    padding: 0.375rem;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-sand-200);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 76, 79, 0.14);
  }

  .lead-form__suggestions[hidden] {
    display: none;
  }

  .lead-form__suggestion {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0.875rem;
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-teal-800);
    cursor: pointer;
  }

  .lead-form__suggestion[aria-selected='true'],
  .lead-form__suggestion:hover {
    background: var(--color-sand-50);
  }

  .lead-form__suggestion-sub {
    font-size: 0.8125rem;
    color: var(--color-sea-grey-700);
  }

  .lead-form__suggestion--note,
  .lead-form__suggestion--note:hover {
    background: transparent;
    color: var(--color-sea-grey-700);
    cursor: default;
  }

  /* Phone: dial-code picker beside the number */
  .lead-form__phone {
    display: grid;
    grid-template-columns: 7.25rem minmax(0, 1fr);
    gap: 0.5rem;
  }

  .lead-form__phone-code {
    position: relative;
  }

  /* The closed select shows only the dial code (overlay); the native list still shows every country name. */
  .lead-form__phone-country {
    color: transparent;
  }

  .lead-form__phone-country option {
    color: var(--color-teal-800);
  }

  .lead-form__phone-dial {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    font-size: 0.875rem;
    line-height: 1;
    color: var(--color-teal-800);
    pointer-events: none;
  }

  .lead-form__field--invalid .lead-form__phone .lead-form__input {
    border-color: #ff0004;
  }

  .lead-form__dropzone {
    position: relative; /* containing block for the visually hidden file input */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 11rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--color-sea-grey-700);
    background: #fff;
    border: 1px dashed var(--color-sand-400);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color var(--animation-speed) var(--animation-easing), background-color var(--animation-speed) var(--animation-easing);
  }

  .lead-form__dropzone:hover,
  .lead-form__dropzone.is-dragover,
  .lead-form__dropzone:has(.lead-form__upload-input:focus-visible) {
    border-color: var(--color-teal-500);
    background: rgba(66, 168, 153, 0.06);
  }

  .lead-form__field--invalid .lead-form__dropzone {
    border-color: #ff0004;
  }

  .lead-form__upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .lead-form__dropzone-icon {
    color: var(--color-teal-800);
  }

  .lead-form__dropzone-text {
    font-size: 1rem;
    line-height: 1.5;
  }

  .lead-form__dropzone-cta {
    font-weight: 600;
    color: var(--color-teal-500);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .lead-form__dropzone-meta {
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0.8;
  }

  .lead-form__upload-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lead-form__upload-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.5rem;
    padding: 0.375rem 0.5rem 0.375rem 1rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-teal-800);
    background: #fff;
    border: 1px solid var(--color-sand-200);
    border-radius: 10px;
  }

  .lead-form__upload-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lead-form__upload-meta {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--color-sea-grey-700);
  }

  .lead-form__upload-item--done .lead-form__upload-meta {
    color: var(--color-teal-500);
  }

  .lead-form__upload-item--failed {
    border-color: #ff0004;
  }

  .lead-form__upload-item--failed .lead-form__upload-meta {
    color: #d3262a;
  }

  .lead-form__upload-remove {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-sea-grey-700);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  .lead-form__upload-remove:hover,
  .lead-form__upload-remove:focus-visible {
    color: var(--color-teal-800);
    background: rgba(25, 33, 61, 0.06);
  }

  /* Terms block above the agreement checkbox (RFQ forms) */
  .lead-form__terms {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .lead-form__terms-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
  }

  .lead-form__terms-text p,
  .lead-form__terms-text ul {
    margin: 0;
  }

  .lead-form__terms-text ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 1.25rem;
  }

  .lead-form__terms-text * + p,
  .lead-form__terms-text * + ul {
    margin-top: 0.75rem;
  }

  .lead-form__terms-link {
    align-self: flex-start;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-teal-500);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  /* Signature (Pouch RFQ): the typed name rendered in a script font, or freehand drawing.
     Mirrors the WorkForm question: Name box, 200px canvas, small controls inside the pad. */
  .lead-form__signature-name {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .lead-form__signature-name-label {
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-teal-800);
  }

  .lead-form__signature-pad {
    position: relative; /* containing block for the controls overlaid on the canvas */
    background: #fff;
    border: 1px solid var(--color-sand-200);
    border-radius: 14px;
    box-shadow: 0 0.5px 0.5px rgba(25, 33, 61, 0.04);
    overflow: hidden;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .lead-form__signature--draw .lead-form__signature-pad {
    border-color: var(--color-teal-500);
  }

  .lead-form__field--invalid .lead-form__signature-pad {
    border-color: #ff0004;
  }

  .lead-form__signature-canvas {
    display: block;
    width: 100%;
    height: 200px;
    touch-action: none; /* a finger on the pad draws, it never scrolls the page */
    user-select: none;
    -webkit-user-select: none;
  }

  .lead-form__signature--draw .lead-form__signature-canvas {
    cursor: crosshair;
  }

  .lead-form__signature-controls {
    position: absolute;
    inset: auto 0.75rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    pointer-events: none; /* only the buttons catch the pointer; the canvas keeps the rest */
  }

  .lead-form__signature-controls-end {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
  }

  .lead-form__signature-button {
    pointer-events: auto;
    padding: 0.3125rem 0.75rem;
    font-family: var(--font-body--family);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-teal-800);
    background: #fff;
    border: 1px solid var(--color-sand-200);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(25, 33, 61, 0.06);
    cursor: pointer;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .lead-form__signature-button:hover,
  .lead-form__signature-button:focus-visible {
    border-color: var(--color-teal-500);
  }

  .lead-form__signature-button[disabled] {
    opacity: 0.5;
    cursor: default;
  }

  .lead-form__signature-button[hidden] {
    display: none;
  }

  /* Conditional fields (data-show-when) start hidden; the flex display must not override it */
  .lead-form__field[hidden] {
    display: none;
  }

  .lead-form__field--invalid .lead-form__input {
    border-color: #ff0004;
  }

  .lead-form__field-error {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #d3262a;
  }

  /* "Submit as entered": appears under the address box only after the service could not verify the
     address (client handoff 12 Oct 2026); a small outlined pill in the brand teal, never the main submit. */
  .lead-form__address-review {
    margin-top: 0.125rem;
  }

  .lead-form__address-review-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1.5px solid #064c4d;
    border-radius: 5rem;
    background: transparent;
    color: #064c4d;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
  }

  .lead-form__address-review-button:hover,
  .lead-form__address-review-button:focus-visible {
    background: #064c4d;
    color: #fff;
    outline-offset: 3px;
  }

  /* Choice groups (square check boxes, 18px, radius 4) */
  .lead-form__choice-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .lead-form__choice {
    position: relative; /* containing block for the visually hidden input: keeps it inside the scroll container so focusing it cannot scroll the document */
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
  }

  .lead-form__choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .lead-form__choice-box {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid #d9dbe9;
    background: #fff;
    box-shadow: 0 1px 3px rgba(31, 47, 84, 0.1);
    transition: background-color var(--animation-speed) var(--animation-easing), border-color var(--animation-speed) var(--animation-easing);
  }

  .lead-form__choice-input:checked + .lead-form__choice-box {
    border-color: var(--color-teal-500);
    background-color: var(--color-teal-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M5.19324 9.54419L7.36853 11.7195L12.8068 6.28125' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .lead-form__choice-input:focus-visible + .lead-form__choice-box {
    box-shadow: 0 0 0 3px rgba(66, 168, 153, 0.25);
  }

  .lead-form__field--invalid .lead-form__choice-box {
    border-color: #ff0004;
  }

  /* Honeypot: off-screen, never display:none (some bots skip hidden inputs) */
  .lead-form__trap {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* Footer: Turnstile + submit */
  .lead-form__footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .lead-form__turnstile {
    width: 100%;
    min-height: 65px;
  }

  .lead-form__turnstile:empty {
    display: none;
  }

  .lead-form__status {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-teal-800);
  }

  .lead-form__status--error {
    color: #d3262a;
  }

  .lead-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border-radius: 5rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: normal;
  }

  .lead-form__submit--md {
    font-size: 1rem;
  }

  .lead-form__submit[disabled] {
    opacity: 0.7;
    cursor: progress;
  }

  .lead-form__submit-icon {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
  }

  /* ---------- Media collage (524 x 475 at desktop) ---------- */
  /* Sticks below the sticky header while the long form scrolls. The section's overflow: clip
     does not create a scroll container, so the collage tracks .page-wrapper, and the grid's
     align-items: start leaves the item at content height inside a row as tall as the form. */
  .lead-form__media {
    position: sticky;
    top: calc(var(--header-group-height, 0px) + 2rem);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    min-width: 0;
  }

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

  .lead-form__media-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 0 0 37.8%;
    max-width: 37.8%;
  }

  .lead-form__media-tall {
    aspect-ratio: 198 / 319;
    border-radius: 1.5rem;
    overflow: hidden;
  }

  .lead-form__media-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 198 / 140;
    padding: 1.5rem;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 10px 10px 40px rgba(8, 64, 87, 0.2);
  }

  .lead-form__media-card img {
    position: absolute;
    inset: 0;
  }

  .lead-form__media-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(192.49deg, rgba(43, 139, 131, 0.21) 11.93%, rgba(20, 107, 104, 0.7) 62.46%);
  }

  .lead-form__media-caption {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 150px;
    font-family: var(--font-body--family);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
  }

  .lead-form__media-product {
    position: relative;
    flex: 0 0 58.4%;
    max-width: 58.4%;
  }

  .lead-form__media-mask {
    aspect-ratio: 306.709 / 475.258;
    -webkit-mask-image: var(--lead-form-mask);
    mask-image: var(--lead-form-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .lead-form__media-waves {
    position: absolute;
    top: 1.2%;
    right: 5.8%;
    width: 21.7%;
    line-height: 0;
  }

  .lead-form__media-waves svg {
    width: 100%;
    height: auto;
  }

  /* ---------- Success dialog ---------- */
  .lead-form__modal {
    width: min(597px, calc(100% - 2rem));
    max-width: 100%;
    margin: auto;
    padding: 1.5rem 1.5rem 1.5625rem;
    border: 1px solid #f1f2f9;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 10px 10px 12.5px rgba(25, 33, 61, 0.06);
    color: var(--color-sea-grey-700);
  }

  .lead-form__modal::backdrop {
    background: rgba(61, 74, 74, 0.3);
  }

  /* Own keyframes: the theme's elementSlideInTop animates margin-top to 0 with `forwards`,
     which would override the dialog's `margin: auto` centering. */
  .lead-form__modal[open] {
    animation: leadFormSlideIn var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes leadFormSlideIn {
    from { opacity: 0; translate: 0 1rem; }
    to { opacity: 1; translate: 0 0; }
  }

  .lead-form__modal.dialog-closing {
    animation: leadFormFadeOut var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes leadFormFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  .lead-form__modal-close {
    display: flex;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #5bc5ad;
    cursor: pointer;
  }

  .lead-form__modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1rem 2rem;
    text-align: center;
  }

  .lead-form__modal-heading {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--color-teal-800);
  }

  .lead-form__modal-text {
    max-width: 384px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .lead-form__modal-text p {
    margin: 0;
  }

  .lead-form__modal-text p + p {
    margin-top: 1.5rem;
  }

  /* ---------- Responsive ---------- */
  @media screen and (max-width: 989px) {
    .lead-form__container {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 2.5rem;
    }

    .lead-form__media {
      max-width: 524px;
    }
  }

  @media screen and (max-width: 749px) {
    .lead-form-section {
      padding-block: 2.5rem;
    }

    .lead-form__content {
      gap: 2.5rem;
    }

    .lead-form__intro {
      gap: 0.75rem;
      padding-inline: 1rem;
    }

    .lead-form__description {
      font-size: 1rem;
    }

    .lead-form__card {
      gap: 2rem;
      padding: 2rem 1.5rem;
    }

    .lead-form__row {
      grid-template-columns: minmax(0, 1fr);
    }

    .lead-form__submit {
      font-size: 1rem;
    }

    .lead-form__media {
      position: static; /* single column: the collage sits below the card */
      gap: 0.9375rem;
      max-width: none;
    }

    .lead-form__media-column {
      flex-basis: 39%;
      max-width: 39%;
    }

    .lead-form__media-product {
      flex-basis: 56.7%;
      max-width: 56.7%;
    }

    .lead-form__media-tall {
      aspect-ratio: 140 / 225;
      border-radius: 1rem;
    }

    .lead-form__media-card {
      aspect-ratio: 140 / 99;
      padding: 0.75rem 0.875rem;
      border-radius: 1rem;
    }

    .lead-form__media-caption {
      max-width: 116px;
      font-size: 0.875rem;
      line-height: 1.5;
    }

    .lead-form__media-mask {
      aspect-ratio: 203 / 339.984;
      -webkit-mask-image: var(--lead-form-mask-mobile);
      mask-image: var(--lead-form-mask-mobile);
    }

    .lead-form__media-waves {
      width: 26%;
      right: 6%;
      top: 0.6%;
    }

    .lead-form__modal {
      width: 100%;
      max-width: 100%;
      margin: auto 0 0;
      border-radius: 2rem 2rem 0 0;
    }

    .lead-form__modal[open] {
      animation-name: leadFormSlideUp;
    }

    @keyframes leadFormSlideUp {
      from { opacity: 0; translate: 0 100%; }
      to { opacity: 1; translate: 0 0; }
    }

    .lead-form__modal-text {
      max-width: 342px;
    }
  }
/* END_SECTION:lead-form */

/* START_SECTION:logo (INDEX:41) */
.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:43) */
.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:44) */
/**
   * 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: 1rem;
    --rows-gap: 1.5rem;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
    background-color: var(--color-background);
  }

  /**
   * When there's no image, the blog post item has a border.
   */
  .blog-post-item {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }

  /**
   * Featured-grid layout: first article spans full width as a horizontal hero,
   * remaining articles fill a uniform N-column grid below.
   */
  .blog-posts--featured-grid .blog-posts-container {
    grid-template-columns: repeat(var(--blog-posts-columns, 3), 1fr);
  }

  .blog-posts--featured-grid .blog-post-item--featured {
    grid-column: 1 / -1;
  }

  .blog-posts--featured-grid .blog-post-item--featured {
    position: relative;
    isolation: isolate;
    margin-bottom: 1rem;
  }

  /**
   * Full-viewport background break-out.
   * The pseudo-element extends edge-to-edge across the viewport while the
   * card content stays inside the section's narrow page width.
   */
  .blog-posts--featured-grid .blog-post-item--featured::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -2;
    background-image: var(--featured-bg-image, none);
    background-size: var(--featured-bg-size, cover);
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  .blog-posts--featured-grid .blog-post-item--featured::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
    background: var(--featured-bg-overlay, transparent);
    pointer-events: none;
  }

  .blog-posts--featured-grid .blog-post-item--featured .blog-post-card {
    background: transparent;
    color: rgb(var(--featured-card-fg-rgb, var(--color-foreground-rgb)));
    padding: var(--gap-2xl, 32px);
    border-radius: 0;

    @media screen and (max-width: 749px) {
      padding: 2.5rem 0;
    }
  }

  /**
   * Featured article heading uses the h5 type preset; the grid cards stay
   * at the static block's h6 setting from the template. Scope to the
   * heading text-block (.h6) so the excerpt/rte block isn't affected.
   */
  .blog-posts--featured-grid .blog-post-item--featured .blog-post-card__content .text-block.h6,
  .blog-posts--featured-grid .blog-post-item--featured .blog-post-card__content .text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-h5--family);
    font-size: var(--font-h5--size);
    line-height: var(--font-h5--line-height);
  }

  /**
   * Allow the featured background pseudo to extend to the viewport edges.
   * Ancestors must NOT have overflow:hidden/clip or the ::before will be
   * cropped to the narrow content width.
   */
  .blog-posts--featured-grid,
  .blog-posts--featured-grid .blog-posts-container,
  .blog-posts--featured-grid .blog-post-item--featured {
    overflow: visible;
  }

  @media screen and (max-width: 749px) {
    .blog-posts--featured-grid .blog-posts-container {
      grid-template-columns: repeat(2, 1fr);
    }

    .blog-post-item:not(.blog-post-item--horizontal):not(.blog-post-item--featured) .blog-post-card__image {
      aspect-ratio: 1 / 1;
      height: auto;
    }
  }

  /**
   * Category tabs strip
   */
  .blog-category-tabs {
    width: 100%;
    margin-block: var(--gap-md, 16px) 2.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .blog-category-tabs::-webkit-scrollbar {
    display: none;
  }

  .blog-category-tabs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    width: max-content;
    min-width: 100%;
  }

  .blog-category-tabs--center .blog-category-tabs__list {
    justify-content: center;
    margin-inline: auto;
  }

  .blog-category-tabs--right .blog-category-tabs__list {
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  .blog-category-tabs__item {
    flex: 0 0 auto;
  }

  .blog-category-tabs__link {
    display: inline-block;
    padding: 0.5rem 0;
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--font-size--sm, 0.875rem);
    border-block-end: 2px solid transparent;
    transition: border-color 120ms ease, opacity 120ms ease;
    opacity: 0.7;
    white-space: nowrap;
  }

  .blog-category-tabs__link:hover,
  .blog-category-tabs__link:focus-visible {
    opacity: 1;
  }

  .blog-category-tabs__link.is-active {
    opacity: 1;
    border-block-end-color: currentColor;
  }

  @media screen and (max-width: 749px) {
    .blog-category-tabs__link.h6 {
      font-family: var(--font-h7--family);
      font-style: var(--font-h7--style);
      font-weight: var(--font-h7--weight);
      font-size: var(--font-h7--size);
      line-height: var(--font-h7--line-height);
      letter-spacing: var(--font-h7--letter-spacing);
      text-transform: var(--font-h7--case);
    }
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:45) */
.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%;
  }

  .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;
    }

    .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:main-collection-shop (INDEX:47) */
.collection-shop {
    color: var(--color-teal-800);
  }

  /* 244px sidebar + 936px grid inside the 1280px content column; space-between
     absorbs the 100px between them exactly as the comp draws it. */
  .collection-shop__layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem; /* 40px floor when space-between has nothing left to distribute */
    width: 100%;
    max-width: 80rem; /* 1280px */
    margin-inline: auto;
  }

  .collection-shop__sidebar {
    flex: 0 0 15.25rem; /* 244px */
    min-width: 0;
  }

  /* The sidebar stays put while the grid scrolls past it, and scrolls on its own. It pins
     24px under the sticky header the same way the PDP details column does (the offset is only
     set while the header is in its sticky state, mirroring product-information-content.liquid).
     The box is capped to the space under the header, so a list taller than that scrolls inside
     itself: the wheel over the sidebar moves only the list (overscroll-behavior keeps it from
     bleeding into the page once the list ends), and the wheel over the grid moves only the
     page while the list stays pinned. QA asked for no visible bar, so the scrollbar is hidden.
     The 4px margin/padding swap keeps focus rings from being clipped by the scroll box while
     the text stays on the same x as before, and the flex basis grows by the same 8px so the
     column still measures 244px. The layout already aligns its items to the start, which
     sticky needs to travel at all. */
  @media screen and (min-width: 750px) {
    .collection-shop__sidebar {
      --csh-sidebar-gap: 24px; /* breathing room under the header once pinned, and above the fold */
      position: sticky;
      top: calc(var(--sticky-header-offset, 0px) + var(--csh-sidebar-gap));
      max-height: calc(100dvh - var(--sticky-header-offset, 0px) - var(--csh-sidebar-gap) * 2);
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: none;
      flex-basis: calc(15.25rem + 8px);
      margin-inline: -4px;
      padding-inline: 4px;
      padding-block-end: 4px; /* room for the last link's focus ring inside the clip */
    }

    .collection-shop__sidebar::-webkit-scrollbar {
      display: none;
    }

    body:has(#header-group #header-component[data-sticky-state='active']) .collection-shop__sidebar {
      --sticky-header-offset: var(--header-height);
    }
  }

  .collection-shop__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 1 58.5rem; /* 936px */
    min-width: 0;
  }

  /* ------------------------------------------------------------------ *
   * Sidebar
   * ------------------------------------------------------------------ */
  .collection-shop__title {
    margin: 0;
    padding-block-end: 2.5rem; /* 40px */
    font-family: var(--font-h3--family, var(--font-geom--family));
    font-size: var(--font-h3--size); /* 36px */
    font-weight: 600;
    line-height: var(--font-h3--line-height);
    letter-spacing: 0;
    color: var(--color-teal-800);
  }

  .collection-shop__eyebrow {
    margin: 0;
    color: var(--color-teal-800);
  }

  /* Figma 2594:223 — hairline inside a 40px band between the eyebrow and the nav. */
  .collection-shop__rule {
    width: 100%;
    margin: 0.75rem 0 0.375rem; /* 12px 0 6px; the first nav row's own padding supplies the rest */
    border: 0;
    border-block-start: 1px solid var(--color-teal-800);
  }

  .collection-shop__nav {
    display: flex;
    flex-direction: column;
  }

  /* Figma Mobile/UI/Nav — the sidebar uses the 20px nav style at desktop. */
  .collection-shop__nav-link,
  .collection-shop__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block: 0.875rem; /* 14px */
    font-family: var(--font-geom--family);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    line-height: var(--line-height--125);
    letter-spacing: var(--letter-spacing--002);
    color: var(--color-teal-800);
    text-decoration: none;
    cursor: pointer;
  }

  .collection-shop__nav-link:hover,
  .collection-shop__group-header:hover {
    color: var(--color-teal-600);
  }

  /* The current collection's own row (All Products on /collections/all) takes the list
     links' sand highlight; the 4px bleed matches the sidebar's own inline padding. */
  .collection-shop__nav-link.is-current {
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
    border-radius: 0.5rem; /* 8px */
    background-color: var(--color-sand-50);
  }

  .collection-shop__group-header {
    list-style: none;
  }

  .collection-shop__group-header::-webkit-details-marker,
  .collection-shop__group-header::marker {
    display: none;
    content: '';
  }

  /* icon-chevron-right is an 8x12 glyph; open rotates it to point down. */
  .collection-shop__chevron {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 0.8125rem; /* 13px — matches the Figma 12.7px box */
    transition: transform var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  .collection-shop__chevron svg {
    width: 0.5rem;
    height: 0.8125rem;
  }

  .collection-shop__group[open] > .collection-shop__group-header .collection-shop__chevron {
    transform: rotate(90deg);
  }

  .collection-shop__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    margin: 0;
    padding: 0.5rem 0; /* 8px 0 */
    list-style: none;
  }

  .collection-shop__list-link {
    display: block;
    padding: 0.25rem 0.5rem; /* 4px 8px */
    border-radius: 0.5rem; /* 8px */
    font-size: 1rem; /* 16px */
    font-weight: 400;
    line-height: var(--line-height--150);
    color: var(--color-teal-800);
    text-decoration: none;
  }

  a.collection-shop__list-link:hover,
  .collection-shop__list-link.is-current {
    background-color: var(--color-sand-50);
  }

  /* ------------------------------------------------------------------ *
   * Search pill
   * ------------------------------------------------------------------ */
  .collection-shop__toolbar {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-block-end: 2rem; /* 32px */
  }

  .collection-shop__search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 28.125rem; /* 450px */
    max-width: 100%;
    padding: 0.875rem 1.75rem; /* 14px 28px */
    border: 1px solid var(--color-teal-800);
    border-radius: 5rem; /* 80px */
  }

  .collection-shop__search:focus-within {
    outline: 2px solid var(--color-teal-800);
    outline-offset: 2px;
  }

  /* Doubled class beats base.css's input:not([type=checkbox],[type=radio]). */
  .collection-shop .collection-shop__search .collection-shop__search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-geom--family);
    font-size: 1rem; /* 16px */
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--letter-spacing--002);
    color: var(--color-teal-800);
  }

  .collection-shop__search-input:focus {
    outline: none;
  }

  .collection-shop__search-input::placeholder {
    color: var(--color-teal-800);
    opacity: 1;
  }

  .collection-shop__search-input::-webkit-search-cancel-button {
    display: none;
  }

  .collection-shop__search-submit {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-teal-800);
    cursor: pointer;
  }

  .collection-shop__search-submit svg {
    width: 1.125rem; /* 18px */
    height: 1.125rem;
  }

  /* ------------------------------------------------------------------ *
   * Product grid + cards
   * ------------------------------------------------------------------ */
  .collection-shop__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem; /* 24px */
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .collection-shop-card {
    display: flex;
    flex-direction: column;
  }

  .collection-shop-card__media {
    position: relative;
    aspect-ratio: 400 / 500;
    overflow: hidden;
    border-radius: 1.5rem; /* 24px */
    background-color: var(--color-sand-50);
  }

  .collection-shop-card__media-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  .collection-shop-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .collection-shop-card__image--placeholder svg {
    width: 100%;
    height: 100%;
  }

  /* View / Add reveal on hover, pinned 24px off the media's bottom edge.
     focus-within keeps them reachable on keyboard. */
  .collection-shop-card__actions {
    position: absolute;
    inset-inline: 0;
    bottom: 1.5rem; /* 24px */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* 8px */
    opacity: 0;
    transform: translateY(0.25rem);
    transition:
      opacity var(--animation-speed, 0.2s) var(--animation-easing, ease),
      transform var(--animation-speed, 0.2s) var(--animation-easing, ease);
    pointer-events: none;
  }

  .collection-shop-card__media:hover .collection-shop-card__actions,
  .collection-shop-card__media:focus-within .collection-shop-card__actions,
  .collection-shop-card__actions:focus-within {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Figma Button/Primary/SM, outline variant. .button-fill opts the pill into the
     theme's shared radial hover wipe — the kit fills outline pills solid white on
     hover, keeping Teal/800 text. */
  .collection-shop .collection-shop-card__view {
    --button-fill-color: #fff;
    --button-fill-under: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem; /* 10px */
    padding: 0.625rem 1.25rem; /* 10px 20px */
    border: 1px solid var(--color-teal-800);
    border-radius: 5rem; /* 80px */
    font-family: var(--font-geom--family);
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--letter-spacing--002);
    color: var(--color-teal-800);
    text-decoration: none;
    white-space: nowrap;
  }

  /* 10px arrow glyph, swung by the shared button-arrow states on hover. */
  .collection-shop .collection-shop-card__view::after {
    content: '';
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    background-color: currentcolor;
    mask: var(--csh-arrow-icon) center / 0.625rem 0.625rem no-repeat;
    transition: var(--button-arrow-transition);
  }

  .collection-shop .collection-shop-card__view:is(:hover, :focus-visible)::after {
    transform: var(--button-arrow-hover-transform);
  }

  /* Add pill — theme .button (primary colors + wipe + checkmark burst), sized down
     to the Figma SM pill. `.add-to-cart-button` pins height to --height-buy-buttons
     (the 52px PDP size), so auto must be restated here. The button is display: grid,
     so the plus glyph's 10px gap rides the ::after margin, not a gap. */
  .collection-shop .collection-shop-card__atc.button {
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 0.625rem 1.25rem; /* 10px 20px */
    border-radius: 5rem;
    font-size: 0.875rem; /* 14px */
    letter-spacing: var(--letter-spacing--002);
    line-height: normal;
  }

  /* Quote / RFQ link standing in for the Add button: same pill, text may be as long as
     "Submit a Pouch RFQ", so keep it on one line and inside the card. */
  .collection-shop .collection-shop-card__atc--quote {
    white-space: nowrap;
    max-width: 100%;
    text-decoration: none;
  }

  .collection-shop .collection-shop-card__atc .add-to-cart-text::after {
    content: '';
    flex-shrink: 0;
    width: 0.625rem; /* 10px */
    height: 0.625rem;
    margin-inline-start: 0.25rem; /* base's own .add-to-cart-text gap supplies the rest */
    background-color: currentcolor;
    mask: var(--csh-plus-icon) center / 0.625rem 0.625rem no-repeat;
  }

  /* The burst is authored for the 48px PDP button; this pill is ~35px. */
  .collection-shop .collection-shop-card__atc .add-to-cart__added-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .collection-shop-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    padding: 1rem 0.5rem; /* 16px 8px */
  }

  .collection-shop-card__title {
    margin: 0;
    font-family: var(--font-geom--family);
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    line-height: var(--line-height--150);
    letter-spacing: 0;
    color: var(--color-teal-800);
  }

  .collection-shop-card__link {
    color: inherit;
    text-decoration: none;
  }

  .collection-shop-card__link:hover {
    text-decoration: underline;
    text-underline-offset: 0.125rem;
  }

  .collection-shop-card__subtitle {
    margin: 0;
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    line-height: var(--line-height--150);
    color: var(--color-teal-800);
  }

  .collection-shop__empty {
    margin: 0;
    padding-block: 2.5rem;
    font-size: 1rem;
    line-height: var(--line-height--150);
  }

  /* ------------------------------------------------------------------ *
   * In-collection search results
   * ------------------------------------------------------------------ */
  .collection-shop__catalog {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .collection-shop__search-results {
    width: 100%;
  }

  /* Explicit display values above would otherwise beat the UA's [hidden]. */
  .collection-shop__catalog[hidden],
  .collection-shop__search-results[hidden] {
    display: none;
  }

  .collection-shop__search-status {
    margin: 0 0 1.5rem; /* 24px */
    font-size: 1rem;
    font-weight: 400;
    line-height: var(--line-height--150);
    color: var(--color-teal-800);
  }

  .collection-shop__search-empty {
    margin: 0;
    padding-block: 2.5rem;
    font-size: 1rem;
    line-height: var(--line-height--150);
    color: var(--color-teal-800);
  }

  .collection-shop__search-all {
    color: var(--color-teal-800);
    text-decoration: underline;
    text-underline-offset: 0.125rem;
  }

  /* ------------------------------------------------------------------ *
   * Pagination
   * ------------------------------------------------------------------ */
  .collection-shop__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem; /* 5px */
    padding-block: 2.5rem; /* 40px */
  }

  .collection-shop__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem; /* 32px */
    height: 2rem;
    border: 1px solid var(--color-sand-200);
    border-radius: 0.5rem; /* 8px */
    font-family: var(--font-geom--family);
    font-size: 1rem; /* 16px */
    line-height: 1;
    color: var(--color-teal-800);
    text-decoration: none;
  }

  a.collection-shop__page:hover {
    background-color: var(--color-sand-50);
  }

  .collection-shop__page.is-current {
    background-image: linear-gradient(135deg, var(--color-sand-50) 0%, var(--color-sand-200) 100%);
  }

  .collection-shop__page--control svg {
    width: 0.5rem;
    height: 0.75rem;
  }

  .collection-shop__page--control.is-disabled {
    opacity: 0.4;
  }

  .collection-shop__page--gap {
    font-size: 0.8125rem; /* 13px */
    font-weight: 600;
  }

  /* Mobile-only "Filter/Secondary Nav" (Figma 2594:1470) */
  .collection-shop__mobile-bar {
    display: none;
  }

  /* ------------------------------------------------------------------ *
   * Mobile — title, pill bar, 2-up grid.
   * ------------------------------------------------------------------ */
  @media screen and (max-width: 749px) {
    .collection-shop__layout {
      flex-direction: column;
      gap: 0;
    }

    .collection-shop__sidebar {
      flex: 0 0 auto;
      width: 100%;
    }

    .collection-shop__main {
      flex: 0 0 auto;
      width: 100%;
    }

    .collection-shop__title {
      padding-block-end: 1.5rem;
    }

    /* The bar replaces the sidebar nav and the search pill on mobile. */
    .collection-shop__eyebrow,
    .collection-shop__rule,
    .collection-shop__nav,
    .collection-shop__toolbar {
      display: none;
    }

    .collection-shop__mobile-bar {
      display: block;
      position: relative;
      width: 100%;
      margin-block-end: 2rem; /* 32px */
    }

    /* Bleeds to the screen edge so pills scroll out under the page gutter. */
    .collection-shop__mobile-bar-scroll {
      display: flex;
      align-items: center;
      gap: 0.5rem; /* 8px */
      margin-inline: calc(-1 * var(--padding-inline-start-mobile, 1rem)) calc(-1 * var(--padding-inline-end-mobile, 1rem));
      padding-inline: var(--padding-inline-start-mobile, 1rem) var(--padding-inline-end-mobile, 1rem);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .collection-shop__mobile-bar-scroll::-webkit-scrollbar {
      display: none;
    }

    /* Figma Mobile/UI/Eyebrow — 12px against the desktop utility's 14px. */
    .collection-shop__mobile-eyebrow {
      flex-shrink: 0;
      font-size: 0.75rem;
      color: var(--color-teal-800);
    }

    /* Figma Button/Primary/SM, outline */
    .collection-shop__pill {
      display: inline-flex;
      flex-shrink: 0;
      align-items: center;
      gap: 0.625rem; /* 10px */
      padding: 0.375rem 0.75rem; /* 6px 12px */
      border: 1px solid var(--color-teal-800);
      border-radius: 5rem; /* 80px */
      background: transparent;
      font-family: var(--font-geom--family);
      font-size: 0.875rem; /* 14px */
      font-weight: 600;
      line-height: normal;
      letter-spacing: var(--letter-spacing--002);
      color: var(--color-teal-800);
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
    }

    summary.collection-shop__pill {
      list-style: none;
    }

    summary.collection-shop__pill::-webkit-details-marker,
    summary.collection-shop__pill::marker {
      display: none;
      content: '';
    }

    .collection-shop__pill.is-active {
      background: var(--color-sand-50);
    }

    /* Figma 2594:1517 — the pill whose sheet is open fills Teal/50. */
    .collection-shop__pill-group[open] > summary.collection-shop__pill {
      background: var(--color-teal-50);
    }

    .collection-shop__pill-group {
      flex-shrink: 0;
    }

    /* icon-caret is a 14x14 down chevron; the Figma glyph box is 12.7px. */
    .collection-shop__pill-caret {
      display: flex;
      align-items: center;
      transition: transform var(--animation-speed, 0.2s) var(--animation-easing, ease);
    }

    .collection-shop__pill-caret svg {
      width: 0.8125rem; /* 13px */
      height: 0.8125rem;
    }

    .collection-shop__pill-group[open] > summary .collection-shop__pill-caret {
      transform: rotate(180deg);
    }

    .collection-shop__pill-icon {
      display: flex;
      align-items: center;
    }

    .collection-shop__pill-icon svg {
      width: 1.125rem; /* 18px */
      height: 1.125rem;
    }

    /* ------------------------------------------------------------------ *
     * Bottom sheet — Figma 2594:789. Overlay + sheet are fixed, so the
     * pill row's overflow-x scroller never clips them.
     * ------------------------------------------------------------------ */

    /* Sea Grey wash: clear over the top of the page, Seagrey/950 at 40% below —
       the pill row stays legible while the grid recedes behind the sheet. */
    .collection-shop__sheet::backdrop {
      background: linear-gradient(180deg, rgb(137 165 166 / 0) 28.8%, var(--color-sea-grey-950, #283131) 56.9%);
      opacity: 0.4;
      animation: csh-overlay-in var(--animation-speed, 0.2s) ease both;
    }

    .collection-shop__sheet {
      position: fixed;
      inset-inline: 0;
      bottom: 0;
      /* A native <dialog> shown modally lives in the top layer, above the pill
         row's overflow-x scroller — iOS WebKit clips fixed descendants of a
         scroller, which kept this sheet invisible on iPhone. Reset the UA box. */
      top: auto;
      width: auto;
      height: auto;
      max-width: none;
      margin: 0;
      padding: 0;
      border: 0;
      color: inherit;
      z-index: var(--layer-menu-drawer, 18);
      max-height: 80dvh;
      overflow-y: auto;
      background: var(--color-sand-100);
      border-radius: 1.5rem 1.5rem 0 0; /* 24px */
      animation: csh-sheet-up 0.3s var(--animation-easing, ease) both;
    }

    @keyframes csh-sheet-up {
      from {
        transform: translateY(100%);
      }
    }

    @keyframes csh-overlay-in {
      from {
        opacity: 0;
      }

      to {
        opacity: 0.4;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .collection-shop__sheet,
      .collection-shop__sheet::backdrop {
        animation: none;
      }
    }

    .collection-shop__sheet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.5rem; /* 24px */
    }

    /* Figma Mobile/Heading/H3 */
    .collection-shop__sheet-title {
      font-family: var(--font-geom--family);
      font-size: 1.5rem; /* 24px */
      font-weight: 600;
      line-height: var(--line-height--120);
      color: var(--color-teal-800);
    }

    .collection-shop__sheet-close {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      background: none;
      color: var(--color-teal-800);
      cursor: pointer;
    }

    .collection-shop__sheet-close svg {
      width: 1.375rem; /* 22px */
      height: 1.375rem;
    }

    /* Hairline inset 24px each side (342 of 390). */
    .collection-shop__sheet-rule {
      margin: 0 1.5rem;
      border: 0;
      border-block-start: 1px solid var(--color-sand-300);
    }

    .collection-shop__sheet-list {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: 0;
      padding: 1rem 0.875rem 1.5rem; /* list py-8 folded into nav-links px-14 pb-16 + safe bottom */
      list-style: none;
    }

    /* Chevron-led value rows; the highlight hugs the content (Figma Item). */
    .collection-shop__sheet-link {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem; /* 12px */
      padding: 0.25rem 0.625rem; /* 4px 10px */
      border-radius: 0.5rem; /* 8px */
      font-size: 1rem; /* 16px */
      font-weight: 400;
      line-height: var(--line-height--150);
      color: var(--color-teal-800);
      text-decoration: none;
    }

    .collection-shop__sheet-link.is-current {
      background-color: var(--color-sand-200);
    }

    .collection-shop__sheet-chevron {
      display: flex;
      align-items: center;
    }

    .collection-shop__sheet-chevron svg {
      width: 0.5rem;
      height: 0.8125rem;
    }

    /* Search sheet body — Figma 2597:2360 */
    .collection-shop__sheet-search {
      display: flex;
      flex-direction: column;
      gap: 1rem; /* 16px */
      width: 100%;
      padding: 1rem 1.5rem 1.5rem; /* 16px 24px 24px */
    }

    /* "form fill" — Sand/200 at 50% */
    .collection-shop__sheet-form {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      width: 100%;
      padding: 1rem 1.5rem; /* 16px 24px */
      border: 0;
      border-radius: 0.5rem; /* 8px */
      background: rgb(230 215 195 / 0.5);
    }

    /* Doubled class beats base.css's input:not([type=checkbox],[type=radio])
       (0,1,1), which otherwise paints the input --color-input-background. */
    .collection-shop .collection-shop__sheet-form .collection-shop__sheet-input {
      flex: 1 1 auto;
      min-width: 0;
      padding: 0;
      border: 0;
      background: transparent;
      font-family: var(--font-geom--family);
      font-size: 1.25rem; /* 20px */
      font-weight: 600;
      line-height: var(--line-height--130);
      color: var(--color-teal-800);
    }

    .collection-shop__sheet-input:focus {
      outline: none;
    }

    .collection-shop__sheet-input::placeholder {
      color: var(--color-sand-500);
      opacity: 1;
    }

    .collection-shop__sheet-input::-webkit-search-cancel-button {
      display: none;
    }

    .collection-shop__sheet-submit {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      background: none;
      color: var(--color-sand-500);
      cursor: pointer;
    }

    .collection-shop__sheet-submit svg {
      width: 1.5rem; /* 24px */
      height: 1.5rem;
    }

    .collection-shop__sheet-popular {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem; /* 8px */
      padding-block: 0.5rem;
    }

    .collection-shop__sheet-popular-heading {
      margin: 0;
      font-family: var(--font-geom--family);
      font-size: 1.125rem; /* 18px */
      font-weight: 600;
      line-height: var(--line-height--150);
      color: var(--color-teal-800);
    }

    .collection-shop__sheet-popular-link {
      font-size: 1rem; /* 16px */
      font-weight: 400;
      line-height: var(--line-height--150);
      color: var(--color-teal-800);
      text-decoration: none;
    }

    .collection-shop__sheet-popular-link:hover {
      text-decoration: underline;
      text-underline-offset: 0.125rem;
    }

    /* The page scrolls inside .page-wrapper — freeze it while a sheet is open. */
    html.csh-sheet-open .page-wrapper {
      overflow: hidden;
    }

    .collection-shop__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem 1.5rem;
    }

    /* Two pills don't fit a half-width card side by side — stack them. */
    .collection-shop-card__actions {
      flex-direction: column;
      bottom: 1rem;
    }

    .collection-shop__search {
      width: 100%;
    }

    .collection-shop__pagination {
      padding-block: 2rem;
    }
  }
/* END_SECTION:main-collection-shop */

/* START_SECTION:main-collection (INDEX:48) */
.product-grid__item--featured-card {
    display: flex;
  }

  .product-grid__item--featured-card > .collection-featured-card,
  .product-grid__item--featured-card > .group-block {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 100%;
  }

  .product-grid__item--featured-card[data-size='2x'] {
    grid-column: span 2;
  }

  .product-grid__item--featured-card[data-size='3x'] {
    grid-column: span 3;
  }

  @media screen and (max-width: 749px) {
    /* Mobile caps the span at the mobile column count (2) */
    .product-grid__item--featured-card[data-size='3x'] {
      grid-column: span 2;
    }

    /* When mobile is forced to 1 column, keep cards single-cell */
    .product-grid-mobile--large .product-grid__item--featured-card[data-size='2x'],
    .product-grid-mobile--large .product-grid__item--featured-card[data-size='3x'] {
      grid-column: span 1;
    }

    .product-grid__item--featured-card-hidden-mobile {
      display: none;
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:main-faq (INDEX:49) */
/* ================================================================
     FAQ page — Figma Sana_FAQ_desktop 2651:190
     1280px content column inside 80px gutters; 64px between the intro,
     the two columns and the cards.
     ================================================================ */
  .section--faq-page {
    --full-page-grid-central-column-width: min(1280px, calc(100% - 160px));
  }

  /* The sand wash fades to white a quarter of the way down. Only the
     .section-background sibling paints behind a section. */
  .section-background:has(+ .section--faq-page) {
    background-image: linear-gradient(to bottom, var(--color-sand-50) 0%, var(--color-white) 26%);
  }

  .faq-page {
    display: flex;
    flex-direction: column;
    gap: 4rem; /* 64px */
    width: 100%;
    font-family: var(--font-geom--family);
    color: var(--color-teal-800);
  }

  /* --- Intro ------------------------------------------------------- */
  .faq-page__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem; /* 20px */
    width: 100%;
    max-width: 65rem; /* 1040px */
    margin-inline: auto;
    text-align: center;
  }

  .faq-page__eyebrow {
    margin: 0;
    color: var(--color-sand-500);
  }

  /* Headling/H1 */
  .faq-page__title {
    margin: 0;
    font-family: var(--font-geom--family);
    font-size: 3rem; /* 48px */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-teal-800);
  }

  /* Headling/H5 */
  .faq-page__description {
    margin: 0;
    max-width: 58.625rem; /* 938px */
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-teal-800);
  }

  /* --- Two columns: 358px topics, 842px questions -------------------- */
  .faq-page__layout {
    display: grid;
    grid-template-columns: 22.375rem minmax(0, 52.625rem);
    justify-content: space-between;
    align-items: start;
    column-gap: 2.5rem; /* 40px floor when there is nothing left to distribute */
    width: 100%;
  }

  /* --- Sidebar ------------------------------------------------------- */
  .faq-page__sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  /* The sidebar stays put while the questions scroll past it, and scrolls on its own: the
     same arrangement as the collection sidebar. It pins 24px under the sticky header (the
     offset is only set while the header is in its sticky state), is capped to the space under
     it so a long topic list scrolls inside itself with the bar hidden, and overscroll-behavior
     keeps the wheel from bleeding into the page once the list ends. The 4px margin/padding
     swap keeps focus rings inside the scroll box without moving the text. */
  @media screen and (min-width: 750px) {
    .faq-page__sidebar {
      --faq-sidebar-gap: 24px;
      position: sticky;
      top: calc(var(--sticky-header-offset, 0px) + var(--faq-sidebar-gap));
      max-height: calc(100dvh - var(--sticky-header-offset, 0px) - var(--faq-sidebar-gap) * 2);
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: none;
      margin-inline: -4px;
      padding-inline: 4px;
      padding-block-end: 4px;
    }

    .faq-page__sidebar::-webkit-scrollbar {
      display: none;
    }

    body:has(#header-group #header-component[data-sticky-state='active']) .faq-page__sidebar {
      --sticky-header-offset: var(--header-height);
    }
  }

  .faq-page__topics-label {
    margin: 0;
    color: var(--color-teal-800);
  }

  /* Figma 2651:225 — a hairline inside a 40px band, 23px under the label. */
  .faq-page__rule {
    width: 100%;
    margin: 1.4375rem 0 1rem;
    border: 0;
    border-block-start: 1px solid var(--color-sand-300);
  }

  .faq-page__nav,
  .faq-page__sub-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

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

  /* Mobile/UI/Nav — the 20px nav style, as the collection sidebar uses it. */
  .faq-page__nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding-block: 0.875rem; /* 14px */
    font-family: var(--font-geom--family);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--color-teal-800);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
  }

  .faq-page__nav-link::-webkit-details-marker,
  .faq-page__nav-link::marker {
    display: none;
    content: '';
  }

  .faq-page__nav-text {
    color: inherit;
    text-decoration: none;
  }

  a.faq-page__nav-link:hover,
  a.faq-page__nav-text:hover,
  .faq-page__nav-link--toggle:hover {
    color: var(--color-teal-600);
  }

  /* The open parent keeps 8px between its title and the list (Figma 2651:231). */
  .faq-page__nav-group[open] > .faq-page__nav-link {
    padding-block-end: 0.5rem;
  }

  .faq-page__chevron {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 0.8125rem; /* 13px box around the 7.4px glyph */
    transition: transform var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  .faq-page__chevron svg {
    width: 0.4625rem;
    height: 0.8125rem;
  }

  .faq-page__nav-group[open] > .faq-page__nav-link .faq-page__chevron {
    transform: rotate(90deg);
  }

  /* The list sits inside the parent's 14px padding: 8px above, 8 + 14 below. */
  .faq-page__sub-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0 1.375rem;
  }

  .faq-page__sub-link {
    display: block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-teal-800);
    text-decoration: none;
  }

  .faq-page__sub-link:hover,
  .faq-page__sub-link.is-current {
    background-color: var(--color-sand-50);
  }

  /* Editor only: a topic with nothing to show yet. */
  .faq-page__nav-link.is-empty,
  .faq-page__sub-link.is-empty {
    opacity: 0.5;
  }

  /* --- Questions ----------------------------------------------------- */
  .faq-page__content {
    min-width: 0;
  }

  .faq-page__group {
    scroll-margin-block-start: calc(var(--header-height, 0px) + 1.5rem);
  }

  .faq-page__group-header {
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    background: var(--color-sand-100);
  }

  /* Headling/H3 */
  .faq-page__group-title {
    margin: 0;
    font-family: var(--font-geom--family);
    font-size: 2.25rem; /* 36px */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--color-teal-800);
  }

  /* Rows are 40px of air above and below each question between hairlines,
     inset 10px from the group's edges (Figma 2651:261). */
  .faq-page__items {
    margin-block-start: 2.5rem;
    padding-inline: 0.625rem;
  }

  .faq-page__item {
    padding-block: 2.5rem;
    border-block-start: 1px solid var(--color-sand-200);
  }

  .faq-page__item:last-of-type {
    border-block-end: 1px solid var(--color-sand-200);
  }

  /* Headling/H4 */
  .faq-page__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline-end: 0.5rem;
    font-family: var(--font-geom--family);
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-teal-800);
    cursor: pointer;
    list-style: none;
  }

  .faq-page__question::-webkit-details-marker,
  .faq-page__question::marker {
    display: none;
    content: '';
  }

  .faq-page__question-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 15px plus that folds into a minus: the upright bar swings flat. */
  .faq-page__toggle {
    position: relative;
    flex: 0 0 0.9375rem;
    width: 0.9375rem;
    height: 0.9375rem;
  }

  .faq-page__toggle::before,
  .faq-page__toggle::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--color-teal-800);
    transition: transform var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  .faq-page__toggle::after {
    transform: rotate(90deg);
  }

  .faq-page__item[open] .faq-page__toggle::after {
    transform: rotate(0);
  }

  /* Body/LG/Regular in SeaGrey/700; links in Teal/500 stay underlined. */
  .faq-page__answer {
    margin-block-start: 1.5rem;
    font-size: 1.125rem; /* 18px */
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
  }

  .faq-page__answer :is(p, li) {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }

  .faq-page__answer > :first-child {
    margin-block-start: 0;
  }

  .faq-page__answer > :last-child {
    margin-block-end: 0;
  }

  .faq-page__answer.rte :is(p, ul, ol, table) a:where(:not(.button, .button-secondary)) {
    color: var(--color-teal-500);
    text-decoration: underline;
    text-decoration-color: currentcolor;
  }

  .faq-page__empty {
    margin: 0;
    padding-block: 2.5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
  }

  /* --- No menu selected: the questions sit in the reading column on their own ---- */
  .faq-page--single .faq-page__layout {
    grid-template-columns: minmax(0, 52.625rem);
    justify-content: center;
  }

  .faq-page__description.rte > :first-child {
    margin-block-start: 0;
  }

  .faq-page__description.rte > :last-child {
    margin-block-end: 0;
  }

  /* --- Link cards ---------------------------------------------------- */
  .faq-page__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem; /* 20px */
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .faq-page__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    min-height: 12.75rem; /* 204px */
    padding: 2rem;
    border-radius: 1.25rem;
    background: var(--color-teal-100);
  }

  .faq-page__card-copy {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .faq-page__card-title {
    margin: 0;
    font-family: var(--font-geom--family);
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-teal-800);
  }

  .faq-page__card-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
  }

  /* Button/Primary SM outline — UI/Button/Small with a 10px arrow. `button-fill` opts into
     the theme's hover: the Teal/800 fill wipes up from the bottom edge (base.css), so the
     button only declares the fill colour, what it paints beneath it, and the text colour. */
  .faq-page__card-button {
    --button-fill-color: var(--color-teal-800);
    --button-fill-under: transparent;

    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    align-self: flex-start;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--color-teal-800);
    border-radius: 5rem;
    font-family: var(--font-geom--family);
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    color: var(--color-teal-800);
    text-decoration: none;
  }

  .faq-page__card-button:hover {
    color: var(--color-white);
  }

  /* The trailing arrow swings the way every theme button's does (theme-styles-variables). */
  .faq-page__card-button svg {
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    transition: var(--button-arrow-transition);
  }

  .faq-page__card-button:hover svg {
    transform: var(--button-arrow-hover-transform);
  }

  .faq-page__mobile-bar {
    display: none;
  }

  /* ================================================================
     Mobile — Figma Sana_FAQ_mobile 2651:444. Left-aligned intro on the
     sand wash, a pill bar in place of the sidebar (sub-topics open the
     collection page's bottom sheet), 24px rows, stacked cards.
     ================================================================ */
  @media screen and (max-width: 749px) {
    .section--faq-page {
      --full-page-grid-central-column-width: calc(100% - 2rem);
    }

    /* The wash only backs the intro block on mobile. */
    .section-background:has(+ .section--faq-page) {
      background-image: linear-gradient(to bottom, var(--color-sand-50) 0%, var(--color-white) 20rem);
    }

    .faq-page {
      gap: 2.5rem; /* 40px between intro, bar/content and cards */
    }

    .faq-page__header {
      align-items: flex-start;
      max-width: none;
      text-align: left;
    }

    /* Mobile/Heading/H1 */
    .faq-page__title {
      font-size: 2.25rem; /* 36px */
    }

    /* Mobile/Heading/H5 */
    .faq-page__description {
      max-width: none;
      font-size: 1.125rem; /* 18px */
    }

    .faq-page__layout {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 2.5rem;
    }

    .faq-page__sidebar {
      display: none;
    }

    .faq-page__mobile-bar {
      display: block;
      position: relative;
      width: 100%;
    }

    /* Bleeds to the screen edge so pills scroll out under the page gutter. */
    .faq-page__mobile-bar-scroll {
      display: flex;
      align-items: center;
      gap: 0.5rem; /* 8px */
      margin-inline: -1rem;
      padding-inline: 1rem;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .faq-page__mobile-bar-scroll::-webkit-scrollbar {
      display: none;
    }

    /* Figma Mobile/UI/Eyebrow — 12px against the desktop utility's 14px. */
    .faq-page__mobile-eyebrow {
      flex-shrink: 0;
      font-size: 0.75rem;
      color: var(--color-teal-800);
    }

    /* Figma Button/Primary/SM, outline; the current topic fills Sand/100. */
    .faq-page__pill {
      display: inline-flex;
      flex-shrink: 0;
      align-items: center;
      gap: 0.625rem; /* 10px */
      padding: 0.375rem 0.75rem; /* 6px 12px */
      border: 1px solid var(--color-teal-800);
      border-radius: 5rem; /* 80px */
      background: transparent;
      font-family: var(--font-geom--family);
      font-size: 0.875rem; /* 14px */
      font-weight: 600;
      line-height: normal;
      letter-spacing: 0.02em;
      color: var(--color-teal-800);
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
    }

    summary.faq-page__pill {
      list-style: none;
    }

    summary.faq-page__pill::-webkit-details-marker,
    summary.faq-page__pill::marker {
      display: none;
      content: '';
    }

    .faq-page__pill.is-current,
    .faq-page__pill.is-active {
      background: var(--color-sand-100);
    }

    .faq-page__pill-group[open] > summary.faq-page__pill {
      background: var(--color-teal-50);
    }

    .faq-page__pill-group {
      flex-shrink: 0;
    }

    /* The 7.4 x 12.7 chevron, turned to point down; up while the sheet is open. */
    .faq-page__pill-caret {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 0.8125rem;
    }

    .faq-page__pill-caret svg {
      width: 0.4625rem;
      height: 0.8125rem;
      transform: rotate(90deg);
      transition: transform var(--animation-speed, 0.2s) var(--animation-easing, ease);
    }

    .faq-page__pill-group[open] > summary .faq-page__pill-caret svg {
      transform: rotate(-90deg);
    }

    /* Bottom sheet — same chrome as the collection page (Figma 2594:789).
       Overlay and sheet are fixed, so the pill row's scroller never clips them. */
    .faq-page__sheet::backdrop {
      background: linear-gradient(180deg, rgb(137 165 166 / 0) 28.8%, var(--color-sea-grey-950, #283131) 56.9%);
      opacity: 0.4;
      animation: faq-overlay-in var(--animation-speed, 0.2s) ease both;
    }

    .faq-page__sheet {
      position: fixed;
      inset-inline: 0;
      bottom: 0;
      /* A native <dialog> shown modally lives in the top layer, above the pill
         row's overflow-x scroller — iOS WebKit clips fixed descendants of a
         scroller, which kept this sheet invisible on iPhone. Reset the UA box. */
      top: auto;
      width: auto;
      height: auto;
      max-width: none;
      margin: 0;
      padding: 0;
      border: 0;
      color: inherit;
      z-index: var(--layer-menu-drawer, 18);
      max-height: 80dvh;
      overflow-y: auto;
      background: var(--color-sand-100);
      border-radius: 1.5rem 1.5rem 0 0;
      animation: faq-sheet-up 0.3s var(--animation-easing, ease) both;
    }

    @keyframes faq-sheet-up {
      from {
        transform: translateY(100%);
      }
    }

    @keyframes faq-overlay-in {
      from {
        opacity: 0;
      }

      to {
        opacity: 0.4;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .faq-page__sheet,
      .faq-page__sheet::backdrop {
        animation: none;
      }
    }

    html.faq-sheet-open {
      overflow: hidden;
    }

    .faq-page__sheet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.5rem;
    }

    .faq-page__sheet-title {
      font-family: var(--font-geom--family);
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1.2;
      color: var(--color-teal-800);
    }

    .faq-page__sheet-close {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      background: none;
      color: var(--color-teal-800);
      cursor: pointer;
    }

    .faq-page__sheet-close svg {
      width: 1.375rem;
      height: 1.375rem;
    }

    .faq-page__sheet-rule {
      margin: 0 1.5rem;
      border: 0;
      border-block-start: 1px solid var(--color-sand-300);
    }

    .faq-page__sheet-list {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: 0;
      padding: 1rem 0.875rem 1.5rem;
      list-style: none;
    }

    .faq-page__sheet-link {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.25rem 0.625rem;
      border-radius: 0.5rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: var(--color-teal-800);
      text-decoration: none;
    }

    .faq-page__sheet-link.is-current {
      background-color: var(--color-sand-200);
    }


    /* Questions: Mobile/Heading/H3 title chip, 24px rows, Mobile/Heading/H4 questions. */
    .faq-page__group-header {
      border-radius: 0.5rem;
    }

    .faq-page__group-title {
      font-size: 1.5rem; /* 24px */
      line-height: 1.1;
    }

    .faq-page__items {
      margin-block-start: 2rem; /* 32px */
    }

    .faq-page__item {
      padding-block: 1.5rem; /* 24px */
    }

    .faq-page__question {
      font-size: 1.25rem; /* 20px */
      line-height: 1.2;
    }

    .faq-page__answer {
      margin-block-start: 1rem;
      font-size: 1rem;
    }

    /* Cards stack, 24px padding, no fixed height. */
    .faq-page__cards {
      grid-template-columns: minmax(0, 1fr);
    }

    .faq-page__card {
      justify-content: flex-start;
      min-height: 0;
      padding: 1.5rem;
    }
  }
/* END_SECTION:main-faq */

/* START_SECTION:main-page-legal (INDEX:50) */
.legal-page {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
  }

  .legal-page__header {
    text-align: center;
    margin-block-end: var(--gap-2xl, 48px);

    @media screen and (max-width: 749px) {
      margin-block-end: var(--gap-xl, 24px);
    }
  }

  .legal-page__title {
    margin: 0;
    text-transform: uppercase;
  }

  @media screen and (max-width: 749px) {
    .legal-page__title.h4 {
      font-family: var(--font-h5--family);
      font-style: var(--font-h5--style);
      font-weight: var(--font-h5--weight);
      font-size: var(--font-h5--size);
      line-height: var(--font-h5--line-height);
      letter-spacing: var(--font-h5--letter-spacing);
    }
  }

  .legal-page__body :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-h6--family);
    font-size: var(--font-h6--size);
    line-height: var(--font-h6--line-height);
    color: var(--font-h6--color, var(--color-foreground-heading));
    text-transform: uppercase;
    margin-block: var(--gap-xl, 32px) var(--gap-sm, 12px);
  }

  .legal-page__body :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-block-start: 0;
  }

  .legal-page__body a {
    color: var(--color-link, currentColor);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .legal-page__body a:hover,
  .legal-page__body a:focus-visible {
    text-decoration-thickness: 2px;
  }

  .legal-page__body p {
    margin-block: 0 var(--gap-md, 16px);
  }

  .legal-page__body ul,
  .legal-page__body ol {
    margin-block: 0 var(--gap-md, 16px);
    padding-inline-start: 1.5rem;
  }

  .legal-page__body li {
    margin-block: 0.25rem;
  }
/* END_SECTION:main-page-legal */

/* START_SECTION:marquee (INDEX:52) */
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;
  }

  /*
    Heading/paragraph presets hang a `margin-block: var(--font-hN--spacing)` on their
    text ('snippets/text.liquid'). In a horizontal ticker that margin does nothing but
    inflate the band, so it is zeroed here. The repeated `.text-block` outranks the
    (0,2,1) `.text-block.hN > *` rule it has to beat, whichever order the two land in
    the bundled stylesheet.
  */
  .marquee__repeated-items .text-block.text-block > * {
    margin-block: 0;
  }

  @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:53) */
.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:newsletter-cta (INDEX:54) */
/* ================================================================
     Sana 2026 newsletter CTA
     Figma: Section/CTA/Newletter 169:952 (desktop)
            Section/CTA/Newletter 227:939 (mobile)
     ================================================================ */

  /* The card overlaps the section above it (Figma places the card 125px
     above the footer boundary), so the section wrapper must sit on top of
     the preceding section and never clip. */
  .newsletter-cta-section {
    position: relative;
    z-index: 1;
  }

  .section.newsletter-cta {
    /* Figma page margin is 80px at the 1440 anchor (16px mobile), matching
       the header nav's --nav-bar-padding-inline, not the theme's 50px. */
    --page-margin: 5rem; /* 80 */
  }

  .newsletter-cta__card {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem; /* 32 — breathing room between intro and form before wrap */
    padding: 5rem 6rem; /* 80 / 96 */
    border-radius: 1.25rem; /* 20 */
    overflow: hidden;
    margin-block-start: calc(-1 * var(--newsletter-overlap, 0rem));
    color: var(--color-white, #fff);
    /* Brand-gradient fallback until the artwork is uploaded in the editor. */
    background: var(--gradient-brand-deep, var(--color-teal-800));
  }

  .newsletter-cta__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

  .newsletter-cta__intro {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* 20 */
  }

  .newsletter-cta__heading {
    margin: 0;
    font-family: var(--font-geom--family);
    font-size: 2.25rem; /* 36 — the mobile frame keeps the desktop H3 size */
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
  }

  .newsletter-cta__description {
    margin: 0;
    max-width: 20.875rem; /* 334 */
    font-family: var(--font-geom--family);
    font-size: 1.125rem; /* 18 */
    font-weight: 500;
    line-height: 1.5;
  }

  .newsletter-cta__form {
    flex-shrink: 0;
  }

  .newsletter-cta__form .email-signup-block {
    width: 30.625rem; /* 490 */
    max-width: 100%;
  }

  /* --- Email pill: restyle the stock email-signup block ------------- */
  /* The integrated input group reads these variables for its border,
     radius and colors — no markup changes needed. */
  .newsletter-cta__form {
    --color-input-background: rgb(255 255 255 / 0.2);
    --color-input-border: var(--color-white, #fff);
    --color-input-text: #fff;
    --color-input-text-rgb: 255 255 255;
    --style-border-radius-inputs: 3.125rem; /* 50 */
    --style-border-width-inputs: 1px;
  }

  .newsletter-cta__form .email-signup__input-group--integrated {
    padding: 0.25rem 0.25rem 0.25rem 1.5rem; /* 4 / 4 / 4 / 24 */
  }

  .newsletter-cta__form .email-signup__input-group--integrated .email-signup__input {
    padding: 0;
    min-width: 0;
    font-size: 1rem; /* 16 */
    line-height: 1.25rem; /* 20 */
  }

  .newsletter-cta__form .email-signup__input::placeholder {
    color: var(--color-white, #fff);
    opacity: 1;
  }

  /* Submit: white 99x40 pill, teal label (Figma 169:961) */
  .newsletter-cta__form .email-signup__button.email-signup__button--integrated {
    align-self: center;
    margin: 0;
    height: 2.5rem; /* 40 */
    min-width: 6.1875rem; /* 99 */
    padding: 0 1.625rem; /* 26 */
    border-radius: 3.125rem; /* 50 */
    font-family: var(--font-geom--family);
    font-size: 1rem; /* 16 */
    font-weight: 600;
    letter-spacing: 0.02em;
    --button-color: var(--color-teal-600);
    --button-background-color: var(--color-white, #fff);
    --button-border-width: 0px; /* stylelint-disable-line length-zero-no-unit */
  }

  .newsletter-cta__form .email-signup__button.email-signup__button--integrated:hover {
    --button-color: var(--color-teal-800);
    --button-background-color: var(--color-white, #fff);
  }

  .newsletter-cta__form .email-signup__message {
    color: var(--color-white, #fff);
  }

  @media screen and (max-width: 749px) {
    .section.newsletter-cta {
      --page-margin: 1rem; /* 16 */
    }

    .newsletter-cta__card {
      flex-direction: column;
      align-items: stretch;
      gap: 2rem; /* 32 */
      padding: 3rem 1.5rem; /* 48 / 24 */
    }

    .newsletter-cta__intro {
      gap: 1rem; /* 16 */
    }

    .newsletter-cta__description {
      max-width: none;
    }

    .newsletter-cta__form .email-signup-block {
      width: 100%;
    }
  }
/* END_SECTION:newsletter-cta */

/* START_SECTION:password-footer (INDEX:55) */
.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:56) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:product-faq (INDEX:59) */
/* Figma "Section/FAQs" 2123:696 (desktop) and 2123:2120 (mobile). The 1280px card
     sits inside 80px page gutters with 120px of breathing room above and below. */
  /* The collection page's grid section already ends with 120px of padding
     (80 section + 40 pagination), so its FAQ drops the desktop top margin.
     Mobile keeps the 48px band — the mobile comp (2594:613) draws it.
     Doubled class on purpose: `.section--product-faq { margin-block: 120px }`
     below has the same specificity and later source order, so a single class
     here silently lost to it and the collection page showed 240px of air. */
  @media screen and (min-width: 750px) {
    .section--product-faq.section--product-faq--flush-top {
      margin-block-start: 0;
    }
  }

  .section--product-faq {
    --full-page-grid-central-column-width: min(1280px, calc(100% - 160px));
    margin-block: 120px;
    color: #fff;
  }

  /*
   * The artwork and the content share one grid cell. Without this the background
   * lands in an auto-placed row of its own — and because its only child is an
   * absolutely positioned <img>, that row collapses to zero height and the ocean
   * photo never shows. Pinning both to row 1 / column 2 lets the background stretch
   * to the card's height and stay inside the page-width column.
   */
  .section--product-faq > .custom-section-background,
  .section--product-faq > .custom-section-content {
    grid-area: 1 / 2 / 2 / 3;
    border-radius: 30px;
  }

  .section--product-faq > .custom-section-background {
    position: relative;
    overflow: hidden;
    background: #064c4d;
  }

  /* Figma paints the photo under a -52.53deg wash: solid teal at the bottom-right,
     thinning to 20% by the top-left so the waves read through. */
  .section--product-faq > .custom-section-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(-52.53deg, #064c4d 7%, rgb(6 76 77 / .2) 95%);
  }

  /* base.css darkens every mobile background image with a black scrim; the design
     keeps the card in its own teal, so opt this one out. */
  .section--product-faq .background-image-container::before {
    display: none;
  }

  .section--product-faq > .custom-section-content {
    overflow: hidden;
  }

  .section--product-faq > .custom-section-content > .section-content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 872fr) minmax(0, 408fr);
    align-items: stretch;
    gap: 0;
  }

  .product-faq__main {
    /* "faq" is the stable in-page anchor: the Paperboard accordion on /pages/sustainability links to
       /collections/paperboard-packaging#faq. Keep the card clear of the sticky header on arrival. */
    scroll-margin-block-start: calc(var(--header-height, 0px) + 2.5rem);
    padding: 56px;
    border-radius: 24px;
    background: rgb(6 76 77 / .85);
  }

  .product-faq__header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
  .product-faq__title { margin: 0; color: #fff; font-size: 48px; font-weight: 700; line-height: 1.1; }
  .product-faq__subtitle { margin: 0; color: #b3f7e5; font-size: 16px; font-weight: 500; line-height: 1.5; }
  .product-faq__subtitle a { color: inherit; text-decoration: none; }
  .product-faq__subtitle a span { text-decoration: underline; text-underline-offset: 2px; transition: text-underline-offset .2s ease; }
  /* base.css dims paragraph links to the page foreground at 70% on hover, which is a
     dark teal on this dark panel. That rule is a nested `&:hover` on a selector list whose
     `.rte` member lifts the whole `:is()` to (0,3,2), so the override needs two extra
     ancestors to outrank it; the link then brightens to white and the underline eases down. */
  .product-faq__main .product-faq__header .product-faq__subtitle a:hover,
  .product-faq__main .product-faq__header .product-faq__subtitle a:focus-visible { color: #fff; }
  .product-faq__main .product-faq__header .product-faq__subtitle a:hover span,
  .product-faq__main .product-faq__header .product-faq__subtitle a:focus-visible span { text-underline-offset: 4px; }

  /* A rule above the first row and below every row, with 28px of air on each side
     of the question — the accordion's 28px stack gap in Figma. */
  .product-faq__accordion { border-top: 1px solid #2b8b83; }
  .product-faq__item { padding-block: 28px; border-bottom: 1px solid #2b8b83; }
  .product-faq__item summary { display: flex; align-items: center; gap: 16px; padding-inline-end: 8px; color: #fff; cursor: pointer; list-style: none; font-size: 20px; font-weight: 600; line-height: 1.3; }
  .product-faq__item summary::-webkit-details-marker { display: none; }
  .product-faq__item summary > span:first-child { flex: 1; }
  .product-faq__toggle { position: relative; flex: 0 0 12px; width: 12px; height: 12px; }
  .product-faq__toggle::before,
  .product-faq__toggle::after { content: ''; position: absolute; top: calc(50% - 1px); left: 0; width: 12px; height: 2px; border-radius: 1px; background: #5bc5ad; transition: transform .2s ease; }
  .product-faq__toggle::after { transform: rotate(90deg); }
  /* Open: the upright bar swings flat onto the horizontal one, leaving a minus. */
  .product-faq__item[open] .product-faq__toggle::after { transform: rotate(0); }
  .product-faq__answer { margin-top: 10px; color: #fff; font-size: 16px; font-weight: 400; line-height: 1.5; }
  .product-faq__answer > :first-child { margin-top: 0; }
  .product-faq__answer > :last-child { margin-bottom: 0; }

  /* Inline links in answers stay underlined and keep the answer's own colour —
     base.css strips the underline and fades links to 70% on hover, which reads
     as greyed-out text on the teal card. Doubled class + element chain outruns
     base.css's `.rte :is(p, ul, ol, table) a` rules, hover included. */
  .product-faq__answer.rte :is(p, ul, ol, table) a:where(:not(.button, .button-secondary)) {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentcolor;
    text-underline-offset: 2px;
  }
  .product-faq__answer.rte :is(p, ul, ol, table) a:where(:not(.button, .button-secondary)):hover {
    color: inherit;
    text-decoration-color: currentcolor;
  }

  .product-faq__aside { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 56px; color: #fff; }
  .product-faq__help { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
  .product-faq__help-copy { display: flex; flex-direction: column; gap: 16px; }
  .product-faq__help h3 { margin: 0; color: #fff; font-size: 36px; font-weight: 600; line-height: 1.2; }
  .product-faq__aside .rte { font-size: 16px; line-height: 1.5; }
  .product-faq__aside .rte > :first-child { margin-top: 0; }
  .product-faq__aside .rte > :last-child { margin-bottom: 0; }

  /* Button/Primary/M/outline — 16% white glass with a white ring. `button-fill` opts into the
     theme's hover wipe: the fill is solid white and the glass tint is held beneath it while it
     travels, the label flips to Teal/800 and the arrow swings (faq-cta's recipe). */
  .product-faq__button { --button-fill-color: #fff; --button-fill-under: rgb(255 255 255 / .16); display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border: 1px solid #fff; border-radius: 80px; color: #fff; background: rgb(255 255 255 / .16); text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: .02em; }
  .product-faq__button:hover { color: var(--color-teal-800); }
  .product-faq__button-icon { flex: 0 0 12px; transition: var(--button-arrow-transition); }
  .product-faq__button:hover .product-faq__button-icon { transform: var(--button-arrow-hover-transform); }

  .product-faq__catalog { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .product-faq__catalog-link { display: inline-flex; align-items: center; gap: 10px; padding-block: 6px; color: #b3f7e5; text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
  .product-faq__catalog-link span { text-decoration: underline; text-underline-offset: 3px; }
  .product-faq__catalog-icon { flex: 0 0 16px; transform: rotate(-90deg); }

  /* Between the mobile stack and the full 1280px card the aside still has to hold a
     36px heading, so ease the panel padding in rather than letting the copy pinch. */
  @media screen and (min-width: 750px) and (max-width: 1099px) {
    .section--product-faq { --full-page-grid-central-column-width: calc(100% - 64px); margin-block: 80px; }
    .product-faq__main,
    .product-faq__aside { padding: 40px; }
    .product-faq__title { font-size: 40px; }
    .product-faq__help h3 { font-size: 28px; }
    .product-faq__help { gap: 24px; }
  }

  @media screen and (max-width: 749px) {
    .section--product-faq { --full-page-grid-central-column-width: calc(100% - 32px); margin-block: 48px; }
    .section--product-faq > .custom-section-content > .section-content-wrapper { grid-template-columns: 1fr; }
    .product-faq__main { padding: 32px 24px; }
    .product-faq__aside { padding: 32px 24px; }
    .product-faq__help { gap: 24px; }
    .product-faq__help-copy { gap: 8px; }
    .product-faq__help h3 { font-size: 24px; line-height: 1.1; }
    /* Mobile promotes the catalog line to the small semibold body style. */
    .product-faq__catalog .rte { font-size: 14px; font-weight: 600; }
  }
/* END_SECTION:product-faq */

/* START_SECTION:product-hotspots (INDEX:60) */
/* 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[open] {
    .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 {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--quick-add-foreground, var(--color-foreground));
      background-color: var(--quick-add-background, var(--color-background));
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:61) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    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;
      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;
  }

  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);
  }

  /* Tier-priced products: struck list price beside the tier price, as in the purchase row. */
  .sticky-add-to-cart__tier-price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
  }

  .sticky-add-to-cart__price-was {
    font-weight: var(--font-weight-normal);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  }

  .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:product-list (INDEX:62) */
/* The nav bar is full-bleed on a fixed 80px gutter (Figma Navigation/Desktop 2001:385, via
     --nav-bar-padding-inline), and the footer, the newsletter and the sections either side of
     this one all sit on 80 as well; this one was still on the theme's default --page-margin of
     50px, so its heading and card grid ran 30px past the header's content box on each side.

     --page-width has to move with the margin. base.css derives it once, up at the .page-width-*
     level, as `content-width + margin * 2`, and a section's central column is
     `min(page-width - margin * 2, 100% - margin * 2)` — so overriding the margin alone leaves
     the first term built from 50 and subtracted with 80, capping the content 60px under the
     90rem the design asks for on windows wide enough for that term to win. Restating the same
     formula here rebuilds it against the new gutter, so only the gutter moves and the cap holds.

     Desktop only: below 750px the section runs to the theme's mobile margin, as it already did. */
  @media screen and (min-width: 750px) {
    .section-resource-list {
      --page-margin: 80px;
      --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    }
  }

  /* base.css sets `.section-resource-list { row-gap: var(--gap) }` with equal specificity and
     later source order, so the doubled class is what makes the mobile value win. */
  @media screen and (max-width: 749px) {
    .section-resource-list.section-resource-list {
      row-gap: var(--mobile-gap, var(--gap));
    }
  }
/* END_SECTION:product-list */

/* START_SECTION:product-recommendations (INDEX:63) */
.product-recommendations--sana {
    --recommendations-card: #064c4d;
    --recommendations-accent: #7ce5cc;
    --recommendations-deep: #023031;
    color: #fff;
  }

  .product-recommendations--sana .product-recommendations__background {
    background-color: #064c4d;
    background-image: var(--recommendations-texture), linear-gradient(186deg, #42a899 2%, #146b68 30%, #064c4d 57%, #023031 97%);
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply, normal;
  }

  .product-recommendations--sana .section-resource-list {
    padding-block: clamp(72px, 8.333vw, 120px);
    row-gap: 48px;
  }

  .product-recommendations--sana .section-resource-list__content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .product-recommendations--sana .section-resource-list__content h2 {
    margin: 0;
    color: #fff;
    font-family: var(--font-primary--family);
    font-size: clamp(28px, 2.5vw, 36px);
    font-weight: 600;
    line-height: 1.2;
  }

  .product-recommendations--sana .section-resource-list__content .button {
    min-height: 48px;
    padding: 12px 28px;
    border: 1px solid #fff;
    border-radius: 80px;
    color: #fff;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
  }

  .product-recommendations--sana .resource-list__carousel {
    --slide-width-max: none !important;
  }

  .product-recommendations--sana .resource-list__carousel slideshow-slides {
    gap: 32px;
  }

  .product-recommendations--sana .resource-list__slide {
    --slide-width: calc((100% - 96px) / 4);
  }

  .product-recommendations--sana .product-card {
    overflow: hidden;
    border-radius: 24px;
    color: #fff;
    background: var(--recommendations-card);
  }

  .product-recommendations--sana .product-card__content {
    position: relative;
    gap: 0;
    padding: 0 0 24px;
    background: var(--recommendations-card);
  }

  .product-recommendations--sana .product-card__content > .card-gallery {
    overflow: hidden;
    aspect-ratio: 400 / 500;
    border-radius: 24px 24px 0 0;
  }

  .product-recommendations--sana .card-gallery::after {
    content: '';
    position: absolute;
    inset: 28% 0 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgb(20 107 104 / .9));
  }

  .product-recommendations--sana .card-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The title block is wrapped in <a class="contents">, so it is a GRANDCHILD of
     .product-card__content. The previous direct-child selector never matched, which left
     the title inheriting the section's dark foreground — dark text on the dark scrim. */
  /* The wrapper <a class="contents"> is display:contents and generates no box, so the
     .text-block itself has to carry the positioning. */
  .product-recommendations--sana .product-card__content > a.contents > .text-block {
    position: absolute;
    z-index: 3;
    left: 24px;
    right: 24px;
    bottom: 127px;
    width: auto;
    margin: 0;
    pointer-events: none;
  }

  .product-recommendations--sana .product-card__content > a.contents > .text-block,
  .product-recommendations--sana .product-card__content > a.contents > .text-block :is(h2, h3, h4, p) {
    color: #fff;
    font-family: var(--font-heading--family);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
  }

  /* Figma shows "View Product" permanently beneath the title; the theme default reveals it
     on hover only (opacity: 0). */
  /* Anchored to the gallery box, whose lower edge is where the buy bar begins — so this
     lands directly under the title rather than above it. */
  .product-recommendations--sana .card-media-actions {
    position: absolute;
    z-index: 4;
    inset: auto 24px 12px;
    display: block;
    justify-content: flex-start;
  }

  .product-recommendations--sana .card-media-actions .card-media-actions__view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 1;
    color: #fff;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    transform: none;
  }

  .product-recommendations--sana .product-card__content > .buy-buttons-block {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding-inline: 16px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .product-recommendations--sana .buy-buttons-block product-form-component,
  .product-recommendations--sana .buy-buttons-block .shopify-product-form {
    display: block;
    width: 100%;
  }

  .product-recommendations--sana .buy-buttons-block .product-form-buttons {
    display: grid;
    grid-template-columns: minmax(96px, .8fr) minmax(140px, 1.2fr);
    gap: 16px;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .product-recommendations--sana .buy-buttons-block .quantity-selector {
    min-height: 40px;
    height: 40px;
    border-color: var(--recommendations-accent);
    border-radius: 24px;
    color: #fff;
    background: transparent;
  }

  .product-recommendations--sana .buy-buttons-block add-to-cart-component,
  .product-recommendations--sana .buy-buttons-block .add-to-cart-button {
    display: flex;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .product-recommendations--sana .buy-buttons-block .add-to-cart-button {
    min-height: 40px;
    height: 40px;
    border-color: var(--recommendations-accent);
    border-radius: 80px;
    color: var(--recommendations-deep);
    background: var(--recommendations-accent);
    font-size: 14px;
  }

  .product-recommendations--sana .card-media-actions {
    inset-inline: 24px;
    bottom: 24px;
    z-index: 3;
    justify-content: flex-start;
  }

  .product-recommendations--sana .card-media-actions__view {
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 14px;
  }

  .product-recommendations--sana .resource-list__carousel slideshow-component {
    padding-bottom: 87px;
  }

  .product-recommendations--sana .resource-list__carousel slideshow-container {
    overflow: visible;
  }

  .product-recommendations--sana .resource-list__carousel slideshow-arrows {
    position: absolute;
    inset: calc(100% + 32px) auto auto 0;
    display: flex;
    width: 122px;
    height: 55px;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0;
    z-index: var(--layer-raised);
    pointer-events: none;
    mix-blend-mode: normal;
  }

  .product-recommendations--sana slideshow-arrows .slideshow-control {
    position: static;
    width: 55px;
    height: 55px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgb(43 139 131 / .5);
    opacity: 1;
  }

  .product-recommendations--sana slideshow-arrows .slideshow-control[disabled] {
    display: flex;
    opacity: .45;
  }

  @media screen and (max-width: 989px) {
    .product-recommendations--sana .resource-list__slide { --slide-width: calc((100% - 32px) / 2.25); }
  }

  @media screen and (max-width: 749px) {
    .product-recommendations--sana .section-resource-list { padding-block: 64px; row-gap: 32px; }
    .product-recommendations--sana .section-resource-list__content { align-items: flex-start; flex-direction: column; }
    .product-recommendations--sana .resource-list__carousel slideshow-slides { gap: 16px; }
    .product-recommendations--sana .resource-list__slide { --slide-width: min(82vw, 344px); }
    .product-recommendations--sana .product-card__content > .text-block { bottom: 100px; }
    .product-recommendations--sana .product-card__content > .text-block :is(h2, h3, h4, p, a) { font-size: 20px; }
    .product-recommendations--sana .buy-buttons-block .product-form-buttons { grid-template-columns: minmax(88px, .8fr) minmax(132px, 1.2fr); gap: 12px; }
    .product-recommendations--sana .resource-list__carousel slideshow-component { padding-bottom: 72px; }
    .product-recommendations--sana .resource-list__carousel slideshow-arrows { inset-block-start: calc(100% + 24px); width: 108px; height: 48px; }
    .product-recommendations--sana slideshow-arrows .slideshow-control { width: 48px; height: 48px; }
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:quick-order-list (INDEX:64) */
.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:related-products (INDEX:65) */
/* ------------------------------------------------------------------ *
   * Section shell
   * ------------------------------------------------------------------ */
  .related-products {
    /* Figma: 80px gutter / 48px row gap / 344px card / 32px card gap / 55px arrow */
    --rp-gutter: var(--rp-gutter-desktop, 5rem);
    --rp-gap: var(--rp-gap-desktop, 3rem);
    --rp-card-width: 21.5rem;
    --rp-card-gap: 2rem;
    --rp-card-radius: 1.5rem;
    --rp-arrow-size: 3.4375rem;
    /* Deliberately past --hover-subtle-zoom-amount (1.015): that value is tuned for the
       small cards in a product grid and is invisible on a 344 x 430 image. */
    --rp-image-zoom: 1.06;
    --rp-image-zoom-speed: 0.45s;

    position: relative;
    display: block;
    color: #fff;
  }

  /*
    The gradient is painted on a dedicated layer rather than on .section, because the
    texture has to multiply into it at 80% opacity — `background-blend-mode` alone
    cannot express the opacity, and .section is transparent by theme convention.
    Figma reads the stops left-to-right down the 186.23deg axis.
  */
  .related-products__background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--color-teal-800);
    background-image: linear-gradient(
      186.23deg,
      var(--color-teal-500) 1.59%,
      var(--color-teal-700) 29.74%,
      var(--color-teal-800) 56.45%,
      var(--color-teal-900) 96.97%
    );
  }

  .related-products__texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .related-products .related-products__inner {
    position: relative;
    z-index: 1;
    row-gap: var(--rp-gap);

    /*
      The gutter is the section's own (80px in Figma, wider than the theme's 50px page
      margin), and the carousel has to bleed past it on the right — so horizontal
      padding is applied per row below, not to the grid container.
    */
    padding-inline: 0;
  }

  /* ------------------------------------------------------------------ *
   * Header row — heading + "View All Products" pill
   * ------------------------------------------------------------------ */
  .related-products__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: var(--rp-gutter);
  }

  /* Figma Headling/H3 — 36px/1.2 desktop, 24px/1.1 mobile. Both already live in the
     theme's h3 preset, which is re-valued for mobile in theme-styles-variables. */
  .related-products .related-products__heading {
    margin: 0;
    color: #fff;
    font-family: var(--font-h3--family);
    font-style: var(--font-h3--style);
    font-size: var(--font-h3--size);
    font-weight: var(--font-h3--weight);
    line-height: var(--font-h3--line-height);
    letter-spacing: var(--font-h3--letter-spacing);
    text-transform: var(--font-h3--case);
  }

  /* Figma Button/Secondary/M/outline. .button-fill opts the pill into the theme's
     shared radial hover wipe, which needs both fill variables set explicitly. */
  .related-products .related-products__cta {
    --button-fill-color: #fff;
    --button-fill-under: transparent;

    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.625rem; /* 10px */
    padding: 0.875rem 1.75rem; /* 14px 28px */
    border: 1px solid #fff;
    border-radius: 5rem; /* 80px */
    color: #fff;
    background-color: transparent;
    font-family: var(--font-subheading--family);
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
  }

  .related-products .related-products__cta:is(:hover, :focus-visible) {
    color: var(--color-teal-900);
  }

  .related-products .related-products__cta[aria-disabled='true'] {
    cursor: default;
  }

  /*
    A 15px window over a 24px-wide mask leaves the 10px glyph fully visible with the
    Figma padding around it — the same recipe the hero slide and CTA banner use.
  */
  .related-products .related-products__cta::after {
    content: '';
    flex-shrink: 0;
    width: 0.9375rem; /* 15px */
    height: 0.9375rem;
    background-color: currentcolor;
    mask: var(--rp-arrow-icon) center / 0.78125rem 0.78125rem no-repeat;
    transition: var(--button-arrow-transition);
  }

  .related-products .related-products__cta:is(:hover, :focus-visible)::after {
    transform: var(--button-arrow-hover-transform);
  }

  .related-products__cta-label--mobile {
    display: none;
  }

  /* ------------------------------------------------------------------ *
   * Carousel — track starts at the gutter, runs off the right edge
   * ------------------------------------------------------------------ */
  .related-products__carousel {
    --gutter-slide-width: var(--rp-gutter);
    --slideshow-gap: var(--rp-card-gap);

    row-gap: var(--rp-gap);
  }

  /* slideshow-container paints --color-background by default, which would cover the
     section gradient. */
  .related-products .related-products__carousel slideshow-container {
    background: transparent;
  }

  .related-products .related-products__carousel slideshow-slides {
    align-items: stretch;
  }

  /*
    `flex` has to be restated, not just `--slide-width`: base.css carries a second
    `slideshow-slide` rule (`flex: 0 0 calc(100% / var(--slides-per-view, 1))`) for
    slideshows that divide the viewport into N equal slides. Its flex-basis wins over
    any `width`, so a card-sized slide has to set the basis itself.
  */
  .related-products .related-products__slide {
    --slide-width: var(--rp-card-width);

    display: flex;
    width: var(--rp-card-width);
    flex: 0 0 var(--rp-card-width);
    max-height: none;
    height: auto;
    overflow: visible;
    scroll-snap-align: start;
    /* The track holds at most a handful of cards and each one carries a form, so the
       deferred-rendering default buys nothing and risks zero-height peeking slides. */
    content-visibility: visible;
  }

  /* ------------------------------------------------------------------ *
   * Card
   * ------------------------------------------------------------------ */
  .related-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1.5rem; /* 24px */
    padding-block-end: 1.5rem;
    border-radius: var(--rp-card-radius);
    background: var(--color-teal-800);
    overflow: hidden;
  }

  .related-card__media {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 4 / 5; /* Figma 400 x 500 */
    padding: 2rem; /* 32px */
    border-radius: var(--rp-card-radius) var(--rp-card-radius) 0 0;
    overflow: hidden;
    isolation: isolate;
  }

  /*
    Image and scrim sit at z-index -1 rather than above the flow. .related-card__media
    isolates, so they still paint over the card's own surface — and leaving the meta
    block unpositioned keeps the media as the containing block for the title's stretched
    ::after, which is what makes the whole image clickable.
  */
  .related-card__image {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .related-card__image--placeholder {
    display: block;
    background: var(--color-sand-100);
  }

  .related-card__image--placeholder svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /*
    Hover zoom. Only the photograph moves — the scrim, title and "View Product" stay put,
    so the crop reads as a fixed window onto a moving image. .related-card__media already
    clips, so nothing escapes the rounded top corners.

    Guarded exactly the way base.css guards its own card hover effects: precise pointers
    only, so a tap on touch does not leave a stuck zoom, and never against a reduced-motion
    preference.
  */
  @media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
    .related-card__image {
      transition: transform var(--rp-image-zoom-speed) var(--hover-transition-timing);
    }

    /*
      Hover is card-wide, matching the theme's own `.product-card:hover .product-card__image`.
      The keyboard equivalent is scoped to the media instead — the product link is the only
      focusable thing in there, so tabbing onto the quantity stepper or Add to Cart does not
      set the photo moving.
    */
    .related-card:hover .related-card__image,
    .related-card__media:focus-within .related-card__image {
      transform: scale(var(--rp-image-zoom));
    }
  }

  /* Same layer as the image and later in source order, so it multiplies over it. */
  .related-card__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    mix-blend-mode: multiply;
    background: linear-gradient(192.29deg, rgb(20 107 104 / 0) 29.08%, rgb(20 107 104 / 0.9) 89.43%);
    pointer-events: none;
  }

  .related-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem; /* 14px */
  }

  /* Figma Headling/H4 — 24px/1.25. Unlike the section heading this does NOT drop to
     20px on mobile: the mobile card keeps the 24px size (Figma 2123:1899). */
  .related-products .related-card__title {
    margin: 0;
    color: #fff;
    font-family: var(--font-h4--family);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
  }

  .related-card__link {
    color: inherit;
    text-decoration: none;
  }

  /* Stretch the title link over the whole media so the image is clickable without a
     second, duplicate link in the accessibility tree. */
  .related-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
  }

  .related-card__view {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem; /* 10px */
    color: #fff;
    font-family: var(--font-subheading--family);
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
  }

  /* 10px box over a 10px mask: the glyph occupies 8 of the icon's 10 viewBox units,
     so it lands at the Figma 8px. */
  .related-card__view::after {
    content: '';
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    background-color: currentcolor;
    mask: var(--rp-arrow-icon) center / 0.625rem 0.625rem no-repeat;
    transition: var(--button-arrow-transition);
  }

  .related-card:hover .related-card__view::after {
    transform: var(--button-arrow-hover-transform);
  }

  /* ------------------------------------------------------------------ *
   * Card buy row — quantity stepper + Add to Cart
   * ------------------------------------------------------------------ */
  /*
    slideshow-slides sets `cursor: var(--cursor)` (grab) on the track and it inherits all
    the way down into the card, so the buy row would advertise a drag handle over controls
    that are deliberately excluded from the drag gesture (data-slideshow-no-drag on the
    element below). Reset it here and let the buttons' own `cursor: pointer` come through.
  */
  .related-products .related-card__actions {
    display: block;
    width: 100%;
    cursor: auto;
  }

  .related-products .related-card__quantity :is(.quantity-minus, .quantity-plus),
  .related-products .related-card__atc {
    cursor: pointer;
  }

  .related-products .related-card__actions form {
    display: block;
    width: 100%;
  }

  .related-card__buy {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* 16px */
  }

  .related-products .related-card__error {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    padding-inline: 1rem;
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
  }

  .related-products .related-card__error.hidden {
    display: none;
  }

  .related-products .related-card__quantity-wrapper {
    display: block;
    width: auto;
    gap: 0;
  }

  /* Volume pricing would otherwise inject a "at $x / ea" line into the buy row. */
  .related-products .related-card__quantity-wrapper .price-per-item {
    display: none;
  }

  /*
    Figma 2123:482 — 1px Teal/300 pill, 24px gap between the chevrons and the value.
    Selectors are scoped under .related-products so they outrank the .quantity-selector
    rules in base.css, which is emitted after this stylesheet.
  */
  .related-products .related-card__quantity {
    --quantity-selector-width: auto;

    display: flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: auto;
    /*
      Figma is 24px from each chevron to a value box hugged to the 7px width of "1".
      A real input has to stay legible at two digits, so the box is widened to 24px and
      the gap pulled back by the 7px of slack that adds — the chevron-to-digit distance
      still reads as the designed 24px.
    */
    gap: 1.0625rem; /* 17px */
    height: auto;
    min-height: 0;
    padding: 0.5rem 1.25rem; /* 8px 20px */
    border: 1px solid var(--color-teal-300);
    border-radius: 1.5rem;
    color: #fff;
    background: transparent;
  }

  .related-products .related-card__quantity input[type='number'] {
    width: 1.5rem; /* fits two digits — see the gap note above */
    min-width: 0;
    max-width: none;
    height: 1.4375rem; /* 23px */
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: transparent;
    font-family: var(--font-subheading--family);
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    line-height: 1.4375rem;
    text-align: center;
  }

  .related-products .related-card__quantity :is(.quantity-minus, .quantity-plus) {
    position: relative;
    width: 0.4375rem; /* 7px */
    height: 0.8rem; /* 12.83px */
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    color: inherit;
  }

  /* Restore a usable tap target without disturbing the 7 x 12.8 Figma box. */
  .related-products .related-card__quantity :is(.quantity-minus, .quantity-plus)::after {
    content: '';
    position: absolute;
    inset: -0.75rem -0.625rem;
  }

  .related-products .related-card__quantity :is(.quantity-minus, .quantity-plus):disabled {
    opacity: 0.4;
    cursor: default;
  }

  .related-products .related-card__quantity .svg-wrapper,
  .related-products .related-card__quantity svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .related-products .related-card__quantity .quantity-minus .svg-wrapper {
    transform: rotate(180deg);
  }

  .related-products add-to-cart-component {
    display: flex;
    flex: 0 0 auto;
  }

  /* Figma 2123:488 — Teal/300 pill, Teal/900 label, trailing 14px plus. */
  .related-products .related-card__atc {
    --button-fill-color: #fff;
    --button-fill-under: var(--color-teal-300);

    display: inline-flex;
    width: 10.5rem; /* 168px */
    /* buy-buttons-styles gives every .add-to-cart-button the tall PDP buy-button height;
       this pill is sized by its padding instead. */
    height: auto;
    min-height: 0;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 0.625rem 1.25rem; /* 10px 20px */
    border: 0;
    border-radius: 5rem;
    outline: none;
    box-shadow: none;
    color: var(--color-teal-900);
    background-color: var(--color-teal-300);
    font-family: var(--font-subheading--family);
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .related-products .related-card__atc:is(:hover, :focus-visible) {
    color: var(--color-teal-900);
  }

  /*
    The plus hangs off .add-to-cart-text rather than off the button, so it travels with
    the label: adding to cart slides and fades .add-to-cart-text out to clear the pill for
    the checkmark burst, and a plus pinned to the button itself would be stranded on an
    otherwise empty button. Same arrangement as the PDP's own Add to cart (_product-details).
  */
  .related-products .related-card__atc .add-to-cart-text {
    gap: 0;
  }

  .related-products .related-card__atc .add-to-cart-text::after {
    content: '';
    flex-shrink: 0;
    width: 0.875rem; /* 14px */
    height: 0.875rem;
    margin-inline-start: 0.625rem; /* 10px */
    background-color: currentcolor;
    mask: var(--rp-plus-icon) center / 0.875rem 0.875rem no-repeat;
  }

  /* The burst is authored for the 48px PDP button; this pill is ~37px, so it needs to
     come down a size to keep clear of the rounded ends. */
  .related-products .related-card__atc .add-to-cart__added-icon {
    width: 1.5rem; /* 24px */
    height: 1.5rem;
  }

  /* The placeholder card has no form, so its controls are inert spans. */
  .related-products .related-card__quantity--static {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-teal-300);
    border-radius: 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4375rem;
  }

  .related-card--placeholder .related-card__atc {
    pointer-events: none;
  }

  /* ------------------------------------------------------------------ *
   * Slider navigation
   * ------------------------------------------------------------------ */
  .related-products__nav {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem; /* 12px */
    padding-inline: var(--rp-gutter);
  }

  .related-products .related-products__arrow {
    display: flex;
    width: var(--rp-arrow-size);
    height: var(--rp-arrow-size);
    min-width: 0;
    min-height: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    appearance: none;
    color: #fff;
    /* Figma: Teal/600 at 50% */
    background-color: rgb(43 139 131 / 0.5);
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .related-products .related-products__arrow:is(:hover, :focus-visible) {
    background-color: rgb(43 139 131 / 0.85);
  }

  .related-products .related-products__arrow[disabled] {
    opacity: 0.4;
    cursor: default;
  }

  .related-products .related-products__arrow .svg-wrapper {
    display: block;
    width: 0.8125rem; /* 13px */
    height: 1.5rem; /* 24px */
  }

  .related-products .related-products__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .related-products .related-products__arrow--previous .svg-wrapper {
    transform: rotate(180deg);
  }

  /* ------------------------------------------------------------------ *
   * Pre-hydration skeleton
   * ------------------------------------------------------------------ */
  .related-products__skeleton {
    display: flex;
    gap: var(--rp-card-gap);
    padding-inline-start: var(--rp-gutter);
    overflow: hidden;
  }

  .related-products__skeleton-card {
    width: var(--rp-card-width);
    flex-shrink: 0;
    /* Media (4:5) + 24px gap + 41px buy row + 24px bottom padding at a 344px card. */
    aspect-ratio: 344 / 519;
    border-radius: var(--rp-card-radius);
    background: rgb(255 255 255 / 0.06);
  }

  /* ------------------------------------------------------------------ *
   * Mobile — Figma 2123:1892 (390px frame, 393px rem anchor)
   * ------------------------------------------------------------------ */
  @media screen and (max-width: 749px) {
    .related-products {
      --rp-gutter: var(--rp-gutter-mobile, 1rem);
      --rp-gap: var(--rp-gap-mobile, 2rem);
      --rp-card-width: 20.1875rem; /* 323px */
      --rp-card-gap: 1rem;
      --rp-arrow-size: 2.5rem; /* 40px */
    }

    .related-products__background {
      background-image: linear-gradient(
        196.96deg,
        var(--color-teal-500) 1.59%,
        var(--color-teal-700) 29.74%,
        var(--color-teal-800) 56.45%,
        var(--color-teal-900) 96.97%
      );
    }

    /* Figma Button/Primary SM */
    .related-products .related-products__cta {
      gap: 0.5rem; /* 8px */
      padding: 0.625rem 1rem; /* 10px 16px */
      font-size: 0.875rem;
    }

    .related-products .related-products__cta::after {
      width: 0.625rem; /* 10px */
      height: 0.625rem;
      mask-size: 0.625rem 0.625rem;
    }

    .related-products__cta-label--desktop {
      display: none;
    }

    .related-products__cta-label--mobile {
      display: inline;
    }

    .related-card__media {
      padding: 2rem 1.5rem; /* 32px 24px */
    }

    .related-products .related-card__atc {
      width: 9.25rem; /* 148px */
    }

    .related-products__nav {
      justify-content: center;
    }
  }
/* END_SECTION:related-products */

/* START_SECTION:section (INDEX:71) */
/* Opt-in, via the section's "Align to navigation gutter" setting: sit the content on the nav
     bar's gutter rather than the theme's page margin. The bar is full-bleed on a fixed 80px
     (Figma Navigation/Desktop 2001:385, via --nav-bar-padding-inline) and the footer, the
     newsletter and the product list all sit on 80 too, so a section left on the theme's default
     50px runs 30px past the header's content box on each side. A setting rather than a blanket
     rule on the section type, because the generic section is used for layouts that are not part
     of that grid. See the note below for why --page-width moves with the margin. */
  @media screen and (min-width: 750px) {
    .section--nav-gutter {
      --page-margin: 80px;
      --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    }
  }
/* END_SECTION:section */

/* START_SECTION:simple-cta (INDEX:72) */
.simple-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--gap-md, 16px);
  }

  .simple-cta__heading {
    margin: 0;
    text-transform: uppercase;
  }

  .simple-cta__tagline {
    margin: 0;
    max-width: 36rem;
  }

  .simple-cta__button {
    margin-block-start: var(--gap-sm, 12px);
  }
/* END_SECTION:simple-cta */

/* START_SECTION:slideshow (INDEX:73) */
.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);
      }
    }

    /*
     * Hero style — Figma "Section/Hero" (169:314 desktop / 191:305 mobile).
     * Centered slide with neighbors peeking, teal pagination dots below.
     */
    &.slideshow-section--hero {
      background-color: var(--color-background);

      .slideshow--hero {
        grid-column: 1 / -1;
        gap: 24px;

        @media screen and (min-width: 750px) {
          gap: 32px;
        }
      }

      .slideshow--hero slideshow-slides {
        padding-inline: calc(var(--hero-slide-margin-mobile) + var(--hero-slide-gap-mobile));
        scroll-padding-inline: calc(var(--hero-slide-margin-mobile) + var(--hero-slide-gap-mobile));
        gap: var(--hero-slide-gap-mobile);

        @media screen and (min-width: 750px) {
          padding-inline: calc(var(--hero-slide-margin) + var(--hero-slide-gap));
          scroll-padding-inline: calc(var(--hero-slide-margin) + var(--hero-slide-gap));
          gap: var(--hero-slide-gap);
        }
      }

      .slideshow--hero slideshow-slide {
        width: calc(100vw - (var(--hero-slide-margin-mobile) + var(--hero-slide-gap-mobile)) * 2);
        border-radius: var(--hero-slide-radius-mobile);

        @media screen and (min-width: 750px) {
          width: calc(100vw - (var(--hero-slide-margin) + var(--hero-slide-gap)) * 2);
          border-radius: var(--hero-slide-radius);
        }
      }

      .slideshow--hero.slideshow--single-media slideshow-slides {
        justify-content: center;
        overflow: hidden;
      }

      .slideshow--hero slideshow-controls {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* Pagination dots — solid teal-800 active, teal-400 outline otherwise (Figma Scrolls/button) */
      .slideshow--hero .slideshow-controls__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .slideshow--hero .slideshow-controls__dots > li {
        display: block;
        list-style: none;
      }

      .slideshow--hero .slideshow-controls__dots .slideshow-control {
        width: 12px;
        height: 12px;
        padding: 0;
        border: 1px solid var(--color-teal-400, #5bc5ad);
        border-radius: 50%;
        background-color: transparent;
        font-size: 0;
        line-height: 0;
        color: transparent;
        cursor: pointer;
        transition:
          background-color var(--animation-speed, 0.2s) ease,
          border-color var(--animation-speed, 0.2s) ease;
      }

      .slideshow--hero .slideshow-controls__dots .slideshow-control[aria-selected='true'] {
        background-color: var(--color-teal-800, #064c4d);
        border-color: var(--color-teal-800, #064c4d);
      }
    }

    @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:subfooter-icons (INDEX:74) */
.section--subfooter-icons {
    background: linear-gradient(123deg, #f7f1eb 24%, #e6d7c3 91%);
  }

  /* Same gutter as the nav bar, the footer and the sections above it — see the note on
     .section--customization-panels, including why --page-width moves with it. The four chips are
     laid out with `space-between`, so the row only reads as aligned if the track itself starts
     and ends on the header's content box. */
  @media screen and (min-width: 750px) {
    .section--subfooter-icons {
      --page-margin: 80px;
      --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    }
  }

  .section--subfooter-icons .custom-section-background {
    opacity: .3;
    mix-blend-mode: multiply;
  }

  .section--subfooter-icons > .custom-section-content > .section-content-wrapper {
    justify-content: space-between;
  }

  .section--subfooter-icons > .custom-section-content > .section-content-wrapper > .group-block {
    width: min(23.4%, 307px);
    min-height: 80px;
    padding: 16px;
    border-radius: 20px;
    background: rgb(247 241 235 / .83);
  }

  .section--subfooter-icons > .custom-section-content > .section-content-wrapper > .group-block > .group-block-content {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .section--subfooter-icons .icon-block {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid #e6d7c3;
    border-radius: 10px;
    color: #9e8568;
    background: linear-gradient(153deg, #e6d7c3 6%, #f7f1eb 75%);
  }

  .section--subfooter-icons .icon-block__media {
    width: 30px;
    height: 30px;
  }

  .section--subfooter-icons .text-block,
  .section--subfooter-icons .text-block :is(p, h2, h3) {
    margin: 0;
    color: #064c4d;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
  }

  @media screen and (max-width: 749px) {
    .section--subfooter-icons > .custom-section-content > .section-content-wrapper {
      gap: 12px;
    }

    .section--subfooter-icons > .custom-section-content > .section-content-wrapper > .group-block {
      width: 100%;
      min-height: 80px;
    }

    .section--subfooter-icons > .custom-section-content > .section-content-wrapper > .group-block > .group-block-content {
      flex-direction: row;
    }

    .section--subfooter-icons .text-block,
    .section--subfooter-icons .text-block :is(p, h2, h3) {
      font-size: 18px;
    }
  }
/* END_SECTION:subfooter-icons */

/* START_SECTION:sustainability-cta (INDEX:75) */
/* Sand/400 → Sand/200 at 50% over the (white) background colour. */
  .sus-cta__bg--gradient {
    background-image: linear-gradient(-80deg, rgb(191 172 148 / 0.5) 7%, rgb(230 215 195 / 0.5) 84%);
  }

  @media screen and (min-width: 750px) {
    .sus-cta__bg--gradient {
      background-image: linear-gradient(-65deg, rgb(191 172 148 / 0.5) 16%, rgb(230 215 195 / 0.5) 84%);
    }
  }

  .sus-cta.sus-cta {
    overflow: clip;
  }

  /* Texture photo, multiplied into the wash. No isolation on the section, so the blend
     sees the background sibling underneath. */
  .sus-cta__media {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .sus-cta__texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--sus-cta-texture-opacity, 0.4);
    mix-blend-mode: multiply;
  }

  .sus-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
  }

  .sus-cta__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: 56.25rem;
    text-align: center;
    color: var(--color-teal-800);
  }

  /* Headling/H2 40/700/1.15 → Mobile/Heading/H2 32. */
  .sus-cta__heading {
    margin: 0;
    font-size: var(--font-size--h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    color: inherit;
    text-wrap: balance;
  }

  @media screen and (min-width: 750px) {
    .sus-cta__heading {
      max-width: 29.75rem;
    }
  }

  /* Headling/H5 20/600/1.3 → Mobile 18. */
  .sus-cta__text {
    margin: -1rem 0 0;
    font-size: var(--font-size--h5);
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    text-wrap: pretty;
  }

  @media screen and (min-width: 750px) {
    .sus-cta__text {
      max-width: 24rem;
    }
  }

  /* Button/Primary/LG: 20/600 with 2% tracking, 14 × 28 padding, pill. The theme's
     primary button supplies the colours and the fill hover. */
  .sus-cta__button.sus-cta__button {
    --button-padding-inline: 1.75rem 1.75rem;
    --button-padding-block: 0.875rem 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  /* Trailing arrow, exactly as the button block draws it: the 12px glyph lives in a
     padded 24px viewBox, so the mask is pinned to 24px and the 15px box crops the padding. */
  .sus-cta__button.sus-cta__button::after {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background-color: currentcolor;
    mask: var(--sus-cta-arrow-icon) center / 24px 24px no-repeat;
    transition: var(--button-arrow-transition);
  }

  .sus-cta__button.sus-cta__button:is(:hover, :focus-visible)::after {
    transform: var(--button-arrow-hover-transform);
  }
/* END_SECTION:sustainability-cta */

/* START_SECTION:sustainability-hero (INDEX:76) */
.sus-hero.sus-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    min-height: var(--sus-hero-min-height-mobile, auto);
    overflow: clip;
    isolation: isolate;
  }

  @media screen and (min-width: 750px) {
    .sus-hero.sus-hero {
      min-height: var(--sus-hero-min-height, auto);
    }
  }

  /* Full-bleed media. `overflow: clip` rather than hidden: a hidden box is a scroll
     container and would capture the parallax `view()` timeline. */
  .sus-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    background: linear-gradient(135deg, var(--color-teal-500) 0%, var(--color-teal-800) 100%);
  }

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

  /* With a mobile crop uploaded, each image serves one band. */
  .sus-hero__image--mobile {
    display: block;
  }

  .sus-hero__media:has(.sus-hero__image--mobile) .sus-hero__image--desktop {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .sus-hero__image--mobile {
      display: none;
    }

    .sus-hero__media:has(.sus-hero__image--mobile) .sus-hero__image--desktop {
      display: block;
    }
  }

  /* Figma's soft-light wash: Teal/800 72% → Teal/300 65% → Teal/200 25%. */
  .sus-hero__wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(-16deg, rgb(6 76 77 / 0.72) 11%, rgb(124 229 204 / 0.65) 62%, rgb(179 247 229 / 0.25) 86%);
    mix-blend-mode: soft-light;
    opacity: var(--sus-hero-wash-opacity, 1);
    pointer-events: none;
  }

  @media screen and (min-width: 750px) {
    .sus-hero__wash {
      background: linear-gradient(-6deg, rgb(6 76 77 / 0.72) 11%, rgb(124 229 204 / 0.65) 62%, rgb(179 247 229 / 0.25) 86%);
    }
  }

  /* Parallax: the photo is 20% taller than the band and drifts as the band crosses the
     viewport. Runs on the compositor via the view() timeline; static elsewhere. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .sus-hero--parallax .sus-hero__image {
        height: 120%;
        top: -10%;
        animation: sus-hero-parallax linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
      }
    }
  }

  @keyframes sus-hero-parallax {
    from {
      transform: translate3d(0, -6%, 0);
    }

    to {
      transform: translate3d(0, 6%, 0);
    }
  }

  .sus-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
  }

  /* Glass panel: Teal/500 → Teal/800 at 55% over a backdrop blur, 30px radius. */
  .sus-hero__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 2.5rem 1.5rem;
    border-radius: 1.875rem;
    background: linear-gradient(
      104deg,
      rgb(66 168 153 / calc(0.55 * var(--sus-hero-panel-opacity, 1))) 20%,
      rgb(6 76 77 / calc(0.55 * var(--sus-hero-panel-opacity, 1))) 80%
    );
    color: var(--sus-hero-text-color, #fff);
    text-align: center;
    box-sizing: border-box;
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sus-hero__panel {
      -webkit-backdrop-filter: blur(var(--sus-hero-panel-blur, 16px));
      backdrop-filter: blur(var(--sus-hero-panel-blur, 16px));
    }
  }

  @media screen and (min-width: 750px) {
    .sus-hero__panel {
      gap: 1.5rem;
      width: min(100%, 56.75rem);
      padding: 3.5rem 3rem;
      background: linear-gradient(
        125deg,
        rgb(66 168 153 / calc(0.55 * var(--sus-hero-panel-opacity, 1))) 20%,
        rgb(6 76 77 / calc(0.55 * var(--sus-hero-panel-opacity, 1))) 80%
      );
    }
  }

  .sus-hero__lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
  }

  .sus-hero__eyebrow,
  .sus-hero__heading,
  .sus-hero__subheading {
    margin: 0;
    color: inherit;
  }

  .sus-hero__heading {
    text-wrap: balance;
  }

  .sus-hero__subheading {
    max-width: 30.75rem;
  }
/* END_SECTION:sustainability-hero */

/* START_SECTION:sustainability-impact (INDEX:77) */
/* ─────────────────────────────────────────────────
     Background — the section's own background is not
     paintable: base.css forces
     `.shopify-section:not(.header-section) :is(.section, .cart-summary)`
     to `background: transparent` at (0,3,0). Everything
     visible comes from the .section-background sibling,
     which base.css paints with `background-color:
     var(--color-background)` at the same specificity.
     So the gradient rides on background-image, the one
     background property nothing else declares here, and
     the flat `background_color` setting keeps working
     underneath it via contrast-override.
     ───────────────────────────────────────────────── */
  .sustainability-impact-bg {
    background-image: var(--sustainability-background-image, none);
  }

  .sustainability-impact {
    /* Figma keeps the heading and body on Teal/800 across every background variant, so these
       deliberately do not track contrast-override's --color. */
    --sustainability-heading-color: var(--color-teal-800, #064c4d);
    --sustainability-body-color: var(--color-teal-800, #064c4d);
    --sustainability-card-radius: 16px;

    /* Override the default section grid so we can use our own inner layout */
    display: block;
    padding-block: max(64px, calc(var(--spacing-scale, 1) * 5rem));
  }

  /* The nav bar is full-bleed on a fixed 80px gutter (Figma Navigation/Desktop 2001:385, via
     --nav-bar-padding-inline), and the footer, the product section and the customization panels
     all sit on 80 as well; this section was still on the theme's default --page-margin of 50px,
     so the heading and the card grid overhung the header's content box by 30px each side.
     __inner already reads the gutter for its own padding-inline and max-width, so moving the
     variable is enough — no rule here needs to know the number. Desktop only: below 750px the
     columns stack and run to the theme's mobile margin.

     --page-width is restated because base.css derives it once, up at the .page-width-* level, as
     `content-width + margin * 2`. The central column is `min(page-width - margin * 2, 100% -
     margin * 2)`, so moving the margin alone leaves the first term built from 50 and subtracted
     with 80 — which caps the content 60px under the 90rem the design asks for once the window is
     wide enough for that term to win. */
  @media screen and (min-width: 750px) {
    .sustainability-impact {
      --page-margin: 80px;
      --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    }
  }

  /* ─────────────────────────────────────────────────
     Inner wrapper — two-column grid on desktop
     ───────────────────────────────────────────────── */
  .sustainability-impact__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
    max-width: var(--page-width, 1200px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 1.5rem);
    box-sizing: border-box;
  }

  /* Figma splits the 1280px content column as 423 / 48 gap / 809. */
  @media screen and (min-width: 750px) {
    .sustainability-impact__inner {
      grid-template-columns: minmax(0, 423fr) minmax(0, 809fr);
      gap: 48px;
      align-items: center;
    }
  }

  /* ─────────────────────────────────────────────────
     Left column
     ───────────────────────────────────────────────── */
  .sustainability-impact__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  /* Figma sizes this as Headling/H1 (48px), even though it stays an <h2> in the outline. */
  .sustainability-impact__heading {
    font-family: var(--font-heading--family);
    font-size: var(--font-h1--size, 3rem);
    font-weight: var(--font-h1--weight, 700);
    line-height: var(--font-h1--line-height, 1.1);
    letter-spacing: var(--font-h1--letter-spacing, 0);
    text-transform: var(--font-h1--case, none);
    color: var(--sustainability-heading-color);
    margin: 0;
  }

  .sustainability-impact__body {
    color: var(--sustainability-body-color);
    font-size: var(--font-paragraph--size, 1rem);
    line-height: var(--font-paragraph--line-height, 1.6);
    margin: 0;
    max-width: 31rem;
  }

  .sustainability-impact__body p {
    margin: 0;
  }

  /* Figma 2123:583 "Learn More" — solid Teal/800 pill, white label, UI/Button/Large.
     Measured 191x53: 28px side padding, 110px label, 10px gap, 15px icon slot. */
  .sustainability-impact__cta.sustainability-impact__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 0.5rem;
    padding: 14px 28px;
    border: 0;
    border-radius: 80px;
    color: #ffffff;
    background: var(--color-teal-800, #064c4d);
    font-size: var(--font-button-lg--size, 1.25rem);
    font-weight: var(--font-button--weight, 600);
    line-height: var(--font-button--line-height, normal);
    letter-spacing: var(--font-button--letter-spacing, 0.02em);
  }

  /* Figma centres a 24px icon frame on a 15px slot, so the glyph overflows by 4.5px a side.
     Reproducing the slot width rather than the frame width is what keeps the 10px gap honest. */
  .sustainability-impact__cta-arrow {
    position: relative;
    display: block;
    flex: none;
    width: 15px;
    height: 15px;
  }

  /* Shared arrow motion: --button-arrow-hover-transform levels the ↗ glyph out to → and nudges
     it 2px right. Referencing the theme vars rather than re-deriving the motion also means
     prefers-reduced-motion is already handled — theme-styles-variables drops the speed to 0s. */
  /* Centred with negative margins rather than grid alignment or translate(-50%, -50%): grid
     start-aligns a subject that overflows its area, and a centring transform would be wiped
     out by the hover transform below. */
  .sustainability-impact__cta-arrow svg {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    /* base.css caps every svg at max-width: 100%, which clamped this to the 15px slot and let
       preserveAspectRatio shrink the glyph to ~6px. The overflow is deliberate — release it. */
    max-width: none;
    transition: var(--button-arrow-transition, transform 0.25s ease);
  }

  .sustainability-impact__cta:is(:hover, :focus-visible) .sustainability-impact__cta-arrow svg {
    transform: var(--button-arrow-hover-transform, translate(2px, 0) rotate(45deg));
  }

  /* ─────────────────────────────────────────────────
     Right column — mosaic grid
     ───────────────────────────────────────────────── */
  /* Mosaic proportions come straight from Figma: 267 / 196 / 300 columns, two equal
     rows, 24px gutters, and an 809x414 outer box. aspect-ratio keeps the rows from
     being pushed taller by the images' intrinsic height, which minmax(0, 1fr) alone
     cannot prevent once a card spans both rows. */
  .sustainability-impact__right {
    display: grid;
    grid-template-columns: minmax(0, 267fr) minmax(0, 196fr) minmax(0, 300fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    aspect-ratio: 809 / 414;
  }

  /* Stat card occupies top-left cell */
  .sustainability-impact__card--stat {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  /* Small image occupies bottom-left cell */
  .sustainability-impact__card--small {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  /* Large image spans the full right column (both rows) */
  .sustainability-impact__card--tall {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

  .sustainability-impact__card--feature {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
  }

  /* ─────────────────────────────────────────────────
     Card base
     ───────────────────────────────────────────────── */
  .sustainability-impact__card {
    border-radius: var(--sustainability-card-radius);
    overflow: hidden;
    position: relative;
    background-color: var(--color-sea-grey-100, #e1f4f3);
  }

  .sustainability-impact__card-media {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  /* Doubled class — base.css sets object-fit/height on section images and wins on a
     tie, which left these letterboxed inside their cards. */
  .sustainability-impact__card .sustainability-impact__card-img.sustainability-impact__card-img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  /* ─────────────────────────────────────────────────
     Stat card overlay
     ───────────────────────────────────────────────── */
  .sustainability-impact__stat-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(1.25rem, 2vw, 2rem);
    background: linear-gradient(
      to top,
      hsl(171deg 97% 16% / 0.72) 0%,
      hsl(171deg 97% 16% / 0.45) 100%
    );
    color: #ffffff;
    border-radius: inherit;
  }

  /* When there's no image, give the overlay the Figma Teal/700 -> Teal/500 fill */
  .sustainability-impact__card--without-media .sustainability-impact__stat-overlay {
    background: linear-gradient(150deg, var(--color-teal-700, #146b68), var(--color-teal-500, #42a899));
    position: static;
    height: 100%;
    min-height: 0;
  }

  /* Figma insets the lower-left photo by 12px inside a cream frame (267x196 -> 243x172). */
  .sustainability-impact__card--small {
    padding: 12px;
    background-color: var(--color-sand-100, #f3ebe1);
  }

  .sustainability-impact__card--small .sustainability-impact__card-media {
    overflow: hidden;
    border-radius: calc(var(--sustainability-card-radius) - 6px);
  }

  /* Figma "EVERY CASE DIVERTS" — UI/Eyebrow (14px / 500 / 1.3 / 30% tracking). */
  .sustainability-impact__stat-eyebrow {
    margin: 0;
    color: #ffffff;
    font-size: var(--font-eyebrow--size, 0.875rem);
    font-weight: var(--font-eyebrow--weight, 500);
    line-height: var(--font-eyebrow--line-height, 1.3);
    letter-spacing: var(--font-eyebrow--letter-spacing, 0.3em);
    text-transform: uppercase;
  }

  /* Figma "18lbs" — Display/Hero (64px / 700 / lh 1 / 1% tracking). */
  .sustainability-impact__stat-value {
    font-family: var(--font-heading--family);
    font-size: var(--font-display-hero--size, 4rem);
    font-weight: var(--font-display-hero--weight, 700);
    line-height: var(--font-display-hero--line-height, 1);
    letter-spacing: var(--font-display-hero--letter-spacing, 0.01em);
    margin: 0.25rem 0 0.5rem;
    color: #ffffff;
  }

  /* Figma "of plastic from our..." — UI/Label (18px / 600 / 1.25). */
  .sustainability-impact__stat-label {
    font-size: var(--font-label--size, 1.125rem);
    font-weight: var(--font-label--weight, 600);
    line-height: var(--font-label--line-height, 1.25);
    color: #ffffff;
  }

  .sustainability-impact__stat-label p {
    margin: 0;
  }

  /* ─────────────────────────────────────────────────
     Badge overlay on large image
     ───────────────────────────────────────────────── */
  /* Was scoped to .sustainability-impact__feature, a class that is never rendered, so the
     scrim never appeared and the badge text sat unreadably on the photo. */
  .sustainability-impact__card--feature-badge::after {
    position: absolute;
    content: '';
    inset: 35% 0 0;
    background: linear-gradient(to bottom, transparent, rgb(0 78 77 / 0.86));
    pointer-events: none;
  }

  /* Figma 2123:612 bottom-anchors the content box: 24px side padding, 32px from the base,
     24px between the mark and the label. */
  .sustainability-impact__feature-content {
    position: absolute;
    z-index: 1;
    inset: auto 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* The mark is inlined in the markup — a mask: url() here cannot work, because this
     stylesheet block is served as static CSS and never has its Liquid rendered.
     The ocean mark draws its own ring, so there is no CSS border circle around it. */
  .sustainability-impact__impact-icon {
    display: block;
    width: 68px;
    height: 68px;
    color: #fff;
  }

  .sustainability-impact__impact-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentcolor;
  }

  /* Figma Body/XL/SemiBold — 24px / 600 / 1.3. */
  .sustainability-impact__feature-text {
    font-family: var(--font-heading--family);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
  }

  /* ─────────────────────────────────────────────────
     Mobile overrides — single column stack
     ───────────────────────────────────────────────── */
  @media screen and (max-width: 749px) {
    .sustainability-impact {
      padding-block: 2.5rem;
    }

    /* aspect-ratio has to be released here, otherwise the desktop 809:414 box squashes
       the stacked mobile grid. */
    /* Explicit row heights: left to auto, the portrait tall image drives row 2 to well
       over twice row 1. */
    .sustainability-impact__right {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: minmax(220px, auto) 300px;
      gap: 0.75rem;
      aspect-ratio: auto;
    }

    /* Every card needs an explicit mobile placement. The previous block only reassigned
       .--large, which is not a class this section renders (it is .--feature), so the
       feature card kept its desktop column-3 placement and forced an implicit third
       column into what should be a two-column grid. */
    .sustainability-impact__card--stat {
      grid-area: 1 / 1 / 2 / 2;
    }

    .sustainability-impact__card--small {
      grid-area: 1 / 2 / 2 / 3;
    }

    .sustainability-impact__card--tall {
      grid-area: 2 / 1 / 3 / 2;
    }

    .sustainability-impact__card--feature {
      grid-area: 2 / 2 / 3 / 3;
    }

    .sustainability-impact__card {
      min-height: 220px;
    }

    .sustainability-impact__stat-eyebrow {
      letter-spacing: 0.18em;
    }

    .sustainability-impact__body {
      max-width: none;
    }
  }
/* END_SECTION:sustainability-impact */

/* START_SECTION:sustainability-materials (INDEX:78) */
.sus-materials.sus-materials {
    color: var(--color-teal-800);
  }

  .sus-materials__inner {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  @media screen and (min-width: 990px) {
    .sus-materials__inner {
      gap: 3rem;
    }
  }

  .sus-materials__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 61.5rem;
    margin-inline: auto;
    padding-block-end: 2.5rem;
    border-block-end: 1px solid var(--color-sand-300);
  }

  @media screen and (min-width: 990px) {
    .sus-materials__header {
      padding-block-end: 0;
      border-block-end: 0;
      text-align: center;
    }
  }

  /* Headling/H1 48/700/1.1 → Mobile 36. */
  .sus-materials__heading {
    margin: 0;
    font-size: var(--font-size--h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: inherit;
    text-wrap: balance;
  }

  /* Headling/H3 36/600/1.2 → Mobile 24/1.1. */
  .sus-materials__subheading {
    margin: 0;
    font-size: var(--font-size--h3);
    font-weight: 600;
    line-height: var(--font-h3--line-height, 1.2);
    color: inherit;
    text-wrap: pretty;
  }

  /* Layout: stacked (accordion first) under 990px, infographic | accordion above. */
  .sus-materials__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }

  .sus-materials__infographic {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
  }

  .sus-materials__accordion {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0;
  }

  @media screen and (min-width: 990px) {
    .sus-materials__layout {
      grid-template-columns: minmax(0, 690fr) minmax(0, 530fr);
      column-gap: 3.75rem;
    }

    .sus-materials__infographic,
    .sus-materials__accordion {
      order: 0;
    }

    .sus-materials__infographic {
      position: relative;
    }

    .sus-materials__accordion {
      padding-block-start: 1.5rem;
    }
  }

  .sus-materials__figure {
    position: relative;
    width: 100%;
    aspect-ratio: 358 / 506; /* Figma 2928:882 mobile infographic (9 Oct illustration) */
    border-radius: 1rem;
    overflow: hidden;
    background: var(--color-teal-800);
  }

  @media screen and (min-width: 990px) {
    .sus-materials__figure {
      aspect-ratio: 690 / 981;
      border-radius: 1.5rem;
    }
  }

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

  .sus-materials__image--placeholder {
    opacity: 0.35;
  }

  .sus-materials__image--mobile {
    display: none;
  }

  @media screen and (max-width: 989px) {
    .sus-materials__figure--has-mobile .sus-materials__image--desktop {
      display: none;
    }

    .sus-materials__figure--has-mobile .sus-materials__image--mobile {
      display: block;
    }
  }

  .sus-materials__markers {
    position: absolute;
    inset: 0;
  }

  /* Marker: Teal/100 at 20% ring, white dot with the design's soft shadow, and a
     pulsing halo staggered per marker. */
  .sus-materials__hotspot {
    --spot-size: 2.625rem;
    --dot-size: 1.25rem;
    position: absolute;
    left: var(--x-mobile, var(--x, 50%));
    top: var(--y-mobile, var(--y, 50%));
    display: grid;
    place-items: center;
    width: var(--spot-size);
    height: var(--spot-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(214 250 242 / 0.2);
    color: inherit;
    cursor: pointer;
    translate: -50% -50%;
    transition: background-color 0.3s var(--sus-ease-out), transform 0.3s var(--sus-ease-out);
    -webkit-tap-highlight-color: transparent;
  }

  @media screen and (min-width: 990px) {
    .sus-materials__hotspot {
      --spot-size: 3rem;
      --dot-size: 1.45rem;
      left: var(--x, 50%);
      top: var(--y, 50%);
    }
  }

  .sus-materials__hotspot::before {
    content: '';
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.9);
    box-shadow: 3px 3px 15px rgb(0 0 0 / 0.1);
    transition: transform 0.3s var(--sus-ease-out);
  }

  .sus-materials__hotspot::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgb(214 250 242 / 0.55);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sus-materials__hotspot::after {
      animation: sus-hotspot-pulse 2.8s ease-out infinite;
      animation-delay: calc(var(--i, 0) * 0.35s);
    }

    .sus-materials__hotspot.is-active::after {
      animation-play-state: paused;
      opacity: 0;
    }
  }

  @keyframes sus-hotspot-pulse {
    0% {
      transform: scale(1);
      opacity: 0.7;
    }

    70%,
    100% {
      transform: scale(1.9);
      opacity: 0;
    }
  }

  .sus-materials__hotspot:hover,
  .sus-materials__hotspot:focus-visible,
  .sus-materials__hotspot.is-active {
    background: rgb(214 250 242 / 0.45);
  }

  .sus-materials__hotspot:hover::before,
  .sus-materials__hotspot.is-active::before {
    transform: scale(1.15);
  }

  .sus-materials__hotspot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* Cards. Stacked: a snap slider under the image. Wide: an overlay with one floating card. */
  .sus-materials__cards {
    position: relative;
    display: flex;
    gap: 0.75rem;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    contain: inline-size;
  }

  .sus-materials__cards::-webkit-scrollbar {
    display: none;
  }

  .sus-materials__card {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 1rem;
    background: #fff;
    color: var(--color-teal-800);
    box-sizing: border-box;
    scroll-snap-align: start;
  }

  @media screen and (min-width: 990px) {
    .sus-materials__cards {
      position: absolute;
      inset: 0;
      display: block;
      overflow: visible;
      contain: none;
      pointer-events: none;
    }

    .sus-materials__card {
      position: absolute;
      left: var(--card-left, 1.5rem);
      top: var(--card-top, 1.5rem);
      width: min(20.6875rem, calc(100% - 1.5rem));
      border-radius: 1.25rem;
      box-shadow: 0 1.5rem 3rem rgb(2 48 49 / 0.18);
      opacity: 0;
      visibility: hidden;
      transform: translate3d(0, 0.5rem, 0) scale(0.98);
      transition: opacity 0.35s var(--sus-ease-out), transform 0.35s var(--sus-ease-out), visibility 0s linear 0.35s;
    }

    /* The card holds no links, and it stays open until another marker is chosen, so pointer events pass
       through it: a marker that ends up under the card can still be hovered or clicked. */
    .sus-materials__card.is-active {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition-delay: 0s;
      pointer-events: none;
    }
  }

  .sus-materials__zone {
    margin: 0;
    color: inherit;
  }

  /* Headling/H4 24/600/1.25 → Mobile 20/1.2. */
  .sus-materials__card-title {
    margin: 0;
    font-size: var(--font-size--h4);
    font-weight: 600;
    line-height: var(--font-h4--line-height, 1.25);
    color: inherit;
  }

  /* Body/SM/Regular bullets. */
  .sus-materials__card-body {
    font-size: 0.875rem;
    line-height: 1.5;
    color: inherit;
  }

  .sus-materials__card-body p {
    margin: 0;
  }

  .sus-materials__card-body ul,
  .sus-materials__card-body ol {
    margin: 0;
    padding-inline-start: 1.3125rem;
  }

  .sus-materials__card-body li {
    margin: 0;
  }

  /* Slider controls (stacked layout only). */
  .sus-materials__slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  }

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

  .sus-materials__arrow {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--color-sand-200);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s var(--sus-ease-out);
  }

  .sus-materials__arrow--prev svg {
    transform: rotate(180deg);
  }

  .sus-materials__arrow:hover,
  .sus-materials__arrow:focus-visible {
    color: var(--color-sand-500);
  }

  .sus-materials__arrow:active {
    transform: scale(0.94);
  }

  .sus-materials__dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .sus-materials__dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 1px solid var(--color-sand-400);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s var(--sus-ease-out);
  }

  .sus-materials__dot.is-active {
    background: var(--color-sand-400);
    transform: scale(1.1);
  }

  /* Accordion column. Headling/H4 intro on desktop, Mobile/Heading/H4 under 750. */
  .sus-materials__intro {
    margin: 0;
    font-size: var(--font-size--h4);
    font-weight: 600;
    line-height: var(--font-h4--line-height, 1.25);
    color: inherit;
    text-wrap: pretty;
  }

  @media screen and (min-width: 990px) {
    .sus-materials__intro {
      max-width: 28.5rem;
    }
  }

  .sus-materials__items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .sus-materials__row {
    display: block;
  }

  .sus-materials__row:nth-child(2) { --reveal-delay: 0.08s; }
  .sus-materials__row:nth-child(3) { --reveal-delay: 0.16s; }
  .sus-materials__row:nth-child(4) { --reveal-delay: 0.24s; }
  .sus-materials__row:nth-child(5) { --reveal-delay: 0.32s; }
  .sus-materials__row:nth-child(6) { --reveal-delay: 0.4s; }
  .sus-materials__row:nth-child(n + 7) { --reveal-delay: 0.48s; }

  .sus-materials__item {
    padding: 1.5rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 6px 6px 12.5px rgb(0 0 0 / 0.06);
    transition: box-shadow 0.4s var(--sus-ease-out), transform 0.4s var(--sus-ease-out);
  }

  @media (hover: hover) {
    .sus-materials__item:not([open]):hover {
      box-shadow: 8px 10px 20px rgb(0 0 0 / 0.09);
      transform: translateY(-2px);
    }
  }

  .sus-materials__summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: pointer;
    color: var(--color-teal-800);
  }

  .sus-materials__summary::-webkit-details-marker,
  .sus-materials__summary::marker {
    display: none;
    content: '';
  }

  /* base.css fades every summary to the foreground colour on hover; the design keeps Teal/800. */
  .sus-materials__summary:hover {
    color: var(--color-teal-800);
  }

  .sus-materials__summary:focus-visible {
    outline: 2px solid var(--color-teal-500);
    outline-offset: 4px;
    border-radius: 0.5rem;
  }

  /* Numbered Sand/100 disc, Body/LG/SemiBold. */
  .sus-materials__num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: var(--color-sand-100);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .sus-materials__item[open] .sus-materials__num {
    background: var(--color-teal-800);
    color: #fff;
  }

  /* Headling/H5 20/600/1.3 → Mobile 18. */
  .sus-materials__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size--h5);
    font-weight: 600;
    line-height: 1.3;
  }

  .sus-materials__toggle {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.0625rem;
    height: 2.125rem;
    color: var(--color-teal-800);
  }

  .sus-materials__toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    overflow: visible;
  }

  .sus-materials__toggle-v {
    transform-origin: 50% 50%;
    transition: transform 0.35s var(--sus-ease-in-out);
  }

  .sus-materials__item[open] .sus-materials__toggle-v {
    transform: rotate(90deg);
  }

  /* Open content: the theme's accordion-custom styles animate .details-content's
     block-size; the inner wrapper carries the divider and spacing. */
  .sus-materials__content-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-start: 1.5rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--color-sand-100);
  }

  @media screen and (min-width: 750px) {
    .sus-materials__content-inner {
      gap: 1.5rem;
      padding-block-start: 1.5rem;
    }
  }

  /* Body/Default/Regular on Sea Grey/700. */
  .sus-materials__body {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
  }

  .sus-materials__body p {
    margin: 0;
  }

  .sus-materials__body p + p {
    margin-block-start: 1em;
  }

  /* Button/Primary SM outline: 14/600/2% tracking, Teal/800 ring, 80px radius.
     `button-fill` (base.css) supplies the wipe, its text-colour transition and the
     overflow clip; the outline button only names the fill colour and what sits under
     it while the wipe travels (idle is transparent). Text goes white as the fill lands. */
  /* Shop and Learn sit side by side and wrap on narrow columns. */
  .sus-materials__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .sus-materials__link {
    --button-fill-color: var(--color-teal-800);
    --button-fill-under: transparent;

    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    align-self: flex-start;
    /* 10px/20px in the kit measured inside the 1px ring: a 38px button. */
    padding: calc(0.625rem - 1px) calc(1.25rem - 1px);
    border: 1px solid var(--color-teal-800);
    border-radius: 5rem;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.125rem;
    letter-spacing: 0.02em;
    color: var(--color-teal-800);
    text-decoration: none;
    white-space: nowrap;
  }

  .sus-materials__link:is(:hover, :focus-visible) {
    color: #fff;
  }

  /* The 10px arrow, swung to horizontal on hover with the theme's shared motion. */
  .sus-materials__link svg {
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    transition: var(--button-arrow-transition);
  }

  .sus-materials__link:is(:hover, :focus-visible) svg {
    transform: var(--button-arrow-hover-transform);
  }
/* END_SECTION:sustainability-materials */

/* START_SECTION:sustainability-overview (INDEX:79) */
/* Section gradient: Sand/50 → Sand/100 → Teal/100. Painted by the background sibling —
     the section element itself is forced transparent by base.css. */
  .sus-overview__bg--gradient {
    background-image: linear-gradient(121deg, var(--color-sand-50) 9%, var(--color-sand-100) 51%, var(--color-teal-100) 91%);
  }

  @media screen and (min-width: 750px) {
    .sus-overview__bg--gradient {
      background-image: linear-gradient(162deg, var(--color-sand-50) 9%, var(--color-sand-100) 51%, var(--color-teal-100) 91%);
    }
  }

  .sus-overview__inner {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  @media screen and (min-width: 750px) {
    .sus-overview__inner {
      gap: 5rem;
    }
  }

  /* Intro row: photo | copy. Stacks copy-first on mobile, as in the design. */
  .sus-overview__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }

  .sus-overview__media {
    order: 2;
  }

  .sus-overview__content {
    order: 1;
  }

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

    .sus-overview__media,
    .sus-overview__content {
      order: 0;
    }
  }

  .sus-overview__media {
    --notch-w: 4.75rem;
    --notch-h: 2.625rem;
    --notch-r: 1.25rem;
    --notch-slot-w: 4.375rem;
    --notch-slot-h: 2.375rem;
    --notch-icon-w: 3.4375rem;
    --frame-radius: 1.25rem;
    position: relative;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .sus-overview__media {
      --notch-w: 7.125rem;
      --notch-h: 3.875rem;
      --notch-r: 1.875rem;
      --notch-slot-w: 6.5rem;
      --notch-slot-h: 2.875rem;
      --notch-icon-w: 4.125rem;
      --frame-radius: 1.875rem;
    }
  }

  .sus-overview__frame {
    position: relative;
    aspect-ratio: 648 / 477;
    border-radius: var(--frame-radius);
    overflow: hidden;
  }

  /* Figma's overlay-blend Teal/500 ramp from the bottom-left corner. */
  .sus-overview__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(219deg, rgb(66 168 153 / 0) 66%, var(--color-teal-500) 105%);
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  .sus-overview__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform 1.2s var(--sus-ease-out);
  }

  .sus-overview__image--placeholder {
    background: var(--color-sand-200);
  }

  @media (hover: hover) {
    .sus-overview__media:hover .sus-overview__image {
      transform: scale(1.03);
    }
  }

  /* Top-right notch: union of two rounded rectangles plus an inverted fillet, the same
     mask recipe blocks/image.liquid uses for its corner notch. */
  .sus-overview__frame--notched {
    mask:
      linear-gradient(#000 0 0) 0 0 / calc(100% - var(--notch-w) - var(--notch-r)) 100% no-repeat,
      linear-gradient(#000 0 0) 0 var(--notch-r) / calc(100% - var(--notch-w)) calc(100% - var(--notch-r)) no-repeat,
      radial-gradient(circle var(--notch-r) at 0 100%, #000 calc(100% - 0.5px), transparent 100%) calc(100% - var(--notch-w)) 0 / var(--notch-r) var(--notch-r) no-repeat,
      linear-gradient(#000 0 0) 0 var(--notch-h) / calc(100% - var(--notch-r)) calc(100% - var(--notch-h)) no-repeat,
      linear-gradient(#000 0 0) 0 calc(var(--notch-h) + var(--notch-r)) / 100% calc(100% - var(--notch-h) - var(--notch-r)) no-repeat,
      radial-gradient(circle var(--notch-r) at 0 100%, #000 calc(100% - 0.5px), transparent 100%) 100% var(--notch-h) / var(--notch-r) var(--notch-r) no-repeat,
      radial-gradient(circle var(--notch-r) at 100% 0, transparent calc(100% - 0.5px), #000 100%) calc(100% - var(--notch-w) + var(--notch-r)) calc(var(--notch-h) - var(--notch-r)) / var(--notch-r) var(--notch-r) no-repeat;
  }

  .sus-overview__notch-icon {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: grid;
    place-items: center;
    width: var(--notch-slot-w);
    height: var(--notch-slot-h);
    color: var(--color-teal-400);
  }

  .sus-overview__notch-icon svg,
  .sus-overview__notch-icon img {
    width: var(--notch-icon-w);
    height: auto;
    max-width: none;
  }

  .sus-overview__content {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sus-overview__copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .sus-overview__copy {
      max-width: 30.25rem;
    }
  }

  /* Headling/H3 — 36/600/1.2, Mobile/Heading/H3 24/1.1 via the theme's responsive tokens. */
  .sus-overview__heading,
  .sus-overview__card-heading {
    margin: 0;
    font-size: var(--font-size--h3);
    font-weight: 600;
    line-height: var(--font-h3--line-height, 1.2);
    letter-spacing: 0;
    color: var(--color-teal-800);
    text-wrap: pretty;
  }

  /* Body/LG/Regular on Sea Grey/700. */
  .sus-overview__body,
  .sus-overview__feature-text {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-sea-grey-700);
  }

  .sus-overview__body p {
    margin: 0;
  }

  .sus-overview__body p + p {
    margin-block-start: 1.5em;
  }

  /* Supply-chain card. */
  .sus-overview__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding: 2rem 1.5rem 1.5rem;
    border-radius: 1.5rem;
    background: #fff;
    box-sizing: border-box;
  }

  @media screen and (min-width: 750px) {
    .sus-overview__card {
      grid-template-columns: minmax(0, 32rem) minmax(0, 37.3125rem);
      justify-content: space-between;
      align-items: start;
      column-gap: 2rem;
      padding: 3rem;
    }
  }

  .sus-overview__card-lead {
    display: flex;
    align-items: center;
    padding-inline: 1rem;
  }

  @media screen and (min-width: 750px) {
    .sus-overview__card-lead {
      align-self: center;
      padding-inline: 1.5rem;
    }
  }

  .sus-overview__features {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

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

  .sus-overview__feature {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 12.125rem;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: var(--color-teal-50);
    box-sizing: border-box;
    transition: transform 0.45s var(--sus-ease-out), box-shadow 0.45s var(--sus-ease-out);
  }

  @media (hover: hover) {
    .sus-overview__feature:hover {
      transform: translateY(-0.25rem);
      box-shadow: 0 1rem 2rem rgb(6 76 77 / 0.08);
    }
  }

  /* Icon chip: Teal/200 → Teal/50 gradient with a Teal/200 hairline. */
  .sus-overview__icon {
    display: grid;
    place-items: center;
    width: 3.4375rem;
    height: 3.4375rem;
    border: 1px solid var(--color-teal-200);
    border-radius: 0.625rem;
    background: linear-gradient(-27deg, var(--color-teal-200) 6%, var(--color-teal-50) 75%);
    box-sizing: border-box;
  }

  .sus-overview__icon svg,
  .sus-overview__icon img {
    width: auto;
    max-width: 2.5rem;
    max-height: 2.375rem;
    height: auto;
  }
/* END_SECTION:sustainability-overview */

/* START_SECTION:sustainability-stats (INDEX:80) */
.sus-stats__footnote {
    max-width: 72ch;
    margin: 2rem auto 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(255 255 255 / 0.72);
    text-align: center;
    text-wrap: pretty;
  }

  .sus-stats.sus-stats {
    overflow: clip;
    isolation: isolate;
    color: #fff;
  }

  /* Mobile band: Figma's plain Teal/500 → Teal/900 gradient. */
  .sus-stats__bg {
    background-image: linear-gradient(172deg, var(--color-teal-500) 1%, var(--color-teal-900) 99%);
  }

  .sus-stats__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    pointer-events: none;
  }

  .sus-stats__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: none;
  }

  /* Desktop: photo → colour-blend ramp → legibility ramp (Figma's three layers). */
  @media screen and (min-width: 750px) {
    .sus-stats__image {
      display: block;
    }

    .sus-stats__media::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, var(--color-teal-900) 18.5%, var(--color-teal-500) 81.5%);
      mix-blend-mode: color;
    }

    .sus-stats__wash {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgb(66 168 153 / 0.77) 2%, rgb(6 76 77 / 0.78) 45%, rgb(2 48 49 / 0.98) 81%);
    }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 750px) {
      .sus-stats--parallax .sus-stats__image {
        height: 118%;
        top: -9%;
        animation: sus-stats-parallax linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
      }
    }
  }

  @keyframes sus-stats-parallax {
    from {
      transform: translate3d(0, -5%, 0);
    }

    to {
      transform: translate3d(0, 5%, 0);
    }
  }

  .sus-stats__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }

  @media screen and (min-width: 750px) {
    .sus-stats__inner {
      gap: 3rem;
    }
  }

  .sus-stats__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 61.5rem;
    text-align: start;
  }

  @media screen and (min-width: 750px) {
    .sus-stats__header {
      text-align: center;
    }
  }

  /* Headling/H1 48/700/1.1 → Mobile/Heading/H1 36. */
  .sus-stats__heading {
    margin: 0;
    font-size: var(--font-size--h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: inherit;
  }

  /* Headling/H4 24/600/1.25 → Mobile/Heading/H4 20/1.2. */
  .sus-stats__subheading,
  .sus-stats__hero-eyebrow {
    margin: 0;
    font-size: var(--font-size--h4);
    font-weight: 600;
    line-height: var(--font-h4--line-height, 1.25);
    color: inherit;
  }

  /* Frosted panel (the export dropped the fill; rebuilt from the node render). */
  .sus-stats__panel {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    padding: 1.5rem;
    border: 1px solid rgb(255 255 255 / 0.22);
    border-radius: 2rem;
    background: rgb(255 255 255 / 0.06);
    box-sizing: border-box;
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sus-stats__panel {
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
  }

  @media screen and (min-width: 750px) {
    .sus-stats__panel {
      padding: 2rem;
    }
  }

  .sus-stats__hero {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .sus-stats__hero {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }
  }

  .sus-stats__hero-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    .sus-stats__hero-text {
      flex: 1 0 0;
      gap: 1rem;
      padding: 1.5rem;
    }
  }

  .sus-stats__hero-figure {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* The headline figure: 100px on desktop, Mobile/Display/Stat 64px on mobile. */
  .sus-stats__hero-value {
    margin: 0;
    font-size: 4rem;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: inherit;
  }

  @media screen and (min-width: 750px) {
    .sus-stats__hero-value {
      font-size: clamp(3.5rem, 6.9vw, 6.25rem);
    }
  }

  /* Headling/H3 36/600/1.2 → Mobile/Heading/H3 24/1.1. */
  .sus-stats__hero-label {
    margin: 0;
    font-size: var(--font-size--h3);
    font-weight: 600;
    line-height: var(--font-h3--line-height, 1.2);
    color: inherit;
  }

  .sus-stats__hero-icon {
    order: -1;
    display: flex;
    justify-content: flex-end;
    margin-block-end: 1rem;
  }

  @media screen and (min-width: 750px) {
    .sus-stats__hero-icon {
      order: 0;
      flex: 0 0 12.6875rem;
      align-self: stretch;
      align-items: center;
      margin: 0;
    }
  }

  /* Teal/400 at 30% chip holding the ocean-bottle mark. */
  .sus-stats__hero-chip {
    display: grid;
    place-items: center;
    width: 4.8125rem;
    height: 4.8125rem;
    border-radius: 1rem;
    background: rgb(91 197 173 / 0.3);
  }

  .sus-stats__hero-chip svg,
  .sus-stats__hero-chip img {
    width: 3.375rem;
    height: 3.375rem;
    max-width: none;
  }

  @media screen and (min-width: 750px) {
    .sus-stats__hero-chip {
      width: 10.1875rem;
      height: 10.1875rem;
      border-radius: 1.5rem;
    }

    .sus-stats__hero-chip svg,
    .sus-stats__hero-chip img {
      width: 6.4375rem;
      height: 6.4375rem;
    }
  }

  .sus-stats__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .sus-stats__grid {
      grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
  }

  .sus-stats__card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--color-teal-200);
    border-radius: 2rem;
    box-sizing: border-box;
    transition: background-color 0.4s var(--sus-ease-out), transform 0.45s var(--sus-ease-out);
  }

  @media screen and (min-width: 750px) {
    .sus-stats__card {
      padding: 1.5rem;
    }
  }

  @media (hover: hover) {
    .sus-stats__card:hover {
      background-color: rgb(255 255 255 / 0.05);
      transform: translateY(-0.25rem);
    }
  }

  .sus-stats__card-head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  /* 58px/700/1 with 1% tracking on desktop; 45px on mobile. */
  .sus-stats__value {
    margin: 0;
    font-size: 2.8125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: inherit;
  }

  @media screen and (min-width: 750px) {
    .sus-stats__value {
      font-size: clamp(2.5rem, 4vw, 3.625rem);
    }
  }

  /* Headling/H5 20/600/1.3 → Mobile 18. */
  .sus-stats__label {
    margin: 0;
    font-size: var(--font-size--h5);
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
  }

  .sus-stats__detail {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border-radius: 1rem;
    background: rgb(43 139 131 / 0.4);
  }

  @media screen and (min-width: 750px) {
    .sus-stats__detail {
      gap: 1.25rem;
      padding-inline-end: 1.25rem;
    }
  }

  .sus-stats__thumb {
    flex: 0 0 5.625rem;
    width: 5.625rem;
    height: 5.625rem;
    border-radius: 0.5rem;
    overflow: hidden;
  }

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

  /* Body/SM/SemiBold on mobile, Body/Default/SemiBold on desktop. */
  .sus-stats__detail-text {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: inherit;
  }

  @media screen and (min-width: 750px) {
    .sus-stats__detail-text {
      font-size: 1rem;
    }
  }
/* END_SECTION:sustainability-stats */

/* START_SECTION:testimonial-banner (INDEX:81) */
/* Testimonial banner: photo, colour wash and ramp live in the media layer; the inner column is
     the 1280 page width (80px insets at 1440, matching the Figma frame). */
  .testimonial-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--tb-padding-start, 80px) var(--tb-padding-end, 80px);
    background: #064c4d;
    color: var(--tb-text-color, #ffffff);
  }

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

  .testimonial-banner__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  /* Design: a teal-800 > teal-300 > sand-200 gradient at 60% in Color blend, then a ramp that
     fades the lower part to teal-800 so the chips read. */
  .testimonial-banner__wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(181deg, rgb(6 76 77 / 0.6) 23%, rgb(124 229 204 / 0.6) 53%, rgb(230 215 195 / 0.6) 97%);
    mix-blend-mode: color;
  }

  .testimonial-banner__ramp {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(179 247 229 / 0) 21%, rgb(6 76 77 / 0.7) 84%);
  }

  /* .page-width-normal only defines --page-width / --page-margin; apply the 1280 column here,
     the same way the lead form above it does. */
  .testimonial-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
    max-width: calc(80rem + var(--page-margin) * 2);
    margin-inline: auto;
    padding-inline: var(--page-margin);
  }

  /* Frosted panel: the Figma export drops the glass fill, so it is rebuilt from the render: a
     light tint, blur, and a lit ring drawn with the same masked gradient as the About page cards. */
  .testimonial-banner__panel {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 96px 20px;
    border-radius: 30px;
    background: rgb(255 255 255 / calc(0.1 * var(--tb-panel-tint, 1)));
    backdrop-filter: blur(var(--tb-panel-blur, 12px));
    -webkit-backdrop-filter: blur(var(--tb-panel-blur, 12px));
  }

  .testimonial-banner__panel::after,
  .testimonial-banner__chip::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0.12) 50%, rgb(255 255 255 / 0.35) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  .testimonial-banner__heading {
    margin: 0;
    max-width: 60.25rem;
    font-size: var(--tb-heading-size, var(--font-display-hero--size));
    color: inherit;
    text-align: center;
    text-wrap: balance;
  }

  .testimonial-banner__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
  }

  .testimonial-banner__chip {
    position: relative;
    display: flex;
    flex: 1 1 calc(25% - 12px);
    align-items: center;
    gap: 16px;
    min-width: 0;
    min-height: 84px;
    padding: 18px 20px;
    border-radius: 16px;
    background: rgb(255 255 255 / 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .testimonial-banner__chip-icon {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid #d6faf2;
    border-radius: 10px;
    background: linear-gradient(153deg, #42a899 10%, #5bc5ad 79%);
    color: #ffffff;
  }

  .testimonial-banner__chip-icon svg,
  .testimonial-banner__chip-icon img {
    display: block;
    width: 32px;
    height: 32px;
    max-width: none;
  }

  /* Pixel sizes on purpose: the theme's root font size is fluid, so rems drift between widths. */
  .testimonial-banner__chip-label {
    font-family: var(--font-geom--family);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
  }

  @media screen and (max-width: 749px) {
    .testimonial-banner {
      padding-block: var(--tb-padding-start-mobile, 40px) var(--tb-padding-end-mobile, 40px);
    }

    .testimonial-banner__panel {
      padding: 48px 20px;
      border-radius: 20px;
    }

    .testimonial-banner__heading {
      font-size: var(--tb-heading-size-mobile, 36px);
    }

    .testimonial-banner__chip {
      flex-basis: 100%;
      min-height: 72px;
      padding: 14px 16px;
    }

    .testimonial-banner__chip-label {
      font-size: 16px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .testimonial-banner__chip {
      transition: background-color 0.2s ease;
    }
  }
/* END_SECTION:testimonial-banner */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:82) */
details[id^='ProductPriceAccordion-'] { scroll-margin-top: calc(var(--header-group-height, 0px) + 24px); }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:83) */
.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:86) */
.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: 50%;
    }

    & > *:last-child {
      flex-basis: 50%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
  }

  .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;
    align-items: stretch;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-item--horizontal .blog-post-card__content {
    padding-inline: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(1rem, 3vw, 2.5rem);
    
    @media screen and (max-width: 749px) {
      padding-inline: 0;
      padding-block: 1.5rem 0;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  .blog-post-card__content > a:not(.blog-post-card__tag):not(.blog-post-card__button) {
    padding-block-start: 0.5rem;
  }

  @media screen and (max-width: 749px) {
    .blog-post-item--horizontal .blog-post-card__content > a:not(.blog-post-card__tag):not(.blog-post-card__button) {
      padding-block: 0.75rem 1rem;
    }
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

    &:hover {
      color: var(--color-foreground-subdued);
    }
  }

  .blog-post-card__tag {
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--color-link, currentColor);
    text-decoration: none;
    margin-block-end: 0.25rem;
  }

  .blog-post-card__button {
    align-self: var(--button-self-align, flex-start);
    margin-block-start: 0.75rem;
    width: fit-content;
    display: inline-flex;

    @media screen and (max-width: 749px) {
      margin-block-start: 1rem;
    }
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:87) */
.blog-post-content {
    --normal-content-width: 800px;
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
    li {
      line-height: 2.3;
    }
    h5 {
      font-size: 1.125rem;
      font-family: var(--font-body--family);
      text-transform: none;
      margin-block: 1.5rem 1rem;
    }
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:88) */
.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:89) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    position: relative;
    display: block;
    width: var(--width);
    margin-inline: auto;
  }

  .blog-post-featured-image.blog-post-content {
    --normal-content-width: 800px;
    max-width: var(--normal-content-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:90) */
.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));

    @media screen and (max-width: 749px) {
      height: calc(var(--blog-post-card-img-height) * (var(--blog-post-card-scale) + 0.3));
    }
  }

  .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:91) */
.blog-post-details {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    line-height: 1rem;
    color: var(--color-details, rgb(var(--color-foreground-rgb)));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }

  .blog-post-details__separator {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_blog-post-tag (INDEX:92) */
.blog-post-tag {
    display: flex;
    width: 100%;
  }

  .blog-post-tag .blog-post-card__tag {
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--color-link, currentColor);
    text-decoration: none;
  }
/* END_BLOCK:_blog-post-tag */

/* START_BLOCK:_card (INDEX:94) */
.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:95) */
.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:96) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  .cart-drawer-items__variant span:nth-child(2) {
    max-width: 3.5rem;
    overflow: visible;
    white-space: nowrap;
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:97) */
.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:98) */
.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;
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--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-grid (INDEX:102) */
.collection-grid-block--slider {
    width: 100%;
  }

  .collection-grid-block__slideshow {
    width: 100%;
  }

  /*
    When the slider IS active at a given breakpoint, each slide takes
    1/N of the row minus its share of the gap.
  */
  .collection-grid-block__slideshow:not([desktop-disabled]) > slideshow-container > slideshow-slides > slideshow-slide {
    @media screen and (min-width: 750px) {
      flex: 0 0 calc(
        (100% - (var(--slideshow-gap, 0px) * (var(--slides-per-view-desktop, 1) - 1))) /
          var(--slides-per-view-desktop, 1)
      );
    }
  }

  .collection-grid-block__slideshow:not([mobile-disabled]) > slideshow-container > slideshow-slides > slideshow-slide {
    @media screen and (max-width: 749px) {
      flex: 0 0 calc(
        (100% - (var(--slideshow-gap, 0px) * (var(--slides-per-view-mobile, 1) - 1))) /
          var(--slides-per-view-mobile, 1)
      );
    }
  }

  /*
    When disabled at the current breakpoint, fall back to a CSS grid that
    matches the original "Collection grid" layout.
  */
  .collection-grid-block__slideshow[desktop-disabled] > slideshow-container > slideshow-slides {
    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-columns: repeat(var(--collection-grid-cols-desktop, 4), 1fr);
      column-gap: var(--slideshow-gap, 0);
      row-gap: var(--collection-grid-rows-gap, 24px);
    }
  }

  .collection-grid-block__slideshow[mobile-disabled] > slideshow-container > slideshow-slides {
    @media screen and (max-width: 749px) {
      display: grid;
      grid-template-columns: repeat(var(--collection-grid-cols-mobile, 2), 1fr);
      column-gap: var(--slideshow-gap, 0);
      row-gap: var(--collection-grid-rows-gap, 24px);
    }
  }

  /*
    Slide cell width must be `auto` so grid-template-columns is honored.
    The base disabled-state CSS sets it via --slideshow-disabled-slide-width.
  */
  .collection-grid-block__slideshow[desktop-disabled] {
    @media screen and (min-width: 750px) {
      --slideshow-disabled-slide-width: auto;
    }
  }
  .collection-grid-block__slideshow[mobile-disabled] {
    @media screen and (max-width: 749px) {
      --slideshow-disabled-slide-width: auto;
    }
  }

  /* Per-breakpoint dot visibility while slider IS active. */
  @media screen and (min-width: 750px) {
    .collection-grid-block__controls--no-desktop {
      display: none;
    }
  }
  @media screen and (max-width: 749px) {
    .collection-grid-block__controls--no-mobile {
      display: none;
    }
  }
/* END_BLOCK:_collection-grid */

/* START_BLOCK:_collection-image (INDEX:103) */
.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:105) */
.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:_featured-blog-posts-card (INDEX:109) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .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__content {
      --flex-wrap: nowrap;
    }
  }

  @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;
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }

  .featured-blog-posts-card__content .blog-post-card__tag {
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--color-link, currentColor);
    text-decoration: none;
    margin-block-end: 0.25rem;
    align-self: flex-start;
  }

  .featured-blog-posts-card__content .blog-post-card__button-wrapper {
    align-self: flex-start;
    margin-block-start: 0.75rem;
    display: inline-flex;
    pointer-events: auto;
  }

  /*
   * On mobile, stretch the wrapper so a button configured with
   * width_mobile: custom 100% actually fills the card content area,
   * and keep the label on a single line.
   */
  @media screen and (max-width: 749px) {
    .featured-blog-posts-card__content .blog-post-card__button-wrapper {
      align-self: stretch;
      display: flex;
      margin-block-start: 1rem;
    }

    .featured-blog-posts-card__content .blog-post-card__button-wrapper > a {
      white-space: nowrap;
      justify-content: center;
    }
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:110) */
.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:112) */
.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:115) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-contact (INDEX:116) */
.menu--contact .menu__item p {
    margin: 0;
  }
/* END_BLOCK:_footer-contact */

/* START_BLOCK:_footer-social-icons (INDEX:117) */
.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:118) */
.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:119) */
.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;
      padding-block: var(--padding-sm);
    }

    & 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);
    }
  }

  .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);
    }
  }

  /* A top-level item whose destination is not live yet renders as text, not a link. */
  .menu-list__link--disabled:not(.menu-list__link--has-children) {
    cursor: default;
    opacity: var(--opacity-subdued-text);
  }

  .menu-list__link-title {
    --gap-xl: 1.5rem;
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::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[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .menu-list .menu-list__list-item .menu-list__link.menu-list__link--has-children {
    --gap-xl: 1.5rem;
    flex-direction: row;
    padding-inline: calc(var(--gap-xl) / 2);
  }

  .menu-list__list-item .menu-list__link.menu-list__link--has-children .menu-list__link-title {
    padding-inline: 0;
  }

  .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: 2.5rem;
    }
  }

  .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-sm) 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;
  }

  /*
    Featured-collection cards in the mega menu use the same hover-reveal
    animation as the Media tile block: heading stays at the bottom at rest,
    the whole content group transforms up on hover, revealing any trailing
    children (subtext, button). Scoped to the mega menu so other resource-card
    usages aren't affected.
  */
  .mega-menu__content-list--collections .resource-card--overlay {
    overflow: hidden;
  }

  .mega-menu__content-list--collections .resource-card--overlay .resource-card__content {
    transform: translateY(var(--mega-menu-card-reveal-offset, 3.5rem));
    transition: transform 0.3s ease;
  }

  .mega-menu__content-list--collections .resource-card--overlay:hover .resource-card__content,
  .mega-menu__content-list--collections .resource-card--overlay:focus-within .resource-card__content {
    transform: translateY(0);
  }

  /* Title stays visible; any trailing children (subtext, button) fade in. */
  .mega-menu__content-list--collections .resource-card--overlay .resource-card__content > *:not(:first-child) {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .mega-menu__content-list--collections .resource-card--overlay:hover .resource-card__content > *:not(:first-child),
  .mega-menu__content-list--collections .resource-card--overlay:focus-within .resource-card__content > *:not(:first-child) {
    opacity: 1;
  }

  /* Give the overlay button a little breathing room + consistent max-width. */
  .mega-menu__content-list--collections .resource-card__button {
    align-self: flex-start;
    margin-top: var(--padding-xs);
  }

  /*
    resource-card.liquid hardcodes the overlay title to --color-white. In the
    mega menu we want the title to follow the Card color scheme instead, so
    override with the scheme's foreground-heading token.
  */
  .mega-menu__content-list--collections .resource-card--overlay .resource-card__title {
    color: var(--color-foreground-heading);
  }

  /* When a link has children, lay it out as inline-flex with the chevron gap. */
  .menu-list__link--has-children,
  .mega-menu__link--parent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .icon-chevron-down {
    flex-shrink: 0;
    width: 13px;
    height: 7px;
  }

  @media (prefers-reduced-motion: reduce) {
    .mega-menu__content-list--collections .resource-card--overlay .resource-card__content,
    .mega-menu__content-list--collections .resource-card--overlay .resource-card__content > *:not(:first-child) {
      transition: none;
    }
  }

  /* 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;
  }

  /* ================================================================
     Sana 2026 — desktop nav links + dropdown card
     Figma: Nav/Desktop 2001:492, Nav Links 2001:454 / 2001:821
     ================================================================ */

  @media screen and (min-width: 750px) {
    /* ---- Top-level links: 18px SemiBold pills (Figma 2001:393) ---- */
    /* The second selector only exists to out-rank the stock rule that lays out
       links with children. Colour deliberately stays out of it: at five classes
       it would also out-rank the open/active states below, and the label would
       keep its resting teal inside the teal pill. Resting colour is set once, at
       a lower weight, in the rule further down. */
    .header-menu .menu-list .menu-list__link,
    .header-menu .menu-list .menu-list__list-item .menu-list__link.menu-list__link--has-children {
      font-family: var(--font-heading--family);
      font-size: var(--nav-link-size);
      font-weight: var(--nav-link-weight);
      line-height: var(--nav-link-line-height);
      letter-spacing: var(--nav-link-letter-spacing);
      text-transform: none;
      flex-direction: row;
      align-items: center;
      gap: 0;
      height: auto;
      padding: var(--nav-link-padding-block) var(--nav-link-padding-inline);
      border-radius: var(--nav-link-radius);
      transition: background-color var(--animation-speed) var(--animation-easing), color var(--animation-speed)
        var(--animation-easing);
    }

    .header-menu .menu-list .menu-list__link .menu-list__link-title {
      padding-inline: 0;
    }

    /* The item stretches to the bar's content height (62px, set by the logo)
       while the pill above sizes to its own text (42.5px). It is a column flex
       that packs from the top, so without this the links sit ~10px above the
       logo's centre line. */
    .header-menu .menu-list .menu-list__list-item:not([slot='overflow']) {
      justify-content: center;
    }

    /* Figma's top-level links carry no chevron — the pill signals the dropdown. */
    .header-menu .menu-list .menu-list__link .icon-chevron-down {
      display: none;
    }

    /* Siblings keep full strength while one link is open; the stock rules dim
       every non-hovered link, which the Figma dropdown states do not do. */
    .header-menu .menu-list .menu-list__link,
    .header-menu .menu-list:where(:has(.menu-list__list-item:hover)) .menu-list__link,
    .header-menu .menu-list:where(:has(.menu-list__list-item:focus-within)) .menu-list__link {
      color: var(--color-teal-800);
    }

    .header-menu .menu-list .menu-list__list-item:where(:hover, :focus-within) > .menu-list__link,
    .header-menu .menu-list .menu-list__list-item > .menu-list__link[aria-expanded='true'],
    .header-menu .menu-list .menu-list__list-item > .menu-list__link--active {
      background-color: var(--color-teal-800);
      color: var(--color-white);
    }

    /* ---- Dropdown card (Figma "Nav Links" 2001:454) --------------- */

    /* overflow-list's shadow <ul part="list"> clips on both axes. The stock
       submenu escapes that because its containing block is .header__row, but
       the card anchors to its own <li>, so the clip has to go. The list never
       needs to scroll — overflow-list moves items to the "more" slot instead. */
    #header-component:has(.menu-list__submenu--card) .overflow-menu::part(list) {
      overflow: visible;
    }

    /* The card paints its own surface, so the full-width underlay that backs
       the stock mega menu is unused here. */
    #header-component:has(.menu-list__submenu--card) .header__underlay-open {
      display: none;
    }

    /* ...which leaves the overflow ("More") panel without one, so give it one. */
    #header-component:has(.menu-list__submenu--card) .overflow-menu::part(overflow) {
      background-color: var(--color-background);
      box-shadow: var(--nav-scroll-shadow);
    }

    .menu-list__list-item:where(:not([slot='overflow'])):has(> .menu-list__submenu--card) {
      position: relative;
    }

    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu--card {
      /* Hangs off the bottom edge of the bar; the row's block padding is the
         distance from the link box down to that edge. */
      top: calc(100% + var(--header-padding));

      /* Lines the card's text column up with the parent link's label — the
         card pads 32px where the link pads 24px. */
      left: calc(var(--nav-link-padding-inline) - var(--nav-panel-padding-inline));
      /* Figma sizes each card by hand (362 for Products, 228 for About) with
         no consistent rule for the trailing space, so the width follows the
         content and only the minimum is pinned to the narrower Figma card. */
      width: max-content;
      min-width: 14.25rem; /* 228 */
      max-width: min(28rem, 90vw);
      padding-inline: 0;
      clip-path: none; /* stylelint-disable-line */
      content-visibility: visible;
      transition: opacity var(--submenu-animation-speed) var(--ease-out-cubic), visibility
        var(--submenu-animation-speed) var(--ease-out-cubic);
    }

    .menu-list__submenu--card .menu-list__submenu-inner {
      display: block;
      background-color: var(--nav-panel-background);
      border-end-start-radius: var(--nav-panel-radius);
      border-end-end-radius: var(--nav-panel-radius);

      /* Not in Figma, which shows the card over a hero image. Without it a
         white card on a white section has no edge at all. */
      box-shadow: var(--nav-scroll-shadow);
      padding-inline: var(--nav-panel-padding-inline);
      padding-block: 0 var(--nav-panel-padding-block-end);
      transform: none;
    }

    /* Collapse the page-width section grid the stock mega menu lays out in. */
    .menu-list__submenu--card .mega-menu,
    .menu-list__submenu--card .mega-menu__grid,
    .menu-list__submenu--card .mega-menu__list,
    .menu-list__submenu--card .mega-menu__column {
      display: block;
      width: auto;
      grid-column: auto;
      gap: 0;
    }

    .menu-list__submenu--card .mega-menu__link {
      font-family: var(--font-heading--family);
      font-size: var(--nav-link-size);
      font-weight: var(--nav-link-weight);
      line-height: var(--nav-link-line-height);
      letter-spacing: var(--nav-link-letter-spacing);
      text-transform: none;
      color: var(--nav-panel-link-color);
      display: flex;
      align-items: center;
      gap: var(--gap-2xs);
      padding-block: var(--nav-panel-item-padding-block);
      padding-inline: 0;
      white-space: nowrap;
    }

    .menu-list__submenu--card .mega-menu__link:hover,
    .menu-list__submenu--card .mega-menu__link:focus-visible {
      color: var(--nav-panel-link-color-hover);
    }

    /* Trailing call-to-action row — Figma "Shop All" (2001:485). */
    .menu-list__submenu--card .mega-menu__link-arrow,
    .menu-list__submenu--card .mega-menu__link-arrow svg {
      width: 0.9375rem; /* 15 */
      height: 0.9375rem;
      flex-shrink: 0;
    }
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_hero-slide (INDEX:121) */
.hero-slide {
    position: relative;
    display: flex;
    height: var(--hero-slide-height-mobile);
    padding: var(--hero-slide-padding-mobile);
    overflow: hidden;
    border-radius: var(--hero-slide-radius-mobile);

    @media screen and (min-width: 750px) {
      height: var(--hero-slide-height);
      padding: var(--hero-slide-padding);
      border-radius: var(--hero-slide-radius);
    }
  }

  .hero-slide__media-container {
    position: absolute;
    inset: 0;
  }

  .hero-slide__media-container picture.hero-slide__media {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hero-slide__media-container img.hero-slide__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  /* Teal brand gradient pulled from the Figma design (Section/Hero) */
  .hero-slide__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(79.54deg, rgb(66 168 153 / 20%) 18.44%, rgb(59 169 153 / 6%) 40.93%),
      linear-gradient(181.91deg, rgb(6 76 77 / 0%) 8.89%, var(--color-teal-800, #064c4d) 56.76%);

    @media screen and (min-width: 750px) {
      background-image:
        linear-gradient(59.6deg, rgb(66 168 153 / 20%) 18.44%, rgb(59 169 153 / 6%) 40.93%),
        linear-gradient(180deg, rgb(6 76 77 / 0%) 34.62%, var(--color-teal-800, #064c4d) 96.67%);
    }
  }

  .hero-slide__content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    color: rgb(255 255 255);
  }

  /*
   * Hero button treatment — the Figma pill (Button/Primary/LG/outline).
   * Applies on top of the theme button block so merchants keep using the
   * standard button block inside hero slides.
   */
  .hero-slide .hero-slide__content a:is(.button, .button-secondary, .button-custom) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 80px;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
  }

  .hero-slide .hero-slide__content a:is(.button, .button-secondary, .button-custom)::after {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background-color: currentcolor;
    mask: var(--hero-arrow-icon) center / 24px 24px no-repeat;
    transition: var(--button-arrow-transition);
  }

  /* Shared trailing-arrow motion — see theme-styles-variables. */
  .hero-slide .hero-slide__content a:is(.button, .button-secondary, .button-custom):hover::after {
    transform: var(--button-arrow-hover-transform);
  }
/* END_BLOCK:_hero-slide */

/* START_BLOCK:_image (INDEX:123) */
.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:127) */
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:_product-card-gallery (INDEX:129) */
.card-hover-panel {
    position: absolute;
    inset: 0;
    z-index: calc(var(--layer-flat) - 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--padding-md);
    padding: var(--padding-lg);
    background: var(--card-hover-bg, var(--color-foreground));
    color: var(--color-background);
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .product-card:hover .card-hover-panel,
  .product-card:focus-within .card-hover-panel {
    opacity: 1;
  }

  .card-hover-panel__icon img {
    width: 1.5625rem;
    height: auto;
    display: block;
  }

  .card-hover-panel__tagline {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: var(--font-size--xl);
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    max-width: 16.25rem;

    @media only screen and (max-width: 749px) {
      font-size: var(--font-size--md);
    }
  }

  @media (hover: none) {
    .card-hover-panel {
      display: none;
    }
  }
  slideshow-slide.product-media-container.product-media-container--image {
    background-color: var(--color-background, transparent);
  }

  /* Figma anchors the action row to the bottom of the media with 32px padding. */
  .card-media-actions {
    position: absolute;
    inset-inline: 0;
    bottom: var(--padding-4xl);
    z-index: var(--layer-raised);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding-inline: var(--padding-4xl);
    pointer-events: none;
  }

  /* Release quick-add from its bottom-right anchor so both actions share the row.
     Mirrors blocks/product-quick-add.liquid, minus its full-width stretch. */
  /* quick-add's wrappers are custom elements that default to `display: inline`, so in a
     flex row they collapse to 0 width and the button overflows on top of the sibling
     action instead of sitting beside it. Make the whole chain shrink-to-fit. */
  .card-media-actions .quick-add,
  .card-media-actions .quick-add__product-form-component,
  .card-media-actions .quick-add__product-form-component .shopify-product-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    height: auto;
  }

  /* The form declares `container-type: inline-size`, which contains its inline axis so its
     content cannot size it — fine when it fills an `inset: 0` parent, but it collapses to 0
     in this shrink-to-fit row. That also made base.css's `@container (max-width: 70px)`
     rule (nearest container = this form) hide the button whenever the gallery was hovered. */
  .card-media-actions .quick-add__product-form-component .shopify-product-form {
    container-type: normal;
  }

  .card-media-actions .quick-add {
    position: static;
    inset: auto;
    pointer-events: auto;
  }

  /* Shared pill geometry = Figma UI/Button/Small. Deliberately sets no `display`:
     the quick-add button's own `--quick-add-display` is what keeps it desktop-only. */
  .card-media-actions .quick-add__button.quick-add__button,
  .card-media-actions__view.card-media-actions__view {
    height: auto;
    min-height: 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-block: 10px;
    padding-inline: 20px;
    border: none;
    border-radius: 80px;
    font-size: var(--font-button-sm--size);
    font-weight: var(--font-button--weight);
    line-height: var(--font-button--line-height);
    letter-spacing: var(--font-button--letter-spacing);
    white-space: nowrap;
  }

  /* Primary action: solid fill, and the label stays visible. base.css collapses it to
     a 0fr grid track until the button itself is hovered, which the design does not do. */
  /* `relative`, not `static`: the button has to stay the containing block for the absolutely
     positioned `.add-to-cart__added` checkmark, otherwise the checkmark resolves against
     .card-gallery and lands in the middle of the product image instead of the button. */
  .card-media-actions .quick-add__button.quick-add__button {
    position: relative;
    right: auto;
    bottom: auto;
    background: var(--button-background-color);
    color: var(--button-color);
    backdrop-filter: none;
  }

  .card-media-actions .quick-add__button .add-to-cart-text {
    background: transparent;
    height: auto;
    border-radius: 0;
  }

  .card-media-actions .quick-add__button .add-to-cart-text__content {
    grid-template-columns: 1fr;
  }

  .card-media-actions .quick-add__button .add-to-cart-text__content span span {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    padding-right: 0;
  }

  .card-media-actions .quick-add__button.quick-add__button:is(:hover, :focus-visible) {
    scale: 1;
  }

  /* Trailing glyphs: plus on the primary, arrow on the secondary. */
  .card-media-actions .quick-add__button.quick-add__button::after,
  .card-media-actions__view.card-media-actions__view::after {
    content: '';
    flex-shrink: 0;
    background-color: currentcolor;
  }

  /* Both assets are cropped to their ink, so `contain` renders them 1:1 — no cropping and no
     rescaled stroke. Sizes include the stroke that overhangs Figma's nominal box: the plus is
     a 10px frame whose 1.5px stroke bleeds to 11.5px, the arrow an 8px frame bleeding to 10px.
     (The general-purpose icon-plus.svg can't be used here: its stroke-width is a CSS variable,
     which an SVG referenced through `url()` never sees, so it masks as a hairline.) */
  .card-media-actions .quick-add__button.quick-add__button::after {
    width: 11.5px;
    height: 11.5px;
    mask: var(--card-media-actions-plus) center / contain no-repeat;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* The plus would otherwise sit beside the checkmark burst while the label fades out. */
  .card-media-actions .quick-add__button.quick-add__button[data-added='true']::after {
    opacity: 0;
  }

  .card-media-actions__view.card-media-actions__view::after {
    width: 10px;
    height: 10px;
    mask: var(--card-media-actions-arrow) center / contain no-repeat;
    transition: var(--button-arrow-transition);
  }

  /* Shared trailing-arrow motion — see theme-styles-variables. Same swing as the full-size
     arrow buttons; the glyph is smaller here but the timing and angle are the theme's. */
  .card-media-actions__view.card-media-actions__view:hover::after {
    transform: var(--button-arrow-hover-transform);
  }

  /* The mobile frames show no overlay at all, so the secondary action is desktop-only —
     the same breakpoint at which quick-add reveals itself. Without this it was the only
     button rendering below 750px. */
  .card-media-actions__view.card-media-actions__view {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .card-media-actions__view.card-media-actions__view {
      display: inline-flex;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    product-card:is(:hover, :focus-within) .card-media-actions__view.card-media-actions__view {
      opacity: 1;
      pointer-events: all;
    }

    /* Both actions slide up into place as they fade in.

       The rise is deliberately much shorter than the buttons are tall. A transform moves the hit
       box along with the pixels, so a rise approaching the button height would leave the resting
       and revealed rectangles barely overlapping, and any press spanning a state change could
       land on the media behind it. At 12px against a ~38px button the two rectangles still share
       two thirds of their height, so the pointer stays on target throughout. */
    .card-media-actions {
      translate: 0 0.75rem;
      transition: translate var(--hover-transition-duration) var(--hover-transition-timing);
    }

    product-card:is(:hover, :focus-within) .card-media-actions {
      translate: 0 0;
    }

    /* quick-add forces `pointer-events: all` on its button, so while hidden it was still a
       clickable strip sitting over the product image. Match the view-product link and only
       take clicks once revealed. Both the wrapper and the button need it: `pointer-events`
       inherits, which covers the elements in between, but an explicit value on the button
       would keep it hit-testable regardless of its ancestors.

       This ties hit-testability to :hover, so anything that steals :hover mid-press would drop
       the click. assets/slideshow.js opts this row out of drag-to-scroll for that reason — a
       captured pointer moves :hover onto the capturing slideshow. */
    .card-media-actions .quick-add,
    .card-media-actions .quick-add__button.quick-add__button {
      pointer-events: none;
    }

    product-card:is(:hover, :focus-within) .card-media-actions .quick-add,
    product-card:is(:hover, :focus-within) .card-media-actions .quick-add__button.quick-add__button {
      pointer-events: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .card-media-actions {
      translate: none;
      transition: none;
    }
  }
/* END_BLOCK:_product-card-gallery */

/* START_BLOCK:_product-details (INDEX:132) */
/* ==========================================================================
     Sana PDP details column — Figma "Section/Product Detials" 2123:175 (desktop)
     and 2123:1573 (mobile). Every measurement below is the literal Figma value
     for the 512px details column; the type scale itself comes from the theme
     presets, which are generated from the same Figma spec.
     ========================================================================== */

  /* 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;
  }

  /* Figma stacks the details blocks 48px apart on desktop, 32px on mobile. */
  .product-details > .group-block > .group-block-content {
    gap: 48px;
  }

  /* The purchase row reads as part of the description it follows, and the packaging lines are
     the button's own supporting detail (client request 2026-10-01): 24px above the row and 16px
     below the button on desktop, 20px and 16px on mobile. The stack gap stays 48px / 32px for
     everything else, so these pull against it rather than change it. */
  .product-details > .group-block > .group-block-content > .group-block:has(> .group-block-content > .buy-buttons-block) {
    margin-top: -24px;
  }

  .product-details > .group-block > .group-block-content > .group-block:has(> .group-block-content > .buy-buttons-block) + .text-block {
    margin-top: -32px;
  }

  @media screen and (max-width: 749px) {
    .product-details > .group-block > .group-block-content > .group-block:has(> .group-block-content > .buy-buttons-block) {
      margin-top: -12px;
    }

    .product-details > .group-block > .group-block-content > .group-block:has(> .group-block-content > .buy-buttons-block) + .text-block {
      margin-top: -16px;
    }
  }

  /* Figma columns: media 702 + 66 gutter + details 512 inside the 1280 content column.
     The section's own gap setting is left at 0 and the gutter is a real column-gap here, so
     the tracks stay the literal Figma widths. The class is doubled so this outranks the
     generic `1fr min(50vw, …)` / `1.557fr 1fr` rules in product-information-content
     regardless of which stylesheet the bundler emits first. */
  @media screen and (min-width: 750px) {
    .product-information__grid.product-information__grid:has(.product-details .product-price--low-as) {
      grid-template-columns: minmax(0, 702fr) minmax(0, 512fr);
      column-gap: 66px;
    }
  }

  /* --- Header group: title, price summary, reviews, description ------------ */

  .product-details .group-block-content:has(> .product-price--low-as) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 24px;
  }

  /* Size/weight/line-height come from the h2 type preset (40px/700/1.15 desktop, 32px mobile),
     which is generated from the same Figma scale — only the measure and colour are set here. */
  .product-details .group-block-content:has(> .product-price--low-as) h1 {
    width: min(100%, 420px);
    color: #064c4d;
  }

  .product-details .group-block-content:has(> .product-price--low-as) > :first-child {
    grid-column: 1 / -1;
  }

  .product-details .group-block-content:has(> .product-price--low-as) > .product-price--low-as {
    grid-column: 1;
  }

  /* The review stars sit top-right of the price summary row … */
  .product-details .group-block-content:has(> .product-price--low-as) > .product-price--low-as + * {
    grid-column: 2;
    justify-self: end;
    align-self: start;
  }

  /* … and anything after it (the short description) spans the row again. */
  .product-details .group-block-content:has(> .product-price--low-as) > .product-price--low-as + * ~ * {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  /* --- Purchase row: Color | Quantity | Price + Add to Cart ---------------- */

  /* Figma 2144:275 lays the three controls on ONE row (114 / 94 / 240 with 32px gutters).
     The quantity stepper and the price panel live inside the buy-buttons block, so its
     wrapper chain is flattened with `display: contents` and the two columns it owns become
     direct items of this grid. That keeps the row a single source of truth for the layout
     instead of pulling the buy buttons up over the variant picker with a negative margin. */
  .product-details .group-block-content:has(> .buy-buttons-block) {
    display: grid;
    /* The colour track is floored at its Figma width: it holds exactly two 52px tiles and their
       10px gap, and once the details column runs a few pixels under 512 (a 1440 screen with a
       scrollbar) a pure fr track drops to 113 and the second tile wraps under the first. */
    grid-template-columns: minmax(114px, 114fr) minmax(0, 94fr) minmax(0, 240fr);
    align-items: start;
    column-gap: 32px;
    row-gap: 32px;
  }

  .product-details .group-block-content:has(> .buy-buttons-block) > .buy-buttons-block,
  .product-details .group-block-content:has(> .buy-buttons-block) product-form-component,
  .product-details .group-block-content:has(> .buy-buttons-block) product-form-component > form,
  .product-details .group-block-content:has(> .buy-buttons-block) .product-form-buttons {
    display: contents;
  }

  .product-details .group-block-content:has(> .buy-buttons-block) > variant-picker {
    grid-column: 1;
    grid-row: 1;
    display: block;
    min-width: 0;
  }

  .product-details .group-block-content:has(> .buy-buttons-block) .product-form__quantity-col {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .product-details .group-block-content:has(> .buy-buttons-block) .product-form__price-col {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
  }

  /* Anything else the buy-buttons block may emit (the add-to-cart error, accelerated checkout,
     quantity rules, volume pricing) takes the full row rather than landing in an auto-placed
     cell. Descendant combinators, not child ones: these elements sit inside the flattened
     buy-buttons chain (display: contents does not change the DOM tree), so `>` never matched
     and the purchase-limit message wrapped word by word inside the 94px quantity track. */
  .product-details .group-block-content:has(> .buy-buttons-block) .product-form-text__error,
  .product-details .group-block-content:has(> .buy-buttons-block) .quantity-label,
  .product-details .group-block-content:has(> .buy-buttons-block) .quantity-rules,
  .product-details .group-block-content:has(> .buy-buttons-block) volume-pricing,
  .product-details .group-block-content:has(> .buy-buttons-block) accelerated-checkout-block,
  .product-details .group-block-content:has(> .buy-buttons-block) .additional-checkout-buttons {
    grid-column: 1 / -1;
  }

  /* The 114px colour track is drawn for the two-value swatch option in Figma 2144:275 — it is
     exactly two 52px tiles and the 10px gap between them. Anything more than that single option
     does not fit the cell: a second or third option (Style, Liner) would stack inside it as one
     narrow column, and an option with more values wraps inside the track — past four values it
     stops reading as a swatch row at all: ten values come out as two columns of five, which is
     a vertical list, not a picker.

     So with more than one option, or from the third value on, the purchase area becomes two
     rows: the picker takes the whole first row, its form (already a wrapping 32px flex row, see
     the form rule below) lays the options out side by side, and quantity, price and Add to Cart
     drop to the row below. The track list is restated rather than left alone so quantity and
     price keep the exact widths the design gives them (94 and 240) instead of inheriting the
     colour track's 114 — the trailing 114fr is the leftover, kept as an fr so the row still
     scales down with the details column the way the three-control row does. A single option
     with two values or fewer keeps the Figma layout untouched. */
  .product-details
    .group-block-content:has(> .buy-buttons-block):has(
      .variant-picker__form > .variant-option:nth-child(2),
      .variant-option--swatches .variant-option__button-label:nth-of-type(3)
    ) {
    grid-template-columns: minmax(0, 94fr) minmax(0, 240fr) minmax(0, 114fr);
  }

  .product-details
    .group-block-content:has(> .buy-buttons-block):has(
      .variant-picker__form > .variant-option:nth-child(2),
      .variant-option--swatches .variant-option__button-label:nth-of-type(3)
    )
    > variant-picker {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .product-details
    .group-block-content:has(> .buy-buttons-block):has(
      .variant-picker__form > .variant-option:nth-child(2),
      .variant-option--swatches .variant-option__button-label:nth-of-type(3)
    )
    .product-form__quantity-col {
    grid-column: 1;
    grid-row: 2;
  }

  .product-details
    .group-block-content:has(> .buy-buttons-block):has(
      .variant-picker__form > .variant-option:nth-child(2),
      .variant-option--swatches .variant-option__button-label:nth-of-type(3)
    )
    .product-form__price-col {
    grid-column: 2;
    grid-row: 2;
  }

  /* A product with only the default variant renders no picker at all (variant-main-picker
     returns nothing for has_only_default_variant), which left the colour track standing empty
     and pushed quantity and price to the right. Without a picker the two controls start at the
     left edge instead, on the same 94 / 240 tracks the two-row layout uses. */
  .product-details .group-block-content:has(> .buy-buttons-block):not(:has(> variant-picker)) {
    grid-template-columns: minmax(0, 94fr) minmax(0, 240fr) minmax(0, 114fr);
  }

  .product-details .group-block-content:has(> .buy-buttons-block):not(:has(> variant-picker)) .product-form__quantity-col {
    grid-column: 1;
    grid-row: 1;
  }

  .product-details .group-block-content:has(> .buy-buttons-block):not(:has(> variant-picker)) .product-form__price-col {
    grid-column: 2;
    grid-row: 1;
  }

  /* --- Field labels (Color: / Quantity: / Price:) -------------------------- */

  /* Figma "UI/Label/Defult" 18/600/1.25 with a 14/400/1.5 sub-line, and the control
     starting 72px below the top of the label block. */
  .product-details .variant-option--buttons legend,
  .product-details .variant-option[data-testid='variant-option-single'],
  .product-details .product-form__quantity-col > .product-form__field-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 45px;
    margin: 0 0 27px;
    padding: 0;
    color: #064c4d;
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
  }

  .product-details .product-form__field-label {
    color: #064c4d;
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
  }

  .product-details .variant-option__name::after {
    content: ':';
  }

  .product-details .variant-option__swatch-value,
  .product-details .product-form__field-sublabel {
    padding: 0;
    color: #064c4d;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
  }

  /* --- Colour swatches ----------------------------------------------------- */

  .product-details .variant-option {
    min-width: 0;
    margin: 0;
  }

  .product-details .variant-picker__form {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
  }

  .product-details .variant-option--buttons {
    gap: 10px;
  }

  /* Figma 2144:279 — 52 x 65 tile, 8px radius, 1px Sand/400 ring on the selected value. */
  .product-details .variant-option--swatches .variant-option__button-label {
    flex: 0 0 auto;
    width: 52px;
    min-width: 52px;
    height: 65px;
    min-height: 65px;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 8px;
  }

  /* The swatch derives its box from --swatch-width/height (and uses them for background-size),
     so both have to move together for the image to fill the tile. */
  .product-details .variant-option--swatches .variant-option__button-label .swatch {
    --swatch-width: 52px;
    --swatch-height: 65px;

    width: 52px;
    height: 65px;
    border: 0;
    border-radius: 7px;
    background-size: cover;
  }

  /* The theme's global swatch radius is a 32px pill, which rounds the 52 x 65 tile into an
     oval. Re-pointing the variable fixes the label and the swatch together — overriding
     `border-radius` on the label alone loses to `.variant-picker .variant-option--buttons
     label:has(.swatch)`, which is a step more specific and lands later in the cascade. */
  .product-details .variant-option--swatches {
    --variant-picker-swatch-radius: 8px;

    width: auto;
  }

  .product-details .variant-option--swatches .variant-option__button-label:has(:checked) {
    border-color: #bfac94;
  }

  /* Figma dims the values that are not selected (30% with a Sand/400 wash) so the chosen
     tile reads as the only active one. */
  .product-details .variant-option--swatches .variant-option__button-label:not(:has(:checked)) {
    position: relative;
    opacity: 0.3;
  }

  .product-details .variant-option--swatches .variant-option__button-label:not(:has(:checked))::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgb(191 172 148 / 0.3);
    pointer-events: none;
  }

  .product-details .variant-option--swatches .variant-option__button-label:not(:has(:checked)):hover {
    opacity: 0.7;
  }

  /* --- Quantity stepper ---------------------------------------------------- */

  .product-details .product-form__quantity-col .quantity-selector-wrapper {
    width: 100%;
    gap: 0;
  }

  /* Figma 2144:299 — 65px tall Sand/50 field, 10px radius, value left, stacked chevrons
     right. Class doubled so it outranks `.product-details .quantity-selector` in base.css,
     which is emitted after this stylesheet. */
  .product-details .quantity-selector.quantity-selector--chevron {
    --quantity-selector-width: auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    align-self: auto;
    flex: 1 1 auto;
    width: 100%;
    height: 65px;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    column-gap: 14px;
    row-gap: 10px;
    color: #064c4d;
    background: #f7f1eb;
  }

  .product-details .quantity-selector.quantity-selector--chevron input[type='number'] {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
  }

  .product-details .quantity-selector.quantity-selector--chevron :is(.quantity-minus, .quantity-plus) {
    position: relative;
    grid-column: 2;
    width: 11px;
    height: 6px;
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    color: inherit;
  }

  /* Restore a usable tap target without disturbing the 11 x 6 Figma box. */
  .product-details .quantity-selector.quantity-selector--chevron :is(.quantity-minus, .quantity-plus)::after {
    content: '';
    position: absolute;
    inset: -8px -10px;
  }

  .product-details .quantity-selector.quantity-selector--chevron .quantity-plus {
    grid-row: 1;
  }

  .product-details .quantity-selector.quantity-selector--chevron .quantity-minus {
    grid-row: 2;
  }

  .product-details .quantity-selector.quantity-selector--chevron .svg-wrapper {
    display: block;
    width: 6px;
    height: 11px;
  }

  .product-details .quantity-selector.quantity-selector--chevron svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .product-details .quantity-selector.quantity-selector--chevron .quantity-plus .svg-wrapper {
    transform: rotate(-90deg);
  }

  .product-details .quantity-selector.quantity-selector--chevron .quantity-minus .svg-wrapper {
    transform: rotate(90deg);
  }

  .product-details .quantity-selector.quantity-selector--chevron :is(.quantity-minus, .quantity-plus):disabled {
    opacity: 0.4;
    cursor: default;
  }

  /* --- Price panel --------------------------------------------------------- */

  .product-details .product-form__purchase-price {
    display: block;
  }

  .product-details .product-form__purchase-price-container {
    display: grid;
    gap: 8px;
  }

  /* Both rows are a two-up grid inside an 8px left inset, which lands the value column on
     the Figma 116px track. */
  .product-details .product-form__purchase-price-main,
  .product-details .product-form__purchase-unit-price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding-left: 8px;
    color: #064c4d;
  }

  .product-details .product-form__purchase-price-main {
    align-items: start;
    min-height: 37px;
  }

  .product-details .product-form__purchase-price-main strong {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 35px;
    padding-inline: 8px;
    border: 1px solid #064c4d;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
  }

  /* Tier pricing: the struck list price sits inside the box, right of the tier price. The box
     keeps its track width and grows leftwards into the label column's spare space when the pair
     needs more room (desktop track is 116px), so the row never wraps. */
  .product-details .product-form__purchase-price-main strong:has(.product-form__purchase-price-was:not([hidden])) {
    width: max-content;
    min-width: 100%;
    justify-self: end;
  }

  .product-details .product-form__purchase-price-was {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.6;
    text-decoration: line-through;
  }

  .product-details .product-form__purchase-unit-price {
    align-items: center;
    min-height: 29px;
    padding-block: 4px;
    border-radius: 4px;
    background: #f0fdfa;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
  }

  .product-details .product-form__purchase-unit-price strong {
    font-weight: 400;
    text-align: center;
  }

  /* --- Add to cart --------------------------------------------------------- */

  .product-details .product-form__price-col add-to-cart-component,
  .product-details .product-form__price-col .add-to-cart-button {
    width: 100%;
  }

  /* Figma "Button/Primary/M" — 48px pill, UI/Button/Medium (16/600/auto, +2% tracking). */
  .product-details .buy-buttons-block .add-to-cart-button {
    height: 48px;
    min-height: 48px;
    padding: 14px 28px;
    border-radius: 80px;
    color: #fff;
    background: #064c4d;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
  }

  .product-details .buy-buttons-block .add-to-cart-button .add-to-cart-text::after {
    content: '+';
    margin-inline-start: 10px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  /* --- Packaging detail note ----------------------------------------------- */

  /* Figma 2144:781 — 14px SeaGrey body with a Teal/800 semibold lead-in. The note is the
     text block immediately before the accordion; its colour comes from the block's own
     setting, the size and lead-in weight from here. */
  .product-details .group-block-content > .text-block:has(+ .accordion) :is(p, li) {
    font-size: 14px;
    line-height: 1.5;
  }

  .product-details .group-block-content > .text-block:has(+ .accordion) :is(strong, b) {
    color: #064c4d;
    font-weight: 600;
  }

  /* --- Accordion ----------------------------------------------------------- */

  /* Figma 2123:341 — Sand/400 rules, 24px block padding, H5 (20/600/1.3) summaries and a
     12px plus/minus glyph 8px in from the right edge. */
  /* The theme's global border width is 0, so `accordion--dividers` draws nothing. Figma rules
     every row, including above the first and below the last. */
  .product-details .accordion {
    --color-border: #bfac94;
    --style-border-width: 1px;
  }

  .product-details .accordion accordion-custom .details,
  .product-details .accordion accordion-custom:first-child .details {
    border-block-start: 1px solid #bfac94;
  }

  .product-details .accordion accordion-custom:last-child .details {
    border-block-end: 1px solid #bfac94;
  }

  .product-details .accordion .details__header {
    gap: 16px;
    padding-block: 24px;
    padding-inline: 0 8px;
    min-height: 0;
    color: #064c4d;
    font-family: var(--font-body--family);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
  }

  .product-details .accordion .details__header .icon-plus {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
  }

  .product-details .accordion .details__header .icon-plus svg {
    display: block;
    width: 12px;
    height: 12px;
  }

  .product-details .accordion .details-content {
    color: #6c8283;
  }

  /* Only the open row carries the closing 24px — base.css zeroes it while collapsed and this
     stylesheet outranks it, so the state has to be restated here. */
  .product-details .accordion details[open] .details-content {
    padding-block: 0 24px;
  }

  .product-details .accordion details:not([open]) .details-content {
    padding-block: 0;
  }

  .product-details .accordion .details-content :is(p, li) {
    font-size: 16px;
    line-height: 1.5;
  }

  .product-details .accordion .details-content > * + * {
    margin-top: 24px;
  }

  /* --- Mobile -------------------------------------------------------------- */

  @media screen and (max-width: 749px) {
    .product-details > .group-block > .group-block-content {
      gap: 32px;
    }

    /* The price summary and the review stars stack on mobile (Figma 2123:1709). The two
       desktop placement rules are more specific than a blanket `> *`, so they are restated
       rather than overridden. */
    .product-details .group-block-content:has(> .product-price--low-as) {
      grid-template-columns: minmax(0, 1fr);
    }

    .product-details .group-block-content:has(> .product-price--low-as) > *,
    .product-details .group-block-content:has(> .product-price--low-as) > .product-price--low-as + *,
    .product-details .group-block-content:has(> .product-price--low-as) > .product-price--low-as + * ~ * {
      grid-column: 1;
      justify-self: stretch;
    }

    /* Colour (114) and quantity (94) keep their Figma widths on the first row; price and Add
       to Cart span the full width below (Figma 2123:1723). The trailing 1fr track absorbs the
       leftover so the spanning row still reaches the full column — `114fr 1fr` would hand the
       first track 114/115 of the row, and `max-content` tracks would be stretched by the
       spanning item. */
    .product-details .group-block-content:has(> .buy-buttons-block) {
      grid-template-columns: 114px 94px minmax(0, 1fr);
      row-gap: 32px;
    }

    .product-details .group-block-content:has(> .buy-buttons-block) .product-form__price-col {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    /* Same breakout as desktop — see the note on the three-control row. Restated rather than
       inherited because the desktop rules carry the extra `:has()` and would otherwise outrank
       the two mobile rules above: mobile keeps the colour track's values full width, then
       quantity on its own row at the Figma 94, then price and Add to Cart spanning below. */
    .product-details
      .group-block-content:has(> .buy-buttons-block):has(
        .variant-picker__form > .variant-option:nth-child(2),
        .variant-option--swatches .variant-option__button-label:nth-of-type(3)
      ) {
      grid-template-columns: 94px minmax(0, 1fr);
    }

    .product-details
      .group-block-content:has(> .buy-buttons-block):has(
        .variant-picker__form > .variant-option:nth-child(2),
        .variant-option--swatches .variant-option__button-label:nth-of-type(3)
      )
      .product-form__quantity-col {
      grid-column: 1;
      grid-row: 2;
    }

    .product-details
      .group-block-content:has(> .buy-buttons-block):has(
        .variant-picker__form > .variant-option:nth-child(2),
        .variant-option--swatches .variant-option__button-label:nth-of-type(3)
      )
      .product-form__price-col {
      grid-column: 1 / -1;
      grid-row: 3;
    }

    /* No picker on mobile: quantity at the left on its Figma 94, price and Add to Cart spanning
       below. Restated for the same specificity reason as the breakout above. */
    .product-details .group-block-content:has(> .buy-buttons-block):not(:has(> variant-picker)) {
      grid-template-columns: 94px minmax(0, 1fr);
    }

    .product-details .group-block-content:has(> .buy-buttons-block):not(:has(> variant-picker)) .product-form__quantity-col {
      grid-column: 1;
      grid-row: 1;
    }

    .product-details .group-block-content:has(> .buy-buttons-block):not(:has(> variant-picker)) .product-form__price-col {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    /* Mobile drops the label-to-control offset from 72px to 55px. */
    .product-details .variant-option--buttons legend,
    .product-details .variant-option[data-testid='variant-option-single'],
    .product-details .product-form__quantity-col > .product-form__field-label {
      margin-bottom: 10px;
    }

    .product-details .variant-picker__form {
      gap: 24px;
    }
  }

  @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');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_product-media-gallery (INDEX:136) */
/*
    Pin the media column beside the details column on desktop, so the photo stays in view while
    the long details column scrolls.

    Pinned at the column, not at the gallery. `.sticky-content` on <media-gallery> was the
    theme's own attempt at this and it never worked — base.css ships
    `.media-gallery--carousel { position: relative }` later in the same file, and at equal
    specificity the later rule wins. Fixing that by pinning the gallery alone is worse than not
    pinning it: the highlights strip is a sibling below it in the same column, so it would keep
    scrolling, slide behind the pinned gallery and never be readable. Pinning
    `.product-information__media` takes the gallery and the strip up together as one box.

    `align-self: start` is what makes it possible at all — a grid item stretches to the row
    height (1901px against a 973px column here), and a box as tall as its own scroll range has
    nothing to stick through.

    Trade-off worth knowing: gallery 735 + 24 + strip means the column runs ~973px, and a
    900px-tall window only has ~790 under the header. The photo is what stays whole — the
    bottom of the strip sits below the fold while pinned, and comes back as soon as the column
    releases at the end of the row. Anchoring the other way (bottom-aligned, so the strip
    always shows) buries the top of the photo under the header, which is the wrong thing to
    lose on a product page.

    Gated on `.media-gallery--sticky` so the block's own "Sticky media on desktop" setting still
    switches it off, and desktop-only: below 750px the grid stacks and a pinned column would
    ride down over the details it is meant to sit beside.
  */
  @media screen and (min-width: 750px) {
    .product-information__media:has(media-gallery.media-gallery--sticky) {
      position: sticky;
      top: var(--sticky-header-offset, 0);
      align-self: start;
      z-index: var(--layer-flat);

      /*
        The column's box is largely transparent (the thumbnail rail is a column of gaps), so
        anything passing underneath shows through those gaps rather than disappearing under it.
        --color-background is the token .section-background already paints, so this is a no-op
        visually until something actually does.
      */
      background-color: var(--color-background);
    }

    /*
      `.sticky-content` sets `top` as well as `position`, and the carousel rule that clears the
      one leaves the other standing — so the gallery would sit a header-height down inside the
      now-pinned column and cover the top of the strip. Clear both.
    */
    .product-information__media media-gallery.media-gallery--sticky {
      position: relative;
      top: auto;
    }
  }

  /*
    The same leftover `top` bites below 750px, where nothing had cleared it. base.css's
    `.media-gallery--carousel { position: relative }` beats `.sticky-content`'s `position`
    on every viewport, so the gallery is never actually sticky here — but `.sticky-content`'s
    `top: var(--sticky-header-offset)` survives, and product-information-content.liquid sets
    that variable to the header height as soon as the header reports
    `data-sticky-state="active"`. On a relatively positioned element a `top` shifts the box
    visually without moving anything in flow, so the moment the page is scrolled the gallery
    slides a header-height down and — carrying `.sticky-content`'s z-index — paints over the
    highlights strip stacked below it. The strip appears to collapse under the image.

    Kept as its own rule rather than lifting `top: auto` out of the desktop block: up there it
    is one half of a deliberate pair that also has to undo `position`, and only for the
    highlights case.
  */
  @media screen and (max-width: 749px) {
    .product-information__media media-gallery.media-gallery--sticky {
      top: auto;
    }
  }

  /* ==========================================================================
     Sana product image slider — Figma 2123:177 (desktop) / 2123:1597 (mobile).
     ========================================================================== */

  /* Figma 2123:177 draws the whole slider 702 wide — an 87px thumbnail rail, a 27px gutter and
     a 588 x 735 main image (2123:226, exactly 1/1.25).

     Those are absolute widths, and the theme's media track is wider than the Figma one: the
     column split in _product-details.liquid is the literal Figma ratio (702fr / 512fr), but it
     divides a content column that runs to 90rem where Figma's is 1280, so the same ratio hands
     the gallery 795px at 1920 and the image comes out 692 x 864 — tall enough to fill the
     viewport. Capping at the design width pins the image back to 588 x 735 at every desktop
     size; the leftover track (93px at 1920, 29px at 1440) stays as gutter beside the details.

     The highlights strip is capped with it so the two stay flush — it is a sibling in the same
     track, not a child of the gallery. */
  @media screen and (min-width: 750px) {
    .product-information__media > media-gallery,
    .product-information__media > .product-highlights {
      max-width: 702px;
    }

    /* base.css sets this gutter to 1rem for every thumbnail carousel; Figma's is 27px (the rail
       is 87 wide and the image starts at x=114), and it is what makes 702 - 87 land on 588. */
    .product-information__media .media-gallery--carousel
      slideshow-component:has(slideshow-controls[thumbnails]) {
      column-gap: 27px;
    }
  }

  /* Figma rounds the main image 24px and each thumbnail 8px. `--media-radius` is published by
     the gallery from its setting but only consumed by the other gallery snippet, so the
     carousel needs it applied here. */
  .product-information__media .product-media-container,
  .product-information__media slideshow-slide {
    border-radius: var(--media-radius, 0);
    overflow: hidden;
  }

  /* The slide sits inside slideshow-slides, a scroll container that base.css leaves square, which
     in turn sits inside slideshow-container. The outer two both clip, so a square level in the
     middle of that chain is one more chance for a corner to be painted straight — round every
     level at the same radius so the clip is the same shape all the way down. */
  .product-information__media slideshow-slides {
    border-radius: var(--media-radius, 0);
  }

  /* Rounding the slide only rounds the photo while the photo fills it. With
     `constrain_to_viewport` on, base.css caps the media at `100vh - header`, and on a short
     desktop window the photo comes out narrower than its track — 552 wide inside a 588 slide at
     800px tall — with `.product-media-constraint-wrapper` centring it. The slide's corners are
     then curving through a white margin nobody can see, and the square-cornered photo is what
     reads as the image. Carry the radius down to the constrained box so the corner always
     follows the picture, whatever the window height. */
  .product-information__media .product-media-constraint-wrapper,
  .product-information__media .product-media,
  .product-information__media .product-media__image {
    border-radius: var(--media-radius, 0);
    overflow: hidden;
  }

  .product-information__media .slideshow-controls__thumbnail {
    border-radius: var(--thumbnail-radius, 8px);
  }

  /* Figma 2123:179 fills each tile edge to edge. base.css contains the thumbnail so the button's
     cream background frames it, which leaves the 8px corners on an area the photo never reaches. */
  .product-information__media .slideshow-controls__thumbnail img {
    object-fit: cover;
  }

  /* --- Arrow buttons on the main image (Figma 2123:235) -------------------- */

  /* The base component fills the media, centres its two controls and blends them against the
     photo. Figma pins them to the bottom-right inside a 32px inset as solid cream pills. */
  .product-information__media slideshow-arrows,
  .product-information__media slideshow-arrows[position='center'] {
    inset: 0;
    gap: 12px;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 32px;
    mix-blend-mode: normal;
  }

  /* The class is doubled to outrank `.media-gallery--carousel slideshow-arrows
     .slideshow-control` in base.css, which sets `padding-inline: 0 var(--padding-md)`. That
     rule ties this one on specificity and base.css is emitted last, so an equal-specificity
     `padding: 0` loses and the glyph sits off-centre — mirrored on the previous button, which
     the theme flips with `scale: -1 1`. */
  .product-information__media slideshow-arrows .slideshow-control.slideshow-control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    min-width: 55px;
    height: 55px;
    min-height: 55px;
    padding: 0;
    border: 1px solid #dac6ac;
    border-radius: 50%;
    color: #bfac94;
    background-image: linear-gradient(-32.24deg, #f7f1eb 29.6%, #ffffff 88.87%);
    opacity: 1;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .product-information__media slideshow-arrows .slideshow-control:is(:hover, :focus-visible) {
    border-color: #064c4d;
  }

  .product-information__media slideshow-arrows .slideshow-control[disabled] {
    opacity: 0.4;
  }

  /* --- "+N more" thumbnail cover (Figma 2123:224) -------------------------- */

  .slideshow-controls__thumbnail--overflow {
    position: relative;
  }

  .slideshow-controls__thumbnail--overflow::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: rgb(118 108 94 / 0.56);
  }

  .slideshow-controls__thumbnail-overflow {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    color: #fff;
    font-family: var(--font-body--family);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
  }

  /* --- Mobile dot indicator (Figma 2123:1607) ----------------------------- */

  /* Five 8px dots, 16px apart: the current one filled Sand/400, the rest outlined. */
  /* The host defaults to `display: block`, which lets the dot list fill the width and strand it
     on the left edge; the flex box is what centres the 72px bar on the image. */
  .media-gallery__scroll-dots {
    position: absolute;
    z-index: var(--layer-heightened);
    right: 0;
    bottom: 16px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .media-gallery__scroll-dots .slideshow-controls__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .media-gallery__scroll-dots .slideshow-control {
    width: 8px;
    min-width: 0;
    height: 8px;
    min-height: 0;
    padding: 0;
    border: 1px solid #bfac94;
    border-radius: 50%;
    background: transparent;
    opacity: 1;
    font-size: 0;
    color: transparent;
    pointer-events: auto;
  }

  .media-gallery__scroll-dots .slideshow-control[aria-selected='true'] {
    background: #bfac94;
  }

  /* base.css pins the thumbnail button to a hardcoded 6.25rem (and 5.0625rem on mobile),
     which ignores the --thumbnail-width the gallery already publishes from its setting.
     Figma 2123:179 wants 87px on both breakpoints. base.css is emitted after this
     stylesheet, so the selector is scoped to outrank it rather than relying on order. */
  .product-information__media .slideshow-controls__thumbnail {
    width: var(--thumbnail-width, 6.25rem);
  }

  @media screen and (max-width: 749px) {
    .product-information__media .slideshow-controls__thumbnail {
      width: var(--thumbnail-width, 5.0625rem);
      height: auto;
    }
  }

  .product-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    /* Figma 2123:244 sits 48px below the slider (783 - 735). */
    margin-top: 48px;
    padding: 16px;
    border: 1px solid #f3ebe1;
    border-radius: 24px;
    background: #fff;
  }

  .product-highlights__item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 16px;
    border-radius: 16px;
    color: #064c4d;
    background: #f0fdfa;
  }

  .product-highlights__icon {
    display: inline-flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 1px solid #b3f7e5;
    border-radius: 10px;
    color: #2b8b83;
    background: linear-gradient(153deg, #b3f7e5 6%, #f0fdfa 75%);
  }

  /*
    Icons keep their own proportions. The Figma set (node 2966:2531) is 32px square for most
    marks and up to 38px tall for the PCR / recycled-glass / hemp ones, so a fixed 32px square
    would squeeze the tall ones. Cap at 38px and let each sit at its natural size.
  */
  .product-highlights__icon :is(img, svg) {
    display: block;
    width: auto;
    height: auto;
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
  }

  .product-highlights__text {
    font-family: var(--font-primary--family);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
  }

  @media screen and (max-width: 749px) {
    .product-highlights {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      gap: 24px;
      /* Figma 2123:1661 sits 24px below the mobile slider (594 - 570). */
      margin-top: 24px;
      padding: 12px 16px;
      border: 0;
      border-radius: 0;
      background: #f0fdfa;
      /*
        The five highlights are ~1000px of chips in a ~366px box, so mobile scrolls them
        sideways instead of wrapping (desktop still wraps — see the base rule above).

        No snapping: with `scroll-snap-type: inline proximity` and every chip aligned to
        `start`, any drag shorter than half a chip was pulled back to the chip it started
        on, which reads as "the strip doesn't scroll". Free scrolling is also what the
        thumbnail rail above it does, so the two behave the same under the thumb.
      */
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .product-highlights::-webkit-scrollbar { display: none; }

    .product-highlights__item {
      align-items: center;
      flex: 0 0 auto;
      min-height: 40px;
      padding: 0;
      gap: 12px;
      background: transparent;
    }

    .product-highlights__icon {
      flex-basis: 40px;
      width: 40px;
      height: 40px;
    }

    .product-highlights__icon :is(img, svg) {
      /* 40px tile: same 0.75 ratio as the 48px desktop tile (32px -> 24px, 38px -> 28.5px). */
      transform: scale(0.75);
    }

    .product-highlights__text {
      font-size: 14px;
      line-height: 1.5;
      white-space: nowrap;
    }
  }

  .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;
  }

  .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;
  }
/* END_BLOCK:_product-media-gallery */

/* START_BLOCK:_search-input (INDEX:137) */
.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:138) */
.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:139) */
.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:accordion (INDEX:142) */
/* Card rows: each row becomes its own surface instead of one divided list. */
  .accordion--cards {
    display: flex;
    flex-direction: column;
    gap: var(--accordion-row-gap);
  }

  .accordion--cards accordion-custom {
    display: block;
    padding: var(--accordion-row-padding);
    border-radius: var(--accordion-row-radius);
    background-color: var(--accordion-row-background);
  }

  /* The list style draws rules between rows, which would double up on the card edges.
     accordion-styles.liquid's between-row selectors tie on specificity and win on source
     order, so the class is repeated here to outrank them. */
  .accordion--cards.accordion--cards.accordion--dividers accordion-custom .details,
  .accordion--cards.accordion--cards.accordion--dividers accordion-custom:first-child .details,
  .accordion--cards.accordion--cards.accordion--dividers accordion-custom:last-child .details {
    border-block: none;
  }

  /* The summary carries its own block padding for the list style; under cards the card
     already supplies that, so it would double up. Class repeated to outrank the source rule. */
  .accordion--cards.accordion--cards .details__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--accordion-row-inner-gap);
    padding-block: 0;
  }

  /* Under cards, "dividers" means the rule between the question and its answer. */
  .accordion--cards.accordion--dividers .details[open] .details-content {
    margin-block-start: var(--accordion-row-inner-gap);
    padding-block-start: var(--accordion-row-inner-gap);
    border-block-start: 1px solid var(--color-border);
  }

  /*
    Chip face, from the design: a mint fill running up-left, ringed by a 1px gradient that
    deepens toward the bottom-right. Both are expressed against the artwork's 44px frame so
    the whole chip scales from the one size setting.
  */
  .accordion--cards {
    --accordion-icon-border-width: 1px;
    --accordion-icon-fill: linear-gradient(333.43deg, var(--color-teal-200) 0%, var(--color-teal-50) 94.44%);
    --accordion-icon-border: linear-gradient(158.45deg, var(--color-teal-200) 0%, var(--color-teal-400) 100%);
    --accordion-icon-color: var(--color-teal-500);
  }

  .accordion--cards .details__header :is(.icon-caret, .icon-plus) {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--accordion-icon-size);
    height: var(--accordion-icon-size);
    border: var(--accordion-icon-border-width) solid transparent;
    border-radius: calc(var(--accordion-icon-size) * 10 / 44);
    background-color: var(--accordion-icon-background);
    background-image: var(--accordion-icon-fill), var(--accordion-icon-border);
    background-origin: border-box;
    /* Fill stops at the padding box, ring fills the border box — the standard gradient-border
       sandwich, which needs the transparent border above to leave the ring somewhere to paint. */
    background-clip: padding-box, border-box;
  }

  /*
    The design's chevron points right and swings down as the row opens, rather than the shared
    caret's down/up flip. It is painted as a mask so _accordion-row.liquid — which inlines the
    same icon-caret.svg for every accordion in the theme — needs no change.
  */
  .accordion--cards .details__header .icon-caret > svg {
    display: none;
  }

  .accordion--cards .details__header .icon-caret::after {
    content: '';
    /* Pulled out to the border box, since absolute insets resolve against the padding box.
       That maps the 44-unit artwork onto the chip 1:1 at the design's size. */
    position: absolute;
    inset: calc(-1 * var(--accordion-icon-border-width));
    background-color: var(--accordion-icon-color);
    mask: var(--accordion-caret-icon) center / 100% 100% no-repeat;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .accordion--cards .details[open] .details__header .icon-caret::after {
    transform: rotate(90deg);
  }

  /* Both glyphs are always in the markup and accordion-styles hides the unused one; the
     chip rule above is more specific and would otherwise reveal both. */
  .accordion--cards.accordion--caret .details__header .icon-plus,
  .accordion--cards.accordion--plus .details__header .icon-caret {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .accordion--cards accordion-custom {
      padding: var(--accordion-row-padding-mobile);
    }
  }
/* END_BLOCK:accordion */

/* START_BLOCK:article-card (INDEX:145) */
.article-card__excerpt.text-block .text-block {
    font-size: 1.0625rem;
    line-height: 1.88;
    padding-top: 0.75rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .article-card__title.text-block .text-block h3 {
    font-size: 1.25rem;
    line-height: 1.875;
    padding-top: 0.5rem;
    text-decoration: underline;
    color: #2d7cb1;
  }
  span.article-card__location {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5625rem;
    margin-top: 0.5625rem;
    font-family: var(--font-heading--family);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 30px;
    img {
      height: 0.9375rem;
      width: auto;
    }
  } 
  .article-card__date.caption {
    color: #717070;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
  }
  @media only screen and (max-width: 749px) {
    .article-card__excerpt.text-block .text-block {
      font-size: 0.9375rem;
      line-height: 1.67;
    }
    .article-card__title.text-block .text-block h3 {
      font-size: 1.25rem;
      line-height: 1.2;
    }
    span.article-card__location {
      font-size: 1.0625rem;
      line-height: 1.7;
      gap: 0.8625rem;
    }
    .article-card__date.caption {
      font-size: 0.875rem;
      padding-top: 6px;
      font-size: 0.9375rem;
      line-height: 1.0625rem;
      letter-spacing: 0.08125rem;
    }
  }
/* END_BLOCK:article-card */

/* START_BLOCK:article-icon (INDEX:146) */
.icon-block {
    display: flex;
    fill: currentcolor;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:article-icon */

/* START_BLOCK:article-image (INDEX:147) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  placeholder-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio);
  }

  .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: var(--object-fit, cover);
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:article-image */

/* START_BLOCK:border (INDEX:149) */
.border-block {
    width: 100%;
    display: flex;
  }

  .border-block::before {
    content: '';
    display: block;
    width: var(--border-block-width, 100%);
    margin-inline: auto;
    border-color: var(--border-block-color, var(--color-border, currentColor));
    border-style: var(--border-block-style, solid);
    border-width: 0;
  }

  .border-block[data-border-position='bottom']::before {
    border-block-end-width: var(--border-block-thickness, 1px);
  }

  .border-block[data-border-position='top']::before {
    border-block-start-width: var(--border-block-thickness, 1px);
  }
/* END_BLOCK:border */

/* START_BLOCK:button (INDEX:150) */
/* One pill per artwork template: natural widths, wrapping rows, the group's 16px gap. */
  .button-artwork-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    min-width: 0;
    max-width: 100%;
  }

  .button-artwork-list > a {
    flex: 0 0 auto;
    max-width: 100%;
  }

  @media screen and (max-width: 749px) {
    .button-artwork-list {
      width: 100%;
    }

    /* Full-width pills on a phone: a label longer than the pill wraps instead of being clipped.
       Doubled class so this outranks the two-class rule button-custom-styles writes per block. */
    .button-artwork-list.button-artwork-list > a {
      white-space: normal;
      text-align: center;
    }
  }
/* END_BLOCK:button */

/* START_BLOCK:buy-buttons (INDEX:151) */
/* --- Quote-only purchase row --------------------------------------------- */

  /* blocks/_product-details flattens this block into the Color | Quantity | Price + Add to
     cart grid and pins .product-form__quantity-col and .product-form__price-col to fixed
     cells. A quote-only product renders neither: it has just the .product-form__quote-col
     below, which takes every cell the two would have used so no empty track is left beside
     or above the pill. The three layouts mirror the three the cart row uses, selected by the
     same conditions. Default: picker in the first cell, the pill across the rest of the row,
     bottom-aligned with the picker's controls. */
  .product-details .group-block-content:has(> .buy-buttons-block) .product-form__quote-col {
    grid-column: 2 / -1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: end;
    min-width: 0;
  }

  /* Picker on a row of its own (a second option, or three or more swatches): the pill drops
     to the row below and starts at the left edge. */
  .product-details
    .group-block-content:has(> .buy-buttons-block):has(
      .variant-picker__form > .variant-option:nth-child(2),
      .variant-option--swatches .variant-option__button-label:nth-of-type(3)
    )
    .product-form__quote-col {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* No picker (default variant only): the pill starts at the left edge of the first row. */
  .product-details .group-block-content:has(> .buy-buttons-block):not(:has(> variant-picker)) .product-form__quote-col {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* The Figma price / Add to cart track is 240 wide; the pill keeps that as a floor and
     otherwise sizes to its label. */
  .product-details .product-form__quote-col .purchase-cta {
    width: fit-content;
    min-width: 240px;
  }

  /* `quote` products show a reference price: the price panel and the pill share the row
     below the picker (the first row when there is no picker), on two 240 tracks. The
     selectors carry .group-block and the block's own ancestors so they outrank the
     multi-option and no-picker placements in blocks/_product-details and above. */
  .product-details .group-block .group-block-content:has(> .buy-buttons-block):has(.buy-buttons-block .product-form-buttons .product-form__quote-price-col) {
    /* The pill keeps its 240 track; the price cell takes whatever is left of the row. */
    grid-template-columns: minmax(0, 1fr) minmax(240px, max-content);
  }

  /* "Starting at" must not break mid-phrase; if the price pill does not fit beside it, the
     pill drops under the label instead. */
  .product-details .product-form__quote-price-col .product-form__field-label {
    white-space: nowrap;
  }

  .product-details .product-form__quote-price-col .product-form__purchase-price-main {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .product-details .group-block .group-block-content:has(> .buy-buttons-block):has(.buy-buttons-block .product-form-buttons .product-form__quote-price-col) > variant-picker {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .product-details .group-block .group-block-content:has(> .buy-buttons-block) .buy-buttons-block .product-form-buttons .product-form__quote-price-col {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
  }

  .product-details .group-block .group-block-content:has(> .buy-buttons-block):has(.buy-buttons-block .product-form-buttons .product-form__quote-price-col) .buy-buttons-block .product-form-buttons .product-form__quote-col {
    grid-column: 2 / -1;
    grid-row: 2;
    align-self: end;
  }

  .product-details .group-block .group-block-content:has(> .buy-buttons-block):not(:has(> variant-picker)) .buy-buttons-block .product-form-buttons .product-form__quote-price-col,
  .product-details .group-block .group-block-content:has(> .buy-buttons-block):has(.buy-buttons-block .product-form-buttons .product-form__quote-price-col):not(:has(> variant-picker)) .buy-buttons-block .product-form-buttons .product-form__quote-col {
    grid-row: 1;
  }

  @media screen and (max-width: 749px) {
    .product-details .group-block .group-block-content:has(> .buy-buttons-block):has(.buy-buttons-block .product-form-buttons .product-form__quote-price-col) {
      grid-template-columns: minmax(0, 1fr);
    }

    /* Explicit rows: picker, price, pill. Restated per case because the desktop no-picker
       placements above are more specific than a plain mobile override. */
    .product-details .group-block .group-block-content:has(> .buy-buttons-block):has(.buy-buttons-block .product-form-buttons .product-form__quote-price-col) > variant-picker {
      grid-column: 1;
      grid-row: 1;
    }

    .product-details .group-block .group-block-content:has(> .buy-buttons-block):has(.buy-buttons-block .product-form-buttons .product-form__quote-price-col) .buy-buttons-block .product-form-buttons .product-form__quote-price-col {
      grid-column: 1;
      grid-row: 2;
    }

    .product-details .group-block .group-block-content:has(> .buy-buttons-block):has(.buy-buttons-block .product-form-buttons .product-form__quote-price-col) .buy-buttons-block .product-form-buttons .product-form__quote-col {
      grid-column: 1;
      grid-row: 3;
    }

    .product-details .group-block .group-block-content:has(> .buy-buttons-block):has(.buy-buttons-block .product-form-buttons .product-form__quote-price-col):not(:has(> variant-picker)) .buy-buttons-block .product-form-buttons .product-form__quote-price-col {
      grid-row: 1;
    }

    .product-details .group-block .group-block-content:has(> .buy-buttons-block):has(.buy-buttons-block .product-form-buttons .product-form__quote-price-col):not(:has(> variant-picker)) .buy-buttons-block .product-form-buttons .product-form__quote-col {
      grid-row: 2;
    }
  }

  @media screen and (max-width: 749px) {
    /* Under the picker, spanning the column, where the cart row puts price and Add to cart.
       The two more specific rules above still win here, and both already give the right
       row for mobile: row 1 with no picker, row 2 under a multi-option picker. */
    .product-details .group-block-content:has(> .buy-buttons-block) .product-form__quote-col {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .product-details .product-form__quote-col .purchase-cta {
      width: 100%;
    }
  }
  /* Quantity-aware purchase price (tier-price-component): the wrapper is layout-neutral. The
     struck list price lives inside the price box and is styled with the box in blocks/_product-details. */
  .product-form__purchase-price-container tier-price-component { display: contents; }

  /* Bold Custom Pricing's quantity-break grid. The app embed appends it to the product form
     (div.bold_qb_grid > table.shappify_qb_grid); the theme has its own tier price and price
     table, so it is never shown. Hidden here by class rather than only through the embed's own
     "#bold_qb_grid" CSS, which stopped matching once the grid no longer goes through the
     inject_grid_in locator (config/settings_data.json) and which a theme-editor save could reset. */
  .bold_qb_grid,
  #bold_qb_grid,
  .shappify_qb_grid {
    display: none !important;
  }
  .product-form__purchase-price-was[hidden] { display: none !important; }
/* END_BLOCK:buy-buttons */

/* START_BLOCK:checklist-item (INDEX:152) */
.checklist__text {
    display: inline-block;
  }
/* END_BLOCK:checklist-item */

/* START_BLOCK:checklist (INDEX:153) */
.checklist {
    display: grid;
    gap: 5px;
  }

  /* Shared item styles live here so children can inherit */
  .checklist__item {
    display: block;
  }

  .checklist__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .checklist__label {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm, 12px);
    color: var(--checklist-text-color);
    min-height: var(--minimum-touch-target);
    cursor: pointer;
  }
 
  .checklist__box {
    width: 24px;
    height: 24px;
    border: 2px solid var(--checklist-checkbox-border-color);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .checklist__icon {
    display: none;
    width: 16px;
    height: 16px;
    color: var(--checklist-text-color);
  }

  /* Image icon variant renders via pseudo element for performance */
  .checklist--icon-image .checklist__box::after {
    content: '';
    position: absolute;
    inset: 4px;
    background-image: var(--checklist-icon-image-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: none;
  }

  /* Show selected icon only when the item is checked */
  .checklist--icon-checkmark .checklist__input:checked + .checklist__label .checklist__icon--checkmark { display: inline-flex; }
  .checklist--icon-plus .checklist__input:checked + .checklist__label .checklist__icon--plus { display: inline-flex; }
  .checklist--icon-caret .checklist__input:checked + .checklist__label .checklist__icon--caret { display: inline-flex; }
  .checklist--icon-close .checklist__input:checked + .checklist__label .checklist__icon--close { display: inline-flex; }
  .checklist--icon-image .checklist__input:checked + .checklist__label .checklist__box::after { display: block; }

  /* Optional hover focus styles */
  .checklist__label:focus-visible .checklist__box { outline: 2px solid var(--checklist-text-color); outline-offset: 2px; }
/* END_BLOCK:checklist */

/* START_BLOCK:comparison-slider (INDEX:156) */
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;
  }

  /* 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: left var(--transition-duration, 0s) ease-in-out, top 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: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* 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);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* 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:157) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:158) */
.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:cta-banner (INDEX:159) */
/*
    A section lays its blocks out with `align-items: <its alignment setting>`, which in column
    flow sizes each child to its own content rather than to the row — so the banner collapsed to
    the width of its heading. Horizon's built-in blocks opt out through the `size-style` class,
    driven by a `width: fill` setting; this block has no width to expose, so it claims the row
    outright. `align-self` is what actually beats the container, and it is declared on the
    wrapper Shopify renders around a block as well, since that is the real flex item.
  */
  .cta-banner-wrapper,
  .shopify-block:has(> .cta-banner-wrapper) {
    align-self: stretch;
    width: 100%;
  }

  .cta-banner-wrapper {
    box-sizing: border-box;
    padding-block-start: var(--cta-space-above, 120px);
    padding-block-end: var(--cta-space-below, 0px);
    padding-inline: var(--cta-page-margin, 80px);
  }

  .cta-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--cta-gap, 32px);
    max-width: var(--cta-max-width, 1280px);
    min-height: var(--cta-min-height, 400px);
    margin-inline: auto;
    padding: var(--cta-padding, 48px);
    border-radius: var(--cta-radius, 30px);
    overflow: hidden;
    isolation: isolate;
    color: var(--cta-text-color, #ffffff);
  }

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

  .cta-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Only swap artwork when a mobile-specific image is actually supplied. */
  .cta-banner__image--mobile {
    display: none;
  }

  /* Stacked over the still rather than replacing it, so the poster covers the buffering gap. */
  .cta-banner__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cta-banner__video--mobile {
    display: none;
  }

  .cta-banner__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(
      var(--cta-scrim-angle, 80deg),
      var(--cta-scrim-color) var(--cta-scrim-start, 17%),
      color-mix(in srgb, var(--cta-scrim-color) var(--cta-scrim-end-opacity, 20%), transparent)
        var(--cta-scrim-end, 60%)
    );
  }

  .cta-banner__mark {
    position: relative;
    z-index: 2;
    display: block;
    width: var(--cta-mark-width, 43px);
    /* Matches the artwork's own proportions so the width setting is the only dimension to tune. */
    aspect-ratio: 43 / 28;
    flex-shrink: 0;
    background-color: var(--cta-mark-color, #ffffff);
    mask: var(--cta-mark-icon) center / contain no-repeat;
  }

  /* An uploaded mark replaces the built-in glyph, so the colour mask must not tint it. */
  .cta-banner__mark:has(.cta-banner__mark-image) {
    background-color: transparent;
    mask: none;
  }

  .cta-banner__mark-image {
    width: 100%;
    height: auto;
    display: block;
  }

  .cta-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cta-gap, 32px);
    max-width: 100%;
    /* Keeps the copy on the floor of the card even when the mark is switched off and
       there is no second child for `space-between` to push against. */
    margin-block-start: auto;
  }

  /* Scoped one level deeper so a `.section h2` rule in the theme's base stylesheet cannot
     outrank the design's type scale. */
  .cta-banner .cta-banner__heading {
    margin: 0;
    max-width: var(--cta-heading-max-width, 380px);
    font-size: var(--cta-heading-size, 40px);
    font-weight: 700;
    line-height: 1.15;
    color: inherit;
  }

  .cta-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: 1px solid var(--cta-button-border, #ffffff);
    border-radius: 80px;
    background-color: var(--cta-button-bg);
    color: var(--cta-button-text, #ffffff);
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;

    /*
     * .button-fill on the markup opts this pill into the shared radial hover fill in base.css.
     * It has no --button-background-color for base.css's fallbacks to reach, so both knobs are
     * set here. The fill paints the solid hover colour; --button-fill-under clears to
     * transparent because the resting background is a translucent white wash — left in place
     * it would show through the arriving fill and read brighter than the intended flat white.
     */
    --button-fill-color: var(--cta-button-border, #ffffff);
    --button-fill-under: transparent;
  }

  /*
   * Background is left to the fill. Under reduced motion base.css skips it, so this keeps the
   * hover colour as the fallback; with motion allowed the fill's own hover rule is a class more
   * specific and wins. The text swap stays here either way — base.css only drives colour
   * through --button-color, which this button does not use.
   */
  a.cta-banner__button:hover {
    background-color: var(--cta-button-border, #ffffff);
    color: var(--cta-scrim-color);
  }

  /*
   * icon-arrow-top-right.svg draws a 12px glyph inside a padded 24px viewBox, so sizing the mask
   * with `contain` fits the padding rather than the ink — the arrow came out at ~42% of the box
   * with a hairline ~0.8px stroke, visibly lighter than the same glyph elsewhere. Pinning the
   * mask to its native 24px and letting the 15px box crop the padding renders it at the intended
   * 12px / 2px stroke, matching the Custom Packaging banner and the shared button arrow.
   */
  .cta-banner__button--arrow::after {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background-color: currentcolor;
    mask: var(--cta-arrow-icon) center / 24px 24px no-repeat;
    transition: var(--button-arrow-transition);
  }

  /*
   * The shared trailing-arrow motion (theme-styles-variables): the glyph swings round to the
   * horizontal. This used to nudge diagonally up-right instead, which made this the only arrow
   * button in the theme that moved differently from the rest.
   */
  a.cta-banner__button--arrow:hover::after {
    transform: var(--button-arrow-hover-transform);
  }

  @media screen and (max-width: 749px) {
    .cta-banner-wrapper {
      padding-block-start: var(--cta-space-above-mobile, 48px);
      padding-block-end: var(--cta-space-below-mobile, 0px);
      padding-inline: var(--cta-page-margin-mobile, 16px);
    }

    /*
      Mobile trades the fixed height for an aspect ratio, so the card keeps its shape across
      handset widths. It still grows if the copy needs more room than the ratio allows.
    */
    .cta-banner {
      min-height: 0;
      aspect-ratio: var(--cta-aspect-mobile, 1);
      gap: var(--cta-gap-mobile, 24px);
      padding: var(--cta-padding-mobile, 32px);
      border-radius: var(--cta-radius-mobile, 20px);
    }

    .cta-banner__scrim {
      background-image: linear-gradient(
        var(--cta-scrim-angle-mobile, 70deg),
        var(--cta-scrim-color) var(--cta-scrim-start-mobile, 32%),
        color-mix(in srgb, var(--cta-scrim-color) var(--cta-scrim-end-opacity, 20%), transparent)
          var(--cta-scrim-end-mobile, 75%)
      );
    }

    .cta-banner__content {
      gap: var(--cta-gap-mobile, 24px);
      width: 100%;
    }

    .cta-banner .cta-banner__heading {
      max-width: none;
      font-size: var(--cta-heading-size-mobile, 32px);
    }

    .cta-banner__media:has(.cta-banner__image--mobile) .cta-banner__image--desktop {
      display: none;
    }

    .cta-banner__image--mobile {
      display: block;
    }

    .cta-banner__media:has(.cta-banner__video--mobile) .cta-banner__video--desktop {
      display: none;
    }

    .cta-banner__video--mobile {
      display: block;
    }
  }

  /*
    Last in the file so it outranks the mobile swap above, which would otherwise re-show the
    mobile video. The poster is already carrying the card, so the video simply drops out.
  */
  @media (prefers-reduced-motion: reduce) {
    .cta-banner__video,
    .cta-banner__video--mobile {
      display: none;
    }
  }
/* END_BLOCK:cta-banner */

/* START_BLOCK:disclosures (INDEX:161) */
.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:162) */
.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-lg);
    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);
  }

  .email-signup__input {
    min-width: 16.1875rem;
  }

  .email-signup__button--text {
    min-width: 8.6875rem;
  }

  .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:164) */
.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;
    text-transform: capitalize;
    font-weight: 400;

    @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: 1.5rem;
    --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-tiny);
    width: var(--icon-size-2xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block-start: var(--margin-3xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);

    svg {
      height: var(--icon-size-xs);
      width: var(--icon-size-xs);
    }
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* 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: 1rem;
    }
  }

  @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 {
    --color-border: var(--color-border, currentColor);
    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);
    font-size: 0.875rem;
  }

  .facets-drawer__filters .facets__label {
    font-size: 1rem;
  }

  .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;
  }

  /* Keep the current sort selection visible while the sort dropdown is open */
  .sorting-filter .facets__panel[open] .facets__status {
    display: inline;
  }

  .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;
  }

  /* Desktop-only drawer toggle button. Hidden by default; visible only on desktop
     when the block opts into drawer mode. Leaves all other controls (count, sort,
     grid density) and mobile layout untouched. */
  .facets-desktop-toggle {
    display: none;
  }

  @media screen and (min-width: 750px) {
    /* Hide the filter chips inside the horizontal bar — the drawer owns them now */
    .facets-block-wrapper--horizontal.facets--desktop-drawer .facets__filters-wrapper,
    .facets-block-wrapper--horizontal.facets--desktop-drawer .facets-horizontal-remove {
      display: none;
    }

    /* Hide the vertical sidebar pane entirely — exclude the drawer's own
       theme-drawer element, which shares the same classes */
    .facets-block-wrapper--vertical.facets--desktop-drawer:not(theme-drawer) {
      display: none;
    }

    /* Drawer mode: drop the product count and push the filter button + sort
       + grid density to the right of the bar */
    .facets-block-wrapper--horizontal.facets--desktop-drawer .products-count-wrapper,
    .facets.facets-controls-wrapper.facets--desktop-drawer .products-count-wrapper {
      display: none;
    }

    .facets-block-wrapper--horizontal.facets--desktop-drawer .facets-desktop-toggle,
    .facets.facets-controls-wrapper.facets--desktop-drawer .facets-desktop-toggle {
      margin-inline-start: auto;
    }

    /* Show the dedicated desktop trigger */
    .facets-desktop-toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    /* Allow the shared drawer to open on desktop */
    theme-drawer.facets-block-wrapper.facets--desktop-drawer {
      position: static;
      width: auto;
      height: auto;
    }
  }

  .facets-desktop-toggle__button {
    box-shadow: none;
  }
  /* Custom styles for filter chips */
  .facets-desktop-toggle button.button.facets-desktop-toggle__button.button-unstyled.button-unstyled--with-icon {
        font-weight: 400;
    text-transform: capitalize;
    font-size: 0.875rem;
  }
  scroll-hint.facets-drawer__filters summary {
    padding-block: 1rem;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-copyright (INDEX:166) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:167) */
/* Sana 2026 — inline policy links (Figma Policy pages 169:1027 / 227:1011) */
  .policy-list-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 0.75rem;
    margin: 0;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy-list-inline .sana-privacy-choice-icon {
    display: inline-block;
    width: 30px;
    height: 14px;
    margin-left: 4px;
    vertical-align: middle;
  }

  .policy-list-inline li {
    white-space: nowrap;
  }

  .policy-list-inline a {
    color: var(--color-utilities, var(--color-foreground-muted));
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  @media screen and (max-width: 749px) {
    .policy-list-inline {
      gap: 1rem; /* 16 */
      justify-content: center;
    }
  }

  .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:group (INDEX:169) */
/* "Sticky on desktop" reuses the class base.css already styles for the PDP details
     column (`.sticky-content--desktop`), but a group needs four things of its own:
     - base.css's `.group-block { position: relative }` has the same specificity and later
       source order, so it silently beats that rule's `position: sticky`. Restate the
       position here at two-class specificity;
     - nothing sets --sticky-header-offset outside the PDP, so mirror
       product-information-content.liquid and park the group under the sticky header;
     - a flex row stretches every child to the tallest sibling, leaving a sticky group no
       room to travel, so it must align to the start;
     - a section that clips its content does so with overflow: hidden, which turns the
       wrapper into a scroll container the group would stick to instead of the page.
       clip crops the same way without that side effect, so swap it in around a sticky group. */
  @media screen and (min-width: 750px) {
    .group-block.sticky-content--desktop {
      position: sticky;
      top: var(--sticky-header-offset, 0);
      z-index: var(--layer-flat);
      align-self: flex-start;
    }

    body:has(#header-group #header-component[data-sticky-state='active']) .group-block.sticky-content--desktop {
      --sticky-header-offset: var(--header-height);
    }

    .section-content-wrapper--clip:has(.group-block.sticky-content--desktop) {
      overflow: clip;
    }
  }
/* END_BLOCK:group */

/* START_BLOCK:icon (INDEX:171) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
    width: var(--width);
  }
  @media only screen and (max-width: 749px) {
    .icon-block__media {
      width: var(--mobile-width);
    }
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:172) */
.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: var(--object-fit, cover);
    aspect-ratio: var(--ratio);
  }

  /*
   * Corner notch: cuts a rounded tab out of the image's top-right corner via
   * mask compositing (union of two rounded rectangles plus an inverted-radius
   * fillet at the inner corner). Sized by --notch-w/--notch-h/--notch-r, set
   * per block instance. An optional icon centers inside the cut-out.
   */
  .image-block--notched {
    position: relative;
  }

  .image-block--notch-top-right :is(.image-block__image, .placeholder-image) {
    mask:
      linear-gradient(#000 0 0) 0 0 / calc(100% - var(--notch-w) - var(--notch-r)) 100% no-repeat,
      linear-gradient(#000 0 0) 0 var(--notch-r) / calc(100% - var(--notch-w)) calc(100% - var(--notch-r)) no-repeat,
      radial-gradient(circle var(--notch-r) at 0 100%, #000 calc(100% - 0.5px), transparent 100%) calc(100% - var(--notch-w)) 0 / var(--notch-r) var(--notch-r) no-repeat,
      linear-gradient(#000 0 0) 0 var(--notch-h) / calc(100% - var(--notch-r)) calc(100% - var(--notch-h)) no-repeat,
      linear-gradient(#000 0 0) 0 calc(var(--notch-h) + var(--notch-r)) / 100% calc(100% - var(--notch-h) - var(--notch-r)) no-repeat,
      radial-gradient(circle var(--notch-r) at 0 100%, #000 calc(100% - 0.5px), transparent 100%) 100% var(--notch-h) / var(--notch-r) var(--notch-r) no-repeat,
      radial-gradient(circle var(--notch-r) at 100% 0, transparent calc(100% - 0.5px), #000 100%) calc(100% - var(--notch-w) + var(--notch-r)) calc(var(--notch-h) - var(--notch-r)) / var(--notch-r) var(--notch-r) no-repeat;
  }

  .image-block--notch-top-right .image-block__notch-icon {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: var(--notch-w);
    height: var(--notch-h);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .image-block__notch-icon img {
    width: var(--notch-icon-w);
    height: auto;
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:174) */
.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:media-tile (INDEX:175) */
.media-tile {
    position: relative;
    display: block;
    overflow: hidden;
    /* Body/description/button inherit the parent section's foreground color
       unless the block-level text color is explicitly set. */
    color: var(--media-tile-text-color, var(--color-foreground));
    text-decoration: none;
    isolation: isolate;
    width: 100%;
  }

  .media-tile--height-image_ratio {
    aspect-ratio: var(--media-tile-aspect-ratio, 1.5);
    height: auto;
  }

  .media-tile--height-custom {
    height: var(--media-tile-height, 50svh);
  }

  .media-tile--height-fill {
    height: 100%;
    min-height: 300px;
  }

  .media-tile__image {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .media-tile__image img,
  .media-tile__image svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /*
    Base overlay: transparent at the top, fading to `overlay-color` at the 69.6% stop
    (matching the spec'd `linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 69.6%)`).
    The whole layer's opacity is then driven by --media-tile-overlay-opacity,
    so an opacity of 100% yields exactly that 30% black at the gradient's lower stop.
  */
  .media-tile__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
  }

  .media-tile:hover .media-tile__overlay,
  .media-tile:focus-visible .media-tile__overlay {
    background: rgba(0, 0, 0, 0.4);
  }

  .media-tile__content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: var(--media-tile-padding, 1.5rem);
    display: flex;
    flex-direction: column;
    /* Heading sits at the bottom at rest. Description + button sit below it
       in the DOM and are shifted off the tile via the transform below. */
    justify-content: flex-end;
    gap: 1rem;
    transition: transform 0.3s ease;
  }

  .media-tile__heading {
    margin: 0;
    font-family: var(--font-heading--family, inherit);
    font-weight: var(--font-heading--weight, 700);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    /* Pull from the section's color scheme heading color unless the block
       explicitly overrides with a text color. */
    color: var(--media-tile-text-color, var(--color-foreground-heading));
  }

  .media-tile__description {
    max-width: 42ch;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .media-tile__button {
    align-self: flex-start;
  }

  /* Kept invisible at rest (even while clipped); fade in in lockstep with the
     content group's slide-up so they're only visible on hover. */
  .media-tile--reveal-on-hover .media-tile__description,
  .media-tile--reveal-on-hover .media-tile__button {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .media-tile--reveal-on-hover:hover .media-tile__description,
  .media-tile--reveal-on-hover:focus-within .media-tile__description,
  .media-tile--reveal-on-hover:hover .media-tile__button,
  .media-tile--reveal-on-hover:focus-within .media-tile__button {
    opacity: 1;
  }

  /*
    At rest, push the whole content group DOWN by --media-tile-reveal-offset.
    That puts the heading at the bottom of the tile (with padding) and parks
    the description + button below the tile edge, clipped by overflow: hidden
    on the outer .media-tile element. On hover, translate returns to 0 — the
    whole group slides up as one, revealing description + button below the
    (now higher) heading.

    --media-tile-reveal-offset defaults to 7rem. Override per-instance via
    the block's inline style if the description is much longer/shorter than
    ~2 lines of text plus a single-line button.
  */
  .media-tile--reveal-on-hover .media-tile__content {
    transform: translateY(var(--media-tile-reveal-offset, 4.25rem));
  }

  .media-tile--reveal-on-hover:hover .media-tile__content,
  .media-tile--reveal-on-hover:focus-within .media-tile__content {
    transform: translateY(0);
  }

  /*
    Mobile has no hover, so show the revealed state by default. Matches the
    :hover end-state above (content slid up, description + button visible)
    without animating, and swaps in the mobile-specific image when one is set.
  */
  .media-tile__image-mobile {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .media-tile--height-image_ratio {
      aspect-ratio: var(--media-tile-aspect-ratio-mobile, var(--media-tile-aspect-ratio, 1.5));
    }

    .media-tile--reveal-on-hover .media-tile__content {
      transform: translateY(0);
    }

    .media-tile--reveal-on-hover .media-tile__description,
    .media-tile--reveal-on-hover .media-tile__button {
      opacity: 1;
    }

    .media-tile__image:has(.media-tile__image-mobile) .media-tile__image-desktop {
      display: none;
    }

    .media-tile__image-mobile {
      display: block;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .media-tile__overlay,
    .media-tile__content {
      transition: none;
    }
  }
/* END_BLOCK:media-tile */

/* START_BLOCK:menu (INDEX:176) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    --spacing--size: 0.25rem;
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    --spacing--size: 1rem;
    margin-block-start: var(--spacing--size);
    margin-block-end: 0.5rem;
  }

  /* A menu item whose destination is not live yet renders as text, not a link. */
  .menu__link--disabled {
    cursor: default;
    opacity: var(--opacity-subdued-text);
  }

  .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:offset-media-card (INDEX:177) */
.offset-media-card {
    width: 100%;
  }

  /* The overhang lives here as padding, not as a top margin on the card: a margin on the
     first in-flow child collapses straight through this box, which left the card flush with
     the stage top and the stage short by the overhang. Padding cannot collapse. The image is
     absolutely positioned, so its `top: 0` still resolves to the top of this padding box. */
  .offset-media-card__stage {
    position: relative;
    width: 100%;
    padding-block-start: var(--omc-overhang);
  }

  /* The card stays in flow so its height tracks its nested blocks. */
  .offset-media-card__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--omc-card-gap);
    width: var(--omc-card-width);
    min-height: var(--omc-card-min-height);
    margin-inline: auto;
    padding: var(--omc-card-padding);
    border: var(--omc-border-width) solid var(--omc-border-color);
    border-radius: var(--omc-card-radius);
    background: var(--omc-card-background);
  }

  .offset-media-card__media {
    position: absolute;
    inset-block-start: 0;
    width: var(--omc-media-width);
    aspect-ratio: var(--omc-media-ratio);
    border-radius: var(--omc-media-radius);
    box-shadow: var(--omc-media-shadow, none);
    overflow: hidden;
  }

  .offset-media-card__media--right {
    inset-inline-end: 0;
  }

  .offset-media-card__media--left {
    inset-inline-start: 0;
  }

  .offset-media-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .offset-media-card__glyph {
    position: absolute;
    inset-block-start: calc(var(--omc-overhang) + var(--omc-glyph-offset-y));
    display: flex;
    color: var(--omc-glyph-color, currentcolor);
  }

  .offset-media-card__glyph--left {
    inset-inline-start: 0;
  }

  .offset-media-card__glyph--right {
    inset-inline-end: 0;
  }

  /* icon-or-image's SVG branch hard-codes width/height as HTML attributes and never sets
     --width/--mobile-width (those exist only on its uploaded-image branch), so the mobile size
     has to come from our own vars — and they must win over the attribute, hence CSS width. */
  .offset-media-card__glyph-media {
    display: block;
    width: var(--omc-glyph-width);
    height: auto;
  }

  @media screen and (max-width: 749px) {
    .offset-media-card__stage {
      padding-block-start: var(--omc-overhang-mobile);
    }

    .offset-media-card__card {
      width: var(--omc-card-width-mobile);
      min-height: var(--omc-card-min-height-mobile);
      padding: var(--omc-card-padding-mobile);
      border-radius: var(--omc-card-radius-mobile);
    }

    .offset-media-card__media {
      width: var(--omc-media-width-mobile);
      border-radius: var(--omc-media-radius-mobile);
    }

    .offset-media-card__glyph {
      inset-block-start: calc(var(--omc-overhang-mobile) + var(--omc-glyph-offset-y));
    }

    .offset-media-card__glyph-media {
      width: var(--omc-glyph-width-mobile);
    }
  }
/* END_BLOCK:offset-media-card */

/* START_BLOCK:page-content (INDEX:178) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:179) */
.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:180) */
.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:181) */
.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:price (INDEX:182) */
.product-price--low-as,
  .product-price__low-container { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .product-price--low-as .product-price__low-label { margin: 0; color: #064c4d; font-size: 16px; font-weight: 600; line-height: 1.5; }
  .product-price__low-values { display: flex; flex-wrap: wrap; gap: 8px; }
  .product-price__low-values span { padding: 6px 12px; border-radius: 8px; color: #064c4d; background: #d6faf2; font-size: 18px; font-weight: 600; line-height: 1.25; }
  .product-price__quote-label { display: block; margin-bottom: 4px; color: #064c4d; font-size: 16px; font-weight: 600; line-height: 1.5; }
  .product-price__tier-link { color: #6c8283; font-size: 14px; font-weight: 500; line-height: 1.5; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* END_BLOCK:price */

/* START_BLOCK:product-custom-property (INDEX:184) */
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:187) */
.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-price-table (INDEX:188) */
.product-price-table {
    width: 100%;
  }
/* END_BLOCK:product-price-table */

/* START_BLOCK:product-quick-add (INDEX:189) */
.product-quick-add-block {
    width: 100%;
  }

  .product-quick-add-block .quick-add {
    position: static;
    inset: auto;
    pointer-events: auto;
  }

  .product-quick-add-block .quick-add__product-form-component .shopify-product-form {
    justify-content: stretch;
    align-items: stretch;
    height: auto;
  }

  .product-quick-add-block .quick-add__button {
    --button-size-md: 3.1875rem;
    position: static;
    opacity: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    height: var(--button-size-md);
  }

  .product-quick-add-block .quick-add__button .add-to-cart-text {
    background: transparent;
    height: auto;
  }

  .product-quick-add-block .quick-add__button .add-to-cart-text__content {
    grid-template-columns: 1fr;
  }

  .product-quick-add-block .quick-add__button .add-to-cart-text__content span span {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    padding-right: 0;
  }

  .product-quick-add-block .quick-add__button:is(:hover, :focus-visible) {
    scale: 1;
  }

  /* Restore the hide-the-wrong-button rules from base.css, which our block-scoped
     display: flex above would otherwise override (equal specificity, later source order). */
  .product-quick-add-block [data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  .product-quick-add-block [data-quick-add-button='add'] .quick-add__button--choose {
    display: none;
  }

  /* Make the visible "Add" button stretch like the "Choose" button does. */
  .product-quick-add-block [data-quick-add-button='add'] add-to-cart-component,
  .product-quick-add-block [data-quick-add-button='add'] add-to-cart-component .quick-add__button--add {
    width: 100%;
  }
/* END_BLOCK:product-quick-add */

/* START_BLOCK:product-recommendations (INDEX:190) */
.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;
  }

  .product-recommendations--pairs {
    /* How far the carousel bleeds into the container padding so the cards' drop shadow
       falls inside the scroller's clip — see the slideshow-slides note below. Kept under
       the 20px padding, so the bleed stays inside the sand panel. */
    --pairs-bleed: 16px;
  }

  .product-recommendations--pairs .block-resource-list {
    gap: 16px;
    padding: 20px;
    /* base.css puts `border: 1px solid var(--color-border, currentColor)` on every direct
       child of .product-recommendations. The design has no rule around the panel — the sand
       fill is the whole edge — and with no --color-border set the fallback drew the panel's
       own teal text colour as a hairline box. */
    border: 0;
    border-radius: 16px;
    color: #064c4d;
    background: #f7f1eb;
  }

  .product-recommendations--pairs .section-resource-list__content {
    padding-block: 8px;
    border-bottom: 1px solid #e6d7c3;
  }

  .product-recommendations--pairs .section-resource-list__content :is(h2, h3, p) {
    margin: 0;
    color: #064c4d;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
  }

  /*
    Pre-hydration placeholder. Recommendations are fetched client-side, so this is what the
    block reserves on first paint — and on the theme's own rules it reserved wildly too much.
    .resource-list--grid asks for `grid-template-columns: var(--resource-list-columns)` above
    750px and nothing in the theme ever defines that variable, so the declaration is invalid
    at computed-value time and the grid falls back to a single column. Four placeholders at
    `aspect-ratio: 3 / 4` and full container width stacked to several thousand pixels, then
    the block collapsed the moment the fetch landed.

    Mirror what the carousel actually settles into: the two cards of one slide, each the
    109px media plus 12px of padding at top and bottom, 16px apart.
  */
  .product-recommendations--pairs .resource-list--grid { display: flex; flex-direction: column; gap: 16px; }
  .product-recommendations--pairs .product-recommendations__skeleton-item { aspect-ratio: auto; height: 133px; border-radius: 16px; }
  /* The block renders max_products placeholders, but a slide only ever shows two. The second
     rule is what beats base.css's own mobile placeholder rule, which hides every odd child
     and would otherwise leave a lone card here. */
  .product-recommendations--pairs .product-recommendations__skeleton-item:nth-child(n + 3) { display: none; }
  .product-recommendations--pairs .product-recommendations__skeleton-item:nth-child(-n + 2) { display: block; }

  /*
    slideshow-slides is a scroll container, so it clips at its own edges on both axes. The
    card's shadow is offset 4px to the right and blurred 10px, and the slide is exactly as
    wide as the scroller — so the entire right-hand side of the shadow was cut off, and the
    only part left was the band the theme's `padding-block: 16px` had already made room for.
    That surviving band is the straight line the shadow read as.

    Bleed the carousel into the container's 20px padding and give the same width back as
    slide padding: the card lands exactly where it did before, now with room on either side
    for the shadow to fall inside the clip. The padding goes on the slide rather than on the
    scroller deliberately — scrolling.js measures slides against the scroller's border box
    and ignores scroll-padding, so padding there would offset every arrow click by the bleed.
  */
  /* `width: auto` is load-bearing: .resource-list pins `width: 100%`, and an explicit width
     means the negative margins would slide the carousel sideways instead of widening it.
     Auto lets it stretch to the container less its (negative) margins, i.e. 32px wider. */
  .product-recommendations--pairs .resource-list--carousel { width: auto; margin-inline: calc(var(--pairs-bleed) * -1); }

  .product-recommendations--pairs .resource-list__carousel slideshow-slides { gap: 16px; }
  .product-recommendations--pairs .resource-list__carousel .resource-list__slide { --slide-width: 100%; width: 100%; height: auto; max-width: none; max-height: none; display: flex; flex: 0 0 100%; flex-direction: column; gap: 16px; padding-inline: var(--pairs-bleed); overflow: visible; contain: none; content-visibility: visible; }
  /* Each slide stacks two cards. The carousel stretches every item to the full slide
     height, so two items summed to twice the slide and the second one spilled out,
     leaving a tall empty band under the first card. */
  .product-recommendations--pairs .resource-list__slide > .resource-list__item { width: 100%; flex: 0 0 auto; height: auto; min-height: 0; }
  /* The arrows are absolutely positioned against the carousel but need to sit in the
     header row above it. The carousel starts 76px below the container top and the heading's
     centre line is at 39.5px, so a 30px control centres on it at -51.5px. */
  .product-recommendations--pairs .resource-list__carousel slideshow-arrows { inset: -51.5px var(--pairs-bleed) auto auto; z-index: 3; align-items: center; justify-content: flex-end; gap: 10px; padding: 0; mix-blend-mode: normal; pointer-events: none; }
  /* The control is a flex box with default (normal) alignment, so the 20px glyph sat in the
     top-right of the 30px circle instead of its centre. */
  .product-recommendations--pairs .resource-list__carousel slideshow-arrows .slideshow-control { display: flex; align-items: center; justify-content: center; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border: 1px solid #064c4d; border-radius: 50%; color: #064c4d; opacity: 1; pointer-events: auto; }
  .product-recommendations--pairs .resource-list__carousel slideshow-arrows .slideshow-control svg { display: block; margin: 0; }
  .product-recommendations--pairs .resource-list__carousel slideshow-arrows .slideshow-control[disabled] { display: flex; opacity: .35; }

  /*
    These arrows are not the theme's overlay controls. They sit in the header row and are
    always visible, so the two behaviours base.css gives overlay arrows both read as flicker
    here: `arrowsSlideIn` restarts from opacity 0 and 8px of travel every time the pointer
    enters the carousel, and a drag hides them outright even though they are nowhere near
    the track being dragged.

    The animation cannot be outweighed by declaring opacity again — animated values beat
    normal declarations whatever their specificity — so it has to be switched off, and the
    selector has to outrank base.css's own (0,4,4).
  */
  .product-recommendations--pairs .resource-list .resource-list__carousel :is(slideshow-component:hover, slideshow-component:focus-within) slideshow-arrows .slideshow-control { animation: none; }
  .product-recommendations--pairs .resource-list__carousel slideshow-component[dragging] slideshow-arrows { display: flex; }

  .pairs-card {
    display: grid;
    grid-template-columns: 87px minmax(0, 1fr) 148px;
    align-items: center;
    gap: 24px;
    padding: 12px 14px;
    border-radius: 16px;
    color: #064c4d;
    background: #fff;
    /* Figma 2123:458 — a drop shadow, so `filter` rather than `box-shadow`: it follows the
       16px corner radius instead of the border box. Whichever is used, it only reads as a
       shadow if the scroller around it has room to paint — see --pairs-bleed above. */
    filter: drop-shadow(4px 4px 10px rgb(0 0 0 / .12));
  }

  .pairs-card__media { display: block; width: 87px; height: 109px; overflow: hidden; border-radius: 8px; background: #f7f1eb; }
  .pairs-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .pairs-card__details { display: flex; align-self: stretch; flex-direction: column; justify-content: space-between; min-width: 0; }
  .pairs-card__details h3 { margin: 0; padding-left: 4px; font-size: 18px; font-weight: 600; line-height: 1.25; }
  .pairs-card__details h3 a { color: inherit; text-decoration: none; }
  .pairs-card__prices { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 8px 16px; border-radius: 12px; background: #f0fdfa; font-size: 14px; line-height: 1.5; }
  .pairs-card__prices div { display: flex; justify-content: space-between; gap: 12px; }
  .pairs-card__prices dd { margin: 0; }
  .pairs-card__actions { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
  .pairs-card__actions .quick-add { position: static; inset: auto; width: 100%; pointer-events: auto; }
  .pairs-card__actions product-form-component, .pairs-card__actions form { width: 100%; height: auto; }
  .pairs-card__actions .quick-add__product-form-component .shopify-product-form { display: block; height: auto; }
  /* nowrap + tighter inline padding: "View Product" plus its arrow does not fit on one
     line inside the 148px action column at 20px padding, and was breaking in two.

     `relative` with auto insets, not `static`: it lays out identically in flow — which is all
     that was wanted, to undo quick-add's absolute positioning — but it also keeps the button
     as the containing block for the theme's hover fill, an absolutely positioned ::before.
     `filter` on .pairs-card makes the card itself a containing block, so a static button
     would have handed the fill the whole card to size against. */
  .pairs-card__actions .quick-add__button, .pairs-card__view { position: relative; inset: auto; display: flex; width: 100%; min-height: 38px; height: 38px; padding: 10px 12px; border-radius: 80px; opacity: 1; font-size: 14px; font-weight: 600; line-height: normal; letter-spacing: .02em; white-space: nowrap; scale: 1; transform: none; translate: none; }
  /* Figma 2144:546 draws this pill as a flat teal fill with no ring, but the theme's primary
     button token puts a 1.6px rgba(0,0,0,.15) border on it. Besides being a stray dark edge
     on a dark pill, the border is what the hover fill stops at — an absolutely positioned
     ::before sizes to the padding box — so it left a teal crescent around the cap that the
     wipe could never reach. */
  .pairs-card__actions .quick-add__button { --button-fill-color: #fff; --button-fill-under: #064c4d; border: 0; color: #fff; background: #064c4d; }
  /* The quote / RFQ link stands in for the Add pill with its label as the only child: centre
     it the way the pill centres its inner .add-to-cart-text, with no trailing plus. */
  .pairs-card__actions .purchase-cta { align-items: center; justify-content: center; text-decoration: none; }
  .pairs-card__actions [data-quick-add-button='add'] .quick-add__button--choose { display: none; }
  .pairs-card__actions .quick-add__button .add-to-cart-text { width: 100%; justify-content: center; color: #fff; background: transparent; }
  .pairs-card__actions .quick-add__button .add-to-cart-text::after { content: '+'; margin-inline-start: 10px; font-size: 18px; font-weight: 400; line-height: 1; }
  /* quick-add.liquid hard-codes icon_only_on_mobile, which tags the label
     .is-visually-hidden-mobile and lets base.css clip it away under 750px — leaving this pill
     showing a bare "+", because the plus is an ::after on the parent and escapes the clip.
     The design carries the label at every width, so undo the clip. `position` has to come
     back !important because that is how base.css sets it. */
  .pairs-card__actions .quick-add__button .add-to-cart-text__content { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; grid-template-columns: 1fr; }
  .pairs-card__actions .quick-add__button .add-to-cart-text__content > span > span { padding: 0; opacity: 1; filter: none; translate: 0 0; }
  /* The checkmark burst is authored for the 48px PDP button and ships in a 32px box, which
     inside this 38px pill left its rays crossing the button's own `overflow: hidden` and
     tearing. Same size-down the Related Products pill uses: base.css caps every svg at
     max-width: 100%, so bringing the wrapper in brings the 30px glyph with it.

     The burst is absolutely positioned and centred on its containing block, so it was also
     landing in the middle of the whole card until the button became `position: relative`
     above — `filter` on .pairs-card had been acting as the containing block. */
  .pairs-card__actions .quick-add__button .add-to-cart__added-icon { width: 24px; height: 24px; }
  /*
    quick-add-styles reuses ::before on this button as a "hover stabiliser" — an invisible box
    at `inset: -10px` that widens the hit area of the quick-add badge floating over a product
    card. base.css uses that same ::before for the button fill, so on hover the stabiliser's
    offsets replaced the fill's own: `left: -10px` against the fill's `width: 100%` leaves the
    box over-constrained, the inline-end offset is dropped, and the fill ends up sitting 10px
    to the left of the pill. The last 10px of the right cap therefore never got painted, which
    is the crescent the wipe appeared to stop short of. Only the 3-column card showed it — the
    narrow card stacks the actions, where the pill is wide enough for 10px to read as a sliver.

    Restoring base.css's offsets costs nothing: the stabiliser is for a floating badge, and
    base.css marks this pseudo pointer-events: none, so it was never a hit area here.

    The 1.03 hover scale goes for the same reason `scale: 1` is set above — also a floating
    badge affordance, and here it only made the Add pill wider than the View Product pill
    directly beneath it.
  */
  .pairs-card__actions .quick-add__button:hover::before { inset-block: auto -100%; inset-inline: 0 auto; }
  .pairs-card__actions .quick-add__button:hover { scale: 1; }

  .pairs-card__view { --button-fill-color: #064c4d; --button-fill-under: #fff; align-items: center; justify-content: center; gap: 10px; border: 1px solid #064c4d; color: #064c4d; background: #fff; text-decoration: none; }
  .pairs-card__view svg { width: 10px; height: 10px; --stroke-0: #064c4d; }

  /*
    Hover. The theme wipes an elliptical fill up over any .button / .button-secondary and
    swaps --button-color underneath it, but both buttons above pin `color` and `background`
    directly, so neither half of that contract reached them. The label kept its resting
    colour; the fill painted --color-primary/secondary-button-hover-background, whatever the
    merchant's global button settings happen to be; and the button's own background jumped
    to the theme's colour on hover, because base.css holds it at --button-fill-under at
    (0,3,0) and the rules above are only (0,2,0).

    So the fill variables are set here too, each next to the background it mirrors — which is
    what base.css asks of any button that styles itself rather than inheriting the palette.
    The pair trades places on hover: the solid pill wipes white and its label goes teal, the
    outline pill wipes teal and its label goes white. Same move .related-card__atc makes in
    the Related Products section.
  */
  .pairs-card__actions .quick-add__button:is(:hover, :focus-visible),
  .pairs-card__actions .quick-add__button:is(:hover, :focus-visible) .add-to-cart-text,
  .pairs-card__actions .quick-add__button:is(:hover, :focus-visible) .add-to-cart-text__content > span > span { color: #064c4d; opacity: 1; filter: none; translate: 0 0; }

  /*
    The hovered pill is white on a white card, so it needs an edge — and without one drawn on
    purpose it grew a stray one. The button paints its teal background and the white fill
    paints over it, but both are clipped by the same `overflow: hidden` pill, and each is
    antialiased against it separately: along the cap the two partial coverages composite into
    a faint teal fringe, thinner and lighter than any border anyone chose.

    Drawing the ring deliberately covers that seam and finishes the trade with
    .pairs-card__view, which lands on this exact edge going the other way (its own 1px border
    is what hides the same seam on the outline pill).

    `outline`, because that is how base.css draws a button's ring — which is also why the
    `border: 0` above never removed one. It paints above the fill, so the ring stays crisp
    through the wipe, and it inherits the `outline` transition base.css already declares. The
    negative offset pulls it inside the border box: base.css would compute 0 here, which
    would hang the ring outside the pill and leave it 2px wider than the View Product pill
    directly beneath it.
  */
  .pairs-card__actions .quick-add__button:is(:hover, :focus-visible) {
    --button-border-width: 1px;
    --button-border-color: #064c4d;

    outline-offset: -1px;
  }

  .pairs-card__view:is(:hover, :focus-visible) { color: #fff; border-color: #064c4d; }
  .pairs-card__view:is(:hover, :focus-visible) svg { --stroke-0: #fff; }

  /*
    Added state. The burst starts the instant the button flips, but quick-add-styles fades the
    label out over 125ms underneath it — so for the first eighth of a second the ring pops
    through the middle of the word, which reads as a rendering fault rather than a transition.
    The label leaves outright instead, clearing the pill before the burst's first frame.

    Three things have to be cleared for that to hold. `animation`, because an animation's own
    values outrank a normal declaration — opacity alone would be overwritten by atc-fade-out's
    for all 125ms of it. `transition`, because the label carries one and would otherwise ramp
    to 0 over its duration, which is the same overlap in a different costume. And this rule
    has to sit *below* the hover block: adding to cart leaves the pointer on the pill, and the
    hover rule pins .add-to-cart-text to opacity 1 at exactly the same specificity — a tie that
    source order, not the cascade, decides.
  */
  .pairs-card__actions .quick-add__button[data-added='true'] .add-to-cart-text {
    animation: none;
    transition: none;
    opacity: 0;
  }

  @container resource-list (max-width: 520px) {
    .product-recommendations--pairs .block-resource-list { padding: 20px; }
    .pairs-card { grid-template-columns: 87px minmax(0, 1fr); gap: 16px 24px; padding: 12px 14px; }
    .pairs-card__media { width: 87px; height: 109px; }
    .pairs-card__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
    .pairs-card__details { justify-content: center; gap: 8px; }
    .pairs-card__details h3 { font-size: 18px; }
    .pairs-card__prices { padding: 8px 16px; }
    /* The actions drop to their own row here, so the placeholder grows by that row and the
       16px above it: 12 + 109 + 16 + 38 + 12. */
    .product-recommendations--pairs .product-recommendations__skeleton-item { height: 187px; }
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:product-specs-table (INDEX:191) */
.product-specs-table {
    width: 100%;
  }
/* END_BLOCK:product-specs-table */

/* START_BLOCK:product-template-downloads (INDEX:192) */
.template-downloads {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    padding: 20px;
    border-radius: 16px;
    color: #064c4d;
    background: #f0fdfa;
  }

  /* Body/Default/Medium — 16/500/1.5. */
  .template-downloads__heading {
    width: 100%;
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }

  .template-downloads__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  /* Figma "Button/Primary SM" outline — UI/Button/Small on an 80px pill. */
  .template-downloads__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 38px;
    padding-inline: 20px;
    border: 1px solid #064c4d;
    border-radius: 80px;
    color: #064c4d;
    background: transparent;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition:
      color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
  }

  .template-downloads__button:is(:hover, :focus-visible) {
    color: #fff;
    background: #064c4d;
  }

  .template-downloads__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
  }

  .template-downloads__icon svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  @media screen and (max-width: 749px) {
    .template-downloads__actions {
      flex-direction: column;
      width: 100%;
    }

    .template-downloads__button {
      width: 100%;
    }
  }
/* END_BLOCK:product-template-downloads */

/* START_BLOCK:product-weight-dimensions (INDEX:195) */
.product-weight-dimensions {
    display: block;
    width: 100%;
  }

  .product-weight-dimensions__list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--row-gap, 16px);
  }

  .product-weight-dimensions__row {
    display: flex;
    flex-direction: column;
    gap: var(--padding-2xs, 4px);
    padding-block-end: var(--row-gap, 16px);
    border-block-end: var(--style-border-width, 1px) solid var(--color-border);
  }

  .product-weight-dimensions__row:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }

  .product-weight-dimensions__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
  }

  .product-weight-dimensions__value {
    margin: 0;
    opacity: 0.85;
  }
/* END_BLOCK:product-weight-dimensions */

/* START_BLOCK:review (INDEX:197) */
.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:200) */
.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__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-links */

/* START_BLOCK:spacer (INDEX:201) */
/* 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;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:202) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:tabs (INDEX:203) */
.product-tabs {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .product-tabs__nav {
    display: flex;
    align-items: stretch;
    gap: var(--tab-gap, 24px);
    border-block-end: var(--style-border-width, 1px) solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .product-tabs__nav::-webkit-scrollbar {
    display: none;
  }

  .product-tabs[data-tabs-alignment='center'] .product-tabs__nav {
    justify-content: center;
  }

  .product-tabs[data-tabs-alignment='end'] .product-tabs__nav {
    justify-content: flex-end;
  }

  .product-tabs__tab {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    margin: 0;
    padding: 0.5rem;
    font-family: var(--tab-font-family);
    font-style: var(--tab-font-style);
    font-weight: var(--tab-font-weight);
    font-size: var(--tab-font-size);
    line-height: var(--tab-font-line-height);
    text-transform: var(--tab-font-case);
    color: var(--color-foreground);
    opacity: 0.55;
    border-block-end: 2px solid transparent;
    transform: translateY(var(--style-border-width, 1px));
    transition:
      opacity var(--animation-speed, 0.2s) ease,
      border-color var(--animation-speed, 0.2s) ease;
    white-space: nowrap;
  }

  .product-tabs__tab:hover,
  .product-tabs__tab:focus-visible {
    opacity: 1;
  }

  .product-tabs__tab[aria-selected='true'] {
    opacity: 1;
    border-block-end-color: currentColor;
  }

  .product-tabs__panels {
    padding-block-start: var(--tab-content-padding-top, 16px);
  }

  @media screen and (max-width: 749px) {
    .product-tabs__tab {
      font-size: var(--tab-font-size-mobile, var(--tab-font-size));
    }
  }

  /* Pre-hydration: hide every panel except the first to avoid flash */
  .product-tabs:not([data-hydrated]) > .product-tabs__panels > .product-tabs__panel ~ .product-tabs__panel {
    display: none;
  }

  /* Post-hydration: visibility driven by the [hidden] attribute */
  .product-tabs[data-hydrated] > .product-tabs__panels > .product-tabs__panel[hidden] {
    display: none;
  }
/* END_BLOCK:tabs */

/* START_BLOCK:video (INDEX:206) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }

  /*
    Apply the aspect ratio to the <deferred-media> container itself, not
    only the inner img/video. base.css's .size-style sets height: 100%,
    which would otherwise win over aspect-ratio — height: auto lets the
    ratio drive the container height.
  */
  deferred-media[style*='--size-style-aspect-ratio'] {
    aspect-ratio: var(--size-style-aspect-ratio, auto);
    height: auto;
  }

  /* Cover-fit any video/image content inside the block so a forced
     aspect ratio fills the box without letterboxing. */
  deferred-media video,
  deferred-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Mobile aspect-ratio override. Inline style on <deferred-media> sets
     --size-style-aspect-ratio, so we need !important to rebind it for
     mobile — every existing rule reading the var then picks up the
     mobile value automatically. */
  @media screen and (max-width: 749px) {
    deferred-media[style*='--size-style-aspect-ratio-mobile'] {
      --size-style-aspect-ratio: var(--size-style-aspect-ratio-mobile) !important;
    }
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:207) */
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:208) */
.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: none;
  }

  .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:background-media (INDEX:210) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }

  .background-image-container:has(.background-image-mobile) .background-image-desktop {
    display: block;
  }

  .background-image-container .background-image-mobile {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .background-image-container:has(.background-image-mobile) .background-image-desktop {
      display: none;
    }

    .background-image-container .background-image-mobile {
      display: block;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:211) */
.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:213) */
.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:bundle-bar (INDEX:217) */
.bundle-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--layer-overlay, 80);
    box-shadow: 0 -2px 16px rgb(0 0 0 / 0.08);
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    background-color: var(--color-background);
    color: var(--color-foreground);
    transform: translateY(0);
    transition: transform 0.25s var(--animation-easing, ease-out);
  }

  .bundle-bar[hidden] {
    display: none;
  }

  .bundle-bar__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    padding-inline: clamp(1rem, 3vw, 2rem);
    padding-block: 1rem;
    max-width: 1440px;
    margin-inline: auto;
  }

  .bundle-bar__heading {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .bundle-bar__title {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .bundle-bar__count {
    opacity: 0.7;
    font-weight: 500;
  }

  .bundle-bar__slots {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.75rem;
    min-width: 0;
  }

  .bundle-bar__slot {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border: 1px dashed rgb(var(--color-foreground-rgb) / 0.35);
    border-radius: var(--style-border-radius-popover, 4px);
    min-height: 4rem;
    background-color: rgb(var(--color-foreground-rgb) / 0.02);
    position: relative;
    overflow: hidden;
  }

  .bundle-bar__slot--filled {
    border-style: solid;
    border-color: rgb(var(--color-foreground-rgb) / 0.12);
    background-color: var(--color-background);
  }

  .bundle-bar__slot-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bundle-bar__plus {
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.4;
  }

  .bundle-bar__slot-image {
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    object-fit: cover;
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
    border-radius: 2px;
  }

  .bundle-bar__slot-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .bundle-bar__slot-title {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bundle-bar__slot-meta {
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bundle-bar__slot-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 0;
    background: rgb(var(--color-foreground-rgb) / 0.08);
    color: var(--color-foreground);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1;
    padding: 0;
  }

  .bundle-bar__slot-remove:hover {
    background: rgb(var(--color-foreground-rgb) / 0.16);
  }

  .bundle-bar__cta {
    white-space: nowrap;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
  }

  .bundle-bar__cta[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  @media screen and (max-width: 749px) {
    .bundle-bar__inner {
      grid-template-columns: 1fr;
      gap: 0.75rem;
      padding-block: 0.75rem;
    }

    .bundle-bar__heading {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .bundle-bar__slots {
      overflow-x: auto;
      scrollbar-width: none;
      grid-auto-columns: 9.5rem;
    }

    .bundle-bar__slots::-webkit-scrollbar {
      display: none;
    }

    .bundle-bar__cta {
      width: 100%;
    }
  }
/* END_SNIPPET:bundle-bar */

/* START_SNIPPET:buy-buttons-styles (INDEX:220) */
.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);
  }

  .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-paragraph--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:221) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .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:222) */
.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:223) */
.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-summary (INDEX:224) */
.cart-drawer-summary {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    width: 100%;
  }

  .cart-drawer-summary__discounts {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    color: var(--color-teal-800);
  }

  .cart-drawer-summary__discount {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-drawer-summary__discount-label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-drawer-summary__discount-label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  /* Figma 2001:1061 — tax note on the left, subtotal stack on the right. */
  .cart-drawer-summary__totals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    padding-block: 0.5rem; /* 8 */
    color: var(--color-teal-800);
  }

  .cart-drawer-summary__tax {
    max-width: 13.1875rem; /* 211 */
    font-family: var(--font-body--family);
    font-size: 1rem; /* 16 */
    font-weight: 400;
    line-height: 1.5;
  }

  .cart-drawer-summary__tax small {
    font-size: inherit;
  }

  .cart-drawer-summary__tax a {
    color: inherit;
    text-decoration-line: underline;
  }

  .cart-drawer-summary__subtotal {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    text-align: start;
  }

  .cart-drawer-summary__subtotal-label {
    font-family: var(--font-body--family);
    font-size: 1rem; /* 16 */
    font-weight: 400;
    line-height: 1.5;
  }

  .cart-drawer-summary__subtotal-value {
    font-family: var(--font-heading--family);
    font-size: 1.5rem; /* 24 */
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
  }

  .cart-drawer-summary__installments {
    color: var(--color-teal-800);
    font-size: var(--font-size--2xs);
  }

  /* Figma 2001:1066 — two equal pills side by side on desktop, stacked on mobile. */
  .cart-drawer-summary__ctas {
    display: flex;
    gap: 0.875rem; /* 14 */
    width: 100%;
  }

  /* Equal halves of the row, so both pills land on Figma's 222px. */
  .cart-drawer-summary__ctas > * {
    flex: 1 1 0;
    min-width: 0;
  }

  :is(.cart-drawer-summary__checkout, .cart-drawer-summary__view-cart) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem; /* 10 */
    width: 100%;
    height: auto;
    min-height: 0;
    padding-block: 0.875rem; /* 14 */
    padding-inline: 1.75rem; /* 28 */
    border-radius: 5rem; /* 80 */
    font-family: var(--font-heading--family);
    font-size: 1rem; /* 16 */
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--letter-spacing--002);
    text-align: center;
    text-decoration: none;
    box-shadow: none;
  }

  .cart-drawer-summary__checkout {
    background-color: var(--color-teal-800);
    color: var(--color-white);
    border: none;
  }

  .cart-drawer-summary__checkout:hover:not(:disabled) {
    background-color: var(--color-teal-700);
  }

  .cart-drawer-summary__view-cart {
    background-color: transparent;
    color: var(--color-teal-800);
    border: 1px solid var(--color-teal-800);
  }

  /* This button sets `color` directly rather than through --button-color, so the
     radial hover fill in base.css can't swap the text for it — without this the
     label would stay teal-800 against a teal-800 fill and vanish. The background
     is left to the fill; a tint here would sit under it and never be seen. */
  .cart-drawer-summary__view-cart:hover {
    color: var(--color-white);
  }

  .cart-drawer-summary__view-cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.9375rem; /* 15 */
    height: 0.9375rem; /* 15 */
    flex-shrink: 0;
  }

  .cart-drawer-summary__view-cart-icon svg {
    width: 100%;
    height: 100%;
  }

  @media screen and (max-width: 749px) {
    .cart-drawer-summary__tax {
      max-width: 10.625rem; /* 170 */
    }

    .cart-drawer-summary__subtotal-value {
      font-size: 1.125rem; /* 18 */
      line-height: 1.5;
    }

    .cart-drawer-summary__ctas {
      flex-direction: column;
      gap: 1rem; /* 16 */
    }

    /* Once the row is a column, `flex-basis: 0` would size the pills' height
       instead of their width and collapse them onto their own padding. */
    .cart-drawer-summary__ctas > * {
      flex: 0 0 auto;
      width: 100%;
    }
  }
/* END_SNIPPET:cart-drawer-summary */

/* START_SNIPPET:cart-drawer (INDEX:225) */
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;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .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;
    }
  }

  /* ================================================================
     Sana 2026 cart panel
     Figma: Sana_nav_dropdown_cart 2001:1012 (desktop)
            Sana_nav_mobile_dropdown_cart 2001:2132 (mobile)
     ================================================================ */

  /* The stock drawer squeezes the page: theme-drawer.liquid puts
     .page-wrapper--drawer-open on the wrapper, and assets/base.css margins the
     content in by the drawer width, which reflows the whole layout (the header
     narrows enough to collapse links into "More"). Figma floats the cart card
     over the page instead, so cancel the squeeze while the cart is the only
     open drawer — filters, chat and the rest still push. */
  body:has(#cart-drawer[open]):not(:has(theme-drawer[open]:not(#cart-drawer))) .page-wrapper--drawer-open {
    margin-right: 0;
  }

  #cart-drawer .theme-drawer__dialog {
    --theme-drawer-width: var(--nav-utility-width);

    /* Floating over the page instead of beside it means the panel now has to
       clear the sticky header, which sits at --layer-menu-drawer (18) while the
       stock drawer only reaches --layer-sticky (8) + its stack order. */
    z-index: calc(var(--layer-temporary) + var(--drawer-stack-order, 0));

    background-color: var(--nav-utility-background);
    border: none;
    border-radius: var(--nav-panel-radius);
    box-shadow: var(--nav-utility-shadow);

    @media screen and (max-width: 749px) {
      border-radius: 0;
      box-shadow: none;
    }
  }

  /* ── Panel scaffolding ─────────────────────────────────────────── */

  #cart-drawer {
    /* Figma 2001:1012 — the panel is a 16px-gap stack inside 32px gutters.
       At the 1440 desktop / 393 mobile anchors 1rem is exactly 16px, so every
       rem below renders as the literal Figma pixel value. */
    --cart-panel-gutter: var(--nav-panel-padding-inline);
    --cart-panel-gap: 1rem; /* 16 */
    --cart-panel-rule: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --cart-item-media-width: 6.25rem; /* 100 */
    --cart-item-media-ratio: 100 / 117;
    --cart-item-gap: 1.5rem; /* 24 */
    --cart-item-inset: 1.25rem; /* 20 */
    --cart-item-actions-width: 3.875rem; /* 62 */
    --cart-reco-media-width: 6.25rem; /* 100 */
    --cart-reco-media-height: 7.3125rem; /* 117 */
    --cart-reco-gap: 1.5rem; /* 24 */
    --cart-reco-padding: 1.25rem; /* 20 */
    --cart-reco-name-size: 1.125rem; /* 18 */
  }

  #cart-drawer :is(.cart-drawer__content, .cart-drawer__items, .cart-drawer__inner) {
    background-color: transparent;
  }

  /* The summary is sticky, so it needs the panel's own fill to hide the items
     scrolling beneath it rather than the transparent treatment above. */
  #cart-drawer .cart-drawer__summary {
    background-color: var(--nav-utility-background);
  }

  /* The gutter goes on each block, not on the scroller — the sticky summary is
     a child of `.cart-drawer__content`, so padding both would inset it twice
     and squeeze the checkout buttons. Keeping the scroller full-bleed also lets
     the summary's background span the whole panel as items scroll under it. */
  #cart-drawer .cart-drawer__content {
    padding-inline: 0;
  }

  #cart-drawer :is(.cart-drawer__items, .cart-drawer__summary) {
    padding-inline: var(--cart-panel-gutter);
  }

  /* Margin rather than padding, so the divider above the card is inset to the
     gutter instead of running the full width of the panel. */
  #cart-drawer .cart-drawer__recommendations {
    margin-inline: var(--cart-panel-gutter);
  }

  /* ── Header — Figma 2001:1015 / 2001:2133 ──────────────────────── */

  #cart-drawer .theme-drawer__header {
    /* 16 top spacer + 16 stack gap + the row's own 8 of padding. */
    padding-inline: var(--cart-panel-gutter);
    padding-block: 2.5rem 1.5rem;
    background-color: transparent;
    align-items: center;
    border-block-end: var(--cart-panel-rule);
  }

  #cart-drawer .theme-drawer__title,
  #cart-drawer .theme-drawer__close-button--text {
    font-family: var(--font-heading--family);
    font-size: var(--nav-link-size);
    font-weight: var(--nav-link-weight);
    line-height: var(--nav-link-line-height);
    letter-spacing: normal;
    color: var(--color-teal-800);
    margin: 0;
  }

  #cart-drawer .theme-drawer__close-button--text {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
  }

  #cart-drawer .theme-drawer__close-button--text:hover {
    color: var(--nav-panel-link-color-hover);
  }

  #cart-drawer .cart-drawer__close-glyph {
    display: none;
    width: 1.6875rem; /* 27 */
    height: 1.25rem; /* 20 */
  }

  #cart-drawer .cart-drawer__close-glyph svg {
    width: 100%;
    height: 100%;
  }

  /* ── Line items — Figma 2001:1019 / 2001:2141 ──────────────────── */

  /* Figma treats the panel as one column, so `.cart-drawer__content` is the
     only scroller. Leaving the stock nested scroller on the item list lets it
     shrink to nothing on short viewports once the summary and the
     recommendations card have taken their space. */
  #cart-drawer :is(.cart-drawer__items, .cart-drawer__recommendations, .cart-drawer__summary) {
    flex: 0 0 auto;
  }

  #cart-drawer .cart-drawer__items {
    padding-block-start: var(--cart-panel-gap);
    overflow: visible;
  }

  #cart-drawer .cart-drawer__items .cart-items,
  #cart-drawer .cart-drawer__items .cart-items__wrapper {
    --cart-items-gap: var(--cart-panel-gap);
  }

  #cart-drawer .cart-drawer__items .cart-items__table-row {
    display: flex;
    align-items: center;
    gap: var(--cart-item-gap);
    flex-wrap: wrap;
    padding-inline: var(--cart-item-inset);
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }

  #cart-drawer .cart-drawer__items .cart-items__table-row + .cart-items__table-row {
    padding-block-start: var(--cart-panel-gap);
    margin-block-start: var(--cart-panel-gap);
    border-block-start: var(--cart-panel-rule);
  }

  /* Bundle children belong to the line above them — no rule between the two. */
  #cart-drawer .cart-drawer__items .cart-items__nested-line {
    padding-block-start: 0;
    margin-block-start: var(--gap-sm);
    border-block-start: none;
  }

  #cart-drawer .cart-drawer__items .cart-items__media {
    flex: 0 0 var(--cart-item-media-width);
    width: var(--cart-item-media-width);
  }

  #cart-drawer .cart-drawer__items .cart-items__media-container {
    /* Overrides the inline `--ratio` the cart item sets from theme settings. */
    aspect-ratio: var(--cart-item-media-ratio);
    border-radius: 0.75rem; /* 12 */
  }

  #cart-drawer .cart-drawer__items .cart-items__media-image {
    border-radius: 0.75rem; /* 12 */
  }

  /* The stock drawer row hoists the detail cell's children into the grid with
     `display: contents`; the Figma column is a single stack, so put it back. */
  #cart-drawer .cart-drawer__items .cart-items__details {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem; /* 8 */
    min-width: 0;
    padding-block: 0.5rem; /* 8 */
    color: var(--color-teal-800);
  }

  #cart-drawer .cart-drawer__items .cart-items__details > * + * {
    margin-block-start: 0;
  }

  #cart-drawer .cart-drawer__items .cart-items__details * {
    font-size: 1rem; /* 16 */
    line-height: 1.5;
  }

  #cart-drawer .cart-drawer__items .cart-items__title {
    font-family: var(--font-heading--family);
    font-size: var(--nav-link-size); /* 18 */
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-teal-800);
  }

  #cart-drawer .cart-drawer__items :is(.cart-items__variants-wrapper, .cart-items__unit-price-wrapper) {
    font-size: 1rem;
  }

  /* Figma shows a single price under the variant, so the drawer drops the
     stock line-total column and keeps the per-item price in its place. */
  #cart-drawer .cart-drawer__items .cart-items__price {
    display: none;
  }

  /* ── Quantity + remove — Figma 2001:1027 ───────────────────────── */

  #cart-drawer .cart-drawer__items .cart-items__quantity {
    /* 62 in Figma, but let a three-digit quantity widen the column rather
       than spill the stepper out of it. */
    flex: 0 0 auto;
    min-width: var(--cart-item-actions-width);
    width: auto;
    margin-block-start: 0;
    padding-block: 0.5rem; /* 8 */
    justify-content: center;
  }

  #cart-drawer .cart-drawer__items .cart-items__quantity-controls {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* 8 */
    width: 100%;
  }

  #cart-drawer .cart-drawer__items .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: 0;
  }

  #cart-drawer .cart-drawer__items .quantity-selector-wrapper {
    justify-content: center;
    gap: 0.5rem;
  }

  #cart-drawer .cart-drawer__items .cart-items__error {
    flex: 1 0 100%;
    margin-block-start: 0;
  }

  /* ── Chevron stepper — Figma 2001:1028 / 2001:2150 ─────────────────
     A white 10px-radius pill holding the value beside a stacked up/down
     chevron pair. The markup order stays minus → input → plus for the
     component JS, so the grid puts plus on the top row and minus below.

     These live here rather than in `quantity-selector` because
     assets/base.css loads after the snippet stylesheets — the drawer's id
     selector is what lets the variant win against the base component. */

  #cart-drawer .cart-drawer__items .quantity-selector--chevron {
    --quantity-selector-width: auto;
    --quantity-stepper-chevron-width: 0.375rem; /* 6 */
    --quantity-stepper-chevron-height: 0.6875rem; /* 11 */

    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.875rem; /* 14 */
    row-gap: 0.625rem; /* 10 */
    flex: 0 0 auto;
    align-self: auto;
    width: fit-content;
    height: auto;
    padding-block: 0.625rem; /* 10 */
    padding-inline: 0.875rem; /* 14 */
    background-color: var(--color-white);
    border: none;
    border-radius: 0.625rem; /* 10 */
    color: var(--color-teal-800);
  }

  #cart-drawer .cart-drawer__items .quantity-selector--chevron input[type='number'] {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 2ch;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 0;
    font-family: var(--font-heading--family);
    font-size: var(--nav-link-size); /* 18 */
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: inherit;
    background-color: transparent;
  }

  @supports (field-sizing: content) {
    #cart-drawer .cart-drawer__items .quantity-selector--chevron input[type='number'] {
      field-sizing: content;
      width: auto;
      min-width: 1ch;
    }
  }

  #cart-drawer .cart-drawer__items .quantity-selector--chevron :is(.quantity-minus, .quantity-plus) {
    position: relative;
    grid-column: 2;
    width: var(--quantity-stepper-chevron-height);
    height: var(--quantity-stepper-chevron-width);
    min-width: 0;
    min-height: 0;
    color: inherit;
    border-radius: 0;
  }

  /* Restore a usable tap target without disturbing the 11 × 6 Figma box. */
  #cart-drawer .cart-drawer__items .quantity-selector--chevron :is(.quantity-minus, .quantity-plus)::after {
    content: '';
    position: absolute;
    inset: -0.5rem -0.625rem;
  }

  #cart-drawer .cart-drawer__items .quantity-selector--chevron .quantity-plus {
    grid-row: 1;
  }

  #cart-drawer .cart-drawer__items .quantity-selector--chevron .quantity-minus {
    grid-row: 2;
  }

  #cart-drawer .cart-drawer__items .quantity-selector--chevron .svg-wrapper {
    display: block;
    width: var(--quantity-stepper-chevron-width);
    height: var(--quantity-stepper-chevron-height);
  }

  #cart-drawer .cart-drawer__items .quantity-selector--chevron svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  #cart-drawer .cart-drawer__items .quantity-selector--chevron .quantity-plus .svg-wrapper {
    transform: rotate(-90deg);
  }

  #cart-drawer .cart-drawer__items .quantity-selector--chevron .quantity-minus .svg-wrapper {
    transform: rotate(90deg);
  }

  #cart-drawer .cart-drawer__items .quantity-selector--chevron .quantity-plus:active .svg-wrapper {
    transform: rotate(-90deg) scale(0.9);
  }

  #cart-drawer .cart-drawer__items .quantity-selector--chevron .quantity-minus:active .svg-wrapper {
    transform: rotate(90deg) scale(0.9);
  }

  #cart-drawer .cart-drawer__items .quantity-selector--chevron :is(.quantity-minus, .quantity-plus):disabled {
    opacity: var(--opacity-40);
    cursor: default;
  }

  /* ── "You May Also Like" — Figma 2001:1039 / 2001:2160 ─────────── */

  #cart-drawer .cart-drawer__recommendations {
    display: block;
    margin-block-start: var(--cart-panel-gap);
    padding-block-start: var(--cart-panel-gap);
    border-block-start: var(--cart-panel-rule);
  }

  #cart-drawer .cart-drawer__recommendations[hidden] {
    display: none;
  }

  #cart-drawer .cart-reco__card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* 4 */
    padding: var(--cart-reco-padding);
    border-radius: 1rem; /* 16 */
    background-color: var(--nav-utility-field-background);
    color: var(--color-teal-800);
  }

  #cart-drawer .cart-reco__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    padding-block: 0.5rem; /* 8 */
  }

  #cart-drawer .cart-reco__title {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--nav-link-size); /* 18 */
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: normal;
    color: inherit;
  }

  #cart-drawer .cart-reco__nav {
    display: flex;
    align-items: center;
    gap: 0.625rem; /* 10 */
    flex-shrink: 0;
  }

  #cart-drawer .cart-reco__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem; /* 30 */
    height: 1.875rem;
    padding: 0;
    border: 1px solid var(--color-teal-800);
    border-radius: 5rem; /* 80 */
    background: transparent;
    color: var(--color-teal-800);
    cursor: pointer;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  #cart-drawer .cart-reco__arrow:disabled {
    opacity: var(--opacity-30);
    cursor: default;
  }

  #cart-drawer .cart-reco__arrow-icon {
    display: flex;
    width: 0.75rem; /* 12 */
    height: 0.6875rem; /* 11 */
  }

  #cart-drawer .cart-reco__arrow-icon svg {
    width: 100%;
    height: 100%;
  }

  #cart-drawer .cart-reco__arrow--prev .cart-reco__arrow-icon {
    transform: rotate(180deg);
  }

  #cart-drawer .cart-reco__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #cart-drawer .cart-reco__track::-webkit-scrollbar {
    display: none;
  }

  #cart-drawer .cart-reco__slide {
    display: flex;
    align-items: center;
    gap: var(--cart-reco-gap);
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
  }

  #cart-drawer .cart-reco__media {
    display: block;
    flex: 0 0 var(--cart-reco-media-width);
    width: var(--cart-reco-media-width);
    height: var(--cart-reco-media-height);
    border-radius: 0.75rem; /* 12 */
    overflow: hidden;
  }

  #cart-drawer .cart-reco__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  #cart-drawer .cart-reco__info {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem; /* 8 */
    min-width: 0;
    padding-block: 0.5rem; /* 8 */
  }

  #cart-drawer .cart-reco__name {
    font-family: var(--font-heading--family);
    font-size: var(--cart-reco-name-size);
    font-weight: 600;
    line-height: 1.5;
    color: inherit;
    text-decoration: none;
    overflow-wrap: break-word;
  }

  #cart-drawer .cart-reco__price {
    font-family: var(--font-body--family);
    font-size: 1rem; /* 16 */
    font-weight: 400;
    line-height: 1.5;
  }

  #cart-drawer .cart-reco__view {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem; /* 10 */
    flex-shrink: 0;
    width: auto;
    height: auto;
    min-height: 0;
    padding-block: 0.625rem; /* 10 */
    padding-inline: 1.25rem; /* 20 */
    border: none;
    border-radius: 5rem; /* 80 */
    background-color: var(--color-teal-800);
    color: var(--color-white);
    font-family: var(--font-heading--family);
    font-size: 0.875rem; /* 14 */
    font-weight: 600;
    line-height: normal;
    letter-spacing: var(--letter-spacing--002);
    text-decoration: none;
    box-shadow: none;
  }

  #cart-drawer .cart-reco__view:hover {
    background-color: var(--color-teal-700);
  }

  #cart-drawer .cart-reco__view-icon {
    display: flex;
    width: 0.625rem; /* 10 */
    height: 0.625rem;
    flex-shrink: 0;
  }

  #cart-drawer .cart-reco__view-icon svg {
    width: 100%;
    height: 100%;
  }

  /* ── Footer — Figma 2001:1061 / 2001:1066 ──────────────────────── */

  #cart-drawer .cart-drawer__summary {
    gap: var(--cart-panel-gap);
    padding-block: 0 1.375rem; /* 22 bottom spacer, Figma 2001:1069 */
  }

  #cart-drawer .cart-drawer__summary > .cart-drawer-summary {
    padding-block-start: var(--cart-panel-gap);
    border-block-start: var(--cart-panel-rule);
  }

  /* The stock rules add a second rule above the totals; the panel already
     draws one, so keep it to a single hairline. */
  #cart-drawer .cart-drawer__summary .cart__summary-totals,
  #cart-drawer .cart-drawer__summary .cart-totals {
    border-block-start: none;
    padding-block-start: 0;
  }

  /* ── Mobile — Figma 2001:2131 ──────────────────────────────────── */

  @media screen and (max-width: 749px) {
    #cart-drawer {
      --cart-panel-gutter: var(--nav-bar-padding-mobile); /* 24 */
      --cart-item-media-width: 4.75rem; /* 76 */
      --cart-item-media-ratio: 76 / 89;
      --cart-item-inset: 0;
      --cart-reco-media-width: 4.625rem; /* 74 */
      --cart-reco-media-height: 5.4375rem; /* 87 */
      --cart-reco-gap: 1rem; /* 16 */
      --cart-reco-padding: 0.75rem 0.875rem; /* 12 / 14 */
      --cart-reco-name-size: 1rem; /* 16 */
    }

    #cart-drawer .theme-drawer__header {
      padding-block: 1.5rem 1rem;
    }

    #cart-drawer .cart-drawer__close-text {
      display: none;
    }

    #cart-drawer .cart-drawer__close-glyph {
      display: block;
    }

    #cart-drawer .cart-reco__card {
      gap: 0.75rem; /* 12 */
    }

    #cart-drawer .cart-reco__head {
      padding-block: 0;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:226) */
.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:228) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    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(2.5rem, 15cqi, 7.5rem) 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-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 drawer: separate grid areas for variants and unit price */
  .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) 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--sm);
    }

    .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 > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .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);
    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 {
    /* Carries the .button class for layout only — it renders as a bare icon/link,
       so it opts out of the radial hover fill in base.css. --button-fill-under
       goes with it: that's what the button paints beneath the fill on hover, and
       left at the palette default it would flash a teal pill behind the label. */
    --button-fill-display: none;
    --button-fill-under: transparent;

    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;
  }

  /* Figma 2001:1037 — the drawer spells "Remove" out as an underlined link. */
  .cart-items__remove--text {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    font-family: var(--font-body--family);
    font-size: 0.875rem; /* 14 */
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-teal-800);
    text-decoration-line: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
    cursor: pointer;
  }

  .cart-items__remove--text:hover {
    text-decoration-color: transparent;
  }

  .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--sm);
    line-height: var(--line-height);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .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: 7.5rem 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-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);
  }

  .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-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-summary (INDEX:229) */
.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;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.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(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @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))));
  }

  .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));
  }

  .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: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: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);
  }

  @media screen and (max-width: 749px) {
    .collection-card.collection-card--image-bg {
      aspect-ratio: var(--ratio-mobile, 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;
    }
  }

  /*
    Hover reveal — mirrors the Media tile animation. Only active when the
    card's content is placed ON the image (makes no sense for below-image).
    Clip the inner so translated-down children disappear below the card edge.
  */
  .collection-card--reveal-on-hover .collection-card__inner {
    overflow: hidden;
    position: relative;
  }

  .collection-card--reveal-on-hover .collection-card__content {
    justify-content: flex-end;
    transform: translateY(var(--collection-card-reveal-offset, 4.25rem));
    transition: transform 0.3s ease;
  }

  .collection-card--reveal-on-hover:hover .collection-card__content,
  .collection-card--reveal-on-hover:focus-within .collection-card__content {
    transform: translateY(0);
  }

  /* Keep extra content (anything after the first child — e.g., description +
     button) invisible at rest; fade in during the slide-up. */
  .collection-card--reveal-on-hover .collection-card__content > *:not(:first-child) {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .collection-card--reveal-on-hover:hover .collection-card__content > *:not(:first-child),
  .collection-card--reveal-on-hover:focus-within .collection-card__content > *:not(:first-child) {
    opacity: 1;
  }

  /*
    Mobile has no hover, so show the revealed state by default. Matches the
    :hover end-state above (slid up + extra children visible) without animating.
  */
  @media screen and (max-width: 749px) {
    .collection-card--reveal-on-hover .collection-card__content {
      transform: translateY(0);
    }

    .collection-card--reveal-on-hover .collection-card__content > *:not(:first-child) {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-card--reveal-on-hover .collection-card__content,
    .collection-card--reveal-on-hover .collection-card__content > *:not(:first-child) {
      transition: none;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:customization-motion (INDEX:237) */
customization-section {
    --cz-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --cz-reveal-duration: 0.9s;
    /* Figma's 80px desktop gutter and 16px mobile gutter, in the fluid rem the theme scales with. */
    --cz-gutter: 1rem;
    --cz-content-width: 80rem;
  }

  /* The base section is a three-column grid; these sections lay out their own column.
     Doubled selector: base.css's `.section` is emitted after snippet styles and would win a tie. */
  customization-section.section {
    display: block;
    position: relative;
  }

  @media screen and (min-width: 750px) {
    customization-section {
      --cz-gutter: 5rem;
    }
  }

  .cz-container {
    width: 100%;
    max-width: calc(var(--cz-content-width) + var(--cz-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--cz-gutter);
    box-sizing: border-box;
  }

  /* ------------------------------------------------------------------ *
   * Reveal
   * ------------------------------------------------------------------ */
  @media (prefers-reduced-motion: no-preference) {
    customization-section[data-motion-ready] .cz-reveal:not(.is-inview) {
      opacity: 0;
    }

    .cz-reveal.is-inview {
      animation: cz-rise var(--cz-reveal-duration) var(--cz-ease-out) both;
      animation-delay: var(--reveal-delay, 0s);
    }

    .cz-reveal--scale.is-inview {
      animation-name: cz-rise-scale;
    }

    @keyframes cz-rise {
      from {
        opacity: 0;
        transform: translate3d(0, 1.75rem, 0);
      }

      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes cz-rise-scale {
      from {
        opacity: 0;
        transform: translate3d(0, 1.25rem, 0) scale(0.97);
      }

      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }
  }

  /* ------------------------------------------------------------------ *
   * Icon chip — Figma "Icon": 55px, 10px radius, hairline + two-stop gradient.
   * ------------------------------------------------------------------ */
  .cz-chip {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3.4375rem;
    height: 3.4375rem;
    border: 1px solid var(--color-teal-200);
    border-radius: 0.625rem;
    background: linear-gradient(-27deg, var(--color-teal-200) 6%, var(--color-teal-50) 75%);
    box-sizing: border-box;
  }

  /* Teal/500 → Teal/400 with a Teal/100 ring: the dark-surface variant (hero cards). */
  .cz-chip--teal {
    border-color: var(--color-teal-100);
    background: linear-gradient(-27deg, var(--color-teal-500) 10%, var(--color-teal-400) 79%);
    color: var(--color-white);
  }

  /* Teal/100 → white: the variant on a Teal/100 card (printing slides). */
  .cz-chip--light {
    background: linear-gradient(-27deg, var(--color-teal-100) 6%, var(--color-white) 75%);
  }

  .cz-chip svg {
    width: auto;
    height: auto;
    max-width: var(--cz-chip-icon, 2.125rem);
    max-height: var(--cz-chip-icon, 2.125rem);
  }

  /* Custom icon images fill the chip's icon box whatever size the file was exported at. */
  .cz-chip img {
    width: var(--cz-chip-icon, 2.125rem);
    height: var(--cz-chip-icon, 2.125rem);
    max-width: none;
    object-fit: contain;
  }

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

  /* Button/Primary/LG/outline — white ring over 16% white glass, 20/600 with 2% tracking,
     14 × 28 padding. `button-fill` opts into base.css's hover wipe: the fill is solid white
     and the glass tint sits beneath it while it travels (faq-cta's recipe), so the label
     flips to teal as the white arrives. */
  .cz-button {
    --button-fill-color: var(--color-white);
    --button-fill-under: rgb(255 255 255 / 0.16);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border: 1px solid var(--color-white);
    border-radius: 5rem;
    background: rgb(255 255 255 / 0.16);
    color: var(--color-white);
    font-family: var(--font-geom--family);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
  }

  .cz-button:hover {
    color: var(--color-teal-800);
  }

  /* …/M/outline: the 16px size. */
  .cz-button--m {
    font-size: 1rem;
  }

  /* Button/Secondary/M/outline: ring only, no glass. */
  .cz-button--outline {
    --button-fill-under: transparent;

    background: transparent;
  }

  /* Trailing arrow, exactly as the button block draws it: the 12px glyph lives in a padded
     24px viewBox, so the mask is pinned to 24px and the 15px box crops the padding. */
  .cz-button::after {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background-color: currentcolor;
    -webkit-mask: var(--cz-arrow-icon) center / 24px 24px no-repeat;
    mask: var(--cz-arrow-icon) center / 24px 24px no-repeat;
    transition: var(--button-arrow-transition);
  }

  .cz-button:is(:hover, :focus-visible)::after {
    transform: var(--button-arrow-hover-transform);
  }

  /* Button/Primary on the theme's primary `.button` (fill wipe, colours, pill) — the
     sustainability-cta recipe. Figma uses the SM size (14/600, 10 × 20) below 750px and
     LG (20/600, 14 × 28) above. Doubled class: base.css's `.button` is emitted later. */
  .cz-button-primary.cz-button-primary {
    --button-padding-inline: 1.25rem 1.25rem;
    --button-padding-block: 0.625rem 0.625rem;

    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  .cz-button-primary.cz-button-primary::after {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background-color: currentcolor;
    -webkit-mask: var(--cz-arrow-icon) center / 16px 16px no-repeat;
    mask: var(--cz-arrow-icon) center / 16px 16px no-repeat;
    transition: var(--button-arrow-transition);
  }

  .cz-button-primary.cz-button-primary:is(:hover, :focus-visible)::after {
    transform: var(--button-arrow-hover-transform);
  }

  @media screen and (min-width: 750px) {
    .cz-button-primary.cz-button-primary {
      --button-padding-inline: 1.75rem 1.75rem;
      --button-padding-block: 0.875rem 0.875rem;

      font-size: 1.25rem;
    }

    .cz-button-primary.cz-button-primary::after {
      width: 15px;
      height: 15px;
      -webkit-mask-size: 24px 24px;
      mask-size: 24px 24px;
    }
  }
/* END_SNIPPET:customization-motion */

/* START_SNIPPET:dialog-popup-page (INDEX:238) */
.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_SNIPPET:dialog-popup-page */

/* START_SNIPPET:divider (INDEX:239) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:240) */
.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:241) */
.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:242) */
.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%;
    }
  }

  .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:244) */
/* 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:gift-card-recipient-form-styles (INDEX:249) */
.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);
    transition: opacity 0.3s var(--animation-easing);
    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;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:251) */
.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-slider (INDEX:252) */
.group-slider {
    position: relative;
  }

  .group-slider__slideshow {
    width: 100%;
  }

  .group-slider__slides {
    width: 100%;
  }

  /*
    Arrows/dots stay hidden on the breakpoints the merchant didn't enable
    them for, even when the slider IS active on that breakpoint.
  */
  @media screen and (min-width: 750px) {
    .group-slider__controls--no-desktop {
      display: none;
    }
  }
  @media screen and (max-width: 749px) {
    .group-slider__controls--no-mobile {
      display: none;
    }
  }

  /*
    Each slide takes 1/N of the row minus its share of the gap. Same calc
    applies whether the slider is active or disabled at this breakpoint —
    only the scroll/snap behavior changes between the two.
  */
  .group-slider__slideshow > slideshow-container > slideshow-slides > slideshow-slide {
    @media screen and (min-width: 750px) {
      flex: 0 0 calc(
        (100% - (var(--slideshow-gap, 0px) * (var(--slides-per-view-desktop, 1) - 1))) /
          var(--slides-per-view-desktop, 1)
      );
    }

    @media screen and (max-width: 749px) {
      flex: 0 0 calc(
        (100% - (var(--slideshow-gap, 0px) * (var(--slides-per-view-mobile, 1) - 1))) /
          var(--slides-per-view-mobile, 1)
      );
    }
  }

  /*
    The base [*-disabled] CSS sets --slideshow-disabled-slide-width on
    slideshow-slide width — point it at the calc value above so disabled
    state matches active layout.
  */
  .group-slider__slideshow[desktop-disabled] {
    @media screen and (min-width: 750px) {
      --slideshow-disabled-slide-width: calc(
        (100% - (var(--slideshow-gap, 0px) * (var(--slides-per-view-desktop, 1) - 1))) /
          var(--slides-per-view-desktop, 1)
      );
    }
  }
  .group-slider__slideshow[mobile-disabled] {
    @media screen and (max-width: 749px) {
      --slideshow-disabled-slide-width: calc(
        (100% - (var(--slideshow-gap, 0px) * (var(--slides-per-view-mobile, 1) - 1))) /
          var(--slides-per-view-mobile, 1)
      );
    }
  }
/* END_SNIPPET:group-slider */

/* START_SNIPPET:group (INDEX:253) */
/* Doubled class so this beats base.css's `.mobile-column { flex-flow: column nowrap }`,
     which has equal specificity and later source order. */
  @media screen and (max-width: 749px) {
    .layout-panel-flex--reverse-mobile.layout-panel-flex--reverse-mobile {
      flex-direction: column-reverse;
      flex-wrap: nowrap;
    }
  }

  .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:254) */
.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;
  }

  {%- comment -%}
    Sign-in panel — Figma Sana_nav_dropdown_sign-in (2001:1138).

    This store runs new customer accounts, so the sign-in UI is rendered by
    Shopify inside <shopify-account>; the theme cannot supply the panel's own
    markup (the email/password fields, the "Close" row, the paired
    Sign In / Create Account buttons). These custom properties are the whole
    surface Shopify exposes, so the panel is themed to the Figma sand card —
    background, radius, pill buttons, 8px inputs — but its internal layout
    stays Shopify's.
  {%- endcomment -%}
  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(--nav-panel-radius);
    --shopify-account-radius-button: 5rem;
    --shopify-account-radius-button-small: 5rem;
    --shopify-account-radius-input: var(--nav-utility-field-radius);
    --shopify-account-color-background: var(--nav-utility-background);
    --shopify-account-color-text: var(--color-teal-800);
    --shopify-account-color-accent: var(--color-teal-800);
    --shopify-account-color-accent-text: var(--color-white);
    --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;
  }

  @media screen and (min-width: 750px) {
    .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-paragraph--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:255) */
.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;
    flex-direction: column;
    gap: 1em;
    padding-block-end: var(--padding-lg);
    padding-inline: var(--padding-xl);
  }

  .menu-drawer__featured-content-list-item {
    width: 100%;
  }

  .menu-drawer__featured-content .resource-card__image {
    width: 100%;
  }

  /*
    Featured cards in the menu drawer mirror the desktop mega-menu hover state
    by default — there's no hover on touch, so the overlay title and button
    stay fully visible at rest. Title follows the card color scheme (instead
    of the hardcoded white from resource-card.liquid).
  */
  .menu-drawer__featured-content .resource-card--overlay .resource-card__title {
    color: var(--color-foreground-heading);
  }

  .menu-drawer__featured-content .resource-card__button {
    align-self: flex-start;
    margin-top: var(--padding-xs);
  }

  .menu-drawer__navigation {
    padding: 0;
    position: relative;
    flex: 1;
    min-height: 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 (max-width: 749px) {
      width: 100vw;
      max-width: 100vw;
      top: var(--account-offset-top);
      height: calc(100dvh - var(--account-offset-top));
      border-right: none;
      box-shadow: none;
    }

    @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;

    @media screen and (max-width: 749px) {
      top: var(--account-offset-top);
      height: calc(100dvh - var(--account-offset-top));
    }

    .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;
    padding-top: 1.5rem;
  }

  .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: 1rem;
  }

  .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: 1rem;

    @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 {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .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: 0.5rem 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
    min-height: fit-content;
  }

  .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);
    display: none;
  }

  @media screen and (max-width: 749px) {
    .menu-drawer > .menu-drawer__close-button {
      display: none;
    }
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: 0 var(--padding-md) 0;
    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;
    outline: 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;
    line-height: normal;
  }

  /** 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: 0;
    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: 100%;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(100%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: 0.5rem;
    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);
  }

  .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__account-wrapper {
    display: flex;
    align-items: center;
    padding-block: var(--padding-md);
    color: var(--color-foreground);
  }

  .menu-drawer__account-wrapper shopify-account {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: inherit;
  }

  .menu-drawer__account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 1rem;
  }

  .menu-drawer__account-icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .menu-drawer__account-label {
    font-family: var(--font-body--family);
    font-style: var(--font-body--style);
    font-weight: 700;
    font-size: var(--menu-font-md--size);
    line-height: var(--menu-font-2xl--line-height);
    text-transform: uppercase;
  }

  .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;
  }

  /* ================================================================
     Sana 2026 mobile drawer
     Figma: Sana_nav_mobile_dropdown 2001:1936 (root)
            Sana_nav_mobile_dropdown_products 2001:1981 (submenu)
     ================================================================ */

  /* Figma sizes the mobile bar off the logo (24 + 49 + 24 = 97). The stock
     60px drawer minimum would make the bar taller than that. */
  .header__drawer {
    /* stylelint-disable-next-line length-zero-no-unit */
    --header-drawer-min-height: 0px;
  }

  .header__icon--summary .header-drawer-icon,
  .menu-drawer .header-drawer-icon {
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
  }

  .header__icon--summary .header-drawer-icon svg {
    width: 100%;
    height: 100%;
  }

  .menu-drawer-container .header__icon--summary {
    position: relative;
    padding: 0;
    color: currentcolor;
  }

  /* Figma's controls are 24px boxes. Restore a 44px tap target without
     letting it grow the bar. */
  .menu-drawer-container .header__icon--summary::after,
  .header .header-actions__action::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .header .header-actions__action {
    position: relative;
  }

  /* The trigger only ever shows the hamburger now: the drawer covers the bar
     and supplies its own close control. */
  .menu-drawer-container .header__icon--summary .header-drawer-icon--close {
    display: none;
  }

  .menu-drawer,
  .menu-drawer__submenu {
    background: var(--nav-drawer-background);
    color: var(--nav-drawer-foreground);

    /* The panels only ever scroll vertically — sideways movement is always a
       bleed (the wordmark) or a stray wide child, never navigation. */
    overflow-x: clip;
  }

  /* Figma's drawer covers the whole viewport, header bar included. */
  @media screen and (max-width: 749px) {
    .menu-drawer {
      top: 0;
      height: 100dvh;
    }

    .menu-drawer__backdrop {
      top: 0;
      height: 100dvh;
    }
  }

  #header-component[data-menu-style='drawer'] .menu-drawer {
    top: 0;
    height: 100dvh;
  }

  /* ---- Drawer header (logo + close) — Figma 2001:1938 ------------ */
  .menu-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    padding: var(--nav-bar-padding-mobile);
    flex-shrink: 0;
  }

  .menu-drawer__logo {
    display: flex;
    align-items: center;
  }

  .menu-drawer__logo-image {
    height: 2.5625rem; /* 41 */
    width: auto;
    object-fit: contain;
  }

  .menu-drawer__logo-image--knockout {
    filter: brightness(0) invert(1);
  }

  /* The stock close button is display:none — the drawer used to sit below the
     header bar and borrow its control. */
  .menu-drawer .menu-drawer__close-button,
  .menu-drawer .menu-drawer__nav-buttons .menu-drawer__close-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: auto;
    height: auto;
    color: var(--nav-drawer-muted);
    background: transparent;
  }

  .menu-drawer .menu-drawer__close-button .svg-wrapper,
  .menu-drawer .menu-drawer__close-button svg {
    width: 1.6875rem; /* 27 */
    height: 1.375rem; /* 22 */
  }

  /* ---- Link list — Figma "Nav Links" 2001:1945 ------------------- */
  .menu-drawer__navigation {
    /* `position: static` hands the submenu's containing block back to
       .menu-drawer, so a submenu covers the whole drawer — logo row included —
       as in Figma 2001:1983. The stock rule scopes it to the nav area instead. */
    position: static;
    flex: 0 0 auto;
  }

  .menu-drawer .menu-drawer__menu {
    padding-inline: var(--nav-bar-padding-mobile);
    margin-block-start: 0;
  }

  .menu-drawer .menu-drawer__menu.has-submenu {
    margin-block-end: 0;
  }

  .menu-drawer .menu-drawer__menu > .menu-drawer__list-item {
    min-height: 0;
  }

  .menu-drawer .menu-drawer__menu-item {
    padding-block: var(--nav-link-padding-block-mobile);
    padding-inline: 0;
    min-height: 0;
  }

  .menu-drawer .menu-drawer__menu-item--mainlist,
  .menu-drawer .menu-drawer__menu-item--parent,
  .menu-drawer .menu-drawer__menu-item--child {
    font-family: var(--font-heading--family);
    font-size: var(--nav-link-size-mobile);
    font-weight: var(--nav-link-weight);
    line-height: var(--nav-link-line-height);
    letter-spacing: var(--nav-link-letter-spacing);
    text-transform: none;
    color: var(--nav-drawer-foreground);
    min-height: 0;
  }

  .menu-drawer .menu-drawer__menu-item--mainlist:hover,
  .menu-drawer .menu-drawer__menu-item--parent:hover,
  .menu-drawer .menu-drawer__menu-item--child:hover {
    color: var(--nav-drawer-accent);
  }

  .menu-drawer .menu-drawer__chevron {
    padding-inline-start: var(--padding-md);
    color: var(--nav-drawer-muted);
  }

  .menu-drawer .menu-drawer__cta-arrow,
  .menu-drawer .menu-drawer__cta-arrow svg {
    width: 0.9375rem; /* 15 */
    height: 0.9375rem;
    padding: 0;
    flex-shrink: 0;
  }

  /* The exported asset already points right, so drop the rotation base.css
     applies to the theme's down-caret. */
  .menu-drawer .menu-drawer__chevron svg {
    width: 0.4602rem; /* 7.364 */
    height: 0.7955rem; /* 12.728 */
    transform: none;
  }

  .menu-drawer .icon-caret--backward.menu-drawer__chevron {
    padding-inline: 0 var(--padding-sm);
  }

  .menu-drawer .icon-caret--backward.menu-drawer__chevron svg {
    transform: rotate(180deg);
  }

  /* ---- Submenu panels — Figma 2001:1982 -------------------------- */
  .menu-drawer .menu-drawer__nav-buttons {
    padding: var(--nav-bar-padding-mobile);
    padding-block-end: 0;
  }

  .menu-drawer .menu-drawer__back-button {
    padding: 0;
    gap: 0;
    font-family: var(--font-heading--family);
    font-size: var(--nav-link-size-mobile);
    font-weight: var(--nav-link-weight);
    line-height: var(--nav-link-line-height);
    letter-spacing: var(--nav-link-letter-spacing);
    color: var(--nav-drawer-foreground);
  }

  .menu-drawer .menu-drawer__back-button > .svg-wrapper {
    width: auto;
    height: auto;
    margin-right: 0;
  }

  /* Rule above the submenu list — Figma 2001:1993. */
  .menu-drawer .menu-drawer__menu--childlist {
    border-block-start: 1px solid rgb(var(--color-white-rgb) / var(--opacity-20));
    padding-block-start: var(--padding-sm);
    margin-block-start: var(--nav-bar-padding-mobile);

    /* The stock rule grows the list to fill the panel, which would push the
       action row below onto the drawer's bottom edge. Figma runs it straight
       on from the last link instead. */
    flex-grow: 0;
  }

  /* ---- Submenu action row — Figma 2001:2019 --------------------- */
  .menu-drawer__submenu-actions {
    display: flex;
    align-items: center;
    padding-block: var(--nav-bar-padding-mobile);
    padding-inline: var(--nav-bar-padding-mobile);
  }

  /* ---- Call-to-action block — Figma 2001:1964 -------------------- */
  .menu-drawer__utility-links {
    /* Figma runs this straight on from the link list rather than pinning it
       to the bottom of the drawer. */
    margin-block: 0;
    margin-inline-start: 0;
    padding-inline: var(--nav-bar-padding-mobile);

    /* Figma 2001:1962 — 32px of air either side of the rule, then the action
       block (2001:1964) adds its own 16px. */
    padding-block-start: 3rem;
    margin-block-start: 2rem;
    border-block-start: 1px solid rgb(var(--color-white-rgb) / var(--opacity-20));
    gap: 1.5rem; /* 24 */
  }

  .menu-drawer__actions {
    display: flex;
    align-items: center;
  }

  .menu-drawer__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem; /* 10 */
    padding: 0.875rem 1.75rem; /* 14 / 28 */
    border-radius: 5rem; /* 80 */
    font-family: var(--font-heading--family);
    font-size: 1rem; /* 16 */
    font-weight: var(--nav-link-weight);
    line-height: normal;
    letter-spacing: var(--nav-link-letter-spacing);
    text-decoration: none;
    color: var(--nav-drawer-foreground);
  }

  .menu-drawer__action--cart,
  .menu-drawer__action--pill {
    background-color: var(--nav-drawer-accent);
    color: var(--color-teal-800);
  }

  .menu-drawer__action-icon,
  .menu-drawer__action-icon svg {
    width: 1rem; /* 16 */
    height: 1rem;
  }

  /* The wrapper carries the popover colour scheme so shopify-account's own
     dialog is themed; the trigger itself has to stay on the dark panel. */
  .menu-drawer .menu-drawer__account-wrapper {
    /* shopify-account's shadow button is a 44px touch target in its own right,
       so padding here stacks on top of it and the control ends up 72px tall
       against Figma's 52 — which is what threw the label and glyph off the Cart
       pill's centre line. The padding moves to the slotted trigger below, where
       it grows that button from the inside instead. */
    padding: 0;
    background: transparent;
  }

  .menu-drawer .menu-drawer__account-wrapper,
  .menu-drawer .menu-drawer__account-wrapper shopify-account,
  .menu-drawer .menu-drawer__account-trigger,
  .menu-drawer .menu-drawer__account-label,
  .menu-drawer .menu-drawer__account-icon {
    color: var(--nav-drawer-foreground);
  }

  /* Padding, gap and alignment live here rather than on shopify-account or the
     wrapper: the label and the glyph are slotted into its shadow DOM, so only
     rules on their shared parent reach them (Figma 2001:1967). */
  .menu-drawer .menu-drawer__account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem; /* 10 */
    padding: 0.875rem 1.75rem; /* 14 / 28 */
  }

  .menu-drawer .menu-drawer__account-icon {
    margin-inline-end: 0;
    flex-shrink: 0;
  }

  .menu-drawer .menu-drawer__account-icon,
  .menu-drawer .menu-drawer__account-icon svg {
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
  }

  .menu-drawer .menu-drawer__account-label {
    font-family: var(--font-heading--family);
    font-size: 1rem;
    font-weight: var(--nav-link-weight);
    line-height: normal;
    letter-spacing: var(--nav-link-letter-spacing);
    text-transform: none;
  }

  /* ---- Register prompt — Figma 2001:1971 ------------------------- */
  .menu-drawer__register {
    padding-block-end: var(--padding-2xl);
  }

  .menu-drawer__register-prompt {
    font-family: var(--font-body--family);
    font-size: 1rem;
    font-weight: 400;
    line-height: var(--line-height--150);
    color: var(--nav-drawer-muted);
    margin: 0;
  }

  .menu-drawer__register-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding-block: var(--nav-panel-item-padding-block);
    font-family: var(--font-heading--family);
    font-size: 1rem;
    font-weight: var(--nav-link-weight);
    line-height: normal;
    letter-spacing: var(--nav-link-letter-spacing);
    color: var(--nav-drawer-foreground);
    text-decoration: none;
  }

  .menu-drawer__register-arrow,
  .menu-drawer__register-arrow svg {
    width: 0.9375rem; /* 15 */
    height: 0.9375rem;
  }

  /* ---- Wordmark texture — Figma 2001:1979 ------------------------ */

  /* The wordmark overhangs the drawer on three sides — 417x105 against a
     393-wide frame, sitting 23px below the bottom edge so the letterforms are
     cut off. The drawer is transformed while open, which makes it the
     containing block for this fixed child, so an oversized box here would be
     scrollable overflow rather than a bleed. The wrapper therefore fits the
     drawer exactly and clips the oversized glyph inside it. */
  .menu-drawer .menu-drawer__watermark {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5.125rem; /* 105 - 23 */
    overflow: clip;
    pointer-events: none;
    user-select: none;

    /* A negative index paints above the panel's own background but still under
       its links, so the wordmark stays a backdrop rather than an overlay on
       short viewports where the two would meet. */
    z-index: var(--layer-lowest);
    color: var(--color-teal-600);
    opacity: var(--opacity-20);
    mix-blend-mode: screen;
  }

  /* Beats the drawer's blanket icon sizing (.menu-drawer svg). */
  .menu-drawer .menu-drawer__watermark svg {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: 26.0625rem; /* 417 */
    height: 6.5625rem; /* 105 */
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:262) */
.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:klaviyo-reviews-styles (INDEX:263) */
/* Card gutters: Figma sits the 1280px card inside 80px page margins. The block
     padding lives here rather than in the section settings because the padding
     range caps at 100px — `section--product-faq` takes the same route. */
  .section--klaviyo-reviews {
    --full-page-grid-central-column-width: min(1280px, calc(100% - 160px));
    padding-block: 120px;
  }

  /* The app block lands in a flex column that aligns children to the start, so the
     widget shrink-wraps to its content and renders a few hundred pixels wide. */
  .section--klaviyo-reviews .shopify-app-block,
  .section--klaviyo-reviews #fulfilled-reviews-all {
    width: 100%;
  }

  /*
   * Klaviyo's design tokens. Setting them here covers everything their CSS derives
   * from a variable; the rules further down handle what they hard-code.
   *
   * `secondary-background-color` feeds the merchant-reply bubble AND the tab rule,
   * which the design paints in two different colours — the bubble wins the variable
   * and the tab rule is overridden explicitly below.
   */
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper {
    --kl-reviews-reviews-primary-background-color: #fff;
    --kl-reviews-reviews-secondary-background-color: #e1f4f3;
    --kl-reviews-reviews-accent-color: #5bc5ad;
    --kl-reviews-reviews-corner-radius: 32px;

    --kl-reviews-reviews-primary-font-font-family: var(--font-body--family);
    --kl-reviews-reviews-primary-font-font-weight: 400;
    --kl-reviews-reviews-primary-font-color: #064c4d;
    --kl-reviews-reviews-secondary-font-font-family: var(--font-body--family);
    --kl-reviews-reviews-secondary-font-font-weight: 400;
    --kl-reviews-reviews-secondary-font-color: #6c8283;

    --kl-reviews-reviews-star-color: #ecb83c;
    --kl-reviews-reviews-empty-star-color: #cdeeec;
    /* Spacing comes from a margin below instead — see the note on the star badge. */
    --kl-reviews-reviews-star-spacing: 0px;

    --kl-reviews-reviews-button-color: #064c4d;
    --kl-reviews-reviews-button-hover-color: #023031;
    --kl-reviews-reviews-button-font-color: #fff;
    --kl-reviews-reviews-button-font-font-family: var(--font-body--family);
    --kl-reviews-reviews-button-font-font-weight: 600;
    --kl-reviews-reviews-button-corner-radius: 80px;

    --kl-reviews-reviews-filter-button-background-color: #f1f9f9;
    --kl-reviews-reviews-filter-button-corner-radius: 80px;
    --kl-reviews-reviews-filter-button-font-color: #89a5a6;
    --kl-reviews-reviews-filter-button-font-font-family: var(--font-body--family);
    --kl-reviews-reviews-filter-button-font-font-weight: 400;
    --kl-reviews-reviews-filter-placeholder-text-color: #89a5a6;

    --kl-reviews-reviews-review-images-size: 139px;
    --kl-reviews-reviews-review-images-corner-radius: 16px;
    --kl-reviews-reviews-summary-images-corner-radius: 16px;

    /* The container IS the Figma card — white, 32px radius, 48px padding. */
    padding: 48px;
    color: #064c4d;
    font-family: var(--font-body--family);
  }

  /* ---------------------------------------------------------------------------
     Heading — Figma Headling/H2 over a Sea Grey/200 rule, 25px either side.
     --------------------------------------------------------------------------- */

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__header {
    margin: 0 0 25px;
    padding: 0 0 25px;
    border-bottom: 1px solid #cdeeec;
    color: #064c4d;
    font-family: var(--font-heading--family);
    font-size: var(--font-size--h2);
    font-weight: 700;
    line-height: var(--line-height--115);
    letter-spacing: 0;
  }

  /* ---------------------------------------------------------------------------
     Rating summary — "5 /5" beside the star badge, centred in a 492px column.
     --------------------------------------------------------------------------- */

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary {
    margin-bottom: 48px;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__grid--2-1 {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__grid--2-1 > div {
    margin-bottom: 0;
  }

  /* The design drops the rating histogram, which frees the second grid column. */
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__histogram {
    display: none;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__rating--1-1 {
    grid-template-columns: minmax(0, 492px);
    margin: 0;
  }

  /* Figma gives this row a fixed 176px height with its content optically centred. */
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__average_and_stars {
    min-height: 176px;
    margin: 0;
    gap: 32px;
    align-items: center;
    justify-content: center;
  }

  /*
   * "5" and "/5" are one text run in Figma, so the gap between them is the 8px
   * (0.2em) tracking on the "5" rather than a margin.
   */
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__average_value {
    margin-right: 0;
    color: #064c4d;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.2em;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__average_denominator {
    color: #064c4d;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.3em;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__stars {
    min-width: 0;
    gap: 8px;
  }

  /* The stars are inline-blocks, so the source newlines between them collapse to a
     space whose width tracks the inherited font size — which is why an unstyled badge
     drifts with the viewport. Zeroing it makes the gap below the only spacing. */
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__stars_badge {
    font-size: 0;
    line-height: 0;
  }

  /*
   * `--kl-reviews-reviews-star-spacing` is applied as padding on a border-box <svg>
   * with a fixed width, so it squeezes the glyph rather than separating the stars.
   * A margin gives Figma's 122px badge without distorting them.
   *
   * The size is written per context by the widget — 20px in the summary, 16px in the
   * review list — where Figma uses the same badge in both. It arrives as an inline
   * style attribute, so `!important` is the only thing that outranks it.
   */
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__stars_badge svg {
    width: 20px !important;
    height: 20px !important;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__stars_badge svg:not(:last-child) {
    padding-right: 0;
    margin-right: 5px;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__stars .kl_reviews__stars_badge {
    height: auto;
    margin-bottom: 0;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__stars__count {
    color: #6c8283;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
  }

  /* Custom-question summaries are not part of this design; collapse them when the
     widget renders the containers empty. */
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__answers_grid:empty,
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__answers__view_all:empty {
    display: none;
  }

  /* ---------------------------------------------------------------------------
     Tab bar — "Reviews / Questions" on the left, the two actions on the right,
     both sitting on a Teal/200 rule with a 3px Teal/400 active indicator.

     The widget's DOM order is actions-then-tabs, which is the mobile stack; the
     desktop row simply reverses it.
     --------------------------------------------------------------------------- */

  /* Figma insets the row's contents by 8px but runs the rule and the active
     indicator to the card edge, so the inset lives on the tab, not on the bar. */
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__list__tabs {
    margin: 0 0 24px;
    padding: 0 8px 24px 0;
    gap: 24px;
    border-bottom: 1px solid #b3f7e5;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__list__tab_buttons {
    gap: 32px;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper button.kl_reviews__list__tab {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 8px;
    color: #064c4d;
    font-family: var(--font-body--family);
    font-size: var(--font-size--h4);
    font-weight: 600;
    line-height: var(--font-h4--line-height);
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper button.kl_reviews__list__tab small {
    margin-left: 0;
    color: #6c8283;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
  }

  /*
   * The indicator is anchored to the tab, but the design draws it on the rule at
   * the bottom of the whole bar. Stretching the tabs to the bar's content height
   * and offsetting by the bar's padding lands it exactly on that rule.
   */
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__list__tab--active::after {
    height: 3px;
    bottom: -24px;
    border-radius: 0;
    background: #5bc5ad;
  }

  /* ---------------------------------------------------------------------------
     Filter row — search field plus three pills, Sea Grey/50 on a white hairline.
     --------------------------------------------------------------------------- */

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters {
    margin-bottom: 24px;
    padding: 0;
    gap: 12px;
    overflow: visible;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters .kl_reviews__search {
    width: 340px;
    max-width: 100%;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__search input[type='text'] {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 26px;
    border: 1px solid #fff;
    border-radius: 80px;
    background-color: #f1f9f9;
    color: #89a5a6;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
  }

  /* 26px inset + 16px glyph + the 10px gap Figma puts before the label. */
  .section--klaviyo-reviews
    #klaviyo-product-reviews-wrapper
    .kl_reviews__search
    input[type='text'].kl_reviews__input_with_search_icon {
    padding-left: 52px;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters .kl_reviews__search_icon svg {
    left: 26px;
    width: 16px;
    height: 16px;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters__pill select,
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters__pill button {
    box-sizing: border-box;
    padding: 14px 26px;
    border: 1px solid #fff;
    border-radius: 80px;
    background-color: #f1f9f9;
    color: #89a5a6;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
  }

  /* Room for the absolutely-positioned chevron: inset + glyph + gap. */
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters__pill select {
    padding-right: 52px;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters__pill svg {
    right: 26px;
  }

  /* ---------------------------------------------------------------------------
     Action buttons — outlined "Ask a question", filled "Write a review".
     --------------------------------------------------------------------------- */

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__button_bar {
    gap: 16px;
    justify-content: flex-start;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper button.kl_reviews__button {
    margin: 0;
    padding: 10px 20px;
    border: 1px solid #064c4d;
    border-radius: 80px;
    background-color: #064c4d;
    color: #fff;
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
  }

  .section--klaviyo-reviews
    #klaviyo-product-reviews-wrapper
    .kl_reviews__button_bar
    button.kl_reviews__button:first-child {
    background-color: transparent;
    color: #064c4d;
  }

  .section--klaviyo-reviews
    #klaviyo-product-reviews-wrapper
    .kl_reviews__button_bar
    button.kl_reviews__button:first-child:hover {
    background-color: #064c4d;
    color: #fff;
  }

  /* ---------------------------------------------------------------------------
     Review list.
     --------------------------------------------------------------------------- */

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__review_item {
    margin-bottom: 48px;
    padding-bottom: 0;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__review_item:last-child {
    margin-bottom: 0;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__review_item > div {
    gap: 24px;
  }

  /* A review with no title, media or reply still renders the container, which would
     otherwise contribute a 24px gap to the stack above. */
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__review__title:empty,
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__review__image_row:empty,
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__review__response:empty {
    display: none;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__review__timestamp {
    color: #6c8283;
    font-size: 14px;
    line-height: 1.5;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__review__author {
    margin-bottom: 12px;
    gap: 8px;
    color: #6c8283;
    font-size: 14px;
    line-height: 1.5;
  }

  /* Figma lists "Verified buyer" as plain text with no badge glyph. */
  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__review__verified svg {
    display: none;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper p.kl_reviews__review__content {
    margin-bottom: 0;
    color: #6c8283;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__review__image {
    margin: 0;
  }

  /* ---------------------------------------------------------------------------
     Merchant reply — indented, with the response in a Sea Grey/100 bubble.
     --------------------------------------------------------------------------- */

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__review__response {
    padding-left: 32px;
    border-left: 0;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper p.kl_reviews__review__response_title {
    margin-bottom: 12px;
    padding-left: 0;
    color: #6c8283;
    font-size: 14px;
    line-height: 1.5;
  }

  .section--klaviyo-reviews #klaviyo-product-reviews-wrapper p.kl_reviews__review__response_content {
    padding: 10px 18px;
    border-radius: 16px;
    background: #e1f4f3;
    color: #6c8283;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
  }

  /* ---------------------------------------------------------------------------
     Desktop layout. Klaviyo flips its own tab bar at 700px; the theme breaks at
     750px, so both sides of that boundary are stated explicitly.
     --------------------------------------------------------------------------- */

  @media screen and (min-width: 750px) {
    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__list__tabs {
      flex-direction: row-reverse;
      align-items: stretch;
      justify-content: space-between;
    }

    /* Stretching the tab row to the action row's height puts every tab's bottom
       edge on the bar's rule, which is what the ::after offset assumes. */
    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__list__tab_buttons {
      align-items: stretch;
    }

    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__button_bar {
      align-items: center;
    }
  }

  /* ---------------------------------------------------------------------------
     Mobile — Figma 2123:2045.
     --------------------------------------------------------------------------- */

  @media screen and (max-width: 749px) {
    .section--klaviyo-reviews {
      --full-page-grid-central-column-width: calc(100% - 32px);
      padding-block: 48px;
    }

    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper {
      padding: 24px 16px;
    }

    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__header {
      text-align: center;
    }

    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__rating--1-1 {
      grid-template-columns: minmax(0, 1fr);
    }

    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__summary__average_and_stars {
      min-height: 82px;
    }

    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__list__tabs {
      flex-direction: column;
      align-items: stretch;
    }

    /* Stacked, the actions no longer sit opposite the tabs, so they take the 8px
       inset the tabs carry on their own. */
    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__button_bar {
      padding-left: 8px;
    }

    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters {
      gap: 8px;
    }

    /* Figma draws this at a flat 150px, which clips "Search reviews" at the rendered
       font. Growing into the slack left on its wrapped row keeps the placeholder whole. */
    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters .kl_reviews__search {
      flex: 1 1 150px;
      width: auto;
      min-width: 150px;
    }

    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__search input[type='text'] {
      padding-inline: 16px;
    }

    .section--klaviyo-reviews
      #klaviyo-product-reviews-wrapper
      .kl_reviews__search
      input[type='text'].kl_reviews__input_with_search_icon {
      padding-left: 42px;
    }

    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters .kl_reviews__search_icon svg {
      left: 16px;
    }

    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters__pill select,
    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters__pill button {
      padding-inline: 16px;
    }

    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters__pill select {
      padding-right: 42px;
    }

    .section--klaviyo-reviews #klaviyo-product-reviews-wrapper .kl_reviews__filters__pill svg {
      right: 16px;
    }
  }
/* END_SNIPPET:klaviyo-reviews-styles */

/* START_SNIPPET:list-filter (INDEX:276) */
.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: inline;
      font-size: 0.875rem;
      text-transform: capitalize;
      font-family: var(--font-body--family);
      font-weight: var(--font-body--weight);
      line-height: normal;
      padding-inline: 0 0.75rem;
    }
  }

  .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:277) */
/* 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__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:278) */
.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:283) */
.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));
  }

  /* Two classes, so this outranks the plain ramp above without !important. The end stop
     fades to the same hue at `--overlay-end-opacity` rather than to nothing, which keeps
     the photograph tinted instead of splitting the frame into two halves. */
  .overlay--gradient.overlay--angled {
    background: linear-gradient(
      var(--overlay-angle, 90deg),
      var(--overlay-color) var(--overlay-start, 0%),
      color-mix(in srgb, var(--overlay-color) var(--overlay-end-opacity, 0%), transparent)
        var(--overlay-end, 100%)
    );
  }

  @media screen and (max-width: 749px) {
    .overlay--gradient.overlay--angled-mobile {
      background: linear-gradient(
        var(--overlay-angle-mobile, var(--overlay-angle, 90deg)),
        var(--overlay-color) var(--overlay-start-mobile, var(--overlay-start, 0%)),
        color-mix(in srgb, var(--overlay-color) var(--overlay-end-opacity, 0%), transparent)
          var(--overlay-end-mobile, var(--overlay-end, 100%))
      );
    }

    /* base.css darkens every mobile background image with a black scrim
       (.background-image-container::before). A section that authors its own angled wash
       never wants it on top. The compound selector is deliberate: base.css is emitted
       after the bundled snippet stylesheets, so an equal-specificity rule here would
       silently lose. */
    .section:has(.overlay--angled) .background-image-container::before {
      display: none;
    }
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:284) */
.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-secondary-button-hover-background);
    background: 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:285) */
.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:predictive-search-styles (INDEX:291) */
/* 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__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);
    }
  }

  /* Resource link list styles — collections, pages and articles.
     Mirrors the panel's default view (.predictive-search-default-menu): a
     labelled heading over a stack of plain links, divided by a hairline rule. */
  .predictive-search-results__resource-group {
    padding-inline: var(--padding-xl);
    padding-block: var(--padding-lg);
    border-block-start: var(--border-width-sm) solid var(--color-sand-200, var(--color-border));
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
    animation-delay: 150ms;
  }

  .predictive-search-results__resource-group .predictive-search-results__title {
    margin-block: 0 var(--margin-xs);

    @media screen and (max-width: 749px) {
      margin-block: 0 var(--margin-xs);
    }
  }

  .predictive-search-results__list.predictive-search-results__links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8 — matches .predictive-search-default-menu__list */
    padding-block-start: 0;
  }

  .predictive-search-results__link {
    display: block;
    font-family: var(--font-body--family);
    font-size: var(--font-body-md--size);
    font-weight: 400;
    line-height: var(--font-body-md--line-height);
    color: var(--nav-panel-link-color, var(--color-foreground));
    text-decoration: none;
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .predictive-search-results__link:hover,
  .predictive-search-results__link:focus-visible,
  .predictive-search-results__link-item[aria-selected='true'] .predictive-search-results__link {
    color: var(--nav-panel-link-color-hover, var(--color-foreground));
    text-decoration: none;
  }

  .predictive-search-results__link-item[aria-selected='true'].keyboard-focus .predictive-search-results__link {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
    border-radius: var(--style-border-radius-inputs);
  }

  .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:292) */
/* 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:product-badges-styles (INDEX:295) */
.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 (INDEX:296) */
.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 */

/* START_SNIPPET:product-data-table-styles (INDEX:297) */
/* Figma: 1px Sand/200 border, 16px radius, white fill. `separate` + `overflow: hidden`
     keeps the radius clipping the corner cells; `collapse` would drop the radius. */
  .product-data-table {
    width: 100%;
    border: 1px solid #e6d7c3;
    border-radius: 16px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    color: #064c4d;
    background: #fff;
    font-family: var(--font-body--family);
    table-layout: fixed;
  }

  /* Body cell — Body/Default/Regular (16/400/1.5), 12px/16px padding. */
  .product-data-table :is(th, td) {
    padding: 12px 16px;
    border-bottom: 1px solid #e6d7c3;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    vertical-align: middle;
    overflow-wrap: anywhere;
  }

  /* Header cell — Body/SM/SemiBold (14/600/1.5) on Sand/100. */
  .product-data-table thead th {
    background: #f3ebe1;
    font-size: 14px;
    font-weight: 600;
  }

  /* Zebra starts on the second body row, matching the Figma cell stack. */
  .product-data-table tbody tr:nth-child(even) :is(th, td) {
    background: rgb(247 241 235 / 0.5);
  }

  .product-data-table tbody tr:last-child :is(th, td) {
    border-bottom: 0;
  }

  .product-data-table--center :is(th, td) {
    text-align: center;
  }

  .product-data-table--pairs :is(th, td) {
    text-align: left;
  }

  /* Figma spec table columns: 218 / 289 of 507. */
  .product-data-table--pairs :is(th, td):first-child {
    width: 43%;
  }

  /* Figma "Ghost / Hyper link button" (2123:438) — UI/Button/Small with a 16px glyph. */
  .product-data-table__doc-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    color: #064c4d;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.02em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .product-data-table__doc-link:hover {
    opacity: 0.7;
  }

  .product-data-table__doc-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
  }

  .product-data-table__doc-icon svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  @media screen and (max-width: 749px) {
    .product-data-table :is(th, td) {
      padding: 12px 10px;
      font-size: 14px;
    }

    .product-data-table thead th {
      font-size: 13px;
    }

    .product-data-table--pairs :is(th, td):first-child {
      width: 50%;
    }
  }
/* END_SNIPPET:product-data-table-styles */

/* START_SNIPPET:product-grid (INDEX:298) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .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:299) */
.product-information {
    gap: var(--gap) 0;
  }

  /* The nav bar is full-bleed with a fixed 80px gutter (Figma Navigation/Desktop 2001:385, via
     --nav-bar-padding-inline), and the sections further down the product page — related products,
     the customization panel, the footer — are all set to 80 too. This one was left on the theme's
     default --page-margin of 50px, so the thumbnail rail and the details column overhung the
     header's content box by 30px on each side and nothing on the page lined up.

     Overriding the gutter rather than adding padding keeps the section's own
     margin / content / margin grid in charge of the centring, so the capped content column and
     the full-bleed .section-background both still behave. Desktop only: below 750px the page
     margin is 12px against the bar's 24px, but the gallery there is edge-to-edge by design.

     --page-width is restated because base.css derives it once, up at the .page-width-* level, as
     `content-width + margin * 2`. The central column is `min(page-width - margin * 2, 100% -
     margin * 2)`, so moving the margin alone leaves the first term built from 50 and subtracted
     with 80 — which caps the content 60px under the 90rem the design asks for once the window is
     wide enough for that term to win. */
  @media screen and (min-width: 750px) {
    .product-information {
      --page-margin: 80px;
      --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    }
  }

  /* 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-details,
    .product-information__media {
      grid-column: 2 / 3;
    }

    .product-information__grid {
      row-gap: var(--mobile-gap, var(--gap, 0));
    }
  }

  /* 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: 1.557fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .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;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header.
     The media side is pinned at the column rather than at the gallery — see the sticky block in
     _product-media-gallery.liquid — so the offset has to land on the column too. */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop,
  body:has(#header-group #header-component[data-sticky-state='active']) .product-information__media,
  body:has(#header-group #header-component[data-sticky-state='active']) media-gallery.media-gallery--sticky {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:300) */
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:301) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @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);
  }

  /* 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;
  }

  .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;
  }

  :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;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:302) */
.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);
  }

  /*** 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;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:304) */
.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:305) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .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;
    }
  }

  .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;
    }
  }

  .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;
      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-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .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: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-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    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
    .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;
    }
  }

  .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 {
    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);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:307) */
/* 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));

    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;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(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);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    background-color: var(--quick-add-background, var(--color-background));
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &: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: grid;
    }

    @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 .add-to-cart-text {
    background: var(--quick-add-background, var(--color-background));
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .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;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:related-product-card (INDEX:309) */
/* The quote / RFQ link takes the Add to Cart pill's place on its own, so it is sized by its
     label rather than held at the pill's fixed 168px: "Submit a Pouch RFQ" would otherwise
     wrap onto two lines. */
  .related-products .related-card__atc.purchase-cta {
    width: auto;
    min-width: 10.5rem;
    white-space: nowrap;
  }
/* END_SNIPPET:related-product-card */

/* START_SNIPPET:resource-card (INDEX:311) */
.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;
  }

  /* Sit above the card-wide overlay link so clicks resolve to the button. */
  .resource-card__button {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    width: fit-content;
  }

  .resource-card--overlay .resource-card__button {
    align-self: flex-start;
  }

  .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;
  }

  @media screen and (max-width: 749px) {
    .resource-card__title.h5.h5 {
      font-family: var(--font-h6--family);
      font-style: var(--font-h6--style);
      font-weight: var(--font-h6--weight);
      font-size: var(--font-h6--size);
      line-height: var(--font-h6--line-height);
      letter-spacing: var(--font-h6--letter-spacing);
      text-transform: var(--font-h6--case);
    }
  }

  .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:312) */
.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%;
  }

  @media screen and (max-width: 749px) {
    .resource-image {
      aspect-ratio: var(--ratio-mobile, var(--ratio));
    }
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:313) */
/*
   * Slideshow controls row sits beneath the slides — give it a
   * consistent top breathing-room whether it's just dots or
   * dots + outside arrows.
   */
  .resource-list__carousel slideshow-controls {
    padding-block-start: 2.5rem;
  }

  /*
   * Visual pagination dots for the resource-list carousel.
   * Mirrors the slideshow-auto-component styling but scoped to
   * resource-list__carousel so the original numbered <ol> isn't shown.
   */
  .resource-list__carousel .slideshow-controls__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .resource-list__carousel .slideshow-controls__dots > li {
    display: block;
    list-style: none;
  }

  .resource-list__carousel .slideshow-controls__dots .slideshow-control {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.25;
    font-size: 0;
    line-height: 0;
    color: var(--color-foreground);
    cursor: pointer;
    transition: opacity var(--animation-speed, 0.2s) ease;
  }

  .resource-list__carousel .slideshow-controls__dots .slideshow-control[aria-selected='true'] {
    opacity: 1;
  }

  /*
   * "Arrows outside the slider" mode — when show_dots is on, the
   * floating overlay arrows are disabled and we render previous/next
   * inline beside the dots so they sit below the slide track.
   */
  .resource-list__carousel--arrows-outside slideshow-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .resource-list__carousel--arrows-outside .slideshow-controls__arrows {
    /* Reset the absolute / overlay positioning that the in-slide arrows
       use; here each arrow is just an inline flex item. */
    position: static;
    inset: auto;
    padding: 0;
    display: inline-flex;
    align-items: center;
    pointer-events: auto;
    mix-blend-mode: normal;
  }

  .resource-list__carousel--arrows-outside .slideshow-controls__arrows .slideshow-control {
    /* Always-visible (the overlay version fades in on hover only). */
    opacity: 1;
    color: var(--color-foreground);
    pointer-events: auto;
  }

  .resource-list__carousel--arrows-outside .slideshow-controls__arrows .slideshow-control[disabled] {
    opacity: 0.25;
    cursor: not-allowed;
  }

  .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:search-modal (INDEX:316) */
/* 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;
  }

  {%- comment -%}
    The stock header drew a full-height 1px rule before the close button while
    "Clear" was showing, to divide the two controls in what was a single row of
    field + Clear + Close. The Sana header below stacks a title row above the
    field, so that rule spanned both rows and cut down through the panel. It has
    no counterpart in the design, so it is gone rather than restyled.
  {%- endcomment -%}

  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);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  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),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  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;
  }

  /* ================================================================
     Sana 2026 search panel
     Figma: Sana_nav_dropdown_search 2001:1221 (desktop)
            Sana_nav_mobile_dropdown_search 2001:2081 (mobile)

     The stock modal is a centred dialog; Figma anchors it to the right edge
     as a full-height sand panel (full-screen on mobile).
     ================================================================ */

  .search-modal__content.dialog-modal {
    --search-border-radius: var(--nav-panel-radius);

    margin: 0 0 0 auto;
    max-height: none;
    height: 100dvh;
    width: var(--nav-utility-width-search);
    max-width: 100vw;
    background-color: var(--nav-utility-background);
    border: none;

    @media screen and (min-width: 750px) {
      width: var(--nav-utility-width-search);
      margin-block-start: 0;
      overflow: hidden auto;
    }

    @media screen and (max-width: 749px) {
      width: 100vw;
    }
  }

  .dialog-modal[open].search-modal__content {
    border-radius: var(--nav-panel-radius);
    box-shadow: var(--nav-utility-shadow);
    animation: none;

    @media screen and (max-width: 749px) {
      border-radius: 0;
      box-shadow: none;
    }
  }

  .search-modal__content predictive-search-component,
  .search-modal__content .predictive-search-form__content,
  .search-modal__content .predictive-search-form__header {
    background-color: var(--nav-utility-background);
  }

  .search-modal__content predictive-search-component {
    align-items: flex-start;
    padding-inline: var(--nav-panel-padding-inline);
    padding-block: var(--nav-panel-padding-inline);
  }

  /* Header stacks the title row above the field. */
  .search-modal__content .predictive-search-form__header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--padding-lg);
    border: none;
    border-radius: 0;
    padding: 0;
  }

  .predictive-search-form__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    padding-block: var(--nav-panel-item-padding-block);
  }

  .predictive-search-form__title,
  .search-modal__content .predictive-search__close-modal-button {
    font-family: var(--font-heading--family);
    font-size: var(--nav-link-size);
    font-weight: var(--nav-link-weight);
    line-height: var(--nav-link-line-height);
    color: var(--color-teal-800);
  }

  .search-modal__content .predictive-search__close-modal-button {
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
  }

  /* Field — Figma 2001:1227: sand-200 at 50%, 8px radius, icon on the right. */
  .search-modal__content .predictive-search-form__header-inner {
    background-color: var(--nav-utility-field-background);
    border: none;
    border-radius: var(--nav-utility-field-radius);
    padding: 1rem 1.5rem; /* 16 / 24 */
    gap: var(--gap-sm);
  }

  .search-modal__content input.search-input {
    padding: 0;
    font-size: 1.25rem; /* 20 */
    line-height: var(--line-height--130);
    color: var(--color-teal-800);
  }

  .search-modal__content input.search-input::placeholder {
    color: var(--color-sand-500);
  }

  .search-modal__content .predictive-search__icon {
    position: static;
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
    color: var(--color-sand-500);
    flex-shrink: 0;
  }

  .search-modal__content .predictive-search__icon > svg {
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
  }

  /* Results sit in the flow of the panel rather than in a floating dropdown. */
  .search-modal__content .predictive-search-form__content-wrapper {
    position: static;
    max-height: none;
    border-radius: 0;
    overflow: visible;
  }

  .search-modal__content .predictive-search-form__content {
    max-height: none;
    padding-block-start: var(--padding-lg);
  }

  .search-modal__content .predictive-search-form__footer {
    position: static;
    background-image: none;
  }

  /* ── Default view — Figma 2001:1233 / 2001:1241 (desktop),
        2001:2095 / 2001:2103 (mobile) ────────────────────────────────

     Two labelled link groups shown before anything is typed. Figma pads each
     group by 8 and leaves 16 either side of the rule, so the rule sits 24 from
     the text above and the next heading sits 24 below it. The last group keeps
     its rule — the design closes the stack with one. */

  .predictive-search-default-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8 */
    padding-block: 0.5rem 1.5rem; /* 8 / 8 + 16 */
    border-block-end: 1px solid var(--color-sand-200);
  }

  .predictive-search-default-menu + .predictive-search-default-menu {
    padding-block-start: 1.5rem; /* 16 + 8 */
  }

  .predictive-search-default-menu__heading {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--font-body-lg--size); /* 18 */
    font-weight: 600;
    line-height: var(--font-body-lg--line-height);
    letter-spacing: var(--letter-spacing--000);
    text-transform: none;
    color: var(--nav-panel-link-color);
  }

  .predictive-search-default-menu__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8 */
  }

  .predictive-search-default-menu__link {
    display: block;
    font-family: var(--font-body--family);
    font-size: var(--font-body-md--size); /* 16 */
    font-weight: 400;
    line-height: var(--font-body-md--line-height);
    color: var(--nav-panel-link-color);
    text-decoration: none;
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .predictive-search-default-menu__link:hover,
  .predictive-search-default-menu__link:focus-visible {
    color: var(--nav-panel-link-color-hover);
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:317) */
.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:318) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  /* Crops blocks that use negative margins to bleed past the section edge. */
  .section-content-wrapper--clip {
    overflow: hidden;
  }

  .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;
  }

  /* A separate minimum height below 750px. The class is doubled deliberately: base.css
     sets `min-height: var(--section-min-height)` on a bare `.section` and is emitted
     after the bundled snippet stylesheets, so a single-class rule here would lose the
     tie and silently do nothing.

     Both the section AND the content wrapper have to move together. The section is a
     two-row grid — the background sits in its own auto row above the content — so
     raising only the section's min-height leaves the extra space to be shared between
     those rows, and the copy gets pushed down by half of it. base.css sizes the wrapper
     from --section-min-height (the desktop value); restating it here from the mobile
     value keeps the content row responsible for the whole height, which collapses the
     background row back to zero and puts the copy where the design has it.

     The variable can't simply be rebound, because it is emitted in the inline style
     attribute and would beat any rule here. */
  @media screen and (max-width: 749px) {
    .section.section--has-mobile-height {
      min-height: var(--section-min-height-mobile, var(--section-min-height, auto));
    }

    .section--has-mobile-height .section-content-wrapper.section-content-wrapper {
      min-height: calc(
        var(--section-min-height-mobile, var(--section-min-height, 0px)) - var(--section-height-offset, 0px)
      );
    }
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }

  /* Floating media — spans full section, positioned absolutely above the content. */
  .section--has-floating-media {
    position: relative;
  }

  .section-floating-media {
    /* Edge offset = 0 for full-width; page-margin for page-width (overridden below). */
    --floating-media-edge-offset: 0px;
    /* Bind the unscoped vars (read by transforms / width below) to the desktop
       values. The @media rule at the bottom of this stylesheet rebinds them to
       the mobile values when use_floating_media_mobile_settings is on. We can't
       set them directly in the inline `style` attr because that would beat the
       media-query rule on mobile (custom-property cascade). */
    --floating-media-width: var(--floating-media-width-desktop, 7.5rem);
    --floating-media-offset-x: var(--floating-media-offset-x-desktop, 0);
    --floating-media-offset-y: var(--floating-media-offset-y-desktop, 0);
    position: absolute;
    grid-column: 1 / -1;
    width: var(--floating-media-width, 7.5rem);
    pointer-events: none;
    z-index: var(--layer-raised, 10);
    transform: translate(var(--floating-media-offset-x, 0), var(--floating-media-offset-y, 0))
      rotate(var(--floating-media-rotation, 0));
  }

  /* When the section is page-width, anchor horizontally to the page-width
     content edge rather than the viewport edge. `--util-page-margin-offset`
     is defined on `.section` and equals the left/right gutter width. */
  .section--page-width .section-floating-media {
    --floating-media-edge-offset: var(--util-page-margin-offset);
  }

  .section-floating-media img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Text variant hugs its content rather than using the width slider. */
  .section-floating-media.section-floating-media--text {
    width: max-content;
    max-width: 100%;
  }

  .section-floating-media__text {
    /* Drive base.css preset rules (.h1.h1, .paragraph, …) which read
       `color: var(--color, …)` — without this they fall through the invalid
       fallback chain and inherit from the section instead of the local
       color scheme set on this element. */
    --color: var(--color-foreground);
    display: block;
    width: 100%;
    background-color: var(--color-background);
    color: var(--color);
    text-align: var(--text-align, center);
    box-sizing: border-box;
    word-wrap: break-word;
  }

  @media screen and (max-width: 749px) {
    .section-floating-media__text.mobile-preset-paragraph {
      font-family: var(--font-paragraph--family);
      font-style: var(--font-paragraph--style);
      font-weight: var(--font-paragraph--weight);
      font-size: var(--font-paragraph--size);
      line-height: var(--font-paragraph--line-height);
      letter-spacing: 0;
      text-transform: var(--font-paragraph--case);
    }

    .section-floating-media__text.mobile-preset-h1 {
      font-family: var(--font-h1--family);
      font-style: var(--font-h1--style);
      font-weight: var(--font-h1--weight);
      font-size: var(--font-h1--size);
      line-height: var(--font-h1--line-height);
      letter-spacing: var(--font-h1--letter-spacing);
      text-transform: var(--font-h1--case);
    }

    .section-floating-media__text.mobile-preset-h2 {
      font-family: var(--font-h2--family);
      font-style: var(--font-h2--style);
      font-weight: var(--font-h2--weight);
      font-size: var(--font-h2--size);
      line-height: var(--font-h2--line-height);
      letter-spacing: var(--font-h2--letter-spacing);
      text-transform: var(--font-h2--case);
    }

    .section-floating-media__text.mobile-preset-h3 {
      font-family: var(--font-h3--family);
      font-style: var(--font-h3--style);
      font-weight: var(--font-h3--weight);
      font-size: var(--font-h3--size);
      line-height: var(--font-h3--line-height);
      letter-spacing: var(--font-h3--letter-spacing);
      text-transform: var(--font-h3--case);
    }

    .section-floating-media__text.mobile-preset-h4 {
      font-family: var(--font-h4--family);
      font-style: var(--font-h4--style);
      font-weight: var(--font-h4--weight);
      font-size: var(--font-h4--size);
      line-height: var(--font-h4--line-height);
      letter-spacing: var(--font-h4--letter-spacing);
      text-transform: var(--font-h4--case);
    }

    .section-floating-media__text.mobile-preset-h5 {
      font-family: var(--font-h5--family);
      font-style: var(--font-h5--style);
      font-weight: var(--font-h5--weight);
      font-size: var(--font-h5--size);
      line-height: var(--font-h5--line-height);
      letter-spacing: var(--font-h5--letter-spacing);
      text-transform: var(--font-h5--case);
    }

    .section-floating-media__text.mobile-preset-h6 {
      font-family: var(--font-h6--family);
      font-style: var(--font-h6--style);
      font-weight: var(--font-h6--weight);
      font-size: var(--font-h6--size);
      line-height: var(--font-h6--line-height);
      letter-spacing: var(--font-h6--letter-spacing);
      text-transform: var(--font-h6--case);
    }

    .section-floating-media__text.mobile-preset-h7 {
      font-family: var(--font-h7--family);
      font-style: var(--font-h7--style);
      font-weight: var(--font-h7--weight);
      font-size: var(--font-h7--size);
      line-height: var(--font-h7--line-height);
      letter-spacing: var(--font-h7--letter-spacing);
      text-transform: var(--font-h7--case);
    }
  }

  .section-floating-media--v-top {
    top: 0;
  }

  .section-floating-media--v-bottom {
    bottom: 0;
  }

  .section-floating-media--v-center {
    top: 50%;
    transform: translate(var(--floating-media-offset-x, 0), calc(-50% + var(--floating-media-offset-y, 0)))
      rotate(var(--floating-media-rotation, 0));
  }

  .section-floating-media--h-left {
    left: var(--floating-media-edge-offset);
  }

  .section-floating-media--h-right {
    right: var(--floating-media-edge-offset);
  }

  .section-floating-media--h-center {
    left: 50%;
    transform: translate(calc(-50% + var(--floating-media-offset-x, 0)), var(--floating-media-offset-y, 0))
      rotate(var(--floating-media-rotation, 0));
  }

  .section-floating-media--v-center.section-floating-media--h-center {
    transform: translate(calc(-50% + var(--floating-media-offset-x, 0)), calc(-50% + var(--floating-media-offset-y, 0)))
      rotate(var(--floating-media-rotation, 0));
  }

  @media screen and (max-width: 749px) {
    .section--floating-media-hide-mobile .section-floating-media {
      display: none;
    }

    /*
      Mobile floating-media overrides. When the user has enabled mobile-specific
      settings, rebind the unscoped vars to the mobile values; all transforms
      and the width property automatically pick them up. Falls back to the
      desktop value if a particular mobile var wasn't emitted.
    */
    .section-floating-media--has-mobile-settings {
      --floating-media-width: var(--floating-media-width-mobile, var(--floating-media-width-desktop, 7.5rem));
      --floating-media-offset-x: var(--floating-media-offset-x-mobile, var(--floating-media-offset-x-desktop, 0));
      --floating-media-offset-y: var(--floating-media-offset-y-mobile, var(--floating-media-offset-y-desktop, 0));
    }

    /*
      Mobile anchor: when one is set, reset the desktop top/bottom/left/right
      first (the desktop anchor classes set them), then apply the mobile anchor.
    */
    .section-floating-media:where(
      .section-floating-media--v-mobile-top,
      .section-floating-media--v-mobile-center,
      .section-floating-media--v-mobile-bottom
    ) {
      top: auto;
      bottom: auto;
    }

    .section-floating-media:where(
      .section-floating-media--h-mobile-left,
      .section-floating-media--h-mobile-center,
      .section-floating-media--h-mobile-right
    ) {
      left: auto;
      right: auto;
    }

    .section-floating-media--v-mobile-top {
      top: 0;
    }

    .section-floating-media--v-mobile-bottom {
      bottom: 0;
    }

    .section-floating-media--v-mobile-center {
      top: 50%;
      transform: translate(var(--floating-media-offset-x, 0), calc(-50% + var(--floating-media-offset-y, 0)))
        rotate(var(--floating-media-rotation, 0));
    }

    .section-floating-media--h-mobile-left {
      left: var(--floating-media-edge-offset);
    }

    .section-floating-media--h-mobile-right {
      right: var(--floating-media-edge-offset);
    }

    .section-floating-media--h-mobile-center {
      left: 50%;
      transform: translate(calc(-50% + var(--floating-media-offset-x, 0)), var(--floating-media-offset-y, 0))
        rotate(var(--floating-media-rotation, 0));
    }

    .section-floating-media--v-mobile-center.section-floating-media--h-mobile-center {
      transform: translate(calc(-50% + var(--floating-media-offset-x, 0)), calc(-50% + var(--floating-media-offset-y, 0)))
        rotate(var(--floating-media-rotation, 0));
    }
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:320) */
.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:322) */
.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:323) */
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-styles (INDEX:326) */
/*
   * 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:328) */
.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 {
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    margin-inline: 0.2rem 0.75rem;
  }

  .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-size--sm);
    color: var(--color-foreground);
  }

  .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:sustainability-motion (INDEX:335) */
sustainability-section {
    --sus-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --sus-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --sus-reveal-duration: 0.9s;
    /* Figma's 80px desktop gutter and 16px mobile gutter, in the fluid rem the theme scales with. */
    --sus-gutter: 1rem;
    --sus-content-width: 80rem;
  }

  /* The base section is a three-column grid; these sections lay out their own column.
     Doubled selector: base.css's `.section` is emitted after snippet styles and would win a tie. */
  sustainability-section.section {
    display: block;
    position: relative;
  }

  @media screen and (min-width: 750px) {
    sustainability-section {
      --sus-gutter: 5rem;
    }
  }

  .sus-container {
    width: 100%;
    max-width: calc(var(--sus-content-width) + var(--sus-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--sus-gutter);
    box-sizing: border-box;
  }

  .sus-hidden-mobile {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .sus-hidden-mobile {
      display: revert;
    }

    .sus-hidden-desktop {
      display: none;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    sustainability-section[data-motion-ready] .sus-reveal:not(.is-inview) {
      opacity: 0;
    }

    .sus-reveal.is-inview {
      animation: sus-rise var(--sus-reveal-duration) var(--sus-ease-out) both;
      animation-delay: var(--reveal-delay, 0s);
    }

    .sus-reveal--scale.is-inview {
      animation-name: sus-rise-scale;
    }

    @keyframes sus-rise {
      from {
        opacity: 0;
        transform: translate3d(0, 1.75rem, 0);
      }

      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes sus-rise-scale {
      from {
        opacity: 0;
        transform: translate3d(0, 1.25rem, 0) scale(0.97);
      }

      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }
  }
/* END_SNIPPET:sustainability-motion */

/* START_SNIPPET:text (INDEX:338) */
: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;
  }

  @media screen and (max-width: 749px) {
    [style*='--horizontal-alignment-mobile: center'] .text-block {
      --text-align-default: center;
    }

    [style*='--horizontal-alignment-mobile: flex-end'] .text-block {
      --text-align-default: right;
    }

    [style*='--horizontal-alignment-mobile: flex-start'] > .text-block {
      --text-align-default: left;
    }

    [style*='--horizontal-alignment-mobile: center'] > .text-block {
      --text-align-default: center;
    }

    [style*='--horizontal-alignment-mobile: 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);
    height: var(--block-height);
  }

  .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: var(--text-wrap, pretty);
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: var(--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);
  }

  /* base.css propagates the .hN presets onto .text-block children explicitly, but the
     design-system presets (.display-stat, .text-label*, .text-body-lg) style only the
     element they sit on. Hand them down so the rendered richtext picks them up. Element
     styles like `em { font-style: italic }` still win, so inline emphasis survives. */
  .text-block:is(
      .display-hero,
      .display-stat,
      .text-eyebrow,
      .text-label,
      .text-label-lg,
      .text-body-xl,
      .text-body-lg
    )
    > *,
  .text-block:is(
      .display-hero,
      .display-stat,
      .text-eyebrow,
      .text-label,
      .text-label-lg,
      .text-body-xl,
      .text-body-lg
    )
    :is(h1, h2, h3, h4, h5, h6, p) {
    font: inherit;
    letter-spacing: inherit;
  }

  .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));

    margin-block-start: var(--margin-block-start-mobile, var(--margin-block-start));
    margin-block-end: var(--margin-block-end-mobile, var(--margin-block-end));
    margin-inline-start: var(--margin-inline-start-mobile, var(--margin-inline-start));
    margin-inline-end: var(--margin-inline-end-mobile, var(--margin-inline-end));

    width: calc(var(--width) - var(--margin-inline-start-mobile, var(--margin-inline-start)) - var(--margin-inline-end-mobile, var(--margin-inline-end)));
  }

  @media screen and (min-width: 750px) {
    .text-block--background {
      margin-block-start: var(--margin-block-start);
      margin-block-end: var(--margin-block-end);
      margin-inline-start: var(--margin-inline-start);
      margin-inline-end: var(--margin-inline-end);

      width: calc(var(--width) - var(--margin-inline-start) - var(--margin-inline-end));
    }
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }

  /*
    Mobile preset override. The desktop preset class (h1, h2, …, paragraph) stays
    on the element; on mobile, .mobile-preset-{value} wins via the chained
    .text-block.text-block selector (higher specificity than base.css's
    .text-block.h1 desktop rule).
  */
  @media screen and (max-width: 749px) {
    .text-block.text-block.mobile-preset-paragraph,
    .text-block.text-block.mobile-preset-paragraph > *,
    .text-block.text-block.mobile-preset-paragraph :is(h1, h2, h3, h4, h5, h6) {
      font-family: var(--font-paragraph--family);
      font-style: var(--font-paragraph--style);
      font-weight: var(--font-paragraph--weight);
      font-size: var(--font-paragraph--size);
      line-height: var(--font-paragraph--line-height);
      letter-spacing: 0;
      text-transform: var(--font-paragraph--case);
      color: var(--color, var(--color-foreground));
    }

    .text-block.text-block.mobile-preset-h1,
    .text-block.text-block.mobile-preset-h1 > *,
    .text-block.text-block.mobile-preset-h1 :is(h1, h2, h3, h4, h5, h6) {
      font-family: var(--font-h1--family);
      font-style: var(--font-h1--style);
      font-weight: var(--font-h1--weight);
      font-size: var(--font-h1--size);
      line-height: var(--font-h1--line-height);
      letter-spacing: var(--font-h1--letter-spacing);
      text-transform: var(--font-h1--case);
      color: var(--color, var(--font-h1-color));
    }

    .text-block.text-block.mobile-preset-h2,
    .text-block.text-block.mobile-preset-h2 > *,
    .text-block.text-block.mobile-preset-h2 :is(h1, h2, h3, h4, h5, h6) {
      font-family: var(--font-h2--family);
      font-style: var(--font-h2--style);
      font-weight: var(--font-h2--weight);
      font-size: var(--font-h2--size);
      line-height: var(--font-h2--line-height);
      letter-spacing: var(--font-h2--letter-spacing);
      text-transform: var(--font-h2--case);
      color: var(--color, var(--font-h2-color));
    }

    .text-block.text-block.mobile-preset-h3,
    .text-block.text-block.mobile-preset-h3 > *,
    .text-block.text-block.mobile-preset-h3 :is(h1, h2, h3, h4, h5, h6) {
      font-family: var(--font-h3--family);
      font-style: var(--font-h3--style);
      font-weight: var(--font-h3--weight);
      font-size: var(--font-h3--size);
      line-height: var(--font-h3--line-height);
      letter-spacing: var(--font-h3--letter-spacing);
      text-transform: var(--font-h3--case);
      color: var(--color, var(--font-h3-color));
    }

    .text-block.text-block.mobile-preset-h4,
    .text-block.text-block.mobile-preset-h4 > *,
    .text-block.text-block.mobile-preset-h4 :is(h1, h2, h3, h4, h5, h6) {
      font-family: var(--font-h4--family);
      font-style: var(--font-h4--style);
      font-weight: var(--font-h4--weight);
      font-size: var(--font-h4--size);
      line-height: var(--font-h4--line-height);
      letter-spacing: var(--font-h4--letter-spacing);
      text-transform: var(--font-h4--case);
      color: var(--color, var(--font-h4-color));
    }

    .text-block.text-block.mobile-preset-h5,
    .text-block.text-block.mobile-preset-h5 > *,
    .text-block.text-block.mobile-preset-h5 :is(h1, h2, h3, h4, h5, h6) {
      font-family: var(--font-h5--family);
      font-style: var(--font-h5--style);
      font-weight: var(--font-h5--weight);
      font-size: var(--font-h5--size);
      line-height: var(--font-h5--line-height);
      letter-spacing: var(--font-h5--letter-spacing);
      text-transform: var(--font-h5--case);
      color: var(--color, var(--font-h5-color));
    }

    .text-block.text-block.mobile-preset-h6,
    .text-block.text-block.mobile-preset-h6 > *,
    .text-block.text-block.mobile-preset-h6 :is(h1, h2, h3, h4, h5, h6) {
      font-family: var(--font-h6--family);
      font-style: var(--font-h6--style);
      font-weight: var(--font-h6--weight);
      font-size: var(--font-h6--size);
      line-height: var(--font-h6--line-height);
      letter-spacing: var(--font-h6--letter-spacing);
      text-transform: var(--font-h6--case);
      color: var(--color, var(--font-h6-color));
    }

    .text-block.text-block.mobile-preset-h7,
    .text-block.text-block.mobile-preset-h7 > *,
    .text-block.text-block.mobile-preset-h7 :is(h1, h2, h3, h4, h5, h6) {
      font-family: var(--font-h7--family);
      font-style: var(--font-h7--style);
      font-weight: var(--font-h7--weight);
      font-size: var(--font-h7--size);
      line-height: var(--font-h7--line-height);
      letter-spacing: var(--font-h7--letter-spacing);
      text-transform: var(--font-h7--case);
      color: var(--color, var(--font-h7-color));
    }

    /*
      Design-system body presets as a mobile step. Unlike the hN rules above these set
      only size and line-height: the desktop class already carries the Geom family and
      the .text-w-* weight, and the Figma mobile band keeps both — only the position on
      the body ramp changes (Body/XL 24/1.3 -> Body/LG 18/1.5).
    */
    .text-block.text-block.mobile-preset-text-body-lg,
    .text-block.text-block.mobile-preset-text-body-lg > *,
    .text-block.text-block.mobile-preset-text-body-lg :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--font-body-lg--size);
      line-height: var(--font-body-lg--line-height);
    }

    .text-block.text-block.mobile-preset-text-body-md,
    .text-block.text-block.mobile-preset-text-body-md > *,
    .text-block.text-block.mobile-preset-text-body-md :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--font-body-md--size);
      line-height: var(--font-body-md--line-height);
    }

    /*
      mobile-preset = custom: keep the desktop preset's family / weight / etc.
      and only override font-size + line-height with the user's mobile values
      (use_mobile_settings + mobile_font_size + mobile_custom_line_height).
      Triple-chained class selector keeps us ahead of any deeper-context
      selectors (e.g. .product-card .text-block.h6 …).
    */
    .text-block.text-block.text-block.mobile-preset-custom,
    .text-block.text-block.text-block.mobile-preset-custom > *,
    .text-block.text-block.text-block.mobile-preset-custom :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--font-size-mobile, var(--font-size, inherit));
      line-height: var(--line-height-mobile, var(--line-height, inherit));
    }
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:340) */
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-paragraph--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-main-picker (INDEX:355) */
/* Dependent configuration selectors: incompatible screen lists and the internal
     "None (...)" placeholders stay in the DOM for the picker's bookkeeping but never render. */
  .variant-option--dependent-hidden,
  .variant-option__button-label--placeholder {
    display: none !important;
  }

  /* The model-first chooser sizes to its pills and shares the row with the screen dropdown;
     its label is a <p> (not a legend), styled to match the option legends on the PDP. */
  .variant-option.variant-option--dependent-chooser {
    display: block;
    flex: 0 0 auto;
  }

  /* A wrapping flex container's intrinsic width sums label and pills as one line, which pushed
     the screen dropdown onto the next row; a block chooser with its own pills row is as wide as
     its widest line only. */
  .variant-option__chooser-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Content-sized pills on one row, like every other option value (the equal-width rule is
     not applied to the chooser, and three classes outrank base.css's two). */
  .variant-option.variant-option--buttons.variant-option--dependent-chooser .variant-option__button-label {
    flex: 0 0 auto;
    width: auto;
    min-width: fit-content;
  }

  .variant-option--dependent-chooser .variant-option__chooser-label {
    flex: 0 0 100%;
    margin: 0 0 var(--margin-xs);
    padding: 0;
    font-size: var(--font-size--sm);
    font-weight: bold;
    color: var(--variant-option-label-color, var(--color-foreground));
  }

  .product-details .variant-option--dependent-chooser .variant-option__chooser-label {
    min-height: 0;
    margin: 0 0 12px;
    color: #064c4d;
    font-family: var(--font-body--family);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
  }

  /* The PDP legend rule reserves 72px (45px block + 27px margin) for labels that carry a
     sub-line, such as "Color:" over the chosen swatch value. Text-only option labels have no
     sub-line, so they keep the type but sit 12px above their controls (client request 2026-10-01). */
  .product-details .variant-option--buttons:not(.variant-option--swatches) legend {
    min-height: 0;
    margin: 0 0 12px;
  }

  /* Long value lists: a select-style trigger (the Sana form input look, Figma 2828:395) over
     the same radio labels rendered as rows. The equal-width grid would squeeze the trigger into
     one narrow column, so a long-list fieldset lays out as a wrapping flex row instead. */
  .variant-option.variant-option--long-list {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 200px;
    width: auto;
    min-width: 200px;
    max-width: 320px;
  }

  @media screen and (max-width: 749px) {
    .variant-option.variant-option--long-list,
    .variant-option--long-list .variant-option__dropdown {
      max-width: none;
    }
  }

  .variant-option__dropdown {
    position: relative;
    z-index: 1;
    flex: 0 0 100%;
    width: 100%;
    max-width: 320px;
  }

  /* The open list floats over whatever follows (quantity, price, Add to cart) instead of
     pushing it down; the open control sits above its neighbours in the column's stacking order. */
  .variant-option__dropdown[open] {
    z-index: 30;
  }

  /* Same box as a text pill: 8px vertical padding around 14px/21px text, 39px tall. */
  .variant-option__dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    padding: 8px 16px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-body--family);
    font-size: 14px;
    line-height: 21px;
    color: var(--color-teal-800, #0f4c4f);
    background: #fff;
    border: 1px solid var(--color-sand-200, #d9d2c5);
    border-radius: 14px;
    box-shadow: 0 0.5px 0.5px rgba(25, 33, 61, 0.04);
  }

  .variant-option__dropdown-trigger::-webkit-details-marker {
    display: none;
  }

  .variant-option__dropdown-trigger:hover {
    border-color: var(--color-teal-500, #42a899);
  }

  .variant-option__dropdown-trigger:focus-visible {
    outline: none;
    border-color: var(--color-teal-500, #42a899);
    box-shadow: 0 0 0 3px rgba(66, 168, 153, 0.2);
  }

  .variant-option__dropdown-caret {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
  }

  .variant-option__dropdown[open] .variant-option__dropdown-caret {
    transform: rotate(180deg);
  }

  .variant-option__dropdown-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    max-height: 320px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--color-sand-200, #d9d2c5);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(25, 33, 61, 0.14);
  }

  /* Rows, not pills: no sliding background, no ring, full width, left-aligned text. */
  .variant-option.variant-option--buttons .variant-option__dropdown-list .variant-option__button-label {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--color-teal-800, #0f4c4f);
    box-shadow: none;
  }

  .variant-option.variant-option--buttons .variant-option__dropdown-list .variant-option__button-label:hover {
    background: var(--color-teal-50, #f0fdfa);
    border-color: transparent;
    color: var(--color-teal-800, #0f4c4f);
  }

  .variant-option.variant-option--buttons .variant-option__dropdown-list .variant-option__button-label:has(:checked),
  .variant-option.variant-option--buttons .variant-option__dropdown-list .variant-option__button-label:has(:checked):hover {
    background: var(--color-teal-800, #0f4c4f);
    border-color: transparent;
    color: #fff;
  }

  .variant-option.variant-option--buttons .variant-option__dropdown-list .variant-option__button-label:has([data-option-available='false']) {
    color: var(--color-sea-grey-700, #6b7b78);
    text-decoration: line-through;
  }

  .variant-option__dropdown-list .variant-option__button-label__pill,
  .variant-option__dropdown-list .variant-option__button-label::before,
  .variant-option__dropdown-list .variant-option__button-label::after,
  .variant-option__dropdown-list .variant-option__strikethrough {
    display: none;
  }

  .variant-option__dropdown-list .variant-option__button-label__text {
    text-align: start;
    text-wrap: auto;
  }

  .variant-option__price-summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    padding: 4px 8px;
    color: #064c4d;
    background: #f0fdfa;
    font-size: 12px;
    line-height: 21px;
  }

  .variant-option__price-summary strong { font-weight: 500; }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-picker-styles (INDEX:356) */
/* 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;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:357) */
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 (INDEX:358) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:359) */
.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 */