/** Shopify CDN: Minification failed

Line 1592:2 All "@import" rules must come first
Line 16699:0 All "@import" rules must come first
Line 18755:0 All "@import" rules must come first

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:blog-index-cards (INDEX:1) */
.blog-index-cards {
    position: relative;
    padding-block: 40px 64px;
  }

  .blog-index-cards__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 24px);
  }

  .blog-index-cards__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
  }

  .blog-index-cards__image-wrap {
    display: block;
    border-radius: 8px;
    overflow: hidden;
  }

  .blog-index-cards__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .blog-index-cards__card:hover .blog-index-cards__image {
    transform: scale(1.03);
  }

  .blog-index-cards__title {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 1.05rem;
    font-weight: 500;
    color: #3b2a1c;
  }

  .blog-index-cards__card:hover .blog-index-cards__title {
    color: #b44c21;
  }

  .blog-index-cards__date {
    margin: 0;
    font-size: 0.8rem;
    color: #7f7f6a;
  }

  @media screen and (max-width: 989px) {
    .blog-index-cards__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 599px) {
    .blog-index-cards__grid {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:blog-index-cards */

/* START_SECTION:blog-related-articles (INDEX:2) */
.blog-related {
    position: relative;
    padding-block: 48px 64px;
  }

  .blog-related__inner {
    position: relative;
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 24px);
  }

  .blog-related__heading {
    margin: 0 0 24px;
    font-family: var(--font-accent--family);
    color: #3b2a1c;
  }

  .blog-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .blog-related__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
  }

  .blog-related__image-wrap {
    display: block;
    border-radius: 8px;
    overflow: hidden;
  }

  .blog-related__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .blog-related__card:hover .blog-related__image {
    transform: scale(1.03);
  }

  .blog-related__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: #3b2a1c;
  }

  .blog-related__card:hover .blog-related__title {
    color: #b44c21;
  }

  .blog-related__date {
    margin: 0;
    font-size: 0.8rem;
    color: #7f7f6a;
  }

  @media screen and (max-width: 989px) {
    .blog-related__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 599px) {
    .blog-related__grid {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:blog-related-articles */

/* START_SECTION:blog-style-overrides (INDEX:3) */
/* Mismo ancho de contenido en cabecera, imagen y cuerpo del artículo
     (Nuestra historia/FAQ usan --normal-content-width para su columna de
     texto; aquí se aplica también a la cabecera y a la imagen destacada,
     que por defecto no llevan ese límite). */
  main[data-template='article'] header,
  main[data-template='article'] .blog-post-featured-image {
    max-width: var(--normal-content-width);
    margin-inline: auto;
  }

  main[data-template='article'] .blog-post-details {
    color: #7f7f6a;
  }

  main[data-template='article'] header h1,
  main[data-template='article'] header .text-block {
    color: #3b2a1c;
  }

  /* Cuerpo del artículo: misma jerarquía y colores que el resto del sitio
     (texto principal #3B2A1C, acentos/enlaces en terracota #B44C21). */
  main[data-template='article'] .blog-post-content {
    color: #3b2a1c;
    line-height: 1.7;
  }

  main[data-template='article'] .blog-post-content h2 {
    margin-top: 2em;
    color: #3b2a1c;
  }

  main[data-template='article'] .blog-post-content p {
    margin-block: 1em;
  }

  main[data-template='article'] .blog-post-content ul,
  main[data-template='article'] .blog-post-content ol {
    margin-block: 1em;
    padding-inline-start: 1.25em;
  }

  main[data-template='article'] .blog-post-content a {
    color: #b44c21;
  }
/* END_SECTION:blog-style-overrides */

/* START_SECTION:category-bar (INDEX:5) */
/* ===== Category Bar — Naliblu =====
     Fondo fijo #FAF6F1 (no usamos rgb(var(--color-background-rgb)) porque esa
     variable sale del color_scheme de la sección, que aquí no tiene un valor
     que dé exactamente #FAF6F1 — con !important evitamos que ese scheme
     dinámico la vuelva a pisar). */
  .category-bar {
    display: block;
    background: #FAF6F1 !important;
    padding-block: 28px;
  }

  /* 5-column grid a todo el ancho, con gap entre categorías — reparte el
     ancho total disponible de forma uniforme entre las 5, sin comprimir
     ni centrar el conjunto. */
  .category-bar__cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
  }

  .category-bar__card {
    position: relative;
  }

  /* Sin límite de ancho propio, .category-bar__link (el <a>) se estiraba a
     todo el ancho de su celda del grid (align-items:stretch por defecto en
     un item de grid) — mucho más ancho que la imagen/título centrados
     dentro, así que el hueco entre categorías seguía siendo clicable
     aunque el hover ya no se activara ahí. width:fit-content + margin
     auto encoge el enlace a su contenido real (imagen o título, lo que
     sea más ancho) y lo centra en la celda — fuera de ese ancho ya no hay
     enlace debajo del cursor. */
  .category-bar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin-inline: auto;
    gap: 10px;
    text-decoration: none;
  }

  /* Círculo de producto — las 5 fotos vienen ya recortadas al mismo tamaño
     exacto (círculo a bordes del lienzo), sin necesidad de ajuste por CSS.
     clip-path: circle(50%) recorta también el área de hover/click de la
     propia imagen a un círculo real — antes el hover se activaba con todo
     el rectángulo de .category-bar__link (imagen + título + huecos en las
     esquinas fuera del círculo visible); ahora el :hover se dispara sobre
     la imagen y solo dentro de esa forma circular. */
  .category-bar__image {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    clip-path: circle(50%);
    transition: transform 0.2s ease;
  }

  /* El <a> (.category-bar__link) sigue envolviendo imagen + título, así que
     el texto sigue siendo clicable hacia la misma colección — solo cambia
     dónde se dispara la animación de hover (ahora: encima de la imagen,
     dentro del círculo, no en todo el rectángulo del enlace). */
  .category-bar__image:hover {
    transform: scale(1.03);
  }

  /* Título — SIEMPRE 2 líneas con el corte fijado por idioma
     (custom.category_*_lines en locales, "línea 1|línea 2"), igual que los
     círculos de Tienda (tienda-category-explorer.liquid). Misma familia
     tipográfica que el menú principal (var(--font-heading--family)).
     Flex + align-items:center: si una línea sobresale un poco del ancho
     del círculo, lo hace por igual a los dos lados. Sin max-width (con
     nowrap solo empujaría la línea hacia la derecha). Si la línea más
     larga no cabe en su columna, el script inline de abajo reduce la letra
     de los 5 títulos a la vez. */
  .category-bar__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-heading--family);
    font-size: 17px;
    font-weight: 500;
    color: #7F7F6A;
    text-align: center;
    line-height: 1.3;
  }

  .category-bar__title .cat-line {
    display: block;
    white-space: nowrap;
    text-wrap: nowrap;
    text-align: center;
  }

  @media screen and (max-width: 749px) {
    .category-bar__cards {
      gap: 10px;
      padding-block: 16px;
      /* Margen lateral sutil solo en móvil, para que la 1ª y 5ª categoría
         no queden pegadas al borde de la pantalla. */
      padding-inline: 14px;
    }

    .category-bar__link {
      gap: 6px;
    }

    .category-bar__title {
      font-size: clamp(12px, 2.8vw, 14.5px);
    }
  }
/* END_SECTION:category-bar */

/* START_SECTION:category-breadcrumb (INDEX:6) */
.category-breadcrumb {
    background: #FAF6F1;
    padding-block: 14px;
  }

  .category-breadcrumb__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding-inline: var(--page-margin, 24px);
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    font-size: 13px;
  }

  .category-breadcrumb__link {
    color: #7F7F6A;
    text-decoration: none;
  }

  .category-breadcrumb__link:hover {
    color: #B44C21;
    text-decoration: underline;
  }

  .category-breadcrumb__item--current {
    color: #3B2A1C;
    font-weight: 500;
  }

  .category-breadcrumb__item:not(.category-breadcrumb__item--current)::after {
    content: '/';
    margin-inline-start: 8px;
    margin-inline-end: 8px;
    color: #7F7F6A;
  }

  @media screen and (max-width: 749px) {
    .category-breadcrumb__list {
      font-size: 12px;
    }
  }
/* END_SECTION:category-breadcrumb */

/* START_SECTION:category-hero (INDEX:7) */
.category-hero {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
  }

  .category-hero__media,
  .category-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .category-hero__image {
    display: block;
    object-fit: cover;
    object-position: center 40%;
  }

  .category-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(59, 42, 28, 0.6) 0%,
      rgba(59, 42, 28, 0.4) 30%,
      rgba(59, 42, 28, 0) 62%
    );
  }

  .category-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    max-width: 480px;
    padding-inline-start: max(56px, var(--page-margin, 24px));
    padding-inline-end: 32px;
    box-sizing: border-box;
  }

  .category-hero__label {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(250, 246, 241, 0.85);
  }

  .category-hero__title {
    margin: 0 0 16px;
    max-width: 380px;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 2rem;
    line-height: 1.2;
    color: #faf6f1;
  }

  .category-hero__description {
    margin: 0 0 24px;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(250, 246, 241, 0.9);
  }

  .category-hero__button {
    display: inline-block;
    background: #a8a791;
    color: #3b2a1c;
    border: 1.5px solid rgba(250, 246, 241, 0.5);
    border-radius: 24px;
    padding: 10px 22px;
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .category-hero__button:hover {
    background: #faf6f1;
    color: #7f7f6a;
    border-color: rgba(127, 127, 106, 0.4);
  }

  @media screen and (max-width: 749px) {
    .category-hero {
      height: 340px;
    }

    .category-hero__content {
      max-width: 86%;
      padding-inline-start: 20px;
      padding-inline-end: 20px;
    }
  }
/* END_SECTION:category-hero */

/* START_SECTION:category-nav-bar (INDEX:8) */
.category-nav-section {
    padding: 20px 0 4px;
  }

  /* Page-width wrapper */
  .category-nav__wrapper {
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
    padding: 0 var(--page-margin, 24px);
  }

  /* The card / recuadro */
  .category-nav__card {
    border: 1.5px solid rgba(var(--color-foreground-rgb), 0.1);
    border-radius: 14px;
    background: rgb(var(--color-background-rgb));
    position: relative;
  }

  /* Grid — dividers via border-right */
  .category-nav__grid {
    display: grid !important;
    grid-template-columns: repeat(var(--cat-columns, 5), 1fr);
  }

  @media screen and (max-width: 749px) {
    .category-nav__grid {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }

  @media screen and (max-width: 479px) {
    .category-nav__grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  /* Item */
  .category-nav__item {
    position: relative;
    border-right: 1px solid rgba(var(--color-foreground-rgb), 0.08);
  }

  .category-nav__item:last-child {
    border-right: none;
  }

  .category-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 10px 16px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
    border-radius: inherit;
  }

  .category-nav__link:hover {
    background: rgba(var(--color-foreground-rgb), 0.04);
    text-decoration: none;
  }

  /* Round card corners on first/last items */
  .category-nav__item:first-child .category-nav__link {
    border-radius: 12px 0 0 12px;
  }

  .category-nav__item:last-child .category-nav__link {
    border-radius: 0 12px 12px 0;
  }

  /* Icon square */
  .category-nav__icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(var(--color-foreground-rgb), 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease;
  }

  .category-nav__link:hover .category-nav__icon-wrap {
    transform: translateY(-2px);
    background: rgba(var(--color-foreground-rgb), 0.1);
  }

  .category-nav__emoji {
    font-size: 1.5rem;
    line-height: 1;
  }

  .category-nav__icon-letter {
    font-size: 1.25rem;
    font-weight: 600;
    opacity: 0.5;
  }

  /* Text */
  .category-nav__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .category-nav__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgb(var(--color-foreground-rgb));
    line-height: 1.3;
  }

  .category-nav__sublabel {
    font-size: 0.68rem;
    color: rgba(var(--color-foreground-rgb), 0.55);
    line-height: 1.2;
  }

  .category-nav__badge {
    display: inline-block;
    font-size: 0.63rem;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(var(--color-foreground-rgb), 0.08);
    color: rgba(var(--color-foreground-rgb), 0.65);
    border: 1px solid rgba(var(--color-foreground-rgb), 0.1);
  }

  .category-nav__caret {
    color: rgba(var(--color-foreground-rgb), 0.35);
    display: flex;
    align-items: center;
    transition: transform 0.15s ease;
  }

  .category-nav__item--has-submenu:hover .category-nav__caret {
    transform: rotate(180deg);
  }

  /* Submenu dropdown */
  .category-nav__submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 190px;
    background: rgb(var(--color-background-rgb));
    border: 1px solid rgba(var(--color-foreground-rgb), 0.1);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    z-index: var(--layer-overlay, 400);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .category-nav__item--has-submenu:hover .category-nav__submenu,
  .category-nav__item--has-submenu:focus-within .category-nav__submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* Keep first item dropdown from going off-screen left */
  .category-nav__item:first-child .category-nav__submenu {
    left: 0;
    transform: translateY(-4px);
  }

  .category-nav__item:first-child:hover .category-nav__submenu,
  .category-nav__item:first-child:focus-within .category-nav__submenu {
    transform: translateY(0);
  }

  .category-nav__submenu-list {
    padding: 6px 0;
    margin: 0;
    list-style: none;
  }

  .category-nav__submenu-link {
    display: block;
    padding: 9px 16px;
    font-size: 0.8rem;
    color: rgb(var(--color-foreground-rgb));
    text-decoration: none;
    transition: background 0.1s ease;
    white-space: nowrap;
  }

  .category-nav__submenu-link:hover {
    background: rgba(var(--color-foreground-rgb), 0.05);
    text-decoration: none;
  }
/* END_SECTION:category-nav-bar */

/* START_SECTION:category-selection-heading (INDEX:9) */
.category-selection-heading {
    background: #FAF6F1;
    padding-block: 40px 64px;
    scroll-margin-top: var(--header-height, 80px);
  }

  .category-selection-heading__title {
    max-width: var(--page-width, 1400px);
    margin: 0 auto;
    padding-inline: var(--page-margin, 24px);
    color: #3B2A1C;
    font-family: var(--font-heading--family);
    text-align: center;
  }

  @media screen and (max-width: 749px) {
    .category-selection-heading {
      padding-block: 28px 40px;
    }
  }
/* END_SECTION:category-selection-heading */

/* START_SECTION:category-style (INDEX:10) */
main[data-template='collection.jugar-y-aprender'] .product-grid-container,
  main[data-template='collection.crecer-con-calma'] .product-grid-container,
  main[data-template='collection.detalles-con-alma'] .product-grid-container {
    background: #FAF6F1 !important;
  }

  /* Arched top corners on product-card images, matching the requested
     Cesto de los tesoros card shape. */
  main[data-template='collection.jugar-y-aprender'] .card-gallery,
  main[data-template='collection.crecer-con-calma'] .card-gallery,
  main[data-template='collection.detalles-con-alma'] .card-gallery {
    border-radius: 50% 50% 6px 6px / 30% 30% 6px 6px !important;
    overflow: hidden;
    /* Mismo arco también como clip-path: border-radius + overflow:hidden NO
       recorta el carrusel de fotos (tarjetas con varias imágenes: productos
       con variantes o personalizables), que el navegador pinta en otra capa
       — por eso esas tarjetas salían sin arco. clip-path sí lo recorta. */
    clip-path: inset(0 round 50% 50% 6px 6px / 30% 30% 6px 6px) !important;
  }

  /* Force 4 columns on desktop; mobile already defaults to 2 columns. */
  @media screen and (min-width: 750px) {
    main[data-template='collection.jugar-y-aprender'] .product-grid,
    main[data-template='collection.crecer-con-calma'] .product-grid,
    main[data-template='collection.detalles-con-alma'] .product-grid {
      --product-grid-columns-desktop: repeat(4, 1fr) !important;
    }
  }
/* END_SECTION:category-style */

/* START_SECTION:cesto-breadcrumb (INDEX:11) */
.cesto-breadcrumb {
    background: #FAF6F1;
    padding-block: 14px;
  }

  .cesto-breadcrumb__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding-inline: var(--page-margin, 24px);
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    font-size: 13px;
  }

  .cesto-breadcrumb__link {
    color: #7F7F6A;
    text-decoration: none;
  }

  .cesto-breadcrumb__link:hover {
    color: #B44C21;
    text-decoration: underline;
  }

  .cesto-breadcrumb__item--current {
    color: #3B2A1C;
    font-weight: 500;
  }

  .cesto-breadcrumb__item:not(.cesto-breadcrumb__item--current)::after {
    content: '/';
    margin-inline-start: 8px;
    margin-inline-end: 8px;
    color: #7F7F6A;
  }

  @media screen and (max-width: 749px) {
    .cesto-breadcrumb__list {
      font-size: 12px;
    }
  }
/* END_SECTION:cesto-breadcrumb */

/* START_SECTION:cesto-category-header (INDEX:12) */
.cesto-category-header {
    background: #EADACB;
    padding-block: 40px;
  }

  .cesto-category-header__inner {
    display: flex;
    align-items: center;
    gap: 36px;
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 24px);
  }

  .cesto-category-header__image-wrap {
    flex-shrink: 0;
  }

  .cesto-category-header__image {
    display: block;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
  }

  .cesto-category-header__image--placeholder {
    overflow: hidden;
    background: #FAF6F1;
  }

  .cesto-category-header__image--placeholder svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cesto-category-header__title {
    margin: 0 0 12px;
    color: #3B2A1C;
    font-family: var(--font-heading--family);
  }

  .cesto-category-header__description {
    color: #3B2A1C;
    max-width: 620px;
    line-height: 1.5;
  }

  @media screen and (max-width: 749px) {
    .cesto-category-header__inner {
      flex-direction: column;
      text-align: center;
      gap: 20px;
    }

    .cesto-category-header__image,
    .cesto-category-header__image--placeholder {
      width: 130px;
      height: 130px;
    }
  }
/* END_SECTION:cesto-category-header */

/* START_SECTION:cesto-collection-style (INDEX:13) */
main[data-template='collection.cesto-de-los-tesoros'] .product-grid-container {
    background: #FAF6F1 !important;
  }

  /* Arched top corners on product-card images, matching the requested
     Cesto de los tesoros card shape. */
  main[data-template='collection.cesto-de-los-tesoros'] .card-gallery {
    border-radius: 50% 50% 6px 6px / 30% 30% 6px 6px !important;
    overflow: hidden;
    /* Mismo arco también como clip-path: border-radius + overflow:hidden NO
       recorta el carrusel de fotos (tarjetas con varias imágenes: productos
       con variantes o personalizables), que el navegador pinta en otra capa
       — por eso esas tarjetas salían sin arco. clip-path sí lo recorta. */
    clip-path: inset(0 round 50% 50% 6px 6px / 30% 30% 6px 6px) !important;
  }

  /* Force 4 columns on desktop; mobile already defaults to 2 columns. */
  @media screen and (min-width: 750px) {
    main[data-template='collection.cesto-de-los-tesoros'] .product-grid {
      --product-grid-columns-desktop: repeat(4, 1fr) !important;
    }
  }
/* END_SECTION:cesto-collection-style */

/* START_SECTION:cesto-hero (INDEX:14) */
.cesto-hero {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
  }

  .cesto-hero__media,
  .cesto-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .cesto-hero__image {
    display: block;
    object-fit: cover;
    object-position: center 40%;
  }

  .cesto-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(59, 42, 28, 0.6) 0%,
      rgba(59, 42, 28, 0.4) 30%,
      rgba(59, 42, 28, 0) 62%
    );
  }

  .cesto-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    max-width: 480px;
    padding-inline-start: max(56px, var(--page-margin, 24px));
    padding-inline-end: 32px;
    box-sizing: border-box;
  }

  .cesto-hero__label {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(250, 246, 241, 0.85);
  }

  .cesto-hero__title {
    margin: 0 0 16px;
    max-width: 380px;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 2rem;
    line-height: 1.2;
    color: #faf6f1;
  }

  .cesto-hero__description {
    margin: 0 0 24px;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(250, 246, 241, 0.9);
  }

  .cesto-hero__button {
    display: inline-block;
    background: #a8a791;
    color: #3b2a1c;
    border: 1.5px solid rgba(250, 246, 241, 0.5);
    border-radius: 24px;
    padding: 10px 22px;
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .cesto-hero__button:hover {
    background: #faf6f1;
    color: #7f7f6a;
    border-color: rgba(127, 127, 106, 0.4);
  }

  @media screen and (max-width: 749px) {
    .cesto-hero {
      height: 340px;
    }

    .cesto-hero__content {
      max-width: 86%;
      padding-inline-start: 20px;
      padding-inline-end: 20px;
    }
  }
/* END_SECTION:cesto-hero */

/* START_SECTION:cesto-material-explorer (INDEX:15) */
.cesto-material-explorer {
    background: #FAF6F1;
    padding-block: 40px;
    scroll-margin-top: var(--header-height, 80px);
  }

  .cesto-material-explorer__inner {
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 24px);
  }

  .cesto-material-explorer__title {
    margin: 0 0 64px;
    color: #3B2A1C;
    font-family: var(--font-heading--family);
    text-align: center;
  }

  /* Same technique as .category-bar__cards (home): CSS grid with a fixed
     column count that never wraps, so every breakpoint just shrinks the
     columns instead of reflowing into extra rows.
     minmax(0, 1fr) en vez de solo 1fr: por defecto un track "1fr" no baja
     de su contenido mínimo (min-content) — con 7 columnas apretadas en
     mobile, la etiqueta más larga (p.ej. "Translúcidos" o "Elementos
     naturales") empujaba SU columna más ancha que las demás, y como el
     círculo es width:100% de su columna, salía más grande que el resto.
     minmax(0, 1fr) fuerza las 7 columnas a ser exactamente iguales pase
     lo que pase con el texto. */
  .cesto-material-explorer__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 24px;
  }

  .cesto-material-explorer__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
  }

  .cesto-material-explorer__circle {
    display: block;
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: #EADACB;
    margin-inline: auto;
  }

  /* Anillo terracota "por fuera" del círculo cuando su subcategoría está
     activa (filtro aplicado sin cambiar de URL, ver subcategory-filter.js).
     Dos box-shadow en vez de outline: respeta el border-radius en todos
     los navegadores y deja un hueco (color de fondo de la sección) antes
     del anillo, en vez de pegarlo al borde de la imagen. */
  .subcategory-filter__link.is-active .subcategory-filter__circle {
    box-shadow: 0 0 0 4px #FAF6F1, 0 0 0 7px #B44C21;
  }

  .cesto-material-explorer__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
  }

  .cesto-material-explorer__item:hover .cesto-material-explorer__image {
    transform: scale(1.05);
  }

  .cesto-material-explorer__label {
    font-family: var(--font-heading--family);
    font-size: 15px;
    font-weight: 500;
    color: #7F7F6A;
    text-align: center;
    line-height: 1.3;
    overflow-wrap: break-word;
  }

  @media screen and (max-width: 749px) {
    .cesto-material-explorer {
      padding-block: 28px;
    }

    .cesto-material-explorer__title {
      margin: 0 0 40px;
    }

    .cesto-material-explorer__grid {
      gap: 10px;
    }

    .cesto-material-explorer__label {
      font-size: clamp(10px, 2.4vw, 12.5px);
    }
  }
/* END_SECTION:cesto-material-explorer */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:contact-page-blocks (INDEX:18) */
.contact-blocks-wrap {
    position: relative;
    padding-block: 48px 72px;
  }

  .contact-blocks {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin-inline: auto;
    padding-inline: var(--page-margin, 24px);
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .contact-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: 20px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .contact-card--whatsapp,
  .contact-card--email {
    cursor: pointer;
  }

  .contact-card--whatsapp:hover,
  .contact-card--email:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(59, 42, 28, 0.14);
  }

  .contact-card--whatsapp {
    background: #D4E4D9;
  }

  .contact-card--email {
    background: #EADACB;
  }

  .contact-card__icon-circle {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contact-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .contact-card__title {
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: 1.05rem;
    color: #3B2A1C;
  }

  .contact-card__subtitle {
    font-family: var(--font-body--family);
    font-size: 0.9rem;
    color: #7F7F6A;
  }

  .contact-card__subtitle--terracota {
    color: #B44C21;
    font-weight: 600;
  }

  .contact-card--form {
    background: #ffffff;
    border: 1px solid #EADACB;
    border-radius: 20px;
    padding: 28px;
    display: block;
  }

  .contact-card__form-title {
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: 1.05rem;
    color: #3B2A1C;
    margin: 0 0 20px;
  }

  .contact-blocks__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .contact-blocks__row {
    display: flex;
    gap: 16px;
  }

  .contact-blocks__row .contact-blocks__field {
    flex: 1 1 0;
    min-width: 0;
  }

  .contact-blocks__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .contact-blocks__field label {
    font-family: var(--font-body--family);
    font-size: 0.85rem;
    font-weight: 600;
    color: #3B2A1C;
  }

  .contact-blocks__required {
    color: #B44C21;
  }

  .contact-blocks__field input,
  .contact-blocks__field textarea {
    font-family: var(--font-body--family);
    font-size: 0.95rem;
    color: #3B2A1C;
    background: #FAF6F1;
    border: 1px solid #EADACB;
    border-radius: 10px;
    padding: 12px 14px;
  }

  .contact-blocks__field textarea {
    resize: vertical;
    min-height: 100px;
  }

  .contact-blocks__input--invalid {
    border-color: #B44C21 !important;
  }

  .contact-blocks__field-error {
    font-family: var(--font-body--family);
    font-size: 0.8rem;
    color: #B44C21;
  }

  .contact-blocks__submit {
    font-family: var(--font-body--family);
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    background: #EADACB;
    color: #7F7F6A;
    cursor: not-allowed;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .contact-blocks__submit:not(:disabled) {
    background: #B44C21;
    color: #FAF6F1;
    cursor: pointer;
  }

  .contact-blocks__submit:not(:disabled):hover {
    background: #9c4019;
  }

  .contact-blocks__required-note {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 0.8rem;
    color: #7F7F6A;
  }

  .contact-blocks__message {
    padding: 12px 16px;
    border-radius: 10px;
    font-family: var(--font-body--family);
    font-size: 0.9rem;
  }

  .contact-blocks__message--error {
    background: #f7e2da;
    color: #B44C21;
  }

  @media screen and (max-width: 599px) {
    .contact-blocks__row {
      flex-direction: column;
    }

    .contact-card {
      padding: 18px;
      gap: 14px;
    }

    .contact-card__icon-circle {
      width: 44px;
      height: 44px;
    }
  }

  @media screen and (max-width: 749px) {
    /* Evita el zoom automático de iOS al enfocar el input (font-size < 16px)
       — provoca el "scroll lateral" al quedar la página zoomeada. */
    .contact-blocks__field input,
    .contact-blocks__field textarea {
      font-size: 16px;
    }
  }
/* END_SECTION:contact-page-blocks */

/* START_SECTION:faq-style-overrides (INDEX:21) */
/* Tamaños de texto +2px sobre lo que ya calcula el tema (título, pregunta
     del acordeón y descripción/respuesta), usando calc() sobre la propia
     variable del tema en vez de un valor fijo, para no depender de cuál sea
     el tamaño base actual. */
  main[data-template='page.faq'] h1 {
    font-size: calc(var(--font-h1--size) + 2px) !important;
  }

  main[data-template='page.faq'] .details__header {
    font-size: calc(var(--font-h6--size) + 2px) !important;
    font-weight: bold !important;
  }

  main[data-template='page.faq'] .details-content .rte {
    font-size: calc(var(--font-paragraph--size) + 1px) !important;
    text-align: left !important;
  }

  /* Títulos de cada bloque (Envíos, Devoluciones, Productos y materiales,
     Personalización), no el título general de la página. */
  main[data-template='page.faq'] h4 {
    font-size: calc(var(--font-h5--size) + 3px) !important;
  }

  /* El texto de cada respuesta llevaba además un tope de ancho "de lectura"
     del propio tema (--max-width--body-normal, fijo en px, pensado para
     columnas de texto normales) por debajo de .text-block > * — combinado
     con la columna ya recortada a la mitad, hacía que las líneas saltaran
     tras muy pocas palabras. Se quita ese tope aquí para que la respuesta
     aproveche todo el ancho ya disponible de la columna. */
  main[data-template='page.faq'] .details-content .text-block > * {
    max-inline-size: calc(100% - 3em) !important;
  }

  /* Los acordeones ocupaban todo el ancho de la página para muy poco texto
     y quedaban "pobres" — se recorta a la mitad del ancho que tenían,
     centrado con márgenes grandes a ambos lados. calc() sobre
     --page-width (no un 50% a secas) porque un % puro se calcularía sobre
     el contenedor de sección casi a todo el ancho de la ventana, no sobre
     el ancho de página que ya usaba el contenido. */
  main[data-template='page.faq'] .section-content-wrapper {
    max-width: calc(var(--page-width, 1400px) / 2) !important;
    margin-inline: auto !important;
  }

  /* Enlaces dentro de las respuestas (WhatsApp, email, Contacto, ancla a
     Personalización): mismo terracota que el resto del sitio. */
  main[data-template='page.faq'] .details-content .rte a {
    color: #b44c21;
  }
/* END_SECTION:faq-style-overrides */

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

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

  .featured-product-section {
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

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

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

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

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

  @media screen and (min-width: 750px) {
    .featured-product-section .product-card__content {
      --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio, var(--media-preview-ratio)));
      width: min(100%, var(--hugged-width));
      margin-left: auto;
      margin-right: auto;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer-utilities (INDEX:25) */
.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:footer (INDEX:26) */
/* ===== Naliblu footer =====
     Dos bloques visualmente separados:
     1) .nb-news-wrap — tarjeta de suscripción independiente, mismo estilo
        que el popup (fondo #DEDED3, esquinas redondeadas, sombra).
     2) .nb-inner — footer inferior (marca/columnas/redes/copyright) con su
        estructura y espaciados ORIGINALES intactos; el único cambio es el
        fondo, ahora marfil #FAF6F1 (antes salvia #d4e4d9).
     Tinta principal #463a2c · secundaria 62% · acento terracota #B44C21
     Tipos: Cormorant Garamond (titulares) + Karla (cuerpo) */
  @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Karla:wght@300;400;500;600&display=swap');

  .nb-footer {
    --nb-ink: #463a2c;
    --nb-muted: rgba(70, 58, 44, .62);
    --nb-line: rgba(70, 58, 44, .15);
    --nb-input: #FAF6F1;
    --nb-accent: #B44C21;

    background: #FAF6F1;
    color: var(--nb-ink);
    font-family: 'Karla', system-ui, sans-serif;
  }

  /* Línea separadora encima de la tarjeta — mismo .nb-rule que la de abajo.
     Espacio "antes" de la línea: lo aporta el padding-block-end de la
     sección anterior (Destacados), igual que la línea de abajo no tiene
     padding propio antes y depende del padding-bottom de la tarjeta.
     Espacio "después" (hasta la tarjeta): 44px, calculado para que el hueco
     total de arriba (48px de la sección anterior + estos 44px = 92px) sea
     exactamente igual al hueco total de abajo (40px de la tarjeta + 52px de
     .nb-cols = 92px). */
  .nb-top-rule-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
  }

  /* En Tienda y en las páginas de colección, la barra de paginación de
     snippets/product-grid.liquid ya pone su propia línea justo encima de
     esta tarjeta (pagination-bar--bottom) — sin esto quedarían las dos
     líneas duplicadas, una detrás de otra. */
  main[data-template='page.tienda'] ~ footer .nb-top-rule-wrap,
  main[data-template^='collection'] ~ footer .nb-top-rule-wrap {
    display: none;
  }

  /* ===== 1) Tarjeta de suscripción — independiente, estilo popup ===== */
  .nb-news-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 40px 40px;
  }

  .nb-news {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    max-width: 640px;
    margin: 0 auto;
    background: var(--nb-olive-light, #DEDED3);
    border-radius: 20px;
    padding: 48px 44px;
  }

  .nb-news__copy {
    max-width: 420px;
  }

  .nb-news__copy h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 34px;
    line-height: 1.1;
    margin: 0 0 12px;
  }

  .nb-news__copy p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--nb-muted);
  }

  .nb-news__form {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--nb-input);
    border: 1px solid var(--nb-line);
    border-radius: 999px;
    padding: 7px 8px 7px 24px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
  }

  .nb-news__form input[type='email'] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    /* En móvil, sin este reset, algunos navegadores (Safari/Chrome iOS)
       pintan su propio fondo/chrome nativo sobre el input, tapando el
       marfil de la píldora (.nb-news__form) que hay detrás. */
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    -webkit-text-fill-color: var(--nb-ink);
    font-family: 'Karla', sans-serif;
    font-size: 15px;
    color: var(--nb-ink);
    min-width: 0;
  }

  .nb-news__form button {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: none;
    background: var(--nb-accent);
    color: #fbf6f0;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .15s ease;
  }

  .nb-news__form button:hover {
    transform: translateX(2px);
  }

  .nb-news__message {
    position: absolute;
    top: 100%;
    left: 24px;
    margin: 6px 0 0;
    font-size: 12.5px;
  }

  .nb-news__message--error {
    color: #b23b1f;
  }

  @media screen and (max-width: 749px) {
    .nb-top-rule-wrap {
      padding-inline: 24px;
    }

    .nb-news-wrap {
      /* Más aire que antes alrededor de la tarjeta en móvil (antes 12px
         arriba / 8px abajo, se notaba apretado). */
      padding: 28px 24px 28px;
    }

    .nb-news {
      padding: 40px 26px 32px;
      gap: 18px;
    }

    /* Evita el zoom automático de iOS al enfocar el input (font-size < 16px)
       — provoca el "scroll lateral" al quedar la página zoomeada. Mismo fix
       que ya tiene snippets/newsletter-popup.liquid. */
    .nb-news__form input[type='email'] {
      font-size: 16px;
    }
  }

  /* ===== 2) Footer inferior — original intacto, solo cambia el fondo ===== */
  .nb-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 30px;
  }

  .nb-rule {
    height: 1px;
    background: var(--nb-line);
    width: 100%;
  }

  /* Columns — 4 columnas de enlaces repartidas a partes iguales en todo el
     ancho que antes ocupaban marca + 4 columnas (ya sin bloque de marca).
     Mismo gap y mismo padding de siempre, así que el ancho total y la
     altura de la sección no cambian.
     Flexbox en vez de grid: cada .nb-col lleva flex:1 1 0, que reparte el
     ancho a partes EXACTAMENTE iguales sin importar cuánto contenido tenga
     cada columna (flex-basis:0 ignora el contenido a la hora de repartir).
     Con grid + minmax(0,1fr) las columnas ya eran iguales en teoría, pero
     el bloque no llegaba al borde derecho — flex es más simple y directo
     para este caso. */
  .nb-cols {
    display: flex;
    width: 100%;
    gap: 32px;
    padding: 52px 0 44px;
  }

  .nb-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 4px;
  }

  /* Título de columna — <button> en las 3 columnas de enlaces (acordeón
     solo-JS en móvil), <div> simple en "Síguenos". Reset de <button> para
     que se vea igual que el <div> original: con un solo hijo visible (el
     texto; el chevron está display:none salvo en móvil) justify-content:
     space-between no cambia su posición, así que en desktop es idéntico. */
  .nb-col__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-align: left;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--nb-muted);
    margin: 0 0 14px;
    cursor: default;
  }

  .nb-col__chevron {
    display: none;
    flex: none;
  }

  .nb-col__chevron svg {
    display: block;
  }

  .nb-col__links {
    display: flex;
    flex-direction: column;
  }

  /* Sin esto, el atributo "hidden" que pone el script en móvil no tendría
     efecto: una regla de autor normal (display:flex de arriba) siempre gana
     al display:none del user-agent para [hidden], sea cual sea su
     especificidad — hace falta declararlo explícitamente aquí. */
  .nb-col__links[hidden] {
    display: none;
  }

  .nb-col a {
    text-decoration: none;
    color: var(--nb-ink);
    font-size: 14.5px;
    padding: 5px 0;
    display: block;
    transition: opacity .15s ease, color .15s ease;
  }

  .nb-col a:hover {
    opacity: .6;
  }

  .nb-social__icons {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .nb-social__icons a {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .nb-social__icons a:hover {
    opacity: 1;
    color: var(--nb-accent);
  }

  .nb-social__icons svg {
    flex: none;
  }

  /* Bottom bar */
  .nb-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    align-items: center;
    padding-top: 26px;
  }

  .nb-bottom__copy {
    font-size: 13px;
    color: var(--nb-muted);
  }

  @media (max-width: 860px) {
    .nb-cols {
      grid-template-columns: 1fr 1fr;
      gap: 36px 24px;
    }
  }

  @media (max-width: 520px) {
    .nb-cols {
      grid-template-columns: 1fr;
    }
  }

  /* ===== Footer inferior en móvil: tarjeta redondeada independiente =====
     Colocado al final a propósito: todas las reglas de arriba (.nb-inner,
     .nb-cols, .nb-brand, .nb-col, .nb-social__icons a...) son igual de
     específicas que estas — si este bloque no fuera el último del hoja de
     estilos, esas reglas base (que se aplican siempre, no están dentro de
     ningún @media) ganarían el empate de cascada por ir después en el
     código, y estas reglas móviles no se aplicarían nunca.
     .nb-footer ya es marfil #FAF6F1 en todas partes (regla base, más
     arriba) — antes esta tarjeta ponía .nb-footer en transparente para
     contrastar con el fondo real de la página, pero eso dejaba SIN marfil
     el espacio alrededor de la tarjeta de suscripción también (mismo
     .nb-footer). Ahora todo el footer es marfil de forma consistente, y
     esta tarjeta se distingue solo por sus esquinas redondeadas (sin sombra,
     que generaba una franja oscura justo debajo, como un cambio de color). */
  @media screen and (max-width: 749px) {
    .nb-inner {
      background: #FAF6F1;
      border-radius: 24px;
      margin: 0 12px 16px;
      padding: 4px 20px 20px;
    }

    /* Línea separadora entre la tarjeta de suscripción y los desplegables —
       antes se ocultaba en móvil (el hueco entre tarjetas parecía
       suficiente), pero sin ella no se distinguía bien dónde acaba una y
       empieza la otra. */
    .nb-rule--top {
      display: block;
      margin-bottom: 4px;
    }

    .nb-cols {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 20px 0 0;
    }

    /* Acordeón: cada bloque (Tienda/Naliblu/Ayuda/Síguenos) con línea
       separadora fina encima, salvo el primero (Tienda), que ahora es el
       primer elemento visible del footer — sin el bloque de marca encima,
       una línea justo bajo el borde redondeado de la tarjeta quedaría rara.
       flex:none anula el flex:1 1 0 de desktop (pensado para repartir 4
       columnas en fila) — en móvil .nb-cols es una columna vertical, así
       que cada acordeón debe medir según su contenido, no estirarse. */
    .nb-col {
      border-top: 1px solid var(--nb-line);
      flex: none;
      gap: 0;
    }

    .nb-cols > .nb-col:first-child {
      border-top: none;
    }

    .nb-col__title {
      margin: 0;
      padding: 16px 0;
      cursor: pointer;
    }

    .nb-col__chevron {
      display: flex;
    }

    .nb-col__links {
      padding: 2px 0 16px;
    }

    /* Síguenos: "SÍGUENOS" y los 3 iconos en una misma fila, alineados a la
       izquierda (antes: título arriba centrado + iconos centrados debajo). */
    .nb-social {
      flex-direction: row;
      align-items: center;
      gap: 14px;
    }

    .nb-social .nb-col__title {
      width: auto;
      flex: none;
      margin: 0;
      justify-content: flex-start;
      cursor: default;
    }

    .nb-social__icons {
      flex-direction: row;
      justify-content: flex-start;
      gap: 16px;
    }

    .nb-social__label {
      display: none;
    }

    /* Copyright alineado a la izquierda (antes centrado) */
    .nb-bottom {
      justify-content: flex-start;
      text-align: left;
      padding-top: 20px;
    }
  }
/* END_SECTION:footer */

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

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    position: relative;

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

  /* Sin el tope de 480px de Horizon en desktop: con él, "¡10% de descuento
     en tu primer pedido! Descúbrelo aquí ✨" partía en 2 líneas aunque
     sobrase espacio. Ahora solo envuelve cuando de verdad no cabe (el
     slider ya está limitado a max-width: 100%). */
  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    max-width: 100%;
  }

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

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

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

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

  /* Bug real encontrado por inspección en vivo: el bloque (blocks/_announcement.liquid)
     pone --text-align: center como variable CSS en <slideshow-slide>, pero
     ninguna regla del tema la consume (var(--text-align) no aparece en
     ningún selector) — es una variable muerta. El resultado real medido:
     .announcement-bar__text queda con text-align:start (por defecto del
     navegador) ocupando el 100% del ancho de .announcement-bar__slides
     (680px), así que el texto se pega al borde izquierdo de una caja que
     SÍ está bien centrada — parece que "la barra" está descentrada, pero
     es el texto dentro. Poco perceptible en mobile (el texto envuelve a 2
     líneas casi a ancho completo, apenas queda hueco que delate la
     diferencia); muy visible en desktop, donde el texto es bastante más
     corto que los 680px de la caja. */
  .announcement-bar__text {
    text-align: center;
  }

  /* Móvil: nunca más de una línea. El tamaño de letra lo ajusta el script
     inline de esta sección para que el anuncio quepa entero. */
  /* Especificidad doble a propósito: la regla nativa ".custom-typography > *"
     (base.css) pone text-wrap: var(--text-wrap) en este mismo <p>, y en los
     navegadores actuales text-wrap también decide si se puede partir la
     línea — con la misma especificidad ganaba ella y "Descúbrelo aquí ✨"
     bajaba a una segunda línea. */
  @media screen and (max-width: 749px) {
    .announcement-bar .announcement-bar__text {
      white-space: nowrap;
      text-wrap: nowrap;
      /* 2px más de alto: con line-height 1 la parte de abajo de letras
         como la "g" quedaba ligeramente cortada. */
      padding-block-end: 2px;
    }
  }

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

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

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

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

  /* Megamenu push-down spacer — expands below the header to push hero content down */
  .megamenu-pusher {
    height: var(--megamenu-push-height, 0px);
    overflow: hidden;
    transition: height var(--submenu-animation-speed, 0.35s) var(--ease-out-cubic, cubic-bezier(0.4, 0, 0.2, 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);
  }


  /* ===== NALIBLU: header ===== */

  /* Fondo unificado #FAF6F1 + línea divisoria pegada al header sticky.
     El color visible real NO lo pinta el fondo de #header-component: lo pinta
     .header__underlay-closed/-open, un div hijo position:absolute;inset:0 que
     dibuja un linear-gradient() con las variables --color-scheme-top-row /
     --color-scheme-bottom-row. Esas variables se definen inline en el propio
     <header-component style="..."> a partir de color_scheme_top (ajustes del
     tema), así que un "background" normal aquí queda tapado por ese gradiente.
     Hay que sobreescribir esas mismas variables, con !important para ganarle
     al valor inline. */
  #header-component {
    --color-scheme-top-row: #FAF6F1 !important;
    --color-scheme-bottom-row: #FAF6F1 !important;
    background: #FAF6F1;
    border-bottom: 1px solid #e0dbd2;
  }

  /* Menú centrado: logo izq | menú centrado | iconos der (layout por defecto
     del tema) — esta regla NO hace nada que el propio CSS nativo no haga ya
     (ver la regla ".header__columns:has(.header__column--center header-menu)"
     más arriba en este mismo archivo, que fija --header-left/--header-right
     a "minmax(max-content, 1fr)"). Aquí se sobreescribía con "1fr" a secas,
     sin el minmax — eso permitía que la columna del logo se encogiera por
     debajo de su ancho real entre ~820-1000px (el rango donde el menú
     "menu-style" sigue activo porque overflow-list aún muestra sus 2
     elementos mínimos, pero la cabecera entera no tiene sitio real), y como
     el logo en sí no se encoge visualmente, se salía de su celda y quedaba
     superpuesto a "Inicio"/"Tienda". Quitada del todo: con el minmax nativo,
     a partir de 1280px se comporta exactamente igual que antes (no cambia
     nada ahí), y en móvil no aplica (ya estaba dentro de min-width: 750px). */

/* =====================================================
   NALIBLU — Selector idioma minimalista integrado
   ===================================================== */

/* Contenedor del selector */
#header-component .dropdown-localization {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: transparent !important;
  position: relative !important;
}

@media screen and (max-width: 749px) {
  #header-component .dropdown-localization {
    display: none !important;
  }
}

/* Selector visible: Español */
#header-component .dropdown-localization .language-selector,
#header-component .dropdown-localization .localization-form__select,
#header-component .dropdown-localization select {
  appearance: none !important;
  -webkit-appearance: none !important;

  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color: #3a2e24 !important;
  font-size: 16px !important;
  line-height: 1 !important;

  padding: 0 18px 0 0 !important;
  margin: 0 !important;

  min-height: auto !important;
  height: auto !important;
  width: auto !important;

  cursor: pointer !important;
}

/* Flechita más cerca del idioma */
#header-component .dropdown-localization::after {
  content: "⌄";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-48%);
  color: #3a2e24;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

/* Elimina flechas/iconos nativos que separan demasiado */
#header-component .dropdown-localization svg,
#header-component .dropdown-localization .svg-wrapper,
#header-component .dropdown-localization .icon-caret {
  display: none !important;
}

/* Hover/focus del selector visible */
#header-component .dropdown-localization:hover,
#header-component .dropdown-localization:focus-within,
#header-component .dropdown-localization .language-selector:hover,
#header-component .dropdown-localization .language-selector:focus,
#header-component .dropdown-localization .localization-form__select:hover,
#header-component .dropdown-localization .localization-form__select:focus,
#header-component .dropdown-localization select:hover,
#header-component .dropdown-localization select:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #3a2e24 !important;
}

/* =====================================================
   NALIBLU — Selector idioma sin flecha
   ===================================================== */

#header-component .dropdown-localization,
#header-component .dropdown-localization .language-selector,
#header-component .dropdown-localization .localization-form,
#header-component .dropdown-localization .localization-form__select,
#header-component .dropdown-localization select {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #3a2e24 !important;
}

/* Elimina flecha nativa y deja el texto limpio */
#header-component .dropdown-localization select,
#header-component .dropdown-localization .language-selector,
#header-component .dropdown-localization .localization-form__select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;

  min-height: auto !important;
  height: auto !important;
  line-height: 1 !important;
  width: auto !important;

  cursor: pointer !important;
}

/* Elimina cualquier flecha extra que hayamos creado antes */
#header-component .dropdown-localization::after,
#header-component .dropdown-localization::before,
#header-component .dropdown-localization svg,
#header-component .dropdown-localization .svg-wrapper,
#header-component .dropdown-localization .icon-caret {
  display: none !important;
  content: none !important;
}

/* Hover/focus limpio */
#header-component .dropdown-localization:hover,
#header-component .dropdown-localization:focus-within,
#header-component .dropdown-localization select:hover,
#header-component .dropdown-localization select:focus,
#header-component .dropdown-localization .language-selector:hover,
#header-component .dropdown-localization .language-selector:focus,
#header-component .dropdown-localization .localization-form__select:hover,
#header-component .dropdown-localization .localization-form__select:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #3a2e24 !important;
}
/* END_SECTION:header */

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

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

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

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

    min-height: 600px;
  }

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

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

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

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

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

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

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

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

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

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

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

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

    .hero__media-wrapper--mobile {
      display: block;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:kits-breadcrumb (INDEX:30) */
.kits-breadcrumb {
    background: #FAF6F1;
    padding-block: 14px;
  }

  .kits-breadcrumb__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding-inline: var(--page-margin, 24px);
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    font-size: 13px;
  }

  .kits-breadcrumb__link {
    color: #7F7F6A;
    text-decoration: none;
  }

  .kits-breadcrumb__link:hover {
    color: #B44C21;
    text-decoration: underline;
  }

  .kits-breadcrumb__item--current {
    color: #3B2A1C;
    font-weight: 500;
  }

  .kits-breadcrumb__item:not(.kits-breadcrumb__item--current)::after {
    content: '/';
    margin-inline-start: 8px;
    margin-inline-end: 8px;
    color: #7F7F6A;
  }

  @media screen and (max-width: 749px) {
    .kits-breadcrumb__list {
      font-size: 12px;
    }
  }
/* END_SECTION:kits-breadcrumb */

/* START_SECTION:kits-collection-style (INDEX:31) */
main[data-template='collection.kits-naliblu'] .product-grid-container {
    background: #FAF6F1 !important;
  }

  /* Arched top corners on product-card images, matching the requested
     Cesto de los tesoros card shape. */
  main[data-template='collection.kits-naliblu'] .card-gallery {
    border-radius: 50% 50% 6px 6px / 30% 30% 6px 6px !important;
    overflow: hidden;
    /* Mismo arco también como clip-path: border-radius + overflow:hidden NO
       recorta el carrusel de fotos (tarjetas con varias imágenes: productos
       con variantes o personalizables), que el navegador pinta en otra capa
       — por eso esas tarjetas salían sin arco. clip-path sí lo recorta. */
    clip-path: inset(0 round 50% 50% 6px 6px / 30% 30% 6px 6px) !important;
  }

  /* Force 4 columns on desktop; mobile already defaults to 2 columns. */
  @media screen and (min-width: 750px) {
    main[data-template='collection.kits-naliblu'] .product-grid {
      --product-grid-columns-desktop: repeat(4, 1fr) !important;
    }
  }
/* END_SECTION:kits-collection-style */

/* START_SECTION:kits-hero (INDEX:32) */
.kits-hero {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
  }

  .kits-hero__media,
  .kits-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .kits-hero__image {
    display: block;
    object-fit: cover;
    object-position: center 40%;
  }

  .kits-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(59, 42, 28, 0.6) 0%,
      rgba(59, 42, 28, 0.4) 30%,
      rgba(59, 42, 28, 0) 62%
    );
  }

  .kits-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    max-width: 480px;
    padding-inline-start: max(56px, var(--page-margin, 24px));
    padding-inline-end: 32px;
    box-sizing: border-box;
  }

  .kits-hero__label {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(250, 246, 241, 0.85);
  }

  .kits-hero__title {
    margin: 0 0 16px;
    max-width: 380px;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 2rem;
    line-height: 1.2;
    color: #faf6f1;
  }

  .kits-hero__description {
    margin: 0 0 24px;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(250, 246, 241, 0.9);
  }

  .kits-hero__button {
    display: inline-block;
    background: #a8a791;
    color: #3b2a1c;
    border: 1.5px solid rgba(250, 246, 241, 0.5);
    border-radius: 24px;
    padding: 10px 22px;
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .kits-hero__button:hover {
    background: #faf6f1;
    color: #7f7f6a;
    border-color: rgba(127, 127, 106, 0.4);
  }

  @media screen and (max-width: 749px) {
    .kits-hero {
      height: 340px;
    }

    .kits-hero__content {
      max-width: 86%;
      padding-inline-start: 20px;
      padding-inline-end: 20px;
    }
  }
/* END_SECTION:kits-hero */

/* START_SECTION:kits-subcategory-explorer (INDEX:33) */
.kits-subcategory-explorer {
    background: #FAF6F1;
    padding-block: 40px;
    scroll-margin-top: var(--header-height, 80px);
  }

  .kits-subcategory-explorer__inner {
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 24px);
  }

  .kits-subcategory-explorer__title {
    margin: 0 0 64px;
    color: #3B2A1C;
    font-family: var(--font-heading--family);
    text-align: center;
  }

  /* Solo 2 subcategorías: fila única centrada en vez del grid de columnas
     fijas que usa cesto-material-explorer para sus 7 elementos. */
  .kits-subcategory-explorer__grid {
    display: flex;
    justify-content: center;
    gap: 24px;
  }

  .kits-subcategory-explorer__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    width: 100%;
    max-width: 140px;
    flex-shrink: 0;
  }

  .kits-subcategory-explorer__circle {
    display: block;
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: #EADACB;
    margin-inline: auto;
  }

  /* Anillo terracota "por fuera" del círculo cuando su subcategoría está
     activa (filtro aplicado sin cambiar de URL, ver subcategory-filter.js).
     Dos box-shadow en vez de outline: respeta el border-radius en todos
     los navegadores y deja un hueco (color de fondo de la sección) antes
     del anillo, en vez de pegarlo al borde de la imagen. */
  .subcategory-filter__link.is-active .subcategory-filter__circle {
    box-shadow: 0 0 0 4px #FAF6F1, 0 0 0 7px #B44C21;
  }

  .kits-subcategory-explorer__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
  }

  .kits-subcategory-explorer__item:hover .kits-subcategory-explorer__image {
    transform: scale(1.05);
  }

  .kits-subcategory-explorer__label {
    font-family: var(--font-heading--family);
    font-size: 15px;
    font-weight: 500;
    color: #7F7F6A;
    text-align: center;
    line-height: 1.3;
    overflow-wrap: break-word;
  }

  @media screen and (max-width: 749px) {
    .kits-subcategory-explorer {
      padding-block: 28px;
    }

    .kits-subcategory-explorer__title {
      margin: 0 0 40px;
    }

    .kits-subcategory-explorer__grid {
      gap: 10px;
    }

    .kits-subcategory-explorer__item {
      max-width: 140px;
    }

    .kits-subcategory-explorer__label {
      font-size: clamp(10px, 2.4vw, 12.5px);
    }
  }
/* END_SECTION:kits-subcategory-explorer */

/* START_SECTION:layered-slideshow (INDEX:34) */
/* ===== Naliblu: fade slideshow (replaces book/layered effect) ===== */

  .layered-slideshow-section {
    position: relative;
    border-bottom: 1px solid #e0dbd2;
  }

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

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --border-color: var(--color-background);
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

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

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

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

  /* Dot navigation — bottom-right, above arrows */
  .layered-slideshow__tablist {
    position: absolute;
    bottom: 56px;
    right: 20px;
    left: auto;
    display: flex;
    gap: 7px;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.22);
    pointer-events: all;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    outline: none;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    background: rgba(0, 0, 0, 0.8);
    cursor: default;
    transform: scale(1.3);
  }

  .layered-slideshow__tablist button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
  }

  /* Stacked panels */
  .layered-slideshow__panels {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .layered-slideshow__panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .layered-slideshow__panel:not([inert]) {
    pointer-events: auto;
    z-index: 1;
  }

  .layered-slideshow__panel-content {
    position: absolute;
    inset: 0;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

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

  .layered-slideshow__video-poster {
    z-index: 1;
  }

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

  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

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

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

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

  /* Fade transition */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panel {
      opacity: 0;
      transition: opacity 0.6s ease;
    }

    .layered-slideshow__panel:not([inert]) {
      opacity: 1;
    }

    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }

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

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

  @media (prefers-reduced-motion: reduce) {
    .layered-slideshow__panel[inert] {
      visibility: hidden;
    }

    .layered-slideshow__panel:not([inert]) {
      visibility: visible;
    }
  }

  /* Disable transitions during instant tab changes */
  .layered-slideshow__container[data-instant-transitions] .layered-slideshow__panel,
  .layered-slideshow__container[data-instant-transitions] .layered-slideshow__content {
    transition: none;
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    .layered-slideshow__container:not([size='auto']) {
      min-height: var(--layered-panel-height-mobile, 260px);
      height: var(--layered-panel-height-mobile, 260px);
    }

    .layered-slideshow__tablist {
      right: 14px;
      bottom: 52px;
    }
  }

  /* Navigation arrows — bottom-right, same height as dots */
  .layered-slideshow__arrows {
    position: absolute;
    bottom: 14px;
    right: 20px;
    display: flex;
    gap: 6px;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--color-foreground-rgb), 0.35);
    background: rgba(var(--color-background-rgb), 0.55);
    color: rgb(var(--color-foreground-rgb));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .layered-slideshow__arrow:hover {
    background: rgba(var(--color-background-rgb), 0.9);
    border-color: rgba(var(--color-foreground-rgb), 0.7);
  }

  .layered-slideshow__arrow .svg-wrapper,
  .layered-slideshow__arrow svg {
    width: 13px;
    height: 13px;
    display: flex;
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__arrows {
      right: 14px;
      bottom: 14px;
    }
  }

  /* ===== NALIBLU: split layout (izq texto 46% · der imagen 54%) ===== */

  /* 0. Altura del carrusel — la sección tiene el ajuste "height" en "auto",
     lo que hace que .layered-slideshow__container[size='auto'] use
     height:auto (regla del tema, ver más arriba en este archivo) y tome su
     altura del CONTENIDO DE TEXTO, no de la foto — con el texto siendo
     bastante más bajo que ancho, el panel salía muy panorámico (~400-450px
     de alto con todo el ancho de la pantalla), obligando a
     background-size:cover a recortar mucho la foto verticalmente para
     rellenar ese hueco tan ancho y bajo.
     Se fuerza aquí una altura fija y más generosa (mismo selector que la
     regla del tema, para poder pisarla) — con menos diferencia entre ancho
     y alto del panel, cover necesita recortar mucho menos de cada foto. */
  @media screen and (min-width: 750px) {
    .layered-slideshow__container[size='auto'] {
      height: 640px;
    }
  }

  /* Mobile: altura en px fijo (540px) rompía en iPhones "normales" (~375-
     390px de ancho) porque esa misma altura, aplicada a un ancho más
     estrecho que el iPhone Pro Max (~430px) con el que se calibró, da una
     proporción alto/ancho más extrema (375/540 ≈ 0.69 vs 430/540 ≈ 0.80)
     — object-fit: cover tiene que ampliar más la foto para cubrir ese
     hueco relativamente más alto, recortando de más. aspect-ratio en vez
     de height fijo mantiene la MISMA proporción (y por tanto el mismo
     nivel de recorte/zoom) en cualquier ancho de iPhone; max-height evita
     que se dispare en anchos grandes cerca del breakpoint de 749px. */
  @media screen and (max-width: 749px) {
    .layered-slideshow__container[size='auto'] {
      /* La causa real de "no cambia nada": este elemento tiene
         container-type: inline-size (regla de más arriba, para el resto
         del tema) — combinado con eso, aspect-ratio no tenía NINGÚN
         efecto aquí, confirmado forzándolo por JS con !important desde
         Chrome en vivo (no cambiaba el alto) mientras que forzar `height`
         directo sí funcionaba al instante. Todos los intentos anteriores
         con aspect-ratio (430/540 → .../750 → .../1500) nunca hicieron
         nada — por eso "seguía igual" pase lo que pusiera. Alto fijo en
         px, que sí funciona; ya no escala con el ancho exacto de cada
         iPhone como se buscaba originalmente, pero es preferible a que no
         haga nada en absoluto. */
      /* 580px se veía demasiado alto. "Le falta un poquito" (tu captura)
         corresponde a la altura rota de antes (~291-300px reales, cuando
         aspect-ratio no hacía nada) — ahí "Cesto" casi cabía (necesita
         294px) pero "Detalles con alma" (la más alta, 326px) se cortaba
         claramente, que era justo el bug original que arrancó todo esto.
         No puedo bajar hasta ~300-320 sin reproducir ese corte. 410px es
         el mínimo con margen limpio para que quepan las 5 (la más alta,
         Detalles, termina a 326px) sin tocar los puntos de abajo. Ajuste
         fino a 405px (margen ~17px en "Detalles con alma"). */
      height: 405px !important;
    }
  }

  /* 1. Ocultar solo vídeo/poster — la imagen (nativa del editor, o la de
     respaldo mientras no se asigne una, o el placeholder del tema si ni
     eso aplica) ahora SÍ se muestra: es la propia foto de fondo, ver
     regla .layered-slideshow__image más abajo. */
  .layered-slideshow__panel-content > video,
  .layered-slideshow__video-poster {
    display: none !important;
  }

  /* Imagen a sangre en todo el slide — nativa del editor (block.settings.
     image_1) si hay una asignada, si no la de respaldo definida en
     blocks/_layered-slide.liquid, si tampoco el placeholder del tema. */
  .layered-slideshow__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0;
  }

  /* 2. Sin borde en panel-content */
  .layered-slideshow__panel-content {
    border: none !important;
  }

  /* 3. Desktop: split layout */
  @media screen and (min-width: 750px) {
    .layered-slideshow__panel-content {
      display: flex !important;
      flex-direction: row !important;
      align-items: stretch !important;
      background: #EADACB !important;
    }

    /* Columna izquierda: texto — padding aumentado ~20% */
    .layered-slideshow__content {
      width: 46% !important;
      flex-shrink: 0 !important;
      height: auto !important;
      padding: 80px 32px 80px 56px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      background: transparent !important;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
    }

    .layered-slideshow__content > * {
      margin: 0 !important;
    }

    /* Degradado de legibilidad sobre la foto (que ahora es la propia
       .layered-slideshow__image, ver más arriba) — capa aparte, ya no
       apilado en el mismo background-image que la foto, para poder usar
       una imagen <img> nativa/editable debajo. Valores concretos por
       slide en el bloque {% style %} de más abajo (necesita Liquid/
       asset_url para el caso de respaldo, que {% stylesheet %} no admite). */
    .layered-slideshow__panel-content::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
    }
  }

  /* 4. Mobile: la imagen vuelve a ser a sangre completa (hereda la regla
     universal .layered-slideshow__image de más arriba, sin overrides aquí)
     y el texto+botón se superponen encima, en la esquina superior-
     izquierda — la zona clara/vacía que tiene cada foto ahí (pared o mesa,
     antes de llegar al objeto principal). Nada de esto afecta a desktop,
     que sigue con su layout de columnas de siempre (regla "3" más arriba). */
  @media screen and (max-width: 749px) {
    /* Línea fina visible en el borde inferior de algunos slides (p.ej.
       "Kits Naliblu"): .layered-slideshow-section tiene un border-bottom
       fijo de 1px que existe en los 5 slides, pero solo se nota donde el
       color del borde de la foto no se camufla bien con ese beige. Quitado
       solo en mobile (en desktop no se reportó el problema y se deja tal
       cual). */
    .layered-slideshow-section {
      border-bottom: none;
    }

    .layered-slideshow__panel-content {
      background: #EADACB !important;
    }

    /* Sin degradado global: el contraste del texto lo da el fondo
       semitransparente de .layered-slideshow__content (ver abajo), no un
       oscurecimiento de toda la foto. */
    .layered-slideshow__panel-content::after {
      content: none;
    }

    /* Tarjeta flotante semitransparente (crema) con el texto encima de la
       foto — posición y ancho por defecto; cada slide la ajusta ligeramente
       más abajo según su propia zona clara (ver bloque nth-child). */
    .layered-slideshow__content {
      position: absolute !important;
      inset: auto auto auto 0 !important;
      top: 24px !important;
      left: 20px !important;
      /* Ancho adaptable al texto en vez de un % fijo adivinado: fit-content
         encoge la tarjeta a lo que su contenido necesita realmente, y
         max-width (58% aquí, cada slide ajusta el suyo más abajo) actúa
         solo como tope de seguridad para no invadir la zona con foto. Antes
         había además un max-width:240px en px fijos que en la práctica
         anulaba casi todos los cambios de % que se iban probando — quitado. */
      width: fit-content !important;
      max-width: 58%;
      height: auto !important;
      padding: 16px 16px 24px !important;
      background: linear-gradient(135deg, rgba(250, 246, 241, 0.42) 0%, rgba(250, 246, 241, 0.20) 100%) !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: 0 8px 30px rgba(59, 42, 28, 0.08);
      border-radius: 16px;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
      box-sizing: border-box;
      z-index: 1;
    }

    .layered-slideshow__content > * {
      margin: 0 !important;
    }

    /* Sin text-shadow: con el fondo ahora casi opaco (0.88) + blur(10px),
       el contraste ya no depende de una sombra oscura — y con los nuevos
       colores de texto (todos oscuros: #B44C21/#3B2A1C/#5E4B3B) una sombra
       oscura debajo ensuciaría el texto en vez de ayudar. */

    /* Ajuste por slide, según las 3 referencias (caru1/caru2/caru3): la
       zona clara de cada foto varía ligeramente en alto y ancho.
       1 = Kits Naliblu (puerta): zona clara más alta y ancha, casi toda la
           mitad izquierda de la foto.
       2 = Detalles con alma (caja): zona algo más estrecha, la caja
           personalizada empieza a aparecer más pronto.
       3 = Cesto de los tesoros (cesto): zona más estrecha y algo más baja,
           el cesto ocupa buena parte del lado izquierdo también. */
    /* Anchos: base 58% (Jugar y aprender / Crecer con calma). Los otros 3
       llevan un pelín más para que una palabra/símbolo concreto no salte
       de línea solo — pedido explícito, ajuste fino, no cambia zona/top. */
    .layered-slideshow__panel:nth-child(1) .layered-slideshow__content {
      top: 24px !important;
      max-width: 70%;
    }

    .layered-slideshow__panel:nth-child(2) .layered-slideshow__content {
      top: 24px !important;
      max-width: 59%;
    }

    .layered-slideshow__panel:nth-child(3) .layered-slideshow__content {
      top: 20px !important;
      /* 58% se quedaba corto solo en iPhones muy pequeños (~320-350px):
         "Descubrir materiales →" no cabía entera y la flecha saltaba de
         línea sola. Subido a 66% + nowrap de seguridad en el botón, solo
         para este slide. */
      max-width: 66%;
    }

    .layered-slideshow__panel:nth-child(3) .layered-slideshow__content .button,
    .layered-slideshow__panel:nth-child(3) .layered-slideshow__content a.button {
      white-space: nowrap;
    }

    .layered-slideshow__panel:nth-child(4) .layered-slideshow__content {
      max-width: 62%;
    }
  }

  /* 5. Tipografía: título */
  .layered-slideshow__content h2,
  .layered-slideshow__content h3 {
    font-size: 2rem !important;
    font-weight: 500 !important;
    color: #faf6f1 !important;
    line-height: 1.2 !important;
    max-width: 380px;
    /* Reparte el texto de forma más uniforme entre líneas en vez de
       llenar cada línea al máximo — evita que una palabra o el emoji
       final se quede solo en su propia línea ("y", "que", "💡"...). Si el
       navegador no lo soporta, simplemente no hace nada (no rompe nada). */
    text-wrap: balance;
  }

  /* Mobile solo (desktop no se toca, sigue con su degradado oscuro de
     siempre). Etiqueta y descripción son ambas <p> (sin clase propia que
     las distinga) — se usan :first-of-type/:last-of-type dentro de la
     tarjeta, que en las 5 slides siguen el mismo orden: etiqueta (p) →
     subtítulo (h2/h3) → descripción (p) → botón (a). */
  @media screen and (max-width: 749px) {
    /* Etiqueta: quitado el fondo pill terracota — vuelve a ser solo
       texto, único elemento en mayúsculas. Los 3 textos comparten el
       mismo text-shadow (glow claro) para leerse bien sobre la foto
       ahora que la tarjeta es mucho más transparente. */
    .layered-slideshow__content p:first-of-type {
      display: block;
      background: none !important;
      color: #4F5B43 !important;
      padding: 0 !important;
      border-radius: 0;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .layered-slideshow__content h2,
    .layered-slideshow__content h3 {
      color: #2E2015 !important;
      text-transform: none !important;
    }

    .layered-slideshow__content p:last-of-type {
      color: #3B2A1C !important;
      font-weight: 500 !important;
      text-transform: none !important;
    }

    .layered-slideshow__content p:first-of-type,
    .layered-slideshow__content h2,
    .layered-slideshow__content h3,
    .layered-slideshow__content p:last-of-type {
      text-shadow: 0 0 12px rgba(250, 246, 241, 0.7);
    }
  }

  /* 5b. Colores de texto de los bloques text (custom-color es la clase que activa var(--color)) */
  .layered-slideshow__content .custom-color,
  .layered-slideshow__content .custom-color * {
    color: var(--color) !important;
  }

  /* 5c. Fallback para párrafos sin custom-color */
  .layered-slideshow__content p {
    color: rgba(250, 246, 241, 0.9);
  }

  /* 6. Botón: esquema invertido — por defecto relleno de verde salvia con
     texto marfil; al hover, relleno marfil con texto salvia. El contorno
     cambia de tono en cada estado para seguir siendo visible sobre cada
     fondo (un borde salvia sobre fondo salvia, o marfil sobre marfil,
     se volvería invisible). */
  .layered-slideshow__content .button,
  .layered-slideshow__content a.button {
    background: #A8A791 !important;
    color: #3B2A1C !important;
    border: 1.5px solid rgba(250, 246, 241, 0.5) !important;
    border-radius: 24px !important;
    padding: 10px 22px !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
    text-decoration: none;
    margin-top: 6px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  }

  .layered-slideshow__content .button:hover,
  .layered-slideshow__content a.button:hover {
    background: #FAF6F1 !important;
    color: #7F7F6A !important;
    border-color: rgba(127, 127, 106, 0.4) !important;
    text-decoration: none;
  }

  /* 6b. Pantallas muy estrechas (iPhone "estándar" ~375-390px, no solo el
     Pro Max ~430px con el que se ajustó el resto): con el mismo tamaño de
     fuente/espaciado de arriba, un slide con texto largo (cualquiera
     comparable o más largo que el de "Cesto de los tesoros" — la
     descripción más larga de las 5) llenaba casi toda la altura de la
     tarjeta y apretaba el botón contra los puntos de paginación. Genérico
     para los 5 slides, no depende de cuál sea: solo reduce fuente/gap/
     padding para que quepa más contenido en menos alto, sin tocar el
     top/width propios de cada slide (nth-child de más arriba).
     Sin max-height/overflow: un intento anterior de "cinturón de
     seguridad" con max-height + overflow:hidden calculó mal el margen y
     acabó recortando contenido real (la última línea de la descripción,
     y el botón entero al ser el último hijo) en varios slides — quitado.
     Con el texto/gap/padding ya reducidos aquí, la tarjeta no necesita
     tope de altura: el contenido real de los 5 slides actuales cabe con
     margen antes de llegar a los puntos de paginación. */
  @media screen and (max-width: 400px) {
    .layered-slideshow__content {
      padding: 12px 12px 20px !important;
    }

    .layered-slideshow__content .group-block-content {
      --gap: 8px !important;
    }

    .layered-slideshow__content h2,
    .layered-slideshow__content h3 {
      font-size: 1.4rem !important;
      line-height: 1.25 !important;
    }

    .layered-slideshow__content p {
      font-size: 0.78rem !important;
      line-height: 1.35 !important;
    }

    .layered-slideshow__content .button,
    .layered-slideshow__content a.button {
      padding: 7px 16px !important;
      font-size: 0.8rem !important;
      margin-top: 2px !important;
    }
  }

  /* 7. Puntos → esquina inferior IZQUIERDA del carrusel, alineados con el
     borde izquierdo del bloque de texto (no con --page-margin genérico:
     .layered-slideshow__content tiene su propio padding-left de 56px, ver
     regla "3. Desktop: split layout" más arriba — hay que igualar ESE
     valor, no el margen de página general, para que quede a plomo con
     "KITS NALIBLU" / el título / el botón).
     Técnica de centrado robusta: "left: <punto> + transform: translateX(-50%)"
     centra el ELEMENTO (su propio centro, sea cual sea su ancho) exacto en
     <punto> — así puntos y flechas quedan siempre alineados entre sí pase
     lo que pase con el número de puntos (5 ahora, podría cambiar).
     <punto> = padding-left del texto (56px) + medio ancho de las flechas
     (66px de ancho → 33px), así el borde izquierdo de las flechas queda
     exactamente en esos 56px, igual que el texto. */
  .layered-slideshow__tablist {
    position: absolute !important;
    left: calc(56px + 33px) !important;
    right: auto !important;
    top: auto !important;
    bottom: 56px !important;
    transform: translateX(-50%) !important;
  }

  /* Inactivos: versión suave del nuevo verde salvia (antes terracota suave) */
  .layered-slideshow__tablist button {
    background: rgba(127, 127, 106, 0.28) !important;
  }

  /* Activo: verde-oliva intermedio (antes salvia, antes terracota) */
  .layered-slideshow__tablist button[aria-selected='true'] {
    background: #A8A791 !important;
  }

  .layered-slideshow__tablist button:focus-visible {
    outline-color: #7F7F6A !important;
  }

  /* 8. Flechas → esquina inferior izquierda del carrusel, mismo eje de
     centrado que los puntos (ver comentario del bloque "7"). */
  .layered-slideshow__arrows {
    left: calc(56px + 33px) !important;
    right: auto !important;
    top: auto !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
  }

  /* Reposo: círculo relleno de verde-oliva intermedio + icono marrón oscuro */
  .layered-slideshow__arrow {
    background: #A8A791 !important;
    border: 1.5px solid rgba(250, 246, 241, 0.5) !important;
    color: #3B2A1C !important;
  }

  /* Hover: fondo marfil + icono salvia */
  .layered-slideshow__arrow:hover {
    background: #FAF6F1 !important;
    border-color: rgba(127, 127, 106, 0.4) !important;
    color: #7F7F6A !important;
  }

  /* 9. Mobile: puntos y flechas juntos en la esquina inferior DERECHA,
     puntos encima de las flechas, mismo eje de centrado que en desktop
     (ver comentario del bloque "7" — misma técnica "left + translateX(-50%)",
     pero calculando el punto de centrado desde la derecha con
     calc(100% - margen - medio ancho de las flechas) en vez de sumar
     desde la izquierda). Antes las flechas estaban a la derecha y los
     puntos a la izquierda, separados. */
  @media screen and (max-width: 749px) {
    .layered-slideshow__tablist {
      left: calc(100% - 14px - 33px) !important;
      right: auto !important;
      bottom: 52px !important;
      top: auto !important;
      transform: translateX(-50%) !important;
    }

    .layered-slideshow__arrows {
      left: calc(100% - 14px - 33px) !important;
      right: auto !important;
      bottom: 14px !important;
      top: auto !important;
      transform: translateX(-50%) !important;
    }
  }

  /* 10. (Fondo de Destacados movido a product-list.liquid, la propia sección) */

  /* 11. Barra de categorías — wrapper de Shopify también a #FAF6F1, para que
     coincida exactamente con el fondo interno de .category-bar (evita
     cualquier resquicio de color distinto en los bordes). */
  #shopify-section-category_bar_naliblu {
    background: #FAF6F1 !important;
  }

  /* 13. SOLO PC (≥750px): réplica del encuadre de MÓVIL — tarjeta crema
     semitransparente flotando sobre la foto a sangre, con el texto oscuro
     dentro, en vez de la columna izquierda sobre degradado oscuro.
     ⚠️ Bloque independiente a propósito: NO comparte reglas con móvil ni
     modifica ninguna regla anterior (móvil costó mucho de cuadrar y no se
     toca). Todo va dentro de min-width: 750px y, al estar al final del
     archivo, pisa las reglas de PC de más arriba (bloque "3" y degradado
     por slide del bloque 12) con la misma especificidad o más. Valores de fondo/
     borde/sombra/colores copiados de los de móvil (bloques "4" y "5"). */
  @media screen and (min-width: 750px) {
    /* Sin degradado oscuro sobre la foto (en móvil tampoco lo hay). */
    .layered-slideshow__panel .layered-slideshow__panel-content::after {
      content: none;
    }

    /* Tarjeta flotante: arriba del todo (5px del borde superior del slide)
       y a la izquierda, alineada con puntos y flechas (56px). Sin transform
       propio: el fundido de entrada del tema ya usa transform en el panel
       activo (con más especificidad) y anulaba cualquier translateY de aquí
       — por eso un centrado con top:50% + translateY(-50%) dejaba la caja
       empezando a media altura y cortada por abajo. */
    .layered-slideshow__panel .layered-slideshow__content {
      position: absolute !important;
      top: 5px !important;
      left: 56px !important;
      width: fit-content !important;
      max-width: min(40%, 480px);
      height: auto !important;
      /* Relleno interior reducido a la mitad (antes 28px 28px 32px):
         cajas más compactas alrededor de título → botón. */
      padding: 14px 14px 16px !important;
      background: linear-gradient(135deg, rgba(250, 246, 241, 0.42) 0%, rgba(250, 246, 241, 0.2) 100%) !important;
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: 0 8px 30px rgba(59, 42, 28, 0.08);
      border-radius: 16px;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
      box-sizing: border-box;
      z-index: 1;
    }

    /* Texto oscuro, mismo tratamiento que en móvil. */
    .layered-slideshow__panel .layered-slideshow__content p:first-of-type {
      display: block;
      background: none !important;
      color: #4F5B43 !important;
      padding: 0 !important;
      border-radius: 0;
      font-size: 12px !important;
      font-weight: 700 !important;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .layered-slideshow__panel .layered-slideshow__content h2,
    .layered-slideshow__panel .layered-slideshow__content h3 {
      color: #2E2015 !important;
      text-transform: none !important;
    }

    .layered-slideshow__panel .layered-slideshow__content p:last-of-type {
      color: #3B2A1C !important;
      font-weight: 500 !important;
      text-transform: none !important;
    }

    .layered-slideshow__panel .layered-slideshow__content p:first-of-type,
    .layered-slideshow__panel .layered-slideshow__content h2,
    .layered-slideshow__panel .layered-slideshow__content h3,
    .layered-slideshow__panel .layered-slideshow__content p:last-of-type {
      text-shadow: 0 0 12px rgba(250, 246, 241, 0.7);
    }

    /* Saltos de línea fijos solo de PC (ver 14): el <br> escrito en el
       título se reactiva aquí, y ese título pierde el tope de 380px para
       que la primera línea quepa entera (si no, el navegador añadiría
       saltos propios). Solo aplica a títulos que llevan <br>. */
    .layered-slideshow__panel .layered-slideshow__content :is(h2, h3) br {
      display: inline;
    }

    .layered-slideshow__panel .layered-slideshow__content :is(h2, h3):has(br) {
      max-width: none;
      text-wrap: wrap;
    }

    /* Puntos + flechas → esquina inferior DERECHA en PC (antes izquierda),
       a 56px del borde (simétrico con el margen izquierdo de las cajas).
       Misma técnica de centrado que el resto del archivo: left en el punto
       central de las flechas (66px de ancho → 33px) + translateX(-50%).
       Selector con el contenedor delante para ganar a las reglas "7"/"8". */
    .layered-slideshow__container .layered-slideshow__tablist,
    .layered-slideshow__container .layered-slideshow__arrows {
      left: calc(100% - 56px - 33px) !important;
      right: auto !important;
    }

    /* Todo el ancho del slide menos 56px a cada lado: la primera línea
       cabe también en pantallas de PC estrechas (~750-1000px). */
    .layered-slideshow__panel .layered-slideshow__content:has(:is(h2, h3) br) {
      max-width: calc(100% - 112px);
    }
  }

  /* 14. <br> en títulos del slideshow = salto SOLO de PC. Por defecto (y por
     tanto en móvil) se anula, así el móvil se ve exactamente igual que sin
     él; el bloque 13 lo reactiva en ≥750px. Uso: templates/index.json,
     slide "Jugar y aprender": "Para imaginar, experimentar <br>y
     sorprenderse 💡" → en PC, 2 líneas cortando antes de "y". */
  .layered-slideshow__content :is(h2, h3) br {
    display: none;
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:legal-pages-style-overrides (INDEX:35) */
main[data-template='page.aviso-legal'] h1,
  main[data-template='page.terminos-y-condiciones'] h1,
  main[data-template='page.politica-de-privacidad'] h1 {
    font-size: calc(var(--font-h1--size) + 2px) !important;
  }

  main[data-template='page.aviso-legal'] .details__header,
  main[data-template='page.terminos-y-condiciones'] .details__header,
  main[data-template='page.politica-de-privacidad'] .details__header {
    font-size: calc(var(--font-h6--size) + 2px) !important;
    font-weight: bold !important;
  }

  main[data-template='page.aviso-legal'] .details-content .rte,
  main[data-template='page.terminos-y-condiciones'] .details-content .rte,
  main[data-template='page.politica-de-privacidad'] .details-content .rte {
    font-size: calc(var(--font-paragraph--size) + 1px) !important;
    text-align: left !important;
  }

  main[data-template='page.aviso-legal'] .details-content .text-block > *,
  main[data-template='page.terminos-y-condiciones'] .details-content .text-block > *,
  main[data-template='page.politica-de-privacidad'] .details-content .rte > * {
    max-inline-size: calc(100% - 3em) !important;
  }

  main[data-template='page.aviso-legal'] .section-content-wrapper,
  main[data-template='page.terminos-y-condiciones'] .section-content-wrapper,
  main[data-template='page.politica-de-privacidad'] .section-content-wrapper {
    max-width: calc(var(--page-width, 1400px) / 2) !important;
    margin-inline: auto !important;
  }

  main[data-template='page.aviso-legal'] .details-content .rte a,
  main[data-template='page.terminos-y-condiciones'] .details-content .rte a,
  main[data-template='page.politica-de-privacidad'] .details-content .rte a {
    color: #b44c21;
  }
/* END_SECTION:legal-pages-style-overrides */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
  }

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

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

/* START_SECTION:main-cart (INDEX:40) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

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

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

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

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

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

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

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

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

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

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

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

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

/* START_SECTION:main-policy (INDEX:44) */
/* Mismo estilo visual que FAQ/Aviso legal/Términos (ver
     sections/legal-pages-style-overrides.liquid) — aquí va inline porque
     las plantillas de política solo admiten la sección "main", no una
     segunda sección de solo-estilos. */
  main[data-template='policy'] h1 {
    font-size: calc(var(--font-h1--size) + 2px) !important;
  }

  main[data-template='policy'] .details__header {
    font-size: calc(var(--font-h6--size) + 2px) !important;
    font-weight: bold !important;
  }

  main[data-template='policy'] .details-content .rte {
    font-size: calc(var(--font-paragraph--size) + 1px) !important;
    text-align: left !important;
  }

  main[data-template='policy'] .details-content .text-block > *,
  main[data-template='policy'] .rte > * {
    max-inline-size: calc(100% - 3em) !important;
  }

  main[data-template='policy'] .section-content-wrapper {
    max-width: calc(var(--page-width, 1400px) / 2) !important;
    margin-inline: auto !important;
  }

  main[data-template='policy'] .details-content .rte a {
    color: #b44c21;
  }
/* END_SECTION:main-policy */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:password-footer (INDEX:47) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password (INDEX:48) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:product-breadcrumb (INDEX:51) */
.product-breadcrumb {
    background: #faf6f1;
    padding-block: 14px;
  }

  .product-breadcrumb__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding-inline: var(--page-margin, 24px);
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    font-size: 13px;
  }

  .product-breadcrumb__link {
    color: #7f7f6a;
    text-decoration: none;
  }

  .product-breadcrumb__link:hover {
    color: #b44c21;
    text-decoration: underline;
  }

  .product-breadcrumb__item--current {
    color: #3b2a1c;
    font-weight: 500;
  }

  .product-breadcrumb__item:not(.product-breadcrumb__item--current)::after {
    content: '/';
    margin-inline-start: 8px;
    margin-inline-end: 8px;
    color: #7f7f6a;
  }

  @media screen and (max-width: 749px) {
    /* Una sola línea: la letra la ajusta el script (12px → 11px) y, si ni
       así cabe, los niveles intermedios (--mid) se encogen con "…".
       line-height fijo en px: la altura de la línea no cambia al bajar la
       letra (sin salto visual). */
    .product-breadcrumb__list {
      font-size: 12px;
      line-height: 18px;
      flex-wrap: nowrap;
      white-space: nowrap;
      overflow: hidden;
    }

    .product-breadcrumb__item {
      display: flex;
      flex: 0 0 auto;
      min-width: 0;
    }

    .product-breadcrumb__item--mid {
      flex: 0 1 auto;
    }

    .product-breadcrumb__item--mid .product-breadcrumb__link {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Solo durante la medición del script: ancho natural, sin recortes. */
    .product-breadcrumb.is-measuring .product-breadcrumb__item--mid {
      flex-shrink: 0;
    }
  }
/* END_SECTION:product-breadcrumb */

/* START_SECTION:product-hotspots (INDEX:52) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--color-foreground);
      background-color: var(--color-background);
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:53) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

  .sticky-add-to-cart__info[data-has-image='false'] {
    padding-left: var(--padding-lg);
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-paragraph--line-height);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
  }

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }

    .sticky-add-to-cart__info[data-has-image='false'] {
      padding-left: 0;
    }

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

    .sticky-add-to-cart__button {
      width: var(--height-buy-buttons);
    }

    sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
      display: initial;
    }

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:product-list (INDEX:54) */
/* ===== NALIBLU: Destacados — fondo marfil #FAF6F1 =====
     Movido aquí (a la propia sección) desde layered-slideshow.liquid, donde
     vivía "prestado". Apunta por ID al wrapper de Shopify de esta sección
     concreta (product_list_fa6P9H) para no afectar a otros usos de
     product-list.liquid en el resto del sitio — pero el ID real que
     Shopify pone en el HTML es "shopify-section-{prefijo-de-plantilla}__
     product_list_fa6P9H" (prefijo tipo "template--30608536961351", propio
     de cada tienda/entorno), no "shopify-section-product_list_fa6P9H" a
     secas. Un selector de ID exacto con ese sufijo NUNCA hacía match — se
     confirmó inspeccionando el HTML servido en local — así que todas las
     reglas de aquí abajo llevaban sin aplicarse desde que se escribieron.
     Se usa [id$='...'] (termina en) en vez de exacto, para no depender de
     ese prefijo dinámico. */
  [id$='__product_list_fa6P9H'] .section-background,
  [id$='__product_list_fa6P9H'] .section-resource-list,
  [id$='__product_list_fa6P9H'] {
    background: #FAF6F1 !important;
  }

  /* ===== NALIBLU: tarjetas de producto de Destacados =====
     El ratio "portrait" y el border_radius de la galería ya se ajustan por
     settings (templates/index.json); aquí solo reforzamos lo que esos
     settings no cubren: separación clara entre imagen/título/subtítulo/precio
     y la proporción esbelta de la tarjeta en su conjunto. */
  [id$='__product_list_fa6P9H'] .product-card__content {
    gap: 4px;
  }

  /* Título de producto en negrita — el bloque usa el preset tipográfico
     "rte" (font-weight: 400 de fábrica), no configurable por settings (el
     campo "weight" del bloque solo se activa con preset "custom"), así
     que se fuerza aquí. La clase real que renderiza Shopify para este
     bloque es "text-block--{prefijo-de-bloque}__product_title_YXxMTj"
     (el ID del bloque lleva un prefijo delante del nombre, distinto del
     prefijo de plantilla de la sección), confirmado inspeccionando el HTML
     servido — por eso el selector exacto/contains anterior (sin el "__" de
     por medio) nunca hacía match. Aquí se busca solo la parte estable,
     "__product_title_YXxMTj". */
  [id$='__product_list_fa6P9H'] [class*='__product_title_YXxMTj'],
  [id$='__product_list_fa6P9H'] [class*='__product_title_YXxMTj'] p {
    font-weight: 700 !important;
  }

  /* Tarjeta ~25% más pequeña: en vez de tocar el número de columnas de la
     cuadrícula (arriesga dejar una celda vacía, ya que solo hay 4
     productos), se reduce el ancho de la tarjeta dentro de su propia celda
     y se centra — así imagen, texto y espaciado interno encogen juntos de
     forma proporcional, en desktop y en móvil por igual. */
  [id$='__product_list_fa6P9H'] .resource-list__item {
    max-width: 75%;
    margin-inline: auto;
  }

  [id$='__product_list_fa6P9H'] product-card .card-gallery {
    overflow: hidden;
  }

  [id$='__product_list_fa6P9H'] .product-grid-view-zoom-out--details {
    display: none;
  }

  /* Mismo problema de prefijo que el título de arriba: se busca solo la
     parte estable del nombre de clase del subtítulo. */
  [id$='__product_list_fa6P9H'] [class*='__product_subtitulo_KzP2Lm'] {
    color: rgba(58, 46, 36, 0.6) !important;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  [id$='__product_list_fa6P9H'] [data-block-id*='price'] {
    font-weight: 600;
  }

  /* Botón "Ver todos los kits" — mismo tratamiento visual que los botones del
     carrusel (layered-slideshow.liquid): salvia sólido con texto marfil por
     defecto, se invierte a marfil con texto salvia al hover. */
  .naliblu-favoritos-cta-wrap {
    display: flex;
    justify-content: center;
    margin-block-start: 36px;
  }

  .naliblu-favoritos-cta.button {
    background: #A8A791 !important;
    color: #3B2A1C !important;
    border: 1.5px solid rgba(250, 246, 241, 0.5) !important;
    border-radius: 24px !important;
    padding: 10px 26px !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  }

  .naliblu-favoritos-cta.button:hover {
    background: #FAF6F1 !important;
    color: #7F7F6A !important;
    border-color: rgba(127, 127, 106, 0.4) !important;
    text-decoration: none;
  }

  /* ===== NALIBLU: "Ver todo" de "También te puede gustar" en /cart =====
     Mismo terracota que le pusimos al "Ver todo" del panel de búsqueda —
     el ajuste style_class:"link" del bloque no expone color propio, así
     que se fuerza aquí. Selector por atributo (contains), no exacto, por
     el mismo motivo de siempre: el ID de bloque real lleva un prefijo
     delante que no se puede predecir. */
  [id$='__product_list_NNFgcy'] [class*='product_list_button_eibbma'] {
    color: #B44C21 !important;
  }

  /* ===== NALIBLU: layout de "También te puede gustar" en /cart =====
     Estructura copiada tal cual de la ficha de producto (inspeccionado en
     vivo): content_direction vuelve a ser "column" en templates/cart.json
     — imagen y título son los ÚNICOS dos hijos en flujo normal, cada uno
     se centra a SÍ MISMO (la imagen por su propio margin:auto + ancho
     fijo en el <img>, el título por su clase text-block--align-center),
     nunca por align-items del contenedor padre (que en producto es
     "normal", no "center" — confirmado, el centrado no depende de él).
     "Ver todo" se saca del flujo con position:absolute, así puede seguir
     siendo un 3er bloque en el JSON sin descuadrar el centrado de los
     otros dos ni un pixel — position:relative en el contenedor padre
     (.section-resource-list__header) para anclarlo ahí dentro. */
  [id$='__product_list_NNFgcy'] .section-resource-list__header {
    position: relative;
  }

  /* bottom:0 (no top:50%) a propósito: el título es el ÚLTIMO hijo del
     contenedor, así que su borde inferior coincide con el borde inferior
     del contenedor — anclar aquí alinea el botón con el título, no con la
     imagen de arriba. */
  [id$='__product_list_NNFgcy'] [class*='product_list_button_eibbma'] {
    position: absolute;
    right: 0;
    bottom: 0;
  }
/* END_SECTION:product-list */

/* START_SECTION:product-style-overrides (INDEX:56) */
main[data-template='product'] .add-to-cart-button.button {
    --button-background-color: #b44c21 !important;
    --button-color: #ffffff !important;
    --button-border-color: #b44c21 !important;
  }

  main[data-template='product'] .add-to-cart-button.button:hover {
    --button-background-color: #9c4019 !important;
    --button-color: #ffffff !important;
    --button-border-color: #9c4019 !important;
  }

  /* Fila título + precio (group_icgrde): refuerzo defensivo en móvil para
     que el precio llegue al borde derecho. No se pudo verificar en vivo en
     viewport móvil (resize_window no cambia el viewport real en este
     entorno), así que se aplica igualmente por seguridad — width:100% a la
     fila (ya la tenía por el ajuste width_mobile:fill, esto es cinturón y
     tirantes), min-width:0 al título para que el texto largo no empuje el
     layout, y margin-left:auto + flex-shrink:0 al precio como refuerzo
     redundante. Es el único bloque "group" en fila dentro de esta columna,
     así que no hace falta más especificidad que esta. */
  main[data-template='product'] .product-details .group-block-content.layout-panel-flex--row {
    width: 100%;
  }

  main[data-template='product'] .product-details .group-block-content.layout-panel-flex--row h1 {
    min-width: 0;
  }

  main[data-template='product'] .product-details .group-block-content.layout-panel-flex--row product-price {
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Fila título + precio (product.json: group_icgrde). El precio ya tiene
     font-size 18px vía su propio ajuste font_size en el JSON (custom-font-size
     sí lee esa var), pero el schema genérico del bloque "price" no expone
     font-weight libre ni colores hex fuera de las 3 variables predefinidas
     (texto/heading/link) — mismo motivo que el terracota del botón de arriba. */
  /* El bloque genérico "price" (custom-typography/custom-color) fija
     font-weight y color otra vez en sus hijos directos (.price__regular,
     .price__sale, ver snippets/text.liquid y assets/base.css), así que un
     override solo en <product-price> se queda sin efecto por herencia: hay
     que forzarlo también en los descendientes. */
  main[data-template='product'] .product-details product-price,
  main[data-template='product'] .product-details product-price * {
    font-weight: 500 !important;
    color: #b44c21 !important;
  }

  /* SOLO en móvil: título y precio APILADOS (título arriba, precio debajo),
     los dos a la IZQUIERDA — en vez de compartir la misma fila. En fila
     (flex-direction:row, el valor por defecto de group_icgrde) con
     align-items:last-baseline nativo, un título de 2 líneas hace que el
     precio se cuele pegado a la última línea del título (mismo renglón),
     en vez de quedar claramente separado — se ve apretado/roto. Apilar en
     columna evita ese choque sea cual sea la longitud del título. Anula
     justify-content/align-items (vienen de variables inline del bloque,
     con !important para ganar) y el margin-left:auto del precio.

     El título (text_xrnftG) tiene "width: fit-content" en el JSON, así que
     por defecto su caja solo mide lo que ocupa el texto — con eso, en una
     columna con align-items:flex-start, el título corta línea antes de
     tiempo aunque quede sitio libre a la derecha de la caja. Se le fuerza
     width:100% (usa todo el ancho de la fila) para que aproveche el hueco
     y solo baje de línea cuando el texto realmente no quepa.

     Escritorio no se toca, sigue en fila con el precio a la derecha. */
  @media screen and (max-width: 749px) {
    main[data-template='product'] .product-details .group-block-content.layout-panel-flex--row {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 4px;
    }

    main[data-template='product'] .product-details .group-block-content.layout-panel-flex--row h1 {
      width: 100%;
      text-align: left;
    }

    main[data-template='product'] .product-details product-price {
      margin-left: 0;
      /* El bloque trae su propio align-self (pensado para su posición
         vertical dentro de la fila en escritorio) — al forzar
         flex-direction:column aquí, ese align-self pasa a controlar la
         posición HORIZONTAL (el eje cruzado cambia de vertical a
         horizontal) y es lo que seguía empujando el precio a la derecha
         pese al align-items:flex-start del contenedor. Se anula aparte. */
      align-self: flex-start !important;
    }
  }

  /* Líneas divisorias de la columna de detalles (divider_VJhene, entre
     título/subtítulo y trust badges, y divider_2, tras "Detalles del
     producto"): por defecto usan var(--color-border), que en este esquema
     sale negro. Mismo tono que el borde de los trust badges
     (product-trust-badges.liquid) para que combinen. */
  main[data-template='product'] .product-details .divider__line {
    --color-border: rgba(59, 42, 28, 0.1);
  }

  /* Párrafo de descripción larga (bloque "text_aEtTtq"), mismo gris que las
     etiquetas de los trust badges (product-trust-badges.liquid). */
  main[data-template='product'] .product-details .text-block.rte {
    color: #7f7f6a;
  }

  /* Sin divisor entre subtítulo y descripción (divider_VJhene), descripción
     en cursiva y a todo el ancho de la columna — el max-inline-size que le
     pone .text-block > * en snippets/text.liquid (ligado al ajuste
     "max_width: normal" del bloque) se anula solo para este bloque. Móvil y
     escritorio por igual. */
  main[data-template='product'] .product-details .divider-divider_VJhene {
    display: none;
  }

  main[data-template='product'] .product-details .text-block.rte {
    font-style: italic;
  }

  /* Hueco subtítulo → descripción, un 25% menos: era el gap uniforme del
     grupo (28px, "gap" en templates/product.json) más el margin-bottom
     propio de .product-subtitle (12px) = 40px. Con el gap del grupo
     compartido por TODOS los bloques de la columna (no se puede tocar solo
     aquí sin afectar al resto), se ajusta la parte que sí es propia de
     este bloque: 40 * 0.75 = 30px → 30 - 28 (gap) = 2px. */
  main[data-template='product'] .product-details .product-subtitle {
    margin-bottom: 2px;
  }

  main[data-template='product'] .product-details .text-block.rte > * {
    max-inline-size: none !important;
  }

  /* Imagen principal "sticky" en desktop. El mecanismo ya es nativo del
     tema: <media-gallery> ya trae la clase .sticky-content (position:sticky)
     desde snippets/product-media-gallery-content.liquid, y
     .product-information__media (su contenedor) ya se estira a la altura
     de la fila del grid vía align-items:stretch — es decir, cuando la
     columna de detalles es más alta que la imagen, el contenedor de la
     imagen queda con ese mismo alto de sobra y el sticky tiene margen para
     "viajar" y soltarse justo al final. Verificado en el navegador local:
     con los 3 acordeones abiertos (columna derecha más alta que la
     imagen), la imagen se desplaza más lento que el scroll de la página
     hasta soltarse al llegar al final de su columna — funciona.
     Lo único que faltaba era el offset superior (top:0 la pegaba al header)
     y bloquearlo explícitamente en mobile. */
  @media screen and (min-width: 750px) {
    main[data-template='product'] media-gallery.sticky-content {
      top: calc(var(--header-height, 60px) + 24px) !important;
    }
  }

  @media screen and (max-width: 749px) {
    main[data-template='product'] media-gallery.sticky-content {
      position: static !important;
      top: auto !important;
    }
  }

  /* "También te puede gustar" sin productos que mostrar (p.ej. una tienda
     con un único producto: Shopify no encuentra relacionados y el fallback
     al catálogo completo, tras excluir el propio producto, se queda
     vacío) deja un contenedor fantasma — fondo, padding y líneas de la
     grid vacía, sin título ni tarjetas — flotando entre los acordeones y
     el footer. sections/product-recommendations.liquid ya expone
     data-has-recommendations="false" para detectar justo este caso; se
     oculta el componente entero (<product-recommendations>, no solo la
     grid) para que no quede ni el hueco ni las líneas. En cuanto la
     tienda tenga más de un producto, este caso deja de darse y la
     sección vuelve a mostrarse con normalidad. */
  main[data-template='product'] product-recommendations:has(.resource-list[data-has-recommendations='false']) {
    display: none !important;
  }

  /* Línea del footer (.nb-rule dentro de .nb-top-rule-wrap, en
     sections/footer.liquid) pegada al contenido cuando "también te puede
     gustar" está oculta (ver regla de arriba): footer.liquid asume que la
     sección anterior siempre aporta su propio padding-block-end antes de
     esa línea (ver comentario en footer.liquid junto a .nb-top-rule-wrap),
     pero si esa sección no existe, el hueco desaparece. 44px = el mismo
     padding-top que .nb-news-wrap ya usa DESPUÉS de la línea, hasta la
     tarjeta de newsletter — así el aire queda igual a ambos lados de la
     línea. Con body:has() en vez de tocar footer.liquid directamente,
     porque el footer es compartido por todas las páginas y esto solo debe
     afectar a la página de producto.

     padding-top en .nb-footer, NO margin-top en .nb-top-rule-wrap: un
     margin-top en el primer hijo colapsa con el borde superior de
     .nb-footer (margin collapse) y el hueco queda fuera de su caja — ahí
     no hay fondo #FAF6F1 pintado, se ve el blanco de detrás. padding-top
     sí se queda dentro de la caja de .nb-footer, con su mismo fondo. */
  body:has(main[data-template='product']) .nb-footer {
    padding-top: 44px !important;
  }

  /* SOLO móvil: galería de la ficha en 4:3 (apaisada) en vez de cuadrada.
     El ajuste "Proporción de imagen" del bloque de galería no ofrece 4:3 y
     se aplica también en escritorio, así que se hace aquí: se reutiliza la
     variable --gallery-aspect-ratio que el tema ya aplica a .product-media
     (imágenes, vídeos y modelos 3D por igual). "Rellenar" (cover) en vez
     del "Ajustar" del editor, respetando el punto focal del admin
     (--focal-point, que el tema ya pone en cada imagen; base.css lo
     anulaba con center center en modo "Ajustar"). La ventana de zoom
     (.dialog-zoomed-gallery) mantiene la proporción original. Escritorio y
     tarjetas de colección sin cambios (esta sección solo carga en la ficha). */
  @media screen and (max-width: 749px) {
    main[data-template='product'] media-gallery {
      --gallery-aspect-ratio: 4 / 3;
    }

    main[data-template='product'] media-gallery .dialog-zoomed-gallery {
      --gallery-aspect-ratio: initial;
    }

    main[data-template='product'] media-gallery .product-media-container:not(.dialog-zoomed-gallery *) .product-media {
      overflow: hidden;
    }

    main[data-template='product']
      media-gallery
      .product-media-container:not(.dialog-zoomed-gallery *)
      .product-media
      :is(img, video, iframe, .deferred-media__poster-image) {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: var(--focal-point, center center);
    }

    main[data-template='product']
      media-gallery
      .product-media-container:not(.dialog-zoomed-gallery *)
      .product-media
      :is(deferred-media, product-model, model-viewer) {
      width: 100%;
      height: 100%;
    }
  }

  /* PRODUCTO NORMAL (sin variantes ni personalización; clase puesta en
     blocks/_product-details.liquid): orden de bloques
     Título+Precio → [Cantidad + Agregar al carrito] → Subtítulo →
     Descripción → Iconos → Detalles. Una sola plantilla sirve para los 4
     tipos de ficha, así que el orden del JSON no puede cambiar por tipo:
     se reordena con CSS "order" dentro de la columna flex. Los otros 3
     tipos mantienen el orden del JSON (con el botón CTA tras el precio).
     Separadores: uno tras la fila de compra y otro tras la descripción. */
  .product-details.nb-ficha--normal > .group-block > .group-block-content > * {
    order: 20;
  }

  .product-details.nb-ficha--normal > .group-block > .group-block-content > .group-block {
    order: 1;
  }

  .product-details.nb-ficha--normal > .group-block > .group-block-content > .buy-buttons-block {
    order: 2;
  }

  .product-details.nb-ficha--normal > .group-block > .group-block-content > [class*='divider_buy_end'] {
    order: 3;
  }

  .product-details.nb-ficha--normal > .group-block > .group-block-content > .product-subtitle {
    order: 4;
  }

  .product-details.nb-ficha--normal > .group-block > .group-block-content > [class*='text_aEtTtq'] {
    order: 5;
  }

  .product-details.nb-ficha--normal > .group-block > .group-block-content > [class*='divider_desc_end'] {
    order: 6;
  }

  .product-details.nb-ficha--normal > .group-block > .group-block-content > variant-picker {
    order: 7;
  }

  .product-details.nb-ficha--normal > .group-block > .group-block-content > .product-trust-badges {
    order: 8;
  }

  .product-details.nb-ficha--normal > .group-block > .group-block-content > .product-accordions {
    order: 9;
  }
/* END_SECTION:product-style-overrides */

/* START_SECTION:quick-order-list (INDEX:57) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

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

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

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:slideshow (INDEX:62) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* START_SECTION:story-hero (INDEX:63) */
.story-hero {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
  }

  .story-hero__media,
  .story-hero__image,
  .story-hero__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .story-hero__image {
    display: block;
    object-fit: cover;
    object-position: center 40%;
  }

  .story-hero__placeholder {
    overflow: hidden;
    background: #EADACB;
  }

  .story-hero__placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .story-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(59, 42, 28, 0.6) 0%,
      rgba(59, 42, 28, 0.4) 30%,
      rgba(59, 42, 28, 0) 62%
    );
  }

  .story-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    max-width: 480px;
    padding-inline-start: max(56px, var(--page-margin, 24px));
    padding-inline-end: 32px;
    box-sizing: border-box;
  }

  .story-hero__label {
    margin: 0 0 14px;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(250, 246, 241, 0.85);
  }

  .story-hero__title {
    margin: 0 0 16px;
    max-width: 380px;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 2rem;
    line-height: 1.2;
    color: #faf6f1;
  }

  .story-hero__description {
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(250, 246, 241, 0.9);
  }

  @media screen and (max-width: 749px) {
    .story-hero {
      height: 340px;
    }

    .story-hero__content {
      max-width: 86%;
      padding-inline-start: 20px;
      padding-inline-end: 20px;
    }
  }
/* END_SECTION:story-hero */

/* START_SECTION:story-page-style (INDEX:64) */
/* Ningún esquema de color de la tienda usa terracota como color de botón
     (todos usan negro, ver product-style-overrides.liquid) — mismo fix que
     en la página de producto. */
  main[data-template='page.nuestra-historia'] .button {
    --button-background-color: #b44c21 !important;
    --button-color: #ffffff !important;
    --button-border-color: #b44c21 !important;
  }

  main[data-template='page.nuestra-historia'] .button:hover {
    --button-background-color: #9c4019 !important;
    --button-color: #ffffff !important;
    --button-border-color: #9c4019 !important;
  }
/* END_SECTION:story-page-style */

/* START_SECTION:story-photo-text (INDEX:65) */
.story-photo {
    position: relative;
    padding-block: 56px 24px;
  }

  .story-photo__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 64px;
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 24px);
  }

  .story-photo__media {
    position: relative;
    flex: 0 0 auto;
    width: 38%;
    max-width: 380px;
    display: flex;
    justify-content: center;
  }

  /* Mancha decorativa detrás de la foto, mismo tono cálido que los círculos
     de los trust badges de producto — le da profundidad sin competir con
     la ilustración. */
  .story-photo__blob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 115%;
    aspect-ratio: 1 / 1;
    background: #eadacb;
    border-radius: 42% 58% 63% 37% / 45% 39% 61% 55%;
    transform: translate(-50%, -50%) rotate(-6deg);
    z-index: 0;
  }

  .story-photo__leaf {
    position: absolute;
    top: -18px;
    right: 6%;
    width: 40px;
    height: 40px;
    color: #7f5b43;
    opacity: 0.55;
    transform: rotate(18deg);
    z-index: 2;
  }

  .story-photo__leaf svg {
    width: 100%;
    height: 100%;
  }

  .story-photo__frame {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    transform: rotate(-2.5deg);
    box-shadow: 0 18px 40px rgba(59, 42, 28, 0.18);
    border: 6px solid #faf6f1;
    outline: 1px solid rgba(59, 42, 28, 0.08);
  }

  .story-photo__image {
    display: block;
    width: 100%;
    height: auto;
  }

  .story-photo__copy {
    flex: 1 1 auto;
    min-width: 0;
  }

  .story-photo__text {
    max-width: 640px;
    color: #3b2a1c;
    font-size: 1rem;
    line-height: 1.75;
  }

  .story-photo__text p {
    margin: 0 0 1.25em;
  }

  .story-photo__text p:last-child {
    margin-bottom: 0;
  }

  @media screen and (max-width: 899px) {
    .story-photo__inner {
      flex-direction: column;
      gap: 40px;
    }

    .story-photo__media {
      width: 62%;
      max-width: 320px;
    }

    .story-photo__copy {
      width: 100%;
    }

    .story-photo__text {
      max-width: none;
    }
  }

  @media screen and (max-width: 599px) {
    .story-photo__media {
      width: 74%;
    }
  }
/* END_SECTION:story-photo-text */

/* START_SECTION:tienda-category-explorer (INDEX:66) */
/* (Aquí hubo un parche forzando la posición de .announcement-bar__slides
     con :has()/luego con la clase body.has-tienda-explorer — se quitó:
     inspeccionando en vivo se confirmó que la CAJA del banner nunca
     estuvo descentrada (medida exacta: centrada en el eje de la página).
     El bug real era el texto DENTRO de la caja sin text-align:center —
     arreglado en origen, en sections/header-announcements.liquid, porque
     afecta a todas las páginas por igual, no solo a Tienda. Ver el
     comentario en ese archivo para el detalle.) */
  /* Mismo estilo que el título (h1) de Nuestra Historia/Blog/FAQ/Contacto:
     fuente manuscrita de acento, marrón oscuro, centrado — sin font-size
     propio para heredar el mismo tamaño h1 por defecto del tema que usan
     esas páginas. */
  .tienda-explorer__title-heading {
    font-family: var(--font-accent--family);
    color: #3B2A1C;
    text-align: center;
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    margin-block: 0 40px;
    padding-inline: var(--page-margin, 24px);
  }

  .tienda-explorer {
    background: #FAF6F1;
    padding-block: 8px 0;
  }

  .tienda-explorer__cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 24px);
    padding-block-end: 28px;
    /* Categorías sin subcategorías (Jugar y aprender, Crecer con calma,
       Detalles con alma): al no haber barra de subcategorías de por medio,
       los productos quedaban demasiado pegados a los círculos — el doble
       de margen solo en ese caso concreto (clase añadida por JS al
       seleccionar una categoría así). Cesto/Kits, con subcategorías, y el
       estado sin categoría seleccionada, mantienen el margen normal. */
    /* Al pulsar una subcategoría, el JS hace scroll hasta esta barra con
       scrollIntoView — scroll-margin-top hace que el navegador respete el
       hueco del header sticky solo, dejando el círculo completo a la
       vista en vez de que el header le tape la parte de arriba. */
    scroll-margin-top: var(--header-height, 80px);
  }

  .tienda-explorer--no-subrow .tienda-explorer__cards {
    padding-block-end: 56px;
  }

  .tienda-explorer__card {
    position: relative;
  }

  .tienda-explorer__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Ancho de la columna (antes fit-content): el círculo mide lo mismo
       (min(200px, columna)), pero un título ancho ya no puede ensanchar el
       enlace y con él su círculo. */
    width: 100%;
    margin-inline: auto;
    gap: 10px;
    text-decoration: none;
  }

  .tienda-explorer__circle {
    display: block;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    margin-inline: auto;
  }

  .tienda-explorer__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
  }

  .tienda-explorer__link:hover .tienda-explorer__image {
    transform: scale(1.03);
  }

  /* Anillo terracota "activo" — mismo patrón (doble box-shadow, no outline)
     que subcategory-filter.js usa en Cesto/Kits. */
  .tienda-explorer__link.is-active .tienda-explorer__circle,
  .tienda-explorer__sub-link.is-active .tienda-explorer__sub-circle {
    box-shadow: 0 0 0 4px #FAF6F1, 0 0 0 7px #B44C21;
  }

  /* Título de categoría: SIEMPRE 2 líneas con el corte fijado por idioma
     (custom.category_*_lines en locales, "línea 1|línea 2"), nunca
     dependiendo del ancho. Si una línea no cabe en su columna, el script
     de abajo reduce la letra de los 5 títulos a la vez (mismo tamaño para
     todos, nunca por encima del de aquí). Flex + align-items:center: si
     una línea sobresale un poco de la columna, lo hace por igual a los dos
     lados (hacia el hueco entre columnas), sin recorte. */
  .tienda-explorer__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-heading--family);
    font-size: 17px;
    font-weight: 500;
    color: #7F7F6A;
    text-align: center;
    line-height: 1.3;
  }

  .tienda-explorer__title .cat-line {
    display: block;
    white-space: nowrap;
    text-wrap: nowrap;
    text-align: center;
  }

  .tienda-explorer__subrow {
    background: rgba(234, 218, 203, 0.5);
    padding-block: 28px;
    margin-bottom: 28px;
    scroll-margin-top: var(--header-height, 80px);
  }

  .tienda-explorer__subrow-inner {
    display: grid;
    /* minmax(0, 1fr) en vez de solo 1fr: sin esto, la etiqueta más larga
       (p.ej. "Translúcidos") empuja su columna más ancha que las demás en
       mobile, y como el círculo es width:100% de su columna, sale más
       grande que el resto — mismo fix que cesto-material-explorer.liquid. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 24px;
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 24px);
  }

  .tienda-explorer__subrow-inner--centered {
    display: flex;
    justify-content: center;
    gap: 24px;
  }

  .tienda-explorer__sub-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    width: 100%;
    max-width: 140px;
    min-width: 0;
    flex-shrink: 0;
  }

  .tienda-explorer__sub-circle {
    display: block;
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: #FAF6F1;
    margin-inline: auto;
  }

  .tienda-explorer__sub-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
  }

  .tienda-explorer__sub-link:hover .tienda-explorer__sub-image {
    transform: scale(1.05);
  }

  .tienda-explorer__sub-label {
    font-family: var(--font-heading--family);
    font-size: 15px;
    font-weight: 500;
    color: #7F7F6A;
    text-align: center;
    line-height: 1.3;
    overflow-wrap: break-word;
  }

  .tienda-explorer__placeholder {
    display: block;
    padding-block: 64px;
    text-align: center;
  }

  .tienda-explorer__placeholder-text {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: 0.95rem;
    color: #9a8c7a;
  }

  /* El contenido que sustituye a .product-grid-container por fetch (el
     grid de productos real, o el mensaje "No se encontró ningún
     producto") es el <results-list class="section product-grid-container">
     nativo de main-collection.liquid — ese ".section" da por hecho estar
     envuelto en el wrapper .shopify-section estándar del tema para
     calcular su propio margen de página (grid con columnas de margen a
     los lados); aquí, insertado por JS dentro de esta sección custom, esa
     cuenta no se resuelve bien: por eso el estado vacío salía en una
     columna rarísima y los productos quedaban pegados al borde.

     OJO: un intento anterior de arreglar esto ponía `display: block
     !important`, anulando el `display: grid` nativo — `<results-list>`
     extiende `PaginatedList` (assets/paginated-list.js), cuyo scroll
     infinito observa con IntersectionObserver unos elementos centinela
     que viven dentro de ese grid; al quitarle el grid, su posición/tamaño
     dejaba de calcularse bien y provocaba una carga de páginas en bucle
     (la página crecía sin fin en mobile). Se mantiene `display: grid` y
     solo se sobrescribe `grid-template-columns` con un valor fiable
     (mismo truco margen/contenido/margen que ya usa el tema, pero sin
     depender de que esté envuelto en `.shopify-section`) — funciona igual
     tanto si dentro hay el mensaje vacío como si hay tarjetas de
     producto, porque la clase .product-grid-container se mantiene en
     ambos casos, y no toca el `display` que necesita el scroll infinito. */
  .tienda-explorer .product-grid-container {
    /* Ancho de contenido reducido un 25% (antes var(--page-width) completo)
       para que las 4 tarjetas por fila salgan un 25% más pequeñas, con más
       margen visible a los lados. */
    grid-template-columns:
      minmax(var(--page-margin, 24px), 1fr)
      minmax(0, calc(var(--page-width, 1400px) * 0.75))
      minmax(var(--page-margin, 24px), 1fr) !important;
  }

  .tienda-explorer .product-grid-container > * {
    grid-column: 2 !important;
    /* Sin esto, en producción la propia grid de tarjetas (.product-grid)
       no se estira a los ~1445px de la columna 2 que le da la regla de
       arriba — se queda con un ancho mínimo propio (100-250px) y su
       auto-fill interno solo le cabe una columna, así que las tarjetas
       aparecen apiladas una debajo de otra en vez de en fila. */
    width: 100% !important;
  }

  /* Un nivel más adentro hay OTRA grid nativa (.main-collection-grid), con
     su propio sistema de 12 columnas de margen — pensado para vivir dentro
     de una página de colección real, donde esas columnas sí se calculan
     bien. Al reinsertarla aquí (fetch + swap) se queda colocada en 1 sola
     de esas 12 columnas (120px) en vez de ocupar todo el ancho. Se fuerza
     a ocupar todas las columnas de punta a punta. */
  .tienda-explorer .product-grid-container .main-collection-grid {
    grid-column: 1 / -1 !important;
  }

  /* Filas fijas de 4 productos en vez del auto-fill nativo (que, según el
     ancho disponible, podía colar una 5ª columna estrecha) — deja más aire
     a los lados de cada tarjeta. */
  .tienda-explorer .product-grid {
    --product-grid-columns-desktop: repeat(4, 1fr) !important;
  }

  /* Mismo remate en arco de las tarjetas de producto que ya tiene la
     colección "Cesto de los tesoros" (ver cesto-collection-style.liquid) —
     aquí aplicado a toda la grid de Tienda, no solo a una categoría. */
  .tienda-explorer .card-gallery {
    border-radius: 50% 50% 6px 6px / 30% 30% 6px 6px;
    overflow: hidden;
    /* Mismo arco también como clip-path: border-radius + overflow:hidden NO
       recorta el carrusel de fotos (tarjetas con varias imágenes: productos
       con variantes o personalizables), que el navegador pinta en otra capa
       — por eso esas tarjetas salían sin arco. clip-path sí lo recorta. */
    clip-path: inset(0 round 50% 50% 6px 6px / 30% 30% 6px 6px);
  }

  /* Recorte cuadrado + zoom uniforme de las fotos de producto (ver
     snippets/card-gallery.liquid) — duplicado aquí porque Tienda inserta
     las tarjetas por fetch desde otra colección y su plantilla no incluye
     de por sí el CSS de ese snippet (mismo motivo que el badge "Agotado"
     y el botón de compra rápida, ver comentario al principio del archivo). */
  .tienda-explorer .card-gallery {
    aspect-ratio: 1 / 1;
  }

  .tienda-explorer .card-gallery .product-media__image {
    object-fit: cover;
    object-position: center;
    transform: scale(1.15);
  }

  @media screen and (max-width: 749px) {
    /* El grid-column: 1/-1 !important de más arriba (necesario para que la
       grid nativa ocupe todo el ancho tras el fetch+swap) también anula el
       margen lateral que el ajuste "full_width_on_mobile: false" de la
       plantilla intenta dar en mobile — sin esto, tarjetas y paginación
       quedan pegadas al borde de la pantalla. Se fuerza aquí directamente. */
    .tienda-explorer .product-grid-container .main-collection-grid {
      padding-inline: 16px !important;
    }

    .tienda-explorer__cards {
      gap: 10px;
      padding-block-end: 16px;
      padding-inline: 14px;
    }

    .tienda-explorer--no-subrow .tienda-explorer__cards {
      padding-block-end: 32px;
    }

    .tienda-explorer__link {
      gap: 6px;
    }

    .tienda-explorer__title {
      font-size: clamp(12px, 2.8vw, 14.5px);
    }

    .tienda-explorer__subrow {
      padding-block: 16px;
      margin-bottom: 16px;
    }

    .tienda-explorer__subrow-inner {
      gap: 10px;
    }

    .tienda-explorer__subrow-inner--centered {
      gap: 10px;
    }

    /* Tope fijo en mobile: la fila de 7 (Cesto) ya se encoge sola porque
       es una grid de 7 columnas, pero la fila de 2 (Kits) es un flex row
       con solo 2 elementos — nunca se ve forzada a encoger y se queda en
       su max-width de 140px completo, mucho más grande que los círculos
       de la barra principal de arriba (que sí se reparten entre 5
       columnas). Mismo tope en ambas para que el tamaño no dependa de
       cuántas subcategorías haya. */
    .tienda-explorer__sub-link,
    .tienda-explorer__sub-circle {
      max-width: 60px;
    }

    .tienda-explorer__sub-label {
      font-size: clamp(10px, 2.4vw, 12.5px);
    }
  }

  /* SOLO móvil (≤749px) — escritorio sin cambios:
     1. Sin el título "Productos".
     2. Buscador justo debajo de la fila de subcategorías, a ~12px (arriba:
        margin-top del buscador; abajo: el gap de 12px de
        .product-search-stack hasta los chips). Se quitan los huecos que
        había en medio: margen inferior de la subbarra y el relleno
        superior de la grid nativa de colección que llega por fetch. */
  @media screen and (max-width: 749px) {
    .tienda-explorer__title-heading {
      display: none;
    }

    .tienda-explorer__subrow {
      margin-bottom: 0;
    }

    .tienda-explorer .product-grid-container .main-collection-grid {
      padding-block-start: 0 !important;
    }

    .tienda-explorer .product-search-stack > .product-search {
      margin-block-start: 12px;
    }
  }
/* END_SECTION:tienda-category-explorer */

/* START_SECTION:tienda-intro (INDEX:67) */
.tienda-intro {
    background: #FAF6F1;
    /* Espacio entre la imagen y la barra de categorías de debajo — lo
       justo para separarlas visualmente sin dejar un hueco grande, ya que
       ya no hay título entre medias. */
    padding-block: 0 24px;
  }

  .tienda-intro__banner {
    width: 100%;
    height: 260px;
    overflow: hidden;
  }

  .tienda-intro__banner-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .tienda-intro {
      padding-block: 0 16px;
    }

    .tienda-intro__banner {
      height: 130px;
    }
  }
/* END_SECTION:tienda-intro */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:68) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:69) */
.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;
  }

  .announcement-bar__cta-group {
    white-space: nowrap;
  }

  .announcement-bar__cta {
    display: inline;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
    border: none;
    border-bottom: 1px solid currentcolor;
    line-height: 1.3;
    cursor: pointer;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:70) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:71) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:72) */
.blog-post-card__content-text a {
    color: var(--color-primary);
  }

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

/* START_BLOCK:_blog-post-featured-image (INDEX:73) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    display: block;
    position: relative;
    width: var(--width);
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:74) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:75) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:76) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

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

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:77) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:78) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:79) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(> #header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:80) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:83) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:85) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

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

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:89) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:90) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:92) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:95) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:96) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:97) */
.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:98) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

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

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

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

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

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

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

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

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

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

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

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

    display: flex;
    height: 100%;
  }

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

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

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

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

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

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

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

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

  /* ===== NALIBLU: colores del menú principal =====
     Global para las 3 variantes de este bloque (mega-menú, navigation_bar,
     drawer móvil se cubre aparte en header-drawer.liquid).
     Inactivos: verde salvia #7F7F6A, siempre (incluso en hover/subdued).
     Activo (link.active/current): mismo color de siempre, solo negrita. */
  .menu-list__link:not(.menu-list__link--active):not([aria-current='page']),
  .menu-list__item:not([aria-current='page']) {
    color: #7F7F6A !important;
  }

  /* Hover: mismo patrón que la lupa/cuenta/carrito (.header-actions__action) —
     no cambian de color al hacer hover; en su lugar, el resto de hermanos se
     atenúan con opacity mientras el hovereado se queda al 100%. Usamos
     opacity (no color) para no pelear con el !important de arriba. */
  .menu-list__link,
  .menu-list__item {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  @media (hover: hover) {
    .menu-list:has(.menu-list__list-item:hover) .menu-list__link:not(:hover),
    .menu-list--mobile:has(.menu-list__item:hover) .menu-list__item:not(:hover) {
      opacity: var(--opacity-subdued-text);
    }
  }

  .menu-list__link--active,
  .menu-list__link[aria-current='page'],
  .menu-list__item[aria-current='page'] {
    font-weight: 700 !important;
  }

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

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

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

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

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

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

  .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;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:101) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

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

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:105) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

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

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

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

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

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

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

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

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

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

/* START_BLOCK:_product-details (INDEX:110) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:115) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

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

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

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

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

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

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:116) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:117) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accordion (INDEX:119) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:comparison-slider (INDEX:125) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:126) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:127) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:email-signup (INDEX:129) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);

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

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

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

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:131) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

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

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

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

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

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

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

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

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

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:134) */
.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:icon (INDEX:136) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:137) */
.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:139) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

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

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

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:140) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:nb-product-cta (INDEX:141) */
/* Altura y tipografía como "Agregar al carrito"; colores de la etiqueta
     de variante (--nb-variant-label-*, snippets/variant-main-picker.liquid)
     o del formulario de personalización (--nb-personalization-*,
     snippets/buy-buttons-styles.liquid). Ancho completo en móvil, auto en
     escritorio. */
  .nb-product-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--height-buy-buttons);
    padding-inline: var(--button-padding-inline, 24px);
    font-family: var(--button-font-family-primary);
    font-size: var(--font-paragraph--size);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: filter 0.15s ease;
  }

  @media screen and (min-width: 750px) {
    .nb-product-cta {
      width: auto;
      align-self: flex-start;
    }
  }

  .nb-product-cta:hover {
    filter: brightness(0.97);
  }

  .nb-product-cta--variant {
    background: var(--nb-variant-label-bg);
    color: var(--nb-variant-label-color);
    border: 1px solid var(--nb-variant-label-border);
    border-radius: var(--nb-variant-label-radius);
  }

  .nb-product-cta--personalise {
    background: var(--nb-personalization-bg);
    color: var(--nb-personalization-label-color);
    /* Borde sutil en el color del texto para que se lea como botón sobre
       el fondo crema de la página. */
    border: 1px solid color-mix(in srgb, var(--nb-personalization-label-color) 18%, transparent);
    border-radius: var(--nb-variant-label-radius);
  }

  .nb-product-cta__icon {
    flex-shrink: 0;
  }
/* END_BLOCK:nb-product-cta */

/* START_BLOCK:page (INDEX:143) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:144) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:145) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-accordions (INDEX:147) */
.product-accordions {
    border-top: 1px solid rgba(59, 42, 28, 0.1);
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .product-accordions__item {
    border-bottom: 1px solid rgba(59, 42, 28, 0.1);
  }

  .product-accordions__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-block: 16px;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    color: #3b2a1c;
    list-style: none;
  }

  .product-accordions__head::-webkit-details-marker {
    display: none;
  }

  /* "+" that becomes "−" when open (never an "×"): the horizontal bar
     always stays put, only the vertical bar rotates 90° to flatten onto it. */
  .product-accordions__plus {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .product-accordions__plus::before,
  .product-accordions__plus::after {
    content: '';
    position: absolute;
    background: #b44c21;
  }

  .product-accordions__plus::before {
    width: 14px;
    height: 2px;
    top: 6px;
    left: 0;
  }

  .product-accordions__plus::after {
    width: 2px;
    height: 14px;
    top: 0;
    left: 6px;
    transition: transform 0.2s ease;
  }

  .product-accordions__item[open] .product-accordions__plus::after {
    transform: rotate(90deg);
  }

  .product-accordions__body {
    padding-bottom: 18px;
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    line-height: 1.6;
    color: #7f7f6a;
  }

  .product-accordions__body--details {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .product-accordions__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .product-accordions__label {
    font-weight: 600;
    color: #3b2a1c;
  }

  .product-accordions__value {
    color: #7f7f6a;
  }
/* END_BLOCK:product-accordions */

/* START_BLOCK:product-custom-property (INDEX:149) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:151) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:152) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:product-subcategory-badge (INDEX:153) */
media-gallery {
    position: relative;
  }

  .product-subcategory-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: #b44c21;
    color: #fff;
    font-family: var(--font-body--family);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    padding: 5px 14px;
    border-radius: 20px;
    pointer-events: none;
  }
/* END_BLOCK:product-subcategory-badge */

/* START_BLOCK:product-subtitle (INDEX:154) */
.product-subtitle {
    font-size: 15px;
    font-weight: 400;
    color: #7f7f6a;
    margin-top: 4px;
    margin-bottom: 12px;
  }
/* END_BLOCK:product-subtitle */

/* START_BLOCK:product-trust-badges (INDEX:156) */
/* Norma: máximo 4 características por fila. Cada una mide exactamente un
     cuarto de la fila (y la fila, como mucho, 4 × 110px — el tamaño de
     siempre en escritorio), así que:
     - 2, 3 o 4 → una sola fila, centradas, mismo tamaño que en una de 4;
     - 7 → 4 en la primera fila + 3 centradas en la segunda;
     - en móvil, si 4 × 110px no cabe, cada una se encoge hasta su cuarto. */
  .product-trust-badges {
    --nb-badges-gap: 18px;
    --nb-badge-max: 110px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nb-badges-gap);
    padding-block: 4px;
    width: 100%;
    max-width: calc(var(--nb-badge-max) * 4 + var(--nb-badges-gap) * 3);
    margin-inline: auto;
  }

  .product-trust-badges__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    flex: 0 0 calc((100% - var(--nb-badges-gap) * 3) / 4);
    min-width: 0;
  }

  .product-trust-badges__icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #eadacb !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .product-trust-badges__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-trust-badges__label {
    display: block;
    width: 100%;
    min-height: 2.6em;
    font-family: var(--font-body--family);
    font-size: 0.6875rem;
    line-height: 1.3;
    color: #7f7f6a;
  }

  @media screen and (max-width: 749px) {
    .product-trust-badges {
      --nb-badges-gap: 10px;
    }

    /* El icono nunca más ancho que su cuarto de fila (pantallas muy
       estrechas). */
    .product-trust-badges__icon {
      width: min(48px, 100%);
      height: auto;
      aspect-ratio: 1 / 1;
    }

    .product-trust-badges__label {
      font-size: 0.625rem;
    }
  }
/* END_BLOCK:product-trust-badges */

/* START_BLOCK:review (INDEX:158) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:160) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:161) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:162) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:165) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:166) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

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

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:background-media (INDEX:168) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:169) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:170) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:172) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:buy-buttons-styles (INDEX:173) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

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

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

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

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

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

  /* El formulario de personalización (.nb-personalizacion) ya NO vive
     dentro de esta fila: blocks/buy-buttons.liquid lo pinta justo antes de
     .product-form-buttons (sigue dentro del <form>). Antes era un hijo más
     de este flex, colocado arriba con order:-1 + flex-basis:100%, y era lo
     único que diferenciaba la fila cantidad+botón de las fichas con
     personalización de las demás.

     Móvil: misma fila en TODAS las fichas — cantidad a la izquierda (sin
     encogerse), botón ocupando el resto, y el mismo hueco que en
     escritorio (el nativo era la mitad, ~5,6px, y se veían pegados).
     Escritorio sin cambios. */
  @media screen and (max-width: 749px) {
    .product-form-buttons:not(:has(.quantity-rules)) {
      gap: var(--gap-sm);
    }

    .product-form-buttons > .quantity-selector-wrapper {
      flex-shrink: 0;
    }

    .product-form-buttons > :has(> add-to-cart-component):not(.quantity-selector-wrapper) {
      flex: 1 1 0;
      min-width: 0;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .product__pickup-availabilities {
    width: 100%;
  }

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

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

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

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

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

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

  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

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

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

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

  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }

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

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

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

  .volume-pricing__table {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }

  /* ===== Nota informativa de la ficha (custom.nota_info) — blocks/buy-buttons.liquid =====
     Fondo = verde oliva claro de la tarjeta de newsletter del footer; borde
     izquierdo y enlace = verde oliva oscuro (variables globales en
     snippets/theme-styles-variables.liquid). */
  .product-note {
    display: block;
    margin-top: 16px;
    padding: 16px 20px;
    background: var(--nb-olive-light);
    border-left: 4px solid var(--nb-olive-dark);
    border-radius: 12px;
  }

  .product-note__text {
    margin: 0;
    font-style: normal;
    font-size: 16px;
    line-height: 1.5;
    color: #3B2A1C;
  }

  .product-note__link {
    display: inline-block;
    margin-top: 8px;
    font-weight: 700;
    color: var(--nb-olive-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .product-note__link:hover {
    text-decoration: none;
  }

  @media screen and (min-width: 750px) {
    .product-note__text {
      font-size: 17px;
    }
  }

  /* ===== Personalización de producto (metaobjetos) — blocks/buy-buttons.liquid ===== */
  /* Fondo del formulario y color de sus etiquetas como variables: los
     reutiliza el botón CTA "Personaliza" de la ficha
     (blocks/nb-product-cta.liquid). Mismos valores de siempre. */
  :root {
    --nb-personalization-bg: #F1E4D3;
    --nb-personalization-label-color: #3B2A1C;
  }

  .nb-personalizacion {
    background: var(--nb-personalization-bg);
    border-radius: 16px;
    padding: 32px;
    margin-block-end: var(--gap-sm, 16px);
  }

  .nb-personalizacion__row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .nb-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }

  .nb-field label {
    color: var(--nb-personalization-label-color);
    font-weight: 600;
    font-size: 14px;
  }

  .nb-field input,
  .nb-field select,
  .nb-field textarea {
    box-sizing: border-box;
    font-family: var(--font-body--family);
    /* 16px mínimo: por debajo de eso, iOS Safari hace zoom automático al
       enfocar el campo (mismo problema ya documentado y resuelto para los
       filtros de Tienda) — ese zoom es lo que saca el scroll lateral al
       entrar en cualquier campo del formulario. */
    font-size: 16px;
    line-height: 1.4;
    color: #3B2A1C;
    background: #FAF6F1;
    border: 1.5px solid #d4c4b0;
    border-radius: 10px;
    padding: 12px 14px;
  }

  .nb-field input,
  .nb-field select {
    min-height: 46px;
  }

  .nb-field input::placeholder,
  .nb-field textarea::placeholder {
    color: #7F7F6A;
  }

  .nb-field textarea {
    resize: vertical;
  }

  /* El <select> nativo trae su propia flecha pegada al borde y una altura
     que no siempre respeta el padding vertical del resto de campos (varía
     según el sistema operativo). Se anula la apariencia nativa y se dibuja
     una flecha propia, con el mismo padding-right (14px) que usan
     visualmente los iconos nativos de calendario/reloj en los campos
     date/time, para que los cuatro tipos de campo queden alineados. */
  .nb-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233B2A1C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
  }

  .nb-field input:focus,
  .nb-field select:focus,
  .nb-field textarea:focus {
    outline: none;
    border-color: #B44C21;
    box-shadow: 0 0 0 3px rgba(180, 76, 33, 0.12);
  }

  .nb-field__error {
    color: #C0392B;
    font-size: 13px;
  }

  /* --- Campo tipo "Imagen" (subida de archivo del cliente) --- */
  .nb-field--image {
    flex-basis: 100%;
  }

  /* Caja con el mismo alto, fondo y radio que el resto de campos. El
     <input type="file"> real la cubre entera (transparente): un clic en
     cualquier punto abre el selector, y sigue siendo enfocable para el
     aviso nativo de "campo obligatorio" (con display:none no lo sería). */
  .nb-field__upload {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    min-height: 46px;
    padding: 8px 14px;
    background: #FAF6F1;
    border: 1.5px solid #EADACB;
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .nb-field__upload:hover {
    border-color: #B44C21;
  }

  .nb-field__upload:focus-within {
    border-color: #B44C21;
    box-shadow: 0 0 0 3px rgba(180, 76, 33, 0.12);
  }

  .nb-field .nb-field__upload input[type='file'] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
  }

  .nb-field__upload-button {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1.5px solid #B44C21;
    border-radius: 999px;
    color: #B44C21;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
  }

  .nb-field__upload-name {
    min-width: 0;
    overflow: hidden;
    color: #7F7F6A;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nb-field__help {
    color: #7F7F6A;
    font-size: 13px;
  }

  .nb-field__preview {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 1.5px solid #EADACB;
    border-radius: 10px;
    background: #FAF6F1;
  }

  .nb-field__preview[hidden] {
    display: none;
  }

  /* --- Consentimiento único de las imágenes (.nb-field--consent) ---
     base.css pone appearance:none a todos los checkbox y pinta su estado
     marcado con reglas :where() (especificidad 0): ".nb-field input"
     (fondo crema, borde, radio 10px, padding) las pisaba todas, así que el
     checkbox salía redondo y parecía no marcarse nunca. Aquí se dibuja
     entero con selectores más específicos que ".nb-field input:focus" y
     ".nb-field label". */
  .nb-field--consent {
    flex-basis: 100%;
  }

  .nb-field .nb-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #3B2A1C;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
  }

  .nb-field .nb-consent .nb-consent__input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: #FAF6F1;
    border: 1.5px solid #EADACB;
    border-radius: 4px;
    box-shadow: none;
    accent-color: #B44C21;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .nb-field .nb-consent .nb-consent__input:hover {
    border-color: #B44C21;
  }

  .nb-field .nb-consent .nb-consent__input:checked {
    background: #B44C21;
    border-color: #B44C21;
  }

  /* Marca blanca: una "L" girada hecha con bordes (sin máscara SVG). */
  .nb-field .nb-consent .nb-consent__input::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    background: none;
    mask-image: none;
  }

  .nb-field .nb-consent .nb-consent__input:checked::after {
    opacity: 1;
  }

  .nb-field .nb-consent .nb-consent__input:focus {
    outline: none;
  }

  .nb-field .nb-consent .nb-consent__input:focus-visible {
    outline: 2px solid #B44C21;
    outline-offset: 2px;
  }

  .nb-field .nb-consent .nb-consent__input[aria-invalid] {
    border-color: #B44C21;
  }

  .nb-consent__text {
    padding-top: 1px;
  }

  .nb-field__error--image {
    color: #B44C21;
  }

  .nb-field__error--image:empty {
    display: none;
  }

  /* Selector de color sin ninguna opción con stock (fase 2 de stock):
     aviso en lugar del desplegable, con la caja de los demás campos. */
  .nb-field__agotado {
    box-sizing: border-box;
    margin: 0;
    min-height: 46px;
    padding: 12px 14px;
    color: #B44C21;
    background: #FAF6F1;
    border: 1.5px solid #EADACB;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
  }

  @media screen and (max-width: 749px) {
    .nb-personalizacion__row {
      flex-direction: column;
    }

    .nb-field {
      flex: 1 1 100%;
    }
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:174) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
    /* Recorte cuadrado uniforme para todas las tarjetas de producto de
       listados/categorías, independiente del ajuste "Proporción de imagen"
       de cada sección. El zoom (1.15) reduce el fondo vacío alrededor de
       productos fotografiados más "alejados", sin tocar el layout de la
       tarjeta (el recorte lo absorbe overflow: hidden de aquí mismo). */
    aspect-ratio: 1 / 1;
  }

  .card-gallery .product-media__image {
    object-fit: cover;
    object-position: center;
    transform: scale(1.15);
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:175) */
.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:176) */
.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:177) */
.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);
  }

  /* Tarjeta de producto en el cart drawer: caja con fondo beige claro y
     esquinas redondeadas, para que no quede flotando suelta sobre el
     fondo crema del panel — mismo tono que .nb-personalizacion en
     snippets/buy-buttons-styles.liquid. */
  .cart-drawer .cart-items__table-row {
    background-color: #F1E4D3;
    border-radius: 14px;
    padding: var(--padding-lg);
  }

  /* Selector de cantidad (+/-) en terracota, píldora, con el contorno
     resaltado en terracota al pasar el cursor por encima. */
  .cart-drawer .quantity-selector {
    border-radius: 999px;
  }

  .cart-drawer .quantity-selector:hover,
  .cart-drawer .quantity-selector:focus-within {
    border-color: #B44C21;
  }

  .cart-drawer .quantity-selector .quantity-minus,
  .cart-drawer .quantity-selector .quantity-plus {
    color: #B44C21;
    border-radius: 999px;
  }

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

  .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);
    /* Terracota + píldora, igual que "Ver tu pedido" del email o el CTA
       del hero de la home — el negro venía del esquema de color por
       defecto del tema (ningún esquema define terracota como color de
       botón primario, mismo motivo ya documentado para el botón de
       "Añadir al carrito" en product-style-overrides.liquid). */
    --button-background-color: #B44C21 !important;
    --button-color: #FFFFFF !important;
    --button-border-color: #B44C21 !important;
    border-radius: 999px !important;
  }

  .cart-items__empty-button:hover {
    --button-background-color: #9C4019 !important;
    --button-border-color: #9C4019 !important;
  }

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

  /* Miniatura de la imagen subida por el cliente (campo de personalización
     tipo "Imagen"). */
  .cart-items__property-image {
    display: inline-block;
    vertical-align: middle;
    margin-inline-start: 4px;
    line-height: 0;
  }

  .cart-items__property-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 1px solid #EADACB;
    border-radius: 10px;
  }

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

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

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

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

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

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

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

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

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

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:178) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  /* Separadores en terracota suave (en vez de gris neutro) — solo en el
     cart drawer, la página /cart mantiene su estilo actual. */
  .cart-drawer .cart-actions,
  .cart-drawer .cart-totals:not(:has(.cart-actions)) {
    border-color: rgb(180 76 33 / 0.35);
  }

  .cart-drawer .cart-actions__divider {
    border-block-start-color: rgb(180 76 33 / 0.35);
  }

  .cart-drawer .cart-discount__summary {
    color: #B44C21;
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

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

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

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

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

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

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

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

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

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

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

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  /* Botón "Pagar" en terracota Naliblu en el cart drawer, en cualquier
     ancho de pantalla — el drawer usa su propio esquema de color
     (settings.drawer_color_scheme), no el terracota de marca. */
  .cart-drawer .cart__ctas .cart__checkout-button {
    --button-background-color: #B44C21 !important;
    --button-color: #FFFFFF !important;
    --button-border-color: #B44C21 !important;
    border-radius: 999px !important;
  }

  .cart-drawer .cart__ctas .cart__checkout-button:hover {
    --button-background-color: #9C4019 !important;
    --button-border-color: #9C4019 !important;
  }

  @media screen and (max-width: 749px) {
    /* Página /cart (no el drawer): mismo terracota, solo en móvil, como
       ya estaba. */
    .cart__ctas .cart__checkout-button {
      --button-background-color: #B44C21 !important;
      --button-color: #FFFFFF !important;
      --button-border-color: #B44C21 !important;
      border-radius: 999px !important;
    }

    .cart__ctas .cart__checkout-button:hover {
      --button-background-color: #9C4019 !important;
      --button-border-color: #9C4019 !important;
    }
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-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-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  /* Campo de descuento con el mismo tratamiento que los inputs del
     formulario de personalización de producto (.nb-field en
     snippets/buy-buttons-styles.liquid). */
  .cart-drawer .cart-discount__input {
    background-color: #FAF6F1;
    border: 1.5px solid #d4c4b0;
    border-radius: 10px;
    padding: 12px 14px;
  }

  .cart-drawer .cart-discount__input:focus {
    outline: none;
    border-color: #B44C21;
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  /* Botón "Aplicar" del código de descuento en terracota Naliblu, mismo
     motivo que el botón "Pagar": el drawer usa su propio esquema de
     color, no el terracota de marca. */
  .cart-drawer .cart-discount__button {
    --button-background-color: #B44C21 !important;
    --button-color: #FFFFFF !important;
    --button-border-color: #B44C21 !important;
    border-radius: 999px !important;
  }

  .cart-drawer .cart-discount__button:hover {
    --button-background-color: #9C4019 !important;
    --button-border-color: #9C4019 !important;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

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

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-drawer .cart-discount__summary:hover {
    color: #9C4019;
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:181) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:183) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:184) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:185) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:186) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:187) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:free-shipping-bar (INDEX:190) */
.free-shipping-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-block-end: var(--margin-md, 16px);
  }

  .free-shipping-bar__text {
    margin: 0;
    font-size: var(--font-size--2xs, 12px);
    color: var(--color-foreground);
    text-align: center;
  }

  .free-shipping-bar--complete .free-shipping-bar__text {
    color: #B44C21;
    font-weight: 600;
  }

  .free-shipping-bar__track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgb(var(--color-foreground-rgb) / 0.12);
    overflow: hidden;
  }

  .free-shipping-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: #B44C21;
    transition: width var(--animation-speed, 0.3s) var(--animation-easing, ease);
  }
/* END_SNIPPET:free-shipping-bar */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:192) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:194) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

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

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

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

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

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:195) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

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

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX: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-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

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

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

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

  .cart-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);
    border-top: 4px solid #B44C21;
    box-shadow: var(--shadow-drawer);
    background-color: #FAF6F1;

    @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: #FAF6F1;
    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: #FAF6F1;
    /* 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);
    padding-block-start: var(--padding-lg);
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  /* La línea divisoria gris ya no hace falta: cada producto es ahora su
     propia tarjeta con fondo propio (ver cart-products.liquid). El
     padding-bottom que tenía esta regla (para separar de la línea) se
     quita porque ahora el espaciado interno de la caja lo pone
     cart-products.liquid — aquí solo queda el margin-bottom, que separa
     una tarjeta de la siguiente por fuera de la caja. */
  .cart-drawer__items .cart-items__table-row {
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    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: #FAF6F1;
    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: #B44C21;
  }

  .cart-drawer__heading .cart-bubble__text {
    color: #FFFFFF;
    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);
    }
  }

  /* ===== NALIBLU: colores del menú principal (móvil) =====
     Mismos criterios que el menú desktop: inactivos en verde salvia
     #7F7F6A siempre, activo mantiene su color pero en negrita. */
  .menu-drawer__menu-item--mainlist:not([aria-current='page']) {
    color: #7F7F6A !important;
  }

  /* Hover: mismo patrón "atenuar hermanos" que lupa/cuenta/carrito — opacity
     en vez de cambio de color, para no pelear con el !important de arriba. */
  .menu-drawer__menu-item--mainlist {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  @media (hover: hover) {
    .menu-drawer__menu:has(.menu-drawer__menu-item--mainlist:hover)
      .menu-drawer__menu-item--mainlist:not(:hover) {
      opacity: var(--opacity-subdued-text);
    }
  }

  .menu-drawer__menu-item--mainlist[aria-current='page'] {
    font-weight: 700 !important;
  }

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

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

  /* ===== NALIBLU: drawer ===== */

  /* Fondo igual que el header */
  .menu-drawer {
    background-color: #FAF6F1 !important;
  }

  /* Selector de idioma: arriba-derecha, flotando sobre el contenido */
  .menu-drawer__utility-links {
    position: static;
  }

  .menu-drawer .menu-drawer__localization:not(drawer-localization-component *) {
    position: absolute;
    top: 0;
    right: 0;
    padding: 14px 16px;
    background: transparent;
    display: flex;
    align-items: center;
    z-index: 10;
  }

  /* "ES" ligeramente más grande en el drawer */
  .menu-drawer .naliblu-lang__code {
    font-size: 1.25rem;
  }

  /* El dropdown del idioma se abre hacia abajo normalmente */
  .menu-drawer .menu-drawer__localization .naliblu-lang__menu {
    top: 100%;
    left: auto;
    right: 0;
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:202) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:205) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

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

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

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

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

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

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

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

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

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

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:206) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

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

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

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

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

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

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }

  /* --- Naliblu: selector de idioma personalizado --- */
  .naliblu-lang { position: relative; }

  @media screen and (max-width: 749px) {
    .naliblu-lang { margin-right: 16px; }
  }

  .naliblu-lang__trigger {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    color: var(--color-foreground); padding: 4px 0;
    font-size: inherit; font-family: inherit; line-height: 1;
  }

  .naliblu-lang__trigger:focus-visible {
    outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px;
  }

  .naliblu-lang__code {
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em;
  }

  .naliblu-lang__caret {
    font-size: 0.75rem; line-height: 1; flex-shrink: 0;
    transition: transform 0.22s ease;
    display: inline-block;
  }

  .naliblu-lang[data-open] .naliblu-lang__caret { transform: rotate(180deg); }

  /* Mismo fondo que el popup de suscripción (--np-bg en newsletter-popup.liquid),
     para que ambos elementos usen exactamente el mismo verde claro. */
  .naliblu-lang__menu {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: 150px;
    background: #DEDED3;
    border: 1px solid rgba(70, 58, 44, 0.15);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(30,45,25,0.18);
    padding: 6px;
    z-index: 300;
  }

  .naliblu-lang__menu[hidden] { display: none; }

  /* Texto en tinta oscura (misma --np-ink del popup), ya que el fondo ahora
     es claro. */
  .naliblu-lang__option {
    display: flex; align-items: center; gap: 10px;
    width: 100%; background: none; border: none;
    cursor: pointer; padding: 9px 13px; border-radius: 10px;
    text-align: left; font-family: inherit; font-size: 0.82rem;
    color: #463a2c; transition: background 0.14s ease;
  }

  /* Overlays de hover/activo en tinta oscura semitransparente (antes blanco,
     pensado para fondo oscuro). */
  .naliblu-lang__option:hover { background: rgba(70, 58, 44, 0.08); }

  .naliblu-lang__option--active {
    background: rgba(70, 58, 44, 0.12); font-weight: 600;
  }

  .naliblu-lang__iso {
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.07em; color: rgba(70, 58, 44, 0.62); min-width: 22px;
  }

  .naliblu-lang__name { color: #463a2c; }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:207) */
.media-block {
    overflow: hidden;
    position: relative;

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

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:naliblu-bn-barra (INDEX:212) */
/* Fondo = verde salvia de la tarjeta "¡Únete a Naliblu!" del footer
     (token --nb-olive-light, snippets/theme-styles-variables.liquid; esa
     tarjeta no usa esquema de color). Colores de texto revisados para AA
     sobre #DEDED3: tinta #3B2A1C, etiquetas #5C5747, naranja #9A3F1B. */
  .nb-bn-barra {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-block-end: var(--margin-md, 16px);
    padding: 14px 12px 12px;
    border-radius: 8px;
    background: var(--nb-olive-light, #DEDED3);
    border: 1px solid rgb(59 42 28 / 0.15);
    color: #3B2A1C;
  }

  .nb-bn-barra__cabecera {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
  }

  .nb-bn-barra__titulo {
    margin: 0;
    font-family: var(--font-heading--family, inherit);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
  }

  .nb-bn-barra__intro {
    margin: 0;
    font-size: var(--font-size--xs, 13px);
    line-height: 1.35;
  }

  .nb-bn-barra__pista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 3px;
  }

  .nb-bn-barra__tramo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .nb-bn-barra__segmento {
    position: relative;
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #FAF6F1;
    overflow: hidden;
  }

  .nb-bn-barra__relleno {
    display: block;
    height: 100%;
    background: #3B2A1C;
    transition: width var(--animation-speed, 0.3s) var(--animation-easing, ease);
  }

  .nb-bn-barra__etiqueta {
    font-size: 11px;
    line-height: 1.25;
    text-align: end;
    color: #5C5747;
  }

  .nb-bn-barra__tramo--ok .nb-bn-barra__etiqueta {
    color: #3B2A1C;
    font-weight: 600;
  }

  .nb-bn-barra__mensaje,
  .nb-bn-barra__regalo-texto {
    margin: 0;
    font-size: var(--font-size--2xs, 12px);
    text-align: center;
  }

  .nb-bn-barra__mensaje--ok,
  .nb-bn-barra__regalo-texto--ok {
    color: #9A3F1B;
    font-weight: 600;
  }

  .nb-bn-barra__regalo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-block-start: 8px;
    border-block-start: 1px solid rgb(59 42 28 / 0.15);
  }

  .nb-bn-barra__regalo-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #B44C21;
    color: #FFFFFF;
    font-size: var(--font-size--2xs, 12px);
    font-weight: 600;
    text-decoration: none;
  }

  .nb-bn-barra__regalo-boton:hover {
    background: #9A3F1B;
  }

  .nb-bn-barra__regalo-boton:focus-visible {
    outline: 2px solid #3B2A1C;
    outline-offset: 2px;
  }
/* END_SNIPPET:naliblu-bn-barra */

/* START_SNIPPET:naliblu-bn-popup (INDEX:213) */
/* El tamaño lo manda SOLO .nb-bn-popup__caja (lado de la foto, en px
     enteros); el <dialog> es fit-content, transparente y sin límites
     propios (se anulan los max-width/max-height del navegador, que en
     320 px recortaban), así que mide siempre exactamente lo que la foto y
     no puede asomar ningún fondo a su lado. */
  .nb-bn-popup {
    width: fit-content;
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    overflow: hidden;
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.35);
  }

  .nb-bn-popup::backdrop {
    background: rgb(20 14 9 / 0.6);
  }

  /* Lado de la foto (cuadrada, 1:1): 90vw en móvil, 440 px como mucho, y
     que quepa en el 92% del alto visible. Redondeado hacia abajo a px entero
     con round() (la primera línea es el respaldo sin round()). */
  .nb-bn-popup__caja {
    position: relative;
    width: min(90vw, 440px, 92svh);
    width: round(down, min(90vw, 440px, 92svh), 1px);
    line-height: 0;
  }

  .nb-bn-popup__enlace {
    display: block;
    line-height: 0;
  }

  .nb-bn-popup__enlace img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
  }

  .nb-bn-popup__enlace:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: -6px;
  }

  /* X: 44×44 de zona táctil, círculo marfil semitransparente con trazo
     oscuro para que se lea sobre cualquier parte de la foto. */
  .nb-bn-popup__x {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(250 246 241 / 0.85);
    color: #3B2A1C;
    cursor: pointer;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
  }

  .nb-bn-popup__x:hover {
    background: rgb(250 246 241 / 1);
  }

  .nb-bn-popup__x:focus-visible {
    outline: 2px solid #3B2A1C;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #FAF6F1;
  }
/* END_SNIPPET:naliblu-bn-popup */

/* START_SNIPPET:newsletter-popup (INDEX:222) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Karla:wght@300;400;500;600&display=swap');

  /* El propio .dialog-modal[open] del tema (base.css) anima `margin-top` de
     var(--padding-sm) a 0 (@keyframes elementSlideInTop). Esto pisa cualquier
     `margin: auto` que intentemos usar para centrar el <dialog>, sea cual sea
     su "position". Por eso NO centramos el <dialog> con margin: lo convertimos
     en un contenedor fijo a pantalla completa (position:fixed; inset:0),
     transparente, que centra por flexbox a su hijo real (.newsletter-popup__inner,
     la tarjeta visible). El centrado flex no depende del margin del <dialog>,
     así que es inmune a esa animación. Además anulamos esa animación aquí para
     que no interfiera con el layout mientras se abre/cierra.  */
  .newsletter-popup__content {
    --np-bg: #DEDED3;
    --np-ink: #463a2c;
    --np-line: rgba(70, 58, 44, .15);
    --np-input: #fbf7f2;
    --np-accent: #B44C21;

    position: fixed;
    inset: 0;
    margin: 0;
    /* dvh/dvw en vez de vh/vw: en móvil, "100vh" se calcula contra el
       viewport MÁS GRANDE posible (con la barra de direcciones oculta),
       más alto que lo que realmente se ve cuando la barra está visible —
       puede dejar el diálogo (aunque sea position:fixed) más alto que la
       pantalla real. dvh/dvw se recalculan en vivo según el viewport
       visible de verdad en cada momento. */
    width: 100dvw;
    height: 100dvh;
    max-width: 100dvw;
    max-height: 100dvh;
    padding: 24px;
    background: transparent;
    border: none !important;
    box-shadow: none !important;
    animation: none !important;

    /* Oculto por defecto de forma explícita: replica el `dialog:not([open])
       { display:none }` nativo del navegador, que un `display` de autor sin
       condicionar a [open] pisaría sin querer (los estilos de autor ganan
       siempre a los del user-agent, da igual la especificidad). Solo se
       centra por flex cuando el <dialog> está realmente abierto (ver regla
       [open] más abajo). */
    display: none;
  }

  .newsletter-popup__content[open] {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .newsletter-popup__content.dialog-closing {
    animation: none !important;
  }

  /* La tarjeta visible: fondo, bordes redondeados, tamaño real ajustado al
     contenido (no a la pantalla). Es un hijo centrado por flex dentro del
     <dialog> a pantalla completa de arriba. */
  .newsletter-popup__inner {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 100%;
    overflow-y: auto;
    background: var(--np-bg);
    /* Fondo claro (#DEDED3) de nuevo -> texto en tinta oscura otra vez. */
    color: var(--np-ink);
    font-family: 'Karla', system-ui, sans-serif;
    text-align: center;
    border-radius: 20px;
    box-shadow: var(--shadow-popover);
    padding: 48px 44px 44px;
  }

  /* Círculo con contorno visible siempre (antes solo aparecía al :hover, y
     en desktop ni eso se apreciaba con claridad) — mismo aspecto en móvil
     y escritorio. */
  .newsletter-popup__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(70, 58, 44, .18);
    background: rgba(70, 58, 44, .04);
    color: var(--np-ink);
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s ease, border-color .15s ease;
  }

  .newsletter-popup__close:hover {
    background: rgba(70, 58, 44, .1);
    border-color: rgba(70, 58, 44, .3);
  }

  .newsletter-popup__copy {
    max-width: 420px;
    margin: 0 auto 28px;
  }

  .newsletter-popup__copy h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    margin: 0 0 12px;
  }

  .newsletter-popup__copy p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(70, 58, 44, .62);
  }

  .newsletter-popup__form {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--np-input);
    border: 1px solid var(--np-line);
    border-radius: 999px;
    padding: 7px 8px 7px 24px;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
  }

  .newsletter-popup__form input[type='email'] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    -webkit-text-fill-color: var(--np-ink);
    font-family: 'Karla', sans-serif;
    font-size: 15px;
    color: var(--np-ink);
  }

  .newsletter-popup__form button {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: none;
    background: var(--np-accent);
    color: #fbf6f0;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .15s ease;
  }

  .newsletter-popup__form button:hover {
    transform: translateX(2px);
  }

  .newsletter-popup__message {
    position: absolute;
    top: 100%;
    left: 24px;
    margin: 6px 0 0;
    font-size: 12.5px;
  }

  .newsletter-popup__message--error {
    color: #b23b1f;
  }

  .newsletter-popup__cta {
    display: inline-block;
    border-radius: 999px;
    padding: 15px 40px;
    background: var(--np-accent);
    color: #fbf6f0;
    font-family: 'Karla', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .6px;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity .15s ease;
  }

  .newsletter-popup__cta:hover {
    opacity: .88;
  }

  /* En móvil el centrado ya lo da el flex del .newsletter-popup__content de
     arriba (a pantalla completa en todos los tamaños): aquí solo ajustamos
     padding/tipografía de la tarjeta para que quede compacta. */
  @media screen and (max-width: 749px) {
    .newsletter-popup__content {
      padding: 16px;
    }

    .newsletter-popup__inner {
      /* Más padding superior que el círculo de cerrar (top:18px + 34px alto
         = hasta 52px), para que el título de la vista "Gracias" nunca quede
         debajo de la X. */
      padding: 64px 26px 32px;
    }

    .newsletter-popup__copy h2 {
      font-size: 26px;
    }

    .newsletter-popup__form {
      max-width: none;
    }

    /* Evita el zoom automático de iOS al enfocar el input (font-size < 16px),
       que es lo que provoca el texto duplicado/fantasma durante el zoom. */
    .newsletter-popup__form input[type='email'] {
      font-size: 16px;
    }
  }
/* END_SNIPPET:newsletter-popup */

/* START_SNIPPET:overlay (INDEX:224) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:225) */
.pagination {
    --pagination-size: 34px;
    --pagination-inset: 2px;

    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: #3B2A1C;
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: #3B2A1C;
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: 50%;
    border: 1.5px solid #EADACB;
    background: transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }

  .pagination__link:focus-visible {
    outline: 2px solid #3B2A1C;
    outline-offset: 2px;
  }

  .pagination__link:hover:not(.pagination__link--current, .pagination__link--gap, .pagination__link--disabled) {
    border-color: #B44C21;
  }

  .pagination__link--current {
    background: #B44C21;
    color: #FAF6F1;
    font-weight: 700;
    border-color: #B44C21;
    cursor: default;
  }

  .pagination__link--gap {
    border: none;
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

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

    /* En mobile/tablet solo se dejan las flechas anterior/siguiente — los
       círculos numerados y los puntos suspensivos ocupan demasiado sitio
       junto al texto "X–Y de Z productos". */
    .pagination__item:has(.pagination__link--page),
    .pagination__item:has(.pagination__link--gap) {
      display: none;
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:pagination-summary (INDEX:226) */
.pagination-summary {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #7F7F6A;
    white-space: nowrap;
  }
/* END_SNIPPET:pagination-summary */

/* START_SNIPPET:password-layout-styles (INDEX:227) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:231) */
/* ===== Naliblu: paleta de marca en el panel de búsqueda =====
     Por defecto el panel usa settings.popover_color_scheme = scheme-1
     (blanco #ffffff / negro #000000cf, ver config/settings_schema.json y
     settings_data.json) — es un ajuste GLOBAL compartido también por el
     cajón del carrito y el quick-add, así que no se cambia ahí para no
     afectarlos; se sobreescribe solo aquí, dentro de .search-modal.
     Colores de la paleta oficial (documentados en CLAUDE.md): crema
     #FAF6F1 (fondo), marrón oscuro #3B2A1C (texto), terracota #B44C21
     (acentos/CTA). Como "Productos"/"Borrar"/nombre de producto ya usan
     var(--color-foreground) de forma nativa, redefinir la variable basta
     para que hereden el marrón oscuro sin tocarlos uno a uno. */
  .search-modal {
    --color-background: #FAF6F1;
    --color-foreground: #3B2A1C;
  }

  /* El precio usa el snippet compartido 'price', que fija el color otra
     vez en sus hijos (.price__regular, etc.) además del elemento
     <product-price> — hay que forzarlo también en los descendientes,
     mismo motivo/técnica que ya se usó para el precio de la ficha de
     producto. */
  .search-modal product-price,
  .search-modal product-price * {
    color: #B44C21 !important;
  }

  /* Botón "Ver todo": quitar el negro del tema por defecto, terracota +
     píldora completa (999px), igual que el resto de botones de marca del
     sitio (que usan ese radio explícito, no el de 14px del ajuste
     genérico button_border_radius_primary del tema). */
  .search-modal .predictive-search__search-button {
    --button-background-color: #B44C21 !important;
    --button-color: #FFFFFF !important;
    border-radius: 999px !important;
  }

  /* Tarjetas de producto del buscador (resource-card.liquid, vía
     predictive-search-products-list.liquid) con las mismas esquinas
     redondeadas que las tarjetas de producto de Tienda/home (14px,
     --product-corner-radius por defecto vale 8px en este componente).
     Va con !important porque el valor por defecto se fija inline en
     <predictive-search-component style="--product-corner-radius:...">,
     y una variable inline solo se puede ganar con !important desde una
     hoja de estilos. */
  .search-modal .predictive-search {
    --product-corner-radius: 14px !important;
  }

  /* 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:price-filter (INDEX:232) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:234) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

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

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

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

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

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

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

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

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card (INDEX:236) */
.product-card__placeholder-image svg {
    height: 100%;
  }

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

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:237) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

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

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

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

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:238) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:239) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

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

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

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

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

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

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

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

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

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

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:240) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

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

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

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

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:241) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

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

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

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

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

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

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

/* START_SNIPPET:product-search-styles (INDEX:244) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=EB+Garamond:wght@400;500&display=swap');

  /* Caja de búsqueda (snippets/product-search-box.liquid) — su CSS vive aquí,
     no en ese snippet, para que se pueda forzar junto con el resto sin
     imprimir una caja de búsqueda real/vacía fuera de sitio en Tienda (ver
     comentario en product-search-box.liquid). */
  .product-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #EADACB;
    border-radius: 999px;
    padding: 10px 16px;
    width: 260px;
    max-width: 100%;
  }

  .product-search__icon {
    display: flex;
    flex: none;
    color: #7F7F6A;
  }

  .product-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #3B2A1C;
    padding: 0;
  }

  .product-search__input::placeholder {
    color: #B8AFA3;
  }

  .product-search__clear {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: #7F7F6A;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
  }

  .product-search__clear:hover {
    color: #B44C21;
  }

  @media screen and (max-width: 989px) {
    .product-search {
      width: 100%;
      padding: 10px 14px;
    }

    /* Evita el zoom automático de iOS al enfocar el input (font-size <
       16px) — ese zoom es lo que da la sensación de "scroll lateral"
       activado, al quedar la página ampliada. Mismo fix que ya tienen el
       newsletter del footer y el formulario de contacto. */
    .product-search__input {
      font-size: 16px;
    }
  }

  /* Escritorio (>=990px): fila de chips "Filtrando: X" (categoría y, si la
     hay, subcategoría), en horizontal, justo encima de la fila de
     contador/buscador/paginación. Oculta bajo 990px — en móvil los mismos
     chips viven dentro de .product-search-stack. */
  .product-search-chips-bar {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .product-search-chips-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .product-search-chips-bar:empty {
      display: none;
    }
  }

  /* Escritorio (>=990px): una sola fila — buscador a la izquierda, contador
     compacto centrado en el ANCHO TOTAL de la fila (grid-template-columns:
     1fr auto 1fr: columna central de ancho automático, las dos laterales
     absorben el resto a partes iguales — no es un centrado respecto al
     hueco libre entre buscador y paginación, que variaría según sus
     anchos), paginación a la derecha. */
  .product-search-bar {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .product-search-bar {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
      border-top: 1px solid #EADACB;
      border-bottom: 1px solid #EADACB;
      padding: 18px 0;
    }

    .product-search-bar .product-search {
      justify-self: start;
    }

    .product-search-bar .pagination-summary {
      justify-self: center;
    }
  }

  .product-search-bar__pagination {
    display: flex;
    align-items: center;
    justify-self: end;
  }

  .product-search-bar__pagination:empty {
    display: none;
  }

  /* Móvil (<990px): buscador, chip de categoría activa y contador, cada uno
     en su propia fila — oculto a partir de 990px, donde todo eso vive en
     .product-search-bar. */
  .product-search-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
  }

  @media screen and (min-width: 990px) {
    .product-search-stack {
      display: none;
    }
  }

  /* Fila de contador + flechas de paginación dentro de .product-search-stack
     (solo móvil, ya que todo .product-search-stack se oculta a partir de
     990px) — línea arriba y abajo, contador (sin "Mostrando") a la
     izquierda, flechas a la derecha. Solo flechas, nunca los círculos
     numerados: a diferencia de snippets/pagination-controls.liquid, que
     solo los oculta por su propio breakpoint (749px), aquí se ocultan
     siempre porque esta fila entera ya es exclusiva de móvil/tablet (<990px). */
  .product-search-stack__pagination-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #EADACB;
    border-bottom: 1px solid #EADACB;
    padding: 12px 0;
  }

  .product-search-stack__pagination-row .pagination {
    justify-content: flex-end;
  }

  .product-search-stack__pagination-row .pagination__item:has(.pagination__link--page),
  .product-search-stack__pagination-row .pagination__item:has(.pagination__link--gap) {
    display: none;
  }

  /* El chip "Filtrando: X" solo tiene sentido para el filtro de categoría de
     Tienda (círculos) — este mismo snippet se usa también en las páginas de
     colección directas (donde "collection" siempre es una categoría
     concreta, no "todas"), así que se oculta por defecto y solo se muestra
     dentro de .tienda-explorer, sin depender de detectar Tienda desde Liquid. */
  .product-search-chip {
    display: none;
  }

  .tienda-explorer .product-search-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    background: #EADACB;
    color: #3B2A1C;
    border-radius: 999px;
    padding: 6px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
  }

  .product-search-chip__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #3B2A1C;
    cursor: pointer;
    padding: 0;
  }

  .product-search-chip__remove:hover {
    color: #B44C21;
  }

  /* Móvil (<990px): contador (sin "Mostrando") a la izquierda + flechas de
     paginación (sin números) a la derecha, con línea arriba y abajo — mismo
     patrón que .product-search-stack__pagination-row, de arriba del grid. */
  .product-search-pagination-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #EADACB;
    border-bottom: 1px solid #EADACB;
    padding: 12px 0;
    margin-top: 32px;
  }

  .product-search-pagination-mobile:empty {
    display: none;
  }

  .product-search-pagination-mobile .pagination__item:has(.pagination__link--page),
  .product-search-pagination-mobile .pagination__item:has(.pagination__link--gap) {
    display: none;
  }

  /* Escritorio (>=990px): misma fila de abajo, pero con la paginación
     completa (números incluidos) y el contador compacto ("1–15 de 15", sin
     "productos") centrado en el ancho total de la fila — mismo truco 1fr
     auto 1fr que la fila de arriba, con la columna izquierda vacía para
     que el centrado sea real (no respecto al hueco libre junto a la
     paginación). */
  @media screen and (min-width: 990px) {
    .product-search-pagination-mobile {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      justify-content: normal;
      padding: 18px 0;
    }

    .product-search-pagination-mobile .pagination-summary {
      grid-column: 2;
      justify-self: center;
    }

    .product-search-pagination-mobile .pagination {
      grid-column: 3;
      justify-self: end;
    }

    .product-search-pagination-mobile .pagination__item:has(.pagination__link--page),
    .product-search-pagination-mobile .pagination__item:has(.pagination__link--gap) {
      display: grid;
    }
  }

  /* Estado vacío del filtro en vivo — sustituye visualmente al grid dentro
     de la misma área (el grid se oculta por JS, no se elimina del DOM). */
  .product-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding-block: var(--padding-6xl, 64px);
  }

  .product-search-empty__title {
    margin: 0;
    font-family: 'EB Garamond', serif;
    font-size: 20px;
    color: #3B2A1C;
  }

  .product-search-empty__text {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #7F7F6A;
  }

  /* .product-search-empty, .product-search-bar__pagination y
     .product-search-pagination-mobile ya fijan su propio "display" más
     arriba (flex/grid) — una regla de autor con esa especificidad gana
     siempre a la regla nativa [hidden]{display:none} del navegador (las
     reglas de autor ganan a las del user-agent aunque empaten en
     especificidad). Sin este override, el atributo/propiedad "hidden" que
     usa assets/product-search-filter.js no ocultaría nada de verdad. */
  .product-search-empty[hidden],
  .product-search-bar__pagination[hidden],
  .product-search-pagination-mobile[hidden],
  .product-search-stack__pagination-row[hidden],
  .product-search__clear[hidden],
  .product-grid[hidden] {
    display: none !important;
  }

  /* Envoltorio de los chips de la pila de móvil (snippets/product-grid.liquid):
     neutro por defecto — sus chips se comportan como antes, como hijos
     directos de .product-search-stack. */
  .product-search-stack__chips {
    display: contents;
  }

  /* SOLO móvil (≤749px) y solo en Tienda: chips "Filtrando: X ×" siempre
     en UNA fila, uno al lado del otro, repartiendo el ancho; el texto se
     recorta con "…" y la × se ve siempre. */
  @media screen and (max-width: 749px) {
    .tienda-explorer .product-search-stack__chips {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
    }

    .tienda-explorer .product-search-stack__chips:not(:has(.product-search-chip)) {
      display: none;
    }

    /* Ancho natural (lo que pide su texto); solo si no caben los dos en
       la fila se encogen — y el texto se recorta con "…". */
    .tienda-explorer .product-search-stack__chips .product-search-chip {
      flex: 0 1 auto;
      min-width: 0;
      align-self: auto;
      gap: 6px;
      padding: 5px 10px;
      font-size: 12px;
    }

    .tienda-explorer .product-search-stack__chips .product-search-chip__text {
      flex: 1 1 auto;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tienda-explorer .product-search-stack__chips .product-search-chip__remove {
      flex-shrink: 0;
    }
  }
/* END_SNIPPET:product-search-styles */

/* START_SNIPPET:quantity-selector (INDEX:245) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

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

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal-styles (INDEX:246) */
#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:quick-add-styles (INDEX:248) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

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

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

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

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

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

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

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

    &:active {
      scale: 0.99;
    }

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

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

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

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

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

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

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

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

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

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

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

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:250) */
.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:resource-image (INDEX:251) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:252) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

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

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:search-modal (INDEX:255) */
/* 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:256) */
.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:257) */
.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:259) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:261) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:262) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:263) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

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

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:265) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    * {
      pointer-events: none;
    }
  }

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

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

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

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

    50% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

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

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:267) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

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

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

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

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:275) */
: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 */

/* START_SNIPPET:variant-main-picker (INDEX:284) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

  /* Selector de "Tamaño" en formato píldora — reestiliza el mecanismo
     nativo de radios/labels de Horizon (variant_style: buttons), no lo
     sustituye: la selección de variante, el precio y el estado de
     agotado siguen actualizándose exactamente igual que en cualquier
     otro selector de variantes del tema (morph de la sección al
     cambiar), solo cambia el aspecto visual. Scoped a esta única opción
     por nombre ("Tamaño"), el resto de opciones de variante (color,
     etc.) no se ven afectadas. */
  .variant-option--size-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border: none;
    padding: 0;
    margin: 0;
  }

  /* En móvil, las píldoras quedaban pegadas a la izquierda al envolver
     (flex-start por defecto), a diferencia del formulario de
     personalización, cuyos campos ocupan el 100% del ancho y se ven
     centrados. Centramos el grupo de píldoras igual. */
  @media screen and (max-width: 749px) {
    .variant-option--size-pills {
      justify-content: center;
    }
  }

  .variant-option__size-legend {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 0 10px;
  }

  @media screen and (max-width: 749px) {
    .variant-option__size-legend {
      text-align: center;
    }
  }

  /* Colores de la etiqueta de variante ("Colores: Rosa") como variables:
     los reutiliza el botón CTA de la ficha (blocks/nb-product-cta.liquid)
     para verse exactamente igual. Mismos valores de siempre. */
  :root {
    --nb-variant-label-bg: #EADACB;
    --nb-variant-label-color: #3B2A1C;
    --nb-variant-label-border: transparent;
    --nb-variant-label-radius: 6px;
  }

  .variant-option__size-legend-tag {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--nb-variant-label-bg);
    border-radius: var(--nb-variant-label-radius);
    padding: 6px 12px;
  }


  .variant-option__size-legend-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--nb-variant-label-color);
  }

  .variant-option__size-legend .variant-option__swatch-value {
    font-size: 13px;
    font-weight: 600;
    color: #B44C21;
    margin-left: 0;
  }

  .variant-option--size-pills .variant-option__button-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 14px;
    color: #3B2A1C;
    background: transparent;
    border: 1.5px solid #EADACB;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  /* Píldoras más pequeñas en móvil: 5% + 1% adicional sobre el tamaño base
     (10px 20px / 14px). */
  @media screen and (max-width: 749px) {
    .variant-option--size-pills .variant-option__button-label {
      padding: 8.9px 17.9px;
      font-size: 12.7px;
    }
  }

  .variant-option--size-pills .variant-option__button-label:hover {
    border-color: #B44C21;
  }

  .variant-option--size-pills .variant-option__button-label:has(input:checked) {
    background: #B44C21;
    color: #FAF6F1;
    border-width: 2px;
    border-color: #B44C21;
    font-weight: 600;
  }

  .variant-option--size-pills .variant-option__button-label:has(input:focus-visible) {
    outline: 2px solid #3B2A1C;
    outline-offset: 2px;
  }

  /* Sin stock: mismo azul clarito que Horizon ya usa de forma nativa para
     el hover de una opción agotada (--color-variant-hover-*, las mismas
     variables del esquema de color que ya se veían bien) — pero fijado
     aquí de forma explícita, en vez de depender de que la regla nativa del
     tema (.variant-option__button-label:hover:has([data-option-available='false'])
     en assets/base.css) gane por especificidad. Cubre también el caso que
     el tema no contempla de por sí: una opción agotada que además está
     SELECCIONADA (normalmente no se puede elegir una opción sin stock,
     pero si el producto carga con esa combinación ya activa al entrar en
     la página, antes se pintaba en terracota como si tuviera stock). */
  .variant-option--size-pills .variant-option__button-label:has(input[data-option-available='false']):hover,
  .variant-option--size-pills .variant-option__button-label:has(input[data-option-available='false']:checked) {
    background: var(--color-variant-hover-background);
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  /* La diagonal nativa (y su duplicado) se pinta bien en estado
     seleccionado gracias a reglas propias de Shopify que no viven en este
     repo, pero la segunda diagonal añadida en strikethrough-variant.liquid
     (mismo mecanismo, líneas nuevas) no está cubierta por esas reglas al
     no ser las originales — se fuerza aquí para que las 4 líneas del SVG
     se vean igual (mismo color, opacidad completa) cuando está marcada. */
  .variant-option--size-pills
    .variant-option__button-label:has(input[data-option-available='false']:checked)
    .variant-option__strikethrough
    line {
    stroke: currentColor;
    opacity: 0.4;
  }

  /* El radio real se queda (misma mecánica de siempre: navegable por
     teclado, foco nativo, aria de radio), solo se oculta visualmente —
     el propio <label> ya hace de píldora. */
  .variant-option--size-pills .variant-option__button-label input[type='radio'] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .variant-option--size-pills .variant-option__button-label__pill {
    display: none;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:285) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:286) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:287) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */