/* ─────────────────────────────────────────────────────────────────────────
   Ok.station — Barra del e-commerce (reutilizable)
   -----------------------------------------------------------------------------
   Es la MISMA barra superior de la tienda (degradado + buscador + chips + carril
   de categorías), empaquetada para poder ponerla en OTRAS páginas — hoy, la ficha
   de producto (producto.php).
   Todo cuelga de `.shopbar`, un envoltorio propio, y define AQUÍ sus tokens de
   color, así que no depende de las variables locales de tienda.html ni pisa nada
   del resto del sitio. Los valores son los mismos que la barra de la tienda: si un
   día se unifican en un solo lugar, esta es la copia canónica.
   ───────────────────────────────────────────────────────────────────────── */
.shopbar {
  --sb-grad: #066CFF;   /* SIN degradado: azul plano de la marca */
  --sb-grad-brand: #066CFF;
  --sb-blue:#066CFF; --sb-blue-h:#0558CC; --sb-cyan:#00C6FF; --sb-amber:#FF8A00;
  --sb-line:#E3E8F1; --sb-muted:#5b6474; --sb-paper:#F5F8FD; --sb-ink:#12141C;
  --sb-col:1200px;   /* ancho de contenido; casa con .pdp .wrap */
  position: sticky; top: 0; z-index: 60;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Fila 1: buscador + acciones (degradado de marca) ── */
.shopbar__top { display: flex; align-items: center; gap: 10px; padding: 10px max(14px, calc((100% - var(--sb-col)) / 2)); background: var(--sb-grad); }
.shopbar__logo { flex: none; display: flex; align-items: center; text-decoration: none; }
.shopbar__logo img { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); }
.shopbar__logo :is(.logo__ok, .logo__dot, .logo__station) { color: #fff; }

.shopbar__hamb { display: none; flex-direction: column; gap: 4px; background: none; border: none; padding: 8px 7px; border-radius: 9px; flex: none; cursor: pointer; }
.shopbar__hamb span { display: block; width: 20px; height: 2.4px; background: #fff; border-radius: 2px; }
.shopbar__hamb:hover { background: rgba(255,255,255,.14); }

/* Buscador con autocompletado (mismo look que la tienda) */
.shopbar__search { flex: 1; min-width: 0; position: relative; }
.shopbar__search input { width: 100%; font: inherit; padding: 10px 14px 10px 40px; border: none; border-radius: 11px; background: #fff; color: var(--sb-ink); }
.shopbar__search input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.5); }
.shopbar__search > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--sb-muted); pointer-events: none; }
.shopbar__ac { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; box-shadow: 0 18px 50px rgba(12,20,50,.24); max-height: min(66vh,440px); overflow: hidden auto; z-index: 70; display: none; }
.shopbar__ac.show { display: block; }
.shopbar__ac-head { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sb-muted); padding: 11px 14px 5px; }
.shopbar__ac-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: none; background: none; padding: 9px 14px; cursor: pointer; font: inherit; text-decoration: none; }
.shopbar__ac-item:hover, .shopbar__ac-item.sel { background: var(--sb-paper); }
.shopbar__ac-img { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--sb-line); overflow: hidden; display: grid; place-items: center; }
.shopbar__ac-img img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.shopbar__ac-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.shopbar__ac-name { font-size: .9rem; font-weight: 600; color: var(--sb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shopbar__ac-name mark { background: #FFF0B8; color: inherit; border-radius: 3px; padding: 0 1px; }
.shopbar__ac-meta { font-size: .74rem; color: var(--sb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shopbar__ac-price { flex: none; font-weight: 800; font-size: .86rem; color: var(--sb-ink); }
.shopbar__ac-empty { padding: 16px 14px; color: var(--sb-muted); font-size: .86rem; line-height: 1.45; }

.shopbar__actions { flex: none; display: flex; align-items: center; gap: 10px; }

/* Chip de ubicación (mismo look que .tb-loc de la tienda; enlaza a /tienda#ubicacion). */
.shopbar .tb-loc { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1.5px solid transparent; border-radius: 12px; background: none; color: #fff; cursor: pointer; text-align: left; max-width: 190px; text-decoration: none; transition: border-color .15s, background .15s; }
.shopbar .tb-loc:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.shopbar .tb-loc:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.shopbar .tb-loc svg { width: 17px; height: 17px; flex: none; color: #fff; }
.shopbar .tb-loc__txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.shopbar .tb-loc small { font-size: .68rem; color: rgba(255,255,255,.75); font-weight: 600; }
.shopbar .tb-loc b { font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Chips (mismos valores que .tb-* de la tienda) */
.shopbar .tb-cuenta, .shopbar .tb-fav, .shopbar .tb-cart { flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 99px; border: 1.5px solid var(--sb-line); background: #fff; color: var(--sb-ink); font-weight: 600; font-size: .85rem; white-space: nowrap; text-decoration: none; cursor: pointer; position: relative; box-shadow: 0 4px 14px rgba(8,12,30,.16); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, border-color .15s, background .15s; }
.shopbar .tb-cuenta:hover, .shopbar .tb-fav:hover, .shopbar .tb-cart:hover { border-color: #d5deee; box-shadow: 0 12px 28px rgba(8,12,30,.24); transform: translateY(-2px); }
.shopbar .tb-cuenta > svg, .shopbar .tb-cart svg { width: 17px; height: 17px; flex: none; color: var(--sb-blue); }
/* Colchón anti-parpadeo: el botón sube al pasar el cursor; el colchón viaja al revés
   para que la zona sensible no se mueva (mismo truco que en la tienda). */
.shopbar .tb-cuenta::after, .shopbar .tb-fav::after, .shopbar .tb-cart::after, .shopbar .tb-wa::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.shopbar .tb-cuenta:hover::after, .shopbar .tb-fav:hover::after, .shopbar .tb-cart:hover::after, .shopbar .tb-wa:hover::after { transform: translateY(2px); }

/* Cuenta: chip con avatar (session-nav lo llena) */
.shopbar .tb-cuenta { box-shadow: 0 3px 10px rgba(8,12,30,.14); }
.shopbar .tb-cuenta.tb-cuenta--user { padding: 5px 10px 5px 6px; gap: 8px; }
.shopbar .tb-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--sb-grad-brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; transition: background .15s, color .15s; }
.shopbar .tb-cuenta svg.tb-caret { width: 15px; height: 15px; flex: none; color: var(--sb-muted); transition: transform .22s cubic-bezier(.34,1.56,.64,1), color .15s; }
.shopbar .tb-cuenta[aria-expanded="true"] { background: var(--sb-blue); border-color: #fff; color: #fff; box-shadow: 0 6px 18px rgba(6,108,255,.4); }
.shopbar .tb-cuenta[aria-expanded="true"] .tb-name { color: #fff; }
.shopbar .tb-cuenta[aria-expanded="true"] svg.tb-caret { color: #fff; transform: rotate(180deg); }
.shopbar .tb-cuenta[aria-expanded="true"] .tb-avatar { background: var(--sb-cyan); color: #0A2A5E; }

/* WhatsApp (verde de marca) */
.shopbar .tb-wa { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; background: #25D366; border: none; box-shadow: 0 6px 16px rgba(37,211,102,.42); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; }
.shopbar .tb-wa svg { width: 21px; height: 21px; color: #fff; transition: transform .2s; }
.shopbar .tb-wa:hover { box-shadow: 0 12px 30px rgba(37,211,102,.55); transform: translateY(-2px) scale(1.06); }
.shopbar .tb-wa:hover svg { transform: scale(1.12); }

/* Favoritos: blanco, solo ícono */
.shopbar .tb-fav { width: 40px; height: 40px; padding: 0; justify-content: center; gap: 0; }
.shopbar .tb-fav svg { width: 19px; height: 19px; flex: none; color: var(--sb-blue); }
/* Carrito: el macizo */
.shopbar .tb-cart { font-weight: 800; padding: 9px 17px; font-size: .9rem; box-shadow: 0 8px 22px rgba(8,12,30,.28); }
.shopbar .tb-cart:hover { box-shadow: 0 16px 34px rgba(8,12,30,.34); }
.shopbar .tb-cart svg { width: 19px; height: 19px; }
.shopbar .tb-cart .ct, .shopbar .tb-fav .ct { position: absolute; top: -6px; right: -4px; background: var(--sb-amber); color: #fff; border-radius: 99px; font-size: .66rem; font-weight: 800; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--sb-blue); }

/* Menú de cuenta (lo arma session-nav). session-nav ancla el menú a .shopbar__actions
   (todo el grupo de chips), no al chip. Con right:0 se pegaba al borde DERECHO del grupo
   (bajo el carrito), viéndose "abierto de lado". El chip de cuenta es el PRIMERO del
   grupo, así que left:0 lo deja justo DEBAJO del chip (como en el home). */
.shopbar .tb-acctmenu { position: absolute; top: calc(100% + 10px); left: 0; right: auto; min-width: 232px; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; box-shadow: 0 20px 54px rgba(12,20,50,.30); padding: 6px; z-index: 80; }
/* En móvil, anclar a la derecha para que un menú de 232px no se salga de la pantalla. */
@media (max-width: 640px) { .shopbar .tb-acctmenu { left: auto; right: 0; } }
.shopbar .tb-acctmenu[hidden] { display: none; }
.shopbar .tb-accthead { padding: 10px 12px 9px; border-bottom: 1px solid var(--sb-line); margin-bottom: 4px; }
.shopbar .tb-accthead b { display: block; font-size: .9rem; color: var(--sb-ink); }
.shopbar .tb-accthead span { display: block; font-size: .76rem; color: var(--sb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shopbar .tb-acctmenu a, .shopbar .tb-acctmenu button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 9px 12px; border-radius: 9px; font: inherit; font-size: .88rem; color: #33404f; text-decoration: none; cursor: pointer; }
.shopbar .tb-acctmenu a:hover, .shopbar .tb-acctmenu button:hover { background: var(--sb-paper); }
.shopbar .tb-acctadmin { color: var(--sb-blue); font-weight: 700; }
.shopbar .tb-acctlogout { color: #e11d48; font-weight: 600; }

.shopbar .tb-cuenta:focus-visible, .shopbar .tb-fav:focus-visible, .shopbar .tb-cart:focus-visible, .shopbar .tb-wa:focus-visible, .shopbar .pop:focus-visible { outline: 3px solid #0a1a3a; outline-offset: 2px; }

/* Estado activo: el botón cuyo panel está abierto se pinta de azul (igual que el e-commerce). */
.shopbar .tb-fav.on, .shopbar .tb-cart.on { background: var(--sb-blue); border-color: #fff; color: #fff; }
.shopbar .tb-fav.on svg, .shopbar .tb-cart.on svg { color: #fff; }
.shopbar .tb-fav.on:hover, .shopbar .tb-cart.on:hover { background: var(--sb-blue-h, #0558CC); }
.shopbar .tb-cart.on { box-shadow: 0 8px 22px rgba(6,108,255,.45); }
.shopbar .tb-cart.on:hover { box-shadow: 0 16px 34px rgba(6,108,255,.5); }
.shopbar .tb-fav.on { box-shadow: 0 6px 18px rgba(6,108,255,.4); }
.shopbar .tb-fav.on .ct, .shopbar .tb-cart.on .ct { border-color: #fff; }

/* ── Fila 2: carril de categorías (degradado con velo) ── */
.shopbar__cats { display: flex; align-items: center; gap: 12px; padding: 5px max(14px, calc((100% - var(--sb-col)) / 2)); background: linear-gradient(rgba(8,12,30,.16), rgba(8,12,30,.16)), var(--sb-grad); }
.shopbar__back { flex: none; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: .82rem; text-decoration: none; padding: 6px 12px; border-radius: 99px; background: rgba(9,14,34,.42); border: 1.5px solid rgba(255,255,255,.6); backdrop-filter: blur(8px); transition: background .15s; }
.shopbar__back:hover { background: rgba(9,14,34,.56); }
.shopbar__catlabel { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.85); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; flex: none; }
.shopbar__rail { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: 7px 3px; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.shopbar__rail::-webkit-scrollbar { display: none; }
.shopbar__cats.can-prev .shopbar__rail { -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 14px); mask-image: linear-gradient(90deg,transparent 0,#000 14px); }
.shopbar__cats.can-next .shopbar__rail { -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 14px),transparent 100%); mask-image: linear-gradient(90deg,#000 calc(100% - 14px),transparent 100%); }
.shopbar__cats.can-prev.can-next .shopbar__rail { -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%); mask-image: linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%); }
.shopbar .pop { position: relative; white-space: nowrap; border: 1px solid rgba(8,12,30,.14); background: var(--sb-paper); border-radius: 99px; padding: 7px 14px; font-size: .84rem; font-weight: 600; color: #33404f; flex: none; display: flex; align-items: center; gap: 6px; text-decoration: none; box-shadow: 0 2px 8px rgba(8,12,30,.20); transition: background .15s, box-shadow .18s, transform .18s cubic-bezier(.34,1.56,.64,1); }
.shopbar .pop:not(.hot):hover { background: #fff; box-shadow: 0 6px 16px rgba(8,12,30,.28); transform: translateY(-2px); }
.shopbar .pop::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
.shopbar .pop.hot { border: none; color: #fff; font-weight: 800; background: #FF7C19; }
.shopbar .pop .dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.shopbar__railnavs { flex: none; display: none; align-items: center; gap: 6px; padding-left: 20px; margin-left: 8px; border-left: 1px solid rgba(255,255,255,.25); }
.shopbar__cats.can-scroll .shopbar__railnavs { display: flex; }
.shopbar__railnav { width: 29px; height: 29px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); background: rgba(9,14,34,.5); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .15s, opacity .15s; }
.shopbar__railnav:hover:not(:disabled) { background: rgba(9,14,34,.85); transform: scale(1.09); }
.shopbar__railnav:disabled { opacity: .32; cursor: default; }

/* ── Responsivo ── */
/* La ubicación se reduce a solo ícono en cuanto la barra se aprieta (es el chip más ancho). */
@media (max-width: 1080px) {
  .shopbar .tb-loc__txt { display: none; }
  .shopbar .tb-loc { padding: 9px 10px; }
}
@media (max-width: 820px) {
  .shopbar__cats.can-scroll .shopbar__railnavs { display: none; }
  .shopbar__catlabel { display: none; }
  .shopbar__logo { display: none; }
  .shopbar__hamb { display: flex; }
  .shopbar .tb-cuenta .tb-name { display: none; }
  .shopbar .tb-cuenta.tb-cuenta--user { padding: 5px; }
  .shopbar .tb-cuenta, .shopbar .tb-cart { padding: 9px 13px; }
}
@media (max-width: 640px) {
  /* El buscador pasa a su propia fila completa; las acciones quedan arriba. */
  .shopbar__top { flex-wrap: wrap; row-gap: 9px; }
  .shopbar__search { order: 5; flex: 1 0 100%; }
  .shopbar__actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .shopbar .tb-cuenta, .shopbar .tb-fav, .shopbar .tb-cart, .shopbar .tb-wa, .shopbar .pop, .shopbar__rail { transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Paneles del carrito y de favoritos (fuera de la tienda)
   -----------------------------------------------------------------------------
   Se muestran EN LA PROPIA página (no redirigen a la tienda). Mismos valores que
   el panel de la tienda para que se sienta el mismo carrito. Los llena
   assets/shop-header.js con los datos de window.OKtienda (que son los REALES). El
   "Finalizar compra" sí lleva a la tienda, para no duplicar el checkout.
   ───────────────────────────────────────────────────────────────────────── */
.sb-scrim { position: fixed; inset: 0; background: rgba(18,20,28,.45); z-index: 118; opacity: 0; pointer-events: none; transition: opacity .25s; }
.sb-scrim.show { opacity: 1; pointer-events: auto; }

.sb-panel { position: fixed; top: 0; right: 0; height: 100%; width: min(400px,92vw); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 120; box-shadow: -18px 0 50px rgba(18,20,28,.22); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sb-panel.show { transform: translateX(0); }
/* Cabecera con el degradado de la barra (como el carrito de la tienda) */
.sb-panel__head { display: flex; align-items: center; gap: 8px; padding: 16px 18px; color: #fff; font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; flex: none; background: #066CFF; }
.sb-panel__close { margin-left: auto; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.16); color: #fff; border-radius: 50%; font-size: 1.15rem; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .15s; }
.sb-panel__close:hover { background: rgba(255,255,255,.34); transform: scale(1.08); }
.sb-panel__body { flex: 1; overflow-y: auto; padding: 10px 14px; }
.sb-panel__empty { color: #5b6474; text-align: center; padding: 44px 20px; font-size: .9rem; line-height: 1.5; }
.sb-panel__empty a { color: #066CFF; font-weight: 700; text-decoration: none; }

/* Renglón de producto (carrito) */
.sb-ci { display: grid; grid-template-columns: 46px 1fr auto; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef1f7; }
.sb-ci__t { width: 46px; height: 46px; border-radius: 9px; background: #eef2f8; border: 1px solid #E3E8F1; overflow: hidden; display: grid; place-items: center; }
.sb-ci__t img { width: 100%; height: 100%; object-fit: contain; padding: 2px; box-sizing: border-box; }
.sb-ci__t .sb-emoji { font-size: 22px; }
.sb-ci__nm { font-size: .83rem; font-weight: 600; line-height: 1.22; color: #12141C; }
.sb-ci__pu { font-size: .72rem; color: #5b6474; margin-top: 1px; }
.sb-qty { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; }
.sb-qty button { width: 23px; height: 23px; border: 1px solid #E3E8F1; background: #F5F8FD; border-radius: 6px; font-weight: 800; color: #066CFF; cursor: pointer; line-height: 1; }
.sb-qty span { min-width: 18px; text-align: center; font-size: .82rem; font-weight: 700; }
.sb-ci__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sb-ci__lt { font-weight: 800; font-size: .85rem; font-variant-numeric: tabular-nums; color: #12141C; }
.sb-ci__rm { border: none; background: none; color: #c2410c; font-size: .68rem; cursor: pointer; padding: 0; }

/* Pie con envío + subtotal/entrega/total + checkout (igual que el carrito de la tienda) */
.sb-panel__foot { flex: none; border-top: 1px solid #E3E8F1; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
.sb-ship { display: flex; gap: 7px; margin-bottom: 12px; }
.sb-ship button { flex: 1; border: 1.5px solid #E3E8F1; background: #F5F8FD; border-radius: 9px; padding: 8px 6px; font-size: .76rem; font-weight: 600; color: #33404f; cursor: pointer; text-align: center; }
.sb-ship button b { display: block; font-size: .82rem; }
.sb-ship button.on { border-color: #066CFF; background: #eef4ff; color: #066CFF; }
.sb-sline { display: flex; justify-content: space-between; font-size: .85rem; color: #5b6474; margin: 5px 0; }
.sb-sline.total { color: #12141C; font-weight: 800; font-size: 1.12rem; margin-top: 9px; padding-top: 9px; border-top: 1px solid #E3E8F1; }
.sb-sline span:last-child { font-variant-numeric: tabular-nums; }
.sb-checkout { width: 100%; margin-top: 12px; border: none; background: #066CFF; color: #fff; font-weight: 700; font-size: .98rem; padding: 13px; border-radius: 999px; box-shadow: 0 14px 40px rgba(6,108,255,.30); cursor: pointer; transition: transform .15s, box-shadow .15s; text-decoration: none; display: block; text-align: center; }
.sb-checkout:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgba(6,108,255,.36); }
.sb-panel__note { font-size: .74rem; color: #5b6474; text-align: center; margin: 9px 0 0; }

/* ── Favoritos: MODAL CENTRADO "Tus deseados" (igual que la tienda), no un cajón ── */
.sb-ov { position: fixed; inset: 0; background: rgba(18,20,28,.5); z-index: 119; display: none; align-items: center; justify-content: center; padding: 18px; opacity: 0; transition: opacity .2s; }
.sb-ov.show { display: flex; opacity: 1; }
.sb-modal { position: relative; background: #fff; border-radius: 22px; max-width: 460px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: 0 26px 74px rgba(18,20,28,.24); padding: 26px 24px 24px; }
.sb-modal__x { position: absolute; top: 14px; right: 14px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #E3E8F1; background: #fff; color: #12141C; font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(18,20,28,.18); display: grid; place-items: center; transition: transform .15s ease, background .15s ease; }
.sb-modal__x:hover { transform: scale(1.08); background: #f1f4fb; color: #e11d48; }
.sb-modal h3 { margin: 0 0 4px; font-size: 1.25rem; color: #12141C; }
.sb-modal__desc { font-size: .86rem; color: #5b6474; line-height: 1.5; margin: 0; }
.sb-modal__list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sb-modal__empty { padding: 26px 0; text-align: center; color: #5b6474; line-height: 1.5; }
/* Tarjeta de un favorito (mismo look que la tienda) */
.sb-wi { display: flex; gap: 12px; align-items: center; border: 1px solid #E3E8F1; border-radius: 14px; padding: 10px 12px; }
.sb-wi__t { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #E3E8F1; display: grid; place-items: center; }
.sb-wi__t img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.sb-wi__t .sb-emoji { font-size: 24px; }
.sb-wi__info { flex: 1 1 auto; min-width: 0; }
.sb-wi__nm { font-weight: 700; font-size: .95rem; color: #12141C; line-height: 1.25; }
.sb-wi__pu { color: #5b6474; font-size: .85rem; margin-top: 2px; }
.sb-wi__add { flex: 0 0 auto; border: none; background: #066CFF; color: #fff; font-weight: 700; font-size: .85rem; padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; box-shadow: 0 8px 22px rgba(6,108,255,.28); transition: background .15s, transform .15s; }
.sb-wi__add:hover { background: #0558CC; transform: translateY(-1px); }
.sb-wi__heart { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid #E3E8F1; background: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #e11d48; }
.sb-wi__heart svg { width: 18px; height: 18px; fill: #e11d48; stroke: #e11d48; }

html.sb-lock, html.sb-lock body { overflow: hidden; }


/* ══ MODO OSCURO — html[data-theme="dark"] ══════════════════════════════════
   Mismo defecto que el resto: superficies con #fff a mano y texto por token.
   El menú de la cuenta (.tb-acctmenu) era el más visible: se veía como una
   tarjeta blanca con los enlaces casi borrados. */
html[data-theme="dark"] :is(.sb-panel, .sb-modal, .shopbar__ac, .tb-acctmenu) {
  background: var(--surface-card);
  border-color: var(--border-light);
  color: var(--text-primary);
}
html[data-theme="dark"] .sb-panel   { box-shadow: -18px 0 50px rgba(0,0,0,.55); }
html[data-theme="dark"] :is(.sb-modal, .shopbar__ac, .tb-acctmenu) { box-shadow: 0 22px 60px rgba(0,0,0,.55); }
/* Enlaces del menú de cuenta y filas del autocompletado. */
html[data-theme="dark"] :is(.tb-acctmenu a, .tb-acctmenu button) { color: var(--text-primary); }
html[data-theme="dark"] :is(.tb-acctmenu a:hover, .tb-acctmenu button:hover, .shopbar__ac-item:hover) {
  background: var(--brand-blue-light);
}

/* ── Producto SIN foto: logo de Ok.station en las miniaturas del header ──
   Las cajas ya centran (place-items:center) y contienen (object-fit:contain), así
   que aquí solo se le da más aire que a una foto normal para que el logo no llegue
   a las orillas. Sustituye al 📦 genérico que salía antes. */
.shopbar__ac-img .ph-logo,
.sb-ci__t .ph-logo,
.sb-wi__t .ph-logo { padding: 8px; opacity: .9; }

/* Los tokens propios de la barra (--sb-ink, --sb-muted, --sb-line, --sb-paper) se
   declaran en .shopbar con valores CLAROS fijos, así que en oscuro el nombre del
   cliente y los enlaces del menú quedaban casi invisibles. Redefinirlos aquí
   arregla de una vez el encabezado, los enlaces y sus separadores.
   La MARCA (azul, cian, ámbar y los degradados) no se toca: ya funciona en oscuro. */
html[data-theme="dark"] .shopbar {
  --sb-line: #26314A;
  --sb-muted: #8A94AB;
  --sb-paper: #1B2338;
  --sb-ink: #E9EDF6;
}
/* "Cerrar sesión" en rojo, igual que en el menú del home. */
html[data-theme="dark"] .shopbar .tb-acctlogout,
.shopbar .tb-acctlogout { color: var(--color-error, #DC2626); font-weight: 600; }

/* Ronda 2 del barrido: botones que seguían con blanco fijo.
   NO se tocan .shopbar__ac-img ni .sb-wi__t (miniaturas de producto: las fotos
   vienen recortadas sobre blanco), ni .pop:hover (vive sobre el degradado). */
html[data-theme="dark"] :is(.sb-modal__x, .sb-wi__heart) {
  background: var(--surface-page);
  border-color: var(--border-medium);
  color: var(--text-primary);
}
/* ── MODO OSCURO DE LA BARRA ───────────────────────────────────────────────
   Esta barra (ficha de producto y compra rápida) NO tenía oscuro: en modo
   noche seguía saliendo el degradado brillante del tema claro.
   Mismos tokens que la barra de la tienda (--nav-top / --nav-bottom, definidos
   en styles.css) para que las tres barras del sitio se vean idénticas.
   Liso, no degradado; y lo SELECCIONADO va en blanco, no en azul. */
html[data-theme="dark"] .shopbar__top  { background: var(--nav-top, #1C2745); }
html[data-theme="dark"] .shopbar__cats { background: var(--nav-bottom, #151D34); border-top: 1px solid var(--nav-line, rgba(255,255,255,.10)); }

/* Buscador: cristal oscuro en vez de blanco. */
html[data-theme="dark"] .shopbar__search input {
  background: rgba(8,13,26,.55); color: #E9EDF6; border: 1px solid rgba(255,255,255,.18);
}
html[data-theme="dark"] .shopbar__search input::placeholder { color: #8A94AB; }
html[data-theme="dark"] .shopbar__search svg { color: #8A94AB; }

/* Píldoras de la barra en fantasma noche (cuenta, favoritos, carrito, filtros). */
html[data-theme="dark"] .shopbar :is(.tb-cuenta, .tb-fav, .tb-cart, .tb-filt) {
  background: rgba(255,255,255,.08) !important; color: #fff !important;
  border-color: rgba(255,255,255,.30) !important; box-shadow: none !important;
}
html[data-theme="dark"] .shopbar :is(.tb-cuenta, .tb-fav, .tb-cart, .tb-filt) svg { color: #fff; }
html[data-theme="dark"] .shopbar :is(.tb-cuenta, .tb-fav, .tb-cart, .tb-filt):hover {
  background: rgba(255,255,255,.16) !important;
}
/* SELECCIONADO = blanco (no azul), igual que en la tienda. */
html[data-theme="dark"] .shopbar :is(.tb-fav, .tb-cart).on {
  background: #fff !important; color: #12141C !important; border-color: #fff !important; box-shadow: none !important;
}
html[data-theme="dark"] .shopbar :is(.tb-fav, .tb-cart).on svg { color: #12141C; }
/* Chips de categoría: fantasma; el activo en blanco. Ofertas mantiene su naranja. */
html[data-theme="dark"] .shopbar .pop:not(.on):not(.hot) {
  background: rgba(255,255,255,.08); color: #E9EDF6; border-color: rgba(255,255,255,.26);
}
html[data-theme="dark"] .shopbar .pop:not(.on):not(.hot):hover { background: rgba(255,255,255,.16); color: #fff; }
html[data-theme="dark"] .shopbar .pop.on {
  background: #fff !important; color: #12141C !important; border-color: #fff !important; box-shadow: none !important;
}
html[data-theme="dark"] .shopbar .pop.on .dot { background: #12141C; }