/* Bambini — componentes de la identidad (botones, tarjetas de producto, badges) */

/* Foco: quitar el recuadro negro al hacer click (mouse), pero mantener un
   anillo accesible al navegar con teclado (:focus-visible). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
.wp-block-button__link:focus:not(:focus-visible){outline:none !important;box-shadow:none}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid #B0463E;outline-offset:2px;border-radius:6px}

/* WooCommerce notices ("X se ha añadido a tu carrito"): el bloque los enfoca
   con tabindex=-1 al aparecer, lo que dispara el anillo bordo de :focus-visible.
   Lo quitamos para estos avisos (no es navegación por teclado real). */
.woocommerce-message:focus,.woocommerce-info:focus,.woocommerce-error:focus,
.woocommerce-message:focus-visible,.woocommerce-info:focus-visible,.woocommerce-error:focus-visible,
.wc-block-store-notice:focus,.wc-block-store-notice:focus-visible,
.woocommerce-notices-wrapper [tabindex]:focus,.woocommerce-notices-wrapper [tabindex]:focus-visible{
  outline:none !important;box-shadow:none !important;
}

/* Notice: contenerlo al ancho del contenido y darle la identidad (no full-bleed). */
.woocommerce-notices-wrapper{max-width:1180px;margin:0 auto;padding:0 24px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-radius:var(--b-radius);border:1px solid var(--b-border);border-left:4px solid var(--b-sage);
  background:#F2F7EF;color:var(--b-ink);font-family:'Nunito Sans',system-ui,sans-serif;
  box-shadow:var(--b-shadow);padding:14px 18px;display:flex;align-items:center;gap:10px;
}
.woocommerce-info{border-left-color:var(--b-teal);background:#EFF5F6}
.woocommerce-error{border-left-color:var(--b-terra);background:var(--b-terra-50)}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{position:static;margin:0;top:auto;left:auto}
.woocommerce-message .button,.woocommerce-info .button{
  margin-left:auto;padding:.55em 1.2em;font-size:14px;flex:none;
}
@media(max-width:640px){.woocommerce-notices-wrapper{padding:0 16px}
  .woocommerce-message,.woocommerce-info,.woocommerce-error{flex-wrap:wrap}
  .woocommerce-message .button,.woocommerce-info .button{margin-left:0;width:100%;text-align:center}}

/* Evitar scroll horizontal del truco de ancho completo (100vw + scrollbar).
   overflow-x:clip no crea contexto de scroll, así no rompe position:sticky del header. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

:root{
  --b-cream:#FBF6EE; --b-cream-2:#F4EADB; --b-surface:#FFFFFF;
  --b-ink:#2C2622; --b-ink-muted:#8A7E73; --b-border:#EAE0D4;
  --b-terra:#B0463E; --b-terra-700:#973830; --b-terra-50:#F4E2DC;
  --b-rose:#E8A7A0; --b-teal:#8FB8BE; --b-butter:#F0C964; --b-sage:#9CB29A;
  --b-radius:16px; --b-radius-sm:10px; --b-pill:999px;
  --b-shadow:0 10px 30px -14px rgba(44,38,34,.28);
}

/* ===== Topbar de anuncio ===== */
.bambini-topbar{
  background:var(--b-ink); color:#fff; text-align:center;
  font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:13.5px; padding:9px 12px;
}
.bambini-topbar i{vertical-align:-2px; margin-right:4px}

/* ===== Botones (refuerza theme.json en botones WooCommerce) ===== */
.wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button{
  background:var(--b-terra); color:#fff; border:none;
  border-radius:var(--b-pill); font-family:'Fraunces',Georgia,serif; font-weight:600;
  padding:.8em 1.6em; transition:.18s ease;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover{
  background:var(--b-terra-700); transform:translateY(-1px);
}
.is-style-outline .wp-block-button__link{
  background:transparent; color:var(--b-terra); border:1.5px solid var(--b-terra);
}
.is-style-outline .wp-block-button__link:hover{ background:var(--b-terra-50); }

/* ===== Badges ===== */
.b-badge{font-family:'Fraunces';font-weight:600;font-size:12px;padding:5px 11px;border-radius:var(--b-pill);display:inline-flex;align-items:center;gap:4px}
.b-badge.is-new{background:var(--b-sage);color:#22301f}
.b-badge.is-sale{background:var(--b-terra);color:#fff}
.b-badge.is-last{background:var(--b-butter);color:#4a3a10}

/* ===== Tarjeta de producto WooCommerce ===== */
.woocommerce ul.products li.product,
.wc-block-grid__product{
  background:var(--b-surface); border:1px solid var(--b-border);
  border-radius:var(--b-radius); overflow:hidden; transition:.2s ease; padding-bottom:14px;
}
.woocommerce ul.products li.product:hover{ box-shadow:var(--b-shadow); transform:translateY(-4px); }
.woocommerce ul.products li.product a img{ border-radius:0; margin-bottom:10px; aspect-ratio:3/4; object-fit:cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Fraunces';font-weight:500;font-size:16.5px;padding:0 16px;
}
.woocommerce ul.products li.product .price{ padding:0 16px; color:var(--b-ink); font-weight:700; }
.woocommerce ul.products li.product .price del{ color:var(--b-ink-muted); font-weight:400; }
.woocommerce ul.products li.product .button{ margin:10px 16px 0; display:block; text-align:center; }

/* ===== Onda redondeada general ===== */
.wp-block-image img, .wc-block-grid__product-image img{ border-radius:var(--b-radius-sm); }

/* ===== Inputs / formularios ===== */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{
  border:1.5px solid var(--b-border); border-radius:var(--b-radius-sm);
  padding:12px 14px; font-family:inherit;
}
.woocommerce form .form-row input.input-text:focus,
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--b-terra); box-shadow:0 0 0 4px var(--b-terra-50);
}

/* ===== Helpers de íconos Phosphor ===== */
.b-ico-terra{color:var(--b-terra)}
.b-ico-lg{font-size:28px}

/* Quitar subrayado en links de íconos sociales (footer + drawer) */
.bf-social a,.bf-social a:hover,
.bh-drawer-foot a,.bh-drawer-foot a:hover{text-decoration:none !important}

/* =========================================================
   RESPONSIVE GLOBAL — tablet y mobile
   ========================================================= */

/* TABLET (≤1024px) */
@media (max-width:1024px){
  .bh-wrap,.bf-wrap,.bambini-contacto,.bambini-sizeguide,.bambini-ayuda,.bambini-cambios{padding-left:20px;padding-right:20px}
  /* home: hero a 2 col más ajustado */
  .bh-hero{gap:32px}
  .bh-cats{grid-template-columns:repeat(3,1fr)}
  /* productos WooCommerce: 3 por fila */
  .woocommerce ul.products[class*="columns-"]{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .woocommerce ul.products li.product{width:auto !important;margin:0 !important;float:none !important}
}

/* TABLET CHICA (≤900px) */
@media (max-width:900px){
  .bh-hero{grid-template-columns:1fr !important;text-align:center}
  .bh-hero .bh-pill-rating,.bh-hero .bh-hero-mini{justify-content:center}
  .bh-hero p{margin-left:auto;margin-right:auto}
  .bh-art{max-width:520px;margin:0 auto}
  .bh-cats{grid-template-columns:repeat(3,1fr)}
  .bh-grid{grid-template-columns:repeat(3,1fr)}
  .bh-trust{grid-template-columns:1fr 1fr}
  /* footer 2 col */
  .bf-grid{grid-template-columns:1fr 1fr !important}
}

/* MOBILE (≤640px) */
@media (max-width:640px){
  body{font-size:15.5px}
  .bh-wrap,.bf-wrap{padding-left:16px;padding-right:16px}
  /* secciones más compactas */
  .bh-sec{padding:36px 0}
  .bh-hero{padding:32px 0 24px}
  .bh-hero h1{font-size:clamp(30px,8vw,40px)}
  .bh-head h2,.bh-rev h2{font-size:24px}
  /* categorías 2 por fila */
  .bh-cats{grid-template-columns:repeat(2,1fr);gap:10px}
  /* productos 2 por fila (home + tienda) */
  .bh-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .woocommerce ul.products[class*="columns-"]{grid-template-columns:repeat(2,1fr) !important;gap:12px}
  /* trust 1 col */
  .bh-trust{grid-template-columns:1fr}
  /* footer 1 col centrado */
  .bf-grid{grid-template-columns:1fr !important;text-align:center;gap:24px}
  .bf-social,.bf-pay{justify-content:center}
  .bf-contact p{justify-content:center}
  /* instagram grid 3 col */
  .bh-ig-grid{grid-template-columns:repeat(3,1fr) !important}
  .bh-ig-head{flex-direction:column;align-items:flex-start;gap:12px}
  /* proof band */
  .bh-proof{padding:28px 18px}
  .bh-proof .big{font-size:24px}
  /* títulos de página */
  .wp-block-post-title{font-size:clamp(1.9rem,7vw,2.4rem) !important}
}

/* MOBILE CHICO (≤400px) */
@media (max-width:400px){
  .bh-cats{grid-template-columns:repeat(2,1fr)}
  .bh-grid,.woocommerce ul.products[class*="columns-"]{gap:10px}
}

/* Toques: targets cómodos en mobile */
@media (max-width:900px){
  .wp-block-button__link,.woocommerce a.button,.woocommerce button.button,.b-badge{min-height:44px;display:inline-flex;align-items:center}
}

/* ===== Loop clásico (relacionados / upsells) en GRID también en desktop =====
   WooCommerce los maqueta con floats → se desalinean si las tarjetas tienen
   distinta altura. Forzamos grid (las media queries de abajo ajustan a 3/2/1). */
.woocommerce ul.products[class*="columns-"]{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;padding:0;list-style:none;
}
.woocommerce ul.products.columns-3{grid-template-columns:repeat(3,1fr)}
.woocommerce ul.products.columns-2{grid-template-columns:repeat(2,1fr)}
.woocommerce ul.products.columns-1{grid-template-columns:1fr}
.woocommerce ul.products li.product{width:auto !important;margin:0 !important;float:none !important}
.woocommerce .related.products,.woocommerce .upsells.products{clear:both}

/* ===== Intro/subtexto de páginas: consistente (centrado, constreñido, muted) =====
   El template usa post-content full-width; las páginas con wrapper propio
   (.bambini-ayuda/.bambini-cambios) ya centran su intro. Acá unificamos el párrafo
   suelto (Contacto) y el lead de la guía para que todos los subtextos matcheen. */
.wp-block-post-content>p:first-of-type{
  max-width:780px;margin:0 auto 12px;text-align:center;
  color:var(--b-ink-muted);font-size:18px;line-height:1.6;
}
.bambini-sizeguide .bsg-lead{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}

/* ===== Resultados de búsqueda en grid (plantilla genérica de búsqueda) ===== */
.search-results .wp-block-post-template{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.search-results .wp-block-post-template>li{margin:0}
.search-results .wp-block-post-date,.search-results .wp-block-post-excerpt{display:none}
.search-results .wp-block-post-title{font-family:'Fraunces',Georgia,serif;font-size:17px;margin-top:10px}
.search-results .wp-block-post-title a{color:var(--b-ink);text-decoration:none}
.search-results .wp-block-post-title a:hover{color:var(--b-terra)}
.search-results .wp-block-post-featured-image img{border-radius:var(--b-radius-sm);aspect-ratio:3/4;object-fit:cover}
@media(max-width:900px){.search-results .wp-block-post-template{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.search-results .wp-block-post-template{grid-template-columns:1fr}}

/* ===== Mi cuenta (WooCommerce My Account) ===== */
.woocommerce-account .woocommerce{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;
}
.woocommerce-account .woocommerce>.woocommerce-notices-wrapper{flex:1 0 100%}
.woocommerce-account .woocommerce-MyAccount-navigation{flex:0 0 240px;width:240px;float:none;margin:0}
.woocommerce-account .woocommerce-MyAccount-content{flex:1 1 0;min-width:0;float:none;width:auto;margin:0;font-size:15.5px}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:0;background:#fff;
  border:1px solid var(--b-border);border-radius:var(--b-radius);overflow:hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{margin:0;border-bottom:1px solid var(--b-border)}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:none}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:13px 18px;color:var(--b-ink);text-decoration:none;
  font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:15px;transition:.15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--b-cream);color:var(--b-terra)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--b-terra-50);color:var(--b-terra);font-weight:600}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--b-ink-muted)}
.woocommerce-account .woocommerce-MyAccount-content a{color:var(--b-terra)}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address{margin-top:14px}
@media(max-width:782px){
  .woocommerce-account .woocommerce{flex-direction:column;gap:20px;padding:0 16px}
  .woocommerce-account .woocommerce-MyAccount-navigation{flex:none;width:100%}
}

/* Logo en el header minimalista del checkout (override de checkout-header.html) */
.bambini-checkout-logo{display:inline-flex;text-decoration:none}
.bambini-checkout-logo img{height:34px;width:auto;display:block}

/* =========================================================
   BOTÓN FLOTANTE WHATSAPP (.bw-*)
   ========================================================= */
.bw-float{position:fixed;right:22px;bottom:22px;z-index:9999;font-family:'Nunito Sans',system-ui,sans-serif}

/* Botón redondo: logo verde con anillo blanco */
.bw-btn{
  position:relative;width:60px;height:60px;border-radius:50%;
  background:#25D366;border:3px solid #fff;color:#fff;cursor:pointer;
  display:grid;place-items:center;font-size:33px;line-height:0;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.6),0 4px 12px rgba(44,38,34,.18);
  transition:transform .18s ease,box-shadow .18s ease;
}
.bw-btn:hover{transform:scale(1.06)}
.bw-btn:active{transform:scale(.96)}
.bw-btn i{pointer-events:none}
/* Pulso suave para llamar la atención */
.bw-btn::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid #25D366;opacity:.55;animation:bwPulse 2.4s ease-out infinite;pointer-events:none}
@keyframes bwPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.bw-float.is-open .bw-btn::before{display:none}

/* Badge "1" */
.bw-badge{
  position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;
  background:var(--b-terra);color:#fff;border-radius:999px;border:2px solid #fff;
  font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1;
}
.bw-float.is-open .bw-badge{display:none}

/* Burbuja popup */
.bw-pop{
  position:absolute;right:4px;bottom:80px;width:290px;max-width:78vw;
  background:#fff;border-radius:18px;border:1px solid var(--b-border);
  box-shadow:0 18px 44px -16px rgba(44,38,34,.4);
  padding:16px 16px 18px;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transform-origin:bottom right;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.bw-float.is-open .bw-pop{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
/* Cola apuntando al botón */
.bw-pop::after{
  content:"";position:absolute;bottom:-9px;right:26px;width:18px;height:18px;
  background:#fff;border-right:1px solid var(--b-border);border-bottom:1px solid var(--b-border);
  transform:rotate(45deg);border-bottom-right-radius:3px;
}

.bw-pop-close{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:transparent;border:none;color:var(--b-ink-muted);cursor:pointer;
  display:grid;place-items:center;font-size:16px;transition:.15s ease;
}
.bw-pop-close:hover{background:var(--b-cream-2);color:var(--b-ink)}

.bw-pop-head{display:flex;align-items:center;gap:10px;padding-right:24px;margin-bottom:10px}
.bw-pop-ava{
  width:40px;height:40px;flex:none;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;font-size:24px;
}
.bw-pop-id{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;gap:3px}
.bw-pop-logo{height:22px !important;width:auto !important;max-width:140px;object-fit:contain;flex:none;align-self:flex-start;display:block}
.bw-pop-id small{font-size:11.5px;color:var(--b-ink-muted);display:flex;align-items:center;gap:5px}
.bw-dot{width:7px;height:7px;border-radius:50%;background:#25D366;display:inline-block}

.bw-pop-msg{
  background:var(--b-cream);border-radius:12px;border-top-left-radius:3px;
  padding:11px 13px;font-size:13.5px;color:var(--b-ink);line-height:1.45;margin:0 0 14px;
}
.bw-pop-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#25D366;color:#fff;text-decoration:none;
  border-radius:999px;padding:11px 16px;font-family:'Fraunces',Georgia,serif;
  font-weight:600;font-size:15px;transition:.18s ease;
}
.bw-pop-cta:hover{background:#1ebe5a;transform:translateY(-1px);color:#fff;text-decoration:none}
.bw-pop-cta i{font-size:20px}

@media (max-width:640px){
  .bw-float{right:16px;bottom:16px}
  .bw-btn{width:56px;height:56px;font-size:30px}
  .bw-pop{bottom:74px}
}