/* ══════════════════════════════════════════════════════════════════════
   Lutz Ferrando · lf-products.css — cards de listado = HOME (referencia)
   Foto FLOTANDO por encima de una repisa crema (se sale, como el home).
   Sobre fondo blanco el fondo blanco de la foto es imperceptible => flota limpia.
   Marca (teal) + nombre + badges + precio + tachado + cuotas, alineado izquierda.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --lf-crema: #E7F4EF; --lf-verde-txt: #0A7A67; --lf-verde-osc: #0A7E6D;
  --lf-tinta: #0E1C18; --lf-gris: #5E6B66; --lf-ease: cubic-bezier(.22,.68,0,1);
}

/* Fondo BLANCO PURO en listados: el fondo blanco (255) de las fotos coincide
   exactamente con la página, así la parte que sobresale es 100% invisible.
   Ojo: el wrapper .category-body tiene su propio fondo hueso -> también a blanco. */
body.template-category, body.template-search, body.template-404 { background: #fff; }
.category-body, .js-category-body, body.template-search .category-body,
body.template-search section[data-store*="category"] { background: #fff !important; }

/* Grilla: espacio arriba para que la foto sobresalga. */
.js-product-table.row-grid { padding-top: 66px; row-gap: 44px; overflow: visible; }
.js-item-product { display: flex; overflow: visible; }
/* 3 productos por fila en desktop, 1 por fila en móvil (pedido del cliente). */
@media (min-width: 768px) {
  .js-product-table .js-item-product { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; }
}
@media (max-width: 767px) {
  .js-product-table .js-item-product { flex: 0 0 100% !important; max-width: 100% !important; }
  /* 1 por fila: la tarjeta es full-width, así que la imagen va GRANDE */
  .js-item-product .item.prod { padding-top: 122px; }
  .js-item-product .prod__media, .js-item-product .prod__media.item-image { height: 224px; }
  .js-item-product .prod__prod { height: 312px; max-width: 96%; }
}
.js-item-product > .item.prod, .js-item-product .js-item-info-container.prod { width: 100%; height: 100%; }
.js-item-product .js-quickshop-container { overflow: visible !important; }

/* Card: sin caja fuerte, la repisa + contenido la definen. */
.js-item-product .item.prod {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(14,28,24,.09); border-radius: 22px;
  overflow: visible; padding: 80px 14px 20px;
  transition: transform .3s var(--lf-ease), box-shadow .3s var(--lf-ease), border-color .3s var(--lf-ease);
}
.js-item-product .item.prod:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(14,28,24,.10) !important; border-color: rgba(14,28,24,.15); }
.js-item-product .item.prod::before { content: none !important; }

/* Repisa crema (corta): la foto se apoya y SE SALE por arriba. */
.js-item-product .prod__media, .js-item-product .prod__media.item-image {
  display: block; background: transparent; border-radius: 20px;
  height: 118px; position: relative; overflow: visible;
  box-shadow: none;
}
/* La foto: grande, flotando por encima de la repisa (mix-blend sobre la crema;
   sobre el fondo blanco de la pagina el blanco de la foto es imperceptible). */
.js-item-product .prod__prod {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  height: 208px; width: auto; max-width: 96%; object-fit: contain;
  mix-blend-mode: multiply; pointer-events: none;
  transition: transform .5s var(--lf-ease);
}
.js-item-product .item.prod:hover .prod__prod { transform: translateX(-50%) translateY(-7px) scale(1.02); }
.js-item-product .item.prod.prod--sinstock .prod__prod { opacity: .5; }

/* ── Contenido (alineado a la izquierda, como la referencia) ── */
.js-item-product .item-description.prod__desc, .js-item-product .prod__body {
  padding: 16px 4px 4px; text-align: left; display: flex; flex-direction: column; flex: 1 1 auto;
}
.js-item-product .prod__marca {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lf-verde-txt); font-weight: 700; margin-bottom: 6px;
}
.js-item-product .prod__nom, .js-item-product .item-name {
  font-size: 1.02rem; font-weight: 500; line-height: 1.28; letter-spacing: -.01em; color: var(--lf-tinta); margin-bottom: 12px;
}

/* Badges (oferta / envío gratis) a la izquierda, debajo del nombre */
.js-item-product .prod__tag { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-start; margin-bottom: 12px; position: static; }
.js-item-product .prod__tag:empty { display: none; }
.js-item-product .prod__tag .labels, .js-item-product .prod__tag .js-labels-floating-group {
  position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-start; margin: 0 !important; padding: 0 !important;
}
.js-item-product .prod__tag .label { margin: 0 !important; }

/* Precio + tachado + cuotas */
.js-item-product .item-price-container.prod__precio { margin-top: auto; }
.js-item-product .prod__ahora, .js-item-product .js-price-display.item-price { font-size: 1.34rem; font-weight: 700; color: var(--lf-tinta); letter-spacing: -.02em; }
.js-item-product .prod__antes, .js-item-product .price-compare { font-size: .92rem; color: var(--lf-gris); text-decoration: line-through; margin-left: 8px; font-weight: 400; }
.js-item-product .prod__consultar { font-size: 1.04rem; font-weight: 600; color: var(--lf-verde-txt); }
.js-item-product .item-installments, .js-item-product .prod__cuotas, .js-item-product .payment-discount-price {
  font-size: .84rem; color: var(--lf-verde-txt); margin-top: 6px; font-weight: 500;
}

/* Variantes de color (a la izquierda) */
.js-item-product .prod__variantes, .js-item-product .item-colors { display: flex; gap: 5px; justify-content: flex-start; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.js-item-product .item-colors-bullet { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(14,28,24,.14); }
.js-item-product .item-colors-bullet-more { font-size: .74rem; color: var(--lf-gris); }
/* Círculos de color con imagen de la variante (como el detalle) */
.js-item-product .item-colors--img { gap: 7px; }
.js-item-product .item-colors-img { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(14,28,24,.14); background: #fff; overflow: hidden; flex: 0 0 auto; transition: border-color .18s ease, transform .18s ease; }
.js-item-product .item-colors-img:hover { border-color: var(--lf-verde-txt, #0A7A67); transform: translateY(-1px); }
.js-item-product .item-colors-img img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.js-item-product .item-colors-more { font-size: .8rem; color: var(--lf-gris); font-weight: 500; align-self: center; margin-left: 2px; }

/* CTA / quick-shop */
.js-item-product .item-actions.prod__cta { margin-top: 14px; }
.js-item-product .prod__btn, .js-item-product .btn-small-quickshop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 11px 16px; border-radius: 0;
  background: var(--lf-verde-txt); color: #fff; font-weight: 500; font-size: .9rem; border: 0; cursor: pointer;
  transition: background .2s var(--lf-ease), transform .2s var(--lf-ease);
}
.js-item-product .prod__btn:hover, .js-item-product .btn-small-quickshop:hover { background: var(--lf-verde-osc); color: #fff; transform: translateY(-1px); }

/* ── Responsive ── */
@media (min-width: 768px) and (max-width: 1100px) {
  .js-item-product .prod__media, .js-item-product .prod__media.item-image { height: 108px; }
  .js-item-product .prod__prod { height: 184px; }
}
@media (min-width: 768px) and (max-width: 860px) {
  .js-product-table.row-grid { padding-top: 20px; row-gap: 26px; }
  .js-item-product .prod__media, .js-item-product .prod__media.item-image { height: 98px; }
  .js-item-product .prod__prod { height: 164px; }
  .js-item-product .prod__nom { font-size: .92rem; }
  .js-item-product .prod__ahora { font-size: 1.18rem; }
}
@media (max-width: 480px) {
  .js-item-product .item.prod { padding-top: 112px; }
  .js-item-product .prod__media, .js-item-product .prod__media.item-image { height: 206px; }
  .js-item-product .prod__prod { height: 292px; max-width: 96%; }
}

/* ══════════════════════════════════════════════════════════════════════
   Barra de filtros/orden: fondo BLANCO (no el beige del panel) y el
   "Filtrar" convertido en BOTÓN (pill teal con ícono de embudo).
   ══════════════════════════════════════════════════════════════════════ */
.category-controls, .js-category-controls,
.category-controls.category-controls-transparent { background-color: #fff !important; color: var(--lf-tinta) !important; }
.category-controls .category-controls-container { padding-top: 16px; padding-bottom: 10px; }

.category-controls a.btn-link[data-component="filter-button"],
.category-controls .js-modal-open[data-component="filter-button"] {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 26px;
  border: 1.5px solid var(--lf-verde-txt); border-radius: 999px; background: #fff;
  color: var(--lf-verde-txt) !important; font-weight: 600; font-size: .92rem; line-height: 1;
  text-decoration: none !important; cursor: pointer;
  transition: background .2s var(--lf-ease), color .2s var(--lf-ease), transform .2s var(--lf-ease), box-shadow .2s var(--lf-ease);
}
.category-controls .js-modal-open[data-component="filter-button"]::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16l-6 7v6l-4 2v-8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16l-6 7v6l-4 2v-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.category-controls .js-modal-open[data-component="filter-button"]:hover {
  background: var(--lf-verde-txt); color: #fff !important; transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(10,122,103,.24);
}
.category-controls .filters-badge { color: inherit; font-weight: 600; margin-left: 2px; }
/* La barra no debe quedar sticky (tapaba productos con su fondo blanco al scrollear) */
.category-controls, .js-category-controls { position: static !important; }

/* ══════════════════════════════════════════════════════════════════════
   Cada producto = TARJETA con borde suave (TODO el box, no solo la repisa).
   El producto sigue flotando fuera de su repisa verde, contenido en la tarjeta.
   ══════════════════════════════════════════════════════════════════════ */
/* Separación normal entre filas: cada tarjeta ya es un box discreto */
.js-product-table.row-grid { padding-top: 24px; row-gap: 30px; }

/* La repisa verde NO lleva borde propio: el borde va en TODA la tarjeta */
.js-item-product .prod__media, .js-item-product .prod__media.item-image { border: 0; }

/* Matar el fondo blanco extra que el tema base agrega a los CONTENEDORES en hover
   (la tarjeta .item.prod ya es blanca a propósito y tiene su propia sombra de hover). */
.js-item-product:hover .js-quickshop-container, .js-item-product .js-quickshop-container:hover,
.js-item-product:hover .js-product-container {
  background: transparent !important; box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Detalle de producto: DESCRIPCIÓN en tarjeta blanca, alineada a la IZQUIERDA.
   El tema base la centra (text-md-center) y eso rompe los bullets de las listas
   (quedan pegados a la izquierda con el texto centrado). Se fuerza a la izquierda.
   ══════════════════════════════════════════════════════════════════════ */
[data-store^="product-description"] {
  max-width: 940px; margin: 10px auto 0; text-align: left !important;
  background: #fff; border: 1px solid rgba(14,28,24,.09); border-radius: 22px;
  padding: clamp(26px, 4vw, 48px);
  box-shadow: 0 1px 2px rgba(14,28,24,.05), 0 12px 30px rgba(14,28,24,.06);
}
[data-store^="product-description"] .user-content {
  text-align: left; color: var(--lf-tinta); line-height: 1.75; font-size: 1rem;
}
[data-store^="product-description"] .user-content > *:first-child { margin-top: 0; }
[data-store^="product-description"] .user-content h1,
[data-store^="product-description"] .user-content h2,
[data-store^="product-description"] .user-content h3,
[data-store^="product-description"] .user-content h4 {
  text-align: left; color: var(--lf-tinta); font-weight: 600; letter-spacing: -.01em;
  line-height: 1.25; margin: 30px 0 12px; font-family: 'Aeonik', sans-serif;
}
[data-store^="product-description"] .user-content h1 { font-size: 1.55rem; }
[data-store^="product-description"] .user-content h2 { font-size: 1.4rem; }
[data-store^="product-description"] .user-content h3 { font-size: 1.18rem; color: var(--lf-verde-txt); }
[data-store^="product-description"] .user-content p { margin: 0 0 15px; color: var(--lf-gris); }
[data-store^="product-description"] .user-content ul,
[data-store^="product-description"] .user-content ol {
  text-align: left; margin: 0 0 18px; padding-left: 22px; list-style-position: outside;
}
[data-store^="product-description"] .user-content li { margin-bottom: 9px; color: var(--lf-gris); padding-left: 4px; }
[data-store^="product-description"] .user-content ul li::marker { color: var(--lf-verde-txt); }
[data-store^="product-description"] .user-content a { color: var(--lf-verde-txt); text-decoration: underline; text-underline-offset: 2px; }
[data-store^="product-description"] .user-content strong,
[data-store^="product-description"] .user-content b { color: var(--lf-tinta); }
[data-store^="product-description"] .user-content img { max-width: 100%; height: auto; border-radius: 14px; margin: 10px 0; }
@media (max-width: 767px) {
  [data-store^="product-description"] { border-radius: 16px; padding: 22px 18px; }
}

/* ══════════════ Paginación de listado (grande, clara, clicable) ══════════════ */
.lf-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 46px auto 12px; padding: 0; }
.lf-pager__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.lf-pager__page,
.lf-pager__nav {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 46px; padding: 0 13px;
  border: 1.5px solid #E1E8E5; border-radius: 13px; background: #fff;
  font-family: 'Aeonik', sans-serif; font-size: 1.06rem; font-weight: 600; line-height: 1;
  color: var(--lf-tinta); text-decoration: none;
  transition: background .18s var(--lf-ease), color .18s var(--lf-ease), border-color .18s var(--lf-ease), transform .12s var(--lf-ease), box-shadow .18s var(--lf-ease);
}
.lf-pager__page:hover,
.lf-pager__nav:not(.is-off):hover {
  border-color: var(--lf-verde-txt); color: var(--lf-verde-txt);
  transform: translateY(-1px); box-shadow: 0 4px 13px rgba(10, 122, 103, .16);
}
.lf-pager__page.is-current {
  background: var(--lf-verde-txt); border-color: var(--lf-verde-txt); color: #fff;
  box-shadow: 0 5px 15px rgba(10, 122, 103, .34); cursor: default; transform: none;
}
.lf-pager__nav { width: 46px; padding: 0; color: var(--lf-tinta); }
.lf-pager__nav svg { width: 20px; height: 20px; fill: currentColor; }
.lf-pager__nav.is-off { opacity: .32; pointer-events: none; }
@media (max-width: 560px) {
  .lf-pager { gap: 6px; margin-top: 34px; }
  .lf-pager__list { gap: 6px; }
  .lf-pager__page, .lf-pager__nav { min-width: 42px; height: 42px; font-size: 1rem; }
  .lf-pager__nav { width: 42px; }
}

/* ══════════════ Ficha de producto · info como lista con iconitos ══════════════ */
.lf-prodinfo { margin-top: 6px; background: rgba(231,244,239,.5); border-radius: 16px; padding: 15px 20px; }
.js-product-payments-container,
.lf-stock-line,
.free-shipping-message {
  position: relative; padding-left: 27px !important; margin-bottom: 9px !important; font-size: .88rem !important; line-height: 1.5; font-weight: 500; color: var(--lf-tinta, #0E1C18); display: block;
}
.js-product-payments-container::before,
.js-product-discount-container::before,
.lf-stock-line::before,
.free-shipping-message::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: no-repeat center / contain;
}
.js-product-payments-container::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7A67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
.js-product-discount-container { position: relative; margin-left: -27px; padding-left: 27px; margin-top: 5px; }
.js-product-discount-container::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7A67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"); }
.lf-stock-line::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7A67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E"); }
.free-shipping-message::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7A67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); }
.lf-stock-line { background: none; border-radius: 0; }
.lf-stock-line .js-product-stock { font-weight: 700; color: var(--lf-verde-txt, #0A7A67); }
.js-product-payments-container .font-small { font-size: .88rem !important; }
.js-product-discount-container .text-accent { font-weight: 700; color: var(--lf-verde-txt, #0A7A67); }
.js-product-discount-disclaimer { font-size: .78rem !important; opacity: .6; padding-left: 0; }
.free-shipping-message .text-accent { color: var(--lf-tinta, #0E1C18); font-weight: 500; }
#btn-installments { font-size: .82rem !important; font-weight: 600; }
/* Móvil: encuadrar la info en un fondo suave, iconos inline y texto centrado */
@media (max-width: 767px) {
  .lf-prodinfo { padding: 16px 14px; margin-top: 8px; }
  .js-product-payments-container,
  .js-product-discount-container,
  .lf-stock-line,
  .free-shipping-message { text-align: center; padding-left: 0 !important; margin-left: 0 !important; }
  .js-product-payments-container::before,
  .js-product-discount-container::before,
  .lf-stock-line::before,
  .free-shipping-message::before { position: static; display: inline-block; vertical-align: -3px; margin: 0 6px 0 0; }
}

/* ══════════════ Slider "Productos similares" / "Para comprar con este" ══════════════
   Scope .section-products-related (lo comparten el slider de similares y el de complementarios;
   NO afecta el listado normal de productos). En mobile se muestra UNA tarjeta a lo ancho
   (slidesPerView=1 lo fuerza lf-app.js » sliderSimilares) con la info centrada; las flechas
   prev/next se rediseñan como botones circulares bien visibles (antes eran finitas y apagadas). */
@media (max-width: 767px) {
  .section-products-related .js-item-product .item-description.prod__desc,
  .section-products-related .js-item-product .prod__body { text-align: center; align-items: center; }
  .section-products-related .js-item-product .prod__tag,
  .section-products-related .js-item-product .prod__precio,
  .section-products-related .js-item-product .prod__variantes,
  .section-products-related .js-item-product .item-colors { justify-content: center; }
}
.section-products-related .swiper-button-prev,
.section-products-related .swiper-button-next {
  width: 46px; height: 46px; border-radius: 50%; background: #fff;
  border: 1.5px solid var(--lf-verde-txt, #0A7A67); box-shadow: 0 5px 16px rgba(14, 28, 24, .14);
  display: inline-flex; align-items: center; justify-content: center; margin: 0 12px; opacity: 1;
  transition: background .18s var(--lf-ease), transform .18s var(--lf-ease), box-shadow .18s var(--lf-ease);
}
.section-products-related .swiper-button-prev:hover,
.section-products-related .swiper-button-next:hover {
  background: var(--lf-verde-txt, #0A7A67); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10, 122, 103, .28);
}
.section-products-related .swiper-button-prev svg,
.section-products-related .swiper-button-next svg {
  width: 20px; height: 20px; color: var(--lf-verde-txt, #0A7A67); fill: currentColor; stroke: currentColor;
  transition: color .18s var(--lf-ease); margin: 0;
}
.section-products-related .swiper-button-prev:hover svg,
.section-products-related .swiper-button-next:hover svg { color: #fff; }