/* TIENDA — portada, repisa, catálogo y ficha de producto. Dueño: agente 2.
   assets/ionika.css es copia exacta de maqueta/styles.css y no se edita: lo propio de esta zona va aquí. */

/* Botones «Agregar» son enlaces del carrito de Woo */
a.agregar, a.boton { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
a.agregar.loading { opacity: .6; pointer-events: none; }
a.agregar.added span, a.boton.added span { font-weight: 600; }
a.added_to_cart { display: none; }
.caja .boton.add_to_cart_button svg { width: 18px; height: 18px; }

/* «Antes de su pedido»: enlaces a las políticas reales */
.antes .tres a { font-size: 15px; color: var(--verde); }

/* Formulario de compra de Woo con el look de .compra */
.compra form.cart { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 0; }
.compra form.cart .quantity input.qty {
  width: 92px; height: 52px; border: 1px solid var(--linea); border-radius: 999px;
  text-align: center; font: 600 17px var(--fuente); color: var(--petroleo); background: var(--blanco);
}
.compra form.cart .single_add_to_cart_button {
  flex: 1 1 200px; height: 52px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--petroleo); color: var(--blanco); font: 600 16px var(--fuente);
  transition: transform .5s var(--ease), background .3s, box-shadow .5s var(--ease);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.compra form.cart .single_add_to_cart_button:hover {
  transform: translateY(-1px); background: var(--hondo); box-shadow: 0 14px 28px -18px rgba(38, 43, 29, .5);
}
.compra form.cart .single_add_to_cart_button[aria-busy="true"] { opacity: .6; pointer-events: none; }
.compra form.cart .single_add_to_cart_button.added::after {
  content: " ✓"; color: var(--verde);
}
.compra .stock { font-size: 14px; color: var(--tinta-2); margin: 10px 0 0; }
.compra .stock.out-of-stock { color: #8a3b2a; }
.incluye a.pieza { text-decoration: none; color: inherit; }

/* Tienda */
.estante .migas { margin-bottom: 14px; }
.estante h1.titular { font-size: clamp(2.6rem, 5vw, 4.2rem); margin-bottom: 28px; }

/* Barra de compra fija (2.1) */
.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none;
  background: rgba(255, 253, 249, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  align-items: center; gap: 12px; transform: translateY(110%); transition: transform .6s var(--ease);
}
.barra-compra.viendo { transform: none; }
.barra-compra small { color: var(--tinta-2); }
.barra-compra .p { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; color: var(--petroleo); }
.barra-compra .boton { margin-left: auto; padding: 12px 18px; font-size: 15px; }

/* Componente .cantidad: envuelve input.qty (2.3) */
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; }
.cantidad button { width: 46px; height: 50px; border: 0; background: transparent; font: inherit; font-size: 20px; cursor: pointer; color: var(--petroleo); transition: background .3s; }
.cantidad button:hover { background: var(--bruma); }
.cantidad output { min-width: 30px; text-align: center; font-weight: 600; }
.compra form.cart .quantity input.qty + .cantidad { display: flex; }
.compra form.cart .quantity input.qty { display: none; }

/* Estado "Agregando" y "Agregado" (2.4) */
.single_add_to_cart_button[aria-busy="true"]::before { content: "Agregando…"; }

/* Envío y formas de pago (2.5) */
.garantias { font-size: 13px; }

/* Ocultar stock "Hay existencias" (2.9) */
.compra .stock.in-stock { display: none; }

/* Filtros deslizantes (2.6) — una fila que se desliza, sin wrap */
.filtros {
  display: flex; gap: 8px; margin: 34px 0 30px;
  overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.filtro {
  font: inherit; font-size: 15px; cursor: pointer; background: var(--blanco); color: var(--tinta-2);
  border: 1px solid var(--linea); padding: 9px 18px; border-radius: 999px; transition: all .35s var(--ease);
  flex-shrink: 0; height: 44px; display: inline-flex; align-items: center;
}
.filtro:hover { border-color: var(--verde); color: var(--verde); }
.filtro[aria-pressed="true"] { background: var(--petroleo); border-color: var(--petroleo); color: var(--blanco); }

/* Imágenes optimizadas (2.7): aspect-ratio fijo */
.escenario { aspect-ratio: 1 / .86; }
.vitrina { aspect-ratio: 1; }
.miniaturas button { aspect-ratio: 1; }
.frasco .escenario img,
.vitrina img { object-fit: contain; }

/* Galería sticky (2.9) */
.ficha .vitrina { position: sticky; top: 96px; }

/* Media móvil: mostrar barra-compra */
@media (max-width: 620px) {
  .barra-compra { display: flex; }
  .ficha .vitrina { position: relative; top: 0; }
}

/* Repisa en teléfonos chicos (≤ 400 px): controles de 44 px sin desbordar.
   Las tarjetas de la rejilla no se encogen por debajo de su contenido si no llevan min-width: 0. */
.repisa > .frasco { min-width: 0; }
.pie-frasco .agregar, .pie-frasco .wa-rapido { min-width: 44px; min-height: 44px; }
@media (max-width: 400px) {
  .pie-frasco { flex-wrap: wrap; row-gap: 8px; }
  .pie-frasco .p { flex-basis: 100%; }
}
.frasco h3 a { display: block; padding-block: 4px; }
.migas a { display: inline-block; padding-block: 5px; }

/* Página de necesidad (inc/necesidades.php) */
.necesidad-intro { font-size: 1.12rem; max-width: 60ch; color: var(--tinta-2); margin: 0 0 30px; }
.necesidad-sub { color: var(--tinta-2); margin: 0 0 8px; }
.necesidad-momentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px; margin-top: 28px; }
.necesidad-nota { margin: 18px 0 0; max-width: 70ch; color: var(--petroleo); }
.necesidad-faq { max-width: 820px; }
.necesidad-otras .filtros { margin: 24px 0; }
.necesidad-otras .filtro { text-decoration: none; }
.necesidad-otras .boton.wa { width: auto; }