/* ═══════════════════════════════════════════════════════════
   BEBREEZE v3 — FUCHSIA LUXE
   Color base: #FB5FAB · Cursor: Cartera SVG
   Cormorant Garamond × Jost · Premium Feminine Editorial
   ═══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ───────────────────────────────────────── */
:root {
  /* ✦ PALETA PRINCIPAL #FB5FAB ✦ */
  --pink:         #FB5FAB;   /* fuchsia principal BEBREEZE */
  --pink-glow:    #FC7DBB;   /* pink más suave / hover */
  --pink-light:   #FDD5EC;   /* pink claro para fondos */
  --pink-pale:    #FEF0F8;   /* fondo principal de la web */
  --pink-blush:   #FFF5FB;   /* blanco rosado muy suave */
  --pink-deep:    #D43A88;   /* pink oscuro / texto activo */
  --pink-dark:    #9C1B5E;   /* dark pink para texto */
  --pink-mauve:   #6B1040;   /* mauve muy oscuro */
  --pink-cream:   #FFFAFE;   /* blanco con tinte rosado */

  /* Neutrales cálidos */
  --warm-white:   #FFFCFE;
  --ivory:        #FFF8FD;
  --linen:        #F5E8F0;
  --taupe:        #D4A8C0;
  --warm-gray:    #A8789A;
  --warm-mid:     #7A4A6A;
  --dark:         #1A0A12;   /* negro con tinte rosa */
  --charcoal:     #2E1424;

  /* Tipografías */
  --ff-display: 'Cormorant Garamond', 'Georgia', serif;
  --ff-body:    'Jost', -apple-system, sans-serif;

  /* Spacing */
  --sp-xs:4px; --sp-sm:8px; --sp-md:16px;
  --sp-lg:24px; --sp-xl:40px; --sp-2xl:64px; --sp-3xl:96px;

  /* Layout */
  --max-w: 1440px;
  --gutter: clamp(20px, 4vw, 64px);

  /* Easing */
  --ease-spring: cubic-bezier(0.16,1,0.3,1);
  --ease-smooth: cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-sharp:  cubic-bezier(0.4,0,0.2,1);

  /* Shadows */
  --shadow-pink: 0 4px 24px rgba(251,95,171,0.18);
  --shadow-deep: 0 12px 48px rgba(26,10,18,0.16);
  --shadow-card: 0 2px 20px rgba(251,95,171,0.10);

  --ann-h: 36px; --hdr-h: 68px; --top: 104px;
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{
  font-family:var(--ff-body);
  background:var(--pink-pale);
  color:var(--dark);
  overflow-x:hidden;
}
img{display:block;width:100%;object-fit:cover;}
a{text-decoration:none;color:inherit;}
button{font-family:var(--ff-body);border:none;background:none;}
ul{list-style:none;}

/* ── CUSTOM CURSOR: CARTERA BEBREEZE ─────────────────────── */
/*
  Cursor HD en forma de cartera mini.
  Se renderiza como SVG nativo — HD en cualquier pantalla.
  La cartera sigue el mouse con un pequeño brillo de seguimiento.
*/

/* Cursor nativo: mantenemos la flecha nativa junto a la cartera */
@media (hover: hover) and (pointer: fine) {
  /* Solo ocultamos en los elementos donde la cartera funciona */
  /* Cursor default = flecha del sistema. La cartera se superpone arriba */
  html, body {
    cursor: default !important;
  }
  a, button, .prod-card, .coll-card, [role="button"] {
    cursor: pointer !important;
  }
}

/* Cursor principal: cartera SVG */
#bb-cursor {
  position:fixed; pointer-events:none; z-index:99999; top:0; left:0;
  width:36px; height:36px; transform:translate(-50%,-100%); will-change:left,top;
}
#bb-cursor svg{ width:100%; height:100%; }
#bb-cursor svg {
  width: 36px;
  height: 36px;
  display: block;
}

/* Cursor trail — OCULTO. Solo se usa la cartera + flecha nativa */
#bb-cursor-trail {
  display: none !important;
}
body.cur-hover #bb-cursor {
  filter: drop-shadow(0 4px 14px rgba(251,95,171,0.7));
  transform: translate(-4px,-28px) scale(1.12);
}

@media (hover: none), (pointer: coarse) {
  #bb-cursor, #bb-cursor-trail { display: none; }
  html, body, a, button { cursor: auto !important; }
}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--pink-light);}
::-webkit-scrollbar-thumb{background:var(--pink);border-radius:2px;}

/* ── LOADER ──────────────────────────────────────────────── */
#bb-loader {
  position:fixed;inset:0;background:var(--dark);z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  transition:opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}
#bb-loader.out{opacity:0;transform:scale(1.04);pointer-events:none;}
.loader-logo{
  font-family:var(--ff-display);font-size:3rem;font-weight:300;
  letter-spacing:0.45em;text-transform:uppercase;color:var(--pink-cream);
  animation:breathe 1.8s ease-in-out infinite;
}
.loader-sub{
  font-size:0.55rem;font-weight:300;letter-spacing:0.42em;
  text-transform:uppercase;color:var(--pink);
}
.loader-bar-wrap{width:130px;height:1px;background:rgba(251,95,171,0.15);overflow:hidden;position:relative;}
.loader-bar{
  position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);
  animation:loadBar 1.6s var(--ease-smooth) forwards;
}
/* Cartera animada en el loader */
.loader-bag{
  width:48px;height:48px;margin-bottom:8px;
  animation:loaderBagSway 2s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:0.4;}50%{opacity:1;}}
@keyframes loadBar{to{left:0;}}
@keyframes loaderBagSway{
  0%,100%{transform:rotate(-6deg);}
  50%{transform:rotate(6deg);}
}

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.sr{opacity:0;transform:translateY(26px);transition:opacity 0.9s var(--ease-spring),transform 0.9s var(--ease-spring);}
.sr.in{opacity:1;transform:none;}
.sr-l{opacity:0;transform:translateX(-22px);transition:opacity 0.9s var(--ease-spring),transform 0.9s var(--ease-spring);}
.sr-l.in{opacity:1;transform:none;}
.sr-r{opacity:0;transform:translateX(22px);transition:opacity 0.9s var(--ease-spring),transform 0.9s var(--ease-spring);}
.sr-r.in{opacity:1;transform:none;}
.d1{transition-delay:0.07s}.d2{transition-delay:0.14s}.d3{transition-delay:0.21s}
.d4{transition-delay:0.28s}.d5{transition-delay:0.35s}.d6{transition-delay:0.42s}

/* ── UTILITY ─────────────────────────────────────────────── */
.label{
  font-size:0.58rem;font-weight:400;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--pink);
}
.display{
  font-family:var(--ff-display);
  font-size:clamp(2rem,4.2vw,4rem);
  font-weight:300;line-height:1.07;letter-spacing:-0.01em;
}
.display em{font-style:italic;color:var(--pink);}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff-body);font-size:0.64rem;font-weight:400;
  letter-spacing:0.22em;text-transform:uppercase;
  padding:15px 36px;transition:all 0.35s var(--ease-smooth);
  position:relative;overflow:hidden;
}
.btn-pink{background:var(--pink);color:var(--warm-white);border:1px solid var(--pink);}
.btn-pink:hover{background:var(--pink-deep);border-color:var(--pink-deep);}
.btn-dark{background:var(--dark);color:var(--pink-cream);border:1px solid var(--dark);}
.btn-dark:hover{background:var(--charcoal);}
.btn-outline-white{background:transparent;color:var(--pink-cream);border:1px solid rgba(255,252,254,0.55);}
.btn-outline-white:hover{border-color:var(--pink-cream);background:rgba(255,252,254,0.1);}
.btn-outline-pink{background:transparent;color:var(--pink);border:1px solid var(--pink);}
.btn-outline-pink:hover{background:var(--pink);color:var(--warm-white);}
.btn .arr{transition:transform 0.35s var(--ease-spring);}
.btn:hover .arr{transform:translateX(6px);}

.link-ul{
  font-size:0.64rem;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--dark);border-bottom:1px solid currentColor;padding-bottom:2px;
  display:inline-flex;align-items:center;gap:8px;
  transition:color 0.25s,gap 0.3s var(--ease-spring);
}
.link-ul:hover{color:var(--pink-deep);gap:13px;}

/* ── ANNOUNCEMENT BAR ────────────────────────────────────── */
#bb-announce{
  position:fixed; top:0; left:0; right:0; z-index:9000;
  height:var(--ann-h); background:#FB5FAB; color:#ffffff;
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--gutter); font-size:0.68rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap; overflow:hidden;
}
#bb-announce a{ color:#ffffff; text-decoration:underline; text-underline-offset:3px; font-weight:700; transition:opacity 0.2s; }
#bb-announce a:hover{ opacity:0.85; }
.sep{margin:0 14px;opacity:0.5;}

/* ── HEADER ──────────────────────────────────────────────── */
#bb-header{
  position:fixed; top:var(--ann-h); left:0; right:0; z-index:8000;
  height:var(--hdr-h); background:rgba(255,248,253,0.97);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(251,95,171,0.12); display:flex; align-items:center;
  transition:box-shadow 0.3s, background 0.3s;
}
/* .pinned sólo mejora visualmente la sombra — NO mueve el header hacia arriba */
#bb-header.pinned{
  background:rgba(255,248,253,0.99);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 2px 24px rgba(26,10,18,0.12);
}
.hdr-inner{
  width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}

/* Left nav */
.hdr-left{display:flex;align-items:center;gap:30px;}
.hdr-link{
  font-size:0.64rem;font-weight:400;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--dark);position:relative;padding-bottom:2px;transition:color 0.25s;
}
.hdr-link::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:0;height:1.5px;background:var(--pink);
  transition:width 0.38s var(--ease-smooth);
}
.hdr-link:hover{color:var(--pink-deep);}
.hdr-link:hover::after,.hdr-link.active::after{width:100%;}

/* Dropdown */
/* ── DROPDOWN ─────────────────────────────────────────────── */
.hdr-drop-wrap{position:relative;}
.hdr-drop{
  position:absolute;top:calc(100% + 8px);left:0;
  transform:translateY(-6px);
  background:var(--warm-white);
  border:1px solid var(--pink-light);
  box-shadow:var(--shadow-pink);
  min-width:215px;padding:7px 0;z-index:8500;
  opacity:0;pointer-events:none;
  transition:opacity 0.22s,transform 0.22s var(--ease-smooth);
}
/* Puente invisible que llena el gap entre el link y el dropdown
   — evita que el hover se interrumpa al cruzar el espacio */
.hdr-drop::before{
  content:'';
  position:absolute;
  top:-18px;
  left:0;
  right:0;
  height:18px;
  background:transparent;
}
.hdr-drop-wrap:hover .hdr-drop,
.hdr-drop-wrap:focus-within .hdr-drop{
  opacity:1;pointer-events:all;transform:translateY(0);
}
.drop-section{
  padding:8px 18px 4px;font-size:0.52rem;font-weight:400;
  letter-spacing:0.24em;text-transform:uppercase;color:var(--pink);
  border-bottom:1px solid var(--pink-light);margin-bottom:4px;
}
.hdr-drop a{
  display:block;padding:9px 18px;
  font-size:0.73rem;font-weight:300;color:var(--dark);
  transition:background 0.2s,padding-left 0.25s,color 0.2s;
}
.hdr-drop a:hover{background:var(--pink-pale);padding-left:24px;color:var(--pink-deep);}

/* Logo */
.hdr-logo{
  font-family:var(--ff-display);
  font-size:1.75rem;font-weight:300;letter-spacing:0.38em;
  text-transform:uppercase;color:var(--dark);text-align:center;line-height:1;
}
.hdr-logo-sub{
  display:block;font-family:var(--ff-body);font-size:0.56rem;font-weight:500;
  letter-spacing:0.38em;color:#888888;opacity:1;margin-top:4px;text-transform:uppercase;
}

/* Right */
.hdr-right{display:flex;align-items:center;justify-content:flex-end;gap:4px;}
.hdr-nav-right{display:flex;align-items:center;gap:28px;margin-right:10px;}
.hdr-icon{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:var(--dark);transition:color 0.25s;position:relative;
}
.hdr-icon:hover{color:var(--pink);}
.hdr-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;}
.cart-pip{
  position:absolute;top:6px;right:5px;
  width:16px;height:16px;border-radius:50%;
  background:var(--pink);color:var(--warm-white);
  font-size:0.47rem;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--pink-pale);
}

/* Burger */
.hdr-burger{
  display:none;flex-direction:column;gap:5px;
  padding:8px;width:40px;height:40px;justify-content:center;
}
.hdr-burger span{
  display:block;width:20px;height:1px;background:var(--dark);
  transition:transform 0.32s,opacity 0.32s;transform-origin:center;
}
.hdr-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hdr-burger.open span:nth-child(2){opacity:0;}
.hdr-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ═══ MENÚ MÓVIL — Premium Redesign ═══════════════════════════
   Elegante, minimalista, tipografía de marca, blur backdrop      */
.mobile-menu{
  position:fixed;inset:0;z-index:9100;
  background:rgba(26,10,18,0.97);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  transform:translateX(100%);
  transition:transform 0.48s cubic-bezier(0.16,1,0.3,1);
  display:flex;flex-direction:column;
  padding:88px 32px 44px;
  overflow-y:auto;overflow-x:hidden;
  /* subtle grain overlay */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E"),
    none;
  background-color:rgba(26,10,18,0.97);
}
.mobile-menu.open{transform:none;}

/* Decorative accent line */
.mobile-menu::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(251,95,171,.5),transparent);
}

/* ── Nav links ── */
.mob-link{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;
  border-bottom:1px solid rgba(251,95,171,0.10);
  font-family:var(--ff-body,sans-serif);
  font-size:clamp(13px,3.8vw,16px);
  font-style:normal;font-weight:400;
  letter-spacing:.10em;text-transform:uppercase;
  color:rgba(255,240,248,0.82);
  text-decoration:none;
  transition:color .22s ease, padding-left .28s ease, border-color .22s;
  line-height:1.4;
}
.mob-link span{
  font-size:.7em;opacity:.45;transition:opacity .22s,transform .22s;
  display:inline-block;
}
.mob-link:hover,
.mob-link:focus-visible{
  color:#FFFCFE;
  padding-left:8px;
  border-bottom-color:rgba(251,95,171,.3);
}
.mob-link:hover span{ opacity:.9; transform:translateX(3px); }

/* Highlighted link (e.g. Catálogo) */
.mob-link.is-highlight{
  color:var(--pink);
  font-weight:600;
}

/* ── Footer links ── */
.mob-footer{
  display:flex;gap:16px 22px;flex-wrap:wrap;
  padding-top:28px;margin-top:auto;
  border-top:1px solid rgba(251,95,171,.08);
}
.mob-footer a{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,200,230,.38);font-weight:600;
  text-decoration:none;transition:color .2s;
}
.mob-footer a:hover{color:var(--pink);}

/* ── Mobile: ensure no overflow ── */
@media(max-width:480px){
  .mobile-menu{padding:80px 24px 40px;}
  .mob-link{font-size:clamp(13px,4vw,15px);padding:13px 0;}
  .mob-logo-wrap{padding:18px 20px 12px;}
  .mob-logo-real{height:24px;}
}
@media(max-width:320px){
  .mob-link{font-size:13px;letter-spacing:.07em;}
}

/* ── HERO SECTION ────────────────────────────────────────── */
/*
  ┌─────────────────────────────────────────────┐
  │  WORDPRESS: Cambiar imagen de fondo del Hero │
  │  Elementor → Clic en sección → Estilo →     │
  │  Fondo → Imagen → Biblioteca de Medios       │
  │  También puedes poner un VIDEO:              │
  │  Fondo → Video → URL de YouTube o .mp4      │
  └─────────────────────────────────────────────┘
*/
#bb-hero{
  position:relative;height:100svh;min-height:640px;
  display:flex;align-items:flex-end;overflow:hidden;
  padding-top:var(--top);
}

/* Fondo actual: gradiente de marca #FB5FAB
   En WordPress: reemplazar con imagen real de producto/modelo */
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(251,95,171,0.6) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(212,58,136,0.5) 0%, transparent 50%),
    linear-gradient(145deg,
      #FF9ED0 0%,
      #FB5FAB 22%,
      #D43A88 45%,
      #9C1B5E 68%,
      #4A0A2E 88%,
      #1A0A12 100%
    );
  transform:scale(1.04);
  transition:transform 14s ease-out;
}
.hero-bg.anim{transform:scale(1);}

/* Velo cinematográfico */
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(26,10,18,0.75) 0%,rgba(26,10,18,0.18) 40%,transparent 68%),
    radial-gradient(ellipse at 70% 40%,transparent 40%,rgba(26,10,18,0.22) 100%);
}

/* Grain texture */
.hero-grain{
  position:absolute;inset:0;opacity:0.035;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Patrón decorativo de puntos */
.hero-dots{
  position:absolute;right:6%;top:18%;
  width:180px;height:220px;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,200,230,0.28) 1.5px,transparent 1.5px);
  background-size:18px 18px;
}

/* Línea vertical decorativa */
.hero-line{
  position:absolute;width:1px;top:0;bottom:0;right:26%;
  background:linear-gradient(to bottom,transparent,rgba(255,200,230,0.14) 30%,rgba(255,200,230,0.14) 70%,transparent);
  pointer-events:none;
}

/* Contenido */
.hero-content{
  position:relative;z-index:10;
  padding:0 var(--gutter) clamp(56px,8vh,100px);
  max-width:var(--max-w);margin:0 auto;width:100%;
}
.hero-eyebrow{
  font-size:0.6rem;font-weight:300;letter-spacing:0.34em;text-transform:uppercase;
  color:rgba(255,200,230,0.72);margin-bottom:18px;
  opacity:0;animation:fadeUp 0.9s var(--ease-spring) 0.3s forwards;
}
.hero-h1{
  font-family:var(--ff-display);
  font-size:clamp(3.8rem,10.5vw,10rem);
  font-weight:300;line-height:0.91;letter-spacing:-0.025em;
  color:var(--pink-cream);max-width:880px;margin-bottom:28px;
  opacity:0;animation:fadeUp 1.1s var(--ease-spring) 0.5s forwards;
}
.hero-h1 em{font-style:italic;color:#FFB8DA;}
.hero-sub{
  font-size:clamp(0.82rem,1.2vw,0.96rem);font-weight:300;line-height:1.9;
  color:rgba(255,200,230,0.72);max-width:350px;margin-bottom:40px;letter-spacing:0.03em;
  opacity:0;animation:fadeUp 0.9s var(--ease-spring) 0.7s forwards;
}
.hero-ctas{
  display:flex;gap:13px;flex-wrap:wrap;
  opacity:0;animation:fadeUp 0.9s var(--ease-spring) 0.9s forwards;
}

/* Badge flotante */
.hero-badge{
  position:absolute;right:var(--gutter);top:clamp(95px,13vh,145px);z-index:10;
  background:linear-gradient(145deg,#FF6B9D,#FB5FAB 60%,#D43A88);
  backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,0.28);border-radius:50%;
  width:96px;height:96px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#fff;text-align:center;
  box-shadow:0 8px 32px rgba(251,95,171,0.45),0 2px 8px rgba(26,10,18,0.3);
  opacity:0;animation:fadeIn 1s var(--ease-spring) 1.3s forwards;
}
.badge-num{font-family:var(--ff-display);font-size:1.6rem;font-style:italic;line-height:1;font-weight:500;color:#fff;}
.badge-txt{font-size:0.44rem;letter-spacing:0.16em;text-transform:uppercase;opacity:0.9;color:#FFE0F0;}

/* Scroll indicator */
.hero-scroll{
  position:absolute;bottom:clamp(36px,5vh,58px);right:var(--gutter);z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;animation:fadeIn 1s var(--ease-spring) 1.7s forwards;
}
.scroll-line{width:1px;height:52px;background:rgba(255,200,230,0.2);overflow:hidden;position:relative;}
.scroll-line::after{
  content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:rgba(255,200,230,0.8);animation:scrollDrop 2.5s var(--ease-smooth) 2s infinite;
}
.scroll-txt{font-size:0.5rem;letter-spacing:0.26em;text-transform:uppercase;color:rgba(255,200,230,0.38);writing-mode:vertical-rl;}

@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes scrollDrop{from{top:-100%;}to{top:100%;}}

/* ── MARQUEE ─────────────────────────────────────────────── */
.bb-marquee{overflow:hidden;background:#FB5FAB;padding:0;}
.marquee-track{display:flex;width:max-content;animation:marquee 28s linear infinite;}
.marquee-track:hover{animation-play-state:paused;}
.marquee-item{
  display:flex;align-items:center;gap:22px;padding:0 28px;
  white-space:nowrap;font-size:0.68rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:#ffffff;
  height:var(--ann-h);
}
.marquee-item a{color:#ffffff;text-decoration:underline;font-weight:700;}
.marquee-gem{width:5px;height:5px;background:#ffffff;transform:rotate(45deg);flex-shrink:0;opacity:0.7;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ── SECTION SHELL ───────────────────────────────────────── */
.bb-section{padding:clamp(64px,9vw,120px) var(--gutter);max-width:var(--max-w);margin:0 auto;}
.bb-full{padding:0;max-width:none;}
.section-hdr{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:clamp(34px,5vw,64px);gap:20px;flex-wrap:wrap;
}
.section-hdr-l{display:flex;flex-direction:column;gap:11px;}

/* ── GRADIENT PLACEHOLDERS (reemplazar con imágenes reales) ─ */
/*
  ┌──────────────────────────────────────────────────────┐
  │  TODOS ESTOS GRADIENTES SON PLACEHOLDERS.            │
  │  En WordPress + Elementor:                           │
  │  → Para tarjetas: doble clic en imagen → Cambiar     │
  │  → Para fondos de sección: Estilo → Fondo → Imagen   │
  │  → Para productos: WooCommerce → Producto → Imagen   │
  └──────────────────────────────────────────────────────┘
*/
.g1{background:linear-gradient(145deg,#FDD5EC,#D43A88);}
.g2{background:linear-gradient(145deg,#FF9ED0,#9C1B5E);}
.g3{background:linear-gradient(145deg,#FEF0F8,#FDD5EC);}
.g4{background:linear-gradient(145deg,#FB5FAB,#4A0A2E);}
.g5{background:linear-gradient(145deg,#9C1B5E,#1A0A12);}
.g6{background:linear-gradient(145deg,#F5E8F0,#D4A8C0);}
.g7{background:linear-gradient(145deg,#FF9ED0,#FB5FAB);}
.g8{background:linear-gradient(145deg,#2E1424,#1A0A12);}

/* ── COLLECTIONS GRID ────────────────────────────────────── */
/*
  WORDPRESS: Cada imagen de colección = widget "Image" en Elementor.
  Doble clic → Cambiar imagen → Biblioteca de Medios.
*/
.coll-grid{
  display:grid;
  grid-template-columns:1.55fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:10px;
}
.coll-card{position:relative;overflow:hidden;display:block;}
.coll-card--hero{grid-row:span 2;}
.coll-card--hero .coll-img-wrap{min-height:580px;height:100%;}
.coll-card--sm .coll-img-wrap{aspect-ratio:3/4;}
.coll-img-wrap{overflow:hidden;position:relative;width:100%;}
.coll-img{width:100%;height:100%;transition:transform 0.95s var(--ease-smooth);}
.coll-card:hover .coll-img{transform:scale(1.07);}

/* Overlay gradient */
.coll-veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(26,10,18,0.72) 0%,rgba(26,10,18,0.1) 45%,transparent 70%);
  transition:opacity 0.4s;
}
.coll-card:hover .coll-veil{opacity:1.1;}

/* Info */
.coll-info{position:absolute;bottom:0;left:0;right:0;padding:28px;color:var(--pink-cream);}
.coll-tag{font-size:0.52rem;font-weight:400;letter-spacing:0.24em;text-transform:uppercase;color:var(--pink-glow);margin-bottom:6px;opacity:0.9;}
.coll-name{
  font-family:var(--ff-display);font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:1.1;margin-bottom:14px;
}
.coll-card--hero .coll-name{font-size:clamp(2rem,3.5vw,3.3rem);}
.coll-cta{
  display:inline-flex;align-items:center;gap:7px;
  font-size:0.6rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--pink-cream);opacity:0;transform:translateY(5px);
  transition:opacity 0.35s,transform 0.35s;
}
.coll-card:hover .coll-cta{opacity:1;transform:none;}
.coll-cta .arr{transition:transform 0.3s var(--ease-spring);}
.coll-card:hover .coll-cta .arr{transform:translateX(4px);}

/* Swatches en hover */
.coll-sw{
  position:absolute;top:14px;right:14px;
  display:flex;flex-direction:column;gap:4px;
  opacity:0;transform:translateX(5px);
  transition:opacity 0.3s 0.1s,transform 0.3s 0.1s;
}
.coll-card:hover .coll-sw{opacity:1;transform:none;}
.sw{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(255,200,230,0.7);}

/* ── PRODUCTS ────────────────────────────────────────────── */
/*
  WORDPRESS: Los productos NUNCA se editan aquí.
  Panel de WordPress → WooCommerce → Productos → Editar producto.
  Las imágenes, precios y descripciones se cambian ahí directamente.
  El shortcode [best_selling_products limit="4"] muestra los productos automáticamente.
*/
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,22px);}
/* ── PRODUCT CARD — CSS Grid layout ─────────────────────────── */
/* Desktop: prod-actions and prod-img-wrap share the same grid cell,
   so the button overlays the bottom of the image (same visual as before).
   Mobile:  prod-actions gets its own row BELOW the image. */
.prod-card{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto;  /* img row, info row */
  gap:14px;
  overflow:hidden; /* clips the translateY animation on desktop */
}
.prod-img-wrap{grid-row:1;position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--pink-light);}
.prod-img-main,.prod-img-alt{
  position:absolute;inset:0;width:100%;height:100%;
  transition:opacity 0.55s var(--ease-smooth),transform 0.8s var(--ease-smooth);
}
.prod-img-main{opacity:1;}
.prod-img-alt{opacity:0;}
/* Hover: zoom only — no fade to prevent white flash when no alt image */
.prod-card:hover .prod-img-main{transform:scale(1.07);}
.prod-card:hover .prod-img-alt{opacity:1;transform:scale(1.07);}

/* Badges */
.prod-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:4px 9px;font-size:0.5rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
}
.badge-new{background:var(--pink);color:var(--warm-white);}
.badge-hot{background:var(--dark);color:var(--pink-cream);}
.badge-sale{background:var(--pink-dark);color:var(--pink-cream);}

/* Quick view */
.prod-qv{
  position:absolute;top:12px;right:12px;z-index:3;
  width:32px;height:32px;background:rgba(255,252,254,0.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0.85);
  transition:opacity 0.3s,transform 0.3s;
}
.prod-card:hover .prod-qv{opacity:1;transform:scale(1);}
.prod-qv svg{width:13px;height:13px;stroke:var(--dark);fill:none;stroke-width:1.5;}

/* Hover actions bar */
/* prod-actions: placed in same grid row as prod-img-wrap → overlays image bottom */
.prod-actions{
  grid-row:1;       /* same row as the image */
  align-self:end;   /* stick to bottom of image area */
  z-index:5;
  display:flex;gap:7px;
  padding:12px;
  transform:translateY(100%);
  transition:transform 0.42s var(--ease-spring);
  background:linear-gradient(to top,rgba(26,10,18,0.78),transparent);
}
.prod-card:hover .prod-actions{transform:none;}
@media(hover:none){.prod-actions{transform:none!important;}}

.prod-atc{
  flex:1;padding:11px 6px;
  background:rgba(255,252,254,0.96);color:var(--dark);
  font-size:0.58rem;font-weight:400;letter-spacing:0.16em;text-transform:uppercase;text-align:center;
  transition:background 0.25s,color 0.25s;
}
.prod-atc:hover,.prod-atc.added{background:var(--pink)!important;color:var(--warm-white)!important;}
.prod-wish{
  width:40px;height:40px;flex-shrink:0;
  background:rgba(255,252,254,0.12);border:1px solid rgba(255,200,230,0.35);
  display:flex;align-items:center;justify-content:center;color:var(--pink-cream);
  transition:background 0.25s;
}
.prod-wish.wished svg{fill:var(--pink);stroke:var(--pink);}
.prod-wish svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4;}

/* Info */
.prod-info{grid-row:2;padding:0 2px;}
.prod-colors-row{display:flex;gap:5px;margin-bottom:9px;}
.pcolor{
  width:13px;height:13px;border-radius:50%;border:1.5px solid transparent;
  transition:transform 0.2s,border-color 0.2s;
}
.pcolor:hover{transform:scale(1.3);}
.pcolor.sel{border-color:var(--pink-deep);}
.prod-name{font-family:var(--ff-display);font-size:1rem;font-style:italic;font-weight:300;line-height:1.25;margin-bottom:3px;}
.prod-variant{font-size:0.7rem;font-weight:300;color:var(--warm-gray);margin-bottom:7px;}
.prod-price-row{display:flex;align-items:baseline;gap:8px;}
.prod-price{font-size:0.82rem;font-weight:400;color:var(--dark);}
.prod-was{font-size:0.76rem;color:var(--taupe);text-decoration:line-through;}
.prod-sizes{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;}
.psz{
  height:25px;padding:0 8px;font-size:0.58rem;font-weight:300;letter-spacing:0.1em;
  border:1px solid var(--linen);color:var(--dark);
  transition:background 0.2s,border-color 0.2s,color 0.2s;
}
.psz:hover{border-color:var(--pink);}
.psz.sel{background:var(--dark);color:var(--pink-cream);border-color:var(--dark);}

/* ── EDITORIAL SPLIT ─────────────────────────────────────── */
/*
  WORDPRESS: Imagen izquierda → Widget "Image" en Elementor.
  Doble clic en la imagen → Cambiar → Biblioteca de Medios.
  Para video: cambiar widget Image por Widget Video.
*/
.ed-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:76vh;}
.ed-img{overflow:hidden;position:relative;}
.ed-img-inner{
  width:100%;height:100%;min-height:460px;
  background:linear-gradient(145deg,#FDD5EC 0%,#FB5FAB 40%,#9C1B5E 75%,#1A0A12 100%);
  transition:transform 10s ease-out;transform:scale(1.05);
}
.ed-wrap:hover .ed-img-inner{transform:scale(1);}
.ed-body{
  background:var(--dark);color:var(--pink-cream);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,6vw,100px);
}
.ed-label{color:var(--pink);margin-bottom:18px;}
.ed-title{
  font-family:var(--ff-display);font-size:clamp(2.2rem,4vw,4rem);
  font-weight:300;line-height:1.07;margin-bottom:22px;
}
.ed-title em{font-style:italic;color:var(--pink-glow);}
.ed-text{
  font-size:clamp(0.82rem,1vw,0.94rem);font-weight:300;line-height:1.92;
  opacity:0.65;max-width:380px;margin-bottom:40px;
}
.ed-stats{
  display:flex;gap:clamp(24px,4vw,52px);margin-top:50px;
  padding-top:32px;border-top:1px solid rgba(251,95,171,0.16);
}
.stat-n{font-family:var(--ff-display);font-size:2.8rem;font-style:italic;font-weight:300;line-height:1;color:var(--pink-glow);}
.stat-l{font-size:0.56rem;letter-spacing:0.18em;text-transform:uppercase;opacity:0.45;margin-top:5px;}

/* ── PRODUCT DETAIL ──────────────────────────────────────── */
/*
  WORDPRESS: La galería de fotos del producto se maneja desde:
  WooCommerce → Producto → "Imagen del producto" (foto principal)
  y "Galería del producto" (fotos adicionales).
  NO se necesita tocar Elementor para cambiar fotos de producto.
*/
.pd-wrap{background:var(--pink-blush);}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start;}
.pd-gallery{display:grid;grid-template-columns:66px 1fr;gap:9px;}
.pd-thumbs{display:flex;flex-direction:column;gap:7px;}
.pd-thumb{
  aspect-ratio:3/4;overflow:hidden;border:2px solid transparent;opacity:0.5;
  transition:opacity 0.25s,border-color 0.25s;
}
.pd-thumb.act,.pd-thumb:hover{opacity:1;border-color:var(--pink);}
.pd-main{aspect-ratio:3/4;overflow:hidden;position:relative;background:var(--pink-light);}
.pd-main-inner{width:100%;height:100%;transition:transform 0.8s var(--ease-smooth);}
.pd-main:hover .pd-main-inner{transform:scale(1.04);}
.pd-zoom-tag{
  position:absolute;bottom:12px;right:12px;
  background:rgba(255,252,254,0.9);padding:4px 10px;
  font-size:0.52rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--warm-mid);
  display:flex;align-items:center;gap:5px;
}
.pd-zoom-tag svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5;}

.pd-info{padding-top:4px;}
.pd-bc{display:flex;gap:7px;font-size:0.63rem;color:var(--warm-gray);margin-bottom:18px;}
.pd-bc a:hover{color:var(--pink-deep);}
.pd-bc-sep{opacity:0.35;}
.pd-title{font-family:var(--ff-display);font-size:clamp(1.8rem,3vw,2.8rem);font-style:italic;font-weight:300;line-height:1.12;margin-bottom:6px;}
.pd-sub{font-size:0.82rem;font-weight:300;color:var(--warm-gray);margin-bottom:18px;}
.pd-stars{display:flex;gap:2px;align-items:center;margin-bottom:20px;}
.pd-star{color:var(--pink);font-size:0.85rem;}
.pd-rc{font-size:0.68rem;color:var(--warm-gray);margin-left:8px;}
.pd-price{font-size:1.25rem;font-weight:400;letter-spacing:0.05em;margin-bottom:32px;}

.pd-opt-group{margin-bottom:24px;}
.pd-opt-label{
  font-size:0.63rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;
  margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;
}
.pd-opt-label a{color:var(--pink-deep);text-decoration:underline;text-underline-offset:2px;font-size:0.62rem;font-weight:300;}
.pd-colors{display:flex;gap:8px;flex-wrap:wrap;}
.pd-copt{
  width:29px;height:29px;border-radius:50%;border:2.5px solid transparent;
  transition:transform 0.25s,border-color 0.25s;position:relative;
}
.pd-copt:hover{transform:scale(1.15);}
.pd-copt.sel{border-color:var(--pink-deep);}
.pd-copt.sel::after{content:'';position:absolute;inset:2px;border-radius:50%;border:2px solid var(--warm-white);}
.pd-sizes-row{display:flex;gap:6px;flex-wrap:wrap;}
.pd-sbtn{
  min-width:48px;height:42px;padding:0 10px;border:1px solid var(--linen);
  font-size:0.7rem;font-weight:300;letter-spacing:0.08em;color:var(--dark);
  transition:background 0.25s,border-color 0.25s,color 0.25s;
}
.pd-sbtn:hover{border-color:var(--pink);}
.pd-sbtn.sel{background:var(--dark);color:var(--pink-cream);border-color:var(--dark);}
.pd-sbtn.out{opacity:0.3;text-decoration:line-through;pointer-events:none;}

.pd-actions{display:flex;flex-direction:column;gap:9px;margin-top:28px;}
.pd-atc{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--pink);color:var(--warm-white);padding:17px 32px;
  font-size:0.68rem;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;
  transition:background 0.3s;
}
.pd-atc:hover{background:var(--pink-deep);}
.pd-atc svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4;}
.pd-wl{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--linen);color:var(--warm-mid);padding:13px 32px;
  font-size:0.66rem;font-weight:300;letter-spacing:0.18em;text-transform:uppercase;
  transition:border-color 0.25s,color 0.25s;
}
.pd-wl:hover{border-color:var(--pink);color:var(--pink-deep);}
.pd-wl svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4;}

.pd-trust{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-top:26px;padding:16px;background:var(--pink-pale);
}
.trust-i{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;}
.trust-i svg{width:19px;height:19px;stroke:var(--pink-deep);fill:none;stroke-width:1.4;}
.trust-i span{font-size:0.58rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--warm-mid);line-height:1.5;}

/* Accordion */
.accordion{border-top:1px solid var(--pink-light);margin-top:30px;}
.acc-item{border-bottom:1px solid var(--pink-light);}
.acc-trig{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:15px 0;font-size:0.68rem;font-weight:400;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--dark);transition:color 0.25s;
}
.acc-trig:hover{color:var(--pink-deep);}
.acc-plus{font-size:1.1rem;color:var(--pink);transition:transform 0.38s var(--ease-spring);}
.acc-item.open .acc-plus{transform:rotate(45deg);}
.acc-body{display:none;padding-bottom:18px;font-size:0.82rem;font-weight:300;line-height:1.9;color:var(--warm-mid);}
.acc-item.open .acc-body{display:block;}

/* ── COMPLETE THE LOOK ───────────────────────────────────── */
.look-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(28px,5vw,80px);align-items:center;}
.look-img-wrap{position:relative;overflow:hidden;aspect-ratio:2/3;}
.look-img-inner{
  width:100%;height:100%;
  background:linear-gradient(145deg,#FDD5EC 0%,#FB5FAB 45%,#4A0A2E 100%);
  transition:transform 0.9s var(--ease-smooth);
}
.look-img-wrap:hover .look-img-inner{transform:scale(1.04);}
.look-dot{
  position:absolute;width:28px;height:28px;border-radius:50%;
  background:rgba(255,252,254,0.96);border:1px solid rgba(255,200,230,0.4);
  display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--dark);
  animation:dotPulse 2.8s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,95,171,0.5);}50%{box-shadow:0 0 0 12px rgba(251,95,171,0);}}
.look-items{display:flex;flex-direction:column;gap:14px;}
.look-item{
  display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:16px;
  padding:13px;background:var(--warm-white);transition:background 0.25s;
}
.look-item:hover{background:var(--pink-pale);}
.look-item-img{aspect-ratio:3/4;overflow:hidden;}
.look-item-name{font-family:var(--ff-display);font-size:0.95rem;font-style:italic;margin-bottom:3px;}
.look-item-col{font-size:0.7rem;color:var(--warm-gray);font-weight:300;}
.look-item-price{font-size:0.82rem;font-weight:400;white-space:nowrap;}
.look-total{
  margin-top:4px;padding:17px 16px;
  background:var(--dark);color:var(--pink-cream);
  display:flex;justify-content:space-between;align-items:center;
}
.look-total-lbl{font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;opacity:0.5;}
.look-total-p{font-family:var(--ff-display);font-size:1.5rem;font-style:italic;}

/* ── TESTIMONIALS ────────────────────────────────────────── */
.test-section{background:var(--pink-pale);}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);}
.test-card{
  background:var(--warm-white);padding:clamp(22px,3vw,38px);
  display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--shadow-card);border-top:2px solid var(--pink-light);
}
.test-stars{display:flex;gap:2px;}
.test-star{color:var(--pink);font-size:0.82rem;}
.test-quote{
  font-family:var(--ff-display);font-size:clamp(0.95rem,1.4vw,1.12rem);
  font-style:italic;font-weight:300;line-height:1.65;color:var(--dark);flex:1;
}
.test-quote::before{content:'\201C';font-size:2rem;color:var(--pink);line-height:0;vertical-align:-0.35em;margin-right:2px;}
.test-author{padding-top:14px;border-top:1px solid var(--pink-light);}
.test-name{font-size:0.74rem;font-weight:400;letter-spacing:0.1em;}
.test-loc{font-size:0.65rem;color:var(--warm-gray);font-weight:300;margin-top:2px;}
.test-ctrl{display:flex;align-items:center;gap:14px;margin-top:34px;}
.test-btn{
  width:44px;height:44px;border:1px solid var(--pink-light);
  display:flex;align-items:center;justify-content:center;
  transition:background 0.25s,color 0.25s,border-color 0.25s;
}
.test-btn:hover{background:var(--pink);color:var(--warm-white);border-color:var(--pink);}
.test-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;}
.test-dots{display:flex;gap:6px;}
.tdot{width:20px;height:2px;background:var(--pink-light);transition:width 0.42s var(--ease-spring),background 0.3s;}
.tdot.act{width:38px;background:var(--pink);}

/* ── INSTAGRAM ───────────────────────────────────────────── */
/*
  WORDPRESS: Instalar plugin "Smash Balloon Social Photo Feed".
  Conectar tu cuenta de Instagram una sola vez.
  Las fotos se actualizan automáticamente con cada nuevo post.
*/
.insta-hdr{
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:var(--gutter) var(--gutter) 32px;max-width:var(--max-w);margin:0 auto;
}
.insta-handle{font-family:var(--ff-display);font-size:1.4rem;font-style:italic;font-weight:300;color:var(--pink-deep);}
.insta-strip{display:grid;grid-template-columns:repeat(6,1fr);}
.insta-cell{aspect-ratio:1;overflow:hidden;position:relative;}
.insta-cell-img{width:100%;height:100%;transition:transform 0.65s var(--ease-smooth);}
.insta-cell:hover .insta-cell-img{transform:scale(1.09);}
.insta-over{
  position:absolute;inset:0;
  background:rgba(156,27,94,0.68);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  opacity:0;transition:opacity 0.3s;color:var(--pink-cream);
}
.insta-cell:hover .insta-over{opacity:1;}
.insta-icon{font-size:1.2rem;}
.insta-count{font-size:0.66rem;font-weight:400;letter-spacing:0.1em;}

/* ── NEWSLETTER ──────────────────────────────────────────── */
/*
  WORDPRESS: El formulario de newsletter se hace con el
  widget Form de Elementor + plugin MailPoet.
  Conectar lista → las suscripciones van directo a MailPoet.
*/
.nl-section{background:var(--dark);color:var(--pink-cream);}
.nl-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center;}
.nl-lbl{color:var(--pink);margin-bottom:16px;}
.nl-title{
  font-family:var(--ff-display);font-size:clamp(2.2rem,4.5vw,4.2rem);
  font-weight:300;line-height:1.07;margin-bottom:16px;
}
.nl-title em{font-style:italic;color:var(--pink-glow);}
.nl-desc{font-size:0.87rem;font-weight:300;line-height:1.92;opacity:0.55;max-width:400px;}
.nl-perks{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap;}
.nl-perk{display:flex;flex-direction:column;gap:4px;}
.nl-perk-icon{font-size:1rem;color:var(--pink);}
.nl-perk-txt{font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;opacity:0.38;}
.nl-form{display:flex;flex-direction:column;gap:16px;}
.nl-field{position:relative;}
.nl-input{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(251,95,171,0.22);
  color:var(--pink-cream);font-family:var(--ff-body);font-size:0.88rem;font-weight:300;
  padding:13px 0;outline:none;letter-spacing:0.04em;transition:border-color 0.3s;
}
.nl-input::placeholder{color:transparent;}
.nl-input:focus{border-color:var(--pink);}
.nl-lbl-fl{
  position:absolute;top:13px;left:0;
  font-size:0.63rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(251,95,171,0.35);
  pointer-events:none;transition:top 0.25s,font-size 0.25s,color 0.25s;
}
.nl-input:focus ~ .nl-lbl-fl,
.nl-input:not(:placeholder-shown) ~ .nl-lbl-fl{top:-7px;font-size:0.52rem;color:var(--pink);}
.nl-submit{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--pink);color:var(--warm-white);padding:15px 32px;margin-top:6px;
  font-size:0.65rem;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;
  transition:background 0.3s,gap 0.35s var(--ease-spring);
}
.nl-submit:hover{background:var(--pink-deep);gap:16px;}
.nl-fine{font-size:0.6rem;opacity:0.22;font-weight:300;line-height:1.7;margin-top:3px;}

/* ── URGENCY BAR ─────────────────────────────────────────── */
.urgency{
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:var(--pink-dark);color:var(--pink-cream);
  padding:11px var(--gutter);font-size:0.68rem;font-weight:300;
  letter-spacing:0.14em;text-transform:uppercase;text-align:center;
}
.urgency strong{font-weight:500;}
.countdown-t{font-family:var(--ff-display);font-style:italic;font-size:0.95rem;}

/* ── FOOTER ──────────────────────────────────────────────── */
#bb-footer{background:var(--charcoal);color:var(--pink-cream);border-top:1px solid rgba(251,95,171,0.07);}
.footer-main{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(28px,5vw,60px);
  padding:clamp(52px,8vw,96px) var(--gutter) clamp(44px,6vw,64px);
  max-width:var(--max-w);margin:0 auto;
}
.foot-logo{font-family:var(--ff-display);font-size:1.5rem;font-weight:300;letter-spacing:0.34em;text-transform:uppercase;margin-bottom:16px;}
.foot-tag{font-size:0.82rem;font-weight:300;opacity:0.42;max-width:250px;line-height:1.9;margin-bottom:26px;}
.foot-socials{display:flex;gap:10px;}
.foot-social{
  width:34px;height:34px;border:1px solid rgba(251,95,171,0.18);
  display:flex;align-items:center;justify-content:center;
  font-size:0.68rem;color:rgba(251,95,171,0.5);
  transition:border-color 0.25s,color 0.25s,background 0.25s;
}
.foot-social:hover{border-color:var(--pink);color:var(--pink);background:rgba(251,95,171,0.08);}
.foot-col-title{font-size:0.58rem;font-weight:400;letter-spacing:0.24em;text-transform:uppercase;opacity:0.36;margin-bottom:20px;}
.foot-links{display:flex;flex-direction:column;gap:10px;}
.foot-links a{font-size:0.82rem;font-weight:300;opacity:0.54;display:block;transition:opacity 0.25s,padding-left 0.25s;}
.foot-links a:hover{opacity:1;padding-left:6px;}
.footer-bottom{
  border-top:1px solid rgba(251,95,171,0.07);
  padding:22px var(--gutter);max-width:var(--max-w);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
.foot-copy{font-size:0.64rem;opacity:0.24;font-weight:300;letter-spacing:0.06em;}
.foot-pays{display:flex;gap:7px;}
.pay-chip{border:1px solid rgba(251,95,171,0.12);padding:3px 9px;font-size:0.52rem;letter-spacing:0.12em;text-transform:uppercase;opacity:0.32;}
.foot-legal{display:flex;gap:18px;}
.foot-legal a{font-size:0.62rem;opacity:0.26;transition:opacity 0.25s;}
.foot-legal a:hover{opacity:0.65;}

/* ── CART DRAWER ─────────────────────────────────────────── */
.cart-ovl{position:fixed;inset:0;background:rgba(26,10,18,0.44);z-index:400;opacity:0;pointer-events:none;transition:opacity 0.4s;}
.cart-ovl.vis{opacity:1;pointer-events:all;}
.cart-drawer{
  position:fixed;top:0;right:-450px;width:min(450px,100vw);height:100vh;
  background:var(--warm-white);z-index:500;display:flex;flex-direction:column;
  transition:right 0.5s var(--ease-spring);box-shadow:var(--shadow-deep);
}
.cart-drawer.open{right:0;}
.cart-hdr{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 26px;border-bottom:1px solid var(--pink-light);
}
.cart-title-row{display:flex;align-items:baseline;gap:9px;}
.cart-title{font-family:var(--ff-display);font-size:1.3rem;font-style:italic;font-weight:300;}
.cart-ct{font-size:0.6rem;letter-spacing:0.14em;color:var(--warm-gray);text-transform:uppercase;}
.cart-close{font-size:1.4rem;color:var(--warm-mid);transition:color 0.2s;}
.cart-close:hover{color:var(--dark);}
.cart-items{flex:1;overflow-y:auto;padding:20px 26px;display:flex;flex-direction:column;gap:16px;}
.cart-item{display:grid;grid-template-columns:72px 1fr;gap:13px;align-items:start;}
.cart-item-img{aspect-ratio:3/4;overflow:hidden;background:var(--pink-light);}
.cart-item-name{font-family:var(--ff-display);font-size:0.95rem;font-style:italic;font-weight:300;}
.cart-item-var{font-size:0.67rem;color:var(--warm-gray);font-weight:300;margin-top:2px;}
.cart-item-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;}
.cart-qty-wrap{display:flex;align-items:center;gap:10px;border:1px solid var(--pink-light);padding:4px 10px;}
.qty-btn{font-size:0.95rem;color:var(--warm-mid);}
.qty-val{font-size:0.78rem;min-width:14px;text-align:center;}
.cart-item-price{font-size:0.82rem;}
.cart-foot{padding:18px 26px;border-top:1px solid var(--pink-light);display:flex;flex-direction:column;gap:10px;}
.cart-sub-row{display:flex;justify-content:space-between;align-items:center;}
.cart-sub-lbl{font-size:0.63rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--warm-gray);}
.cart-sub-val{font-family:var(--ff-display);font-size:1.5rem;font-style:italic;font-weight:300;}
.cart-note{text-align:center;font-size:0.62rem;color:var(--pink-deep);font-weight:300;}
.cart-checkout{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--pink);color:var(--warm-white);padding:16px;
  font-size:0.66rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;
  transition:background 0.3s;
}
.cart-checkout:hover{background:var(--pink-deep);}

/* ── QUICK VIEW ──────────────────────────────────────────── */
.qv-ovl{
  position:fixed;inset:0;background:rgba(26,10,18,0.52);
  z-index:600;opacity:0;pointer-events:none;transition:opacity 0.35s;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.qv-ovl.vis{opacity:1;pointer-events:all;}
.qv-modal{
  background:var(--warm-white);width:min(800px,100%);max-height:90vh;overflow-y:auto;
  transform:scale(0.93) translateY(18px);transition:transform 0.42s var(--ease-spring);
  display:grid;grid-template-columns:1fr 1fr;
}
.qv-ovl.vis .qv-modal{transform:none;}
.qv-img{aspect-ratio:3/4;background:var(--pink-light);}
.qv-body{padding:34px;display:flex;flex-direction:column;gap:14px;position:relative;}
.qv-close{position:absolute;top:14px;right:14px;font-size:1.3rem;color:var(--warm-mid);}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:1200px){
  .prod-grid{grid-template-columns:repeat(3,1fr);}
  .footer-main{grid-template-columns:1.5fr 1fr 1fr;}
  .footer-main>*:last-child{grid-column:2;grid-row:2;}
}
@media (max-width:1024px){
  .coll-grid{grid-template-columns:1fr 1fr;}
  .coll-card--hero{grid-column:span 2;grid-row:auto;}
  .coll-card--hero .coll-img-wrap{min-height:50vw;}
  .ed-wrap{grid-template-columns:1fr;}
  .ed-img-inner{min-height:52vw;}
  .look-grid{grid-template-columns:1fr;}
  .nl-inner{grid-template-columns:1fr;gap:44px;}
  .insta-strip{grid-template-columns:repeat(3,1fr);}
  .insta-strip>*:nth-child(n+4){display:none;}
}
@media (max-width:900px){
  .pd-grid{grid-template-columns:1fr;}
  .pd-gallery{grid-template-columns:50px 1fr;}
  .test-grid{grid-template-columns:1fr;}
  .test-grid>*:nth-child(n+2){display:none;}
  .qv-modal{grid-template-columns:1fr;}
  .qv-img{aspect-ratio:16/9;max-height:260px;}
}
@media (max-width:768px){:root{--ann-h:32px;--hdr-h:60px;--top:92px;}
  :root{--gutter:16px;}

  /* ── ANNOUNCEMENT BAR MOBILE ── */
  #bb-announce{font-size:0.62rem;letter-spacing:0.08em;font-weight:700;}

  /* ── HEADER MOBILE: burger IZQUIERDA · logo CENTRO · iconos DERECHA ── */
  .hdr-inner{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    height:var(--hdr-h);
    gap:0;
  }

  /* Ocultar nav izquierda y links de derecha */
  .hdr-left, .hdr-nav-right { display:none !important; }

  /* Burger: primer elemento, lado izquierdo */
  .hdr-burger {
    display:flex !important;
    order: 1;
    flex-shrink: 0;
    margin-right: 0;
  }

  /* Logo: centro absoluto */
  .hdr-logo {
    order: 2;
    flex: 1;
    text-align: center;
    font-size: 1.35rem;
    letter-spacing: 0.22em;
    justify-content: center;
  }
  .hdr-logo-sub { font-size: 0.48rem; letter-spacing: 0.28em; color: #888888; opacity: 1; }

  /* Iconos derecha */
  .hdr-right {
    order: 3;
    flex-shrink: 0;
    gap: 2px;
    justify-content: flex-end;
  }

  /* Reducir tamaño de iconos en mobile */
  .hdr-icon { width: 36px; height: 36px; }
  .hdr-icon svg { width: 18px; height: 18px; }

  /* ── RESTO MOBILE ── */
  .coll-grid{grid-template-columns:1fr;gap:8px;}
  .coll-card--hero{grid-column:auto;}
  .coll-card--hero .coll-img-wrap{min-height:72vw;}
  .coll-card--sm .coll-img-wrap{aspect-ratio:4/5;}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  /* ── BOTÓN COMPRAR DEBAJO DE LA IMAGEN EN MÓVIL ──────────────
     Usamos CSS Grid: prod-actions sale de la misma fila que la imagen
     y pasa a su propia fila, debajo del producto. ── */
  .prod-card {
    overflow: visible !important; /* permite que el botón fluya fuera */
    grid-template-areas:
      "img"
      "btn"
      "info" !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
  }
  .prod-img-wrap {
    grid-row: 1 !important;
    grid-area: img !important;
    overflow: hidden !important; /* la imagen sigue recortada */
  }
  .prod-actions {
    grid-row: 2 !important;
    grid-area: btn !important;
    align-self: stretch !important;
    transform: none !important;        /* siempre visible */
    position: relative !important;     /* no absolute */
    background: none !important;       /* sin gradiente oscuro */
    padding: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    width: 100% !important;
  }
  .prod-info {
    grid-row: 3 !important;
    grid-area: info !important;
  }
  /* Botón de comprar: aspecto completo en móvil */
  .prod-actions .prod-atc {
    flex: 1 !important;
    background: var(--pink) !important;
    color: var(--warm-white, #fff) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    text-align: center !important;
    border-radius: 4px !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.14em !important;
  }
  .prod-actions .prod-wish,
  .prod-actions .prod-qv {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  .hero-badge{display:none;}
  .hero-scroll{display:none;}
  .ed-body{padding:clamp(34px,8vw,52px) var(--gutter);}
  .ed-stats{flex-wrap:wrap;gap:18px;}
  .pd-gallery{grid-template-columns:1fr;}
  .pd-thumbs{flex-direction:row;overflow-x:auto;}
  .pd-thumb{width:66px;flex-shrink:0;aspect-ratio:3/4;}
  .look-img-wrap{aspect-ratio:5/6;}
  .insta-strip{grid-template-columns:repeat(3,1fr);}
  .insta-strip>*:nth-child(n+4){display:none;}
  .footer-main{grid-template-columns:1fr 1fr;gap:32px;}
  .footer-main .footer-brand{grid-column:1/-1;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;}
}

@media (max-width:480px){
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:7px;}
  .footer-main{grid-template-columns:1fr;}
  .nl-perks{gap:14px;}
  .cart-drawer{width:100vw;}
  .hdr-logo{font-size:1.18rem;letter-spacing:0.18em;}
  .hdr-logo-sub{font-size:0.42rem;color:#888888;opacity:1;}
  /* Ocultar wishlist en mobile muy pequeño para no saturar */
  .hdr-icon.hide-xs{display:none;}
}

/* ── TABLET (769px – 1024px) ──────────────────────────────── */
@media (min-width:769px) and (max-width:1024px){
  .hdr-inner{padding:0 24px;}
  .hdr-left{gap:18px;}
  .hdr-link{font-size:0.6rem;}
  .hdr-nav-right{gap:16px;margin-right:6px;}
  .hdr-logo{font-size:1.55rem;letter-spacing:0.28em;}
}


body.cur-clicking #bb-cursor{opacity:0.85;}
.bb-page-inner{max-width:900px;margin:0 auto;padding:calc(var(--top)+60px) 24px 100px;}

/* ── CART DRAWER AJAX MEJORADO ───────────────────────────── */
.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--pink-light);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--pink-light);
  border-radius: 2px;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-body { display: flex; flex-direction: column; gap: 4px; }
.cart-item-name {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.2;
}
.cart-item-var {
  font-size: 0.67rem;
  color: var(--warm-gray);
  font-weight: 300;
}
.cart-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 8px;
}
.cart-item-price { font-size: 0.82rem; font-weight: 400; }

/* Qty buttons */
.cart-qty-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--pink-light);
}
.qty-btn-minus, .qty-btn-plus {
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--warm-mid);
  transition: color 0.2s, background 0.2s;
  line-height: 1;
}
.qty-btn-minus:hover, .qty-btn-plus:hover {
  color: var(--pink-deep);
  background: var(--pink-pale);
}
.qty-val {
  font-size: 0.78rem;
  min-width: 22px;
  text-align: center;
  padding: 0 2px;
}

/* Botón eliminar */
.cart-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--taupe);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s, transform 0.2s;
  margin-left: auto;
}
.cart-remove-btn:hover {
  color: var(--pink-deep);
  background: var(--pink-pale);
  transform: scale(1.12);
}

/* Carrito vacío */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 100%;
  min-height: 260px;
  padding: 40px 24px;
  text-align: center;
}
.cart-empty svg { opacity: 0.35; }
.cart-empty p {
  font-size: 0.88rem;
  color: var(--warm-gray);
  font-weight: 300;
  letter-spacing: 0.04em;
}
.cart-empty .btn { font-size: 0.62rem; }

/* Spinner de carga */
.cart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.cart-spin {
  animation: spinCart 0.9s linear infinite;
  stroke-linecap: round;
}
@keyframes spinCart { to { transform: rotate(360deg); } }

/* ── WHATSAPP FLOTANTE ───────────────────────────────────── */
#bb-wa {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 8500;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.42);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.3s;
  text-decoration: none;
}
#bb-wa:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 8px 32px rgba(37,211,102,0.55);
}
/* Pulso animado */
#bb-wa::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.4);
  animation: waPulse 2.2s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { opacity: 0; }
}
@media (max-width: 768px) {
  #bb-wa { bottom: 20px; right: 16px; width: 50px; height: 50px; }
}


/* ═══════════════════════════════════════════════════════════════════
   BEBREEZE PRODUCT CARDS v6.2 — PNG sin fondo + WooCommerce
   Diseñado para imágenes de producto con fondo transparente.
   Fondo: degradado crema-rosado acorde con la paleta bebreeze.
   ═══════════════════════════════════════════════════════════════════ */

/* ── PRODUCT GRID ─────────────────────────────────────────── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1200px) { .prod-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px)  { .prod-grid { grid-template-columns: repeat(2,1fr); gap: 10px; } }
@media (max-width: 400px)  { .prod-grid { grid-template-columns: repeat(2,1fr); gap: 7px; } }

/* ── PRODUCT CARD ─────────────────────────────────────────── */
.prod-card {
  position: relative;
  cursor: pointer;
}

/* ── IMAGE WRAPPER ────────────────────────────────────────── */
.prod-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 3 / 4;
  /* Fondo crema-rosado: luce perfecto con cualquier PNG transparente */
  background: linear-gradient(160deg, #FFF5FB 0%, #FEF0F8 45%, #F9E8F3 100%);
}

/* ── PRODUCT IMAGES (PNG con fondo transparente) ──────────── */
.prod-img-main {
  width: 100%;
  height: 100%;
  display: block;
  /* contain: muestra el producto completo sin recortar */
  object-fit: contain;
  padding: 14px;
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1),
              filter 0.4s ease;
  will-change: transform;
  /* Sombra que recorta el contorno exacto de la pieza (solo en PNG) */
  filter: drop-shadow(0 6px 20px rgba(26,10,18,0.13));
}

/* Hover: la pieza flota suavemente */
.prod-card:hover .prod-img-main {
  transform: scale(1.06) translateY(-5px);
  filter: drop-shadow(0 14px 32px rgba(251,95,171,0.22))
          drop-shadow(0 4px 10px rgba(26,10,18,0.12));
}

/* ── IMAGES JPG (fondos de estudio coloreados — bags) ─────── */
.prod-img-main[src$=".jpg"],
.prod-img-main[src$=".jpeg"] {
  object-fit: cover;
  padding: 0;
  border-radius: 8px;
  filter: none;
}
.prod-card:hover .prod-img-main[src$=".jpg"],
.prod-card:hover .prod-img-main[src$=".jpeg"] {
  transform: scale(1.04);
  filter: none;
}

/* Bags con fondo neutro de estudio */
.prod-img-wrap:has(.prod-img-main[src$=".jpg"]) {
  background: #F8F3EE;
}

/* ── BADGES ───────────────────────────────────────────────── */
.prod-badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 9px;
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 3px;
  z-index: 3;
  pointer-events: none;
}
.badge-hot  { background: var(--pink, #FB5FAB); color: #fff; }
.badge-new  { background: var(--dark, #1A0A12); color: #fff; }
.badge-sale { background: transparent; color: var(--dark, #1A0A12);
              border: 1px solid currentColor; }

/* ── ADD TO CART ──────────────────────────────────────────── */
.prod-atc {
  flex: 1;
  background: var(--pink, #FB5FAB);
  color: #fff;
  border: none;
  padding: 9px 12px;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  font-family: var(--ff-body, 'Jost', sans-serif);
  white-space: nowrap;
}
.prod-atc:hover { background: var(--pink-deep, #D43A88); color: #fff; }

/* ── WISHLIST BUTTON ──────────────────────────────────────── */
.prod-wish {
  background: rgba(255,252,254,0.92);
  border: none; cursor: pointer;
  width: 36px; height: 36px;
  border-radius: 3px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s; color: var(--dark, #1A0A12);
}
.prod-wish:hover, .prod-wish.wished { color: var(--pink, #FB5FAB); }
.prod-wish svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.prod-wish.wished svg { fill: currentColor; }

/* ── QUICK VIEW BUTTON ────────────────────────────────────── */
.prod-qv {
  background: rgba(255,252,254,0.92);
  border: none; cursor: pointer;
  width: 36px; height: 36px;
  border-radius: 3px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--dark, #1A0A12); transition: all 0.25s;
}
.prod-qv:hover { color: var(--pink, #FB5FAB); }
.prod-qv svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ── PRODUCT INFO ─────────────────────────────────────────── */
.prod-info { padding: 10px 2px 0; }
.prod-name {
  font-family: var(--ff-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.25;
  margin-bottom: 4px;
  color: var(--dark, #1A0A12);
}
.prod-price-row { display: flex; align-items: center; gap: 6px; }
.prod-price {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--pink-deep, #D43A88);
  letter-spacing: 0.02em;
}
.prod-price del {
  color: var(--warm-gray, #A8789A);
  font-size: 0.78rem;
  margin-right: 4px;
  font-weight: 300;
}

/* ── WOOCOMMERCE GALLERY — PNG transparente ────────────────── */
/* Producto individual: galería con fondo crema-rosado */
.woocommerce-product-gallery {
  background: linear-gradient(160deg, #FFF5FB 0%, #FEF0F8 45%, #F9E8F3 100%) !important;
  border-radius: 10px;
  overflow: hidden;
}
.woocommerce-product-gallery__image img {
  object-fit: contain !important;
  padding: 20px !important;
  background: transparent !important;
}
.woocommerce-product-gallery__image img[src$=".png"] {
  filter: drop-shadow(0 8px 24px rgba(26,10,18,0.12));
}

/* ── COLLECTION CARD IMAGES (homepage grid) ────────────────── */
.coll-img-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 6px;
}
/* Para URLs de PNG en background-image inline */
.coll-img-wrap [style*=".png"] .coll-img {
  background-size: contain !important;
  background-color: #FEF0F8 !important;
}

/* ── LIGHTBOX OVERLAY para PNGs ───────────────────────────── */
.woocommerce-product-gallery__trigger {
  background: rgba(26,10,18,0.06) !important;
  border-radius: 50% !important;
}

/* ── RESPONSIVE TWEAKS ────────────────────────────────────── */
@media (max-width: 480px) {
  .prod-img-main { padding: 8px; }
  .prod-name     { font-size: 0.78rem; }
  .prod-price    { font-size: 0.82rem; }
  .prod-actions  { gap: 4px; }
  .prod-atc      { font-size: 0.55rem; padding: 8px 6px; }
  .prod-wish,
  .prod-qv       { width: 32px; height: 32px; }
}


/* ═══════════════════════════════════════════════════════════
   LOGO STYLES — Aplicado en header, splash, footer y móvil
   ═══════════════════════════════════════════════════════════ */

/* Footer logo imagen */
.foot-logo-img {
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity var(--ease-smooth, 0.25s);
  margin-bottom: 14px;
}
.foot-logo-img:hover { opacity: 1; }

/* Header logo imagen (complementa .hdr-logo-img ya definido) */
.hdr-logo-img {
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: opacity 0.25s;
}
.hdr-logo:hover .hdr-logo-img { opacity: 0.82; }

/* Menú móvil logo */
.mob-logo-wrap {
  padding: 22px 24px 12px;
  border-bottom: 1px solid rgba(26,10,18,0.07);
  margin-bottom: 6px;
}
.mob-logo-img {
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ── LOGO FIX — fixed size, no WooCommerce override ── */
.hdr-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  max-width: 200px !important;
  width: auto !important;
}
.hdr-logo-real {
  height: 36px !important;
  width: auto !important;
  max-width: 200px !important;
  display: block !important;
  object-fit: contain !important;
  font-size: 0 !important;       /* prevent font-size inheritance */
  line-height: 0 !important;
  flex-shrink: 0 !important;
}
/* Prevent WooCommerce page styles from affecting header logo */
.woocommerce .hdr-logo-real,
.woocommerce-page .hdr-logo-real,
.single-product .hdr-logo-real,
.product-template-default .hdr-logo-real {
  height: 36px !important;
  width: auto !important;
  max-width: 200px !important;
  font-size: 0 !important;
}

/* ── UNIVERSAL PRODUCT IMAGE ZOOM (todas las grillas) ── */
.prod-img-wrap img,
.prod-img-wrap .prod-img-main {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}
.prod-card:hover .prod-img-wrap img,
.prod-card:hover .prod-img-main {
  transform: scale(1.07) !important;
}
/* WooCommerce native product loops */
.woocommerce ul.products li.product:hover img,
.woocommerce-page ul.products li.product:hover img {
  transform: scale(1.05) translateY(-3px) !important;
}

/* ═══════════════════════════════════════════════════════════
   WOOCOMMERCE OVERRIDES — Precio EUR + Botón Carrito
   ═══════════════════════════════════════════════════════════ */

/* Precio en euros — color de marca */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
span.price,
.prod-price .woocommerce-Price-amount {
    color: var(--pink-deep, #D43A88) !important;
    font-weight: 500 !important;
}

/* Precio tachado (sale) */
.price del .woocommerce-Price-amount,
del .woocommerce-Price-amount {
    color: var(--warm-gray, #A8789A) !important;
    font-size: 0.85em !important;
    font-weight: 300 !important;
}

/* Add to Cart — botón de WooCommerce con estilo bebreeze */
.single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button,
button.single_add_to_cart_button {
    background: var(--pink, #FB5FAB) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: var(--ff-body, 'Jost', sans-serif) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 14px 28px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background 0.25s, transform 0.2s !important;
    margin-bottom: 10px !important;
}
.single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button.button:hover {
    background: var(--pink-deep, #D43A88) !important;
    transform: translateY(-1px) !important;
}

/* Quantity input en WooCommerce single product */
.woocommerce .quantity .qty {
    border: 1.5px solid var(--pink-light, #FDD5EC) !important;
    border-radius: 6px !important;
    height: 44px !important;
    text-align: center !important;
    font-size: 1rem !important;
    color: var(--dark, #1A0A12) !important;
    width: 64px !important;
}
.woocommerce form.cart {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Responsive: stack en móvil */
@media (max-width: 768px) {
    .woocommerce form.cart {
        flex-direction: column !important;
    }
    .woocommerce .quantity .qty {
        width: 100% !important;
    }
}

/* ─── SINGLE PRODUCT — layout responsivo ─── */
@media (max-width: 768px) {
    .bb-section div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .bb-section div[style*="position:sticky"] {
        position: relative !important;
        top: 0 !important;
    }
}

/* ─── WC breadcrumb - hide default, usamos el nuestro ─── */
.woocommerce .woocommerce-breadcrumb { display: none !important; }

/* ─── WC tabs (descripción, valoraciones) ─── */
.woocommerce-tabs .tabs li a {
    font-family: var(--ff-body, 'Jost', sans-serif) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--warm-gray, #A8789A) !important;
}
.woocommerce-tabs .tabs li.active a {
    color: var(--pink-deep, #D43A88) !important;
    border-bottom-color: var(--pink, #FB5FAB) !important;
}

/* ─── Product image not found: hide WC placeholder ─── */
.woocommerce-product-gallery__image img[src*="woocommerce-placeholder"] {
    display: none !important;
}
.bb-cat-img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* ═══════════════════════════════════════════════════════════════
   SUMMER EDIT 2026 — page-specific responsive styles
   ═══════════════════════════════════════════════════════════════ */

/* Filtros bar sticky en móvil */
@media(max-width:640px){
  /* Filter bar stacks neatly */
  #summer-products [style*="position:sticky"]{
    top: var(--top,64px);
    flex-direction: column;
    align-items: flex-start;
  }
  /* Editorial 3-col → 2-col on mobile */
  div[style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns: repeat(2,1fr) !important;
  }
  /* Trust bar → single col */
  div[style*="grid-template-columns:repeat(3,1fr)"].trust-bar{
    grid-template-columns: 1fr !important;
  }
}
@media(max-width:400px){
  div[style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns: repeat(2,1fr) !important;
  }
}

/* ═══ General mobile polish ═══════════════════════════════════
   Prevents any horizontal scroll on 320-480px               */
@media(max-width:480px){
  .bb-section{ padding-left:16px !important; padding-right:16px !important; }
  .coll-grid  { gap: 6px; }
  .prod-grid  { gap: 10px; }
  .hero-h1    { font-size: clamp(2.4rem,11vw,4rem) !important; }
  .ed-wrap    { flex-direction:column; }
  .ed-img     { min-height: 280px; }
  body        { overflow-x:hidden; }
}

/* ═══════════════════════════════════════════════════════════════
   PROBLEMA 7 — UNIFORM PRODUCT IMAGE HEIGHTS
   All catalog images get a consistent fixed height
   ═══════════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img,
.prod-img-main {
  width: 100% !important;
  height: 320px !important;
  object-fit: cover !important;
  object-position: top center !important;
}
/* PNG products: contain + pink gradient bg */
.prod-img-main[src$=".png"] {
  object-fit: contain !important;
  object-position: center !important;
}

/* Responsive height on mobile */
@media(max-width:640px){
  .woocommerce ul.products li.product a img,
  .woocommerce ul.products li.product img,
  .prod-img-main { height: 240px !important; }
}
@media(max-width:400px){
  .prod-img-main { height: 200px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED PRODUCT SIMPLE BLOCK — responsive
   ═══════════════════════════════════════════════════════════════ */
.pd-wrap .bb-section > div[style*="grid-template-columns:1fr 1fr"] {
  grid-template-columns: 1fr 1fr;
}
@media(max-width:768px){
  .pd-wrap .bb-section > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REMOVE DEAD PAGES FROM MENU — Resort Wear → swimwear redirect
   ═══════════════════════════════════════════════════════════════ */
/* No visible changes needed — handled in PHP */


/* ════════════════════════════════════════════
   BUSCADOR HEADER — Bebreeze (ACCIÓN 11)
   ════════════════════════════════════════════ */
.bb-nav-search {
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  opacity: 0.75;
  transition: opacity 0.2s ease;
  text-decoration: none;
}
.bb-nav-search:hover { opacity: 1; }
.bb-nav-search svg { display: block; }

/* ════════════════════════════════════════════
   IMÁGENES UNIFORMES EN CATÁLOGOS — Bebreeze (ACCIÓN 13)
   ════════════════════════════════════════════ */
.woocommerce ul.products li.product a img,
.bb-product-grid .product-img,
.bb-product-card img,
.product-thumbnail img,
ul.products li.product .woocommerce-loop-product__link img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 4px;
}

/* Cards de producto con altura uniforme */
.woocommerce ul.products li.product,
.bb-product-card {
  display: flex;
  flex-direction: column;
}

/* Responsive: ajuste en móvil */
@media (max-width: 600px) {
  .woocommerce ul.products li.product a img,
  .bb-product-grid .product-img {
    height: 260px;
  }
}


/* ════════════════════════════════════════════════════════════════
   BEBREEZE v7 — BCV PRICES + CHECKOUT REDESIGN + MOBILE CTA
   ════════════════════════════════════════════════════════════════ */

/* ── BCV PRICE BADGE ─────────────────────────────────────────── */
.bb-bs-price {
  display: inline-block;
  font-size: .72rem;
  font-weight: 500;
  color: #9C1B5E;
  opacity: .88;
  margin-top: 2px;
  transition: color .3s;
}

.bb-price-block .bb-bs-conversion {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.bb-price-block .bb-bs-price {
  font-size: .88rem;
  font-weight: 600;
  color: var(--pink-deep, #9C1B5E);
  background: rgba(251,95,171,.08);
  border: 1px solid rgba(251,95,171,.18);
  border-radius: 4px;
  padding: 3px 8px;
}

.bb-tasa-tag {
  font-size: .62rem;
  color: rgba(156,27,94,.55);
  letter-spacing: .06em;
}

/* Grid product card bs price */
.prod-price-row .bb-bs-price[data-eur] {
  display: block;
  font-size: .68rem;
  color: #9C1B5E;
  margin-top: 2px;
  opacity: .8;
  transition: opacity .3s;
}

/* ── STICKY BOTTOM CTA — PRODUCT PAGE ───────────────────────── */
.bb-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: #fff;
  border-top: 1.5px solid #fde8f3;
  box-shadow: 0 -6px 28px rgba(0,0,0,.1);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: none;
}

@media (max-width: 780px) {
  .bb-sticky-cta { display: block; }
}

.bb-sticky-cta.visible { transform: translateY(0); }

.bb-sticky-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 14px;
  max-width: 600px;
  margin: 0 auto;
}

.bb-sticky-info {
  flex: 1;
  min-width: 0;
}

.bb-sticky-name {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--dark, #1A0A12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-sticky-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--pink-deep, #9C1B5E);
  margin-top: 2px;
}

.bb-sticky-price small {
  font-size: .68rem;
  font-weight: 400;
  color: rgba(156,27,94,.65);
}

.bb-sticky-btn {
  flex-shrink: 0;
  padding: 13px 22px;
  background: linear-gradient(135deg, #FB5FAB, #D43A88);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(251,95,171,.4);
  transition: transform .2s, box-shadow .2s;
  display: inline-flex;
  align-items: center;
}

.bb-sticky-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 24px rgba(251,95,171,.5);
  color: #fff;
}

/* ── CHECKOUT V2 LAYOUT ──────────────────────────────────────── */
.bb-checkout-v2 {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter, 24px) 100px;
}

/* Trust bar */
.bb-trust-bar {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 20px;
  margin: 28px 0 32px;
  background: linear-gradient(135deg, rgba(251,95,171,.06), rgba(212,58,136,.04));
  border: 1px solid rgba(251,95,171,.15);
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--pink-deep, #9C1B5E);
  letter-spacing: .04em;
}

/* 2-column grid on desktop */
.bb-checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}

@media (max-width: 860px) {
  .bb-checkout-grid {
    grid-template-columns: 1fr;
  }
  .bb-checkout-summary-col {
    order: -1; /* Summary on top on mobile */
  }
}

/* Form column */
.bb-checkout-form-col { min-width: 0; }

/* Checkout header */
.bb-checkout-header {
  text-align: center;
  margin-bottom: 36px;
}

.bb-checkout-eyebrow {
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--pink, #FB5FAB);
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
}

.bb-checkout-title {
  font-family: var(--ff-display, serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 300;
  line-height: 1.1;
  margin: 0;
}

.bb-checkout-title em { color: var(--pink, #FB5FAB); }

/* ── BCV CARD — CHECKOUT ─────────────────────────────────────── */
.bb-bcv-card {
  background: linear-gradient(135deg, #1A0A12 0%, #2D0F1E 100%);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 28px;
  border: 1px solid rgba(251,95,171,.2);
  position: relative;
  overflow: hidden;
}

.bb-bcv-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(251,95,171,.7);
  margin-bottom: 14px;
  font-weight: 700;
}

.bb-bcv-dot {
  width: 7px;
  height: 7px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 6px #4ade80;
  animation: bbPulse 2s infinite;
  flex-shrink: 0;
}

@keyframes bbPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(1.3); }
}

.bb-bcv-rate-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.bb-bcv-rate-text {
  font-family: var(--ff-display, serif);
  font-size: 1.8rem;
  color: #fff;
  font-weight: 300;
}

.bb-bcv-rate-value {
  font-family: var(--ff-display, serif);
  font-size: 2.2rem;
  color: var(--pink, #FB5FAB);
  font-style: italic;
  font-weight: 500;
  transition: color .3s;
}

.bb-bcv-date {
  font-size: .65rem;
  color: rgba(255,200,230,.45);
  margin-bottom: 24px;
}

.bb-total-bs-wrap {
  background: rgba(251,95,171,.12);
  border: 1px solid rgba(251,95,171,.25);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

.bb-total-bs-label {
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,200,230,.6);
  margin-bottom: 8px;
}

.bb-total-bs-amount {
  font-family: var(--ff-display, serif);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: #fff;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 6px;
  transition: all .4s ease;
}

.bb-total-bs-sub {
  font-size: .7rem;
  color: rgba(255,200,230,.45);
}

/* ── STICKY SUMMARY COLUMN ───────────────────────────────────── */
.bb-summary-sticky {
  position: sticky;
  top: calc(var(--top, 72px) + 24px);
  background: #fff9fc;
  border: 1.5px solid #fde8f3;
  border-radius: 16px;
  padding: 28px 24px;
}

.bb-summary-title {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pink, #FB5FAB);
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #fde8f3;
}

.bb-summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #fde8f3;
}

.bb-summary-item-img-wrap {
  position: relative;
  flex-shrink: 0;
}

.bb-summary-item-img-wrap img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.bb-summary-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--pink, #FB5FAB);
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.bb-summary-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
}

.bb-summary-item-info span {
  color: var(--dark, #1A0A12);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-summary-item-info strong {
  color: var(--pink-deep, #9C1B5E);
  font-weight: 700;
  flex-shrink: 0;
}

.bb-summary-divider {
  height: 1px;
  background: #fde8f3;
  margin: 12px 0;
}

.bb-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: #9C1B5E;
  margin-bottom: 6px;
}

.bb-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: .95rem;
  font-weight: 700;
  color: var(--dark, #1A0A12);
  padding-top: 10px;
}

.bb-summary-bs-row {
  margin-top: 16px;
  background: linear-gradient(135deg, #1A0A12, #2D0F1E);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.bb-summary-bs-amount {
  font-family: var(--ff-display, serif);
  font-size: 1.6rem;
  color: #fff;
  font-weight: 300;
  margin-bottom: 4px;
  transition: all .3s;
}

.bb-summary-tasa {
  font-size: .62rem;
  color: rgba(251,95,171,.65);
  letter-spacing: .06em;
}

.bb-summary-trust {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.bb-summary-trust div {
  font-size: .68rem;
  color: rgba(156,27,94,.7);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── MOBILE STICKY PAY CTA — CHECKOUT ───────────────────────── */
.bb-mobile-pay-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9100;
  background: #fff;
  border-top: 2px solid #fde8f3;
  box-shadow: 0 -8px 32px rgba(0,0,0,.12);
  padding: 12px 20px 16px;
  display: none;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

@media (max-width: 780px) {
  .bb-mobile-pay-cta { display: flex; align-items: center; gap: 12px; }
  .bb-checkout-summary-col { display: none; } /* Hide sticky col on mobile */
}

.bb-mobile-pay-cta.visible { transform: translateY(0); }

.bb-mobile-pay-info { flex: 1; min-width: 0; }

.bb-mobile-pay-label {
  display: block;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #9C1B5E;
  margin-bottom: 2px;
}

.bb-mobile-pay-eur {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark, #1A0A12);
  line-height: 1.2;
}

.bb-mobile-pay-bs {
  display: block;
  font-size: .72rem;
  color: #9C1B5E;
  opacity: .8;
}

.bb-mobile-pay-btn {
  flex-shrink: 0;
  padding: 14px 24px;
  background: linear-gradient(135deg, #FB5FAB, #D43A88);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(251,95,171,.45);
  transition: transform .2s, box-shadow .2s;
}

.bb-mobile-pay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(251,95,171,.55);
}

/* Submit button upgrade */
#bb-pago-submit {
  font-size: .88rem !important;
  padding: 20px 28px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(251,95,171,.45) !important;
  letter-spacing: .1em !important;
  gap: 12px !important;
  position: relative;
  overflow: hidden;
}

#bb-pago-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);
  pointer-events: none;
}

/* ── RESPONSIVE TWEAKS ───────────────────────────────────────── */
@media (max-width: 600px) {
  .bb-trust-bar { gap: 10px; font-size: .65rem; }
  .bb-checkout-v2 { padding-bottom: 120px; }
  .bb-bcv-rate-value { font-size: 1.8rem; }
  .bb-total-bs-amount { font-size: 1.6rem; }
}


/* ── SPINNER ANIMATION (checkout submit btn) ── */
@keyframes bbSpinAnim {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.bb-spin {
  display: inline-block;
  animation: bbSpinAnim .8s linear infinite;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════
   BEBREEZE v8 — PAYMENT METHOD BUTTONS + PRICING ENGINE UI
   ════════════════════════════════════════════════════════════════ */

/* ── EUR price ── */
.bb-price-eur {
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--pink-deep, #9C1B5E);
  line-height: 1.1;
  margin-bottom: 6px;
}

/* ── Bs conversion row ── */
.bb-price-block .bb-bs-conversion {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}
.bb-price-block .bb-bs-price {
  font-size: .92rem;
  font-weight: 600;
  color: var(--pink-deep, #9C1B5E);
  background: rgba(251,95,171,.08);
  border: 1px solid rgba(251,95,171,.18);
  border-radius: 4px;
  padding: 3px 10px;
  transition: all .3s ease;
}
.bb-tasa-tag { font-size: .62rem; color: rgba(156,27,94,.5); letter-spacing: .05em; }

/* ── Payment method section ── */
.bb-payment-methods {
  margin-top: 4px;
  margin-bottom: 22px;
}
.bb-pay-methods-label {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--warm-gray, #8a7a82);
  margin-bottom: 10px;
  font-weight: 600;
}
.bb-pay-methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

/* ── Individual pay button ── */
.bb-pay-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1.5px solid #fde8f3;
  border-radius: 10px;
  background: #fff9fc;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
  font-family: inherit;
  text-align: center;
  min-width: 0;
}
.bb-pay-btn:hover {
  border-color: var(--pink, #FB5FAB);
  background: rgba(251,95,171,.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(251,95,171,.18);
}
.bb-pay-btn:active { transform: translateY(0); }

.bb-pay-icon {
  font-size: 1.3rem;
  line-height: 1;
  display: block;
}
.bb-pay-name {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warm-gray, #8a7a82);
  display: block;
}
.bb-pay-amount {
  font-size: .82rem;
  font-weight: 700;
  color: var(--dark, #1A0A12);
  display: block;
  white-space: nowrap;
  transition: color .3s;
}

/* Color accent per method */
.bb-pay-btn--movil   .bb-pay-amount { color: #1A7A40; }
.bb-pay-btn--zinli   .bb-pay-amount { color: #1A5280; }
.bb-pay-btn--binance .bb-pay-amount { color: #B78628; }

.bb-pay-btn--movil:hover   { border-color: #25D366; background: rgba(37,211,102,.05); }
.bb-pay-btn--zinli:hover   { border-color: #2980B9; background: rgba(41,128,185,.05); }
.bb-pay-btn--binance:hover { border-color: #F0B90B; background: rgba(240,185,11,.05); }

/* ── Tasa activa row ── */
.bb-pay-tasa-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .65rem;
  color: rgba(156,27,94,.6);
  margin-top: 4px;
}
.bb-pay-tasa-dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 5px #4ade80;
  animation: bbPulse 2s infinite;
  flex-shrink: 0;
}
.bb-tasa-ts {
  font-size: .58rem;
  color: rgba(156,27,94,.4);
}

/* ── Mobile responsive ── */
@media (max-width: 480px) {
  .bb-pay-methods-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .bb-pay-btn { padding: 10px 6px; }
  .bb-pay-icon { font-size: 1.1rem; }
  .bb-pay-amount { font-size: .75rem; }
}

/* ── Pricing Engine updating animation ── */
.bb-bs-price.updating {
  opacity: .5;
  transition: opacity .2s;
}

/* Product grid card Bs price */
.prod-price-row .bb-bs-price[data-eur] {
  display: block;
  font-size: .7rem;
  color: #9C1B5E;
  margin-top: 3px;
  font-weight: 500;
  opacity: .85;
}


/* ── CHECKOUT: Selector de método de pago ── */
.bb-metodo-selector {
  margin-bottom: 28px;
  padding: 20px;
  background: #fff9fc;
  border: 1.5px solid #fde8f3;
  border-radius: 14px;
}
.bb-metodo-label {
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pink, #FB5FAB);
  font-weight: 700;
  margin-bottom: 14px;
}
.bb-metodo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.bb-metodo-opt { cursor: pointer; }
.bb-metodo-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bb-metodo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border: 2px solid #fde8f3;
  border-radius: 12px;
  background: #fff;
  transition: border-color .2s, background .2s, box-shadow .2s;
  text-align: center;
}
.bb-metodo-opt input:checked + .bb-metodo-card {
  border-color: var(--pink, #FB5FAB);
  background: rgba(251,95,171,.05);
  box-shadow: 0 0 0 3px rgba(251,95,171,.12);
}
.bb-metodo-ico { font-size: 1.5rem; }
.bb-metodo-name {
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--warm-gray, #8a7a82);
}
.bb-metodo-amount .bb-pay-amount {
  font-size: .82rem;
  font-weight: 700;
  color: var(--pink-deep, #9C1B5E);
  margin-top: 2px;
}
.bb-metodo-tasa {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .65rem;
  color: rgba(156,27,94,.6);
}
@media (max-width: 480px) {
  .bb-metodo-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .bb-metodo-card { padding: 10px 6px; }
}

/* ── FOOTER LOGO FIX — tamaño consistente en todas las páginas ── */
.bb-foot-logo-img,
footer .bb-foot-logo-img,
#bb-footer img.bb-foot-logo-img {
  height: auto !important;
  width: auto !important;
  max-width: 160px !important;
  max-height: 80px !important;
  object-fit: contain !important;
}
@media (max-width: 600px) {
  .bb-foot-logo-img { max-width: 120px !important; max-height: 60px !important; }
}


/* ════════════════════════════════════════════════════════════
   BEBREEZE IMAGE OPTIMIZATION — v2.0 (Fases 5-9)
   • Fallback styling
   • Lazy load transitions
   • Responsive picture elements
   ════════════════════════════════════════════════════════════ */

/* Fallback image styling */
.bb-img-fallback {
  opacity: 0.55;
  filter: grayscale(0.3);
}

/* Smooth lazy load reveal */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img[loading="lazy"].bb-loaded,
img[loading="lazy"][src] {
  opacity: 1;
}

/* Picture element reset */
picture {
  display: contents;
}
picture img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Product image aspect ratio lock — prevents layout shift (CLS) */
.prod-img-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
}
.prod-img-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Hero image preload shimmer */
.hero-bg {
  background-color: #1A0A12;
  background-size: cover;
  background-position: center top;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.04) 50%, transparent 75%);
  animation: bb-shimmer 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bb-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Responsive image sizes */
@media (max-width: 768px) {
  .coll-img { min-height: 340px !important; }
  .prod-img-wrap { aspect-ratio: 1/1; }
}

/* Social icon SVG fix (Fase 6 — footer icons) */
.bb-foot-social-link svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  vertical-align: middle;
}
.bb-pay-modal-logo-txt {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark, #1A0A12);
  padding: 4px 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   BEBREEZE — OPTIMIZACIÓN CRÍTICA v8.0
   Tarea 1: Botones móviles · Tarea 3: Rendimiento · Tarea 4: Accesibilidad
   ═══════════════════════════════════════════════════════════════ */

/* ── TAREA 1: CORRECCIÓN BOTONES MÓVILES ─────────────────────
   Problema: prod-actions con position:absolute sube encima de la imagen.
   Solución: En móvil, sacar del flujo absoluto y colocarlo debajo. */

@media (max-width: 768px) {

  /* La tarjeta se convierte en columna normal (no relativo para absolute) */
  .prod-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* El wrapper de imagen NO debe contener los botones */
  .prod-img-wrap {
    position: relative !important;
    overflow: hidden !important;
    /* Asegurar que los botones no queden dentro */
    flex-shrink: 0;
  }

  /* ── BOTONES: sacar del overlay absoluto, fluir debajo de la imagen ── */
  .prod-actions {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    background: none !important;
    background-image: none !important;
    padding: 8px 4px 4px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    z-index: auto !important;
    /* Siempre visible en móvil */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Botón "Añadir al carrito" — tamaño táctil mínimo 48px */
  .prod-atc {
    flex: 1 !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
    font-size: 0.58rem !important;
    border-radius: 6px !important;
    background: var(--pink, #FB5FAB) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .prod-atc:hover,
  .prod-atc:active {
    background: var(--pink-deep, #D43A88) !important;
    color: #fff !important;
  }

  /* Botón de wishlist (corazón) — tamaño táctil mínimo 44x44px */
  .prod-wish {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    background: var(--pink-pale, #FEF0F8) !important;
    border: 1px solid rgba(251,95,171,0.25) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--dark, #1A0A12) !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
  }
  .prod-wish svg {
    width: 16px !important;
    height: 16px !important;
  }
  .prod-wish.wished,
  .prod-wish:active {
    background: var(--pink-light, #FDD5EC) !important;
    color: var(--pink, #FB5FAB) !important;
  }
  .prod-wish.wished svg { fill: currentColor !important; }

  /* Botón quick view — también tamaño táctil */
  .prod-qv {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    background: var(--pink-pale, #FEF0F8) !important;
    border: 1px solid rgba(251,95,171,0.25) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--dark, #1A0A12) !important;
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
  }
  .prod-qv svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Info de producto debajo de los botones */
  .prod-info {
    padding: 6px 2px 4px !important;
  }
}

/* ── TAREA 1 + 4: YITH WISHLIST — reposicionar en móvil ──────
   Si se usa el plugin YITH WooCommerce Wishlist, su botón del
   corazón también puede aparecer flotando sobre la imagen. */
@media (max-width: 768px) {
  .yith-wcwl-add-to-wishlist,
  .yith-wcwl-add-button,
  div.yith-wcwl-add-to-wishlist {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--pink-pale, #FEF0F8) !important;
    border: 1px solid rgba(251,95,171,0.25) !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }
  .yith-wcwl-add-to-wishlist a,
  .yith-wcwl-add-button a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: var(--dark, #1A0A12) !important;
    text-decoration: none !important;
    font-size: 0 !important; /* ocultar el texto "Añadir a favoritos" */
  }
  /* Icono del corazón YITH */
  .yith-wcwl-add-to-wishlist .yith-wcwl-icon,
  .yith-wcwl-add-button .yith-wcwl-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
}

/* ── TAREA 3: RENDIMIENTO — Splash screen ≤ 300ms ────────────
   La animación original dura ~1.6s. La reducimos a 0.3s max. */
#bb-loader {
  /* Máximo 300ms de duración total */
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}
.bb-splash-logo {
  animation: bbSplashIn 0.28s ease both !important;
}
.bb-splash-tagline {
  animation: bbSplashIn 0.3s 0.05s ease both !important;
}
.bb-splash-bar {
  animation: bbSplashIn 0.28s ease both !important;
}
.bb-splash-bar::after {
  animation: bbBarSlide 0.3s ease forwards !important;
}
/* La cartera animada original (otro loader) también */
.loader-bar {
  animation: loadBar 0.3s ease forwards !important;
}

/* ── TAREA 3: RENDIMIENTO — Hero image fetch priority ────────
   La imagen del hero debe cargarse con prioridad alta.
   (También se aplica desde PHP — aquí como refuerzo CSS) */
.hero-bg,
.bb-hero-img,
section.hero img:first-child,
.hero img[fetchpriority="high"] {
  /* Carga prioritaria: sin lazy */
  content-visibility: auto;
}

/* ── TAREA 4: ACCESIBILIDAD — Focus visible (WCAG 2.2) ───────
   Todos los elementos interactivos deben tener un indicador
   de foco visible. Ratio de contraste cumple 3:1 sobre
   fondos tanto claros como oscuros. */
*:focus-visible {
  outline: 2.5px solid #FB5FAB !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}
/* Anular el outline nulo anterior */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.mob-link:focus-visible,
.hdr-link:focus-visible,
.prod-atc:focus-visible,
.prod-wish:focus-visible,
.prod-qv:focus-visible {
  outline: 2.5px solid #FB5FAB !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(251,95,171,0.22) !important;
  border-radius: 3px;
}
/* En fondos oscuros, usar outline blanco */
#bb-loader *:focus-visible,
.mob-logo-wrap *:focus-visible,
#bb-footer *:focus-visible {
  outline-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.2) !important;
}

/* ── TAREA 4: ACCESIBILIDAD — Tamaños táctiles mínimos ───────
   Todos los botones e iconos del header: mínimo 44×44px (WCAG 2.5.5) */
.hdr-icon {
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.hdr-burger {
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}
/* Links del menú móvil: suficientemente grandes */
.mob-link {
  min-height: 52px !important;
  padding: 14px 28px !important;
  display: flex !important;
  align-items: center !important;
}
/* Footer del menú móvil */
.mob-footer a {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 0 !important;
}

/* ── TAREA 4: ACCESIBILIDAD — Contraste de texto ─────────────
   El rosa claro (#FC7DBB, #FDD5EC) sobre blanco no pasa 4.5:1.
   Usamos el rosa oscuro (#D43A88) para texto pequeño. */
.prod-badge.badge-new {
  /* #1A0A12 sobre #FB5FAB ≈ ratio 4.9:1 ✓ */
  background: var(--pink, #FB5FAB) !important;
  color: #1A0A12 !important;
}
.drop-section,
.label,
.loader-sub,
.bb-splash-tagline {
  /* Rosa sobre fondo oscuro o blanco — usar versión legible */
  color: #D43A88 !important;
}
/* En fondos oscuros, el rosa pálido tiene buen contraste */
.mob-logo-wrap + .drop-section {
  color: #FC7DBB !important;
}
/* Texto de subtítulos secundarios — mejorar contraste */
.prod-variant,
.prod-was,
.warm-gray,
.foot-tag {
  /* #7A4A6A sobre #FEF0F8 ≈ 5.2:1 ✓ */
  color: var(--warm-mid, #7A4A6A) !important;
}
/* Texto de placeholder en forms — accesibilidad */
input::placeholder,
textarea::placeholder {
  color: rgba(26,10,18,0.45) !important;
  opacity: 1 !important;
}

/* ── TAREA 3+4: Lazy loading refuerzo CSS ───────────────────
   Las imágenes que NO son el hero llevan loading="lazy" desde PHP.
   Este CSS ayuda a evitar que bloqueen el render. */
.prod-img-main[loading="lazy"],
.coll-img[loading="lazy"],
img[loading="lazy"]:not([fetchpriority="high"]) {
  /* No hay manera de forzar lazy desde CSS, pero esto 
     ayuda al browser a priorizar correctamente */
  will-change: auto;
}

/* ── TAREA 3: Splash Screen — forzar desaparición rápida ────
   Si JS falla, el splash se elimina automáticamente con CSS. */
@keyframes bbAutoHide {
  0%   { opacity: 1; pointer-events: auto; }
  85%  { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}
#bb-loader {
  animation: bbAutoHide 0.6s 0.25s ease forwards !important;
}
#bb-loader.bb-out {
  animation: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   BEBREEZE v9.0 — CORRECCIONES CRÍTICAS MÓVIL
   Problema 1: Layout descuadrado / overflow horizontal
   Problema 2: Botón de comprar encima de la imagen
   ═══════════════════════════════════════════════════════════════ */

/* ── PREVENCIÓN GLOBAL DE OVERFLOW HORIZONTAL ────────────────
   Base absoluta: nada puede salirse del ancho del viewport */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
img, video, iframe, embed, object {
  max-width: 100% !important;
}

/* ── SINGLE PRODUCT PAGE — CORRECCIÓN GRID MÓVIL ────────────
   El grid 1fr 1fr hardcodeado en single-product.php
   se sobreescribe aquí para pantallas pequeñas.
   La galería (left) aparece PRIMERO, info/ATC (right) DESPUÉS. */
@media (max-width: 768px) {

  /* El contenedor de producto pasa a una sola columna */
  .pd-wrap .bb-section > div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"][style*="align-items:start"],
  .bb-section div[style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
  }

  /* ORDEN CORRECTO: galería primero, info/ATC después */
  /* El primer hijo (galería) — mantiene order:1 */
  .bb-section div[style*="grid-template-columns:1fr 1fr"] > div:first-child {
    order: 1 !important;
    width: 100% !important;
  }
  /* El segundo hijo (info con ATC) — va después, order:2 */
  .bb-section div[style*="grid-template-columns:1fr 1fr"] > div:last-child {
    order: 2 !important;
    width: 100% !important;
    /* Quitar sticky en móvil — causa que el ATC flote arriba */
    position: static !important;
    top: auto !important;
  }

  /* Grid de thumbnails de la galería — adaptar a móvil */
  div[style*="grid-template-columns:repeat("][style*="1fr"] {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  /* Sección de breadcrumb en single product */
  .bb-section nav[aria-label*="ruta"] {
    margin-bottom: 16px !important;
    font-size: 0.68rem !important;
    flex-wrap: wrap !important;
  }
}

/* ── OVERFLOW HORIZONTAL — REGLAS ESPECÍFICAS ────────────────
   Elementos identificados como fuentes de overflow:            */
@media (max-width: 768px) {

  /* 1. Marquee announcement bar */
  #bb-announce,
  .bb-marquee {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
  .marquee-track {
    /* width:max-content es necesario para el marquee pero
       el contenedor padre tiene overflow:hidden — esto es OK.
       Sin embargo añadimos will-change para el compositor. */
    will-change: transform;
  }

  /* 2. Urgency bar — puede romperse en pantallas muy pequeñas */
  .urgency {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    text-align: center !important;
    font-size: 0.62rem !important;
  }
  .countdown-t {
    font-size: 0.82rem !important;
  }

  /* 3. Secciones bb-section con padding lateral */
  .bb-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: hidden;
  }

  /* 4. Hero — asegurar que no sobresalga */
  #bb-hero,
  .hero-bg {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* 5. Grids de colecciones — columna única si es necesario */
  .coll-grid {
    grid-template-columns: 1fr !important;
  }

  /* 6. Footer — 1 columna en móvil pequeño */
  .footer-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  /* 7. Inline style grids en páginas de categoría */
  div[style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 8. Editorial split (ed-wrap) — columna única */
  .ed-wrap {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* 9. Payment methods grid — columna única */
  .bb-pay-methods-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* 10. BCV/price blocks — no overflow */
  .bb-price-block,
  .bb-bs-conversion,
  .bb-pay-tasa-row {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* 11. Checkout — columna única */
  .bb-checkout-v2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .bb-checkout-cols {
    flex-direction: column !important;
  }

  /* 12. Grids de stats / info boxes en producto */
  div[style*="display:flex"][style*="flex-wrap:wrap"] {
    flex-wrap: wrap !important;
  }

  /* 13. Texto heroico — reducir tamaños para evitar desborde */
  .hero-h1 {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .hero-sub {
    font-size: clamp(0.82rem, 3.5vw, 1rem) !important;
    max-width: 100% !important;
  }
  .display {
    font-size: clamp(1.6rem, 7vw, 2.8rem) !important;
    word-break: break-word;
  }
  h1, h2, h3 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* 14. Tablas — scroll horizontal controlado */
  table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 15. Carrito drawer — no más ancho que la pantalla */
  .cart-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* 16. Quick view modal */
  .qv-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* 17. Inline styles con anchos fijos — override genérico */
  [style*="min-width:"] {
    min-width: 0 !important;
  }

  /* 18. Asegurar que imágenes de producto nunca rompan el layout */
  .prod-img-wrap,
  .prod-img-main,
  .coll-img-wrap,
  .coll-img {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── PROBLEMA 2: BOTÓN DE COMPRAR — ORDEN EN MÓVIL ──────────
   En single-product.php el layout es:
   <div grid 1fr 1fr>
     <div> GALERÍA </div>       ← aparece PRIMERO en HTML
     <div> INFO + ATC </div>    ← aparece SEGUNDO en HTML
   </div>
   
   Con position:sticky en el panel derecho, en algunos browsers
   el panel "sube" visualmente por encima de la galería.
   La solución: quitar sticky en móvil + asegurar order correcto. */

@media (max-width: 768px) {
  /* Cualquier elemento con position:sticky en el área de producto
     pierde ese comportamiento en móvil */
  .bb-section [style*="position:sticky"],
  div[style*="position:sticky"] {
    position: relative !important;
    top: auto !important;
  }

  /* El botón "Añadir al carrito" de WooCommerce en product page */
  #bb-atc-wrap,
  .woocommerce-variation-add-to-cart,
  .cart,
  form.cart {
    /* Asegurar que esté abajo del contenido, no flotando */
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    order: 99 !important; /* Si está en flex container, va al final */
    margin-top: 16px !important;
  }

  /* WooCommerce add-to-cart button — tamaño adecuado en móvil */
  .woocommerce .single_add_to_cart_button,
  .woocommerce button.button.alt,
  .woocommerce a.button.alt {
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Quantity input en móvil */
  .woocommerce .quantity {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  .woocommerce .quantity .qty {
    width: 100% !important;
    text-align: center !important;
  }

  /* La mini-galería de thumbnails no supera el ancho */
  #bb-main-img {
    aspect-ratio: 3/4 !important;
    width: 100% !important;
  }
  #bb-main-img img {
    width: 100% !important;
    height: 100% !important;
  }

  /* Bloques de info (confección, artesanal, envíos) */
  div[style*="display:flex"][style*="gap:12px"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    gap: 8px !important;
  }
  div[style*="flex:1"][style*="min-width:120px"] {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
}

/* ── TAMAÑOS EXTRA-PEQUEÑOS (375px) ──────────────────────────
   Pantallas de iPhone SE y similares */
@media (max-width: 390px) {

  .prod-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .prod-name {
    font-size: 0.8rem !important;
  }

  .prod-price {
    font-size: 0.78rem !important;
  }

  .hdr-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  /* Payment buttons en producto — 1 por fila */
  .bb-pay-btn {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Urgency bar aún más compacta */
  .urgency {
    font-size: 0.58rem !important;
    padding: 8px 12px !important;
  }
}

/* ── TABLET (769px – 1024px) — Validación ───────────────────
   El grid de producto funciona bien en tablet, solo ajustar gaps */
@media (min-width: 769px) and (max-width: 1024px) {
  div[style*="grid-template-columns:1fr 1fr"][style*="align-items:start"] {
    gap: clamp(20px, 4vw, 40px) !important;
  }
}


/* ── bb-pd-layout: grid producto RESPONSIVE ─────────────────
   Clases añadidas en single-product.php v9.0                */
.bb-pd-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
/* En móvil: columna única — galería primero, ATC después */
@media (max-width: 768px) {
  .bb-pd-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Galería (primer hijo) → PRIMERO */
  .bb-pd-layout > div:first-child {
    order: 1;
    width: 100%;
  }
  /* Panel de info/ATC (segundo hijo) → SEGUNDO — debajo de la galería */
  .bb-pd-layout > div:last-child,
  .bb-pd-info-panel {
    order: 2;
    width: 100%;
    position: static !important;  /* Quitar sticky */
    top: auto !important;
  }
}

/* En tablet: mantener 2 columnas pero con menos gap */
@media (min-width: 600px) and (max-width: 768px) {
  .bb-pd-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ── CORRECCIONES GRIDS INLINE EN PÁGINAS DE CATEGORÍA ──────
   Todos los grids hardcodeados en PHP se adaptan aquí.
   Usamos selectores basados en atributos style para no
   modificar el HTML de cada archivo individual.             */

@media (max-width: 768px) {

  /* page-colecciones.php: 2fr 1fr 1fr → columna única */
  div[style*="grid-template-columns:2fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    padding: 0 16px 8px !important;
  }

  /* page-colecciones.php, page-lookbook.php, page-summer-edit:
     repeat(3,1fr) → 2 columnas en móvil */
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* page-lookbook: 2fr 1fr → columna única */
  div[style*="grid-template-columns:2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* page-contacto: 1fr 1fr → columna única */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:60px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* page-envios: 1fr 1fr 1fr → 1 columna */
  div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* page-nosotras: 1fr 1fr con min-height → columna única */
  div[style*="grid-template-columns:1fr 1fr"][style*="min-height:500px"] {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  /* stats repeat(3,1fr) en nosotras → columna única */
  div[style*="grid-template-columns:repeat(3,1fr)"][style*="border-top"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* page-carteras, page-swimwear: editorial 1fr 1fr → columna */
  div[style*="grid-template-columns:1fr 1fr"][style*="background:var(--dark)"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* taxonomy-product_cat: promo banner 1fr 1fr → columna */
  div[style*="grid-template-columns:1fr 1fr"][style*="overflow:hidden"] {
    grid-template-columns: 1fr !important;
  }

  /* page-catalogo custom banner */
  .cat-custom-banner {
    grid-template-columns: 1fr !important;
    padding: 32px 20px !important;
    gap: 24px !important;
  }

  /* padding lateral de todas las secciones con var(--gutter) */
  div[style*="padding:0 var(--gutter)"],
  div[style*="padding: 0 var(--gutter)"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── OVERFLOW GLOBAL: PREVENCIÓN DE ÚLTIMO RECURSO ──────────
   Aplicado a todos los contenedores directos del body         */
@media (max-width: 768px) {
  body > *,
  #page,
  .site,
  main,
  .site-main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Asegurar que las secciones PHP no puedan causar scroll lateral */
  .bb-section,
  section,
  article,
  .bb-full {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  
  /* ==============================================
   CORRECCIÓN MENÚ MÓVIL – ESPACIO BLANCO SUPERIOR
   ============================================== */

 
/* ==============================================
   CORRECCIÓN MENÚ MÓVIL – ESPACIO BLANCO SUPERIOR
   ============================================== */
#bb-header {
    z-index: 9999 !important;
}
.mobile-menu-overlay,
.mobile-menu {
    z-index: 999999 !important;
}
.mobile-menu {
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.mob-logo-wrap {
    margin-top: 0 !important;
    padding-top: 12px !important;
    border-top: none !important;
}
body.admin-bar .mobile-menu,
body.admin-bar .mobile-menu-overlay {
    top: 0 !important;
}
body.admin-bar .mobile-menu.open {
    margin-top: 0 !important;
}
}
/* ═══════════════════════════════════════════════════════════════
   SOLUCIÓN FINAL – BOTÓN DE COMPRA DEBAJO DE LA IMAGEN EN MÓVIL
   ═══════════════════════════════════════════════════════════════ */
   
   
   
/* =============================================
   BOTÓN DE COMPRA SIEMPRE DEBAJO DE LA IMAGEN EN MÓVIL
   (Solución final: recorta la imagen por abajo en lugar de usar padding)
   ============================================= */
@media (max-width: 768px) {

    /* La tarjeta de producto no recorta lo que sobresale */
    .prod-card {
        overflow: visible !important;
    }

    /* El contenedor de la imagen se adapta */
    .prod-img-wrap {
        overflow: visible !important;
        position: relative !important;
        /* Quitamos cualquier padding-bottom que hayamos puesto antes */
        padding-bottom: 0 !important;
    }

    /* La imagen ocupa todo el contenedor MENOS 54px en la parte inferior */
    .prod-img-main {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 54px !important;   /* ← Espacio reservado para el botón */
        height: auto !important;   /* Anula height:100% u otros */
        width: 100% !important;
        object-fit: cover !important;
    }

    /* La barra de acciones se sitúa justo en el espacio inferior */
    .prod-actions {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: none !important;
        transform: none !important;
        display: flex !important;
        gap: 6px !important;
        padding: 0 4px 4px !important;
        margin: 0 !important;
        z-index: 5 !important;
        opacity: 1 !important;
        visibility: visible !important;
        /* Anula herencias de escritorio */
        grid-row: auto !important;
        grid-area: auto !important;
        align-self: auto !important;
        order: 0 !important;
    }

    /* Botón "Comprar" a todo lo ancho */
    .prod-atc {
        flex: 1 !important;
        background: var(--pink, #FB5FAB) !important;
        color: #fff !important;
        padding: 12px 8px !important;
        font-size: 0.68rem !important;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: center;
        border-radius: 6px;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    /* Botones de corazón y vista rápida */
    .prod-wish,
    .prod-qv {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        background: var(--pink-pale, #FEF0F8);
        border: 1px solid rgba(251,95,171,.25);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--dark, #1A0A12);
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Pequeño margen entre el botón y los datos del producto */
    .prod-info {
        margin-top: 6px;
    }

    /* Oculta quick view en pantallas muy pequeñas si estorba */
    @media (max-width: 400px) {
        .prod-qv {
            display: none !important;
        }
    }
}