:root {
  --an-black: #0b0b0b;
  --an-white: #fff;
  --an-ink: #161616;
  --an-muted: #707070;
  --an-surface: #f5f4f1;
  --an-line: #dededb;
  --an-container: 1440px;
  --an-gutter: clamp(16px, 2.1vw, 32px);
  --an-section-space: clamp(58px, 7vw, 108px);
  --an-title-xl: clamp(34px, 5vw, 72px);
  --an-title-lg: clamp(25px, 3vw, 42px);
  --an-title-md: clamp(20px, 2vw, 28px);
  --an-text-sm: 12px;
  --an-ease: cubic-bezier(.22, 1, .36, 1);
  --an-fast: 220ms;
  --an-slow: 700ms;
}

html { scroll-behavior: smooth; }

body {
  color: var(--an-ink);
  background: var(--an-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El loader heredado sigue siendo inyectado por el CSS personalizado del tema.
   Lo convertimos en una transición de marca breve, sin bloquear la navegación. */
html.show-loader::before {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}

body,
button,
input,
select,
textarea { font-family: inherit; }

::selection { color: #fff; background: #111; }

/* Foco visible para navegación por teclado.
   Más abajo hay reglas de formulario que hacen `outline: 0`; sin esto, quien
   navega con Tab (o con lector de pantalla) pierde de vista dónde está parado.
   Se usa :focus-visible, así que no aparece nada al hacer clic con el mouse. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.an-info-page__content input:focus-visible,
.an-info-page__content textarea:focus-visible,
.an-info-page__content select:focus-visible,
.js-footer .newsletter-input:focus-visible,
.js-footer input[type="email"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Header: más preciso y con transición tipo Represent */
.head-main {
  z-index: 1001;
  transition: background-color .35s var(--an-ease), box-shadow .35s var(--an-ease), transform .35s var(--an-ease) !important;
}

.head-main .container-fluid {
  padding-right: var(--an-gutter);
  padding-left: var(--an-gutter);
}

/* En páginas interiores el header ocupa menos pantalla; el Home conserva
   su composición amplia y transparente sobre el hero. */
@media (min-width: 1024px) {
  body:not(.template-home) .head-main {
    padding-top: 2px !important;
    padding-bottom: 0 !important;
  }

  body:not(.template-home) .head-main .logo,
  body:not(.template-home) .head-main .store-logo {
    margin-bottom: 0 !important;
  }

  body:not(.template-home) .head-main .logo-img,
  body:not(.template-home) .head-main img[alt*="Anhelo"] {
    width: auto !important;
    max-width: 220px !important;
    max-height: 112px !important;
    object-fit: contain !important;
  }

  body:not(.template-home) .head-main .nav-desktop {
    padding-bottom: 7px !important;
  }

  body:not(.template-home) .head-main .nav-desktop-list,
  body:not(.template-home) .head-main .nav-desktop-list ul {
    margin-bottom: 5px !important;
  }
}

.head-main .nav-list-link,
.head-main .region-switch,
.head-main .utility-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.head-main .nav-list-link {
  position: relative;
  padding-bottom: 5px;
}

.head-main .nav-list-link::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .35s var(--an-ease);
}

.head-main .nav-list-link:hover::after,
.head-main .nav-list-link.selected::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* El tema controla por sí mismo la transparencia y el estado al hacer scroll. */
.template-home .head-main.an-head-scrolled.head-transparent-on-section {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.region-switch--header {
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  transition: color var(--an-fast), background var(--an-fast) !important;
}

.region-switch--header:hover { color: #fff !important; background: #111 !important; }

/* Jerarquía común para títulos del Home y módulos agregados */
.template-home .section-title,
.template-home .an-product-social__title,
.template-home .anhelo-fam-title,
.template-home .an-reels-title,
.template-home #revie-tn-widget .topTest {
  margin: 0;
  color: var(--an-ink);
  font-family: inherit;
  font-size: var(--an-title-md) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  text-align: left;
  text-transform: uppercase;
}

.template-home .section-featured-home,
.template-home .section-testimonials-home,
.template-home .an-product-social,
.template-home .anhelo-home-reviews {
  scroll-margin-top: 110px;
}

/* Barra de filtros/orden pegada al scrollear.
   El tema la fija en top:0 asumiendo que no hay nada arriba, pero la barra de
   anuncios (28px, fixed) y el header sticky ocupan esa franja: quedaba 100%
   tapada. El valor lo calcula anhelo-ui-v3.js::initStickyOffsets() y lo deja
   en --an-sticky-offset. Va con !important porque el JS del tema escribe el
   top como estilo inline y si no, gana él. */
.js-category-controls {
  top: var(--an-sticky-offset, 0px) !important;
}

/* Título de categoría y de búsqueda.
   Estaba quedando en .h4 (18px) mientras los títulos de sección del home usan
   --an-title-md (hasta 28px) en mayúscula: la misma marca escribía
   "ÚLTIMA COLECCIÓN" grande y "OUTLET" chico. Acá se unifican.
   Se excluye la ficha de producto a propósito: ese h1 es el nombre del
   producto y tiene su propio tratamiento. */
.template-category .page-header h1,
.template-search .page-header h1 {
  margin: 0;
  font-size: var(--an-title-md);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.template-category .page-header .an-count,
.template-search .page-header .an-count {
  font-size: 11px;
}

/* Botones y enlaces: un solo sistema */
.btn,
.btn-primary,
.btn-default,
.icon-Testimoniales,
.anhelo-home-reviews .icon-Testimoniales {
  min-height: 42px;
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  transition: color var(--an-fast), background-color var(--an-fast), border-color var(--an-fast), transform var(--an-fast) !important;
}

.btn-primary:hover,
.icon-Testimoniales:hover { transform: translateY(-1px); }

/* Producto: tarjetas más editoriales y consistentes */
.item-product .item-image {
  overflow: hidden;
  background: #f5f4f2;
}

.item-product .item-image img {
  transition: transform .75s var(--an-ease), opacity .4s var(--an-ease) !important;
}

@media (hover:hover) and (pointer:fine) {
  .item-product:hover .item-image-featured { transform: scale(1.018); }
}

.item-product .item-description { padding-top: 14px; }

.item-product .item-name {
  margin-bottom: 8px !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .015em;
  text-transform: uppercase;
}

/* El precio es el único protagonista de la tarjeta. Antes el precio real y el
   precio tachado compartían tamaño (12px) y competían entre sí; ahora el
   tachado acompaña. Esta es la fuente única del tratamiento: los tokens
   tipográficos generales no llegan acá porque este archivo gana en
   especificidad (.item-product .item-price). */
.item-product .item-price {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.item-product .price-compare {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--an-muted);
  font-variant-numeric: tabular-nums;
}

/* Ficha de producto: jerarquía del bloque de precio ----------------------
   El precio de venta y el precio tachado se estaban mostrando IGUALES:
   ambos 16px, peso 400 y el mismo negro; lo único que los diferenciaba era
   la línea del tachado. En una prenda de outlet, donde el descuento es el
   argumento de venta, el número que importa no se destacaba en absoluto. */
#single-product .js-price-container > .col {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}

#single-product .js-price-display {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

#single-product .price-compare {
  font-size: 14px;
  font-weight: 400;
  color: var(--an-muted);
  font-variant-numeric: tabular-nums;
}

/* Las cuotas vivían en una columna propia que las mandaba al extremo derecho
   de la fila —quedaban a ~780px del precio, como un dato suelto—. Bajan a su
   propia línea, debajo del precio y del precio con transferencia. */
#single-product .js-price-container > .col { order: 1; }
#single-product .js-price-container > .col-12 { order: 2; }

#single-product .js-price-container > .col-auto {
  order: 3;
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 8px;
}

#single-product .item-installments {
  font-size: 12px;
  color: var(--an-muted);
  font-variant-numeric: tabular-nums;
}

/* "Precio sin impuestos" es un dato fiscal, no comercial: acompaña. */
#single-product .price-without-taxes-container {
  color: var(--an-muted);
}

/* Páginas informativas -------------------------------------------------- */
.an-info-page {
  min-height: 52vh;
  padding: clamp(56px, 7vw, 104px) var(--an-gutter) clamp(76px, 9vw, 132px);
  color: var(--an-ink);
  background: var(--an-white);
}

.an-info-page__header {
  width: min(100%, 960px);
  margin: 0 auto clamp(42px, 5vw, 70px);
  text-align: center;
}

.an-info-page__eyebrow {
  margin: 0 0 13px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.an-info-page__title {
  margin: 0;
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.an-info-page__body {
  width: min(100%, 900px);
  margin: 0 auto;
}

.an-info-page__body--wide { width: min(100%, var(--an-container)); }

.an-info-page__content {
  color: #303030;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.72;
}

.an-info-page__content > :first-child { margin-top: 0 !important; }
.an-info-page__content > :last-child { margin-bottom: 0 !important; }

.an-info-page__content h2,
.an-info-page__content h3,
.an-info-page__content h4 {
  color: var(--an-ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.an-info-page__content h2 {
  margin: clamp(48px, 6vw, 76px) 0 20px;
  padding-top: 22px;
  border-top: 1px solid var(--an-line);
  font-size: clamp(21px, 2.4vw, 30px);
}

.an-info-page__content h3 { margin: 38px 0 14px; font-size: clamp(17px, 1.8vw, 22px); }
.an-info-page__content h4 { margin: 28px 0 10px; font-size: 14px; letter-spacing: .02em; }
.an-info-page__content p { margin: 0 0 19px; }
.an-info-page__content ul,
.an-info-page__content ol { margin: 0 0 25px; padding-left: 20px; }
.an-info-page__content li { margin-bottom: 9px; }
.an-info-page__content strong { color: var(--an-ink); font-weight: 700; }

.an-info-page__content a:not(.btn) {
  color: var(--an-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: opacity var(--an-fast);
}
.an-info-page__content a:not(.btn):hover { opacity: .55; }

.an-info-page__content blockquote {
  margin: 38px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--an-ink);
  color: var(--an-ink);
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.02em;
}

.an-info-page__content hr {
  margin: 46px 0;
  border: 0;
  border-top: 1px solid var(--an-line);
}

.an-info-page__content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 32px 0;
}

.an-info-page__content table {
  width: 100%;
  margin: 34px 0;
  border-collapse: collapse;
  font-size: 12px;
}
.an-info-page__content th,
.an-info-page__content td { padding: 14px 12px; border-bottom: 1px solid var(--an-line); text-align: left; }
.an-info-page__content th { color: var(--an-ink); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }

.an-info-page__content details {
  border-top: 1px solid var(--an-line);
  color: var(--an-ink);
}
.an-info-page__content details:last-of-type { border-bottom: 1px solid var(--an-line); }
.an-info-page__content summary {
  position: relative;
  padding: 21px 44px 21px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.an-info-page__content summary::-webkit-details-marker { display: none; }
.an-info-page__content summary::after {
  position: absolute;
  top: 50%;
  right: 3px;
  content: "+";
  font-size: 20px;
  font-weight: 400;
  transform: translateY(-50%);
}
.an-info-page__content details[open] summary::after { content: "−"; }
.an-info-page__content details > :not(summary) { margin-right: 30px; }

.an-info-page__content input:not([type="checkbox"]):not([type="radio"]),
.an-info-page__content textarea,
.an-info-page__content select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--an-line);
  border-radius: 0;
  color: var(--an-ink);
  background: #fff;
  box-shadow: none;
}
.an-info-page__content textarea { min-height: 150px; resize: vertical; }
.an-info-page__content input:focus,
.an-info-page__content textarea:focus,
.an-info-page__content select:focus { border-color: var(--an-ink); outline: 0; }

/* Sistema único de carruseles de producto ------------------------------- */
.an-product-rail {
  position: relative;
  padding-top: clamp(48px, 5vw, 76px);
  padding-bottom: clamp(44px, 5vw, 72px);
  overflow: hidden;
  border-bottom: 1px solid var(--an-line);
}

.an-product-rail .an-home-products-head,
.an-product-rail .section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--an-container);
  margin: 0 auto 26px !important;
  padding-right: var(--an-gutter) !important;
  padding-left: var(--an-gutter) !important;
  text-align: left !important;
}

.an-product-rail .an-home-products-title,
.an-product-rail .section-title .h5,
.an-product-rail .section-title h2 {
  margin: 0 !important;
  font-size: var(--an-title-md) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  text-transform: uppercase !important;
}

.an-product-rail .an-home-products-link {
  flex: 0 0 auto;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--an-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) {
  width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch;
}

.an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary)::-webkit-scrollbar { display: none; }

.an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) > .swiper-wrapper {
  display: flex !important;
  align-items: stretch;
  gap: 8px;
  height: auto !important;
  transform: none !important;
  transition: none !important;
}

.an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) > .swiper-wrapper > .swiper-slide {
  display: flex;
  flex: 0 0 calc((100% - 32px) / 5) !important;
  width: calc((100% - 32px) / 5) !important;
  height: auto !important;
  margin: 0 !important;
}

.an-product-rail .swiper-slide > .js-item-product,
.an-product-rail .swiper-slide > .item-product {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.an-product-rail .item-description {
  flex: 1 1 auto;
  padding: 14px 12px 18px !important;
}

.an-product-rail > .swiper-button-prev,
.an-product-rail > .swiper-button-next,
.an-product-rail .js-swiper-related-prev,
.an-product-rail .js-swiper-related-next,
.an-product-rail .js-swiper-complementary-prev,
.an-product-rail .js-swiper-complementary-next {
  z-index: 4;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--an-line);
  border-radius: 50%;
  color: var(--an-ink);
  background: rgba(255,255,255,.94);
  box-shadow: none;
  transition: opacity var(--an-fast), color var(--an-fast), background var(--an-fast);
}

.an-product-rail > .swiper-button-prev:hover,
.an-product-rail > .swiper-button-next:hover,
.an-product-rail .js-swiper-related-prev:hover,
.an-product-rail .js-swiper-related-next:hover,
.an-product-rail .js-swiper-complementary-prev:hover,
.an-product-rail .js-swiper-complementary-next:hover { color: #fff; background: #111; border-color: #111; }
.an-product-rail > .swiper-button-prev[disabled],
.an-product-rail > .swiper-button-next[disabled],
.an-product-rail .js-swiper-related-prev[disabled],
.an-product-rail .js-swiper-related-next[disabled],
.an-product-rail .js-swiper-complementary-prev[disabled],
.an-product-rail .js-swiper-complementary-next[disabled] { opacity: .22 !important; cursor: default; }

@media (min-width: 768px) and (max-width: 1100px) {
  .an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) > .swiper-wrapper > .swiper-slide {
    flex-basis: calc((100% - 16px) / 3) !important;
    width: calc((100% - 16px) / 3) !important;
  }
}

/* Footer compacto y editorial */
.js-footer {
  padding-top: clamp(50px, 5.5vw, 78px);
  border-top: 1px solid var(--an-line);
  color: var(--an-ink);
  background: #fff;
}

.js-footer .container-fluid {
  max-width: var(--an-container);
  padding-right: var(--an-gutter);
  padding-left: var(--an-gutter);
}

.js-footer .subtitle {
  margin-bottom: 19px !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.js-footer a { transition: opacity var(--an-fast); }
.js-footer a:hover { opacity: .55; }

.js-footer .an-footer-main {
  align-items: flex-start;
  margin: 0 !important;
  padding-bottom: clamp(42px, 5vw, 64px);
}

.js-footer .an-footer-news,
.js-footer .an-footer-column { margin-bottom: 0 !important; }

.js-footer .an-footer-column ul,
.js-footer .an-footer-contact ul { margin: 0; padding: 0; list-style: none; }

.js-footer .an-footer-column li,
.js-footer .an-footer-contact li { margin: 0 0 12px; }

.js-footer .an-footer-column a,
.js-footer .an-footer-contact a,
.js-footer .contact-link {
  color: var(--an-ink);
  font-size: 12px;
  line-height: 1.5;
}

/* La captura de mail es el canal directo de la marca (va a Supabase y de ahí a
   Perfit). Estaba compitiendo en peso con el listado de categorías; ahora
   respira y se lee como lo primero del footer. */
.js-footer .newsletter { margin-bottom: 32px; }
.js-footer .an-footer-news { padding-bottom: 8px; }
.js-footer .newsletter-title,
.js-footer .newsletter .subtitle { max-width: 430px; }

.js-footer .newsletter-form {
  position: relative;
  max-width: 460px;
  margin-top: 18px;
}

.js-footer .newsletter-input,
.js-footer input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 52px 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--an-ink);
  border-radius: 0;
  color: var(--an-ink);
  background: transparent;
  box-shadow: none;
  font-size: 12px;
}

.js-footer .newsletter-input:focus,
.js-footer input[type="email"]:focus { outline: 0; border-bottom-width: 2px; }

.js-footer .newsletter-btn,
.js-footer .newsletter-form .btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 11px !important;
  border: 0 !important;
  color: var(--an-ink) !important;
  background: transparent !important;
}

.js-footer .social-link,
.js-footer .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.js-footer .an-footer-logos {
  margin: 0 !important;
  padding: 24px 0 30px;
  border-top: 1px solid var(--an-line);
}

/* Los medios de pago son un requisito de confianza y legal, no un elemento de
   diseño: antes ocupaban una franja entera a todo color y competían con el
   resto del footer. Entran más chicos y desaturados, y recuperan color cuando
   la persona efectivamente los va a mirar. */
.js-footer .an-footer-logos img,
.js-footer .an-footer-logos svg {
  width: auto;
  max-width: 44px;
  max-height: 21px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .5;
  transition: opacity .2s ease, filter .2s ease;
}

.js-footer .an-footer-logos:hover img,
.js-footer .an-footer-logos:hover svg {
  filter: grayscale(0);
  opacity: 1;
}

.js-footer .footer-legal {
  padding: 22px 0 26px;
  border-top: 1px solid var(--an-line);
  color: var(--an-muted);
  background: #fff;
}

.js-footer .footer-legal .font-small {
  margin-bottom: 12px !important;
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: .025em;
}

.js-footer .footer-legal a { color: inherit; }

/* Animaciones globales discretas */
.an-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--an-slow) var(--an-ease), transform var(--an-slow) var(--an-ease);
}

.an-reveal.is-visible { opacity: 1; transform: none; }

/* Outlet: aviso de temporadas anteriores + segunda selección -------------
   Bloque informativo, no promocional: no compite con las fotos de producto.
   Cuando hay acceso a segunda selección se parte en dos columnas separadas
   por una línea, para que quede visualmente claro que son dos cosas
   distintas (stock sano vs. prendas con detalle). */
/* El ancho y la alineación los da el .container-fluid que lo envuelve en
   outlet-notice.tpl, igual que el resto de la página de categoría. */
.an-outlet-notice {
  margin: 0 0 24px;
}

.an-outlet-notice__inner {
  /* Sin recuadro ni fondo propio: con borde y gris distinto al de la página
     se leía como un cartel pegado encima. Queda delimitado por reglas finas
     arriba y abajo, que es el recurso que usa el resto del sitio (footer,
     páginas informativas) para separar bloques sin encajonarlos. */
  max-width: 780px;
  padding: 16px 0;
  border-top: 1px solid var(--an-line);
  border-bottom: 1px solid var(--an-line);
  background: transparent;
}

/* Con segunda selección son dos columnas y ocupa todo el ancho del listado.
   Acotarlo (probé 1240px) lo dejaba cortado a media pantalla mientras la
   grilla seguía hasta el borde: se leía como un bloque suelto. Lo que se
   limita es el largo de línea del texto, no el ancho del recuadro. */
.an-outlet-notice__inner--split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 30px;
  align-items: start;
  max-width: none;
}

.an-outlet-notice__inner--split .an-outlet-notice__text { max-width: 60ch; }

/* El separador es un ::before, que en el DOM va primero. Sin `order` quedaría
   antes del primer bloque — se nota sobre todo en mobile, donde las columnas
   se apilan. Con order explícito el orden visual es siempre:
   temporadas anteriores → línea → segunda selección. */
.an-outlet-notice__inner--split > .an-outlet-notice__main { order: 1; }

.an-outlet-notice__inner--split::before {
  content: "";
  order: 2;
  align-self: stretch;
  background: var(--an-line);
}

.an-outlet-notice__inner--split > .an-outlet-notice__second { order: 3; }

.an-outlet-notice__label {
  margin: 0 0 7px;
  color: var(--an-muted);
  font-family: var(--an-technical-font);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.an-outlet-notice__text {
  margin: 0;
  color: var(--an-ink);
  font-size: 12px;
  line-height: 1.55;
}

/* Política de cambio. Se distingue del texto informativo con una línea
   superior y peso: es la condición de compra, no una aclaración más. */
.an-outlet-policy {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--an-line);
  color: var(--an-ink);
  font-size: 11px;
  line-height: 1.5;
}

.an-outlet-policy strong {
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* Versión de ficha de producto: va arriba del botón de compra, así que
   necesita más presencia que en la categoría — es lo último que la persona
   lee antes de decidir. */
.an-outlet-policy--compact {
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid var(--an-ink);
  font-size: 11px;
}

.an-outlet-notice__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px solid var(--an-ink);
  color: var(--an-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: color var(--an-fast), background-color var(--an-fast);
}

.an-outlet-notice__cta:hover,
.an-outlet-notice__cta:focus-visible {
  color: var(--an-white);
  background: var(--an-ink);
  opacity: 1;
}

.an-outlet-notice__cta-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .an-outlet-notice { margin-bottom: 18px; }

  .an-outlet-notice__inner { padding: 17px 16px; }

  /* En mobile las columnas se apilan y la línea divisoria pasa a ser
     horizontal, manteniendo la separación entre los dos mensajes. */
  .an-outlet-notice__inner--split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .an-outlet-notice__inner--split::before { height: 1px; }

  .an-outlet-notice__cta { width: 100%; justify-content: center; }
}

/* Las prendas de regalo no se muestran en ningún listado del sitio: ni en el
   buscador, ni en productos relacionados, ni en categorías. Solo se llega a
   ellas desde el selector del carrito.

   Se ocultan por CSS a propósito y no quitándolas del HTML: el selector arma
   su lista leyendo la página de la categoría por fetch, y el fetch trae el
   HTML crudo sin aplicar estilos. Así siguen disponibles para el sistema y no
   para quien navega. */
.an-gift-product {
  display: none !important;
}

/* Remera de regalo: progreso en el carrito -------------------------------
   Copia el tratamiento del progreso nativo de envío gratis, que está justo
   arriba: barra de 2px, texto centrado debajo, SIN recuadro ni fondo propio.
   Con borde y fondo gris se leía como un bloque pegado encima del carrito en
   lugar de como parte de él. */
.an-gift {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.an-gift__bar {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: var(--an-line);
}

.an-gift__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--an-ink);
  transition: width .45s var(--an-ease);
}

/* Mismo cuerpo que el mensaje nativo de envío gratis (14px), que está
   inmediatamente arriba: con 12px se leía como un texto de otra jerarquía. */
.an-gift__message {
  margin: 9px 0 0;
  color: var(--an-ink);
  font-size: 14px;
  line-height: 1.4;
}

/* La parte resaltada del mensaje (lo que va entre *asteriscos* en el panel).
   El aviso nativo destaca "envío gratis" solo con color; acá se suma negrita
   a propósito, para que el regalo pese más que el envío en la comparación. */
.an-gift__hl {
  font-weight: 700;
  color: var(--an-ink);
}

/* Aviso en la ficha de producto, reemplaza al nativo cuando además se alcanza
   el monto del regalo. Hereda el mismo tratamiento para que no se note el
   cambio de uno a otro. */
.an-gift-product-label {
  margin-bottom: 1.5rem;
  font-size: 14px;
  line-height: 1.4;
}

body.an-gift-product-active .js-shipping-add-product-label {
  display: none !important;
}

.an-gift__count {
  margin-left: 6px;
  font-family: var(--an-technical-font);
  font-size: 10px;
  color: var(--an-muted);
  font-variant-numeric: tabular-nums;
}

.an-gift__chosen {
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  color: var(--an-muted);
}

/* El botón sí tiene peso propio: es la acción, no un aviso. */
.an-gift__cta {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 20px;
  border: 1px solid var(--an-ink);
  background: var(--an-ink);
  color: var(--an-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--an-fast);
}

.an-gift__cta:hover { opacity: .82; }

/* Selector de la prenda de regalo */
.an-gift-modal__loading,
.an-gift-modal__error {
  padding: 26px 0;
  text-align: center;
  font-size: 12px;
  color: var(--an-muted);
}

.an-gift-modal__remaining {
  margin: 0 0 14px;
  font-family: var(--an-technical-font);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--an-muted);
}

.an-gift-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 16px;
}

.an-gift-card__media {
  aspect-ratio: 4 / 5;
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--an-surface);
}

.an-gift-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.an-gift-card__name {
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.an-gift-card__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.an-gift-card__size {
  min-width: 34px;
  padding: 5px 7px;
  border: 1px solid var(--an-line);
  background: transparent;
  color: var(--an-ink);
  font-family: var(--an-technical-font);
  font-size: 10px;
  cursor: pointer;
  transition: color var(--an-fast), background-color var(--an-fast), border-color var(--an-fast);
}

.an-gift-card__size:hover,
.an-gift-card__size:focus-visible {
  border-color: var(--an-ink);
  background: var(--an-ink);
  color: var(--an-white);
}

@media (max-width: 767px) {
  .an-gift-modal__grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
}

/* Programa de niveles: banner ------------------------------------------- */
.an-members-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(74vh, 620px);
  padding: clamp(48px, 8vw, 96px) var(--an-gutter);
  overflow: hidden;
  background: var(--an-black);
  text-align: center;
}

.an-members-hero__media {
  position: absolute;
  inset: 0;
}

.an-members-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo sobre la foto: sin esto el texto blanco se pierde según la imagen que
   se cargue, y la imagen la elige Facundo desde el panel. */
.an-members-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .48);
}

.an-members-hero__content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  color: #fff;
}

.an-members-hero__title {
  margin: 0;
  font-size: clamp(38px, 9vw, 118px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.an-members-hero__text {
  max-width: 46ch;
  margin: 16px auto 0;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.5;
}

.an-members-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.an-members-hero__btn {
  padding: 13px 30px;
  border: 1px solid #fff;
  background: #fff;
  color: var(--an-black);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: opacity var(--an-fast);
}

.an-members-hero__btn.is-ghost { background: transparent; color: #fff; }
.an-members-hero__btn:hover { opacity: .82; }

/* Programa de niveles --------------------------------------------------- */
.an-members {
  max-width: var(--an-container);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--an-gutter) clamp(64px, 8vw, 112px);
}

.an-members__header { margin-bottom: clamp(32px, 4vw, 52px); }

.an-members__eyebrow {
  margin: 0 0 8px;
  color: var(--an-muted);
  font-family: var(--an-technical-font);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.an-members__title {
  margin: 0;
  font-size: var(--an-title-lg);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

/* Estado del cliente */
.an-members__status {
  max-width: 620px;
  margin-bottom: clamp(40px, 5vw, 64px);
  padding: 22px 0;
  border-top: 1px solid var(--an-ink);
  border-bottom: 1px solid var(--an-line);
}

.an-members__status-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.an-members__label {
  color: var(--an-muted);
  font-family: var(--an-technical-font);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.an-members__tier {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.an-members__spent,
.an-members__next {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--an-ink);
}

.an-members__spent { margin-bottom: 12px; }
.an-members__next { margin-top: 10px; color: var(--an-muted); }
.an-members__next strong { color: var(--an-ink); }

.an-members__bar {
  height: 2px;
  overflow: hidden;
  background: var(--an-line);
}

.an-members__bar-fill {
  display: block;
  height: 100%;
  background: var(--an-ink);
  transition: width .5s var(--an-ease);
}

/* Visitante sin cuenta */
.an-members__join {
  max-width: 520px;
  margin-bottom: clamp(40px, 5vw, 64px);
  padding: 22px 0;
  border-top: 1px solid var(--an-ink);
  border-bottom: 1px solid var(--an-line);
}

.an-members__join-text {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
}

.an-members__cta {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--an-ink);
  background: var(--an-ink);
  color: var(--an-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.an-members__login {
  margin-left: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}

/* Los niveles */
.an-members__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--an-line);
  border: 1px solid var(--an-line);
}

.an-members__tier-card {
  position: relative;
  padding: 20px 18px 22px;
  background: var(--an-white);
}

/* El nivel alcanzado se marca invirtiendo el bloque: es el único que tiene
   que saltar a la vista cuando la persona escanea la tabla. */
.an-members__tier-card.is-current {
  background: var(--an-ink);
  color: var(--an-white);
}

.an-members__tier-card.is-current .an-members__tier-min { color: rgba(255,255,255,.65); }

.an-members__tier-card.is-passed .an-members__tier-name,
.an-members__tier-card.is-passed .an-members__tier-min { opacity: .45; }

.an-members__tier-name {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.an-members__tier-min {
  margin: 0 0 14px;
  color: var(--an-muted);
  font-family: var(--an-technical-font);
  font-size: 10px;
  letter-spacing: .06em;
}

/* Tasa de acumulación: va en su propia banda, separada de los beneficios.
   Es el dato que explica por qué conviene subir de nivel, así que no puede
   quedar mezclado en la lista de abajo. Se delimita con reglas y no con un
   fondo, para que funcione igual en la tarjeta blanca y en la negra del
   nivel alcanzado. */
.an-members__tier-rate {
  margin: 0 0 14px;
  padding: 10px 0;
  border-top: 1px solid var(--an-line);
  border-bottom: 1px solid var(--an-line);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

.an-members__tier-card.is-current .an-members__tier-rate {
  border-color: rgba(255, 255, 255, .28);
}

.an-members__perks {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.5;
}

.an-members__perks li { margin-bottom: 5px; padding-left: 12px; position: relative; }
.an-members__perks li::before { content: "—"; position: absolute; left: 0; opacity: .5; }

.an-members__tier-flag {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--an-technical-font);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

/* Puntos acumulados: el número es el protagonista del bloque de estado. */
.an-members__points {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 0;
}

.an-members__points-n {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.an-members__points-l {
  font-family: var(--an-technical-font);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--an-muted);
}

/* Título de sección, común a todos los bloques del programa */
.an-members__h2 {
  margin: clamp(40px, 5vw, 64px) 0 18px;
  font-size: var(--an-title-md);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

/* Cómo funciona: tres pasos.
   Acá la numeración sí corresponde — es una secuencia real que la persona
   recorre en orden, no una decoración. */
.an-members__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--an-line);
  border: 1px solid var(--an-line);
}

.an-members__step {
  padding: 20px 18px 22px;
  background: var(--an-white);
}

.an-members__step-n {
  display: block;
  margin-bottom: 10px;
  font-family: var(--an-technical-font);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--an-muted);
}

.an-members__step-t {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.an-members__step-d {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--an-muted);
}

/* Cómo sumar puntos */
.an-members__earn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  background: var(--an-line);
  border: 1px solid var(--an-line);
}

.an-members__earn-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 18px 22px;
  background: var(--an-white);
}

.an-members__earn-icon {
  width: 22px;
  height: 22px;
  fill: var(--an-ink);
  flex: 0 0 auto;
}

.an-members__earn-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--an-ink);
}

.an-members__earn-pts {
  margin: auto 0 0;
  font-family: var(--an-technical-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* Ícono del nivel: imagen cuadrada cargada desde el editor.
   NO se invierte en el nivel alcanzado, aunque el bloque pase a fondo negro:
   los íconos tienen color propio (bronce, plata, oro...) y al invertirlos
   cambiaban de metal — el bronce se leía como diamante. */
.an-members__tier-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 14px;
}

.an-members__tier-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Catálogo de canje */
.an-members__rewards { margin-top: 0; }

.an-members__reward-icon {
  display: block;
  width: 76px;
  height: 76px;
  fill: var(--an-ink);
}

.an-members__rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--an-line);
  border: 1px solid var(--an-line);
}

/* Tarjetas casi cuadradas, con el símbolo ocupando la mitad de arriba.
   Con las tarjetas bajas y el ícono chico el catálogo se leía como una lista
   de precios; el premio tiene que entrar por la imagen, no por el texto. */
.an-members__reward {
  display: flex;
  flex-direction: column;
  min-height: 246px;
  padding: 20px 18px 22px;
  background: var(--an-white);
}

.an-members__reward-media {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: 96px;
  margin-bottom: 14px;
}

.an-members__reward-img {
  max-width: 100%;
  max-height: 108px;
  object-fit: contain;
}

/* Lo alcanzable se marca con una línea superior, no con color: el catálogo
   tiene que leerse como una escalera, no como un semáforo. */
.an-members__reward.is-reachable { box-shadow: inset 0 2px 0 var(--an-ink); }

.an-members__reward-pts {
  margin: 0 0 6px;
  font-family: var(--an-technical-font);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--an-muted);
  font-variant-numeric: tabular-nums;
}

.an-members__reward-name {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.an-members__reward-state {
  font-family: var(--an-technical-font);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--an-muted);
}

.an-members__reward-state.is-ok { color: var(--an-ink); }

.an-members__reward-btn {
  padding: 7px 14px;
  border: 1px solid var(--an-ink);
  background: var(--an-ink);
  color: var(--an-white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--an-fast);
}

.an-members__reward-btn:hover { opacity: .82; }

.an-members__reward-btn:disabled {
  background: transparent;
  color: var(--an-muted);
  border-color: var(--an-line);
  cursor: default;
}

.an-members__msg {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--an-ink);
}

.an-members__msg.is-error { color: var(--an-muted); }

.an-members__content { margin-top: clamp(40px, 5vw, 64px); }

@media (max-width: 767px) {
  .an-members__tiers { grid-template-columns: 1fr; }
  .an-members__login { display: inline-block; margin: 12px 0 0; }
}

/* Selector inicial de región */
.an-region-gate {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7,7,7,.76);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity .4s var(--an-ease), visibility .4s;
}

.an-region-gate.is-open { opacity: 1; visibility: visible; }

.an-region-gate__dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 46%) 1fr;
  width: min(920px, 96vw);
  min-height: 570px;
  overflow: hidden;
  background: #fff;
  transform: translateY(18px) scale(.985);
  transition: transform .55s var(--an-ease);
}

.an-region-gate.is-open .an-region-gate__dialog { transform: none; }

.an-region-gate__visual { position: relative; min-height: 570px; background: #deddd9; }
.an-region-gate__visual::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35)); }
.an-region-gate__visual img { display:block; width:100%; height:100%; object-fit:cover; }
.an-region-gate__visual-label { position:absolute; z-index:1; right:24px; bottom:22px; left:24px; margin:0; color:#fff; font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }

.an-region-gate__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 6vw, 72px);
}

.an-region-gate__eyebrow { margin:0 0 18px; font-size:9px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.an-region-gate__title { margin:0 0 12px; font-size:clamp(30px, 4vw, 48px); font-weight:700; line-height:.98; letter-spacing:-.045em; text-transform:uppercase; }
.an-region-gate__intro { max-width:410px; margin:0 0 32px; color:var(--an-muted); font-size:13px; line-height:1.55; }
.an-region-gate__choices { display:grid; gap:10px; }
.an-region-gate__choice { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; padding:14px 17px; border:1px solid var(--an-line); color:#111; background:#fff; text-decoration:none; transition:color var(--an-fast),background var(--an-fast),border-color var(--an-fast); }
.an-region-gate__choice:hover { color:#fff; background:#111; border-color:#111; }
.an-region-gate__choice strong { display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.an-region-gate__choice small { display:block; margin-top:3px; color:var(--an-muted); font-size:9px; }
.an-region-gate__choice:hover small { color:rgba(255,255,255,.66); }
.an-region-gate__arrow { font-size:19px; }
.an-region-gate__close { position:absolute; z-index:4; top:14px; right:14px; display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:0; color:#111; background:#fff; font-size:22px; cursor:pointer; }
.an-region-lock { overflow:hidden !important; }

@media (max-width: 767px) {
  :root { --an-section-space: 56px; }

  /* Selector regional mobile: fotografía contenida + dos opciones visibles. */
  html body #region-overlay.an-region-gate {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body #region-overlay.an-region-gate:not(.is-open) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body #region-overlay.an-region-gate.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body #region-modal.an-region-gate__dialog {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 430px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
    transform: none !important;
  }

  html body #region-modal .an-region-gate__visual {
    position: relative !important;
    display: block !important;
    flex: 0 0 190px !important;
    width: 100% !important;
    height: 190px !important;
    min-height: 0 !important;
    max-height: 190px !important;
    overflow: hidden !important;
    background: #111 !important;
  }

  html body #region-modal .an-region-gate__visual img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 38% !important;
  }

  html body #region-modal .an-region-gate__content {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 20px 18px 18px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body #region-modal .an-region-gate__eyebrow { margin: 0 0 6px !important; }
  html body #region-modal .an-region-gate__title { margin: 0 0 7px !important; font-size: 24px !important; }
  html body #region-modal .an-region-gate__intro { margin: 0 0 14px !important; font-size: 11px !important; }
  html body #region-modal .an-region-gate__choices { display: grid !important; gap: 8px !important; }
  html body #region-modal .an-region-gate__choice { width: 100% !important; min-height: 60px !important; padding: 11px 14px !important; }
  html body #region-modal .an-region-gate__close { top: 9px !important; right: 9px !important; width: 40px !important; height: 40px !important; }

  /* Sliders editoriales mobile: lectura cómoda y gesto horizontal claro. */
  html body.template-home .section-featured-home {
    padding-top: 46px !important;
    padding-bottom: 34px !important;
  }

  html body.template-home .section-featured-home .an-home-products-head {
    margin-bottom: 24px !important;
    padding-right: 20px !important;
    padding-left: 6px !important;
    gap: 12px !important;
  }

  html body.template-home .section-featured-home .an-home-products-title {
    font-size: 20px !important;
    line-height: 1.05 !important;
    letter-spacing: -.01em !important;
  }

  html body.template-home .section-featured-home :is(.an-native-product-viewport, .an-stained-viewport) {
    padding-right: 18px !important;
    padding-bottom: 0 !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.template-home .section-featured-home :is(.an-native-product-viewport, .an-stained-viewport)::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body.template-home .section-featured-home :is(.an-native-product-viewport, .an-stained-viewport) > .swiper-wrapper {
    gap: 10px !important;
  }

  html body.template-home .section-featured-home :is(.an-native-product-viewport, .an-stained-viewport) > .swiper-wrapper > .swiper-slide {
    flex: 0 0 72vw !important;
    width: 72vw !important;
    max-width: 310px !important;
    scroll-snap-align: start !important;
  }

  html body.template-home .section-featured-home .item-description {
    padding: 14px 12px 16px !important;
  }

  html body.template-home .section-featured-home .item-name {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .item-product .item-description { padding:11px 10px 0; }
}

@media (max-width: 767px) and (max-height: 680px) {
  html body #region-modal .an-region-gate__visual {
    flex-basis: 125px !important;
    height: 125px !important;
    max-height: 125px !important;
  }

  html body #region-modal .an-region-gate__content {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  html body #region-modal .an-region-gate__eyebrow,
  html body #region-modal .an-region-gate__intro {
    display: none !important;
  }

  html body #region-modal .an-region-gate__title {
    margin-bottom: 11px !important;
    font-size: 21px !important;
  }
}

@media (max-width: 767px) {
  /* En mobile todos los carruseles comparten jerarquía centrada y muestran
     una tarjeta completa más un anticipo claro de la siguiente. */
  html body .an-product-rail {
    padding-top: 46px !important;
    padding-bottom: 38px !important;
  }

  html body .an-product-rail .an-home-products-head,
  html body .an-product-rail .section-title {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px !important;
    margin-bottom: 24px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
    text-align: center !important;
  }

  html body .an-product-rail .an-home-products-title,
  html body .an-product-rail .section-title .h5,
  html body .an-product-rail .section-title h2 {
    font-size: 20px !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  html body .an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) {
    padding-right: 18px !important;
    scroll-snap-type: x mandatory !important;
  }

  html body .an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) > .swiper-wrapper {
    gap: 10px !important;
  }

  html body .an-product-rail :is(.an-native-product-viewport, .an-stained-viewport, .js-swiper-related, .js-swiper-complementary) > .swiper-wrapper > .swiper-slide {
    flex: 0 0 74vw !important;
    width: 74vw !important;
    max-width: 310px !important;
    scroll-snap-align: start !important;
  }

  html body .an-product-rail > .swiper-button-prev,
  html body .an-product-rail > .swiper-button-next,
  html body .an-product-rail .js-swiper-related-prev,
  html body .an-product-rail .js-swiper-related-next,
  html body .an-product-rail .js-swiper-complementary-prev,
  html body .an-product-rail .js-swiper-complementary-next {
    display: none !important;
  }

  .an-info-page {
    min-height: 45vh;
    padding: 48px 18px 76px;
  }

  .an-info-page__header { margin-bottom: 38px; }
  .an-info-page__eyebrow { margin-bottom: 10px; font-size: 8px; }
  .an-info-page__title { font-size: clamp(32px, 11vw, 48px); }
  .an-info-page__content { font-size: 14px; line-height: 1.67; }
  .an-info-page__content h2 { margin-top: 44px; padding-top: 18px; font-size: 21px; }
  .an-info-page__content h3 { margin-top: 32px; font-size: 18px; }
  .an-info-page__content blockquote { margin: 30px 0; padding-left: 18px; font-size: 18px; }

  .an-info-page__content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .js-footer { padding-top: 42px; }
  .js-footer .container-fluid { padding-right: 18px; padding-left: 18px; }
  .js-footer .an-footer-main { padding-bottom: 32px; }
  .js-footer .an-footer-news { margin-bottom: 34px !important; padding-right: 0 !important; }
  .js-footer .newsletter { margin-bottom: 20px; }

  .js-footer .an-footer-column {
    width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--an-line);
  }

  .js-footer .an-footer-column:last-child { border-bottom: 1px solid var(--an-line); }

  .js-footer .an-footer-column > .js-accordion-toggle-mobile {
    align-items: center;
    min-height: 58px;
    margin: 0;
    padding: 0 3px;
  }

  .js-footer .an-footer-column > .subtitle,
  .js-footer .an-footer-column > .js-accordion-toggle-mobile .subtitle {
    margin: 0 !important;
    padding: 21px 3px;
  }

  .js-footer .an-footer-column .js-accordion-content-mobile { padding: 0 3px 20px; }
  .js-footer .an-footer-logos { padding: 22px 0 24px; }
  .js-footer .an-footer-logos > span { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
  .js-footer .footer-legal { padding: 19px 0 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .an-reveal { opacity:1; transform:none; }
}