/** Shopify CDN: Minification failed

Line 1563:21 Expected identifier but found whitespace
Line 1563:23 Unexpected "{"
Line 1563:32 Expected ":"
Line 1563:81 Expected ":"
Line 1581:23 Expected identifier but found whitespace
Line 1581:25 Unexpected "{"
Line 1581:34 Expected ":"
Line 1581:90 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:advertorial (INDEX:2) */
.lumin-advert-section {
    --lumin-advert-max-width: 1000px;
    --lumin-advert-sidebar-width: 300px;
    --lumin-advert-grid-gap: 40px;
  }

  .lumin-advert-wrapper {
    max-width: var(--lumin-advert-max-width);
    margin: 0 auto;
    padding: 0 var(--page-margin);
    display: block !important;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
  }

  /* Desktop two-column + sticky sidebar: clip on wrapper breaks sticky positioning */
  @media screen and (min-width: 750px) {
    .lumin-advert-section--two-column-desktop .lumin-advert-wrapper {
      overflow-x: visible;
    }
  }

  .lumin-advert-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lumin-advert-grid-gap);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    isolation: isolate;
  }

  .lumin-advert-container > * {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* Nested blocks (e.g. video slider) live inside group flex; default min-width:auto prevents shrinking */
  .lumin-advert-container .group-block-content {
    min-width: 0;
    max-width: 100%;
  }

  /* Block wrappers + flex children: default min-width:auto lets Swiper exceed the column */
  .lumin-advert-container .group-block-content > *,
  .lumin-advert-container .group-block {
    min-width: 0;
    max-width: 100%;
  }

  /* Stacked: sidebar below main (mobile default + when only one block) */
  .lumin-advert-container--sidebar-on > :last-child:not(:only-child) {
    max-width: var(--lumin-advert-sidebar-width);
    align-self: flex-start;
   /* border-top: 1px solid rgb(var(--color-border-rgb) / 0.35);*/
  }

  /* Desktop: main left, sidebar right (class from Liquid avoids :has() repaint cost on mobile) */
  @media screen and (min-width: 750px) {
    .lumin-advert-container--sidebar-on.lumin-advert-container--with-sidebar-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, var(--lumin-advert-sidebar-width));
      gap: var(--lumin-advert-grid-gap);
      align-items: start;
    }

    .lumin-advert-container--sidebar-on.lumin-advert-container--with-sidebar-layout > :not(:last-child) {
      grid-column: 1;
      grid-row: auto;
      width: 100%;
    }

    .lumin-advert-container--sidebar-on.lumin-advert-container--with-sidebar-layout > :last-child {
      grid-column: 2;
      grid-row: 1 / -1;
      width: 100%;
      max-width: none;
      align-self: start;
     /* border-top: none;
      border-left: 1px solid rgb(var(--color-border-rgb) / 0.35);
      padding-left: var(--lumin-advert-grid-gap);*/
      position: sticky;
      top: calc(var(--header-group-height, 0px) + 20px);
      height: fit-content;
    }
  }

  @media (max-width: 749px) {
    .lumin-advert-container {
      gap: min(var(--lumin-advert-grid-gap), 32px);
    }
    .lumin-advert-wrapper {
      padding: 0;
    }

    .lumin-advert-container--sidebar-on > :last-child:not(:only-child) {
      max-width: none;
      align-self: stretch;
      position: static;
      top: auto;
    }
  }
/* END_SECTION:advertorial */

/* START_SECTION:collection-links (INDEX:5) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;
    grid-gap: var(--gap-3xl);

    &:has([ratio='portrait']) {
      --template-column-ratio: 0.8fr;
    }

    &:has([ratio='square']) {
      --template-column-ratio: 1fr;
    }

    &:has([ratio='landscape']) {
      --template-column-ratio: 1.4fr;
    }

    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

    &[layout='spotlight'] {
      position: relative;
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

      @media (min-width: 749px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

      .collection-links__container {
        align-items: var(--alignment);
      }

      @media (max-width: 749px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'text' 'image';
        grid-gap: var(--gap-2xl);

        .collection-links__container {
          gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
          justify-content: var(--alignment);
        }
      }
    }

    &[layout='text'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }
    }
  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:email-popup (INDEX:9) */
.section-email-popup {
    display: contents;
  }

  .email-popup {
    --email-popup-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.15);
    --email-popup-radius: 0;
  }

  .email-popup__dialog-wrapper {
    display: contents;
  }

  .email-popup__dialog {
    padding: 0;
    border: none;
    max-width: var(--email-popup-max-width);
    width: 95vw;
    background: transparent;
    box-shadow: var(--email-popup-shadow);
    border-radius: var(--email-popup-radius);
  }

  @media screen and (max-width: 749px) {
    .email-popup__dialog--position-mobile-center {
      margin: auto;
    }

    .email-popup__dialog--position-mobile-top {
      margin: 24px auto auto;
    }

    .email-popup__dialog--position-mobile-bottom {
      margin: auto auto 24px;
    }
  }

  @media screen and (min-width: 750px) {
    .email-popup__dialog--position-center {
      margin: auto;
    }

    .email-popup__dialog--position-top {
      margin: 24px auto auto;
    }

    .email-popup__dialog--position-bottom {
      margin: auto auto 24px;
    }

    .email-popup__dialog--position-top-left {
      margin: 24px auto auto 24px;
    }

    .email-popup__dialog--position-top-right {
      margin: 24px 24px auto auto;
    }

    .email-popup__dialog--position-bottom-left {
      margin: auto auto 24px 24px;
    }

    .email-popup__dialog--position-bottom-right {
      margin: auto 24px 24px auto;
    }
  }

  .email-popup__dialog::backdrop {
    background: rgb(0 0 0 / 0.5);
  }

  .email-popup__container {
    display: flex;
    flex-direction: column;
    background: transparent;
    border-radius: var(--email-popup-radius);
    overflow: hidden;
  }

  .email-popup__container--no-image {
    align-items: center;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .email-popup__container {
      flex-direction: row;
    }

    .email-popup__container--no-image {
      flex-direction: column;
    }
  }

  @keyframes email-popup-image-slide-in {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes email-popup-image-slide-in-mobile {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .email-popup__dialog[open] .email-popup__image-inner {
    animation: email-popup-image-slide-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  @media screen and (max-width: 749px) {
    .email-popup__dialog[open] .email-popup__image-inner {
      animation-name: email-popup-image-slide-in-mobile;
    }

    .email-popup__image-panel--hidden-mobile {
      display: none;
    }
  }

  .email-popup__image-inner {
    width: 100%;
    height: 100%;
    min-height: inherit;
  }

  .email-popup__image-panel--auto .email-popup__image-inner {
    position: absolute;
    inset: 0;
  }

  .email-popup__image-panel {
    flex: 0 0 auto;
    min-height: 220px;
    overflow: hidden;
    aspect-ratio: var(--email-popup-image-ratio, 4 / 5);
    background: transparent;
  }

  .email-popup__image-panel--auto {
    aspect-ratio: auto;
    min-height: 220px;
  }

  @media screen and (min-width: 750px) {
    .email-popup__image-panel {
      width: 50%;
      min-height: 0;
    }

    .email-popup__image-panel--auto {
      flex: 0 1 auto;
      align-self: stretch;
      min-height: 0;
      position: relative;
    }

    .email-popup__image-panel--auto .email-popup__image-inner,
    .email-popup__image-panel--auto .email-popup__image,
    .email-popup__image-panel--auto .email-popup__image-placeholder {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
  }

  .email-popup__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .email-popup__image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 180px;
    background: var(--color-background-secondary, #f5f5f0);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .email-popup__placeholder-text {
    color: var(--color-foreground-muted, #999);
    font-size: 14px;
    font-family: inherit;
  }

  .email-popup__content-panel {
    flex: 1;
    background: var(--color-background, #fff);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
  }

  .email-popup__content-panel--align-left {
    align-items: flex-start;
    text-align: left;
  }

  .email-popup__content-panel--align-center {
    align-items: center;
    text-align: center;
  }

  .email-popup__content-panel--align-right {
    align-items: flex-end;
    text-align: right;
  }

  .email-popup__content-panel--align-left .email-popup__form-row,
  .email-popup__content-panel--align-right .email-popup__form-row {
    width: 100%;
  }

  .email-popup__content-panel--align-left .email-popup__discount-code,
  .email-popup__content-panel--align-right .email-popup__discount-code {
    width: 100%;
  }

  .email-popup__content-panel--align-left .email-popup__success-message {
    justify-content: flex-start;
  }

  .email-popup__content-panel--align-center .email-popup__success-message {
    justify-content: center;
  }

  .email-popup__content-panel--align-right .email-popup__success-message {
    justify-content: flex-end;
  }

  .email-popup__content-panel {
    padding: var(--email-popup-content-padding, 44px);
  }

  .email-popup__content-panel .email-popup__content-inner {
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .email-popup__container:not(.email-popup__container--no-image) .email-popup__content-panel {
      width: 50%;
    }
  }

  .email-popup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-foreground, #000);
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }

  .email-popup__close:hover {
    opacity: 1;
  }

  .email-popup__close svg {
    width: 16px;
    height: 16px;
  }

  .email-popup__headline {
    font-family: inherit;
    font-size: 28px;
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.2;
    color: var(--color-foreground, #000);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
  }

  @media screen and (min-width: 750px) {
    .email-popup__headline {
      font-size: 32px;
    }
  }

  .email-popup__subtext {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-foreground-muted, #333);
    margin: 0 0 28px;
    font-weight: var(--ms-w-body, 400);
  }

  .email-popup__content-panel--no-email-input .email-popup__subtext {
    margin-bottom: 0;
  }

  .email-popup__blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
  }

  .email-popup__content-panel--no-email-input .email-popup__blocks {
    margin-bottom: 0;
  }

  .email-popup__form {
    margin: 0;
  }

  .email-popup__form-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid #e0e0e0;
    border-radius: var(--email-popup-input-radius, 0);
    overflow: hidden;
  }

  .email-popup__input {
    flex: 1;
    min-width: 0;
    padding: 14px 18px;
    font-size: 14px;
    font-family: inherit;
    color: #000;
    background: #fff;
    border: none;
    border-radius: 0;
    outline: none;
  }

  .email-popup__input::placeholder {
    color: #999;
  }

  .email-popup__input:focus {
    outline: none;
  }

  .email-popup__submit {
    padding: 14px 24px;
    font-size: 12px;
    font-weight: var(--ms-w-medium, 500);
    font-family: inherit;
    letter-spacing: var(--ms-tracking-label, 0.08em);
    text-transform: var(--ms-case-label, uppercase);
    color: #fff;
    background: #000;
    border: none;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
  }

  .email-popup__submit:hover {
    background: #333;
  }

  .email-popup__message {
    margin-top: 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .email-popup__message--error {
    color: #c00;
  }

  .email-popup__message--success {
    color: #0a0;
  }

  .email-popup__form:has(.email-popup__success) .email-popup__headline {
    font-size: var(--email-popup-success-headline-size, 32px);
    margin-bottom: var(--email-popup-success-gap, 16px);
  }

  .email-popup__form:has(.email-popup__success) .email-popup__subtext {
    margin-bottom: var(--email-popup-success-gap, 16px);
    font-size: var(--email-popup-success-subtext-size, 14px);
  }

  .email-popup__form:has(.email-popup__success) .email-popup__subtext + .email-popup__success {
    margin-top: 0;
  }

  .email-popup__success {
    margin-top: 0;
  }

  .email-popup__form:has(.email-popup__success) .email-popup__success {
    display: flex;
    flex-direction: column;
    gap: var(--email-popup-success-gap, 16px);
  }

  .email-popup__success-message {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--email-popup-success-message-size, 14px);
    color: var(--color-foreground, #0a0);
    margin-bottom: 0;
  }

  .email-popup__success-message .svg-wrapper svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .email-popup__discount-code-wrapper {
    margin-top: 0;
  }

  .email-popup__discount-label {
    display: block;
    font-size: var(--email-popup-success-discount-label-size, 12px);
    font-weight: var(--ms-w-medium, 500);
    text-transform: var(--ms-case-label, uppercase);
    letter-spacing: var(--ms-tracking-label, 0.08em);
    color: var(--color-foreground, #000);
    margin-bottom: 8px;
  }

  .email-popup__discount-code {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--email-popup-input-radius, 0);
    overflow: hidden;
  }

  .email-popup__discount-code-text {
    flex: 1;
    min-width: 0;
    padding: 14px 18px;
    font-size: var(--email-popup-success-discount-code-size, 14px);
    font-family: inherit;
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.1em);
    color: var(--color-foreground, #000);
    background: var(--color-background, #fff);
    border: none;
  }

  .email-popup__copy-button {
    padding: 14px 24px;
    font-size: 12px;
    font-weight: var(--ms-w-medium, 500);
    font-family: inherit;
    letter-spacing: var(--ms-tracking-label, 0.08em);
    text-transform: var(--ms-case-label, uppercase);
    color: var(--color-button-text, var(--color-background, #fff));
    background: var(--color-button-background, var(--color-foreground, #000));
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
  }

  .email-popup__copy-button:hover {
    opacity: 0.9;
  }

  .email-popup__copy-button.copied,
  .email-popup__copy-button:has(.form__message:not(.visually-hidden)) {
    background: var(--color-success, #0a0);
  }

  .email-popup__copy-button:has(.form__message:not(.visually-hidden)) .email-popup__copy-button-text {
    display: none;
  }

  .email-popup__message .svg-wrapper {
    flex-shrink: 0;
  }

  .email-popup__message .svg-wrapper svg {
    width: 18px;
    height: 18px;
  }
/* END_SECTION:email-popup */

/* START_SECTION:featured-product (INDEX:12) */
.featured-product-section .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;

    @media (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Here I should maybe set the width to auto when the ratio is set to adapt */
  .featured-product-section .product-media-container.constrain-height {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);

    @media screen and (min-width: 750px) {
      --viewport-offset: 300px;
    }
  }

  .featured-product-section .product-grid__card {
    --padding-block: 20px;
    --padding-inline: 20px;

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

  @media screen and (max-width: 749px) {
    .featured-product-section .media-block {
      order: -1;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer-utilities (INDEX:13) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-foreground-muted);

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      justify-content: center;
      gap: var(--gap);
      align-items: start;
      text-align: left;
    }
  }

  .utilities a {
    color: var(--color-foreground-muted);
  }

  .utilities > * {
    text-align: center;

    @media screen and (min-width: 750px) {
      text-align: left;
      justify-self: start;
    }
  }

  /* Mobile (<750px): block alignment (setting: mobile_block_alignment) */
  @media screen and (max-width: 749px) {
    .utilities.utilities--mobile-align-start {
      align-items: flex-start;
    }

    .utilities.utilities--mobile-align-start > * {
      width: 100%;
      text-align: left;
      align-self: stretch;
    }

    .utilities.utilities--mobile-align-center {
      align-items: center;
    }

    .utilities.utilities--mobile-align-center > * {
      width: 100%;
      text-align: center;
      align-self: stretch;
    }

    .utilities.utilities--mobile-align-end {
      align-items: flex-end;
    }

    .utilities.utilities--mobile-align-end > * {
      width: 100%;
      text-align: right;
      align-self: stretch;
    }

    .utilities.utilities--mobile-align-start .policy-list--horizontal {
      justify-content: flex-start;
    }

    .utilities.utilities--mobile-align-center .policy-list--horizontal {
      justify-content: center;
    }

    .utilities.utilities--mobile-align-end .policy-list--horizontal {
      justify-content: flex-end;
    }

    .utilities.utilities--mobile-align-start anchored-popover-component.footer-utilities__policy-list {
      display: flex;
      justify-content: flex-start;
      text-align: left;
      width: 100%;
    }

    .utilities.utilities--mobile-align-center anchored-popover-component.footer-utilities__policy-list {
      display: flex;
      justify-content: center;
      text-align: center;
      width: 100%;
    }

    .utilities.utilities--mobile-align-end anchored-popover-component.footer-utilities__policy-list {
      display: flex;
      justify-content: flex-end;
      text-align: right;
      width: 100%;
    }

    .utilities.utilities--mobile-align-start .social-icons__wrapper {
      justify-content: flex-start;
    }

    .utilities.utilities--mobile-align-center .social-icons__wrapper {
      justify-content: center;
    }

    .utilities.utilities--mobile-align-end .social-icons__wrapper {
      justify-content: flex-end;
    }

    .utilities.utilities--mobile-align-start .payment-icons__list {
      justify-content: flex-start;
    }

    .utilities.utilities--mobile-align-center .payment-icons__list {
      justify-content: center;
    }

    .utilities.utilities--mobile-align-end .payment-icons__list {
      justify-content: flex-end;
    }
  }

  /* Dynamic positioning based on number of blocks */
  @media screen and (min-width: 750px) {
    /* 1 block: Single column, left aligned */
    .utilities--blocks-1 {
      grid-template-columns: 1fr;
      justify-content: start;
    }

    .utilities--blocks-1 > * {
      justify-self: start;
      text-align: left;
    }

    /* 2 blocks: two equal columns */
    .utilities--blocks-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 3 blocks: seven columns — outer pairs span 2, middle block spans 3 */
    .utilities--blocks-3 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .utilities--blocks-3 > *:nth-child(1) {
      grid-column: span 2;
    }

    .utilities--blocks-3 > *:nth-child(2) {
      grid-column: span 3;
    }

    .utilities--blocks-3 > *:nth-child(3) {
      grid-column: span 2;
    }

    /* Horizontal policy list: three auto tracks (overrides repeat(7)) */
    .utilities--blocks-3.utilities--policy-list-horizontal {
      grid-template-columns: auto auto auto;
      grid-template-areas: 'utilities-row3-start utilities-row3-middle utilities-row3-end';
    }

    .utilities--blocks-3.utilities--policy-list-horizontal > *:nth-child(1) {
      grid-area: utilities-row3-start;
    }

    .utilities--blocks-3.utilities--policy-list-horizontal > *:nth-child(2) {
      grid-area: utilities-row3-middle;
    }

    .utilities--blocks-3.utilities--policy-list-horizontal > *:nth-child(3) {
      grid-area: utilities-row3-end;
    }

    /*
      4–6 blocks: seven columns per row.
      Row 1: blocks 1–3 span 2 + 3 + 2 (= 7).
      Six blocks → row 2: blocks 4–6 same pattern (5th spans 3).
      Five blocks → row 2: spans 3 + 4.
      Four blocks → row 2: block 4 spans full row.
    */
    .utilities--blocks-4,
    .utilities--blocks-5,
    .utilities--blocks-6 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .utilities--blocks-4 > *:nth-child(1),
    .utilities--blocks-5 > *:nth-child(1),
    .utilities--blocks-6 > *:nth-child(1) {
      grid-column: span 2;
      grid-row: 1;
    }

    .utilities--blocks-4 > *:nth-child(2),
    .utilities--blocks-5 > *:nth-child(2),
    .utilities--blocks-6 > *:nth-child(2) {
      grid-column: span 3;
      grid-row: 1;
    }

    .utilities--blocks-4 > *:nth-child(3),
    .utilities--blocks-5 > *:nth-child(3),
    .utilities--blocks-6 > *:nth-child(3) {
      grid-column: span 2;
      grid-row: 1;
    }

    .utilities--blocks-6 > *:nth-child(4) {
      grid-column: span 2;
      grid-row: 2;
    }

    .utilities--blocks-6 > *:nth-child(5) {
      grid-column: span 3;
      grid-row: 2;
    }

    .utilities--blocks-6 > *:nth-child(6) {
      grid-column: span 2;
      grid-row: 2;
    }

    .utilities--blocks-4 > *:nth-child(4) {
      grid-column: 1 / -1;
      grid-row: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 100%;
    }

    .utilities--blocks-5 > *:nth-child(4) {
      grid-column: span 3;
      grid-row: 2;
    }

    .utilities--blocks-5 > *:nth-child(5) {
      grid-column: span 4;
      grid-row: 2;
    }

    /*
      Desktop ≥750px — center inner content in key columns:
      when 3+ blocks, align the 2nd block to center; when 6 blocks, also align the 5th (middle bottom row).
    */
    .utilities.utilities--blocks-3 > *:nth-child(2),
    .utilities.utilities--blocks-4 > *:nth-child(2),
    .utilities.utilities--blocks-5 > *:nth-child(2),
    .utilities.utilities--blocks-6 > *:nth-child(2),
    .utilities.utilities--blocks-6 > *:nth-child(5) {
      justify-self: center;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      text-align: center;
    }

    .utilities.utilities--blocks-3 > *:nth-child(2) .policy-list--horizontal,
    .utilities.utilities--blocks-4 > *:nth-child(2) .policy-list--horizontal,
    .utilities.utilities--blocks-5 > *:nth-child(2) .policy-list--horizontal,
    .utilities.utilities--blocks-6 > *:nth-child(2) .policy-list--horizontal,
    .utilities.utilities--blocks-6 > *:nth-child(5) .policy-list--horizontal {
      justify-content: center;
    }

    .utilities.utilities--blocks-3 > *:nth-child(2) anchored-popover-component.footer-utilities__policy-list,
    .utilities.utilities--blocks-4 > *:nth-child(2) anchored-popover-component.footer-utilities__policy-list,
    .utilities.utilities--blocks-5 > *:nth-child(2) anchored-popover-component.footer-utilities__policy-list,
    .utilities.utilities--blocks-6 > *:nth-child(2) anchored-popover-component.footer-utilities__policy-list,
    .utilities.utilities--blocks-6 > *:nth-child(5) anchored-popover-component.footer-utilities__policy-list {
      display: flex;
      justify-content: center;
      text-align: center;
      width: 100%;
    }

    .utilities.utilities--blocks-3 > *:nth-child(2) .social-icons__wrapper,
    .utilities.utilities--blocks-4 > *:nth-child(2) .social-icons__wrapper,
    .utilities.utilities--blocks-5 > *:nth-child(2) .social-icons__wrapper,
    .utilities.utilities--blocks-6 > *:nth-child(2) .social-icons__wrapper,
    .utilities.utilities--blocks-6 > *:nth-child(5) .social-icons__wrapper {
      justify-content: center;
    }

    .utilities.utilities--blocks-3 > *:nth-child(2) .payment-icons__list,
    .utilities.utilities--blocks-4 > *:nth-child(2) .payment-icons__list,
    .utilities.utilities--blocks-5 > *:nth-child(2) .payment-icons__list,
    .utilities.utilities--blocks-6 > *:nth-child(2) .payment-icons__list,
    .utilities.utilities--blocks-6 > *:nth-child(5) .payment-icons__list {
      justify-content: center;
    }

    /*
      Align selected blocks to the inline end (flex-end within full-width cell).
      2 blocks → last; 3 → last; 4 → 3rd only; 5 → 3rd + last; 6 → 3rd + last.
    */
    .utilities.utilities--blocks-2 > *:nth-child(2),
    .utilities.utilities--blocks-3 > *:nth-child(3),
    .utilities.utilities--blocks-4 > *:nth-child(3),
    .utilities.utilities--blocks-5 > *:nth-child(3),
    .utilities.utilities--blocks-5 > *:nth-child(5),
    .utilities.utilities--blocks-6 > *:nth-child(3),
    .utilities.utilities--blocks-6 > *:nth-child(6) {
      display: flex;
      justify-content: flex-end;
      justify-self: end;
      width: 100%;
      text-align: right;
    }

    /*
      Policy horizontal list overrides its own centered flex; menu popover must flex internal trigger.
      (Theme wraps blocks in `.shopify-block`; children are targeted with `>` *.)
    */
    .utilities.utilities--blocks-2 > *:nth-child(2) .policy-list--horizontal,
    .utilities.utilities--blocks-3 > *:nth-child(3) .policy-list--horizontal,
    .utilities.utilities--blocks-4 > *:nth-child(3) .policy-list--horizontal,
    .utilities.utilities--blocks-5 > *:nth-child(3) .policy-list--horizontal,
    .utilities.utilities--blocks-5 > *:nth-child(5) .policy-list--horizontal,
    .utilities.utilities--blocks-6 > *:nth-child(3) .policy-list--horizontal,
    .utilities.utilities--blocks-6 > *:nth-child(6) .policy-list--horizontal {
      justify-content: flex-end;
    }

    .utilities.utilities--blocks-2 > *:nth-child(2) anchored-popover-component.footer-utilities__policy-list,
    .utilities.utilities--blocks-3 > *:nth-child(3) anchored-popover-component.footer-utilities__policy-list,
    .utilities.utilities--blocks-4 > *:nth-child(3) anchored-popover-component.footer-utilities__policy-list,
    .utilities.utilities--blocks-5 > *:nth-child(3) anchored-popover-component.footer-utilities__policy-list,
    .utilities.utilities--blocks-5 > *:nth-child(5) anchored-popover-component.footer-utilities__policy-list,
    .utilities.utilities--blocks-6 > *:nth-child(3) anchored-popover-component.footer-utilities__policy-list,
    .utilities.utilities--blocks-6 > *:nth-child(6) anchored-popover-component.footer-utilities__policy-list {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:14) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-content {
      grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
      grid-auto-flow: row;
    }

    .footer-content[style*='--grid-columns: 4'] {
      grid-template-columns: repeat(2, 1fr);
    }

    .footer-content--isolated-grid-item-tablet > :last-child {
      grid-column: 1 / -1;
    }
  }

  @media screen and (min-width: 990px) {
    .footer-content {
      grid-template-columns: repeat(var(--grid-columns), 1fr);
    }

    /* Single item centered */
    .footer-content[style*='--grid-columns: 1'] {
      justify-items: center;
    }

    .footer-content--isolated-grid-item-desktop > :last-child {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:footer */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:16) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  .header {
    display: block;
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;

    /* used to apply transparency to .header__row, will only ever be transparent or unset */
    --header-bg-color: transparent;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    /* transparent color scheme on .header should never apply its background color */
    background-color: transparent;
    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    /* Only show opaque background when hovering over menu items with children (mega menu)
       Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --header-bg-color: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;

      .header__row {
        /* Faster transition for "in" animation */
        transition: color var(--animation-values-fast), border-color var(--animation-values-fast),
          background-color var(--animation-values-fast);
      }
    }

    .header__row {
      /* Slower transition for "out" animation */
      transition: color var(--animation-values-slow), border-color var(--animation-values-slow),
        background-color var(--animation-values-slow);
    }
  }

  :is(.header[transparent]:not([data-sticky-state='active']), .header[transparent='always'][data-sticky-state='active'])
    .header__row:not(
      :has(
          .mega-menu__list:hover,
          .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating]),
          .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])
        )
    ) {
    /* while transparent, header-row ignores its color-scheme settings, pull from the header-component */
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header--inherit-color-scheme-on-menu-open:has(.mega-menu__list:hover) .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])
    )
    .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])
    )
    .header__row {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-background: inherit;
    --color-background-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
  }

  .header-section {
    position: relative;
    z-index: var(--layer-heightened);
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-sticky);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header.header--backdrop-blur[data-sticky-state] {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  :active-view-transition-type(empty-cart-drawer) {
    .header[data-sticky-state='active'] {
      view-transition-name: none;
    }
  }

  .header[data-sticky-state='idle'],
  .header[data-sticky-state='active'][data-animating] {
    opacity: 0;
  }

  .header__row {
    position: relative;

    /* will default to bg from its color scheme unless --header-bg-color is transparent */
    background-color: var(--header-bg-color, var(--color-background));
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--color-border);
  }

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
    }
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 750px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

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

  .header__column--right {
    gap: var(--gap-xl);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header-logo {
        grid-area: center;
      }

      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }

      &:not(:has(.account-actions)) .search-action {
        grid-area: rightA;
      }

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

      header-actions {
        grid-area: rightB;
      }
    }
  }

  /* Logo link: no horizontal padding (removed from theme settings) — keeps tap targets from overlapping adjacent controls */
  .header__columns .header-logo.spacing-style {
    padding-inline: 0;
    margin-inline: 0;
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
      Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.dropdown-localization__button:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .dropdown-localization__button:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .dropdown-localization__button,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Extend hover area through padding to prevent flickering on actual menu items */
  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__link[aria-haspopup],
  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__link,
  .menu-list__list-item:where(:not([slot='overflow'])) > button.menu-list__link {
    margin-block: calc(-2 * var(--header-padding));
    padding-block: calc(2 * var(--header-padding));
    margin-inline: calc(-1 * var(--gap-xl) / 2);
    padding-inline: calc(var(--gap-xl) / 2);
  }

  /* Set header paddings based on height setting */
  .header {
    /* `--padding-sm` (0.7rem ≈ 11px) es el alto de fábrica de Horizon, calculado
       para un logo de UNA línea. Un logo con bajada —"Bëne / Add life"— llena esa
       caja y se ve pegado arriba y abajo. Por eso el aire ahora es un ajuste, con
       el valor de fábrica como default: quien no lo toque no ve ningún cambio. */
    --header-padding: {{ section.settings.header_padding_block | default: 11 }}px;
    --font-paragraph--line-height: 1;
    contain: layout style;
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  /* El ajuste de móvil va DESPUÉS de `.header--compact` y con la misma
     especificidad (dos clases), para que gane en los dos modos de alto.
     Puesto antes, el preset compacto lo pisaba en pantallas chicas. */
  @media screen and (max-width: 749px) {
    .header.header {
      --header-padding: {{ section.settings.header_padding_block_mobile | default: 11 }}px;
    }
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

  /* When the header is transparent, add a margin to a potential header-section below it */
  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  /* When the header is transparent, and when there is no header-section below it, offset the first main-section with
   * the height of the header
   */

  main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    &.spacing-style,
    .spacing-style {
      --section-top-offset: calc(var(--header-group-height) * var(--transparent-header-offset-boolean));

      /* Any nested sections should not be offset */
      :is(.spacing-style, .inherit-spacing) {
        --section-top-offset: 0px;
      }
    }

    /* Make sticky content immediately stick to the top of the page */
    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active] {
    content-visibility: visible;
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:17) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(> #header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-wrapper {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__image,
  .hero--auto .hero__video {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    :is(.hero__image, .hero__video) {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-wrapper {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__image,
  .hero__video,
  .hero__video-poster {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  /* Mobile/Desktop media visibility */

  .hero__image--mobile,
  .hero__video--mobile,
  .hero__video-wrapper--mobile {
    display: none;
  }

  .hero__image--desktop,
  .hero__video--desktop,
  .hero__video-wrapper--desktop {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .hero__image--desktop,
    .hero__video--desktop,
    .hero__video-wrapper--desktop {
      display: none;
    }

    .hero__image--mobile,
    .hero__video--mobile,
    .hero__video-wrapper--mobile {
      display: block;
    }

    .hero__media-wrapper {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-wrapper {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

  .hero__video-wrapper--desktop {
    position: relative;
  }

  .hero__video-poster--desktop {
    position: absolute;
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-wrapper,
  .hero__content-wrapper {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

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

  .hero__blurred-image--mobile {
    display: block;

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

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX:18) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:19) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 750px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:22) */
.blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:23) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Apart from the first and second rows in the grid, all remaining blog posts
   * are arranged in a three-column layout:
   * +------------+------------+-------------+
   * |            |            |             |
   * |  (span 2)  |  (span 2)  |  (span 2)   |
   * |            |            |             |
   * +------------+------------+-------------+
   */
  .blog-post-item {
    --blog-post-card-scale: 0.6;

    grid-column: span 2;

    @media screen and (max-width: 749px) {
      --blog-post-card-scale: 0.5;

      grid-column: span 6;
    }
  }

  /**
   * The second row of blog posts has two columns:
   * +-------------------+-------------------+
   * |                   |                   |
   * |  (column span 3)  |  (column span 3)  |
   * |                   |                   |
   * +-------------------+-------------------+
   */
  .blog-post-item:nth-child(2),
  .blog-post-item:nth-child(3) {
    --blog-post-card-scale: 0.8;

    grid-column: span 3;

    @media screen and (max-width: 749px) {
      --blog-post-card-scale: 0.5;

      grid-column: span 6;
    }
  }

  /**
   * The first row of blog posts has only one column:
   * +---------------------------------------+
   * |                                       |
   * |           (1 column span 6)           |
   * |                                       |
   * +---------------------------------------+
   */
  .blog-post-item:first-child {
    --blog-post-card-scale: 1;

    grid-column: span 6;
  }

  /**
   * When there's no image, the blog post item has a border.
   */
  .blog-post-item {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:24) */
.cart-page {
    --cart-font-size--2xs: var(--font-size--2xs);
    --cart-font-size--xs: var(--font-size--xs);
    --cart-font-size--sm: var(--font-size--sm);
    --cart-font-size--md: var(--font-size--md);
    --cart-font-size--lg: var(--font-size--lg);
    --cart-font-size--xl: var(--font-size--xl);
    --cart-font-size--2xl: var(--font-size--2xl);

    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__primary {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  @media screen and (min-width: 750px) {
    .cart-page:not(.cart-page--empty) {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      align-items: start;
    }

    .cart-page:not(.cart-page--empty) .cart-page__primary {
      grid-column: 1;
      grid-row: 1;
    }

    .cart-page:not(.cart-page--empty) .cart-page__summary {
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .cart-page__more-blocks {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .section--page-width .cart-page:has(.cart__container--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }

    .cart__container--extend {
      height: 100%;
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page:not(.cart-page--empty) {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }

  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);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:26) */
.main-collection-grid {
    grid-column: var(--grid-column--mobile);

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

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  /* Make product media go edge-to-edge by using negative margins */
  :is(.collection-wrapper--full-width) .card-gallery,
  :is(.collection-wrapper--full-width-on-mobile) .card-gallery {
    @media screen and (max-width: 749px) {
      margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
      margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:marquee (INDEX:28) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:29) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

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

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:ms-announcement-marquee (INDEX:30) */
/* ===========================================================================
     ms-announcement-marquee — CSS scopeado .ms-marquee__ · vars por instancia.
     Marquee CSS-only (sin JS). Colores del scheme activo. Mobile-first.
     =========================================================================== */
  .ms-marquee {
    display: block;
    width: 100%;
    background-color: var(--ms-marquee-bg, var(--color-background));
    color: var(--ms-marquee-text, var(--color-foreground));
    overflow: hidden;
  }

  .ms-marquee__viewport {
    width: 100%;
    overflow: hidden;
    padding-block: var(--ms-marquee-pad-block, 10px);
  }

  /* Pista: 2 grupos en fila; -50% = ancho de un grupo → loop perfecto. */
  .ms-marquee__track {
    display: flex;
    width: max-content;
    animation: ms-marquee-scroll var(--ms-marquee-duration, 30s) linear infinite;
    will-change: transform;
  }

  .ms-marquee__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    /* Cada grupo llena al menos el ancho visible y reparte los mensajes: con pocos
       mensajes en desktop NO queda hueco antes de repetir (space-around mantiene el
       ritmo uniforme también al saltar del grupo 1 al 2). Con muchos mensajes el
       grupo crece con el contenido y space-around ya no aplica. */
    min-width: 100vw;
    justify-content: space-around;
  }

  .ms-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-space-3xs, 0.35rem);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    font-size: var(--ms-marquee-font, 14px);
    line-height: 1.3;
  }

  /* Separador entre mensajes (también al saltar del grupo 1 al 2 → espaciado uniforme). */
  .ms-marquee__item::after {
    content: var(--ms-marquee-sep, '◆');
    margin-inline: var(--ms-marquee-gap, 24px);
    opacity: 0.5;
    font-size: 0.7em;
  }

  .ms-marquee--upper .ms-marquee__item {
    text-transform: var(--ms-case-label, uppercase);
    letter-spacing: var(--ms-tracking-label, 0.04em);
  }

  .ms-marquee__icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .ms-marquee__icon svg { display: block; }

  .ms-marquee__item--link:hover .ms-marquee__text {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  @keyframes ms-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* Pausa para poder leer / usar los enlaces */
  .ms-marquee--pause-hover:hover .ms-marquee__track,
  .ms-marquee__track:focus-within {
    animation-play-state: paused;
  }

  /* ── Mobile: mismo efecto, texto más chico ── */
  @media screen and (max-width: 749px) {
    .ms-marquee__item { font-size: var(--ms-marquee-font-mobile, 12px); }
    .ms-marquee__viewport { padding-block: var(--ms-marquee-pad-block-mobile, 8px); }
    .ms-marquee__item--hide-mobile { display: none; }
  }
  @media screen and (min-width: 750px) {
    .ms-marquee__item--hide-desktop { display: none; }
  }

  /* ── a11y: foco visible ── */
  .ms-marquee__item--link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: var(--ms-radius-sm, 4px);
  }

  /* ── reduced motion: no animar; permitir leer (centrar / scroll manual) ── */
  @media (prefers-reduced-motion: reduce) {
    .ms-marquee__track {
      animation: none;
      transform: none;
      width: 100%;
      justify-content: center;
      flex-wrap: nowrap;
    }
    .ms-marquee__group[aria-hidden='true'] { display: none; }
    .ms-marquee__viewport { overflow-x: auto; }
  }
/* END_SECTION:ms-announcement-marquee */

/* START_SECTION:ms-banner-v2 (INDEX:31) */
.ms-bnr {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  /* El marco es lo que lleva la foto. Fuera de el no hay fondo, asi que
     "a sangre" y "contenido" son el mismo CSS con distinto ancho. */
  .ms-bnr__frame {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: var(--ms-bnr-max, 1280px);
    margin-inline: auto;
    border-radius: var(--ms-bnr-radius, 16px);
    min-height: calc(var(--ms-bnr-h-m, 0) * 1svh);
    display: flex;
  }

  .ms-bnr--full .ms-bnr__frame {
    max-width: none;
    border-radius: 0;
  }
  /* Contenido = el mismo margen lateral que el resto de las secciones. Sin
     esto, en movil el marco (1280 de tope) llenaba la pantalla y se veia a
     sangre con las esquinas redondas cortadas por el borde. */
  .ms-bnr:not(.ms-bnr--full) .ms-bnr__frame {
    max-width: min(var(--ms-bnr-max, 1280px), calc(100% - 2 * var(--page-margin, 16px)));
  }
  /* ...y el esquema pinta SOLO la caja: alrededor queda el fondo de la
     pagina, como en las demas secciones contenidas. */
  .ms-bnr:not(.ms-bnr--full) {
    background-color: transparent;
    padding-block: var(--ms-bnr-outer, 0px);
  }
  .ms-bnr:not(.ms-bnr--full) .ms-bnr__frame { background-color: var(--color-background); }
  .ms-bnr__text,
  .ms-bnr__actions { display: contents; }

  .ms-bnr__bg { position: absolute; inset: 0; z-index: 0; }
  .ms-bnr__picture { display: block; block-size: 100%; }

  .ms-bnr__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: var(--ms-bnr-bgpos-m, center);
    display: block;
  }

  .ms-bnr__placeholder {
    position: absolute;
    inset: 0;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
  }

  .ms-bnr__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--ms-bnr-scrim-color, #000020);
    opacity: var(--ms-bnr-scrim, 0.4);
    pointer-events: none;
  }

  .ms-bnr__inner {
    position: relative;
    z-index: 2;
    inline-size: 100%;
    display: flex;
    padding-inline: var(--page-margin, 1.25rem);
    padding-block: var(--ms-bnr-pad-top-m, 40px) var(--ms-bnr-pad-bottom-m, 40px);
  }

  /* Posicion vertical del contenido dentro del marco */
  .ms-bnr--cpm-top .ms-bnr__inner { align-items: flex-start; }
  .ms-bnr--cpm-center .ms-bnr__inner { align-items: center; }
  .ms-bnr--cpm-bottom .ms-bnr__inner { align-items: flex-end; }

  .ms-bnr__content {
    inline-size: 100%;
    max-width: var(--ms-bnr-content-max, 620px);
    display: flex;
    flex-direction: column;
    gap: var(--ms-bnr-spacing, 18px);
    color: var(--ms-bnr-ink, var(--color-foreground));
  }

  .ms-bnr--tam-center .ms-bnr__content { margin-inline: auto; text-align: center; }
  .ms-bnr--tam-center .ms-bnr__point { justify-content: center; }
  .ms-bnr--tam-center .ms-bnr__cta { align-self: center; }

  .ms-bnr__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    opacity: 0.75;
  }

  /* `inherit` = sigue al contenido (esquema o «Color del texto»); el picker
     de titular solo entra si Leo lo pinta. */
  .ms-bnr__heading {
    margin: 0;
    color: var(--ms-bnr-heading-ink, var(--color-foreground-heading, inherit));
  }

  .ms-bnr__heading em {
    font-style: var(--ms-accent-style, italic);
    color: var(--ms-accent-ink, var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary))));
    font-weight: inherit;
    text-decoration-line: var(--ms-accent-decoration, none);
    text-decoration-color: var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary)));
    text-decoration-thickness: var(--ms-accent-thickness, 2px);
    text-underline-offset: var(--ms-accent-offset, 3px);
    text-decoration-skip-ink: auto;
  }

  .ms-bnr__sub { opacity: 0.9; }
  .ms-bnr__sub > :first-child { margin-block-start: 0; }
  .ms-bnr__sub > :last-child { margin-block-end: 0; }

  /* ── Los puntos ───────────────────────────────────────────────────────── */
  .ms-bnr__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--ms-bnr-cols-m, 1), minmax(0, 1fr));
    gap: var(--ms-bnr-point-gap, 20px);
  }

  .ms-bnr__point {
    display: flex;
    gap: 0.75rem;
    min-width: 0;
  }

  .ms-bnr__point-body { min-width: 0; }

  /* La explicacion del punto. Sin picker hereda del contenido; con picker
     manda el color de la seccion, que es lo que se pidio el 7-sep. */
  .ms-bnr__point-text { color: var(--ms-bnr-point-ink, inherit); }

  /* La frase clave: resaltada para que el ojo salte de una a otra */
  .ms-bnr__lead {
    color: var(--ms-bnr-lead, var(--ms-accent-ink, var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary)))));
    font-weight: 600;
  }

  /* a) En linea — la frase y la explicacion corren en el mismo parrafo */
  .ms-bnr--p-inline .ms-bnr__point-body { display: block; }
  .ms-bnr--p-inline .ms-bnr__lead { display: inline; }
  .ms-bnr--p-inline .ms-bnr__lead::after { content: " "; }
  .ms-bnr--p-inline .ms-bnr__point-text { display: inline; }

  /* b) Apilado — icono, titulo y explicacion, uno debajo del otro */
  .ms-bnr--p-stacked .ms-bnr__point { flex-direction: column; }
  .ms-bnr--p-stacked .ms-bnr__point-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .ms-bnr--p-stacked .ms-bnr__lead { font-size: 1.05rem; line-height: 1.25; }
  .ms-bnr--p-stacked .ms-bnr__point-text { opacity: 0.9; line-height: 1.5; }

  /* ── Icono ────────────────────────────────────────────────────────────── */
  /* El circulo y el GLIFO se miden por separado: subir el tamano del circulo
     dejaba el icono chiquito flotando en medio. */
  .ms-bnr__icon-svg,
  .ms-bnr__icon-img {
    inline-size: var(--ms-bnr-icon-glyph, 24px);
    block-size: var(--ms-bnr-icon-glyph, 24px);
    object-fit: contain;
  }

  .ms-bnr__icon {
    flex: 0 0 auto;
    inline-size: var(--ms-bnr-icon, 48px);
    block-size: var(--ms-bnr-icon, 48px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ms-bnr-icon-bg, color-mix(in srgb, currentcolor 12%, transparent));
    color: var(--ms-bnr-icon-ink, currentcolor);
  }

  .ms-bnr__icon svg { inline-size: 45%; block-size: 45%; display: block; }
  .ms-bnr__icon-img { display: block; }
  .ms-bnr__icon-img--mask {
    background-color: var(--ms-bnr-icon-ink, currentcolor);
    -webkit-mask-image: var(--ms-bnr-icon-src);
    mask-image: var(--ms-bnr-icon-src);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .ms-bnr__cta { align-self: flex-start; }

  .ms-bnr__trust {
    margin: 0;
    font-size: 0.8125rem;
    opacity: 0.8;
  }

  /* ── Desktop ──────────────────────────────────────────────────────────── */
  @media screen and (min-width: 750px) {
    .ms-bnr__frame { min-height: calc(var(--ms-bnr-h-d, 0) * 1svh); }
    .ms-bnr__image { object-position: var(--ms-bnr-bgpos-d, center); }

    .ms-bnr__inner {
      padding-block: var(--ms-bnr-pad-top-d, 72px) var(--ms-bnr-pad-bottom-d, 72px);
      padding-inline: clamp(1.5rem, 5vw, 4.5rem);
    }

    .ms-bnr--cpd-top .ms-bnr__inner { align-items: flex-start; }
    .ms-bnr--cpd-center .ms-bnr__inner { align-items: center; }
    .ms-bnr--cpd-bottom .ms-bnr__inner { align-items: flex-end; }

    /* En desktop la alineacion la manda su propio ajuste, no el de movil */
    .ms-bnr--tam-center .ms-bnr__content { margin-inline: 0; text-align: start; }
    .ms-bnr--tam-center .ms-bnr__point { justify-content: flex-start; }
    .ms-bnr--tam-center .ms-bnr__cta { align-self: flex-start; }

    .ms-bnr--tad-center .ms-bnr__content { margin-inline: auto; text-align: center; }
    .ms-bnr--tad-center .ms-bnr__point { justify-content: center; }
    .ms-bnr--tad-center .ms-bnr__cta { align-self: center; }

    .ms-bnr--tad-right .ms-bnr__content { margin-inline-start: auto; text-align: end; }
    .ms-bnr--tad-right .ms-bnr__point { justify-content: flex-end; }
    .ms-bnr--tad-right .ms-bnr__cta { align-self: flex-end; }

    .ms-bnr__points {
      grid-template-columns: repeat(var(--ms-bnr-cols, 2), minmax(0, 1fr));
    }

    /* Cintillo: texto a la izquierda, boton a la derecha, en una fila. */
    .ms-bnr--row .ms-bnr__content {
      max-width: none;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      column-gap: clamp(1.5rem, 4vw, 3rem);
      text-align: start;
    }
    .ms-bnr--row .ms-bnr__text {
      display: flex;
      flex-direction: column;
      gap: var(--ms-bnr-spacing, 18px);
      min-width: 0;
      max-width: var(--ms-bnr-content-max, 620px);
    }
    .ms-bnr--row .ms-bnr__actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.5rem;
      flex: 0 0 auto;
    }
    .ms-bnr--row .ms-bnr__cta.ms-bnr__cta { align-self: auto; }
  }

  @media screen and (max-width: 749px) {
    .ms-bnr--auto-m .ms-bnr__frame { display: grid; }
    .ms-bnr--auto-m .ms-bnr__frame::before {
      content: "";
      grid-area: 1 / 1;
      inline-size: 100%;
      aspect-ratio: var(--ms-bnr-ratio-m);
      align-self: start;
      pointer-events: none;
    }
    .ms-bnr--auto-m .ms-bnr__inner { grid-area: 1 / 1; }
  }

  @media screen and (min-width: 750px) {
    .ms-bnr--auto-d .ms-bnr__frame { display: grid; }
    .ms-bnr--auto-d .ms-bnr__frame::before {
      content: "";
      grid-area: 1 / 1;
      inline-size: 100%;
      aspect-ratio: var(--ms-bnr-ratio-d);
      align-self: start;
      pointer-events: none;
    }
    .ms-bnr--auto-d .ms-bnr__inner { grid-area: 1 / 1; }
  }
/* END_SECTION:ms-banner-v2 */

/* START_SECTION:ms-bestsellers (INDEX:32) */
/* ===========================================================================
     ms-bestsellers — CSS scopeado .ms-bestsellers__ · variables por #ms-bestsellers-{id}
     Colores SIEMPRE del scheme activo (var(--color-*)). Mobile-first.
     =========================================================================== */
  .ms-bestsellers {
    --ms-bs-touch-min: var(--ms-touch-min, 44px);
    color: var(--color-foreground);
    background-color: var(--color-background);
  }

  .ms-bestsellers__inner {
    width: 100%;
    max-width: var(--ms-bs-max-width, 1280px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 1.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-md, 1.25rem);
  }

  /* ── Encabezado ──────────────────────────────────────────────────────────── */
  .ms-bestsellers__header {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-2xs, 0.4rem);
  }

  .ms-bestsellers__heading {
    color: var(--color-foreground-heading, inherit);
    margin: 0;
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    font-size: var(--font-h2--size, clamp(1.5rem, 1rem + 2.4vw, 2.5rem));
    line-height: var(--font-h2--line-height, 1.1);
    letter-spacing: var(--font-h2--letter-spacing, normal);
    text-wrap: balance;
  }

  /* Resalta una palabra del título con <em>: color/cursiva/subrayado desde el
     editor, grosor y separación globales (Ajustes Myshopiguru). */
  .ms-bestsellers__heading em {
    font-style: var(--ms-accent-style, italic);
    /* Rev 2 §3.4: con el subrayado encendido la palabra conserva el color del
       titular (--ms-accent-ink: currentcolor) y el acento pinta SOLO la regla.
       Apagado, la palabra sigue yendo en acento. Detalle en ms-accent-vars. */
    color: var(--ms-accent-ink, var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary))));
    font-weight: inherit;
    text-decoration-line: var(--ms-accent-decoration, none);
    text-decoration-color: var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary)));
    text-decoration-thickness: var(--ms-accent-thickness, 2px);
    text-underline-offset: var(--ms-accent-offset, 3px);
    text-decoration-skip-ink: auto;
  }

  .ms-bestsellers__subheading {
    font-size: var(--font-body--size, 1rem);
    line-height: 1.5;
    opacity: 0.85;
    max-width: 60ch;
  }

  .ms-bestsellers__subheading > :first-child { margin-block-start: 0; }
  .ms-bestsellers__subheading > :last-child { margin-block-end: 0; }

  /* Alineación del encabezado (título + subtítulo). Default izquierda. */
  .ms-bestsellers--head-center .ms-bestsellers__header { align-items: center; text-align: center; }
  .ms-bestsellers--head-right .ms-bestsellers__header { align-items: flex-end; text-align: right; }

  /* Contenedor de tabs: separa la fila de tabs del panel de cards.
     <ms-tabs-component> es un custom element (inline por defecto); sin esto
     los controles quedaban pegados a las tarjetas. */
  .ms-bestsellers__tabs-component {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-md, 1.25rem);
  }

  /* ── Controles: tablist + "ver todos" desktop ─────────────────────────────── */
  .ms-bestsellers__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-space-sm, 0.75rem);
  }

  /* Tablist: fila deslizable horizontal (no se rompe en varias líneas).
     SIN bleed: respeta el padding lateral de la sección, así las tabs quedan
     alineadas con el título y las cards (no se pegan al borde). */
  .ms-bestsellers__tablist {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--ms-space-2xs, 0.5rem);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* SIN scroll-snap a proposito. Cuando los tabs desbordan (pasa con poco margen:
       3 tabs ya piden 324px de los 328 que hay en un telefono de 360), el snap
       re-alinea la fila cada vez que la pagina hace scroll VERTICAL y la fila se
       mueve sola bajo el dedo. Los tabs son botones que se tocan, no un carrusel:
       no ganan nada con snap y el scroll libre se siente mejor. */
    overscroll-behavior-x: contain;
    min-width: 0;
  }
  .ms-bestsellers__tablist::-webkit-scrollbar { display: none; }

  .ms-bestsellers__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-space-3xs, 0.35rem);
    flex: 0 0 auto;
    min-height: var(--ms-bs-touch-min, 44px);
    padding: 0.5rem 1rem;
    border: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.25);
    border-radius: var(--ms-bs-tab-radius, var(--ms-radius-pill, 999px));
    background: transparent;
    color: var(--ms-bs-tab-text, var(--color-foreground));
    font-family: inherit;
    font-size: var(--font-body--size, 0.9375rem);
    /* Convención ms-: tabs NO en mayúsculas forzadas (no es botón de acción) */
    text-transform: none;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
  }

  /* Tab activo: por defecto color primario del scheme; editable por settings. */
  .ms-bestsellers__tab[aria-selected="true"] {
    background: var(--ms-bs-tab-active-bg, var(--color-primary));
    color: var(--ms-bs-tab-active-text, var(--color-primary-button-text, var(--color-background)));
    border-color: var(--ms-bs-tab-active-bg, var(--color-primary));
    font-weight: var(--ms-w-medium, 500);
  }

  .ms-bestsellers__tab-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.05em 0.45em;
    border-radius: var(--ms-radius-sm, 6px);
    background: var(--ms-bs-tab-badge-bg, rgb(var(--color-foreground-rgb, 0 0 0) / 0.1));
    color: var(--ms-bs-tab-badge-text, inherit);
    font-size: 0.7em;
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.4;
  }
  .ms-bestsellers__tab[aria-selected="true"] .ms-bestsellers__tab-badge {
    background: var(--ms-bs-tab-badge-bg, rgb(var(--color-background-rgb, 255 255 255) / 0.25));
    color: var(--ms-bs-tab-badge-text, inherit);
  }

  /* ── Estilo de pestañas: SUBRAYADO / minimal (Opulenzo · Lost Gen) ───────────
     Texto limpio sin relleno; la activa lleva tinta + línea inferior. La "Forma"
     (pill/recta) no aplica aquí. Colores editables vía los mismos settings. */
  .ms-bestsellers--tstyle-underline .ms-bestsellers__tablist {
    gap: var(--ms-space-md, 1.5rem);
    border-bottom: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.14);
  }
  .ms-bestsellers--tstyle-underline .ms-bestsellers__tab {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.5rem 0;
    color: var(--ms-bs-tab-text, var(--color-foreground));
    opacity: 0.55;
    position: relative;
  }
  .ms-bestsellers--tstyle-underline .ms-bestsellers__tab:hover {
    opacity: 1;
  }
  .ms-bestsellers--tstyle-underline .ms-bestsellers__tab[aria-selected="true"] {
    background: transparent;
    border-color: transparent;
    color: var(--ms-bs-tab-active-bg, var(--color-foreground));
    opacity: 1;
    font-weight: var(--ms-w-medium, 500);
  }
  .ms-bestsellers--tstyle-underline .ms-bestsellers__tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--ms-bs-tab-active-bg, var(--color-foreground));
  }
  .ms-bestsellers--tstyle-underline .ms-bestsellers__tab-badge {
    background: var(--ms-bs-tab-badge-bg, rgb(var(--color-foreground-rgb, 0 0 0) / 0.1));
  }

  /* "Ver todos" desktop: oculto en mobile (se usa el botón ancho del panel) */
  .ms-bestsellers__view-all-desktop {
    display: none;
  }

  /* "Ver todos" desktop (enlace con flecha): tipografía/case del SISTEMA DE BOTONES
     del tema para que el texto empate con los demás CTA ms-. */
  .ms-bestsellers__view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--ms-bs-touch-min, 44px);
    color: var(--color-foreground);
    font-family: var(--button-font-family-secondary, var(--font-primary--family, var(--font-heading--family, inherit)));
    /* Tipografía = SISTEMA DE BOTONES del tema; fallback = estándar nativo (paragraph). */
    font-size: var(--button-font-size, var(--font-paragraph--size, 1rem));
    font-weight: var(--button-font-family-secondary-weight, var(--ms-w-medium, 500));
    text-transform: var(--button-text-case-secondary, none);
    line-height: var(--font-paragraph--line-height, 1.2);
    text-decoration: none;
    white-space: nowrap;
  }
  .ms-bestsellers__view-all-link:hover { text-decoration: underline; }
  .ms-bestsellers__view-all-arrow { transition: transform 0.15s ease; }
  .ms-bestsellers__view-all-link:hover .ms-bestsellers__view-all-arrow { transform: translateX(3px); }
  /* El atributo [hidden] debe ganar a la regla de la clase (misma especificidad,
     ganaba la clase por orden) — si no, se mostraban TODOS los "Ver todos" a la
     vez en desktop en lugar de solo el del tab activo. */
  .ms-bestsellers__view-all-link[hidden] { display: none; }

  /* ── Panel + grid/carrusel ─────────────────────────────────────────────────
     Mobile-first: por defecto carrusel horizontal con scroll-snap + dots.
     Desktop (>=750px): grid de N columnas (salvo layout=carousel).
     =========================================================================== */
  .ms-bestsellers__panel {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-sm, 0.9rem);
  }
  .ms-bestsellers__panel[hidden] { display: none; }

  .ms-bestsellers__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Mobile: carrusel deslizable */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--ms-bs-cols-mobile) - 1) * var(--ms-bs-grid-gap, 12px)) / var(--ms-bs-cols-mobile));
    gap: var(--ms-bs-grid-gap, 12px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* sangrado para que se asome la siguiente card */
    margin-inline: calc(-1 * var(--page-margin, 1.5rem));
    padding-inline: var(--page-margin, 1.5rem);
    scroll-padding-inline: var(--page-margin, 1.5rem);
  }
  .ms-bestsellers__grid::-webkit-scrollbar { display: none; }

  .ms-bestsellers__item {
    scroll-snap-align: start;
    min-width: 0;
  }

  /* Mobile en modo grid: rejilla fija en vez de carrusel deslizable.
     (mobile_layout = grid). Quita el bleed y los dots del carrusel. */
  .ms-bestsellers--m-grid .ms-bestsellers__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--ms-bs-cols-mobile-grid, 2), minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  .ms-bestsellers--m-grid .ms-bestsellers__dots { display: none; }

  /* ── Dots (mobile) ─────────────────────────────────────────────────────────
     Indicador visual del nº de cards. La navegación real es swipe (scroll nativo).
     =========================================================================== */
  .ms-bestsellers__dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
  }
  .ms-bestsellers__dot {
    width: 7px;
    height: 7px;
    border-radius: var(--ms-radius-round, 50%);
    background: var(--color-foreground);
    opacity: 0.25;
  }
  .ms-bestsellers__dot.is-active {
    opacity: 0.9;
    background: var(--color-primary);
  }

  /* ── "Ver todos" mobile: botón SECUNDARIO COMPACTO (outline canónico ms-) ───────
     Ancho del contenido (hug-content), NO full-width — consistente con los demás
     botones secundarios ms-. padding/radio/tipografía/case del SISTEMA DE BOTONES.
     Se alinea según la alineación del encabezado de la sección (regla --head-* abajo);
     por defecto (izquierda) queda alineado al inicio de la columna del panel. */
  .ms-bestsellers__view-all-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    align-self: flex-start;
    min-height: var(--ms-bs-touch-min, 44px);
    /* Altura/espaciado = SISTEMA DE BOTONES del tema; fallback = estándar nativo 16px/24px. */
    padding: var(--button-padding-block, 16px) var(--button-padding-inline, 24px);
    border-radius: var(--style-border-radius-buttons-secondary, var(--style-border-radius-buttons-primary, var(--buttons-radius, var(--ms-radius-md, 8px))));
    border: var(--style-border-width-secondary, 1px) solid rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.6);
    background: transparent;
    color: var(--color-foreground);
    font-family: var(--button-font-family-secondary, var(--font-primary--family, var(--font-heading--family, inherit)));
    font-size: var(--button-font-size, var(--font-paragraph--size, 1rem));
    font-weight: var(--button-font-family-secondary-weight, var(--ms-w-medium, 500));
    text-transform: var(--button-text-case-secondary, none);
    line-height: var(--font-paragraph--line-height, 1.2);
    text-decoration: none;
    box-sizing: border-box;
  }
  /* El botón compacto sigue la alineación del encabezado de la sección. */
  .ms-bestsellers--head-center .ms-bestsellers__view-all-mobile { align-self: center; }
  .ms-bestsellers--head-right .ms-bestsellers__view-all-mobile { align-self: flex-end; }
  /* Alineación DEDICADA del "Ver todos" (independiente del encabezado; gana por orden). */
  .ms-bestsellers--vaalign-left .ms-bestsellers__view-all-mobile { align-self: flex-start; }
  .ms-bestsellers--vaalign-center .ms-bestsellers__view-all-mobile { align-self: center; }
  .ms-bestsellers--vaalign-right .ms-bestsellers__view-all-mobile { align-self: flex-end; }
  .ms-bestsellers__view-all-mobile:hover {
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.04);
  }

  /* ── "Ver todos": color + estilo editables ─────────────────────────────────
     Color (texto/acento): si el setting está vacío, hereda el scheme.
     Estilo: auto (enlace desktop + botón mobile = como hoy) | link | outline | solid.
     =========================================================================== */
  .ms-bestsellers__view-all-link,
  .ms-bestsellers__view-all-mobile {
    color: var(--ms-bs-va-color, var(--color-foreground));
  }
  /* En 'auto', el botón ancho de mobile conserva su borde; si hay color, lo tiñe. */
  .ms-bestsellers--va-auto .ms-bestsellers__view-all-mobile {
    border-color: var(--ms-bs-va-color, rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.5));
  }

  /* Estilo "Enlace": sin caja (pierde borde y padding lateral). El ancho ya es
     compacto en la base; la alineación la hereda de la regla --head-* del botón. */
  .ms-bestsellers--va-link .ms-bestsellers__view-all-mobile {
    padding-inline: 0;
    border: 0;
    background: transparent;
  }
  .ms-bestsellers--va-link .ms-bestsellers__view-all-mobile:hover {
    background: transparent;
    text-decoration: underline;
  }

  /* Estilo "Botón con borde" (= secundario canónico): el enlace de desktop adopta caja
     con borde, padding/radio/case del SISTEMA DE BOTONES del tema. */
  .ms-bestsellers--va-outline .ms-bestsellers__view-all-link {
    /* Altura/espaciado/tamaño = SISTEMA DE BOTONES del tema; fallback = estándar nativo. */
    padding: var(--button-padding-block, 16px) var(--button-padding-inline, 24px);
    font-size: var(--button-font-size, var(--font-paragraph--size, 1rem));
    line-height: var(--font-paragraph--line-height, 1.2);
    /* El borde es el del BOTÓN SECUNDARIO del esquema, no la hairline.
       Antes usaba `--color-border` (la línea decorativa de fin de zona) y encima
       al 60% de opacidad: sobre blanco daba ~1.2:1 y el botón se leía como un
       rectángulo invisible. Un borde de control necesita 3:1 (WCAG 1.4.11).
       `--color-secondary-button-border` ya existe en todos los esquemas y es
       justo eso. El fallback usa el texto al 55%, que también pasa 3:1. */
    border: var(--style-border-width-secondary, 1px) solid var(--ms-bs-va-color, var(--color-secondary-button-border, rgb(var(--color-foreground-rgb, 0 0 0) / 0.55)));
    border-radius: var(--style-border-radius-buttons-secondary, var(--style-border-radius-buttons-primary, var(--buttons-radius, var(--ms-radius-md, 8px))));
  }
  .ms-bestsellers--va-outline .ms-bestsellers__view-all-link:hover {
    text-decoration: none;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.04);
  }
  .ms-bestsellers--va-outline .ms-bestsellers__view-all-mobile {
    border-color: var(--ms-bs-va-color, var(--color-secondary-button-border, rgb(var(--color-foreground-rgb, 0 0 0) / 0.55)));
  }

  /* Estilo "Botón sólido" (= primario canónico): relleno en ambos, padding/radio/case
     del SISTEMA DE BOTONES del tema. */
  .ms-bestsellers--va-solid .ms-bestsellers__view-all-link,
  .ms-bestsellers--va-solid .ms-bestsellers__view-all-mobile {
    /* Altura/espaciado/tamaño = SISTEMA DE BOTONES del tema; fallback = estándar nativo. */
    padding: var(--button-padding-block, 16px) var(--button-padding-inline, 24px);
    font-size: var(--button-font-size, var(--font-paragraph--size, 1rem));
    line-height: var(--font-paragraph--line-height, 1.2);
    border: var(--style-border-width-primary, 1px) solid var(--ms-bs-va-color, var(--color-primary-button-border, var(--color-primary)));
    border-radius: var(--style-border-radius-buttons-primary, var(--buttons-radius, var(--ms-radius-md, 8px)));
    background: var(--ms-bs-va-color, var(--color-primary-button-background, var(--color-primary)));
    color: var(--color-primary-button-text, var(--color-background));
  }
  .ms-bestsellers--va-solid .ms-bestsellers__view-all-link:hover,
  .ms-bestsellers--va-solid .ms-bestsellers__view-all-mobile:hover {
    text-decoration: none;
    background: var(--ms-bs-va-color, var(--color-primary));
    opacity: 0.92;
  }

  /* ── Color del precio (scopeado SOLO a esta sección) ───────────────────────
     Aplica al precio principal (normal y de oferta). El tachado y el "-XX%"
     conservan su tratamiento. Si el setting está vacío, hereda el scheme.
     Especificidad (0,3,0) para ganar a las reglas base del snippet ms-price. */
  .ms-bestsellers .ms-product-card .ms-price__regular,
  .ms-bestsellers .ms-product-card .ms-price__sale {
    color: var(--ms-bs-price-color, var(--color-foreground));
  }

  /* ── Empty (editor) ────────────────────────────────────────────────────────── */
  .ms-bestsellers__empty {
    margin: 0;
    padding: 2rem 0;
    text-align: center;
    opacity: 0.7;
  }

  /* ===========================================================================
     DESKTOP (>=750px)
     =========================================================================== */
  @media screen and (min-width: 750px) {
    .ms-bestsellers__view-all-desktop { display: block; }

    /* Alineación de las pestañas en desktop. Default izquierda. */
    .ms-bestsellers--tabs-center .ms-bestsellers__tablist { justify-content: center; }
    .ms-bestsellers--tabs-right .ms-bestsellers__tablist { justify-content: flex-end; }

    /* En layout=grid: grid real de N columnas, sin scroll horizontal */
    .ms-bestsellers--grid .ms-bestsellers__grid {
      grid-auto-flow: row;
      grid-template-columns: repeat(var(--ms-bs-cols-desktop, 4), minmax(0, 1fr));
      grid-auto-columns: auto;
      overflow: visible;
      scroll-snap-type: none;
      margin-inline: 0;
      padding-inline: 0;
    }

    /* En layout=grid los dots y el botón ancho mobile sobran en desktop */
    .ms-bestsellers--grid .ms-bestsellers__dots,
    .ms-bestsellers--grid .ms-bestsellers__view-all-mobile {
      display: none;
    }

    /* En layout=carousel: se mantiene el carrusel pero con N columnas a la vista */
    .ms-bestsellers--carousel .ms-bestsellers__grid {
      grid-auto-columns: calc((100% - (var(--ms-bs-cols-desktop) - 1) * var(--ms-bs-grid-gap, 12px)) / var(--ms-bs-cols-desktop));
      margin-inline: 0;
      padding-inline: 0;
      scroll-padding-inline: 0;
    }
    /* carousel en desktop conserva dots; oculta el botón ancho (hay "ver todos" arriba) */
    .ms-bestsellers--carousel .ms-bestsellers__view-all-mobile { display: none; }
    /* "Ver todos" DEBAJO de la rejilla en desktop: cuando el merchant elige
       posición "Debajo de los productos", o (compatibilidad) cuando fija una
       alineación dedicada. Oculta el enlace inline junto a las tabs y muestra el
       botón por panel debajo de la rejilla (también en desktop). */
    .ms-bestsellers--vapos-below .ms-bestsellers__view-all-desktop,
    .ms-bestsellers--vaalign-left .ms-bestsellers__view-all-desktop,
    .ms-bestsellers--vaalign-center .ms-bestsellers__view-all-desktop,
    .ms-bestsellers--vaalign-right .ms-bestsellers__view-all-desktop { display: none; }
    .ms-bestsellers--vapos-below .ms-bestsellers__view-all-mobile,
    .ms-bestsellers--vaalign-left .ms-bestsellers__view-all-mobile,
    .ms-bestsellers--vaalign-center .ms-bestsellers__view-all-mobile,
    .ms-bestsellers--vaalign-right .ms-bestsellers__view-all-mobile { display: inline-flex; }
  }

  /* ===========================================================================
     a11y — foco visible + reduced motion
     =========================================================================== */
  .ms-bestsellers__tab:focus-visible,
  .ms-bestsellers__view-all-link:focus-visible,
  .ms-bestsellers__view-all-mobile:focus-visible,
  .ms-bestsellers__panel:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
    border-radius: var(--ms-radius-sm, 4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-bestsellers__grid,
    .ms-bestsellers__tablist {
      scroll-behavior: auto;
    }
    .ms-bestsellers__view-all-arrow {
      transition: none;
    }
  }

  /* Línea de OCASIÓN de la tarjeta. En la página de colección estos estilos base
     los trae la hoja de estilo de blocks/ms-occasion.liquid, pero aquí la tarjeta
     es el snippet ms-product-card (no acepta bloques), así que ese CSS no se
     carga si ninguna colección usa el bloque. Se replican para que las dos
     tarjetas se vean igual. Sin font-size a propósito: hereda del contenedor y
     el override del cliente puede fijarlo sin pelear especificidad. */
  .ms-product-card__occasion {
    margin: 0;
    color: var(--color-foreground);
    opacity: 0.6;
    /* Un solo renglón siempre: si una tarjeta se va a dos renglones y su vecina no,
       la fila entera se descuadra. La tarjeta se juzga EN FILA. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
/* END_SECTION:ms-bestsellers */

/* START_SECTION:ms-circle-nav (INDEX:33) */
.ms-circle-nav {
    color: var(--color-foreground);
    background-color: var(--color-background);
  }
  .ms-circle-nav__inner {
    width: 100%;
    max-width: var(--ms-cn-max-width, 1280px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 1.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-sm, 0.9rem);
  }

  .ms-circle-nav__heading {
    color: var(--color-foreground-heading, inherit);
    margin: 0;
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    font-size: var(--font-h3--size, clamp(1.25rem, 1rem + 1.4vw, 1.75rem));
    line-height: var(--font-h3--line-height, 1.15);
    text-wrap: balance;
  }
  .ms-circle-nav--head-center .ms-circle-nav__heading { text-align: center; }
  .ms-circle-nav--head-right .ms-circle-nav__heading { text-align: right; }

  /* Fila de burbujas: deslizable en mobile (scroll-snap), con sangrado al borde
     para que asome la siguiente burbuja. */
  .ms-circle-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--ms-cn-gap, 16px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--page-margin, 1.5rem));
    padding-inline: var(--page-margin, 1.5rem);
  }
  .ms-circle-nav__list::-webkit-scrollbar { display: none; }
  .ms-circle-nav--head-center .ms-circle-nav__list { justify-content: flex-start; }

  .ms-circle-nav__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .ms-circle-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: var(--ms-cn-size-mobile, 72px);
    text-decoration: none;
    color: inherit;
  }

  .ms-circle-nav__bubble {
    position: relative;
    display: block;
    width: var(--ms-cn-size-mobile, 72px);
    height: var(--ms-cn-size-mobile, 72px);
    border-radius: var(--ms-cn-radius, 50%);
    overflow: hidden;
    background: var(--color-background);
    border: var(--ms-cn-border-width, 1px) solid var(--ms-cn-border-color, rgb(var(--color-foreground-rgb, 0 0 0) / 0.16));
    transition: transform 0.18s ease, border-color 0.18s ease;
  }
  .ms-circle-nav__img,
  .ms-circle-nav__placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ms-circle-nav__placeholder { display: block; width: 100%; height: 100%; background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06); }

  .ms-circle-nav__link:hover .ms-circle-nav__bubble {
    transform: translateY(-2px);
    border-color: var(--ms-cn-border-color, var(--color-foreground));
  }

  /* ── Estado seleccionado (colección actual) — estilo configurable ── */
  .ms-circle-nav__item--active .ms-circle-nav__label { font-weight: var(--ms-w-medium, 500); }

  /* Barra inferior (default): guion de acento bajo la burbuja. Reserva el espacio
     en todas (transparente) para no descuadrar la altura de la fila. */
  .ms-circle-nav--active-underline .ms-circle-nav__link::after {
    content: "";
    display: block;
    width: 56%;
    height: 3px;
    border-radius: var(--ms-radius-pill, 999px);
    background: transparent;
  }
  .ms-circle-nav--active-underline .ms-circle-nav__item--active .ms-circle-nav__link::after {
    background: var(--ms-cn-active, var(--color-foreground));
  }

  /* Borde sólido limpio (sin hueco; respeta la forma cuadrada/redonda) */
  .ms-circle-nav--active-solid .ms-circle-nav__item--active .ms-circle-nav__bubble {
    border-color: var(--ms-cn-active, var(--color-foreground));
    box-shadow: inset 0 0 0 2px var(--ms-cn-active, var(--color-foreground));
  }

  /* Resaltado suave: leve elevación + sombra, sin borde duro */
  .ms-circle-nav--active-soft .ms-circle-nav__item--active .ms-circle-nav__bubble {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgb(var(--color-foreground-rgb, 0 0 0) / 0.22);
  }

  /* Anillo offset (el anterior) */
  .ms-circle-nav--active-ring .ms-circle-nav__item--active .ms-circle-nav__bubble {
    border-color: var(--ms-cn-active, var(--color-foreground));
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--ms-cn-active, var(--color-foreground));
  }

  .ms-circle-nav__label {
    font-size: var(--font-body--size, 0.85rem);
    line-height: 1.25;
    text-align: center;
    color: var(--ms-cn-label-color, var(--color-foreground));
    max-width: calc(var(--ms-cn-size-mobile, 72px) + 18px);
    overflow-wrap: break-word;
  }

  .ms-circle-nav__empty { margin: 0; padding: 1.5rem 0; opacity: 0.7; text-align: center; }

  .ms-circle-nav__link:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 3px;
    border-radius: var(--ms-radius-sm, 4px);
  }

  @media screen and (min-width: 750px) {
    .ms-circle-nav__link,
    .ms-circle-nav__bubble { width: var(--ms-cn-size-desktop, 96px); }
    .ms-circle-nav__bubble { height: var(--ms-cn-size-desktop, 96px); }
    .ms-circle-nav__label { max-width: calc(var(--ms-cn-size-desktop, 96px) + 24px); }

    /* Desktop "ajustada": las burbujas se acomodan en varias líneas sin scroll. */
    .ms-circle-nav--d-wrap .ms-circle-nav__list {
      flex-wrap: wrap;
      overflow: visible;
      margin-inline: 0;
      padding-inline: 0;
    }
    .ms-circle-nav--d-wrap.ms-circle-nav--head-center .ms-circle-nav__list { justify-content: center; }
    .ms-circle-nav--d-wrap.ms-circle-nav--head-right .ms-circle-nav__list { justify-content: flex-end; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-circle-nav__link:hover .ms-circle-nav__bubble { transform: none; }
  }
/* END_SECTION:ms-circle-nav */

/* START_SECTION:ms-collection-list (INDEX:34) */
/* ===========================================================================
     ms-collection-list — CSS scopeado .ms-collection-list__
     Variables por instancia (#ms-collection-list-{id}).
     Colores SIEMPRE del scheme activo (var(--color-*)). Mobile-first.
     =========================================================================== */
  .ms-collection-list {
    --ms-cl-touch-min: var(--ms-touch-min, 44px);
    /* Color por defecto del nombre de categoría según el modo (overlay lo invierte). */
    --ms-cl-card-text-default: var(--color-foreground);
    color: var(--color-foreground);
    background-color: var(--color-background);
  }

  .ms-collection-list__inner {
    width: 100%;
    max-width: var(--ms-cl-max-width, 1280px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 1.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-md, 1.25rem);
  }

  /* ── Encabezado: título + subtítulo a la izquierda, "Ver todo" a la derecha ── */
  .ms-collection-list__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ms-space-sm, 0.75rem);
  }

  /* ── Flechas del carrusel, en la cabecera ─────────────────────────────────
     Arriba y no debajo del riel: ahí se ven ANTES de que la fila se lea como
     completa, que es justo cuando hacen falta. Debajo solo las encuentra quien
     ya dio la fila por terminada. En móvil se ocultan — ahí se arrastra. */
  .ms-collection-list__nav {
    display: none;
    gap: var(--ms-space-2xs, 0.5rem);
    align-self: center;
  }
  .ms-collection-list__nav[hidden] { display: none !important; }
  .ms-collection-list__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    cursor: pointer;
    color: var(--color-foreground);
    background: transparent;
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.28);
    border-radius: var(--ms-radius-sm, 0px);
    transition: background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
  }
  .ms-collection-list__nav-btn:hover { background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06); }
  .ms-collection-list__nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  @media screen and (min-width: 750px) {
    .ms-collection-list--carousel .ms-collection-list__nav { display: flex; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ms-collection-list__nav-btn { transition: none; }
  }

  .ms-collection-list__heading-group {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-3xs, 0.35rem);
    min-width: 0;
  }

  .ms-collection-list__heading {
    margin: 0;
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    font-size: var(--font-h2--size, clamp(1.5rem, 1rem + 2.4vw, 2.5rem));
    line-height: var(--font-h2--line-height, 1.1);
    letter-spacing: var(--font-h2--letter-spacing, normal);
    color: var(--ms-cl-heading-color, var(--color-foreground-heading, var(--color-foreground)));
    text-wrap: balance;
  }

  /* Resalta una palabra del título con <em>: color/cursiva/subrayado desde el
     editor, grosor y separación globales (Ajustes Myshopiguru). */
  .ms-collection-list__heading em {
    font-style: var(--ms-accent-style, italic);
    /* Rev 2 §3.4: con el subrayado encendido la palabra conserva el color del
       titular (--ms-accent-ink: currentcolor) y el acento pinta SOLO la regla.
       Apagado, la palabra sigue yendo en acento. Detalle en ms-accent-vars. */
    color: var(--ms-accent-ink, var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary))));
    font-weight: inherit;
    text-decoration-line: var(--ms-accent-decoration, none);
    text-decoration-color: var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary)));
    text-decoration-thickness: var(--ms-accent-thickness, 2px);
    text-underline-offset: var(--ms-accent-offset, 3px);
    text-decoration-skip-ink: auto;
  }

  .ms-collection-list__subheading {
    font-size: var(--font-body--size, 1rem);
    line-height: 1.5;
    color: var(--ms-cl-subheading-color, var(--color-foreground));
    opacity: 0.85;
    max-width: 60ch;
  }
  .ms-collection-list__subheading > :first-child { margin-block-start: 0; }
  .ms-collection-list__subheading > :last-child { margin-block-end: 0; }

  /* "Ver todo" (enlace de encabezado, mismo patrón que ms-bestsellers): enlace con
     flecha; tipografía/case del SISTEMA DE BOTONES del tema para que el texto empate
     con los demás CTA ms-. */
  .ms-collection-list__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--ms-cl-touch-min, 44px);
    color: var(--color-foreground);
    font-family: var(--button-font-family-secondary, var(--font-primary--family, var(--font-heading--family, inherit)));
    /* Tipografía = SISTEMA DE BOTONES del tema; fallback = estándar nativo (paragraph). */
    font-size: var(--button-font-size, var(--font-paragraph--size, 1rem));
    font-weight: var(--button-font-family-secondary-weight, var(--ms-w-medium, 500));
    text-transform: var(--button-text-case-secondary, none);
    line-height: var(--font-paragraph--line-height, 1.2);
    text-decoration: none;
    white-space: nowrap;
  }
  .ms-collection-list__view-all:hover {
    text-decoration: underline;
  }
  /* Alineación DEDICADA del "Ver todo": pasa a su propia línea bajo el encabezado
     y se alinea independiente del título. (Vacío = inline a la derecha, como hoy.) */
  .ms-collection-list--vaalign-left .ms-collection-list__view-all { flex-basis: 100%; justify-content: flex-start; }
  .ms-collection-list--vaalign-center .ms-collection-list__view-all { flex-basis: 100%; justify-content: center; }
  .ms-collection-list--vaalign-right .ms-collection-list__view-all { flex-basis: 100%; justify-content: flex-end; }
  .ms-collection-list__view-all-arrow {
    transition: transform 0.15s ease;
  }
  .ms-collection-list__view-all:hover .ms-collection-list__view-all-arrow {
    transform: translateX(3px);
  }

  /* ── Grid de tarjetas ──────────────────────────────────────────────────────
     Mobile-first GRID (default, = comportamiento previo): N columnas (default 2).
     El modo carrusel es opt-in (clase --m-carousel / --carousel) y se define abajo.
     =========================================================================== */
  .ms-collection-list__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--ms-cl-cols-mobile, 2), minmax(0, 1fr));
    gap: var(--ms-cl-grid-gap, 16px);
  }

  /* Mobile GRID = 1.5 columnas (tarjetas grandes que dejan asomar la siguiente).
     repeat() no admite fracciones, así que se resuelve como tira deslizable con
     scroll-snap (mismo recurso que el carrusel) mostrando 1.5 a la vista. Solo en
     modo grid mobile (el carrusel se gestiona aparte) y solo ≤749px (desktop lo
     neutraliza en su @media). */
  .ms-collection-list--mcols-1-5:not(.ms-collection-list--m-carousel) .ms-collection-list__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 0.5 * var(--ms-cl-grid-gap, 16px)) / 1.5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--page-margin, 1.5rem));
    padding-inline: var(--page-margin, 1.5rem);
    scroll-padding-inline: var(--page-margin, 1.5rem);
  }
  .ms-collection-list--mcols-1-5:not(.ms-collection-list--m-carousel) .ms-collection-list__grid::-webkit-scrollbar { display: none; }
  .ms-collection-list--mcols-1-5:not(.ms-collection-list--m-carousel) .ms-collection-list__item { scroll-snap-align: start; }

  /* Mobile CARRUSEL (opt-in): tira deslizable con scroll-snap y sangrado a los
     bordes para que asome la siguiente tarjeta. */
  .ms-collection-list--m-carousel .ms-collection-list__grid {
    grid-template-columns: none;
    /* Filas del carrusel mobile (1 por defecto; 2 = cuadrícula 2×N deslizable). */
    grid-template-rows: repeat(var(--ms-cl-carousel-rows, 1), auto);
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--ms-cl-cols-mobile-carousel) - 1) * var(--ms-cl-grid-gap, 16px)) / var(--ms-cl-cols-mobile-carousel));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--page-margin, 1.5rem));
    padding-inline: var(--page-margin, 1.5rem);
    scroll-padding-inline: var(--page-margin, 1.5rem);
  }
  .ms-collection-list--m-carousel .ms-collection-list__grid::-webkit-scrollbar { display: none; }
  .ms-collection-list--m-carousel .ms-collection-list__item { scroll-snap-align: start; }

  .ms-collection-list__item {
    min-width: 0;
  }

  /* La tarjeta entera es el área clicable (un solo <a>). */
  .ms-collection-list__card {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-2xs, 0.5rem);
    color: inherit;
    text-decoration: none;
    height: 100%;
  }

  /* ── Media ──────────────────────────────────────────────────────────────────
     Mobile: forma configurable (default cuadrada 1:1). Desktop: ratio configurable
     (default 3:4) — se redefine en el @media >=750px de abajo.
     =========================================================================== */
  .ms-collection-list__media {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--ms-cl-radius, 0px);
    aspect-ratio: var(--ms-cl-ratio-mobile, 1 / 1);
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
    /* Borde opcional que enmarca la imagen (apagado por defecto: así la sección
       se ve exactamente igual que antes hasta que el cliente lo encienda). */
    border: var(--ms-border-width, 0px) solid var(--ms-border-color, rgb(var(--color-foreground-rgb, 0 0 0) / 0.08));
  }

  .ms-collection-list__picture,
  .ms-collection-list__image {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ms-collection-list__image {
    object-fit: cover;
    object-position: center center;
    transition: transform 0.4s ease;
  }

  .ms-collection-list__image--placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Zoom sutil al hover/foco (respeta reduced-motion abajo). */
  .ms-collection-list__card:hover .ms-collection-list__image,
  .ms-collection-list__card:focus-visible .ms-collection-list__image {
    transform: scale(1.04);
  }

  /* ── Pie: nombre + flecha ──────────────────────────────────────────────────── */
  .ms-collection-list__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-space-2xs, 0.5rem);
  }

  .ms-collection-list__title {
    font-size: var(--font-body--size, 1rem);
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.25;
    color: var(--ms-cl-card-text, var(--ms-cl-card-text-default));
  }

  .ms-collection-list__arrow {
    flex: 0 0 auto;
    color: var(--ms-cl-card-text, var(--ms-cl-card-text-default));
    opacity: 0.7;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .ms-collection-list__card:hover .ms-collection-list__arrow,
  .ms-collection-list__card:focus-visible .ms-collection-list__arrow {
    transform: translateX(3px);
    opacity: 1;
  }

  /* ── Modo "Sobre la imagen" (overlay) ───────────────────────────────────────
     El pie se posiciona sobre la imagen; un degradado de foreground mejora la
     legibilidad y el texto por defecto pasa a usar var(--color-background) para
     contrastar con el degradado (ambos del scheme ⇒ siempre contrastan).
     =========================================================================== */
  .ms-collection-list--label-overlay { --ms-cl-card-text-default: var(--color-background); }

  .ms-collection-list--label-overlay .ms-collection-list__card { position: relative; }

  .ms-collection-list--label-overlay .ms-collection-list__media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Color del scrim editable (card_overlay_color). Vacío ⇒ hereda el foreground del
       scheme (comportamiento previo). color-mix aplica la opacidad sobre cualquier
       color (hex del setting o var del scheme) sin necesitar el triplete RGB. */
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--ms-cl-overlay-color, var(--color-foreground)) calc(var(--ms-cl-overlay-alpha, 0.45) * 100%), transparent) 0%,
      transparent 58%
    );
    pointer-events: none;
  }

  .ms-collection-list--label-overlay .ms-collection-list__footer {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--ms-space-sm, 0.9rem);
    z-index: 1;
  }

  .ms-collection-list--label-overlay .ms-collection-list__title {
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  }
  .ms-collection-list--label-overlay .ms-collection-list__arrow {
    opacity: 0.9;
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  }

  /* ── Dots (carrusel) ───────────────────────────────────────────────────────
     Indicador visual del nº de tarjetas. Oculto por defecto (grid); se muestra
     solo donde el layout activo es carrusel.
     =========================================================================== */
  .ms-collection-list__dots {
    display: none;
    justify-content: center;
    gap: 0.4rem;
  }
  .ms-collection-list__dot {
    width: 7px;
    height: 7px;
    border-radius: var(--ms-radius-round, 50%);
    background: var(--color-foreground);
    opacity: 0.25;
  }
  .ms-collection-list__dot.is-active {
    opacity: 0.9;
    background: var(--color-primary);
  }
  .ms-collection-list--m-carousel .ms-collection-list__dots { display: flex; }

  /* ── Empty (editor) ──────────────────────────────────────────────────────── */
  .ms-collection-list__empty {
    margin: 0;
    padding: 2rem 0;
    text-align: center;
    opacity: 0.7;
  }

  /* ===========================================================================
     DESKTOP (>=750px): N columnas + imagen con ratio vertical configurable.
     El selector base incluye --m-carousel para NEUTRALIZAR el carrusel mobile en
     desktop (misma especificidad que la regla mobile, gana por orden de fuente).
     =========================================================================== */
  @media screen and (min-width: 750px) {
    .ms-collection-list__grid,
    .ms-collection-list--m-carousel .ms-collection-list__grid,
    .ms-collection-list--mcols-1-5 .ms-collection-list__grid {
      grid-template-columns: repeat(var(--ms-cl-cols-desktop, 4), minmax(0, 1fr));
      grid-template-rows: auto;
      grid-auto-flow: row;
      grid-auto-columns: auto;
      overflow: visible;
      scroll-snap-type: none;
      margin-inline: 0;
      padding-inline: 0;
      scroll-padding-inline: 0;
    }

    .ms-collection-list__media {
      aspect-ratio: var(--ms-cl-ratio-desktop, 3 / 4);
    }

    /* Desktop CARRUSEL (opt-in): mantiene la tira deslizable con N tarjetas a la vista. */
    .ms-collection-list--carousel .ms-collection-list__grid {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - (var(--ms-cl-cols-desktop) - 1) * var(--ms-cl-grid-gap, 16px)) / var(--ms-cl-cols-desktop));
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      margin-inline: 0;
      padding-inline: 0;
    }
    .ms-collection-list--carousel .ms-collection-list__grid::-webkit-scrollbar { display: none; }
    .ms-collection-list--carousel .ms-collection-list__item { scroll-snap-align: start; }

    /* En desktop los dots sobran: ahora la navegación son las flechas de la
       cabecera, que además dicen si queda algo por delante (se deshabilitan).
       Un punto no se puede pulsar con precisión ni indica dirección. En móvil
       se conservan, porque ahí se arrastra y sirven de posición. */
    .ms-collection-list--m-carousel .ms-collection-list__dots,
    .ms-collection-list--carousel .ms-collection-list__dots { display: none; }
  }

  /* ===========================================================================
     a11y — foco visible + reduced motion
     =========================================================================== */
  .ms-collection-list__card:focus-visible,
  .ms-collection-list__view-all:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
    border-radius: var(--ms-radius-sm, 4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-collection-list__grid {
      scroll-behavior: auto;
    }
    .ms-collection-list__image,
    .ms-collection-list__arrow,
    .ms-collection-list__view-all-arrow {
      transition: none;
    }
    .ms-collection-list__card:hover .ms-collection-list__image,
    .ms-collection-list__card:focus-visible .ms-collection-list__image {
      transform: none;
    }
  }
/* END_SECTION:ms-collection-list */

/* START_SECTION:ms-collection-nav (INDEX:35) */
/* Wrapper a display:contents para que el sticky del <nav> hijo tenga dónde pegarse
     (igual que ms-search-bar: el .shopify-section solo mide el alto de la barra). */
  .ms-colnav-section { display: contents; }

  .ms-colnav {
    background: var(--color-background);
    color: var(--color-foreground);
  }

  /* Sticky JUSTO debajo del header fijo (header se ancla en top:-1px).
     Usamos -2px (no -1) para traslapar 1px y tapar la "línea blanca" sub-pixel
     que aparece cuando --header-height se redondea por encima del alto real del
     header. Así queda pegado sin necesidad del "Ajuste fino" manual. */
  .ms-colnav--sticky {
    position: sticky;
    top: calc(var(--header-height, 56px) - 2px + var(--ms-colnav-offset, 0px));
    z-index: var(--layer-raised, 3);
  }

  /* Sincronía con el header "Aparecer al desplazarse arriba" (scroll-up): la barra
     sigue el MISMO comportamiento (se va al bajar, reaparece al subir). Estado leído
     de #header-group con :has() (igual que ms-search-bar). En modo "always" no aplica. */
  #header-group:has(#header-component[sticky='scroll-up']) .ms-colnav--sticky {
    position: relative;
    top: auto;
    /* Espejo del fade del header (.header en header.liquid): así la barra se
       desvanece EN SINCRONÍA en vez de quedarse pegada y luego saltar. */
    transition: opacity var(--animation-speed, 0.125s) var(--animation-easing, ease);
    opacity: 1;
  }
  #header-group:has(#header-component[sticky='scroll-up'][data-sticky-state='active']) .ms-colnav--sticky {
    position: sticky;
    top: calc(var(--header-height, 56px) - 2px + var(--ms-colnav-offset, 0px));
  }
  /* FIX lag al ocultarse: al bajar, el header NO se despega de inmediato — se
     DESVANECE (opacity 1→0) mientras sigue anclado con [data-animating], y recién
     ~150ms después pasa a 'idle' y se despega. La barra solo miraba el toggle de
     posición, así que se quedaba visible y pegada ese lapso y luego SALTABA.
     Replicamos el fade del header keyeando a los mismos estados. */
  #header-group:has(#header-component[sticky='scroll-up'][data-sticky-state='idle']) .ms-colnav--sticky,
  #header-group:has(#header-component[sticky='scroll-up'][data-sticky-state='active'][data-animating]) .ms-colnav--sticky {
    opacity: 0;
  }

  .ms-colnav--divider {
    border-block-end: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.10);
  }

  .ms-colnav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 3vw, 1.75rem);
    margin: 0;
    padding-inline: var(--padding-inline-start, 1rem);
    /* Alto de la barra = relleno vertical configurable (antes era fijo 0.55rem). */
    padding-block: var(--ms-colnav-pad-y, 0.55rem);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Lección del fix de tabs: el gesto VERTICAL va a la página, solo el horizontal scrollea. */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .ms-colnav__list::-webkit-scrollbar { display: none; }

  .ms-colnav--align-center .ms-colnav__list { justify-content: center; }
  .ms-colnav--align-start .ms-colnav__list { justify-content: flex-start; }
  /* En móvil siempre desde la izquierda para poder deslizar. */
  @media (max-width: 749px) {
    .ms-colnav--align-center .ms-colnav__list { justify-content: flex-start; }
  }

  .ms-colnav__item {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.3rem;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    color: var(--color-foreground);
    font-family: var(--ms-colnav-ff, var(--font-body--family, inherit));
    font-weight: var(--ms-colnav-fw, inherit);
    font-size: var(--ms-colnav-fs, var(--font-body--size, 0.95rem));
    text-transform: var(--ms-colnav-tt, none);
    opacity: 0.55;
    transition: opacity 0.2s ease;
  }
  .ms-colnav__item:hover { opacity: 1; }
  .ms-colnav__item.is-active { opacity: 1; font-weight: var(--ms-w-medium, 500); }

  /* Estilo SUBRAYADO (Nude minimal): la activa lleva línea inferior. */
  .ms-colnav--underline .ms-colnav__item.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--color-foreground);
  }

  /* Estilo PASTILLA. */
  .ms-colnav--pill .ms-colnav__item {
    padding-inline: 0.85rem;
    border-radius: var(--ms-radius-pill, 999px);
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.18);
  }
  .ms-colnav--pill .ms-colnav__item.is-active {
    background: var(--color-foreground);
    color: var(--color-background);
    border-color: var(--color-foreground);
  }

  .ms-colnav--empty { padding: 0.6rem 1rem; }
  .ms-colnav__notice { margin: 0; font-size: var(--ms-t-meta); opacity: 0.7; }

  /* Visibilidad por dispositivo (breakpoint del theme: 750px, igual que el resto). */
  @media screen and (max-width: 749px) {
    .ms-colnav--hide-mobile { display: none; }
  }
  @media screen and (min-width: 750px) {
    .ms-colnav--hide-desktop { display: none; }
  }
/* END_SECTION:ms-collection-nav */

/* START_SECTION:ms-comparison (INDEX:36) */
.ms-cmp {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
  .ms-cmp__inner {
    display: flex; flex-direction: column; gap: 1.8rem;
    /* aire lateral propio: la clase page-width del tema NO trae padding en móvil */
    padding-inline: var(--page-margin, 20px);
    /* tope propio: le gana al page-width global del tema para que esta sección
       pueda alinearse con las demás sin depender del ajuste global.
       Se le SUMA el padding lateral para que --ms-cmp-max sea el ancho del
       CONTENIDO y no de la caja — si no, esta sección queda 80px más estrecha
       que sus vecinas (era justo lo que se veía contra el bloque de reseñas). */
    max-width: calc(var(--ms-cmp-max, 1280px) + (var(--page-margin, 20px) * 2));
    margin-inline: auto;
  }
  .ms-cmp__header { text-align: center; max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: 0.5rem; }
  .ms-cmp__eyebrow {
    margin: 0; font-size: var(--ms-t-label); font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.18em); text-transform: var(--ms-case-label, uppercase); opacity: 0.85;
  }
  .ms-cmp__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    line-height: 1.1;
    text-wrap: balance;
  }
  /* Resalta una palabra del titular con <em>: color/cursiva/subrayado desde el
     editor, grosor y separación globales (Ajustes Myshopiguru). */
  .ms-cmp__heading em {
    font-style: var(--ms-accent-style, italic);
    /* Rev 2 §3.4: con el subrayado encendido la palabra conserva el color del
       titular (--ms-accent-ink: currentcolor) y el acento pinta SOLO la regla.
       Apagado, la palabra sigue yendo en acento. Detalle en ms-accent-vars. */
    color: var(--ms-accent-ink, var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary))));
    font-weight: inherit;
    text-decoration-line: var(--ms-accent-decoration, none);
    text-decoration-color: var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary)));
    text-decoration-thickness: var(--ms-accent-thickness, 2px);
    text-underline-offset: var(--ms-accent-offset, 3px);
    text-decoration-skip-ink: auto;
  }
  .ms-cmp__sub { margin: 0; opacity: 0.85; }
  .ms-cmp__sub > :first-child { margin-block-start: 0; }
  .ms-cmp__sub > :last-child { margin-block-end: 0; }

  /* ── Layout: móvil apilado · desktop imagen + tabla ── */
  .ms-cmp__layout { display: flex; flex-direction: column; gap: 1rem; }
  .ms-cmp__media {
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }
  .ms-cmp__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ms-cmp__ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background:
      radial-gradient(60% 50% at 70% 20%, rgb(var(--color-foreground-rgb, 0 0 0) / 0.08), transparent 70%),
      rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.12); background-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.04);
    border-radius: 22px;
  }
  .ms-cmp__ph-label { font-size: var(--ms-t-meta); opacity: 0.6; padding: 1rem; text-align: center; }

  /* ── La tabla-tarjeta ── */
  .ms-cmp__panel {
    /* velo del color del ESQUEMA (no blanco fijo): en esquemas claros da una
       tarjeta luminosa y en los oscuros no se convierte en un parche blanco */
    background: rgb(var(--color-background-rgb, 255 255 255) / 0.62);
    /* Borde editable (mostrar/color/grosor) vía ms-border-vars. Con los defaults
       queda el mismo 1px derivado del esquema que tenía antes. */
    border: var(--ms-border-width, 1px) solid var(--ms-border-color, rgb(var(--color-foreground-rgb, 0 0 0) / 0.08));
    border-radius: calc(var(--ms-cmp-radius, 22px) + 4px);
    box-shadow: 0 2px 20px rgb(var(--color-foreground-rgb, 0 0 0) / 0.05);
    padding: 0.9rem 1.1rem 1.1rem;
  }
  .ms-cmp__table { width: 100%; border-collapse: collapse; }
  .ms-cmp__table th, .ms-cmp__table td { padding: 0.78em 0.4em; text-align: left; }
  .ms-cmp__table tbody tr { border-top: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.08); }
  .ms-cmp__feature { font-weight: var(--ms-w-medium, 500); font-size: var(--ms-t-body); line-height: 1.35; }

  /* th/td.clase: el text-align left del genérico .ms-cmp__table th/td tiene
     mayor especificidad que una clase sola — se le gana calificando el elemento */
  /* middle, no bottom: con imagen la cabecera crece y el contenido se quedaba
     pegado al borde de abajo en vez de repartir el aire arriba y abajo. */
  .ms-cmp__table th.ms-cmp__col-h { text-align: center; vertical-align: middle; font-size: var(--ms-t-label); font-weight: var(--ms-w-medium, 500); letter-spacing: var(--ms-tracking-label, 0.04em); line-height: 1.2; }
  /* Imagen opcional que corona cada columna (PNG con transparencia: el producto
     real de la marca vs. la alternativa genérica). Se sirve contenida y con altura
     por setting para que las dos columnas queden a la misma línea de piso aunque
     los PNG vengan con proporciones distintas. */
  .ms-cmp__col-img {
    display: block;
    margin-inline: auto;
    margin-block-end: 0.55rem;
    height: var(--ms-cmp-col-img-h, 96px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
  }
  .ms-cmp__col-t { display: block; }
  /* header de la marca = cabecera forest que corona la columna tintada */
  .ms-cmp__table thead .ms-cmp__col-h--win {
    background: var(--ms-cmp-accent-win);
    color: var(--color-background);
    border-radius: 14px 14px 0 0;
  }
  .ms-cmp__table thead .ms-cmp__col-h--lose { opacity: 0.65; }
  /* columna ganadora: tinte continuo hacia abajo */
  .ms-cmp__table td:nth-child(2) { background: color-mix(in srgb, var(--ms-cmp-accent-win) 7%, transparent); }
  .ms-cmp__table tbody tr:last-child td:nth-child(2) { border-radius: 0 0 14px 14px; }

  .ms-cmp__table td.ms-cmp__val { text-align: center; font-weight: var(--ms-w-medium, 500); font-size: var(--ms-t-body); width: 64px; min-width: 52px; }
  .ms-cmp__val--win span { color: var(--ms-cmp-accent-win); }
  .ms-cmp__val--lose span { color: var(--ms-cmp-accent-lose); opacity: 0.85; }

  /* Celda con texto en vez de palomita: el color va en la CELDA (con texto no
     hay span hijo) y se suelta el ancho fijo de la columna de símbolos. */
  .ms-cmp__table td.ms-cmp__val--text {
    width: auto;
    min-width: 72px;
    line-height: 1.25;
    text-wrap: balance;
    padding-inline: 0.35rem;
  }
  .ms-cmp__val--text.ms-cmp__val--win { color: var(--ms-cmp-accent-win); }
  .ms-cmp__val--text.ms-cmp__val--lose { color: var(--ms-cmp-accent-lose); opacity: 0.85; }

  .ms-cmp__tagline { margin: 1.1rem 0 0; text-align: center; opacity: 0.9; }

  /* ═══════════════════════════════════════════════════════════════
     MÓVIL COMPACTO — Bëne, Rev 5.43
     ═══════════════════════════════════════════════════════════════
     Medido servido a 390 px: la sección pesaba 1,221 px (contra 759 en
     escritorio) y era el 17 % de todo el home. El culpable no era el aire, era
     el REPARTO: con tres columnas y `text-wrap: balance`, cada celda se partía
     en tres o cuatro renglones («Un / laboratorio / que formula: / Xanalab»),
     así que las filas medían 66-106 px en vez de los 51 de escritorio.

     Cuatro palancas, en orden de lo que devuelven:
       1. La columna de etiqueta baja a 28 %: las dos de valor ganan ancho y el
          texto deja de partirse cada dos palabras.
       2. `text-wrap: pretty` en vez de `balance`. Balance IGUALA el largo de
          las líneas, que en una columna angosta produce MÁS líneas, no menos.
       3. Un punto menos de letra en las celdas (15 px) y en la etiqueta (13 px).
          Es registro de tabla, no de cuerpo: el mínimo de 16 px del estudio
          aplica al texto corrido.
       4. Menos aire vertical por celda y la foto con techo.
     ═══════════════════════════════════════════════════════════════ */
  @media screen and (max-width: 749px) {
    .ms-cmp__panel { padding: 0.7rem 0.75rem 0.85rem; }
    .ms-cmp__table th, .ms-cmp__table td { padding: 0.55em 0.3em; }

    .ms-cmp__feature {
      width: 28%;
      font-size: max(12px, calc(var(--ms-t-body) * 0.82));
      line-height: 1.25;
    }

    .ms-cmp__table td.ms-cmp__val--text {
      font-size: max(13px, calc(var(--ms-t-body) * 0.94));
      line-height: 1.2;
      text-wrap: pretty;
      min-width: 0;
      padding-inline: 0.3rem;
    }

    /* El logo que corona la columna: a la mitad. Corona, no protagoniza. */
    .ms-cmp__col-img { height: calc(var(--ms-cmp-col-img-h, 96px) * 0.62); margin-block-end: 0.4rem; }
    .ms-cmp__table th.ms-cmp__col-h { font-size: max(11px, calc(var(--ms-t-label) * 0.9)); }

    /* La foto de la sección: apaisada en vez de casi cuadrada. Sigue estando,
       pero deja de comerse un tercio del scroll. */
    .ms-cmp__media { aspect-ratio: var(--ms-cmp-ratio-m, 16 / 10); }
    /* Bene, Rev 5.53 (3-sep): una foto VERTICAL metida en 16:10 se lee como
       recorte forzado ("se compacta, se deforma"). Con el ajuste apagado la
       tabla va sola en movil —como Ritual, AG1 y Gruns— y la foto se queda
       en escritorio, donde tiene columna propia. */
    .ms-cmp--no-media-m .ms-cmp__media { display: none; }
    .ms-cmp__tagline { margin-top: 0.85rem; }
  }

  @media screen and (min-width: 750px) {
    .ms-cmp--with-media .ms-cmp__layout {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 2rem;
      align-items: stretch;
    }
    /* 41 · Quien manda el alto es la TABLA, no la foto.
       Antes la foto traia `min-height: 100%`, que con `stretch` la hacia crecer
       y estiraba el panel detras de ella: de ahi el bloque de fondo vacio bajo
       «Comparar es gratis». Sin altura propia, la foto se estira a la fila y la
       fila la define el panel. Las dos columnas terminan a la misma altura. */
    .ms-cmp__media { aspect-ratio: auto; min-height: 0; position: relative; }
    /* La foto sale del flujo: si se queda dentro, su alto INTRINSECO manda
       (medido: 650 px contra 469 de la tabla) y `stretch` arrastra el panel
       hasta alla. Absoluta, el contenedor no tiene alto propio, la fila la
       define la tabla y la foto la llena recortando. */
    .ms-cmp__media > .ms-cmp__img,
    .ms-cmp__media > .ms-cmp__ph {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .ms-cmp:not(.ms-cmp--with-media) .ms-cmp__panel { max-width: 860px; margin-inline: auto; width: 100%; }
    .ms-cmp__table th, .ms-cmp__table td { padding: 0.9em 0.7em; }
    .ms-cmp__feature { font-size: var(--ms-t-body); }
    .ms-cmp__val { width: 96px; }
    .ms-cmp__col-h span, .ms-cmp__col-h { font-size: var(--ms-t-meta); }
  }
/* END_SECTION:ms-comparison */

/* START_SECTION:ms-embed (INDEX:37) */
.ms-emb__inner {
    max-width: var(--ms-emb-max, 1000px);
    margin-inline: auto;
    padding-inline: 16px;
  }

  @media screen and (min-width: 750px) {
    .ms-emb__inner {
      padding-inline: 40px;
    }
  }

  /* El titular. Sigue el sistema del proyecto: 40 px en escritorio (el de las
     secciones del home) y el clamp del hero en movil (Rev 5.56, §43b de
     bene-look) para que no haya un tamano nuevo suelto en la tienda. */
  .ms-emb__head {
    text-align: var(--ms-emb-align, center);
    max-width: 46ch;
    margin-block: 0 24px;
    margin-inline: var(--ms-emb-head-mi, auto);
  }

  .ms-emb__heading {
    color: var(--color-foreground-heading, inherit);
    margin: 0;
    font-size: 40px;
    line-height: 1.1;
  }

  /* Sin las 4 perillas de acento por sección (ms-accent-vars): una sección de
     widget no las amerita, y sin ellas el snippet emitiría font-style: normal
     y mataría la cursiva. Se lee la cadena GLOBAL de la marca directo. */
  .ms-emb__heading em {
    font-style: italic;
    color: var(--ms-accent-brand, var(--color-primary));
    font-weight: inherit;
  }

  .ms-emb__sub {
    margin-top: 8px;
    font-size: 16px;
    opacity: 0.85;
  }

  .ms-emb__sub > :first-child { margin-top: 0; }
  .ms-emb__sub > :last-child { margin-bottom: 0; }

  @media screen and (max-width: 749px) {
    .ms-emb__head {
      margin-bottom: 20px;
    }

    .ms-emb__heading {
      font-size: clamp(1.75rem, 7.8vw, 2rem);
    }
  }

  .ms-emb__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--ms-emb-radius, 12px);
    border: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
    background: var(--color-background);
  }

  .ms-emb--flat .ms-emb__frame {
    border: 0;
    border-radius: 0;
  }

  .ms-emb__iframe {
    display: block;
    width: 100%;
    height: var(--ms-emb-h, 720px);
    border: 0;
    color-scheme: light;
  }

  @media screen and (max-width: 749px) {
    .ms-emb__iframe {
      height: var(--ms-emb-h-m, 620px);
    }
  }

  .ms-emb__fallback {
    margin: 12px 0 0;
    text-align: center;
    font-size: 14px;
    opacity: 0.7;
  }

  .ms-emb__fallback a {
    color: inherit;
    text-underline-offset: 3px;
  }

  .ms-emb__frame--auto {
    height: auto;
  }

  .ms-emb__frame--auto > * {
    display: block;
  }

  .ms-emb__empty {
    margin: 0;
  }

  .ms-emb__empty {
    padding: 40px 20px;
    text-align: center;
    border: 1px dashed color-mix(in srgb, var(--color-foreground) 25%, transparent);
    border-radius: var(--ms-emb-radius, 12px);
    font-size: 14px;
    opacity: 0.7;
  }
/* END_SECTION:ms-embed */

/* START_SECTION:ms-faq (INDEX:38) */
/* ===========================================================================
     ms-faq — CSS scopeado .ms-faq__ · variables por instancia (#ms-faq-{id})
     Colores SIEMPRE del scheme activo (var(--color-*)). Mobile-first.
     =========================================================================== */
  .ms-faq {
    --ms-faq-touch-min: var(--ms-touch-min, 44px);
    color: var(--color-foreground);
    background-color: var(--color-background);
  }

  .ms-faq__inner {
    width: 100%;
    max-width: var(--ms-faq-max-width, 1100px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 1.5rem);
    box-sizing: border-box;
  }

  /* ── Columna de descripcion (two-col) ─────────────────────────────────────── */
  .ms-faq__aside {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-sm, 1rem);
  }

  .ms-faq__kicker {
    margin: 0;
    font-size: var(--ms-t-meta);
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.3;
    color: var(--color-primary);
    /* Convencion ms-: eyebrows SIN mayusculas forzadas ni tracking pesado */
    text-transform: none;
    letter-spacing: normal;
  }

  .ms-faq__heading {
    color: var(--color-foreground-heading, inherit);
    margin: 0;
    /* ⚠️ `--font-primary--family` NO está definida en Horizon/Booster: es el
       token del maestro ms-. Sin el eslabón `--font-heading--family` la cadena
       aterrizaba en `inherit` = la fuente de CUERPO, y esta sección salía con
       otra tipografía que el resto de la tienda. Las otras 11 secciones ms- ya
       traían la cadena completa; el FAQ era la única rota. */
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    font-size: var(--ms-faq-h-size, var(--font-h2--size, clamp(1.5rem, 1rem + 2.4vw, 2.5rem)));
    line-height: var(--ms-faq-h-lh, var(--font-h2--line-height, 1.1));
    letter-spacing: var(--font-h2--letter-spacing, normal);
    color: var(--color-foreground);
    text-wrap: balance;
  }

  .ms-faq__heading--top {
    margin-block-end: var(--ms-space-md, 1.25rem);
  }

  .ms-faq__body {
    font-size: var(--font-body--size, 1rem);
    line-height: 1.55;
    opacity: 0.85;
    max-width: 52ch;
  }
  .ms-faq__body > :first-child { margin-block-start: 0; }
  .ms-faq__body > :last-child { margin-block-end: 0; }

  .ms-faq__body--top {
    margin-block-end: var(--ms-space-md, 1.25rem);
  }

  /* CTA de la columna de descripcion (link con flecha, no compite con primario) */
  .ms-faq__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    align-self: flex-start;
    min-height: var(--ms-faq-touch-min, 44px);
    color: var(--color-foreground);
    font-size: var(--font-body--size, 1rem);
    font-weight: var(--ms-w-medium, 500);
    text-decoration: none;
  }
  .ms-faq__cta:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .ms-faq__cta-arrow { transition: transform 0.15s ease; }
  .ms-faq__cta:hover .ms-faq__cta-arrow { transform: translateX(3px); }

  /* ── Lista del acordeon ───────────────────────────────────────────────────── */
  .ms-faq__accordion { display: block; }

  .ms-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--ms-faq-gap, 0px);
  }

  /* Cada fila: details nativo. Separadores hairline del scheme. */
  .ms-faq__item {
    border-block-end: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.18);
  }
  .ms-faq__item:first-child {
    border-block-start: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.18);
  }

  /* Tarjetas: cada pregunta es una pastilla, como los testimoniales. La linea
     fina lee a documento; la tarjeta redondeada lee a producto. */
  .ms-faq--card .ms-faq__item,
  .ms-faq--card .ms-faq__item:first-child {
    border: 0;
    background: var(--ms-faq-card-bg, rgb(var(--color-foreground-rgb, 0 0 0) / 0.045));
    border-radius: var(--ms-radius-card, 16px);
    padding-inline: var(--ms-space-md, 1.25rem);
  }
  .ms-faq--card .ms-faq__item + .ms-faq__item {
    margin-block-start: var(--ms-faq-card-gap, 10px);
  }

  /* Summary = boton nativo (clic/teclado). Quitar el marcador por defecto. */
  .ms-faq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-space-sm, 1rem);
    width: 100%;
    min-height: var(--ms-faq-touch-min, 44px);
    padding-block: var(--ms-space-sm, 1rem);
    cursor: pointer;
    list-style: none;
    color: var(--color-foreground);
    /* La familia de la pregunta es un SETTING, no una decisión fija.
       Con la tipografía de títulos el acordeón combina con el resto de la página,
       pero si esa fuente es de caja alta (Bebas Neue, Oswald, Anton) la pregunta
       se lee como una ETIQUETA en vez de como un encabezado, y el usuario la
       percibe más chica que la respuesta aunque en píxeles sea el doble —
       verificado en Nakama, donde ni subiéndola a 26px se veía bien.
       El default es la tipografía del CUERPO en semibold: misma familia y misma
       caja que la respuesta, así el contraste de tamaño y peso se lee de una. */
    /* el tamano NO va aqui: manda .ms-faq__question. Familia y peso si, se heredan. */
  }
  .ms-faq .ms-faq__summary {
    font-family: var(--ms-faq-q-family, var(--font-paragraph--family, var(--font-body--family, inherit)));
    font-weight: var(--ms-faq-q-weight, 600);
  }
  .ms-faq__summary::-webkit-details-marker { display: none; }
  .ms-faq__summary::marker { content: ''; }

  /* Scopeado (.ms-faq .ms-faq__question) para ganarle al bundle global compilado,
     que trae la misma regla bare y con igual especificidad se imponia. Es el mismo
     remedio ya documentado en ms-hero-v2-fondo.
     Y el tamano vive AQUI, no en el summary: el texto esta en este <span>.
     Antes decia var(--font-h6--size, 1.0625rem) y esa variable SI existe en
     Horizon/Booster valiendo 0.75rem = 12px, asi que el fallback no entraba y la
     pregunta salia mas chica que la respuesta. */
  .ms-faq .ms-faq__question {
    font-size: var(--ms-faq-q-size, 1.125rem);
    line-height: 1.35;
    text-wrap: balance;
  }

  /* ── Icono affordance: + que se vuelve - al abrir (CSS-only) ───────────────── */
  .ms-faq__icon {
    position: relative;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary);
  }

  .ms-faq__icon-bar {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    width: 100%;
    height: 2px;
    border-radius: var(--ms-radius-sm, 2px);
    background: currentColor;
    transition: transform 0.2s var(--ms-ease, ease);
  }

  /* Barra horizontal (siempre visible en el estilo "plus"; es el cuerpo del "caret") */
  .ms-faq__icon-bar--h {
    transform: translateY(-50%);
  }
  /* Barra vertical: forma la cruz del "+"; rota a 0 (desaparece visualmente) al abrir */
  .ms-faq__icon-bar--v {
    transform: translateY(-50%) rotate(90deg);
  }

  /* Abierto: la barra vertical se alinea con la horizontal → queda solo "-" */
  .ms-faq__item[open] .ms-faq__icon-bar--v {
    transform: translateY(-50%) rotate(0deg);
  }

  /* Variante "caret": ocultamos la barra horizontal y usamos un chevron rotando.
     Reusa las dos barras como flechas (sin SVG extra). */
  .ms-faq--icon-caret .ms-faq__icon-bar--h { display: none; }
  .ms-faq--icon-caret .ms-faq__icon-bar--v {
    inset-block-start: auto;
    inset-block-end: 0;
    width: 0.7em;
    height: 0.7em;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    background: transparent;
    border-radius: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, -30%) rotate(45deg);
  }
  .ms-faq--icon-caret .ms-faq__item[open] .ms-faq__icon-bar--v {
    transform: translate(-50%, 20%) rotate(-135deg);
  }

  /* ── Panel de respuesta ───────────────────────────────────────────────────── */
  .ms-faq__panel {
    overflow: hidden;
  }

  /* ⚠️ El aire de ARRIBA no estaba, y sin él la respuesta se lee pegada a su
     pregunta: medido abierto, 14px de la pregunta a la respuesta contra 21.6
     de la respuesta al cierre de la fila. El hueco que separa dos cosas
     distintas tiene que ser el mayor, no el menor — más todavía en el modo
     tarjeta, donde no hay línea divisoria que haga ese trabajo. (Bëne,
     27-ago.) */
  .ms-faq__answer {
    padding-block-start: var(--ms-space-sm, 0.9rem);
    padding-block-end: var(--ms-space-md, 1.25rem);
    font-size: var(--font-body--size, 1rem);
    line-height: 1.6;
    color: var(--color-foreground);
    opacity: 0.9;
    max-width: 68ch;
  }
  .ms-faq__answer > :first-child { margin-block-start: 0; }
  .ms-faq__answer > :last-child { margin-block-end: 0; }
  .ms-faq__answer a {
    color: var(--color-primary);
    text-underline-offset: 0.15em;
  }

  /* Apertura animada cuando el navegador soporta interpolar a auto (progresivo). */
  @supports (interpolate-size: allow-keywords) {
    .ms-faq__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 0.25s var(--ms-ease, ease), content-visibility 0.25s allow-discrete;
      content-visibility: hidden;
    }
    .ms-faq__item[open]::details-content {
      block-size: auto;
      content-visibility: visible;
    }
  }

  /* ── Empty (editor) ───────────────────────────────────────────────────────── */
  .ms-faq__empty {
    margin: 0;
    padding: 2rem 0;
    text-align: center;
    opacity: 0.7;
  }

  /* ===========================================================================
     DESKTOP (>=750px) — two-col: panel descripcion izq + acordeon der
     =========================================================================== */
  @media screen and (min-width: 750px) {
    .ms-faq--two-col .ms-faq__inner {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: var(--ms-faq-col-gap, 48px);
      align-items: start;
    }

    /* La columna de descripcion se mantiene visible al hacer scroll del acordeon */
    .ms-faq--two-col .ms-faq__aside {
      position: sticky;
      top: var(--ms-space-lg, 2rem);
    }
  }

  /* ===========================================================================
     a11y — foco visible (sin outline:none) + reduced motion
     =========================================================================== */
  .ms-faq__summary:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
    border-radius: var(--ms-radius-sm, 4px);
  }
  .ms-faq__cta:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
    border-radius: var(--ms-radius-sm, 4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-faq__icon-bar,
    .ms-faq__cta-arrow {
      transition: none;
    }
    @supports (interpolate-size: allow-keywords) {
      .ms-faq__item::details-content {
        transition: none;
      }
    }
  }
/* END_SECTION:ms-faq */

/* START_SECTION:ms-hero-v2-fondo (INDEX:39) */
.ms-hv2--fondo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: var(--color-foreground);
    background-color: var(--color-background);
  }
  .ms-hv2__bg { position: absolute; inset: 0; z-index: 0; }
  .ms-hv2__bg .ms-hv2__picture,
  .ms-hv2__bg .ms-hv2__image,
  .ms-hv2__bg .ms-hv2__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--ms-hv2-focal, center);
    display: block;
  }
  .ms-hv2__video--desktop { display: none; }
  .ms-hv2__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--ms-hv2-scrim-color, #000000);
    opacity: var(--ms-hv2-scrim, 0.3);
    pointer-events: none;
  }
  /* ⚠️ NAMESPACING OBLIGATORIO: el CSS de TODAS las secciones se compila en un
     solo bundle global (compiled_assets/styles.css). Reglas bare `.ms-hv2__inner`
     de la sección Split (flex-direction:column) PISABAN las de Fondo (row) por
     venir después con la misma especificidad → la posición vertical moría.
     Por eso TODO lo de layout va scopeado por tipo: .ms-hv2--fondo .ms-hv2__inner */
  .ms-hv2--fondo .ms-hv2__inner {
    position: relative;
    z-index: 2;
    display: flex;
    /* Fallback de altura: vh lo entiende TODO navegador; svh (que descuenta la
       barra del teléfono) es la mejora progresiva — si el navegador no la
       soporta, descarta SOLO la segunda declaración. Sin esto, en teléfonos
       sin svh el min-height entero moría y el hero quedaba a altura del
       contenido (el editor sí lo mostraba porque desktop soporta svh). */
    min-height: calc(var(--ms-hv2-min-h, 85) * 1vh);
    min-height: calc(var(--ms-hv2-min-h, 85) * 1svh);
    padding: var(--ms-hv2-pad-t, 24px) var(--page-margin, 20px) var(--ms-hv2-pad-b, 28px);
  }

  /* ── Alto «Auto» CON imagen: el hero toma la proporción de la foto ──
     El fondo es position:absolute, así que no aporta altura: en Auto el hero
     colapsaba al alto del texto y la foto se recortaba a esa franja. Aquí el
     alto se deriva del ancho con la proporción real de la imagen
     (alto = ancho / (w/h)), que es lo que se espera de «Auto»: que respete
     la foto. Sigue siendo `min-height`, así que si el texto no cabe el hero
     crece — nunca se corta contenido. */
  .ms-hv2--fondo.ms-hv2--arm .ms-hv2__inner {
    min-height: calc(100vw / var(--ms-hv2-ar, 1));
  }

  /* ── Posición vertical del contenido (clases, móvil = base) ── */
  .ms-hv2--fondo.ms-hv2--posm-top .ms-hv2__inner { align-items: flex-start; }
  .ms-hv2--fondo.ms-hv2--posm-center .ms-hv2__inner { align-items: center; }
  .ms-hv2--fondo.ms-hv2--posm-bottom .ms-hv2__inner { align-items: flex-end; }
  /* ── Colocación horizontal de la caja de contenido (sigue a la alineación) ── */
  .ms-hv2--fondo.ms-hv2--alm-left .ms-hv2__inner { justify-content: flex-start; }
  .ms-hv2--fondo.ms-hv2--alm-center .ms-hv2__inner { justify-content: center; }
  .ms-hv2--fondo.ms-hv2--alm-right .ms-hv2__inner { justify-content: flex-end; }

  /* ── Header transparente: el hero NO se mete debajo de la marquesina ──
     base.css sube la primera sección TODO el grupo del header
     (`margin-top: calc(var(--header-group-height) * -1)`). Con el header al final
     del grupo, ese número es solo lo de ARRIBA del header — la marquesina de
     anuncios —, porque el header transparente es `position: absolute` y no ocupa
     alto. Resultado (Bëne, 25-sep-2026): el hero arrancaba en y=0, DETRÁS de la
     barra roja, y se comía los primeros 37 px de la foto (las tapas de los
     frascos). El header ya flota solo sobre el hero; no hace falta subirlo nada.
     Solo cuando el header es el ÚLTIMO del grupo: si hay algo debajo de él,
     Horizon le da su propio margen y ahí se deja como está. */
  body:has(#header-group > .header-section:last-child .header[transparent]) .content-for-layout > .shopify-section:first-child:has(.ms-hv2--fondo) {
    margin-top: 0;
  }

  /* ── Header transparente: reservar su alto cuando el hero es la 1ª sección
     (regla probada de v1; th-clear PRENDIDO por defecto). ──

     Se reserva `--header-height` (SOLO el header), no `--header-group-height`.
     El grupo incluye además la marquesina de anuncios y la nav de colecciones,
     que NO son transparentes: van en el flujo normal, ARRIBA del hero, y no se
     le encima ninguna. Medido en la tienda: marquesina en y=0 (34px), header
     en y=34 (73px) y el hero arrancando en y=-73 — o sea se superpone
     exactamente el header. Reservar los 107px del grupo metía 34px de relleno
     fantasma arriba del titular, empujaba el contenido y subía el piso del
     hero, con lo que el ajuste de alto perdía rango: por debajo de cierto
     porcentaje dejaba de tener efecto. */
  body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .ms-hv2--th-clear.ms-hv2--fondo .ms-hv2__inner {
    padding-block-start: calc(var(--ms-hv2-pad-t, 24px) + var(--header-height, 0px));
    /* ⚠️ Y el alto TAMBIÉN crece. Sin esto la foto pierde su parte de arriba.
       Con header transparente, header.liquid:770 le mete a la primera sección
       un `margin-top` NEGATIVO de --header-height: la sección se sube y esos
       píxeles quedan TAPADOS por el header. La sección seguía midiendo 85svh,
       así que lo visible eran 85svh − alto del header, y el recorte se comía
       justo el tope de la imagen (la cabeza, en el hero de Koneli).
       El padding de arriba solo bajaba el TEXTO; a la imagen no la compensaba
       nadie, porque .ms-hv2__bg es inset:0 sobre la sección.
       Creciendo el min-height exactamente lo que mide el header, lo que se
       oculta detrás es material EXTRA y lo visible sigue siendo el alto pedido.
       (box-sizing es border-box — base.css:2 — así que el padding va por dentro
       y no aporta alto: hay que sumarlo aquí.) */
    min-height: calc(var(--ms-hv2-min-h, 85) * 1vh + var(--header-height, 0px));
    min-height: calc(var(--ms-hv2-min-h, 85) * 1svh + var(--header-height, 0px));
  }
  /* ⚠️ En modo «Auto» el alto NO lleva el header sumado. Es lo contrario que
     arriba, y a propósito.

     En modo porcentaje el recorte es inevitable (la caja nunca coincide con la
     proporción de la foto), así que sumar el header evita perder composición.
     Pero en «Auto» el objetivo es que la caja mida EXACTAMENTE la proporción de
     la imagen: ahí `cover` no recorta nada. Sumarle 60px rompe esa igualdad y
     `cover` vuelve a comerse el ancho — medido en Koneli: 187px, un 25%.

     Y no hay nada que compensar: el header es TRANSPARENTE, así que la franja
     que queda debajo de él se sigue viendo. El padding de arriba (que sí se
     mantiene) es lo único necesario, para que el texto no choque con el logo.

     Se declara explícito porque la regla genérica de arriba tiene más
     especificidad que la base `.ms-hv2--fondo.ms-hv2--arm` y, sin esto, ganaría. */
  body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .ms-hv2--th-clear.ms-hv2--fondo.ms-hv2--arm .ms-hv2__inner {
    min-height: calc(100vw / var(--ms-hv2-ar, 1));
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-hv2__video { display: none; }
  }

  @media screen and (min-width: 750px) {
    .ms-hv2__video--mobile { display: none; }
    .ms-hv2__video--desktop { display: block; }
    .ms-hv2__bg .ms-hv2__image,
    .ms-hv2__bg .ms-hv2__video {
      object-position: var(--ms-hv2-focal-d, var(--ms-hv2-focal, center));
    }
    .ms-hv2--fondo .ms-hv2__inner {
      min-height: calc(var(--ms-hv2-min-h-d, 75) * 1vh);
      min-height: calc(var(--ms-hv2-min-h-d, 75) * 1svh);
      padding: var(--ms-hv2-pad-t-d, 56px) var(--page-margin, 4rem) var(--ms-hv2-pad-b-d, 56px);
    }
    /* En escritorio manda la proporción de la imagen de ESCRITORIO. La regla
       de móvil se anula explícitamente: si solo el móvil está en «Auto», su
       proporción (a menudo un 1:2 vertical) no debe estirar el escritorio. */
    .ms-hv2--fondo.ms-hv2--arm .ms-hv2__inner {
      min-height: calc(var(--ms-hv2-min-h-d, 75) * 1svh);
    }
    .ms-hv2--fondo.ms-hv2--ard .ms-hv2__inner {
      min-height: calc(100vw / var(--ms-hv2-ar-d, 1));
    }
    .ms-hv2--fondo.ms-hv2--posd-top .ms-hv2__inner { align-items: flex-start; }
    .ms-hv2--fondo.ms-hv2--posd-center .ms-hv2__inner { align-items: center; }
    .ms-hv2--fondo.ms-hv2--posd-bottom .ms-hv2__inner { align-items: flex-end; }
    .ms-hv2--fondo.ms-hv2--ald-left .ms-hv2__inner { justify-content: flex-start; }
    .ms-hv2--fondo.ms-hv2--ald-center .ms-hv2__inner { justify-content: center; }
    .ms-hv2--fondo.ms-hv2--ald-right .ms-hv2__inner { justify-content: flex-end; }
    body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .ms-hv2--th-clear.ms-hv2--fondo .ms-hv2__inner {
      padding-block-start: calc(var(--ms-hv2-pad-t-d, 56px) + var(--header-height, 0px));
      min-height: calc(var(--ms-hv2-min-h-d, 75) * 1vh + var(--header-height, 0px));
      min-height: calc(var(--ms-hv2-min-h-d, 75) * 1svh + var(--header-height, 0px));
    }
    /* En escritorio el modo «Auto» de móvil no debe estirar nada: se reafirma
       el alto de escritorio, ya con el header sumado (aquí sí, es porcentaje). */
    body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .ms-hv2--th-clear.ms-hv2--fondo.ms-hv2--arm .ms-hv2__inner {
      min-height: calc(var(--ms-hv2-min-h-d, 75) * 1svh + var(--header-height, 0px));
    }
    /* «Auto» de escritorio: proporción EXACTA, sin sumar el header — misma
       razón que en móvil. */
    body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .ms-hv2--th-clear.ms-hv2--fondo.ms-hv2--ard .ms-hv2__inner {
      min-height: calc(100vw / var(--ms-hv2-ar-d, 1));
    }
  }
/* END_SECTION:ms-hero-v2-fondo */

/* START_SECTION:ms-hero-v2-split (INDEX:40) */
/* ── VIDEO ────────────────────────────────────────────────────────────────
     Un video VERTICAL dentro de una caja de alto fijo con object-fit:cover se
     come la cara o los subtitulos quemados, y sin caja crece a su tamano natural
     (en escritorio, 600px de columna = 1,067px de alto: la fila se estira y la
     columna de texto queda medio vacia). Por eso el video NO usa la caja de la
     imagen: se le da el alto y el ancho sale de su propia proporcion. */
  .ms-hv2--split .ms-hv2__media.ms-hv2__media--video {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .ms-hv2--split .ms-hv2__media--video .ms-hv2__image.ms-hv2__video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: transparent;
    border-radius: var(--ms-hv2-img-radius, 0);
  }

  .ms-hv2--split {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--color-foreground);
    background-color: var(--color-background);
    width: 100%;
  }
  .ms-hv2--split:not(.ms-hv2--full) {
    width: min(var(--ms-hv2-maxw-sec, 1200px), calc(100% - 2 * var(--page-margin, 20px)));
    margin-inline: auto;
  }
  /* ⚠️ NAMESPACING OBLIGATORIO (bundle CSS global): ver la nota en
     ms-hero-v2-fondo.liquid — reglas bare `.ms-hv2__inner` de esta sección
     PISABAN las de Fondo. Todo el layout va scopeado: .ms-hv2--split ... */
  .ms-hv2--split .ms-hv2__media {
    position: relative;
    /* Fallback vh → mejora svh (ver nota en ms-hero-v2-fondo.liquid) */
    height: calc(var(--ms-hv2-img-h, 45) * 1vh);
    height: calc(var(--ms-hv2-img-h, 45) * 1svh);
    overflow: hidden;
    border-radius: var(--ms-hv2-img-radius, 0);
  }
  .ms-hv2--split .ms-hv2__media .ms-hv2__picture,
  .ms-hv2--split .ms-hv2__media .ms-hv2__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--ms-hv2-focal, center);
    display: block;
  }
  .ms-hv2--split .ms-hv2__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--ms-hv2-pad-t, 24px) clamp(1.25rem, 4vw, 2.5rem) var(--ms-hv2-pad-b, 28px);
  }

  /* Colocación horizontal de la caja de contenido (sigue a la alineación) */
  .ms-hv2--split.ms-hv2--alm-left .ms-hv2__inner { align-items: flex-start; }
  .ms-hv2--split.ms-hv2--alm-center .ms-hv2__inner { align-items: center; }
  .ms-hv2--split.ms-hv2--alm-right .ms-hv2__inner { align-items: flex-end; }

  /* Movil: el relleno superior de la seccion vive en __inner, asi que con el
     media ARRIBA la seccion arranca pegada a la anterior. Con foto a sangre eso
     se busca; con un video contenido se ve como un error de maquetado. */
  .ms-hv2--split.ms-hv2--m-image_top .ms-hv2__media.ms-hv2__media--video {
    padding-block-start: var(--ms-hv2-pad-t, 24px);
  }

  /* ── Foto CONTENIDA (media_bleed = off) ────────────────────────────────
     La foto a sangre es el comportamiento de siempre y se queda por omision.
     Pero cuando una ficha usa VIDEO y sus hermanas usan FOTO, las dos se ven
     distintas: el video respeta «Espacio arriba/abajo» y la foto no. Con este
     interruptor la foto los respeta igual.

     El radio y el recorte se mudan del contenedor a la imagen: si se quedaran
     en el contenedor, las esquinas redondeadas caerian en el borde del RELLENO
     y la foto quedaria con esquinas cuadradas contra el fondo. */
  .ms-hv2--split .ms-hv2__media--inset {
    /* content-box a proposito: el relleno SUMA al alto en vez de comerselo.
       Con border-box la foto se encogia 144px para hacerle lugar al espaciado,
       que es justo lo contrario de lo que se pide: la foto se queda igual y la
       seccion crece, para que el banner de abajo deje de estar pegado. */
    box-sizing: content-box;
    padding-block: var(--ms-hv2-pad-t, 24px);
    border-radius: 0;
    overflow: visible;
  }
  .ms-hv2--split .ms-hv2__media--inset .ms-hv2__picture,
  .ms-hv2--split .ms-hv2__media--inset .ms-hv2__image {
    border-radius: var(--ms-hv2-img-radius, 0);
    overflow: hidden;
  }
  /* En movil la foto apilada tiene que respetar el margen de pagina, igual que
     el texto. Sin esto, con la seccion a ancho completo la foto se iba a sangre
     mientras el video —que no usa esta caja— si guardaba su margen: las fichas
     con foto y las fichas con video se veian distintas (Koneli, 25-ago).
     Va en margin y no en padding porque el inset es content-box: el padding
     SUMA al ancho y desbordaria. */
  @media (max-width: 749px) {
    .ms-hv2--split .ms-hv2__media--inset {
      margin-inline: var(--page-margin, 20px);
    }
  }
  @media (min-width: 750px) {
    .ms-hv2--split .ms-hv2__media--inset {
      padding-block: var(--ms-hv2-pad-t-d, 56px);
    }
  }
  .ms-hv2--split.ms-hv2--m-image_bottom .ms-hv2__media.ms-hv2__media--video {
    padding-block-end: var(--ms-hv2-pad-b, 28px);
  }

  /* Móvil: imagen abajo → el contenido (con CTA) va primero */
  .ms-hv2--split.ms-hv2--m-image_bottom .ms-hv2__media { order: 2; }
  .ms-hv2--split.ms-hv2--m-image_bottom .ms-hv2__inner { order: 1; }

  /* Header transparente + hero en 1ª posición: reservar el alto del header
     (regla probada de v1; th-clear PRENDIDO por defecto). */
  body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .ms-hv2--th-clear.ms-hv2--split .ms-hv2__inner {
    padding-block-start: calc(var(--ms-hv2-pad-t, 24px) + var(--header-height, 0px));
  }

  @media screen and (min-width: 750px) {
    .ms-hv2--split .ms-hv2__media {
      height: calc(var(--ms-hv2-img-h-d, 60) * 1vh);
      height: calc(var(--ms-hv2-img-h-d, 60) * 1svh);
    }
    .ms-hv2--split .ms-hv2__media .ms-hv2__image {
      object-position: var(--ms-hv2-focal-d, var(--ms-hv2-focal, center));
    }
    /* Escritorio: manda el ALTO elegido y el ancho lo pone la proporcion del
       video, centrado en su columna. Asi un vertical se ve completo sin estirar
       la fila ni dejar la columna de texto vacia. */
    .ms-hv2--split .ms-hv2__media--video .ms-hv2__image.ms-hv2__video {
      width: auto;
      max-width: 100%;
      height: calc(var(--ms-hv2-img-h-d, 60) * 1vh);
      height: calc(var(--ms-hv2-img-h-d, 60) * 1svh);
    }
    .ms-hv2--split.ms-hv2--d-text_left_image_right .ms-hv2__media.ms-hv2__media--video,
    .ms-hv2--split.ms-hv2--d-text_right_image_left .ms-hv2__media.ms-hv2__media--video {
      min-height: 0;
      padding-block: var(--ms-hv2-pad-t-d, 56px);
    }
    .ms-hv2--split .ms-hv2__inner {
      padding: var(--ms-hv2-pad-t-d, 56px) clamp(2rem, 4vw, 4rem) var(--ms-hv2-pad-b-d, 56px);
    }
    .ms-hv2--split.ms-hv2--ald-left .ms-hv2__inner { align-items: flex-start; }
    .ms-hv2--split.ms-hv2--ald-center .ms-hv2__inner { align-items: center; }
    .ms-hv2--split.ms-hv2--ald-right .ms-hv2__inner { align-items: flex-end; }

    /* Desktop: lado a lado */
    .ms-hv2--split.ms-hv2--d-text_left_image_right,
    .ms-hv2--split.ms-hv2--d-text_right_image_left {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }
    .ms-hv2--split.ms-hv2--d-text_left_image_right .ms-hv2__media,
    .ms-hv2--split.ms-hv2--d-text_right_image_left .ms-hv2__media {
      height: auto;
      min-height: calc(var(--ms-hv2-img-h-d, 60) * 1vh);
      min-height: calc(var(--ms-hv2-img-h-d, 60) * 1svh);
    }
    .ms-hv2--split.ms-hv2--d-text_left_image_right .ms-hv2__media { order: 2; }
    .ms-hv2--split.ms-hv2--d-text_left_image_right .ms-hv2__inner { order: 1; }
    .ms-hv2--split.ms-hv2--d-text_right_image_left .ms-hv2__media { order: 1; }
    .ms-hv2--split.ms-hv2--d-text_right_image_left .ms-hv2__inner { order: 2; }

    body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .ms-hv2--th-clear.ms-hv2--split .ms-hv2__inner {
      padding-block-start: calc(var(--ms-hv2-pad-t-d, 56px) + var(--header-height, 0px));
    }
  }
/* END_SECTION:ms-hero-v2-split */

/* START_SECTION:ms-hero (INDEX:41) */
/* ===========================================================================
     ms-hero — CSS scopeado .ms-hero__ · vars por instancia (#ms-hero-{id}).
     Colores del scheme activo (+ overrides). Mobile-first. Sin JS.
     =========================================================================== */
  .ms-hero {
    --ms-hero-touch-min: var(--ms-touch-min, 44px);
    position: relative;
    color: var(--color-foreground);
    background-color: var(--color-background);
    overflow: hidden;
    isolation: isolate;
    max-width: var(--ms-hero-section-maxw, 100%);
    margin-inline: auto;
  }

  /* ── Promo bar ── */
  .ms-hero__promo {
    width: 100%;
    text-align: center;
    background: var(--ms-promo-bg, var(--color-primary));
    color: var(--ms-promo-color, var(--color-background));
    font-size: var(--ms-t-label);
    line-height: 1.3;
    padding: 0.5rem 1rem;
  }
  .ms-hero__promo-link { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }

  /* ── Media ── */
  .ms-hero__media {
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-radius: var(--ms-hero-img-radius, 0);
  }
  .ms-hero__picture,
  .ms-hero__image {
    display: block;
    width: 100%;
    height: 100%;
  }
  .ms-hero__image {
    object-fit: var(--ms-hero-objectfit, cover);
    object-position: var(--ms-hero-img-pos-mobile, center center);
  }
  .ms-hero__image--placeholder {
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
    aspect-ratio: 4 / 5;
  }

  .ms-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: var(--ms-hero-overlay-color, #000);
    opacity: var(--ms-hero-overlay-alpha, 0.4);
  }

  /* ── Video de fondo: cubre el media encima de la imagen (poster debajo);
       el overlay (z1) sigue ganando para la legibilidad del texto ── */
  .ms-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--ms-hero-img-pos-mobile, center center);
    pointer-events: none;
  }
  /* iOS: ocultar el glifo de play del sistema en videos de fondo */
  .ms-hero__video::-webkit-media-controls-start-playback-button,
  .ms-hero__video::-webkit-media-controls { display: none !important; -webkit-appearance: none; }
  .ms-hero__video--desktop { display: none; }
  @media screen and (min-width: 750px) {
    .ms-hero__video { object-position: var(--ms-hero-img-pos-desktop, center center); }
    /* si hay video desktop, en ≥750 se muestra ese y se oculta el móvil */
    .ms-hero__video--desktop { display: block; }
    .ms-hero__media:has(.ms-hero__video--desktop) .ms-hero__video--mobile { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ms-hero__video { display: none !important; }
  }

  /* ── «Alto según el video» (vidfit-natural): el hero toma la altura NATURAL
       del video visible (sin recorte) — espejo del bgfit de imagen. ── */
  .ms-hero--vidfit-natural { min-height: 0 !important; }
  .ms-hero--vidfit-natural .ms-hero__media {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
  }
  /* OJO: SIN display aquí — el swap móvil/desktop de arriba sigue mandando
     (con display:block genérico los 2 videos se apilaban). */
  .ms-hero--vidfit-natural .ms-hero__video {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }
  /* la imagen/placeholder queda de TELÓN absoluto (en flujo empujaba los
     videos fuera de vista — el bug del "se borró el video") */
  .ms-hero--vidfit-natural .ms-hero__picture,
  .ms-hero--vidfit-natural .ms-hero__media > .ms-hero__image--placeholder {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  .ms-hero--vidfit-natural.ms-hero--background_overlay { min-height: 0; }

  /* ── Contenido / panel ── */
  .ms-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--page-margin, 1.25rem);
    padding-block: var(--ms-hero-pad-top-mobile, 20px) var(--ms-hero-pad-bottom-mobile, 24px);
  }
  .ms-hero__panel {
    display: flex;
    flex-direction: column;
    gap: var(--ms-hero-gap, 14px);
    width: 100%;
    max-width: var(--ms-hero-content-maxw, 560px);
    align-items: var(--ms-hero-flex-mobile, flex-start);
    text-align: var(--ms-hero-text-mobile, left);
  }
  .ms-hero__panel :is(a, button) { pointer-events: auto; }

  /* ── Eyebrow (kicker) ── */
  .ms-hero__eyebrow {
    margin: 0;
    font-size: var(--ms-t-label);
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.18em);
    text-transform: var(--ms-case-label, uppercase);
    opacity: 0.85;
  }

  /* ── Social proof ── */
  .ms-hero__social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    font-size: var(--ms-hero-sp-size-mobile, 0.875rem);
    line-height: 1.2;
  }
  .ms-hero__stars { display: inline-flex; color: var(--ms-stars-color, #f5a623); }
  .ms-hero__stars svg { display: block; }
  .ms-hero__avatars { height: 28px; width: auto; border-radius: var(--ms-radius-pill, 999px); }
  .ms-hero__social-text { opacity: 0.92; }
  .ms-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--ms-radius-pill, 999px);
    background: var(--ms-badge-bg, rgb(var(--color-foreground-rgb, 0 0 0) / 0.06));
    color: var(--ms-badge-color, inherit);
    font-weight: var(--ms-w-medium, 500);
  }

  /* ── Heading / subheading ── */
  .ms-hero__heading {
    color: var(--color-foreground-heading, inherit);
    margin: 0;
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    font-size: var(--ms-hero-h-size-mobile, var(--font-h1--size, clamp(1.9rem, 1.2rem + 3.6vw, 3.25rem)));
    line-height: var(--font-h1--line-height, 1.07);
    letter-spacing: var(--font-h1--letter-spacing, normal);
    text-wrap: balance;
  }
  /* Resalta una palabra del titular con <em>. Color/cursiva/subrayado salen del
     editor vía ms-accent-vars; el grosor y la separación del subrayado son
     globales (Ajustes Myshopiguru). skip-ink hace que el trazo esquive las
     descendentes en vez de cortarlas. */
  .ms-hero__heading em {
    font-style: var(--ms-accent-style, italic);
    /* Rev 2 §3.4: con el subrayado encendido la palabra conserva el color del
       titular (--ms-accent-ink: currentcolor) y el acento pinta SOLO la regla.
       Apagado, la palabra sigue yendo en acento. Detalle en ms-accent-vars. */
    color: var(--ms-accent-ink, var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary))));
    font-weight: inherit;
    text-decoration-line: var(--ms-accent-decoration, none);
    text-decoration-color: var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary)));
    text-decoration-thickness: var(--ms-accent-thickness, 2px);
    text-underline-offset: var(--ms-accent-offset, 3px);
    text-decoration-skip-ink: auto;
  }
  .ms-hero__subheading {
    margin: 0;
    font-size: var(--ms-hero-sub-size-mobile, 1.0625rem);
    line-height: 1.55;
    max-width: 54ch;
    opacity: 0.92;
  }
  .ms-hero__subheading > :first-child { margin-block-start: 0; }
  .ms-hero__subheading > :last-child { margin-block-end: 0; }

  /* ===========================================================================
     BENEFICIOS — CSS Grid responsive (lo más importante del hero).
     Mobile: columnas controladas (default 2). Desktop: auto/2/3/4.
     =========================================================================== */
  .ms-hero__benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: var(--ms-hero-bgrid-mobile, repeat(2, minmax(0, 1fr)));
    gap: var(--ms-hero-benefit-gap, 8px);
    justify-content: var(--ms-hero-flex-benefits, flex-start);
    justify-items: var(--ms-hero-bitems-mobile, stretch);
  }
  /* 3 beneficios en 2 columnas: el 3ro (impar y último) se centra ocupando la fila */
  .ms-hero--bcm-2 .ms-hero__benefits[data-count='3'] .ms-hero__benefit:last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .ms-hero__benefit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: var(--ms-hero-benefit-size-mobile, 0.875rem);
    line-height: 1.25;
  }
  .ms-hero__benefit-text {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .ms-hero__benefit-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--ms-hero-benefit-icon-color, var(--color-primary));
  }
  .ms-hero__benefit-icon svg,
  .ms-hero__benefit-icon img { display: block; }
  .ms-hero__benefit-icon img { width: 20px; height: 20px; object-fit: contain; }

  /* Estilo pill */
  .ms-hero--bstyle-pill .ms-hero__benefit {
    padding: 0.4rem 0.7rem;
    background: var(--ms-hero-benefit-bg, rgb(var(--color-foreground-rgb, 0 0 0) / 0.05));
    color: var(--ms-hero-benefit-text-color, inherit);
    border: 1px solid var(--ms-hero-benefit-border, transparent);
    border-radius: var(--ms-hero-benefit-radius, 999px);
  }
  /* Estilo bullet_grid: sin pastilla, icono + texto limpio */
  .ms-hero--bstyle-bullet_grid .ms-hero__benefit {
    padding-block: 0.1rem;
    color: var(--ms-hero-benefit-text-color, inherit);
  }
  /* Estilo pill_glass (cosecha Grounded): pastilla liquid glass — blur real +
     borde luminoso + highlight interior. El fondo = versión translúcida del
     color de pill configurado, así se adapta a cualquier marca. */
  .ms-hero--bstyle-pill_glass .ms-hero__benefit {
    padding: 0.4rem 0.7rem;
    background: color-mix(in srgb, var(--ms-hero-benefit-bg, transparent) 45%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 24px rgb(var(--color-foreground-rgb, 0 0 0) / 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    color: var(--ms-hero-benefit-text-color, inherit);
    border-radius: var(--ms-hero-benefit-radius, 999px);
  }
  @media (prefers-reduced-transparency: reduce) {
    .ms-hero--bstyle-pill_glass .ms-hero__benefit {
      background: var(--ms-hero-benefit-bg, #ffffff);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  /* ── Beneficios del mismo ancho en MÓVIL (rejilla pareja, p. ej. 2x2) ──
     Las pastillas se estiran a su columna (no se encogen al texto) aunque el
     texto esté centrado → quedan todas del mismo ancho. Conserva la rejilla
     configurada: con 2 columnas + 4 beneficios = 2x2. */
  @media screen and (max-width: 749px) {
    .ms-hero--beq-mobile .ms-hero__benefits {
      justify-items: stretch;
    }
    /* Caso "3 en 2 columnas": el 3º también se estira en vez de centrarse. */
    .ms-hero--beq-mobile .ms-hero__benefits[data-count='3'] .ms-hero__benefit:last-child {
      grid-column: auto;
      justify-self: stretch;
    }
  }

  /* ── CTA ── */
  .ms-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    width: 100%;
    justify-content: var(--ms-hero-cta-justify-m, flex-start);
  }
  /* CTA canónico ms-: hereda tipografía/case/tamaño/padding/radio del SISTEMA DE
     BOTONES del tema (panel "Botones": --button-* + --style-border-radius-buttons-*),
     para que TODOS los CTA ms- combinen entre sí y con los botones nativos. */
  .ms-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--ms-hero-touch-min, 44px);
    /* Altura/espaciado = SISTEMA DE BOTONES del tema (--button-padding-*); fallback = estándar nativo 16px/24px. */
    padding: var(--button-padding-block, 16px) var(--button-padding-inline, 24px);
    /* Radio del botón del tema (Horizon/Booster: --style-border-radius-buttons-primary;
       Dawn/Azzel: --buttons-radius; fallback ms- 8px). */
    border-radius: var(--style-border-radius-buttons-primary, var(--buttons-radius, var(--ms-radius-md, 8px)));
    font-family: var(--button-font-family-primary, var(--font-primary--family, var(--font-heading--family, inherit)));
    font-size: var(--ms-hero-cta-size-mobile, var(--button-font-size, var(--font-paragraph--size, 1rem)));
    font-weight: var(--button-font-family-primary-weight, var(--ms-w-medium, 500));
    text-transform: var(--button-text-case-primary, none);
    line-height: var(--font-paragraph--line-height, 1.2);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .ms-hero__btn--primary {
    /* Cadena: override de la sección → token nativo del tema (Horizon) → literal seguro.
       NO cae en --color-primary porque en temas Dawn/Azzel es un triplete "R,G,B" (inválido como color). */
    background-color: var(--ms-hero-cta-bg, var(--color-primary-button-background, #111111));
    color: var(--ms-hero-cta-text, var(--color-primary-button-text, #ffffff));
    border: var(--style-border-width-primary, 1px) solid var(--ms-hero-cta-bg, var(--color-primary-button-border, var(--color-primary-button-background, #111111)));
  }
  /* Secundario canónico ms-: outline 1px (case/radio/tipografía vía .ms-hero__btn). */
  .ms-hero__btn--secondary {
    background-color: transparent;
    color: var(--color-foreground);
    border: var(--style-border-width-secondary, 1px) solid rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.6);
  }
  /* CTA primario estilo LIQUID GLASS (cta_primary_style: glass): versión
     translúcida del color de CTA configurado + blur — opcional, default solid. */
  .ms-hero--cta1-glass .ms-hero__btn--primary {
    background-color: color-mix(in srgb, var(--ms-hero-cta-bg, var(--color-primary-button-background, #111111)) 40%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 8px 24px rgb(var(--color-foreground-rgb, 0 0 0) / 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  @media (prefers-reduced-transparency: reduce) {
    .ms-hero--cta1-glass .ms-hero__btn--primary {
      background-color: var(--ms-hero-cta-bg, var(--color-primary-button-background, #111111));
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
  /* CTA secundario estilo LINK subrayado (cosecha Grounded, cta_secondary_style: link) */
  .ms-hero--cta2-link .ms-hero__btn--secondary {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 0;
    padding: 0.4em 0.35em;
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 0.28em;
    font-weight: var(--ms-w-medium, 500);
  }
  /* Social proof DEBAJO del CTA (cosecha Grounded, social_proof_position: below_cta) */
  .ms-hero--sp-below_cta .ms-hero__social { order: 8; font-size: var(--ms-t-meta); }
  .ms-hero--sp-below_cta .ms-hero__trust { order: 9; }
  .ms-hero__btn:hover { opacity: 0.92; }
  .ms-hero__btn:active { transform: translateY(1px); }
  /* CTA ancho completo en MÓVIL (botones apilados a todo el ancho) */
  .ms-hero__actions:has(.ms-hero__btn) { width: 100%; }
  .ms-hero--ctaw-m-full .ms-hero__actions { flex-direction: column; align-items: stretch; }
  .ms-hero--ctaw-m-full .ms-hero__btn { width: 100%; }

  /* ── Trust ── */
  .ms-hero__trust {
    margin: 0;
    font-size: var(--ms-hero-trust-size-mobile, 0.8125rem);
    opacity: 0.78;
    line-height: 1.4;
  }

  /* ── Logos strip ── */
  .ms-hero__logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem var(--page-margin, 1.25rem);
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.03);
  }
  .ms-hero__logos-label {
    font-size: var(--ms-t-label);
    letter-spacing: var(--ms-tracking-label, 0.08em);
    text-transform: var(--ms-case-label, uppercase);
    opacity: 0.6;
  }
  .ms-hero__logos-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.75rem;
  }
  .ms-hero__logo-img { height: 28px; width: auto; opacity: 0.7; filter: grayscale(1); }

  /* ===========================================================================
     LAYOUTS — MOBILE-FIRST
     =========================================================================== */
  /* image_top / image_bottom: flex column (apilan, nunca se enciman) */
  .ms-hero--image_top,
  .ms-hero--image_bottom {
    display: flex;
    flex-direction: column;
    min-height: var(--ms-hero-minh-mobile, auto);
  }
  .ms-hero--image_top .ms-hero__media,
  .ms-hero--image_bottom .ms-hero__media {
    flex: 0 0 auto;
    width: 100%;
    height: var(--ms-hero-img-h-mobile, 44svh);
  }
  .ms-hero--image_top .ms-hero__content,
  .ms-hero--image_bottom .ms-hero__content { flex: 0 1 auto; }
  /* image_bottom: contenido primero, imagen después (CTA antes de la imagen) */
  .ms-hero--image_bottom .ms-hero__media { order: 2; }
  .ms-hero--image_bottom .ms-hero__content { order: 1; }

  /* background_overlay: grid con media de fondo + contenido encima */
  .ms-hero--background_overlay {
    display: grid;
    min-height: var(--ms-hero-minh-mobile, 70svh);
  }
  .ms-hero--background_overlay .ms-hero__media {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
  }
  .ms-hero--background_overlay .ms-hero__content {
    grid-area: 1 / 1;
    align-items: var(--ms-hero-vpos-mobile, center);
    justify-content: var(--ms-hero-flex-mobile, flex-start);
  }

  /* background_overlay + "Alto según la imagen": la sección toma el alto NATURAL de la imagen
     (sin alto fijo svh, sin object-fit cover → sin recorte). El contenido sigue ENCIMA (grid 1/1).
     El alto de la fila = alto de la imagen, salvo que el contenido sea más alto. Móvil y desktop. */
  .ms-hero--background_overlay.ms-hero--bgfit-natural { min-height: 0; }
  .ms-hero--background_overlay.ms-hero--bgfit-natural .ms-hero__media { height: auto; }
  .ms-hero--background_overlay.ms-hero--bgfit-natural .ms-hero__picture,
  .ms-hero--background_overlay.ms-hero--bgfit-natural .ms-hero__image {
    height: auto;
    object-fit: initial;
  }

  /* ── Reservar espacio para el HEADER TRANSPARENTE (toggle "clear_transparent_header") ──
     Con header transparente, Horizon jala la 1ª sección bajo el header flotante
     (margin-top negativo). La promo bar interna del hero "tapaba" ese hueco de
     carambola → al apagarla, el logo caía sobre la imagen. Con el toggle, el hero
     reserva SIEMPRE el alto del grupo de header (variable viva de Horizon, se
     recalcula sola): el fondo del hero llena la franja detrás del header, pero la
     imagen y el contenido bajan ese alto → nunca quedan tapados, con o sin promo bar.
     Scopeado a la 1ª sección + header transparente para no meter hueco en otros casos. */
  body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child .ms-hero--th-clear {
    padding-block-start: var(--header-group-height, var(--header-height, 0px));
  }

  /* ocultar imagen */
  @media screen and (max-width: 749px) {
    .ms-hero--no-img-mobile .ms-hero__media { display: none; }
  }

  /* ===========================================================================
     DESKTOP (>=750px)
     =========================================================================== */
  @media screen and (min-width: 750px) {
    .ms-hero__content {
      padding-block: var(--ms-hero-pad-top-desktop, 56px) var(--ms-hero-pad-bottom-desktop, 56px);
      padding-inline: var(--page-margin, 4rem);
    }
    .ms-hero__panel {
      align-items: var(--ms-hero-flex-desktop, flex-start);
      text-align: var(--ms-hero-text-desktop, left);
    }

    /* Tamaños de texto · desktop (independientes del mobile) */
    .ms-hero__heading { font-size: var(--ms-hero-h-size-desktop, var(--ms-hero-h-size-mobile, var(--font-h1--size, clamp(1.9rem, 1.2rem + 3.6vw, 3.25rem)))); }
    .ms-hero__subheading { font-size: var(--ms-hero-sub-size-desktop, var(--ms-hero-sub-size-mobile, 1.0625rem)); }
    .ms-hero__btn { font-size: var(--ms-hero-cta-size-desktop, var(--ms-hero-cta-size-mobile, 1rem)); }
    .ms-hero__trust { font-size: var(--ms-hero-trust-size-desktop, var(--ms-hero-trust-size-mobile, 0.8125rem)); }
    .ms-hero__benefit { font-size: var(--ms-hero-benefit-size-desktop, var(--ms-hero-benefit-size-mobile, 0.875rem)); }
    .ms-hero__social { font-size: var(--ms-hero-sp-size-desktop, var(--ms-hero-sp-size-mobile, 0.875rem)); }

    /* ── CTA en DESKTOP: alineación + ancho, independientes de móvil ────────── */
    .ms-hero__actions { justify-content: var(--ms-hero-cta-justify-d, flex-start); }
    /* Ancho normal en desktop: fila + ancho natural (revierte el apilado de móvil) */
    .ms-hero--ctaw-d-auto .ms-hero__actions {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
    }
    .ms-hero--ctaw-d-auto .ms-hero__btn { width: auto; }
    /* Ancho completo en desktop: botones apilados a todo el ancho */
    .ms-hero--ctaw-d-full .ms-hero__actions { flex-direction: column; align-items: stretch; }
    .ms-hero--ctaw-d-full .ms-hero__btn { width: 100%; }
    .ms-hero__benefits {
      grid-template-columns: var(--ms-hero-bgrid-desktop, repeat(auto-fit, minmax(150px, 1fr)));
      justify-items: var(--ms-hero-bitems-desktop, stretch);
    }
    .ms-hero__image { object-position: var(--ms-hero-img-pos-desktop, center center); }

    .ms-hero--no-img-desktop .ms-hero__media { display: none; }

    /* image_top/bottom · desktop_layout = stacked / centered → card vertical centrado */
    .ms-hero--image_top.ms-hero--dt-stacked,
    .ms-hero--image_bottom.ms-hero--dt-stacked,
    .ms-hero--image_top.ms-hero--dt-centered,
    .ms-hero--image_bottom.ms-hero--dt-centered {
      min-height: var(--ms-hero-minh-desktop, auto);
    }
    .ms-hero--dt-stacked .ms-hero__media,
    .ms-hero--dt-centered .ms-hero__media {
      height: var(--ms-hero-img-h-desktop, 52svh);
    }
    .ms-hero--dt-stacked .ms-hero__panel,
    .ms-hero--dt-centered .ms-hero__panel {
      margin-inline: auto;
    }
    .ms-hero--dt-centered .ms-hero__panel {
      align-items: center;
      text-align: center;
    }
    .ms-hero--dt-centered .ms-hero__benefits,
    .ms-hero--dt-centered .ms-hero__actions { justify-content: center; }

    /* image_top/bottom · text_left_image_right / text_right_image_left → fila */
    .ms-hero--image_top.ms-hero--dt-text_left_image_right,
    .ms-hero--image_bottom.ms-hero--dt-text_left_image_right,
    .ms-hero--image_top.ms-hero--dt-text_right_image_left,
    .ms-hero--image_bottom.ms-hero--dt-text_right_image_left {
      flex-direction: row;
      align-items: center;
      min-height: var(--ms-hero-minh-desktop, auto);
    }
    .ms-hero--dt-text_left_image_right .ms-hero__media,
    .ms-hero--dt-text_right_image_left .ms-hero__media {
      flex: 0 0 50%;
      height: auto;
      align-self: stretch;
      min-height: var(--ms-hero-img-h-desktop, 52svh);
    }
    .ms-hero--dt-text_left_image_right .ms-hero__content,
    .ms-hero--dt-text_right_image_left .ms-hero__content {
      flex: 1 1 0;
    }
    /* text_left_image_right: contenido (order 1) izq, imagen (order 2) der */
    .ms-hero--dt-text_left_image_right .ms-hero__content { order: 1; }
    .ms-hero--dt-text_left_image_right .ms-hero__media { order: 2; }
    /* text_right_image_left: imagen izq, contenido der */
    .ms-hero--dt-text_right_image_left .ms-hero__media { order: 1; }
    .ms-hero--dt-text_right_image_left .ms-hero__content { order: 2; }

    /* background_overlay desktop */
    .ms-hero--background_overlay { min-height: var(--ms-hero-minh-desktop, 78svh); }
    .ms-hero--background_overlay .ms-hero__content {
      align-items: var(--ms-hero-vpos-desktop, center);
      justify-content: var(--ms-hero-flex-desktop, flex-start);
    }
    .ms-hero--background_overlay .ms-hero__panel { margin-block: clamp(1rem, 4vw, 3rem); }
  }

  /* ── a11y ── */
  .ms-hero__btn:focus-visible,
  .ms-hero__panel a:focus-visible,
  .ms-hero__promo-link:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
    border-radius: var(--ms-radius-sm, 4px);
  }
  @media (prefers-reduced-motion: reduce) {
    .ms-hero__btn { transition: none; }
    .ms-hero__btn:active { transform: none; }
  }
/* END_SECTION:ms-hero */

/* START_SECTION:ms-logo-list (INDEX:42) */
/* ===========================================================================
     ms-logo-list — CSS scopeado .ms-logo-list__ · variables por #ms-logo-list-{id}
     Colores SIEMPRE del scheme activo (var(--color-*)). Mobile-first.
     =========================================================================== */
  .ms-logo-list {
    --ms-ll-touch-min: var(--ms-touch-min, 44px);
    color: var(--color-foreground);
    background-color: var(--color-background);
  }

  .ms-logo-list__inner {
    width: 100%;
    max-width: var(--ms-ll-max-width, 1280px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 1.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ms-space-sm, 0.9rem);
  }

  /* ── Kicker ("VISTO EN PRENSA") ────────────────────────────────────────────
     Convención ms-: SIN uppercase forzado ni letter-spacing pesado (eyebrow).
     =========================================================================== */
  .ms-logo-list__kicker {
    margin: 0;
    font-size: var(--ms-t-label);
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.3;
    text-align: center;
    opacity: 0.7;
    color: var(--color-foreground);
  }

  /* ── Logo (item compartido por static y marquee) ──────────────────────────── */
  .ms-logo-list__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ms-ll-touch-min, 44px);
  }

  /* El link envolvente: área táctil >=44px + foco visible */
  a.ms-logo-list__logo {
    border-radius: var(--ms-radius-sm, 4px);
  }

  .ms-logo-list__img {
    display: block;
    width: auto;
    height: var(--ms-ll-logo-height-mobile, 28px);
    max-width: 100%;
    object-fit: contain;
    /* Escala de grises atenuada por defecto; color + opacidad plena al hover/focus */
    filter: grayscale(var(--ms-ll-grayscale, 1));
    opacity: var(--ms-ll-logo-opacity, 0.6);
    transition: filter 0.2s ease, opacity 0.2s ease;
  }

  .ms-logo-list__logo:hover .ms-logo-list__img,
  a.ms-logo-list__logo:focus-visible .ms-logo-list__img {
    filter: grayscale(0);
    opacity: 1;
  }

  a.ms-logo-list__logo:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 4px;
  }

  /* ── Modo STATIC: fila que envuelve, centrada ──────────────────────────────── */
  .ms-logo-list__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ms-ll-gap, 32px);
    width: 100%;
  }

  .ms-logo-list__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Nº por fila en mobile: reparte el ancho menos los gaps */
    flex: 0 1 calc((100% - (var(--ms-ll-cols-mobile) - 1) * var(--ms-ll-gap, 32px)) / var(--ms-ll-cols-mobile));
    min-width: 0;
  }

  /* ── Modo MARQUEE: reuso del nativo <marquee-component> ─────────────────────
     Mismas clases estructurales que el nativo pero con nombres ms- scopeados.
     El JS (marquee.js) exige refs wrapper/content/marqueeItems y anima el wrapper.
     =========================================================================== */
  .ms-logo-list__marquee {
    display: block;
    width: 100%;
    overflow: hidden;
    /* Sangrado a ancho completo: la banda se desborda del padding del inner */
    margin-inline: calc(-1 * var(--page-margin, 1.5rem));
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }

  .ms-logo-list__marquee-wrapper {
    display: flex;
    gap: var(--ms-ll-gap, 32px);
    width: fit-content;
    white-space: nowrap;
  }

  .ms-logo-list__marquee-content {
    min-width: max-content;
    display: flex;
    gap: var(--ms-ll-gap, 32px);
  }

  .ms-logo-list__track {
    min-width: max-content;
    display: flex;
    gap: var(--ms-ll-gap, 32px);
    align-items: center;
    justify-content: center;
  }

  .ms-logo-list__track > * {
    align-content: center;
  }

  /* Animación SOLO si el usuario no pidió menos movimiento (igual que el nativo).
     El JS calcula --marquee-speed; --marquee-direction viene del setting. */
  @media (prefers-reduced-motion: no-preference) {
    .ms-logo-list__marquee:not([data-disabled]) .ms-logo-list__marquee-wrapper {
      animation: ms-ll-marquee-motion var(--marquee-speed, 30s) linear infinite var(--marquee-direction);
    }
  }

  /* Keyframe propio (scopeado ms-). El nativo `marquee-motion` vive dentro del
     {% stylesheet %} de sections/marquee.liquid y blocks/_marquee.liquid, así que
     SOLO existe en la página si hay un marquee nativo presente. Esta banda puede ir
     sola → definimos el nuestro para que el auto-scroll funcione siempre, sin chocar
     con el nativo. Mueve el wrapper una copia exacta (content + gap) = bucle continuo.
     Usa --ms-ll-gap (el gap real de esta banda), no --marquee-gap del nativo. */
  @keyframes ms-ll-marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--ms-ll-gap, 32px) / 2)), 0, 0);
    }
  }

  /* ── Aviso (editor) ────────────────────────────────────────────────────────── */
  .ms-logo-list__notice {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    opacity: 0.7;
    color: var(--color-foreground);
  }

  .ms-logo-list--disabled {
    background-color: var(--color-background);
  }

  /* ===========================================================================
     DESKTOP (>=750px)
     =========================================================================== */
  @media screen and (min-width: 750px) {
    .ms-logo-list__img {
      height: var(--ms-ll-logo-height, 36px);
    }

    .ms-logo-list__cell {
      flex: 0 1 calc((100% - (var(--ms-ll-cols-desktop) - 1) * var(--ms-ll-gap, 32px)) / var(--ms-ll-cols-desktop));
    }
  }

  /* ===========================================================================
     a11y — reduced motion: el keyframe ya no corre (gate arriba). Sin transiciones.
     =========================================================================== */
  @media (prefers-reduced-motion: reduce) {
    .ms-logo-list__img {
      transition: none;
    }
  }
/* END_SECTION:ms-logo-list */

/* START_SECTION:ms-media-cards (INDEX:43) */
.ms-mcards {
    background-color: var(--color-background);
    color: var(--color-foreground);
    overflow: hidden;
  }
  .ms-mcards__header {
    padding-inline: var(--page-margin, 1.25rem);
    margin-block-end: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .ms-mcards__eyebrow {
    margin: 0;
    font-size: var(--ms-t-label);
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.18em);
    text-transform: var(--ms-case-label, uppercase);
    opacity: 0.85;
  }
  .ms-mcards__heading {
    margin: 0;
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    text-wrap: balance;
  }
  /* Resalta una palabra del titular con <em>: color/cursiva/subrayado desde el
     editor, grosor y separación globales (Ajustes Myshopiguru). */
  .ms-mcards__heading em {
    font-style: var(--ms-accent-style, italic);
    /* Rev 2 §3.4: con el subrayado encendido la palabra conserva el color del
       titular (--ms-accent-ink: currentcolor) y el acento pinta SOLO la regla.
       Apagado, la palabra sigue yendo en acento. Detalle en ms-accent-vars. */
    color: var(--ms-accent-ink, var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary))));
    font-weight: inherit;
    text-decoration-line: var(--ms-accent-decoration, none);
    text-decoration-color: var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary)));
    text-decoration-thickness: var(--ms-accent-thickness, 2px);
    text-underline-offset: var(--ms-accent-offset, 3px);
    text-decoration-skip-ink: auto;
  }
  .ms-mcards__sub {
    margin: 0;
    opacity: 0.85;
    max-width: 60ch;
  }
  .ms-mcards__sub > :first-child { margin-block-start: 0; }
  .ms-mcards__sub > :last-child { margin-block-end: 0; }

  /* ── Track: carousel scroll-snap (mobile SIEMPRE; desktop según layout) ── */
  .ms-mcards__track {
    list-style: none;
    margin: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(var(--ms-mc-card-min, 78vw), 440px);
    gap: var(--ms-mc-gap, 14px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--page-margin, 1.25rem);
    /* sin esto, el snap inicial ancla la 1ª tarjeta al borde e IGNORA el padding */
    scroll-padding-inline: var(--page-margin, 1.25rem);
    padding-block-end: 6px;
    scrollbar-width: none;
  }
  .ms-mcards__track::-webkit-scrollbar { display: none; }
  .ms-mcards__card { scroll-snap-align: start; min-width: 0; }

  .ms-mcards__wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-decoration: none;
    color: inherit;
    height: 100%;
  }
  .ms-mcards__media {
    position: relative;
    aspect-ratio: var(--ms-mc-aspect, 4 / 5);
    border-radius: var(--ms-mc-radius, 22px);
    overflow: hidden;
  }
  /* Modo "texto debajo" = UNA sola superficie continua (imagen pegada al borde
     de la tarjeta, texto dentro de la misma tarjeta — cero huecos). */
  /* Botón opcional dentro de la tarjeta. Usa las clases nativas del tema
     (.button.button--secondary): hereda radio, tipografía y estados sin inventar
     un sistema de botones paralelo. */
  .ms-mcards--t-below .ms-mcards__text:has(+ .ms-mcards__btn) { padding-bottom: 0.15rem; }
  .ms-mcards__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0.35rem 1.1rem 1.15rem;
    text-decoration: none;
  }
  .ms-mcards--t-below .ms-mcards__wrap {
    background: var(--ms-mc-card-bg, rgb(var(--color-background-rgb, 255 255 255) / 0.62));
    /* Borde editable (mostrar/color/grosor) vía ms-border-vars. Con los defaults
       queda el mismo 1px derivado del esquema que tenía antes. */
    border: var(--ms-border-width, 1px) solid var(--ms-border-color, rgb(var(--color-foreground-rgb, 0 0 0) / 0.08));
    border-radius: var(--ms-mc-radius, 22px);
    box-shadow: 0 2px 20px rgb(var(--color-foreground-rgb, 0 0 0) / 0.05);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .ms-mcards--t-below .ms-mcards__media { border-radius: 0; }
  .ms-mcards--t-below .ms-mcards__title { padding: 0.95rem 1.1rem 0; }
  .ms-mcards--t-below .ms-mcards__text { padding: 0.35rem 1.1rem 1.15rem; }
  .ms-mcards--t-below .ms-mcards__title:last-child { padding-bottom: 1.15rem; }
  @media (hover: hover) {
    .ms-mcards--t-below .ms-mcards__wrap:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 26px rgb(var(--color-foreground-rgb, 0 0 0) / 0.14);
    }
  }
  .ms-mcards__img,
  .ms-mcards__ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ms-mcards__ph {
    background:
      radial-gradient(60% 50% at 70% 20%, rgb(var(--color-foreground-rgb, 0 0 0) / 0.08), transparent 70%),
      rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.12); background-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.04);
  }
  .ms-mcards__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg, rgb(var(--color-foreground-heading-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.55) 0%, rgb(var(--color-foreground-heading-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.12) 38%, transparent 60%);
  }

  /* chip glass arriba-izquierda (Oura) */
  .ms-mcards__chip {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.42em 0.95em;
    /* El chip es una ETIQUETA, no un botón: sigue el radio del sistema.
       Estaba en 999px fijo, así que salía en pastilla aunque el tema
       estuviera en radio 0 — el único elemento redondo fuera del botón. */
    border-radius: var(--ms-radius-pill, 999px);
    /* Derivado del ESQUEMA, no quemado: `foreground-heading` es el color de
       titular del esquema activo (en Grounded = el olivo), asi que el chip
       sale igual que siempre pero sigue lo que el editor elija. */
    background: var(--ms-mc-chip-bg, rgb(var(--color-foreground-heading-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.55));
    color: var(--ms-mc-chip-text, #ffffff);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    font-size: var(--ms-t-label);
    font-weight: var(--ms-w-medium, 500);
    line-height: 1;
  }
  .ms-mcards__chip-icon { line-height: 1; }

  /* Flecha junto al título. Va INLINE (no absoluta en la esquina) para que
     fluya tras la última palabra aunque el título ocupe dos líneas. Se
     dimensiona en em: crece con el título y no hay que tocarla por breakpoint. */
  .ms-mcards__arrow {
    display: inline-block;
    vertical-align: -0.08em;
    inline-size: 0.82em;
    block-size: 0.82em;
    margin-inline-start: 0.38em;
    transition: transform 0.18s ease;
  }
  @media (hover: hover) {
    .ms-mcards__wrap:hover .ms-mcards__arrow { transform: translateX(3px); }
    .ms-mcards__wrap:hover .ms-mcards__img { transform: scale(1.03); }
  }
  .ms-mcards__img { transition: transform 0.35s ease; }

  /* título */
  .ms-mcards__title {
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    font-size: var(--ms-t-title);
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.25;
  }
  /* Pila de texto sobre la imagen: el ancla absoluta la lleva el contenedor,
     no el título, para que la descripción no se le encime cuando el título
     ocupa dos líneas. */
  .ms-mcards__over {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ms-mcards__title--over {
    position: static;
    color: #ffffff;
    font-size: var(--ms-t-title);
  }
  .ms-mcards__text--over {
    color: #ffffff;
    opacity: 0.92;
    text-wrap: pretty;
  }
  .ms-mcards__text {
    margin: 0;
    font-size: var(--ms-t-body);
    line-height: 1.5;
    opacity: 0.85;
  }

  /* ── Desktop ── */
  @media screen and (min-width: 750px) {
    .ms-mcards--grid .ms-mcards__track {
      grid-auto-flow: row;
      grid-template-columns: repeat(var(--ms-mc-cols, 3), minmax(0, 1fr));
      grid-auto-columns: unset;
      overflow-x: visible;
    }
    .ms-mcards--carousel .ms-mcards__track {
      grid-auto-columns: calc((100% - (var(--ms-mc-gap, 14px) * (var(--ms-mc-cols, 3) - 0.6)) - (var(--page-margin, 4rem))) / (var(--ms-mc-cols, 3) + 0.15));
    }
    /* Carrusel que YA cabe entero (tarjetas <= columnas): sin siguiente tarjeta
       que asomar, el ancho de columna de arriba deja un sobrante que se apila
       todo a la derecha y descuadra la sección. Aquí se reparte parejo con
       columnas 1fr — el móvil sigue siendo carrusel, esto es solo desktop. */
    .ms-mcards--carousel.ms-mcards--fits .ms-mcards__track {
      grid-auto-flow: row;
      grid-template-columns: repeat(var(--ms-mc-cols, 3), minmax(0, 1fr));
      grid-auto-columns: unset;
      overflow-x: visible;
    }
    .ms-mcards__title--over { font-size: 1.45rem; }

    /* Ancho de contenido: la banda de fondo sigue full-bleed (la pinta el
       esquema) y lo que se centra es el contenido. En móvil no aplica: ahí
       manda el margen de página.
       ⚠️ VA AL FINAL A PROPÓSITO. El track es un <ul> con `margin: 0` en su
       regla base; si esto se declara ANTES, ese `margin: 0` le gana por orden
       (misma especificidad) y el track se queda pegado a la izquierda mientras
       el encabezado sí se centra — que es exactamente el desalineado que salió
       en la primera pasada. */
    /* El tope se suma al padding lateral, NO lo absorbe. Con box-sizing:
       border-box un `max-width: 1280` deja el contenido en 1200 y arranca 40px
       adentro, mientras un bloque inset del mismo tope arranca en el tope mismo
       — 40px de diferencia entre secciones vecinas, que es el desalineado que
       se veía. Sumándolo, `max_width` significa literalmente ANCHO DEL
       CONTENIDO, igual en toda la familia ms-, y el padding se conserva para
       proteger los bordes en pantallas intermedias. */
    .ms-mcards__header,
    .ms-mcards__track {
      max-width: calc(var(--ms-mc-max, 1280px) + (var(--page-margin, 40px) * 2));
      margin-inline: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-mcards__img, .ms-mcards__arrow { transition: none; }
  }
/* END_SECTION:ms-media-cards */

/* START_SECTION:ms-mobile-menu (INDEX:44) */
/* ===========================================================================
     ms-mobile-menu — CSS scopeado .ms-mobile-menu__
     Colores SIEMPRE del scheme activo (var(--color-*)); overrides via --ms-mm-*.
     El panel se inyecta en el .menu-drawer nativo (assets/ms-mobile-menu.js).
     =========================================================================== */
  .ms-mobile-menu {
    display: block;
  }

  /* Host vacío tras inyectar el panel en el drawer: no debe ocupar espacio.
     También se colapsa el wrapper de la sección para no dejar hueco en la página. */
  .ms-mobile-menu.is-injected {
    display: none;
  }
  .ms-mobile-menu-wrapper:has(.ms-mobile-menu.is-injected) {
    display: none;
  }

  /* Inline (sin JS / drawer ausente): solo en mobile. En el editor se fuerza
     visible (clase --editor) para poder editar los bloques aunque el lienzo
     esté en ancho desktop. */
  @media screen and (min-width: 750px) {
    .ms-mobile-menu:not(.ms-mobile-menu--editor) {
      display: none;
    }
  }

  .ms-mobile-menu--editor {
    max-width: 420px;
    margin-inline: auto;
    border: var(--ms-border-hairline, 1px solid rgba(0, 0, 0, 0.08));
    border-radius: var(--ms-radius-md, 10px);
    overflow: hidden;
  }

  .ms-mobile-menu__panel {
    --ms-mm-touch: var(--ms-touch-min, 44px);
    display: flex;
    flex-direction: column;
    gap: var(--ms-mm-vgap, 8px);
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--ms-mm-pad-inline, 16px);
    color: var(--color-foreground);
    background-color: var(--color-background);
  }

  /* ── Cabecera: logo + cerrar ── */
  .ms-mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-space-sm, 1rem);
    padding-block: 0;
  }

  .ms-mobile-menu__logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  /* Selector por DESCENDENCIA (`.logo img`, 0,1,1) para ganarle al reset global
     `img { width:100%; height:auto }` de base.css (0,0,1) AUNQUE image_tag no conserve
     la clase en el <img>. `max-height` fija un tope duro: el alto del logo SIEMPRE se
     respeta (antes el logo salía gigante y el ajuste de alto no hacía nada). */
  .ms-mobile-menu__logo img,
  .ms-mobile-menu__logo-img {
    display: block;
    width: auto;
    height: var(--ms-mm-logo-height, 32px);
    max-height: var(--ms-mm-logo-height, 32px);
    max-width: 60vw;
    object-fit: contain;
  }

  .ms-mobile-menu__logo-text {
    font-family: var(--font-heading--family, inherit);
    font-weight: var(--font-heading--weight, 700);
    font-size: var(--ms-t-title);
    color: var(--ms-mm-heading, var(--color-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ms-mobile-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--ms-mm-touch, 44px);
    height: var(--ms-mm-touch, 44px);
    margin-inline-end: calc(-1 * var(--ms-space-2xs, 0.5rem));
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    border-radius: var(--ms-radius-sm, 6px);
  }

  .ms-mobile-menu__close-icon svg {
    width: var(--icon-size-sm, 1.25rem);
    height: var(--icon-size-sm, 1.25rem);
  }

  /* ── Buscador (trigger del modal predictivo nativo) ── */
  .ms-mobile-menu__search {
    display: flex;
    align-items: center;
    gap: var(--ms-space-2xs, 0.5rem);
    width: 100%;
    min-height: var(--ms-mm-touch, 44px);
    padding-inline: var(--ms-space-sm, 1rem);
    border: 1px solid var(--ms-mm-search-border, var(--color-border, currentColor));
    border-radius: var(--ms-mm-search-radius, 8px);
    background: var(--ms-mm-search-bg, transparent);
    color: var(--ms-mm-search-text, var(--color-foreground));
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .ms-mobile-menu__search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--ms-mm-search-icon, var(--ms-mm-search-text, var(--color-foreground)));
  }
  .ms-mobile-menu__search-icon svg {
    width: var(--icon-size-sm, 1.125rem);
    height: var(--icon-size-sm, 1.125rem);
  }

  .ms-mobile-menu__search-text {
    opacity: 0.75;
  }

  /* ── Lista de ítems ── */
  .ms-mobile-menu__nav {
    margin: 0;
  }

  .ms-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ms-mm-item-gap, 4px);
  }

  .ms-mobile-menu__item + .ms-mobile-menu__item {
    border-block-start: 1px solid var(--ms-mm-separator, var(--color-border, rgba(0, 0, 0, 0.1)));
  }

  /* ── Fila de categoría: media | texto | flecha ── */
  .ms-mobile-menu__row,
  .ms-mobile-menu__sec-row {
    display: flex;
    align-items: center;
    gap: var(--ms-space-sm, 1rem);
    min-height: var(--ms-mm-touch, 44px);
    padding-block: var(--ms-space-xs, 0.75rem);
    color: inherit;
    text-decoration: none;
  }

  .ms-mobile-menu__media {
    flex: 0 0 auto;
    width: var(--ms-mm-img-size, 56px);
    height: var(--ms-mm-img-size, 56px);
  }

  .ms-mobile-menu__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ms-mm-img-radius, 8px);
    /* Sin fondo por defecto. Antes era un gris al 6% pensado como placeholder
       para fotos de producto, pero cualquier PNG con transparencia —un logo,
       un ícono— se veía con un recuadro gris detrás sin que nadie lo hubiera
       pedido, y había que descubrir el ajuste para quitarlo. Quien quiera
       fondo lo pone en «Fondo de las imágenes». */
    background: var(--ms-mm-img-bg, transparent);
  }

  .ms-mobile-menu__img--placeholder {
    border: 1px dashed var(--color-border, rgba(0, 0, 0, 0.18));
  }

  .ms-mobile-menu__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .ms-mobile-menu__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ms-space-2xs, 0.5rem);
  }

  .ms-mobile-menu__title {
    font-family: var(--font-heading--family, inherit);
    font-weight: var(--font-heading--weight, 600);
    font-size: var(--ms-mm-title-size, 15px);
    line-height: 1.25;
    color: var(--ms-mm-heading, var(--color-foreground));
  }

  .ms-mobile-menu__desc {
    font-size: var(--ms-mm-desc-size, 13px);
    line-height: 1.35;
    color: var(--ms-mm-text, var(--color-foreground));
    opacity: 0.7;
  }

  /* ── Badge ── */
  .ms-mobile-menu__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.5em;
    border-radius: var(--style-border-radius-badge, var(--ms-radius-sm, 6px));
    background: var(--ms-mm-badge-bg, var(--color-primary));
    color: var(--ms-mm-badge-text, var(--color-primary-button-text, var(--color-background)));
    font-size: var(--ms-mm-badge-size, 11px);
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.3;
    white-space: nowrap;
  }

  /* ── Flecha ── */
  .ms-mobile-menu__arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--ms-mm-arrow, var(--color-foreground));
    opacity: 0.55;
    transition: transform var(--ms-dur, 0.2s) var(--ms-ease, ease), opacity var(--ms-dur, 0.2s) var(--ms-ease, ease);
  }
  .ms-mobile-menu__arrow svg {
    width: var(--icon-size-xs, 1rem);
    height: var(--icon-size-xs, 1rem);
    rotate: -90deg; /* caret hacia la derecha (›) */
  }
  .ms-mobile-menu__row:hover .ms-mobile-menu__arrow,
  .ms-mobile-menu__row:focus-visible .ms-mobile-menu__arrow,
  .ms-mobile-menu__sec-row:hover .ms-mobile-menu__arrow {
    transform: translateX(3px);
    opacity: 1;
  }

  /* ── Social proof ── */
  /* Doble clase (0,2,0) para GANARLE al separador `.item + .item` (también 0,2,0)
     por orden de fuente. Con una sola clase (0,1,0) NO ganaba y la línea separadora
     quedaba pegada arriba de la tira de social proof. */
  .ms-mobile-menu__item.ms-mobile-menu__item--social,
  .ms-mobile-menu__item.ms-mobile-menu__item--secondary {
    border-block-start: 0;
  }

  /* Separa la tira de social proof de los ítems vecinos (arriba y abajo). */
  .ms-mobile-menu__item--social {
    margin-block: var(--ms-space-md, 1.25rem);
  }

  .ms-mobile-menu__social {
    display: flex;
    align-items: center;
    gap: var(--ms-space-sm, 1rem);
    padding: var(--ms-space-sm, 1rem);
    border-radius: var(--ms-mm-social-radius, 12px);
    background: var(--ms-mm-social-bg, rgb(var(--color-foreground-rgb, 0 0 0) / 0.04));
    color: var(--ms-mm-social-text, var(--color-foreground));
  }
  .ms-mobile-menu__social--solid {
    border: 1px solid var(--ms-mm-social-border, var(--color-border, rgba(0, 0, 0, 0.12)));
  }
  .ms-mobile-menu__social--dashed {
    border: 1px dashed var(--ms-mm-social-border, var(--color-border, rgba(0, 0, 0, 0.2)));
  }
  .ms-mobile-menu__social--none {
    border: 0;
  }

  .ms-mobile-menu__avatars {
    display: inline-flex;
    flex: 0 0 auto;
  }
  .ms-mobile-menu__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--ms-radius-round, 50%);
    object-fit: cover;
    border: 2px solid var(--color-background);
  }
  .ms-mobile-menu__avatar + .ms-mobile-menu__avatar {
    margin-inline-start: -0.6rem;
  }

  .ms-mobile-menu__social-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .ms-mobile-menu__social-rating {
    font-weight: var(--ms-w-medium, 500);
    font-size: var(--ms-t-meta);
  }
  .ms-mobile-menu__social-sub {
    font-size: var(--ms-t-meta);
    opacity: 0.7;
  }

  /* ── Enlaces secundarios ── */
  .ms-mobile-menu__sec-row {
    gap: var(--ms-space-2xs, 0.5rem);
    font-family: var(--ms-mm-sec-font, inherit);
    font-weight: var(--ms-mm-sec-weight, 700);
  }
  .ms-mobile-menu__sec-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ms-mm-heading, var(--color-foreground));
  }
  .ms-mobile-menu__arrow--sec {
    margin-inline-start: auto;
  }

  /* ── Subcategorías (acordeón nativo <details>) ── */
  .ms-mobile-menu__acc {
    width: 100%;
  }
  .ms-mobile-menu__summary {
    list-style: none;
    cursor: pointer;
  }
  .ms-mobile-menu__summary::-webkit-details-marker {
    display: none;
  }
  .ms-mobile-menu__arrow--toggle svg {
    transition: rotate var(--ms-dur, 0.2s) var(--ms-ease, ease);
  }
  details[open] > .ms-mobile-menu__summary .ms-mobile-menu__arrow--toggle svg,
  details[open] > .ms-mobile-menu__sublink--parent .ms-mobile-menu__arrow--toggle svg {
    rotate: 0deg;
  }
  .ms-mobile-menu__sublist {
    list-style: none;
    margin: 0;
    padding-block: 0 var(--ms-space-2xs, 0.5rem);
    /* La sangría existe para alinear los hijos con el TEXTO del padre cuando el
       padre trae miniatura. Si el padre va sin foto no hay con qué alinear, y la
       sangría queda como un escalón suelto (Leo, QA del 3-sep). */
    padding-inline: calc(var(--ms-mm-img-size, 56px) + var(--ms-space-sm, 1rem)) 0;
  }
  .ms-mobile-menu__acc:has(.ms-mobile-menu__summary--sin-foto) > .ms-mobile-menu__sublist {
    padding-inline-start: 0;
  }
  .ms-mobile-menu__sublist--nested {
    padding-inline-start: var(--ms-space-sm, 1rem);
  }
  .ms-mobile-menu__subitem {
    width: 100%;
  }
  .ms-mobile-menu__sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-space-2xs, 0.5rem);
    min-height: 40px;
    padding-block: var(--ms-space-3xs, 0.35rem);
    color: var(--ms-mm-text, var(--color-foreground));
    text-decoration: none;
    font-size: var(--ms-mm-desc-size, 13px);
    line-height: 1.3;
  }
  /* BENE (Rev 5.38) · la subcategoría con miniatura, igual que el mega menú de
     escritorio. La foto es de 48 px —la mitad de la de categoría— para que se lea
     como un escalón abajo y no como otra fila de primer nivel. */
  .ms-mobile-menu__sublink--media {
    justify-content: flex-start;
    gap: var(--ms-space-xs, 0.75rem);
    padding-block: var(--ms-space-2xs, 0.5rem);
    min-height: 56px;
  }
  .ms-mobile-menu__submedia {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--ms-mm-img-radius, 12px);
    background: var(--ms-mm-img-bg, transparent);
  }
  .ms-mobile-menu__subimg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .ms-mobile-menu__subtext {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ms-mobile-menu__sublink-desc {
    font-size: max(11px, calc(var(--ms-mm-desc-size, 13px) * 0.86));
    line-height: 1.3;
    opacity: 0.66;
  }

  /* La categoría que despliega va sin foto: el renglón se alinea al texto y no
     deja el hueco de la miniatura ausente. */
  .ms-mobile-menu__summary--sin-foto {
    min-height: 48px;
  }

  /* El rótulo de grupo comparte voz con el título de una categoría, pero sin
     su peso: es una etiqueta, no un destino. */
  .ms-mobile-menu__grupo {
    display: block;
    padding-block: var(--ms-space-xs, 0.75rem) var(--ms-space-3xs, 0.35rem);
    font-family: var(--font-heading--family, inherit);
    font-weight: var(--ms-w-medium, 500);
    font-size: max(12px, calc(var(--ms-mm-title-size, 18px) * 0.72));
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ms-mm-text, var(--color-foreground));
    opacity: 0.55;
  }
  .ms-mobile-menu__item--grupo {
    list-style: none;
  }

  /* La categoría SIN foto se lee igual que un rótulo de grupo: las dos son
     etiquetas que agrupan, no destinos. Así el cajón habla a una sola velocidad
     —«POR TU META» y «POR LÍNEA» pesan lo mismo— y la única diferencia es que
     una se puede cerrar. */
  .ms-mobile-menu__summary--sin-foto {
    padding-block: var(--ms-space-xs, 0.75rem) var(--ms-space-3xs, 0.35rem);
  }
  .ms-mobile-menu__summary--sin-foto .ms-mobile-menu__title {
    font-weight: var(--ms-w-medium, 500);
    font-size: max(12px, calc(var(--ms-mm-title-size, 18px) * 0.72));
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.55;
  }
  .ms-mobile-menu__summary--sin-foto .ms-mobile-menu__arrow {
    opacity: 0.45;
  }

  .ms-mobile-menu__sublink--parent {
    list-style: none;
    cursor: pointer;
    font-weight: var(--ms-w-medium, 500);
  }
  .ms-mobile-menu__sublink--parent::-webkit-details-marker {
    display: none;
  }
  .ms-mobile-menu__sublink-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ms-mobile-menu__sublink--child {
    opacity: 0.8;
  }
  .ms-mobile-menu__sublink[aria-current='page'] {
    font-weight: var(--ms-w-medium, 500);
    opacity: 1;
  }
  .ms-mobile-menu__sublink:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
    border-radius: var(--ms-radius-sm, 4px);
  }

  /* ── Empty (editor) ── */
  .ms-mobile-menu__empty {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    opacity: 0.7;
  }

  /* ===========================================================================
     INYECTADO en el drawer nativo: el panel ocupa el alto del drawer y oculta
     las piezas nativas (linklist, cerrar nativo, utilidades, destacados).
     =========================================================================== */
  /* El panel controla su propio padding (spacing-style); el drawer nativo ya es padding:0. */
  .menu-drawer.ms-has-custom-menu > :not(.ms-mobile-menu__panel) {
    display: none !important; /* ocultar SOLO el contenido nativo cuando hay menú custom */
  }
  .menu-drawer.ms-has-custom-menu > .ms-mobile-menu__panel {
    display: flex;
    flex: 1 1 auto;
    overflow-y: auto;
  }

  /* ===========================================================================
     a11y — foco visible + reduced motion
     =========================================================================== */
  .ms-mobile-menu__row:focus-visible,
  .ms-mobile-menu__sec-row:focus-visible,
  .ms-mobile-menu__search:focus-visible,
  .ms-mobile-menu__close:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
    border-radius: var(--ms-radius-sm, 4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-mobile-menu__arrow {
      transition: none;
    }
    .ms-mobile-menu__row:hover .ms-mobile-menu__arrow,
    .ms-mobile-menu__sec-row:hover .ms-mobile-menu__arrow {
      transform: none;
    }
  }

  /* ===========================================================================
     VARIANTE EDITORIAL — navegación grande tipo revista, numerada, sin imágenes.
     Aditiva: solo aplica bajo .ms-mobile-menu__panel--editorial (default = clásico).
     Brand-neutral: números via --color-primary del esquema (o --ms-mm-ed-accent).
     =========================================================================== */
  .ms-mobile-menu__panel--editorial {
    gap: var(--ms-space-sm, 1rem);
  }
  .ms-mobile-menu__panel--editorial .ms-mobile-menu__media,
  .ms-mobile-menu__panel--editorial .ms-mobile-menu__desc {
    display: none;
  }
  /* Badge SÍ visible en editorial, chiquito y alineado con el título grande */
  .ms-mobile-menu__panel--editorial .ms-mobile-menu__title-row {
    align-items: center;
    gap: var(--ms-space-2xs, 0.5rem);
  }
  .ms-mobile-menu__panel--editorial .ms-mobile-menu__badge {
    font-size: var(--ms-t-micro);
    padding: 0.22em 0.6em;
    letter-spacing: var(--ms-tracking-label, 0.08em);
    text-transform: var(--ms-case-label, uppercase);
  }
  .ms-mobile-menu__panel--editorial .ms-mobile-menu__item + .ms-mobile-menu__item {
    border-block-start: 1px solid var(--ms-mm-separator, var(--color-border, rgba(0, 0, 0, 0.12)));
  }
  .ms-mobile-menu__panel--editorial .ms-mobile-menu__row,
  .ms-mobile-menu__panel--editorial .ms-mobile-menu__summary {
    align-items: center;
    gap: var(--ms-space-sm, 1rem);
    padding-block: var(--ms-space-md, 1.1rem);
  }
  .ms-mobile-menu__panel--editorial .ms-mobile-menu__title {
    font-family: var(--font-heading--family, inherit);
    font-weight: var(--font-heading--weight, 700);
    font-size: var(--ms-mm-ed-title-size, clamp(26px, 8vw, 34px));
    line-height: 1;
    letter-spacing: var(--ms-tracking-label, 0.01em);
  }

  /* Numeración 01, 02… (solo ítems de categoría, no social/secundario) */
  .ms-mobile-menu__panel--numbered .ms-mobile-menu__list {
    counter-reset: ms-mm-ed;
  }
  .ms-mobile-menu__panel--numbered .ms-mobile-menu__item:not(.ms-mobile-menu__item--social):not(.ms-mobile-menu__item--secondary) {
    counter-increment: ms-mm-ed;
  }
  .ms-mobile-menu__panel--numbered .ms-mobile-menu__item:not(.ms-mobile-menu__item--social):not(.ms-mobile-menu__item--secondary) .ms-mobile-menu__row::before,
  .ms-mobile-menu__panel--numbered .ms-mobile-menu__item:not(.ms-mobile-menu__item--social):not(.ms-mobile-menu__item--secondary) .ms-mobile-menu__summary::before {
    content: counter(ms-mm-ed, decimal-leading-zero);
    flex: 0 0 auto;
    min-width: 1.9em;
    font-family: var(--font-body--family, inherit);
    font-size: var(--ms-t-label);
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.12em);
    color: var(--ms-mm-ed-accent, var(--color-primary, var(--color-foreground)));
  }

  /* Enlaces secundarios como fila fina en mayúsculas */
  .ms-mobile-menu__panel--editorial .ms-mobile-menu__sec-row {
    text-transform: var(--ms-case-label, uppercase);
    letter-spacing: var(--ms-tracking-label, 0.14em);
    font-size: var(--ms-t-label);
  }

  /* Pie editorial: botón ink + nota */
  .ms-mobile-menu__ed-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ms-space-2xs, 0.5rem);
    min-height: var(--ms-mm-touch, 44px);
    margin-block-start: var(--ms-space-md, 1.25rem);
    padding-inline: var(--ms-space-sm, 1rem);
    border-radius: var(--ms-radius-md, 8px);
    background: var(--color-foreground);
    color: var(--color-background);
    text-decoration: none;
    font-size: var(--ms-t-label);
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.12em);
    text-transform: var(--button-text-case, uppercase);
  }
  .ms-mobile-menu__ed-cta:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
  }
  .ms-mobile-menu__ed-note {
    margin: var(--ms-space-sm, 1rem) 0 0;
    font-size: var(--ms-t-meta);
    letter-spacing: var(--ms-tracking-label, 0.2em);
    text-transform: var(--ms-case-label, uppercase);
    opacity: 0.6;
    text-align: center;
  }
/* END_SECTION:ms-mobile-menu */

/* START_SECTION:ms-pdp-nav (INDEX:45) */
/* Wrapper a display:contents para que el sticky del <nav> hijo tenga dónde pegarse. */
  .ms-pdpnav-section { display: contents; }

  .ms-pdpnav {
    background: var(--color-background);
    color: var(--color-foreground);
  }

  .ms-pdpnav--empty { padding: 1rem; }
  .ms-pdpnav__notice { margin: 0; font-size: 0.9rem; opacity: 0.8; }

  /* Sticky justo debajo del header fijo. El -2px traslapa 1px y tapa la línea
     sub-pixel que aparece cuando --header-height se redondea hacia arriba. */
  .ms-pdpnav--sticky {
    position: sticky;
    top: calc(var(--header-height, 56px) - 2px + var(--ms-pdpnav-offset, 0px));
    z-index: var(--layer-raised, 3);
  }

  .ms-pdpnav--divider {
    border-block-end: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.1);
  }

  .ms-pdpnav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2.5vw, 1.5rem);
    margin: 0;
    padding-inline: var(--padding-inline-start, 1rem);
    padding-block: var(--ms-pdpnav-pad-y, 10px);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* El gesto VERTICAL va a la página; solo el horizontal scrollea la barra. */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
  }
  .ms-pdpnav__list::-webkit-scrollbar { display: none; }

  .ms-pdpnav--align-center .ms-pdpnav__list { justify-content: center; }
  .ms-pdpnav--align-start .ms-pdpnav__list { justify-content: flex-start; }
  @media (max-width: 749px) {
    .ms-pdpnav--align-center .ms-pdpnav__list { justify-content: flex-start; }
  }

  .ms-pdpnav__item {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.3rem;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    color: var(--color-foreground);
    font-family: var(--ms-pdpnav-ff, var(--font-body--family, inherit));
    font-weight: var(--ms-pdpnav-fw, inherit);
    font-size: var(--ms-pdpnav-fs, var(--font-body--size, 0.95rem));
    text-transform: var(--ms-pdpnav-tt, none);
    opacity: 0.55;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }
  .ms-pdpnav__item:hover,
  .ms-pdpnav__item:focus-visible { opacity: 1; }
  .ms-pdpnav__item.is-active { opacity: 1; font-weight: var(--ms-w-medium, 500); }

  /* Subrayado */
  .ms-pdpnav--underline .ms-pdpnav__item.is-active::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--color-foreground);
  }

  /* Píldora — hereda la redondez del tema */
  .ms-pdpnav--pill .ms-pdpnav__item {
    padding-inline: 0.9rem;
    border-radius: var(--pills-border-radius, 100px);
  }
  .ms-pdpnav--pill .ms-pdpnav__item.is-active {
    background: var(--color-primary-button-background, var(--color-foreground));
    color: var(--color-primary-button-text, var(--color-background));
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-pdpnav__list { scroll-behavior: auto; }
    .ms-pdpnav__item { transition: none; }
  }

  @media screen and (min-width: 750px) {
    .ms-pdpnav--hide-desktop { display: none; }
  }
/* END_SECTION:ms-pdp-nav */

/* START_SECTION:ms-photo-marquee (INDEX:46) */
/* ===========================================================================
     ms-photo-marquee — CSS scopeado .ms-photo-marquee__ · vars por instancia.
     Colores del color scheme activo (var(--color-*)) con overrides opcionales
     (--ms-pm-bg / --ms-pm-accent / --ms-pm-card-bg / --ms-pm-slide-bg).
     =========================================================================== */
  .ms-photo-marquee {
    background: var(--ms-pm-bg, var(--color-background));
    color: var(--color-foreground);
    overflow: hidden;
  }

  .ms-photo-marquee__wrap {
    max-width: var(--ms-pm-max-w, 1440px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 1.5rem);
    box-sizing: border-box;
  }

  /* ── Header ── */
  .ms-photo-marquee__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
    text-align: var(--ms-pm-align-m, left);
  }
  @media (min-width: 990px) {
    .ms-photo-marquee__header {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
      gap: 48px;
      margin-bottom: 36px;
      text-align: var(--ms-pm-align-d, left);
    }
  }
  .ms-photo-marquee__header-left { flex: 1 1 auto; min-width: 0; }

  .ms-photo-marquee__eyebrow {
    font-size: var(--ms-t-label);
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.22em);
    text-transform: var(--ms-case-label, uppercase);
    color: var(--ms-pm-accent, var(--color-primary));
    margin: 0;
  }
  .ms-photo-marquee__eyebrow-dot {
    display: inline-block; width: 5px; height: 5px;
    border-radius: var(--ms-radius-round, 50%);
    background: var(--ms-pm-accent, var(--color-primary));
    margin: 0 8px 2px; vertical-align: middle;
  }
  .ms-photo-marquee__title {
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    font-size: var(--font-h2--size, clamp(1.9rem, 1.2rem + 3vw, 3.5rem));
    line-height: var(--font-h2--line-height, 1.04);
    letter-spacing: var(--font-h2--letter-spacing, -0.012em);
    margin: 10px 0 12px;
    color: var(--color-foreground-heading, var(--color-foreground));
    text-wrap: balance;
  }
  .ms-photo-marquee__title em {
    font-style: var(--ms-accent-style, italic);
    /* Rev 2 §3.4: con el subrayado encendido la palabra conserva el color del
       titular (--ms-accent-ink: currentcolor) y el acento pinta SOLO la regla.
       Apagado, la palabra sigue yendo en acento. Detalle en ms-accent-vars. */
    color: var(--ms-accent-ink, var(--ms-pm-accent, var(--ms-accent-brand, var(--color-primary))));
    font-weight: inherit;
    text-decoration-line: var(--ms-accent-decoration, none);
    text-decoration-color: var(--ms-pm-accent, var(--ms-accent-brand, var(--color-primary)));
    text-decoration-thickness: var(--ms-accent-thickness, 2px);
    text-underline-offset: var(--ms-accent-offset, 3px);
    text-decoration-skip-ink: auto;
  }
  .ms-photo-marquee__lede {
    color: var(--color-foreground);
    opacity: 0.78;
    line-height: 1.55;
    font-size: var(--font-body--size, 1rem);
    max-width: 540px;
    margin: 0;
  }

  .ms-photo-marquee__rating { flex: 0 0 auto; }
  @media (min-width: 990px) { .ms-photo-marquee__rating { text-align: right; } }
  .ms-photo-marquee__rating-score {
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    font-size: var(--ms-t-heading);
    line-height: 1;
    color: var(--ms-pm-accent, var(--color-primary));
  }
  .ms-photo-marquee__rating-out {
    font-size: 0.4em;
    color: var(--color-foreground);
    opacity: 0.7;
    margin-left: 4px;
    font-weight: var(--ms-w-body, 400);
  }
  .ms-photo-marquee__rating-stars {
    color: var(--ms-pm-accent, var(--color-primary));
    display: inline-flex;
    gap: 2px;
    margin: 6px 0;
  }
  .ms-photo-marquee__rating-meta {
    font-size: var(--ms-t-label);
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.2em);
    text-transform: var(--ms-case-label, uppercase);
    color: var(--color-foreground);
    opacity: 0.7;
  }

  /* === CARRUSEL MARQUEE === */
  /* Constreñido al ancho de página (mismo gutter que el header/las demás
     secciones): max-width + margin-inline auto + padding-inline --page-margin. */
  .ms-photo-marquee__viewport {
    display: block;
    overflow: hidden;
    width: 100%;
    max-width: var(--ms-pm-max-w, 1440px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 1.5rem);
    box-sizing: border-box;
    position: relative;
    cursor: grab;
  }
  .ms-photo-marquee__viewport:active { cursor: grabbing; }

  /* Ancho completo (opt-in): el carrusel rompe el gutter y va de borde a borde del
     contenedor. OFF por defecto = ancho de página, como las demás secciones. */
  .ms-photo-marquee--full-bleed .ms-photo-marquee__viewport {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Edge fade lateral (opt-in, desktop). OFF por defecto: el carrusel se ve
     "lleno" hasta el gutter. Se activa con el toggle "Desvanecido en los bordes". */
  @media (min-width: 750px) {
    .ms-photo-marquee--fade .ms-photo-marquee__viewport {
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    }
  }

  .ms-photo-marquee__track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, var(--ms-pm-card-h-m, 200px));
    grid-auto-columns: var(--ms-pm-card-w-m, 160px);
    gap: var(--ms-pm-gap, 8px);
    width: max-content;
    animation-duration: var(--ms-pm-speed-m, 40s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    will-change: transform;
  }
  .ms-photo-marquee--dir-left .ms-photo-marquee__track { animation-name: ms-photo-marquee-left; }
  .ms-photo-marquee--dir-right .ms-photo-marquee__track { animation-name: ms-photo-marquee-right; }
  @media (min-width: 750px) {
    .ms-photo-marquee__track {
      grid-template-rows: var(--ms-pm-card-h-d, 380px);
      grid-auto-columns: var(--ms-pm-card-w-d, 300px);
      animation-duration: var(--ms-pm-speed-d, 60s);
    }
  }

  /* Pause */
  .ms-photo-marquee__viewport:hover .ms-photo-marquee__track,
  .ms-photo-marquee__viewport[data-paused="true"] .ms-photo-marquee__track {
    animation-play-state: paused;
  }

  @keyframes ms-photo-marquee-left {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  @keyframes ms-photo-marquee-right {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-photo-marquee__track {
      animation: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
    }
    .ms-photo-marquee__viewport { overflow-x: auto; }
  }

  /* === MODO MANUAL (auto-scroll apagado) ===
     El visitante desliza con el dedo / trackpad. Sin animación: el viewport hace
     scroll horizontal nativo con snap. Se ocultan los clones duplicados (solo
     existen para el loop infinito del autoplay) para no repetir fotos. */
  .ms-photo-marquee--manual .ms-photo-marquee__viewport {
    overflow-x: auto;
    cursor: default;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--page-margin, 1.5rem);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ms-photo-marquee--manual .ms-photo-marquee__viewport::-webkit-scrollbar { display: none; }
  .ms-photo-marquee--manual .ms-photo-marquee__viewport:active { cursor: default; }
  .ms-photo-marquee--manual .ms-photo-marquee__track { animation: none; }
  .ms-photo-marquee--manual .ms-photo-marquee__slide { scroll-snap-align: start; }
  .ms-photo-marquee--manual .ms-photo-marquee__slide[aria-hidden="true"] { display: none; }

  /* === SLIDE === */
  .ms-photo-marquee__slide {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: zoom-in;
    position: relative;
    width: var(--ms-pm-card-w-m, 160px);
    height: var(--ms-pm-card-h-m, 200px);
    background: var(--ms-pm-card-bg, var(--color-background));
    overflow: hidden;
    border-radius: var(--ms-pm-radius, 8px);
    transition: transform 0.2s ease;
  }
  .ms-photo-marquee__slide:focus-visible {
    outline: 2px solid var(--ms-pm-accent, var(--color-primary));
    outline-offset: 2px;
  }
  @media (hover: hover) {
    .ms-photo-marquee__slide:hover { transform: scale(1.02); }
  }
  @media (min-width: 750px) {
    .ms-photo-marquee__slide {
      width: var(--ms-pm-card-w-d, 300px);
      height: var(--ms-pm-card-h-d, 380px);
    }
  }
  .ms-photo-marquee__slide img,
  .ms-photo-marquee__slide .ms-photo-marquee__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
  }
  .ms-photo-marquee__placeholder { background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06); }
  .ms-photo-marquee__slide[data-fit="contain"] {
    background: var(--ms-pm-slide-bg-block, var(--ms-pm-slide-bg, rgb(var(--color-foreground-rgb, 14 14 14) / 0.92)));
  }
  .ms-photo-marquee__slide[data-fit="contain"] img {
    object-fit: contain;
  }

  /* Sticker dentro de la card */
  .ms-photo-marquee__sticker {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 2;
    background: var(--ms-pm-accent, var(--color-primary));
    color: var(--color-primary-button-text, #fff);
    font-size: var(--ms-t-micro);
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.16em);
    text-transform: var(--ms-case-label, uppercase);
    padding: 6px 9px 7px;
    border-radius: var(--ms-radius-sm, 6px);
    white-space: nowrap;
    pointer-events: none;
  }

  /* === CTA === */
  .ms-photo-marquee__cta-wrap {
    margin-top: 28px;
    display: flex; justify-content: var(--ms-pm-cta-align, center);
  }
  /* CTA canónico ms-: tipografía/case/tamaño/padding/radio del SISTEMA DE BOTONES
     del tema (panel "Botones") → combina con los demás CTA ms- y con los nativos.
     Default = secundario (outline 1px); 'accent' = primario (relleno). */
  .ms-photo-marquee__cta {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: var(--ms-touch-min, 44px);
    /* Altura/espaciado = SISTEMA DE BOTONES del tema; fallback = estándar nativo 16px/24px. */
    padding: var(--button-padding-block, 16px) var(--button-padding-inline, 24px);
    background: transparent;
    color: var(--color-foreground);
    border: var(--style-border-width-secondary, 1px) solid rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.6);
    font-family: var(--button-font-family-secondary, var(--font-primary--family, var(--font-heading--family, inherit)));
    font-size: var(--button-font-size, var(--font-paragraph--size, 1rem));
    font-weight: var(--button-font-family-secondary-weight, var(--ms-w-medium, 500));
    text-transform: var(--button-text-case-secondary, none);
    line-height: var(--font-paragraph--line-height, 1.2);
    border-radius: var(--style-border-radius-buttons-secondary, var(--style-border-radius-buttons-primary, var(--buttons-radius, var(--ms-radius-md, 8px))));
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
  }
  .ms-photo-marquee__cta:hover { background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.04); }
  .ms-photo-marquee__cta--accent {
    background: var(--ms-pm-accent, var(--color-primary-button-background, var(--color-primary)));
    color: var(--ms-pm-accent-text, var(--color-primary-button-text, var(--color-background)));
    border-color: var(--ms-pm-accent, var(--color-primary-button-border, var(--color-primary)));
    border-width: var(--style-border-width-primary, 1px);
    font-family: var(--button-font-family-primary, var(--font-primary--family, var(--font-heading--family, inherit)));
    font-weight: var(--button-font-family-primary-weight, var(--ms-w-medium, 500));
    text-transform: var(--button-text-case-primary, none);
    border-radius: var(--style-border-radius-buttons-primary, var(--buttons-radius, var(--ms-radius-md, 8px)));
  }
  .ms-photo-marquee__cta--accent:hover { opacity: 0.92; background: var(--ms-pm-accent, var(--color-primary-button-background, var(--color-primary))); color: var(--ms-pm-accent-text, var(--color-primary-button-text, var(--color-background))); }

  /* === Empty (editor) === */
  .ms-photo-marquee__empty { margin: 0; padding: 2rem 0; text-align: center; opacity: 0.7; }

  /* === LIGHTBOX === */
  dialog.ms-photo-marquee__lightbox {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    overflow: hidden;
  }
  dialog.ms-photo-marquee__lightbox::backdrop {
    background: rgb(var(--color-foreground-rgb, 8 5 2) / 0.94);
    backdrop-filter: blur(8px);
  }
  dialog.ms-photo-marquee__lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ms-photo-marquee-lightbox-in 0.18s ease-out;
  }
  @keyframes ms-photo-marquee-lightbox-in {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    dialog.ms-photo-marquee__lightbox[open] { animation: none; }
  }
  .ms-photo-marquee__lightbox-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
  }
  .ms-photo-marquee__lightbox-stage {
    margin: 0;
    padding: 0;
    max-width: min(92vw, 1400px);
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .ms-photo-marquee__lightbox-img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    display: block;
    user-select: none;
    border-radius: var(--ms-pm-radius, 8px);
  }
  .ms-photo-marquee__lightbox-cap {
    font-size: var(--ms-t-label);
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.16em);
    text-transform: var(--ms-case-label, uppercase);
    padding: 6px 10px;
    background: var(--ms-pm-accent, var(--color-primary));
    color: var(--color-primary-button-text, #fff);
    border-radius: var(--ms-radius-sm, 6px);
  }

  .ms-photo-marquee__lightbox-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: rgb(255 255 255 / 0.08);
    color: #fff;
    border-radius: var(--ms-radius-round, 50%);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .ms-photo-marquee__lightbox-btn:hover { background: rgb(255 255 255 / 0.18); }
  .ms-photo-marquee__lightbox-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  .ms-photo-marquee__lightbox-close {
    top: 14px; right: 14px;
    width: 44px; height: 44px;
  }
  .ms-photo-marquee__lightbox-prev,
  .ms-photo-marquee__lightbox-next {
    bottom: 22px;
    width: 48px; height: 48px;
  }
  .ms-photo-marquee__lightbox-prev { left: 50%; transform: translateX(calc(-100% - 8px)); }
  .ms-photo-marquee__lightbox-next { left: 50%; transform: translateX(8px); }

  @media (min-width: 750px) {
    .ms-photo-marquee__lightbox-close {
      top: 24px; right: 24px;
      width: 48px; height: 48px;
    }
    .ms-photo-marquee__lightbox-prev,
    .ms-photo-marquee__lightbox-next {
      top: 50%;
      bottom: auto;
      width: 56px; height: 56px;
      transform: translateY(-50%);
    }
    .ms-photo-marquee__lightbox-prev { left: 24px; }
    .ms-photo-marquee__lightbox-next { left: auto; right: 24px; }
  }

  .ms-photo-marquee__lightbox-counter {
    position: absolute;
    top: 22px; left: 24px;
    font-size: var(--ms-t-label);
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.16em);
    color: rgb(255 255 255 / 0.75);
    z-index: 2;
  }

  body.ms-photo-marquee--lightbox-open { overflow: hidden; }
/* END_SECTION:ms-photo-marquee */

/* START_SECTION:ms-product-list-tabs (INDEX:47) */
/* ms-product-list-tabs — todo bajo el prefijo .ms-plt (bundle global). */

  /* ── Encabezado ─────────────────────────────────────────────────────────
     Mismo peso tipográfico que ms-bestsellers para que las dos secciones de
     producto del home se lean como la misma familia. */
  .ms-plt__header {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-2xs, 0.4rem);
    margin-block-end: var(--ms-space-md, 1.25rem);
  }

  .ms-plt__eyebrow {
    margin: 0;
    font-family: var(--font-subheading--family, var(--font-body--family, inherit));
    font-size: var(--font-size--xs, 0.8125rem);
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .ms-plt__heading {
    color: var(--color-foreground-heading, inherit);
    margin: 0;
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    font-size: var(--font-h2--size, clamp(1.5rem, 1rem + 2.4vw, 2.5rem));
    line-height: var(--font-h2--line-height, 1.1);
    letter-spacing: var(--font-h2--letter-spacing, normal);
    text-wrap: balance;
  }

  /* Resalte por <em>: la palabra conserva el color del titular y el acento
     pinta SOLO la regla (Rev 2 §3.4). Ver snippets/ms-accent-vars. */
  .ms-plt__heading em {
    font-style: var(--ms-accent-style, italic);
    color: var(--ms-accent-ink, var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary))));
    font-weight: inherit;
    text-decoration-line: var(--ms-accent-decoration, none);
    text-decoration-color: var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary)));
    text-decoration-thickness: var(--ms-accent-thickness, 2px);
    text-underline-offset: var(--ms-accent-offset, 3px);
    text-decoration-skip-ink: auto;
  }

  .ms-plt__subheading {
    max-width: 60ch;
    opacity: 0.85;
  }

  .ms-plt__subheading > :first-child { margin-block-start: 0; }
  .ms-plt__subheading > :last-child { margin-block-end: 0; }

  /* El custom element es inline por defecto; sin esto los controles quedan
     pegados a los paneles. */
  .ms-plt__tabs-component {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-md, 1.25rem);
  }

  .ms-plt__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-space-sm, 0.75rem);
  }

  /* Tablist: fila deslizable horizontal; respeta el padding lateral de la
     sección para alinear con el título y las tarjetas. */
  .ms-plt__tablist {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--ms-space-2xs, 0.5rem);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    min-width: 0;
  }
  .ms-plt__tablist::-webkit-scrollbar { display: none; }

  .ms-plt__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-space-3xs, 0.35rem);
    flex: 0 0 auto;
    min-height: var(--ms-touch-min, 44px);
    padding: 0.5rem 1rem;
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.28);
    border-radius: var(--ms-radius-pill, 999px);
    background: transparent;
    color: var(--color-foreground);
    font-family: inherit;
    font-size: var(--font-body--size, 0.9375rem);
    /* Convención ms-: tabs sin mayúsculas forzadas (no es botón de acción). */
    text-transform: none;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
  }

  /* Tab activo: color primario del scheme de la sección. */
  .ms-plt__tab[aria-selected="true"] {
    background: var(--color-primary);
    color: var(--color-primary-button-text, var(--color-background));
    border-color: var(--color-primary);
    font-weight: 600;
  }

  /* Variante SUBRAYADO: texto limpio, la activa lleva tinta + línea inferior. */
  .ms-plt--tstyle-underline .ms-plt__tablist {
    gap: var(--ms-space-md, 1.5rem);
    border-bottom: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.14);
  }
  .ms-plt--tstyle-underline .ms-plt__tab {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.5rem 0;
    color: var(--color-foreground);
    opacity: 0.55;
    position: relative;
  }
  .ms-plt--tstyle-underline .ms-plt__tab:hover {
    opacity: 1;
  }
  .ms-plt--tstyle-underline .ms-plt__tab[aria-selected="true"] {
    background: transparent;
    border-color: transparent;
    color: var(--color-foreground);
    opacity: 1;
    font-weight: 600;
  }
  .ms-plt--tstyle-underline .ms-plt__tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--color-foreground);
  }

  /* "Ver todo" escritorio: oculto en móvil (ahí va el botón ancho del panel). */
  .ms-plt__view-all-desktop {
    display: none;
  }

  /* Tipografía del SISTEMA DE BOTONES del tema para empatar con los CTA ms-. */
  .ms-plt__view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--ms-touch-min, 44px);
    color: var(--color-foreground);
    font-family: var(--button-font-family-secondary, var(--font-primary--family, var(--font-heading--family, inherit)));
    font-size: var(--button-font-size, var(--font-paragraph--size, 1rem));
    font-weight: var(--button-font-family-secondary-weight, 600);
    text-transform: var(--button-text-case-secondary, none);
    line-height: var(--font-paragraph--line-height, 1.2);
    text-decoration: none;
    white-space: nowrap;
  }
  .ms-plt__view-all-link:hover { text-decoration: underline; }
  .ms-plt__view-all-arrow { transition: transform 0.15s ease; }
  .ms-plt__view-all-link:hover .ms-plt__view-all-arrow { transform: translateX(3px); }
  /* [hidden] debe ganar a la clase con la misma especificidad: si no, se ven
     TODOS los "Ver todo" a la vez (lección de ms-bestsellers). */
  .ms-plt__view-all-link[hidden] { display: none; }

  /* Paneles: candado para que ninguna regla display del tema le gane a [hidden]. */
  .ms-plt__panel[hidden] { display: none !important; }

  /* "Ver todo" móvil: botón ancho bajo el panel. */
  .ms-plt__view-all-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--ms-touch-min, 44px);
    /* Aire con la cuadrícula: pegado a la última tarjeta parecía parte de
       la card (lo reportó Leo, 19-ago). */
    margin-block-start: var(--ms-space-md, 1.5rem);
  }

  .ms-plt__empty {
    opacity: 0.7;
  }

  @media screen and (min-width: 750px) {
    .ms-plt__view-all-desktop {
      display: flex;
      flex: 0 0 auto;
    }
    .ms-plt__view-all-mobile {
      display: none;
    }
    /* Centrado solo en escritorio: en móvil el scroll manda desde la izquierda. */
    .ms-plt--tabs-center .ms-plt__tablist { justify-content: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-plt__view-all-arrow { transition: none; }
    .ms-plt__view-all-link:hover .ms-plt__view-all-arrow { transform: none; }
  }
/* END_SECTION:ms-product-list-tabs */

/* START_SECTION:ms-promo-popup (INDEX:50) */
.section-ms-promo-popup {
    display: contents;
  }

  .ms-promo-popup {
    --ms-promo-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.18);
    --ms-promo-radius: 0;
  }

  .ms-promo-popup__dialog-wrapper {
    display: contents;
  }

  .ms-promo-popup__dialog {
    padding: 0;
    border: none;
    max-width: var(--ms-promo-max-width, 640px);
    width: 95vw;
    background: transparent;
    box-shadow: var(--ms-promo-shadow);
    border-radius: var(--ms-promo-radius, 0);
    overflow: visible;
  }

  .ms-promo-popup__dialog::backdrop {
    background: rgb(0 0 0 / 0.5);
  }

  @media screen and (max-width: 749px) {
    .ms-promo-popup__dialog--position-mobile-center { margin: auto; }
    .ms-promo-popup__dialog--position-mobile-top { margin: 24px auto auto; }
    .ms-promo-popup__dialog--position-mobile-bottom { margin: auto auto 24px; }
  }

  @media screen and (min-width: 750px) {
    .ms-promo-popup__dialog--position-center { margin: auto; }
    .ms-promo-popup__dialog--position-top { margin: 24px auto auto; }
    .ms-promo-popup__dialog--position-bottom { margin: auto auto 24px; }
    .ms-promo-popup__dialog--position-top-left { margin: 24px auto auto 24px; }
    .ms-promo-popup__dialog--position-top-right { margin: 24px 24px auto auto; }
    .ms-promo-popup__dialog--position-bottom-left { margin: auto auto 24px 24px; }
    .ms-promo-popup__dialog--position-bottom-right { margin: auto 24px 24px auto; }
  }

  .ms-promo-popup__container {
    display: flex;
    flex-direction: column;
    background: var(--color-background, #fff);
    border-radius: var(--ms-promo-radius, 0);
    overflow: hidden;
  }

  @media screen and (min-width: 750px) {
    .ms-promo-popup__container { flex-direction: row; }
    .ms-promo-popup__container--no-image { flex-direction: column; }
  }

  .ms-promo-popup__image-panel {
    flex: 0 0 auto;
    min-height: 220px;
    overflow: hidden;
    aspect-ratio: var(--ms-promo-image-ratio, 4 / 5);
  }

  .ms-promo-popup__image-panel--auto {
    aspect-ratio: auto;
    min-height: 220px;
  }

  @media screen and (min-width: 750px) {
    .ms-promo-popup__image-panel { width: 50%; min-height: 0; }
    .ms-promo-popup__image-panel--auto { flex: 0 1 auto; align-self: stretch; min-height: 0; position: relative; }
  }

  .ms-promo-popup__image-inner { width: 100%; height: 100%; min-height: inherit; }

  .ms-promo-popup__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media screen and (max-width: 749px) {
    .ms-promo-popup__image-panel--hidden-mobile { display: none; }
  }

  .ms-promo-popup__content-panel {
    flex: 1;
    background: var(--color-background, #fff);
    color: var(--color-foreground, #000);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--ms-promo-content-padding, 40px);
  }

  @media screen and (min-width: 750px) {
    .ms-promo-popup__container:not(.ms-promo-popup__container--no-image) .ms-promo-popup__content-panel { width: 50%; }
  }

  .ms-promo-popup__content-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ms-promo-popup__content-panel--align-left { align-items: flex-start; text-align: left; }
  .ms-promo-popup__content-panel--align-center { align-items: center; text-align: center; }
  .ms-promo-popup__content-panel--align-right { align-items: flex-end; text-align: right; }
  .ms-promo-popup__content-panel--align-center .ms-promo-popup__content-inner { align-items: center; }
  .ms-promo-popup__content-panel--align-right .ms-promo-popup__content-inner { align-items: flex-end; }

  .ms-promo-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-foreground, #000);
    opacity: 0.7;
    transition: opacity 0.2s ease;
    z-index: 2;
  }

  .ms-promo-popup__close:hover { opacity: 1; }
  .ms-promo-popup__close svg { width: 16px; height: 16px; }

  .ms-promo-popup__headline {
    margin: 0;
    line-height: 1.15;
  }

  /* Palabra resaltada del titular — mismo sistema que las demás secciones ms-.
     Con el subrayado encendido la palabra se queda del color del titular
     (--ms-accent-ink: currentcolor) y el acento pinta SOLO la regla; con
     "Color de la palabra" puesto, la palabra toma ese color y la regla sigue
     con el suyo. Detalle en snippets/ms-accent-vars.liquid. */
  .ms-promo-popup__headline em {
    font-style: var(--ms-accent-style, italic);
    color: var(--ms-accent-ink, var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary))));
    font-weight: inherit;
    text-decoration-line: var(--ms-accent-decoration, none);
    text-decoration-color: var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary)));
    text-decoration-thickness: var(--ms-accent-thickness, 2px);
    text-underline-offset: var(--ms-accent-offset, 3px);
    text-decoration-skip-ink: auto;
  }

  .ms-promo-popup__body {
    font-size: var(--ms-t-body);
    line-height: 1.6;
  }

  .ms-promo-popup__body > :first-child { margin-top: 0; }
  .ms-promo-popup__body > :last-child { margin-bottom: 0; }

  .ms-promo-popup__code-wrap {
    width: 100%;
  }

  .ms-promo-popup__code-label {
    display: block;
    font-size: var(--ms-t-label);
    font-weight: var(--ms-w-medium, 500);
    text-transform: var(--ms-case-label, uppercase);
    letter-spacing: var(--ms-tracking-label, 0.08em);
    margin-bottom: 8px;
  }

  .ms-promo-popup__code {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--ms-promo-radius, 0);
    overflow: hidden;
  }

  .ms-promo-popup__code-text {
    flex: 1;
    min-width: 0;
    padding: 14px 18px;
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.12em);
    background: var(--color-background, #fff);
    color: var(--color-foreground, #000);
    display: flex;
    align-items: center;
  }

  .ms-promo-popup__copy-btn {
    padding: 14px 22px;
    font-size: var(--button-font-size, var(--ms-t-label));
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.08em);
    text-transform: var(--button-text-case, uppercase);
    color: var(--color-button-text, #fff);
    background: var(--color-button-background, var(--color-foreground, #000));
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }

  .ms-promo-popup__copy-btn:hover { opacity: 0.9; }

  .ms-promo-popup__copy-btn:has(.form__message:not(.visually-hidden)) {
    background: var(--color-success, #0a8a3f);
  }

  .ms-promo-popup__copy-btn:has(.form__message:not(.visually-hidden)) .ms-promo-popup__copy-text {
    display: none;
  }

  .ms-promo-popup__cta {
    margin-top: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-promo-popup__dialog { animation: none; }
  }
/* END_SECTION:ms-promo-popup */

/* START_SECTION:ms-reviews (INDEX:51) */
/* ===========================================================================
     ms-reviews — CSS scopeado .ms-reviews__ · variables por #ms-reviews-{id}
     Colores SIEMPRE del scheme activo (var(--color-*)). Mobile-first.
     =========================================================================== */
  .ms-reviews {
    --ms-reviews-touch-min: var(--ms-touch-min, 44px);
    color: var(--color-foreground);
    background-color: var(--color-background);
    /* padding-block lo aplica .spacing-style desde --padding-block-start/end. */
  }

  /* ===========================================================================
     COLORES ESPECÍFICOS (opcionales) — sobrescriben el scheme SOLO en esta
     sección. Cada variable se emite únicamente si el setting tiene valor; si no,
     cae al fallback = color del esquema = idéntico a hoy.
     · Textos: se sobreescribe --color-foreground en la raíz (afecta a todos los
       textos de la sección; los bordes usan -rgb y NO cambian).
     · Estrellas: scopeadas a .ms-reviews para no afectar otras secciones que
       reutilizan el snippet ms-rating-stars (p. ej. Bestsellers).
     =========================================================================== */
  .ms-reviews .ms-rating__layer--fg .ms-rating__star {
    fill: var(--ms-rev-stars, var(--color-primary));
  }

  .ms-reviews__carousel-root {
    display: block;
  }

  .ms-reviews__inner {
    width: 100%;
    /* el padding se SUMA al tope: así max_width es el ancho del CONTENIDO,
       criterio único en toda la familia ms- (ver ms-media-cards / ms-ugc) */
    max-width: calc(var(--ms-reviews-max-width, var(--page-width, 1200px)) + (var(--page-margin, 1.5rem) * 2));
    margin-inline: auto;
    padding-inline: var(--page-margin, 1.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-md, 1.25rem);
  }

  /* ── Encabezado + chip de rating global ───────────────────────────────────── */
  .ms-reviews__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ms-space-sm, 0.75rem) var(--ms-space-md, 1.25rem);
  }

  .ms-reviews--center .ms-reviews__header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ms-reviews__heading {
    margin: 0;
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    font-size: var(--font-h2--size, clamp(1.5rem, 1rem + 2vw, 2.25rem));
    line-height: var(--font-h2--line-height, 1.15);
    letter-spacing: var(--font-h2--letter-spacing, normal);
    color: var(--color-foreground-heading, var(--color-foreground));
    text-wrap: balance;
  }

  /* Resalta una palabra del título con <em> (mismo contrato que el Hero):
     color/cursiva/subrayado desde el editor, grosor y separación globales. */
  .ms-reviews__heading em {
    font-style: var(--ms-accent-style, italic);
    /* Rev 2 §3.4: con el subrayado encendido la palabra conserva el color del
       titular (--ms-accent-ink: currentcolor) y el acento pinta SOLO la regla.
       Apagado, la palabra sigue yendo en acento. Detalle en ms-accent-vars. */
    color: var(--ms-accent-ink, var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary))));
    font-weight: inherit;
    text-decoration-line: var(--ms-accent-decoration, none);
    text-decoration-color: var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary)));
    text-decoration-thickness: var(--ms-accent-thickness, 2px);
    text-underline-offset: var(--ms-accent-offset, 3px);
    text-decoration-skip-ink: auto;
  }

  /* Chip "★ 4.9 · N reviews" */
  .ms-reviews__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-space-2xs, 0.5rem);
    padding: 0.35rem 0.7rem;
    border-radius: var(--ms-radius-pill, 999px);
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
    font-size: var(--ms-t-meta);
    line-height: 1;
    white-space: nowrap;
  }

  .ms-reviews__chip-sep {
    opacity: 0.5;
  }

  .ms-reviews__chip-count {
    font-weight: var(--ms-w-medium, 500);
    font-variant-numeric: tabular-nums;
  }

  /* ===========================================================================
     RESUMEN + DESGLOSE (variante PDP)
     Mobile: apilado. Desktop: 3 zonas (score | barras | acciones).
     =========================================================================== */
  .ms-reviews__summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ms-space-md, 1.25rem);
    padding: var(--ms-space-md, 1.25rem);
    border: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.18);
    border-radius: var(--ms-radius-lg, 12px);
  }

  .ms-reviews__summary-score {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ms-space-2xs, 0.5rem);
  }

  .ms-reviews__score-number {
    font-size: var(--ms-t-heading);
    font-weight: var(--ms-w-medium, 500);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-foreground);
  }

  .ms-reviews__score-total {
    font-size: var(--ms-t-meta);
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
  }

  /* ── Barras 5..1 ── */
  .ms-reviews__breakdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-2xs, 0.5rem);
    min-width: 0;
  }

  .ms-reviews__breakdown-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr 2.5rem;
    align-items: center;
    gap: var(--ms-space-xs, 0.6rem);
  }

  .ms-reviews__breakdown-label {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: var(--ms-t-label);
    font-variant-numeric: tabular-nums;
    color: var(--color-foreground);
  }

  .ms-reviews__breakdown-star {
    fill: var(--ms-rev-stars, var(--color-primary));
  }

  .ms-reviews__breakdown-track {
    position: relative;
    display: block;
    height: 8px;
    border-radius: var(--ms-radius-pill, 999px);
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.12);
    overflow: hidden;
  }

  .ms-reviews__breakdown-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    display: block;
    height: 100%;
    border-radius: var(--ms-radius-pill, 999px);
    background: var(--color-primary);
  }

  .ms-reviews__breakdown-count {
    font-size: var(--ms-t-label);
    text-align: end;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }

  /* ── Acciones del resumen: escribir reseña + ordenar ── */
  .ms-reviews__summary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ms-space-sm, 0.75rem);
  }

  /* Botón PRIMARIO canónico ms- (escribir reseña): relleno, tipografía/case/tamaño/
     padding/radio del SISTEMA DE BOTONES del tema (panel "Botones"). */
  .ms-reviews__write-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ms-reviews-touch-min, 44px);
    /* Altura/espaciado = SISTEMA DE BOTONES del tema; fallback = estándar nativo 16px/24px. */
    padding: var(--button-padding-block, 16px) var(--button-padding-inline, 24px);
    border-radius: var(--style-border-radius-buttons-primary, var(--buttons-radius, var(--ms-radius-md, 8px)));
    border: var(--style-border-width-primary, 1px) solid var(--color-primary-button-border, var(--color-primary-button-background, var(--color-primary)));
    background: var(--color-primary-button-background, var(--color-primary));
    color: var(--color-primary-button-text, var(--color-background));
    font-family: var(--button-font-family-primary, var(--font-primary--family, var(--font-heading--family, inherit)));
    font-size: var(--button-font-size, var(--font-paragraph--size, 1rem));
    font-weight: var(--button-font-family-primary-weight, var(--ms-w-medium, 500));
    text-transform: var(--button-text-case-primary, none);
    line-height: var(--font-paragraph--line-height, 1.2);
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
  }

  .ms-reviews__write-btn:hover {
    opacity: 0.92;
  }

  .ms-reviews__sort {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .ms-reviews__sort-label {
    font-size: var(--ms-t-meta);
    opacity: 0.8;
  }

  .ms-reviews__sort-select {
    min-height: var(--ms-reviews-touch-min, 44px);
    padding: 0.4rem 2rem 0.4rem 0.7rem;
    border-radius: var(--ms-radius-md, 8px);
    border: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.4);
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: inherit;
    font-size: var(--ms-t-meta);
    cursor: pointer;
    /* Caret propio (no depende de assets) */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
  }

  /* ===========================================================================
     RIEL / GRID de cards
     Mobile-first: cuadricula (1 o 2 col). El carrusel es opt-in por modificador
     de breakpoint (--m-carousel / --d-carousel).
     =========================================================================== */
  .ms-reviews__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: var(--ms-reviews-grid-mobile, minmax(0, 1fr));
    gap: var(--ms-reviews-gap, 16px);
  }

  .ms-reviews__item {
    min-width: 0;
  }

  /* Mobile CARRUSEL (opt-in): tira deslizable con scroll-snap + sangrado a bordes. */
  .ms-reviews--m-carousel .ms-reviews__track {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    container-type: inline-size;
    margin-inline: calc(-1 * var(--page-margin, 1.5rem));
    padding-inline: var(--page-margin, 1.5rem);
    scroll-padding-inline: var(--page-margin, 1.5rem);
  }
  .ms-reviews--m-carousel .ms-reviews__track::-webkit-scrollbar { display: none; }
  .ms-reviews--m-carousel .ms-reviews__item {
    flex: 0 0 auto;
    /* El ancho lo manda "cards visibles" (columns_mobile): N cards por pantalla. */
    width: calc((100% - (var(--ms-reviews-cols-mobile, 2.2) - 1) * var(--ms-reviews-gap, 16px)) / var(--ms-reviews-cols-mobile, 2.2));
    scroll-snap-align: start;
  }

  /* ── Card ── */
  .ms-reviews__card {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-sm, 0.9rem);
    height: 100%;
    padding: var(--ms-space-md, 1.25rem);
    box-sizing: border-box;
    border: 1px solid var(--ms-reviews-card-border, rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.16));
    border-radius: var(--ms-reviews-radius, 12px);
    background: var(--ms-reviews-card-bg, var(--color-background));
  }

  /* Sin borde (toggle): tarjeta limpia, sin fondo ni padding de caja. */
  .ms-reviews--flat .ms-reviews__card {
    border: 0;
    padding: 0;
    background: transparent;
  }

  /* ── Card "imagen protagonista" ── */
  .ms-reviews__card--imgtop {
    padding: 0;
    gap: 0;
    overflow: hidden;
  }

  .ms-reviews__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ms-reviews-img-ratio, 4 / 5);
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
  }

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

  .ms-reviews__body {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-sm, 0.9rem);
    flex: 1 1 auto;
    padding: var(--ms-space-md, 1.25rem);
  }

  /* imgtop SIN borde: la foto lleva su propio redondeo y el cuerpo no lleva caja. */
  .ms-reviews--flat .ms-reviews__card--imgtop {
    overflow: visible;
  }
  .ms-reviews--flat .ms-reviews__card--imgtop .ms-reviews__media {
    border-radius: var(--ms-reviews-radius, 12px);
  }
  .ms-reviews--flat .ms-reviews__card--imgtop .ms-reviews__body {
    padding-inline: 0;
    padding-block-end: 0;
    padding-block-start: var(--ms-space-sm, 0.9rem);
  }

  .ms-reviews__card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-space-2xs, 0.5rem);
  }

  /* Badge "compra verificada" */
  .ms-reviews__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    /* Puede encoger y bajar de linea en cards angostas (sin nowrap) → no se corta. */
    min-width: 0;
    max-width: 100%;
    padding: 0.2rem 0.5rem;
    border-radius: var(--ms-radius-pill, 999px);
    border: 1px solid var(--ms-rev-verified-border, transparent);
    background: var(--ms-rev-verified-bg, rgb(var(--color-primary-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.12));
    color: var(--ms-rev-verified-text, var(--color-foreground));
    font-size: var(--ms-t-label);
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.25;
  }

  .ms-reviews__verified-icon {
    color: var(--ms-rev-verified-text, var(--color-primary));
    flex: 0 0 auto;
  }

  .ms-reviews__quote {
    margin: 0;
    font-size: var(--ms-t-body);
    line-height: 1.5;
    color: var(--ms-rev-quote, var(--color-foreground));
    /* Comillas tipograficas alrededor de la cita */
    quotes: "\201C" "\201D";
  }

  .ms-reviews__quote::before { content: open-quote; }
  .ms-reviews__quote::after { content: close-quote; }

  .ms-reviews__card-foot {
    display: flex;
    align-items: center;
    gap: var(--ms-space-sm, 0.75rem);
    margin-block-start: auto;
  }

  .ms-reviews__thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--ms-radius-md, 8px);
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
  }

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

  .ms-reviews__meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .ms-reviews__name {
    font-weight: var(--ms-w-medium, 500);
    font-size: var(--ms-t-body);
    color: var(--color-foreground);
  }

  .ms-reviews__purchased {
    font-size: var(--ms-t-label);
    opacity: 0.7;
  }

  /* ── Nota de editor / app slot ── */
  .ms-reviews__note {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    opacity: 0.7;
  }

  /* ── Dots ── */
  .ms-reviews__dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  .ms-reviews--m-carousel .ms-reviews__dots { display: flex; }

  .ms-reviews__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Caja angosta para juntar los dots; conserva altura tactil completa (44px). */
    width: 1.25rem;
    height: var(--ms-reviews-touch-min, 44px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .ms-reviews__dot-fill {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: var(--ms-radius-round, 50%);
    background: var(--color-foreground);
    opacity: 0.3;
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
  }

  .ms-reviews__dot.is-active .ms-reviews__dot-fill,
  .ms-reviews__dot[aria-current='true'] .ms-reviews__dot-fill {
    opacity: 1;
    transform: scale(1.35);
    background: var(--color-primary);
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-reviews--m-carousel .ms-reviews__track { scroll-behavior: auto; }
    .ms-reviews__dot-fill { transition: none; }
  }

  /* Sin overflow real → el JS marca data-no-overflow: ocultar dots/flechas. */
  ms-reviews-component[data-no-overflow] .ms-reviews__dots,
  ms-reviews-component[data-no-overflow] .ms-reviews__arrows {
    display: none;
  }

  /* ── Flechas ── */
  .ms-reviews__arrows {
    display: none;
    align-self: flex-end;
    gap: var(--ms-space-2xs, 0.5rem);
  }
  .ms-reviews--m-carousel .ms-reviews__arrows { display: inline-flex; }

  .ms-reviews__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ms-reviews-touch-min, 44px);
    height: var(--ms-reviews-touch-min, 44px);
    padding: 0;
    border: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.4);
    border-radius: var(--ms-radius-round, 50%);
    background: var(--color-background);
    color: var(--color-foreground);
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
  }

  .ms-reviews__arrow:hover {
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
  }

  .ms-reviews__arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  /* Botón SECUNDARIO canónico ms- ("Ver todas las reseñas"): outline 1px,
     tipografía/case/tamaño/padding/radio del SISTEMA DE BOTONES del tema. */
  .ms-reviews__view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    align-self: center;
    min-height: var(--ms-reviews-touch-min, 44px);
    /* Altura/espaciado = SISTEMA DE BOTONES del tema; fallback = estándar nativo 16px/24px. */
    padding: var(--button-padding-block, 16px) var(--button-padding-inline, 24px);
    border-radius: var(--style-border-radius-buttons-secondary, var(--style-border-radius-buttons-primary, var(--buttons-radius, var(--ms-radius-md, 8px))));
    border: var(--style-border-width-secondary, 1px) solid rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.6);
    background: transparent;
    color: var(--color-foreground);
    font-family: var(--button-font-family-secondary, var(--font-primary--family, var(--font-heading--family, inherit)));
    font-size: var(--button-font-size, var(--font-paragraph--size, 1rem));
    font-weight: var(--button-font-family-secondary-weight, var(--ms-w-medium, 500));
    text-transform: var(--button-text-case-secondary, none);
    line-height: var(--font-paragraph--line-height, 1.2);
    text-decoration: none;
    box-sizing: border-box;
  }

  .ms-reviews__view-all:hover {
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.04);
  }

  /* Alineación DEDICADA del "Ver todos" (independiente del encabezado). */
  .ms-reviews--vaalign-left .ms-reviews__view-all { align-self: flex-start; }
  .ms-reviews--vaalign-center .ms-reviews__view-all { align-self: center; }
  .ms-reviews--vaalign-right .ms-reviews__view-all { align-self: flex-end; }

  .ms-reviews__view-all-arrow {
    transition: transform 0.15s ease;
  }

  .ms-reviews__view-all:hover .ms-reviews__view-all-arrow {
    transform: translateX(3px);
  }

  /* ===========================================================================
     DESKTOP (>=750px): cuadricula de N columnas. El selector base incluye
     --m-carousel para NEUTRALIZAR el carrusel mobile en desktop (misma
     especificidad que la regla mobile, gana por orden de fuente).
     =========================================================================== */
  @media screen and (min-width: 750px) {
    .ms-reviews__track,
    .ms-reviews--m-carousel .ms-reviews__track {
      display: grid;
      grid-template-columns: repeat(var(--ms-reviews-cols-desktop, 3), minmax(0, 1fr));
      overflow: visible;
      scroll-snap-type: none;
      container-type: normal;
      margin-inline: 0;
      padding-inline: 0;
      scroll-padding-inline: 0;
    }
    .ms-reviews--m-carousel .ms-reviews__item { width: auto; }

    /* Desktop CARRUSEL (opt-in): tira deslizable con N cards a la vista. */
    .ms-reviews--d-carousel .ms-reviews__track {
      display: flex;
      grid-template-columns: none;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      container-type: inline-size;
      scrollbar-width: none;
    }
    .ms-reviews--d-carousel .ms-reviews__track::-webkit-scrollbar { display: none; }
    .ms-reviews--d-carousel .ms-reviews__item {
      flex: 0 0 auto;
      scroll-snap-align: start;
      width: calc(
        (100% - (var(--ms-reviews-gap, 16px) * (var(--ms-reviews-cols-desktop, 3) - 1))) /
          var(--ms-reviews-cols-desktop, 3)
      );
    }

    /* Dots/flechas: siguen al layout de DESKTOP (ocultos en grid, visibles en carrusel). */
    .ms-reviews--m-carousel .ms-reviews__dots,
    .ms-reviews--m-carousel .ms-reviews__arrows { display: none; }
    .ms-reviews--d-carousel .ms-reviews__dots { display: flex; }
    .ms-reviews--d-carousel .ms-reviews__arrows { display: inline-flex; }

    /* Resumen PDP en 3 columnas. */
    .ms-reviews__summary {
      grid-template-columns: minmax(140px, auto) 1fr minmax(180px, auto);
      align-items: center;
      gap: var(--ms-space-xl, 2rem);
    }

    .ms-reviews__summary-actions {
      flex-direction: column;
      align-items: stretch;
    }
  }

  /* ===========================================================================
     a11y — foco visible (sin outline:none) + reduced motion
     =========================================================================== */
  .ms-reviews :is(.ms-reviews__write-btn, .ms-reviews__sort-select, .ms-reviews__dot, .ms-reviews__arrow, .ms-reviews__view-all):focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
    border-radius: var(--ms-radius-sm, 4px);
  }

  .ms-reviews__track:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 4px;
    border-radius: var(--ms-radius-md, 8px);
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-reviews__arrow,
    .ms-reviews__view-all-arrow {
      transition: none;
    }
  }
/* END_SECTION:ms-reviews */

/* START_SECTION:ms-search-bar (INDEX:52) */
/* ===========================================================================
     ms-search-bar — barra de búsqueda predictiva (header group). CSS scopeada
     .ms-search-bar__. Colores del scheme activo + tokens de input del tema.
     =========================================================================== */
  ms-search-bar-metrics { display: none; }

  .ms-search-bar {
    --ms-sb-touch: var(--ms-touch-min, 44px);
    color: var(--color-foreground);
    background-color: var(--ms-sb-bg, var(--color-background));
    width: 100%;
    box-sizing: border-box;
  }

  /* Sticky DEBAJO del header: el header (.header-section) se fija en top:-1px; nos pegamos
     a var(--header-height) para quedar justo debajo. Offset configurable para afinar.

     CLAVE: el wrapper de sección (.shopify-section.ms-search-bar-section) mide solo el alto
     de la barra → un position:sticky en un hijo no tendría dónde "pegarse" (por eso no se
     fijaba). Con display:contents el wrapper deja de formar caja y la barra se fija relativo
     al scroll de la PÁGINA, igual que el header. Solo cuando el sticky está activo. */
  .ms-search-bar-section:has(.ms-search-bar--sticky) {
    display: contents;
  }
  /* ── CAPA (10-ago) ───────────────────────────────────────────────────────
     Estaba en `--layer-raised` = 2, el MISMO valor que el tema le pone a
     `.product-card:hover` (base.css: `position: relative; z-index: var(--layer-raised)`).
     Empate de z-index lo gana quien va después en el DOM → cualquier tarjeta de
     la rejilla se pintaba ENCIMA de la barra fija. Leo lo reportó con captura.

     Y no basta con subirle: el wrapper de sección es `display: contents`, así que
     la barra NO tiene contexto de apilamiento propio y compite en la raíz contra
     el contenido de la página. La capa tiene que ser explícita y estar ANCLADA a
     la del header, no a un número suelto:
       header fijo  = --layer-sticky (8)   ← siempre arriba de todo esto
       barra        = 7                    ← y su desplegable con ella
       nav de colecciones = 6              ← se apila debajo (ms-collection-nav)
       contenido / tarjetas = 2            ← --layer-raised */
  .ms-search-bar--sticky {
    position: sticky;
    top: calc(var(--header-height, 56px) - 1px + var(--ms-sb-sticky-offset, 0px));
    z-index: calc(var(--layer-sticky, 8) - 1);
  }

  /* ⚠️ CONTRAPARTE OBLIGATORIA DE LA CAPA DE ARRIBA (10-ago) ─────────────────
     Subir esta barra a 7 tiene un efecto que no se ve venir: **el cajón del menú
     móvil se abría DEBAJO de ella**. Lo reportó Leo el mismo día.

     El drawer nativo pide `z-index: 18`, pero vive DENTRO de `.header-section`,
     que el tema declara `position: relative; z-index: var(--layer-heightened)` = 4.
     O sea que el 18 solo compite ENTRE HERMANOS del header: hacia afuera, todo el
     subárbol vale 4. La barra, que es sección HERMANA y no está atrapada ahí,
     valía 7 y le ganaba al cajón, al submenú (12) y a cualquier otro overlay del
     header. Solo pasaba con el header sin fijar — al hacerse fijo sube a 8 y tapa.

     Se corrige el ORIGEN, no el síntoma: el header queda en 8 SIEMPRE, que es el
     valor que él mismo ya se pone al fijarse. Así nada de lo que el header
     contenga puede quedar debajo de estas barras, sin tener que enumerar overlay
     por overlay. Y la barra sigue arriba del contenido (las flechas de carrusel
     del tema están en 4), que es lo que arreglamos en primer lugar.

     Va con `#header-group >` para ganarle por especificidad a la regla nativa
     `.header-section` sin depender del orden en que se compile styles.css. */
  #header-group > .header-section {
    z-index: var(--layer-sticky, 8);
  }

  /* ── Sincronía con el header "Aparecer al desplazarse arriba" (scroll-up) ──────────
     Si el header está en scroll-up, la barra sigue el MISMO comportamiento (visible
     arriba y al subir; se va al bajar). Leemos el estado del header desde #header-group
     (ancestro común del header y de esta sección) con :has():
       · scroll-up + NO activo → la barra sigue el flujo (se va con el header al bajar).
       · scroll-up + activo    → la barra se pega debajo del header (reaparece al subir).
     En modo "always" no aplica: la barra queda sticky como hasta ahora. =============== */
  #header-group:has(#header-component[sticky='scroll-up']) .ms-search-bar--sticky {
    position: relative;
    top: auto;
    /* Espejo del fade del header (.header en header.liquid): así la barra se
       desvanece EN SINCRONÍA en vez de quedarse pegada y luego saltar. */
    transition: opacity var(--animation-speed, 0.125s) var(--animation-easing, ease);
    opacity: 1;
  }
  #header-group:has(#header-component[sticky='scroll-up'][data-sticky-state='active']) .ms-search-bar--sticky {
    position: sticky;
    top: calc(var(--header-height, 56px) - 1px + var(--ms-sb-sticky-offset, 0px));
  }
  /* FIX lag al ocultarse: al bajar, el header NO se despega de inmediato — se
     DESVANECE (opacity 1→0) mientras sigue anclado con [data-animating], y recién
     ~150ms después pasa a 'idle' y se despega. La barra solo miraba el toggle de
     posición, así que se quedaba visible y pegada ese lapso y luego SALTABA.
     Replicamos el fade del header keyeando a los mismos estados. */
  #header-group:has(#header-component[sticky='scroll-up'][data-sticky-state='idle']) .ms-search-bar--sticky,
  #header-group:has(#header-component[sticky='scroll-up'][data-sticky-state='active'][data-animating]) .ms-search-bar--sticky {
    opacity: 0;
  }

  .ms-search-bar--divider {
    border-block-end: 1px solid var(--color-border, rgb(var(--color-foreground-rgb, 0 0 0) / 0.1));
  }

  .ms-search-bar__inner {
    width: 100%;
    /* Full-width como el header: así, alineada a la derecha, el campo queda BAJO los
       iconos (no centrado). El padding lateral iguala al del header (--page-margin). */
    padding-inline: var(--page-margin, 1.5rem);
    box-sizing: border-box;
    display: flex;
    justify-content: stretch;
  }

  .ms-search-bar__predictive {
    position: relative;
    display: block;
    width: 100%;
  }

  .ms-search-bar__form {
    position: relative;
    width: 100%;
    margin: 0;
  }

  /* Campo: caja tematizada con los tokens de input del tema. */
  .ms-search-bar__field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    background: var(--color-input-background, var(--color-background));
    border: var(--style-border-width-inputs, 1px) solid var(--color-input-border, var(--color-border, currentColor));
    border-radius: var(--ms-sb-radius, 8px);
    color: var(--color-input-text, var(--color-foreground));
  }


  /* ── ESTILO DEL CAMPO EN REPOSO ──────────────────────────────────────────
     El default (`outline`) es una caja blanca con hairline gris sobre header
     blanco: se lee como campo de formulario genérico. `filled` le da presencia
     con la superficie de marca y sin borde; `underline` es el más discreto.

     ⚠️ 10-ago: aquí vivía un marcador de conflicto `<<<<<<< HEAD` crudo, colado
     en `4eacc0d`. El CSS no tira error: se come la PRIMERA regla que encuentra
     después, y esa era justo `--field-filled` (la base, no el `:focus-within`).
     Verificado en el CSS servido: la regla NO existía en la tienda. Como Nakama
     corre en `outline` no se veía nada — pero `filled` es el DEFAULT del schema,
     así que cualquier otra tienda del tema lo estrenaría roto. */
  .ms-search-bar--field-filled .ms-search-bar__field {
    background: var(--color-variant-background, var(--color-background));
    border-color: transparent;
  }
  .ms-search-bar--field-filled .ms-search-bar__field:focus-within {
    background: var(--color-input-background, #fff);
    border-color: var(--color-primary);
  }
  .ms-search-bar--field-underline .ms-search-bar__field {
    background: transparent;
    border-width: 0 0 1px 0;
    border-radius: 0;
  }
  .ms-search-bar--field-underline .ms-search-bar__field:focus-within {
    border-block-end-color: var(--color-primary);
  }

  .ms-search-bar__field:focus-within {
    border-color: var(--color-primary, currentColor);
  }

  .ms-search-bar__icon {
    position: absolute;
    left: 0.85rem;
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.6);
  }
  .ms-search-bar__icon svg { width: 1.1rem; height: 1.1rem; display: block; }

  .ms-search-bar__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--ms-t-body);
    padding-block: 0.45rem;
    padding-inline: 2.4rem 0.6rem;
    outline: none;
    text-overflow: ellipsis;
  }
  .ms-search-bar__input::placeholder { color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.55); }
  /* Quita la X nativa del input[type=search] (usamos el botón reset propio) */
  .ms-search-bar__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

  .ms-search-bar__reset {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ms-sb-touch, 44px);
    height: var(--ms-sb-touch, 44px);
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
  }
  .ms-search-bar__reset:hover { opacity: 1; }
  .ms-search-bar__reset[hidden] { display: none; }
  .ms-search-bar__reset svg { width: 1rem; height: 1rem; display: block; }

  /* ── Dropdown predictivo: absoluto bajo el campo, oculto hasta foco + texto ── */
  .ms-search-bar__results-wrapper {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    z-index: var(--layer-heightened, 5);
    display: none;
    background: var(--color-background);
    border: 1px solid var(--color-border, rgb(var(--color-foreground-rgb, 0 0 0) / 0.12));
    border-radius: var(--ms-sb-radius, 8px);
    box-shadow: 0 12px 32px rgb(var(--color-foreground-rgb, 0 0 0) / 0.14);
    overflow: hidden;
  }
  .ms-search-bar__results {
    max-height: min(70svh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Mostrar SOLO cuando el campo tiene foco Y el input tiene texto escrito. */
  /* Abre con el FOCO, no sólo con texto escrito. Antes exigía
     :not(:placeholder-shown), o sea que el estado inicial —términos populares
     y más pedidos— no se podía ver nunca: para cuando el desplegable abría,
     ya había texto y el buscador lo había reemplazado por resultados. */
  .ms-search-bar__predictive:focus-within .ms-search-bar__results-wrapper {
    display: block;
  }

  .ms-search-bar__notice {
    margin: 0;
    padding: 0.75rem var(--page-margin, 1.5rem);
    text-align: center;
    opacity: 0.7;
  }

  /* ===========================================================================
     DESKTOP (>=750px): alineación (default derecha, junto a los iconos) + ancho máx. del input.
     =========================================================================== */
  @media screen and (min-width: 750px) {
    /* Ocultar la sección en desktop (cuando el header ya trae la barra inline). */
    .ms-search-bar--hide-desktop { display: none; }

    .ms-search-bar__predictive {
      width: min(100%, var(--ms-sb-input-maxw, 360px));
    }
    /* Alineación BULLETPROOF: margin-auto sobre el predictive (además de justify-content),
       así el campo se pega al borde aunque algo pise el justify-content del contenedor. */
    .ms-search-bar--align-right .ms-search-bar__inner { justify-content: flex-end; }
    .ms-search-bar--align-right .ms-search-bar__predictive { margin-inline-start: auto; margin-inline-end: 0; }
    .ms-search-bar--align-center .ms-search-bar__inner { justify-content: center; }
    .ms-search-bar--align-center .ms-search-bar__predictive { margin-inline: auto; }
    .ms-search-bar--align-left .ms-search-bar__inner { justify-content: flex-start; }
    .ms-search-bar--align-left .ms-search-bar__predictive { margin-inline-end: auto; margin-inline-start: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-search-bar__reset { transition: none; }
  }
/* END_SECTION:ms-search-bar */

/* START_SECTION:ms-testimonials (INDEX:53) */
.ms-testim {
    background-color: var(--color-background);
    color: var(--color-foreground);
    overflow: hidden;
  }

  .ms-testim__header {
    padding-inline: var(--page-margin, 1.25rem);
    max-width: var(--ms-tm-max, 1200px);
    margin-inline: auto;
    margin-block-end: 1.25rem;
  }

  .ms-testim__heading {
    margin: 0;
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .ms-testim__heading em {
    font-style: var(--ms-accent-style, italic);
    color: var(--ms-accent-ink, var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary))));
    text-decoration-line: var(--ms-accent-decoration, none);
    text-decoration-color: var(--ms-accent-color, var(--ms-accent-brand, var(--color-primary)));
    text-decoration-thickness: var(--ms-accent-thickness, 2px);
    text-underline-offset: var(--ms-accent-offset, 3px);
  }

  .ms-testim__sub {
    margin-block-start: 0.4rem;
    opacity: 0.75;
  }

  .ms-testim__sub > :first-child { margin-block-start: 0; }
  .ms-testim__sub > :last-child { margin-block-end: 0; }

  /* ── Carrusel ─────────────────────────────────────────────────────────── */
  .ms-testim__track {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-inline: var(--page-margin, 1.25rem);
    max-width: var(--ms-tm-max, 1200px);
    margin-inline: auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--ms-tm-card-min, 88vw);
    gap: var(--ms-tm-gap, 16px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .ms-testim__track::-webkit-scrollbar { display: none; }

  .ms-testim__item {
    scroll-snap-align: start;
    min-width: 0;
    display: flex;
  }

  .ms-testim__card {
    margin: 0;
    padding: var(--ms-tm-pad, 20px);
    border-radius: var(--ms-tm-radius, 16px);
    background: var(--ms-tm-card-bg, var(--color-background));
    border: var(--ms-border-width, 1px) solid var(--ms-border-color, rgb(var(--color-foreground-rgb, 0 0 0) / 0.1));
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  /* ── Cita ─────────────────────────────────────────────────────────────── */
  .ms-testim__quote {
    margin: 0;
    font-size: calc(var(--ms-tm-quote-size, 16) * 1px);
    line-height: 1.5;
    color: var(--ms-tm-quote, var(--color-foreground));
    quotes: "\201C" "\201D";
  }

  .ms-testim__quote::before { content: open-quote; }
  .ms-testim__quote::after { content: close-quote; }

  .ms-testim__mark {
    background: none;
    color: inherit;
    font-weight: 600;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .ms-testim--mark-soft .ms-testim__mark {
    background: var(--ms-tm-mark, var(--ms-accent-color, var(--ms-accent-brand, transparent)));
    padding-inline: 0.18em;
    border-radius: 0.2em;
  }

  .ms-testim--mark-underline .ms-testim__mark {
    text-decoration-line: underline;
    text-decoration-color: var(--ms-tm-mark, var(--ms-accent-color, var(--ms-accent-brand, currentColor)));
    text-decoration-thickness: 0.14em;
    text-underline-offset: 0.18em;
  }

  /* ── Quién lo dice ────────────────────────────────────────────────────── */
  .ms-testim__who {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: auto;
  }

  .ms-testim--av-top .ms-testim__who {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .ms-testim__avatar {
    inline-size: var(--ms-tm-avatar, 56px);
    block-size: var(--ms-tm-avatar, 56px);
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
  }

  .ms-testim__avatar--ph {
    display: grid;
    place-items: center;
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.45);
  }

  .ms-testim__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }

  .ms-testim__name {
    font-size: calc(var(--ms-tm-name-size, 15) * 1px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ms-tm-name, var(--color-foreground));
  }

  .ms-testim__link {
    color: inherit;
    text-decoration: none;
    /* Tap de 32px sin mover el diseno: el relleno es transparente. */
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }

  .ms-testim__link:hover { text-decoration: underline; }

  .ms-testim__role {
    font-size: calc(var(--ms-tm-role-size, 13) * 1px);
    line-height: 1.3;
    color: var(--ms-tm-role, var(--color-foreground));
    opacity: 0.7;
  }

  .ms-testim__label {
    margin-block-start: 0.2rem;
    align-self: flex-start;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--ms-radius-pill, 999px);
    background: var(--ms-tm-label-bg, rgb(var(--color-foreground-rgb, 0 0 0) / 0.06));
    color: var(--ms-tm-label-text, var(--color-foreground));
  }

  /* ── Desktop ──────────────────────────────────────────────────────────── */
  @media screen and (min-width: 750px) {
    .ms-testim__track {
      /* El asomo de la siguiente tarjeta vive en el .15 */
      grid-auto-columns: calc(
        (100% - (var(--ms-tm-gap, 16px) * var(--ms-tm-cols, 2))) / (var(--ms-tm-cols, 2) + 0.15)
      );
    }

    .ms-testim--fits .ms-testim__track {
      grid-auto-flow: row;
      grid-auto-columns: auto;
      grid-template-columns: repeat(var(--ms-tm-cols, 2), minmax(0, 1fr));
      overflow-x: visible;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-testim__track { scroll-behavior: auto; }
  }
/* END_SECTION:ms-testimonials */

/* START_SECTION:ms-ugc-grid (INDEX:54) */
/* ===========================================================================
     ms-ugc — CSS scopeado .ms-ugc__ · variables por instancia (#ms-ugc-{id})
     Colores SIEMPRE del scheme activo (var(--color-*)). Mobile-first.
     =========================================================================== */
  .ms-ugc {
    --ms-ugc-touch-min: var(--ms-touch-min, 44px);
    /* Tamano de los botones de control SOBRE el video (play, sonido, expandir).
       Mobile-first: chico y proporcional al tile angosto (~150px). En desktop
       sube al tamano tactil completo. NO afecta flechas/dots/cerrar del lightbox. */
    --ms-ugc-btn: 38px;
    --ms-ugc-btn-icon: 18px;
    color: var(--color-foreground);
    background-color: var(--color-background);
    display: block;
  }

  .ms-ugc__inner {
    width: 100%;
    /* el padding se SUMA al tope: así max_width es el ancho del CONTENIDO y
       esta sección alinea con las demás en vez de quedar 80px más estrecha */
    max-width: calc(var(--ms-ugc-max-width, 1280px) + (var(--page-margin, 1.5rem) * 2));
    margin-inline: auto;
    padding-inline: var(--page-margin, 1.5rem);
    box-sizing: border-box;
  }

  /* ── Encabezado centrado ───────────────────────────────────────────────── */
  .ms-ugc__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ms-space-2xs, 0.4rem);
    text-align: center;
    margin-block-end: var(--ms-space-md, 1.25rem);
  }

  .ms-ugc__heading {
    color: var(--color-foreground-heading, inherit);
    margin: 0;
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    font-size: var(--font-h2--size, clamp(1.5rem, 1rem + 2.4vw, 2.5rem));
    line-height: var(--font-h2--line-height, 1.1);
    letter-spacing: var(--font-h2--letter-spacing, normal);
    text-wrap: balance;
  }

  .ms-ugc__subheading {
    font-size: var(--font-body--size, 1rem);
    line-height: 1.5;
    opacity: 0.85;
    max-width: 60ch;
  }
  .ms-ugc__subheading > :first-child { margin-block-start: 0; }
  .ms-ugc__subheading > :last-child { margin-block-end: 0; }

  /* ===========================================================================
     GRID / CARRUSEL
     Mobile-first: por defecto carrusel scroll-snap (~150px por tile).
     Desktop (>=750px): grid de N columnas (salvo layout=carousel).
     =========================================================================== */
  .ms-ugc__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Mobile: carrusel deslizable */
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ms-ugc-gap, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    container-type: inline-size;
    /* sangrado para que asome el siguiente tile */
    margin-inline: calc(-1 * var(--page-margin, 1.5rem));
    padding-inline: var(--page-margin, 1.5rem);
    scroll-padding-inline: var(--page-margin, 1.5rem);
  }
  .ms-ugc__grid::-webkit-scrollbar { display: none; }

  .ms-ugc__item {
    flex: 0 0 auto;
    /* ~150px en mobile: ancho configurable; cae al % de columnas si no cabe. */
    width: clamp(150px, var(--ms-ugc-card-mobile, 150px), var(--ms-ugc-card-mobile-pct, 70cqw));
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-xs, 0.6rem);
  }

  /* ── Tile media 9:16 ───────────────────────────────────────────────────── */
  .ms-ugc__tile {
    position: relative;
    isolation: isolate;
    border-radius: var(--ms-ugc-radius, 12px);
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
  }

  .ms-ugc__media {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    width: 100%;
  }

  .ms-ugc__img,
  .ms-ugc__video,
  .ms-ugc__media :is(img, video, iframe, .deferred-media, .video-placeholder-wrapper) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ms-ugc__img--placeholder {
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
  }

  /* Eyebrow (etiqueta arriba-izq sobre la media) */
  .ms-ugc__eyebrow {
    position: absolute;
    inset-block-start: var(--ms-space-2xs, 0.5rem);
    inset-inline-start: var(--ms-space-2xs, 0.5rem);
    /* Reservar el ancho del boton expandir (top-right) + un gap, para que el texto
       del eyebrow no se solape con el en tiles angostas (mobile). */
    max-width: calc(100% - var(--ms-ugc-touch-min, 44px) - 1.5rem);
    box-sizing: border-box;
    z-index: var(--layer-raised, 2);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25em 0.6em;
    border-radius: var(--ms-radius-pill, 999px);
    background: rgb(var(--color-background-rgb, 255 255 255) / 0.88);
    color: var(--color-foreground);
    font-size: var(--font-size--xs, 0.75rem);
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.3;
    /* Convencion ms-: sin uppercase forzado en eyebrows/labels. */
    text-transform: none;
    pointer-events: none;
    backdrop-filter: blur(6px);
  }
  .ms-ugc__eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Boton play/pausa: centrado, semitransparente */
  .ms-ugc__play {
    position: absolute;
    inset-block-end: var(--ms-space-2xs, 0.5rem);
    inset-inline-start: var(--ms-space-2xs, 0.5rem);
    z-index: var(--layer-raised, 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ms-ugc-btn, 38px);
    height: var(--ms-ugc-btn, 38px);
    padding: 0;
    border: 0;
    border-radius: var(--ms-radius-round, 50%);
    background: rgb(var(--color-background-rgb, 255 255 255) / 0.85);
    color: var(--color-foreground);
    cursor: pointer;
    backdrop-filter: blur(6px);
  }
  /* El icono mostrado depende del estado data-playing */
  .ms-ugc__play .ms-ugc__play-icon--pause { display: none; }
  .ms-ugc__play[data-playing="true"] .ms-ugc__play-icon--play { display: none; }
  .ms-ugc__play[data-playing="true"] .ms-ugc__play-icon--pause { display: inline-flex; }
  .ms-ugc__play-icon { display: inline-flex; align-items: center; justify-content: center; }
  /* El SVG hereda el tamano del boton (el atributo width/height del SVG es solo
     el valor desktop por defecto; aqui lo gobierna --ms-ugc-btn-icon). */
  .ms-ugc__play-icon svg { width: var(--ms-ugc-btn-icon, 18px); height: var(--ms-ugc-btn-icon, 18px); }

  /* Disparador del lightbox: cubre la media salvo donde estan play/eyebrow.
     z-index por debajo del play para no robarle el click. */
  .ms-ugc__expand {
    position: absolute;
    inset-block-start: var(--ms-space-2xs, 0.5rem);
    inset-inline-end: var(--ms-space-2xs, 0.5rem);
    z-index: var(--layer-raised, 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ms-ugc-btn, 38px);
    height: var(--ms-ugc-btn, 38px);
    padding: 0;
    border: 0;
    border-radius: var(--ms-radius-round, 50%);
    background: rgb(var(--color-background-rgb, 255 255 255) / 0.85);
    color: var(--color-foreground);
    cursor: pointer;
    backdrop-filter: blur(6px);
  }
  .ms-ugc__expand-icon { display: inline-flex; align-items: center; justify-content: center; }
  .ms-ugc__expand-icon svg { width: var(--ms-ugc-btn-icon, 18px); height: var(--ms-ugc-btn-icon, 18px); }

  /* Boton de sonido (mute/unmute): abajo-derecha. No choca con play (abajo-izq),
     eyebrow (arriba-izq) ni expand (arriba-der). */
  .ms-ugc__sound {
    position: absolute;
    inset-block-end: var(--ms-space-2xs, 0.5rem);
    inset-inline-end: var(--ms-space-2xs, 0.5rem);
    z-index: var(--layer-raised, 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ms-ugc-btn, 38px);
    height: var(--ms-ugc-btn, 38px);
    padding: 0;
    border: 0;
    border-radius: var(--ms-radius-round, 50%);
    background: rgb(var(--color-background-rgb, 255 255 255) / 0.85);
    color: var(--color-foreground);
    cursor: pointer;
    backdrop-filter: blur(6px);
  }
  .ms-ugc__sound-icon { display: inline-flex; align-items: center; justify-content: center; }
  .ms-ugc__sound-icon svg { width: var(--ms-ugc-btn-icon, 18px); height: var(--ms-ugc-btn-icon, 18px); }
  /* Estado: data-muted="true" muestra el icono tachado; "false" el de sonido. */
  .ms-ugc__sound .ms-ugc__sound-icon--on { display: none; }
  .ms-ugc__sound[data-muted="false"] .ms-ugc__sound-icon--muted { display: none; }
  .ms-ugc__sound[data-muted="false"] .ms-ugc__sound-icon--on { display: inline-flex; }

  /* ── Estilo PREMIUM de los controles sobre el video (play · sonido · expandir) ──
     Reemplaza los círculos blancos opacos por un "glass" refinado: fondo translúcido
     + borde fino + sombra suave + blur fuerte. Aplica SOLO a las variantes "dark" y
     "light" (ajuste "Estilo de los controles"); la variante "classic" (por defecto)
     conserva el look original definido en las reglas por-botón de arriba. La
     especificidad extra (clase de variante + clase de botón) gana a esas reglas base. */
  :is(.ms-ugc--ctrl-dark, .ms-ugc--ctrl-light) :is(.ms-ugc__play, .ms-ugc__sound, .ms-ugc__expand) {
    background: var(--ms-ugc-ctrl-bg, rgb(20 18 16 / 0.46));
    color: var(--ms-ugc-ctrl-fg, #fff);
    border: 1px solid var(--ms-ugc-ctrl-border, rgb(255 255 255 / 0.2));
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    transition: background-color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) {
    :is(.ms-ugc--ctrl-dark, .ms-ugc--ctrl-light) :is(.ms-ugc__play, .ms-ugc__sound, .ms-ugc__expand):hover { transform: scale(1.06); }
  }
  /* El "expandir" es el más discreto: media opacidad en reposo, full al pasar el
     cursor sobre la pieza o al enfocarlo (solo desktop; en mobile queda visible). */
  @media (hover: hover) and (min-width: 750px) {
    :is(.ms-ugc--ctrl-dark, .ms-ugc--ctrl-light) .ms-ugc__expand { opacity: 0.78; }
    :is(.ms-ugc--ctrl-dark, .ms-ugc--ctrl-light) .ms-ugc__tile:hover .ms-ugc__expand,
    :is(.ms-ugc--ctrl-dark, .ms-ugc--ctrl-light) .ms-ugc__expand:focus-visible { opacity: 1; }
  }

  /* Variante "Vidrio claro": override de las variables (sobre la base glass premium). */
  .ms-ugc--ctrl-light {
    --ms-ugc-ctrl-bg: rgb(var(--color-background-rgb, 255 255 255) / 0.82);
    --ms-ugc-ctrl-fg: var(--color-foreground);
    --ms-ugc-ctrl-border: rgb(var(--color-foreground-rgb, 0 0 0) / 0.08);
  }

  /* ── Mini-card shoppable ───────────────────────────────────────────────── */
  .ms-ugc__card {
    display: flex;
    align-items: center;
    gap: var(--ms-space-2xs, 0.5rem);
    padding: var(--ms-space-2xs, 0.5rem);
    border: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.18);
    border-radius: var(--ms-radius-md, 10px);
    background: var(--color-background);
  }

  .ms-ugc__card-media {
    flex: 0 0 auto;
    display: block;
    width: 48px;
    height: 48px;
    border-radius: var(--ms-radius-sm, 6px);
    overflow: hidden;
  }
  .ms-ugc__card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ms-ugc__card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .ms-ugc__card-kicker {
    font-size: var(--font-size--2xs, 0.6875rem);
    opacity: 0.6;
    text-transform: none;
    line-height: 1.2;
  }

  .ms-ugc__card-title {
    font-size: var(--font-size--sm, 0.8125rem);
    font-weight: var(--ms-w-medium, 500);
    color: var(--color-foreground);
    text-decoration: none;
    line-height: 1.2;
    /* Truncar a 1 linea para mantener compacta la mini-card */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ms-ugc__card-title:hover { text-decoration: underline; }

  .ms-ugc__card .ms-price { font-size: var(--ms-t-label); }

  /* ── Texto bajo la pieza (influencer / autoridad) ──────────────────────── */
  .ms-ugc__caption {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: center;
    padding-inline: 0.15rem;
  }
  .ms-ugc__caption-title {
    font-family: var(--font-primary--family, var(--font-heading--family, inherit));
    font-size: var(--font-size--sm, 0.875rem);
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.25;
    color: var(--color-foreground);
  }
  .ms-ugc__caption-subtitle {
    font-size: var(--font-size--xs, 0.75rem);
    line-height: 1.35;
    opacity: 0.7;
  }

  /* ── Arrows (carrusel) ─────────────────────────────────────────────────── */
  .ms-ugc__arrows {
    display: flex;
    justify-content: center;
    gap: var(--ms-space-2xs, 0.5rem);
    margin-block-start: var(--ms-space-md, 1.25rem);
  }

  /* ── Desktop: las flechas suben a la cabecera ──────────────────────────────
     Debajo del riel obligan a bajar la vista, terminar de leer la fila y
     regresar; y sobre todo NO se ven hasta que ya pasaste de largo, así que
     nadie descubre que hay más tarjetas. Arriba, a la altura del titular,
     anuncian el desplazamiento antes de que la fila se lea como completa.
     Se hace con position:absolute y NO moviendo el markup a propósito: los
     botones llevan ref="prev"/"next" y on:click, y sacarlos de su sitio en el
     DOM rompería el enlace con el componente. */
  @media screen and (min-width: 750px) {
    .ms-ugc__inner { position: relative; }
    .ms-ugc--carousel-desktop .ms-ugc__arrows {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: var(--page-margin, 1.5rem);
      margin-block-start: 0;
      z-index: 2;
    }
    /* aire para que las flechas no pisen un titular largo */
    .ms-ugc--carousel-desktop .ms-ugc__header { padding-inline-end: 7rem; }
    /* los dots son el affordance de móvil (se arrastra); en desktop manda la flecha */
    .ms-ugc--carousel-desktop .ms-ugc__dots { display: none; }
  }
  .ms-ugc__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ms-ugc-touch-min, 44px);
    height: var(--ms-ugc-touch-min, 44px);
    padding: 0;
    border: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb, 0 0 0)) / 0.4);
    border-radius: var(--ms-radius-round, 50%);
    background: var(--color-background);
    color: var(--color-foreground);
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
  }
  .ms-ugc__arrow:hover { background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06); }
  .ms-ugc__arrow:disabled { opacity: 0.35; cursor: not-allowed; }
  ms-ugc-component[data-no-overflow] .ms-ugc__arrows { display: none; }

  /* ── Dots ──────────────────────────────────────────────────────────────── */
  .ms-ugc__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-block-start: var(--ms-space-md, 1.25rem);
  }
  .ms-ugc__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Caja angosta para que los dots se vean agrupados; conserva altura tactil
       completa (>=44px) aunque el punto visible sea pequeno. */
    width: 1.25rem;
    height: var(--ms-ugc-touch-min, 44px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .ms-ugc__dot-fill {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: var(--ms-radius-round, 50%);
    background: var(--color-foreground);
    opacity: 0.3;
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
  }
  .ms-ugc__dot.is-active .ms-ugc__dot-fill,
  .ms-ugc__dot[aria-current='true'] .ms-ugc__dot-fill {
    opacity: 1;
    transform: scale(1.35);
    background: var(--color-primary);
  }
  ms-ugc-component[data-no-overflow] .ms-ugc__dots { display: none; }

  /* ── Empty (editor) ────────────────────────────────────────────────────── */
  .ms-ugc__empty {
    margin: 0;
    padding: 2rem 0;
    text-align: center;
    opacity: 0.7;
  }

  /* ===========================================================================
     LIGHTBOX
     =========================================================================== */
  .ms-ugc__lightbox {
    width: min(92vw, 520px);
    max-width: 520px;
    max-height: 92svh;
    padding: 0;
    border: 0;
    border-radius: var(--ms-radius-lg, 16px);
    background: var(--color-background);
    color: var(--color-foreground);
    overflow: hidden;
  }
  .ms-ugc__lightbox::backdrop {
    background: rgb(0 0 0 / 0.72);
  }
  /* Respaldo cuando se abre por atributo (sin showModal nativo). */
  .ms-ugc__lightbox[open] {
    position: fixed;
    inset: 0;
    margin: auto;
    z-index: var(--layer-overlay, 100);
  }
  .ms-ugc__lightbox:not([open]) { display: none; }

  .ms-ugc__lightbox-inner {
    position: relative;
  }
  .ms-ugc__lightbox-stage {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
  }
  .ms-ugc__lightbox-stage :is(img, video) {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .ms-ugc__lightbox-close {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ms-ugc-touch-min, 44px);
    height: var(--ms-ugc-touch-min, 44px);
    padding: 0;
    border: 0;
    border-radius: var(--ms-radius-round, 50%);
    background: rgb(var(--color-background-rgb, 255 255 255) / 0.9);
    color: var(--color-foreground);
    cursor: pointer;
    backdrop-filter: blur(6px);
  }

  /* ===========================================================================
     DESKTOP (>=750px)
     =========================================================================== */
  @media screen and (min-width: 750px) {
    /* Botones de control del video al tamano tactil completo en pantallas
       grandes (los tiles ya no son angostos). Mobile conserva el valor chico. */
    .ms-ugc {
      --ms-ugc-btn: var(--ms-ugc-touch-min, 44px);
      --ms-ugc-btn-icon: 20px;
    }

    /* layout=grid: rejilla real de N columnas, sin scroll horizontal */
    .ms-ugc--grid .ms-ugc__grid {
      display: grid;
      grid-template-columns: repeat(var(--ms-ugc-cols-desktop, 4), minmax(0, 1fr));
      overflow: visible;
      scroll-snap-type: none;
      container-type: normal;
      margin-inline: 0;
      padding-inline: 0;
      scroll-padding-inline: 0;
    }
    .ms-ugc--grid .ms-ugc__item { width: auto; }

    /* layout=grid: dots/flechas sobran en desktop */
    .ms-ugc--grid .ms-ugc__dots,
    .ms-ugc--grid .ms-ugc__arrows { display: none; }

    /* layout=carousel: se conserva el carrusel con N columnas a la vista */
    .ms-ugc--carousel-desktop .ms-ugc__grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      container-type: inline-size;
    }
    .ms-ugc--carousel-desktop .ms-ugc__item {
      width: calc(
        (100% - (var(--ms-ugc-gap, 16px) * (var(--ms-ugc-cols-desktop, 4) - 1))) /
          var(--ms-ugc-cols-desktop, 4)
      );
    }

    .ms-ugc__lightbox { width: min(80vw, 460px); }
  }

  /* ===========================================================================
     a11y — foco visible + reduced motion
     =========================================================================== */
  .ms-ugc :is(.ms-ugc__play, .ms-ugc__sound, .ms-ugc__expand, .ms-ugc__arrow, .ms-ugc__dot, .ms-ugc__card-title, .ms-ugc__lightbox-close):focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
    border-radius: var(--ms-radius-sm, 4px);
  }
  .ms-ugc__grid:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 4px;
    border-radius: var(--ms-radius-md, 8px);
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-ugc__grid { scroll-behavior: auto; }
    .ms-ugc__arrow,
    .ms-ugc__dot-fill { transition: none; }
  }
/* END_SECTION:ms-ugc-grid */

/* START_SECTION:password (INDEX:56) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-content {
    text-align: center;
  }

  .password-enter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-enter__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    a {
      display: flex;
    }

    svg {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-enter__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-enter__admin-link {
    margin: 0;
  }

  .password-enter__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SECTION:password */

/* START_SECTION:predictive-search (INDEX:58) */
input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

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

  .header[transparent] :is(.predictive-search):not(:focus-within) {
    background-color: transparent;
  }

  .header[transparent] .predictive-search-form__header-inner {
    border-color: var(--color-foreground);
  }

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

  /* ── REGLA RETIRADA (30-ago-2026) ──────────────────────────────────────────
     Aquí vivía un `.dialog-modal[open] { @media (max-width:749px){ border-radius:0 } }`
     SIN apuntar a nada. Como las hojas de estilo de TODAS las secciones compilan a
     UN bundle global, esa regla cuadraba en móvil TODOS los modales de la tienda
     —guía de tallas, quick-add, los que vengan— con (0,2,0), por encima de su
     propio radio. Se detectó en Grounded: el popup de tallas salía con esquinas
     rectas contra una marca redonda.

     No se sustituye por una versión apuntada porque NO HACE FALTA: el modal de
     búsqueda ya recibe su radio 0 de móvil de su propio snippet, bien apuntado
     (`snippets/search-modal.liquid`: `.dialog-modal[open].search-modal__content`).
     Esta era pura duplicación que además se desbordaba.

     El resto de reglas de esta sección sí van apuntadas (`.dialog-modal .predictive-*`);
     esta era la única suelta. COSECHABLE al tema maestro: le pasa a cualquier cliente.
     ───────────────────────────────────────────────────────────────────────── */

  .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: var(--ms-w-medium, 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: var(--ms-w-body, 400);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .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__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: var(--ms-w-medium, 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__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    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 {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

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

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

  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);
    }
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-benefits (INDEX:59) */
.product-benefits__inner {
    padding-inline: 0;
  }

  .product-benefits__headline {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-style: normal;
    text-align: center;
    margin-block-end: 2.5rem;
    max-width: 42rem;
    margin-inline: auto;
    line-height: 1.25;
    color: rgb(var(--color-foreground));
  }

  .product-benefits__headline-main {
    display: block;
  }

  .product-benefits__headline-italic {
    display: block;
  }

  .product-benefits__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    justify-items: center;
  }

  @media screen and (min-width: 750px) {
    .product-benefits__grid {
      grid-template-columns: 1fr auto 1fr;
      gap: 2rem 3rem;
      align-items: center;
    }
  }

  .product-benefits__column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: 25rem;
  }

  @media screen and (max-width: 749px) {
    .product-benefits--mobile-image-first .product-benefits__column--left { order: 2; }
    .product-benefits--mobile-image-first .product-benefits__column--center { order: 1; }
    .product-benefits--mobile-image-first .product-benefits__column--right { order: 3; }
    .product-benefits--mobile-image-middle .product-benefits__column--left { order: 1; }
    .product-benefits--mobile-image-middle .product-benefits__column--center { order: 2; }
    .product-benefits--mobile-image-middle .product-benefits__column--right { order: 3; }
    .product-benefits--mobile-image-last .product-benefits__column--left { order: 1; }
    .product-benefits--mobile-image-last .product-benefits__column--center { order: 3; }
    .product-benefits--mobile-image-last .product-benefits__column--right { order: 2; }

    /* Two benefits: show side by side in one row on mobile */
    .product-benefits--two-benefits .product-benefits__grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
    }
    .product-benefits--two-benefits .product-benefits__column--left,
    .product-benefits--two-benefits .product-benefits__column--right {
      max-width: none;
    }
    .product-benefits--two-benefits .product-benefits__column--left { grid-column: 1; }
    .product-benefits--two-benefits .product-benefits__column--right { grid-column: 2; }
    .product-benefits--two-benefits .product-benefits__column--center { grid-column: 1 / -1; }
    .product-benefits--mobile-image-first.product-benefits--two-benefits .product-benefits__column--left,
    .product-benefits--mobile-image-first.product-benefits--two-benefits .product-benefits__column--right { grid-row: 2; }
    .product-benefits--mobile-image-first.product-benefits--two-benefits .product-benefits__column--center { grid-row: 1; }
    .product-benefits--mobile-image-middle.product-benefits--two-benefits .product-benefits__column--left,
    .product-benefits--mobile-image-middle.product-benefits--two-benefits .product-benefits__column--right { grid-row: 1; }
    .product-benefits--mobile-image-middle.product-benefits--two-benefits .product-benefits__column--center,
    .product-benefits--mobile-image-last.product-benefits--two-benefits .product-benefits__column--center { grid-row: 2; }
    .product-benefits--mobile-image-last.product-benefits--two-benefits .product-benefits__column--left,
    .product-benefits--mobile-image-last.product-benefits--two-benefits .product-benefits__column--right { grid-row: 1; }
  }

  @media screen and (min-width: 750px) {
    .product-benefits__column--left {
      justify-self: end;
      align-items: flex-end;
      text-align: right;
    }

    .product-benefits__column--center {
      max-width: var(--product-benefits-image-max-width-desktop, 500px);
    }

    .product-benefits__column--right {
      justify-self: start;
      align-items: flex-start;
      text-align: left;
    }
  }

  .product-benefits__image-wrap {
    width: 100%;
    max-width: var(--product-benefits-image-max-width-mobile, 200px);
    margin-inline: auto;
    border-radius: var(--product-benefits-image-border-radius, 0);
    overflow: hidden;
    border-width: var(--product-benefits-image-border-width, 0);
    border-style: var(--product-benefits-image-border-style, none);
  }

  .product-benefits:not(.product-benefits--image-border-color-custom) .product-benefits__image-wrap {
    border-color: rgb(var(--color-foreground) / var(--product-benefits-image-border-opacity, 1));
  }

  .product-benefits--image-border-color-custom .product-benefits__image-wrap {
    border-color: var(--product-benefits-image-border-color);
  }

  @media screen and (min-width: 750px) {
    .product-benefits__image-wrap {
      max-width: var(--product-benefits-image-max-width-desktop, 280px);
    }
  }

  .product-benefits__image {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .product-benefit {
    color: rgb(var(--color-foreground));
  }

  .product-benefit__icon,
  .product-benefit__media {
    width: var(--product-benefit-icon-size, 2rem);
    height: var(--product-benefit-icon-size, 2rem);
    margin-block-end: 0.35rem;
    color: rgb(var(--color-foreground));
    flex-shrink: 0;
  }

  .product-benefit--icon-color-custom .product-benefit__icon,
  .product-benefit--icon-color-custom .product-benefit__media {
    color: var(--product-benefit-icon-color);
  }

  .product-benefit__media--has-bg {
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
  }

  .product-benefit__media .product-benefit__icon-svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .product-benefit__icon-bg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--product-benefit-icon-size) * var(--product-benefit-icon-bg-scale, 1.5));
    height: calc(var(--product-benefit-icon-size) * var(--product-benefit-icon-bg-scale, 1.5));
    min-width: calc(var(--product-benefit-icon-size) / 2);
    min-height: calc(var(--product-benefit-icon-size) / 2);
    margin-inline: inherit;
  }
  .product-benefit__icon-bg img{
    width:var(--product-benefit-icon-size);
    min-width:var(--product-benefit-icon-size);
    height:auto;
  }

  .product-benefit__icon-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--product-benefit-icon-bg-color);
    opacity: var(--product-benefit-icon-bg-opacity, 0.8);
    border-radius: inherit;
    z-index: 0;
  }

  .product-benefit__icon-bg--gradient::before {
    background-color: transparent;
    background-image: var(--product-benefit-icon-bg-gradient);
  }

  .product-benefit__icon-bg > * {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    z-index: 1;
    pointer-events: none;
  }

  .product-benefit__icon-bg--circle {
    border-radius: var(--ms-radius-round, 50%);
  }

  .product-benefit__icon-bg--organic {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }

  .product-benefit__icon-bg .product-benefit__icon-svg {
    width: var(--product-benefit-icon-size);
    height: var(--product-benefit-icon-size);
    min-width: var(--product-benefit-icon-size);
    max-width: var(--product-benefit-icon-size);
    min-height: var(--product-benefit-icon-size);
    max-height: var(--product-benefit-icon-size);
    flex-shrink: 0;
    display: block;
    vertical-align: middle;
  }

  .product-benefit__icon-bg .product-benefit__image {
    width: var(--product-benefit-icon-size);
    height: var(--product-benefit-icon-size);
    min-width: var(--product-benefit-icon-size);
    max-width: var(--product-benefit-icon-size);
    min-height: var(--product-benefit-icon-size);
    max-height: var(--product-benefit-icon-size);
    flex-shrink: 0;
    object-fit: contain;
  }

  .product-benefit__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .product-benefits__column--left .product-benefit__icon,
  .product-benefits__column--left .product-benefit__media {
    margin-inline-start: auto;
  }

  @media screen and (max-width: 749px) {
    .product-benefits__column--left .product-benefit__icon,
    .product-benefits__column--left .product-benefit__media {
      margin-inline-start: inherit;
    }
    .product-benefits__column {
      flex-direction: row;
    }
  }

  .product-benefits__column--right .product-benefit__icon,
  .product-benefits__column--right .product-benefit__media {
    margin-inline-end: auto;
  }

  @media screen and (max-width: 749px) {
    .product-benefits--mobile-center .product-benefits__column {
      align-items: flex-start;
      text-align: center;
    }
    .product-benefits--mobile-center .product-benefits__column--left .product-benefit__icon,
    .product-benefits--mobile-center .product-benefits__column--left .product-benefit__media,
    .product-benefits--mobile-center .product-benefits__column--right .product-benefit__icon,
    .product-benefits--mobile-center .product-benefits__column--right .product-benefit__media {
      margin-inline: auto;
    }
    .product-benefits--mobile-center .product-benefit {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  .product-benefit__tag {
    display: inline-block;
    font-family: var(--font-subheading--family);
    font-size: 0.75rem;
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: var(--ms-tracking-label, 0.06em);
    line-height: 1.2;
    text-transform: var(--ms-case-label, uppercase);
    opacity: 0.75;
    margin-block-start: 0.5rem;
    margin-block-end: 0.25rem;
  }

  .product-benefit__title {
    font-family: var(--font-body--family);
    font-weight: var(--ms-w-medium, 500);
    font-size: 1rem;
    line-height: 1.3;
    margin-block-end: 0.5rem;
    margin-block-start: 0.25rem;
  }

  .product-benefit__description {
    font-size: 0.9375rem;
    opacity: 0.9;
    margin-block-start: 0.5rem;
  }
/* END_SECTION:product-benefits */

/* START_SECTION:product-hotspots (INDEX:60) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    product-hotspot-component.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Hide dialog on small viewports — hotspot uses global quick-add modal (Horizon parity).
     Avoids in-dialog quick-add tap issues on touch, especially single-variant (add button hidden by default). */
  @media screen and (max-width: 749px) {
    product-hotspot-component .hotspot-dialog {
      display: none !important;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  product-hotspot-component {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  product-hotspot-component:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  product-hotspot-component .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    product-hotspot-component:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  product-hotspot-component .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  product-hotspot-component .hotspot-dialog:is(:focus, :focus-visible),
  product-hotspot-component .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  product-hotspot-component .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  product-hotspot-component .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  product-hotspot-component .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    product-hotspot-component .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  product-hotspot-component .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button - ensure visible on mobile (overrides quick-add snippet default of display: none) */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      display: flex;
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--color-foreground);
      background-color: var(--color-background);
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-recommendations (INDEX:63) */
.product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: var(--ms-radius-sm, 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_SECTION:product-recommendations */

/* START_SECTION:quick-order-list (INDEX:64) */
.quick-order-list {
    --quantity-selector-width: 100px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

  .variant-item__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

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

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:sale-announcement-bar (INDEX:66) */
.sale-announcement-bar {
    position: relative;
    width: 100%;
    background: linear-gradient(to right, var(--sab-gradient-start), var(--sab-gradient-end));
    color: var(--sab-text-color);
    padding-block: var(--sab-padding-block);
    padding-inline: var(--sab-padding-inline);
  }

  .sale-announcement-bar__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: var(--page-width, 1200px);
    margin-inline: auto;
  }

  .sale-announcement-bar__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: calc(var(--sab-font-size) + 2px);
    height: calc(var(--sab-font-size) + 2px);
  }

  .sale-announcement-bar__icon svg {
    width: 100%;
    height: 100%;
  }

  .sale-announcement-bar__text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.5rem;
    margin: 0;
    font-size: var(--sab-font-size);
    line-height: 1.2;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .sale-announcement-bar__separator {
    opacity: 0.85;
  }

  .sale-announcement-bar__compare-price {
    text-decoration: line-through;
    opacity: 0.9;
    margin-inline-end: 0.15rem;
  }

  .sale-announcement-bar__now-label {
    margin-inline: 0.15rem;
  }

  .sale-announcement-bar__sale-price {
    color: var(--sab-price-color);
    font-weight: var(--sab-price-weight);
  }

  .sale-announcement-bar__timer {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    white-space: nowrap;
  }

  .sale-announcement-bar__timer-value {
    color: var(--sab-timer-color);
    font-weight: var(--sab-timer-weight);
  }

  .sale-announcement-bar__expired {
    color: var(--sab-timer-color);
  }

  .sale-announcement-bar__link {
    position: absolute;
    inset: 0;
  }

  .sale-announcement-bar--expired .sale-announcement-bar__timer {
    display: none;
  }

  .sale-announcement-bar--expired[data-expired-behavior="show_text"] .sale-announcement-bar__expired {
    display: inline;
  }

  .sale-announcement-bar--hidden {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .sale-announcement-bar__text {
      font-size: calc(var(--sab-font-size) * 0.875);
    }
  }
/* END_SECTION:sale-announcement-bar */

/* START_SECTION:section-divider (INDEX:69) */
.section-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .section-divider__svg {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
  }

  /* Curved style */
  .section-divider__curved {
    height: var(--section-divider-height, 120px);
    background: var(--color-background);
  }

  .section-divider__curved .section-divider__svg {
    height: 100%;
    width: 100%;
  }

  /* Wavy style */
  .section-divider__wavy {
    position: relative;
    min-height: var(--section-divider-height, 200px);
    background: transparent;
    overflow: hidden;
  }

  .section-divider__wavy-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    pointer-events: none;
  }

  .section-divider__wavy .section-divider__svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: var(--section-divider-height, 120px);
  }

  /* Angular style */
  .section-divider__angular {
    height: var(--section-divider-height, 150px);
    position: relative;
    overflow: hidden;
  }

  .section-divider__angular .section-divider__svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Shape-based styles (droplet, abstract, splash, etc.) */
  .section-divider__shape {
    position: relative;
    height: var(--section-divider-height, 150px);
    background: transparent;
    overflow: hidden;
  }

  .section-divider__shape .section-divider__svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .section-divider__multi-wave-inner {
    position: absolute;
    inset: 0;
    width: 100%;
  }

  .section-divider__multi-wave-inner .section-divider__svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Flip transforms - use > child selector for shape SVG to avoid double-flip on multi-wave (SVG inside multi-wave-inner) */
  .section-divider--flip-h .section-divider__curved .section-divider__svg,
  .section-divider--flip-h .section-divider__wavy-inner,
  .section-divider--flip-h .section-divider__angular .section-divider__svg,
  .section-divider--flip-h .section-divider__shape > .section-divider__svg,
  .section-divider--flip-h .section-divider__multi-wave-inner {
    transform: scaleX(-1);
  }

  .section-divider--flip-h .section-divider__wavy-inner {
    transform: rotate(180deg) scaleX(-1);
  }

  .section-divider--flip-v .section-divider__curved .section-divider__svg,
  .section-divider--flip-v .section-divider__wavy-inner,
  .section-divider--flip-v .section-divider__angular .section-divider__svg,
  .section-divider--flip-v .section-divider__shape > .section-divider__svg,
  .section-divider--flip-v .section-divider__multi-wave-inner {
    transform: scaleY(-1);
  }

  .section-divider--flip-v .section-divider__wavy-inner {
    transform: rotate(180deg) scaleY(-1);
  }

  .section-divider--flip-h.section-divider--flip-v .section-divider__curved .section-divider__svg,
  .section-divider--flip-h.section-divider--flip-v .section-divider__wavy-inner,
  .section-divider--flip-h.section-divider--flip-v .section-divider__angular .section-divider__svg,
  .section-divider--flip-h.section-divider--flip-v .section-divider__shape > .section-divider__svg,
  .section-divider--flip-h.section-divider--flip-v .section-divider__multi-wave-inner {
    transform: scale(-1);
  }

  .section-divider--flip-h.section-divider--flip-v .section-divider__wavy-inner {
    transform: rotate(180deg) scale(-1);
  }

  .section-divider--flip-h .section-divider__curved .section-divider__svg,
  .section-divider--flip-h .section-divider__wavy-inner,
  .section-divider--flip-h .section-divider__angular .section-divider__svg,
  .section-divider--flip-h .section-divider__shape > .section-divider__svg,
  .section-divider--flip-h .section-divider__multi-wave-inner,
  .section-divider--flip-v .section-divider__curved .section-divider__svg,
  .section-divider--flip-v .section-divider__wavy-inner,
  .section-divider--flip-v .section-divider__angular .section-divider__svg,
  .section-divider--flip-v .section-divider__shape > .section-divider__svg,
  .section-divider--flip-v .section-divider__multi-wave-inner,
  .section-divider--flip-h.section-divider--flip-v .section-divider__curved .section-divider__svg,
  .section-divider--flip-h.section-divider--flip-v .section-divider__wavy-inner,
  .section-divider--flip-h.section-divider--flip-v .section-divider__angular .section-divider__svg,
  .section-divider--flip-h.section-divider--flip-v .section-divider__shape > .section-divider__svg,
  .section-divider--flip-h.section-divider--flip-v .section-divider__multi-wave-inner {
    transform-origin: center center;
  }

  /* Wave: container translate with large overflow buffer to avoid white space */
  @keyframes section-divider-wave {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(4%); }
    50% { transform: translateX(-4%); }
    75% { transform: translateX(4%); }
  }

  @keyframes section-divider-wave-wavy {
    0%, 100% { transform: translateX(0) rotate(180deg); }
    25% { transform: translateX(4%) rotate(180deg); }
    50% { transform: translateX(-4%) rotate(180deg); }
    75% { transform: translateX(4%) rotate(180deg); }
  }

  @keyframes section-divider-wave-flip-h {
    0%, 100% { transform: translateX(0) scaleX(-1); }
    25% { transform: translateX(-4%) scaleX(-1); }
    50% { transform: translateX(4%) scaleX(-1); }
    75% { transform: translateX(-4%) scaleX(-1); }
  }

  @keyframes section-divider-wave-wavy-flip-h {
    0%, 100% { transform: translateX(0) rotate(180deg) scaleX(-1); }
    25% { transform: translateX(-4%) rotate(180deg) scaleX(-1); }
    50% { transform: translateX(4%) rotate(180deg) scaleX(-1); }
    75% { transform: translateX(-4%) rotate(180deg) scaleX(-1); }
  }

  @keyframes section-divider-wave-flip-v {
    0%, 100% { transform: translateX(0) scaleY(-1); }
    25% { transform: translateX(4%) scaleY(-1); }
    50% { transform: translateX(-4%) scaleY(-1); }
    75% { transform: translateX(4%) scaleY(-1); }
  }

  @keyframes section-divider-wave-wavy-flip-v {
    0%, 100% { transform: translateX(0) rotate(180deg) scaleY(-1); }
    25% { transform: translateX(4%) rotate(180deg) scaleY(-1); }
    50% { transform: translateX(-4%) rotate(180deg) scaleY(-1); }
    75% { transform: translateX(4%) rotate(180deg) scaleY(-1); }
  }

  @keyframes section-divider-wave-flip-both {
    0%, 100% { transform: translateX(0) scaleX(-1) scaleY(-1); }
    25% { transform: translateX(-4%) scaleX(-1) scaleY(-1); }
    50% { transform: translateX(4%) scaleX(-1) scaleY(-1); }
    75% { transform: translateX(-4%) scaleX(-1) scaleY(-1); }
  }

  @keyframes section-divider-wave-wavy-flip-both {
    0%, 100% { transform: translateX(0) rotate(180deg) scaleX(-1) scaleY(-1); }
    25% { transform: translateX(-4%) rotate(180deg) scaleX(-1) scaleY(-1); }
    50% { transform: translateX(4%) rotate(180deg) scaleX(-1) scaleY(-1); }
    75% { transform: translateX(-4%) rotate(180deg) scaleX(-1) scaleY(-1); }
  }

  @keyframes section-divider-wave-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2%); }
  }

  @keyframes section-divider-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
  }

  @keyframes section-divider-float-wavy {
    0%, 100% { transform: translateY(0) rotate(180deg); }
    50% { transform: translateY(-15px) rotate(180deg); }
  }

  @keyframes section-divider-float-wavy-flip-h {
    0%, 100% { transform: translateY(0) rotate(180deg) scaleX(-1); }
    50% { transform: translateY(-15px) rotate(180deg) scaleX(-1); }
  }

  @keyframes section-divider-float-wavy-flip-v {
    0%, 100% { transform: translateY(0) rotate(180deg) scaleY(-1); }
    50% { transform: translateY(-15px) rotate(180deg) scaleY(-1); }
  }

  @keyframes section-divider-float-wavy-flip-both {
    0%, 100% { transform: translateY(0) rotate(180deg) scale(-1); }
    50% { transform: translateY(-15px) rotate(180deg) scale(-1); }
  }

  @keyframes section-divider-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.88; transform: scale(1.06); }
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Buffer for vertical animations: extend content so translateY doesn't reveal white space */
    .section-divider--animate-float .section-divider__curved {
      position: relative;
      overflow: hidden;
    }

    .section-divider--animate-float .section-divider__curved .section-divider__svg,
    .section-divider--animate-float .section-divider__wavy-inner,
    .section-divider--animate-float .section-divider__angular .section-divider__svg,
    .section-divider--animate-float .section-divider__shape .section-divider__svg,
    .section-divider--animate-float .section-divider__multi-wave-inner {
      height: calc(100% + 30px);
      top: -15px;
      bottom: auto;
      position: absolute;
      left: 0;
      width: 100%;
    }

    .section-divider--animate-wave .section-divider__shape .section-divider__svg {
      height: calc(100% + 10px);
      top: -3px;
      bottom: auto;
    }

    /* Wave: wide container + translate; 25% buffer prevents white space (4% move on 150% = 6% of parent) */
    .section-divider--animate-wave .section-divider__wavy-inner {
      width: 150%;
      left: -25%;
      right: auto;
      animation: section-divider-wave-wavy var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-wave.section-divider--flip-h .section-divider__wavy-inner {
      animation: section-divider-wave-wavy-flip-h var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-wave.section-divider--flip-v .section-divider__wavy-inner {
      animation: section-divider-wave-wavy-flip-v var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-wave.section-divider--flip-h.section-divider--flip-v .section-divider__wavy-inner {
      animation: section-divider-wave-wavy-flip-both var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-wave .section-divider__multi-wave-inner {
      width: 150%;
      left: -25%;
      right: auto;
      animation: section-divider-wave var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-wave.section-divider--flip-h .section-divider__multi-wave-inner {
      animation: section-divider-wave-flip-h var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-wave.section-divider--flip-v .section-divider__multi-wave-inner {
      animation: section-divider-wave-flip-v var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-wave.section-divider--flip-h.section-divider--flip-v .section-divider__multi-wave-inner {
      animation: section-divider-wave-flip-both var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-wave .section-divider__shape .section-divider__svg path {
      animation: section-divider-wave-float var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-float .section-divider__curved .section-divider__svg,
    .section-divider--animate-float .section-divider__angular .section-divider__svg,
    .section-divider--animate-float .section-divider__shape .section-divider__svg,
    .section-divider--animate-float .section-divider__multi-wave-inner {
      animation: section-divider-float var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-float .section-divider__wavy-inner {
      animation: section-divider-float-wavy var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-float.section-divider--flip-h .section-divider__wavy-inner {
      animation: section-divider-float-wavy-flip-h var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-float.section-divider--flip-v .section-divider__wavy-inner {
      animation: section-divider-float-wavy-flip-v var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-float.section-divider--flip-h.section-divider--flip-v .section-divider__wavy-inner {
      animation: section-divider-float-wavy-flip-both var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }

    .section-divider--animate-pulse .section-divider__curved,
    .section-divider--animate-pulse .section-divider__wavy,
    .section-divider--animate-pulse .section-divider__angular,
    .section-divider--animate-pulse .section-divider__shape {
      animation: section-divider-pulse var(--section-divider-animation-duration, 8s) ease-in-out infinite;
    }
  }
/* END_SECTION:section-divider */

/* START_SECTION:slideshow (INDEX:73) */
.slideshow-section .slide__content {
      max-width: var(--page-width);
      margin-inline: auto;
      width: 100%;
      padding-inline: var(--page-margin);
      box-sizing: border-box;
    }

    

    .slideshow-section {
      slideshow-arrows .slideshow-control:first-of-type {
        margin-inline-start: var(--padding-xs);
      }
  
      slideshow-arrows .slideshow-control:last-of-type {
        margin-inline-end: var(--padding-xs);
      }
  
      .slideshow--with-hints--mobile-with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }
  
      /* Hide navigation arrows at boundaries for with-hints mode */
      .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }
  
      /* Override animation for boundary arrows in with-hints mode on hover */
      slideshow-component.slideshow--with-hints--mobile-with-hints:has(
          slideshow-slide:first-child:not([aria-hidden='true'])
        )
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints--mobile-with-hints:has(
          slideshow-slide:last-child:not([aria-hidden='true'])
        )
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
  
      @media screen and (max-width: 749px) {
        .slideshow--with-hints--mobile-with-hints slideshow-slides {
          padding-inline: var(--page-margin);
        }
  
        .slideshow--with-hints--mobile-with-hints slideshow-slide {
          width: 96%;
        }
  
        .slideshow--with-hints--mobile-with-hints slideshow-slides {
          gap: min(var(--slideshow-gap, 0), 10px);
        }
      }
  
      @media screen and (min-width: 750px) {
        .slideshow--with-hints {
          gap: var(--slideshow-gap, 0);
          grid-column: 1 / -1;
        }
  
        .slideshow--with-hints slideshow-slides {
          padding-inline: var(--page-margin);
          gap: var(--slideshow-gap, 0);
        }
  
        .slideshow--with-hints slideshow-slide {
          width: calc((100vw - var(--page-margin) * 2));
          overflow: hidden;
        }
  
        .slideshow--with-hints slideshow-arrows .slideshow-control {
          transition: opacity 0.3s ease;
        }
  
        slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
          > slideshow-container
          > slideshow-arrows
          .slideshow-control--previous,
        slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
          > slideshow-container
          > slideshow-arrows
          .slideshow-control--next {
          animation: none;
          opacity: 0;
          pointer-events: none;
        }
      }
    }
/* END_SECTION:slideshow */

/* START_SECTION:sticky-add-to-cart (INDEX:74) */
.sticky-add-to-cart {
    position: fixed !important;
    left: 0 ;
    right: 0 ;
    z-index: 100 ;
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: var(--padding-md);
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    width: 100% ;
    height: fit-content !important;
  }

  .sticky-add-to-cart--bottom {
    bottom: 0;
    top: auto;
  }
  
  .sticky-add-to-cart--top {
    top: 0;
    bottom: auto;
  }
  @media screen and (min-width: 750px) {
  .atc-compact.sticky-add-to-cart--bottom  {
    bottom: 8px !important;
    top: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--compact-radius) !important;
  }
  .atc-compact.sticky-add-to-cart--top {
    top: 8px !important;
    bottom: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--compact-radius) !important;
  }
}

  /* Compact mode styling */
  .atc-compact {
    padding: var(--padding-xs) var(--padding-sm) !important;
    max-width: 700px;
    margin: auto;
  }

  .atc-compact .sticky-add-to-cart__content {
    gap: var(--padding-sm);
  }

  .atc-compact .sticky-add-to-cart__title {
    font-size: var(--title-text-size, var(--font-size--xs));
    margin: 0 0 var(--margin-2xs) 0;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .atc-compact .sticky-add-to-cart__variants {
    font-size: var(--variants-text-size, var(--font-size--2xs));
    margin: 0 0 var(--margin-2xs) 0;
  }

  .atc-compact .sticky-add-to-cart__price {
    font-size: var(--price-text-size, var(--font-size--xs));
    font-family: var(--price-font-family);
    font-style: var(--price-font-style);
    font-weight: var(--price-font-weight);
  }

  .atc-compact .sticky-add-to-cart__price .price {
    font-size: var(--price-text-size, var(--font-size--xs));
    font-family: var(--price-font-family);
    font-style: var(--price-font-style);
    font-weight: var(--price-font-weight);
  }

  .atc-compact .sticky-add-to-cart__button {
    min-width: 100px;
    /* Solo con padding el boton salia de 42 px — 2 por debajo del minimo
       comodo (44) y 6 del estandar del estudio (48). Es el boton de comprar
       de la barra que acompana toda la ficha, asi que se le pone piso. */
    min-height: 48px;
    padding: var(--padding-sm) var(--padding-sm);
    font-size: var(--font-size--xs);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .atc-compact .sticky-add-to-cart .add-to-cart-text {
    font-size: var(--font-size--xs);
  }

  /* Reduce image size in compact mode 
  .atc-compact .sticky-add-to-cart__image {
    width: calc(var(--thumbnail-size, 40px) * 0.8);
    height: calc(var(--thumbnail-height, 40px) * 0.8);
  }*/

  .sticky-add-to-cart.sticky-add-to-cart--visible {
    transform: translateY(0);
    opacity: 1;
  }

  /* Ensure smooth transitions */
  .sticky-add-to-cart {
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

  .sticky-add-to-cart__content {
    display: flex;
    align-items: center;
    gap: var(--padding-md);
    max-width: var(--page-width);
    margin: 0 auto;
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background-color: var(--color-background);
  }

  .sticky-add-to-cart__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .sticky-add-to-cart--adaptive .sticky-add-to-cart__image img {
    object-fit: contain;
  }

  /* Layout adjustments when elements are hidden */
  .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__image)) .sticky-add-to-cart__product-info {
    margin-left: 0;
  }

  @media screen and (min-width: 750px) {
    .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__title)) .sticky-add-to-cart__variants {
      margin-top: 0;
    }
  }

  @media screen and (max-width: 750px) {
    .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__title)) .sticky-add-to-cart__variants {
      margin-top: 0;
    }
  }

  .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__title)) .sticky-add-to-cart__variants {
    margin-top: 0;
  }

  @media screen and (max-width: 750px) {
    .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__variants)) .sticky-add-to-cart__price {
      margin-top: 0;
    }
  }

  .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__variants)) .sticky-add-to-cart__price {
    margin-top: 0;
  }

  /* Fallback for browsers that don't support :has() */
  @media screen and (min-width: 750px) {
    .sticky-add-to-cart__content.no-image .sticky-add-to-cart__product-info {
      margin-left: 0;
    }
  }

  .sticky-add-to-cart__content.no-image .sticky-add-to-cart__product-info {
    margin-left: 0;
  }

  @media screen and (max-width: 750px) {
    .sticky-add-to-cart__content.no-image .sticky-add-to-cart__product-info {
      margin-left: 0;
    }
  }

  .sticky-add-to-cart__content.no-title .sticky-add-to-cart__variants {
    margin-top: 0;
  }

  @media screen and (max-width: 750px) {
    .sticky-add-to-cart__content.no-title .sticky-add-to-cart__variants {
      margin-top: 0;
    }
  }

  .sticky-add-to-cart__content.no-variants .sticky-add-to-cart__price {
    margin-top: 0;
  }

  @media screen and (max-width: 750px) {
    .sticky-add-to-cart__content.no-variants .sticky-add-to-cart__price {
      margin-top: 0;
    }
  }

  /* Full width button when all elements are hidden - CSS only using :has() */
  .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__image)):not(:has(.sticky-add-to-cart__title)):not(:has(.sticky-add-to-cart__variants)):not(:has(.sticky-add-to-cart__price)) .sticky-add-to-cart__actions {
    width: 100%;
    display: flex;
    justify-content: center;
    gap:0 !important;
  }
  .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__image)):not(:has(.sticky-add-to-cart__title)):not(:has(.sticky-add-to-cart__variants)):not(:has(.sticky-add-to-cart__price))  {
    gap: 0 !important;
    max-width: 480px;
  }

  .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__image)):not(:has(.sticky-add-to-cart__title)):not(:has(.sticky-add-to-cart__variants)):not(:has(.sticky-add-to-cart__price)) .sticky-add-to-cart__actions {
    width: 100%;
  }

  /* Mobile: Full width button when image, variant, price are hidden AND title mobile is hidden */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__image)):not(:has(.sticky-add-to-cart__variants)):not(:has(.sticky-add-to-cart__price)):has(.sticky-add-to-cart__title--hide-mobile) .sticky-add-to-cart__actions {
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 0 !important;
    }
    
    .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__image)):not(:has(.sticky-add-to-cart__variants)):not(:has(.sticky-add-to-cart__price)):has(.sticky-add-to-cart__title--hide-mobile) {
      gap: 0 !important;
      max-width: 100%;
    }
    
    
    .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__image)):not(:has(.sticky-add-to-cart__variants)):not(:has(.sticky-add-to-cart__price)):has(.sticky-add-to-cart__title--hide-mobile) .sticky-add-to-cart__button {
      width: 100% !important;
      max-width: 100% !important;
      flex: 1;
    }
  }

  @media screen and (min-width: 750px) {
  .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__image)):has(.sticky-add-to-cart__title--hide-mobile):not(:has(.sticky-add-to-cart__title)):not(:has(.sticky-add-to-cart__variants)):not(:has(.sticky-add-to-cart__price)) .sticky-add-to-cart__button {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1;
  }
}
@media screen and (max-width: 750px) {
  .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__image)):has(.sticky-add-to-cart__title--hide-desktop):not(:has(.sticky-add-to-cart__title)):not(:has(.sticky-add-to-cart__variants)):not(:has(.sticky-add-to-cart__price)) .sticky-add-to-cart__button {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1;
  }
}

  /* Desktop: max 400px width and centered */
  @media screen and (min-width: 750px) {
    .sticky-add-to-cart__content:not(:has(.sticky-add-to-cart__image)):not(:has(.sticky-add-to-cart__title)):not(:has(.sticky-add-to-cart__variants)):not(:has(.sticky-add-to-cart__price)) .sticky-add-to-cart__button {
      max-width: 100%;
    }
  }
  

  /* Fallback for browsers that don't support :has() - using the all-elements-hidden class */
  .sticky-add-to-cart__content.all-elements-hidden .sticky-add-to-cart__actions {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .sticky-add-to-cart__content.all-elements-hidden .sticky-add-to-cart__button {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1;
  }

  @media screen and (min-width: 750px) {
    .sticky-add-to-cart__content.all-elements-hidden .sticky-add-to-cart__button {
      max-width: 100%;
      width: 100%;
    }
  }

  /* Fallback for mobile: Full width button when image, variant, price are hidden AND title mobile is hidden */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__content.no-image.no-variants.no-price.has-title-mobile-hidden .sticky-add-to-cart__actions {
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 0 !important;
    }
    
    .sticky-add-to-cart__content.no-image.no-variants.no-price.has-title-mobile-hidden {
      gap: 0 !important;
      max-width: 100%;
    }
    
    
    .sticky-add-to-cart__content.no-image.no-variants.no-price.has-title-mobile-hidden .sticky-add-to-cart__button {
      width: 100% !important;
      max-width: 100% !important;
      flex: 1;
    }
  }

  /* Mobile-only button mode: Hide all elements except button on mobile */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart--mobile-only-button .sticky-add-to-cart__image,
    .sticky-add-to-cart--mobile-only-button .sticky-add-to-cart__product-info {
      display: none !important;
    }
    
    .sticky-add-to-cart--mobile-only-button .sticky-add-to-cart__content {
      justify-content: center;
      gap: 0 !important;
    }
    
    .sticky-add-to-cart--mobile-only-button .sticky-add-to-cart__actions {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    
    
    .sticky-add-to-cart--mobile-only-button .sticky-add-to-cart__button {
      width: 100% !important;
      max-width: 100% !important;
      flex: 1;
    }
    
    /* Hide background, border, and box shadow for mobile-only button mode */
    .sticky-add-to-cart--mobile-only-button {
      background-color: transparent !important;
      border-top: none !important;
      box-shadow: none !important;
      padding: var(--padding-sm) var(--padding-md) !important;
    }
    
    /* No padding mode: Remove all padding and button border radius (only when mobile-only button is enabled) */
    .sticky-add-to-cart--mobile-only-button.sticky-add-to-cart--mobile-no-padding {
      padding: 0 !important;
    }
    
    .sticky-add-to-cart--mobile-only-button.sticky-add-to-cart--mobile-no-padding .sticky-add-to-cart__button {
      border-radius: 0 !important;
    }
  }

  .sticky-add-to-cart__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .sticky-add-to-cart__product-info {
    flex: 1;
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    .sticky-add-to-cart__product-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
  }

  .sticky-add-to-cart__title {
    font-size: var(--title-text-size, var(--font-size--sm));
    font-weight: var(--ms-w-medium, 500);
    margin: 0 0 var(--margin-xs) 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-wrap: balance;
    text-wrap: pretty;
    white-space: pre-wrap;
  }

  .sticky-add-to-cart__variants {
    font-size: var(--variants-text-size, var(--font-size--xs));
    color: rgba(var(--color-foreground), 0.6);
    margin: 0 0 var(--margin-2xs) 0;
      line-height: 1.2;
    }

  .sticky-add-to-cart__variant-label {
    font-weight: var(--ms-w-medium, 500);
    color: rgb(var(--color-foreground));
  }

  .sticky-add-to-cart__variant-value {
    color: rgba(var(--color-foreground), 0.6);
  }

  .sticky-add-to-cart__variant-link {
    color: rgb(var(--color-primary));
    text-decoration: underline;
    font-size: var(--font-size--2xs);
    margin-left: var(--margin-xs);
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .sticky-add-to-cart__variant-link:hover {
    opacity: 0.7;
  }

  .sticky-add-to-cart__variant-link:has(.sticky-add-to-cart__change-icon) {
    text-decoration: none;
  }

  .sticky-add-to-cart__change-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1.25em;
    height: 1.25em;
  }

  .sticky-add-to-cart__price {
    font-size: var(--price-text-size, var(--font-size--sm));
    font-family: var(--price-font-family);
    font-style: var(--price-font-style);
    font-weight: var(--price-font-weight);
  }
  @media screen and (min-width: 750px) {
    .sticky-add-to-cart__price {
      text-align: right;
    }
  }

  .sticky-add-to-cart__price .price {
    font-size: var(--price-text-size, var(--font-size--sm));
    font-family: var(--price-font-family);
    font-style: var(--price-font-style);
    font-weight: var(--price-font-weight);
  }
  @media screen and (min-width: 750px) {
    .sticky-add-to-cart__price .price {
      text-align: right;
    }
  }
  .sticky-add-to-cart__price .price,
  .sticky-add-to-cart__price .price--sale {
    color: var(--sticky-price-color, var(--color-foreground));
  }

  .sticky-add-to-cart__price .price--sale {
    color: var(--sticky-price-color, var(--color-sale));
  }

  .sticky-add-to-cart__price .price--compare,
  .sticky-add-to-cart__price .compare-at-price {
    color: var(--sticky-compare-price-color, rgba(var(--color-foreground), 0.6));
    text-decoration: none;
    margin-left: var(--margin-xs);
  }

  .sticky-add-to-cart__actions {
    flex-shrink: 0;
  }

  .sticky-add-to-cart__button {
    --text-speed: 0.26;
    --base-delay: calc(var(--text-speed) * 0.25);
    --tick-speed: 0.1;
    --ring-speed: 0.2;
    --check-speed: 0.2;
    --burst-speed: 0.32;
    --step-delay: 3;
    --speed: 1;

    min-width: 120px;
    padding: var(--padding-sm) var(--padding-lg);
    font-size: var(--font-size--sm);
    font-weight: var(--ms-w-medium, 500);
    white-space: nowrap;
    position: relative;
    width: 100%;
    user-select: none;
    transition-property: color, box-shadow, background-color, scale, translate;
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--ease-out-cubic);
    display: flex;
    align-items: center;
    justify-content: center;

    &:active {
      scale: 0.99;
      translate: 0 1px;
    }
  }

  .sticky-add-to-cart__button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .sticky-add-to-cart__button .svg-wrapper .checkmark-burst {
    width: 30px;
    height: 30px;
  }

  /* Add to cart button text styling - matching original add-to-cart button */
  .sticky-add-to-cart__button .add-to-cart-text {
    --atc-opacity: 0;
    --atc-destination: -1em;
    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(100% at 50% 50%);
  }

  .sticky-add-to-cart__button .add-to-cart__added {
    --atc-opacity: 1;
    --atc-destination: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }

  .sticky-add-to-cart__button .add-to-cart__added-icon {
    width: 32px;
    height: 32px;
  }

  .sticky-add-to-cart__loading-dots {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 2;
  }

  .sticky-add-to-cart__button.loading .sticky-add-to-cart__loading-dots {
    display: flex;
  }

  .sticky-add-to-cart__button.loading .add-to-cart-text,
  .sticky-add-to-cart__button.loading .add-to-cart__added {
    visibility: hidden;
  }

  .sticky-add-to-cart__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--ms-radius-round, 50%);
    background: currentColor;
    animation: sticky-add-to-cart-dots-bounce 0.9s ease-in-out infinite both;
  }

  .sticky-add-to-cart__dot:nth-child(1) { animation-delay: -0.2s; }
  .sticky-add-to-cart__dot:nth-child(2) { animation-delay: -0.1s; }
  .sticky-add-to-cart__dot:nth-child(3) { animation-delay: 0s; }

  @keyframes sticky-add-to-cart-dots-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
  }

  .sticky-add-to-cart__button[data-added='true'] .add-to-cart-text,
  .sticky-add-to-cart__button[data-added='true'] .add-to-cart__added {
    animation-name: atc-slide;
  }

  .sticky-add-to-cart__button .checkmark-burst {
    opacity: 0;
    overflow: visible;

    .burst {
      rotate: 20deg;
    }

    .check {
      opacity: 0.2;
      scale: 0.8;
      filter: blur(2px);
      transform: translateZ(0);
    }

    :is(.ring, .line, .check, .burst, .tick) {
      transform-box: fill-box;
      transform-origin: center;
    }

    :is(.line) {
      stroke-dasharray: 1.5 1.5;
      stroke-dashoffset: -1.5;
      translate: 0 -180%;
    }

    g {
      transform-origin: center;
      rotate: calc(var(--index) * (360 / 8) * 1deg);
    }
  }

  .sticky-add-to-cart__button[data-added='true'] .checkmark-burst {
    opacity: 1;
  }

  .sticky-add-to-cart__button[data-added='true'] {
    .check {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }

    .tick {
      scale: 1.75;
    }

    .ring {
      opacity: 0;
      scale: 1;
    }

    .line {
      stroke-dashoffset: 1.5;
    }

    .add-to-cart-text {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: circle(0% at 50% 50%);
      filter: blur(2px);
      opacity: 0;
      translate: 0 4px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__button[data-added='true'] {
      .check {
        transition-property: opacity, scale, filter;
        transition-duration: calc(calc(var(--check-speed) * 1s));
        transition-delay: calc((var(--base-delay) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .tick {
        transition-property: scale;
        transition-duration: calc((calc(var(--tick-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
        transition-timing-function: ease-out;
      }

      .ring {
        transition-property: opacity, scale;
        transition-duration: calc((calc(var(--ring-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .line {
        transition-property: stroke-dashoffset;
        transition-duration: calc((calc(var(--burst-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-cubic);
      }
    }
    .sticky-add-to-cart__button .add-to-cart-text {
      transition-property: clip-path, opacity, filter, translate;
      transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
      transition-timing-function: ease-out;
    }
  }

  @keyframes atc-slide {
    to {
      opacity: var(--atc-opacity, 1);
      translate: 0px var(--atc-destination, 0px);
    }
  }

  .sticky-add-to-cart .add-to-cart-text {
    font-size: var(--font-size--sm);
  }

  /* Quantity display styling */
  .sticky-add-to-cart__quantity-display {
    margin-left: var(--margin-xs);
    font-weight: var(--ms-w-medium, 500);
    font-size: var(--font-size--sm);
  }

  /* Desktop visibility */
  @media screen and (min-width: 750px) {
    .sticky-add-to-cart--hide-desktop {
      display: none !important;
    }
  }

  /* Mobile visibility */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart--hide-mobile {
      display: none !important;
    }
  }

  /* Ensure it doesn't interfere with other sticky elements */
  .sticky-add-to-cart {
    z-index: 50;
  }

  /* Force sticky positioning on all screen sizes when not in editor 
  .sticky-add-to-cart:not([style*="position: relative"]) {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
    */

  /* Ensure it stays above other elements */
  .sticky-add-to-cart {
    z-index: 7 !important;
  }
/* END_SECTION:sticky-add-to-cart */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:75) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
    flex-shrink: 0;
    max-width: none;
  }
/* END_BLOCK:_accordion-row */

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

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

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

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

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

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

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

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

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

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

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

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

/* START_BLOCK:_blog-post-card (INDEX:77) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  .blog-post-item:first-child .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-item:first-child .blog-post-card__image-container {
    width: 70%;

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

  .blog-post-item:first-child:has(.blog-post-card__image-container) .blog-post-card__content {
    padding-inline-start: var(--columns-gap);
    width: 30%;

    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
      width: 100%;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:78) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:79) */
.blog-post-card__content-text a {
    color: var(--color-primary);
  }

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

/* START_BLOCK:_blog-post-featured-image (INDEX:80) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    display: block;
    position: relative;
    width: var(--width);
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:81) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:82) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:83) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:84) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }

  /* Dots sit on section background, not on media – use normal blend so colors are visible */
  .carousel-content slideshow-controls:has(.slideshow-controls__dots) {
    mix-blend-mode: normal;
  }

  /* Show dots only on desktop */
  .carousel-content--dots-desktop-only slideshow-controls:has(.slideshow-controls__dots) {
    display: none;
  }
  @media (min-width: 750px) {
    .carousel-content--dots-desktop-only slideshow-controls:has(.slideshow-controls__dots) {
      display: flex;
    }
  }

  /* Show dots only on mobile */
  @media (min-width: 750px) {
    .carousel-content--dots-mobile-only slideshow-controls:has(.slideshow-controls__dots) {
      display: none;
    }
  }

  .carousel-content .slideshow-controls__dots button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-100));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:85) */
.cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:86) */
.cart__summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart__summary-item.tax-note small {
    font-size: var(--font-size--2xs);
  }

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

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

  .cart__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart__discount-label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart__summary-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    align-self: start;

    @media screen and (max-width: 749px) {
      position: relative;
      top: auto;
      height: auto;
    }

    @media screen and (min-width: 750px) {
      position: sticky;
      top: 0;
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  @media screen and (min-width: 750px) {
    body:has(> #header-group .header[sticky]) .cart__summary-inner {
      top: var(--header-height, 0);
    }
  }

  .cart__summary-container {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart__summary-container:not(.cart__container--extend),
  .cart__summary-container:not(.cart__container--extend) .cart__summary-inner {
    height: auto;
  }

  .cart__container--extend {
    @media screen and (max-width: 749px) {
      height: auto;
    }

    @media screen and (min-width: 750px) {
      height: 100%;
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart__container--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart__container--extend .cart__summary-inner {
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (max-width: 749px) {
      height: auto;
    }

    @media screen and (min-width: 750px) {
      height: 100%;
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container 
  .cart__summary-inner.has-border-radius {
    border-radius: var(--border-radius);
  }*/

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:87) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
    min-width: 26px;
  }

  .cart-title .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-size: clamp(var(--cart-font-size--2xs), 0.7lh, var(--cart-font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:90) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:92) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    @media (hover: hover) {
      opacity: var(--disabled-opacity);
    }

    [layout='spotlight'] & {
      opacity: var(--disabled-opacity);
    }

    &[aria-current='true'] {
      opacity: 1;
    }

    .text-block {
      display: inline-block;
    }

    @media (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

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

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_contact-form-date (INDEX:94) */
/**
   * Must beat .contact-form__input { padding: … } from the parent contact-form block
   * when stylesheets are merged (otherwise the floating label has no reserved space).
   */
  .contact-form__floating-select .contact-form__input.contact-form__floating-date-control {
    padding-block: calc(var(--padding-xl) + 0.65rem) var(--padding-md);
    padding-inline: var(--padding-xl);
    min-height: calc(var(--padding-lg) * 2 + 1.35em);
  }

  .contact-form__input.contact-form__input--date {
    min-height: calc(var(--padding-lg) * 2 + 1.2em);
  }

  .contact-form__floating-select-wrapper {
    width: 100%;
  }

  .contact-form__floating-select {
    position: relative;
    width: 100%;
  }

  .contact-form__floating-select .contact-form__floating-select-label {
    position: absolute;
    inset-inline-start: var(--padding-xl);
    top: var(--padding-md);
    z-index: 1;
    font-size: max(0.75rem, var(--font-size--xs));
    line-height: 1.2;
    color: var(--color-foreground-muted);
    pointer-events: none;
    transition: color 0.15s ease;
  }

  .contact-form__floating-select .contact-form__input.contact-form__floating-date-control:focus + .contact-form__floating-select-label {
    color: var(--color-foreground);
  }
/* END_BLOCK:_contact-form-date */

/* START_BLOCK:_featured-blog-posts-card (INDEX:102) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

  @media (max-width: 768px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:103) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product (INDEX:108) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }

  .featured-product-content-bottom:not(:has(product-swatches)) {
    display: none;
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:109) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:110) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      /* Aquí había un `padding: 0` fijo. Al ser shorthand anulaba el
         `padding-block` que emite spacing-style, así que en móvil el logo
         quedaba pegado al borde del header y NINGÚN ajuste de relleno tenía
         efecto — ni el de escritorio, que el CSS hereda por fallback, ni los
         controles móviles. Se retira: los defaults del bloque son 0, así que
         quien no toque nada ve exactamente lo mismo que antes. */
      padding-inline: 0;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:111) */
.menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  header-menu {
    width: 100%;
  }

  /* Drawer menu featured content */
  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
    margin-block-end: var(--padding-3xl);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image,
  .menu-drawer__featured-content-list-item--custom-image img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__custom-image-card--overlay .resource-card__media {
    position: relative;
  }

  .menu-drawer__custom-image-card--overlay .resource-card__media::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);
  }

  .menu-drawer__custom-image-content--overlay {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-md) var(--padding-md) var(--padding-xs);
    z-index: var(--layer-raised);
  }

  .menu-drawer__custom-image-content--overlay .menu-drawer__custom-image-title,
  .menu-drawer__custom-image-content--overlay .menu-drawer__custom-image-text {
    color: var(--color-white);
  }

  .menu-drawer__custom-image-content--overlay .menu-drawer__custom-image-text {
    margin-block-start: var(--gap-2xs);
  }

  .menu-drawer__custom-image-content--below {
    padding: var(--padding-xs) 0 0;
    max-width: 85vw;
  }

  .menu-drawer__custom-image-content--below .menu-drawer__custom-image-text {
    margin-block-start: var(--gap-2xs);
  }


  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__caret {
    flex: none;
    margin-inline-start: 4px;
    transition: transform 0.18s ease;
  }

  .menu-list__list-item:where(:hover, :focus-within) .menu-list__caret,
  .menu-list__link[aria-expanded='true'] .menu-list__caret {
    transform: rotate(180deg);
  }

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

  .menu-list__link {
    display: inline-flex;
    align-items: center;
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    transition: color var(--animation-speed) var(--animation-easing);
    text-decoration: none;
    display: flex;
    min-height: var(--minimum-touch-target);
    align-items: center;

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  /*
      High specificity selectors to subdue non-hovered links without javascript.
      If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
    */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0 var(--menu-horizontal-gap);
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /* the submenu background element to animate */
  .overflow-menu::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px + var(--border-bottom-width));
    left: 0;
    width: 100%;
    height: var(--submenu-height);
    background-color: var(--color-background);
    box-shadow: var(--shadow-popover);
    clip-path: inset(0.5px 0 -100px 0); /* stylelint-disable-line */
    opacity: var(--submenu-opacity, 1);
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic),
      opacity var(--animation-speed-slow) var(--ease-out-cubic) var(--animation-speed-fast);
    z-index: calc(var(--layer-header-menu) - 1);
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    visibility: hidden;
    background-color: var(--color-background);
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    clip-path: rect(0 100% var(--submenu-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .menu-list__list-item:has([data-animating]) > .menu-list__submenu {
    --submenu-content-opacity: 0;

    visibility: visible;

    &::before {
      height: 0;
    }
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    grid-column: 2;
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    --submenu-content-opacity: 0;

    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
  }

  /* Make overflow menu scrollable when content exceeds viewport */
  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      --submenu-content-opacity: 0;

      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      opacity: var(--submenu-content-opacity);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);

      .menu-list__submenu-inner {
        padding-block-start: 0;
        grid-column: unset;
      }
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu[data-overflow-expanded='true'] .menu-list__list-item:where([slot='overflow']) .menu-list__link {
    --submenu-content-opacity: 1;
  }

  .menu-list__list-item:where([slot='overflow']):has([data-animating]) > .menu-list__link {
    --submenu-content-opacity: 0;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;
    transition: color var(--animation-speed) var(--animation-easing);

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  .mega-menu__content-list--custom-image {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__custom-image-card {
    display: block;
  }

  .mega-menu__custom-image-card--overlay .resource-card__media {
    position: relative;
  }

  .mega-menu__custom-image-card--overlay .resource-card__media::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);
  }

  .mega-menu__custom-image-content--overlay {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .mega-menu__custom-image-content--overlay .mega-menu__custom-image-title,
  .mega-menu__custom-image-content--overlay .mega-menu__custom-image-text {
    color: var(--color-white);
  }

  .mega-menu__custom-image-content--overlay .mega-menu__custom-image-text {
    margin-block-start: var(--gap-2xs);
  }

  .mega-menu__custom-image-content--below {
    padding: var(--padding-sm) 0 0;
  }

  .mega-menu__custom-image-content--below .mega-menu__custom-image-text {
    margin-block-start: var(--gap-2xs);
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__more-list-item .mega-menu__link {
    color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
  }

  .mega-menu__more-list-item:where(:hover, .active) .mega-menu__link {
    color: var(--menu-top-level-font-color);
  }

  .mega-menu__more-list-item[aria-hidden='true'] {
    display: none;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }

  /* ═ ms-mega-row · el submenú de escritorio con la anatomía del menú móvil
     (Bëne, Rev 5.24 · 1-sep-2026). Se enciende con «Filas con miniatura» del
     bloque Menú. La columna de enlaces pasa a 2 de 6 (≈420 px a 1280) para
     que la fila respire; el alto del panel lo mide header-menu.js solo. ═ */
  .mega-menu__list--ms-rows .mega-menu__column {
    grid-column: span 2;
  }

  .mega-menu__list--ms-rows .mega-menu__column > div + div {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  .mega-menu__link.ms-mega-row {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 0.75rem);
    width: 100%;
    min-height: 56px;
    padding-block: var(--padding-xs, 0.5rem);
  }

  .ms-mega-row__media {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: var(--menu-image-border-radius, 0px);
    overflow: hidden;
  }

  .ms-mega-row__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .ms-mega-row__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .ms-mega-row__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-2xs, 0.375rem);
  }

  .mega-menu__link .ms-mega-row__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
  }

  /* Sin miniatura (página, «Ver todos»): fila de texto, como la secundaria del móvil. */
  .ms-mega-row:not(.ms-mega-row--media) .ms-mega-row__title {
    font-size: 1rem;
    font-weight: var(--ms-w-medium, 500);
  }

  .ms-mega-row__desc {
    font-size: 0.875rem;
    line-height: 1.35;
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  .ms-mega-row__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.55em;
    border-radius: var(--ms-radius-sm, 6px);
    background: var(--color-primary);
    color: var(--color-primary-button-text, var(--color-background));
    font-size: 0.6875rem;
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.3;
    white-space: nowrap;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:114) */
image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

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

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:119) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_payment-icons-footer (INDEX:122) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:_payment-icons-footer */

/* START_BLOCK:_product-card-gallery (INDEX:124) */
.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;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_BLOCK:_product-card-gallery */

/* START_BLOCK:_product-details (INDEX:127) */
/* Clear padding on mobile (page width), unless disabled in block settings */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width
      .product-details:not(.product-details--retain-mobile-inline-padding)
      > .group-block {
      padding-inline: 0;
    }

    .product-information.section--page-width
      .product-details.product-details--retain-mobile-inline-padding
      > .group-block {
      padding-block-start: var(--page-margin);
      padding-block-end: var(--page-margin);
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_product-media-gallery (INDEX:131) */
.product-media-gallery__sticky-wrap {
    width: 100%;
    align-self: start;
    display: flex;
    flex-direction: column;
  }

  .product-media-gallery__below-media {
    display: none;
    flex-direction: column;
    gap: var(--gap-sm, 0.75rem);
    margin-block-start: var(--gap-sm, 0.75rem);
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .product-media-gallery__below-media {
      display: flex;
    }
  }
/* END_BLOCK:_product-media-gallery */

/* START_BLOCK:_quantity-breaks (INDEX:132) */
.quantity-breaks {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: var(--card-radius, 12px);
  }
  
  .quantity-breaks__title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    padding: 0 20px;
    gap: 20px;
  }
  
  .quantity-breaks__title::before,
  .quantity-breaks__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-border, #e0e0e0);
    min-width: 0;
  }
  
  .quantity-breaks__title::before {
    order: 1;
  }
  
  .quantity-breaks__heading {
    order: 2;
  }
  
  .quantity-breaks__title::after {
    order: 3;
  }
  
  .quantity-breaks__heading {
    margin: 0;
    font-family: var(--heading-font-family, inherit);
    font-size: var(--heading-text-size, 1.5rem);
    color: var(--color-foreground-heading, #000);
  }
  
  @media screen and (max-width: 749px) {
    .quantity-breaks__heading {
      font-size: var(--heading-text-size-mobile, 1.25rem);
    }
  }
  
  .quantity-breaks__container {
    display: grid;
    grid-template-columns: repeat(var(--columns-mobile, 1), 1fr);
    gap: var(--container-gap-mobile, 16px);
    padding-top: var(--container-padding-top-mobile, 14px);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  
  @media screen and (min-width: 750px) {
    .quantity-breaks__container {
      grid-template-columns: repeat(var(--columns-desktop, 3), 1fr);
      gap: var(--container-gap-desktop, 16px);
      padding-top: var(--container-padding-top-desktop, 14px);
    }
  }
  
  .quantity-breaks__card {
    position: relative;
    background-color: var(--color-variant-background, #fff);
    border: var(--card-border-width-unselected, 1px) solid var(--color-variant-border, var(--color-border, #e0e0e0));
    border-radius: var(--card-radius, 12px);
    padding: 20px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
    color: var(--color-variant-text, var(--color-foreground, #000));
  }
  
  /*.quantity-breaks__card:has(.quantity-breaks__image-container) {
    min-height: 280px;
  }*/
  
  /* Single column layout - horizontal */
  @media screen and (min-width: 750px) {
    .quantity-breaks__container:has([style*="--columns-desktop: 1"]) .quantity-breaks__card,
    .quantity-breaks__container[data-columns-desktop="1"] .quantity-breaks__card {
      flex-direction: row;
      text-align: left;
      align-items: center;
      min-height: auto;
      padding: 16px;
      gap: 12px;
    }
  }
  
  @media screen and (max-width: 749px) {
    .quantity-breaks__container:has([style*="--columns-mobile: 1"]) .quantity-breaks__card,
    .quantity-breaks__container[data-columns-mobile="1"] .quantity-breaks__card {
      flex-direction: row;
      text-align: left;
      align-items: center;
      min-height: auto;
      padding: 16px;
      gap: 12px;
    }
  }
  
  /* Two columns layout - horizontal/vertical */
  @media screen and (min-width: 750px) {
    .quantity-breaks__container[data-columns-desktop="2"] .quantity-breaks__card {
      min-height: auto;
      padding: 16px 8px;
      gap: 12px;
    }
    
    .quantity-breaks__container[data-columns-desktop="2"][data-two-column-layout-desktop="horizontal"] .quantity-breaks__card {
      flex-direction: row;
      text-align: left;
      /*align-items: baseline;*/
    }
    
    .quantity-breaks__container[data-columns-desktop="2"][data-two-column-layout-desktop="vertical"] .quantity-breaks__card {
      flex-direction: column;
      text-align: center;
      align-items: center;
    }
  }
  
  @media screen and (max-width: 749px) {
    .quantity-breaks__container[data-columns-mobile="2"] .quantity-breaks__card {
      min-height: auto;
      padding: 12px;
      gap: 12px;
    }
    .quantity-breaks__container[data-columns-mobile="2"][data-two-column-layout-mobile="horizontal"] .quantity-breaks__card {
      flex-direction: row;
      text-align: left;
      align-items: center;
    }
    
    .quantity-breaks__container[data-columns-mobile="2"][data-two-column-layout-mobile="vertical"] .quantity-breaks__card {
      flex-direction: column;
      text-align: center;
      align-items: center;
    }
  }

  .quantity-breaks__container .quantity-breaks__card:has(.quantity-breaks__recommended-badge),
  .quantity-breaks__container .quantity-breaks__card:has(.quantity-breaks__sold-out-badge) {
    padding-top: calc(var(--badge-text-size, 12px) + 5px) !important;
  }

  /* Columns > 1: apply top padding to all cards for alignment */
  @media screen and (min-width: 750px) {
    .quantity-breaks__container[data-columns-desktop="2"] .quantity-breaks__card,
    .quantity-breaks__container[data-columns-desktop="3"] .quantity-breaks__card,
    .quantity-breaks__container[data-columns-desktop="4"] .quantity-breaks__card,
    .quantity-breaks__container[data-columns-desktop="5"] .quantity-breaks__card,
    .quantity-breaks__container[data-columns-desktop="6"] .quantity-breaks__card {
      padding-top: calc(var(--badge-text-size, 12px) + 5px) !important;
    }
  }

  @media screen and (max-width: 749px) {
    .quantity-breaks__container[data-columns-mobile="2"] .quantity-breaks__card,
    .quantity-breaks__container[data-columns-mobile="3"] .quantity-breaks__card,
    .quantity-breaks__container[data-columns-mobile="4"] .quantity-breaks__card,
    .quantity-breaks__container[data-columns-mobile="5"] .quantity-breaks__card,
    .quantity-breaks__container[data-columns-mobile="6"] .quantity-breaks__card {
      padding-top: calc(var(--badge-text-size-mobile, var(--badge-text-size, 12px)) + 5px) !important;
    }
  }
  
  .quantity-breaks__card--active {
    border-color: var(--color-selected-variant-border, var(--radio-color, #000));
    border-width: var(--card-border-width-selected, 2px);
   /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);*/
    background-color: var(--color-selected-variant-background, #fff);
  }
  
  .quantity-breaks__card--recommended {
    border-color: var(--color-selected-variant-border, var(--radio-color, #4caf50));
    border-width: var(--card-border-width-selected, 2px);
    background-color: var(--color-selected-variant-background, #fff);
  }
  
  .quantity-breaks__card--recommended.quantity-breaks__card--unselected {
    border-color: var(--color-variant-border, var(--color-border, #e0e0e0));
    border-width: var(--card-border-width-unselected, 1px);
    background-color: var(--color-variant-background, #fff);
  }
  
  .quantity-breaks__card--sold-out {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--sold-out-card-background, var(--color-variant-background, #fff));
  }
  
  .quantity-breaks__sold-out-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--sold-out-badge-bg, #999);
    color: var(--sold-out-badge-text, #fff);
    padding: 4px 12px;
    border-radius: var(--badge-radius, 12px);
    font-size: var(--badge-text-size, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
    z-index: 1;
  }
  
  .quantity-breaks__recommended-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--recommended-badge-bg, #4caf50);
    color: var(--recommended-badge-text, #ffffff);
    padding: 4px 12px;
    border-radius: var(--badge-radius, 12px);
    font-size: var(--badge-text-size, 0.75rem);
    white-space: nowrap;
    z-index: 1;
  }

  [data-recommended-badge-style="scalloped"] .quantity-breaks__recommended-badge {
    padding: 8px;
    overflow: hidden;
    border-radius: 0;
    white-space: pre-line;
    line-height: 1.15;
    display: flex;
    font-size: calc(var(--scalloped-badge-size, 12px) / 5);
    font-optical-sizing: auto;
    width: var(--scalloped-badge-size, 60px);
    height: var(--scalloped-badge-size, 60px);
    max-height: var(--scalloped-badge-size, 60px);
    right: 0 !important;
    left: auto !important;
    top: calc(var(--scalloped-badge-size, 60px) * -0.5);
    transform: rotate(-15deg) !important;
    background-color: transparent;
    text-align: center;
    align-items: center;
    
    background-color: transparent;
  }

  [data-recommended-badge-style="scalloped"] .quantity-breaks__recommended-badge::after {
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
    clip-path: polygon(100% 50%, 93.15% 58.58%, 96.19% 69.13%, 86.58% 74.45%, 85.36% 85.36%, 74.45% 86.58%, 69.13% 96.19%, 58.58% 93.15%, 50% 100%, 41.42% 93.15%, 30.87% 96.19%, 25.55% 86.58%, 14.64% 85.36%, 13.42% 74.45%, 3.81% 69.13%, 6.85% 58.58%, 0 50%, 6.85% 41.42%, 3.81% 30.87%, 13.42% 25.55%, 14.64% 14.64%, 25.55% 13.42%, 30.87% 3.81%, 41.42% 6.85%, 50% 0, 58.58% 6.85%, 69.13% 3.81%, 74.45% 13.42%, 85.36% 14.64%, 86.58% 25.55%, 96.19% 30.87%, 93.15% 41.42%);
    background-color: var(--recommended-badge-bg, #4caf50);
  }

  [data-recommended-badge-style="ribbon"] .quantity-breaks__recommended-badge {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  [data-recommended-badge-style="ribbon"] .quantity-breaks__recommended-badge {
    top: calc(-5px + var(--card-border-width-unselected) * -1);
  }
  [data-recommended-badge-style="ribbon"] .quantity-breaks__card--active > .quantity-breaks__recommended-badge {
    top: calc(-5px - var(--card-border-width-selected, 2px));
  }

  /* Single column - badge on right */
  @media screen and (min-width: 750px) {
    .quantity-breaks__container:has([style*="--columns-desktop: 1"]) .quantity-breaks__recommended-badge,
    .quantity-breaks__container[data-columns-desktop="1"] .quantity-breaks__recommended-badge {
      left: auto;
      right: 20px;
      transform: none;
    }
  }

  @media screen and (max-width: 749px) {
    .quantity-breaks__container:has([style*="--columns-mobile: 1"]) .quantity-breaks__recommended-badge,
    .quantity-breaks__container[data-columns-mobile="1"] .quantity-breaks__recommended-badge {
      left: auto;
      right: 20px;
      transform: none;
    }

    .quantity-breaks__recommended-badge {
      font-size: var(--badge-text-size-mobile, var(--badge-text-size, 0.75rem));
    }

    .quantity-breaks__free-gifts-badge {
      font-size: var(--badge-text-size-mobile, var(--badge-text-size, 0.7rem));
    }

    .quantity-breaks__container[data-columns-mobile="1"] .quantity-breaks__card:has(.quantity-breaks__recommended-badge) {
      padding-top: calc(var(--badge-text-size-mobile, var(--badge-text-size, 12px)) + 5px) !important;
    }
  }

  [data-recommended-badge-style="ribbon"] .quantity-breaks__recommended-badge::before {
    content: "";
    background: color-mix(in lab, var(--recommended-badge-bg), #000000 20%);
    position: absolute;
    height: 5px;
    width: 5px;
    top: 0;
    display: block;
    left: -5px;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  }

  [data-recommended-badge-style="ribbon"] .quantity-breaks__recommended-badge::after {
    content: "";
    background: color-mix(in lab, var(--recommended-badge-bg), #000000 20%);
    position: absolute;
    height: 5px;
    width: 5px;
    top: 0;
    display: block;
    right: -5px;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
  }

  .quantity-breaks__free-gifts-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #000;
    color: #fff;
    padding: 4px 10px;
    font-size: var(--badge-text-size, 0.7rem);
    white-space: nowrap;
    z-index: 1;
    transform: rotate(0deg);
    border-radius: 2px;
  }

  .quantity-breaks__free-gifts {
    margin-top: 24px;
    text-align: center;
    background-color: var(--free-gifts-background, transparent);
  }

  .quantity-breaks__free-gifts--has-background {
    padding: 8px;
    border-width: var(--free-gifts-border-width, 2px);
    border-style: var(--free-gifts-border-style, solid);
    border-color: var(--free-gifts-border-color, #e0e0e0);
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
  }

  .quantity-breaks__free-gifts-heading {
    margin: 0 0 16px;
    color: var(--color-foreground-heading, #000);
  }
  .quantity-breaks__free-gifts-heading p:first-child {
    margin-top: 0;
  }
  .quantity-breaks__free-gifts-heading p:last-child {
    margin-bottom: 0;
  }

  .quantity-breaks__free-gifts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--free-gifts-gap, 28px);
  }

  .quantity-breaks__free-gifts-grid > * {
    box-sizing: border-box;
    flex: 0 1 calc((100% - (var(--free-gifts-per-row-mobile, 2) - 1) * var(--free-gifts-gap, 28px)) / var(--free-gifts-per-row-mobile, 2));
    max-width: calc((100% - (var(--free-gifts-per-row-mobile, 2) - 1) * var(--free-gifts-gap, 28px)) / var(--free-gifts-per-row-mobile, 2));
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    .quantity-breaks__free-gifts-grid > * {
      flex-basis: calc((100% - (var(--free-gifts-per-row-desktop, 3) - 1) * var(--free-gifts-gap, 28px)) / var(--free-gifts-per-row-desktop, 3));
      max-width: calc((100% - (var(--free-gifts-per-row-desktop, 3) - 1) * var(--free-gifts-gap, 28px)) / var(--free-gifts-per-row-desktop, 3));
    }
  }


  .quantity-breaks-gift-card {
    position: relative;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
    background: var(--color-variant-background, #fff);
    color: var(--color-variant-text, #000);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
  }
  .quantity-breaks-gift-card {
    position: relative;
    border: 1px solid var(--color-selected-variant-border, #e0e0e0);
    border-radius: var(--card-radius, 12px);
    overflow: visible;
    background: var(--color-selected-variant-background, #fff);
    color: var(--color-selected-variant-text, #000);
  }

  @keyframes quantity-breaks-gift-card-enable {
    0% {
      transform: scale(0.96);
      opacity: 0.85;
    }
    60% {
      transform: scale(1.02);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .quantity-breaks-gift-card--enabled {
    animation: quantity-breaks-gift-card-enable 0.45s ease-out;
  }

  .quantity-breaks__free-gifts--normal .quantity-breaks-gift-card--enabled {
    color: var(--color-foreground, #000);
  }

  .quantity-breaks-gift-card__image-wrapper {
    position: relative;
    aspect-ratio: 1;
   /* background: var(--color-background-secondary, #f5f5f5); */
    overflow: hidden;
    border-radius: var(--card-radius, 12px) var(--card-radius, 12px) 0 0;
  }

  .quantity-breaks-gift-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: auto;
  }

  .quantity-breaks__free-gifts--image-auto .quantity-breaks-gift-card__image {
    object-fit: contain;
    width: auto;
  }

  .quantity-breaks__free-gifts--normal .quantity-breaks-gift-card__image {
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
  }

  .quantity-breaks-gift-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground-secondary, #999);
  }

  .quantity-breaks-gift-card__price-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--free-gifts-badge-background, #f5c6d6);
    color: var(--free-gifts-badge-text, #fff);
    padding: 1px 4px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 2px;
    border: 1px solid var(--free-gifts-badge-border, #e8a4b8);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
    white-space: nowrap;
  }

  .quantity-breaks-gift-card__price-badge .quantity-breaks-gift-card__free-label {
    text-transform: uppercase;
  }

  .quantity-breaks-gift-card__price-badge .quantity-breaks-gift-card__original-price {
    text-decoration: none;
    opacity: 0.95;
    font-weight: 600;
  }

  .quantity-breaks-gift-card__price-badge .quantity-breaks-gift-card__discounted-price {
    text-decoration: none;
  }

  .quantity-breaks-gift-card--locked .quantity-breaks-gift-card__price-badge {
    background: var(--free-gifts-locked-text, #666);
    border-color: rgba(0, 0, 0, 0.2);
  }

  .quantity-breaks-gift-card__locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--free-gifts-locked-background, #e8e8e8);
    color: var(--free-gifts-locked-text, #666);
    transition: opacity 0.35s ease;
  }
  .quantity-breaks__free-gifts--normal .quantity-breaks-gift-card__locked-overlay {  
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
  }

  .quantity-breaks-gift-card--enabled .quantity-breaks-gift-card__locked-overlay {
    opacity: 0;
    pointer-events: none;
  }

  .quantity-breaks-gift-card__lock-icon {
    margin-bottom: 8px;
    opacity: 0.7;
  }

  .quantity-breaks-gift-card__locked-text {
    font-size: 0.875rem;
  }

  .quantity-breaks-gift-card__content {
    padding: 0;
  }

  .quantity-breaks-gift-card__title {
    margin: 0 0 8px;
    font-size: 12px;
  }

  .quantity-breaks-gift-card__variant-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 6px;
    font-size: 0.875rem;
    background: #fff;
  }

  .quantity-breaks-gift-card--locked .quantity-breaks-gift-card__variant-select {
    display: none;
  }

  /* Normal style: no borders, minimal styling */
  .quantity-breaks__free-gifts--normal .quantity-breaks-gift-card {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .quantity-breaks__free-gifts--normal .quantity-breaks-gift-card--enabled {
    border: none;
  }

  .quantity-breaks__free-gifts--normal .quantity-breaks-gift-card__image-wrapper {
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  .quantity-breaks__free-gifts--normal .quantity-breaks-gift-card__content {
    padding: 12px 0;
  }
  
    .quantity-breaks__lumin-radio-indicator {
      display: inline-block;
      width: 22px;
      height: 22px;
      border: 2px solid var(--color-variant-text, var(--color-border, #666));
      border-radius: 50%;
      margin-bottom: 2px;
      position: relative;
      background-color: transparent;
      transition: border-color var(--animation-speed, 0.3s) var(--animation-easing, ease),
        background-color var(--animation-speed, 0.3s) var(--animation-easing, ease);
      flex-shrink: 0;
    }
  .quantity-breaks__card--active .quantity-breaks__lumin-radio-indicator {
    border-color: var(--color-selected-variant-text, var(--radio-color, var(--color-selected-variant-border, #000)));
    background-color: var(--color-selected-variant-background, var(--radio-color, var(--color-selected-variant-border, #000)));
  }
  
  .quantity-breaks__card--active .quantity-breaks__lumin-radio-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-selected-variant-text, var(--radio-color, #ffffff));
  }
  
  /* {
    border-color: var(--color-selected-variant-border, var(--radio-color, #8B4513));
  }*/
  
  .quantity-breaks__card--recommended.quantity-breaks__card--active .quantity-breaks__lumin-radio-indicator {
    border-color: var(--color-selected-variant-text, var(--radio-color, var(--color-selected-variant-border, #000)));
    background-color: var(--color-selected-variant-background, var(--radio-color, var(--color-selected-variant-border, #000)));
  }
  
  .quantity-breaks__card--recommended.quantity-breaks__card--active .quantity-breaks__lumin-radio-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-selected-variant-text, var(--radio-color, #ffffff));
  }
  
  /* Adjust radio indicator margin in horizontal layouts */
  @media screen and (min-width: 750px) {
    .quantity-breaks__container:has([style*="--columns-desktop: 1"]) .quantity-breaks__lumin-radio-indicator,
    .quantity-breaks__container[data-columns-desktop="1"] .quantity-breaks__lumin-radio-indicator,
    .quantity-breaks__container[data-columns-desktop="2"][data-two-column-layout-desktop="horizontal"] .quantity-breaks__lumin-radio-indicator {
      margin-bottom: 0;
      margin-right: 8px;
    }
  }
  
  @media screen and (max-width: 749px) {
    .quantity-breaks__container:has([style*="--columns-mobile: 1"]) .quantity-breaks__lumin-radio-indicator,
    .quantity-breaks__container[data-columns-mobile="1"] .quantity-breaks__lumin-radio-indicator,
    .quantity-breaks__container[data-columns-mobile="2"][data-two-column-layout-mobile="horizontal"] .quantity-breaks__lumin-radio-indicator {
      margin-bottom: 0;
      margin-right: 8px;
    }
  }
  
  .quantity-breaks__image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4px;
    min-height: 30px;
    max-width: 100%;
  }
  
  /* Single column and two columns horizontal: adjust image container for horizontal layout */
  @media screen and (min-width: 750px) {
    .quantity-breaks__container:has([style*="--columns-desktop: 1"]) .quantity-breaks__image-container,
    .quantity-breaks__container[data-columns-desktop="1"] .quantity-breaks__image-container,
    .quantity-breaks__container[data-columns-desktop="2"][data-two-column-layout-desktop="horizontal"] .quantity-breaks__image-container {
      margin-bottom: 0;
      margin-right: 12px;
      min-height: auto;
    }
  }
  
  @media screen and (max-width: 749px) {
    .quantity-breaks__container:has([style*="--columns-mobile: 1"]) .quantity-breaks__image-container,
    .quantity-breaks__container[data-columns-mobile="1"] .quantity-breaks__image-container,
    .quantity-breaks__container[data-columns-mobile="2"][data-two-column-layout-mobile="horizontal"] .quantity-breaks__image-container {
      margin-bottom: 0;
      margin-right: 12px;
      min-height: auto;
    }
  }
  
  .quantity-breaks__product-image {
    width: var(--image-size, 60px);
    height: auto;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
  }
  
  .quantity-breaks__product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .quantity-breaks__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
    width: 100%;
  }
  
  /* Single column and two columns horizontal: horizontal content layout */
  @media screen and (min-width: 750px) {
    .quantity-breaks__container:has([style*="--columns-desktop: 1"]) .quantity-breaks__content,
    .quantity-breaks__container[data-columns-desktop="1"] .quantity-breaks__content,
    .quantity-breaks__container[data-columns-desktop="2"][data-two-column-layout-desktop="horizontal"] .quantity-breaks__content {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      column-gap: 5px;
      row-gap: 10px;
    }
  }
  
  @media screen and (max-width: 749px) {
    .quantity-breaks__container:has([style*="--columns-mobile: 1"]) .quantity-breaks__content,
    .quantity-breaks__container[data-columns-mobile="1"] .quantity-breaks__content,
    .quantity-breaks__container[data-columns-mobile="2"][data-two-column-layout-mobile="horizontal"] .quantity-breaks__content {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      row-gap: 20px;
      column-gap: 4px;
    }
  }
  
  .quantity-breaks__content-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
    /*overflow: hidden;*/
  }
  .quantity-breaks__content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }
  
  .quantity-breaks__content-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    min-width: 0;
  }
  
  .quantity-breaks__title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }
  
  /* Center title wrapper when columns per row is more than 2 (vertical card layout) */
  @media screen and (min-width: 750px) {
    .quantity-breaks__container[data-columns-desktop="3"] .quantity-breaks__title-wrapper,
    .quantity-breaks__container[data-columns-desktop="4"] .quantity-breaks__title-wrapper,
    .quantity-breaks__container[data-columns-desktop="5"] .quantity-breaks__title-wrapper,
    .quantity-breaks__container[data-columns-desktop="6"] .quantity-breaks__title-wrapper {
      justify-content: center;
    }
    
    .quantity-breaks__container[data-columns-desktop="2"][data-two-column-layout-desktop="vertical"] .quantity-breaks__title-wrapper {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  
  @media screen and (max-width: 749px) {
    .quantity-breaks__container[data-columns-mobile="3"] .quantity-breaks__title-wrapper,
    .quantity-breaks__container[data-columns-mobile="4"] .quantity-breaks__title-wrapper {
      justify-content: center;
    }
    
    .quantity-breaks__container[data-columns-mobile="2"][data-two-column-layout-mobile="vertical"] .quantity-breaks__title-wrapper {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  
  .quantity-breaks__quantity-title {
    margin: 0;
    font-family: var(--title-font-family, inherit);
    font-size: var(--title-text-size, 1.125rem);
    color: var(--color-variant-text, var(--color-foreground-heading, #000));
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .quantity-breaks__card--active .quantity-breaks__quantity-title {
    color: var(--color-selected-variant-text, var(--color-variant-text, var(--color-foreground-heading, #000)));
  }
  
  .quantity-breaks__description {
    margin: 0;
    font-size: var(--description-text-size, 0.875rem);
    color: var(--color-variant-text, var(--color-foreground, #666));
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
  }
  
  .quantity-breaks__card--active .quantity-breaks__description {
    color: var(--color-selected-variant-text, var(--color-variant-text, var(--color-foreground, #666)));
  }
  
  .quantity-breaks__content .quantity-breaks__variant-pickers {
    margin-top: 2px;
    width: 100%;
    min-width: 100%;
    flex-basis: 100%;
    max-width: 100%;
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Preselected card: reserve space when inactive (only before user selects another option) */
  [data-quantity-breaks-component]:not([data-user-has-selected-other="true"]) .quantity-breaks__card--recommended:not(.quantity-breaks__card--active) .quantity-breaks__variant-pickers {
    visibility: hidden;
    pointer-events: none;
  }

  /* Non-preselected cards: hide without reserving space */
  .quantity-breaks__card:not(.quantity-breaks__card--recommended):not(.quantity-breaks__card--active) .quantity-breaks__variant-pickers {
    display: none;
  }

  /* After user selects another option: all inactive cards use display: none */
  [data-quantity-breaks-component][data-user-has-selected-other="true"] .quantity-breaks__card:not(.quantity-breaks__card--active) .quantity-breaks__variant-pickers {
    display: none;
  }

  .quantity-breaks__variant-pickers-heading {
    font-size: var(--description-text-size, 0.875rem);
    color: var(--color-selected-variant-text, var(--color-foreground, #333));
    margin-bottom: 2px;
    text-align: left;
    margin-left: 31px;
  }

  .quantity-breaks__variant-pickers--no-row-numbers .quantity-breaks__variant-pickers-heading {
    margin-left: 0;
    text-align: center;
  }

  .quantity-breaks__variant-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
   /* width: 100%;*/
    text-align: left;
  }

  .quantity-breaks__variant-picker-select-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .quantity-breaks__variant-swatch {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--swatch-background, #eee);
    background-size: cover;
    background-position: center;
    display: block;
  }

  .quantity-breaks__variant-select--has-swatch {
    min-width: 60px;
  }

  [data-variant-picker-full-width="true"] .quantity-breaks__variant-select--has-swatch {
    flex: 1;
  }

  .quantity-breaks__variant-picker-number {
    font-size: var(--description-text-size, 0.875rem);
    color: var(--color-selected-variant-text, var(--color-foreground, #666));
    min-width: 0.5em;
    flex-shrink: 0;
  }

  .quantity-breaks__variant-picker-row .quantity-breaks__variant-select {
    min-width: 30px;
  }
  
  .quantity-breaks__variant-select {
    padding: 6px 8px;
    font-size: var(--description-text-size, 0.875rem);
    border: 1px solid var(--color-variant-border, var(--color-border, #e0e0e0));
    border-radius: 6px;
    background-color: var(--color-variant-background, #fff);
    color: var(--color-input-text, var(--color-foreground, #000));
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: menulist;
  }
  
  .quantity-breaks__card--active .quantity-breaks__variant-select {
    border-color: var(--color-selected-variant-text, var(--radio-color, #8B4513));
  }
  [data-variant-picker-full-width="true"] .quantity-breaks__card--active .quantity-breaks__variant-select {
    flex: 1;
  }
  
  .quantity-breaks__discount-badge {
    background-color: var(--discount-badge-bg, #4caf50);
    color: var(--discount-badge-text, #ffffff);
    padding: 4px 6px;
    border-radius: var(--discount-badge-radius, 4px);
    font-size: var(--discount-badge-text-size, 0.75rem);
    margin: 0;
  }
  
  .quantity-breaks__price-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 8px;
  }
  
  /* Single column and two columns horizontal: align price to right */
  @media screen and (min-width: 750px) {
    .quantity-breaks__container:has([style*="--columns-desktop: 1"]) .quantity-breaks__price-container,
    .quantity-breaks__container[data-columns-desktop="1"] .quantity-breaks__price-container,
    .quantity-breaks__container[data-columns-desktop="2"][data-two-column-layout-desktop="horizontal"] .quantity-breaks__price-container {
      align-items: flex-end;
      margin-top: 0;
      padding-top: 0;
    }
  }
  
  @media screen and (max-width: 749px) {
    .quantity-breaks__container:has([style*="--columns-mobile: 1"]) .quantity-breaks__price-container,
    .quantity-breaks__container[data-columns-mobile="1"] .quantity-breaks__price-container,
    .quantity-breaks__container[data-columns-mobile="2"][data-two-column-layout-mobile="horizontal"] .quantity-breaks__price-container {
      align-items: flex-end;
      margin-top: 0;
      padding-top: 0;
    }
  }
  
  .quantity-breaks__price {
    font-family: var(--price-font-family, inherit);
    font-size: var(--price-text-size, 1.25rem);
    font-weight: var(--price-font-weight, 600);
    color: var(--price-color, var(--color-variant-text, var(--color-foreground-heading, #000)));
    line-height: 1;
    letter-spacing: -0.03rem;
  }
  
  .quantity-breaks__card--active .quantity-breaks__price {
    color: var(--active-price-color, var(--price-color, var(--color-selected-variant-text, var(--color-variant-text, var(--color-foreground-heading, #000)))));
  }
  
  .quantity-breaks__original-price {
    font-family: var(--price-font-family, inherit);
    font-size: var(--compare-price-text-size, 0.875rem);
    font-weight: var(--compare-price-font-weight, 400);
    color: var(--compare-price-color, var(--color-variant-text, var(--color-foreground-secondary, #999)));
    text-decoration: none;
    line-height: 1;
    letter-spacing: -0.03rem;
  }
  
  .quantity-breaks__card--active .quantity-breaks__original-price {
    color: var(--active-compare-price-color, var(--compare-price-color, var(--color-selected-variant-text, var(--color-variant-text, var(--color-foreground-secondary, #999)))));
  }
  
  .quantity-breaks__per-unit-text {
    font-size: var(--per-unit-text-size, 0.875rem);
  }
  
  @media screen and (max-width: 749px) {
    .quantity-breaks__card {
      min-height: auto;
    }
    
    .quantity-breaks__quantity-title {
      font-size: var(--title-text-size-mobile, 1rem);
    }
    
    .quantity-breaks__description {
      font-size: var(--description-text-size-mobile, 0.75rem);
    }
    
    .quantity-breaks__price {
      font-size: var(--price-text-size-mobile, 1.125rem);
    }
    
    .quantity-breaks__per-unit-text {
      font-size: var(--per-unit-text-size-mobile, 0.75rem);
    }
    
  }

  .quantity-breaks__ancher-target {
    display: block;
    height: 0;
    overflow: hidden;
    scroll-margin-top: calc(var(--header-group-height, 0px) + var(--scroll-margin, 12px));
    pointer-events: none;
  }
/* END_BLOCK:_quantity-breaks */

/* START_BLOCK:_search-input (INDEX:134) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

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

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

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

  search-page-input-component .search__reset-button {
    border-radius: var(--ms-radius-round, 100%);
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

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

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:135) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .slide__media--desktop {
    position: absolute;
  }

  .slide__media--mobile {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .slide__media--desktop:not(.slide__media--fallback) {
      display: none;
    }
    .slide__media--mobile {
      display: flex;
    }
    .slide__media--desktop.slide__media--fallback {
      display: flex;
    }
  }

  .slide__image-container > .slide__media .slide__image,
  .slide__image-container > .slide__media .slide__video,
  .slide__image-container > .slide__media .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__media .slide__video-poster {
    position: absolute;
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_slider-swiper-slide (INDEX:136) */
.slider-swiper-slide-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background-color: #f4f4f4;
    border-radius: 8px;
    gap: 12px;
    width: 100%;
    height: 100%;
  }

  .slider-swiper-slide-placeholder svg {
    width: 80px;
    height: 80px;
    opacity: 0.4;
  }

  .slider-swiper-slide-placeholder-text {
    font-size: 14px;
    color: #666;
  }

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }
  @media screen and (max-width: 749px) {
    .card .collection-card  {
        flex: 1;
    }
}

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_slider-swiper-slide */

/* START_BLOCK:_social-link (INDEX:137) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:_story-video (INDEX:138) */
.placeholder-video {
    aspect-ratio: 3 / 4;
  }
/* END_BLOCK:_story-video */

/* START_BLOCK:accelerated-checkout (INDEX:142) */
.accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

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

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_BLOCK:accelerated-checkout */

/* START_BLOCK:accordion (INDEX:143) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
    padding-block: var(--accordion-summary-padding-block);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:bullet-points (INDEX:146) */
.bullet-points {
    position: relative;
  }

  .bullet-points__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .bullet-points__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .bullet-points__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .bullet-points__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .bullet-points__icon svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
  }
  
  .bullet-points__text {
    flex: 1;
  }
  
  /* Mobile responsive */
  @media screen and (max-width: 749px) {
    .bullet-points__item {
      gap: 0.5rem;
    }
  }

  /* ── Estilos de despliegue (cosecha Grounded 24-jul) ──
     list = filas icono+texto (nativo) · pills = pastillas inline ·
     inline = línea corrida con separadores. !important neutraliza los
     estilos inline por-punto donde el estilo lo pide. */
  .bullet-points--style-pills .bullet-points__list {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .bullet-points--style-pills .bullet-points__item {
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.14);
    border-radius: var(--ms-radius-pill, 999px);
    padding: 0.3em 0.85em 0.3em 0.55em;
    margin-bottom: 0 !important;
  }
  /* Con `Forma del icono = Ninguna` la pastilla se queda SIN símbolo. El ajuste
     de icono no ofrece "ninguno", y una palomita suelta dentro de una pastilla
     se lee como un glifo pegado, no como un icono. La pastilla ya dice "esto es
     una etiqueta"; el símbolo sobra. */
  .bullet-points--style-pills.bullet-points--icon-none .bullet-points__icon {
    display: none !important;
  }

  .bullet-points--style-pills .bullet-points__icon {
    background: transparent !important;
    color: var(--color-foreground-heading, var(--color-foreground)) !important;
    width: 15px !important; height: 15px !important;
    font-size: 12px !important;
  }
  .bullet-points--style-inline .bullet-points__list {
    display: flex; flex-wrap: wrap; gap: 0.35em 0;
  }
  .bullet-points--style-inline .bullet-points__item { margin-bottom: 0 !important; }
  .bullet-points--style-inline .bullet-points__icon { display: none !important; }
  .bullet-points--style-inline .bullet-points__item:not(:last-child)::after {
    content: "·"; margin-inline: 0.7em; opacity: 0.45;
  }

  /* ── grid = columnas iguales con el icono ARRIBA de su etiqueta (Bëne, 2-sep-2026).
     Es la fila de confianza de Hiya / BetterWild: tres celdas centradas bajo el
     botón de compra. Cada punto reparte la fila por igual (flex 1 1 0) para que
     nunca se parta en renglones sueltos. El icono de línea del tema toma el color
     del punto (currentColor). */
  .bullet-points__svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
  .bullet-points--style-grid .bullet-points__list {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .bullet-points--style-grid .bullet-points__item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 0 !important;
  }
  .bullet-points--style-grid .bullet-points__icon {
    background: transparent !important;
    margin-top: 0 !important;
  }
  .bullet-points--style-grid .bullet-points__text {
    flex: 0 0 auto;
    text-wrap: balance;
  }
/* END_BLOCK:bullet-points */

/* START_BLOCK:buy-buttons (INDEX:148) */
.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) {
    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) {
    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-foreground-rgb) / var(--opacity-subdued-text));
  }

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

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

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

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

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

  .product__pickup-availabilities {
    width: 100%;
  }

  .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);
    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__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .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-primary);
    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: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: var(--ms-w-medium, 500);
    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;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }

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

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: var(--ms-w-body, 400);
  }
/* END_BLOCK:buy-buttons */

/* START_BLOCK:circular-text (INDEX:149) */
.circular-text {
    display: inline-block;
    color: var(--circular-text-color, currentColor);
  }

  .circular-text--absolute {
    position: absolute;
    z-index: var(--circular-text-z-index, 2);
    width: max-content;
    height: max-content;
    display: block;
    margin: 0;
  }

  .circular-text--absolute.circular-text--h-left {
    left: 0;
    right: auto;
  }

  .circular-text--absolute.circular-text--h-center {
    left: 0;
    right: 0;
    width: max-content;
    margin-inline: auto;
  }

  .circular-text--absolute.circular-text--h-right {
    right: 0;
    left: auto;
  }

  .circular-text--absolute.circular-text--v-top {
    top: 0;
    bottom: auto;
  }

  .circular-text--absolute.circular-text--v-center {
    top: 0;
    bottom: 0;
    height: max-content;
    margin-block: auto;
  }

  .circular-text--absolute.circular-text--v-bottom {
    bottom: 0;
    top: auto;
  }

  .circular-text__link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
  }

  .circular-text__surface {
    position: relative;
    width: var(--circular-text-size, 200px);
    height: var(--circular-text-size, 200px);
    border-radius: 50%;
    background-color: var(--circular-text-bg, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .circular-text__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: visible;
  }

  .circular-text__svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  .circular-text__label {
    font-family: var(--circular-text-font-stack, var(--font-body--family));
    font-size: var(--circular-text-font-size, 11px);
    font-weight: var(--circular-text-font-weight, var(--font-body--weight));
    font-style: var(--circular-text-font-style, var(--font-body--style));
    letter-spacing: var(--circular-text-spacing, 0.12em);
    text-transform: var(--circular-text-transform, none);
    dominant-baseline: middle;
  }

  @media (prefers-reduced-motion: no-preference) {
    .circular-text__spin--clockwise {
      animation: circular-text-rotate-cw var(--circular-text-duration, 24s) linear infinite;
    }

    .circular-text__spin--counter_clockwise {
      animation: circular-text-rotate-ccw var(--circular-text-duration, 24s) linear infinite;
    }
  }

  @keyframes circular-text-rotate-cw {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes circular-text-rotate-ccw {
    to {
      transform: rotate(-360deg);
    }
  }

  .circular-text__center {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }

  .circular-text__icon {
    display: block;
    height: auto;
  }
/* END_BLOCK:circular-text */

/* START_BLOCK:comparison-slider (INDEX:153) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:comparison-table-3col (INDEX:154) */
.comparison-table-3col {
    width: 100%;
  }

  .comparison-table-3col__wrapper {
    width: 100%;
    overflow: hidden;
  }

  .comparison-table-3col__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .comparison-table-3col__header-row {
    border: none;
  }

  .comparison-table-3col__header-cell {
    padding: 1rem 1.25rem;
    text-align: center;
    border: none;
    font-weight: 700;
    letter-spacing: 0.03em;
  }

  .comparison-table-3col__header-cell--empty {
    width: 40%;
  }

  .comparison-table-3col__header-cell--col1,
  .comparison-table-3col__header-cell--col2,
  .comparison-table-3col__header-cell--col3 {
    width: 20%;
  }

  .comparison-table-3col__header-image {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }

  .comparison-table-3col__row {
    border-top: 1px solid;
  }

  .comparison-table-3col__cell {
    padding: 0.875rem 1rem;
    text-align: center;
    vertical-align: middle;
    border-left: 1px solid;
  }

  .comparison-table-3col__cell--feature {
    text-align: center;
    width: 40%;
    border-left: none;
    font-weight: 600;
  }

  .comparison-table-3col__cell--col1,
  .comparison-table-3col__cell--col2,
  .comparison-table-3col__cell--col3 {
    width: 20%;
  }

  .comparison-table-3col__icon {
    font-size: 1.25rem;
    font-weight: bold;
    display: inline-block;
    line-height: 1;
  }

  @media screen and (max-width: 749px) {
    .comparison-table-3col__header-cell,
    .comparison-table-3col__cell {
      padding: 0.625rem 0.5rem;
      font-size: 0.8125rem;
    }

    .comparison-table-3col__icon {
      font-size: 1rem;
    }
  }
/* END_BLOCK:comparison-table-3col */

/* START_BLOCK:comparison-table (INDEX:155) */
.comparison-table {
    width: 100%;
  }

  .comparison-table__container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .comparison-table__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .comparison-table__header-row {
    border: none;
  }

  .comparison-table__header-cell {
    padding: 1rem 1.25rem;
    text-align: center;
    border: none;
  }

  .comparison-table__header-cell--empty {
    width: 45%;
    background: transparent;
  }

  .comparison-table__header-cell--column1 {
    width: 27.5%;
  }

  .comparison-table__header-cell--column2 {
    width: 27.5%;
  }

  .comparison-table__header-image {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }

  .comparison-table__row {
    border-top: 1px solid;
  }

  .comparison-table__cell {
    padding: 0.875rem 1.25rem;
    text-align: center;
    vertical-align: middle;
    border-left: 1px solid;
  }

  .comparison-table__cell--feature {
    text-align: center;
    width: 45%;
    border-left: none;
  }

  .comparison-table__cell--column1 {
    width: 27.5%;
  }

  .comparison-table__cell--column2 {
    width: 27.5%;
  }

  .comparison-table__icon {
    font-size: 1.25rem;
    font-weight: bold;
    display: inline-block;
    line-height: 1;
  }

  @media screen and (max-width: 749px) {
    .comparison-table__header-cell,
    .comparison-table__cell {
      padding: 0.75rem 0.875rem;
      font-size: 0.875rem;
    }

    .comparison-table__icon {
      font-size: 1rem;
    }
  }
/* END_BLOCK:comparison-table */

/* START_BLOCK:contact-form-submit-button (INDEX:156) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:157) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:email-signup (INDEX:161) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);

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

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

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

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:163) */
.collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

  .facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: var(--ms-radius-round, 50%);
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets--drawer .facets__actions {
    flex-shrink: 0;
    background-color: var(--color-background);
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

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

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

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

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: var(--ms-w-medium, 500);
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }

  /* ═══════════════════════════════════════════════════════════════
     Bëne · filtros con el estilo de la marca
     Scopeado a :is(.facets, .facets-toggle) para ganarle al bundle
     global por ESPECIFICIDAD (0,2,0 contra 0,1,0), no por orden de
     carga. `.facets-toggle` NO vive dentro de `.facets` — por eso van
     los dos: ahí están el botón "Filtros", su contador y la densidad.
     Nada de esto toca base.css a pelo: `.checkbox` la comparte el
     carrito y `.bubble` el contador del header.
     ═══════════════════════════════════════════════════════════════ */

  /* ── Radio 0 en todo lo que contiene ─────────────────────────── */
  :is(.facets, .facets-toggle) .checkbox {
    --checkbox-border-radius: 0;
  }

  .facets .facets__pill-label,
  .facets .facets__pill-input:disabled + .facets__pill-label svg {
    --pill-label-border-radius: var(--style-border-radius-pills);

    border-radius: var(--style-border-radius-pills);
  }

  .facets .variant-option--images,
  .facets .facets__inputs-list-item--disabled .facets__image-wrapper {
    --image-facet-border-radius: var(--style-border-radius-pills);

    border-radius: var(--style-border-radius-pills);
  }

  .facets .facets__image-wrapper img {
    border-radius: 0;
  }

  :is(.facets, .facets-toggle) .bubble {
    border-radius: var(--style-border-radius-pills);
  }

  .facets-toggle .filter-count-bubble__background {
    border-radius: var(--ms-radius-round, 0);
  }

  :is(.facets, .facets-toggle) .column-picker {
    border-radius: var(--style-border-radius-pills);
  }

  /* ── Guinda: el único color con temperatura ──────────────────── */
  :is(.facets, .facets-toggle)
    .checkbox__input:checked
    + .checkbox__label
    .icon-checkmark {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }

  /* un escalón más: list-filter ya llega a 0,6,0 en el hover */
  :is(.facets, .facets-toggle)
    .facets__inputs-list-item
    .checkbox:not(.checkbox--disabled):hover
    .checkbox__input:checked
    + .checkbox__label
    .icon-checkmark {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
  }

  .facets .facets__pill-input:checked + .facets__pill-label {
    --pill-label-color-rgb: var(--color-background-rgb);
    --pill-label-background-color-rgb: var(--color-primary-rgb);
    --pill-label-border-opacity: 0;

    font-weight: var(--ms-w-medium, 500);
  }

  .facets .facets__inputs-list-item .variant-option--images:has(input:checked) {
    box-shadow: inset 0 0 0
      calc(var(--variant-picker-button-border-width) + 1px)
      var(--color-primary);
  }

  :is(.facets, .facets-toggle)
    .column-options__option-input:checked
    ~ .column-picker {
    color: var(--color-primary);
    background-color: transparent;
  }

  /* ── Tipografía por token, nunca quemada ─────────────────────── */
  .facets .facets__inputs input:checked + label,
  .facets
    .facets__inputs-list--swatches-grid
    .variant-option__button-label:has(:checked),
  .facets
    .facets__inputs-list-item:not(.facets__inputs-list-item--disabled)
    .variant-option__button-label:hover,
  .facets
    .facets__inputs-list-item:not(.facets__inputs-list-item--disabled)
    .facets__image-label:hover {
    font-weight: var(--ms-w-medium, 500);
  }

  /* el contador vive dentro de un <h2 class="h3">: sin peso propio, hereda */
  :is(.facets, .facets-toggle) .facets__bubble,
  :is(.facets, .facets-toggle) .filter-count-bubble__text {
    font-weight: var(--ms-w-body, 400);
  }

  /* mayúsculas SOLO si el ajuste lo pide; sin fallback la regla es
     inválida y el text-transform se hereda del ancestro */
  .facets .facets__label,
  .facets .products-count-wrapper {
    text-transform: var(--facet-label-transform, none);
  }

  /* ── Legibilidad en móvil: la opción es texto, no metadato ───── */
  .facets--drawer .checkbox__label-text {
    color: var(--color-foreground);
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:166) */
.policy-list--horizontal-nav {
    width: 100%;
    text-align: center;
  }

  .policy-list--horizontal {
    display: flex;
    flex-wrap: wrap;
   /* justify-content: center; */
    align-items: center;
    column-gap: clamp(1rem, 3vw, 2.25rem);
    row-gap: 0.5rem;
    margin-block: 0;
    padding: 0;
  }

  .policy-list--horizontal li {
    margin: 0;
  }

  .policy-list--horizontal-link {
    display: inline-block;
    outline-color: #0000;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
    white-space: nowrap;
  }

  @media screen and (max-width: 749px) {
    .policy-list--horizontal-link {
      white-space: normal;
      text-wrap: balance;
    }
  }

  .policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 750px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 750px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:169) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image-text-overlay (INDEX:170) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  placeholder-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio);
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }
  .image-block svg{
    fill: var(--color-foreground);
  }

  .image-block__ancher-target {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    height: 0;
    overflow: hidden;
    scroll-margin-top: calc(var(--header-group-height, 0px) + var(--scroll-margin, 12px));
    pointer-events: none;
    align-self: flex-start;
  }

  .image-block--height-fill .image-block__image,
  .image-block--height-fill .image-block__link-wrapper,
  .image-block--height-fill .image-block__media-link {
    height: 100%;
  }

  .image-block__media-link {
    display: block;
    width: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    align-self: stretch;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .image-block__media-wrap {
    position: relative;
    width: 100%;
    display: block;
  }

  .image-block__media-wrap .image-block__image,
  .image-block__media-wrap .placeholder-image {
    width: 100%;
  }

  .image-block--height-fill.image-block--has-overlay .image-block__media-wrap {
    height: 100%;
    align-self: stretch;
  }

  .image-block__text-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    padding: var(--image-block-overlay-inner-padding, var(--padding-md));
    pointer-events: none;
  }

  .image-block__text-overlay-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgb(0 0 0);
    pointer-events: none;
  }

  .image-block__text-overlay-inner {
    position: relative;
    z-index: 1;
    max-width: min(42rem, 100%);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    pointer-events: auto;
  }

  .image-block__overlay-heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(
      var(--image-block-overlay-heading-min, 1.25rem),
      2.75vw,
      var(--image-block-overlay-heading-max, 2rem)
    );
    font-weight: 600;
    line-height: 1.15;
    color: var(--image-block-overlay-heading-color);
  }

  .image-block__overlay-text {
    margin: 0;
    font-size: var(--image-block-overlay-text-font-size, var(--font-size--body-md));
    line-height: var(--line-height--body-normal);
    color: var(--image-block-overlay-text-color);
  }

  .image-block__overlay-text.rte :is(p, li, ul, ol) {
    font-size: inherit;
  }

  .image-block__overlay-text.rte a {
    color: inherit;
    text-decoration: underline;
  }

  .image-block__overlay-text.rte > *:first-child {
    margin-block-start: 0;
  }

  .image-block__overlay-text.rte > *:last-child {
    margin-block-end: 0;
  }

  .image-block__overlay-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2xs);
    width: 100%;
    margin: 0;
  }

  .text-left .image-block__overlay-actions {
    justify-content: flex-start;
  }

  .text-center .image-block__overlay-actions {
    justify-content: center;
  }

  .text-right .image-block__overlay-actions {
    justify-content: flex-end;
  }

  .image-block__overlay-actions .button,
  .image-block__overlay-actions .button-secondary {
    margin: 0;
  }

  .image-block__overlay-button.link {
    color: var(--image-block-overlay-text-color, currentcolor);
  }

  .image-block__text-overlay--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .image-block__text-overlay--top-center {
    align-items: flex-start;
    justify-content: center;
  }

  .image-block__text-overlay--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .image-block__text-overlay--middle-left {
    align-items: center;
    justify-content: flex-start;
  }

  .image-block__text-overlay--middle-center {
    align-items: center;
    justify-content: center;
  }

  .image-block__text-overlay--middle-right {
    align-items: center;
    justify-content: flex-end;
  }

  .image-block__text-overlay--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .image-block__text-overlay--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }

  .image-block__text-overlay--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }

  .image-block__link-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
  }

  .image-block__link-icon {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--link-icon-color, rgb(var(--color-foreground)));
    background: rgba(0, 0, 0, var(--link-icon-overlay-opacity, 0.35));
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .image-block__link-icon svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    fill: var(--link-icon-color, rgb(var(--color-foreground)));
  }

  .image-block__link-icon--has-bg::before {
    content: '';
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--link-icon-bg, #F5E6C8);
    border-radius: 2px;
    z-index: -1;
  }

  .image-block--link-icon-on_hover:hover .image-block__link-icon,
  .image-block--link-icon-on_hover:focus-visible .image-block__link-icon {
    opacity: 1;
  }

  .image-block--link-icon-always .image-block__link-icon {
    opacity: 1;
  }
/* END_BLOCK:image-text-overlay */

/* START_BLOCK:image (INDEX:171) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  placeholder-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio);
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }
  .image-block svg{
    fill: var(--color-foreground);
  }

  .image-block__ancher-target {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    height: 0;
    overflow: hidden;
    scroll-margin-top: calc(var(--header-group-height, 0px) + var(--scroll-margin, 12px));
    pointer-events: none;
    align-self: flex-start;
  }

  .image-block--height-fill .image-block__image,
  .image-block--height-fill .image-block__link-wrapper {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .image-block__link-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
  }

  .image-block__link-icon {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--link-icon-color, rgb(var(--color-foreground)));
    background: rgba(0, 0, 0, var(--link-icon-overlay-opacity, 0.35));
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .image-block__link-icon svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    fill: var(--link-icon-color, rgb(var(--color-foreground)));
  }

  .image-block__link-icon--has-bg::before {
    content: '';
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--link-icon-bg, #F5E6C8);
    border-radius: var(--ms-radius-sm, 2px);
    z-index: -1;
  }

  .image-block--link-icon-on_hover:hover .image-block__link-icon,
  .image-block--link-icon-on_hover:focus-visible .image-block__link-icon {
    opacity: 1;
  }

  .image-block--link-icon-always .image-block__link-icon {
    opacity: 1;
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:174) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 750px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:176) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:menu */

/* START_BLOCK:ms-add-to-cart (INDEX:177) */
.ms-add-to-cart {
    padding-block: var(--ms-atc-pt, 8px) var(--ms-atc-pb, 0px);
    width: 100%;
  }

  /* El wrapper adopta un scheme para que el botón tome los colores de botón de
     ESE scheme, pero sin pintar el fondo del contenedor (mismo truco que el
     quick-add nativo). */
  .ms-add-to-cart[class*='color-'] {
    background-color: transparent;
  }
/* END_BLOCK:ms-add-to-cart */

/* START_BLOCK:ms-benefit-list (INDEX:178) */
.ms-blist {
    font-size: var(--ms-blist-fs, 0.9375rem);
    line-height: 1.45;
  }

  .ms-blist ul,
  .ms-blist ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55em;
  }

  .ms-blist li {
    position: relative;
    padding-inline-start: 1.75em;
    margin: 0;
  }

  .ms-blist li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.12em;
    width: 1.15em;
    height: 1.15em;
    background-color: var(--ms-blist-accent, var(--color-primary));
  }

  /* ---------- Icono: palomita ---------- */
  .ms-blist--check li::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4.2-4.2 1.7-1.7 2.5 2.5 5.7-5.7 1.7 1.7-7.4 7.4z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4.2-4.2 1.7-1.7 2.5 2.5 5.7-5.7 1.7 1.7-7.4 7.4z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  /* ---------- Icono: flecha ---------- */
  .ms-blist--arrow li::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4v-2z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4v-2z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  /* ---------- Icono: tache (para listas de "no es para ti" / "no trae") ----------
     Bene, Rev 5.53 (3-sep): el mismo circulo que la palomita, con una X adentro,
     para que "Es para ti si" y "No es para ti si" hablen con la misma pieza. */
  .ms-blist--cross li::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.5 12.1-1.4 1.4L12 13.4l-2.1 2.1-1.4-1.4 2.1-2.1-2.1-2.1 1.4-1.4 2.1 2.1 2.1-2.1 1.4 1.4-2.1 2.1 2.1 2.1z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.5 12.1-1.4 1.4L12 13.4l-2.1 2.1-1.4-1.4 2.1-2.1-2.1-2.1 1.4-1.4 2.1 2.1 2.1-2.1 1.4 1.4-2.1 2.1 2.1 2.1z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  /* ---------- Icono: barra (el marcador de Timeline) ---------- */
  .ms-blist--bar li { padding-inline-start: 1.1em; }
  .ms-blist--bar li::before {
    width: 3px;
    height: 1.05em;
    top: 0.18em;
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* ---------- Resaltado del sistema: acento sin cursiva ---------- */
  .ms-blist em {
    font-style: normal;
    color: var(--ms-blist-accent, var(--color-primary));
    font-weight: var(--ms-w-medium, 500);
  }

  .ms-blist strong { font-weight: var(--ms-w-bold, 700); }
  .ms-blist p { margin: 0 0 0.4em; }
  .ms-blist p:last-child { margin-block-end: 0; }

  /* La cola del renglón (después de la raya) baja a gris: jerarquía dentro
     del bullet — el beneficio pesa, el detalle acompaña. */
  .ms-blist__cola {
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }
/* END_BLOCK:ms-benefit-list */

/* START_BLOCK:ms-card-line (INDEX:179) */
.ms-card-line {
    display: inline-block;
    background: var(--b);
    color: var(--t);
    font-family: var(--font-subheading--family);
    font-size: var(--s, 11px);
    font-weight: var(--font-subheading--weight, 500);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.42em 0.7em;
    /* Recto como todo lo que contiene: la pastilla es solo del botón. */
    border-radius: var(--ms-radius-pill, 0px);
    white-space: nowrap;
    width: fit-content;
  }

  /* Sobre la foto. La tarjeta ya es position:relative en Horizon, así que basta
     con sacar el badge del flujo y anclarlo; el bloque debe ir PRIMERO en el
     orden para quedar sobre la imagen y no empujar nada. */
  .ms-card-line--over {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    pointer-events: none;
  }
/* END_BLOCK:ms-card-line */

/* START_BLOCK:ms-card-rating (INDEX:180) */
.ms-card-rating {
    display: flex;
    margin-block-end: var(--ms-card-rating-gap, 0px);
  }
  .ms-card-rating--left {
    justify-content: flex-start;
  }
  .ms-card-rating--center {
    justify-content: center;
  }
  .ms-card-rating--right {
    justify-content: flex-end;
  }
/* END_BLOCK:ms-card-rating */

/* START_BLOCK:ms-card-sizes (INDEX:181) */
.ms-card-sizes-frame {
    display: block;
    width: 100%;
  }

  .ms-card-sizes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ms-card-sizes-gap, 0.375rem);
    justify-content: var(--ms-card-sizes-align, flex-start);
    padding-block: var(--ms-card-sizes-pt, 0) var(--ms-card-sizes-pb, 0);
    margin: 0;
  }

  /* En modo seleccionable el contenedor es un <fieldset>: hay que quitarle el
     borde, el margen y el padding que le pone el navegador por defecto, o la
     tarjeta se llena de una caja fantasma. */
  fieldset.ms-card-sizes {
    border: 0;
    padding-inline: 0;
    min-inline-size: 0;
  }

  .ms-card-sizes__picker form {
    margin: 0;
  }

  .ms-card-sizes__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
    padding: 0.3em 0.5em;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
    border-radius: var(--ms-card-sizes-radius, 0);
    font-family: var(--font-body--family);
    font-size: var(--font-size--2xs, 0.75rem);
    line-height: 1.2;
    color: var(--color-foreground);
    white-space: nowrap;
  }

  /* ── Chips seleccionables ────────────────────────────────────────────────
     El radio se oculta visualmente pero NO con `display:none` ni
     `visibility:hidden`: eso lo saca del foco de teclado y lo vuelve
     inalcanzable. Se usa la técnica de recorte, que lo deja enfocable. */
  label.ms-card-sizes__chip {
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: border-color 0.12s ease, background-color 0.12s ease;
  }

  .ms-card-sizes__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* El elegido: relleno sólido, como el estado activo del resto de la marca.
     SIN cambio de font-weight: la negrita ensancha el chip 1-2px al vuelo y
     con eso la fila de chips puede re-envolver — la tarjeta brincaría al
     seleccionar. El relleno ya comunica el estado él solo. */
  label.ms-card-sizes__chip:has(.ms-card-sizes__radio:checked) {
    border-color: var(--color-foreground);
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  label.ms-card-sizes__chip:has(.ms-card-sizes__radio:checked) .ms-card-sizes__unit {
    opacity: 0.78;
  }

  /* Foco visible para quien navega con teclado. */
  label.ms-card-sizes__chip:has(.ms-card-sizes__radio:focus-visible) {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
  }

  @media (hover: hover) {
    label.ms-card-sizes__chip:hover {
      border-color: rgb(var(--color-foreground-rgb) / 0.55);
    }
  }

  /* Agotado: se muestra, pero se lee como no disponible. */
  .ms-card-sizes__chip--soldout {
    opacity: 0.45;
    text-decoration: line-through;
  }

  /* ── Ajustes leídos desde el MARCO (no desde el fieldset) ────────────────
     El fieldset se morfea contra section-rendering-product-card en cada cambio
     de talla: cualquier clase de ajuste puesta ahí revierte al default en el
     primer clic. El marco no se morfea, así que los toggles viven en él. */

  /* El de mejor precio por unidad: es la palanca de ticket, se marca sin gritar.
     La negrita aquí no brinca: es constante, no depende de la selección. */
  .ms-card-sizes-frame--best .ms-card-sizes__chip--best {
    border-color: rgb(var(--color-foreground-rgb) / 0.55);
    font-weight: 600;
  }

  /* Precio por unidad: oculto salvo que el marco lo pida. En móvil la tarjeta
     va a 2 columnas y "30 ml · $6.30/ml" ×3 no cabe: sólo sale con el toggle
     de móvil. */
  .ms-card-sizes__unit {
    display: none;
  }

  .ms-card-sizes-frame--unit-mobile .ms-card-sizes__unit {
    display: inline;
  }

  @media (min-width: 750px) {
    .ms-card-sizes-frame--unit .ms-card-sizes__unit {
      display: inline;
    }
  }

  .ms-card-sizes__size {
    font-variant-numeric: tabular-nums;
  }
/* END_BLOCK:ms-card-sizes */

/* START_BLOCK:ms-card-tagline (INDEX:182) */
.ms-card-tagline {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--s, 14px);
    line-height: 1.45;
    color: var(--c, var(--color-foreground));
    text-wrap: pretty;
    /* Se recorta por LÍNEAS, no por caracteres: así la cuadrícula queda pareja
       sin importar el largo de cada texto y sin cortar palabras a la mitad. */
    display: -webkit-box;
    -webkit-line-clamp: var(--l, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* El SEGUNDO renglon de la tarjeta: formato y rendimiento del envase.
     Va apagado y mas chico a proposito — es el escalon 3 de la jerarquia
     DTC (nombre > descriptor > formato > precio), como el "3 Months
     Supply" de Primal Queen o el "30 Servings" de Obvi. Si compitiera en
     peso con el descriptor, la tarjeta tendria dos primeras lineas. */
  .ms-card-tagline--meta {
    font-size: var(--s, 12px);
    line-height: 1.35;
    letter-spacing: 0.03em;
    opacity: 0.62;
    font-variant-numeric: tabular-nums;
  }

  /* Los dos renglones van pegados entre si y separados del resto: son UN
     bloque de informacion, no dos hermanos sueltos de la cuadricula. */
  .ms-card-tagline-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* El gancho de suscripcion: chico, en guinda, sin caja (Bite: "Suscribete y
     ahorra 33%"). */
  .ms-card-tagline--sub {
    /* Pastilla suave, como la de Koneli pero en guinda (Leo, 2-sep: "el
       recuadro asi rojito el nuestro"). Etiqueta = pastilla, regla de marca. */
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin-block-start: 2px;
    padding: 0.2em 0.65em;
    border-radius: var(--ms-radius-pill, 999px);
    background: color-mix(in srgb, var(--color-primary, #82242C) 11%, transparent);
    color: var(--color-primary, #82242C);
    font-size: 12px;
    line-height: 1.5;
    font-weight: var(--ms-w-bold, 650);
    letter-spacing: 0.01em;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .ms-card-tagline--caps {
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }
/* END_BLOCK:ms-card-tagline */

/* START_BLOCK:ms-chip (INDEX:183) */
.ms-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: 100%;
  }

  .ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    width: fit-content;
    max-width: 100%;
    padding: 0.35em 0.75em;
    border-radius: var(--ms-radius-pill, 999px);
    font-family: var(--font-subheading--family, var(--font-body--family, inherit));
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.35;
    text-transform: var(--ms-chip-tt, uppercase);
  }

  .ms-chip--sm { font-size: 0.6875rem; letter-spacing: 0.08em; }
  .ms-chip--md { font-size: 0.8125rem; letter-spacing: 0.06em; }

  /* Rev 3.1 (Leo, 19-ago): la pastilla es para ETIQUETAS de una línea. Un chip
     con dos líneas (el sello del patentado) en pastilla se ve inflado →
     forma "rounded" = el radio chico del sistema. */
  .ms-chip--shape-rounded { border-radius: var(--ms-radius-sm, 6px); }

  /* ---------- Estilos ---------- */
  .ms-chip--solid {
    background: var(--ms-chip-bg, var(--color-primary));
    color: var(--ms-chip-ink, var(--color-background));
  }

  /* Leo, 6-ago: "el chip está padre pero NO RESALTA, ponle un fondo o borde
     porque no se ve". Tenía razón y era medible: el tinte iba al 14% del guinda
     (casi blanco sobre blanco) y el contorno a un hairline gris al 45% de opacidad
     — o sea, dos etiquetas que el ojo no registraba como etiquetas.
     El tinte sube a 20% y gana un borde del MISMO color al 35%: se lee como
     pastilla sin gritar. El contorno pasa a borde firme + un lavado mínimo, que
     es lo que lo vuelve un "sello" y no un texto suelto con una raya alrededor. */
  .ms-chip--tint {
    background: color-mix(in srgb, var(--ms-chip-bg, var(--color-primary)) 20%, transparent);
    border: 1px solid
      color-mix(in srgb, var(--ms-chip-bg, var(--color-primary)) 35%, transparent);
    color: var(--color-foreground);
  }

  .ms-chip--outline {
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.03);
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.28);
    color: var(--color-foreground);
  }

  /* Rev 3.2b: dato informativo SIN disfraz de botón (Leo: los chips de puro
     texto con borde "se ven no premium"). Texto gris, sin fondo ni borde. */
  .ms-chip--plain {
    background: none;
    border: 0;
    padding-inline: 0;
    color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.65);
  }

  /* Sin color-mix (navegadores viejos): el tinte cae a un lavado neutro,
     pero conserva el borde para no perder la forma de pastilla. */
  @supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .ms-chip--tint {
      background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
      border-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.22);
    }
  }

  /* ---------- Texto interno ---------- */
  .ms-chip__text > p { margin: 0; }
  .ms-chip__text strong { font-weight: var(--ms-w-bold, 700); }
  .ms-chip__text a { color: inherit; text-decoration: none; }

  /* ---------- Icono (CSS mask: hereda el color correcto por estilo) ---------- */
  .ms-chip__icon {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    background-color: var(--ms-chip-bg, var(--color-primary));
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .ms-chip--solid .ms-chip__icon { background-color: var(--ms-chip-ink, var(--color-background)); }

  .ms-chip__icon--check {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4.2-4.2 1.7-1.7 2.5 2.5 5.7-5.7 1.7 1.7-7.4 7.4z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4.2-4.2 1.7-1.7 2.5 2.5 5.7-5.7 1.7 1.7-7.4 7.4z"/></svg>');
  }
  .ms-chip__icon--seal {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1.5 14.7 3l3.1-.2 1.2 2.9 2.6 1.7-.7 3 .7 3-2.6 1.7-1.2 2.9-3.1-.2-2.7 1.5-2.7-1.5-3.1.2-1.2-2.9L2.4 13l.7-3-.7-3L5 5.7 6.2 2.8l3.1.2L12 1.5zm-1.2 12.9 5.7-5.7-1.7-1.7-4 4-1.8-1.8-1.7 1.7 3.5 3.5z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1.5 14.7 3l3.1-.2 1.2 2.9 2.6 1.7-.7 3 .7 3-2.6 1.7-1.2 2.9-3.1-.2-2.7 1.5-2.7-1.5-3.1.2-1.2-2.9L2.4 13l.7-3-.7-3L5 5.7 6.2 2.8l3.1.2L12 1.5z"/></svg>');
  }
  .ms-chip__icon--leaf {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4c-8 0-14 3-15.5 10.5C4 18 6 20 8.5 20 17 20 20 11 20 4zM5.5 19.5C7 14 10 10.5 15 8c-4 3.5-6.5 7-7.5 11.5h-2z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4c-8 0-14 3-15.5 10.5C4 18 6 20 8.5 20 17 20 20 11 20 4zM5.5 19.5C7 14 10 10.5 15 8c-4 3.5-6.5 7-7.5 11.5h-2z"/></svg>');
  }
  .ms-chip__icon--truck {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5h11v10H3V5zm13 3h3.5L22 11v4h-2a2.5 2.5 0 0 1-5 0h-4a2.5 2.5 0 0 1-5 0H3v-2h11V8h2zm1.5 8.5a1 1 0 1 0 2 0 1 1 0 0 0-2 0zm-9 0a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5h11v10H3V5zm13 3h3.5L22 11v4h-2a2.5 2.5 0 0 1-5 0h-4a2.5 2.5 0 0 1-5 0H3v-2h11V8h2zm1.5 8.5a1 1 0 1 0 2 0 1 1 0 0 0-2 0zm-9 0a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/></svg>');
  }
  .ms-chip__icon--star {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 2 2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8L12 2z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 2 2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8L12 2z"/></svg>');
  }
/* END_BLOCK:ms-chip */

/* START_BLOCK:ms-cross-sell (INDEX:184) */
/* ── LA SUPERFICIE: por qué este bloque NO es una tarjeta ────────
     La primera versión pintaba cada fila como una tarjeta chica con el MISMO
     fondo y el MISMO radio que el desplegable, «para no inventar otra
     superficie». Medido en la ficha de Bëne a 1440, ese razonamiento se cae
     solo: la fila del desplegable y la fila del cross-sell salían con el mismo
     ancho (417.3), el mismo fondo (`rgb(19 23 21 / 0.043)`), el mismo radio (12)
     y la misma separación (8 px). O sea, IDENTICAS. Debajo de cinco barras de
     acordión, «Va bien con» se leía como la sexta y la séptima.
     Leo, 3-sep: *«me gusta el bloque, pero no hace juego con el desplegable,
     se ve muy igual».*

     La corrección no inventa un color ni una forma nueva: INVIERTE la que hay.
     El acordón es contenido que se abre → barras de bruma sin línea.
     Esto es producto que se agrega → lista sobre la superficie de la página,
     separada por la hairline del sistema, y la bruma pasa a la MINIATURA, que es
     lo que convierte cada renglón en un objeto. La línea aquí está en su único
     uso legal: «aquí termina una zona» entre filas que comparten superficie
     (07-design-system §3.1) — nunca para decir «esto es una tarjeta».
     El botón NO se toca: sigue siendo `ms-card-atc`, el mismo del buy box. */
  .ms-xsell {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block-start: 14px;
  }
  .ms-xsell__titulo {
    margin: 0;
    font-size: max(12px, 0.8rem);
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
    padding-block-end: 10px;
    border-block-end: 1px solid var(--color-border, #d8dedc);
  }
  .ms-xsell__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ms-xsell__fila {
    display: grid;
    grid-template-columns: var(--ms-xsell-foto, 64px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding-block: 14px;
  }
  .ms-xsell__fila + .ms-xsell__fila {
    border-block-start: 1px solid var(--color-border, #d8dedc);
  }
  /* La última cierra la zona: sin esta línea la lista se deshilacha contra lo
     que venga después, que en la ficha es aire. */
  .ms-xsell__fila:last-child {
    border-block-end: 1px solid var(--color-border, #d8dedc);
  }
  /* La bruma se muda aquí. Las fotos de bote vienen sobre fondo blanco: sin
     este pedestal el producto flota y el renglón pierde su ancla. */
  .ms-xsell__foto {
    display: block;
    inline-size: var(--ms-xsell-foto, 64px);
    block-size: var(--ms-xsell-foto, 64px);
    border-radius: var(--ms-radius-sm, 6px);
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb, 19 23 21) / 0.045);
  }
  .ms-xsell__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }
  .ms-xsell__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .ms-xsell__nombre {
    font-size: max(13px, 0.875rem);
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.25;
    color: var(--color-foreground);
    text-decoration: none;
  }
  .ms-xsell__nombre:hover { text-decoration: underline; }
  .ms-xsell__desc {
    font-size: max(11px, 0.75rem);
    line-height: 1.3;
    opacity: 0.62;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ms-xsell__precio {
    font-size: max(13px, 0.875rem);
    font-weight: var(--ms-w-medium, 500);
  }
  .ms-xsell__antes {
    margin-inline-end: 0.35rem;
    opacity: 0.5;
    font-weight: 400;
  }

  /* El botón nace con el alto del CTA del buy box; aquí se compacta sin tocar
     su radio ni sus colores, que son los del tema. */
  .ms-xsell__accion .button {
    min-height: 36px;
    height: auto;
    padding-inline: 0.9rem;
    font-size: max(12px, 0.8125rem);
    white-space: nowrap;
  }

  /* En angosto NO se apila: el boton se encoge y la foto cede ancho. Un boton
     de ancho completo por producto convertia la lista en una escalera de CTAs
     y le robaba el peso al boton del buy box, que es el que manda. */
  @media screen and (max-width: 480px) {
    .ms-xsell__fila {
      --ms-xsell-foto: 52px;
      gap: 0.6rem;
      /* Sin relleno lateral: la fila ya no es tarjeta, así que su contenido
         arranca en el margen de la columna, igual que las barras del acordeón
         de arriba. Con los 0.6rem que tenía, la miniatura quedaba metida y las
         dos zonas no alineaban. */
      padding-block: 12px;
    }
    .ms-xsell__accion .button {
      min-height: 34px;
      padding-inline: 0.7rem;
      font-size: max(12px, 0.75rem);
    }
  }
/* END_BLOCK:ms-cross-sell */

/* START_BLOCK:ms-ficha-viva (INDEX:185) */
.msfv {
    font-size: var(--msfv-fs, 0.9375rem);
    line-height: 1.5;
    width: 100%;
  }

  .msfv__intro {
    margin: 0 0 0.9em;
    font-size: 0.8125em;
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .msfv__p {
    margin: 0.75em 0 0;
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

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

  /* ---------- lista: filas con hairline (acordeón) ---------- */
  .msfv__rows {
    margin: 0;
    display: grid;
  }

  .msfv--lista .msfv__row {
    padding-block: 0.65em;
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  .msfv--lista .msfv__row:last-child { border-block-end: 0; }
  .msfv--lista .msfv__row:first-child { padding-block-start: 0.1em; }

  .msfv__term {
    display: block;
    margin: 0;
    font-weight: var(--ms-w-bold, 700);
    color: var(--color-foreground);
  }

  .msfv__desc {
    display: block;
    margin: 0.15em 0 0;
    font-size: 0.925em;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  /* ---------- labels: etiqueta CAPS en acento + texto ---------- */
  .msfv__labels {
    margin: 0;
    display: grid;
    gap: 0.9em;
  }

  .msfv--labels .msfv__term {
    font-size: 0.75em;
    font-weight: var(--ms-w-bold, 700);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--msfv-accent, var(--color-primary, currentColor));
  }

  .msfv--labels .msfv__desc {
    font-size: 1em;
    color: rgb(var(--color-foreground-rgb) / 0.8);
    margin-block-start: 0.2em;
  }

  /* ---------- cards: tarjetas de ingrediente ---------- */
  .msfv__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    counter-reset: msfv;
    /* que la sombra/borde no se recorte */
    padding-block: 2px;
  }

  .msfv__cards::-webkit-scrollbar { display: none; }

  .msfv__card {
    position: relative;
    flex: 0 0 min(78%, 300px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.1rem 1.05rem 1.15rem;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
    border-radius: var(--ms-radius-md, var(--ms-radius-base, 12px));
    background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
    overflow: hidden;
    counter-increment: msfv;
  }

  /* Numeración editorial 01 / 02 / 03 — heredada del teatro oscuro Rev 3.3
     (patrón Mars Men): ancla el ojo y ordena el escaneo. */
  .msfv__card::before {
    content: counter(msfv, decimal-leading-zero);
    display: block;
    font-size: 0.71875rem;
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: 0.1em;
    color: rgb(var(--color-foreground-rgb) / 0.45);
    margin-block-end: 0.45rem;
  }

  .msfv--cards .msfv__term { font-size: 1.0625em; line-height: 1.3; }
  .msfv--cards .msfv__desc { font-size: 0.9em; }

  @media screen and (min-width: 750px) {
    .msfv__cards {
      display: grid;
      grid-template-columns: repeat(var(--msfv-cols, 2), minmax(0, 1fr));
      overflow: visible;
      gap: 0.9rem;
    }

    .msfv__card { flex: initial; }
  }

  @media (prefers-reduced-motion: reduce) {
    .msfv__cards { scroll-behavior: auto; }
  }
/* END_BLOCK:ms-ficha-viva */

/* START_BLOCK:ms-ingredientes-clave (INDEX:186) */
.msic {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ms-space-sm, 0.9rem);
  }
  @media screen and (min-width: 750px) {
    .msic { grid-template-columns: repeat(var(--msic-cols, 3), minmax(0, 1fr)); gap: var(--ms-space-md, 1.25rem); }
  }
  /* Carrusel en movil (Leo, 3-sep: "los ingredientes quizas un carousel en mobile").
     Con 3 ingredientes la rejilla de 2 dejaba una tarjeta huerfana en su propia
     fila y la seccion media 1,140 px a 375. Una tira deslizable: cada tarjeta al
     68 % del ancho, la siguiente asoma (es la senal de que hay mas), scroll-snap
     y la barra oculta. Sangra al margen de pagina para que la tira corra de
     borde a borde como la de "Elige tu meta" del home. */
  @media screen and (max-width: 749px) {
    .msic--m-carousel {
      display: flex;
      gap: var(--ms-space-sm, 0.9rem);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      margin-inline: calc(var(--page-margin, 16px) * -1);
      padding-inline: var(--page-margin, 16px);
      scroll-padding-inline: var(--page-margin, 16px);
      padding-block-end: 2px;
    }
    .msic--m-carousel::-webkit-scrollbar { display: none; }
    .msic--m-carousel .msic__card {
      flex: 0 0 68%;
      max-width: 280px;
      scroll-snap-align: start;
    }
  }
  .msic__card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
  }
  .msic__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--ms-radius-card, 12px);
    background: rgb(var(--color-foreground-rgb, 19 23 21) / 0.045);
  }
  .msic--portrait .msic__media { aspect-ratio: 4 / 5; }
  .msic__img,
  .msic__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .msic__media--empty {
    display: grid;
    place-items: center;
    font-family: var(--font-heading--family, inherit);
    font-size: 2rem;
    color: rgb(var(--color-foreground-rgb, 19 23 21) / 0.25);
  }
  .msic__body { display: flex; flex-direction: column; gap: 0.3rem; }
  .msic__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
  }
  .msic__name {
    font-size: 0.9375rem;
    font-weight: var(--ms-w-bold, 650);
    line-height: 1.3;
    color: var(--color-foreground);
    text-wrap: balance;
  }
  .msic__dose {
    display: inline-flex;
    align-items: center;
    padding: 0.1em 0.55em;
    border: 1px solid rgb(var(--color-foreground-rgb, 19 23 21) / 0.22);
    border-radius: var(--ms-radius-pill, 999px);
    font-size: 0.75rem;
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--color-foreground);
    white-space: nowrap;
  }
  .msic__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(var(--color-foreground-rgb, 19 23 21) / 0.72);
    text-wrap: pretty;
  }
  .msic__empty { opacity: 0.7; }
/* END_BLOCK:ms-ingredientes-clave */

/* START_BLOCK:ms-nutrition-facts (INDEX:187) */
.ms-nf {
    display: inline-block;
  }

  .ms-nf__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs, 0.5rem);
    cursor: pointer;
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
    font: inherit;
    line-height: 1.2;
  }

  .ms-nf__trigger:hover {
    opacity: 0.7;
  }

  .ms-nf__icon {
    flex-shrink: 0;
  }

  .ms-nf__dialog {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding: var(--padding-4xl, 2.5rem) var(--padding-xl, 1.25rem) var(--padding-xl, 1.25rem);
    max-width: min(760px, 95vw);
    max-height: var(--modal-max-height, 88vh);
  }

  @media screen and (min-width: 750px) {
    .ms-nf__dialog {
      padding: var(--padding-5xl, 3rem);
    }
  }

  .ms-nf__dialog[open] {
    animation: modalSlideInTop var(--animation-speed, 0.2s) var(--animation-easing, ease) forwards;
  }

  .ms-nf__dialog.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed, 0.2s) var(--animation-easing, ease) forwards;
  }

  .ms-nf__dialog::backdrop {
    background: rgb(0 0 0 / 0.5);
  }

  .ms-nf__dialog--bottom {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-radius: var(--ms-radius-lg, 16px) var(--ms-radius-lg, 16px) 0 0;
  }

  .ms-nf__dialog--bottom[open] {
    animation: ms-nf-sheet-in var(--animation-speed, 0.25s) var(--animation-easing, ease) forwards;
  }

  .ms-nf__dialog--bottom.dialog-closing {
    animation: ms-nf-sheet-out var(--animation-speed, 0.25s) var(--animation-easing, ease) forwards;
  }

  @keyframes ms-nf-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes ms-nf-sheet-out { from { transform: translateY(0); } to { transform: translateY(100%); } }

  .ms-nf__close {
    position: absolute;
    top: var(--margin-2xs, 0.5rem);
    right: var(--margin-2xs, 0.5rem);
    opacity: 0.8;
    cursor: pointer;
    animation: none;
  }

  .ms-nf__close:hover {
    opacity: 1;
  }

  .ms-nf__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .ms-nf__heading {
    margin: 0;
    font-size: var(--font-h4--size, 1.5rem);
    line-height: 1.2;
  }

  .ms-nf__image-wrap {
    width: 100%;
  }

  /* La tabla se consulta de un vistazo: tiene que CABER, no pedir scroll.
     Medido en escritorio: la imagen es cuadrada (680x680) y con `width: 100%`
     salia a 649 de alto dentro de un dialog de 585 — se cortaba 200 px. Con el
     alto acotado, se reduce proporcionalmente hasta entrar y el ancho la limita
     en movil. */
  .ms-nf__image {
    width: auto;
    max-width: 100%;
    max-height: calc(var(--modal-max-height, 88vh) - 10rem);
    height: auto;
    display: block;
    margin-inline: auto;
    border-radius: var(--ms-radius-md, 8px);
  }

  .ms-nf__content {
    font-size: var(--ms-t-body, 1rem);
    line-height: 1.6;
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-nf__dialog[open],
    .ms-nf__dialog.dialog-closing,
    .ms-nf__dialog--bottom[open],
    .ms-nf__dialog--bottom.dialog-closing {
      animation: none;
    }
  }
/* END_BLOCK:ms-nutrition-facts */

/* START_BLOCK:ms-occasion (INDEX:188) */
.ms-occasion {
    margin: 0;
    color: var(--color-foreground);
    opacity: 0.6;
    /* UN solo renglón siempre. Con 3 etiquetas la línea se iba a dos renglones
       en unas tarjetas y a uno en otras, y eso descuadraba la fila entera
       (medido: precios a 681 y 666 en la misma fila). La tarjeta se juzga EN
       FILA, así que aquí importa más el alto constante que ver la línea
       completa: lo que no cabe se corta con puntos suspensivos. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Mapea el texto a la escala tipográfica del tema (Ajustes → Tipografía), igual
     que los *_type_preset de las secciones ms-. Sin preset, hereda del contenedor. */
  .ms-occasion--paragraph {
    font-family: var(--font-body--family);
    font-size: var(--font-paragraph--size);
    letter-spacing: var(--font-paragraph--letter-spacing);
    text-transform: none;
  }
  .ms-occasion--h5 {
    font-family: var(--font-h5--family);
    font-size: var(--font-h5--size);
    letter-spacing: var(--font-h5--letter-spacing);
  }
  .ms-occasion--h6 {
    font-family: var(--font-h6--family);
    font-size: var(--font-h6--size);
    letter-spacing: var(--font-h6--letter-spacing);
  }
/* END_BLOCK:ms-occasion */

/* START_BLOCK:ms-product-classification (INDEX:190) */
.ms-card-classification {
    margin: 0;
    color: var(--color-foreground);
    opacity: 0.6;
  }
  /* Mapea el texto a la escala tipográfica del tema (Ajustes → Tipografía), igual que
     los *_type_preset de las secciones ms-. Sin preset, hereda del contenedor. */
  .ms-card-classification--paragraph {
    font-family: var(--font-body--family);
    font-size: var(--font-paragraph--size);
    letter-spacing: var(--font-paragraph--letter-spacing);
    text-transform: none;
  }
  .ms-card-classification--h5 {
    font-family: var(--font-h5--family);
    font-size: var(--font-h5--size);
    letter-spacing: var(--font-h5--letter-spacing);
    text-transform: var(--font-h5--case, none);
  }
  .ms-card-classification--h6 {
    font-family: var(--font-h6--family);
    font-size: var(--font-h6--size);
    letter-spacing: var(--font-h6--letter-spacing);
    text-transform: var(--font-h6--case, none);
  }
/* END_BLOCK:ms-product-classification */

/* START_BLOCK:ms-que-esperar (INDEX:192) */
.msqe {
    font-size: var(--msqe-fs, 0.9375rem);
    width: 100%;
    max-width: 640px;
  }

  .msqe__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.75rem;
  }

  .msqe__etapa {
    position: relative;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
  }

  /* Línea que conecta un calendarito con el siguiente */
  .msqe__etapa:not(:last-child)::before {
    content: '';
    position: absolute;
    inset-inline-start: 37px;
    top: 64px;
    bottom: -1.75rem;
    width: 1px;
    background: rgb(var(--color-foreground-rgb) / 0.12);
  }

  /* ---------- El calendarito ---------- */
  .msqe__cal {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 74px;
    border: 1.5px solid color-mix(in srgb, var(--msqe-accent, #82242C) 45%, transparent);
    border-radius: var(--ms-radius-md, var(--ms-radius-base, 12px));
    background: var(--color-background);
    overflow: hidden;
    text-align: center;
  }

  .msqe__cal-top {
    display: block;
    height: 9px;
    background: var(--msqe-accent, var(--color-primary, currentColor));
  }

  .msqe__cal-label {
    display: block;
    padding: 0.5rem 0.3rem 0.55rem;
    font-size: 0.71875rem;
    font-weight: var(--ms-w-bold, 700);
    line-height: 1.15;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--msqe-accent, var(--color-foreground));
  }

  /* ---------- El contenido ---------- */
  .msqe__titulo {
    margin: 0.1rem 0 0.35rem;
    font-size: 1.0625em;
    font-weight: var(--ms-w-bold, 650);
    line-height: 1.25;
    color: var(--color-foreground);
  }

  .msqe__texto {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / 0.68);
  }

  .msqe__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45em;
  }

  .msqe__items li {
    position: relative;
    padding-inline-start: 1.65em;
    color: rgb(var(--color-foreground-rgb) / 0.68);
  }

  .msqe__items li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.16em;
    width: 1.05em;
    height: 1.05em;
    background-color: var(--msqe-accent, var(--color-primary, currentColor));
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4.2-4.2 1.7-1.7 2.5 2.5 5.7-5.7 1.7 1.7-7.4 7.4z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4.2-4.2 1.7-1.7 2.5 2.5 5.7-5.7 1.7 1.7-7.4 7.4z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .msqe__nota {
    margin: 1.4rem 0 0;
    font-size: 0.8125em;
    color: rgb(var(--color-foreground-rgb) / 0.5);
  }

  @media screen and (min-width: 750px) {
    .msqe__etapa { gap: 1.4rem; }
  }

  /* ── Presentacion "columnas" (Bene, Rev 5.53 · 3-sep) ──────────────────────
     La lista vertical con calendario y linea conectora media 568 px en movil y
     apilaba tres bloques de texto. En columnas, escritorio pone las tres etapas
     lado a lado como tarjetas (Arrae: "Benefits That Build, Month Over Month");
     movil las compacta: la etiqueta del calendario se vuelve pastilla en linea
     con el titulo y desaparecen la columna de 74 px y la linea. Mismo contenido,
     la mitad de scroll. */
  .msqe--columns { max-width: none; }
  .msqe--columns .msqe__etapa::before { content: none; }
  .msqe--columns .msqe__etapa {
    padding: 1.1rem 1.1rem 1.2rem;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    border-radius: var(--ms-radius-card, var(--ms-radius-md, 12px));
    background: var(--color-background);
  }
  @media screen and (min-width: 750px) {
    .msqe--columns .msqe__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }
    .msqe--columns .msqe__etapa {
      grid-template-columns: 1fr;
      gap: 0.8rem;
    }
    .msqe--columns .msqe__cal { width: 66px; }
    .msqe--columns .msqe__nota { text-align: left; }
  }
  @media screen and (max-width: 749px) {
    /* Sin caja en movil. Medido servido a 375: con tarjeta (borde + relleno) la
       seccion crecia a 740 px, MAS que la lista original (568). Pastilla y titulo
       en el mismo renglon, el texto debajo. `display: contents` en el cuerpo deja
       que la pastilla (hermana) y el titulo (nieto) compartan la fila del grid. */
    .msqe--columns .msqe__list { gap: 1rem; }
    .msqe--columns .msqe__etapa {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 0.6rem;
      row-gap: 0.3rem;
      align-items: center;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    .msqe--columns .msqe__body { display: contents; }
    .msqe--columns .msqe__cal {
      grid-column: 1;
      grid-row: 1;
      display: inline-flex;
      flex-direction: row;
      width: auto;
      border: 1.5px solid color-mix(in srgb, var(--msqe-accent, #82242C) 45%, transparent);
      border-radius: var(--ms-radius-pill, 999px);
    }
    .msqe--columns .msqe__cal-top { display: none; }
    .msqe--columns .msqe__cal-label { padding: 0.3em 0.7em; }
    .msqe--columns .msqe__titulo { grid-column: 2; grid-row: 1; margin: 0; }
    .msqe--columns .msqe__texto,
    .msqe--columns .msqe__items { grid-column: 1 / -1; grid-row: 2; }
  }
/* END_BLOCK:ms-que-esperar */

/* START_BLOCK:ms-rating-line (INDEX:193) */
.ms-rating-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: var(--ms-rl-size, 14px);
    line-height: 1.2;
  }
  .ms-rating-line--left {
    justify-content: flex-start;
  }
  .ms-rating-line--center {
    justify-content: center;
  }
  .ms-rating-line--right {
    justify-content: flex-end;
  }
  .ms-rating-line__texto {
    font-weight: var(--ms-w-medium, 500);
  }
/* END_BLOCK:ms-rating-line */

/* START_BLOCK:ms-size-guide (INDEX:194) */
.ms-size-guide {
    display: inline-block;
  }

  .ms-size-guide__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs, 0.5rem);
    cursor: pointer;
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
    font: inherit;
    line-height: 1.2;
  }

  .ms-size-guide__trigger:hover {
    opacity: 0.7;
  }

  .ms-size-guide__icon {
    flex-shrink: 0;
  }

  img.ms-size-guide__icon {
    display: inline-block;
    object-fit: contain;
  }

  .ms-size-guide__dialog {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding: var(--padding-4xl, 2.5rem) var(--padding-xl, 1.25rem) var(--padding-xl, 1.25rem);
    max-width: min(640px, 95vw);
    max-height: var(--modal-max-height, 85vh);
  }

  @media screen and (min-width: 750px) {
    .ms-size-guide__dialog {
      padding: var(--padding-5xl, 3rem);
    }
  }

  .ms-size-guide__dialog[open] {
    animation: modalSlideInTop var(--animation-speed, 0.2s) var(--animation-easing, ease) forwards;
  }

  .ms-size-guide__dialog.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed, 0.2s) var(--animation-easing, ease) forwards;
  }

  .ms-size-guide__dialog::backdrop {
    background: rgb(0 0 0 / 0.5);
  }

  .ms-size-guide__dialog--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width, 420px);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  .ms-size-guide__dialog--drawer:modal {
    max-height: 100dvh;
  }

  /* Hoja inferior (se despliega desde abajo) — como el tema live */
  .ms-size-guide__dialog--bottom {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-radius: var(--ms-radius-lg, 16px) var(--ms-radius-lg, 16px) 0 0;
  }
  .ms-size-guide__dialog--bottom[open] {
    animation: ms-sg-sheet-in var(--animation-speed, 0.25s) var(--animation-easing, ease) forwards;
  }
  .ms-size-guide__dialog--bottom.dialog-closing {
    animation: ms-sg-sheet-out var(--animation-speed, 0.25s) var(--animation-easing, ease) forwards;
  }
  @keyframes ms-sg-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes ms-sg-sheet-out { from { transform: translateY(0); } to { transform: translateY(100%); } }
  @media (prefers-reduced-motion: reduce) {
    .ms-size-guide__dialog--bottom[open],
    .ms-size-guide__dialog--bottom.dialog-closing { animation: none; }
  }

  .ms-size-guide__video-wrap { width: 100%; }
  .ms-size-guide__video-wrap video,
  .ms-size-guide__video-wrap iframe {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--ms-radius-md, 8px);
  }

  .ms-size-guide__close {
    position: absolute;
    top: var(--margin-2xs, 0.5rem);
    right: var(--margin-2xs, 0.5rem);
    opacity: 0.8;
    cursor: pointer;
    animation: none;
  }

  .ms-size-guide__close:hover {
    opacity: 1;
  }

  .ms-size-guide__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .ms-size-guide__heading {
    margin: 0;
  }

  .ms-size-guide__image-wrap {
    width: 100%;
  }

  .ms-size-guide__image {
    width: 100%;
    height: auto;
    display: block;
  }

  .ms-size-guide__content {
    font-size: var(--ms-t-body);
    line-height: 1.6;
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-size-guide__dialog[open],
    .ms-size-guide__dialog.dialog-closing {
      animation: none;
    }
  }
/* END_BLOCK:ms-size-guide */

/* START_BLOCK:ms-subscription (INDEX:195) */
.ms-sub {
    display: block;
    width: 100%;
  }

  .ms-sub__fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
    display: grid;
    gap: var(--ms-space-2xs, 0.5rem);
  }

  .ms-sub__legend {
    padding: 0;
    margin-block-end: var(--ms-space-3xs, 0.35rem);
    font-family: var(--font-subheading--family, var(--font-body--family));
    font-weight: var(--ms-w-medium, 500);
    color: var(--color-foreground);
  }

  .ms-sub__option {
    position: relative;
    display: block;
  }

  /* `hidden` debe ganarle al display:block de arriba. */
  .ms-sub__option[hidden] {
    display: none;
  }

  /* Rev 3.2 (Bëne, 2-sep-2026): la opción de suscripción es UNA sola tarjeta.
     La fila (radio · título · precio) y el panel (frecuencia · beneficios)
     comparten borde, radio y fondo. Antes el panel era una segunda caja colgada
     con margen negativo bajo la fila y, al elegir la suscripción, se veía
     cortado. El contenedor lleva el borde; la fila interior se queda sin él. */
  .ms-sub__option--sub {
    border: 1px solid rgb(var(--color-foreground-rgb, 19 23 21) / 0.12);
    border-radius: var(--ms-sub-radius, 12px);
    background: var(--color-background);
    transition: border-color var(--ms-dur, 0.2s) var(--ms-ease, ease),
      box-shadow var(--ms-dur, 0.2s) var(--ms-ease, ease),
      background-color var(--ms-dur, 0.2s) var(--ms-ease, ease);
  }

  .ms-sub__option--sub:hover {
    border-color: var(--color-border);
  }

  .ms-sub__option--sub:has(.ms-sub__radio:checked) {
    border-color: var(--color-primary, var(--color-foreground));
    box-shadow: inset 0 0 0 1px var(--color-primary, var(--color-foreground));
    background: color-mix(in srgb, var(--color-primary, #82242C) 5%, var(--color-background, #fff));
  }

  .ms-sub__option--sub .ms-sub__card,
  .ms-sub__option--sub .ms-sub__card:hover,
  .ms-sub__option--sub .ms-sub__card:has(.ms-sub__radio:checked) {
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
  }

  /* ---------- Tarjeta de opción ---------- */
  .ms-sub__card {
    display: flex;
    align-items: center;
    gap: var(--ms-space-2xs, 0.5rem);
    width: 100%;
    min-height: var(--ms-touch-min, 44px);
    padding: var(--ms-space-sm, 0.9rem);
    /* Rev 3.1: borde en REPOSO = hairline del 12% de la tinta (el estándar de
       bordes de la casa); la selección sigue marcándose en primario (guinda). */
    border: 1px solid rgb(var(--color-foreground-rgb, 19 23 21) / 0.12);
    border-radius: var(--ms-sub-radius, 12px);
    background: var(--color-background);
    color: var(--color-foreground);
    cursor: pointer;
    transition: border-color var(--ms-dur, 0.2s) var(--ms-ease, ease),
      box-shadow var(--ms-dur, 0.2s) var(--ms-ease, ease);
  }

  .ms-sub__card:hover {
    border-color: var(--color-border);
  }

  .ms-sub__card:has(.ms-sub__radio:checked) {
    border-color: var(--color-primary, var(--color-foreground));
    box-shadow: inset 0 0 0 1px var(--color-primary, var(--color-foreground));
    /* Lavado del color primario sobre el fondo (patrón ARMRA/Timeline: la
       opción elegida se PINTA, no solo se delinea). Navegador viejo sin
       color-mix: la declaración se descarta y queda el fondo base. */
    background: color-mix(in srgb, var(--color-primary, #82242C) 5%, var(--color-background, #fff));
  }

  .ms-sub__card:has(.ms-sub__radio:focus-visible) {
    outline: 2px solid var(--color-primary, var(--color-foreground));
    outline-offset: 2px;
  }

  /* ---------- Radio nativo, estilizado (sigue siendo un input real) ---------- */
  .ms-sub__radio {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-background);
    display: grid;
    place-content: center;
    cursor: pointer;
  }

  .ms-sub__radio::after {
    content: '';
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--color-primary, var(--color-foreground));
    transform: scale(0);
    transition: transform var(--ms-dur, 0.2s) var(--ms-ease, ease);
  }

  .ms-sub__radio:checked {
    border-color: var(--color-primary, var(--color-foreground));
  }

  .ms-sub__radio:checked::after {
    transform: scale(1);
  }

  .ms-sub__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
  }

  .ms-sub__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ms-space-3xs, 0.35rem);
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.25;
  }

  .ms-sub__note {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
  }

  .ms-sub__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1em 0.5em;
    border-radius: var(--ms-radius-sm, 6px);
    background: var(--color-primary-button-background, var(--color-primary));
    color: var(--color-primary-button-text, var(--color-background));
    font-size: 0.7rem;
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
  }

  .ms-sub__badge[hidden] {
    display: none;
  }

  .ms-sub__pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .ms-sub__price {
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.2;
    white-space: nowrap;
  }

  .ms-sub__compare {
    font-size: 0.8125rem;
    line-height: 1.2;
    opacity: 0.55;
    white-space: nowrap;
  }

  .ms-sub__compare[hidden] {
    display: none;
  }

  /* ---------- Cinta "más popular" ---------- */
  .ms-sub__ribbon {
    position: absolute;
    top: 0;
    right: var(--ms-space-sm, 0.9rem);
    transform: translateY(-50%);
    z-index: 1;
    padding: 0.1em 0.6em;
    border-radius: var(--ms-radius-pill, 999px);
    background: var(--color-primary-button-background, var(--color-primary));
    color: var(--color-primary-button-text, var(--color-background));
    font-size: 0.6875rem;
    font-weight: var(--ms-w-medium, 500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
  }

  /* Rev 3.1: el resalte de la opción de suscripción lo da la insignia
     "MÁS ELEGIDO", no un gris más oscuro — el borde queda en el estándar. */
  .ms-sub--highlight .ms-sub__option--sub .ms-sub__card {
    border-color: rgb(var(--color-foreground-rgb, 19 23 21) / 0.12);
  }

  /* ---------- Panel de frecuencia ----------
     Vive DENTRO de la tarjeta de suscripción (Rev 3.2): sin borde ni fondo
     propios; una línea fina lo separa de la fila del precio, metida al mismo
     carril que el contenido de la fila. */
  .ms-sub__panel {
    display: grid;
    gap: var(--ms-space-xs, 0.65rem);
    margin: 0 var(--ms-space-sm, 0.9rem);
    padding: var(--ms-space-sm, 0.9rem) 0;
    border-top: 1px solid rgb(var(--color-foreground-rgb, 19 23 21) / 0.1);
    background: transparent;
  }

  /* `hidden` debe ganarle al display:grid de arriba. */
  .ms-sub__panel[hidden] {
    display: none;
  }

  .ms-sub__freq {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
  }

  .ms-sub__freq-legend {
    padding: 0;
    margin-block-end: var(--ms-space-3xs, 0.35rem);
    font-size: 0.8125rem;
    font-weight: var(--ms-w-medium, 500);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.7));
  }

  .ms-sub__freq-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ms-space-3xs, 0.35rem);
  }

  .ms-sub__freq-item {
    position: relative;
    flex: 1 1 auto;
  }

  .ms-sub__freq-item[hidden] {
    display: none;
  }

  /* El radio real queda encima de su etiqueta: sigue siendo focusable y
     navegable con flechas, pero no se ve el control nativo. */
  .ms-sub__freq-radio {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .ms-sub__freq-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    min-height: var(--ms-touch-min, 44px);
    padding: 0.4rem 0.7rem;
    border: 1px solid rgb(var(--color-foreground-rgb, 19 23 21) / 0.12);
    border-radius: var(--ms-radius-sm, 6px);
    background: var(--color-background);
    color: var(--color-foreground);
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--ms-dur, 0.2s) var(--ms-ease, ease);
  }

  .ms-sub__freq-radio:checked + .ms-sub__freq-label {
    border-color: var(--color-primary, var(--color-foreground));
    box-shadow: inset 0 0 0 1px var(--color-primary, var(--color-foreground));
    font-weight: var(--ms-w-medium, 500);
  }

  .ms-sub__freq-radio:focus-visible + .ms-sub__freq-label {
    outline: 2px solid var(--color-primary, var(--color-foreground));
    outline-offset: 2px;
  }

  .ms-sub__freq-radio:disabled + .ms-sub__freq-label {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .ms-sub__freq-save {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
  }

  /* ---------- Checklist de beneficios (patrón ARMRA) ---------- */
  .ms-sub__benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
  }

  .ms-sub__benefits li {
    position: relative;
    padding-inline-start: 1.6em;
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .ms-sub__benefits li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.1em;
    width: 1.05em;
    height: 1.05em;
    background-color: var(--color-primary, var(--color-foreground));
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4.2-4.2 1.7-1.7 2.5 2.5 5.7-5.7 1.7 1.7-7.4 7.4z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4.2-4.2 1.7-1.7 2.5 2.5 5.7-5.7 1.7 1.7-7.4 7.4z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .ms-sub__summary {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.35;
    color: var(--color-primary, var(--color-foreground));
  }

  .ms-sub__summary[hidden] {
    display: none;
  }

  .ms-sub__guarantee {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
  }

  .ms-sub__guarantee > :last-child {
    margin-block-end: 0;
  }

  /* Desde tablet hay espacio para separar mejor precio y texto. */
  @media screen and (min-width: 750px) {
    .ms-sub__card {
      gap: var(--ms-space-xs, 0.65rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-sub__card,
    .ms-sub__radio::after,
    .ms-sub__freq-label {
      transition: none;
    }
  }
/* END_BLOCK:ms-subscription */

/* START_BLOCK:page (INDEX:197) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .page-placeholder {
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:198) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:199) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__button:has(.popup-link__icon) {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs, 0.5rem);
  }

  .popup-link__button .popup-link__icon {
    position: static;
    top: auto;
    flex-shrink: 0;
  }

  img.popup-link__icon {
    display: inline-block;
    object-fit: contain;
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:price (INDEX:200) */
product-price [ref="priceContainer"] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
  }
  product-price.text-block--align-center >* {
    margin-inline: auto;
    justify-content: center;
}
  product-price.text-block--align-right >* {
    margin-inline-start: auto;
    justify-content: right;
}
  product-price.text-block--align-left >* {
    margin-inline-end: auto;
    justify-content: left;
}
  .tax-note:empty {
    display: none;
  }

  form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }

  product-price .sale-badge {
    display: inline-flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 0.25em 0.9em;
    font-size: var(--sale-badge-font-size);
    border-radius: var(--sale-badge-border-radius, 4px);
    color: var(--sale-badge-text-color, var(--color-foreground));
    -webkit-text-fill-color: var(--sale-badge-text-color, var(--color-foreground));
    background: var(--sale-badge-background-color, var(--color-background));
    vertical-align: middle;
  }

  /* 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: var(--ms-w-body, 400);
    font-size: var(--font-size--xs);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  product-price[data-block-id] [ref='priceContainer'] .price {
    color: var(--product-price-block-price-color, inherit);
  }

  product-price[data-block-id] [ref='priceContainer'] > .price:not(.price-range) {
    color: var(--product-price-block-regular-color, var(--product-price-block-price-color, inherit));
  }

  product-price[data-block-id] [ref='priceContainer']:not(:has(.compare-at-price)) .price.price-range {
    color: var(--product-price-block-regular-color, var(--product-price-block-price-color, inherit));
  }

  product-price[data-block-id] [ref='priceContainer'] .compare-at-price {
    color: var(--product-price-block-compare-color, inherit);
    opacity: 1;
  }

  product-price[data-block-id] [ref='priceContainer'] .compare-at-price .price-split::after,
  product-price[data-block-id] [ref='priceContainer'] s.compare-at-price .price-split::after {
    background: var(--product-price-block-compare-strike-color, currentColor);
  }

  product-price[data-block-id] [ref='priceContainer'] .compare-at-price .money,
  product-price[data-block-id] [ref='priceContainer'] s.compare-at-price .money {
    text-decoration-color: var(--product-price-block-compare-strike-color, currentColor);
  }
/* END_BLOCK:price */

/* START_BLOCK:product-custom-property (INDEX:202) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:204) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:205) */
.product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }

  .product-recommendations {
    display: block;
  }

  .block-resource-list {
    border-radius: var(--border-radius, 0);
  }

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

/* START_BLOCK:rating-summary (INDEX:210) */
.rating-summary {
    display: flex;
    align-items: center;
  }
  
  .rating-summary__content {
    display: flex;
    align-items: center;
  }
  
  .rating-summary__stars {
    display: flex;
    align-items: center;
    gap: 0.125rem;
  }
  
  .rating-summary__star {
    line-height: 1;
  }
  
  .rating-summary__star--filled {
    color: #fbbf24;
  }
  
  .rating-summary__text {
    font-weight: 500;
  }
  
  /* Mobile responsive */
  @media screen and (max-width: 749px) {
    .rating-summary__content {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
    
    .rating-summary__text {
      margin-left: 0;
    }
  }
/* END_BLOCK:rating-summary */

/* START_BLOCK:review (INDEX:213) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:scroll-reveal-timeline (INDEX:214) */
.scroll-timeline {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--timeline-background);
    color: var(--color-foreground);
  }

  .scroll-timeline__inner {
    width: min(calc(100% - 40px), var(--timeline-max-width));
    margin-inline: auto;
    padding-block: var(--timeline-padding-top) var(--timeline-padding-bottom);
  }

  .scroll-timeline__header {
    max-width: 720px;
    margin-block-end: clamp(36px, 6vw, 72px);
  }

  .scroll-timeline__heading {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.05;
  }

  .scroll-timeline__subheading {
    margin-block-start: 14px;
    opacity: 0.72;
  }

  .scroll-timeline__list {
    position: relative;
    display: grid;
    grid-template-columns: max-content var(--timeline-marker-size) minmax(0, 1fr);
    gap: 0;
  }

  .scroll-timeline__track {
    --track-fill: 0;
    position: absolute;
    z-index: 0;
    top: calc(var(--timeline-marker-size) / 2);
    bottom: 0;
    left: calc((var(--timeline-marker-size) - var(--timeline-track-width)) / 2);
    width: var(--timeline-track-width);
    height: auto;
    overflow: hidden;
    background: color-mix(in srgb, var(--timeline-line-color) 20%, transparent);
  }

  .scroll-timeline__track::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--timeline-line-color);
    transform: scaleY(var(--track-fill));
    transform-origin: top;
    will-change: transform;
  }

  .scroll-timeline__item {
    --reveal-progress: 0;
    position: relative;
    z-index: 1;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    transform: translateY(calc((1 - var(--reveal-progress)) * 10px));
    transition: transform 140ms linear;
    will-change: transform;
  }

  .scroll-timeline__rail {
    display: grid;
    grid-template-rows: 0 var(--timeline-marker-size) 1fr;
    justify-items: center;
    min-height: 100%;
  }

  .scroll-timeline__left-text {
    align-self: start;
    max-width: min(220px, 26vw);
    padding-block-start: 2px;
    padding-inline-end: clamp(12px, 2vw, 28px);
    color: var(--timeline-left-text-color);
    font-size: var(--timeline-left-text-size);
    line-height: var(--timeline-title-line-height);
    text-align: end;
    opacity: calc(0.18 + (var(--reveal-progress) * 0.82));
    filter: grayscale(calc(1 - var(--reveal-progress))) blur(calc((1 - var(--reveal-progress)) * 0.45px));
    transition: opacity 140ms linear, filter 140ms linear;
    will-change: opacity, filter;
  }

  .scroll-timeline__left-text:empty {
    padding-inline-end: 0;
  }

  .scroll-timeline__line {
    display: none;
  }

  .scroll-timeline__icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: var(--timeline-marker-size);
    height: var(--timeline-marker-size);
    border-radius: 50%;
    color: var(--timeline-icon-color);
    background: var(--timeline-icon-background);
  }

  .scroll-timeline__icon::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background: var(--timeline-background);
    opacity: calc(0.82 - (var(--reveal-progress) * 0.82));
    pointer-events: none;
  }

  .scroll-timeline__icon--no-background {
    color: var(--timeline-icon-no-bg-color);
    background: var(--timeline-background);
  }

  .scroll-timeline__icon--no-background::before {
    display: none;
  }

  .scroll-timeline__icon svg,
  .scroll-timeline__custom-icon {
    position: relative;
    z-index: 1;
    width: 58%;
    height: 58%;
  }

  .scroll-timeline__custom-icon {
    object-fit: contain;
  }

  .scroll-timeline__icon--no-background :is(svg, .scroll-timeline__custom-icon) {
    width: 100%;
    height: 100%;
    opacity: calc(0.18 + (var(--reveal-progress) * 0.82));
    filter: grayscale(calc(1 - var(--reveal-progress)));
  }

  .scroll-timeline--style-simple .scroll-timeline__list {
    counter-reset: timeline-step var(--timeline-counter-start);
  }

  .scroll-timeline--style-simple .scroll-timeline__item {
    counter-increment: timeline-step;
  }

  .scroll-timeline--style-simple .scroll-timeline__icon {
    color: var(--timeline-icon-color);
    background: var(--timeline-icon-background);
  }

  .scroll-timeline--style-simple .scroll-timeline__icon::before {
    display: block;
    inset: 0;
  }

  .scroll-timeline--style-simple .scroll-timeline__icon::after {
    content: counter(timeline-step);
    position: relative;
    z-index: 1;
    font-size: var(--timeline-number-size);
    font-weight: 700;
    line-height: 1;
  }

  .scroll-timeline--style-simple .scroll-timeline__icon :is(svg, .scroll-timeline__custom-icon) {
    display: none;
  }

  .scroll-timeline--style-dots .scroll-timeline__icon {
    color: var(--timeline-dot-color);
    background: var(--timeline-background);
    border: 2px solid color-mix(in srgb, var(--timeline-dot-color) 22%, transparent);
  }

  .scroll-timeline--style-dots .scroll-timeline__icon::before {
    display: block;
    inset: 28%;
    background: var(--timeline-dot-color);
    opacity: calc(0.16 + (var(--reveal-progress) * 0.84));
  }

  .scroll-timeline--style-dots .scroll-timeline__icon :is(svg, .scroll-timeline__custom-icon) {
    display: none;
  }

  .scroll-timeline__content {
    margin-inline-start: clamp(16px, 2.5vw, 30px);
    padding-block: 1px calc(var(--timeline-gap) + 18px);
    opacity: calc(0.18 + (var(--reveal-progress) * 0.82));
    filter: grayscale(calc(1 - var(--reveal-progress))) blur(calc((1 - var(--reveal-progress)) * 0.45px));
    transition: opacity 140ms linear, filter 140ms linear;
    will-change: opacity, filter;
  }

  .scroll-timeline__badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--timeline-badge-color);
    font-size: 0.78rem;
    line-height: 1;
  }

  .scroll-timeline__title {
    margin: 12px 0 0;
    color: var(--timeline-title-color);
    font-size: var(--timeline-title-size);
    line-height: var(--timeline-title-line-height);
  }

  .scroll-timeline__text {
    max-width: 920px;
    margin-block-start: 10px;
    color: var(--timeline-text-color);
    font-size: var(--timeline-text-size);
    line-height: var(--timeline-text-line-height);
    opacity: 0.76;
  }

  .scroll-timeline__image {
    display: block;
    width: 100%;
    max-width: 920px;
    height: auto;
    margin-block-start: 16px;
    border-radius: var(--timeline-image-radius);
  }

  .scroll-timeline__text > :first-child,
  .scroll-timeline__subheading > :first-child {
    margin-block-start: 0;
  }

  .scroll-timeline__text > :last-child,
  .scroll-timeline__subheading > :last-child {
    margin-block-end: 0;
  }

  @media screen and (max-width: 749px) {
    .scroll-timeline__inner {
      width: min(calc(100% - 28px), var(--timeline-max-width));
    }

    .scroll-timeline__content {
      padding-block-end: calc(var(--timeline-gap) + 12px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-timeline__item {
      transform: none;
      transition: none;
    }

    .scroll-timeline__content {
      opacity: 1;
      filter: none;
      transition: none;
    }

    .scroll-timeline__left-text {
      opacity: 1;
      filter: none;
      transition: none;
    }

    .scroll-timeline__icon::before {
      opacity: 0;
    }

    .scroll-timeline__track {
      --track-fill: 1 !important;
    }
  }
/* END_BLOCK:scroll-reveal-timeline */

/* START_BLOCK:shopable-video (INDEX:216) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }

  .shopable-video-block {
    position: relative;
  }

  .shopable-video-block__product {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: auto;
    z-index: var(--layer-raised, 10);
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
    max-width: min(420px, calc(100% - 32px));
    padding: 10px 12px;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    background: rgba(var(--color-background, 255, 255, 255), 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }

  .shopable-video-block__product--bottom_right {
    left: auto;
    right: 16px;
  }

  .shopable-video-block__product-media {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
  }

  .shopable-video-block__product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .shopable-video-block__product-meta {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  .shopable-video-block__product-title {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shopable-video-block__product-price {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
  }

  .shopable-video-block__product-compare {
    opacity: 0.7;
    text-decoration: line-through;
    font-weight: 600;
    font-size: 14px;
  }

  @media (max-width: 749px) {
    .shopable-video-block__product {
      bottom: 12px;
      left: 12px;
      padding: 10px 12px;
      grid-template-columns: 52px 1fr;
      max-width: calc(100% - 24px);
    }

    .shopable-video-block__product--bottom_right {
      right: 12px;
    }

    .shopable-video-block__product-media {
      width: 52px;
      height: 52px;
    }
  }
/* END_BLOCK:shopable-video */

/* START_BLOCK:social-links (INDEX:221) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:222) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  .spacer-block__ancher-target {
    display: block;
    height: 0;
    overflow: hidden;
    scroll-margin-top: calc(var(--header-group-height, 0px) + var(--scroll-margin, 12px));
    pointer-events: none;
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }
  .accordion .details-content > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 750px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:223) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }

  swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--product-swatches-list-gap);
    }
  }

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

  product-swatches .swatch {
    --swatch-width: var(--product-swatches-swatch-size);
    --swatch-height: var(--product-swatches-swatch-size);
    width: var(--product-swatches-swatch-size);
    height: var(--product-swatches-swatch-size);
    background-size: var(--product-swatches-swatch-size) var(--product-swatches-swatch-size);
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_BLOCK:swatches */

/* START_BLOCK:vertical-text-scroll (INDEX:229) */
vertical-text-scroll {
    display: block;
    text-align: center;
    width: 100%;
    max-width: 100%;
  }

  .vts__eyebrow {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-block-end: 1.5rem;
    opacity: 0.75;
  }

  .vts__viewport {
    position: relative;
    height: calc(var(--vts-item-height, 80px) * 5);
    overflow: hidden;
    padding-inline: var(--padding-xs, 0.75rem);
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }

  @media screen and (min-width: 750px) {
    .vts__viewport {
      padding-inline: 0;
    }
  }

  .vts__track {
    display: flex;
    flex-direction: column;
    will-change: transform;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .vts__track {
      animation: vts-scroll var(--vts-speed, 8s) linear infinite;
    }
  }

  @keyframes vts-scroll {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(calc(var(--vts-total-height, 400px) * -1));
    }
  }

  .vts__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0.15em;
    line-height: 1.05;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
  }

  .vts__item span {
    font-size: var(--vts-font-size, 72px);
    font-weight: 700;
    display: block;
    white-space: nowrap;
  }

  @media screen and (max-width: 749px) {
    .vts__item span {
      font-size: var(--vts-font-size-mobile, var(--vts-font-size, 72px));
    }
  }

  /* Gradient fade masks at top and bottom */
  .vts__fade {
    position: absolute;
    inset-inline: 0;
    height: 35%;
    pointer-events: none;
    z-index: 1;
  }

  .vts__fade--top {
    top: 0;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-background, #f5f3ee) 100%, transparent),
      color-mix(in srgb, var(--color-background, #f5f3ee) 0%, transparent)
    );
  }

  .vts__fade--bottom {
    bottom: 0;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--color-background, #f5f3ee) 100%, transparent),
      color-mix(in srgb, var(--color-background, #f5f3ee) 0%, transparent)
    );
  }
/* END_BLOCK:vertical-text-scroll */

/* START_BLOCK:video (INDEX:232) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:account-actions (INDEX:233) */
.account-actions {
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: height var(--animation-values);

    &:has([data-active]) .account-actions__main-menu {
      visibility: hidden;
    }
  }

  .account-actions__header {
    padding: var(--padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
  }

  .account-actions__title {
    /* Ideally we set the font-size here, but specificity issues make this necessary */
    --font-h5--size: var(--font-size--lg);

    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .account-actions__email {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    max-width: var(--account-actions-max-width);
    word-break: break-all;
  }

  .account-actions__sign-ins {
    padding: var(--padding-xl);
    padding-block-start: 0;
    padding-block-end: var(--padding-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .account-actions__sign-in-text {
    display: inline;
  }

  .account-actions__fallback-text {
    display: none;
  }

  .account-actions__sign-ins:not(:has(shop-login-button)) {
    gap: 0;

    .account-actions__sign-in-text {
      display: none;
    }

    .account-actions__fallback-text {
      display: block;
    }
  }

  /* Makes the shop login button radius match the theme settings */
  .account-actions__shop-login {
    --buttons-radius: var(--style-border-radius-buttons-primary);
  }

  .account-actions__nav {
    padding: var(--padding-xl);
    padding-block-start: 0;
  }

  .account-actions__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;

    @media screen and (max-width: 300px) {
      grid-template-columns: 1fr;
    }
  }

  .account-actions__link {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .account-actions__icon {
    display: flex;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-block: -4px;
  }

  /* 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.
    Using element selector to increase specificity.
  **/

    .account-actions :is(a.button, a.button-secondary):focus-visible {
      outline: none;
      overflow: visible;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        inset: calc(-1 * var(--focus-outline-offset));
        border: var(--focus-outline-width) solid currentColor;
        border-radius: var(--style-border-radius-buttons-secondary);
        display: inherit;
      }
    }

    .account-actions a.button:focus-visible::after {
      border-color: var(--button-background-color);
      border-radius: var(--style-border-radius-buttons-primary);
    }
  }
/* END_SNIPPET:account-actions */

/* START_SNIPPET:account-button (INDEX:234) */
.account-button {
    color: var(--color-foreground);
    appearance: none;
    border: none;
    background: none;
    height: var(--button-size);
    width: var(--button-size);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transition: color var(--animation-speed) var(--animation-easing);
    anchor-name: --account-button-trigger;
  }

  .account-button__avatar {
    --account-button-size: 1.3rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--account-button-size);
    height: var(--account-button-size);
    border-radius: var(--style-border-radius-50);
    background-color: var(--color-primary-button-background);
    font-size: var(--font-size--xs);
    font-weight: 500;
    color: var(--color-primary-button-text);
    text-transform: uppercase;
    line-height: 1;
  }

  .account-button__icon {
    color: currentColor;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .account-button--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
      width: auto;
      min-width: var(--button-size);
    }
  }

  /* The shop avatar doesn't bubble the click event up to our button, so we need to prevent that or the button doesn't work */
  .account-button shop-user-avatar {
    pointer-events: none;
  }
/* END_SNIPPET:account-button */

/* START_SNIPPET:add-to-cart-button (INDEX:235) */
.add-to-cart-button {
    --text-speed: 0.26;
    --base-delay: calc(var(--text-speed) * 0.25);
    --tick-speed: 0.1;
    --ring-speed: 0.2;
    --check-speed: 0.2;
    --burst-speed: 0.32;
    --step-delay: 3;
    --speed: 1;

    user-select: none;
    transition-property: color, box-shadow, background-color, scale, translate;
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--ease-out-cubic);

    &:active {
      scale: 0.99;
      translate: 0 1px;
    }
  }

  .add-to-cart-button .svg-wrapper .checkmark-burst {
    width: 30px;
    height: 30px;
  }

  .add-to-cart-text--stacked {
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
  }

  .add-to-cart-text__main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .add-to-cart-subtext {
    display: block;
    width: 100%;
    text-align: center;
    font-size: var(--font-size--xs);
    font-weight: var(--font-body--weight);
    text-transform: none;
    opacity: 0.85;
  }

  .add-to-cart-icon--custom {
    display: inline-flex;
    align-items: center;
  }

  .add-to-cart-custom-icon {
    width: auto;
    height: 1.2em;
    object-fit: contain;
  }

  .add-to-cart-text {
    --atc-opacity: 0;
    --atc-destination: -1em;
    display: flex;
    gap: var(--gap-3xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .add-to-cart__added {
    --atc-opacity: 1;
    --atc-destination: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }

  .add-to-cart__added-icon {
    width: 32px;
    height: 32px;
  }

  .add-to-cart__loading-dots {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 2;
  }

  .add-to-cart-button.loading .add-to-cart__loading-dots {
    display: flex;
  }

  .add-to-cart-button.loading .add-to-cart-text,
  .add-to-cart-button.loading .add-to-cart__added {
    visibility: hidden;
  }

  .add-to-cart-button {
    position: relative;
  }

  .add-to-cart__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--ms-radius-round, 50%);
    background: currentColor;
    animation: add-to-cart-dots-bounce 0.9s ease-in-out infinite both;
  }

  .add-to-cart__dot:nth-child(1) { animation-delay: -0.2s; }
  .add-to-cart__dot:nth-child(2) { animation-delay: -0.1s; }
  .add-to-cart__dot:nth-child(3) { animation-delay: 0s; }

  @keyframes add-to-cart-dots-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
  }

  [data-added='true'] .add-to-cart-text,
  [data-added='true'] .add-to-cart__added {
    animation-name: atc-slide;
  }

  .checkmark-burst {
    opacity: 0;
    overflow: visible;

    .burst {
      rotate: 20deg;
    }

    .check {
      opacity: 0.2;
      scale: 0.8;
      filter: blur(2px);
      transform: translateZ(0);
    }

    :is(.ring, .line, .check, .burst, .tick) {
      transform-box: fill-box;
      transform-origin: center;
    }

    :is(.line) {
      stroke-dasharray: 1.5 1.5;
      stroke-dashoffset: -1.5;
      translate: 0 -180%;
    }

    g {
      transform-origin: center;
      rotate: calc(var(--index) * (360 / 8) * 1deg);
    }
  }

  .add-to-cart-button[data-added='true'] .checkmark-burst {
    opacity: 1;
  }

  .add-to-cart-button[data-added='true'] {
    .check {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }

    .tick {
      scale: 1.75;
    }

    .ring {
      opacity: 0;
      scale: 1;
    }

    .line {
      stroke-dashoffset: 1.5;
    }

    .add-to-cart-text {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: circle(0% at 50% 50%);
      filter: blur(2px);
      opacity: 0;
      translate: 0 4px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .add-to-cart-button[data-added='true'] {
      .check {
        transition-property: opacity, scale, filter;
        transition-duration: calc(calc(var(--check-speed) * 1s));
        transition-delay: calc((var(--base-delay) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .tick {
        transition-property: scale;
        transition-duration: calc((calc(var(--tick-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
        transition-timing-function: ease-out;
      }

      .ring {
        transition-property: opacity, scale;
        transition-duration: calc((calc(var(--ring-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .line {
        transition-property: stroke-dashoffset;
        transition-duration: calc((calc(var(--burst-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-cubic);
      }
    }
    .add-to-cart-text {
      transition-property: clip-path, opacity, filter, translate;
      transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
      transition-timing-function: ease-out;
    }
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(100% at 50% 50%);
  }

  @keyframes atc-slide {
    to {
      opacity: var(--atc-opacity, 1);
      translate: 0px var(--atc-destination, 0px);
    }
  }
/* END_SNIPPET:add-to-cart-button */

/* START_SNIPPET:background-media (INDEX:236) */
/* Con dos fotos el <img> queda envuelto en un <picture>, que es inline y no
     tiene tamano propio: el `width/height: 100%` de base.css se resolveria
     contra una caja que a su vez la mide el img. `display: contents` saca al
     picture del layout y el img vuelve a medir contra el contenedor. */
  .background-image-container picture {
    display: contents;
  }

  @media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:240) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:241) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:244) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }

  .button-link--sticky-bottom {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0px);
    z-index: var(--layer-flat);
  }

  .button-link--sticky-bottom-mobile {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0px);
    z-index: var(--layer-flat);
  }

  @media screen and (min-width: 750px) {
    .button-link--sticky-bottom-mobile {
      position: static;
      bottom: auto;
      z-index: auto;
    }

    .button-link--sticky-bottom-desktop {
      position: sticky;
      bottom: env(safe-area-inset-bottom, 0px);
      z-index: var(--layer-flat);
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:card-gallery (INDEX:245) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-gift-wrap (INDEX:248) */
.cart-gift-wrap {
    padding: var(--cart-drawer-summary-padding, var(--padding-lg));
    padding-block-end: 0;
    padding-block-start: 2rem;
    padding-inline: 0;
    border-block-end: 1px solid rgba(var(--color-foreground-rgb), .1);
    width: 100%;
  }
  .cart-drawer__summary:has(.cart-actions) .cart-gift-wrap {
    padding-block-end: 1rem;
  }

  .cart-gift-wrap--styled {
    padding-inline: 0.5rem;
  }

  .cart-gift-wrap__label {
    display: flex;
    align-items: center;
    gap: var(--padding-md, 1rem);
    cursor: pointer;
    line-height: var(--line-height--display-normal);
    margin-block-end: 0;
    border-radius: var(--border-radius, 0.5rem);
    background: rgb(var(--color-background-rgb));
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .cart-gift-wrap__label--styled {
    padding: var(--padding-md, 1rem);
    margin: calc(var(--padding-md, 1rem) * -1);
    border: 0 solid transparent;
  }

  .cart-gift-wrap__label:hover {
    background: rgba(var(--color-foreground-rgb), 0.03);
  }

  .cart-gift-wrap__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .cart-gift-wrap__icon-img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: contain;
  }

  .cart-gift-wrap__icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(var(--color-foreground-rgb), 0.08);
    border-radius: var(--border-radius, 0.5rem);
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .cart-gift-wrap__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .cart-gift-wrap__heading {
    font-size: var(--font-size--base, 1rem);
  }

  .cart-gift-wrap__description {
    font-size: var(--font-size--2xs, 0.75rem);
    color: rgb(var(--color-foreground-rgb) / 0.7);
    line-height: 1.4;
  }

  .cart-gift-wrap__right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }

  .cart-gift-wrap__toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
  }

  .cart-gift-wrap__checkbox {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
  }

  .cart-gift-wrap__checkbox:disabled {
    cursor: not-allowed;
  }

  .cart-gift-wrap__toggle-track {
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-20, 0.2));
    border-radius: var(--ms-radius-pill, 12px);
    transition: background-color 0.2s ease;
  }

  .cart-gift-wrap__toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: rgb(var(--color-background-rgb));
    border-radius: var(--ms-radius-round, 50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
  }

  .cart-gift-wrap__checkbox:checked + .cart-gift-wrap__toggle-track {
    background: var(--gift-wrap-toggle-checked, rgb(var(--color-foreground-rgb)));
  }

  .cart-gift-wrap__checkbox:checked + .cart-gift-wrap__toggle-track::after {
    transform: translateX(20px);
  }

  .cart-gift-wrap__checkbox:disabled + .cart-gift-wrap__toggle-track {
    opacity: 0.5;
  }

  .cart-gift-wrap__unavailable {
    margin-block-start: var(--padding-2xs, 0.25rem);
    font-size: var(--font-size--2xs, 0.75rem);
  }
/* END_SNIPPET:cart-gift-wrap */

/* START_SNIPPET:cart-image-banner (INDEX:249) */
.cart-image-banner {
    box-sizing: border-box;
    width: 100%;
  }

  .cart-image-banner__inner {
    display: flex;
    justify-content: var(--cart-image-banner-justify, center);
    width: 100%;
  }

  .cart-image-banner__link {
    display: block;
    width: min(100%, var(--cart-image-banner-max-width, 100%));
    max-width: 100%;
    line-height: 0;
  }

  .cart-image-banner__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--cart-image-banner-radius, 0);
  }

  .cart-image-banner__inner > .cart-image-banner__img {
    width: min(100%, var(--cart-image-banner-max-width, 100%));
    max-width: 100%;
  }

  .cart-image-banner {
    animation: cart-image-banner-in 0.3s ease-out;
  }

  @keyframes cart-image-banner-in {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:cart-image-banner */

/* START_SNIPPET:cart-products (INDEX:250) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    /* `sub` = la suscripción del renglón (ms-cart-sub): toma el ancho de
       detalles + precio, no los 150 px de la columna de detalles. */
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media sub sub'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  .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:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    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-child {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__details * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--cart-title-font-size);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    line-height: var(--line-height--body-tight);
  }

  .cart-items__variant {
    display: inline-block;
  }

  .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(--cart-font-size--sm);
    height: auto;
    background-color: var(--cart-quantity-background-color);
    border: none;
    border-radius: var(--ms-cart-qty-radius, var(--ms-radius-pill, 9999px));
    padding: 3px;
    transition: none;
    align-items: stretch;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .cart-items__quantity .quantity-selector:hover {
    background-color: var(--cart-quantity-hover-background-color);
  }

  .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus) {
    background-color: var(--color-background);
    color: var(--color-foreground);
    border: none;
    border-radius: var(--ms-cart-qty-radius, var(--ms-radius-pill, 100px));
    padding: 0;
    width: 32px;
    min-width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }

  /*.cart-items__quantity .quantity-selector .quantity-minus {
    border-start-start-radius: 9999px;
    border-end-start-radius: 9999px;
  }

  .cart-items__quantity .quantity-selector .quantity-plus {
    border-start-end-radius: 9999px;
    border-end-end-radius: 9999px;
  }*/

  .cart-items__quantity .quantity-selector input[type='number'] {
    color: var(--color-foreground);
    font-weight: var(--ms-w-medium, 500);
    padding: 0.2rem 0.75rem;
    min-width: 2.5rem;
    width: auto;
    flex: 1 1 auto;
    border: none;
    border-radius: 0;
    margin: 0;
    text-align: center;
  }


  .cart-items__quantity .quantity-selector svg {
    stroke-width: 2;
  }

  .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus) svg {
    stroke-width: 2;
    stroke-linecap: round;
  }

  .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: flex;
    font-size: var(--cart-font-size--md);
    flex-direction: column;
  }

  .cart-items__price-unit {
    font-size: var(--cart-font-size--xs);
  }

  .cart-items__save-price {
    font-size: var(--cart-font-size--sm);
    margin-block-start: var(--margin-2xs);
    text-align: end;
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  /* `contain`, no `cover`. Los packshots de Bene son PNG transparentes y cada
     variante trae una proporcion distinta: 1 bote 458x922 (angosto), 2 botes
     715x922, 3 botes 1003x922. Con `cover` la caja cuadrada del carrito
     recortaba los lados y de «2 BOTES» solo se veia bote y medio (Leo, 7-sep).
     `contain` mete la foto completa; el hueco que sobra es transparente. */
  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: contain;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    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(--cart-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-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media sub error error';
    }

    .cart-items__sub {
      align-self: start;
      max-width: 26rem;
    }

    .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;
      justify-content: center;
    }
  }

  .cart__original-total-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__original-total-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__original-total-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__original-total-container,
  .cart__original-total-container * {
    font-size: var(--cart-font-size--sm);
  }

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

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

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

    @media screen and (max-width: 749px) {
      font-size: var(--cart-font-size--lg);
    }
  }
  .cart-header-typography {
    font-family: var(--cart-header-font-family);
    font-style: var(--cart-header-font-style);
    font-weight: var(--cart-header-font-weight);
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

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

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

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

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

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--cart-font-size--2xs);
    font-weight: var(--ms-w-medium, 500);
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--cart-font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-note .svg-wrapper {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
    margin: 0;
  }

  .cart-note .icon-plus {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
  }

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

  @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;
      }

      .cart-items__empty-button > .button-text,
      .cart__checkout-button > .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, 0.5s);
    animation-timing-function: var(--spring-d300-b0-easing, var(--animation-easing));
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:253) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

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

  .cart__summary-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart-drawer__summary:has(.cart-gift-wrap) .cart__summary-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-lg);
    border-block-start: none;
    padding-block-start: 0;
    border-block-start: none !important;
  } 
  .cart-drawer__summary:has(.cart-gift-wrap) .cart__summary-totals:not(:has(.cart-actions)).cart__summary-totals:not(:has(.cart__original-total-container:empty)) {
    margin-block-start: var(--margin-lg);
    border-block-start: none;
    padding-block-start: 0;
    border-block-start: none !important;
  } 

  .cart__installments {
    color: var(--color-foreground);
    font-size: var(--cart-font-size--2xs);
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--cart-font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: var(--ms-case-label, uppercase);
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .disclosure-trigger {
    cursor: pointer;
    color: var(--color-foreground);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--padding-sm);
    padding-inline: 0;
    width: 100%;
    border: none;
    background: #0000;

    &[aria-expanded='true'] .horizontal {
      rotate: 90deg;
    }

    &:is(:hover, :focus-visible) {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }

    .horizontal {
      transform-box: fill-box;
      transform-origin: center;
    }

    svg {
      aspect-ratio: 1;
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .disclosure-trigger__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--cart-font-size--2xs);
    font-weight: var(--ms-w-medium, 500);
  }

  @media (prefers-reduced-motion: no-preference) {
    .disclosure-trigger .horizontal {
      transition: rotate var(--surface-transition-duration) var(--surface-transition-timing);
    }
  }

  .disclosure-content {
    display: grid;
    grid-template-rows: 1fr;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(-5% -5% 0 -5%);
    opacity: 1;

    &[inert] {
      grid-template-rows: 0fr;
      opacity: 0;
    }

    & > * {
      min-height: 0;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .disclosure-content {
      transition-property: grid-template-rows, opacity;
      transition-duration: var(--surface-transition-duration);
      transition-timing-function: var(--surface-transition-timing);
    }
  }

  .cart__summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .cart__savings {
    font-size: var(--cart-font-size--sm);
  }

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

  .cart__savings-value {
    font-size: var(--cart-font-size--sm);
    font-weight: var(--font-weight-medium);
  }

  .cart__total-label {
    font-family: var(--cart-total-label-font-family);
    font-style: var(--cart-total-label-font-style);
    font-weight: var(--cart-total-label-font-weight);
  }

  .cart__payment-icons.payment-icons {
    width: 100%;
  }

  .cart__payment-icons .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--cart-payment-icons-align);
    flex-wrap: wrap;
    gap: var(--cart-payment-icons-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cart__payment-icons .payment-icons__item {
    display: flex;
    align-items: center;
  }

  .cart__checkout-image {
    display: flex;
    width: 100%;
    justify-content: var(--cart-checkout-image-align);
  }

  .cart__checkout-image-el {
    width: auto;
    max-width: var(--cart-checkout-image-max-width);
    height: auto;
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:cart-timer (INDEX:254) */
.cart-timer {
    box-sizing: border-box;
    max-width: 100%;
    display: flex;
    align-items: var(--cart-timer-align-items, flex-start);
    padding-block: var(--cart-timer-padding-block-start, 8px) var(--cart-timer-padding-block-end, 8px);
    padding-inline: var(--cart-timer-padding-inline-start, 20px) var(--cart-timer-padding-inline-end, 20px);
    margin-block: var(--cart-timer-margin-block-start, 0) var(--cart-timer-margin-block-end, 0);
    margin-inline: var(--cart-timer-margin-inline-start, 0) var(--cart-timer-margin-inline-end, 0);
    color: var(--cart-timer-text-color, inherit);
  }

  .cart-timer__inner {
    width: 100%;
    font-size: var(--font-size--sm);
    line-height: 1.4;
    text-align: var(--cart-timer-text-align, center);
    color: inherit;
  }

  .cart-timer__inner :is(h1, h2, h3, h4, h5, h6, p) {
    margin: 0;
  }

  .cart-timer__inner--ended {
    white-space: normal;
    font-variant-numeric: inherit;
  }

  .cart-timer__countdown {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--cart-timer-countdown-color, currentColor);
  }

  .cart-timer__countdown--ended {
    white-space: normal;
    font-variant-numeric: inherit;
  }

  .cart-timer__countdown--ended :is(h1, h2, h3, h4, h5, h6, p) {
    margin: 0;
  }
/* END_SNIPPET:cart-timer */

/* START_SNIPPET:cart-trust-line (INDEX:256) */
.cart-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--cart-trust-align, center);
    gap: 0.35rem 1rem;
    /* En el carrito se pega al botón (contrarresta el gap del grid .cart__ctas).
       En la ficha (context pdp) usa un margen positivo via --cart-trust-mt. */
    margin-block-start: var(--cart-trust-mt, calc(4px - var(--checkout-button-gap, 0.75rem)));
    font-size: var(--font-size--xs, 0.75rem);
    line-height: 1.2;
    color: var(--color-foreground);
    opacity: 0.85;
  }
  .cart-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    white-space: nowrap;
  }
  .cart-trust__icon {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    display: inline-flex;
  }
  .cart-trust__icon svg { width: 100%; height: 100%; display: block; }
/* END_SNIPPET:cart-trust-line */

/* START_SNIPPET:cart-upsell-product-card (INDEX:257) */
.cart-upsell-product-card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    height: 100%;
    background-color: var(--color-upsell-background);
    border: var(--cart-upsell-border-width) solid var(--cart-upsell-border-color);
    border-radius: var(--cart-upsell-border-radius);
    padding: var(--padding-md);
  }
  
  /* Horizontal layout: ensure cards have equal height */
  .cart-upsell--horizontal .cart-upsell-product-card {
    height: 100%;
  }

  /* Slider mode with horizontal layout: card styling */
  .cart-upsell--slider.cart-upsell--horizontal .cart-upsell-product-card {
    height: 100%;
  }

  /* Slider mode with vertical layout: image on left, content on right */
  .cart-upsell--slider.cart-upsell--vertical .cart-upsell-product-card {
    flex-direction: row;
    align-items: center;
    flex: 1;
    gap: var(--gap-md);
  }

  /* Vertical layout: image on left, content on right */
  .cart-upsell--vertical .cart-upsell-product-card {
    flex-direction: row;
    align-items: center;
    flex: 1;
    gap: var(--gap-md);
  }

  .cart-upsell-product-card__image {
    display: block;
    text-decoration: none;
    width: 100%;
    flex-shrink: 0;
  }

  /* Slider mode with horizontal layout: image takes full width */
  .cart-upsell--slider.cart-upsell--horizontal .cart-upsell-product-card__image {
    width: 100%;
    flex-shrink: 0;
  }

  /* Slider mode with vertical layout: fixed image width */
  .cart-upsell--slider.cart-upsell--vertical .cart-upsell-product-card__image {
    width: 70px;
    min-width: 70px;
  }

  /* Vertical layout: fixed image width */
  .cart-upsell--vertical .cart-upsell-product-card__image {
    width: 80px;
    min-width: 80px;
  }

  .cart-upsell-product-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ratio);
    overflow: hidden;
    border-radius: var(--upsell-image-radius);
  }

  /* Misma razon que en `cart-products`: packshot PNG transparente y una
     proporcion distinta por variante. Con `cover` se recortaban los botes. */
  .cart-upsell-product-card__image-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .cart-upsell-product-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xs);
    flex: 1;
    min-width: 0;
  }
  
  /* Horizontal layout: push button to bottom for equal card heights */
  .cart-upsell--horizontal .cart-upsell-product-card__content {
    justify-content: space-between;
  }

  /* Slider mode with horizontal layout: push button to bottom for equal card heights */
  .cart-upsell--slider.cart-upsell--horizontal .cart-upsell-product-card__content {
    justify-content: space-between;
  }

  /* Slider mode with vertical layout: content takes remaining space */
  .cart-upsell--slider.cart-upsell--vertical .cart-upsell-product-card__content {
    display: flex;
    flex-direction: row;
    gap: var(--gap-sm);
    flex: 1;
    justify-content: space-between;
    align-items: center;
  }

  /* Wrap when full title is shown so long titles can stack with price/button */
  .cart-upsell--full-title.cart-upsell--slider.cart-upsell--vertical .cart-upsell-product-card__content {
    flex-wrap: wrap;
  }

  .cart-upsell-product-card__title {
    font-size: var(--cart-title-font-size);
    color: var(--cart-upsell-text-color); 
    text-decoration: none;
    line-height: 1.3;
  }

  .cart-upsell-product-card__title:hover {
    color: var(--color-foreground-subdued);
    text-decoration: underline;
  }

  .cart-upsell-product-card__price {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    flex-wrap: wrap;
  }

  .cart-upsell-product-card__price-current {
    font-size: var(--cart-font-size--xs);
    color: var(--cart-upsell-price-color);
  }

  .cart-upsell-product-card__variant {
    font-size: var(--ds-t-small, var(--cart-font-size--xs));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70, 0.7));
  }

  .cart-upsell-product-card__variant::after {
    content: '·';
    margin-inline-start: var(--gap-2xs, 4px);
  }

  .cart-upsell-product-card__price--no-compare .cart-upsell-product-card__price-current {
    color: var(--cart-upsell-price-no-compare-color);
  }

  /* No .compare-at-price here — base.css would force opacity + line-through and fight superscript ::after */
  .cart-upsell-product-card__price-compare {
    font-size: var(--cart-font-size--xs);
    color: var(--cart-upsell-price-compare-color);
    text-decoration: none;
    position: relative;
    display: inline-block;
    opacity: 1;
  }

  .cart-upsell-product-card__compare-inner {
    position: relative;
    display: inline-block;
  }

  .cart-upsell-product-card__compare-inner .price-split {
    position: relative;
    display: inline-block;
  }

  .cart-upsell-product-card__compare-inner:has(.price-split)::after {
    content: '';
    position: absolute;
    left: -0.08em;
    right: -0.08em;
    top: 52%;
    height: max(2px, 0.09em);
    background: var(--cart-compare-strike-color, currentColor);
    transform: translateY(-50%) rotate(-11deg);
    border-radius: var(--ms-radius-sm, 1px);
    pointer-events: none;
    z-index: 2;
  }

  .cart-upsell-product-card__compare-inner .money {
    text-decoration: line-through;
    text-decoration-color: var(--cart-compare-strike-color, currentColor);
    text-decoration-thickness: max(1px, 0.06em);
  }

  .cart-upsell-product-card__button {
    background-color: var(--cart-upsell-button-color);
    color: var(--cart-upsell-button-text-color);
    padding: var(--padding-xs) var(--padding-sm);
    font-size: var(--cart-font-size--xs);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-2xs);
    min-width: 50px;
    min-height: 34px;
    height: 34px;
  }

  /* Vertical layout: button can be narrower */
  @media screen and (min-width: 768px) {
  .cart-upsell--vertical .cart-upsell-product-card__button {
    width: fit-content;
    min-width: 80px;
  }
}

  .cart-upsell--vertical .cart-upsell-product-card__content {
    display: flex;
    flex-direction: row;
    gap: var(--gap-sm);
    flex: 1;
    justify-content: space-between;
    align-items: center;
  }

  .cart-upsell-product-card__unavailable {
    font-size: var(--cart-font-size--xs);
    color: var(--color-foreground-subdued);
    text-align: center;
    padding: var(--padding-xs);
  }

  /*.cart-upsell-product-card__button .svg-wrapper {
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
  }*/

  .cart-upsell-product-card__button.processing {
    opacity: 0.7;
    cursor: wait;
  }

  .cart-upsell-product-card__button.added {
    opacity: 0.6;
    cursor: default;
  }

  .cart-upsell-product-card.product-added {
    opacity: 0.6;
  }

  .cart-upsell-product-card.product-added .cart-upsell-product-card__button {
    pointer-events: none;
    cursor: not-allowed;
  }

  .cart-upsell-product-card__button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  /* ── Tarjeta compacta (fuente «metacampo», agregado directo) ─────────────
     Leo, 17-sep, con la captura del cajón a 1280: el carrusel de tarjetas de
     294 px cortaba el botón y «1 BOTE ·» se partía en tres renglones. Aquí es
     una fila: foto chica · nombre arriba y «1 BOTE · $ 599» abajo · «Agregar»
     a la derecha. Sin carrusel (se apaga en el ajuste) y sin selector de
     variante: entra la presentación que se ve. */
  .cart-upsell .cart-upsell-product-card--compacta {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
  }

  .cart-upsell .cart-upsell-product-card--compacta .cart-upsell-product-card__image {
    width: 56px;
    min-width: 56px;
  }

  .cart-upsell .cart-upsell-product-card--compacta .cart-upsell-product-card__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'titulo boton'
      'precio boton';
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
  }

  .cart-upsell .cart-upsell-product-card--compacta .cart-upsell-product-card__title {
    grid-area: titulo;
    align-self: end;
  }

  .cart-upsell .cart-upsell-product-card--compacta .cart-upsell-product-card__price {
    grid-area: precio;
    align-self: start;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .cart-upsell .cart-upsell-product-card--compacta .cart-upsell-product-card__button {
    grid-area: boton;
    width: auto;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0 16px;
    font-size: var(--ds-t-button, var(--cart-font-size--xs));
    white-space: nowrap;
  }

  .cart-upsell .cart-upsell-product-card--compacta .cart-upsell-product-card__unavailable {
    grid-area: boton;
  }
/* END_SNIPPET:cart-upsell-product-card */

/* START_SNIPPET:cart-upsell-variant-popup (INDEX:258) */
.cart-upsell-variant-popup {
    padding: 0;
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    max-width: 480px;
    width: 90%;
    height: fit-content;
    max-height: 90vh;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));
  }

  .cart-upsell-variant-popup[open] {
    display: flex;
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
    border-radius: var(--style-border-radius-popover);
  }

  .cart-upsell-variant-popup.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-upsell-variant-popup__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--padding-xl);
    gap: var(--gap-lg);
    max-height: 90vh;
    overflow-y: auto;
  }

  .cart-upsell-variant-popup__close {
    position: absolute;
    top: var(--padding-md);
    right: var(--padding-md);
    z-index: var(--layer-raised);
    padding: var(--padding-2xs);
  }

  .cart-upsell-variant-popup__header {
    padding-right: var(--padding-3xl);
  }

  .cart-upsell-variant-popup__title {
    font-size: var(--font-size--lg);
    font-weight: var(--font-weight-semibold, 600);
    margin-bottom: var(--margin-xs);
    line-height: 1.3;
  }

  .cart-upsell-variant-popup__price {
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-medium, 600);
  }

  .cart-upsell-variant-popup__body {
    flex: 1;
    min-height: 0;
  }

  .cart-upsell-variant-popup__variants {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .cart-upsell-variant-popup__option {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .cart-upsell-variant-popup__option-label {
    font-size: var(--font-size--sm);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-foreground-subdued);
  }

  .cart-upsell-variant-popup__option-select {
    font-size: var(--font-size--sm);
    padding: var(--padding-sm);
    border: 1px solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    width: 100%;
    min-height: 44px;
    cursor: pointer;
  }

  .cart-upsell-variant-popup__option-select:focus {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .cart-upsell-variant-popup__price-current {
    font-weight: var(--font-weight-medium, 600);
    color: var(--color-foreground);
  }

  .cart-upsell-variant-popup__price-compare {
    font-size: var(--font-size--sm);
    color: var(--color-foreground-subdued);
    text-decoration: none;
    margin-left: var(--margin-xs);
  }

  .cart-upsell-variant-popup__footer {
    margin-top: auto;
    padding-top: var(--padding-md);
    border-top: 1px solid var(--color-border);
  }

  .cart-upsell-variant-popup__add-button {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  @keyframes modalSlideInTop {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes modalSlideOutTop {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-20px);
    }
  }
/* END_SNIPPET:cart-upsell-variant-popup */

/* START_SNIPPET:cart-upsell-variant-selector (INDEX:259) */
.cart-upsell-variant-selector {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin-bottom: var(--margin-2xs);
    align-items: flex-end;
  }

  .cart-upsell-variant-selector__option {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xs);
    flex: 1 1 auto;
    min-width: 0;
  }

  .cart-upsell-variant-selector__label {
    font-size: var(--cart-font-size--xs);
    color: var(--color-foreground-subdued);
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
  }

  .cart-upsell-variant-selector__select {
    font-size: var(--cart-font-size--sm);
    padding: var(--padding-2xs) var(--padding-sm);
    border: 1px solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    width: 100%;
    min-height: 36px;
    min-width: 100px;
    cursor: pointer;
  }

  .cart-upsell-variant-selector__select:focus {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .cart-upsell-variant-selector__select option:disabled {
    color: var(--color-foreground-subdued);
  }
/* END_SNIPPET:cart-upsell-variant-selector */

/* START_SNIPPET:cart-upsell (INDEX:260) */
cart-upsell-component[hidden],
  cart-upsell-component.cart-upsell--hidden,
  cart-upsell-component[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cart-upsell {
    padding: var(--padding-lg) 0;
    border-top: 1px solid var(--color-border);
    margin-top: var(--margin-md);
  }

  @media screen and (min-width: 750px) {
    .cart-upsell {
      padding: var(--padding-lg) 0;
    }
  }

  .cart-upsell__heading {
    margin-bottom: var(--margin-md);
    font-size: var(--cart-font-size--md);
    color: var(--cart-upsell-text-color);
  }

  /* Compacta (fuente «metacampo»): el título es un rótulo de la zona, no un
     titular — al tamaño de las filas del carrito, para que el bloque no pese
     más que los productos que ya se van a llevar. */
  .cart-upsell--compacta .cart-upsell__heading {
    margin-bottom: var(--margin-sm, 12px);
    font-size: var(--ds-t-cart-line, var(--cart-font-size--sm));
    font-weight: var(--ms-w-strong, 600);
  }

  .cart-upsell--compacta .cart-upsell__products {
    gap: var(--gap-sm, 8px);
  }

  /* Slider header layout */
  .cart-upsell--slider .cart-upsell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--margin-md);
  }

  .cart-upsell--slider .cart-upsell__heading {
    margin-bottom: 0;
    flex: 1;
  }

  .cart-upsell__arrows-wrapper {
    display: flex;
    gap: var(--gap-xs);
    align-items: center;
  }

  .cart-upsell__arrows-wrapper .slideshow-control {
    width: 28px;
    height: 28px;
    border-radius: var(--ms-radius-round, 50%);
    background-color: var(--color-border);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
  }

  .cart-upsell__arrows-wrapper .slideshow-control:hover {
    background-color: var(--color-border-hover);
  }

  .cart-upsell__arrows-wrapper .slideshow-control .svg-wrapper {
    width: 20px;
    height: 20px;
    color: var(--color-foreground);
  }

  .cart-upsell__arrows-wrapper .slideshow-control svg {
    width: 100%;
    height: 100%;
  }

  .cart-upsell__products {
    display: grid;
    gap: var(--gap-md);
    width: 100%;
    align-items: stretch;
  }

  /* Horizontal layout (default) */
  .cart-upsell--horizontal .cart-upsell__products {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    align-items: stretch;
  }

  /* Vertical layout */
  .cart-upsell--vertical .cart-upsell__products {
    grid-template-columns: 1fr;
  }

  .cart-upsell__product {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Vertical layout specific styling */
  .cart-upsell--vertical .cart-upsell__product {
    flex-direction: row;
    align-items: center;
    gap: var(--gap-md);
  }

  .cart-upsell__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    color: var(--cart-upsell-text-color);
  }

  .cart-upsell__loading-text {
    font-size: var(--cart-font-size--sm);
  }

  .cart-upsell__products:empty {
    display: none;
  }

  /* Slider mode styles - Swiper */
  .cart-upsell--slider .cart-upsell-swiper {
    width: 100%;
    overflow: hidden;
    padding-bottom: var(--padding-md);
  }

  .cart-upsell--slider .swiper-wrapper {
    display: flex;
    align-items: stretch;
  }

  .cart-upsell--slider .swiper-slide {
    width: min(294px, calc(100% - var(--gap-md) * 2));
    min-width: min(280px, calc(100% - var(--gap-md) * 2));
    flex-shrink: 0;
    height: auto;
  }

  /* Horizontal layout with slider: smaller slide width */
  .cart-upsell--slider.cart-upsell--horizontal .swiper-slide {
    width: min(130px, calc(100% - var(--gap-md) * 2));
    min-width: min(130px, calc(100% - var(--gap-md) * 2));
  }

  .cart-upsell--slider .cart-upsell__product {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:cart-upsell */

/* START_SNIPPET:collection-card (INDEX:264) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      /* only allow interactive elements to be clickable separate from .collection-card__link */
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .image-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:contact-form-select-field (INDEX:267) */
/**
   * Must beat .contact-form__input { padding: … } from the parent contact-form block
   * when stylesheets are merged (otherwise the floating label has no reserved space).
   */
  .contact-form__floating-select .contact-form__input.contact-form__floating-select-control {
    padding-block: calc(var(--padding-xl) + 0.65rem) var(--padding-md);
    padding-inline: var(--padding-xl) calc(var(--padding-xl) + 1.25rem);
    min-height: calc(var(--padding-lg) * 2 + 1.35em);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  .contact-form__input.contact-form__input--select-plain {
    min-height: calc(var(--padding-lg) * 2 + 1.2em);
    cursor: pointer;
  }

  .contact-form__floating-select-wrapper {
    width: 100%;
  }

  .contact-form__floating-select {
    position: relative;
    width: 100%;
  }

  .contact-form__floating-select .contact-form__floating-select-label {
    position: absolute;
    inset-inline-start: var(--padding-xl);
    top: var(--padding-md);
    z-index: 1;
    font-size: max(0.75rem, var(--font-size--xs));
    line-height: 1.2;
    color: var(--color-foreground-muted);
    pointer-events: none;
    transition: color 0.15s ease;
  }

  .contact-form__floating-select .contact-form__input.contact-form__floating-select-control:focus + .contact-form__floating-select-label {
    color: var(--color-foreground);
  }

  .contact-form__floating-select-chevron {
    position: absolute;
    inset-inline-end: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    pointer-events: none;
    width: var(--icon-size-xs, 14px);
    height: var(--icon-size-xs, 14px);
  }

  .contact-form__floating-select-chevron svg {
    display: block;
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:contact-form-select-field */

/* START_SNIPPET:description-text (INDEX:268) */
:root {
    --text-align-default: left;
  }

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

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

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

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

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

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  @media screen and (max-width: 749px) {
    .text-block {
      align-items: var(--horizontal-alignment-mobile, var(--horizontal-alignment));
    }

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

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

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

  /*
    Line-clamp must apply to an inner wrapper (matches snippets/text.liquid).
    Clamping the rte-formatter / flex container fails when RTE has multiple
    block-level children (<p>, etc.).
  */
  .text-block--truncate-lines .description-text__truncate-inner {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--truncate-lines, 3);
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    width: 100%;
    word-break: break-word;
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

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

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

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

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

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

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

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

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

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

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

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

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

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

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

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

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

  .custom-color-gradient,
  .custom-color-gradient > :is(h1, h2, h3, h4, h5, h6, p, *) {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .custom-color strong,
  .custom-color b {
    color: var(--color-bold, inherit);
  }

  .custom-color em,
  .custom-color i {
    color: var(--color-italic, inherit);
  }

  .custom-color u {
    color: var(--color-underline, inherit);
  }
/* END_SNIPPET:description-text */

/* START_SNIPPET:divider (INDEX:269) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:270) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media (max-width: 768px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:271) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media (max-width: 768px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:272) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media (max-width: 768px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:facets-actions (INDEX:273) */
/* Facets - Actions */
  .facets__actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    order: 1;
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    background-image: var(--to-top-gradient-background);
    z-index: var(--facets-sticky-z-index);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
  }

  .facets:not(.facets--drawer) .facets__actions {
    @media screen and (min-width: 750px) {
      position: static;
    }
  }

  .facets--vertical .facets__actions {
    padding-inline: 0;
    justify-content: center;
  }

  .facets--horizontal .facets__actions {
    @media screen and (min-width: 750px) {
      order: 0;
      bottom: auto;
      position: static;
      padding: 0;
      z-index: var(--layer-flat);
      flex-shrink: 0;
      align-items: center;
      margin-top: initial;
      background-image: none;
    }
  }

  .facets--horizontal .facets__actions--active::before {
    @media screen and (min-width: 750px) {
      content: '';
      border-inline-start: var(--style-border-width) solid var(--color-border);
      height: var(--font-paragraph--size);
      position: absolute;
    }
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .clear-filter:hover {
    text-decoration: underline;
    background-color: transparent;
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    transition: transform var(--animation-values), opacity var(--animation-values);
    opacity: 0;
    transform: translateY(100%);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__clear-all {
    box-shadow: none;
  }

  .facets--horizontal .facets__clear-all {
    @media screen and (min-width: 750px) {
      --facets-clear-all-min-width: var(--minimum-touch-target);
      text-decoration: underline transparent 0.075em;
      text-underline-offset: 0.125em;
      width: auto;
      transform: none;
      opacity: 1;
      height: var(--minimum-touch-target);
      align-items: center;
      flex-grow: 0;
      transition: text-decoration-color var(--animation-speed) var(--animation-easing);
    }
  }

  .facets--horizontal .facets__clear-all:hover {
    @media screen and (min-width: 750px) {
      --button-color: var(--color-primary-hover);
    }
  }

  @starting-style {
    .facets__clear-all {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .facets__clear-all.active {
    transform: translateY(0);
    opacity: 1;
    display: grid;
  }

  .facets--horizontal .facets__clear-all.active {
    @media screen and (min-width: 750px) {
      padding-block: 0;
      padding-inline: var(--facets-form-horizontal-gap);
      position: static;
      transform: none;
    }
  }

  @starting-style {
    .facets__clear-all.active {
      opacity: 0;
      transform: translateY(100%);
    }

    .facets--horizontal .facets__clear-all.active {
      @media screen and (min-width: 750px) {
        opacity: 1;
        transform: none;
      }
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__see-results {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:facets-actions */

/* START_SNIPPET:filter-remove-buttons (INDEX:274) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets__clear-all-link {
    --button-color: var(--color-primary);

    border: none;
    background-color: transparent;
    padding: var(--padding-xs);
    min-width: fit-content;
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    color: var(--button-color);
    text-decoration-color: var(--button-color);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form (INDEX:280) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    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 {
    /* 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;
    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;
    transition: background-color var(--animation-speed) ease;
    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 */

/* START_SNIPPET:grid-density-controls (INDEX:281) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

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

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

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

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:282) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }

  /* Con ancla, el header fijo no tapa el inicio del grupo (igual que texto, imagen y espaciador). */
  .group-block[id] {
    scroll-margin-top: calc(var(--header-group-height, 0px) + var(--scroll-margin, 12px));
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:283) */
.account-popover {
    --account-popover-min-width: 22rem;
    --account-actions-max-width: 22rem;
  }

  .account-popover__summary {
    padding: 0;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .account-popover__panel {
    --account-popover-opacity: 0;
    --account-popover-y: 20px;

    position-anchor: --account-button-trigger;
    border-radius: var(--style-border-radius-popover);
    margin: 0;
    left: unset;
    width: max-content;
    min-width: var(--account-popover-min-width);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    overflow-y: hidden;
    opacity: var(--account-popover-opacity);
    translate: 0 var(--account-popover-y);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    top: calc(anchor(bottom) + var(--header-padding));
    right: anchor(right);

    &:popover-open {
      --account-popover-opacity: 1;
      --account-popover-y: 0px;
    }

    @supports not (position-anchor: --account-button-trigger) {
      top: calc(var(--anchor-top) * 1px + var(--minimum-touch-target) + var(--header-padding));
      right: calc(var(--anchor-right) * 1px);
    }

    @supports not selector(:popover-open) {
      &.\:popover-open {
        --account-popover-opacity: 1;
        --account-popover-y: 0px;
      }
    }
  }

  @starting-style {
    .account-popover__panel {
      --account-popover-opacity: 0.7;
      --account-popover-y: 20px;
    }

    .account-popover__panel:popover-open {
      --account-popover-opacity: 0.7;
      --account-popover-y: 20px;
    }
  }

  .account-drawer {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .account-drawer__dialog {
    --animation-speed: 0.24s;
    --dialog-drawer-opening-animation: move-and-fade;
    --dialog-drawer-closing-animation: move-and-fade;

    height: fit-content;
    margin: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    border-radius: 0;
    padding: 0;
  }

  .dialog-drawer.account-drawer__dialog[open] {
    --start-x: 0px;
    --end-x: 0px;
    --start-y: 100%;
    --start-opacity: 1;
  }

  .dialog-drawer.account-drawer__dialog.dialog-closing {
    --start-x: 0px;
    --end-x: 0px;
    --end-y: 100%;
    --start-opacity: 1;
  }

  .account-drawer__close-button {
    z-index: 1;
    inset-block-start: var(--padding-xs);
    inset-inline-end: var(--padding-xs);
    color: var(--color-foreground);
    background-color: transparent;
  }

  .account-drawer__close-button .svg-wrapper {
    display: flex;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
  }

  @keyframes account-drawer-slide-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @keyframes account-drawer-slide-out {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(100%);
    }
  }

  .cart-drawer {
    --cart-drawer-padding: var(--padding-lg) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);
    --cart-font-size--2xs: var(--font-size--2xs);
    --cart-font-size--xs: var(--font-size--xs);
    --cart-font-size--sm: var(--font-size--sm);
    --cart-font-size--md: var(--font-size--md);
    --cart-font-size--lg: var(--font-size--lg);
    --cart-font-size--xl: var(--font-size--xl);
    --cart-font-size--2xl: var(--font-size--2xl);
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: var(--margin-lg);

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

  .cart-drawer:has(.free-shipping-progress) .cart-drawer__heading {
    margin-bottom: 0;
  }
    .cart-drawer:has(.cart-image-banner) .cart-drawer__heading {
    margin-bottom: 0;
  }

  .cart-drawer:has(.cart-promo-banner) .cart-drawer__heading {
    margin-bottom: 0;
  }

  .cart-drawer:has(.cart-timer) .cart-drawer__heading {
    margin-bottom: 0;
  }


  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

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

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-md);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-md);
  }

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

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

  .cart-drawer__content:has(.cart-gift-wrap) .cart-drawer__summary {
    padding-top: var(--padding-xs);
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary,
  .cart-actions .disclosure-trigger {
    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__original-total-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    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__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-md);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-md);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid none;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

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

  @media screen and (min-width: 750px) {
    .cart-drawer--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 {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__action {
    --button-color: var(--color-foreground);

    cursor: pointer;
    display: flex;
    justify-content: center;
  }

  .header-actions__action .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

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

  .header-actions__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;
    }
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
    min-width: 26px;
  }

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .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-drawer__heading .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: var(--font-size--xs);
  }

  .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;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:284) */
.header__icon--menu {
    position: initial;
  }

  @media screen and (min-width: 750px) {
    .header--desktop header-menu + .header__drawer header-drawer {
      display: none;
    }
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .header__drawer {
    display: flex;
    min-height: 60px;
    align-items: center;

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

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }

    .header__drawer--desktop & {
      height: 100vh;
    }
  }

  .menu-drawer:has(details[open]) {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

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

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline-start: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline-start: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: var(--ms-t-title);
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:289) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:292) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

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

    width: auto;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .variant-option--images {
    position: relative;
  }

  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;
    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:294) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

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

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .drawer-localization__button .icon-flag,
  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: var(--ms-radius-round, 50%);
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
    color: var(--color-foreground);
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

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

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: var(--ms-radius-md, 8px);
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: var(--ms-w-medium, 500);
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: var(--ms-w-medium, 500);
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

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

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector,
  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .header__column .localization-form__select {
    background-color: var(--header-bg-color);
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:295) */
.media-block {
    overflow: hidden;
    position: relative;

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

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:ms-card-atc (INDEX:301) */
.ms-card-atc {
    display: block;
    width: 100%;
  }

  .ms-card-atc__form,
  .ms-card-atc .shopify-product-form,
  .ms-card-atc add-to-cart-component,
  .ms-card-atc .add-to-cart__button {
    display: block;
    width: 100%;
  }

  /* Mismo estilo que el botón del PDP (hereda .button + .add-to-cart-button:
     colores del scheme, mayúsculas, radio y tipografía del tema). Sólo se fija
     el ancho de tarjeta y una altura propia — el del PDP mide
     --height-buy-buttons y aquí el default baja al mínimo táctil para que la
     tarjeta no se haga torre. Selector compuesto: los stylesheets de bloque
     cargan después y con una sola clase ganarían ellos. */
  .ms-card-atc .ms-card-atc__button {
    width: 100%;
    height: var(--ms-card-atc-height, 44px);
    min-height: 44px;
  }
/* END_SNIPPET:ms-card-atc */

/* START_SNIPPET:ms-card-gallery (INDEX:302) */
/* Núcleo de .card-gallery (mismo nombre de clase que el nativo para heredar su
     comportamiento). Se incluye aquí porque en páginas 100% ms- (home) el
     stylesheet del nativo card-gallery puede no cargarse. */
  .card-gallery {
    overflow: hidden;
    container-type: inline-size;
    container-name: card-gallery-container;
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .card-gallery slideshow-arrows .slideshow-control {
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next/prev image on pointerenter; kick-load them.
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:ms-card-gallery */

/* START_SNIPPET:ms-card-image-badge (INDEX:303) */
.ms-card-img-badge {
    position: absolute;
    z-index: var(--layer-raised, 3);
    pointer-events: none;
    width: var(--ms-cib-size, 22%);
    max-width: var(--ms-cib-max, 96px);
    aspect-ratio: 1 / 1;
    border-radius: var(--ms-cib-r, 0px);
    overflow: hidden;
    line-height: 0;
  }

  .ms-card-img-badge__img {
    width: 100%;
    height: 100%;
    object-fit: var(--ms-cib-fit, cover);
    display: block;
  }

  .ms-card-img-badge--top-left {
    inset-block-start: var(--ms-cib-off, 8px);
    inset-inline-start: var(--ms-cib-off, 8px);
  }
  .ms-card-img-badge--top-right {
    inset-block-start: var(--ms-cib-off, 8px);
    inset-inline-end: var(--ms-cib-off, 8px);
  }
  .ms-card-img-badge--bottom-left {
    inset-block-end: var(--ms-cib-off, 8px);
    inset-inline-start: var(--ms-cib-off, 8px);
  }
  .ms-card-img-badge--bottom-right {
    inset-block-end: var(--ms-cib-off, 8px);
    inset-inline-end: var(--ms-cib-off, 8px);
  }
/* END_SNIPPET:ms-card-image-badge */

/* START_SNIPPET:ms-cart-panel (INDEX:305) */
/* Fuera del escritorio el panel no existe: en el celular manda la fila
     compacta de cart-upsell. */
  .ms-cart-panel {
    display: none;
  }

  @media screen and (min-width: 1024px) {
    .ms-cart-panel:not([hidden]) {
      display: flex;
      flex-direction: column;
      gap: var(--gap-lg, 20px);
      height: 100%;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      /* El mismo relleno que el encabezado «Carrito» de escritorio: los dos
         títulos quedan en la misma línea. */
      padding: var(--padding-xl, 24px) var(--padding-2xl, 32px);
      background-color: var(--ms-cp-bg);
      color: var(--cart-upsell-text-color, var(--color-foreground));
    }

    /* ── El cajón se ensancha y se parte en dos columnas ──────────────────
       Solo cuando el panel está vivo (el JS le pone [hidden] si ya no queda
       nada por ofrecer): entonces el cajón vuelve a su ancho normal. */
    .cart-drawer__dialog:has(.ms-cart-panel:not([hidden])) {
      width: min(calc(var(--ms-cp-col, 540px) + var(--ms-cp-w, 480px)), 96vw);
      max-width: 96vw;
    }

    .cart-drawer__dialog:has(.ms-cart-panel:not([hidden])) .cart-items-component {
      display: grid;
      grid-template-columns: minmax(0, var(--ms-cp-col, 540px)) minmax(0, 1fr);
      /* Encabezado + hasta cuatro avisos (temporizador, promo, imagen, envío
         gratis) en filas automáticas; el contenido se estira en la última. */
      grid-template-rows: repeat(5, auto) minmax(0, 1fr);
    }

    .cart-drawer__dialog:has(.ms-cart-panel--left:not([hidden])) .cart-items-component {
      grid-template-columns: minmax(0, 1fr) minmax(0, var(--ms-cp-col, 540px));
    }

    .cart-drawer__dialog:has(.ms-cart-panel:not([hidden])) .cart-items-component > :not(.ms-cart-panel) {
      grid-column: 1;
    }

    .cart-drawer__dialog:has(.ms-cart-panel--left:not([hidden])) .cart-items-component > :not(.ms-cart-panel) {
      grid-column: 2;
    }

    .cart-drawer__dialog:has(.ms-cart-panel:not([hidden])) .cart-items-component > .cart-drawer__content {
      grid-row: -2 / -1;
      height: 100%;
      min-height: 0;
    }

    /* Sin raya divisoria: el crema del panel contra el blanco del carrito ya
       separa las dos zonas. */
    .cart-items-component > .ms-cart-panel {
      grid-column: 2;
      grid-row: 1 / -1;
    }

    .cart-items-component > .ms-cart-panel--left {
      grid-column: 1;
    }

    /* Con el panel a la vista, la fila compacta del cajón sobra: serían los
       mismos productos dos veces. */
    .cart-drawer__dialog:has(.ms-cart-panel:not([hidden])) .cart-drawer__items cart-upsell-component {
      display: none !important;
    }
  }

  /* ── Tarjetas compactas (Leo, 25-sep) ─────────────────────────────────────
     Cuatro en fila sin hacer scroll, incluso en una laptop de 768 px de alto.
     Anatomía de la fila compacta del celular, un poco más grande: foto 1:1 al
     lado · nombre, para qué es y «1 BOTE · $ 599» · «Agregar» a la derecha.
     Sin delatores: la tarjeta es blanca SIN borde sobre el crema del panel (lo
     que se lee va sobre fondo), sin sombra, sin «+» decorativo, y el título del
     panel mide y se alinea como «Carrito». */
  .ms-cart-panel__heading {
    margin: 0;
    color: inherit;
  }

  .ms-cart-panel__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ms-cart-panel .ms-cart-panel__card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    height: auto;
    padding: 12px 16px 12px 12px;
    background-color: var(--color-background);
    border: 0;
    border-radius: var(--cart-upsell-border-radius, 12px);
  }

  .ms-cart-panel__media {
    display: block;
    width: 88px;
  }

  .ms-cart-panel__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--upsell-image-radius, 0);
  }

  .ms-cart-panel__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .ms-cart-panel__rating {
    display: flex;
  }

  .ms-cart-panel__title {
    font-size: var(--cart-title-font-size);
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ms-cart-panel__title:hover {
    text-decoration: underline;
  }

  .ms-cart-panel__desc {
    margin: 0;
    font-size: var(--cart-font-size--xs, 0.8125rem);
    line-height: 1.4;
    color: #625a55;
    /* Dos renglones: en uno se cortaba con «…» a media frase, y el alto sobra. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ms-cart-panel__price {
    display: flex;
    align-items: baseline;
    gap: 0 6px;
    margin: 2px 0 0;
    font-size: var(--cart-font-size--sm, 0.875rem);
    white-space: nowrap;
  }

  .ms-cart-panel__variant {
    font-size: var(--cart-font-size--xs, 0.75rem);
    color: #625a55;
  }

  .ms-cart-panel__variant::after {
    content: '·';
    margin-inline-start: 6px;
  }

  /* El mismo botón que la fila compacta del celular. */
  .ms-cart-panel .ms-cart-panel__button {
    width: auto;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0 16px;
    font-size: var(--ds-t-button, var(--cart-font-size--xs));
    white-space: nowrap;
    background-color: var(--cart-upsell-button-color);
    color: var(--cart-upsell-button-text-color);
  }
/* END_SNIPPET:ms-cart-panel */

/* START_SNIPPET:ms-cart-sub (INDEX:306) */
/* ── Suscripción en el renglón ───────────────────────────────────────────
     La superficie es la del sello que había (tinta al 4.5 %, radio sm): se lee
     como aviso del propio carrito y no compite con el precio. El interruptor
     es el de «Envolver para regalo» (44×24, bola de 20) para que en el cajón
     no haya dos interruptores distintos. Prendido va en el color principal
     del esquema; el ajuste «Color del interruptor» lo cambia. */
  .cart-items__sub {
    grid-area: sub;
    margin-block-start: var(--margin-sm, 12px);
    min-width: 0;
  }

  .ms-cart-sub {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--ds-forma-surface, var(--ms-radius-sm, 6px));
    background: rgb(var(--color-foreground-rgb, 19 23 21) / 0.045);
    color: rgb(var(--color-foreground-rgb, 19 23 21) / var(--opacity-70, 0.7));
    font-size: var(--ds-t-cart-line, var(--cart-font-size--sm, 14px));
    line-height: 1.35;
    transition: opacity 0.2s ease;
  }

  .ms-cart-sub--off {
    cursor: pointer;
  }

  .ms-cart-sub--off:hover {
    background: rgb(var(--color-foreground-rgb, 19 23 21) / 0.07);
  }

  .ms-cart-sub__cubre::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
  }

  .ms-cart-sub[aria-busy='true'] {
    opacity: 0.55;
    pointer-events: none;
  }

  .ms-cart-sub__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .ms-cart-sub__titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.35em;
    color: var(--color-foreground);
    font-weight: var(--ms-w-strong, 600);
  }

  .ms-cart-sub__titulo label {
    cursor: pointer;
  }

  .ms-cart-sub__pct {
    color: var(--ms-cart-sub-accent, var(--color-primary, currentColor));
    white-space: nowrap;
  }

  .ms-cart-sub__sep {
    font-weight: 400;
    color: rgb(var(--color-foreground-rgb, 19 23 21) / 0.45);
  }

  .ms-cart-sub__nota {
    font-size: var(--ds-t-small, var(--cart-font-size--xs, 12px));
    font-weight: 400;
  }

  /* Frecuencia: se lee como parte de la frase («Suscripción · cada 30 días»)
     y se delata como editable con el subrayado y la flecha del tema. */
  .ms-cart-sub__freq {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 400;
  }

  .ms-cart-sub__select {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 4px 18px 2px 0;
    border: 0;
    border-block-end: 1px solid rgb(var(--color-foreground-rgb, 19 23 21) / 0.35);
    border-radius: 0;
    background: transparent;
    color: var(--color-foreground);
    font: inherit;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
  }

  .ms-cart-sub__select:hover {
    border-block-end-color: var(--color-foreground);
  }

  .ms-cart-sub__select:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .ms-cart-sub__caret {
    position: absolute;
    inset-inline-end: 0;
    width: 10px;
    height: 10px;
    pointer-events: none;
    color: var(--color-foreground);
  }

  .ms-cart-sub__caret svg {
    width: 100%;
    height: 100%;
  }

  /* El interruptor — mismo dibujo que .cart-gift-wrap__toggle */
  .ms-cart-sub__toggle {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
  }

  .ms-cart-sub__switch {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .ms-cart-sub__switch:disabled {
    cursor: not-allowed;
  }

  .ms-cart-sub__track {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--ds-forma-control, var(--ms-radius-pill, 12px));
    background: rgb(var(--color-foreground-rgb, 19 23 21) / var(--opacity-20, 0.2));
    transition: background-color 0.2s ease;
  }

  .ms-cart-sub__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: var(--ds-radius-round, var(--ms-radius-round, 50%));
    background: rgb(var(--color-background-rgb, 255 255 255));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
  }

  .ms-cart-sub__switch:checked + .ms-cart-sub__track {
    background: var(--ms-cart-sub-accent, var(--color-primary, rgb(var(--color-foreground-rgb))));
  }

  .ms-cart-sub__switch:checked + .ms-cart-sub__track::after {
    transform: translateX(20px);
  }

  .ms-cart-sub__switch:focus-visible + .ms-cart-sub__track {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .ms-cart-sub__switch:disabled + .ms-cart-sub__track {
    opacity: 0.5;
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-cart-sub,
    .ms-cart-sub__track,
    .ms-cart-sub__track::after {
      transition: none;
    }
  }
/* END_SNIPPET:ms-cart-sub */

/* START_SNIPPET:ms-custom-badge (INDEX:309) */
.ms-custom-badge {
    position: absolute;
    z-index: var(--layer-raised, 2);
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.6em;
    border-radius: var(--ms-cb-radius, 100px);
    /* Dentro de .color-{scheme}, var(--color-*) ya es el del esquema elegido. */
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--ms-cb-font, inherit);
    font-weight: var(--ms-cb-weight, 600);
    text-transform: var(--ms-cb-transform, none);
    font-size: var(--font-size--xs, 0.75rem);
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
  }
  .ms-custom-badge--top-left { inset-block-start: var(--padding-sm, 0.75rem); inset-inline-start: var(--padding-sm, 0.75rem); }
  .ms-custom-badge--top-right { inset-block-start: var(--padding-sm, 0.75rem); inset-inline-end: var(--padding-sm, 0.75rem); }
  .ms-custom-badge--bottom-left { inset-block-end: var(--padding-sm, 0.75rem); inset-inline-start: var(--padding-sm, 0.75rem); }
  .ms-custom-badge--bottom-right { inset-block-end: var(--padding-sm, 0.75rem); inset-inline-end: var(--padding-sm, 0.75rem); }
/* END_SNIPPET:ms-custom-badge */

/* START_SNIPPET:ms-price (INDEX:316) */
.ms-price {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--ms-space-2xs, 0.5rem);
    color: var(--color-foreground);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  .ms-price__regular,
  .ms-price__sale {
    font-weight: var(--ms-w-medium, 500);
  }

  .ms-price--on-sale .ms-price__sale {
    color: var(--color-foreground);
  }

  .ms-price__compare {
    color: var(--color-foreground);
    opacity: 0.55;
    font-weight: var(--ms-w-body, 400);
    text-decoration: line-through;
  }

  .ms-price__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1em 0.5em;
    border-radius: var(--ms-radius-sm, 6px);
    /* Par del botón primario: fondo+texto diseñados para contraste (igual que
       el ribbon de ms-product-card). Garantiza legibilidad del "-XX%". */
    background: var(--color-primary-button-background, var(--color-primary));
    color: var(--color-primary-button-text, var(--color-background));
    font-size: 0.75em;
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.4;
    white-space: nowrap;
  }

  /* Tamaños tipográficos */
  .ms-price--sm { font-size: var(--ms-t-meta); }
  .ms-price--md { font-size: var(--ms-t-body); }
  .ms-price--lg { font-size: var(--ms-t-title); }

  .ms-price--lg .ms-price__regular,
  .ms-price--lg .ms-price__sale {
    font-weight: var(--ms-w-medium, 500);
  }
/* END_SNIPPET:ms-price */

/* START_SNIPPET:ms-product-card (INDEX:317) */
.ms-product-card {
    --ms-touch-min: 44px;
    position: relative;
  }

  .ms-product-card__content {
    position: relative;
  }

  /* La galería es el ancla de los overlays (ribbon/wishlist/dots/quick-add) */
  .ms-product-card .card-gallery {
    position: relative;
  }

  /* ── Detalles ─────────────────────────────────────────────────────────── */
  .ms-product-card__details {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-2xs, 0.4rem);
  }

  .ms-product-card__subtitle {
    margin: 0;
    font-size: var(--font-size--xs, 0.8125rem);
    color: var(--color-foreground);
    opacity: 0.6;
    /* NO uppercase / sin letter-spacing pesado (convención ms-) */
    text-transform: none;
  }

  .ms-product-card__title {
    margin: 0;
    font-size: var(--font-size--md, 1rem);
    font-weight: var(--ms-w-medium, 500);
    color: var(--color-foreground);
    line-height: 1.25;
    /* Tope de 2 líneas: un nombre largo no puede empujar su propio precio.
       SIN alto reservado — el `min-height: 2lh` que vivía aquí alineaba los
       precios de la fila a costa de dejar ~20px de aire muerto bajo TODO
       título de una sola línea, que es el caso de casi todo el catálogo.
       Reservar dos líneas para todos por cubrir un caso que quizá no existe
       sale caro: si algún producto se pasa a dos líneas, es más barato
       acortar el nombre que acolchonar la cuadrícula entera. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .ms-product-card__rating {
    display: flex;
    align-items: center;
    /* Pegado al nombre: se recorta el gap del contenedor para que las
       estrellas se lean como parte del producto y no como una fila suelta. */
    margin-top: calc(-1 * var(--ms-space-2xs, 0.4rem) / 2);
  }

  .ms-product-card__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ms-space-xs, 0.6rem) var(--ms-space-sm, 0.75rem);
  }

  .ms-product-card__desc {
    margin: 0;
    font-size: var(--font-size--sm, 0.875rem);
    color: var(--color-foreground);
    opacity: 0.75;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* ── Ribbon / badge en esquina ────────────────────────────────────────── */
  .ms-product-card__badges {
    position: absolute;
    z-index: var(--layer-raised, 2);
    display: flex;
    gap: var(--ms-space-2xs, 0.4rem);
    pointer-events: none;
  }
  .ms-product-card__badges--top-left { inset-block-start: var(--padding-sm); inset-inline-start: var(--padding-sm); }
  .ms-product-card__badges--top-right { inset-block-start: var(--padding-sm); inset-inline-end: var(--padding-sm); }
  .ms-product-card__badges--bottom-left { inset-block-end: var(--padding-sm); inset-inline-start: var(--padding-sm); }
  .ms-product-card__badges--bottom-right { inset-block-end: var(--padding-sm); inset-inline-end: var(--padding-sm); }

  .ms-product-card__ribbon {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.6em;
    border-radius: var(--ms-badge-radius, 100px);
    /* Badge por defecto = par del botón primario (fondo+texto diseñados para
       contraste y on-brand). Antes usaba var(--color-primary-button-text-color),
       token INEXISTENTE → caía siempre a --color-background (contraste no
       garantizado). El token real es --color-primary-button-text. Los estados
       sold-out/sale reciben su propio .color-{scheme} (ver override abajo). */
    background: var(--color-primary-button-background, var(--color-primary));
    color: var(--color-primary-button-text, var(--color-background));
    font-family: var(--ms-badge-font, inherit);
    font-weight: var(--ms-badge-weight, 600);
    text-transform: var(--ms-badge-transform, none);
    font-size: var(--font-size--xs, 0.75rem);
    line-height: 1.3;
    white-space: nowrap;
  }
  /* Cuando el ribbon adopta un color-scheme (sold-out/sale), `.color-{scheme}`
     redeclara --color-background/--color-foreground CON los valores de ESE
     scheme (scoped). Aquí los aplicamos con mayor especificidad que la regla
     base de --color-primary para que el badge muestre el scheme elegido por el
     cliente. NO es genérico: dentro de .color-{scheme}, var(--color-background)
     ES el fondo de ese scheme. */
  .ms-product-card__ribbon[class*='color-'] {
    background: var(--color-background);
    color: var(--color-foreground);
  }

  /* ── Wishlist (placeholder, sin librería) ─────────────────────────────── */
  .ms-product-card__wishlist {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised, 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ms-touch-min);
    height: var(--ms-touch-min);
    padding: 0;
    border: 0;
    border-radius: var(--ms-radius-round, 50%);
    background: rgb(var(--color-background-rgb) / 0.85);
    color: var(--color-foreground);
    cursor: pointer;
    backdrop-filter: blur(8px);
    pointer-events: all;
  }
  .ms-product-card__wishlist .ms-wishlist__icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
  .ms-product-card__wishlist[aria-pressed='true'] { color: var(--color-primary); }
  .ms-product-card__wishlist[aria-pressed='true'] .ms-wishlist__icon svg { fill: currentColor; stroke: currentColor; }
  .ms-product-card__wishlist:hover { background: var(--color-background); }

  /* Si coexisten ribbon top-right + wishlist top-right, baja el ribbon */
  .ms-product-card__badges--top-right { inset-inline-end: calc(var(--padding-sm) + var(--ms-touch-min) + 0.4rem); }

  /* ── Doble botón inline ───────────────────────────────────────────────── */
  .ms-product-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-2xs, 0.5rem);
  }
  /* El botón inline es ms-card-atc (estilo del botón del PDP); su CSS vive en
     su snippet. Aquí sólo el ancho del carril. */
  .ms-product-card__action--add,
  .ms-product-card__action--add .ms-card-atc {
    width: 100%;
  }
  .ms-product-card__action--view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--ms-touch-min);
    text-align: center;
  }

  /* ── Precio VIVO (tarjetas con tallas seleccionables) ─────────────────────
     Es el <product-price> nativo (el que updatePrice morfea al cambiar talla),
     vestido con la MISMA escala que ms-price md para que a la vista sean el
     mismo precio. El markup interno lo pone snippets/price.liquid — no se
     estiliza por clases internas suyas: se hereda desde el contenedor. */
  .ms-product-card__price-live {
    display: inline-flex;
    align-items: baseline;
    font-size: var(--ms-t-body);
    font-weight: var(--ms-w-medium, 500);
    color: var(--color-foreground);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  /* ── A11y: foco visible, sin outline:none ─────────────────────────────── */
  .ms-product-card :is(.ms-wishlist, .ms-product-card__action--view):focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentColor;
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .ms-product-card__wishlist { transition: background var(--animation-speed, 0.2s) ease, color var(--animation-speed, 0.2s) ease; }
  }

  /* Desktop: subir un punto el tamaño del título/subtítulo */
  @media screen and (min-width: 750px) {
    .ms-product-card__title { font-size: var(--font-size--lg, 1.0625rem); }
  }
/* END_SNIPPET:ms-product-card */

/* START_SNIPPET:ms-rating-stars (INDEX:321) */
.ms-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-space-2xs, 0.5rem);
    color: var(--color-foreground);
    line-height: 1;
  }

  .ms-rating__stars {
    position: relative;
    display: inline-block;
    white-space: nowrap;
  }

  .ms-rating__layer {
    display: inline-flex;
  }

  .ms-rating__layer--fg {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    overflow: hidden;
  }

  .ms-rating__star {
    display: block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
  }

  /* Estrellas vacías: contorno tenue del color de texto */
  .ms-rating__layer--bg .ms-rating__star {
    fill: var(--color-foreground);
    opacity: 0.22;
  }

  /* Estrellas llenas: color de acento del scheme activo */
  .ms-rating__layer--fg .ms-rating__star {
    fill: var(--color-primary);
    opacity: 1;
  }

  .ms-rating__value {
    font-weight: var(--ms-w-medium, 500);
    font-variant-numeric: tabular-nums;
  }

  .ms-rating__count {
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }

  /* Tamaños: el em de la estrella sigue al font-size del contenedor */
  .ms-rating--sm { font-size: var(--ms-t-label); }
  .ms-rating--sm .ms-rating__stars { font-size: var(--ms-t-meta); }
  .ms-rating--md { font-size: var(--ms-t-body); }
  .ms-rating--md .ms-rating__stars { font-size: var(--ms-t-strong); }
  .ms-rating--lg { font-size: var(--ms-t-strong); }
  .ms-rating--lg .ms-rating__stars { font-size: var(--ms-t-title); }
/* END_SNIPPET:ms-rating-stars */

/* START_SNIPPET:ms-search-bar-inline (INDEX:322) */
/* ===========================================================================
     ms-search-bar-inline — barra predictiva inline (slot search del header).
     Scopeada .ms-sbi__. Tokens de input del tema; colores del scheme del header.
     =========================================================================== */
  .ms-sbi {
    position: relative;
    display: block;
    width: min(100%, var(--ms-sbi-width, 320px));
    /* En el right column del header (flex, justify-end) order:-1 deja la barra ANTES
       de los iconos: [barra] país · cuenta · carrito. */
    order: -1;
  }
  .ms-sbi__form { position: relative; width: 100%; margin: 0; }

  .ms-sbi__field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    background: var(--color-input-background, var(--color-background));
    border: var(--style-border-width-inputs, 1px) solid var(--color-input-border, var(--color-border, currentColor));
    border-radius: var(--style-border-radius-inputs, 8px);
    color: var(--color-input-text, var(--color-foreground));
  }
  .ms-sbi__field:focus-within { border-color: var(--color-primary, currentColor); }

  .ms-sbi__icon {
    position: absolute;
    left: 0.7rem;
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.6);
  }
  .ms-sbi__icon svg { width: 1rem; height: 1rem; display: block; }

  .ms-sbi__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--ms-t-body);
    padding-block: 0.4rem;
    padding-inline: 2.1rem 0.5rem;
    outline: none;
    text-overflow: ellipsis;
  }
  .ms-sbi__input::placeholder { color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.55); }
  .ms-sbi__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

  .ms-sbi__reset {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
  }
  .ms-sbi__reset:hover { opacity: 1; }
  .ms-sbi__reset[hidden] { display: none; }
  .ms-sbi__reset svg { width: 0.9rem; height: 0.9rem; display: block; }

  /* Dropdown: anclado a la DERECHA del campo (el campo va junto a los iconos), puede ser
     más ancho que el input para que las tarjetas respiren. Oculto hasta foco + texto. */
  .ms-sbi__results-wrapper {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(92vw, 400px);
    z-index: var(--layer-heightened, 5);
    display: none;
    background: var(--color-background);
    border: 1px solid var(--color-border, rgb(var(--color-foreground-rgb, 0 0 0) / 0.12));
    border-radius: var(--style-border-radius-inputs, 8px);
    box-shadow: 0 12px 32px rgb(var(--color-foreground-rgb, 0 0 0) / 0.16);
    overflow: hidden;
  }
  .ms-sbi__results {
    max-height: min(70svh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ms-sbi:focus-within:has(.ms-sbi__input:not(:placeholder-shown)) .ms-sbi__results-wrapper {
    display: block;
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-sbi__reset { transition: none; }
  }
/* END_SNIPPET:ms-search-bar-inline */

/* START_SNIPPET:overlay (INDEX:326) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:327) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

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

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:predictive-search-products-list (INDEX:329) */
.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;
  }
/* END_SNIPPET:predictive-search-products-list */

/* START_SNIPPET:predictive-search-resource-carousel (INDEX:330) */
.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-resource-carousel */

/* START_SNIPPET:price-filter (INDEX:331) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }

  .facets__inputs-wrapper.price-facet__inputs-wrapper {
    flex-wrap: nowrap;
  }

  .price-facet__field {
    width: 50%;
    flex-grow: 0;
  }

  @container (max-width: 199px) {
    .facets__inputs-wrapper.price-facet__inputs-wrapper {
      flex-wrap: wrap;
      width: 100%;
    }

    .price-facet__inputs-wrapper .price-facet__field {
      width: 100%;
    }
  }

  .facets .facets__inputs-wrapper.price-facet__inputs-wrapper {
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  .facets--horizontal .facets__panel-content:has(.price-facet) {
    min-width: 360px;
  }

  .facets--horizontal .facets__inputs-wrapper.price-facet__inputs-wrapper {
    @media screen and (min-width: 750px) {
      padding: calc(var(--padding-md) + var(--style-border-width-inputs));
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .facets--horizontal .price-facet__highest-price {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .field__label.price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-card (INDEX:335) */
product-card-link,
  :not(product-card-link) product-card {
    width: 100%;
  }

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

  /* Flechas de galería visibles: el theme las ocultaba (display:none en móvil y solo
     hover en desktop). La visibilidad por dispositivo la controla product-grid (lee
     el ajuste card_gallery_arrows); aquí solo las hacemos opacas cuando se muestran. */
  .product-card slideshow-arrows .slideshow-control {
    opacity: 1;
  }

  /* 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;
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:336) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

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

  /* SOM HER: la VISIBILIDAD por dispositivo de las flechas se controla arriba en el
     bloque {% style %} (lee settings.card_gallery_arrows). Aquí solo posición/color. */
  /* Menos al centro: bajan hacia el tercio inferior en vez de quedar a media altura
     (vencen a slideshow-arrows[position='center'] del theme por especificidad). */
  .product-grid slideshow-arrows[position='center'] {
    align-items: flex-end;
    padding-block-end: var(--padding-lg, 1.5rem);
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    padding: var(--grid--margin--mobile);

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

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:337) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    max-width: var(--sidebar-width);
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }

  body:has(#header-group #header-component[data-sticky-state='active'])
    .product-media-gallery__sticky-wrap.sticky-content {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content (INDEX:338) */
.dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

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

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

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

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  /* FIX: los puntos (dots) de paginación móvil no se veían. El theme les aplica
     mix-blend-mode: difference + blanco, que sobre la imagen los hacía desaparecer
     (el "contador" sí se ve porque usa píldora oscura sólida). Mismo trato fiable:
     blend normal + píldora oscura + dots blancos; el activo resalta un poco más. */
  .media-gallery__mobile-controls:has(.slideshow-controls__dots) {
    mix-blend-mode: normal;
  }
  .media-gallery__mobile-controls .slideshow-controls__dots {
    background: rgb(0 0 0 / 0.35);
    backdrop-filter: blur(10px);
  }
  .media-gallery__mobile-controls .slideshow-controls__dots button {
    --color: rgb(255 255 255 / 0.55);
    --color-active: #fff;
  }
  .media-gallery__mobile-controls .slideshow-controls__dots button[aria-selected='true']::after {
    transform: scale(1.2);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:339) */
.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 (max-width: 749px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius-mobile, 0);
      overflow: hidden;
    }
  }

  @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;
      }
    }
  }

  ::view-transition-old(gallery-item),
  ::view-transition-new(gallery-item) {
    animation-duration: 0ms;
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:product-variations-picker (INDEX:343) */
.product-variations-picker .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .product-variations-picker__link {
    text-decoration: none;
  }

  .product-variations-picker__link--current {
    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
    background-color: var(--color-selected-variant-background);
  }

  .product-variations-picker__link--current.variant-option__button-label--has-swatch {
    background-color: transparent;
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .product-variations-picker__link:not(.variant-option__button-label--has-swatch):hover {
    background-color: var(--color-variant-hover-background);
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .product-variations-picker__link--current:not(.variant-option__button-label--has-swatch):hover {
    background-color: var(--color-selected-variant-hover-background);
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);
  }

  .product-variations-picker__fallback-label {
    padding-inline: var(--padding-sm);
    text-align: center;
    white-space: nowrap;
  }

  .variant-option__button-label--has-swatch .product-variations-picker__fallback-label {
    margin-top: 0;
    font-size: 0.75rem;
  }

  .product-variations-picker--swatches .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);
    min-width: var(--variant-picker-swatch-width);
    min-height: var(--variant-picker-swatch-height);
    border-radius: var(--variant-picker-swatch-radius);
  }

  .product-variations-picker--swatches .swatch--unscaled {
    width: var(--variant-picker-swatch-width);
    height: var(--variant-picker-swatch-height);
    border-radius: var(--variant-picker-swatch-radius);
    background-size: var(--variant-picker-swatch-width) var(--variant-picker-swatch-height);
  }

  .product-variations-picker--swatches .swatch--variant-image {
    background-size: cover;
  }
/* END_SNIPPET:product-variations-picker */

/* START_SNIPPET:quantity-selector (INDEX:348) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

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

  /* Forma del selector de cantidad SOLO en el carrito (Ajustes → Carrito →
     "Selector de cantidad"). Scopeado a .cart-items__quantity para GANAR a las
     reglas de píldora de cart-products.liquid (que si no, lo dejaban inerte).
     Sin configurar (shape "según el tema") el fallback = píldora actual (9999/100),
     así que el default no cambia; al elegir Recto/Redondeado se aplica el radio. */
  .cart-items__quantity cart-quantity-selector-component.quantity-selector {
    border-radius: var(--ms-cart-qty-radius, 9999px);
  }
  .cart-items__quantity cart-quantity-selector-component.quantity-selector :is(.quantity-minus, .quantity-plus) {
    border-radius: var(--ms-cart-qty-radius, 100px);
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal (INDEX:349) */
@media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--wide-content-width);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    height: fit-content;
    overflow: hidden;
    min-height: 500px;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 750px) {
      position: fixed;
      display: block;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
    }
  }

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

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 750px) {
      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);
  }

  .quick-add-modal__close:active {
    transform: scale(0.8);
  }

  .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: 750px) {
      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: 750px) {
      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: var(--ms-w-medium, 500);
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 750px) {
      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;

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

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

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

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

  .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: 0 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: var(--ms-w-medium, 500);
    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 .view-product-title {
    display: flex;
  }

  .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: var(--padding-2xl);
  }

  .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;
      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: 750px) {
      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 slideshow-controls {
    display: none;
  }

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

  /*
   * PDP wraps gallery + below-media in .product-media-gallery__sticky-wrap with .sticky-content.
   * That creates a positioned ancestor, so media-gallery { position: absolute; inset: 0 } was
   * anchoring to the wrapper (collapsed / wrong height) instead of .product-information__media,
   * breaking the media column scroll. Static wrapper restores absolute positioning vs __media.
   */
  .quick-add-modal__content
    .product-information__media
    .product-media-gallery__sticky-wrap.sticky-content {
    position: static;
    top: auto;
    z-index: auto;
    width: 100%;
  }

  .quick-add-modal__content .product-media-gallery__below-media {
    display: none !important;
  }

  .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 */

/* START_SNIPPET:quick-add (INDEX:350) */
/* Co-located with markup so hiding works outside product-card (e.g. layered slideshow). */
  quick-add-component[data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  quick-add-component[data-quick-add-button='add'] .quick-add__button--choose {
    display: none;
  }

  /* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

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

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

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

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

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

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    /* Forma/tamaño configurables (Ajustes → Tarjetas de producto). Fallback = actual. */
    border-radius: var(--ms-qa-radius, 50px);
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--ms-qa-size, var(--button-size-md));
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:active {
      scale: 0.99;
      translate: 0 1px;
    }

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

    &:is(:hover, :focus-visible) {
      .add-to-cart-text__content {
        grid-template-columns: 1fr;

        span span {
          opacity: 1;
          translate: 0 0;
          filter: blur(0);
        }
      }
    }

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

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: var(--ms-qa-radius, 50px);
    height: 100%;
    gap: 0;
  }

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

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--ms-qa-size, var(--button-size-md)) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

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

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

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

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

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }
  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &:is(:hover, :focus-visible) {
        .add-to-cart-text__content,
        .add-to-cart-text__content span span {
          transition-delay: var(--animation-speed);
        }
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:resource-card (INDEX:352) */
.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: var(--ms-w-medium, 500);
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: var(--ms-w-body, 400);
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      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-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-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:353) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image .image-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:search-modal (INDEX:360) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .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);
    will-change: transform, opacity;
    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-primary);
    }
  }

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

  .predictive-search-results__inner {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);
    --list-item-padding-block: var(--padding-sm);

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

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

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .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-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: var(--ms-radius-round, 50%);

    &:hover {
      background-color: rgb(var(--color-primary-hover-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:361) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  .header__column--center .search-action {
    width: auto;
    flex-grow: 1;
  }

  :is(.header__column--left, .header__column--center) .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;
    }

    :is(.header__column--left, .header__column--center) .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:362) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }

  /* ALTO = EL DE LA IMAGEN.
     El fondo deja de ser una capa `absolute` (que no mide) y entra EN FLUJO, en
     la MISMA fila del grid que el contenido. La fila acaba midiendo el mayor de
     los dos, asi que:
       · texto corto o vacio -> manda la foto y sale completa, sin recorte
       · texto largo         -> manda el texto y la foto se estira a cubrir la
                                fila entera (vuelve a recortar con `cover`, que
                                es lo correcto: la alternativa era dejar una
                                franja de fondo pelon debajo de la foto).

     La proporcion va en un ESPACIADOR (`::before`), no en la caja. Medido: con
     `aspect-ratio` puesto en la caja misma, el alto del grid deja de ser `auto`
     y el `stretch` no la estira — con un titular largo la seccion crecia a 2531
     px y la foto se quedaba en 156. Con el espaciador dentro, la caja conserva
     `height: auto`: el hijo le pone el minimo y el grid la puede estirar.

     El `grid-column: 1 / -1` es obligatorio: al pasar a `position: relative`,
     la capa de la imagen se ancla a ESTA caja y no a `.section`, asi que sin el
     la banda se encogeria a la columna de texto en las secciones a ancho de
     pagina. Empata en peso con `.section--page-width > *` de base.css y gana
     por orden — igual que ya lo hace la regla de apilado de mas abajo. */
  .section--ms-alto-img > .custom-section-background {
    position: relative;
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .section--ms-alto-img > .custom-section-background::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: var(--ms-alto-img-d);
  }

  .section--ms-alto-img > .custom-section-content {
    grid-row: 1;
  }

  @media screen and (max-width: 749px) {
    /* Cada tamano con la proporcion de SU archivo: con <picture> el navegador
       cambia la foto en 749 px y una sola proporcion recortaria la otra.
       Apilado manda sobre esto (misma fila, misma especificidad, mas abajo en el
       archivo): ahi la foto ya tiene proporcion propia y el texto va debajo. */
    .section--ms-alto-img:not(.section--ms-apila) > .custom-section-background::before {
      aspect-ratio: var(--ms-alto-img-m);
    }

    /* Con las dos perillas juntas (alto por imagen + apilado en movil), en movil
       manda apilado: la caja ya lleva SU proporcion y el espaciador sobra. */
    .section--ms-alto-img.section--ms-apila > .custom-section-background::before {
      display: none;
    }
  }

  /* Texto sobre la foto: vale en los dos tamanos. Va ANTES de la media query
     para que el bloque apilado de movil, que tiene la misma especificidad, le
     gane por orden. */
  .section--ms-ink-d > .custom-section-content {
    --color-foreground: var(--ms-ink-d);
    --color-foreground-heading: var(--ms-ink-d);
    color: var(--ms-ink-d);
  }

  @media screen and (max-width: 749px) {
    .section--ms-apila > .custom-section-background {
      grid-column: 1 / -1;
      grid-row: 1;
      position: relative;
      aspect-ratio: var(--ms-apila-ratio, 4 / 3);
    }

    .section--ms-apila > .custom-section-content {
      grid-row: 2;
    }

    /* El velo de legibilidad vive DENTRO del contenido, asi que apilado caeria
       sobre el texto en vez de sobre la foto. Ahi no hace falta: el texto ya no
       esta sobre la imagen. */
    .section--ms-apila > .custom-section-content > .overlay {
      display: none;
    }

    /* Los dos tokens Y el `color`. Medido: redefinir solo los tokens mueve el
       titular (que los usa via `--color`) pero NO la entradilla, porque el
       `color` ya venia calculado desde `.section` y el parrafo lo HEREDA — un
       token nuevo aqui no reescribe una propiedad resuelta mas arriba. */
    .section--ms-apila-ink > .custom-section-content {
      --color-foreground: var(--ms-apila-ink);
      --color-foreground-heading: var(--ms-apila-ink);
      color: var(--ms-apila-ink);
    }

    .section--ms-apila-fondo > .custom-section-content {
      background-color: var(--ms-apila-fondo);
    }
  }
/* END_SNIPPET:section */

/* START_SNIPPET:shopable-video (INDEX:363) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:shopable-video */

/* START_SNIPPET:slideshow-controls (INDEX:371) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

        &:hover {
          --color: var(--color-hover);
        }
      }

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: var(--ms-radius-round, 50%);
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 16vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow (INDEX:373) */
slideshow-slides {
    align-items: var(--slideshow-align-items, normal);
  }

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

/* START_SNIPPET:sorting (INDEX:374) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

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

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

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

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: var(--ms-w-medium, 500);
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:story-video (INDEX:378) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:story-video */

/* START_SNIPPET:text (INDEX:385) */
:root {
    --text-align-default: left;
  }

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

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

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

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

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

  .text-block__ancher-target {
    display: block;
    height: 0;
    overflow: hidden;
    scroll-margin-top: calc(var(--header-group-height, 0px) + var(--scroll-margin, 12px));
    pointer-events: none;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  @media screen and (max-width: 749px) {
    .text-block {
      align-items: var(--horizontal-alignment-mobile, var(--horizontal-alignment));
    }

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

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

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

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

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

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

  /* Hide link underline in headings unless a custom underline color is set (then theme variables apply). */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: var(--color-underline, transparent);
  }

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

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

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

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

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

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

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

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

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

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

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

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

  /*
    base.css only applies font tokens to .custom-typography > * (direct child). Richtext
    nests <strong>, <em>, <span> etc.; pasted or editor content may set inline font-family.
    These rules apply the custom font to all descendants. Optional custom bold/italic
    font pickers are more specific and still win for strong / em.
  */
  .text-block.custom-typography,
  .text-block.custom-typography * {
    font-family: var(--font-family) !important;
  }

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

  .custom-color-gradient,
  .custom-color-gradient > :is(h1, h2, h3, h4, h5, h6, p, *) {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .custom-color strong,
  .custom-color b {
    color: var(--color-bold, inherit);
  }

  .custom-color em,
  .custom-color i {
    color: var(--color-italic, inherit);
  }

  .text-block.custom-typography.text-block--emphasis-font-bold :is(strong, b) {
    font-family: var(--font-family-emphasis-bold) !important;
    font-weight: var(--font-weight-emphasis-bold) !important;
  }

  .text-block.custom-typography.text-block--emphasis-font-italic :is(em, i) {
    font-family: var(--font-family-emphasis-italic) !important;
    font-weight: var(--font-weight-emphasis-italic) !important;
    font-style: var(--font-style-emphasis-italic) !important;
  }

  .custom-color :is(u, a) {
    color: var(--color-underline, inherit);
  }

  .custom-color.text-block--emphasis-bg-bold :is(strong, b) {
    background-color: var(--text-bg-bold);
    padding: 0.08em 0.18em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .custom-color.text-block--emphasis-bg-italic :is(em, i) {
    background-color: var(--text-bg-italic);
    padding: 0.08em 0.18em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .custom-color.text-block--emphasis-bg-underline :is(u, a) {
    background-color: var(--text-bg-underline);
    padding: 0.08em 0.18em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .custom-color-gradient.text-block--emphasis-bg-bold :is(strong, b) {
    -webkit-text-fill-color: currentColor;
    background-clip: border-box;
  }

  .custom-color-gradient.text-block--emphasis-bg-italic :is(em, i) {
    -webkit-text-fill-color: currentColor;
    background-clip: border-box;
  }

  .custom-color-gradient.text-block--emphasis-bg-underline :is(u, a) {
    -webkit-text-fill-color: currentColor;
    background-clip: border-box;
  }

  .text-block--truncation-enabled .text-block__truncate-clip {
    overflow: hidden;
    width: 100%;
    max-inline-size: min(100%, var(--max-width, 100%));
    transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .text-block--truncation-enabled .text-block__truncate-content {
    width: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    .text-block--truncation-enabled .text-block__truncate-clip {
      transition: none;
    }
  }

  .text-block--truncation-enabled:not(.text-block--truncate-expanded):not(.text-block--truncate-no-overflow)
    .text-block__truncate-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--text-truncate-lines, 3);
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    word-break: break-word;
    /* Fade last lines into background so truncation feels softer */
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 calc(100% - var(--text-truncate-fade-size, 2em)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 calc(100% - var(--text-truncate-fade-size, 2em)),
      transparent 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .text-block--truncation-enabled.text-block--truncate-no-overflow .text-block__truncate-content,
  .text-block--truncation-enabled.text-block--truncate-expanded .text-block__truncate-content {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .text-block--truncation-enabled .text-block__truncate-toggle {
    cursor: pointer;
    margin-block-start: 0.35em;
    margin-block-end: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    font: inherit;
    text-align: inherit;
    width: fit-content;
    max-width: 100%;
  }

  .text-block--truncation-enabled .text-block__truncate-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .text-block--truncation-enabled.text-block--truncate-expanded .text-block__truncate-more {
    display: none;
  }

  .text-block--truncation-enabled:not(.text-block--truncate-expanded) .text-block__truncate-less {
    display: none;
  }

  .text-block--truncation-enabled.text-block--align-center .text-block__truncate-toggle {
    margin-inline: auto;
  }

  .text-block--truncation-enabled.text-block--align-right .text-block__truncate-toggle {
    margin-inline-start: auto;
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:394) */
.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));
  }

  .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%;
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

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

    @media (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__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .variant-option--swatches .variant-option__button-label__text {
    margin-top: 8px;
  }

  @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,
    .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }

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

    .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
      transition-property: clip-path;
    }

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

    /* MS fix: apply hover feedback only on devices with a true pointer (mouse).
       On touch, :hover is "sticky" after a tap, so tapping a sold-out (or other)
       variant kept the hover background and made it look selected - two buttons
       highlighted at once. Selection feedback still works via :checked (the pill). */
    @media (hover: hover) {
      &:hover,
      &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
        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;
    display: block;
    flex-basis: auto;
    min-height: auto;
  }

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

  @media (hover: hover) {
    .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));
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

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

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

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

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

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

    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,
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .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,
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }

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

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

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

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .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(--color-variant-border);

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

    line:last-of-type {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
      stroke: rgb(var(--color-variant-text-rgb) / 1);
    }
  }

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

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

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

  /* MS Variant Styles */
  .variant-option--lumin {
    display: grid;
    grid-template-columns: repeat(var(--lumin-columns-per-row, 3), 1fr);
    gap: var(--gap-md);
    margin: 0;
    padding: 0;
    border: none;
    max-width: 100%;
    align-items: inherit !important;
  }

  .variant-option__lumin-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-variant-background, #f8f8f8);
    border-radius: var(--options-border-radius, 8px);
    overflow: hidden;
    width: 100%;
    justify-content: space-between;
  }

  .variant-option__button-label--lumin {
    position: relative;
    padding: var(--lumin-label-padding-top, 26px) var(--lumin-label-padding-right, 8px) var(--lumin-label-padding-bottom, 16px) var(--lumin-label-padding-left, 8px);
    border: var(--options-border-width) solid var(--color-variant-border);
    background: transparent;
    color: var(--color-variant-text);
    cursor: pointer;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: auto; 
    min-height: auto;
    justify-content: flex-start;
  }

  /* Remove bottom border radius when bottom bar element is present */
  .variant-option__lumin-card:has(.variant-option__lumin-bottom-bar) .variant-option__button-label--lumin {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .variant-option__button-label--lumin:has([data-option-available=false]) {
    filter: grayscale(80%);
    pointer-events: none;
    cursor: not-allowed; 
  }

  .variant-option__button-label--lumin:hover {
    background-color: var(--color-variant-hover-background, rgba(0, 0, 0, 0.05));
  }

  .variant-option__button-label--lumin:has(:checked) {
    background-color: var(--color-selected-variant-background, rgba(0, 0, 0, 0.1));
    border-color: var(--color-selected-variant-border);
  } 

  .variant-option__lumin-badge {
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #8B4513;
    color: white;
    padding: 5px 12px 2px 12px;
    border-radius: var(--ms-radius-sm, 4px);
    font-size: 0.75rem;
    font-weight: var(--ms-w-medium, 500);
    text-align: center;
    white-space: nowrap;
    z-index: 2;
    min-width: 60px;
  }

  .variant-option__lumin-bottom-bar {
    background-color: #556B2F;
    color: white;
    padding: 8px 6px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: var(--ms-w-medium, 500);
    line-height: 1.2;
  }

  .variant-option__lumin-radio-indicator {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-variant-border, #666);
    border-radius: var(--ms-radius-round, 50%);
    margin-bottom: 8px;
    position: relative;
    background-color: transparent;
    transition: border-color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
  }

  .variant-option__button-label--lumin:has(:checked) .variant-option__lumin-radio-indicator {
    border-color: var(--color-selected-variant-text, #000);
    background-color: var(--color-selected-variant-background, #000);
  }

  .variant-option__button-label--lumin:has(:checked) .variant-option__lumin-radio-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: var(--ms-radius-round, 50%);
    background-color: var(--color-selected-variant-text, #fff);
  }

  .variant-option__button-label--lumin .variant-option__button-label__text {
    font-weight: var(--lumin-variant-name-font-weight, bold);
    font-size: var(--lumin-title-size, 1.1rem);
    margin-bottom: 8px;
    text-align: center;
    line-height: 1.2;
  }

  .variant-option__lumin-pricing {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .variant-option__lumin-current-price {
    font-size: var(--lumin-price-size, 1.2rem);
    line-height: 1;
    font-weight: var(--lumin-price-font-weight, bold);
    color: var(--lumin-price-color, #000);
  }

  .variant-option__button-label--lumin:has(:checked) .variant-option__lumin-current-price {
    color: var(--color-selected-variant-text);
  }

  .variant-option__lumin-compare-price {
    font-size: var(--lumin-compare-price-size, 1rem);
    font-weight: var(--lumin-price-font-weight, bold);
    color: var(--lumin-compare-price-color, #e74c3c);
    text-decoration: line-through;
    line-height: 1;
  }

  .variant-option__lumin-list-text {
    font-size: var(--lumin-list-text-size, 12px);
    color: var(--lumin-list-text-color, #666666);
    text-align: var(--text-alignment-list-text, left);
    margin-top: 8px;
    line-height: 1.3;
    text-wrap: auto;
  }
  .variant-option__button-label--lumin:has(:checked)  .variant-option__lumin-list-text {
    color: var(--lumin-list-text-color-checked);
  }

  .variant-option__lumin-bullet-point {
    margin-bottom: 4px;
    position: relative;
  }

  .variant-option__lumin-bullet-point:last-child {
    margin-bottom: 0;
  }

  /* Responsive adjustments for MS variant */
  @media screen and (max-width: 749px) {
    .variant-option--lumin {
      grid-template-columns: repeat(var(--lumin-columns-per-row-mobile, 2), 1fr);
      gap: var(--gap-sm);
    }
    .variant-option__lumin-list-text {
      font-size: var(--lumin-list-text-size-mobile, 12px);
    }
    .variant-option__button-label--lumin .variant-option__button-label__text {
      line-height: 1.2;
      font-size: var(--lumin-title-size-mobile, 1.1rem);
    }
  }

  @media screen and (min-width: 750px) and (max-width: 899px) {
    .variant-option--lumin {
      grid-template-columns: repeat(min(var(--lumin-columns-per-row, 3), 3), 1fr);
    }
    .variant-option__lumin-list-text {
      font-size: var(--lumin-list-text-size-mobile, 12px);
    }
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:video (INDEX:396) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:397) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */