/*
Theme Name: Pildoras Child
Template: pildoras
Author: SuWeb
Description: Tema hijo de Pildoras. Acá viven las personalizaciones por tienda/deploy
             (CSS/JS chicos, pusheables por MCP) sin tocar el tema base, cuyos archivos
             grandes (style.css ~185 KB, functions.php ~94 KB) se sincronizan por
             UpdraftPlus/FTP.
Version: 1.1.0
*/

/* ── Personalizaciones de CSS ──────────────────────────────────────────────
   El style.css del tema BASE se carga desde functions.php del child.
   Agregá acá solo overrides/ajustes propios de este sitio. */

/* ── Mi Cuenta / Login ──────────────────────────────────────────────────────
   El base pone `.woocommerce-account .woocommerce { grid: 240px 1fr !important }`,
   y sus overrides (login 1 columna, responsive) NO llevan !important → no ganan.
   Resultado: el login queda en 2 columnas y en mobile se desborda. Forzamos acá. */

/* Login (no logueado): una sola columna, card centrada */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
  grid-template-columns: 1fr !important;
  max-width: 480px !important;
}

/* Mobile/tablet: la cuenta SIEMPRE en una columna (evita el desborde de la tarjeta) */
@media (max-width: 1024px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr !important;
  }
}

/* "Recordarme": checkbox al lado del texto. El base pone width:100% a TODOS los inputs
   del form (incluido el checkbox) y el label como block → lo descoloca. */
.woocommerce-form-login .woocommerce-form-login__rememberme {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
}
.woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
  width: auto !important;
  margin: 0 !important;
}

/* Login + Registro (registro habilitado en Mi cuenta): 2 columnas en desktop,
   apiladas en mobile. El bloque de arriba deja el login SOLO a 480px centrado;
   acá, cuando además hay form de registro, ensanchamos y ponemos las dos al lado. */
.woocommerce-account .woocommerce:has(.woocommerce-form-register) {
  max-width: 880px !important;
}
.woocommerce-account #customer_login.u-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
}
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .woocommerce-account #customer_login.u-columns { grid-template-columns: 1fr !important; }
}

/* Las dos tarjetas al mismo alto. La columna del grid ya estira, pero el <form>
   —que es quien tiene fondo, borde redondeado y sombra— medía lo que su contenido.
   La columna pasa a flex y el form ocupa el alto sobrante. */
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
  display: flex;
  flex-direction: column;
}
.woocommerce-account #customer_login .woocommerce-form-login,
.woocommerce-account #customer_login .woocommerce-form-register {
  flex: 1 1 auto;
}

/* Los dos botones a la misma altura, sin tocar la card de login. El form de registro
   tiene un elemento menos que el de login: el enlace "¿Olvidaste tu contraseña?", que
   mide 26 px justo debajo del botón. Así que el sobrante se va antes del botón —el
   texto de ayuda queda pegado a su campo, que es donde sirve— y abajo se reserva ese
   mismo alto. Medido en el layout real: desfasaje 0 px. */
.woocommerce-account #customer_login .woocommerce-form-register {
  display: flex;
  flex-direction: column;
}
.woocommerce-account #customer_login .woocommerce-form-register > p:last-of-type {
  margin-top: auto;
  margin-bottom: 0;
}
.woocommerce-account #customer_login .woocommerce-form-register::after {
  content: "";
  display: block;
  flex: none;
  height: 26px;
}

/* ── Carrito y checkout: el envío no es gratis, es a convenir ───────────────
   El bloque de WooCommerce imprime "Gratis" cuando la tarifa vale 0, y no expone
   ningún filtro para ese texto: los filtros del checkout cubren ítems, cupones y el
   total, no el envío. Acá el flete se presupuesta y se cobra aparte, así que un
   "GRATIS" en grande promete algo que no es.

   Va en el child y no en el tema base porque es copy de ESTA tienda: otra puede
   cobrar el envío normalmente.

   El <strong> del importe existe SOLO cuando el costo es cero —un importe real se
   imprime sin él—, así que esto no puede tapar un precio de envío verdadero si
   alguna vez se cobra desde la web. */
.wc-block-components-totals-shipping .wc-block-components-totals-item__value > strong {
  display: none;
}
.wc-block-components-totals-shipping .wc-block-components-totals-item__value::after {
  content: "A convenir";
  text-transform: none;
}

/* En la lista de opciones del checkout la opción ya se llama "Envío a convenir",
   así que el "Gratis" que el bloque agrega al lado solo estorba. */
.wc-block-checkout__shipping-option--free {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÓVIL: que el banner de cookies no tape nada que se pueda tocar
   ═══════════════════════════════════════════════════════════════════════════
   Medido en 390×844 el 18/09/2026, con el banner en pantalla: ocupa de 707 a
   828 px y deja debajo, SIN PODER TOCARSE, el botón flotante de WhatsApp
   (778-828), el de volver arriba (726-776) y la barra de compra de la ficha
   (778-844). Comprobado con document.elementFromPoint: en los tres puntos el
   elemento de arriba era el banner, no el botón.

   ⚠️ Se resuelve SOLO con CSS, con :has() —que este tema hijo ya usa en las
   reglas de Mi Cuenta—, para no tocar cookie-consent.js: la clase
   `cookie-banner__accept` y la clave `pildoras_cookies_ok` quedan intactas, y
   de esas dos dependen las etiquetas de GTM (pixel, GA4 y Google Ads).

   La idea es una sola variable, --pil-piso: cuánto hay ocupado abajo en este
   momento. Las tres combinaciones (solo barra, solo banner, los dos) ya se
   ordenan solas por especificidad, así que no dependen del orden. */
:root {
  --pil-banner-h: 132px; /* 121 px medidos a 390; el margen cubre el texto en 3 renglones a 320 */
  --pil-sticky-h: 66px;  /* alto de la barra de compra de la ficha */
  --pil-sep: 12px;
  --pil-piso: 0px;
}
body:has(.sticky-cart.is-visible) { --pil-piso: var(--pil-sticky-h); }
body:has(#pildoras-cookie-banner.is-visible) { --pil-piso: calc(var(--pil-banner-h) + var(--pil-sep)); }
body:has(.sticky-cart.is-visible):has(#pildoras-cookie-banner.is-visible) {
  --pil-piso: calc(var(--pil-sticky-h) + var(--pil-banner-h) + var(--pil-sep));
}

/* El banner se apoya ARRIBA de la barra de compra en vez de taparla. Va en
   todos los anchos: la barra ocupa el ancho completo también en escritorio. */
body:has(.sticky-cart.is-visible) #pildoras-cookie-banner.is-visible {
  bottom: calc(var(--pil-sticky-h) + var(--pil-sep));
}

/* Los dos botones flotantes suben por encima de lo que haya abajo, conservando
   su orden (WhatsApp abajo, volver arriba encima). Solo en móvil: en escritorio
   el banner mide 680 px centrados y no llega a la esquina donde están. */
@media (max-width: 767px) {
  .btn-whatsapp { bottom: calc(16px + var(--pil-piso)); }
  .btn-to-top   { bottom: calc(78px + var(--pil-piso)); }
}

/* ── Ficha en móvil: que el precio se vea sin bajar ─────────────────────────
   La galería es un cuadrado (aspect-ratio: 1), así que a 390 px mide 354 y
   empuja el precio a 722, justo detrás del banner. Se le pone un techo y la
   foto pasa a mostrarse ENTERA (contain) en vez de recortada: con menos alto,
   recortar se come el producto. El placeholder de los productos sin foto sigue
   el mismo techo. */
@media (max-width: 767px) {
  .sp-gallery__main,
  .sp-gallery__placeholder {
    aspect-ratio: auto;
    height: 200px;
    max-height: 40vh;
  }
  .sp-gallery__main img { object-fit: contain; }
}

/* ── Modo pedido: avisos ────────────────────────────────────────────────────
   Van juntos con el bloque de funciones del mismo nombre (functions.php). El
   aviso del pedido tiene que leerse antes que los botones, así que lleva fondo;
   la aclaración de la ficha es al revés: acompaña, no interrumpe. */
.pildoras-aviso-pedido {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 4px solid var(--green-accent, #388e3c);
  border-radius: var(--radius-sm, 8px);
  background: var(--gray-50, #f8fafc);
  color: var(--gray-800, #1e293b);
  font-size: .92rem;
  line-height: 1.55;
}
.pildoras-micro-pedido {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  color: var(--gray-500, #64748b);
  font-size: .82rem;
  line-height: 1.45;
}