/** Shopify CDN: Minification failed

Line 3403:2 Unexpected "{"
Line 3403:3 Expected identifier but found "%"
Line 3404:11 Expected identifier but found whitespace
Line 3404:12 Unexpected "\"Ver Todo\""
Line 3408:3 Expected identifier but found "%"
Line 4774:2 Unexpected "{"
Line 4774:3 Expected identifier but found "%"
Line 4775:15 Unexpected "\"A MAYOR CANTIDAD, MEJOR PRECIO. / PRECIOS MAYORISTAS\""
Line 4781:3 Expected identifier but found "%"
Line 4787:2 Unexpected "{"
... and 3 more hidden warnings

**/
/* START_SECTION:_blocks (INDEX:0) */
#header-group > .section-wrapper:has(.elrey-header-actions) .section-content-wrapper {
    flex-wrap: nowrap;
  }

  .elrey-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }

  @media screen and (max-width: 749px) {
    #header-group > .section-wrapper:has(.elrey-header-actions) .section-content-wrapper {
      display: grid;
      grid-template-areas:
        'logo actions'
        'search search';
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      width: 100%;
    }

    #header-group > .section-wrapper:has(.elrey-header-actions) .logo-block {
      grid-area: logo;
    }

    #header-group > .section-wrapper:has(.elrey-header-actions) [class^='ai-search-bar-'] {
      grid-area: search;
      min-width: 0;
    }

    #header-group > .section-wrapper:has(.elrey-header-actions) .elrey-header-actions {
      grid-area: actions;
      justify-self: end;
    }
  }

  /* El menú de colecciones vive nativo en header_section, con logo propio
     ya al lado (layout mobile de Horizon). En mobile no hace falta esta
     caja duplicada de logo+buscador de más arriba: la ocultamos para que
     el menú quede pegado al logo, como en la referencia de Coto. */
  @media screen and (max-width: 749px) {
    [id$='__17857268948fbba87b'] {
      display: none;
    }
  }
/* END_SECTION:_blocks */
/* START_SECTION:banner-carousel (INDEX:1) */
/* ============================================================
   BANNER CAROUSEL — SECTION
============================================================ */
.bnc-section {
  box-sizing: border-box;
  width: 100%;
}

/* ─── SLIDER ─────────────────────────────────────────────── */
.bnc-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Contenedor de consulta: permite que el contenido superpuesto
     escale en proporción al ancho real del banner (unidades cqw) */
  container-type: inline-size;
}

/* Altura fija: la imagen llena la caja y se recorta (object-fit: cover) */
.bnc-slider--fixed {
  height: var(--bnc-height, 400px);
}

/* Adaptar a la imagen: la altura sigue la proporción del slide activo */
.bnc-slider--adapt {
  aspect-ratio: var(--bnc-ratio, 2);
}

@media (max-width: 767px) {
  .bnc-slider--fixed {
    height: var(--bnc-mob-height, 280px);
  }

  .bnc-slider--adapt {
    aspect-ratio: var(--bnc-mob-ratio, 2);
  }
}

/* ─── SLIDES ─────────────────────────────────────────────── */
/* Todos los slides viven en position: absolute para no colapsar el slider */
.bnc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bnc-duration, 500ms) ease;
  pointer-events: none;
  z-index: 0;
}

.bnc-slide--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.bnc-slide-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  visibility: hidden;
}

.bnc-slide--active > .bnc-slide-link {
  visibility: visible;
}

.bnc-slide--linked .bnc-content { pointer-events: none; }
.bnc-slide--linked .bnc-btn { pointer-events: auto; }

/* ─── IMAGEN ─────────────────────────────────────────────── */
.bnc-picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.bnc-img {
  width: 100%;
  height: 100%;
  object-fit: var(--bnc-img-fit, contain);
  object-position: center;
  display: block;
}

.bnc-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bnc-video--mobile {
  display: none;
}

.bnc-placeholder {
  position: absolute;
  inset: 0;
  background: #e2e8f0;
}

/* ─── OVERLAY ────────────────────────────────────────────── */
.bnc-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ─── CONTENIDO ──────────────────────────────────────────── */
.bnc-content {
  position: absolute;
  z-index: 2;
  padding: 40px;
  padding: clamp(14px, 3cqw, 80px);
  /* Menos padding inferior: el contenido queda más pegado al borde de abajo,
     donde los artes suelen dejar espacio libre */
  padding-bottom: clamp(10px, 1.8cqw, 48px);
  max-width: 640px;
  /* Ancho suficiente para que los dos botones entren uno al lado del otro */
  max-width: min(720px, 75cqw);
  display: flex;
  flex-direction: column;
  gap: 16px;
  gap: clamp(8px, 1.2cqw, 20px);
  /* Ajuste fino: en cqw para que el desplazamiento escale con el banner
     y el contenido quede siempre en el mismo lugar relativo al arte */
  translate: var(--bnc-off-x, 0px) var(--bnc-off-y, 0px);
}

.bnc-content--top-left     { top: 0;    left: 0; }
.bnc-content--top-center   { top: 0;    left: 50%; transform: translateX(-50%); align-items: center; text-align: center; }
.bnc-content--top-right    { top: 0;    right: 0; align-items: flex-end; text-align: right; }
.bnc-content--middle-left  { top: 50%;  left: 0;  transform: translateY(-50%); }
.bnc-content--middle-center{ top: 50%;  left: 50%; transform: translate(-50%, -50%); align-items: center; text-align: center; }
.bnc-content--middle-right { top: 50%;  right: 0;  transform: translateY(-50%); align-items: flex-end; text-align: right; }
.bnc-content--bottom-left  { bottom: 0; left: 0; }
.bnc-content--bottom-center{ bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; text-align: center; }
.bnc-content--bottom-right { bottom: 0; right: 0;  align-items: flex-end; text-align: right; }

.bnc-heading {
  margin: 0;
  font-size: clamp(1.4rem, 3.5vw, 3rem);
  font-size: clamp(1.3rem, 3.5cqw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color: inherit;
}

.bnc-subheading {
  margin: 0;
  font-size: clamp(.9rem, 1.5vw, 1.2rem);
  font-size: clamp(.85rem, 1.5cqw, 1.2rem);
  line-height: 1.5;
  color: inherit;
  opacity: .9;
}

/* ─── BOTONES ────────────────────────────────────────────── */
.bnc-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  gap: clamp(8px, 1cqw, 14px);
}

.bnc-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  padding: clamp(6px, 0.9cqw, 24px) clamp(12px, 1.8cqw, 48px);
  border-radius: 6px;
  font-size: .95rem;
  font-size: clamp(.72rem, 1.15cqw, 1.85rem);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  border: 2px solid currentColor;
  white-space: nowrap;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.bnc-btn:hover  { opacity: .85; }
.bnc-btn:active { transform: scale(.97); }

/* ─── FLECHAS ────────────────────────────────────────────── */
.bnc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,.85);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .15s;
  color: #1e293b;
}
.bnc-arrow:hover   { background: #fff; transform: translateY(-50%) scale(1.08); }
.bnc-arrow--prev   { left: 16px; }
.bnc-arrow--next   { right: 16px; }

/* ─── DOTS ───────────────────────────────────────────────── */
.bnc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 4px;
}

.bnc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}
.bnc-dot--active {
  background: #1e293b;
  transform: scale(1.3);
}

/* ─── MOBILE ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .bnc-video--desktop {
    display: none;
  }

  .bnc-video--mobile {
    display: block;
  }

  .bnc-content {
    padding: 24px;
    max-width: calc(100% - 32px);
    width: auto;
    left: 16px !important;
    right: 16px !important;
    transform: none !important;
    /* En mobile el contenido ocupa todo el ancho: solo aplica el ajuste vertical */
    translate: 0px var(--bnc-off-y, 0px);
  }

  .bnc-content--top-center,
  .bnc-content--middle-center,
  .bnc-content--bottom-center {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .bnc-btns {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .bnc-btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    justify-content: center;
  }

  .bnc-arrow { width: 36px; height: 36px; }
  .bnc-arrow--prev { left: 8px; }
  .bnc-arrow--next { right: 8px; }
}
/* END_SECTION:banner-carousel */
/* START_SECTION:footer-utilities (INDEX:12) */
.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: 1fr auto 1fr;
      justify-content: center;
      gap: var(--gap);
      align-items: center;
      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;
    }
  }

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

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

    /* 2 blocks: Two equal columns, start and end aligned */
    .utilities--blocks-2 {
      grid-template-columns: 1fr 1fr;
    }

    .utilities--blocks-2 > *:nth-child(2) {
      justify-self: end;
      text-align: right;
    }

    /* 3 blocks: Three columns (1fr auto 1fr), start/center/end aligned */
    .utilities--blocks-3 {
      grid-template-columns: 1fr auto 1fr;
    }

    .utilities--blocks-3 > *:nth-child(2) {
      justify-self: center;
      text-align: center;
    }

    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */
/* START_SECTION:header-announcements (INDEX:14) */
.announcement-bar {
    --announcement-gutter: clamp(8px, 1vw, 16px);
    --announcement-gap: clamp(24px, 3vw, 48px);
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    margin-inline: var(--announcement-gutter);
  }

  .announcement-bar__viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .announcement-bar__track,
  .announcement-bar__sequence {
    min-width: 0;
  }

  .announcement-bar__slider .announcement-bar__slide {
    position: relative;
    width: auto;
    max-width: 100%;
    flex: none;
    --width: auto;
  }

  .announcement-bar__slider .announcement-bar__text {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  @media (prefers-reduced-motion: no-preference) {
    .announcement-bar__slider .announcement-bar__track,
    .announcement-bar__slider .announcement-bar__sequence {
      display: flex;
      width: max-content;
      max-width: none;
      align-items: center;
      direction: ltr;
    }

    .announcement-bar__slider .announcement-bar__sequence {
      gap: var(--announcement-gap);
      padding-inline-end: var(--announcement-gap);
    }

    .announcement-bar__slider .announcement-bar__slide,
    .announcement-bar__slider .announcement-bar__text {
      max-width: none;
      white-space: nowrap;
      text-wrap: nowrap;
      overflow-wrap: normal;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .announcement-bar__slider .announcement-bar__sequence {
      display: grid;
      gap: var(--announcement-gap);
    }

    .announcement-bar__slider .announcement-bar__text {
      white-space: normal;
      text-wrap: wrap;
    }

    .announcement-bar__sequence[aria-hidden='true'] {
      display: none;
    }
  }
/* END_SECTION:header-announcements */
/* START_SECTION:header (INDEX:15) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  /* Logo, buscador, cuenta y carrito de esta sección solo se ven en mobile,
     al lado del menú. En desktop siguen viviendo en la fila de arriba
     (sections/_blocks.liquid), así que acá se ocultan para no duplicarlos. */
  @media screen and (min-width: 750px) {
    #header-component header-actions,
    #header-component .header-logo,
    #header-component .search-action {
      display: none;
    }
  }

  .header {
    /* Set header paddings based on height setting */
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;

    display: block;
    contain: layout style;
    background: transparent;

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      /* reset style from base.css */
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  #header-component[data-catalogs-landing='true'] header-menu {
    display: none !important;
  }

  #header-component[data-catalogs-landing='true'] .header__navigation-bar-row {
    display: none !important;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  @media screen and (min-width: 1200px) {
    #header-component[data-menu-style='menu']
      .menu-list__list-item:not([slot='overflow']):not([slot='more'])
      > .menu-list__link
      > .menu-list__link-title {
      padding-inline: clamp(4px, 0.38vw, 8px);
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);

    --closed-underlay-height: 0px;

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

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

    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__link:not([aria-haspopup]):hover) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --closed-underlay-height: 100%;
    }

    /** For transparent header, apply inherit to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) .header__row {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }

    /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-color-scheme='top']:hover .header__row--top,
  [data-transparent-color-scheme='top']:focus-within .header__row--top,
  [data-transparent-color-scheme='both']:hover .header__row--top,
  [data-transparent-color-scheme='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When bottom row has transparent background, make it inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover .header__row--bottom,
  [data-transparent-color-scheme='bottom']:focus-within .header__row--bottom,
  [data-transparent-color-scheme='both']:hover .header__row--bottom,
  [data-transparent-color-scheme='both']:focus-within .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

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

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

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

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

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

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

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

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

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

  /* ================================
     * Underlays
     * ================================ */
  .header__underlay {
    position: absolute;
    inset: 0;
  }

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    /* header-height is updated via js, the transition works automagically */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* When top row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='top']:hover,
  [data-transparent-color-scheme='top']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover,
  [data-transparent-color-scheme='bottom']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-scheme-top-row) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

    .header__row--bottom {
      z-index: var(--layer-lowest);
    }
  }

  /* End Underlays ================ */

  .header__row {
    /* The account component uses a different color scheme, but we need to override it to inherit the color of the header row */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite color from color scheme, background is controlled by the underlays */
    background-color: transparent;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--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-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
  }

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

    @media screen and (min-width: 990px) {
      &:has(.header__column--center .header-menu) {
        --header-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: 'center right';
      }

      .header__column--center:has(.header-menu) {
        width: 100%;
        min-width: 0;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

  /* not ideal but we need to duplicate these styles for when touch comes into play
    We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);

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

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

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

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

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

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

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

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

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

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

    &:hover {
      --button-color: var(--color-foreground);
    }
  }

  .header-actions__action:not(.account-button) .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

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

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

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

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

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

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

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

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

  /* 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-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 and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .svg-wrapper.icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }
/* END_SECTION:header */
/* START_SECTION:revista (INDEX:41) */
.rv-vacio {
    padding: 40px;
    text-align: center;
    background: #f1f5f9;
    color: #64748b;
  }
  .rv-vacio__img {
    display: block;
    margin: 0 auto 16px;
    max-width: min(100%, 560px);
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  }

  /* ── Escenario: fondo gris como el visor de Heyzine ── */
  .rv-wrap {
    /* Señal para la pantalla de carga: si se lee, este CSS ya se aplicó. */
    --rv-estilos: 1;
    --rv-alto: calc(100vh - 190px);
    max-width: 1600px;
    margin-inline: auto;
    padding: 14px 16px 18px;
    background: #e5e7eb;
  }
  /* Sin el encabezado del sitio sobra alto: las hojas crecen. */
  .rv-wrap--sola {
    --rv-alto: calc(100vh - 110px);
    min-height: 100vh;
  }
  .rv-barra__info {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .rv-volver {
    display: block;
    flex-shrink: 0;
    font-weight: 700;
    color: #111827;
    text-decoration: none;
  }
  .rv-volver img { display: block; height: 58px; width: auto; }
  .rv-volver:hover { opacity: 0.8; }
  @media (max-width: 1023px) {
    .rv-volver img { height: 44px; }
  }
  .rv-wrap:fullscreen {
    --rv-alto: calc(100vh - 90px);
    max-width: none;
    overflow-y: auto;
  }

  .rv-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .rv-barra__info strong {
    display: block;
    font-size: 18px;
    color: #111827;
  }
  .rv-barra__info span {
    display: block;
    font-size: 13px;
    color: #6b7280;
  }
  .rv-barra__nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }
  .rv-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
    color: #111827;
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
  }
  .rv-btn:hover { background: #f3f4f6; }
  .rv-btn[disabled] { opacity: 0.25; cursor: default; background: none; }
  .rv-btn--chico { font-size: 18px; }
  .rv-carrito {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    margin-left: 4px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #D5131A;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
  }
  .rv-carrito:hover { background: #A80F15; }
  .rv-carrito__n {
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding-inline: 5px;
    font-size: 12px;
    color: #7f1d1d;
    background: #FFE824;
    border-radius: 99px;
  }
  .rv-carrito__n[hidden] { display: none; }
  .rv-pager {
    min-width: 76px;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: #374151;
  }

  .rv-indice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }
  .rv-indice[hidden] { display: none; }
  .rv-indice__item {
    padding: 7px 14px;
    font-size: 13px;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 99px;
    cursor: pointer;
  }
  .rv-indice__item:hover { border-color: #111827; }
  /* Catálogos: renglón propio, cada uno con el color de su banderín. */
  .rv-indice__catalogos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
  }
  .rv-indice__titulo { width: 100%; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; }
  a.rv-indice__item { text-decoration: none; }
  .rv-indice__item--catalogo { color: #fff; background: var(--bd-color); border-color: var(--bd-color); font-weight: 700; }
  @media (min-width: 1280px) { .rv-indice__catalogos { display: none; } }

  /* ── Buscador en la franja amarilla de cada hoja ── */
  .rv-cinta.rv-cinta--buscar {
    position: relative;
    z-index: 40; /* la lista de resultados va por encima de las tarjetas */
    background: #000; /* franja negra (pedido del usuario); el campo sigue blanco */
    border-bottom-color: #000;
    display: flex;
    align-items: center;
    gap: 0.8cqw;
    padding: 0.7cqw 1.4cqw;
    overflow: visible;
    text-transform: none;
  }
  .rv-buscar__lupa { flex: none; width: clamp(14px, 2.4cqw, 20px); height: auto; color: #fff; }
  .rv-buscar__input {
    flex: 1;
    min-width: 0;
    height: clamp(26px, 4.4cqw, 34px);
    padding: 0 10px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    background: #fff !important; /* el tema pinta los inputs */
    border: 1px solid #111827;
    border-radius: 99px;
  }
  .rv-buscar__input::placeholder { color: #9ca3af; font-weight: 500; }
  .rv-buscar__input:focus { outline: 2px solid #D5131A; outline-offset: 1px; }
  .rv-buscar__res {
    position: absolute;
    top: 100%;
    left: 1.4cqw;
    right: 1.4cqw;
    z-index: 30;
    max-height: 320px;
    margin: 4px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  }
  .rv-buscar__res:empty { display: none; }
  .rv-buscar__res button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: #111827;
    background: none;
    border: 0;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
  }
  .rv-buscar__res button:hover, .rv-buscar__res button:focus { background: #f9fafb; }
  .rv-buscar__res small { flex: none; font-size: 12px; font-weight: 500; color: #6b7280; }
  .rv-buscar__nada { padding: 10px 14px; font-size: 14px; font-weight: 500; color: #6b7280; }
  /* Buscador de la barra: reemplaza al de cada hoja (compu 28-oct, celular después). */
  .rv-cinta.rv-cinta--buscar { display: none; }
  .rv-buscar--barra {
    position: relative;
    z-index: 40;
    flex: 1 1 320px;
    max-width: 520px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }
  .rv-buscar--barra .rv-buscar__lupa { width: 20px; color: #6b7280; }
  .rv-buscar--barra .rv-buscar__input { height: 38px; border-color: #d1d5db; }
  .rv-buscar--barra .rv-buscar__res { left: 0; right: 0; }
  /* Celular: renglón propio entre el título y los controles. Como la barra queda
     fija arriba (top -58px = solo se va el título), el buscador queda siempre a mano. */
  @media (max-width: 1023px) {
    .rv-buscar--barra { flex-basis: 100%; max-width: none; box-sizing: border-box; padding: 4px 6px 4px 10px; }
    .rv-buscar--barra .rv-buscar__input { height: 34px; }
    .rv-buscar--barra .rv-buscar__res { max-height: 50svh; }
  }
  /* La tarjeta encontrada titila un momento para que el ojo la ubique. */
  .rv-hallado { animation: rv-hallado 0.6s ease-in-out 3; border-radius: 10px; }
  @keyframes rv-hallado {
    50% { box-shadow: 0 0 0 4px #FFE824, 0 0 0 7px #111827; }
  }

  /* ── El libro: páginas A4 lado a lado ── */
  .rv-libro {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    perspective: 2200px;
  }

  .rv-pag {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
  }
  .rv-pag[hidden] { display: none; }

  /* Pantalla grande: hoja A4 de alto fijo, lo más grande que entre en la
     ventana sin scroll. Dos lado a lado forman el libro abierto. */
  @media (min-width: 1024px) {
    .rv-pag {
      width: min(calc((100% - 2px) / 2), calc(var(--rv-alto) / 1.4142));
      aspect-ratio: 1 / 1.4142;
    }
    /* El lomo: sombra hacia adentro en el borde que toca a la otra página. */
    .rv-pag.is-izq { box-shadow: inset -18px 0 22px -18px rgba(0, 0, 0, 0.35), 0 6px 24px rgba(0, 0, 0, 0.18); }
    .rv-pag.is-der { box-shadow: inset 18px 0 22px -18px rgba(0, 0, 0, 0.35), 0 6px 24px rgba(0, 0, 0, 0.18); }
  }

  /* Pasar la hoja: la página nueva entra girando desde el lomo. */
  [data-rv-dir] .rv-pag.is-izq { transform-origin: right center; }
  [data-rv-dir] .rv-pag.is-der,
  [data-rv-dir] .rv-pag.is-sola { transform-origin: left center; }
  [data-rv-dir='next'] .rv-pag.is-der,
  [data-rv-dir='next'] .rv-pag.is-sola { animation: rv-flip-in-der 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  [data-rv-dir='next'] .rv-pag.is-izq { animation: rv-fade 0.5s ease; }
  [data-rv-dir='prev'] .rv-pag.is-izq { animation: rv-flip-in-izq 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  [data-rv-dir='prev'] .rv-pag.is-der,
  [data-rv-dir='prev'] .rv-pag.is-sola { animation: rv-fade 0.5s ease; }
  @keyframes rv-flip-in-der {
    from { transform: rotateY(-80deg); opacity: 0.3; }
    to   { transform: none; opacity: 1; }
  }
  @keyframes rv-flip-in-izq {
    from { transform: rotateY(80deg); opacity: 0.3; }
    to   { transform: none; opacity: 1; }
  }
  @keyframes rv-fade {
    from { opacity: 0.4; }
    to   { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-rv-dir] .rv-pag { animation: none !important; }
  }

  /* ── Tapa ── */
  .rv-pag--tapa { background: #111827; }
  .rv-tapa {
    position: relative;
    flex: 1;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .rv-tapa img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .rv-pag--contratapa { background: #111827; }
  .rv-tapa--contra { cursor: default; }

  /* ── Portada automática (imita la tapa del PDF) ── */
  /* ── Portada "Ofertas picantes" (boceto de noviembre, 25-sep-2026) ── */
  /* La fuente Krobold se declara en un <style> inline arriba (acá no hay
     Liquid para el asset_url). */
  .rv-pag--picante { background: #D5131A; }
  .rvp {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #D5131A;
    color: #fff;
    font-family: 'Montserrat', 'Arial Black', Arial, sans-serif;
  }
  .rvp__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3cqw;
    padding: 2.5cqw 5cqw;
    background: #000;
  }
  .rvp__especiales {
    font-size: clamp(14px, 5.6cqw, 40px);
    font-weight: 800;
    letter-spacing: 0.02em;
  }
  .rvp__logo { width: clamp(44px, 13cqw, 110px); height: auto; }
  .rvp__rojo {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5cqw 5cqw 2cqw;
  }
  .rvp__fechas {
    align-self: flex-end;
    padding: 0.6cqw 1.6cqw;
    font-size: clamp(8px, 2.2cqw, 16px);
    font-weight: 700;
    background: #000;
  }
  .rvp__mes {
    margin: 0.5cqw 0 0;
    font-family: 'Krobold Rounded', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(34px, 15cqw, 130px);
    line-height: 0.95;
    text-align: center;
    color: #fff;
    white-space: nowrap;
  }
  .rvp__aji {
    width: 92%;
    height: auto;
    min-height: 0;
    margin: -1cqw 0 1cqw;
    object-fit: contain;
    flex: 0 1 auto;
  }
  .rvp__prods {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4cqw;
    margin-top: auto;
  }
  .rvp__prods { overflow: hidden; }
  .rvp__card {
    display: none;
    align-items: center;
    gap: 1.5cqw;
    min-width: 0;
    overflow: hidden;
    padding: 2cqw;
    color: #111;
    background: #fff;
    border-radius: 2cqw;
  }
  /* La foto con alto propio: las de producto traen aire alrededor y a lo
     ancho quedaban diminutas. */
  .rvp__card.is-visible {
    display: flex;
    animation: rv-gancho-in 0.7s cubic-bezier(0.22, 0.8, 0.25, 1) both;
  }
  .rvp__card.is-visible + .rvp__card.is-visible { animation-delay: 0.12s; }
  @media (prefers-reduced-motion: reduce) {
    .rvp__card.is-visible { animation: none; }
  }
  /* La mitad de la tarjeta y todo su alto, y un zoom que se come el margen
     blanco que traen las fotos de producto (en el boceto van recortadas al
     ras). La tarjeta recorta lo que sobra. */
  .rvp__foto {
    width: 46%;
    align-self: stretch;
    height: auto;
    min-height: clamp(90px, 32cqw, 280px);
    object-fit: contain;
    flex: none;
    transform: scale(1.18);
  }
  .rvp__datos {
    /* Por encima de la foto: con el zoom, la foto invade un poco su lado. */
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4cqw;
  }
  .rvp__nombre {
    max-width: 100%;
    font-size: clamp(7px, 1.9cqw, 15px);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rvp__cod {
    font-size: clamp(8px, 2.2cqw, 16px);
    font-weight: 700;
    font-style: italic;
  }
  .rvp__precio {
    margin-top: 1cqw;
    font-size: clamp(16px, 5.6cqw, 46px);
    font-weight: 900;
    white-space: nowrap;
    line-height: 1;
    color: #D5131A;
  }
  .rvp__precio small { font-size: 0.45em; vertical-align: 0.9em; }
  .rvp__precio small:last-child { font-size: 0.3em; vertical-align: 0.6em; margin-left: 1px; }
  .rvp__bulto { font-size: clamp(6px, 1.4cqw, 11px); font-weight: 800; }
  .rvp__lista { font-size: clamp(6px, 1.4cqw, 11px); font-weight: 700; color: #6b7280; }
  .rvp__validez {
    margin: 2.5cqw 0 0;
    font-size: clamp(7px, 1.6cqw, 12px);
    font-weight: 800;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
  }
  .rvp__web {
    margin: 0.5cqw 0 0;
    text-transform: uppercase;
    font-size: clamp(14px, 4.4cqw, 34px);
    font-weight: 900;
    letter-spacing: 0.02em;
  }
  .rvp__cta {
    margin-top: 1.5cqw;
    padding: 1cqw 3cqw;
    font-size: clamp(10px, 2cqw, 14px);
    font-weight: 700;
    color: #111;
    background: #fff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }
  .rv-pag--picante .rv-pag__pie { background: #000; }

  .rv-portada {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #111827;
  }
  .rv-portada__top {
    padding: 1.4cqw 3cqw;
    font-family: Impact, 'Arial Narrow Bold', 'Arial Black', sans-serif;
    font-size: clamp(16px, 5.4cqw, 44px);
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    background: #D5131A;
  }
  /* Marco de rayas de obra, amarillo y negro. */
  .rv-portada__marco {
    flex: 1;
    min-height: 0;
    display: flex;
    padding: 0 4.5cqw;
    background: repeating-linear-gradient(135deg, #FFE824 0 3cqw, #111827 3cqw 6cqw);
  }
  .rv-portada__rojo {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2cqw;
    padding: 3cqw 3cqw 2.5cqw;
    text-align: center;
    color: #fff;
    background-color: #D5131A;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='56' viewBox='0 0 64 56'%3E%3Cpath d='M14 40 L10 18 Q22 30 32 12 Q42 30 54 18 L50 40 Q32 34 14 40 Z' fill='none' stroke='%237f1d1d' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='16' r='3.5' fill='%237f1d1d'/%3E%3Ccircle cx='32' cy='10' r='3.5' fill='%237f1d1d'/%3E%3Ccircle cx='54' cy='16' r='3.5' fill='%237f1d1d'/%3E%3C/svg%3E"), radial-gradient(circle at 50% 30%, #ef4444, #991b1b 70%);
    background-size: 9cqw auto, cover;
  }
  .rv-portada__corona {
    position: absolute;
    top: 2.5cqw;
    right: 2cqw;
    width: 24cqw;
    transform: rotate(14deg);
    filter: drop-shadow(0 1cqw 0 #7f1d1d);
  }
  .rv-portada__kicker,
  .rv-portada__marca,
  .rv-portada__sub {
    margin: 0;
    font-family: Impact, 'Arial Narrow Bold', 'Arial Black', sans-serif;
    text-transform: uppercase;
    line-height: 1;
  }
  .rv-portada__kicker {
    align-self: flex-start;
    margin-left: 12cqw;
    font-size: clamp(22px, 8.5cqw, 72px);
    text-shadow: 0 0.6cqw 0 #7f1d1d;
  }
  .rv-portada__marca {
    align-self: flex-start;
    margin-left: 8cqw;
    padding: 1cqw 3.5cqw;
    font-size: clamp(14px, 4.6cqw, 38px);
    background: #111827;
  }
  .rv-portada__titulo {
    margin: 1cqw 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Impact, 'Arial Narrow Bold', 'Arial Black', sans-serif;
    font-weight: 400;
    line-height: 0.92;
    text-transform: uppercase;
  }
  /* Amarillo con degradé y relieve: el texto se pinta con el fondo y la
     sombra en capas hace el 3D. */
  .rv-portada__t1,
  .rv-portada__t2 {
    background: linear-gradient(180deg, #fef08a 0%, #FFE824 45%, #eab308 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0.5cqw 0 #92400e) drop-shadow(0 1.2cqw 1cqw rgba(0, 0, 0, 0.45));
  }
  .rv-portada__t1 { font-size: clamp(48px, 19cqw, 170px); }
  .rv-portada__t2 { font-size: clamp(26px, 10cqw, 88px); }
  .rv-portada__sub {
    font-size: clamp(16px, 6cqw, 50px);
    letter-spacing: 0.04em;
    text-shadow: 0 0.5cqw 0 #7f1d1d;
  }
  /* Franja del 5%: torcida y más ancha que el marco (tapa las rayas). */
  .rv-portada__off {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5cqw;
    width: calc(100% + 10cqw);
    margin: 1.5cqw -5cqw;
    padding: 1.2cqw 3cqw;
    background: #FFE824;
    transform: rotate(-2.5deg);
    box-shadow: 0 1cqw 1.5cqw rgba(0, 0, 0, 0.35);
  }
  .rv-portada__off strong {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: clamp(24px, 10cqw, 84px);
    font-weight: 400;
    line-height: 0.9;
    color: #D5131A;
    -webkit-text-stroke: 0.4cqw #7f1d1d;
    white-space: nowrap;
  }
  .rv-portada__off span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: Impact, 'Arial Narrow Bold', 'Arial Black', sans-serif;
    font-size: clamp(11px, 3.1cqw, 26px);
    line-height: 1.05;
    text-align: left;
    color: #111827;
  }
  .rv-portada__off small {
    align-self: flex-end;
    font-size: 0.5em;
  }
  /* Los dos productos gancho, con la etiqueta de precio del PDF. */
  .rv-portada__productos {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4cqw;
    padding-top: 1cqw;
  }
  .rv-portada__prod {
    position: relative;
    min-height: 0;
    display: none;
    flex-direction: column;
    padding: 2cqw;
    text-decoration: none;
    color: #fff;
    background: rgba(127, 29, 29, 0.55);
    border: 0.5cqw dashed #FFE824;
    border-radius: 2.5cqw;
  }
  /* Solo el par que toca se ve; entra DESLIZÁNDOSE desde la derecha (pedido
     del usuario, 24-sep), el segundo un poquito después que el primero. El
     contenedor recorta para que no se vea pasar por encima del marco. */
  .rv-portada__productos { overflow: hidden; }
  .rv-portada__prod.is-visible {
    display: flex;
    animation: rv-gancho-in 0.7s cubic-bezier(0.22, 0.8, 0.25, 1) both;
  }
  .rv-portada__prod.is-visible + .rv-portada__prod.is-visible { animation-delay: 0.12s; }
  @keyframes rv-gancho-in {
    from { opacity: 0; transform: translateX(60cqw); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rv-portada__prod.is-visible { animation: none; }
  }
  .rv-portada__prod-nombre {
    font-family: Impact, 'Arial Narrow Bold', 'Arial Black', sans-serif;
    font-size: clamp(10px, 2.4cqw, 20px);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rv-portada__prod img {
    flex: 1;
    min-height: 0;
    width: 70%;
    object-fit: contain;
    margin: 1cqw 0;
    align-self: flex-start;
  }
  /* Etiqueta de precio: chica y en la esquina de abajo a la derecha, para que
     la foto (a la izquierda) se vea entera. Con el tamaño anterior tapaba el
     producto (captura del usuario, 24-sep). */
  .rv-portada__etiqueta {
    position: absolute;
    right: 1.2cqw;
    bottom: 4.5cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.8cqw 1.4cqw 2.4cqw;
    color: #111827;
    background: #FFE824;
    border-radius: 1.5cqw;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  }
  .rv-portada__flecha {
    position: absolute;
    top: -0.6cqw;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.6cqw;
    height: 3.6cqw;
    display: grid;
    place-items: center;
    font-size: clamp(8px, 2.2cqw, 18px);
    font-weight: 900;
    color: #D5131A;
    background: #FFE824;
    border: 0.4cqw solid #D5131A;
    border-radius: 50%;
  }
  .rv-portada__precio {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: clamp(15px, 4.6cqw, 40px);
    line-height: 1;
  }
  .rv-portada__precio small { font-size: 0.45em; }
  .rv-portada__bto {
    font-family: Impact, 'Arial Narrow Bold', sans-serif;
    font-size: clamp(7px, 1.5cqw, 13px);
  }
  .rv-portada__prod-nota {
    font-size: clamp(7px, 1.7cqw, 13px);
    font-weight: 800;
    text-align: left;
  }
  .rv-portada__vig {
    margin: 0;
    font-size: clamp(8px, 1.6cqw, 13px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fde68a;
  }
  .rv-portada__cta {
    padding: 1.2cqw 5cqw;
    font-size: clamp(12px, 2.6cqw, 20px);
    font-weight: 800;
    color: #7f1d1d;
    background: #FFE824;
    border: 0;
    border-radius: 99px;
    box-shadow: 0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.35);
    cursor: pointer;
  }
  .rv-portada__cta:hover { background: #fde047; }
  @media (max-width: 1023px) {
    .rv-portada__rojo { gap: 8px; padding: 18px 10px 14px; }
    .rv-portada__productos { min-height: 220px; }
    .rv-portada__prod img { min-height: 120px; }
  }

  /* ── Encabezado de página ── */
  /* Fondo negro y letras blancas en Montserrat (diseño de noviembre,
     28-sep-2026). Antes: degradé crema con texto oscuro. */
  .rv-pag__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 1.2cqw 2.5cqw;
    background: #000;
    font-family: 'Montserrat', 'Arial Black', Arial, sans-serif;
  }
  .rv-pag__seccion {
    font-size: clamp(12px, 2.6cqw, 20px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
  }
  .rv-pag__vig {
    font-size: clamp(8px, 1.3cqw, 11px);
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    text-align: right;
  }
  .rv-pag__banner { display: block; width: 100%; height: auto; }
  .rv-pag__banner-pic { display: block; }
  .rv-pag__banner--texto {
    display: flex;
    align-items: center;
    gap: 2cqw;
    padding: 2.4cqw 3cqw;
    font-family: Impact, 'Arial Narrow Bold', 'Arial Black', sans-serif;
    font-size: clamp(20px, 5.6cqw, 46px);
    line-height: 1;
    text-transform: uppercase;
    color: #FFE824;
    background: linear-gradient(120deg, #7f1d1d, var(--rv-acento, #D5131A));
  }
  .rv-pag__logo {
    display: block;
    height: clamp(40px, 10cqw, 84px);
    width: auto;
    flex-shrink: 0;
  }

  /* Cinta de frases: amarilla, corre de derecha a izquierda. Colores y letra
     del diseño de noviembre (28-sep-2026), Montserrat Bold; colores del kit
     de marca del 1-oct-2026 (#FFE824 / #D5131A). Antes: #facc15 con Impact
     bordó. */
  .rv-cinta {
    overflow: hidden;
    background: #FFE824;
    color: #D5131A;
    font-family: 'Montserrat', 'Arial Black', Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(11px, 1.9cqw, 16px);
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid #111827;
  }
  .rv-cinta__track {
    display: inline-flex;
    padding-block: 0.6cqw;
    animation: rv-cinta 26s linear infinite;
  }
  @keyframes rv-cinta {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .rv-cinta__track { animation: none; }
  }

  /* ── Grilla: siempre dos filas que se reparten el alto de la hoja ── */
  .rv-pag__grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(var(--rv-cols, 3), minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 2cqw;
    margin: 0;
    padding: 2.5cqw;
    list-style: none;
  }
  /* Hoja de 5 (la izquierda): grilla de 6 columnas; cada tarjeta ocupa 2 y las
     dos primeras 3 (las grandes, arriba). Filas parejas, como el boceto. */
  .rv-pag--mixta .rv-pag__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rv-pag--mixta .rv-pag__grid > * { grid-column: span 2; }
  .rv-pag--mixta .rv-pag__grid > :nth-child(-n + 2) { grid-column: span 3; }
  /* En las grandes crece SOLO la foto: todo va en cqw (el ancho de la
     tarjeta), así que texto, bandera y botones crecían ×1,5 y le comían el
     alto. zoom .85 los acerca a las chicas (2/3 quedaba más chico que ellas,
     que tienen sus propios mínimos en px); la bandera se estira a lo
     ancho con su alto de tarjeta chica. #id + clases: le gana a la tarjeta. */
  @media (min-width: 1024px) {
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .wsl-item:nth-child(-n + 2) .wsl-info,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .rvm:nth-child(-n + 2) .wsl-info,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .wsl-item:nth-child(-n + 2) .wsl-prices,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .rvm:nth-child(-n + 2) .wsl-prices,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .wsl-item:nth-child(-n + 2) .wsl-actions,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .rvm:nth-child(-n + 2) .wsl-actions { zoom: 0.85; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .wsl-item--destacado:nth-child(-n + 2) .wsl-img-wrap::before,
    /* La tapa de un madre: su tarjeta va adentro del <li class="rvm">, no es hija directa (13-oct-2026). */
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .rvm:nth-child(-n + 2) .wsl-item--destacado .wsl-img-wrap::before {
      height: calc(100cqw * 265 / 720 * 2 / 3);
      /* Sin estirar el ají: la imagen va en su proporción, centrada, sobre una
         V amarilla en CSS a todo el ancho (el amarillo y el 47% de los costados
         salen del archivo, 720×265). Su propia V queda adentro de la de CSS. */
      background: var(--rv-bandera) center top / auto 100% no-repeat, #FDE624;
      clip-path: polygon(0 0, 100% 0, 100% 47%, 50% 100%, 0 47%);
    }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .wsl-item--destacado:nth-child(-n + 2) .wsl-img,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .rvm:nth-child(-n + 2) .wsl-item--destacado .wsl-img {
      inset: calc(34cqw * 2 / 3) 0 auto 0;
      height: calc(100% - 34cqw * 2 / 3);
    }
  }

  /* HOJAS CON 4 O MENOS (el final de una sección, 8-oct-2026): tarjetas
     GRANDES de a dos por fila, como las dos de arriba de la mixta. 4 = 2×2;
     3 = dos arriba y una centrada abajo; 2 y 1 = una sola fila. Solo
     desktop: en el celular la grilla ya va de a 2 con scroll. */
  @media (min-width: 1024px) {
    .rv-pag--grandes .rv-pag__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rv-pag--grandes .rv-pag__grid > * { grid-column: span 2; }
    .rv-pag--n3 .rv-pag__grid > :nth-child(3),
    .rv-pag--n1 .rv-pag__grid > * { grid-column: 2 / span 2; }
    .rv-pag--grandes #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .wsl-item .wsl-info,
    .rv-pag--grandes #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .wsl-item .wsl-prices,
    .rv-pag--grandes #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .wsl-item .wsl-actions,
    .rv-pag--grandes #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .rvm .wsl-info,
    .rv-pag--grandes #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .rvm .wsl-prices,
    .rv-pag--grandes #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid > .rvm .wsl-actions { zoom: 0.85; }
    /* El ají en su proporción sobre la V amarilla (mismo arreglo que las
       grandes de la mixta), también en la tapa de un madre. */
    .rv-pag--grandes #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid .wsl-item--destacado .wsl-img-wrap::before {
      height: calc(100cqw * 265 / 720 * 2 / 3);
      background: var(--rv-bandera) center top / auto 100% no-repeat, #FDE624;
      clip-path: polygon(0 0, 100% 0, 100% 47%, 50% 100%, 0 47%);
    }
    .rv-pag--grandes #wholesale-product-container.view-grid.rv-tienda .rv-pag__grid .wsl-item--destacado .wsl-img {
      inset: calc(34cqw * 2 / 3) 0 auto 0;
      height: calc(100% - 34cqw * 2 / 3);
    }
  }

  /* Banner de relleno: toda la fila de abajo de la última hoja de la sección. */
  .rv-pag .rv-pag__grid > .rv-relleno { grid-column: 1 / -1; min-height: 0; } /* le gana a span 2 de las grandes */
  /* contain: el banner entero, sin recortar (la fila no tiene su misma proporción). */
  .rv-relleno { display: flex; align-items: center; justify-content: center; }
  .rv-relleno img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
  /* Rellenos del pool: ocupan los lugares que sobran (ancho = fila, mediano = 2, chico = 1). */
  .rv-pag .rv-pag__grid > .rv-relleno--mediano { grid-column: span 2; }
  .rv-pag .rv-pag__grid > .rv-relleno--chico { grid-column: span 1; }
  /* Mismo alto que las tarjetas: la imagen llena el lugar SIN deformarse
     (cover recorta parejo los costados, ~2-5%: el lugar es apenas más alto). */
  .rv-pag .rv-pag__grid > .rv-relleno--ancho,
  .rv-pag .rv-pag__grid > .rv-relleno--mediano,
  .rv-pag .rv-pag__grid > .rv-relleno--chico { align-self: stretch; overflow: hidden; border-radius: 10px; }
  .rv-relleno--ancho img,
  .rv-relleno--mediano img,
  .rv-relleno--chico img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; }
  /* En el celular la hoja es una lista de a 2 que se scrollea: no quedan huecos que tapar. */
  @media (max-width: 1023px) {
    .rv-pag .rv-pag__grid > .rv-relleno--ancho,
    .rv-pag .rv-pag__grid > .rv-relleno--mediano,
    .rv-pag .rv-pag__grid > .rv-relleno--chico { display: none; }
  }

  /* ── Pie de contacto ── */
  .rv-pag__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 4px 12px;
    padding: 1.4cqw 2cqw;
    font-size: clamp(10px, 1.6cqw, 14px);
    color: #fff;
    background: #111827;
  }
  .rv-pag__pie a { color: inherit; text-decoration: none; }
  .rv-pag__pie a:hover { text-decoration: underline; }
  .rv-pag__pie span[aria-hidden],
  .rv-pag__pie a > span[aria-hidden] { margin-right: 5px; color: #FFE824; }

  /* ── Tarjeta impresa (snippets/revista-card) ──
     Colores: rojo #D5131A y amarillo #FFE824 (kit de marca 1-oct-2026; antes #E1273F / #facc15). La común (sin oferta) va
     en azul, para que la oferta se distinga de un vistazo como en la tienda. */
  .rvc {
    --rvc-color: #1e3a8a;
    --rvc-texto: #fff;
    container-type: inline-size;
    min-height: 0;
    position: relative;
  }
  .rvc--destacado { --rvc-color: #D5131A; --rvc-texto: #FFE824; }
  .rvc__form {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 3px solid var(--rvc-color);
    border-radius: 12px;
  }
  .rvc__sello {
    display: grid;
    place-items: center;
    padding: 1.5cqw;
    background: #FFE824;
  }
  .rvc__sello img { display: block; height: clamp(20px, 17cqw, 44px); width: auto; }
  .rvc__franja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5cqw;
    padding: 2.5cqw 4cqw 6cqw;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--rvc-color);
    /* La punta de galón de la gráfica impresa. */
    clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  }
  .rvc__nombre {
    font-family: Impact, 'Arial Narrow Bold', 'Arial Black', sans-serif;
    font-size: clamp(10px, 7cqw, 15px);
    line-height: 1.1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rvc__precio {
    font-family: Impact, 'Arial Narrow Bold', 'Arial Black', sans-serif;
    font-size: clamp(22px, 19cqw, 48px);
    line-height: 1;
    color: var(--rvc-texto);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  }
  .rvc__signo { font-size: 0.55em; vertical-align: 0.6em; }
  .rvc__cu { font-size: 0.35em; margin-left: 2px; }
  .rvc__bulto {
    font-size: clamp(9px, 5cqw, 12px);
    font-weight: 700;
    color: var(--rvc-texto);
  }
  .rvc__foto {
    position: relative;
    flex: 1;
    min-height: 40px;
    display: grid;
    place-items: center;
    padding: 2cqw 4cqw;
  }
  .rvc__foto img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    position: absolute;
    inset: 2cqw 4cqw;
    margin: auto;
  }
  .rvc__off {
    position: absolute;
    top: 2cqw;
    left: 3cqw;
    z-index: 1;
    padding: 2px 6px;
    font-size: clamp(9px, 5cqw, 12px);
    font-weight: 800;
    color: #fff;
    background: var(--rvc-color, #D5131A);
    border-radius: 6px;
  }
  .rvc__nota {
    margin: 0;
    padding: 0 2cqw 1.5cqw;
    font-size: clamp(7px, 3.9cqw, 10px);
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #111827;
  }
  /* El estilo compartido de la tienda (wsl-catalogo-styles) se imprime DESPUÉS
     de este bloque y le pone al botón min-height 38px, padding y wrap a las
     acciones: a igual especificidad ganaba él y el "Agregar" salía corrido y
     cortado. Por eso estas reglas llevan `.rvc .rvc__acciones` adelante. */
  .rvc .rvc__acciones {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 2.5cqw;
    margin: 0;
    padding: 0 3cqw 3cqw;
    flex-shrink: 0;
  }
  .rvc .rvc__acciones > :only-child { grid-column: 1 / -1; }
  .rvc .rvc__acciones .rvc__spinner {
    min-width: 0;
    display: flex;
    align-items: center;
    height: clamp(26px, 16cqw, 32px);
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
  }
  .rvc__spinner .wsl-spinner__btn {
    width: clamp(20px, 13cqw, 30px);
    height: 100%;
    border: 0;
    background: #f3f4f6;
    font-size: 16px;
    cursor: pointer;
  }
  .rvc__spinner .wsl-spinner__input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    border: 0;
    text-align: center;
    font-size: clamp(11px, 6cqw, 14px);
    -moz-appearance: textfield;
  }
  .rvc__spinner .wsl-spinner__input::-webkit-inner-spin-button,
  .rvc__spinner .wsl-spinner__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .rvc .rvc__acciones .rvc__agregar {
    min-width: 0;
    min-height: 0;
    height: clamp(26px, 16cqw, 32px);
    margin: 0;
    padding: 0 4px;
    gap: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(10px, 6cqw, 13px);
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    background: #111827;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .rvc .rvc__acciones .rvc__agregar[disabled] { background: #9ca3af; cursor: default; }
  .rvc__warn {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -2px;
    margin: 0;
    font-size: 10px;
    color: #b45309;
    text-align: center;
  }
  .rvc--agotado .rvc__foto img { opacity: 0.45; }

  /* ── Tarjeta de la TIENDA en la hoja (a prueba, 25-sep-2026) ──
     El contenedor ocupa el alto libre de la hoja y la grilla sigue siendo la
     de la revista (dos filas); la tarjeta, la de wsl-catalogo-styles. */
  .rv-tienda {
    /* Sin rojo propio: desde el kit de marca del 1-oct-2026 la revista usa
       el mismo --wsl-rojo (#D5131A) que la tienda. Antes pisaba con #E1273F. */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .rv-tienda > .rv-pag__grid { flex: 1; }
  .rv-tienda .rv-pag__grid > li,
  .rv-tienda .rvm__lista > li { min-width: 0; min-height: 0; }
  .rvm__lista { height: 100%; margin: 0; padding: 0; list-style: none; }
  .rvm__lista > li { height: 100%; }
  /* En la hoja A4 (alto fijo, pantalla grande) la foto cuadrada de la
     tarjeta se comía el alto y cortaba la fila de compra: acá la foto toma
     lo que sobra y el resto (nombre, precio, cantidad, Agregar) va entero.
     Con #id + 3 clases para ganarle a wsl-catalogo-styles, que se imprime
     después con #id + 2.
     🔴 EN TODOS LOS ANCHOS desde el 28-sep-2026 (antes solo >= 1024px): en el
     celular la hoja también es la A4 entera, como el PDF, y la tarjeta tiene
     que entrar en su celda. Los ajustes propios del celular (tarjeta mini)
     van en el bloque de pantalla chica, más abajo. */
  @media all {
    #wholesale-product-container.view-grid.rv-tienda .wsl-item { height: 100%; }
    /* En pantalla grande la tarjeta es una columna flex (la grilla de áreas
       es solo de < 1024px): la foto se queda con el alto que sobra. */
    #wholesale-product-container.view-grid.rv-tienda .wsl-form { height: 100%; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-form { overflow: hidden; }
    /* La foto va absoluta dentro de su celda: si no, su alto propio agranda
       la fila y vuelve a empujar la compra afuera. */
    #wholesale-product-container.view-grid.rv-tienda .wsl-img-wrap {
      position: relative;
      display: block;
      flex: 1 1 0;
      min-height: 0;
      overflow: hidden;
    }
    #wholesale-product-container.view-grid.rv-tienda .wsl-img,
    #wholesale-product-container.view-grid.rv-tienda .wsl-img--placeholder {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      max-height: none;
      object-fit: contain;
    }
    #wholesale-product-container.view-grid.rv-tienda .wsl-img--hover { display: none; }

    /* Menos texto, más foto (pedido del usuario, 25-sep-2026). En la hoja la
       tarjeta es angosta y el texto de tamaño fijo se comía el alto: la letra
       pasa a escalar con el ancho de la tarjeta (cqw), sin la marca (ya está
       en el nombre) ni la fila Total (es precio x cantidad, a la vista). */
    #wholesale-product-container.view-grid.rv-tienda .wsl-item { container-type: inline-size; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-vendor,
    #wholesale-product-container.view-grid.rv-tienda .wsl-total-row { display: none; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-info { padding: 2.5cqw 4cqw 0; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-name {
      font-size: clamp(10px, 5.6cqw, 14px);
      line-height: 1.2;
    }
    /* 17-oct-2026: nombre en UN renglón con "…" en toda la revista (dos
       renglones ocupaban mucho). Pisa el alto fijo de 2 líneas y el clamp de
       wsl-catalogo-styles. Después se acortan los nombres en origen. */
    #wholesale-product-container.view-grid.rv-tienda .wsl-name,
    #wholesale-product-container.view-grid.rv-tienda a.wsl-name {
      display: block;
      height: auto;
      min-height: 0;
      -webkit-line-clamp: unset;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #wholesale-product-container.view-grid.rv-tienda .wsl-prices { padding: 1cqw 4cqw 1.5cqw; gap: 0; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-price-lista { font-size: clamp(9px, 4.5cqw, 12px); }
    #wholesale-product-container.view-grid.rv-tienda .wsl-price-amount { font-size: clamp(15px, 10cqw, 24px); }
    #wholesale-product-container.view-grid.rv-tienda .wsl-price-label { font-size: clamp(9px, 4.2cqw, 12px); }
    #wholesale-product-container.view-grid.rv-tienda .wsl-price-noacumula { font-size: clamp(7px, 3.4cqw, 9px); }
    #wholesale-product-container.view-grid.rv-tienda .wsl-actions { padding: 0 3cqw 3cqw; gap: 0; }
    /* Cantidad y Agregar en una fila: la cantidad ocupa lo justo (unos 4
       dígitos) y el botón se queda con el resto del ancho. */
    #wholesale-product-container.view-grid.rv-tienda .wsl-buy-row { display: flex; gap: 2cqw; min-width: 0; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-buy-row .wsl-spinner {
      flex: 0 0 auto;
      min-width: 0;
      height: clamp(26px, 14cqw, 34px);
    }
    #wholesale-product-container.view-grid.rv-tienda .wsl-spinner__btn { padding: 0; width: clamp(18px, 9cqw, 26px); flex: none; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-spinner__input {
      flex: none;
      min-width: 0;
      width: clamp(24px, 13cqw, 40px);
      padding: 0;
      font-size: clamp(11px, 5.5cqw, 14px);
    }
    #wholesale-product-container.view-grid.rv-tienda .wsl-actions .wsl-btn-add {
      min-width: 0;
      height: clamp(26px, 14cqw, 34px);
      min-height: 0;
      padding: 0 3cqw;
      font-size: clamp(10px, 5.2cqw, 13px);
    }
    /* Solo en la fila de compra (horizontal): en la tapa del madre el botón
       va en columna y flex 1 1 0 lo dejaba de alto cero. */
    #wholesale-product-container.view-grid.rv-tienda .wsl-buy-row .wsl-btn-add {
      flex: 1 1 0;
      min-width: 0;
      height: clamp(26px, 14cqw, 34px);
      min-height: 0;
      padding: 0 3cqw;
      font-size: clamp(10px, 5.2cqw, 13px);
    }
    #wholesale-product-container.view-grid.rv-tienda .wsl-btn-add svg { display: none; }

    /* "c/u" en vez de "por unidad", y en el MISMO renglón que el precio
       (5-oct-2026): en tarjetas angostas "por unidad" bajaba de línea en unas
       sí y en otras no, y la parte roja quedaba de alto distinto. El texto se
       cambia con CSS para no tocar la tarjeta de la tienda. */
    #wholesale-product-container.view-grid.rv-tienda .wsl-price-row--unit { flex-wrap: nowrap; white-space: nowrap; gap: 3px; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-price-row--unit .wsl-price-label { font-size: 0; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-price-row--unit .wsl-price-label::after {
      content: 'c/u';
      font-size: clamp(9px, 4.2cqw, 12px);
    }

    /* Tarjeta muy angosta (teléfonos, ~105–125px): "Agregar" al lado del − / +
       entraba apretado contra los bordes. Ahí el botón muestra el CARRITO en vez
       de la palabra (la palabra queda para lectores de pantalla). */
    @container (max-width: 140px) {
      /* Más alto para la foto (5-oct-2026: "la foto quedó muy chica"): con la
         tarjeta completa la foto bajó a ~89px de alto. "No acumula" en un
         renglón (eran dos) y la foto un 15% más grande: las fotos del
         catálogo traen margen blanco propio, así que no se corta el producto. */
      #wholesale-product-container.view-grid.rv-tienda .wsl-price-noacumula {
        white-space: nowrap;
        font-size: 5.2cqw;
        letter-spacing: -0.1px;
      }
      #wholesale-product-container.view-grid.rv-tienda .wsl-img { transform: scale(1.15); }
      #wholesale-product-container.view-grid.rv-tienda .wsl-buy-row .wsl-btn-add svg {
        display: block;
        width: clamp(14px, 13cqw, 18px);
        height: clamp(14px, 13cqw, 18px);
      }
      #wholesale-product-container.view-grid.rv-tienda .wsl-buy-row .wsl-btn-add [data-add-text] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
    }
    /* "Ver variantes" de la tapa del madre: va solo en la columna de
       acciones, y wsl-catalogo-styles le da flex 1 1 0 a todo botón de ahí
       (en columna eso es alto cero). */
    #wholesale-product-container.view-grid.rv-tienda .rvm .wsl-actions > .wsl-btn-add { flex: none; width: 100%; }

    /* ── OFERTA PICANTE COMPACTA (19-oct-2026, revista-propuesta.html aprobada) ──
       La misma tarjeta picante de la tienda (wsl-catalogo-styles) achicada a la
       celda de la hoja (179x299 la angosta): franja de 36px arriba (el ají ya no
       tapa la foto), foto con lo que sobra, nombre y "Cód. · Bulto" sobre blanco,
       precio en el bloque rojo y la compra. Letra en cqw, como el resto de la hoja. */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante > .wsl-form { --pic-franja: 36px; padding: 0 4px; border-radius: 12px; box-shadow: none; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-pic-franja { margin-top: 4px; padding: 3px 6px 3px 3px; border-radius: 9px 9px 0 0; flex: none; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-pic-aji { height: calc(var(--pic-franja) - 6px); max-width: 66%; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-pic-pct { font-size: clamp(11px, 7.5cqw, 17px); padding: .3em .45em; border-radius: 6px; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-info { padding: 1.5cqw 4cqw 2cqw; border-radius: 0 0 9px 9px; gap: 0; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-prices { padding: 1.5cqw 1cqw 1.5cqw; gap: 0; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-pic-precio { gap: 1px; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-pic-pill { font-size: clamp(7px, 4.3cqw, 9px); padding: .25em .8em; letter-spacing: .06em; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-pic-monto .wsl-price-amount { font-size: clamp(17px, 13.5cqw, 32px); line-height: 1; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-pic-cu { font-size: clamp(8px, 5.4cqw, 11px); }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-pic-lista { font-size: clamp(8px, 5.2cqw, 11px); }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-pic-noacumula { font-size: clamp(7px, 4.4cqw, 9px); line-height: 1.15; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-actions { padding: 0 0 4px; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-btn-add { background: #111827; }
    /* Tarjeta ancha (fila de arriba, 275px) o del celular: franja más alta. */
    @container (min-width: 240px) {
      .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante > .wsl-form { --pic-franja: 44px; }
    }
    /* Celular (la tarjeta es grilla): la foto es la fila que estira; sin marca ni tipo. */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante > .wsl-form { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-vendor,
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-list-badges { display: none; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-actions,
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-buy-row { width: 100%; align-self: stretch; justify-self: stretch; }
    /* Código y bulto: chico y gris, en un renglón. */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-meta { font-size: clamp(8px, 4.4cqw, 10.5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Precio Oro de lado a lado, como en la tienda. */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-price-row--volumen { width: 100%; align-self: stretch; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-oro-precio { flex: 1 1 auto; }

    /* ── DESTACADO CON LA GRÁFICA DE LA REFERENCIA (29-sep-2026) ──
       Pedido del usuario con una referencia del diseñador: el ají grande y
       centrado sobre una bandera amarilla en punta arriba de la foto; marca,
       nombre y precio de lista tachado sobre BLANCO; el rojo arranca en el
       precio (amarillo, grande) y sigue hasta el botón. Solo en la revista: la
       tarjeta de la tienda no cambia. Es todo CSS sobre el mismo HTML de
       wsl-product-card (la compra y las reglas de precio siguen siendo las de
       siempre). La tarjeta común (Precio Oro) queda como está. */
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado > .wsl-form { background: #fff; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-img-wrap::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      /* Medida por el ANCHO de la tarjeta (cqw, la tarjeta es el container),
         no por el alto de la foto: así la bandera tiene la misma forma en la
         hoja, en el modal y en las tarjetas altas y angostas del celular. */
      /* 1-oct-2026: la bandera y el ají son UNA imagen, la de la diseñadora
         (elrey-bandera-picante.png, 720×265; la URL la define :root en el
         <style> inline de arriba). Antes era un rectángulo amarillo con
         clip-path y el ají encima como imagen suelta. El alto respeta la
         proporción del archivo para que no se deforme. */
      height: calc(100cqw * 265 / 720);
      background: var(--rv-bandera) center top / 100% auto no-repeat;
      z-index: 1;
    }
    /* El ají ya viene dentro de la bandera: el sello suelto de la tarjeta de
       la tienda sobra acá. */
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-picante { display: none; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-badge-off { z-index: 3; }
    /* La foto baja para no quedar tapada por la bandera. 34cqw (antes 28):
       la bandera de la diseñadora llega hasta 36,8cqw en la punta y con 28 la
       foto quedaba encimada (1-oct-2026). Ahora solo la punta roza el borde
       de arriba de la foto, que además se achica un poco al tener menos alto. */
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-img {
      inset: 34cqw 0 auto 0;
      /* Alto explícito: una <img> absoluta con alto auto toma el suyo propio
         (no se estira entre top y bottom) y dejaba un hueco abajo. */
      height: calc(100% - 34cqw);
      /* Zoom (AJUSTES 6-oct, "el producto se ve muy chico"): las fotos traen
         mucho blanco alrededor; se acercan y el wrap (overflow hidden) recorta
         ese margen. Lo de arriba queda bajo la bandera, que va encima. */
      transform: scale(1.35);
      transform-origin: center 40%;
    }
    /* Sin zoom en la tapa del madre (13-oct-2026): su foto la arma la app de
       entregas al ras del producto, sin blanco alrededor, y el 1.35 metía los
       envases bajo la bandera y los cortaba (CLEAR MEN 400ML). */
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .rvm__foto .wsl-img { transform: none; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-info { background: #fff; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-name,
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado a.wsl-name:hover { color: #1f2937; }
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .rvm__vendor { color: var(--wsl-rojo); }
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-prices,
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-actions { background: var(--wsl-rojo); }
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-prices { border-top: 0; }
    /* El precio de lista va sobre blanco aunque vive adentro del bloque rojo:
       la franja blanca es una sombra recortada a su alto, que llega de borde a
       borde sin depender de los rellenos de los contenedores (100cqw = el
       ancho entero de la tarjeta, que es el container). */
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-price-lista {
      display: block;
      margin: -1cqw 0 1.5cqw;
      padding: 1cqw 0 1.5cqw;
      background: #fff;
      box-shadow: 0 0 0 100cqw #fff;
      /* -3px arriba: con inset(0 …) el corte caía en medio píxel justo sobre
         el rojo de .wsl-prices y se veía una línea rosada (5-oct-2026). */
      clip-path: inset(-3px -100cqw 0 -100cqw);
      color: #9ca3af;
      opacity: 1;
    }
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-price-lista s { color: #9ca3af; }
    /* Picante sin lista más cara (20-oct-2026): el renglón ocupa su lugar
       (la franja blanca) pero sin texto, en vez de "Precio de lista: $0".
       color y no visibility: con visibility se iría también la sombra blanca. */
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-price-lista.wsl-price-lista--vacia,
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-price-lista.wsl-price-lista--vacia s { color: transparent; }
    /* 17-oct-2026: sin el renglón "Precio de lista" en la revista (picantes y
       Precio Oro). Las reglas de arriba quedan por si se vuelve a mostrar.
       !important: el oro lo prende desde wsl-catalogo-styles con :has(). */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-price-lista:not(.wsl-lista-revista) { display: none !important; }
    /* 28-oct-2026: vuelve como "P. Lista: $X" en el blanco, bajo el nombre (picante y oro);
       la "Lista" tachada del bloque rojo se va. */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item .wsl-lista-revista {
      display: block; margin: 2px 0 0; padding: 0; background: none; box-shadow: none; clip-path: none;
      color: #6b7280; font-size: clamp(9px, 5cqw, 13px); line-height: 1.2;
    }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item .wsl-lista-revista b { color: #1f2430; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item .wsl-pic-lista { display: none; }
    /* Precio Oro (28-oct-2026): la lista va ADENTRO del amarillo, como en la tienda
       (nati 12). Tamaños por el ancho de la tarjeta; angosta = "Lista:". */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-oro-lista { font-size: clamp(8px, 4.4cqw, 13px); }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-oro-lista b { font-size: clamp(9px, 5cqw, 15px); }
    @container (max-width: 260px) {
      .rv-tienda .wsl-oro-lista-largo { display: none; }
      .rv-tienda .wsl-oro-lista-corto { display: inline; }
    }
    #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-price-amount { color: #FFE824; }

    /* ── OPCIÓN B (14-oct-2026, PRUEBA en hojas 4 y 5) ── La misma tarjeta,
       solo sin la bandera en V: el ají de sello arriba a la derecha y la foto
       sin correrse hacia abajo. `.rv-pag … .rv-pag__grid` empata a las reglas
       de mixta/grandes, y gana por ir después. */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda.rv-b .rv-pag__grid .wsl-item--destacado .wsl-img-wrap::before { content: none; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda.rv-b .rv-pag__grid .wsl-item--destacado .wsl-picante { display: block; width: 42%; z-index: 3; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda.rv-b .rv-pag__grid .wsl-item--destacado .wsl-img { inset: 0; height: 100%; }

    /* ── PROPUESTA (17-oct-2026, hoja 1 de Picantes, segunda línea) ── Comparativo
       "HOY / PROPUESTA": foto completa sin la bandera, ají chico de sello arriba a
       la izquierda y el -% arriba a la derecha; el bloque rojo crece y lleva la
       pastilla "OFERTA PICANTE", el precio en blanco y "Ahorrás $X c/u"; abajo,
       cantidad y "Agregar" rojo sobre blanco. En la hoja de 5 la segunda línea
       arranca en el 3.º lugar; en la de 6, en el 4.º. */
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-img-wrap::before,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-img-wrap::before,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-img-wrap::before,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-img-wrap::before { content: none; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-img,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-img,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-img,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-img { inset: 4cqw 0 0; height: calc(100% - 4cqw); transform: none; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-picante,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-picante,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-picante,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-picante { display: block; top: 3%; left: 4%; right: auto; width: 40%; z-index: 3; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-badge-off,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-badge-off,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-badge-off,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-badge-off { top: 4%; left: auto; right: 5%; border-radius: 10px; font-size: clamp(11px, 7cqw, 18px); padding: .35em .5em; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-off-txt,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-off-txt,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-off-txt,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-off-txt { display: none; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-prices,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-prices,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-prices,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-prices { padding-top: 3cqw; padding-bottom: 4cqw; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-price-block,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-price-block,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-price-block,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-price-block { align-items: flex-start; text-align: left; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-price-row,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-price-row,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-price-row,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-price-row { justify-content: flex-start; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-picante-pill,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-picante-pill,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-picante-pill,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-picante-pill { display: inline-block; align-self: flex-start; margin: 0 0 1.5cqw; padding: .25em .55em; border-radius: 6px; background: #FFE824; color: var(--wsl-rojo); font-size: clamp(8px, 4.6cqw, 13px); font-weight: 800; letter-spacing: .03em; line-height: 1.1; text-transform: uppercase; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-price-amount,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-price-amount,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-price-amount,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-price-amount { color: #fff; font-size: clamp(18px, 13cqw, 34px); }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-price-label,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-price-label,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-price-label,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-price-label { color: #fff; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-price-ahorro,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-price-ahorro,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-price-ahorro,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-price-ahorro { display: block; color: #fff; font-size: clamp(9px, 5cqw, 14px); font-weight: 700; text-align: left; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-price-noacumula,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-price-noacumula,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-price-noacumula,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-price-noacumula { display: none; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-actions,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-actions,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-actions,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-actions { background: #fff; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-buy-row .wsl-btn-add,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-buy-row .wsl-btn-add,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-buy-row .wsl-btn-add,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-buy-row .wsl-btn-add { background: var(--wsl-rojo); border-color: var(--wsl-rojo); color: #fff; }
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 3) .wsl-actions .wsl-btn-add,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .wsl-item--destacado:nth-child(n + 4) .wsl-actions .wsl-btn-add,
    .rv-pag--mixta #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 3) .wsl-item--destacado .wsl-actions .wsl-btn-add,
    .rv-pag:not(.rv-pag--mixta) #wholesale-product-container.view-grid.rv-tienda.rv-c .rv-pag__grid > .rvm:nth-child(n + 4) .wsl-item--destacado .wsl-actions .wsl-btn-add { background: var(--wsl-rojo); border-color: var(--wsl-rojo); color: #fff; }
  }

  /* ── Tarjeta de MADRE (snippets/revista-madre, 25-sep-2026) ──
     Todas las "hojitas" (la tapa del madre y cada variante) se apilan en la
     misma celda de la grilla; se ve una sola, las demás llevan [hidden]. */
  .rvm {
    position: relative;
    min-height: 0;
    display: grid;
    container-type: inline-size;
  }
  .rvm > .rvm__slide { grid-area: 1 / 1; min-height: 0; }
  .rvm > .rvm__slide[hidden] { display: none; }
  .rvm__cuantos {
    font-size: clamp(9px, 5cqw, 12px);
    font-weight: 700;
    color: var(--rvc-texto);
  }
  .rvm__foto { cursor: pointer; }
  /* "N variantes" en la tapa con la tarjeta de la tienda (no usa .wsl-vendor,
     que la revista oculta). */
  .rvm__vendor {
    margin: 0 0 2px;
    font-size: clamp(9px, 4.2cqw, 12px);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffe824;
  }
  .rvm__desde { display: block; font-size: 0.3em; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; }
  .rvm__flecha {
    position: absolute;
    top: 55%;
    z-index: 2;
    width: clamp(24px, 12cqw, 34px);
    height: clamp(24px, 12cqw, 34px);
    display: grid;
    place-items: center;
    padding: 0;
    font-size: clamp(16px, 9cqw, 24px);
    line-height: 1;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
  }
  .rvm__flecha--prev { left: 1.5cqw; }
  .rvm__flecha--next { right: 1.5cqw; }
  .rvm__flecha[hidden] { display: none; }
  .rvm__pos {
    position: absolute;
    top: 1.5cqw;
    right: 1.5cqw;
    z-index: 2;
    padding: 1px 6px;
    font-size: clamp(9px, 4.5cqw, 11px);
    font-weight: 700;
    color: #fff;
    background: rgba(17, 24, 39, 0.75);
    border-radius: 999px;
  }
  .rvm__pos:empty { display: none; }
  /* Con la tarjeta de la tienda la foto va ARRIBA: flechas a su altura (no
     sobre el texto) y la posición abajo al centro de la foto, porque arriba
     están el -% y el sello del ají. */
  .rv-tienda .rvm__flecha { top: 22%; }
  .rv-tienda .rvm__pos { top: 34%; right: auto; left: 50%; transform: translateX(-50%); }
  /* La variante entra deslizándose, del lado hacia donde se pasó. */
  .rvm[data-rvm-dir='next'] > .rvm__slide:not([hidden]) { animation: rvm-in-der 0.28s ease-out; }
  .rvm[data-rvm-dir='prev'] > .rvm__slide:not([hidden]) { animation: rvm-in-izq 0.28s ease-out; }
  @keyframes rvm-in-der { from { opacity: 0; transform: translateX(18%); } to { opacity: 1; transform: none; } }
  @keyframes rvm-in-izq { from { opacity: 0; transform: translateX(-18%); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .rvm > .rvm__slide { animation: none !important; }
  }

  /* ── Modal de variantes (29-sep-2026) ──
     Lo arma revista-scripts al tocar "Ver variantes": las variantes del madre
     de a DOS, con sus mismas tarjetas (movidas desde la hoja). El cuerpo es un
     #wholesale-product-container.view-grid.rv-tienda, así que la tarjeta toma
     los estilos de la hoja; acá va solo la ventana y la grilla de 2. */
  .rv-var {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 12px;
  }
  .rv-var[hidden] { display: none; }
  .rv-var__fondo { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
  .rv-var__caja {
    position: relative;
    width: min(600px, 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: rv-var-in 0.18s ease-out;
  }
  @keyframes rv-var-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
  .rv-var__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .rv-var__titulo { margin: 0; font-size: 16px; font-weight: 800; color: #111827; }
  .rv-var__x {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    color: #111827;
    background: #f1f5f9;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }
  /* Alto fijo: la tarjeta de la revista ocupa el alto de su celda (height
     100%) y la foto se queda con lo que sobra. */
  .rv-var__cont.rv-tienda { flex: none; height: min(64vh, 520px); }
  .rv-var__grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .rv-var__grid > * { min-width: 0; min-height: 0; }
  .rv-var__grid > .rv-var__fuera { display: none !important; }
  .rv-var__pie { display: flex; align-items: center; justify-content: center; gap: 16px; }
  .rv-var__nav {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    color: #111827;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    cursor: pointer;
  }
  .rv-var__nav:disabled { opacity: 0.35; cursor: default; }
  .rv-var__pos { min-width: 80px; text-align: center; font-size: 13px; font-weight: 700; color: #374151; }
  /* En pantalla chica la tienda arma la tarjeta con una grilla de áreas (foto
     chiquita arriba a la izquierda). El modal no está dentro de la hoja, así
     que no le llegan los ajustes de celular de .rv-pag: acá va la misma
     columna flex de la hoja (la foto se queda con el alto que sobra) y sin la
     etiqueta de tipo. La compra sí queda completa (− / + y Agregar): en el
     modal hay lugar, no hace falta la ventanita. */
  @media (max-width: 1023px) {
    /* Tarjeta angosta: la foto se limita por el ancho, el alto de más solo
       dejaba blanco. */
    .rv-var__cont.rv-tienda { height: min(56vh, 430px); }
    .rv-var #wholesale-product-container.view-grid.rv-tienda .wsl-form {
      display: flex;
      flex-direction: column;
    }
    .rv-var #wholesale-product-container.view-grid.rv-tienda .wsl-list-badges,
    .rv-var #wholesale-product-container.view-grid.rv-tienda .wsl-mode-row { display: none !important; }
    .rv-var #wholesale-product-container.view-grid.rv-tienda .wsl-prices { border-top: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rv-var__caja { animation: none; }
  }

  /* ── Pantalla chica: una página por vez, sin alto fijo ── */
  @media (max-width: 1023px) {
    .rv-wrap { padding-inline: 8px; }
    .rv-barra__info strong { font-size: 15px; }
    /* Los controles entran en el ancho (14-oct-2026): a 360px la fila medía
       357 y se salía, corriendo toda la página. El contador se estira. */
    .rv-barra__nav { width: 100%; box-sizing: border-box; gap: 2px; padding: 6px; }
    .rv-pager { flex: 1; min-width: 0; }
    .rv-btn { width: 34px; }
    .rv-carrito { margin-left: 2px; padding: 0 10px; }
    /* La tapa ENTERA, sin recortar los costados: la hoja es más alta que la
       tapa y con cover se perdían el logo y el texto de los bordes. */
    .rv-tapa img { object-fit: contain; }

    /* LA HOJA ENTERA, COMO EL PDF (28-sep-2026). Antes el celular rearmaba la
       hoja en 2 columnas y la estiraba hacia abajo: no se veían todos los
       productos juntos. Ahora es la misma A4 de desktop, del ancho de la
       pantalla y con su alto fijo, con la grilla de desktop (--rv-cols × 2
       filas). Se puede porque la compra se hace en la ventanita: la tarjeta
       solo tiene que mostrar. */
    /* Alto: el de la pantalla menos la barra de la revista (~175px con el
       título y los controles), no la proporción A4, que dejaba una franja
       vacía abajo. El alto que sobra se lo quedan las fotos. svh = alto con
       la barra del navegador visible, para que no quede tapada. Piso de
       480px para pantallas muy bajas (o apaisadas). */
    .rv-pag {
      aspect-ratio: auto;
      height: max(480px, calc(100svh - 175px));
    }
    .rv-pag__grid { gap: 1.8cqw; padding: 2cqw; }
    .rvc__foto { min-height: 0; }
    .rvm { min-height: 0; }

    /* LA MISMA TARJETA QUE EN DESKTOP (5-oct-2026, pedido del usuario: "hay
       que empatarlos"). Antes era una tarjeta mini (foto, nombre, precio y un
       "Agregar" que abría la ventanita). Ahora muestra % off, lista tachada,
       "por unidad", "No acumula" y − / + con Agregar, con los tamaños en cqw de
       desktop. Se oculta solo lo que desktop tampoco muestra.
       .rv-pag + #id + 2 clases le gana a wsl-catalogo-styles (#id + 1 clase). */
    /* La tienda arma su tarjeta de celular con una grilla de áreas; en la hoja
       va la columna flex de desktop, que deja a la foto el alto que sobra. */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-form {
      display: flex;
      flex-direction: column;
    }
    /* "En pedidos +$3M" vuelve bajo el Precio Oro (23-oct, pedido del usuario). */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-price-block--bulto,
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-mode-row { display: none !important; }

    /* DE A 2 POR FILA, BAJANDO CON EL DEDO (AJUSTES 6-oct de la diseñadora): la
       hoja de 3×2 dejaba las tarjetas muy chicas. Ahora la grilla va en 2
       columnas y scrollea adentro de la hoja; cada fila mide el 82% del alto
       para que asome el comienzo de la siguiente. El dedo de costado sigue
       pasando de hoja. Con tarjetas más grandes vuelven marca y tipo. */
    /* 4 POR PANTALLA (nati 3, 21-oct-2026): 2 filas que llenan la hoja (antes
       82% cada una, se veía una sola). Sin marca ni tipo: el nombre ya lo dice. */
    .rv-pag .rv-pag__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: none;
      grid-auto-rows: calc((100% - 1.8cqw) / 2);
      overflow-y: auto;
      overscroll-behavior-y: contain;
    }
    .rv-pag.rv-pag--mixta .rv-pag__grid > *:nth-child(n) { grid-column: auto; }
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-vendor,
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-list-badges { display: none; }
    /* Sin el pie de contacto (ese lugar vuelve a la grilla) y con el
       encabezado y el buscador más bajos. El input sigue en 16px: con menos,
       el iPhone hace zoom al tocarlo. */
    .rv-pag__pie { display: none; }
    .rv-pag__top { padding: 3px 8px; }
    .rv-pag__seccion { font-size: 11px; }
    .rv-pag__vig { font-size: 8px; }
    .rv-cinta.rv-cinta--buscar { padding: 3px 6px; }
    .rv-buscar__input { height: 24px; }
    /* Picante: sin la burbuja "Precio picante"; la franja ya dice qué es. */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-item.wsl-item--picante.wsl-item--picante .wsl-pic-pill { display: none; }
    /* La fila Total NO (7-oct, pedido del usuario): se ve en el carrito y el
       lugar es para la foto. Queda oculta como en desktop. */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-prices,
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-actions { border-top: 0; }
    /* La grilla de áreas de la tienda (< 1024px) mete la fila de compra en su
       propia área: acá va la fila flex de desktop, con − / + y Agregar. */
    .rv-pag #wholesale-product-container.view-grid.rv-tienda .wsl-buy-row { display: flex; }
  }

  /* COMO UN PDF (28-oct-2026, pedido del usuario): en el celular las hojas van
     una debajo de otra y se baja con el dedo, en vez de pasar de costado. La
     hoja deja el alto fijo y el scroll de adentro: crece con sus filas, que
     miden lo mismo que antes (2 por pantalla; ~160px = encabezado y cinta de
     la hoja + el buscador, que ahora va en la barra). La barra queda fija
     arriba con el buscador y el contador. */
  @media (max-width: 1023px) {
    .rv-libro.rv-libro--columna { flex-direction: column; align-items: stretch; gap: 14px; perspective: none; }
    /* scroll-margin: al saltar a una hoja, que no quede bajo los controles fijos (~62px). */
    .rv-libro--columna .rv-pag { height: auto; animation: none !important; scroll-margin-top: 72px; }
    .rv-libro--columna .rv-pag .rv-pag__grid {
      overflow: visible;
      /* Ese alto es el MÍNIMO (28-oct): la fila crece si la tarjeta lo pide. Con
         alto fijo la foto (la parte que se encoge) se aplastaba en las picantes y
         madres, que tienen más renglones fijos que la Precio Oro. */
      grid-auto-rows: minmax(calc((max(480px, 100svh - 175px) - 160px) / 2), auto);
    }
    .rv-libro--columna #wholesale-product-container.view-grid.rv-tienda .wsl-img-wrap { min-height: 110px; }
    /* La destacada vieja baja la foto 34cqw por la bandera. */
    .rv-libro--columna #wholesale-product-container.view-grid.rv-tienda .wsl-item--destacado .wsl-img-wrap { min-height: calc(110px + 34cqw); }
    /* top negativo: al bajar, el título se va y queda fija solo la fila de controles. */
    .rv-barra { position: sticky; top: -58px; z-index: 20; background: #e5e7eb; padding-block: 6px; margin-bottom: 6px; }
  }

  /* ── Ventanita de cantidad (celular) ──
     Se abre desde abajo al tocar "Agregar" en una tarjeta de la revista. Va
     colgada del <body>: dentro de la hoja no podría ser fija (la hoja es un
     contenedor y "encierra" a sus hijos fijos). */
  .rv-compra { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: flex-end; }
  .rv-compra[hidden] { display: none; }
  .rv-compra__fondo { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.55); }
  .rv-compra__hoja {
    position: relative;
    width: 100%;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2);
    font-family: 'Montserrat', system-ui, sans-serif;
    animation: rv-compra-sube 0.2s ease-out;
  }
  @keyframes rv-compra-sube { from { transform: translateY(100%); } }
  @media (prefers-reduced-motion: reduce) { .rv-compra__hoja { animation: none; } }
  .rv-compra__nombre { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.3; color: #111827; }
  .rv-compra__precio { margin: 0 0 14px; font-size: 20px; font-weight: 700; color: #D5131A; }
  .rv-compra__cant { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .rv-compra__btn {
    flex: none;
    width: 52px;
    height: 48px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    background: #f9fafb;
    font-size: 24px;
    line-height: 1;
    color: #111827;
    cursor: pointer;
  }
  .rv-compra__input {
    flex: 1;
    min-width: 0;
    height: 48px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
  }
  .rv-compra__ok {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 10px;
    background: #D5131A;
    color: #fff;
    font: 700 16px 'Montserrat', system-ui, sans-serif;
    cursor: pointer;
  }
  .rv-compra__cerrar {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border: 0;
    background: none;
    font-size: 14px;
    color: #6b7280;
    cursor: pointer;
  }

  .rv-progreso {
    height: 4px;
    margin-top: 14px;
    background: #d1d5db;
    border-radius: 99px;
    overflow: hidden;
  }
  .rv-progreso > span {
    display: block;
    height: 100%;
    width: 0;
    background: #111827;
    transition: width 0.25s ease;
  }
/* END_SECTION:revista */
/* START_BLOCK:_announcement (INDEX:50) */
.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:_header-logo (INDEX:78) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

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

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */
/* START_BLOCK:_header-menu (INDEX:79) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  @media screen and (min-width: 990px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .header-menu__inner, .menu-list, .overflow-menu) {
      width: 100%;
      min-width: 0;
    }

    #header-component[data-menu-style='menu'] .overflow-menu {
      --overflow-list-alignment: space-between;
    }
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  {%- comment -%}
    EL REY: "Ver Todo" es el primer link del menú de navegación (config del
    admin, no un ítem con clase propia). Se destaca en dorado para que
    resalte contra el resto de la barra. Excluye [slot='overflow'] (el "más"
    de mobile) para no pintar ese botón si "Ver Todo" cae ahí.
  {%- endcomment -%}
  .menu-list__list-item:first-child:not([slot='overflow']) .menu-list__link,
  .menu-list__list-item:first-child:not([slot='overflow']) .menu-list__link:hover,
  .menu-list__list-item:first-child:not([slot='overflow']) .menu-list__link:focus {
    color: #b8892b;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  /* EL REY, nati 5 (21-oct-2026): "Ofertas" es el primer ítem de la barra, en
     amarillo, con el logo de Oferta Picante (~34px) y la cantidad de ofertas. */
  .menu-list .menu-list__list-item--ofertas > .menu-list__link {
    box-sizing: border-box;
    height: auto;
    margin-block: auto;
    margin-inline-end: 6px;
    padding: 2px 12px;
    background-color: #FFE629;
    border-radius: 99px;
  }

  .menu-list .menu-list__list-item--ofertas > .menu-list__link > .menu-list__link-title {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .menu-list__list-item--ofertas .rey-hot__pill {
    gap: 8px;
    padding: 8px 16px;
    font-size: 15px;
  }
  .menu-list__list-item--ofertas .rey-hot__pill svg { width: 18px; height: 18px; }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.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;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  @media screen and (min-width: 750px) {
    .mega-menu__list > .mega-menu__column:only-child {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
      gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    }
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

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

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }

  .header-menu .mega-menu__link--parent,
  .header-menu .mega-menu__link--parent:hover {
    color: #B38D34;
  }

  @media (any-hover: hover) and (any-pointer: fine) {
    .header-menu .menu-list__link-title,
    .header-menu .mega-menu__link > .wrap-text,
    .menu-list--mobile .menu-list__item,
    .menu-drawer__menu-item > .menu-drawer__menu-item-text {
      background-image: linear-gradient(#9A7628, #9A7628);
      background-repeat: no-repeat;
      background-position: left bottom;
      background-size: 0 1px;
      background-origin: content-box;
      transition: background-size 180ms ease;
    }

    .header-menu .menu-list__link:hover > .menu-list__link-title,
    .header-menu .mega-menu__link:hover > .wrap-text,
    .menu-list--mobile .menu-list__item:hover,
    .menu-drawer__menu-item:hover > .menu-drawer__menu-item-text {
      background-size: 100% 1px;
    }
  }
/* END_BLOCK:_header-menu */
/* START_BLOCK:footer-policy-list (INDEX:124) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

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

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */
/* START_BLOCK:image (INDEX:127) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */
/* START_BLOCK:logo (INDEX:129) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

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

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

  .logo-block__link {
    display: flex;
    width: 100%;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */
/* START_BLOCK:social-links (INDEX:145) */
.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_SNIPPET:background-media (INDEX:153) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* START_SNIPPET:cart-bubble (INDEX:160) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-button-text);
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--color-primary-button-background);
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */
/* START_SNIPPET:cart-items-component (INDEX:161) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */
/* START_SNIPPET:cart-products (INDEX:163) */
.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-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    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;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

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

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

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row: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-of-type {
    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-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
  }

  /* EL REY: aviso de sobre-pedido en el carrito. */
  .wsl-cart-stock-warn {
    margin: 4px 0 0;
    font-size: .74rem;
    line-height: 1.3;
    color: #b45309;
    font-weight: 600;
  }

  /* EL REY (9-sep-2026): producto con PRECIO DESTACADO en el carrito.
     Se comunica el BENEFICIO (el % de ahorro), no la restricción. Chip
     discreto: fondo crema muy suave, texto ámbar, sin mayúsculas gritonas.
     "No acumula" queda como nota gris chica al lado. Sin teñir la fila ni
     ponerle bordes de colores — que hable el chip. */
  .wsl-cart-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
  }
  .wsl-cart-promo__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef7e0;
    color: #92600b;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
  }
  .wsl-cart-promo__nota {
    font-size: .68rem;
    line-height: 1.3;
    color: var(--color-foreground-subdued, #94a3b8);
  }

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

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

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }


  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

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

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

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

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

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

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

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

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

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

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

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

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

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

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */
/* START_SNIPPET:elrey-home-responsive (INDEX:176) */
@media screen and (max-width: 989px) {
    /* 25 años / +2.000 / +1.400 */
    [id$="__section_TVbBmw"] .group-block {
      min-height: 9rem;
    }

    /* Monto Mínimo / Formas de pago / Horario de atención */
    [id$="__section_qeQYYi"] .group-block {
      min-height: 8rem;
    }

    /* Vendedor asignado / Envíos a todo el país / Surtido mayorista */
    [id$="__section_eimcnB"] .group-block {
      min-height: 7rem;
    }
  }

  {%- comment -%}
    Marquesina "A MAYOR CANTIDAD, MEJOR PRECIO. / PRECIOS MAYORISTAS": el
    padding lateral y el tamaño de letra estaban fijos en px/rem (pensados
    para desktop) y en pantallas angostas dejaban el texto apretado, casi
    cortado contra el borde. `clamp()` con `vw` lo hace escalar fluido con
    el ancho real de la pantalla en vez de saltar por breakpoint — mismo
    criterio que ya usa sections/banner-slider.liquid.
  {%- endcomment -%}
  [id$="__hero_xLhatD"] marquee-component .marquee__repeated-items > * {
    padding-inline: clamp(12px, 3vw, 50px) !important;
    font-size: clamp(0.85rem, 2.2vw, 1rem) !important;
  }

  {%- comment -%}
    "Productos destacados" + botón "Ver más": el bloque group de esta
    sección tiene `vertical_on_mobile`, que en pantallas angostas apila
    título y botón en dos líneas. El pedido es que queden SIEMPRE en la
    misma línea, achicando la letra del título en vez de romper el layout
    — se fuerza `flex-flow: row nowrap` (pisa la clase `.mobile-column` de
    este bloque puntual) y se compensa con clamp() en el título.
  {%- endcomment -%}
  @media screen and (max-width: 749px) {
    [id$="__section_TtTNpx"] .layout-panel-flex.mobile-column {
      flex-flow: row nowrap !important;
      justify-content: space-between !important;
    }
  }

  [id$="__section_TtTNpx"] h3 {
    font-size: clamp(1.05rem, 4vw, 1.5rem) !important;
  }
/* END_SNIPPET:elrey-home-responsive */
/* START_SNIPPET:elrey-pill-picante (INDEX:185) */
.rey-pill-picante {
    display: inline-flex;
    align-items: center;
    background: #FFE629;
    color: #D7141A;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-style: italic;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    white-space: nowrap;
  }
  .rey-pill-picante svg { flex: none; }
/* END_SNIPPET:elrey-pill-picante */
/* START_SNIPPET:header-actions (INDEX:196) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

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

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

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

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    /* Radios: se heredan del tema (botones y popover están en 14px) para que la
       hoja no desentone con el resto de la tienda.
       El input es la excepción: el tema lo tiene en 4px y al lado de un botón de
       14 se ve duro, así que se lo lleva a 12. */
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-dialog: 18px;
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: 10px;
    --shopify-account-radius-input: 12px;

    /* EL REY: estética de marca en la hoja de ingreso.
     *
     * El contenido, los textos y el layout los fija Shopify ("the component
     * maintains a consistent appearance across shops"): lo único que acepta son
     * estas variables. Alcanzan para que no se sienta ajena a la tienda.
     *
     * Se mantiene el FONDO CLARO a propósito. Un formulario de login se lee mejor
     * en claro, y como Shopify puede cambiar el color de sus textos sin avisar, un
     * fondo oscuro nuestro corre el riesgo de dejar algo ilegible. El dorado va de
     * acento, que es donde se nota sin comprometer la lectura.
     *
     * El tono es #a8862a, no el #d4af37 de la tarjeta: el oro puro está pensado
     * para el fondo negro de la placa y sobre blanco no llega al contraste que
     * necesita un anillo de foco o un texto de link.
     */
    --shopify-account-color-accent: #a8862a;
    /* Borde apenas cálido en vez del gris neutro: junto al fondo crema de las
       tarjetas hace que el panel se sienta menos "de sistema". */
    --shopify-account-color-border: rgb(120 96 40 / 20%);
    --shopify-account-color-shadow: 0 18px 48px rgb(15 19 29 / 20%);
    --shopify-account-color-card-background: #faf7ef;
    /* background-subdued NO se define: el componente la deriva de color-border
       (rgb(from border r g b / .4)). Fijarla a mano pelea con ese cálculo y deja
       tonos inconsistentes entre secciones del panel. */
    /* Controles en blanco: el crema le daba a la X de cerrar un fondo gris/beige
       que se leía como botón deshabilitado. En blanco desaparece del camino, que
       es lo que corresponde a una acción secundaria. */
    --shopify-account-color-control-background: #fff;
    --shopify-account-color-control-text: #2c2a24;
    --shopify-account-color-text-subdued: #6f6a5f;

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

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

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

  .cart-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @media screen and (min-width: 750px) {
      margin-inline-end: calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    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);

    @media screen and (min-width: 750px) {
      width: var(--sidebar-width);
      max-width: 95vw;
    }
  }

  /* 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: 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-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .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 {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid 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-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .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-inline: 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;
  }

  header-actions {
    display: flex;

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

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

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

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

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

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

    position: relative;
  }

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

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

  .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] {
    width: min(1lh, 22px);
    height: min(1lh, 22px);
  }

  .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 .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: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

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

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

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

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

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

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
  .header-actions__text {
    display: flex;
    align-items: center;
  }

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

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */
/* START_SNIPPET:header-drawer (INDEX:197) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

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

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-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;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

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

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* EL REY: estados visuales exclusivos del drawer mobile. */
  :where(.header__drawer .menu-drawer__navigation) .menu-drawer__menu-item > .menu-drawer__menu-item-text {
    background-image: linear-gradient(#9A7628, #9A7628);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
    background-origin: content-box;
    transition: background-size 180ms ease;
  }

  /* EL REY, nati 5 (21-oct-2026): "Ofertas" es la primera fila del menú, a todo
     el ancho, en amarillo con el logo de Oferta Picante, la cantidad de ofertas
     y la flecha. Abajo, en gris: "Precios especiales de la semana". */
  /* El <li> es flex en fila: sin esto la fila no llega a todo el ancho y el
     subtítulo se para al costado en vez de abajo. */
  .header__drawer .menu-drawer__menu > li:has(> .rey-hot) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  /* natiajustesrepetidos (23-oct): solo la píldora de las cards, primera y a la
     izquierda; debajo, el resto del menú como siempre. */
  .header__drawer .menu-drawer__navigation .menu-drawer__menu-item.rey-hot {
    box-sizing: border-box;
    min-height: 0;
    width: auto;
    align-self: flex-start;
    margin: 6px 0 8px;
    padding: 0;
    background: none;
    text-decoration: none;
  }
  .rey-hot .rey-hot__pill { gap: 8px; padding: 8px 16px; font-size: 15px; }
  .rey-hot .rey-hot__pill svg { width: 18px; height: 18px; }

  :where(.header__drawer .menu-drawer__navigation) .menu-drawer__menu-item:is(
    :active,
    :focus-visible,
    [aria-current='page'],
    [aria-expanded='true'],
    .menu-drawer__menu-item--active
  ) > .menu-drawer__menu-item-text,
  :where(.header__drawer .menu-drawer__navigation) details[open] > summary.menu-drawer__menu-item > .menu-drawer__menu-item-text {
    color: #B38D34;
    background-size: 100% 1px;
  }

  /** 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: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */
/* START_SNIPPET:predictive-search-styles (INDEX:219) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: 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__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    40% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &:hover {
      opacity: 1;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */
/* START_SNIPPET:quick-add-modal-styles (INDEX:230) */
#quick-add-dialog {
    display: contents;
  }

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

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */
/* START_SNIPPET:resource-card (INDEX:234) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

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

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

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

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-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:search-modal (INDEX:247) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* Firefox */
    scrollbar-width: none;

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

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    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;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .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: 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:248) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

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

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

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

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

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

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

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */
/* START_SNIPPET:section (INDEX:249) */
.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);
  }
/* END_SNIPPET:section */
/* START_SNIPPET:skip-to-content-link (INDEX:251) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    * {
      pointer-events: none;
    }
  }

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

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

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

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

    50% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

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

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */
/* START_SNIPPET:text (INDEX:267) */
: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);
  }

  .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,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */