/** Shopify CDN: Minification failed

Line 224:2 Unexpected "{"
Line 224:3 Expected identifier but found "%"
Line 224:16 Unexpected "2"
Line 224:146 Expected identifier but found "%"
Line 385:16 Unexpected "{"
Line 385:25 Expected ":"
Line 385:32 Unexpected "{"
Line 385:49 Expected identifier but found whitespace
Line 385:51 Unexpected "{"
Line 385:54 Expected ":"
... and 3 more hidden warnings

**/
/* START_SECTION:pie-nuevo-claude (INDEX:57) */
.pnc {
    --pnc-fg: #faf6f1;
    --pnc-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --pnc-sans: var(--font-body--family, Inter), Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-family: var(--pnc-sans);
    color: var(--pnc-fg);
    background: var(--pnc-bg, #75000b);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    width: 100%;
  }
  .pnc *,
  .pnc *::before,
  .pnc *::after { box-sizing: border-box; }
  .pnc a { color: inherit; text-decoration: none; }
  .pnc ul { list-style: none; margin: 0; padding: 0; }
  .pnc-in { max-width: var(--pnc-max, 1240px); margin: 0 auto; padding: 0 40px; }
  .pnc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .pnc-main {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(900px 420px at 8% -10%, rgba(255, 255, 255, 0.07), transparent 60%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.06)),
      var(--pnc-bg, #75000b);
  }
  .pnc-main::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  }
  .pnc-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.8fr 0.8fr 1.7fr;
    gap: 64px;
    padding: 72px 0 64px;
    align-items: start;
  }

  .pnc .pnc-nl__t {
    font-family: var(--pnc-serif);
    font-weight: 600;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    color: #fff;
    text-transform: uppercase;
  }
  .pnc .pnc-nl__p {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(250, 246, 241, 0.82);
    max-width: 420px;
  }
  .pnc .pnc-nl__form {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 440px;
    margin: 0;
    padding: 6px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #fff;
  }
  .pnc .pnc-nl__form:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); }
  .pnc .pnc-nl__form input {
    flex: 1;
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: #2b2623;
    font: 400 14.5px var(--pnc-sans);
    padding: 12px 8px 12px 20px;
    outline: none;
  }
  .pnc .pnc-nl__form input::placeholder { color: #6b625b; opacity: 1; }
  .pnc .pnc-nl__form button {
    flex: none;
    width: auto;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font: 600 13.5px var(--pnc-sans);
    letter-spacing: 0.04em;
    text-transform: none;
    padding: 13px 28px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
  }
  .pnc .pnc-nl__form button:hover { background: #2b2b2b; }
  .pnc .pnc-nl__form button:active { transform: scale(0.97); }
  .pnc-nl__msg { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: #fff; }
  .pnc-nl__msg svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .pnc-nl__msg--ok svg { color: #3fd69a; }
  .pnc-nl__msg--err svg { color: #ffb4b4; }

  .pnc .pnc-col__h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #fff;
    font: 600 12.5px var(--pnc-sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: left;
    cursor: default;
  }
  .pnc .pnc-pm { display: none; }
  .pnc .pnc-col__list { display: grid; gap: 14px; }
  .pnc .pnc-col__list a {
    position: relative;
    display: inline-block;
    font-size: 15px;
    color: rgba(250, 246, 241, 0.86);
    padding: 1px 0;
    transition: color 0.2s;
  }
  .pnc .pnc-col__list a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1px;
    background: #fff;
    transition: right 0.25s;
  }
  .pnc .pnc-col__list a:hover { color: #fff; }
  .pnc .pnc-col__list a:hover::after { right: 0; }
  .pnc-col__wrap { display: block; }

  .pnc-bar { background: var(--pnc-bar, #3a0508); border-top: 1px solid rgba(255, 255, 255, 0.22); }
  .pnc-bar__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 22px; }
  .pnc-copy { font-size: 12.5px; color: rgba(250, 246, 241, 0.7); letter-spacing: 0.02em; }
  .pnc-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .pnc-pay__list { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
  .pnc-pay__list li { display: block; margin: 0; padding: 0; }
  .pnc-pay__list img { display: block; width: 38px; height: 24px; max-width: none; border-radius: 4px; background: #fff; }
  .pnc-pay__l { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; margin-right: 8px; font-weight: 600; }

  @media screen and (max-width: 749px) {
    .pnc-in { padding: 0 20px; }
    .pnc-grid { grid-template-columns: 1fr; gap: 0; padding: 40px 0 36px; }
    .pnc-nl { order: -1; margin-bottom: 34px; }
    .pnc .pnc-nl__t { font-size: 28px; }
    .pnc .pnc-nl__p { font-size: 14.5px; margin-bottom: 20px; }
    .pnc .pnc-nl__form { max-width: none; }
    .pnc .pnc-nl__form button { padding: 13px 22px; }

    .pnc-col { border-top: 1px solid rgba(255, 255, 255, 0.22); }
    .pnc-col + .pnc-col { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
    .pnc .pnc-col__h { margin: 0; padding: 20px 0; cursor: pointer; font-size: 12.5px; }
    .pnc .pnc-pm { display: block; position: relative; width: 14px; height: 14px; flex: none; }
    .pnc-pm::before,
    .pnc-pm::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: #fff; transition: transform 0.25s, opacity 0.25s; }
    .pnc-pm::after { transform: rotate(90deg); }
    .pnc-col.is-open .pnc-pm::after { transform: rotate(0); opacity: 0; }
    .pnc-col__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
    .pnc-col__wrap > ul { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear 0.3s; }
    .pnc-col.is-open .pnc-col__wrap { grid-template-rows: 1fr; }
    .pnc-col.is-open .pnc-col__wrap > ul { visibility: visible; transition-delay: 0s; }
    .pnc .pnc-col__list { gap: 0; padding-bottom: 10px; }
    .pnc .pnc-col__list a { padding: 11px 0; font-size: 15px; }
    .pnc .pnc-col__list a::after { display: none; }

    .pnc-bar__in { flex-direction: column; align-items: center; gap: 16px; padding-top: 24px; padding-bottom: 26px; text-align: center; }
    .pnc-pay { justify-content: center; }
    .pnc-pay__list { justify-content: center; gap: 6px; }
    .pnc-pay__list img { width: 38px; height: 24px; }
    .pnc-pay__l { flex: 0 0 100%; margin: 0 0 2px; text-align: center; }
  }
  @media screen and (max-width: 339px) {
    .pnc-pay__list { gap: 4px; }
    .pnc-pay__list img { width: 34px; height: 21px; }
  }
/* END_SECTION:pie-nuevo-claude */
/* START_SECTION:product-information (INDEX:62) */
mf-product-information { display: block; width: 100%; background: var(--mf-bg); color: var(--mf-ink); font: var(--mf-body-weight) var(--mf-body-size)/1.5 var(--mf-body); }
  mf-product-information *, mf-product-information *::before, mf-product-information *::after { box-sizing: border-box; }
  mf-product-information [hidden] { display: none !important; }
  mf-product-information .mf-layout { display: grid; grid-template-columns: minmax(0, var(--mf-gallery-share)) minmax(0, var(--mf-details-share)); gap: var(--mf-gap); padding: var(--mf-layout-top) var(--mf-padding) var(--mf-padding) 0; align-items: start; }
  mf-product-information .mf-layout:not(:has(.mf-gallery)), mf-product-information .mf-layout:has(.mf-gallery:empty) { grid-template-columns: minmax(0, 640px); justify-content: center; }
  mf-product-information .mf-gallery:empty { display: none; }
  mf-product-information .mf-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mf-image-gap); min-width: 0; align-items: start; }
  {% comment %} 2+ images: thumbnail rail on the left (column 1) + main image on the right (column 2), spanning every row the thumbnails create. {% endcomment %}
  mf-product-information .mf-gallery:has(.mf-media:nth-child(2)) { grid-template-columns: var(--mf-thumb-col, 76px) minmax(0, 1fr); grid-auto-rows: minmax(var(--mf-thumb-col, 76px), auto); align-content: start; align-items: start; }
  mf-product-information .mf-gallery:has(.mf-media:nth-child(2)) .mf-media:first-child { grid-column: 2; grid-row: 1 / span var(--mf-thumb-count, 1); }
  mf-product-information .mf-gallery:has(.mf-media:nth-child(2)) .mf-media:not(:first-child) { grid-column: 1; }
  mf-product-information .mf-gallery-wrap { position: relative; min-width: 0; }
  mf-product-information .mf-gallery-nav { display: none; }
  mf-product-information .mf-media { min-width: 0; background: #f3f3f3; }
  mf-product-information .mf-image-button { display: block; width: 100%; border: 0; padding: 0; margin: 0; border-radius: 0; background: transparent; cursor: zoom-in; }
  mf-product-information .mf-media img { display: block; width: 100%; height: auto; aspect-ratio: var(--mf-photo-ratio); object-fit: var(--mf-photo-fit); }
  mf-product-information .mf-media :is(video, iframe, model-viewer) { display: block; width: 100%; height: auto; aspect-ratio: var(--mf-photo-ratio); border: 0; }
  mf-product-information .mf-details { min-width: 0; padding: 0 30px 32px 0; background: var(--mf-bg); }
  mf-product-information[data-sticky="true"] .mf-details { position: sticky; top: var(--mf-sticky-top); }
  mf-product-information :is(h1, h2, p, fieldset, legend, form) { margin: 0; padding: 0; }
  mf-product-information :is(button, input, select) { font: inherit; letter-spacing: normal; }
  mf-product-information button::after, mf-product-information button::before { box-shadow: none; }
  mf-product-information a { color: inherit; }
  mf-product-information .mf-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--mf-breadcrumb); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .65; margin-bottom: 10px; }
  mf-product-information .mf-breadcrumb a { text-decoration: none; }
  mf-product-information .mf-breadcrumb a:hover { text-decoration: underline; }
  mf-product-information .mf-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--mf-rating-size); line-height: 24px; }
  mf-product-information .mf-rating a { text-decoration: none; }
  mf-product-information .mf-stars { display: inline-block; position: relative; color: #d5d5d5; font: 22px/1 Arial, sans-serif; letter-spacing: 2px; white-space: nowrap; }
  mf-product-information .mf-stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--mf-ink); }
  /* Pedido Igor 2026-10-04: fila de confianza estatica (siempre 4,7/5 y +18.000 clienti; relleno de estrellas 93% = 4 llenas + la quinta al ~70%) encima del titulo, estrellas color fijo #F4A900 (no usa variables de ajustes). Reversible: borra estas 4 reglas .mf-trust-static. */
  mf-product-information .mf-trust-static { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--mf-rating-size); line-height: 24px; margin-bottom: 2px; }
  mf-product-information .mf-trust-static__stars { display: inline-block; position: relative; color: #d5d5d5; font: 22px/1 Arial, sans-serif; letter-spacing: 2px; white-space: nowrap; }
  mf-product-information .mf-trust-static__stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; width: 93%; color: #F4A900; }
  mf-product-information .mf-trust-static__text { color: inherit; }
  mf-product-information .mf-title { font-family: var(--mf-title-font); font-size: var(--mf-title); font-weight: var(--mf-title-font-weight); font-style: normal; line-height: 1.1; letter-spacing: 0; color: inherit; text-transform: uppercase; margin: 4px 0 2px; overflow-wrap: anywhere; }
  mf-product-information .mf-subtitle { font-family: var(--mf-heading); font-size: var(--mf-subtitle); line-height: 1.25; }
  mf-product-information .mf-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 10px; font-size: var(--mf-price-current-size); }
  /* Real discount state drives the color, never a single static value: data-discount-percent
     is re-rendered by the variant-refresh flow, so this stays correct across variant changes. */
  mf-product-information .mf-price[data-discount-percent="0"] [data-price-value] { color: var(--mf-price-normal-color); }
  mf-product-information .mf-price:not([data-discount-percent="0"]) [data-price-value] { color: var(--mf-price-sale-color); }
  mf-product-information .mf-price s { opacity: 1; font-size: var(--mf-price-compare-size); color: var(--mf-price-compare-color); }
  mf-product-information .mf-unit-price { flex-basis: 100%; font-size: 12px; }
  /* Tag shape: a real triangular tip as a separate pseudo-element (always
     vertically centered via top:50%/translateY, whatever the badge's actual
     height ends up being), plus a normal border-radius on the box itself.
     Border-radius and the pointed tip never fight each other this way, unlike
     a single clip-path polygon which overrides border-radius entirely. The
     eyelet is a solid dot (the badge text color), never a cut-through hole,
     so there is no risk of a stray transparent gap in the fill. */
  mf-product-information .mf-discount-badge { display: inline-flex; align-items: center; font-size: var(--mf-discount-badge-size); font-weight: 800; color: var(--mf-discount-bg); background: transparent; line-height: 1; margin-inline-start: 2px; letter-spacing: -0.01em; }
  mf-product-information .mf-payment { margin-top: 7px; font-size: 13px; }
  mf-product-information .mf-payment:empty { display: none; }
  mf-product-information .mf-payment-icons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }
  mf-product-information .mf-payment-icons:empty { display: none; }
  mf-product-information .mf-payment-icon { display: block; height: 24px; width: auto; }
  /* Pedido Igor 2026-10-03: en movil aparecen dos filas de iconos de pago en la
     ficha de producto: esta (del tema) y otra que inyecta una app por JS fuera
     del tema, que no se puede tocar desde aqui. Igor pidio quitar una de las
     dos, cualquiera; se oculta esta solo en movil por ser la unica controlable
     desde el tema. En escritorio sigue igual. Reversible: borra esta regla
     @media para que esta fila vuelva a verse tambien en movil. */
  @media screen and (max-width: 749px) {
    mf-product-information .mf-payment-icons { display: none; }
  }
  mf-product-information .mf-options { margin-top: var(--mf-options-gap); }
  mf-product-information .mf-option { border: 0; min-width: 0; margin: 0 0 12px; }
  mf-product-information .mf-option-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  mf-product-information .mf-option legend:not(.mf-sr-only) { margin-bottom: 8px; font-weight: 700; font-size: var(--mf-option-label-size); }
  mf-product-information .mf-option legend .mf-color-name { font-weight: 400; }
  mf-product-information .mf-option-values { display: flex; flex-wrap: wrap; gap: 8px; }
  mf-product-information .mf-choice--size label { min-width: 48px; }
  /* Pedido Igor 2026-10-05: bullets bajo el precio con icono SVG de trazo + texto negro #1d1a17, sin fondos/bordes/lineas. Tamano de texto conservado (13px, sin escala movil propia). */
  mf-product-information .mf-price-bullets { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  mf-product-information .mf-price-bullets li { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.3; color: #1d1a17; opacity: 1; background: none; border: 0; }
  mf-product-information .mf-price-bullets li::before { content: none; }
  mf-product-information .mf-price-bullets .mf-bullet-icon { width: 18px; height: 18px; flex: none; }
  mf-product-information .mf-price-bullets .mf-bullet-text { color: #1d1a17; font-weight: 400; }
  mf-product-information .mf-price-bullets strong { font-weight: 600; color: #1d1a17; }
  mf-product-information .mf-choice { position: relative; }
  mf-product-information .mf-option-input, mf-product-information .mf-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
  mf-product-information .mf-choice label { display: flex; align-items: center; justify-content: center; min-width: 82px; min-height: 38px; padding: 6px 15px; border: 1px solid var(--mf-ink); border-radius: 10px; color: var(--mf-ink); background: var(--mf-bg); font-size: var(--mf-option-value-size); font-weight: 600; cursor: pointer; line-height: 1.2; }
  mf-product-information .mf-choice:not(.mf-choice--swatch) input:checked + label { background: var(--mf-ink); color: var(--mf-bg); }
  mf-product-information .mf-choice input[data-available="false"] + label { opacity: .45; text-decoration: line-through; }
  mf-product-information .mf-choice--swatch label { flex-direction: column; min-width: 48px; min-height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; gap: 6px; }
  mf-product-information .mf-choice--swatch input:checked + label .mf-swatch { border-color: var(--mf-ink); box-shadow: 0 0 0 1px var(--mf-ink); }
  mf-product-information .mf-swatch { position: relative; display: block; width: 36px; height: 36px; border-radius: 6px; border: 1px solid rgb(0 0 0 / .18); background-position: center; background-size: cover; box-shadow: none; }
  mf-product-information .mf-swatch-label { font-size: 11px; font-weight: 500; color: var(--mf-ink); line-height: 1.2; text-align: center; }
  mf-product-information .mf-choice--swatch input[data-available="false"] + label { opacity: .45; }
  mf-product-information .mf-choice--swatch input[data-available="false"] + label .mf-swatch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--mf-ink) calc(50% - 1px), var(--mf-ink) calc(50% + 1px), transparent calc(50% + 1px)); }
  mf-product-information .mf-select { display: block; width: 100%; max-width: 320px; min-height: 44px; padding: 8px 34px 8px 14px; border: 1px solid var(--mf-ink); border-radius: 10px; color: var(--mf-ink); background-color: var(--mf-bg); font-size: var(--mf-option-value-size); font-weight: 600; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231e1a1d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
  mf-product-information :is(button, a, select, input):focus-visible, mf-product-information .mf-choice input:focus-visible + label { outline: 2px solid var(--mf-ink); outline-offset: 4px; }
  mf-product-information .mf-guide-row { display: flex; }
  mf-product-information .mf-guide-row--inline { margin: 0 0 8px; }
  mf-product-information .mf-guide { display: inline-block; background: transparent; color: var(--mf-ink); border: 0; border-radius: 0; padding: 0; font-size: var(--mf-guide-size); font-weight: 600; line-height: 1.5; letter-spacing: 0; text-decoration: underline; text-underline-offset: 2px; text-transform: none; cursor: pointer; }
  mf-product-information .mf-note { margin-top: 10px; }
  mf-product-information .mf-delivery { margin-top: 32px; }
  mf-product-information :is(.mf-note, .mf-delivery, .mf-payment, .mf-subtitle) p + p { margin-top: 8px; }
  mf-product-information .mf-urgency { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; font-size: var(--mf-urgency-size); color: var(--mf-urgency-color); line-height: 1.3; }
  mf-product-information .mf-urgency-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: mf-urgency-pulse 1.6s ease-in-out infinite; }
  @keyframes mf-urgency-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
  @media (prefers-reduced-motion: reduce) { mf-product-information .mf-urgency-dot { animation: none; } }
  mf-product-information .mf-upsell-slot:empty { display: none; }
  mf-product-information .mf-shipping-table { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--mf-border-color, #e6ded4); border-radius: 10px; overflow: hidden; }
  mf-product-information .mf-shipping-table__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 8px; font-size: var(--mf-benefits-size); color: var(--mf-benefits-color); line-height: 1.35; border-inline-start: 1px solid var(--mf-border-color, #e6ded4); }
  mf-product-information .mf-shipping-table__item:first-child { border-inline-start: 0; }
  mf-product-information .mf-shipping-table__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; }
  mf-product-information .mf-shipping-table__icon svg { width: 100%; height: 100%; display: block; }
  mf-product-information .mf-shipping-table__heading { font-weight: 700; font-size: .92em; text-transform: uppercase; letter-spacing: .02em; }
  mf-product-information .mf-shipping-table__text { font-size: .92em; opacity: .8; }
  @media screen and (max-width: 480px) {
    mf-product-information .mf-shipping-table { grid-template-columns: 1fr; }
    mf-product-information .mf-shipping-table__item { border-inline-start: 0; border-top: 1px solid var(--mf-border-color, #e6ded4); flex-direction: row; text-align: start; }
    mf-product-information .mf-shipping-table__item:first-child { border-top: 0; }
  }
  mf-product-information .mf-actions { display: grid; gap: 10px; margin-top: 12px; }
  mf-product-information .mf-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 1em 1.6em; border: 2px solid var(--mf-ink); border-radius: 999px; font: 600 var(--mf-button-size)/1.4 var(--mf-body); letter-spacing: 0; text-transform: none; text-decoration: none; text-align: center; cursor: pointer; box-shadow: none; white-space: normal; }
  mf-product-information .mf-button--primary { background: var(--mf-button); border-color: var(--mf-button); color: var(--mf-button-text); }
  mf-product-information .mf-button--secondary { background: var(--mf-bg); color: var(--mf-ink); }
  mf-product-information .mf-button--secondary > span:last-child { font-family: Arial, sans-serif; font-size: 22px; line-height: 1; }
  mf-product-information .mf-button:hover { opacity: .85; }
  mf-product-information .mf-button:disabled { cursor: not-allowed; opacity: .5; }
  mf-product-information .mf-button[data-waiting="true"] { opacity: 1; cursor: pointer; }
  mf-product-information .mf-accordions { margin-top: 14px; }
  mf-product-information .mf-accordions details { border-bottom: 1px solid var(--mf-border); }
  mf-product-information summary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 14px 2px 14px 0; list-style: none; cursor: pointer; font-size: var(--mf-accordion-size); font-weight: 700; }
  mf-product-information summary::-webkit-details-marker { display: none; }
  mf-product-information .mf-chevron { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: -4px 3px 0 16px; flex-shrink: 0; transition: transform .3s ease; }
  mf-product-information details[open] .mf-chevron { transform: rotate(225deg); margin-top: 4px; }
  mf-product-information details.mf-closing[open] .mf-chevron { transform: rotate(45deg); margin-top: -4px; }
  mf-product-information .mf-richtext { font: inherit; font-size: var(--mf-accordion-size); padding-bottom: 18px; overflow-wrap: anywhere; overflow-x: auto; }
  mf-product-information .mf-accordions .mf-richtext { overflow: hidden; height: 0px; padding-bottom: 0; }
  mf-product-information .mf-accordions details[open] .mf-richtext { height: auto; }
  mf-product-information .mf-accordions .mf-richtext-inner { min-height: 0; padding-bottom: 18px; overflow-wrap: anywhere; overflow-x: auto; }
  mf-product-information .mf-richtext :is(p, ul, ol) { margin: 0 0 12px; }
  mf-product-information .mf-richtext :is(ul, ol) { padding-left: 20px; }
  mf-product-information .mf-richtext :is(img, video) { max-width: 100%; height: auto; }
  mf-product-information .mf-richtext table { border-collapse: collapse; width: 100%; }
  mf-product-information .mf-richtext :is(th, td) { padding: 8px; border: 1px solid var(--mf-border); }
  mf-product-information .mf-quantity { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
  mf-product-information .mf-quantity input { width: 80px; padding: 8px; border: 1px solid var(--mf-border); border-radius: 0; background: var(--mf-bg); color: var(--mf-ink); }
  mf-product-information .mf-plan-label { display: block; margin-top: 16px; font-size: 13px; }
  mf-product-information .mf-plan { width: 100%; border: 1px solid var(--mf-ink); padding: 10px; background: var(--mf-bg); color: var(--mf-ink); }
  mf-product-information .mf-status:empty { display: none; }
  mf-product-information .mf-status, mf-product-information .mf-error { margin-top: 10px; font-size: 13px; }
  mf-product-information .mf-error { color: #a12020; }
  mf-product-information .mf-retry { margin-top: 8px; padding: 8px 16px; border: 1px solid var(--mf-ink); color: inherit; background: var(--mf-bg); cursor: pointer; }
  mf-product-information[aria-busy="true"] .mf-price { opacity: .5; }
  mf-product-information .mf-dialog { color: var(--mf-ink); background: var(--mf-bg); border: 0; padding: 24px; max-width: min(92vw, 800px); max-height: 90dvh; margin: auto; overflow: auto; }
  mf-product-information .mf-dialog::backdrop { background: rgb(0 0 0 / .65); }
  mf-product-information .mf-close { display: block; margin: 0 0 16px auto; padding: 8px 12px; border: 1px solid var(--mf-border); color: inherit; background: var(--mf-bg); cursor: pointer; }
  mf-product-information .mf-dialog h2 { font: 26px/1.2 var(--mf-heading); margin-bottom: 20px; }
  mf-product-information .mf-zoom-dialog { padding: 12px; max-width: 96vw; }
  mf-product-information .mf-zoom-dialog img { display: block; max-width: 100%; width: auto; height: auto; max-height: 76dvh; object-fit: contain; margin: auto; }
  mf-product-information .mf-extra-blocks { margin-top: 20px; }
  mf-product-information .mf-empty { padding: 40px; }
  @media screen and (min-width: 990px) {
    mf-product-information .mf-gallery:has(.mf-media:nth-child(2)) .mf-media:not(:first-child) { cursor: pointer; border-radius: 6px; overflow: hidden; opacity: .7; transition: opacity .15s ease; }
    mf-product-information .mf-gallery:has(.mf-media:nth-child(2)) .mf-media:not(:first-child):hover { opacity: 1; }
    mf-product-information .mf-gallery:has(.mf-media:nth-child(2)) .mf-media:not(:first-child) .mf-image-button { cursor: pointer; }
    /* Pedido Igor 2026-10-03: en escritorio, las miniaturas de la izquierda ahora usan la
       misma proporcion 3:4 que la foto principal (antes forzadas a 1:1 cuadradas).
       Reversible: vuelve a poner "aspect-ratio: 1;" en las 2 propiedades de aqui abajo. */
    mf-product-information .mf-gallery:has(.mf-media:nth-child(2)) .mf-media:not(:first-child) img,
    mf-product-information .mf-gallery:has(.mf-media:nth-child(2)) .mf-media:not(:first-child) :is(video, iframe, model-viewer) { aspect-ratio: var(--mf-photo-ratio); }
  }
  @media (max-width: 989px) {
    #MFProduct-{{ section.id }} { padding-inline: {{ s.padding_izquierda_movil }}px {{ s.padding_derecha_movil }}px; }
    mf-product-information .mf-layout { display: block; padding: 0; }
    mf-product-information .mf-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none; padding-inline: 12px; scroll-padding-inline: 12px; box-sizing: border-box; }
    mf-product-information .mf-gallery::-webkit-scrollbar { display: none; }
    mf-product-information .mf-media { flex: 0 0 calc(100% - 24px); scroll-snap-align: start; border-radius: 14px; overflow: hidden; }
    mf-product-information .mf-media:only-child { flex-basis: calc(100% - 24px); }
    mf-product-information .mf-gallery-nav { display: flex; position: absolute; top: 50%; transform: translateY(-50%); align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin: 0; border: 0; background: transparent; color: #fff; opacity: .55; cursor: pointer; z-index: 2; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
    mf-product-information .mf-gallery-nav svg { width: 18px; height: 18px; display: block; }
    mf-product-information .mf-gallery-nav--prev { left: 18px; }
    mf-product-information .mf-gallery-nav--next { right: 18px; }
    mf-product-information .mf-gallery-nav[hidden] { display: none; }
    mf-product-information .mf-details, mf-product-information[data-sticky="true"] .mf-details { position: static; padding: 20px 16px 32px; }
    mf-product-information .mf-title { font-size: min(var(--mf-title), 32px); }
    mf-product-information .mf-options { margin-top: 28px; }
    mf-product-information .mf-choice:not(.mf-choice--swatch) label { min-width: 68px; }
    /* Pedido Igor 2026-10-04: en movil la fila de confianza estatica se partia en 2 lineas.
       Se reduce el tamano solo en movil y se fuerza una sola linea (nowrap).
       Reversible: borra esta regla .mf-trust-static de aqui (la version escritorio no cambia). */
    mf-product-information .mf-trust-static { flex-wrap: nowrap; gap: 5px; font-size: 11px; }
    mf-product-information .mf-trust-static__stars { font-size: 15px; }
  }
/* END_SECTION:product-information */
/* START_SECTION:scialli-pack-claude (INDEX:74) */
/* Scialli: talla unica = el campo de talla de cada pieza se oculta (la elige sola el script). */
  sanne-pack-claude[data-onesize] .spk-trg[data-k="s"] { display: none !important; }
  sanne-pack-claude[data-onesize] .spk__ctl { grid-template-columns: minmax(0, 1fr); }
  html.spk-auto .spk-sheet { display: none !important; }
  mf-product-information:has(sanne-pack-claude[data-gen]) .mf-qty { display: none !important; }

  /* Scialli: selector de color con mini foto cuadrada del producto en cada color */
  sanne-pack-claude[data-gen] .spk-trg__sw { flex-basis: 28px; width: 28px; height: 28px; border-radius: 7px; }
  .spk-sheet__grid--color:has(.spk-sheet__dot) { gap: 12px 8px; }
  .spk-sheet .spk-sheet__dot { width: 60px; height: 60px; border-radius: 12px; }
  .spk-sheet .spk-sheet__col:disabled .spk-sheet__dot::after { border-radius: 12px; }
  .spk-sheet .spk-sheet__dot svg { width: 22px; height: 22px; }

  /* Scialli: texto de urgencia en italiano (solo en estas fichas) */
  mf-product-information:has(sanne-pack-claude[data-gen]) .mf-urgency::after { content: "Sono rimaste poche unità" !important; }

  /* Scialli: boton de añadir igual que .mf-button--primary de las demas fichas */
  mf-product-information sanne-pack-claude[data-gen] .spk__cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: auto; min-height: 50px; margin: 16px 0 0; padding: 1em 1.6em;
    border: 2px solid var(--mf-button, #75000b); border-radius: 999px;
    background: var(--mf-button, #75000b); color: var(--mf-button-text, #fff);
    font: 600 calc(var(--mf-button-size, 14px) * var(--mf-mobile-text-scale, 1))/1.4 var(--mf-body, inherit);
    letter-spacing: 0; text-transform: none; text-align: center; box-shadow: none; white-space: normal;
  }
  mf-product-information sanne-pack-claude[data-gen] .spk__cta:hover { background: var(--mf-button, #75000b); opacity: .85; }
  mf-product-information sanne-pack-claude[data-gen] .spk__cta:disabled { opacity: .5; }
  mf-product-information sanne-pack-claude[data-gen] .spk__cta::before {
    content: ""; width: 20px; height: 20px; flex: 0 0 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-1.6 9.2a2 2 0 0 1-2 1.8H6.6a2 2 0 0 1-2-1.8z'/%3E%3Cpath d='M8 9l4-6 4 6'/%3E%3Cpath d='M9.5 13v3M14.5 13v3'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-1.6 9.2a2 2 0 0 1-2 1.8H6.6a2 2 0 0 1-2-1.8z'/%3E%3Cpath d='M8 9l4-6 4 6'/%3E%3Cpath d='M9.5 13v3M14.5 13v3'/%3E%3C/svg%3E") center/contain no-repeat;
  }
/* END_SECTION:scialli-pack-claude */
/* START_BLOCK:swatches (INDEX:176) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */
/* START_SNIPPET:bag-2x1-button (INDEX:185) */
.b21 { width: 100%; margin-top: 10px; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
  .b21__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; border: 0; border-radius: 14px; background: #1fa56a; color: #fff; font: inherit; padding: 13px 12px; cursor: pointer; text-align: center; transition: background 0.2s; }
  .b21__btn:hover, .b21__btn:focus-visible { background: #168a57; }
  .b21__t { font-size: 16px; font-weight: 700; line-height: 1.2; }
  .b21__s { font-size: 12.5px; font-weight: 500; line-height: 1.3; opacity: 0.95; }
  .b21__n { margin: 8px 0 0; font-size: 12px; color: #666; text-align: center; }
  @media (prefers-reduced-motion: reduce) { .b21 * { transition-duration: 0.01ms !important; } }
/* END_SNIPPET:bag-2x1-button */
/* START_SNIPPET:buy-buttons-styles (INDEX:194) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

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

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
    color: var(--color, var(--color-foreground));
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    padding-inline: var(--theme-drawer-padding);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

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

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color, var(--color-foreground));
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
       where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */
/* START_SNIPPET:card-gallery (INDEX:195) */
.card-gallery{position:relative;overflow:hidden;container-type:inline-size;container-name:card-gallery-container}
@container (max-width:70px){.card-gallery:hover .quick-add__button{display:none}}
.card-gallery__placeholder svg{height:100%;width:100%}
.card-gallery svg{aspect-ratio:var(--gallery-aspect-ratio,var(--ratio))}
.product-card-gallery__title-placeholder{padding:var(--padding-md);font-size:var(--font-size--2xl);line-height:var(--line-height--display-loose);word-break:break-word;color:var(--color-foreground);background-color:rgb(var(--color-foreground-rgb) / var(--opacity-5));aspect-ratio:var(--gallery-aspect-ratio);border-radius:var(--product-corner-radius);display:block}
.product-card-gallery__title-placeholder .title-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden}
@media screen and (max-width:749px){.product-card-gallery__title-placeholder{font-size:var(--font-size--xl);padding:var(--padding-md)}}
[product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder{padding:var(--padding-xs)!important;font-size:var(--font-size--xs)}
[product-grid-view='zoom-out'] .card-gallery .slideshow-control{min-width:auto}
ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery{display:block}
[product-grid-view='zoom-out'] .card-gallery>:is(quick-add-component,.product-badges,slideshow-component>slideshow-controls){display:none}
ul[product-grid-view='zoom-out'] .card-gallery>img{display:block}
.card-gallery slideshow-arrows .slideshow-control{padding-inline:var(--padding-xl)}
/* END_SNIPPET:card-gallery */
/* START_SNIPPET:card-hover-effect-styles (INDEX:196) */
.product-card:hover,
  .collection-card:hover,
  .predictive-search-results__card:hover {
    z-index: var(--layer-raised);
  }
/* END_SNIPPET:card-hover-effect-styles */
/* START_SNIPPET:cart-bubble (INDEX:197) */
.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:199) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  /* Pedido Igor 2026-09-30: el carrito debe abrir a pantalla completa en movil.
     Correccion 2026-10-01: el 100vw sin media query rompia el layout en escritorio,
     porque .page-wrapper--drawer-open (assets/base.css) aplica en escritorio
     margin-right: var(--theme-drawer-width, ...) para dejar sitio al drawer al lado
     del contenido; con --theme-drawer-width a 100vw ese margen empuja la pagina fuera
     de la pantalla (de ahi el layout roto). Ahora el 100vw solo se aplica en movil
     (por debajo del breakpoint de escritorio del tema, 990px). En escritorio el
     drawer vuelve a su ancho por defecto (--theme-drawer-width: 30rem, definido en
     :root), pensado para funcionar bien con ese margin-right: se abre como ventana
     emergente de tamano ajustado, sin desplazar ni romper la pagina. Solo afecta al
     carrito (no a otros theme-drawer como el menu). */
  #cart-drawer .theme-drawer__dialog {
    @media screen and (max-width: 989px) {
      --theme-drawer-width: 100vw;
      max-width: 100vw;
    }
  }

  /* Pedido Igor 2026-10-30: en movil el carrito sigue dejando una franja de 39px a la izquierda
     (otra regla del tema lo deja al 90vw y gana a la de arriba). Se fuerza a pantalla completa. */
  @media screen and (max-width: 989px) {
    html body #cart-drawer .theme-drawer__dialog.theme-drawer__dialog {
      --theme-drawer-width: 100vw !important;
      width: 100vw !important;
      max-width: 100vw !important;
      inset: 0 !important;
      margin: 0 !important;
      border-radius: 0 !important;
    }
  }

  /* Pedido Igor 2026-10-30: bloque de abajo del carrito (totales + boton) en gris algo mas oscuro que el fondo,
     sin anadir nada nuevo; sin el degradado que lo difuminaba. */
  html body .cart-drawer__summary {
    background-color: #f3f3f3;
    mask-image: none;
    border-top: 1px solid #e4e4e4;
  }

  /* Pedido Igor 2026-10-30: oculto (no borrado) el carrusel de joyas del carrito. Para volver a verlo: borrar esta regla. */
  html body .cart-drawer__summary .mf-joy,
  html body [data-mf-joy] {
    display: none !important;
  }

  /* Pedido Igor 2026-10-03: con "auto_open_cart_drawer" activo, este drawer se
     abre solo (a pantalla completa en movil, ver regla de arriba) por encima
     de la ficha de producto -- que ya tiene su propia fila de iconos de pago
     (sections/product-information.liquid). El resultado en movil es ver dos
     filas de iconos de pago parecidas, una detras de otra, que Igor ve como
     "tarjetas duplicadas". Se oculta aqui SOLO la fila de iconos de pago de
     snippets/cart-summary.liquid cuando se renderiza dentro de este drawer
     (.cart-drawer__summary), y SOLO en movil: la pagina real /cart (que usa
     blocks/_cart-summary.liquid, con su propio contenedor .cart-summary__inner)
     y el escritorio no se tocan. Reversible: borra esta regla @media para
     que la fila vuelva a verse tambien en el drawer movil. */
  @media screen and (max-width: 749px) {
    .cart-drawer__summary .mf-payment-icons {
      display: none;
    }
  }

  .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 {
    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:200) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Pedido Igor 2026-10-30: tarjeta de producto del carrito (cajon, movil) mas grande y ordenada,
     y mas separada de la barra de progreso. Solo CSS dentro de #cart-drawer. Para volver atras: borrar este bloque. */
  @media screen and (max-width: 989px) {
    html body #cart-drawer .mf-dsc {
      margin-bottom: 14px;
    }
    html body #cart-drawer .cart-items {
      --ci-thumb: 104px;
      --ci-gap: 16px;
      --ci-qty-h: 36px;
    }
    html body #cart-drawer .cart-items .cart-items__table,
    html body #cart-drawer .cart-items .cart-items__table tbody {
      display: block;
      width: 100%;
    }
    html body #cart-drawer .cart-items .cart-items__table tbody tr.cart-items__table-row.cart-items__table-row {
      width: 100%;
      padding: 0 0 22px;
    }
    html body #cart-drawer .cart-items .cart-items__table tbody tr.cart-items__table-row.cart-items__table-row:first-child {
      padding-top: 0;
    }
    html body #cart-drawer .cart-items .cart-items__table tbody tr.cart-items__table-row.cart-items__table-row .cart-items__media-container {
      width: var(--ci-thumb) !important;
      max-width: var(--ci-thumb) !important;
      border-radius: 12px;
    }
    html body #cart-drawer .cart-items .cart-items__table tbody tr.cart-items__table-row.cart-items__table-row .cart-items__media-image {
      width: 100% !important;
      max-width: none !important;
      height: 100% !important;
      object-fit: cover;
    }
    html body #cart-drawer .cart-items .cart-items__table tbody tr.cart-items__table-row.cart-items__table-row .cart-items__title {
      font-size: 15px;
      font-weight: 500;
      line-height: 1.35;
    }
    html body #cart-drawer .cart-items .cart-items__table tbody tr.cart-items__table-row.cart-items__table-row .cart-items__variants-wrapper {
      margin-top: 6px;
    }
    html body #cart-drawer .cart-items .cart-items__table tbody tr.cart-items__table-row.cart-items__table-row .cart-items__quantity {
      margin-top: 14px;
    }
  }

  /* Pedido Igor 2026-10-30: linea "Sconto" sobre Protezione Plus (version 3) y pastilla de descuento extra bajo la barra de progreso (assets/carrito-sconto-claude.js).
     Segunda ronda: letra del Sconto igual de pequena que el precio rebajado (13px) y verde sin tanta negrita (el tamano final se ajusta en snippets/cart-sconto-claude.liquid). */
  html body #cart-drawer .mf-sconto {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 2px;
    font-size: 13px;
    color: #1d1a17;
  }
  html body #cart-drawer .mf-sconto__v {
    color: #1fa56a;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  html body #cart-drawer .mf-extra {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #e6f6ee;
    color: #0f7a49;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
  }
  html body #cart-drawer .mf-extra svg {
    flex: none;
  }

  /* Pedido Igor 2026-10-30: la barra de progreso ya no lleva el tick al llegar al escalon (lo lleva la pastilla de debajo).
     Solo se quitan el svg del nodo y el "✓ " delante de la etiqueta; las lineas que unen las pastillas (step::before) se dejan. */
  html body #cart-drawer .mf-dsc__step .mf-dsc__node svg {
    display: none !important;
  }
  html body #cart-drawer .mf-dsc__step .mf-dsc__lbl::before {
    content: none !important;
  }

  /* Pedido Igor 2026-10-30: logo "Martina Faggio" del encabezado del carrito un poco mas grande (era 204x20, recortado para que solo se vea el nombre: el PNG lleva debajo las estrellas y "+18.500 clienti", que Igor no quiere aqui). */
  html body #cart-drawer .theme-drawer__header #cart-drawer-heading.theme-drawer__title.h4 {
    width: auto !important;
    max-width: calc(100% - 56px) !important;
    overflow: visible !important;
  }
  html body #cart-drawer .theme-drawer__header #cart-drawer-heading.theme-drawer__title.h4::after {
    width: 250px !important;
    height: 25px !important;
    max-width: 100% !important;
    background-size: 250px auto !important;
    background-repeat: no-repeat !important;
    background-position: 0 -1px !important;
  }

  @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:202) */
.cart-items {
    --cart-item-media-width-min: 2.25rem;
    --cart-item-media-width-max: 5.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(var(--cart-item-media-width-min), 11cqi, var(--cart-item-media-width-max)) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  .cart-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(var(--cart-item-media-width-min), 11cqi, var(--cart-item-media-width-max)) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--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);
  }

  /* Discounted (sale) price shown below the product name/variants in each cart line item. */
  .cart-items__unit-price-wrapper .cart-items__sale-price {
    color: #d9261c;
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    max-width: var(--cart-item-media-width-max);
    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: var(--cart-item-media-width-max) 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

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

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }
  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input[type='number'] {
      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);
  }

  .cart-items__variants-wrapper li.mf-2x1-chip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
  .mf-2x1-chip__ok { display: inline-flex; align-items: center; gap: 5px; background: #e8f6ef; color: #12804f; font-size: 12px; font-weight: 700; line-height: 1; border-radius: 99px; padding: 5px 10px 5px 7px; }
  .mf-2x1-chip__ok svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
  .cart-items__variants-wrapper a.mf-2x1-chip__chg { font-size: 12px; font-weight: 600; color: #7a7068; text-decoration: underline; text-underline-offset: 2px; }
  .cart-items__variants-wrapper a.mf-2x1-chip__chg:hover { color: #1d1a17; }

  /* ===== Rediseño tarjeta de producto (Martina Faggio) ===== */
  .cart-items tbody .cart-items__table-row.cart-items__table-row {
    position: relative;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      'media title title'
      'media meta meta'
      'media qty price'
      'media error error';
    column-gap: 12px;
    row-gap: 0;
    align-items: start;
    padding: 12px;
    margin: 0 0 10px;
    border: 1px solid #e9e2da;
    border-radius: 16px;
    background: #fff;
  }

  .cart-items tbody .cart-items__table-row .cart-items__media {
    grid-area: media;
  }

  .cart-items tbody .cart-items__table-row .cart-items__media-container {
    width: 84px;
    max-width: 84px;
    height: 84px;
    aspect-ratio: auto;
    border-radius: 12px;
    background: #efeae4;
  }

  .cart-items tbody .cart-items__table-row .cart-items__media-image {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 12px;
  }

  .cart-items tbody .cart-items__table-row .cart-items__details {
    display: contents;
  }

  .cart-items tbody .cart-items__table-row .cart-items__product-info {
    grid-area: title;
    padding-right: 30px;
  }

  .cart-items tbody .cart-items__table-row .cart-items__title-row {
    max-width: 100%;
  }

  .cart-items tbody .cart-items__table-row .cart-items__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.25;
    font-weight: 650;
    color: #1d1d1d;
  }

  .cart-items tbody .cart-items__table-row .cart-items__variants-wrapper {
    grid-area: meta;
    margin-top: 2px;
    color: #7a7068;
  }

  .cart-items tbody .cart-items__table-row .cart-items__variants-wrapper:empty {
    display: none;
  }

  .cart-items tbody .cart-items__table-row .cart-items__variants-wrapper * {
    font-size: 12px;
    line-height: 1.25;
  }

  .cart-items tbody .cart-items__table-row .cart-items__unit-price-wrapper {
    display: none;
  }

  .cart-items tbody .cart-items__table-row .cart-items__quantity {
    grid-area: qty;
    align-self: end;
    margin: 8px 0 0;
  }

  .cart-items tbody .cart-items__table-row .cart-items__quantity-controls {
    gap: 0;
  }

  .cart-items .quantity-selector {
    --quantity-selector-width: auto;

    display: inline-flex;
    flex: none;
    align-self: auto;
    width: auto;
    height: 32px;
    border: 1.5px solid #e9e2da;
    border-radius: 99px;
    background: #fff;
    overflow: hidden;
  }

  .cart-items .quantity-selector button {
    width: 32px;
    height: 100%;
    border-radius: 0;
    background: none;
    transition: background 0.15s;
  }

  .cart-items .quantity-selector button:hover:not(:disabled) {
    background: #faf6f1;
  }

  .cart-items .quantity-selector button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .cart-items .quantity-selector svg {
    width: 13px;
    height: 13px;
  }

  .cart-items .quantity-selector input[type='number'] {
    width: 26px;
    min-width: 0;
    height: 100%;
    padding: 0;
    font-size: 14px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .cart-items tbody .cart-items__table-row .cart-items__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #a39a91;
    transition: background 0.2s, color 0.2s;
  }

  .cart-items tbody .cart-items__table-row .cart-items__remove:hover {
    background: #f3ece5;
    color: #b3261e;
  }

  .cart-items tbody .cart-items__table-row .cart-items__remove svg {
    width: 16px;
    height: 16px;
  }

  .cart-items tbody .cart-items__table-row .cart-items__price {
    grid-area: price;
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    min-height: 0;
    width: auto;
    line-height: 1.1;
    font-size: 15.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .cart-items tbody .cart-items__table-row .cart-items__price .mf-cart-was {
    margin-bottom: 2px;
    font-size: 11.5px;
    font-weight: 400;
    color: #7a7068;
  }

  .cart-items tbody .cart-items__table-row .cart-items__price--sale text-component {
    color: #1fa56a;
  }

  .cart-items tbody .cart-items__table-row .cart-items__error {
    grid-area: error;
  }
/* END_SNIPPET:cart-products */
/* START_SNIPPET:cart-typography-styles (INDEX:205) */
.cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }
/* END_SNIPPET:cart-typography-styles */
/* START_SNIPPET:chat-drawer (INDEX:206) */
/* 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:deferred-media-product-model-styles (INDEX:216) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  .product-media product-model {
    position: absolute;
  }

  .product-media-container--model {
    /* Usefull when view in your space is shown */
    flex-direction: column;
  }

  .shopify-model-viewer-ui__controls-area {
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  /* If the product media is already providing an image cover, hide images provided by sibling product-model */
  .product-media__image ~ product-model .deferred-media__poster-image {
    display: none;
  }

  /* If the product model is playing, hide the preview image */
  .product-media-container:has(product-model .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  product-model {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  product-model model-viewer,
  product-model > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  product-model > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  product-model > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .button-shopify-xr {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-md);
  }

  .button-shopify-xr > svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-inline-end: var(--margin-md);
  }

  .button-shopify-xr[data-shopify-xr-hidden] {
    display: none;
  }

  product-model .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  product-model .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:deferred-media-product-model-styles */
/* START_SNIPPET:dialog-styles (INDEX:222) */
.dialog-modal {
    border: none;
    box-shadow: var(--shadow-popover);

    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      max-width: var(--normal-content-width);
    }

    @media screen and (max-width: 749px) {
      max-width: 100%;
      max-height: 100%;
      height: 100dvh;
      width: 100dvw;

      /* Fullscreen dialog spans the physical viewport (viewport-fit=cover); keep its
         content clear of the status bar, notch, and home indicator */
      padding: max(var(--padding-md), var(--safe-area-inset-top)) max(var(--padding-md), var(--safe-area-inset-right))
        max(var(--padding-md), var(--safe-area-inset-bottom)) max(var(--padding-md), var(--safe-area-inset-left));
    }
  }

  .dialog-modal::backdrop {
    transition: backdrop-filter var(--animation-speed) var(--animation-easing);
    backdrop-filter: brightness(1);
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  :where(.dialog-modal)[open] {
    animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
      transition: opacity var(--animation-speed) var(--animation-easing);
    }
  }

  :where(.dialog-modal).dialog-closing {
    animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      opacity: 0;
    }
  }

  /* stylelint-disable value-keyword-case */
  .dialog-drawer {
    --dialog-drawer-opening-animation: move-and-fade;
    --dialog-drawer-closing-animation: move-and-fade;
  }
  /* stylelint-enable value-keyword-case */

  .dialog-drawer[open] {
    --start-x: var(--custom-transform-from, 100%);
    --end-x: var(--custom-transform-to, 0px);
    --start-opacity: 1;

    animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
  }

  .dialog-drawer[open].dialog-closing {
    --start-x: 0px;
    --end-x: 100%;
    --start-opacity: 1;
    --end-opacity: 1;

    animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:dialog-styles */
/* START_SNIPPET:fiducia-pdp-claude (INDEX:227) */
.mf-fiducia { container-type: inline-size; width: 100%; margin-top: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif; color: #111; }
  .mf-fiducia *, .mf-fiducia *::before, .mf-fiducia *::after { box-sizing: border-box; }
  .mf-fiducia p, .mf-fiducia ul { margin: 0; }

  .mf-qty { container-type: inline-size; width: 100%; margin-top: 16px; padding: 9px 8px 8px; border: 1.5px solid #cfe9dc; border-radius: 12px; background: #fff; color: #14613f; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif; }
  .mf-qty *, .mf-qty *::before, .mf-qty *::after { box-sizing: border-box; }
  .mf-qty p { margin: 0; }
  .mf-qty__tit { font-weight: 800; font-size: 14.5px; line-height: 1.3; white-space: nowrap; }
  .mf-qty__row { display: grid; grid-template-columns: repeat(3, 1fr); margin: 7px 0 6px; border: 1px solid #bfe3d0; border-radius: 10px; overflow: hidden; background: #fff; }
  .mf-qty__c { min-width: 0; padding: 6px 2px 7px; border-left: 1px solid #bfe3d0; line-height: 1.15; }
  .mf-qty__c:first-child { border-left: 0; }
  .mf-qty__a { display: block; font-size: min(12px, 3.6cqw); font-weight: 700; color: #4a6b5c; white-space: nowrap; }
  .mf-qty__b { display: block; font-size: min(18px, 5.4cqw); font-weight: 800; color: #14613f; white-space: nowrap; }
  .mf-qty__x { display: block; margin: 3px 12% 0; padding: 1px 0; border-radius: 999px; background: #1fa56a; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; }
  .mf-qty__sub { font-size: 12.5px; line-height: 1.3; opacity: .85; white-space: nowrap; }
  @container (max-width: 330px) { .mf-qty__tit { font-size: 13.5px; } .mf-qty__sub { font-size: 11.5px; } }

  .mf-fiducia__card { background: #fff; border: 1px solid #dcdcdc; border-radius: 28px; padding: 6px 22px; }
  .mf-fiducia__riga { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid #ebebeb; }
  .mf-fiducia__riga:last-child { border-bottom: 0; }
  .mf-fiducia__icona { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: var(--fid-verde, #68cf9a); display: flex; align-items: center; justify-content: center; }
  .mf-fiducia__icona svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mf-fiducia__corpo { flex: 1; min-width: 0; }
  .mf-fiducia__titolo { font-size: 19px; line-height: 1.25; font-weight: 700; display: flex; align-items: center; gap: 6px; color: #111; }
  .mf-fiducia__freccia { width: 14px; height: 14px; stroke: #888; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
  .mf-fiducia__sotto { margin-top: 4px; font-size: 14.5px; line-height: 1.35; color: #444; white-space: nowrap; }
  .mf-fiducia__data { color: var(--fid-fecha, #1fa56a); font-weight: 700; }

  /* Igor 2026-10-04: tick azul de verificado junto a "clienti". Reversible: borrar esta regla. */
  mf-product-information .mf-trust-static__text::after { content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-left: .3em; vertical-align: -.25em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230095F6' d='M12.0 0.9L12.7 1.0L13.4 1.4L14.0 2.0L14.5 2.6L15.0 3.1L15.6 3.4L16.2 3.6L16.9 3.6L17.7 3.5L18.5 3.6L19.2 3.7L19.8 4.2L20.3 4.8L20.4 5.5L20.5 6.3L20.4 7.1L20.4 7.8L20.6 8.4L20.9 9.0L21.4 9.5L22.0 10.0L22.6 10.6L23.0 11.3L23.1 12.0L23.0 12.7L22.6 13.4L22.0 14.0L21.4 14.5L20.9 15.0L20.6 15.6L20.4 16.2L20.4 16.9L20.5 17.7L20.4 18.5L20.3 19.2L19.8 19.8L19.2 20.3L18.5 20.4L17.7 20.5L16.9 20.4L16.2 20.4L15.6 20.6L15.0 20.9L14.5 21.4L14.0 22.0L13.4 22.6L12.7 23.0L12.0 23.1L11.3 23.0L10.6 22.6L10.0 22.0L9.5 21.4L9.0 20.9L8.4 20.6L7.8 20.4L7.1 20.4L6.3 20.5L5.5 20.4L4.8 20.3L4.2 19.8L3.7 19.2L3.6 18.5L3.5 17.7L3.6 16.9L3.6 16.2L3.4 15.6L3.1 15.0L2.6 14.5L2.0 14.0L1.4 13.4L1.0 12.7L0.9 12.0L1.0 11.3L1.4 10.6L2.0 10.0L2.6 9.5L3.1 9.0L3.4 8.4L3.6 7.8L3.6 7.1L3.5 6.3L3.6 5.5L3.7 4.8L4.2 4.2L4.8 3.7L5.5 3.6L6.3 3.5L7.1 3.6L7.8 3.6L8.4 3.4L9.0 3.1L9.5 2.6L10.0 2.0L10.6 1.4L11.3 1.0Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m7.6 12.4 3.1 3.1 5.8-6.2'/%3E%3C/svg%3E") no-repeat center / contain; }

  .mf-fiducia__pagamenti { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 10px; }
  .mf-fiducia .metodo { flex: 0 1 48px; min-width: 0; display: block; line-height: 0; }
  .mf-fiducia__pago { display: block; width: 100%; height: auto; }

  .mf-fiducia__garanzie { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .mf-fiducia__garanzie li { display: flex; gap: 7px; align-items: center; font-size: 13.5px; line-height: 18px; color: #444; white-space: nowrap; }
  .mf-fiducia__garanzie svg { flex: 0 0 14px; width: 14px; height: 14px; stroke: #2f9e68; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

  @container (max-width: 400px) {
    .mf-fiducia__card { padding: 4px 16px; border-radius: 24px; }
    .mf-fiducia__riga { gap: 10px; padding: 16px 0; }
    .mf-fiducia__icona { flex-basis: 40px; width: 40px; height: 40px; }
    .mf-fiducia__icona svg { width: 21px; height: 21px; }
    .mf-fiducia__titolo { font-size: 17px; }
    .mf-fiducia__sotto { font-size: min(14.5px, calc((100cqw - 90px) / 18.8)); }
    .mf-fiducia__pagamenti { gap: 4px; }
    .mf-fiducia__garanzie { gap: 7px 6px; }
    .mf-fiducia__garanzie li { font-size: min(13.5px, calc((100cqw - 128px) / 17.8)); gap: 5px; }
    .mf-fiducia__garanzie svg { flex-basis: 12px; width: 12px; height: 12px; }
  }
/* END_SNIPPET:fiducia-pdp-claude */
/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:235) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */
/* START_SNIPPET:header-actions (INDEX:239) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */
/* START_SNIPPET:payment-terms-styles (INDEX:268) */
form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_SNIPPET:payment-terms-styles */
/* START_SNIPPET:pills-styles (INDEX:269) */
/* Pills (used in facets and predictive search) */

  .pills__pill {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

    color: var(--color-foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 48px;
    padding: 6px 12px;
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
    background-color: var(--pills-pill-background-color);
    transition: background-color var(--animation-speed) var(--animation-easing);

    &:hover {
      --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    }

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

  .pills__pill > .svg-wrapper {
    --close-icon-opacity: 0.4;
    --icon-stroke-width: 1px;

    color: var(--color-foreground);
  }

  .pills__pill--swatch {
    @media screen and (max-width: 749px) {
      padding-inline-start: var(--padding-sm);
    }
  }

  .pills__pill--swatch .swatch {
    margin-right: -4px;
  }

  .pills__pill--desktop-small {
    @media screen and (min-width: 750px) {
      font-size: var(--font-size--xs);
    }
  }
/* END_SNIPPET:pills-styles */
/* START_SNIPPET:predictive-search-styles (INDEX:274) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    40% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &:hover {
      opacity: 1;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */
/* START_SNIPPET:price-styles (INDEX:276) */
.price,
  .compare-at-price,
  .unit-price {
    white-space: nowrap;
  }

  .unit-price {
    display: block;
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note.tax-note.tax-note {
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note:empty {
    display: none;
  }

  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
    margin-block: 0;
  }

  /* Volume pricing note should match unit-price styling (small, grey text) */
  product-price .volume-pricing-note,
  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
    display: block;
    font-family: var(--font-body--family);
    font-weight: normal;
    font-size: var(--font-size--xs);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .compare-at-price {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    text-decoration-line: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
  }

  .price-item__group {
    display: inline-block;
  }
/* END_SNIPPET:price-styles */
/* START_SNIPPET:product-badges-styles (INDEX:278) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }

  .product-badges__badge--tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    vertical-align: middle;
    margin-inline-start: 0.5em;
    white-space: nowrap;
    padding-block: 0.3em;
    padding-inline: 0.65em;
  }

  .product-badges__badge--tag svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }
/* END_SNIPPET:product-badges-styles */
/* START_SNIPPET:product-card-gallery-zoom-details-styles (INDEX:279) */
.product-grid-view-zoom-out--details {
    display: none;
  }

  @media screen and (min-width: 750px) {
    ul[product-grid-view='zoom-out'] .product-grid-view-zoom-out--details {
      font-size: var(--font-size--xs);
      font-family: var(--font-paragraph--family);
      font-weight: 400;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 3;
    }
  }
/* END_SNIPPET:product-card-gallery-zoom-details-styles */
/* START_SNIPPET:product-card-styles (INDEX:280) */
.product-grid__card.product-grid__card {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--product-card-gap);
    align-items: var(--product-card-alignment);
    text-decoration: none;
    color: var(--color, var(--color-foreground));
    padding-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    overflow: hidden;
  }

  /*
    Product cards are narrow, so group content stacks on mobile. A group that
    turns "vertical on mobile" off renders without .mobile-column and keeps the
    horizontal direction it was given.
  */
  .product-grid__card .group-block > :is(.mobile-column, :not(.layout-panel-flex--row)) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  /* Collection and product list cards have equal heights */
  :is(.product-grid__item, .resource-list__item) .product-card {
    display: grid;
    height: 100%;
  }

  /* Product card title truncation - applied on mobile regardless of view */
  @media screen and (max-width: 749px) {
    :is(.product-card, .product-grid__card) :is(h4, .h4) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
    }
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card-styles */
/* START_SNIPPET:product-media-container-styles (INDEX:284) */
:where(:not(.dialog-zoomed-gallery)) > .product-media-container {
    --slide-width: 100%;

    display: flex;
    aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
    max-height: var(--constrained-height);
    width: var(--slide-width, 100%);

    /* Relative position needed for video and 3d models */
    position: relative;
    overflow: hidden;

    &:where(.constrain-height) {
      /* arbitrary offset value based on average theme spacing and header height */
      --viewport-offset: 400px;
      --constrained-min-height: 300px;
      --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

      margin-right: auto;
      margin-left: auto;
    }

    @supports (--test: round(up, 100%, 1px)) {
      /* width and overflow forces children to shrink to parent width */
      --slide-width: round(up, 100%, 1px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-media-container.constrain-height {
      max-height: none;
    }
  }

  @media screen and (min-width: 750px) {
    .product-media-container.constrain-height {
      --viewport-offset: var(--header-height, 100px);
      --constrained-min-height: 500px;
    }

    body:has(header-component[transparent]) .product-media-container.constrain-height {
      --viewport-offset: 0px;
    }
  }

  .product-media-container img {
    aspect-ratio: inherit;
    object-fit: contain;
  }

  .product-media-container.media-fit-contain img {
    object-position: center center;
  }

  .product-media-container.media-fit {
    --product-media-fit: cover;

    img {
      object-fit: var(--product-media-fit);
    }
  }
/* END_SNIPPET:product-media-container-styles */
/* START_SNIPPET:product-recommendations-styles (INDEX:288) */
.product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }
/* END_SNIPPET:product-recommendations-styles */
/* START_SNIPPET:quantity-selector-styles (INDEX:290) */
/* Quantity selector */
  .quantity-selector {
    --quantity-selector-width: 124px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    flex: 1 1 var(--quantity-selector-width);
    align-self: stretch;
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
    border-radius: var(--style-border-radius-buttons-secondary);
  }

  .quantity-selector :is(.quantity-minus, .quantity-plus) {
    /* Unset button styles */
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
    color: var(--color-input-text);
  }

  .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-inputs);
    border-end-start-radius: var(--style-border-radius-inputs);
  }

  .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-inputs);
    border-end-end-radius: var(--style-border-radius-inputs);
  }

  .product-details .quantity-selector,
  .quick-add-modal .quantity-selector {
    border-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-minus,
  .quick-add-modal .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-buttons-primary);
    border-end-start-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-plus,
  .quick-add-modal .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-buttons-primary);
    border-end-end-radius: var(--style-border-radius-buttons-primary);
  }

  .quantity-selector .svg-wrapper {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .quantity-selector svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  :is(.quantity-minus, .quantity-plus):active .svg-wrapper {
    transform: scale(0.9);
  }

  .quantity-selector input[type='number'] {
    margin: 0;
    width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
    min-width: 3ch;
    padding-inline: 0;
    text-align: center;
    border: none;
    appearance: none;
    border-radius: var(--style-border-radius-buttons);
    color: var(--color-input-text);
    background-color: transparent;
  }

  /* Chrome, Safari, Edge, Opera */
  .quantity-selector input[type='number']::-webkit-inner-spin-button,
  .quantity-selector input[type='number']::-webkit-outer-spin-button {
    appearance: none;
  }

  /* Firefox */
  .quantity-selector input[type='number'] {
    appearance: textfield;
  }
/* END_SNIPPET:quantity-selector-styles */
/* START_SNIPPET:quick-add-modal-styles (INDEX:292) */
#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;

      /* Bottom sheet touches the physical bottom edge (viewport-fit=cover); keep the
         buy buttons above the home indicator while the background fills the safe area */
      padding-block-end: var(--safe-area-inset-bottom);
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

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

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */
/* START_SNIPPET:quick-add-styles (INDEX:294) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));
    --quick-add-inset-inline-end: max(
      var(--quick-add-right),
      calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg)))
    );
    --quick-add-inset-block-end: max(
      var(--quick-add-bottom),
      calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg)))
    );

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  /* Hide "Add" button when "Choose" button is shown */
  [data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  /* Hide "Choose" button when "Add" button is shown */
  [data-quick-add-button='add'] .quick-add__button--choose {
    display: none;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;

    &:disabled {
      opacity: var(--opacity-muted-text);
    }
  }

  button.quick-add__button {
    --quick-add-collapsed-width: var(--button-size-md);
    --quick-add-icon-width: calc(var(--button-size-md) - 4px);
    --quick-add-expanded-width: max-content;

    display: var(--quick-add-mobile-display, none);
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: linear-gradient(var(--quick-add-background, var(--color-background)) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    width: var(--quick-add-collapsed-width);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    pointer-events: all;
    position: absolute;
    inset-inline-end: var(--quick-add-inset-inline-end);
    inset-block-end: var(--quick-add-inset-block-end);
    max-inline-size: calc(100% - var(--quick-add-inset-inline-end));
    min-inline-size: 0;
    white-space: nowrap;
    backdrop-filter: blur(20px) saturate(180%);
    interpolate-size: allow-keywords;

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: flex;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;

      /* Explicit "disabled" rule is needed to beat the `.button:disabled { opacity: 0.5 }` rule in base.css */
      &:disabled {
        opacity: 0;
      }
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button > .add-to-cart-icon {
    flex-shrink: 0;
    width: var(--quick-add-icon-width);
    height: 100%;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  @media screen and (min-width: 750px) {
    .quick-add__button:is(:hover, :focus-visible) {
      width: var(--quick-add-expanded-width);
      padding-inline-end: var(--padding-sm);
    }
  }

  .quick-add__button[data-added='true'] {
    width: var(--quick-add-collapsed-width);
    color: transparent;
  }

  .quick-add__button[data-added='true'] > .add-to-cart-icon {
    opacity: 0;
  }

  .quick-add__button[data-added='true'] .add-to-cart__added {
    color: var(--quick-add-foreground, var(--color-foreground));
  }

  @media (prefers-reduced-motion: no-preference) {
    button.quick-add__button {
      transition-property: scale, translate, opacity, width;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }
  }
/* END_SNIPPET:quick-add-styles */
/* START_SNIPPET:resource-card (INDEX:297) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

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

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

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

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

    .price {
      font-weight: 500;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */
/* START_SNIPPET:resource-list-styles (INDEX:300) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list(min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  /*
   * Grid tracks floor at their items' min-content width, so a card whose child
   * sets an aspect-ratio can push its item wider than its track and make the
   * whole grid overflow the page.
   */
  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */
/* START_SNIPPET:sanne-pack-claude (INDEX:302) */
/* ---- Sanne 1+1 / 2+2 (variante B del mockup): segmentos + filas compactas ---- */
  sanne-pack-claude {
    --spk-primary: #75000b; --spk-gold: #d9b25f; --spk-dark: #3a0508; --spk-green: #1fa56a;
    --spk-ink: #1d1a17; --spk-grey: #7a7068; --spk-line: #e9e2da; --spk-cream: #faf6f1;
    display: block; margin: 18px 0 12px;
    color: var(--spk-ink); font-family: inherit; font-size: 15px; line-height: 1.4; text-align: left;
  }
  sanne-pack-claude *, sanne-pack-claude *::before, sanne-pack-claude *::after { box-sizing: border-box; }
  sanne-pack-claude [hidden] { display: none !important; }

  sanne-pack-claude .spk__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  sanne-pack-claude .spk__opt { position: relative; display: block; width: 100%; margin: 0; background: #fff; border: 1px solid var(--spk-line); border-radius: 12px; padding: 12px 10px 11px; text-align: center; cursor: pointer; font: inherit; color: var(--spk-ink); box-shadow: none; text-transform: none; letter-spacing: normal; }
  sanne-pack-claude .spk__opt.is-on { border: 1.5px solid var(--spk-primary); background: var(--spk-cream); padding: 11.5px 9.5px 10.5px; }
  sanne-pack-claude .spk__opt:focus-visible { outline: 2px solid var(--spk-primary); outline-offset: 2px; }
  sanne-pack-claude .spk__dot { display: block; margin: 0 auto 7px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #cdc3b8; background: #fff; position: relative; }
  sanne-pack-claude .spk__opt.is-on .spk__dot { border-color: var(--spk-primary); }
  sanne-pack-claude .spk__opt.is-on .spk__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--spk-primary); }
  sanne-pack-claude .spk__t { display: block; font-weight: 700; font-size: 15px; }
  sanne-pack-claude .spk__price { display: block; margin-top: 3px; font-size: 16px; font-weight: 700; white-space: nowrap; }
  sanne-pack-claude .spk__old { display: block; color: var(--spk-grey); font-size: 13px; text-decoration: line-through; white-space: nowrap; }
  sanne-pack-claude .spk__badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--spk-gold); color: var(--spk-dark); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

  sanne-pack-claude .spk__sum { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin: 10px 2px 8px; font-size: 13px; }
  sanne-pack-claude .spk__save { color: var(--spk-green); font-size: 12.5px; font-weight: 600; }

  sanne-pack-claude .spk__list { border: 1px solid var(--spk-line); border-radius: 12px; background: #fff; padding: 0 10px; }
  sanne-pack-claude .spk__row { padding: 11px 0 12px; border-top: 1px solid var(--spk-line); }
  sanne-pack-claude .spk__row:first-child { border-top: 0; }
  sanne-pack-claude .spk__top { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; }
  sanne-pack-claude .spk__lbl { font-size: 13px; font-weight: 700; line-height: 1.2; }
  sanne-pack-claude .spk__gift { display: inline-block; background: var(--spk-green); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
  sanne-pack-claude .spk__grp { display: flex; align-items: center; gap: 8px; padding: 9px 0 0; border-top: 1px solid var(--spk-line); color: var(--spk-green); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  sanne-pack-claude .spk__grp::after { content: ""; flex: 1; height: 1px; background: rgb(31 165 106 / .3); }
  sanne-pack-claude .spk__grp + .spk__row { border-top: 0; }
  sanne-pack-claude .spk__ctl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }

  sanne-pack-claude .spk__msg { margin: 10px 2px 0; padding: 8px 10px; border-radius: 8px; background: #fbeceb; border: 1px solid #f3d7d4; color: #8d1a14; font-size: 13px; font-weight: 600; line-height: 1.3; }

  sanne-pack-claude .spk__cta { display: block; width: 100%; margin: 16px 0 0; height: 52px; border: 0; border-radius: 10px; background: var(--spk-primary); color: #fff; font: inherit; font-size: 16px; font-weight: 600; letter-spacing: normal; text-transform: none; cursor: pointer; box-shadow: none; }
  sanne-pack-claude .spk__cta:hover { background: var(--spk-dark); }
  sanne-pack-claude .spk__cta:focus-visible { outline: 2px solid var(--spk-gold); outline-offset: 2px; }
  sanne-pack-claude .spk__cta:disabled { opacity: .7; cursor: progress; }

  /* ---- Campos propios de color y talla (abren la ventana). Mismo aspecto en todas las piezas. ---- */
  .spk-trg { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; min-height: 42px; margin: 0; padding: 0 8px 0 10px; border: 1px solid #e9e2da; border-radius: 10px; background: #fff; color: #1d1a17; font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.2; text-align: left; text-transform: none; letter-spacing: normal; cursor: pointer; box-shadow: none; }
  .spk-trg:hover { border-color: #cdc3b8; }
  .spk-trg__val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spk-trg.is-empty .spk-trg__val { color: #7a7068; font-weight: 400; }
  .spk-trg:not(.is-empty) .spk-trg__val { font-weight: 600; }
  .spk-trg svg { flex: 0 0 13px; width: 13px; height: 13px; fill: none; stroke: #7a7068; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
  .spk-trg[aria-expanded="true"] svg { transform: rotate(180deg); }
  .spk-trg:focus-visible { outline: 2px solid #75000b; outline-offset: 2px; }
  .spk-trg.is-missing { border-color: #c4161c; box-shadow: 0 0 0 1px #c4161c; }
  .spk-trg__sw { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .2); background-size: cover; background-position: center; }

  @media (max-width: 380px) {
    .spk-trg { gap: 4px; padding: 0 6px 0 8px; font-size: 12px; }
    .spk-trg svg { flex-basis: 11px; width: 11px; height: 11px; }
  }

  /* Solo Sanne: el selector nativo de COLORES (paleta) se ve, antes del bloque del pack (pedido Igor 2026-10-07). Se ocultan el selector nativo de TALLA (el pack tiene su ventana), el boton estandar de añadir y el slot de upsell. */
  mf-product-information:has(sanne-pack-claude) .mf-option[data-is-size="true"] { display: none !important; }
  mf-product-information:has(sanne-pack-claude) .mf-actions [data-add],
  mf-product-information:has(sanne-pack-claude) .mf-upsell-slot { display: none !important; }
  html:has(sanne-pack-claude) .mf-sticky-atc { display: none !important; }

  /* ---- Ventana de color / talla (bottom-sheet en movil, ventana centrada en escritorio) ---- */
  .spk-sheet { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: flex-end; justify-content: center; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #1d1a17; }
  .spk-sheet[hidden] { display: none; }
  .spk-sheet *, .spk-sheet *::before, .spk-sheet *::after { box-sizing: border-box; }
  .spk-sheet__bd { position: absolute; inset: 0; background: rgb(29 26 23 / .5); opacity: 0; transition: opacity .22s ease; }
  .spk-sheet__panel { position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 40px rgb(0 0 0 / .18); transform: translateY(100%); transition: transform .26s cubic-bezier(.22, .8, .35, 1); }
  .spk-sheet.is-open .spk-sheet__bd { opacity: 1; }
  .spk-sheet.is-open .spk-sheet__panel { transform: none; }
  .spk-sheet__grab { width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 99px; background: #e0d8cf; }
  .spk-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
  .spk-sheet__hd { min-width: 0; }
  .spk-sheet__title { margin: 0; padding: 0; font-size: 17px; font-weight: 700; line-height: 1.25; }
  .spk-sheet__sub { margin: 1px 0 0; padding: 0; font-size: 13px; line-height: 1.3; color: #7a7068; }
  .spk-sheet__sub:empty { display: none; }
  .spk-sheet__guide { display: inline-block; margin: 4px 0 0; padding: 0; border: 0; background: none; color: #1d1a17; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal; }
  .spk-sheet__guide[hidden] { display: none; }
  .spk-sheet__x { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; margin: -2px -4px 0 0; padding: 0; border: 0; border-radius: 50%; background: #f4efe9; color: #1d1a17; cursor: pointer; }
  .spk-sheet__x:hover { background: #ebe3da; }
  .spk-sheet__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .spk-sheet__grid { display: grid; gap: 8px; }
  .spk-sheet__grid--size { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spk-sheet__grid--color { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
  .spk-sheet__size { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 8px; border: 1px solid #e9e2da; border-radius: 10px; background: #fff; color: #1d1a17; font: inherit; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: normal; cursor: pointer; box-shadow: none; }
  .spk-sheet__size:hover:not(:disabled) { border-color: #cdc3b8; }
  .spk-sheet__size.is-on { border: 1.5px solid #75000b; background: #faf6f1; color: #75000b; }
  .spk-sheet__size:disabled { opacity: .45; text-decoration: line-through; cursor: not-allowed; background: #faf8f5; }
  .spk-sheet__size:focus-visible, .spk-sheet__x:focus-visible, .spk-sheet__guide:focus-visible, .spk-sheet__col:focus-visible .spk-sheet__dot { outline: 2px solid #75000b; outline-offset: 2px; }
  .spk-sheet__size svg { position: absolute; top: 5px; right: 6px; width: 11px; height: 11px; fill: none; stroke: #75000b; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .spk-sheet__col { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; margin: 0; padding: 2px 0 0; border: 0; background: none; color: #1d1a17; font: inherit; text-transform: none; letter-spacing: normal; cursor: pointer; box-shadow: none; }
  .spk-sheet__dot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .2); background-size: cover; background-position: center; }
  .spk-sheet__col.is-on .spk-sheet__dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #75000b; }
  .spk-sheet__dot svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgb(0 0 0 / .55)); }
  .spk-sheet__cn { display: block; max-width: 100%; font-size: 12px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
  .spk-sheet__col.is-on .spk-sheet__cn { font-weight: 700; color: #75000b; }
  .spk-sheet__col:focus-visible { outline: none; }
  .spk-sheet__col:disabled { cursor: not-allowed; }
  .spk-sheet__col:disabled .spk-sheet__dot, .spk-sheet__col:disabled .spk-sheet__cn { opacity: .38; }
  .spk-sheet__col:disabled .spk-sheet__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(to top right, transparent calc(50% - 1px), #1d1a17 calc(50% - 1px), #1d1a17 calc(50% + 1px), transparent calc(50% + 1px)); }
  @media (min-width: 750px) {
    .spk-sheet { align-items: center; }
    .spk-sheet__panel { max-width: 420px; padding: 18px 20px 20px; border-radius: 16px; box-shadow: 0 24px 70px rgb(0 0 0 / .28); transform: translateY(14px) scale(.98); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
    .spk-sheet.is-open .spk-sheet__panel { opacity: 1; transform: none; }
    .spk-sheet__grab { display: none; }
    .spk-sheet__head { margin-bottom: 12px; }
  }
  @media (prefers-reduced-motion: reduce) { .spk-sheet__bd, .spk-sheet__panel { transition-duration: .01ms !important; } }
/* END_SNIPPET:sanne-pack-claude */
/* START_SNIPPET:search-modal (INDEX:306) */
/* 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:search (INDEX:307) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */
/* START_SNIPPET:skip-to-content-link (INDEX:310) */
.skip-to-content-link {
    position: absolute;
    inset-inline-start: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    inset-inline-start: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */
/* START_SNIPPET:slideshow-styles (INDEX:316) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

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

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);

    /* Prevents the sliding-in arrows from overflowing and flashing a horizontal scrollbar */
    overflow-x: clip;
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover)
    > slideshow-container
    > slideshow-slides
    > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide .slide__content {
    position: static;
  }

  /*
   * The media container has to leave the absolute positioning used by the on-media layout so it
   * occupies its own grid row, but it must stay a positioned ancestor. Its absolutely positioned
   * children (the video poster and the media overlay) would otherwise resolve against
   * slideshow-slide and stretch across the content row as well.
   */
  .slideshow--content-below-media slideshow-slide .slide__image-container {
    position: relative;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */
/* START_SNIPPET:swatch-styles (INDEX:325) */
/* Swatches */
  .swatch {
    --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
    --min-width-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height: 16px;
    --min-width: 16px;

    /* mobile values */
    --scaling-factor: 0.5;
    --max-swatch-size: 28px;
    --max-pill-size: 20px;
    --max-filter-size: 32px;

    /* From the settings */
    --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
    --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

    /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
    --offset-scaled-width: calc(
      var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
    );
    --offset-scaled-height: calc(
      var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
    );
    --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

    /* width = min(m + sU, (m + s * W'/H' * M'), M) */
    --swatch-width: min(
      calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
      calc(var(--min-width) + var(--offset-scaled-width)),
      var(--max-swatch-size)
    );

    /* height = min(m + sV, (m + s * H'/W' * M'), M) */
    --swatch-height: min(
      calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
      calc(var(--min-height) + var(--offset-scaled-height)),
      var(--max-swatch-size)
    );

    display: block;
    background: var(--swatch-background);
    background-position: var(--swatch-focal-point, center);
    border-radius: var(--variant-picker-swatch-radius);
    border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
    width: var(--swatch-width);
    height: var(--swatch-height);

    /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
    background-size: var(--swatch-width) var(--swatch-height);

    &.swatch--unavailable {
      border-style: dashed;
    }

    &.swatch--unscaled {
      /* for when you want fixed sizing (e.g. pdp) */
      --swatch-width: var(--variant-picker-swatch-width);
      --swatch-height: var(--variant-picker-swatch-height);
    }

    &.swatch--filter {
      --swatch-width: var(--max-filter-size);
      --swatch-height: var(--max-filter-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    &.swatch--pill {
      --swatch-width: var(--max-pill-size);
      --swatch-height: var(--max-pill-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    /* swatches in filters and pills always have a border  */
    &.swatch--filter,
    &.swatch--pill {
      --style-border-swatch-width: var(--variant-picker-border-width);
      --style-border-swatch-style: var(--variant-picker-border-style);
      --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
    }

    &.swatch--variant-image {
      background-size: cover;
    }

    @media screen and (min-width: 750px) {
      /* desktop values */
      --max-swatch-size: 32px;
      --max-pill-size: 16px;
      --max-filter-size: 28px;
      --scaling-factor: 0.65;
    }
  }
/* END_SNIPPET:swatch-styles */
/* START_SNIPPET:text-block-styles (INDEX:328) */
.text-block {
    width: var(--width, 100%);
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. The doubled class beats the global paragraph-link styles in base.css. */
  .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  /* The doubled class lets these edge resets beat heading/paragraph margins without relying on source order. */
  .text-block.text-block > *:last-child,
  .text-block.text-block > *:has(+ *:last-child:empty) {
    margin-block-end: 0;
  }

  .text-block.text-block > style + *,
  .text-block.text-block > *:first-child,
  .text-block.text-block > *:first-child:empty + * {
    margin-block-start: 0;
  }
/* END_SNIPPET:text-block-styles */
/* START_SNIPPET:text-component-shimmer-styles (INDEX:329) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

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

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

    &[shimmer] {
      color: transparent;

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

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

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */
/* START_SNIPPET:text (INDEX:330) */
:root {
    --text-align-default: left;
  }

  /* Base text-block sizing, spacing, wrapping, and helper classes live in text-block-styles.liquid. */
  .text-block {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block > * {
    width: var(--width, 100%);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }
/* END_SNIPPET:text */
/* START_SNIPPET:theme-drawer-styles (INDEX:332) */
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;

    /* Right-anchored drawer spans the full physical viewport (viewport-fit=cover); keep its
       content clear of the status bar, right-side notch, and home indicator */
    padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */
/* START_SNIPPET:variant-picker-styles (INDEX:348) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    background-color: var(--color-variant-background);
    color: inherit;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }

  .variant-picker .variant-option--buttons label:has(.swatch) {
    border-radius: var(--variant-picker-swatch-radius);
  }

  /* Variant option component */
  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;

    overflow-list::part(list) {
      padding-block: var(--overflow-list-padding-block, 0);
      padding-inline: var(--overflow-list-padding-inline, 0);
    }
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media screen and (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option--buttons legend,
  .variant-option--dropdowns > label,
  .variant-option[data-testid='variant-option-single'] {
    color: var(--variant-option-label-color, var(--color-foreground));
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued));
  }

  @media (prefers-reduced-motion: no-preference) {
    .variant-option__button-label,
    .variant-option__select-wrapper,
    .variant-option__button-label::before,
    .variant-option__button-label::after,
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }

    .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label::after {
      transition-property: clip-path;
    }

    .variant-option__button-label::before {
      transition-property: border-color;
    }

    .variant-option__select-wrapper,
    .variant-option__button-label {
      transition-property: background-color, border-color, color;
    }
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    cursor: pointer;
    display: flex;
    flex: 0 0 3.25em;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    overflow: clip;
    justify-content: center;
    min-height: 3.25em;
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    gap: 0;

    &:hover,
    &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
      --variant-picker-stroke-color: var(--color-variant-hover-border);

      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

    /* so instead use the layered background image trick */
    &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
      border-width: 0;
    }

    /* ::after/::before act as a fake border for the button style variant */

    /* ::after is the unavailable variant border that clips in */
    &:not(.variant-option__button-label--has-swatch)::before,
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: var(--options-border-width) solid var(--color-selected-variant-border);
      border-radius: inherit;
      pointer-events: none;
      z-index: 2;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
    }

    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
      inset: 0;
    }

    &:not(.variant-option__button-label--has-swatch)::before {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(0 0 0 0);
      border-color: var(--color-variant-border);
      inset: calc(var(--options-border-width) * -1);
    }

    &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
      border-color: var(--color-selected-variant-border);
    }

    /* setting left/right accounts for variant buttons of different widths */
    &:not(:has(:checked)):has(~ label > :checked),
    &:has(:checked):has(~ label > [data-previous-checked='true']) {
      .variant-option__button-label__pill {
        right: 0;
        left: unset;
      }
    }

    &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
    &:has(:checked) ~ label {
      .variant-option__button-label__pill {
        left: 0;
        right: unset;
      }
    }

    &:not(:has(:checked)):has(~ label > :checked) {
      --pill-offset: calc(100% + 1px);
    }

    &:has(:checked) ~ label {
      --pill-offset: calc(-100% - 1px);
    }

    &:has([data-current-checked='true']):first-of-type
      ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
    &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
      --clip: 0 0 0 100%;
    }

    &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
        .variant-option__button-label--has-swatch
      ),
    &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
      --clip: 0 100% 0 0;
    }

    &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  /* wrap around only for 3 or more variants in a row */

  /* the more complex selector rules here produce the wrap around effect for first/last variants */
  .variant-option--buttons:has(:nth-of-type(3)) {
    .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
      --pill-offset: calc(100% + 1px);
    }

    .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
        ~ label:last-of-type > :checked
      ) {
      --pill-offset: calc(-100% - 1px);
    }
  }

  .variant-option__button-label__pill {
    background: var(--color-selected-variant-background);
    position: absolute;
    top: calc(var(--options-border-width) * -1);
    bottom: calc(var(--options-border-width) * -1);
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    transform: translateX(var(--pill-offset, 0));
  }

  .variant-option__button-label__text {
    pointer-events: none;
    text-align: start;
    text-wrap: auto;
    z-index: 2;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);

    padding: 0;
    border: none;
    flex-basis: auto;
    min-height: auto;
  }

  .variant-option__button-label:has(:checked) {
    --variant-picker-stroke-color: var(--color-selected-variant-border);

    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label:has(:checked):hover {
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);

    .variant-option__button-label__pill {
      background-color: var(--color-selected-variant-hover-background);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid var(--color-variant-hover-border);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg,
  .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
    stroke: rgb(var(--color-variant-text-rgb) / var(--opacity-subdued-text));
  }

  /* Disable the duplicate overlay line so the subdued stroke doesn't double up */
  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg line:last-of-type {
    stroke: none;
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-selected-variant-border);

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-strikethrough-color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));

    background-color: var(--color-selected-variant-background);
    color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked):hover {
    background-color: var(--color-selected-variant-hover-background);
    color: var(--color-selected-variant-hover-text);
  }

  .variant-option__button-label input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .variant-option__button-label svg {
    position: absolute;
    left: var(--options-border-width);
    top: var(--options-border-width);
    height: calc(100% - (var(--options-border-width) * 2));
    width: calc(100% - (var(--options-border-width) * 2));
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
    stroke: var(--variant-strikethrough-color, rgb(var(--color-variant-text-rgb) / var(--opacity-60)));

    line {
      stroke-width: var(--options-border-width);
    }

    /* The second stroke line exists for "motion overlay". Disabled for swatches, remove line to avoid overlapping lines  */
    line:last-of-type {
      stroke: none;
    }
  }

  /* Override for swatch labels to maintain block display */
  .variant-option__button-label--has-swatch:has(input[type='radio']) {
    display: block;
  }

  /* Swatches do not take a background-color since a transparent or missing swatch would end up filled */
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked),
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked):hover {
    background-color: inherit;
  }
/* END_SNIPPET:variant-picker-styles */