/** Shopify CDN: Minification failed

Line 122:2 Unexpected "{"
Line 122:3 Expected identifier but found "%"
Line 123:4 Unexpected "!"
Line 129:3 Expected identifier but found "%"
Line 288:2 Unexpected "{"
Line 288:3 Expected identifier but found "%"
Line 288:58 Unexpected "("
Line 289:85 Unterminated string token
Line 292:69 Expected identifier but found "%"

**/
/* START_SECTION:header-announcements (INDEX:12) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

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

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */
/* START_SECTION:pw-footer (INDEX:44) */
.pw-footer { background: var(--pw-ink, #1d1b19); color: var(--pw-band, #e7e0d1); }
  .pw-footer__top { max-width: 1180px; margin: 0 auto;
    padding: clamp(34px,5vw,60px) clamp(20px,4vw,46px) clamp(24px,3vw,34px);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(28px,4vw,56px); }
  .pw-footer__brand { display: flex; flex-direction: column; gap: 16px; }
  .pw-footer__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
  .pw-footer__badge { width: 40px; height: 40px; border-radius: 50%; background: var(--pw-rose, #C44D6F);
    color: var(--pw-cream, #f8f2e8); display: flex; align-items: center; justify-content: center;
    font: 400 18px/1 var(--pw-serif, 'DM Serif Display'), serif; flex: none; }
  .pw-footer__word { display: flex; flex-direction: column; line-height: 1; }
  .pw-footer__name { font: 400 17px/1 var(--pw-serif, 'DM Serif Display'), serif; letter-spacing: .16em; color: var(--pw-band, #e7e0d1); }
  .pw-footer__tag { font: italic 11px/1 var(--pw-body, 'Newsreader'), serif; color: rgba(231,224,209,.55); margin-top: 5px; }
  .pw-footer__socials { display: flex; gap: 11px; margin-top: 2px; flex-wrap: wrap; }
  .pw-footer__social { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(231,224,209,.28);
    display: flex; align-items: center; justify-content: center; color: var(--pw-band, #e7e0d1);
    text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
  .pw-footer__social:hover { background: var(--pw-rose, #C44D6F); border-color: var(--pw-rose, #C44D6F); color: #fff; }

  .pw-footer__join { display: flex; flex-direction: column; gap: 14px; }
  .pw-footer__eyebrow { font: 700 11px/1 var(--pw-mono, 'Courier Prime'), monospace; letter-spacing: .2em;
    text-transform: uppercase; color: #DD8BA0; }
  .pw-footer__copy { margin: 0; font-size: 1.04rem; line-height: 1.5; color: rgba(231,224,209,.78); max-width: 34ch; }
  .pw-footer__form { display: flex; flex-wrap: wrap; gap: 9px; }
  {%- comment -%}
    !important (Paul, 2026-07-02: "in the footer the email sign up you cannot see the text"):
    confirmed live the input rendered with an opaque light background instead of the intended
    near-transparent dark one, making the cream text nearly invisible against it (cream-on-
    cream) — some higher-priority/later-loaded rule was winning over this class selector.
    Forcing both background AND text color guarantees the intended dark-input/cream-text
    contrast regardless of what else targets plain <input> elements.
  {%- endcomment -%}
  .pw-footer__input { flex: 1; min-width: 170px; padding: 14px 16px; border: 1px solid rgba(231,224,209,.3);
    background: rgba(231,224,209,.06) !important; color: var(--pw-cream, #f8f2e8) !important;
    font-family: var(--pw-body, 'Newsreader'), serif; font-size: 1rem; border-radius: 2px; outline: none; }
  .pw-footer__input::placeholder { color: rgba(231,224,209,.5) !important; }
  .pw-footer__input:focus { border-color: var(--pw-rose, #C44D6F); }
  .pw-footer__submit { background: var(--pw-rose, #C44D6F); color: #fff; border: none; padding: 14px 24px;
    font: 700 11px/1 var(--pw-mono, 'Courier Prime'), monospace; letter-spacing: .14em; text-transform: uppercase;
    border-radius: 2px; cursor: pointer; transition: background-color .2s; }
  .pw-footer__submit:hover { background: var(--pw-rose-dark, #A83C5B); }
  .pw-footer__success { margin: 0; color: #DD8BA0; font-family: var(--pw-body, 'Newsreader'), serif; }
  .pw-footer__error { margin: 0 0 4px; color: #ff9d9d; font-family: var(--pw-body, 'Newsreader'), serif; font-size: .95rem; }

  .pw-footer__bar { border-top: 1px solid rgba(231,224,209,.16); }
  .pw-footer__bar-inner { max-width: 1180px; margin: 0 auto; padding: clamp(18px,2.5vw,24px) clamp(20px,4vw,46px);
    display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; justify-content: space-between; }
  .pw-footer__nav { display: flex; flex-wrap: wrap; gap: 22px; }
  .pw-footer__nav-link { font: 700 10px/1 var(--pw-mono, 'Courier Prime'), monospace; letter-spacing: .16em;
    text-transform: uppercase; color: #DD8BA0; text-decoration: none; transition: color .2s; }
  .pw-footer__nav-link:hover { color: #fff; }
  .pw-footer__copyright { font: 700 9px/1 var(--pw-mono, 'Courier Prime'), monospace; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(231,224,209,.45); }

  .pw-footer__localization { position: relative; font-size: 12px; }
  .pw-footer__localization-toggle {
    list-style: none; cursor: pointer; user-select: none;
    background: rgba(231,224,209,.06); color: var(--pw-band, #e7e0d1);
    border: 1px solid rgba(231,224,209,.28); border-radius: 2px;
    font: 700 10px/1 var(--pw-mono, 'Courier Prime'), monospace; letter-spacing: .1em;
    text-transform: uppercase; padding: 8px 10px; display: inline-block;
  }
  .pw-footer__localization-toggle::-webkit-details-marker { display: none; }
  .pw-footer__localization-toggle::after { content: ' \25BE'; }
  .pw-footer__localization[open] .pw-footer__localization-toggle::after { content: ' \25B4'; }
  .pw-footer__localization-toggle:hover { border-color: var(--pw-rose, #C44D6F); }
  .pw-footer__localization-panel {
    position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 10;
    max-height: 320px; overflow-y: auto; min-width: 220px; max-width: calc(100vw - 40px);
    background: var(--pw-ink, #1d1b19); border: 1px solid rgba(231,224,209,.28);
    border-radius: 4px; padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  }
  .pw-footer__localization-panel .localization-form__list-item { color: var(--pw-band, #e7e0d1); }
/* END_SECTION:pw-footer */
/* START_SECTION:pw-library (INDEX:50) */
.pw-library { background: var(--pw-cream); color: var(--pw-ink); }
  .pw-library__inner { max-width: 900px; margin: 0 auto;
    padding: clamp(28px,4vw,56px) clamp(20px,4vw,46px) clamp(48px,6vw,80px); }
  .pw-library__head { margin-bottom: clamp(18px,2.5vw,28px); padding-bottom: clamp(16px,2vw,24px);
    border-bottom: 1px solid var(--pw-line); }
  .pw-library__eyebrow { display: block; margin-bottom: 10px; color: var(--pw-rose); }
  .pw-library__title { margin: 0; font-family: var(--pw-serif); font-weight: 400;
    font-size: clamp(2.2rem,5.5vw,3.4rem); line-height: 1; letter-spacing: -.01em; color: var(--pw-ink); }
  .pw-library__status { margin: 18px 0 0; font-family: var(--pw-body); font-size: .95rem; color: var(--pw-soft); }
  .pw-library__contact-sheet-banner { margin: 10px 0 0; font-family: var(--pw-body); font-size: .95rem;
    color: var(--pw-soft); max-width: 46ch; }

  .pw-library__signin { padding: 30px 0; border-top: 1px solid var(--pw-line); }
  .pw-library__signin-copy { margin: 0 0 18px; font-family: var(--pw-serif); font-size: 1.25rem;
    line-height: 1.4; color: var(--pw-soft); max-width: 34ch; }
  .pw-library__signin-btn { display: inline-flex; }

  /* Signed-out banner (Paul, 2026-08-02) — the first thing a logged-out visitor reads, so it is
     set in the display serif at a size that cannot be missed on a 390px phone. */
  .pw-library__request-signed-out { margin: 20px 0 0; font-family: var(--pw-serif);
    font-size: 1.4rem; color: var(--pw-ink); }
  .pw-library__request-bridge { margin: 24px 0 4px; padding-top: 24px; border-top: 1px solid var(--pw-line);
    font-family: var(--pw-mono); font-weight: 700; font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--pw-soft); }
  .pw-library__request-explainer { margin: 0 0 14px; font-family: var(--pw-body); font-size: .95rem;
    color: var(--pw-soft); max-width: 46ch; }

  .pw-library__subhead { margin: 28px 0 6px; font-family: var(--pw-serif); font-weight: 400;
    font-size: 1.5rem; color: var(--pw-ink); }
  .pw-library__owned { margin-top: 10px; }

  /* Favorites, Phase 3 (2026-07-21) — Library/Favorites tabs. This theme has no prior tab
     pattern; kept consistent with the existing mono-uppercase button language (S8). */
  .pw-library__tabs { display: flex; gap: 4px; margin-top: 22px; border-bottom: 1px solid var(--pw-line); }
  .pw-library__tab { min-height: 44px; padding: 0 18px; font-family: var(--pw-mono); font-weight: 700;
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-soft);
    background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
    transition: color .15s ease, border-color .15s ease; }
  .pw-library__tab:hover { color: var(--pw-ink); }
  .pw-library__tab[aria-selected="true"] { color: var(--pw-ink); border-bottom-color: var(--pw-rose, #C44D6F); }
  .pw-library__panel[hidden] { display: none; }
  .pw-library__panel { margin-top: 20px; }

  .pw-library__item { display: flex; align-items: center; gap: 16px;
    padding: 16px 0; border-bottom: 1px solid var(--pw-line); }
  .pw-library__thumb { flex-shrink: 0; width: 56px; height: 56px; object-fit: cover;
    border-radius: 4px; border: 1px solid var(--pw-line); background: var(--pw-card); }
  .pw-library__meta { flex: 1; min-width: 0; }
  .pw-library__item-title { font-family: var(--pw-body); font-size: 1.06rem; line-height: 1.3; color: var(--pw-ink); }
  .pw-library__item-sub { margin-top: 4px; font-family: var(--pw-mono); font-weight: 700;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pw-soft); }
  .pw-library__item-count { margin-top: 4px; font-family: var(--pw-body); font-size: .85rem;
    color: var(--pw-soft); }

  /* Download control — Option A crisp mono, consistent with the S8 button convention. */
  /* FAVORITES ACTIONS (2026-08-02, Paul: "a way to remove from Favorites and an Add to Cart
     button below if they are ready to buy"). Remove previously reused .pw-library__download —
     a transparent outlined button that read as a secondary link and was easy to miss on a phone;
     it now has its own quieter-but-present treatment, and Add to Cart is the filled primary so
     the buy action is unmistakable. Both are 44px tall (mobile tap target, dev-rules §6). */
  .pw-library__fav-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  /* Grid tiles are equal-height (grid stretch) flex columns; pinning the action row to the bottom
     keeps Remove/Add-to-cart aligned across a row even when titles wrap to different line counts
     (Amy/Paul 8/4: "buttons and text don't align"). List view keeps the flowing 10px gap. */
  .pw-library__grid-item .pw-library__fav-actions { margin-top: auto; padding-top: 10px; }
  .pw-library__fav-cart, .pw-library__fav-remove { min-height: 44px; padding: 0 18px; flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--pw-mono); font-weight: 700; font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; border-radius: 3px; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, opacity .15s ease; }
  .pw-library__fav-cart { color: var(--pw-cream); background: var(--pw-ink); border: 1px solid var(--pw-ink); }
  .pw-library__fav-cart:hover { opacity: .85; }
  .pw-library__fav-cart:disabled { opacity: .6; cursor: default; }
  .pw-library__fav-remove { color: var(--pw-soft); background: transparent; border: 1px solid var(--pw-line); }
  .pw-library__fav-remove:hover { color: var(--pw-ink); border-color: var(--pw-ink); }
  /* The thumbnail is now a link (grid AND list) — keep it looking like an image, not a link. */
  /* Fix 2026-08-04 (Paul, screenshot, confirmed both Chrome and Safari): this anchor is a direct
     flex child of .pw-library__item and had no width of its own, so `img { width:100% }` below —
     needed to fill the 56x56 box, but higher-specificity than .pw-library__thumb's own sizing —
     ballooned the image to whatever space the row had free, squeezing the title into a sliver. */
  .pw-library__fav-thumb-link { display: block; text-decoration: none; flex-shrink: 0; flex-grow: 0;
    width: 56px; height: 56px; }
  .pw-library__fav-thumb-link img { display: block; width: 100%; height: 100%; object-fit: cover; }

  .pw-library__download { flex-shrink: 0; min-height: 44px; padding: 0 20px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--pw-mono); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--pw-ink); background: transparent; border: 1px solid var(--pw-ink); border-radius: 3px;
    text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
  .pw-library__download:hover:not([disabled]) { background: var(--pw-ink); color: var(--pw-cream); }
  .pw-library__download[disabled], .pw-library__download[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }

  .pw-library__empty { padding: 36px 0; font-family: var(--pw-serif); font-size: 1.2rem; color: var(--pw-soft); }

  .pw-library__request-wrap { padding: 30px 0 0; }
  .pw-library__request-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
  .pw-library__request-input { flex: 1; min-width: 200px; min-height: 44px; padding: 12px 16px;
    border: 1px solid rgba(29,27,25,.3); background: var(--pw-card); border-radius: var(--pw-radius-card);
    font-family: var(--pw-body); font-size: 1rem; color: var(--pw-ink); }
  .pw-library__request-btn { min-height: 44px; padding: 0 22px; font-size: 14px; }
  .pw-library__request-status { margin: 12px 0 0; font-family: var(--pw-body); font-size: .95rem; color: var(--pw-soft); }
  .pw-library__support { margin: 16px 0 0; font-family: var(--pw-body); font-size: .85rem; color: var(--pw-soft); }
  .pw-library__support a { color: var(--pw-rose, #C44D6F); text-decoration: underline; }

  /* Search — icon glyph matches the storefront's own scoped-search box (snippets/pw-scoped-search.liquid). */
  .pw-library__search { position: relative; max-width: 360px; flex: 1; min-width: 200px; }
  .pw-library__search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--pw-soft); pointer-events: none; }
  .pw-library__search-input { width: 100%; min-height: 44px; padding: 10px 16px 10px 38px;
    border: 1px solid rgba(29,27,25,.3); background: var(--pw-card); border-radius: var(--pw-radius-card);
    font-family: var(--pw-body); font-size: 1rem; color: var(--pw-ink); }
  .pw-library__search-empty { padding: 10px 0 0; font-family: var(--pw-body); font-size: .95rem; color: var(--pw-soft); }

  /* Favorites, Phase 4 (2026-07-21) — shared search/sort/view controls bar (one instance, both tabs). */
  .pw-library__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
  {%- comment -%} Bug found via live staging verification (2026-07-22): an unconditional
    display: on a [hidden]-toggled element overrides the browser's default [hidden] {
    display: none } rule (same specificity, author beats UA) — element.hidden reads true
    in JS but still renders. Every hidden-toggled class in this file needs this override,
    matching the existing .pw-library__panel[hidden] pattern below. {%- endcomment -%}
  .pw-library__controls[hidden] { display: none; }
  .pw-library__sort { min-height: 44px; padding: 0 14px; border: 1px solid rgba(29,27,25,.3);
    background: var(--pw-card); border-radius: var(--pw-radius-card); font-family: var(--pw-body);
    font-size: .95rem; color: var(--pw-ink); }
  .pw-library__view-toggle { display: flex; gap: 2px; border: 1px solid rgba(29,27,25,.3); border-radius: var(--pw-radius-card); overflow: hidden; }
  .pw-library__view-btn { min-width: 44px; min-height: 44px; background: transparent; border: 0; cursor: pointer;
    font-size: 16px; color: var(--pw-soft); }
  .pw-library__view-btn[aria-pressed="true"] { background: var(--pw-ink); color: var(--pw-cream); }

  /* Grid view tiles — reuses the same title/subtitle/action language as the list row (.pw-library__item). */
  .pw-library__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin-top: 10px; }
  .pw-library__grid-item { display: flex; flex-direction: column; gap: 6px; }
  .pw-library__grid-thumb-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: 4px; border: 1px solid var(--pw-line); background: var(--pw-card); }
  .pw-library__grid-thumb-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pw-library__grid-thumb--empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 8px; text-align: center; font-family: var(--pw-body); font-size: .85rem; color: var(--pw-soft); }

  /* Owned-book "view pages" preview (Phase 5, 2026-07-22). */
  .pw-library__item-wrap { border-bottom: 1px solid var(--pw-line); }
  .pw-library__item-wrap .pw-library__item { border-bottom: 0; }
  .pw-library__preview { padding: 0 0 16px; }
  .pw-library__preview-toggle { min-height: 36px; padding: 0 14px; font-family: var(--pw-mono); font-weight: 700;
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-soft);
    background: transparent; border: 1px solid var(--pw-line); border-radius: 3px; cursor: pointer; }
  .pw-library__preview-toggle:hover { color: var(--pw-ink); border-color: var(--pw-ink); }
  .pw-library__preview-status { margin: 10px 0 0; font-family: var(--pw-body); font-size: .85rem; color: var(--pw-soft); }
  .pw-library__preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px; margin-top: 12px; }
  .pw-library__preview-grid[hidden] { display: none; }
  .pw-library__preview-tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px;
    border: 1px solid var(--pw-line); display: block; }
  .pw-library__preview-caption { margin: 4px 0 0; font-family: var(--pw-mono); font-weight: 700; font-size: 9px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--pw-soft); text-align: center; }
  .pw-library__preview-more { margin-top: 12px; }

  /* Bulk ZIP download (Phase 6, 2026-07-22). */
  .pw-library__zip-controls { display: flex; justify-content: flex-end; margin-top: 8px; }
  .pw-library__zip-controls { align-items: center; gap: 10px; }
  /* ITEM 2 (Amy, 2026-07-29): the Select button alone read as "select for what?" -- this is the
     aria-label made visible. Hidden on very narrow phones where the button sits alone anyway. */
  .pw-library__zip-hint { font: 400 12px/1.3 var(--pw-body, "Newsreader"), serif; color: rgba(29,27,25,.6); }
  @media screen and (max-width: 480px) { .pw-library__zip-hint { display: none; } }
  .pw-library__zip-select-mode { min-height: 36px; padding: 0 14px; font-family: var(--pw-mono); font-weight: 700;
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-soft);
    background: transparent; border: 1px solid var(--pw-line); border-radius: 3px; cursor: pointer; }
  .pw-library__zip-select-mode[aria-pressed="true"] { color: var(--pw-cream); background: var(--pw-ink); border-color: var(--pw-ink); }
  .pw-library__zip-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px;
    padding: 12px 16px; background: var(--pw-card); border-radius: var(--pw-radius-card); }
  .pw-library__zip-bar[hidden] { display: none; }
  .pw-library__zip-count { font-family: var(--pw-mono); font-weight: 700; font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--pw-soft); }
  .pw-library__zip-select-all { background: none; border: 0; color: var(--pw-rose, #C44D6F); font-weight: 600;
    font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0; }
  .pw-library__zip-download { margin-left: auto; min-height: 40px; padding: 0 18px; }
  .pw-library__zip-download[aria-disabled="true"] { opacity: .45; pointer-events: none; }
  /* CUSTOM-PAINTED CHECKBOX (2026-08-02, second pass). Paul, from the device: "Selecting images
     in My Library they clear immediately." That falsified the first pass's compositing hardening
     AS SHIPPED: promoting the NATIVE checkbox to its own layer (`translateZ(0)`/`will-change`) is
     itself an iOS Safari paint hazard — the promoted layer keeps its cached (unchecked) texture,
     so the tick flashes on tap and vanishes when the compositor settles. Vanish-on-scroll became
     vanish-immediately. The harness (tests/harness/library_select_harness.mjs) already proved the
     STATE survives; this was always a paint problem.

     Fix: stop depending on the native glyph at all. `appearance: none` + a `:checked` rule draw
     the tick in plain CSS, which style-recalc repaints reliably wherever the box sits — list row
     or composited grid overlay. The layer promotion is REMOVED (it is the hazard, and with the
     native glyph gone it has no job); `isolation` stays, it is inert stacking-context hygiene.
     Pinned by tests/test_library_checkbox_paint_080200.py. */
  /* Selection Download (2026-08-02) — the explanation shown before anything starts, and the
     per-file link list. The list is the PRIMARY delivery affordance for multi-file selections,
     not a fallback: iOS Safari suppresses programmatic downloads not tied to a gesture, and a
     customer who silently receives only the zip has lost something they paid for. */
  .pw-library__zip-explain { flex-basis: 100%; margin: 8px 0 0; font-family: var(--pw-body);
    font-size: .95rem; color: var(--pw-soft); }
  .pw-library__zip-list { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .pw-library__zip-list-item { display: flex; align-items: center; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--pw-line); border-radius: 3px; text-decoration: none;
    font-family: var(--pw-body); font-size: .95rem; color: var(--pw-ink); background: #fff; }
  .pw-library__zip-list-item:hover { border-color: var(--pw-ink); }

  /* Fix 2026-08-05 (Amy, Safari-specific): Select mode's button correctly went black, but the
     page checkboxes never painted in either list or grid view. WebKit has a documented history
     of failing to render a checkbox's background/border when appearance:none is paired with
     grid/inline-grid display -- inline-flex + align/justify-content is the reliable
     cross-browser pattern for a custom checkbox and centers identically. */
  .pw-library__zip-checkbox { width: 20px; height: 20px; flex-shrink: 0; margin-right: 4px; cursor: pointer;
    -webkit-appearance: none; appearance: none; background: #fff; border: 2px solid var(--pw-ink);
    border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
  .pw-library__zip-checkbox:checked { background: var(--pw-ink); }
  .pw-library__zip-checkbox:checked::after { content: ""; width: 10px; height: 6px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px); }
  /* Grid view (2026-07-24 fix): the checkbox is a child of the thumb-wrap, not laid out inline
     next to the title like list view, so overlay it on the thumbnail corner instead. */
  .pw-library__grid-thumb-wrap { isolation: isolate; }
  .pw-library__grid-thumb-wrap .pw-library__zip-checkbox { position: absolute; top: 6px; left: 6px;
    margin: 0; z-index: 2; }
  .pw-library__grid-thumb-wrap img { z-index: 0; }

  /* Account management callout (2026-07-08) — bolded per Paul: with the header account icon gone,
     this is the main path to order history/addresses/profile, so it reads as a destination, not
     a footnote. */
  .pw-library__account-cta { display: flex; align-items: center; gap: 16px; margin-top: 36px;
    padding: 22px 26px; border: 1px solid var(--pw-ink); border-radius: var(--pw-radius-card);
    text-decoration: none; color: var(--pw-ink); transition: background-color .15s ease, color .15s ease; }
  .pw-library__account-cta:hover { background: var(--pw-ink); color: var(--pw-cream); }
  .pw-library__account-cta:hover .pw-library__account-cta-copy { color: var(--pw-cream); opacity: .8; }
  .pw-library__account-cta-title { font-family: var(--pw-mono); font-weight: 700; font-size: 13px;
    letter-spacing: .08em; text-transform: uppercase; }
  .pw-library__account-cta-copy { flex: 1; font-family: var(--pw-body); font-size: .95rem; color: var(--pw-soft); }
  .pw-library__account-cta-arrow { font-size: 18px; flex-shrink: 0; }
  @media (max-width: 640px) {
    .pw-library__account-cta { flex-wrap: wrap; }
    .pw-library__account-cta-copy { flex-basis: 100%; order: 3; }
  }
/* END_SECTION:pw-library */
/* START_SECTION:pw-site-header (INDEX:59) */
.pw-sh { position: sticky; top: 0; z-index: 40; background: rgba(248,242,232,.96);
    backdrop-filter: blur(9px); border-bottom: 1px solid rgba(29,27,25,.14);
    transform: translateY(0); transition: transform .25s ease; }
  .pw-sh--hidden { transform: translateY(-100%); }
  @media (prefers-reduced-motion: reduce) { .pw-sh { transition: none; } }
  .pw-sh__bar { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px,4vw,46px); }

  .pw-sh__bar--desktop { height: 78px; display: flex; align-items: center; gap: 26px; }
  .pw-sh__bar--mobile { display: none; }

  .pw-sh__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
  .pw-sh__badge { width: 42px; height: 42px; border-radius: 50%; background: var(--pw-rose, #C44D6F);
    color: var(--pw-cream, #f8f2e8); display: flex; align-items: center; justify-content: center;
    font: 400 19px/1 var(--pw-serif, 'DM Serif Display'), serif; flex: none; }
  .pw-sh__badge--img { object-fit: cover; background: var(--pw-tint-tan, #cabaa0); }
  .pw-sh__word { display: flex; flex-direction: column; line-height: 1; }
  .pw-sh__name { font: 400 18px/1 var(--pw-serif, 'DM Serif Display'), serif; letter-spacing: .16em; color: var(--pw-ink, #1d1b19); }
  .pw-sh__tag { font: italic 11px/1 var(--pw-body, 'Newsreader'), serif; color: rgba(29,27,25,.55); margin-top: 5px; letter-spacing: .02em; }

  .pw-sh__menu-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font: 700 11px/1 var(--pw-mono, 'Courier Prime'), monospace; letter-spacing: .16em; text-transform: uppercase;
    padding: 11px 16px; border: 1px solid rgba(29,27,25,.2); border-radius: 30px; background: transparent;
    color: var(--pw-ink, #1d1b19); transition: background-color .2s, color .2s; }
  .pw-sh__menu-btn:hover { background: var(--pw-ink, #1d1b19); color: var(--pw-cream, #f8f2e8); }
  .pw-sh__caret { font-size: 9px; }

  .pw-sh__nav { margin-left: auto; display: flex; gap: 26px; align-items: center;
    font: 700 11px/1 var(--pw-mono, 'Courier Prime'), monospace; letter-spacing: .16em; text-transform: uppercase; }
  .pw-sh__icon { font-size: 22px; line-height: 1; color: rgba(29,27,25,.7); text-decoration: none; transition: color .2s; }
  .pw-sh__icon:hover { color: var(--pw-rose, #C44D6F); }
  .pw-sh__link { color: var(--pw-ink, #1d1b19); text-decoration: none; transition: color .2s; white-space: nowrap; }
  .pw-sh__link:hover { color: var(--pw-rose, #C44D6F); }
  .pw-sh__link--favorites { color: var(--pw-rose, #C44D6F); display: flex; align-items: center; gap: 7px; }
  /* 2026-07-19 — a customer (iPad, wide viewport showing this bar, not the mobile hamburger)
     couldn't find "Library" because it was an unlabeled icon easily confused with the Account
     icon right next to it. Same Favorites icon+text pattern above, applied here too. */
  .pw-sh__link--library { display: flex; align-items: center; gap: 6px; }
  /* 2026-07-11 full-audit C5 follow-on: were 34x34px, below the project's 44px tap-target
     minimum -- same class of bug as .pw-heart below, caught by that fix's regression test. */
  .pw-sh__account { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(29,27,25,.25);
    display: flex; align-items: center; justify-content: center; color: var(--pw-ink, #1d1b19); text-decoration: none; }
  .pw-sh__account:hover { border-color: var(--pw-rose, #C44D6F); color: var(--pw-rose, #C44D6F); }
  .pw-sh__cart { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(29,27,25,.25);
    display: flex; align-items: center; justify-content: center; color: var(--pw-ink, #1d1b19); text-decoration: none; }
  .pw-sh__cart:hover { border-color: var(--pw-rose, #C44D6F); color: var(--pw-rose, #C44D6F); }
  .pw-sh__cart-icon { position: relative; display: flex; --cart-bubble-background: var(--pw-rose, #C44D6F); --cart-bubble-text: #fff; }
  .pw-sh__cart-icon .cart-bubble { position: absolute; top: -8px; right: -10px; }
  .pw-sh__cart-sm { position: relative; color: var(--pw-ink, #1d1b19); text-decoration: none; display: flex; }

  .pw-sh__panel { max-width: 1180px; margin: 0 auto; padding: 0; border-top: 1px solid rgba(29,27,25,.1); }
  .pw-sh__panel:not([hidden]) { display: block; }

  /* Desktop mega-menu: 3 columns */
  .pw-sh__mega { display: none; }
  .pw-sh__mega-heading { display: block; font: 700 10px/1 var(--pw-mono, 'Courier Prime'), monospace;
    letter-spacing: .2em; text-transform: uppercase; color: var(--pw-rose, #C44D6F); margin-bottom: 16px; }
  .pw-sh__mega-list { display: flex; flex-direction: column; gap: 11px; }
  .pw-sh__mega-link { font-size: 1.02rem; color: rgba(29,27,25,.82); text-decoration: none; transition: color .2s; }
  .pw-sh__mega-link:hover { color: var(--pw-rose, #C44D6F); }
  .pw-sh__mega-link--sale { color: #C0202B; font-weight: 700; }
  .pw-sh__mega-callout { display: block; margin-top: 20px; padding: 16px; background: #f7e7ea;
    border: 1px solid rgba(29,27,25,.12); border-radius: 4px; text-decoration: none; color: var(--pw-ink, #1d1b19); }
  .pw-sh__mega-callout-eyebrow { display: block; font: 700 9px/1 var(--pw-mono, 'Courier Prime'), monospace;
    letter-spacing: .16em; text-transform: uppercase; color: var(--pw-rose, #C44D6F); }
  .pw-sh__mega-callout-title { display: block; margin-top: 7px; font-family: var(--pw-serif, 'DM Serif Display'), serif; font-size: 1.16rem; line-height: 1.15; }

  /* Mobile accordion (hidden on desktop) */
  .pw-sh__accordion { display: none; }

  @media screen and (min-width: 750px) {
    .pw-sh__mega { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: clamp(28px,4vw,56px);
      padding: clamp(28px,4vw,44px) clamp(20px,4vw,46px); background: var(--pw-cream, #f8f2e8);
      box-shadow: 0 24px 44px rgba(29,27,25,.14); }
  }

  @media screen and (max-width: 749px) {
    .pw-sh__bar--desktop { display: none; }
    .pw-sh__bar--mobile { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
    .pw-sh__hamburger { background: transparent; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: var(--pw-ink, #1d1b19); }
    .pw-sh__badge--sm { width: 30px; height: 30px; font-size: 14px; }
    .pw-sh__name--sm { font-size: 14px; letter-spacing: .14em; }
    .pw-sh__logo--sm { gap: 8px; }
    .pw-sh__mobile-actions { display: flex; align-items: center; gap: 2px; flex: none; }
    /*
      Overlap fix (Paul, 2026-07-29, real iPhone screenshot: "hard to see magnifying glass
      search icon in header - covered by collage soup title").

      MEASURED on staging by forcing these same rules and reading getBoundingClientRect:
        hamburger 34 + logo 156 (wordmark alone 118) + 5 icons @44px = 228 + padding 36
        = 454px REQUIRED vs 390px available -> 64px overflow.

      This is fallout from the 2026-07-14 fix that added My Library + Account icons to the
      persistent mobile bar (3 icons -> 5). Each correctly gets a 44px tap target; the total
      row width was simply never re-checked afterwards.

      `flex: none` above stops the actions block being squeezed — without it the browser
      resolves the overflow by compressing the icons into each other rather than the text.
      min-width:0 below is the counterpart: a flex item will NOT shrink below its content
      width without it, which is precisely why the logo overran its sibling instead of
      clipping.
    */
    .pw-sh__logo--sm { min-width: 0; overflow: hidden; }
    .pw-sh__name--sm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pw-sh__favorites-sm { color: var(--pw-rose, #C44D6F); text-decoration: none; font-size: 17px;
      min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    /* Mobile-first fix (Paul, 2026-07-14): the persistent mobile top bar only ever had
       Search + Cart -- My Library/Account had no icon at all here, only a text link buried
       inside the hamburger accordion. Desktop always had both. Added matching icons above;
       these rules give each a real 44px tap target (not just the 17px visual glyph), same
       pattern as the 2026-07-11 full-audit C5 fix for the desktop .pw-sh__account/.pw-sh__cart. */
    .pw-sh__icon, .pw-sh__library-sm, .pw-sh__account-sm, .pw-sh__cart-sm {
      min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
    }

    .pw-sh__accordion { display: flex; flex-direction: column; padding: 8px 20px 18px; }
    .pw-sh__acc-section { border-bottom: 1px solid rgba(29,27,25,.1); }
    .pw-sh__acc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between;
      background: none; border: 0; padding: 14px 0; cursor: pointer; text-align: left;
      font: 700 12px/1 var(--pw-mono, 'Courier Prime'), monospace; letter-spacing: .14em; text-transform: uppercase;
      color: rgba(29,27,25,.82); }
    .pw-sh__acc-caret { font-size: 10px; transition: transform .2s; }
    .pw-sh__acc-trigger[aria-expanded="true"] .pw-sh__acc-caret { transform: rotate(180deg); }
    .pw-sh__acc-body { display: flex; flex-direction: column; gap: 12px; padding: 0 0 16px; }
    .pw-sh__acc-body[hidden] { display: none; }
    .pw-sh__acc-link { font-size: 1rem; color: rgba(29,27,25,.78); text-decoration: none; }
    .pw-sh__acc-link--sale { color: #C0202B; font-weight: 700; }
    .pw-sh__acc-link--video { color: var(--pw-rose, #C44D6F); font-weight: 700; }
    .pw-sh__acc-flat-link { display: block; padding: 14px 0; border-bottom: 1px solid rgba(29,27,25,.1);
      font: 700 12px/1 var(--pw-mono, 'Courier Prime'), monospace; letter-spacing: .14em; text-transform: uppercase;
      color: rgba(29,27,25,.82); text-decoration: none; }
  }

  /*
    Narrow phones (Paul's iPhone is 390px). The full row measures 454px, so below ~480px the
    118px "COLLAGE SOUP" wordmark is dropped and the badge alone carries the brand: 454 - 118
    = 336px, comfortably inside 390px.

    480px is not arbitrary — it is the width at which the complete row (454px) genuinely fits,
    so the wordmark is only ever hidden when it actually cannot be shown.

    The badge keeps aria-label="Collage Soup home", so hiding the text costs no branding
    anchor and no navigation: it is still the tappable route home, and screen readers still
    announce it. Tap targets are deliberately NOT reduced to buy space — 44px is the project's
    mobile floor, and trading a visual bug for an accessibility one is not a fix.
  */
  @media screen and (max-width: 480px) {
    .pw-sh__name--sm { display: none; }
  }

  /* Favorites count badge (header) */
  .pw-sh__count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
    margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--pw-rose, #C44D6F); color: #fff;
    font: 700 10px/1 var(--pw-mono, 'Courier Prime'), monospace; }

  /* ♥ heart toggle injected onto product cards (global). Bottom-right (#41,
     Paul, 2026-07-02) — was top-right, which covered the New badge before the
     corner badge system existed (see blocks/_product-card-gallery.liquid). */
  /* PW (Paul, 2026-07-03): real Unicode heart glyph (♡/♥) per Amy's design
     file, not a hand-rolled SVG — matches the header's own "♥ Favorites" nav item. */
  /* 2026-07-11 full-audit C5: was 34x34px, below the project's 44px tap-target minimum.
     bottom/right pulled in from 10px to 5px so the visually-larger circle stays anchored
     roughly where it was rather than intruding further into the card. */
  .pw-heart { position: absolute; bottom: 5px; right: 5px; z-index: 3; width: 44px; height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer;
    background: rgba(248,242,232,.92); border: 1px solid rgba(29,27,25,.16); color: rgba(29,27,25,.5);
    font-size: 20px; line-height: 1; font-family: system-ui, sans-serif;
    transition: color .15s ease, background-color .15s ease, transform .15s ease; }
  .pw-heart:hover { color: var(--pw-rose, #C44D6F); transform: scale(1.06); }
  .pw-heart.is-saved { color: var(--pw-rose, #C44D6F); }

  /* Amy feedback 7.26.26: Add to Cart didn't turn black on click/tap the way the Amazon
     button does — that one is a plain <a> so :hover sticks after a tap; this is a <button>
     inside <add-to-cart-component>, which only ever had implicit :hover, no pressed state.
     Scoped to add-to-cart-component (not the shared .button class) so this doesn't change
     every button site-wide — matches the Amazon button's exact :hover colors for consistency. */
  add-to-cart-component .button:active,
  add-to-cart-component .button:active .add-to-cart-text__content {
    background: var(--pw-ink, #1d1b19);
    color: var(--pw-cream, #f8f2e8);
    border-color: var(--pw-ink, #1d1b19);
  }
/* END_SECTION:pw-site-header */
/* START_SNIPPET:cart-bubble (INDEX:179) */
.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-drawer (INDEX:181) */
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;
    }
  }
/* END_SNIPPET:cart-drawer */
/* START_SNIPPET:cart-items-component (INDEX:182) */
.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:183) */
.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 {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--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:chat-drawer (INDEX:185) */
/* 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:localization-form (INDEX:214) */
/* 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:predictive-search-styles (INDEX:226) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: var(--color-foreground-subdued);
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:233) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

  .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:quick-add-modal-styles (INDEX:250) */
#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:resource-card (INDEX:255) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

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

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */
/* START_SNIPPET:search-modal (INDEX:261) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .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;
  }
/* END_SNIPPET:search-modal */
/* START_SNIPPET:skip-to-content-link (INDEX:265) */
.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:text-component-shimmer-styles (INDEX:281) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

  @keyframes text-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */
/* START_SNIPPET:theme-drawer-styles (INDEX:284) */
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 */