/** Shopify CDN: Minification failed

Line 2278:0 Unexpected "{"
Line 2278:1 Expected identifier but found "%"
Line 2279:47 Expected identifier but found whitespace
Line 2279:60 Unexpected "96"
Line 2281:3 Expected identifier but found "%"
Line 2282:2 Unexpected "{"
Line 2282:3 Expected identifier but found "%"
Line 2283:42 Expected identifier but found whitespace
Line 2284:66 Expected identifier but found whitespace
Line 2286:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.notfound {
    padding-block: var(--space-8) var(--space-section);
  }

  .notfound__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: 60ch;
    text-align: center;
  }

  .notfound__title {
    font-size: var(--text-h2);
  }

  .notfound__text {
    color: var(--color-ink-2);
  }

  .notfound__search {
    width: 100%;
    max-width: 420px;
    margin-top: var(--space-3);
  }

  .notfound__field {
    display: flex;
    gap: var(--space-2);
  }

  .notfound__field .field {
    flex: 1;
    min-width: 0;
  }

  .notfound__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-line);
    width: 100%;
  }

  .notfound__link {
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color var(--dur) var(--ease);
  }

  .notfound__link:hover {
    border-color: var(--color-ink);
  }

  @media (min-width: 768px) {
    .notfound__title {
      font-size: var(--text-h1);
    }
  }
/* END_SECTION:404 */

/* START_SECTION:banner (INDEX:2) */
.banner {
    position: relative;
    isolation: isolate;
    color: var(--color-ink);
    background: var(--color-wash);
  }

  .banner--white {
    color: #fff;
  }

  .banner__link {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 70svh;
    color: inherit;
  }

  .banner--medium .banner__link {
    min-height: 56svh;
  }

  .banner--full .banner__link {
    min-height: 100svh;
  }

  @media (min-width: 1024px) {
    .banner__link {
      min-height: min(80svh, 760px);
    }

    .banner--medium .banner__link {
      min-height: min(60svh, 560px);
    }

    .banner--full .banner__link {
      min-height: min(100svh, 960px);
    }
  }

  .banner__media,
  .banner__media picture,
  .banner__media img,
  .banner__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

  .banner--white .banner__link::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    background: linear-gradient(to top, rgb(0 0 0 / 0.4), rgb(0 0 0 / 0));
    z-index: -1;
    pointer-events: none;
  }

  .banner__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block: var(--space-6);
  }

  .banner__heading {
    max-width: 14ch;
  }

  @media (min-width: 1024px) {
    .banner__content {
      padding-block: var(--space-7);
      gap: var(--space-4);
    }
  }
/* END_SECTION:banner */

/* START_SECTION:cart (INDEX:5) */
.cart {
    padding-block: var(--space-5) var(--space-section);
  }

  .cart__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  .cart__title {
    font-size: var(--text-h2);
  }

  .cart__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding-block: var(--space-6);
  }

  .cart__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .cart__items {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-line);
  }

  .cart-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-line);
  }

  .cart-item__media {
    display: block;
    aspect-ratio: 2 / 3;
    background: var(--color-wash);
    overflow: hidden;
  }

  .cart-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-item__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .cart-item__title {
    font-size: var(--text-ui);
    font-weight: 500;
  }

  .cart-item__price {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-price);
    font-weight: 600;
  }

  .cart-item__price .price--sale {
    color: var(--color-sale);
  }

  .cart-item__price .price__was {
    font-weight: 400;
    color: var(--color-ink-2);
  }

  .cart-item__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-2);
  }

  .qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-line);
  }

  .qty__btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
    line-height: 1;
  }

  .qty__input {
    width: 44px;
    height: 40px;
    border: 0;
    text-align: center;
    font-size: var(--text-ui);
    font-weight: 500;
    -moz-appearance: textfield;
  }

  .qty__input::-webkit-outer-spin-button,
  .qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  .qty__input:focus {
    outline: none;
  }

  .cart__summary-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-wash);
  }

  .cart__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  .cart__subtotal {
    font-size: var(--text-lead);
    font-weight: 600;
  }

  .cart__continue {
    align-self: center;
  }

  @media (min-width: 1024px) {
    .cart__layout {
      grid-template-columns: minmax(0, 1fr) 380px;
      gap: var(--space-8);
      align-items: start;
    }

    .cart__summary {
      position: sticky;
      top: calc(var(--header-h) + var(--space-5));
    }

    .cart-item {
      grid-template-columns: 120px minmax(0, 1fr);
      gap: var(--space-5);
    }
  }
/* END_SECTION:cart */

/* START_SECTION:category-split (INDEX:6) */
/* En el celular van apiladas y a ancho completo. Lado a lado quedaban de
     172x215 px: para una foto de moda de cuerpo entero es un encuadre chico y
     chato, y la persona se pierde. Apiladas son 375x469 y respiran. */
  .split__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grid-gap);
  }

  @media (min-width: 640px) {
    .split__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .split__link {
    position: relative;
    display: block;
    color: var(--color-ink);
    isolation: isolate;
  }

  .split__item--white .split__link {
    color: #fff;
  }

  .split__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-wash);
  }

  /* Anclado arriba, no al centro. El tile es cuadrado en desktop y las fotos son
     3:4, así que con el 50% 50% que trae object-position por defecto recortaba
     por arriba Y por abajo: a las dos fotos de respaldo les cortaba la cabeza.
     Las imágenes que cargue el comerciante llevan su punto focal en un style
     inline, que le gana a esta regla. */
  .split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 900ms var(--ease);
  }

  @media (hover: hover) {
    .split__link:hover .split__media img {
      transform: scale(1.03);
    }
  }

  .split__caption {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .split__item--white .split__caption::before {
    content: "";
    position: absolute;
    inset: -60% 0 0 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0));
    z-index: -1;
  }

  .split__cta {
    opacity: 0.85;
  }

  @media (min-width: 1024px) {
    .split__media {
      aspect-ratio: 1 / 1;
    }

    .split__caption {
      padding: var(--space-6);
    }
  }
/* END_SECTION:category-split */

/* START_SECTION:collections (INDEX:8) */
.collections-index__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--grid-gap);
  }

  .ctile__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-wash);
    margin-bottom: var(--space-3);
  }

  .ctile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 900ms var(--ease);
  }

  @media (hover: hover) {
    .ctile:hover .ctile__media img {
      scale: 1.03;
    }
  }

  .ctile__title {
    font-size: var(--text-ui);
    font-weight: 500;
  }

  @media (min-width: 768px) {
    .collections-index__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .collections-index__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-6) var(--grid-gap);
    }
  }
/* END_SECTION:collections */

/* START_SECTION:contact (INDEX:9) */
.contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .contact__textarea {
    min-height: 140px;
    padding-block: var(--space-3);
    line-height: 1.6;
    resize: vertical;
  }

  .contact__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .contact__block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .contact__note {
    font-size: var(--text-ui);
    line-height: 1.6;
    color: var(--color-ink-2);
  }

  @media (min-width: 900px) {
    .contact__layout {
      grid-template-columns: minmax(0, 1fr) 280px;
      gap: var(--space-8);
    }
  }
/* END_SECTION:contact */

/* START_SECTION:custom-section (INDEX:10) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:editorial-grid (INDEX:11) */
.edgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .edgrid__item {
    position: relative;
    display: block;
    overflow: hidden;
  }

  .edgrid__media {
    aspect-ratio: 3 / 4;
    background: var(--color-wash);
  }

  .edgrid__media img,
  .edgrid__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 900ms var(--ease);
  }

  .edgrid__placeholder {
    background: var(--color-wash);
  }

  @media (hover: hover) {
    .edgrid__item:hover .edgrid__media img {
      scale: 1.03;
    }
  }

  /* Texto centrado sobre la foto, como Mango */
  .edgrid__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5);
    text-align: center;
    pointer-events: none;
  }

  .edgrid__heading {
    font-size: var(--text-h2);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .edgrid__item--white .edgrid__content {
    color: var(--color-bg);
  }

  .edgrid__item--black .edgrid__content {
    color: var(--color-ink);
  }

  /* Velo suave solo cuando el texto es blanco, para que se lea sobre cualquier foto */
  .edgrid__item--white .edgrid__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 18%);
  }

  .edgrid__cta {
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
  }

  @media (min-width: 768px) {
    .edgrid {
      grid-template-columns: repeat(var(--edgrid-cols), minmax(0, 1fr));
    }

    .edgrid__media {
      aspect-ratio: 4 / 5;
    }

    .edgrid__heading {
      font-size: var(--text-h3);
    }
  }

  @media (min-width: 1024px) {
    .edgrid__heading {
      font-size: var(--text-h2);
    }
  }
/* END_SECTION:editorial-grid */

/* START_SECTION:featured-collection (INDEX:12) */
/* Carrusel en móvil: los items salen del margen de página y se snapean */
  @media (max-width: 767px) {
    .featured--carousel .featured__rail {
      padding-inline: 0;
    }

    .featured--carousel .featured__list {
      display: flex;
      gap: var(--grid-gap);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--page-margin);
      padding-inline: var(--page-margin);
      scrollbar-width: none;
    }

    .featured--carousel .featured__list::-webkit-scrollbar {
      display: none;
    }

    .featured--carousel .featured__item {
      flex: 0 0 64vw;
      scroll-snap-align: start;
    }
  }

  .featured__empty {
    grid-column: 1 / -1;
  }
/* END_SECTION:featured-collection */

/* START_SECTION:footer (INDEX:13) */
/* El aire de arriba lo pone siempre el footer, nunca la sección anterior. Antes
     eran 96 px de margen acá MÁS el padding de la franja de confianza: 160 px de
     nada entre dos hairlines en la Home, y pegado al último producto en una
     colección, que no tiene franja. */
  .footer {
    margin-top: var(--space-7);
    font-size: var(--text-small);
  }

  /* ---------- Losa 1: directorio, sobre blanco ---------- */

  .footer__cats {
    padding-block: var(--space-7);
    border-block-start: 1px solid var(--color-line);
  }

  .footer__cats-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-8);
  }

  /* Base 0: el ancho sale puro del peso, sin un flex-basis que lo distorsione.
     Como el peso es la cantidad de columnas, todas las columnas del directorio
     terminan midiendo lo mismo y la fila llena el ancho de punta a punta. */
  .footer__cat-group {
    flex: 1 1 100%;
    min-width: 0;
  }

  .footer__cat-heading {
    display: inline-block;
    margin-block-end: var(--space-4);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  /* En el celular cada grupo va a ancho completo y su lista se parte en dos: en
     una sola columna, Mujer son 16 renglones y el directorio se hace un scroll
     interminable. A ancho completo entran dos columnas de ~167 px, que alcanzan
     para la categoría más larga. */
  .footer__cat-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-5);
    list-style: none;
    padding: 0;
  }

  .footer__cat-list a {
    display: inline-block;
    color: var(--color-ink-2);
    transition: color var(--dur) var(--ease);
  }

  .footer__cat-list a:hover {
    color: var(--color-ink);
  }

  @media (min-width: 640px) {
    /* Base 0: el ancho sale puro del peso, sin un flex-basis que lo distorsione.
       Como el peso es la cantidad de columnas, todas las columnas del directorio
       miden lo mismo y la fila llena el ancho de punta a punta. */
    .footer__cat-group {
      flex: var(--cols, 1) 1 0;
    }

    /* Cuatro filas fijas: las columnas se generan solas y todos los grupos quedan
       a la misma altura. */
    .footer__cat-list {
      grid-template-columns: none;
      grid-template-rows: repeat(4, auto);
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      column-gap: var(--space-5);
    }
  }

  /* ---------- Losa 2: el cierre, sobre negro ---------- */

  .footer__dark {
    /* Tokens locales: nada de esto se escapa al resto del tema. */
    --fw-paper: #ffffff;
    --fw-mute: #9a9a9a;
    --fw-line: rgb(255 255 255 / 0.16);

    padding-block: var(--space-8) var(--space-6);
    background: var(--color-ink);
    color: var(--fw-paper);
  }

  /* El foco global del tema es un contorno negro: sobre negro es invisible.
     Dentro de la losa pasa a blanco. */
  .footer__dark :focus-visible {
    outline: 2px solid var(--fw-paper);
    outline-offset: 3px;
  }

  .footer__grid {
    display: grid;
    gap: var(--space-7) var(--space-6);
  }

  .footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .footer__heading {
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fw-paper);
  }

  .footer__text {
    color: var(--fw-mute);
    max-width: 34ch;
    text-wrap: balance;
  }

  .footer__ok {
    color: var(--fw-paper);
  }

  .footer__error {
    color: #ff9a92;
  }

  .footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .footer__links a,
  .footer__address a {
    color: var(--fw-paper);
    transition: color var(--dur) var(--ease);
  }

  .footer__links a {
    display: inline-block;
    padding-block: 2px;
  }

  .footer__links a:hover {
    color: var(--fw-mute);
  }

  /* Newsletter */

  .news__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 460px;
    border-block-end: 1px solid var(--fw-line);
    transition: border-color var(--dur) var(--ease);
  }

  .news__row:focus-within {
    border-block-end-color: var(--fw-paper);
  }

  .news__field {
    flex: 1;
    min-width: 0;
    padding: 0 0 10px;
    border: 0;
    background: none;
    color: var(--fw-paper);
    font: inherit;
    font-size: var(--text-body);
  }

  .news__field::placeholder {
    color: var(--fw-mute);
  }

  .news__field:focus {
    outline: none;
  }

  .news__submit {
    padding: 0 0 10px;
    border: 0;
    background: none;
    color: var(--fw-paper);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    transition: color var(--dur) var(--ease);
  }

  .news__submit:hover {
    color: var(--fw-mute);
  }

  /* Dirección */

  .footer__address {
    font-style: normal;
  }

  .footer__address a {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .footer__address-city {
    color: var(--fw-mute);
  }

  .footer__address-map {
    margin-block-start: var(--space-2);
    color: var(--fw-mute);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgb(255 255 255 / 0.35);
    transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
  }

  .footer__address a:hover .footer__address-map {
    color: var(--fw-paper);
    text-decoration-color: var(--fw-paper);
  }

  /* La firma */

  /* La firma ocupa el ancho completo del footer, de margen a margen, con un
     degradado suave que la hunde en el negro hacia abajo. El tamaño no es un
     clamp: sale del ancho del viewport dividido por el ancho relativo de
     "MÁLAGA" en DM Serif Display (medido en el navegador), así siempre llena
     la franja sin desbordar, en cualquier pantalla.

     line-height holgado a propósito: el acento de la Á sube por encima de la
     altura de caja y con 1 se recorta. */
  .footer__wordmark {
    margin-block: var(--space-7) var(--space-5);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: calc((100vw - (2 * var(--page-margin))) / 4.7);
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--fw-paper);
  }

  /* El degradado va recortado a las letras. Si el navegador no soporta el
     recorte, queda el blanco pleno de arriba: nunca texto invisible. */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .footer__wordmark {
      background: linear-gradient(
        to bottom,
        rgb(255 255 255 / 0.55) 0%,
        rgb(255 255 255 / 0.38) 30%,
        rgb(255 255 255 / 0.16) 62%,
        rgb(255 255 255 / 0.04) 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }

  /* Línea legal */

  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-5);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--fw-line);
  }

  .footer__legal {
    color: var(--fw-mute);
  }

  .footer__dot {
    margin-inline: 2px;
    color: rgb(255 255 255 / 0.35);
  }

  .footer__meta {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .footer__social {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .footer__social a {
    display: block;
    color: var(--fw-paper);
    opacity: 0.75;
    transition: opacity var(--dur) var(--ease);
  }

  .footer__social a:hover {
    opacity: 1;
  }

  .footer__social svg {
    display: block;
    width: 19px;
    height: 19px;
  }

  .footer__social-text {
    font-size: var(--text-small);
  }

  .footer__payment {
    display: flex;
    gap: var(--space-2);
  }

  /* Los logos de pago vienen oscuros: sobre negro hay que invertirlos, no
     solo desaturarlos, o desaparecen. */
  .footer__payment svg {
    height: 20px;
    width: auto;
    filter: grayscale(1) brightness(0) invert(1);
    opacity: 0.55;
  }

  /* Crédito de Innovi */

  .footer__credit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-block-start: var(--space-6);
    font-size: var(--text-badge);
    color: var(--fw-mute);
  }

  .footer__innovi {
    display: inline-flex;
    align-items: center;
    opacity: 0.85;
    transition: opacity var(--dur) var(--ease);
  }

  .footer__innovi:hover {
    opacity: 1;
  }

  /* Alto fijo y ancho automático. El lockup es 826x506 y la palabra ocupa apenas
     un cuarto de ese alto, así que a 18 px "Innovi" quedaba en 4 px, ilegible.
     A 30 px la palabra se lee y el conjunto sigue por debajo del peso de la
     marca del cliente, que es lo que corresponde en un crédito. */
  .footer__innovi img {
    display: block;
    height: 30px;
    width: auto;
  }

  @media (min-width: 640px) {
    .footer__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer__col--news {
      grid-column: 1 / -1;
    }
  }

  @media (min-width: 1024px) {
    .footer__dark {
      padding-block: var(--space-8) var(--space-6);
    }

    /* La newsletter es lo único con una tarea que cumplir, así que se lleva el
       ancho; los tres bloques de enlaces se aprietan a la derecha.

       1.3 y no 1.7: en pantallas de 1920 la columna daba ~600 px contra un campo
       de 460, y le sobraba aire a la derecha. Así el campo llena su columna. */
    .footer__grid {
      grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
      gap: var(--space-8);
    }

    .footer__col--news {
      grid-column: auto;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:14) */
/* ---- Sugerencias del buscador ---- */
  .ps {
    display: none;
    max-height: 60svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--space-4);
  }

  .ps.is-open {
    display: block;
  }

  /* Los estilos del contenido (.ps__*) viven en sections/predictive-search.liquid,
     que es donde se escribe ese markup. */

  /* El sticky va en el wrapper que genera Shopify: si fuera en el <header>,
     su contenedor mide lo mismo y no tiene recorrido para pegarse. */
  .shopify-section-group-header-group {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .site-header {
    position: relative;
    height: var(--header-h);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    transition:
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease);
  }

  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100%;
  }

  .site-header__left,
  .site-header__right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .site-header__right {
    justify-content: flex-end;
  }

  .site-header__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -8px;
    color: inherit;
  }

  .site-header__icon svg {
    width: 22px;
    height: 22px;
  }

  .site-header__count {
    position: absolute;
    top: 6px;
    right: 2px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
  }

  .site-header__nav {
    display: none;
  }

  .site-header__menu {
    display: flex;
    gap: var(--space-5);
    height: var(--header-h);
  }

  .site-header__logo {
    display: inline-flex;
    align-items: center;
    height: var(--logo-h);
  }

  .site-header__logo-img {
    height: var(--logo-h);
    width: auto;
    mix-blend-mode: multiply;
  }

  .site-header__wordmark {
    font-family: var(--font-display);
    font-size: calc(var(--logo-h) * 0.82);
    letter-spacing: 0.06em;
    line-height: 1;
  }

  /* ---- Mega-menú (desktop) ---- */

  .mega {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .mega > a {
    display: inline-block;
    padding-block: var(--space-2);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
  }

  .mega > a:hover,
  .mega > a.is-active,
  .mega.is-open > a {
    border-color: currentColor;
  }

  .mega__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: inherit;
  }

  .mega__toggle svg {
    width: 12px;
    height: 12px;
    transition: transform var(--dur) var(--ease);
  }

  .mega__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .mega__panel {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--color-bg);
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-line);
    padding-block: var(--space-6) var(--space-7);
    cursor: default;
  }

  .mega__panel:not([hidden]) {
    animation: mega-in var(--dur) var(--ease);
  }

  @keyframes mega-in {
    from {
      opacity: 0;
    }
  }

  .mega__inner {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 26%);
    gap: var(--space-8);
    align-items: start;
  }

  /* Sin foto (Nuevo, Rebajas) las categorías ocupan todo, en vez de dejar un hueco */
  .mega__inner--solo {
    grid-template-columns: 1fr;
  }

  /* Columnas verticales parejas. --nav-rows lo calcula nav-list según cuántas
     categorías haya, así ninguna columna queda con un solo ítem suelto. */
  .mega__cols .nav-list--flat {
    display: grid;
    grid-template-rows: repeat(var(--nav-rows, 8), auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, max-content);
    justify-content: start;
    column-gap: var(--space-7);
  }

  /* "Ver todo" manda: fila propia arriba de las columnas */
  .mega__cols .nav-list__all {
    display: inline-block;
    margin-block-end: var(--space-4);
    padding-block: 5px;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--dur) var(--ease);
  }

  .mega__cols .nav-list__all:hover {
    text-decoration-color: currentColor;
  }

  .mega__cols .nav-list--grouped {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-7);
  }

  .mega__cols .nav-list li {
    break-inside: avoid;
  }

  .mega__cols .nav-list a {
    display: inline-block;
    padding-block: 5px;
    font-size: var(--text-ui);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--dur) var(--ease);
  }

  .mega__cols .nav-list a:hover,
  .mega__cols .nav-list a[aria-current="page"] {
    text-decoration-color: currentColor;
  }

  .mega__cols .nav-list__all,
  .mega__cols .nav-list__heading {
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-size: var(--text-small);
  }

  .mega__cols .nav-list__heading {
    color: var(--color-ink-2);
    margin-block-end: var(--space-2);
  }

  .mega__cols .nav-list__group {
    min-width: 140px;
  }

  .mega__feature {
    position: relative;
    display: block;
    color: #fff;
    isolation: isolate;
    overflow: hidden;
  }

  .mega__feature img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 900ms var(--ease);
  }

  @media (hover: hover) {
    .mega__feature:hover img {
      transform: scale(1.03);
    }
  }

  .mega__feature-caption {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
  }

  .mega__feature-caption::before {
    content: "";
    position: absolute;
    inset: -60% 0 0 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0));
    z-index: -1;
  }

  /* Buscador en el header: campo desplegable en desktop, ícono de lupa en móvil */
  .site-header__search {
    display: none;
    align-items: center;
    gap: var(--space-2);
    width: 200px;
    height: 36px;
    padding: 0 var(--space-3);
    border-bottom: 1px solid currentColor;
    transition: width var(--dur) var(--ease);
  }

  .site-header__search:focus-within {
    width: 260px;
  }

  .site-header__search svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  .site-header__search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: var(--text-ui);
  }

  .site-header__search-input::placeholder {
    color: inherit;
    opacity: 0.6;
  }

  .site-header__search-input:focus {
    outline: none;
  }

  .site-header__search-input::-webkit-search-decoration,
  .site-header__search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  @media (min-width: 1024px) {
    .site-header__burger {
      display: none;
    }

    .site-header__nav {
      display: block;
    }

    /* Acá entra el campo de búsqueda, así que la lupa que abre el diálogo sobra */
    .site-header__search {
      display: flex;
    }

    .site-header__search-btn {
      display: none;
    }
  }

  @media (max-width: 1023px) {
    .site-header__account {
      display: none;
    }
  }

  /* Home: transparente hasta scrollear o abrir un panel. mix-blend-mode: difference
     hace que texto e íconos blancos se lean sobre foto clara u oscura. */
  .template-index .site-header:not(.is-solid):not(.is-open) {
    background: transparent;
    border-color: transparent;
  }

  .template-index .site-header:not(.is-solid):not(.is-open) .site-header__inner {
    color: #fff;
    mix-blend-mode: difference;
  }

  .template-index .site-header:not(.is-solid):not(.is-open) .site-header__logo-img {
    filter: invert(1);
    mix-blend-mode: screen;
  }

  /* ---- Dialogs ---- */

  dialog.drawer,
  /* Fondo opaco: el panel de sugerencias crece hacia abajo y necesita algo detrás.
     (Antes era transparente y no se notaba porque solo ocupaba el alto del header.) */
  dialog.search-dialog {
    border: 0;
    padding: 0;
    max-width: none;
    max-height: none;
    background: var(--color-bg);
    color: var(--color-ink);
  }

  dialog::backdrop {
    background: rgb(0 0 0 / 0.35);
  }

  .drawer {
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .drawer__panel {
    display: flex;
    flex-direction: column;
    width: min(86vw, 400px);
    height: 100%;
    padding: 0 var(--page-margin) var(--space-6);
    background: var(--color-bg);
    overflow-y: auto;
    animation: drawer-in var(--dur) var(--ease);
  }

  .drawer__panel:focus {
    outline: none;
  }

  @keyframes drawer-in {
    from {
      transform: translateX(-100%);
    }
  }

  .drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 var(--header-h);
  }

  .drawer__nav {
    flex: 1;
    padding-block: var(--space-5);
  }

  .drawer__nav > ul {
    display: flex;
    flex-direction: column;
  }

  .drawer__link,
  .drawer__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-3);
  }

  .drawer__summary {
    cursor: pointer;
    list-style: none;
  }

  .drawer__summary::-webkit-details-marker {
    display: none;
  }

  .drawer__summary svg {
    width: 14px;
    height: 14px;
    transition: transform var(--dur) var(--ease);
  }

  .drawer__details[open] .drawer__summary svg {
    transform: rotate(180deg);
  }

  .drawer__sub {
    padding: var(--space-1) 0 var(--space-4);
  }

  .drawer__sub .nav-list--grouped {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .drawer__sub .nav-list a {
    display: block;
    padding-block: var(--space-2);
    font-size: var(--text-lead);
  }

  /* En el drawer "Ver todo" también quedó fuera de la <ul>, así que necesita
     su propio alto de toque: sin esto pierde el padding de .nav-list a. */
  .drawer__sub .nav-list__all {
    display: block;
    padding-block: var(--space-2);
  }

  .drawer__sub .nav-list__all,
  .drawer__sub .nav-list__heading {
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .drawer__sub .nav-list__heading {
    color: var(--color-ink-2);
  }

  .drawer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-line);
  }

  .search-dialog {
    inset: 0 0 auto 0;
    width: 100%;
    margin: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    animation: search-in var(--dur) var(--ease);
  }

  @keyframes search-in {
    from {
      transform: translateY(-100%);
    }
  }

  .search-dialog__form {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--header-h);
  }

  .search-dialog__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: var(--text-lead);
  }

  .search-dialog__input:focus {
    outline: none;
  }

  .search-dialog__input::-webkit-search-decoration,
  .search-dialog__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:15) */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 100svh;
    background: var(--color-wash);
    color: var(--color-ink);
    isolation: isolate;
  }

  .hero--large {
    min-height: min(100svh, 640px);
  }

  @media (min-width: 1024px) {
    .hero--full {
      min-height: min(100svh, 960px);
    }

    .hero--large {
      min-height: min(85svh, 800px);
    }
  }

  .hero--white {
    color: #fff;
  }

  .hero__media,
  .hero__media img,
  .hero__media video,
  .hero__slides,
  .hero__slide,
  .hero__slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: -1;
  }

  /* --- Secuencia con acercamiento --- */

  .hero__slides {
    overflow: hidden;
  }

  /* Ciclo completo = una tanda por foto. Cada capa arranca corrida --i tandas, así
     que en todo momento hay una visible y la siguiente entrando por encima. */
  .hero__slide {
    opacity: 0;
    animation: hero-fade calc(var(--hero-slide) * var(--hero-count)) var(--ease) infinite;
    animation-delay: calc(var(--hero-slide) * var(--i));
  }

  .hero__slide img {
    transform-origin: 62% center;
    animation: hero-zoom calc(var(--hero-slide) * var(--hero-count)) linear infinite;
    animation-delay: calc(var(--hero-slide) * var(--i));
  }

  /* El origen del zoom se alterna para que cinco fotos seguidas no se sientan
     iguales: una se acerca sobre la persona, la siguiente sobre el vacío. */
  .hero__slide:nth-child(even) img {
    transform-origin: 30% 40%;
  }

  /* Los porcentajes salen de 1/--hero-count, pero @keyframes no acepta cálculos, así
     que están fijos para 5 fotos: cada una ocupa el 20% del ciclo y el cruce se come
     un 4% de cada lado. Con otra cantidad de fotos el cruce se corre un poco; se ve
     igual de bien y evita tener que generar keyframes por cantidad. */
  @keyframes hero-fade {
    0% {
      opacity: 0;
    }
    4% {
      opacity: 1;
    }
    20% {
      opacity: 1;
    }
    24% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes hero-zoom {
    0% {
      transform: scale(1);
    }
    24% {
      transform: scale(1.12);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Quien pidió menos movimiento ve una sola foto, quieta. */
  @media (prefers-reduced-motion: reduce) {
    .hero__slide,
    .hero__slide img {
      animation: none;
    }

    .hero__slide {
      opacity: 0;
    }

    .hero__slide:first-child {
      opacity: 1;
    }
  }

  /* Velo arriba, debajo del header. El header de la Home se lee con
     mix-blend-mode: difference, que da buen contraste sobre negro o sobre blanco pero
     lo pierde justo en los grises medios: una foto de estudio es gris medio de punta a
     punta, y el logo quedaba casi invisible. Oscurecer la franja lo saca de esa zona. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(var(--header-h) + var(--space-7));
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.38), rgb(0 0 0 / 0));
    z-index: 0;
    pointer-events: none;
  }

  /* Velo suave abajo para que el texto blanco se lea sobre cualquier foto */
  .hero--white::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0));
    z-index: -1;
    pointer-events: none;
  }

  /* El mismo velo, al revés, para el texto negro.

     Va SIEMPRE, no solo en pantallas chicas. Con una secuencia que rota cinco
     fotos no se puede garantizar el tono de la zona del texto: medido sobre las
     actuales, dos de las cinco daban 3,18:1 y 1,94:1 contra el texto negro, muy
     por debajo del mínimo de 4,5:1. Y aunque se eligieran cinco fotos claras,
     cualquiera puede cambiar una desde el editor y romperlo de nuevo. El piso de
     contraste lo tiene que traer el diseño, no la foto.

     En desktop se ancla a la esquina inferior izquierda —donde cae el texto— y
     muere antes de llegar a la persona, que está a la derecha. Como las fotos son
     de estudio y ya tienen caída de luz, se lee como luz, no como un parche. */
  .hero--black::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgb(255 255 255 / 0.82), rgb(255 255 255 / 0));
    z-index: -1;
    pointer-events: none;
  }

  @media (min-width: 1024px) {
    .hero--black::after {
      inset: 0;
      height: auto;
      background: radial-gradient(
        120% 130% at 0% 100%,
        rgb(255 255 255 / 0.80) 0%,
        rgb(255 255 255 / 0.55) 40%,
        rgb(255 255 255 / 0) 78%
      );
    }
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding-block: var(--space-7) var(--space-7);
    max-width: none;
  }

  .hero__heading {
    max-width: 12ch;
  }

  .hero__sub {
    max-width: 38ch;
    opacity: 0.92;
  }

  .hero__cta {
    margin-top: var(--space-2);
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    font-size: var(--text-ui);
    font-weight: 500;
    transition: opacity var(--dur) var(--ease);
  }

  .hero__cta:hover {
    opacity: 0.7;
  }

  /* Área de clic estirada a todo el Hero. Sin position propia, así se ancla al .hero. */
  .hero__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  @media (min-width: 1024px) {
    .hero__content {
      padding-block: var(--space-8) var(--space-8);
      gap: var(--space-5);
    }
  }

  /* Home: el hero se mete debajo del header transparente */
  .template-index main > .shopify-section:first-child:has(> .hero) {
    margin-top: calc(-1 * var(--header-h));
  }
/* END_SECTION:hero */

/* START_SECTION:main-account (INDEX:16) */
.account__pages {
    margin-top: var(--space-5);
    font-size: var(--text-ui);
  }

  .account__pages a,
  .account__pages span {
    padding: var(--space-2);
  }
/* END_SECTION:main-account */

/* START_SECTION:main-addresses (INDEX:18) */
.account__section > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    width: auto;
  }

  .account__section > summary::-webkit-details-marker {
    display: none;
  }

  .address-card__actions summary {
    cursor: pointer;
    list-style: none;
  }

  .address-card__actions summary::-webkit-details-marker {
    display: none;
  }

  .address-card__actions form {
    display: inline;
  }

  .address-card__actions .address-form {
    margin-top: var(--space-3);
    margin-bottom: 0;
  }
/* END_SECTION:main-addresses */

/* START_SECTION:main-login (INDEX:19) */
/* Sin JS las dos vistas quedan visibles y funcionan; con :target se alterna.
     Se hace con CSS puro para no depender de JavaScript en una pantalla de acceso. */
  .account__recover {
    display: none;
  }

  .account__recover:target {
    display: block;
  }

  .account__recover:target ~ .account__login {
    display: none;
  }

  html:not(.js) .account__recover {
    display: block;
  }
/* END_SECTION:main-login */

/* START_SECTION:page (INDEX:23) */
.page__inner {
    max-width: 68ch;
  }

  .page__title {
    font-size: var(--text-h2);
    margin-bottom: var(--space-5);
  }

  .page__content {
    font-size: var(--text-body);
    line-height: 1.7;
    color: var(--color-ink-2);
  }

  .page__content h2,
  .page__content h3 {
    color: var(--color-ink);
    margin-block: var(--space-6) var(--space-3);
  }

  .page__content a {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .page__content img {
    margin-block: var(--space-5);
  }

  .page__content p + p,
  .page__content ul,
  .page__content ol {
    margin-top: var(--space-3);
  }

  .page__content ul,
  .page__content ol {
    padding-left: 1.2em;
  }

  .page__content li + li {
    margin-top: var(--space-2);
  }

  .page__content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-small);
    margin-block: var(--space-4);
  }

  .page__content th,
  .page__content td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-line);
    text-align: left;
  }
/* END_SECTION:page */

/* START_SECTION:password (INDEX:24) */
.pw {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
    padding: var(--space-7) var(--page-margin) var(--space-8);
    text-align: center;
  }

  .pw__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-wash);
  }

  .pw__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Velo para que el texto se lea sobre cualquier foto */
  .pw--white .pw__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 40%);
  }

  .pw--white {
    color: var(--color-bg);
  }

  .pw--black {
    color: var(--color-ink);
  }

  .pw__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    max-width: 52ch;
  }

  .pw__logo {
    height: calc(var(--logo-h) * 1.6);
    width: auto;
    object-fit: contain;
  }

  .pw--white .pw__logo {
    filter: invert(1) brightness(2);
  }

  .pw__wordmark {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .pw__heading {
    font-size: var(--text-h2);
  }

  .pw__text {
    text-wrap: pretty;
  }

  .pw__news {
    width: 100%;
    max-width: 420px;
  }

  .pw__news-row {
    display: flex;
    gap: var(--space-2);
  }

  .pw__news-row .field {
    flex: 1;
    min-width: 0;
  }

  .pw--white .pw__news-row .field {
    background: rgb(255 255 255 / 92%);
    border-color: transparent;
    color: var(--color-ink);
  }

  .pw__note {
    margin-top: var(--space-3);
    font-size: var(--text-small);
  }

  .pw__social {
    color: inherit;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
  }

  .pw__enter {
    position: absolute;
    bottom: var(--space-5);
    left: 0;
    right: 0;
  }

  .pw__enter-btn {
    color: inherit;
  }

  /* ---- Diálogo de contraseña ---- */
  dialog.pw-dialog {
    border: 0;
    padding: 0;
    max-width: min(92vw, 380px);
    background: var(--color-bg);
    color: var(--color-ink);
  }

  dialog.pw-dialog::backdrop {
    background: rgb(0 0 0 / 45%);
  }

  .pw-dialog__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
    text-align: left;
  }

  .pw-dialog__panel:focus {
    outline: none;
  }

  .pw-dialog__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
  }

  .pw-dialog__error {
    color: var(--color-sale);
  }

  @media (min-width: 768px) {
    .pw__heading {
      font-size: var(--text-h1);
    }
  }
/* END_SECTION:password */

/* START_SECTION:predictive-search (INDEX:25) */
.ps__queries {
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-line);
  }

  .ps__query {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 40px;
    font-size: var(--text-ui);
  }

  .ps__query svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--color-ink-3);
  }

  .ps__products {
    padding-block: var(--space-2);
  }

  .ps__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2);
  }

  .ps__media {
    flex: 0 0 52px;
    aspect-ratio: 2 / 3;
    background: var(--color-wash);
    overflow: hidden;
  }

  .ps__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ps__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .ps__title {
    font-size: var(--text-ui);
    font-weight: 500;
  }

  .ps__price {
    font-size: var(--text-small);
    font-weight: 600;
  }

  .ps__all {
    margin-top: var(--space-3);
  }

  .ps__empty {
    padding-block: var(--space-4);
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-recommendations (INDEX:26) */
/* Carrusel en móvil, igual que la colección destacada de la Home */
  @media (max-width: 767px) {
    .featured--carousel .featured__rail {
      padding-inline: 0;
    }

    .featured--carousel .featured__list {
      display: flex;
      gap: var(--grid-gap);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--page-margin);
      padding-inline: var(--page-margin);
      scrollbar-width: none;
    }

    .featured--carousel .featured__list::-webkit-scrollbar {
      display: none;
    }

    .featured--carousel .featured__item {
      flex: 0 0 64vw;
      scroll-snap-align: start;
    }
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:search (INDEX:28) */
.search-form {
    max-width: 640px;
    padding-block: var(--space-4) var(--space-2);
  }

  .search-form__field {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-ink);
  }

  .search-form__input {
    flex: 1;
    min-width: 0;
    height: 52px;
    border: 0;
    background: transparent;
    font-family: var(--font-display);
    font-size: var(--text-h3);
  }

  .search-form__input:focus {
    outline: none;
  }

  .search-form__input::-webkit-search-decoration,
  .search-form__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }
/* END_SECTION:search */

/* START_SECTION:trust-bar (INDEX:29) */
{% comment %}
    Padding propio, más ajustado que .section: acá había 96 px arriba y 96 abajo
    para tres líneas de texto, y la franja quedaba flotando en el vacío.
  {% endcomment %}
  {% comment %}
    Sin padding abajo ni raya de sección: el espacio hasta el footer lo pone el
    footer, y las reglas de cada columna ya estructuran la franja. La raya de
    sección era una segunda línea 48 px arriba de las otras tres, redundante.
  {% endcomment %}
  .trust {
    padding-block: var(--space-7) 0;
  }

  .trust__grid {
    display: grid;
    gap: var(--space-6);
  }

  .trust__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'icon title'
      'icon text';
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-content: start;
  }

  .trust__icon {
    grid-area: icon;
    display: block;
    margin-block-start: 1px;
    color: var(--color-ink);
  }

  .trust__icon svg {
    display: block;
    width: 22px;
    height: 22px;
  }

  .trust__title {
    grid-area: title;
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .trust__text {
    grid-area: text;
    font-size: var(--text-body);
    color: var(--color-ink-2);
    max-width: 34ch;
  }

  @media (min-width: 768px) {
    .trust {
      padding-block: var(--space-8) 0;
    }

    .trust__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-7);
    }

    /* La regla arranca arriba de cada columna y las alinea entre sí. */
    .trust__item {
      padding-block-start: var(--space-4);
      border-block-start: 1px solid var(--color-ink);
    }
  }
/* END_SECTION:trust-bar */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:32) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:33) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:breadcrumb (INDEX:35) */
.breadcrumb {
    font-size: var(--text-small);
    color: var(--color-ink-2);
  }

  .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .breadcrumb__list li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--color-ink-3);
  }

  .breadcrumb a {
    color: var(--color-ink-2);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .breadcrumb a:hover {
    color: var(--color-ink);
    text-decoration-color: currentColor;
  }

  .breadcrumb [aria-current="page"] {
    color: var(--color-ink);
  }
/* END_SNIPPET:breadcrumb */

/* START_SNIPPET:cart-drawer (INDEX:37) */
dialog.cd {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-ink);
  }

  dialog.cd::backdrop {
    background: rgb(0 0 0 / 35%);
  }

  .cd__panel {
    display: flex;
    flex-direction: column;
    width: min(92vw, 420px);
    height: 100%;
    margin-left: auto;
    background: var(--color-bg);
    animation: cd-in var(--dur) var(--ease);
  }

  .cd__panel:focus {
    outline: none;
  }

  @keyframes cd-in {
    from {
      transform: translateX(100%);
    }
  }

  .cd__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 var(--header-h);
    padding-inline: var(--page-margin);
    border-bottom: 1px solid var(--color-line);
  }

  .cd__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .cd__note {
    flex: 0 0 auto;
    margin: var(--space-3) var(--page-margin) 0;
    padding: var(--space-3);
    border-left: 2px solid var(--color-sale);
    background: var(--color-wash);
    color: var(--color-ink);
  }

  /* Doble clase a propósito: ul[role="list"] de critical.css pone padding:0 y le gana
     en especificidad a una clase sola. */
  .cd .cd__items {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline: var(--page-margin);
  }

  .cd-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-line);
  }

  .cd-item__media {
    aspect-ratio: 2 / 3;
    background: var(--color-wash);
    overflow: hidden;
  }

  .cd-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cd-item__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .cd-item__title {
    font-size: var(--text-ui);
    font-weight: 500;
  }

  .cd-item__variant {
    font-size: var(--text-small);
    color: var(--color-ink-2);
  }

  .cd-item__price {
    font-size: var(--text-ui);
    font-weight: 600;
  }

  .cd-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
  }

  .cd-item__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-line);
  }

  .cd-item__qty button {
    width: 32px;
    height: 32px;
    font-size: 16px;
    line-height: 1;
  }

  .cd-item__qty button:disabled {
    color: var(--color-ink-3);
    cursor: not-allowed;
  }

  .cd-item__qty output {
    min-width: 32px;
    text-align: center;
    font-size: var(--text-ui);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  .cd__foot {
    flex: 0 0 auto;
    padding: var(--space-4) var(--page-margin) var(--space-5);
    border-top: 1px solid var(--color-line);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .cd__subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  .cd__subtotal-value {
    font-size: var(--text-lead);
    font-weight: 600;
  }

  .cd__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex: 1;
    padding: var(--space-6) var(--page-margin);
    text-align: center;
  }

  .cd.is-loading .cd__body {
    opacity: 0.5;
    pointer-events: none;
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:product-card (INDEX:48) */
.card {
    position: relative;
    color: var(--color-ink);
  }

  .card__media {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--color-wash);
  }

  .card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Foto única (compact, o catálogo con una sola foto) */
  .card__img--single {
    position: absolute;
    inset: 0;
  }

  .card__img--hover {
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
  }

  @media (hover: hover) {
    .card:hover .card__img--hover {
      opacity: 1;
    }
  }

  /* ---- Carrusel interno (scroll-snap, sin librería) ---- */
  .card__track {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .card__track::-webkit-scrollbar {
    display: none;
  }

  .card__slide {
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* ---- Flechas: solo con JS, solo con mouse ---- */
  .card__nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 2;
    display: none;
    place-items: center;
    width: 32px;
    height: 44px;
    background: var(--color-bg);
    color: var(--color-ink);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
  }

  .card__nav svg {
    width: 14px;
    height: 14px;
  }

  .card__nav--prev {
    left: 0;
  }

  .card__nav--prev svg {
    transform: rotate(90deg);
  }

  .card__nav--next {
    right: 0;
  }

  .card__nav--next svg {
    transform: rotate(-90deg);
  }

  @media (hover: hover) and (pointer: fine) {
    .js .card--catalog .card__nav {
      display: grid;
    }

    .card--catalog:hover .card__nav,
    .card--catalog:focus-within .card__nav {
      opacity: 1;
    }
  }

  /* ---- Talles al pasar el mouse ---- */
  .card__sizes {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: none;
    background: var(--color-bg);
    translate: 0 100%;
    transition: translate var(--dur) var(--ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .card__sizes {
      display: flex;
    }

    .card--catalog:hover .card__sizes,
    .card--catalog:focus-within .card__sizes {
      translate: 0;
    }
  }

  .card__sizes > li {
    flex: 1 1 0;
    min-width: 0;
  }

  .card__size {
    display: grid;
    place-items: center;
    height: 36px;
    font-size: var(--text-small);
    font-weight: 500;
    text-align: center;
  }

  .card__sizes > li + li .card__size {
    box-shadow: -1px 0 0 var(--color-line);
  }

  .card__size.is-out {
    color: var(--color-ink-3);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }

  /* ---- Corazón ---- */
  .card__wish {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--color-ink);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
  }

  .card__wish svg {
    width: 18px;
    height: 18px;
  }

  .card__wish[aria-pressed="true"] svg {
    fill: currentColor;
  }

  @media (hover: hover) and (pointer: fine) {
    .card--catalog:hover .card__wish,
    .card--catalog:focus-within .card__wish,
    .card__wish[aria-pressed="true"] {
      opacity: 1;
    }
  }

  @media (hover: none) {
    .card__wish {
      opacity: 1;
    }

    /* En touch, el link estirado cubre toda la tarjeta, así que el dedo nunca llega al
       carrusel: deslizar no hacía nada. Se muestra solo la primera foto y tocar la
       tarjeta va al producto, que es lo que la persona espera. */
    .card__slide:not(:first-child) {
      display: none;
    }

    .card__track {
      overflow: hidden;
    }
  }

  /* Sin JS el corazón no guardaría nada: no se muestra */
  html:not(.js) .card__wish {
    display: none;
  }

  /* ---- Info ---- */
  .card__info {
    padding-top: var(--space-3);
  }

  /* En la grilla sin separación, el texto lleva su propio margen */
  .card--catalog .card__info {
    padding-inline: var(--card-pad);
    padding-bottom: var(--space-2);
  }

  .card__label {
    margin-bottom: var(--space-2);
    font-size: var(--text-badge);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    line-height: 1;
  }

  .card__title {
    font-size: var(--text-ui);
    font-weight: 500;
    line-height: 1.35;
  }

  /* Stretched link: toda la tarjeta es clickeable, pero los controles quedan por encima */
  .card__link {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .card__price {
    margin-top: var(--space-1);
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    font-size: var(--text-price);
    font-weight: 600;
  }

  .price--sale {
    color: var(--color-sale);
  }

  .price__was {
    font-weight: 400;
    color: var(--color-ink-2);
  }

  .card__swatches {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-2);
  }

  .card__swatch {
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid var(--color-line);
  }

  .card__swatch-more {
    font-size: var(--text-badge);
    color: var(--color-ink-2);
  }
/* END_SNIPPET:product-card */