/* ── Pro Header Builder v2 — Frontend ───────────── */
:root {
  --phb-primary: #1A3A8F; --phb-primary-txt: #fff;
  --phb-accent: #FFC107; --phb-topbar-bg: #1A3A8F;
  --phb-topbar-txt: #fff; --phb-nav-hover: #1A3A8F;
  --phb-cart-bg: #1A3A8F; --phb-cart-txt: #fff;
  --phb-header-bg: #ffffff; --phb-header-txt: #333333;
  --phb-icons: #444; --phb-max-w: 1200px; --phb-logo-h: 44px;
}

#phb-header { width:100%; font-family:inherit; background:var(--phb-header-bg, #fff); box-shadow:0 2px 12px rgba(0,0,0,0.07); }
#phb-header.phb-sticky { position:fixed; top:0; left:0; right:0; z-index:1000; }
#phb-header.phb-relative { position:relative; z-index:1000; }
/* Compensar el espacio del header fixed */
body:has(#phb-header.phb-sticky) { padding-top:var(--phb-header-h, 80px); }
#phb-header.phb-transparent { background:transparent !important; box-shadow:none !important; }
#phb-header.phb-transparent .phb-main-full { background:transparent !important; }

/* Colores del texto del header */
.phb-main-full { color:var(--phb-header-txt, #333); }
.phb-nav-link { color:var(--phb-header-txt, #555); }
.phb-nav-link:hover { color:var(--phb-nav-hover); border-color:var(--phb-nav-hover); }

/* NAV fila separada */
.phb-nav-row-full { width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; border-top:1px solid rgba(0,0,0,0.06); background:var(--phb-nav-row-bg, #1A3A8F); }
.phb-nav-row-inner { max-width:var(--phb-max-w); margin:0 auto; padding:8px 32px; display:flex; align-items:center; justify-content:center; }
.phb-nav-row-inner .phb-nav { justify-content:center; }
/* Links en la fila separada heredan el color de texto del nav row */
.phb-nav-row-inner .phb-nav-link { color:var(--phb-nav-row-txt, #ffffff); }
.phb-nav-row-inner .phb-nav-link:hover { color:var(--phb-nav-row-txt, #ffffff); background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); }
/* Botón categorías en fila separada — usa color principal para contrastar con el fondo */
.phb-nav-row-inner .phb-nav-trigger { background:var(--phb-nav-row-txt, #ffffff); color:var(--phb-nav-row-bg, #1A3A8F); }
.phb-nav-row-inner .phb-nav-trigger:hover { filter:brightness(0.92); }
/* Divider en fila separada */
.phb-nav-row-inner .phb-nav-divider { background:rgba(255,255,255,0.25); }
/* Cuando nav está en fila separada, el main es logo | [busca o vacío] | acciones */
.phb-main-inner.phb-no-nav { grid-template-columns:auto 1fr auto; }
.phb-nav-inline-empty { flex:1; }

/* Buscador grande — estilo Google, inline centrado */
.phb-search-large-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; position:relative; }
.phb-search-large-bar { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #dfe1e5; border-radius:50px; padding:10px 20px; width:var(--phb-search-w, 100%); max-width:700px; transition:box-shadow .2s, border-color .2s; cursor:text; }
.phb-search-large-bar:hover { box-shadow:0 2px 8px rgba(0,0,0,0.12); }
.phb-search-large-bar:focus-within { box-shadow:0 4px 16px rgba(0,0,0,0.15); border-color:transparent; }
.phb-search-large-bar .ti-search { font-size:20px; color:#9aa0a6; flex-shrink:0; }
.phb-search-large-bar:focus-within .ti-search { color:#1A3A8F; }
.phb-search-large-bar input { border:none; outline:none; font-size:16px; background:transparent; width:100%; color:#202124; min-width:0; }
.phb-search-large-bar input::placeholder { color:#9aa0a6; }
.phb-search-large-clear { background:none; border:none; cursor:pointer; color:#9aa0a6; padding:0; display:none; align-items:center; flex-shrink:0; }
.phb-search-large-clear.phb-visible { display:flex; }
.phb-search-large-clear .ti { font-size:20px; }
.phb-search-large-wrap .phb-search-results { position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); width:var(--phb-search-w, 100%); max-width:700px; border-radius:20px; box-shadow:0 8px 28px rgba(0,0,0,0.12); }

/* Font-size variable del NAV */
.phb-nav .phb-nav-link,
.phb-nav .phb-nav-trigger { font-size:var(--phb-nav-fs, 16px); }

/* TOPBAR */
.phb-topbar-full { background:var(--phb-topbar-bg); width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
.phb-topbar-inner { max-width:var(--phb-max-w); margin:0 auto; padding:5px 32px; display:flex; justify-content:space-between; align-items:center; font-size:12px; }
.phb-topbar-left { color:var(--phb-topbar-txt); display:flex; align-items:center; gap:5px; opacity:.9; }
.phb-topbar-right { display:flex; gap:18px; }
.phb-topbar-right a,.phb-topbar-right span { color:var(--phb-topbar-txt); text-decoration:none; display:flex; align-items:center; gap:4px; opacity:.85; transition:opacity .15s; }
.phb-topbar-right a:hover { opacity:1; }

/* MAIN */
.phb-main-full { background:#fff; border-top:1px solid #f5f5f5; border-bottom:1px solid #f0f0f0; width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
.phb-main-inner { max-width:var(--phb-max-w); margin:0 auto; padding:12px 32px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; }

/* LOGO */
.phb-logo { flex-shrink:0; display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:10px; }
.phb-logo img { max-height:var(--phb-logo-h); width:auto; max-width:240px; object-fit:contain; display:block; flex-shrink:0; }
.phb-logo-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.phb-logo-icon .ti { font-size:20px; color:#fff; }
.phb-logo-text { display:flex; flex-direction:column; line-height:1.15; }
.phb-logo-name { font-size:18px; font-weight:800; letter-spacing:.5px; }
.phb-logo-tagline { font-size:9px; color:#aaa; letter-spacing:1px; text-transform:uppercase; }

/* NAV */
.phb-nav { display:flex; align-items:center; gap:2px; justify-content:center; }
.phb-nav-item { position:relative; display:flex; align-items:center; }

/* Botón Categorías */
.phb-nav-trigger { display:flex; align-items:center; gap:6px; padding:8px 14px; font-size:var(--phb-mega-btn-fs, 14px); font-weight:var(--phb-mega-btn-fw, 500); font-style:var(--phb-mega-btn-fst, normal); color:var(--phb-mega-btn-txt, #ffffff); border:none; background:var(--phb-mega-btn-bg, var(--phb-primary)); cursor:pointer; border-radius:var(--phb-mega-btn-br, 8px); white-space:nowrap; outline:none; box-shadow:none; transition:filter .15s; -webkit-appearance:none; appearance:none; }
.phb-nav-trigger:hover { filter:brightness(1.1); }

/* Subcategorías en megamenú estilo íconos */
.phb-msic-item { display:flex; flex-direction:column; }
.phb-msic-main { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:9px; text-decoration:none; transition:background .12s; }
.phb-msic-main:hover { background:#EEF4FF; }
.phb-msic-subs { display:flex; flex-wrap:wrap; gap:4px; padding:4px 10px 8px 56px; }
.phb-msic-sub { font-size:11px; color:var(--phb-primary); text-decoration:none; background:#f0f4ff; border-radius:20px; padding:3px 10px; transition:background .12s; white-space:nowrap; }
.phb-msic-sub:hover { background:#dce8fb; }
.phb-arr { font-size:12px!important; transition:transform .22s ease; opacity:.8; }
.phb-nav-item.phb-open .phb-arr { transform:rotate(180deg); }

/* Links del nav */
.phb-nav-link { display:flex; align-items:center; gap:4px; padding:7px 14px; font-size:16px; font-weight:400; color:#555; text-decoration:none; cursor:pointer; border:1.5px solid transparent; border-radius:8px; background:none; white-space:nowrap; outline:none; box-shadow:none; -webkit-appearance:none; appearance:none; transition:border-color .15s, color .15s, background .15s; }
.phb-nav-link:hover, .phb-nav-link.phb-open { border-color:var(--phb-primary); color:var(--phb-primary); background:rgba(26,58,143,0.04); }
.phb-has-sub .phb-arr { font-size:11px!important; opacity:.45; }
.phb-has-sub.phb-open .phb-arr { transform:rotate(180deg); opacity:.7; }

/* DROPDOWN — nav links Y botón categorías */
.phb-nav-dropdown,
.phb-cat-dropdown { display:none; position:absolute; top:calc(100% + 10px); left:0; background:#fff; border:0.5px solid #e8e8e8; border-radius:14px; padding:8px; min-width:240px; box-shadow:0 12px 40px rgba(0,0,0,.1); z-index:600; animation:phb-fade-down .15s ease; }
.phb-nav-item.phb-ndd-open .phb-nav-dropdown,
.phb-nav-item.phb-ndd-open .phb-cat-dropdown { display:block; }
.phb-ndd-header { font-size:10px; font-weight:600; letter-spacing:.8px; color:#aaa; text-transform:uppercase; padding:4px 10px 8px; }
.phb-ndd-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; text-decoration:none; transition:background .12s,color .12s; cursor:pointer; }
.phb-ndd-item:hover { background:#EEF4FF; }
.phb-ndd-item:hover .phb-ndd-icon { background:var(--phb-primary); }
.phb-ndd-item:hover .phb-ndd-icon .ti { color:#fff; }
.phb-ndd-icon { width:34px; height:34px; border-radius:9px; background:#f0f4ff; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .12s; }
.phb-ndd-icon .ti { font-size:17px; color:var(--phb-primary); transition:color .12s; }
.phb-ndd-text p { font-size:13px; font-weight:500; color:#222; line-height:1.2; }
.phb-ndd-text span { font-size:11px; color:#888; }
.phb-ndd-divider { height:.5px; background:#f0f0f0; margin:5px 0; }
.phb-ndd-footer { display:flex; align-items:center; justify-content:space-between; padding:7px 10px 3px; font-size:11px; color:var(--phb-primary); text-decoration:none; cursor:pointer; }
.phb-ndd-footer:hover { opacity:.75; }
.phb-ndd-footer .ti { font-size:12px; }

/* Divider entre categorías y nav links */
.phb-nav-divider { width:1px; height:20px; background:#e8e8e8; margin:0 6px; flex-shrink:0; }

/* ACTIONS */
.phb-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.phb-icon-btn { width:42px; height:42px; border-radius:50%; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--phb-icons); text-decoration:none; transition:color .15s; }
.phb-icon-btn .ti { font-size:24px; }
.phb-icon-btn:hover { background:transparent !important; color:var(--phb-primary) !important; }
.phb-icon-btn:hover .ti { color:var(--phb-primary) !important; }

/* Icon anims */
.phb-icon-anim-bounce { transition:transform .2s; }
.phb-icon-anim-bounce:hover { transform:translateY(-4px); background:transparent !important; }
.phb-icon-anim-spin:hover .ti { animation:phb-spin .4s ease; }
@keyframes phb-spin { to { transform:rotate(360deg); } }
.phb-icon-anim-bg:hover { background:var(--phb-primary) !important; color:#fff !important; border-radius:50%; }
.phb-icon-anim-bg:hover .ti { color:#fff !important; }
.phb-icon-anim-shake:hover .ti { animation:phb-shake .35s ease; }
@keyframes phb-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }

/* CARRITO BTN */
.phb-cart-btn { display:flex; align-items:center; gap:8px; border:none; border-radius:24px; padding:10px 22px; font-size:14px; font-weight:700; cursor:pointer; position:relative; overflow:visible; }
.phb-cart-btn .ti { font-size:18px; }
.phb-cart-btn:hover { filter:brightness(1.15) !important; transform:scale(1.04) !important; }
.phb-cart-btn::before { display:none !important; }
.phb-cart-count { position:absolute; top:-8px; right:-8px; width:20px; height:20px; border-radius:50%; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; z-index:2; }

/* Fix precio WooCommerce en carrito */
.phb-cart-btn .woocommerce-Price-amount,
.phb-cart-btn .woocommerce-Price-currencySymbol { color:inherit !important; font-size:inherit !important; font-weight:inherit !important; background:none !important; }

/* Btn anims */
.phb-btn-anim-zoom { transition:transform .18s,filter .18s; } .phb-btn-anim-zoom:hover { transform:scale(1.06); filter:brightness(1.08); }
.phb-btn-anim-pulse:hover { animation:phb-pulse .5s ease; }
@keyframes phb-pulse { 0%,100%{transform:scale(1)} 40%{transform:scale(1.08)} 70%{transform:scale(0.97)} }
.phb-btn-anim-ripple { transition:filter .15s; }
.phb-btn-anim-ripple:hover { filter:brightness(1.15); }
.phb-wa-btn { display:flex; align-items:center; gap:5px; background:#25D366; color:#fff; border:none; border-radius:24px; padding:8px 14px; font-size:12px; font-weight:700; text-decoration:none; }
.phb-mobile-toggle { display:none !important; }

/* BUSCADOR */
.phb-search-wrap { position:relative; display:flex; align-items:center; }
.phb-search-box { position:absolute; right:40px; top:50%; transform:translateY(-50%); background:#fff; border:2px solid var(--phb-primary); border-radius:28px; padding:0 16px; height:38px; display:flex; align-items:center; gap:8px; width:0; overflow:hidden; opacity:0; transition:width .3s,opacity .2s; pointer-events:none; z-index:100; }
.phb-search-box.phb-open { width:280px; opacity:1; pointer-events:all; }
.phb-search-box .ti { font-size:16px; color:var(--phb-primary); flex-shrink:0; }
.phb-search-box input { border:none; outline:none; font-size:13px; background:transparent; width:100%; color:#333; }
.phb-search-box input::placeholder { color:#bbb; }
.phb-search-close { background:none; border:none; cursor:pointer; color:#aaa; padding:0; display:flex; }
.phb-search-results { position:absolute; top:calc(100% + 8px); right:0; width:340px; background:#fff; border:1px solid #e8e8e8; border-radius:14px; overflow:hidden; display:none; z-index:200; box-shadow:0 12px 40px rgba(0,0,0,.12); }
.phb-search-results.phb-open { display:block; animation:phb-fade-down .18s ease; }
.phb-sr-header { padding:8px 14px; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#aaa; border-bottom:1px solid #f5f5f5; display:flex; justify-content:space-between; }
.phb-sr-header span { font-size:11px; color:var(--phb-primary); font-weight:500; letter-spacing:0; text-transform:none; }
.phb-sr-item { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; text-decoration:none; transition:background .12s; border-bottom:1px solid #f5f5f5; }
.phb-sr-item:hover { background:#EEF4FF; }
.phb-sr-img { width:46px; height:46px; border-radius:8px; object-fit:cover; border:1px solid #eee; flex-shrink:0; }
.phb-sr-img-ph { width:46px; height:46px; border-radius:8px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.phb-sr-img-ph .ti { font-size:20px; color:#ccc; }
.phb-sr-info { flex:1; }
.phb-sr-name { font-size:12px; color:#333; margin-bottom:2px; }
.phb-sr-name b { color:var(--phb-primary); }
.phb-sr-cat { font-size:10px; color:#aaa; }
.phb-sr-price { font-size:13px; font-weight:700; color:var(--phb-primary); flex-shrink:0; }
.phb-sr-footer { padding:10px 14px; border-top:1px solid #f0f0f0; display:flex; justify-content:space-between; align-items:center; }
.phb-sr-count { font-size:11px; color:#aaa; }
.phb-sr-all { background:var(--phb-primary); color:#fff; border:none; border-radius:20px; padding:5px 14px; font-size:11px; font-weight:600; cursor:pointer; text-decoration:none; display:flex; align-items:center; gap:5px; }
.phb-sr-empty { padding:20px; text-align:center; font-size:12px; color:#aaa; }

/* MEGAMENÚ */
.phb-megamenu { display:none; position:fixed; left:0; right:0; z-index:500; }
.phb-nav-item.phb-open .phb-megamenu { display:block; }
.phb-megamenu-inner { background:#fff; border-top:2px solid var(--phb-primary); border-bottom:1px solid #e8e8e8; box-shadow:0 20px 60px rgba(0,0,0,.12); width:100%; }
.phb-mega-content { max-width:var(--phb-max-w); margin:0 auto; padding:16px 32px; box-sizing:border-box; }

/* Mega anims */
.phb-mega-anim-fade .phb-megamenu-inner { animation:phb-fade-down .22s ease both; }
.phb-mega-anim-scale .phb-megamenu-inner { animation:phb-scale-in .2s ease both; transform-origin:top; }
.phb-mega-anim-flip .phb-megamenu-inner { animation:phb-flip-in .25s ease both; transform-origin:top; }
.phb-mega-anim-slide .phb-megamenu-inner { animation:phb-slide-in .22s ease both; }
@keyframes phb-fade-down { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes phb-scale-in { from{opacity:0;transform:scaleY(.88)} to{opacity:1;transform:scaleY(1)} }
@keyframes phb-flip-in { from{opacity:0;transform:perspective(600px) rotateX(-14deg)} to{opacity:1;transform:perspective(600px) rotateX(0)} }
@keyframes phb-slide-in { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:translateX(0)} }

/* ESTILO IMAGEN */
.phb-mega-img { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.phb-msi-item { position:relative; height:160px; overflow:hidden; display:block; text-decoration:none; }
.phb-msi-item+.phb-msi-item { border-left:1px solid rgba(255,255,255,.1); }
.phb-msi-bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform .35s; }
.phb-msi-bg .ti { font-size:64px; color:rgba(255,255,255,.12); }
.phb-msi-item:hover .phb-msi-bg { transform:scale(1.08); }
.phb-msi-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.1) 55%,transparent 100%); }
.phb-msi-icon-wrap { position:absolute; top:12px; right:12px; width:32px; height:32px; background:rgba(255,255,255,.18); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.phb-msi-icon-wrap .ti { font-size:16px; color:#fff; }
.phb-msi-label { position:absolute; bottom:0; left:0; right:0; padding:12px 14px; }
.phb-msi-label span { color:#fff; font-size:13px; font-weight:700; display:block; margin-bottom:2px; }
.phb-msi-label small { color:rgba(255,255,255,.75); font-size:11px; }

/* ESTILO ÍCONOS */
.phb-mega-icons { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; padding:16px 0; }
.phb-msic-item { display:flex; align-items:flex-start; gap:12px; padding:12px; border-radius:12px; cursor:pointer; transition:background .15s,border-color .15s; border:1px solid transparent; text-decoration:none; }
.phb-msic-item:hover { background:#EEF4FF; border-color:#B5D4F4; }
.phb-msic-circle { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.phb-msic-circle .ti { font-size:22px; color:#fff; }
.phb-msic-name { font-size:13px; font-weight:700; color:#1a1a1a; margin-bottom:3px; }
.phb-msic-desc { font-size:11px; color:#888; line-height:1.4; }
.phb-msic-arrow { font-size:13px; color:#ccc; margin-top:6px; display:block; transition:color .15s,transform .15s; }
.phb-msic-item:hover .phb-msic-arrow { color:var(--phb-primary); transform:translateX(4px); }

/* ESTILO COLUMNAS */
.phb-mega-cols { display:flex; }
.phb-msc-featured { width:220px; padding:22px 18px; flex-shrink:0; display:flex; flex-direction:column; justify-content:space-between; }
.phb-msc-feat-icon { font-size:52px; color:rgba(255,255,255,.12); margin-bottom:10px; }
.phb-msc-feat-icon .ti { font-size:52px; }
.phb-msc-feat-title { font-size:17px; font-weight:800; color:#fff; line-height:1.2; margin-bottom:8px; }
.phb-msc-feat-desc { font-size:11px; color:rgba(255,255,255,.7); line-height:1.5; margin-bottom:18px; }
.phb-msc-feat-btn { border:none; border-radius:20px; padding:8px 16px; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; text-decoration:none; transition:transform .15s; }
.phb-msc-feat-btn:hover { transform:scale(1.04); }
.phb-msc-right { flex:1; padding:16px; display:grid; grid-template-columns:1fr 1fr; }
.phb-msc-col { padding:0 16px; border-right:.5px solid #f0f0f0; }
.phb-msc-col:last-child { border-right:none; }
.phb-msc-col-title { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; padding-bottom:7px; border-bottom:2px solid #EEF4FF; }
.phb-msc-link { display:flex; align-items:center; gap:7px; padding:7px 0; font-size:12px; color:#444; text-decoration:none; border-bottom:.5px solid #f5f5f5; transition:color .15s; }
.phb-msc-link:hover { color:var(--phb-primary); }
.phb-msc-link:hover .ti { color:var(--phb-primary); transform:translateX(3px); }
.phb-msc-sublink { display:flex; align-items:center; gap:6px; padding:5px 0 5px 14px; font-size:11px; color:#888; text-decoration:none; border-bottom:.5px solid #f9f9f9; transition:color .15s; }
.phb-msc-sublink:hover { color:var(--phb-primary); }

/* CARRITO DRAWER */
.phb-cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,0); pointer-events:none; z-index:10000; transition:background .3s; }
.phb-cart-overlay.phb-open { background:rgba(0,0,0,.45); pointer-events:all; }
.phb-cart-drawer { position:fixed; top:0; right:-380px; bottom:0; width:360px; background:#fff; display:flex; flex-direction:column; z-index:10001; transition:right .32s cubic-bezier(.32,0,.15,1); box-shadow:-8px 0 40px rgba(0,0,0,.12); }
.phb-cart-drawer.phb-open { right:0; }
.phb-drawer-header { padding:14px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #f0f0f0; flex-shrink:0; }
.phb-drawer-title { font-size:15px; font-weight:700; color:#1a1a1a; display:flex; align-items:center; gap:8px; }
.phb-drawer-title .ti { font-size:20px; color:var(--phb-primary); }
.phb-drawer-count { background:var(--phb-primary); color:#fff; border-radius:20px; font-size:10px; font-weight:700; padding:2px 9px; }
.phb-drawer-close { width:30px; height:30px; border-radius:50%; border:none; background:#f5f5f5; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.phb-drawer-close:hover { background:#FCEBEB; }
.phb-drawer-close .ti { font-size:16px; color:#666; }
.phb-drawer-items { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.phb-drawer-loading { display:flex; align-items:center; justify-content:center; height:100%; color:#aaa; }
.phb-drawer-loading .ti { font-size:32px; animation:phb-spin 1s linear infinite; }
.phb-drawer-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:12px; color:#aaa; }
.phb-drawer-empty .ti { font-size:52px; color:#e0e0e0; }
.phb-drawer-empty p { font-size:13px; }
.phb-di { display:flex; align-items:center; gap:10px; background:#f9f9f9; border:1px solid #eee; border-radius:12px; padding:10px; transition:opacity .25s,transform .25s; }
.phb-di.removing { opacity:0; transform:translateX(30px); }
.phb-di-img { width:56px; height:56px; border-radius:8px; object-fit:cover; border:1px solid #eee; flex-shrink:0; }
.phb-di-img-ph { width:56px; height:56px; border-radius:8px; background:#f0f0f0; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.phb-di-img-ph .ti { font-size:24px; color:#ddd; }
.phb-di-info { flex:1; }
.phb-di-name { font-size:12px; font-weight:600; color:#333; margin-bottom:2px; line-height:1.3; }
.phb-di-cat { font-size:10px; color:#aaa; margin-bottom:6px; }
.phb-di-qty { display:flex; align-items:center; gap:7px; }
.phb-qty-btn { width:24px; height:24px; border-radius:50%; border:1px solid #ddd; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; color:#555; line-height:1; transition:border-color .15s; }
.phb-qty-btn:hover { border-color:var(--phb-primary); color:var(--phb-primary); }
.phb-qty-num { font-size:13px; font-weight:700; color:#333; min-width:18px; text-align:center; }
.phb-di-price { font-size:13px; font-weight:700; color:var(--phb-primary); flex-shrink:0; }
.phb-di-del { background:none; border:none; color:#ddd; cursor:pointer; padding:0; transition:color .15s; }
.phb-di-del:hover { color:#A32D2D; }
.phb-di-del .ti { font-size:17px; }
.phb-drawer-footer { padding:14px 18px; border-top:1px solid #f0f0f0; flex-shrink:0; }
.phb-drawer-subtotal { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.phb-drawer-subtotal span { font-size:13px; color:#555; }
.phb-drawer-subtotal strong { font-size:18px; font-weight:800; color:#1a1a1a; }
.phb-drawer-checkout { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:none; border-radius:12px; padding:13px; font-size:14px; font-weight:700; cursor:pointer; color:#fff; text-decoration:none; transition:filter .15s; margin-bottom:8px; }
.phb-drawer-checkout:hover { filter:brightness(1.1); color:#fff; }
.phb-drawer-checkout .ti { font-size:17px; }
.phb-drawer-view { display:block; width:100%; text-align:center; padding:10px; border:1px solid #ddd; border-radius:12px; font-size:12px; color:#666; text-decoration:none; transition:border-color .15s,color .15s; }
.phb-drawer-view:hover { border-color:var(--phb-primary); color:var(--phb-primary); }

/* RESPONSIVE */
@media (max-width:960px) {
  .phb-logo { flex-shrink:0; }
  .phb-main-inner,
  .phb-main-inner.phb-no-nav { grid-template-columns:auto 1fr auto; padding:8px 14px; }

  /* Sin nav ni hamburguesa en móvil */
  .phb-nav { display:none !important; }
  .phb-nav-divider { display:none; }
  .phb-nav-row-full { display:none !important; }
  .phb-mobile-toggle { display:none !important; }

  /* Acciones — solo íconos */
  .phb-cart-total-txt { display:none; }
  .phb-cart-btn { padding:8px 10px; border-radius:50%; }
  .phb-wa-btn { width:36px; height:36px; border-radius:50%; padding:0; display:flex; align-items:center; justify-content:center; }

  /* Buscador fullscreen al abrirse */
  .phb-search-box.phb-open {
    position:fixed;
    top:0; left:0; right:0;
    width:100% !important;
    height:56px;
    border-radius:0;
    border:none;
    border-bottom:2px solid var(--phb-primary);
    z-index:99999;
    padding:0 16px;
    transform:none;
    background:#fff;
    box-shadow:0 4px 20px rgba(0,0,0,0.12);
  }
  .phb-search-results {
    position:fixed !important;
    top:56px; left:0; right:0;
    width:100% !important;
    border-radius:0;
    max-height:calc(100vh - 56px);
    overflow-y:auto;
    z-index:99998;
  }

  /* Topbar */
  .phb-topbar-right { display:none; }
  .phb-topbar-inner { padding:5px 14px; }
  .phb-logo-name { font-size:15px; }

  /* Carrito drawer */
  .phb-cart-drawer { width:100%; right:-100%; }
  .phb-cart-drawer.phb-open { right:0; }

  /* Megamenú */
  .phb-megamenu-inner { border:none; box-shadow:none; border-top:1px solid #f0f0f0; }
  .phb-mega-content { padding:0 12px; }
  .phb-mega-icons { grid-template-columns:1fr!important; }
  .phb-mega-img { grid-template-columns:1fr 1fr!important; }
  .phb-mega-cols { flex-direction:column!important; }
  .phb-msc-featured { width:100%!important; }
}

/* Sin espacio inferior cuando no hay fila del nav */
.phb-main-full.phb-main-no-bottom { border-bottom:none !important; }
.phb-main-full.phb-main-no-bottom .phb-main-inner { padding-bottom:0; }

/* Efectos en botones al hacer clic */
.phb-nav-trigger:active { transform:scale(0.96); }
.phb-cart-btn:active { transform:scale(0.96); }
.phb-icon-btn:active { transform:scale(0.92); background:var(--color-background-secondary); }
.phb-nav-link:active { transform:scale(0.96); }

/* WhatsApp — color oficial fijo, nunca cambia */
.phb-wa-btn { background:#25D366 !important; color:#fff !important; }
.phb-wa-btn:hover { background:#1da851 !important; }
.phb-wa-btn svg { fill:#fff !important; }

/* Íconos usan variable de color */
.phb-icon-btn { color:var(--phb-icons, #444); }
.phb-icon-btn:hover { color:var(--phb-primary); }

/* ── Efectos del NAV — usan --phb-nav-effect-color o contraste automático ── */
/* La variable --phb-ec se calcula en JS y se inyecta inline */
.phb-nav .phb-nav-link { position:relative; transition:none; }
.phb-nav .phb-nav-link:hover { transition:color .2s, background .2s, border-color .2s, opacity .15s; }

/* 1. Underline */
.phb-nav-effect-underline .phb-nav-link:hover { text-decoration:underline; text-underline-offset:3px; color:var(--phb-ec, var(--phb-nav-hover)); background:none; border:none; }

/* 2. Fill — relleno que sube */
.phb-nav-effect-fill .phb-nav-link { overflow:hidden; z-index:0; }
.phb-nav-effect-fill .phb-nav-link::before { content:''; position:absolute; inset:0; background:var(--phb-ec, var(--phb-nav-hover)); opacity:.12; transform:scaleY(0); transform-origin:bottom; transition:transform .22s ease; z-index:-1; border-radius:8px; }
.phb-nav-effect-fill .phb-nav-link:hover { color:var(--phb-ec, var(--phb-nav-hover)); background:none; border:none; }
.phb-nav-effect-fill .phb-nav-link:hover::before { transform:scaleY(1); }

/* 3. Border */
.phb-nav-effect-border .phb-nav-link:hover { outline:1.5px solid var(--phb-ec, var(--phb-nav-hover)); color:var(--phb-ec, var(--phb-nav-hover)); background:none; border:none; border-radius:8px; }

/* 4. Double-line — dos líneas que se juntan desde los extremos */
.phb-nav-effect-double-line .phb-nav-link::before,
.phb-nav-effect-double-line .phb-nav-link::after { content:''; position:absolute; bottom:2px; height:1.5px; border-radius:2px; background:var(--phb-ec, var(--phb-nav-hover)); transition:width .22s ease; width:0; }
.phb-nav-effect-double-line .phb-nav-link::before { left:14px; }
.phb-nav-effect-double-line .phb-nav-link::after { right:14px; }
.phb-nav-effect-double-line .phb-nav-link:hover { color:var(--phb-ec, var(--phb-nav-hover)); background:none; border:none; }
.phb-nav-effect-double-line .phb-nav-link:hover::before,
.phb-nav-effect-double-line .phb-nav-link:hover::after { width:calc(50% - 14px); }

/* 5. Sweep — barrido de luz */
.phb-nav-effect-sweep .phb-nav-link { overflow:hidden; z-index:0; }
.phb-nav-effect-sweep .phb-nav-link::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition:left .35s ease; z-index:-1; }
.phb-nav-effect-sweep .phb-nav-link:hover { color:var(--phb-ec, var(--phb-nav-hover)); background:none; border:none; }
.phb-nav-effect-sweep .phb-nav-link:hover::before { left:100%; }

/* 6. Highlighter — resaltador desde abajo */
.phb-nav-effect-highlighter .phb-nav-link { z-index:0; }
.phb-nav-effect-highlighter .phb-nav-link::before { content:''; position:absolute; bottom:2px; left:8px; right:8px; height:0; background:var(--phb-ec, var(--phb-nav-hover)); opacity:.2; transition:height .2s ease; z-index:-1; border-radius:2px; }
.phb-nav-effect-highlighter .phb-nav-link:hover { color:var(--phb-ec, var(--phb-nav-hover)); background:none; border:none; }
.phb-nav-effect-highlighter .phb-nav-link:hover::before { height:55%; }

/* 7. Shake */
.phb-nav-effect-shake .phb-nav-link:hover { color:var(--phb-ec, var(--phb-nav-hover)); animation:phb-nav-shake .4s ease; background:none; border:none; }
@keyframes phb-nav-shake { 0%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} 100%{transform:translateX(0)} }

/* None */
.phb-nav-effect-none .phb-nav-link:hover { color:var(--phb-ec, var(--phb-nav-hover)); background:none; border:none; }

/* ── Subcategorías megamenú íconos ── */
/* Always visible */
.phb-subs-always .phb-msic-subs { display:flex; }

/* Hover */
/* Hover — subcategorías aparecen a la derecha */
.phb-subs-hover .phb-msic-item { display:flex; flex-direction:row; align-items:stretch; position:relative; }
.phb-subs-hover .phb-msic-main { flex:1; }
.phb-subs-hover .phb-msic-subs { 
  display:flex; flex-direction:column; flex-wrap:nowrap; gap:2px;
  position:absolute; left:100%; top:0;
  background:#fff; border:0.5px solid #e8e8e8; border-radius:10px;
  padding:8px; min-width:180px;
  box-shadow:4px 4px 20px rgba(0,0,0,0.1);
  opacity:0; pointer-events:none;
  transition:none;
  z-index:10;
}
.phb-subs-hover .phb-msic-item:hover .phb-msic-subs {
  opacity:1; pointer-events:all;
  transition:opacity .15s ease;
}
.phb-subs-hover .phb-msic-sub {
  font-size:12px; padding:6px 10px; border-radius:6px; white-space:nowrap;
  background:none; color:#444;
}
.phb-subs-hover .phb-msic-sub:hover { background:#EEF4FF; color:var(--phb-primary); }

/* Click */
.phb-subs-click .phb-msic-subs { display:none; max-height:0; overflow:hidden; transition:max-height .25s ease; }
.phb-subs-click .phb-msic-item.phb-sub-open .phb-msic-subs { display:flex; max-height:200px; }
.phb-subs-click .phb-msic-toggle-arr { transition:transform .2s; }
.phb-subs-click .phb-msic-item.phb-sub-open .phb-msic-toggle-arr { transform:rotate(180deg); }

/* None */
.phb-subs-none .phb-msic-subs { display:none !important; }