/* =========================================================================
   Zenbox — tienda pública
   Diseño propio: encabezado con buscador, portada con banners, carriles de
   productos, filtros y ficha de producto. Todo con prefijo zs- para no chocar
   con Vuexy.
   ========================================================================= */
:root {
  --zs-primary: var(--bs-primary, #7367f0);
  --zs-primary-rgb: var(--bs-primary-rgb, 115, 103, 240);
  --zs-ink: #1f2133;
  --zs-ink-2: #4b4d63;
  --zs-muted: #8a8ca3;
  --zs-line: #e9e9f0;
  --zs-bg: #f5f5f9;
  --zs-card: #fff;
  --zs-sale: #e5334b;
  --zs-sale-bg: #fdecef;
  --zs-fast: #13a36b;
  --zs-fast-bg: #e5f7ef;
  --zs-import: #1d82d8;
  --zs-import-bg: #e6f2fc;
  --zs-radius: 14px;
  --zs-radius-sm: 10px;
  --zs-shadow: 0 1px 2px rgba(31, 33, 51, 0.05), 0 4px 16px rgba(31, 33, 51, 0.06);
  --zs-shadow-lg: 0 10px 34px rgba(31, 33, 51, 0.14);
  /* Colores de marca: los cambia «Personalizar tienda» (estilo #brand-theme) */
  --zs-topbar-bg: #1f2133;
  --zs-topbar-fg: #d6d7e6;
  --zs-topbar-strong: #fff;
  --zs-footer-bg: #171927;
  --zs-footer-fg: #a7a9c0;
  --zs-footer-strong: #fff;
  --zs-footer-line: rgba(255, 255, 255, 0.08);
  --zs-footer-chip: rgba(255, 255, 255, 0.07);
  --zs-logo-h: 36px;
}
[data-bs-theme="dark"] {
  --zs-ink: #e1e2f0;
  --zs-ink-2: #b6b8cf;
  --zs-muted: #8a8ca3;
  --zs-line: #3a3d55;
  --zs-bg: #25293c;
  --zs-card: #2f3349;
  --zs-sale-bg: rgba(229, 51, 75, 0.16);
  --zs-fast-bg: rgba(19, 163, 107, 0.16);
  --zs-import-bg: rgba(29, 130, 216, 0.16);
}

/* En la tienda los íconos toman el tamaño de la fuente (1em); .icon-sm etc. siguen funcionando */
:where([class*="zs-"] .icon-base, .icon-base[class*="zs-"]) {
  --bs-icon-size: 1em;
}
body {
  background: var(--zs-bg);
  color: var(--zs-ink-2);
}
.zs-page {
  padding-bottom: 3rem;
}
/* Las páginas antiguas (carrito, checkout, cuenta) reservaban espacio para la
   barra fija de Vuexy; el nuevo encabezado no es fijo. */
.first-section-pt {
  padding-top: 2rem !important;
}
.section-py.first-section-pt {
  padding-bottom: 3rem;
}

/* ------------------------------------------------------------- Cart / checkout */
.zs-cart-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}
.zs-cart-hero h1 {
  margin: .35rem 0 .4rem;
  color: var(--zs-ink);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  letter-spacing: -.035em;
}
.zs-cart-hero p { margin: 0; color: var(--zs-muted); }
.zs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--zs-primary);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.zs-cart-progress { display: flex; align-items: center; gap: .55rem; color: var(--zs-muted); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.zs-cart-progress span { display: inline-flex; align-items: center; gap: .35rem; }
.zs-cart-progress b { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border: 1px solid var(--zs-line); border-radius: 50%; font-size: .7rem; }
.zs-cart-progress span.is-active, .zs-cart-progress span.is-done { color: var(--zs-ink); }
.zs-cart-progress .is-active b, .zs-cart-progress .is-done b { color: #fff; background: var(--zs-primary); border-color: var(--zs-primary); }
.zs-cart-progress i { width: 1.6rem; height: 1px; background: var(--zs-line); }
.zs-cart-progress i.is-active { background: var(--zs-primary); }
.zs-cart-card, .zs-summary-card { overflow: hidden; border: 1px solid var(--zs-line); border-radius: var(--zs-radius); background: var(--zs-card); box-shadow: var(--zs-shadow); }
.zs-cart-card-head { display: flex; justify-content: space-between; align-items: center; padding: 1.35rem 1.5rem; border-bottom: 1px solid var(--zs-line); }
.zs-cart-card-head h2, .zs-summary-head h2 { margin: .15rem 0 0; color: var(--zs-ink); font-size: 1.05rem; }
.zs-cart-card-head h2 span { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; margin-left: .25rem; border-radius: 999px; background: rgba(var(--zs-primary-rgb), .12); color: var(--zs-primary); font-size: .7rem; line-height: 1; vertical-align: 2px; }
.zs-cart-card-head small { color: var(--zs-muted); }
.zs-cart-card-head > .ti { color: var(--zs-fast); font-size: 1.5rem; }
.zs-cart-item { padding: 1.25rem 1.5rem; border-color: var(--zs-line); }
.zs-cart-item:hover { background: rgba(var(--zs-primary-rgb), .025); }
.zs-cart-item img, .zs-cart-item .ratio { border-radius: 12px !important; }
.zs-cart-item .text-heading { color: var(--zs-ink); font-weight: 650; }
.zs-qty-feedback { display: block; flex-basis: 100%; margin-top: -.35rem; color: #c97900; font-size: .72rem; font-weight: 700; }
.zs-cart-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--zs-line); }
.zs-cart-card-foot > span { color: var(--zs-muted); font-size: .8rem; }
.zs-cart-card-foot .ti { margin-right: .25rem; }
.zs-summary-card { position: sticky; top: 100px; }
.zs-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.5rem 1rem; }
.zs-summary-head > div > span { color: var(--zs-muted); font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.zs-summary-head > .ti { color: var(--zs-primary); font-size: 1.45rem; }
.zs-summary-body { padding: 0 1.5rem 1.25rem; }
.zs-summary-body dl { color: var(--zs-ink-2); }
.zs-summary-body dl dd { color: var(--zs-ink); }
.zs-summary-body dl .h6, .zs-summary-body dl .h5 { color: var(--zs-ink); font-size: 1.15rem; }
.zs-summary-coupon { padding: 1rem 1.5rem; border-top: 1px solid var(--zs-line); border-bottom: 1px solid var(--zs-line); }
.zs-summary-foot { padding: 1.15rem 1.5rem 1.35rem; }
.zs-checkout-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.1rem; border-radius: 11px; font-weight: 700; box-shadow: 0 8px 18px rgba(var(--zs-primary-rgb), .22); }
.zs-checkout-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(var(--zs-primary-rgb), .3); }
.zs-empty-cart { padding: 4rem 1rem; text-align: center; border: 1px dashed var(--zs-line); border-radius: var(--zs-radius); background: var(--zs-card); }
.zs-empty-cart-icon { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; margin: 0 auto 1rem; border-radius: 22px; background: rgba(var(--zs-primary-rgb), .1); color: var(--zs-primary); font-size: 2rem; }
.zs-empty-cart h2 { margin: .55rem 0 .35rem; color: var(--zs-ink); font-size: 1.35rem; }
.zs-empty-cart p { margin-bottom: 1.25rem; color: var(--zs-muted); }
.zs-checkout-card { border-radius: var(--zs-radius); }
.zs-checkout-card .card-body { padding: 1.5rem; }
.zs-checkout-card h6 { color: var(--zs-ink); font-size: 1rem; }
.zs-checkout-card .badge { width: 1.7rem; height: 1.7rem; display: inline-grid; place-items: center; padding: 0; }
.zs-checkout-summary .zs-summary-body { padding-top: 0; }
.zs-checkout-summary .card-footer { background: transparent; border-color: var(--zs-line); }
.zs-checkout-summary { border-color: rgba(var(--zs-primary-rgb), .16); box-shadow: 0 14px 40px rgba(31, 33, 51, .1); }
.zs-checkout-summary .zs-summary-head { padding-top: 1.5rem; }
.zs-order-items { display: grid; gap: .8rem; }
.zs-order-item { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .7rem; padding-bottom: .9rem; border-bottom: 1px solid var(--zs-line); }
.zs-order-thumb { display: grid; place-items: center; width: 3rem; height: 3rem; overflow: hidden; border-radius: 10px; background: var(--zs-bg); color: var(--zs-primary); }
.zs-order-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.zs-order-item-info { min-width: 0; }
.zs-order-item-info b, .zs-order-item-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-order-item-info b { color: var(--zs-ink); font-size: .78rem; font-weight: 700; }
.zs-order-item-info small { margin-top: .2rem; color: var(--zs-muted); font-size: .7rem; }
.zs-order-item > strong { color: var(--zs-ink); font-size: .78rem; white-space: nowrap; }
.zs-checkout-summary dl { padding-top: 1rem !important; }
.zs-checkout-summary dl dt, .zs-checkout-summary dl dd { margin-bottom: .55rem; }
.zs-checkout-summary dl .h5 { padding-top: .65rem; border-top: 1px solid var(--zs-line); }
.zs-checkout-summary .form-check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .55rem; width: 100%; box-sizing: border-box; padding: .8rem; border-radius: 10px; background: rgba(var(--zs-primary-rgb), .045); }
.zs-checkout-summary .form-check-input { float: none; flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; margin: .1rem 0 0 !important; }
.zs-checkout-summary .form-check-label { flex: 1 1 calc(100% - 1.7rem); min-width: 0; padding: 0; line-height: 1.45; }
.zs-checkout-summary .form-check .invalid-feedback { flex-basis: 100%; margin: 0 0 0 1.7rem; }
.zs-checkout-summary .zs-summary-foot { background: linear-gradient(180deg, rgba(var(--zs-primary-rgb), .025), transparent); }
.zs-facebook-login { border-color: #1877f2; color: #1877f2; font-weight: 700; }
.zs-facebook-login:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.zs-auth-divider { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; color: var(--zs-muted); font-size: .75rem; }
.zs-auth-divider::before, .zs-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--zs-line); }
@media (max-width: 767.98px) {
  .zs-cart-hero { display: block; }
  .zs-cart-progress { margin-top: 1.25rem; justify-content: space-between; gap: .3rem; font-size: .68rem; }
  .zs-cart-progress i { flex: 1; width: auto; }
  .zs-cart-progress span { gap: .2rem; }
  .zs-cart-progress span b { width: 1.35rem; height: 1.35rem; }
  .zs-cart-card-head, .zs-cart-card-foot, .zs-summary-head, .zs-summary-body, .zs-summary-coupon, .zs-summary-foot { padding-left: 1rem; padding-right: 1rem; }
  .zs-cart-item { padding: 1rem; }
  .zs-cart-item .text-end { min-width: 82px; }
  .zs-cart-card-foot { align-items: flex-start; flex-direction: column; }
  .zs-cart-card-foot button { width: 100%; }
  .zs-summary-card { position: static; }
}

/* ------------------------------------------------------------------ Header */
.zs-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--zs-card);
  transition: box-shadow 0.2s;
}
.zs-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(31, 33, 51, 0.1);
}
.zs-topbar {
  background: var(--zs-topbar-bg);
  color: var(--zs-topbar-fg);
  font-size: 0.8125rem;
  padding: 0.4rem 0;
}
.zs-topbar[hidden] {
  display: none;
}
.zs-topbar a {
  color: var(--zs-topbar-fg);
}
.zs-topbar a:hover,
.zs-topbar b {
  color: var(--zs-topbar-strong);
}
/* Anuncios: si hay varios, se turnan (store.js) */
.zs-announce {
  display: grid;
  min-width: 0;
}
.zs-announce-item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zs-announce-item.is-on {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 767.98px) {
  .zs-topbar .container {
    justify-content: center !important;
    text-align: center;
  }
}
/* Logo de la tienda */
.zs-brand-img {
  height: var(--zs-logo-h);
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.zs-brand-img[hidden],
.zs-brand-mono[hidden],
.zs-brand-name[hidden] {
  display: none !important;
}
.zs-brand-mono {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--bs-primary);
  color: var(--bs-primary-contrast, #fff);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0;
}
@media (max-width: 575.98px) {
  .zs-brand-img {
    height: min(var(--zs-logo-h), 32px);
    max-width: 150px;
  }
}
.zs-main {
  border-bottom: 1px solid var(--zs-line);
}
.zs-main-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.zs-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--zs-ink);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.zs-logo:hover {
  color: var(--zs-ink);
}
.zs-logo svg {
  height: 30px;
  width: auto;
}
.zs-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: var(--zs-bg);
  border: 2px solid transparent;
  border-radius: 999px;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.zs-search:focus-within {
  border-color: var(--zs-primary);
  background: var(--zs-card);
  box-shadow: 0 0 0 4px rgba(var(--zs-primary-rgb), 0.12);
}
.zs-search > .ti {
  position: absolute;
  left: 1.1rem;
  color: var(--zs-muted);
  font-size: 1.2rem;
  pointer-events: none;
}
.zs-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.7rem 0.75rem 0.7rem 2.9rem;
  font-size: 0.975rem;
  color: var(--zs-ink);
  outline: none;
}
.zs-search input::placeholder {
  color: var(--zs-muted);
}
.zs-search input::-webkit-search-cancel-button {
  display: none;
}
.zs-search .btn {
  border-radius: 999px;
  margin: 3px;
  padding-inline: 1.4rem;
  font-weight: 600;
}
.zs-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--zs-card);
  border-radius: var(--zs-radius);
  box-shadow: var(--zs-shadow-lg);
  border: 1px solid var(--zs-line);
  padding: 0.5rem;
  z-index: 1040;
  max-height: 70vh;
  overflow: auto;
}
.zs-suggest-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zs-muted);
  font-weight: 600;
  padding: 0.5rem 0.75rem 0.25rem;
}
.zs-suggest a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--zs-radius-sm);
  color: var(--zs-ink);
}
.zs-suggest a:hover,
.zs-suggest a.is-active {
  background: rgba(var(--zs-primary-rgb), 0.08);
}
.zs-suggest img,
.zs-suggest .zs-suggest-ph {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--zs-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zs-muted);
}
.zs-suggest .zs-s-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.zs-suggest .zs-s-brand {
  display: block;
  font-size: 0.75rem;
  color: var(--zs-muted);
  font-weight: 400;
}
.zs-suggest .zs-s-price {
  font-weight: 700;
  color: var(--zs-ink);
  white-space: nowrap;
}
.zs-suggest .zs-s-all {
  justify-content: center;
  color: var(--zs-primary);
  font-weight: 600;
  border-top: 1px solid var(--zs-line);
  border-radius: 0;
  margin-top: 0.25rem;
}

.zs-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.zs-favorites-action { order: 1; flex: 0 0 auto; }
.zs-cart-action { order: 2; flex: 0 0 auto; }
.zs-account-action { order: 3; flex: 0 0 auto; }
.zs-action {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--zs-radius-sm);
  color: var(--zs-ink);
  position: relative;
  line-height: 1.15;
  background: none;
  border: 0;
}
.zs-action:hover {
  background: var(--zs-bg);
  color: var(--zs-ink);
}
.zs-action > .ti {
  font-size: 1.55rem;
}
.zs-action-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.8rem;
  flex: 0 0 1.7rem;
}
.zs-action-icon > .ti { font-size: 1.55rem; }
.zs-cart-action .zs-action-icon {
  width: 2rem;
  height: 2rem;
  flex-basis: 2rem;
  border-radius: 10px;
  background: rgba(var(--zs-primary-rgb), .1);
  color: var(--zs-primary);
}
.zs-cart-action .zs-action-icon > .ti { font-size: 1.35rem; }
.zs-action small {
  display: block;
  color: var(--zs-muted);
  font-size: 0.75rem;
}
.zs-action b {
  font-weight: 600;
  font-size: 0.875rem;
}
.zs-count {
  position: absolute;
  top: -0.28rem;
  right: -0.38rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--zs-sale);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--zs-card);
  z-index: 1;
}
.zs-count:empty,
.zs-count[data-count="0"] {
  display: none;
}

.zs-nav {
  border-bottom: 1px solid var(--zs-line);
  background: var(--zs-card);
}
.zs-nav .container {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 48px;
}
.zs-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.8rem;
  color: var(--zs-ink-2);
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 8px;
  white-space: nowrap;
}
.zs-nav-link:hover {
  color: var(--zs-primary);
  background: rgba(var(--zs-primary-rgb), 0.06);
}
.zs-nav-link.is-active {
  color: var(--zs-primary);
  background: rgba(var(--zs-primary-rgb), 0.1);
  font-weight: 700;
}
.zs-nav-link.is-sale {
  color: var(--zs-sale);
  font-weight: 600;
}
.zs-nav-cta {
  color: var(--zs-import);
  font-weight: 600;
}
.zs-nav-link.is-sale.is-active { color: var(--zs-sale); background: var(--zs-sale-bg); }
.zs-nav-cta.is-active { color: var(--zs-import); background: var(--zs-import-bg); }
.zs-cats-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--zs-primary);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 0.5rem 0.95rem;
  font-weight: 600;
  font-size: 0.9rem;
  margin-right: 0.5rem;
}
.zs-cats-btn:hover,
.zs-cats-btn.show {
  filter: brightness(1.06);
  color: #fff;
}
.zs-mega {
  width: min(880px, 92vw);
  padding: 1.25rem;
  border-radius: var(--zs-radius);
  border: 1px solid var(--zs-line);
  box-shadow: var(--zs-shadow-lg);
  margin-top: 0.5rem !important;
}
.zs-mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem 1.5rem;
}
.zs-mega-cat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--zs-ink);
  margin-bottom: 0.35rem;
}
.zs-mega-cat img,
.zs-mega-cat .zs-mega-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(var(--zs-primary-rgb), 0.1);
  color: var(--zs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.zs-mega-sub {
  display: block;
  color: var(--zs-ink-2);
  font-size: 0.875rem;
  padding: 0.15rem 0 0.15rem 2.6rem;
}
.zs-mega-sub:hover,
.zs-mega-cat:hover {
  color: var(--zs-primary);
}

/* Menú móvil */
.zs-offcanvas {
  width: min(340px, 88vw) !important;
}
.zs-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--zs-line);
}
.zs-m-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  color: var(--zs-ink);
  font-weight: 500;
}
.zs-m-link:hover {
  background: var(--zs-bg);
  color: var(--zs-ink);
}
.zs-m-link .ti {
  font-size: 1.25rem;
  color: var(--zs-muted);
}
.zs-m-title {
  padding: 1rem 1.25rem 0.35rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zs-muted);
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .zs-main-row {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .zs-search {
    order: 5;
    flex-basis: 100%;
    max-width: none;
  }
  .zs-actions {
    margin-left: auto;
  }
  .zs-search .btn {
    padding-inline: 1rem;
  }
}

/* ------------------------------------------------------------------ Secciones */
.zs-section {
  margin-top: 2.25rem;
}
.zs-section-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.zs-section-head h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--zs-ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}
.zs-section-head h2 .ti {
  font-size: 1.5rem;
}
.zs-section-head .zs-more {
  margin-left: auto;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  white-space: nowrap;
}
.zs-rail-nav {
  display: flex;
  gap: 0.35rem;
}
.zs-round-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--zs-line);
  background: var(--zs-card);
  color: var(--zs-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.zs-round-btn:hover:not(:disabled) {
  border-color: var(--zs-primary);
  color: var(--zs-primary);
  box-shadow: var(--zs-shadow);
}
.zs-round-btn:disabled {
  opacity: 0.35;
}

/* ------------------------------------------------------------------ Hero */
.zs-hero-wrap {
  padding-top: 1.25rem;
}
.zs-home-sec[hidden] {
  display: none;
}
[data-brand-nav][hidden] {
  display: none !important;
}
.zs-hero-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .zs-hero-grid.has-side {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  }
}
.zs-hero {
  border-radius: var(--zs-radius);
  overflow: hidden;
  box-shadow: var(--zs-shadow);
}
.zs-banner {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  min-height: 340px;
  border-radius: inherit;
  isolation: isolate;
}
.zs-banner:hover {
  color: #fff;
}
.zs-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.6s ease;
}
.zs-banner:hover > img {
  transform: scale(1.03);
}
.zs-banner.has-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 60%, transparent);
}
.zs-banner-body {
  padding: 2.5rem 3rem;
  max-width: 560px;
}
.zs-banner-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.9rem;
}
.zs-banner h2,
.zs-banner h3 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.zs-banner h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  margin-bottom: 0.75rem;
}
.zs-banner p {
  font-size: 1.05rem;
  opacity: 0.92;
  margin-bottom: 1.4rem;
}
.zs-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: var(--zs-ink);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s;
}
.zs-banner:hover .zs-banner-btn {
  transform: translateX(3px);
}
.zs-banner-art {
  position: absolute;
  right: 4%;
  bottom: 50%;
  transform: translateY(50%);
  font-size: 13rem;
  opacity: 0.18;
  z-index: -1;
  line-height: 1;
}
.zs-hero .carousel-indicators {
  margin-bottom: 1rem;
  justify-content: flex-start;
  margin-left: 3rem;
}
.zs-hero .carousel-indicators [data-bs-target] {
  width: 22px;
  height: 6px;
  border-radius: 999px;
  border: 0;
  opacity: 0.5;
  transition: all 0.2s;
}
.zs-hero .carousel-indicators .active {
  width: 38px;
  opacity: 1;
}
.zs-hero .carousel-control-prev,
.zs-hero .carousel-control-next {
  width: 44px;
  height: 44px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--zs-ink);
  opacity: 0;
  margin: 0 1rem;
  transition: opacity 0.2s;
}
.zs-hero:hover .carousel-control-prev,
.zs-hero:hover .carousel-control-next {
  opacity: 1;
}
.zs-side {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 992px) {
  .zs-side {
    gap: 0.75rem;
  }
  .zs-side .zs-banner {
    min-height: 120px;
  }
  .zs-side .zs-banner-body {
    padding: 1rem;
  }
  .zs-side .zs-banner h3 {
    font-size: 1rem;
  }
  .zs-side .zs-banner p {
    display: none;
  }
  .zs-side .zs-banner-art {
    font-size: 4.5rem;
  }
}
.zs-side .zs-banner {
  min-height: 162px;
  border-radius: var(--zs-radius);
  box-shadow: var(--zs-shadow);
}
.zs-side .zs-banner-body {
  padding: 1.25rem 1.5rem;
}
.zs-side .zs-banner h3 {
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
}
.zs-side .zs-banner p {
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.zs-side .zs-banner-btn {
  padding: 0.4rem 0.95rem;
  font-size: 0.82rem;
}
.zs-side .zs-banner-art {
  font-size: 7rem;
}
@media (max-width: 575.98px) {
  .zs-banner {
    min-height: 260px;
  }
  .zs-banner-body {
    padding: 1.75rem 1.5rem 2.75rem;
  }
  .zs-hero .carousel-indicators {
    margin-left: 1.5rem;
  }
  .zs-side {
    gap: 0.75rem;
  }
  .zs-side .zs-banner {
    min-height: 120px;
  }
  .zs-side .zs-banner-body {
    padding: 1rem;
  }
  .zs-side .zs-banner h3 {
    font-size: 1rem;
  }
  .zs-side .zs-banner p {
    display: none;
  }
  .zs-side .zs-banner-art {
    font-size: 4.5rem;
  }
}
.zs-strip .zs-banner {
  min-height: 130px;
  border-radius: var(--zs-radius);
}
.zs-strip .zs-banner-body {
  max-width: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem 2.25rem;
}
.zs-strip .zs-banner h3 {
  font-size: 1.4rem;
  margin: 0;
}
.zs-strip .zs-banner p {
  margin: 0;
  flex: 1;
}

/* ------------------------------------------------------------------ Beneficios */
.zs-perks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--zs-card);
  border-radius: var(--zs-radius);
  box-shadow: var(--zs-shadow);
  margin-top: 1rem;
}
.zs-perk {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
}
.zs-perk + .zs-perk {
  border-left: 1px solid var(--zs-line);
}
.zs-perk-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  background: rgba(var(--zs-primary-rgb), 0.1);
  color: var(--zs-primary);
}
.zs-perk b {
  display: block;
  color: var(--zs-ink);
  font-size: 0.9rem;
}
.zs-perk small {
  color: var(--zs-muted);
  font-size: 0.78rem;
}
@media (max-width: 991.98px) {
  .zs-perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .zs-perk:nth-child(3) {
    border-left: 0;
  }
  .zs-perk:nth-child(n + 3) {
    border-top: 1px solid var(--zs-line);
  }
}
@media (max-width: 575.98px) {
  .zs-perk {
    padding: 0.85rem;
    gap: 0.6rem;
  }
  .zs-perk-ico {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
  }
}

/* ------------------------------------------------------------------ Categorías */
.zs-circles {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 0.25rem 0.75rem;
  scrollbar-width: none;
}
.zs-circles::-webkit-scrollbar {
  display: none;
}
.zs-circle {
  flex: 0 0 auto;
  width: 108px;
  text-align: center;
  scroll-snap-align: start;
  color: var(--zs-ink);
  font-weight: 600;
  font-size: 0.85rem;
}
.zs-circle-img {
  width: 96px;
  height: 96px;
  margin: 0 auto 0.6rem;
  border-radius: 50%;
  background: var(--zs-card);
  box-shadow: var(--zs-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid transparent;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.zs-circle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zs-circle-img .ti {
  font-size: 2.2rem;
  color: var(--zs-primary);
}
.zs-circle:hover {
  color: var(--zs-primary);
}
.zs-circle:hover .zs-circle-img {
  border-color: var(--zs-primary);
  transform: translateY(-3px);
}
.zs-circle.is-sale .zs-circle-img {
  background: var(--zs-sale-bg);
}
.zs-circle.is-sale .ti {
  color: var(--zs-sale);
}

/* ------------------------------------------------------------------ Carril */
.zs-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 1rem) / 5);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25rem 0.25rem 1rem;
  margin: 0 -0.25rem;
  scrollbar-width: none;
}
.zs-rail::-webkit-scrollbar {
  display: none;
}
.zs-rail > * {
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 1199.98px) {
  .zs-rail {
    grid-auto-columns: calc((100% - 3 * 1rem) / 4);
  }
}
@media (max-width: 991.98px) {
  .zs-rail {
    grid-auto-columns: calc((100% - 2 * 1rem) / 3);
  }
}
@media (max-width: 575.98px) {
  .zs-rail {
    grid-auto-columns: 46%;
    gap: 0.75rem;
  }
  .zs-rail-nav {
    display: none;
  }
}

/* ------------------------------------------------------------------ Tarjeta */
.zs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--zs-card);
  border-radius: var(--zs-radius);
  box-shadow: var(--zs-shadow);
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.zs-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--zs-shadow-lg);
}
.zs-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
}
[data-bs-theme="dark"] .zs-card-media {
  background: #f4f4f8;
}
.zs-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.75rem;
  transition:
    opacity 0.3s,
    transform 0.4s;
}
.zs-card-media .zs-img-2 {
  opacity: 0;
}
.zs-card:hover .zs-card-media.has-2 .zs-img-1 {
  opacity: 0;
}
.zs-card:hover .zs-card-media.has-2 .zs-img-2 {
  opacity: 1;
}
.zs-card:hover .zs-card-media:not(.has-2) img {
  transform: scale(1.05);
}
.zs-card-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4c5d6;
  font-size: 3rem;
  background: var(--zs-bg);
}
.zs-badge-off {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  background: var(--zs-sale);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  letter-spacing: 0.01em;
  z-index: 2;
}
.zs-badge-new {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  background: var(--zs-ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  z-index: 2;
}
.zs-fav-form {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 3;
  margin: 0;
}
.zs-fav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  color: var(--zs-ink-2);
  box-shadow: 0 2px 8px rgba(31, 33, 51, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition:
    transform 0.15s,
    color 0.15s;
}
.zs-fav:hover {
  transform: scale(1.1);
  color: var(--zs-sale);
}
.zs-fav.is-on {
  color: var(--zs-sale);
}
.zs-fav .tabler-heart-filled {
  display: none;
}
.zs-fav.is-on .tabler-heart {
  display: none;
}
.zs-fav.is-on .tabler-heart-filled {
  display: inline-block;
}
.zs-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--zs-line);
}
.zs-card-brand {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zs-muted);
  font-weight: 600;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zs-card-title {
  color: var(--zs-ink);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin-bottom: 0.5rem;
}
.zs-card-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.zs-card-title:hover {
  color: var(--zs-primary);
}
.zs-stock-summary {
  display: flex;
  align-items: center;
  min-height: 1.35rem;
  margin-top: .45rem;
}
.zs-stock-summary-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--zs-fast);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.zs-stock-summary-item .ti { font-size: .9rem; }
.zs-stock-summary-item.is-low { color: #c97900; }
.zs-stock-summary-item.is-out { color: var(--zs-muted); }
.zs-stock-summary-item.is-import { color: var(--zs-import); }
.zs-price {
  display: flex;
  align-items: flex-start;
  color: var(--zs-ink);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.zs-price .zs-from {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--zs-muted);
  align-self: center;
  margin-right: 0.3rem;
  letter-spacing: 0;
}
.zs-price .zs-cur {
  font-size: 0.85rem;
  margin-top: 0.15rem;
  margin-right: 0.1rem;
}
.zs-price .zs-int {
  font-size: 1.45rem;
}
.zs-price sup {
  font-size: 0.75rem;
  top: 0.15rem;
  margin-left: 0.05rem;
}
.zs-price.is-sale {
  color: var(--zs-sale);
}
.zs-was {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
  margin-top: 0.3rem;
  font-size: 0.78rem;
}
.zs-was s {
  color: var(--zs-muted);
}
.zs-save {
  color: var(--zs-fast);
  font-weight: 700;
}
.zs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.7rem;
}
.zs-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  line-height: 1.3;
}
.zs-tag .ti {
  font-size: 0.85rem;
}
.zs-tag-fast {
  background: var(--zs-fast-bg);
  color: var(--zs-fast);
}
.zs-tag-free {
  background: rgba(var(--zs-primary-rgb), 0.1);
  color: var(--zs-primary);
}
.zs-tag-import {
  background: var(--zs-import-bg);
  color: var(--zs-import);
}
.zs-tag-out {
  background: var(--zs-bg);
  color: var(--zs-muted);
}
.zs-card.is-out .zs-card-media img {
  opacity: 0.5;
  filter: grayscale(0.6);
}
@media (max-width: 575.98px) {
  .zs-card-body {
    padding: 0.7rem 0.75rem 0.8rem;
  }
  .zs-price .zs-int {
    font-size: 1.2rem;
  }
  .zs-card-title {
    font-size: 0.84rem;
  }
}

/* ------------------------------------------------------------------ Banda importación */
.zs-import-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--zs-radius);
  background: linear-gradient(120deg, #0f6fc0, #1d82d8 45%, #3fb6f0);
  color: #fff;
  padding: 2.25rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.zs-import-band h3 {
  color: #fff;
  font-weight: 800;
  margin-bottom: 0.35rem;
}
.zs-import-band p {
  margin: 0;
  opacity: 0.92;
}
.zs-import-band .zs-steps {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.zs-import-band .zs-steps span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.zs-import-band .zs-steps b {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.zs-import-band .ti-bg {
  position: absolute;
  right: -1rem;
  bottom: -2.5rem;
  font-size: 12rem;
  opacity: 0.12;
}

/* ------------------------------------------------------------------ Listado */
.zs-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--zs-muted);
  padding: 1.1rem 0 0.75rem;
}
.zs-crumbs a {
  color: var(--zs-ink-2);
}
.zs-crumbs a:hover {
  color: var(--zs-primary);
}
.zs-crumbs .ti {
  font-size: 0.8rem;
}
.zs-list-head h1 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--zs-ink);
  letter-spacing: -0.02em;
  margin: 0;
}
.zs-list-head .zs-total {
  color: var(--zs-muted);
  font-size: 0.9rem;
}
.zs-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.zs-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--zs-card);
  border: 1px solid var(--zs-line);
  color: var(--zs-ink-2);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}
.zs-chip:hover {
  border-color: var(--zs-primary);
  color: var(--zs-primary);
}
.zs-chip.is-on {
  background: rgba(var(--zs-primary-rgb), 0.1);
  border-color: transparent;
  color: var(--zs-primary);
}
.zs-chip .ti {
  font-size: 0.9rem;
}
/* Panel de filtros */
.zs-filters {
  background: var(--zs-card);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(31, 33, 51, 0.04),
    0 12px 32px -12px rgba(31, 33, 51, 0.14);
  border: 1px solid rgba(var(--zs-primary-rgb), 0.08);
  position: sticky;
  top: 140px;
  max-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.zs-fhead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(var(--zs-primary-rgb), 0.09), rgba(var(--zs-primary-rgb), 0.02));
  border-bottom: 1px solid var(--zs-line);
}
.zs-fhead-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--zs-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 6px 14px -4px rgba(var(--zs-primary-rgb), 0.55);
  flex-shrink: 0;
}
.zs-fhead h2 {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--zs-ink);
  margin: 0 0 1px;
  letter-spacing: -0.01em;
}
.zs-fhead small {
  display: block;
  line-height: 1.2;
  color: var(--zs-muted);
  font-size: 0.78rem;
}
.zs-fclear {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--zs-sale);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--zs-sale-bg);
  white-space: nowrap;
}
.zs-fclear:hover {
  color: var(--zs-sale);
  filter: brightness(0.97);
}
.zs-fbody {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 0.25rem 0 0.5rem;
}
.zs-fsec {
  padding: 0 1.25rem;
}
.zs-fsec + .zs-fsec,
.zs-fsec + .zs-offer-row,
.zs-offer-row + .zs-fsec {
  border-top: 1px dashed var(--zs-line);
}
.zs-fsec > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0 0.85rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--zs-ink);
  user-select: none;
}
.zs-fsec > summary::-webkit-details-marker {
  display: none;
}
.zs-fsec > summary > .ti {
  margin-left: auto;
  color: var(--zs-muted);
  font-size: 1rem;
  transition: transform 0.2s ease;
}
.zs-fsec:not([open]) > summary > .ti {
  transform: rotate(-90deg);
}
.zs-fsec-body {
  padding-bottom: 1.1rem;
}
.zs-fbadge {
  min-width: 20px;
  height: 20px;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--zs-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.zs-fsec em,
.zs-offer-row em {
  font-style: normal;
}

/* Categorías */
.zs-catlink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0 -0.75rem 2px;
  border-radius: 10px;
  color: var(--zs-ink-2);
  font-size: 0.9rem;
  position: relative;
  transition: background 0.15s;
}
.zs-catlink span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zs-catlink em {
  font-size: 0.74rem;
  color: var(--zs-muted);
  font-weight: 600;
}
.zs-catlink:hover {
  background: var(--zs-bg);
  color: var(--zs-ink);
}
.zs-catlink.is-on {
  background: rgba(var(--zs-primary-rgb), 0.1);
  color: var(--zs-primary);
  font-weight: 700;
}
.zs-catlink.is-on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--zs-primary);
}
.zs-catlink.is-on em {
  color: var(--zs-primary);
}
.zs-catlink.is-back {
  color: var(--zs-muted);
  font-size: 0.82rem;
}

/* Entrega: mosaicos */
.zs-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.zs-tile {
  margin: 0;
  cursor: pointer;
  --tile: var(--zs-primary);
  --tile-bg: rgba(var(--zs-primary-rgb), 0.08);
}
.zs-tile.is-fast {
  --tile: var(--zs-fast);
  --tile-bg: var(--zs-fast-bg);
}
.zs-tile.is-import {
  --tile: var(--zs-import);
  --tile-bg: var(--zs-import-bg);
}
.zs-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.zs-tile > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.7rem 0.25rem 0.6rem;
  border-radius: 14px;
  border: 1.5px solid var(--zs-line);
  background: var(--zs-card);
  text-align: center;
  transition: all 0.15s ease;
}
.zs-tile .ti {
  font-size: 1.3rem;
  color: var(--tile);
  margin-bottom: 0.15rem;
}
.zs-tile b {
  font-size: 0.78rem;
  color: var(--zs-ink);
  font-weight: 700;
  line-height: 1.1;
}
.zs-tile em {
  font-size: 0.7rem;
  color: var(--zs-muted);
  font-weight: 600;
}
.zs-tile:hover > span {
  border-color: var(--tile);
  transform: translateY(-1px);
}
.zs-tile input:checked + span {
  border-color: var(--tile);
  background: var(--tile-bg);
  box-shadow: 0 0 0 1px var(--tile) inset;
}
.zs-tile input:focus-visible + span {
  outline: 2px solid var(--tile);
  outline-offset: 2px;
}

/* Ofertas */
.zs-offer-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.95rem 1.25rem;
  cursor: pointer;
  transition: background 0.15s;
}
.zs-offer-row:hover {
  background: var(--zs-bg);
}
.zs-offer-row.is-on {
  background: var(--zs-sale-bg);
}
.zs-offer-ico {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--zs-sale-bg);
  color: var(--zs-sale);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.zs-offer-row.is-on .zs-offer-ico {
  background: var(--zs-sale);
  color: #fff;
}
.zs-offer-row b {
  display: block;
  font-size: 0.9rem;
  color: var(--zs-ink);
}
.zs-offer-row small {
  color: var(--zs-muted);
  font-size: 0.76rem;
}
.zs-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--zs-line);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
  margin: 0;
}
.zs-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.zs-switch:checked {
  background: var(--zs-sale);
}
.zs-switch:checked::after {
  transform: translateX(18px);
}
.zs-switch:focus-visible {
  outline: 2px solid var(--zs-sale);
  outline-offset: 2px;
}

/* Marcas */
.zs-ffind {
  position: relative;
  margin-bottom: 0.6rem;
}
.zs-ffind .ti {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zs-muted);
  font-size: 0.95rem;
}
.zs-ffind input {
  width: 100%;
  border: 1px solid var(--zs-line);
  background: var(--zs-bg);
  border-radius: 10px;
  padding: 0.5rem 0.75rem 0.5rem 2.1rem;
  font-size: 0.85rem;
  color: var(--zs-ink);
  outline: none;
  transition: all 0.15s;
}
.zs-ffind input:focus {
  border-color: var(--zs-primary);
  background: var(--zs-card);
  box-shadow: 0 0 0 3px rgba(var(--zs-primary-rgb), 0.12);
}
.zs-checks {
  margin: 0 -0.5rem;
  padding: 0 0.5rem;
  scrollbar-width: thin;
}
.zs-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--zs-ink-2);
  transition: background 0.15s;
}
.zs-check:hover {
  background: var(--zs-bg);
}
.zs-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.zs-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #c9cad8;
  background: var(--zs-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.zs-box .ti {
  font-size: 0.8rem;
  color: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.15s;
}
.zs-check input:checked + .zs-box {
  background: var(--zs-primary);
  border-color: var(--zs-primary);
}
.zs-check input:checked + .zs-box .ti {
  opacity: 1;
  transform: none;
}
.zs-check input:checked ~ .zs-check-name {
  color: var(--zs-ink);
  font-weight: 700;
}
.zs-check input:focus-visible + .zs-box {
  outline: 2px solid var(--zs-primary);
  outline-offset: 2px;
}
.zs-check-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zs-check em {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--zs-muted);
  background: var(--zs-bg);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.zs-check[hidden] {
  display: none;
}

/* Precio */
.zs-range {
  position: relative;
  height: 28px;
  margin: 0.1rem 0.4rem 0.75rem;
}
.zs-range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: var(--zs-line);
}
.zs-range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--zs-primary), color-mix(in srgb, var(--zs-primary) 60%, #fff));
}
.zs-range input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.zs-range input[type="range"]::-webkit-slider-runnable-track {
  background: none;
  height: 28px;
}
.zs-range input[type="range"]::-moz-range-track {
  background: none;
}
.zs-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--zs-primary);
  box-shadow: 0 2px 8px rgba(var(--zs-primary-rgb), 0.35);
  cursor: grab;
  transition: transform 0.12s;
}
.zs-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--zs-primary);
  box-shadow: 0 2px 8px rgba(var(--zs-primary-rgb), 0.35);
  cursor: grab;
}
.zs-range input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.12);
  cursor: grabbing;
}
.zs-range input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(var(--zs-primary-rgb), 0.25);
}
.zs-money-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.zs-money {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  border: 1px solid var(--zs-line);
  border-radius: 10px;
  background: var(--zs-bg);
  padding: 0 0.6rem;
  transition: all 0.15s;
  min-width: 0;
}
.zs-money:focus-within {
  border-color: var(--zs-primary);
  background: var(--zs-card);
  box-shadow: 0 0 0 3px rgba(var(--zs-primary-rgb), 0.12);
}
.zs-money span {
  font-weight: 700;
  color: var(--zs-muted);
  font-size: 0.85rem;
}
.zs-money input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.5rem 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--zs-ink);
  outline: none;
  -moz-appearance: textfield;
}
.zs-money input::-webkit-inner-spin-button,
.zs-money input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.zs-money-sep {
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--zs-line);
  flex-shrink: 0;
}
.zs-apply {
  width: 100%;
  margin-top: 0.75rem;
  border: 0;
  border-radius: 10px;
  padding: 0.6rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--zs-primary);
  background: rgba(var(--zs-primary-rgb), 0.1);
  transition: all 0.15s;
}
.zs-apply:hover {
  background: var(--zs-primary);
  color: #fff;
}
.zs-ffoot {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--zs-line);
  background: var(--zs-card);
}
@media (max-width: 991.98px) {
  .zs-filters-oc {
    --bs-offcanvas-width: min(360px, 92vw);
  }
  .zs-filters-oc .zs-filters {
    position: static;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  .zs-filters-oc .zs-fbody {
    flex: 1;
  }
}
.zs-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.zs-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--zs-muted);
  white-space: nowrap;
}
.zs-sort .form-select {
  border-radius: 999px;
  min-width: 170px;
  font-size: 0.875rem;
  background-color: var(--zs-card);
}
.zs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1399.98px) {
  .zs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .zs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
.zs-grid.is-wide {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1199.98px) {
  .zs-grid.is-wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .zs-grid.is-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .zs-grid.is-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.zs-empty {
  background: var(--zs-card);
  border-radius: var(--zs-radius);
  box-shadow: var(--zs-shadow);
  text-align: center;
  padding: 3rem 1.5rem;
}
.zs-empty-ico {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  background: rgba(var(--zs-primary-rgb), 0.1);
  color: var(--zs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
}
.zs-empty h2 {
  font-size: 1.25rem;
  color: var(--zs-ink);
  font-weight: 700;
}
.zs-pager {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.zs-pager a,
.zs-pager span {
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--zs-card);
  color: var(--zs-ink-2);
  font-weight: 600;
  box-shadow: var(--zs-shadow);
}
.zs-pager a:hover {
  color: var(--zs-primary);
}
.zs-pager .is-on {
  background: var(--zs-primary);
  color: #fff;
}
.zs-pager .is-gap {
  background: transparent;
  box-shadow: none;
}

/* ------------------------------------------------------------------ Ficha */
.zs-pdp {
  background: var(--zs-card);
  border-radius: var(--zs-radius);
  box-shadow: var(--zs-shadow);
  padding: 1.5rem;
}
@media (min-width: 992px) {
  .zs-pdp {
    padding: 2rem;
  }
}
.zs-gallery {
  display: flex;
  gap: 0.75rem;
  position: sticky;
  top: 140px;
}
.zs-thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 72px;
  flex-shrink: 0;
  max-height: 560px;
  overflow: auto;
  scrollbar-width: none;
}
.zs-thumb-btn {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  border: 2px solid var(--zs-line);
  background: #fff;
  padding: 4px;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.zs-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.zs-thumb-btn:hover,
.zs-thumb-btn.is-on {
  border-color: var(--zs-primary);
}
.zs-stage {
  position: relative;
  flex: 1;
  aspect-ratio: 1 / 1;
  border-radius: var(--zs-radius);
  background: #fff;
  border: 1px solid var(--zs-line);
  overflow: hidden;
  cursor: zoom-in;
}
.zs-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  transition: transform 0.25s ease;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.zs-stage.is-zoom img {
  transform: scale(1.9);
}
.zs-stage .zs-badge-off {
  font-size: 0.95rem;
  top: 1rem;
  left: 1rem;
}
.zs-stage-ph {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4c5d6;
  font-size: 5rem;
  background: var(--zs-bg);
}
@media (max-width: 767.98px) {
  .zs-gallery {
    flex-direction: column-reverse;
    position: static;
  }
  .zs-thumbs {
    flex-direction: row;
    width: auto;
    overflow-x: auto;
  }
  .zs-thumb-btn {
    width: 60px;
    height: 60px;
  }
}
.zs-pdp-brand {
  display: inline-block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--zs-primary);
  margin-bottom: 0.35rem;
}
.zs-pdp h1 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: var(--zs-ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.zs-pdp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.8rem;
  color: var(--zs-muted);
}
.zs-pricebox {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--zs-radius);
  background: var(--zs-bg);
}
.zs-pricebox .zs-price .zs-int {
  font-size: 2.4rem;
}
.zs-pricebox .zs-price .zs-cur {
  font-size: 1.15rem;
  margin-top: 0.3rem;
}
.zs-pricebox .zs-price sup {
  font-size: 1rem;
  top: 0.3rem;
}
.zs-pricebox .zs-was {
  font-size: 0.9rem;
}
.zs-off-pill {
  background: var(--zs-sale);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}
.zs-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.6rem;
}
.zs-stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.zs-stock.is-ok {
  color: var(--zs-fast);
}
.zs-stock.is-low {
  color: #e08a00;
}
.zs-stock.is-out {
  color: var(--zs-sale);
}
.zs-stock.is-import {
  color: var(--zs-import);
}
.zs-opt-label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--zs-ink);
  margin-bottom: 0.5rem;
}
.zs-opt-label span {
  font-weight: 500;
  color: var(--zs-ink-2);
}
.zs-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.zs-opt {
  min-width: 48px;
  height: 44px;
  padding: 0 0.9rem;
  border-radius: 10px;
  border: 1.5px solid var(--zs-line);
  background: var(--zs-card);
  color: var(--zs-ink);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.12s;
  position: relative;
}
.zs-opt:hover {
  border-color: var(--zs-ink-2);
}
.zs-opt.is-on {
  border-color: var(--zs-primary);
  box-shadow: 0 0 0 1px var(--zs-primary);
  color: var(--zs-primary);
}
.zs-opt.is-na {
  color: var(--zs-muted);
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--zs-line) 50%, transparent calc(50% + 1px)),
    var(--zs-card);
}
.zs-opt.is-na.is-on {
  color: var(--zs-muted);
}
.zs-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.zs-variant-chips .zs-opt {
  height: auto;
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  flex-direction: column;
  gap: 0;
}
.zs-variant-chips .zs-opt small {
  font-weight: 500;
  color: var(--zs-muted);
  font-size: 0.75rem;
}
.zs-variant-chips input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.zs-variant-chips input:checked + .zs-opt {
  border-color: var(--zs-primary);
  box-shadow: 0 0 0 1px var(--zs-primary);
  color: var(--zs-primary);
}
.zs-variant-chips input:disabled + .zs-opt {
  opacity: 0.45;
  text-decoration: line-through;
}
.zs-js .zs-nojs {
  display: none !important;
}
.zs-buy {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.zs-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--zs-line);
  border-radius: 12px;
  overflow: hidden;
  height: 50px;
  background: var(--zs-card);
}
.zs-qty button {
  width: 42px;
  height: 100%;
  border: 0;
  background: none;
  color: var(--zs-ink);
  font-size: 1.1rem;
}
.zs-qty button:hover {
  background: var(--zs-bg);
}
.zs-qty input {
  width: 44px;
  border: 0;
  text-align: center;
  font-weight: 700;
  color: var(--zs-ink);
  background: transparent;
  -moz-appearance: textfield;
}
.zs-qty input::-webkit-inner-spin-button,
.zs-qty input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.zs-btn-now {
  flex-basis: 100%;
}
.zs-btn-cart,
.zs-btn-now {
  white-space: nowrap;
  height: 50px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.975rem;
  flex: 1 1 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.zs-btn-now {
  background: var(--zs-ink);
  color: #fff;
  border: 0;
}
.zs-btn-now:hover {
  background: #000;
  color: #fff;
}
[data-bs-theme="dark"] .zs-btn-now {
  background: #fff;
  color: #1f2133;
}
.zs-btn-heart {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  border: 1.5px solid var(--zs-line);
  background: var(--zs-card);
  color: var(--zs-ink-2);
  font-size: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.zs-btn-heart:hover,
.zs-btn-heart.is-on {
  color: var(--zs-sale);
  border-color: var(--zs-sale);
}
.zs-btn-heart .tabler-heart-filled {
  display: none;
}
.zs-btn-heart.is-on .tabler-heart {
  display: none;
}
.zs-btn-heart.is-on .tabler-heart-filled {
  display: inline-block;
}
.zs-assure {
  margin-top: 1.5rem;
  border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius);
}
.zs-assure-row {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
}
.zs-assure-row + .zs-assure-row {
  border-top: 1px solid var(--zs-line);
}
.zs-assure-row > .ti {
  font-size: 1.4rem;
  color: var(--zs-primary);
  flex-shrink: 0;
}
.zs-assure-row b {
  display: block;
  color: var(--zs-ink);
  font-size: 0.875rem;
}
.zs-shipping-row b { font-size: .92rem; }
.zs-shipping-row b strong { color: var(--zs-primary); }
.zs-shipping-row b .zs-shipping-free { color: var(--zs-fast); }
.zs-assure-row span {
  color: var(--zs-muted);
}
.zs-wa {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--zs-radius);
  background: #e9f9ef;
  color: #128c4b;
  font-weight: 600;
  font-size: 0.875rem;
}
.zs-wa:hover {
  color: #0d6e3a;
  background: #dcf5e6;
}
.zs-wa .ti {
  font-size: 1.5rem;
}
[data-bs-theme="dark"] .zs-wa {
  background: rgba(18, 140, 75, 0.18);
  color: #5fd796;
}
.zs-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--zs-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.zs-tabs button {
  border: 0;
  background: none;
  padding: 0.9rem 1.1rem;
  font-weight: 600;
  color: var(--zs-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.zs-tabs button.active {
  color: var(--zs-ink);
  border-color: var(--zs-primary);
}
.zs-tab-body {
  padding: 1.5rem 0.25rem 0.5rem;
  color: var(--zs-ink-2);
  line-height: 1.7;
}
.zs-specs {
  width: 100%;
  max-width: 640px;
}
.zs-specs th,
.zs-specs td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--zs-line);
  font-size: 0.9rem;
  vertical-align: top;
}
.zs-specs th {
  width: 38%;
  color: var(--zs-muted);
  font-weight: 500;
}
.zs-specs td {
  color: var(--zs-ink);
}

/* Barra fija de compra */
.zs-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;
  background: var(--zs-card);
  border-top: 1px solid var(--zs-line);
  box-shadow: 0 -8px 28px rgba(31, 33, 51, 0.12);
  transform: translateY(110%);
  transition: transform 0.25s ease;
  padding: 0.65rem 0;
}
.zs-stickybar.is-shown {
  transform: none;
}
.zs-stickybar .container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.zs-stickybar img,
.zs-stickybar .zs-sb-ph {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--zs-line);
  flex-shrink: 0;
}
.zs-sb-name {
  flex: 1;
  min-width: 0;
  color: var(--zs-ink);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zs-sb-name small {
  display: block;
  color: var(--zs-muted);
  font-weight: 500;
}
.zs-stickybar .zs-price .zs-int {
  font-size: 1.35rem;
}
.zs-stickybar .btn {
  border-radius: 12px;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .zs-stickybar img,
  .zs-stickybar .zs-sb-ph,
  .zs-sb-name small {
    display: none;
  }
  .zs-stickybar .btn {
    padding: 0.65rem 1rem;
  }
}

/* ------------------------------------------------------------------ Footer */
.zs-footer {
  background: var(--zs-footer-bg);
  color: var(--zs-footer-fg);
  margin-top: 3rem;
  font-size: 0.9rem;
}
.zs-footer-help {
  border-bottom: 1px solid var(--zs-footer-line);
}
.zs-footer-help .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.zs-footer-help h3 {
  color: var(--zs-footer-strong);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}
.zs-footer-help p {
  margin: 0;
}
.zs-footer-help .zs-help-btns {
  margin-left: auto;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.zs-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  background: var(--zs-footer-chip);
  color: var(--zs-footer-strong);
}
.zs-help-btn:hover {
  background: var(--zs-footer-line);
  color: var(--zs-footer-strong);
}
.zs-help-btn.is-wa {
  background: #1fae5b;
}
.zs-help-btn.is-wa:hover {
  background: #1a9a50;
}
.zs-footer-main {
  padding-top: 2.75rem;
  padding-bottom: 2rem;
}
.zs-footer h6 {
  color: var(--zs-footer-strong);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  margin-bottom: 1rem;
}
.zs-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.zs-footer li + li {
  margin-top: 0.55rem;
}
.zs-footer a {
  color: var(--zs-footer-fg);
}
.zs-footer a:hover {
  color: var(--zs-footer-strong);
}
.zs-footer .zs-logo {
  color: var(--zs-footer-strong);
  margin-bottom: 0.9rem;
}
.zs-footer-about {
  max-width: 340px;
}
.zs-footer-contact {
  margin-top: 1rem !important;
}
.zs-footer-contact li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.zs-footer-contact li[hidden] {
  display: none;
}
.zs-footer-contact .icon-base {
  margin-top: 0.2rem;
  color: var(--zs-footer-strong);
}
.zs-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.zs-social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--zs-footer-chip);
  color: var(--zs-footer-strong);
  font-size: 1.15rem;
}
.zs-social a[hidden] {
  display: none;
}
.zs-social a:hover {
  background: var(--bs-primary);
  color: var(--bs-primary-contrast, #fff);
}
.zs-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.zs-pay span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--zs-footer-chip);
  color: var(--zs-footer-fg);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.zs-footer-bottom {
  border-top: 1px solid var(--zs-footer-line);
  padding: 1.1rem 0;
  font-size: 0.8rem;
}
.zs-footer-bottom .container {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
body.has-stickybar .zs-footer {
  padding-bottom: 72px;
}

.zs-buy .zs-btn-now {
  flex: 1 1 100%;
}

.zs-more-list[hidden] {
  display: none;
}
.zs-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
  border: 0;
  background: none;
  padding: 0.25rem 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--zs-primary);
}
.zs-more-btn .ti {
  transition: transform 0.2s;
}
.zs-more-btn[aria-expanded="true"] .ti {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------------ Mega menú 3 niveles */
.zs-cats {
  position: static;
}
.zs-nav .container {
  position: relative;
}
.zs-mega3 {
  left: 0.75rem !important;
  right: 0.75rem;
  top: calc(100% + 1px) !important;
  margin: 0 !important;
  padding: 0;
  border: 1px solid var(--zs-line);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 24px 60px -18px rgba(31, 33, 51, 0.3);
  overflow: hidden;
  display: none;
  height: min(560px, calc(100vh - 170px));
}
.zs-mega3.show {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) minmax(0, 1fr);
}
.zs-m3-col {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 0.75rem;
  margin: 0;
}
.zs-m3-col + .zs-m3-col {
  border-left: 1px solid var(--zs-line);
}
.zs-m3-depts {
  list-style: none;
  background: var(--zs-bg);
}
.zs-m3-dept {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border-radius: 14px;
  color: var(--zs-ink);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.12s;
}
.zs-m3-dept:hover,
.zs-m3-dept.is-on {
  background: var(--zs-card);
  color: var(--zs-primary);
  box-shadow: 0 2px 10px rgba(31, 33, 51, 0.06);
}
.zs-m3-img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--zs-primary-rgb), 0.16), rgba(var(--zs-primary-rgb), 0.05));
  color: var(--zs-primary);
  font-size: 1.2rem;
}
.zs-m3-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zs-m3-img.sm {
  width: 34px;
  height: 34px;
  font-size: 1rem;
}
.zs-m3-name {
  flex: 1;
  min-width: 0;
}
.zs-m3-arrow {
  color: var(--zs-muted);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.15s;
}
.zs-m3-dept:hover .zs-m3-arrow,
.zs-m3-dept.is-on .zs-m3-arrow {
  opacity: 1;
  transform: none;
  color: var(--zs-primary);
}
.zs-m3-pane[hidden] {
  display: none;
}
.zs-m3-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem 0.85rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--zs-line);
  color: var(--zs-ink);
}
.zs-m3-head b {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.zs-m3-head span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--zs-primary);
  white-space: nowrap;
}
.zs-m3-head:hover span .ti {
  transform: translateX(3px);
}
.zs-m3-head span .ti {
  transition: transform 0.15s;
}
.zs-m3-cat,
.zs-m3-sub {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  color: var(--zs-ink-2);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.12s;
}
.zs-m3-cat span {
  flex: 1;
}
.zs-m3-cat .ti {
  color: var(--zs-muted);
  font-size: 0.95rem;
}
.zs-m3-cat:hover,
.zs-m3-cat.is-on {
  background: rgba(var(--zs-primary-rgb), 0.08);
  color: var(--zs-primary);
}
.zs-m3-cat.is-on .ti,
.zs-m3-cat:hover .ti {
  color: var(--zs-primary);
}
.zs-m3-sub:hover {
  background: var(--zs-bg);
  color: var(--zs-primary);
}
.zs-m3-empty {
  padding: 0.5rem 0.85rem;
  color: var(--zs-muted);
  font-size: 0.88rem;
}
.zs-m3-promo {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem;
  color: var(--zs-muted);
  font-size: 0.85rem;
}
.zs-m3-promo .ti {
  font-size: 2rem;
  color: rgba(var(--zs-primary-rgb), 0.45);
}
.zs-m3-promo b {
  color: var(--zs-ink);
  font-size: 0.95rem;
}
@media (max-width: 1199.98px) {
  .zs-mega3.show {
    grid-template-columns: 280px minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Árbol en el menú del celular */
.zs-m-tree > summary {
  list-style: none;
  cursor: pointer;
}
.zs-m-tree > summary::-webkit-details-marker {
  display: none;
}
.zs-m-caret {
  transition: transform 0.2s;
}
.zs-m-tree[open] > summary .zs-m-caret {
  transform: rotate(180deg);
}
.zs-m-tree[open] > summary.zs-m-link {
  color: var(--zs-primary);
  background: rgba(var(--zs-primary-rgb), 0.05);
}
.zs-m-sub {
  display: flex;
  align-items: center;
  padding: 0.6rem 1.25rem 0.6rem 4.1rem;
  color: var(--zs-ink-2);
  font-size: 0.9rem;
}
.zs-m-sub:hover {
  background: var(--zs-bg);
  color: var(--zs-ink);
}
.zs-m-sub.lvl3 {
  padding-left: 5.1rem;
  font-size: 0.86rem;
}
.zs-m-sub.is-all {
  color: var(--zs-primary);
  font-weight: 600;
}
.zs-m-tree.lvl2[open] > summary {
  color: var(--zs-ink);
  font-weight: 600;
}

/* ------------------------------------------------------------------ Estrellas */
.zs-stars {
  display: inline-flex;
  gap: 1px;
  color: #f5a524;
  font-size: 1.05rem;
  line-height: 1;
  vertical-align: middle;
}
.zs-stars .tabler-star {
  color: #d9dae6;
}
.zs-stars.is-sm {
  font-size: 0.85rem;
}
.zs-stars.is-lg {
  font-size: 1.5rem;
  gap: 3px;
}
.zs-card-rating {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: -0.2rem 0 0.45rem;
  font-size: 0.75rem;
  color: var(--zs-muted);
}
.zs-pdp-rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--zs-muted);
}
.zs-pdp-rating b {
  color: var(--zs-ink);
}
.zs-pdp-rating:hover span {
  color: var(--zs-primary);
  text-decoration: underline;
}

/* ------------------------------------------------------------------ Secciones de la ficha */
.zs-secnav {
  position: sticky;
  top: 112px;
  z-index: 5;
  display: flex;
  gap: 0.35rem;
  margin: 1.25rem 0 0;
  padding: 0.4rem;
  background: var(--zs-card);
  border-radius: 14px;
  box-shadow: var(--zs-shadow);
  overflow-x: auto;
  scrollbar-width: none;
}
.zs-secnav a,
.zs-sb-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--zs-ink-2);
  white-space: nowrap;
  transition: all 0.15s;
}
.zs-secnav a:hover,
.zs-sb-nav a:hover {
  background: var(--zs-bg);
  color: var(--zs-ink);
}
.zs-secnav a.is-on,
.zs-sb-nav a.is-on {
  background: rgba(var(--zs-primary-rgb), 0.1);
  color: var(--zs-primary);
}
.zs-secnav em,
.zs-block-title em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--zs-bg);
  color: var(--zs-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.zs-block {
  margin-top: 1rem;
  scroll-margin-top: 180px;
}
.zs-block-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--zs-ink);
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}
.zs-block-title .ti {
  color: var(--zs-primary);
  font-size: 1.35rem;
}
.zs-desc {
  color: var(--zs-ink-2);
  line-height: 1.75;
  max-width: 900px;
}
.zs-empty-line {
  color: var(--zs-muted);
  margin: 0.5rem 0 0;
}

/* Preguntas */
.zs-ask {
  margin-bottom: 1.5rem;
}
.zs-ask-form {
  position: relative;
  display: flex;
  gap: 0.6rem;
}
.zs-ask-form > .ti {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zs-muted);
  font-size: 1.2rem;
}
.zs-ask-form input {
  flex: 1;
  border-radius: 12px;
  padding: 0.8rem 1rem 0.8rem 2.8rem;
  background: var(--zs-bg);
  border-color: transparent;
}
.zs-ask-form input:focus {
  background: var(--zs-card);
}
.zs-ask-form .btn {
  border-radius: 12px;
  padding-inline: 1.5rem;
  font-weight: 700;
}
.zs-ask-note {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--zs-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.zs-ask-login {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: rgba(var(--zs-primary-rgb), 0.06);
  border: 1px dashed rgba(var(--zs-primary-rgb), 0.35);
  color: var(--zs-ink-2);
}
.zs-ask-login > .ti:first-child {
  font-size: 1.5rem;
  color: var(--zs-primary);
}
.zs-ask-login span {
  flex: 1;
}
.zs-ask-login b {
  color: var(--zs-primary);
}
.zs-qa {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zs-qa-item {
  padding: 1.1rem 0.25rem;
}
.zs-qa-item + .zs-qa-item {
  border-top: 1px solid var(--zs-line);
}
.zs-qa-item[hidden] {
  display: none;
}
.zs-qa-meta {
  font-size: 0.78rem;
  color: var(--zs-muted);
  margin-bottom: 0.25rem;
}
.zs-qa-q {
  font-weight: 700;
  color: var(--zs-ink);
  font-size: 1rem;
  margin-bottom: 0.6rem;
}
.zs-qa-a {
  display: flex;
  gap: 0.75rem;
  padding-left: 0.5rem;
}
.zs-qa-line {
  width: 16px;
  height: 18px;
  border-left: 2px solid var(--zs-line);
  border-bottom: 2px solid var(--zs-line);
  border-bottom-left-radius: 6px;
  flex-shrink: 0;
}
.zs-qa-a p {
  margin: 0 0 0.25rem;
  color: var(--zs-ink-2);
  line-height: 1.6;
}
.zs-qa-a small {
  color: var(--zs-muted);
  font-size: 0.78rem;
}

/* Opiniones */
.zs-rsum {
  text-align: center;
  padding: 1.5rem;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(245, 165, 36, 0.1), rgba(245, 165, 36, 0.02));
  border: 1px solid rgba(245, 165, 36, 0.2);
}
.zs-rsum-big {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--zs-ink);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.35rem;
}
.zs-rsum-big small {
  font-size: 1.1rem;
  color: var(--zs-muted);
  font-weight: 600;
}
.zs-rsum-n {
  font-size: 0.85rem;
  color: var(--zs-muted);
  margin: 0.4rem 0 1rem;
}
.zs-bars {
  display: grid;
  gap: 0.35rem;
}
.zs-bar {
  display: grid;
  grid-template-columns: 34px 1fr 28px;
  align-items: center;
  gap: 0.6rem;
  border: 0;
  background: none;
  padding: 0.2rem 0.35rem;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--zs-ink-2);
  font-weight: 600;
}
.zs-bar:not(:disabled):hover,
.zs-bar.is-on {
  background: rgba(245, 165, 36, 0.14);
}
.zs-bar:disabled {
  opacity: 0.55;
  cursor: default;
}
.zs-bar > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.zs-bar > span:first-child .ti {
  color: #f5a524;
  font-size: 0.8rem;
}
.zs-bar-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(31, 33, 51, 0.08);
  overflow: hidden;
}
.zs-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f5a524, #ffc15e);
}
.zs-bar-n {
  text-align: right;
  color: var(--zs-muted);
}
.zs-rform {
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--zs-line);
}
.zs-rform h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--zs-ink);
  margin-bottom: 0.25rem;
}
.zs-rform > p {
  font-size: 0.82rem;
  color: var(--zs-muted);
}
.zs-rform .form-control {
  border-radius: 10px;
  background: var(--zs-bg);
  border-color: transparent;
}
.zs-rform .form-control:focus {
  background: var(--zs-card);
}
.zs-rform-done {
  display: flex;
  gap: 0.75rem;
  font-size: 0.85rem;
}
.zs-rform-done > .ti {
  font-size: 1.6rem;
  color: var(--zs-fast);
}
.zs-rform-done b {
  display: block;
  color: var(--zs-ink);
}
.zs-rform-done span {
  color: var(--zs-muted);
}
.zs-star-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 0.2rem;
  margin: 0.25rem 0 0.9rem;
}
.zs-star-input input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.zs-star-input label {
  cursor: pointer;
  font-size: 1.9rem;
  color: #d9dae6;
  line-height: 1;
  transition:
    color 0.12s,
    transform 0.12s;
}
.zs-star-input label:hover,
.zs-star-input label:hover ~ label,
.zs-star-input input:checked ~ label {
  color: #f5a524;
}
.zs-star-input label:hover {
  transform: scale(1.12);
}
.zs-star-input input:focus-visible + label {
  outline: 2px solid #f5a524;
  outline-offset: 2px;
  border-radius: 4px;
}
.zs-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--zs-fast);
  font-weight: 700;
}
.zs-reviews {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zs-review {
  padding: 1.25rem 0;
}
.zs-review:first-child {
  padding-top: 0;
}
.zs-review + .zs-review {
  border-top: 1px solid var(--zs-line);
}
.zs-review[hidden] {
  display: none;
}
.zs-review-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.zs-review-head > div {
  flex: 1;
  min-width: 0;
}
.zs-review-head b {
  display: block;
  color: var(--zs-ink);
  font-size: 0.9rem;
}
.zs-review-head small {
  color: var(--zs-muted);
  font-size: 0.78rem;
}
.zs-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zs-primary), color-mix(in srgb, var(--zs-primary) 60%, #fff));
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
.zs-review h4 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--zs-ink);
  margin-bottom: 0.3rem;
}
.zs-review p {
  margin: 0;
  color: var(--zs-ink-2);
  line-height: 1.65;
}
.zs-empty-flat {
  box-shadow: none;
  border: 1px dashed var(--zs-line);
}

/* Barra fija: secciones como en las grandes tiendas */
.zs-sb-nav {
  gap: 0.15rem;
}
.zs-sb-nav a {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}
.zs-stickybar .zs-sb-nav ~ .zs-sb-name {
  display: none;
}
@media (max-width: 1199.98px) {
  .zs-stickybar .zs-sb-nav ~ .zs-sb-name {
    display: block;
  }
}
@media (max-width: 767.98px) {
  .zs-secnav {
    top: 104px;
  }
  .zs-ask-form {
    flex-direction: column;
  }
  .zs-ask-form > .ti {
    top: 1.45rem;
  }
}

.zs-stickybar .zs-price {
  margin-left: auto;
}

/* Envío por zonas (carrito y checkout) */
.zs-ship-zones li { display: flex; justify-content: space-between; gap: .75rem; padding: .3rem 0; color: var(--bs-body-color); }
.zs-ship-zones li + li { border-top: 1px dashed var(--bs-border-color); }
.zs-ship-zones em { font-style: normal; color: var(--bs-secondary-color); }
.zs-ship-note:empty { display: none; }
.zs-ship-note { padding: .6rem .75rem; border-radius: .6rem; background: rgba(var(--bs-primary-rgb), .06); color: var(--bs-body-color); }

/* Checkout › validación: selectores con buscador y formas de pago en rojo */
.select2.is-invalid .select2-selection { border-color: var(--bs-form-invalid-border-color, var(--bs-danger)) !important; box-shadow: 0 0 0 .15rem rgba(var(--bs-danger-rgb), .12); }
.select2.is-invalid .select2-selection__placeholder { color: var(--bs-danger); }
.zs-pay-options.is-invalid .custom-option { border-color: var(--bs-danger) !important; background: rgba(var(--bs-danger-rgb), .04); }
.zs-pay-options.is-invalid .custom-option .form-check-input { border-color: var(--bs-danger); }
.zs-pay-options.is-invalid + .invalid-feedback,
.zs-pay-options.is-invalid ~ [data-zs-payment-error] { display: flex !important; align-items: center; gap: .35rem; font-weight: 500; margin-top: .6rem; }
.zs-pay-options.is-invalid ~ [data-zs-payment-error]::before { content: "!"; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--bs-danger); color: #fff; font-size: .72rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .zs-pay-options.is-invalid .custom-option { animation: zs-shake .35s ease; }
}
@keyframes zs-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.custom-option.is-disabled { opacity: .6; cursor: not-allowed; background: var(--bs-tertiary-bg, rgba(0,0,0,.02)); }
.custom-option.is-disabled .custom-option-content { cursor: not-allowed; }

/* Pedido › Completa tu pago */
.zs-paybox { background: var(--bs-paper-bg, #fff); border: 1px solid rgba(var(--bs-warning-rgb), .55); border-radius: 1rem; overflow: hidden; box-shadow: 0 .125rem 1.5rem rgba(47, 43, 61, .06); }
.zs-pay-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; padding: 1.4rem 1.5rem; background: linear-gradient(135deg, rgba(var(--bs-warning-rgb), .12), rgba(var(--bs-primary-rgb), .06)); border-bottom: 1px solid var(--bs-border-color); }
.zs-pay-head h5 { margin: .2rem 0 .25rem; font-size: 1.25rem; }
.zs-pay-head small { color: var(--bs-secondary-color); }
.zs-pay-eyebrow { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b86e00; --bs-icon-size: .9rem; }
.zs-pay-amount { text-align: right; }
.zs-pay-amount small { display: block; font-size: .75rem; color: var(--bs-secondary-color); }
.zs-pay-amount b { font-size: 1.9rem; line-height: 1.1; color: var(--bs-primary); font-variant-numeric: tabular-nums; }
.zs-pay-body { padding: 1.5rem; display: grid; gap: 1.25rem; }
.zs-pay-opt { padding: 1.25rem; border: 1px solid var(--bs-border-color); border-radius: .85rem; display: grid; gap: 1rem; }
.zs-pay-opt.is-main { border-color: rgba(var(--bs-primary-rgb), .45); box-shadow: 0 .25rem 1rem rgba(var(--bs-primary-rgb), .08); }
.zs-pay-opt-head { display: flex; gap: .85rem; align-items: center; }
.zs-pay-opt-head b { display: block; font-size: 1rem; color: var(--bs-heading-color); }
.zs-pay-opt-head small { color: var(--bs-secondary-color); }
.zs-pay-ico { flex: none; width: 2.75rem; height: 2.75rem; border-radius: .7rem; display: grid; place-items: center; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); --bs-icon-size: 1.45rem; }
.zs-pay-ico.is-bank { background: rgba(var(--bs-info-rgb), .12); color: var(--bs-info); }
.zs-pay-btn { justify-content: center; font-weight: 600; }
.zs-pay-safe { display: flex; gap: .45rem; align-items: flex-start; color: var(--bs-secondary-color); font-size: .78rem; line-height: 1.4; --bs-icon-size: 1rem; }
.zs-pay-safe i { color: var(--bs-success); margin-top: .05rem; }
.zs-pay-or { display: flex; align-items: center; gap: .85rem; color: var(--bs-secondary-color); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.zs-pay-or::before, .zs-pay-or::after { content: ""; flex: 1; height: 1px; background: var(--bs-border-color); }
.zs-pay-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; font-size: .84rem; }
.zs-pay-steps li { display: flex; gap: .55rem; align-items: flex-start; line-height: 1.35; }
.zs-pay-steps p { margin: 0; }
.zs-pay-steps b { color: var(--bs-heading-color); white-space: nowrap; }
.zs-pay-steps span { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--bs-primary); color: #fff; }
.zs-bank { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--bs-border-color); border-radius: .7rem; overflow: hidden; }
.zs-bank > div { padding: .7rem .9rem; border-bottom: 1px solid var(--bs-border-color); min-width: 0; }
.zs-bank > div:nth-child(odd) { border-right: 1px solid var(--bs-border-color); }
.zs-bank > div:nth-last-child(-n+2) { border-bottom: 0; }
.zs-bank dt { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); margin-bottom: .15rem; }
.zs-bank dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 600; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; }
.zs-bank dd span { overflow-wrap: anywhere; }
.zs-copy { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: .5rem; background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); cursor: pointer; transition: background .15s ease; --bs-icon-size: 1rem; }
.zs-copy:hover { background: rgba(var(--bs-primary-rgb), .16); }
.zs-copy.is-done { background: rgba(var(--bs-success-rgb), .14); color: var(--bs-success); }
.zs-bank-text { margin: 0; padding: .9rem 1rem; border-radius: .7rem; background: var(--bs-tertiary-bg, rgba(0,0,0,.03)); white-space: pre-wrap; font-family: inherit; font-size: .88rem; }
.zs-pay-proof { padding-top: 1rem; border-top: 1px dashed var(--bs-border-color); }
.zs-pay-done { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: .8rem; background: rgba(var(--bs-success-rgb), .09); --bs-icon-size: 1.6rem; }
.zs-pay-done i { color: var(--bs-success); }
.zs-pay-done b { display: block; color: var(--bs-heading-color); }
.zs-pay-done span { font-size: .86rem; color: var(--bs-body-color); }
@media (max-width: 767.98px) {
  .zs-pay-head { align-items: flex-start; }
  .zs-pay-amount { text-align: left; }
  .zs-pay-steps, .zs-bank { grid-template-columns: 1fr; }
  .zs-bank > div:nth-child(odd) { border-right: 0; }
  .zs-bank > div:nth-last-child(2) { border-bottom: 1px solid var(--bs-border-color); }
}

/* =====================================================================
   Pagar con tarjeta: checkout al estilo de las tiendas grandes
   ===================================================================== */
.zp2 { padding: 2rem 0 4rem; }
.zp2-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.25rem 2rem; margin-bottom: 1.75rem; }
.zp2-back { display: inline-flex; align-items: center; gap: .2rem; font-size: .85rem; font-weight: 500; color: var(--bs-secondary-color); margin-bottom: .5rem; --bs-icon-size: 1rem; }
.zp2-back:hover { color: var(--bs-primary); }
.zp2-top h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .35rem; }
.zp2-top p { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--bs-secondary-color); --bs-icon-size: 1rem; }
.zp2-top p i { color: var(--bs-success); }
.zp2-steps { list-style: none; display: flex; align-items: center; gap: .4rem; margin: 0; padding: .4rem .5rem; border-radius: 2rem; background: var(--bs-paper-bg, #fff); border: 1px solid var(--bs-border-color); font-size: .85rem; font-weight: 500; color: var(--bs-secondary-color); }
.zp2-steps li { display: flex; align-items: center; gap: .45rem; padding-right: .5rem; }
.zp2-steps li + li::before { content: ""; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--bs-border-color); margin-right: .1rem; }
.zp2-steps li.is-done + li::before { background: var(--bs-success); }
.zp2-steps span { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--bs-border-color); color: var(--bs-body-color); --bs-icon-size: .85rem; }
.zp2-steps .is-done span { background: var(--bs-success); color: #fff; }
.zp2-steps .is-on { color: var(--bs-heading-color); }
.zp2-steps .is-on span { background: var(--bs-primary); color: #fff; box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .15); }

.zp2-card { background: var(--bs-paper-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: 1rem; box-shadow: 0 .125rem 1.5rem rgba(47, 43, 61, .06); }
.zp2-card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--bs-border-color); }
.zp2-card-head h2 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.zp2-secure { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--bs-success); --bs-icon-size: 1rem; }

.zp2-radio { flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid var(--bs-border-color); }
.zp2-brands { display: flex; gap: .35rem; }
.zp2-brands span { padding: .2rem .45rem; border: 1px solid var(--bs-border-color); border-radius: .35rem; background: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .02em; color: #1a1f71; }
.zp2-brands span + span { color: #333; font-weight: 700; }
.zp2-test { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-radius: .6rem; background: rgba(var(--bs-warning-rgb), .14); color: #8a5300; font-size: .85rem; font-weight: 500; --bs-icon-size: 1rem; }
.zp2-alert { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: .7rem; background: rgba(var(--bs-danger-rgb), .08); border: 1px solid rgba(var(--bs-danger-rgb), .25); color: var(--bs-danger); font-size: .9rem; font-weight: 500; --bs-icon-size: 1.2rem; }
.zp2-alert[hidden], .zp2-done[hidden] { display: none; }
.zp2-frame { position: relative; margin: -.25rem -.5rem 0; min-height: 560px; border-radius: .8rem; overflow: hidden; }
.zp2-frame .zs-payframe-iframe { display: block; width: 100%; height: 820px; border: 0; background: transparent; color-scheme: light; }
.zp2-frame .zs-payframe-iframe[hidden] { display: none; }
.zp2-loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .9rem; padding: 1.5rem 1rem; background: var(--bs-paper-bg, #fff); }
.zp2-loading small { display: flex; align-items: center; justify-content: center; margin-top: .5rem; color: var(--bs-secondary-color); }
.zp2-skel { display: block; height: 2.9rem; border-radius: .6rem; background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.09) 50%, rgba(0,0,0,.05) 75%); background-size: 200% 100%; animation: zp2-shimmer 1.2s infinite linear; }
.zp2-skel.is-w60 { width: 60%; height: 1.2rem; }
.zp2-skel.is-w40 { width: 40%; height: 1.2rem; }
.zp2-skel.is-btn { height: 3.2rem; background-color: rgba(var(--bs-primary-rgb), .12); }
@keyframes zp2-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .zp2-skel { animation: none; } }
.zp2-done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 360px; text-align: center; }
.zp2-done-ico { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--bs-success-rgb), .14); color: var(--bs-success); --bs-icon-size: 2rem; animation: zp2-pop .4s ease; }
.zp2-done b { font-size: 1.3rem; color: var(--bs-heading-color); }
.zp2-done small { color: var(--bs-secondary-color); }
@keyframes zp2-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.zp2-trust { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.zp2-trust li { display: flex; gap: .65rem; align-items: flex-start; padding: .85rem 1rem; border-radius: .8rem; background: var(--bs-paper-bg, #fff); border: 1px solid var(--bs-border-color); --bs-icon-size: 1.3rem; }
.zp2-trust i { color: var(--bs-primary); flex: none; }
.zp2-trust b { display: block; font-size: .85rem; color: var(--bs-heading-color); }
.zp2-trust small { font-size: .75rem; color: var(--bs-secondary-color); }

.zp2-aside { position: sticky; top: 100px; }
.zp2-sum { padding: 1.25rem 1.5rem 1.5rem; }
.zp2-items { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: 1rem; }
.zp2-items li { display: flex; align-items: center; gap: .9rem; }
.zp2-thumb { position: relative; flex: none; width: 4rem; height: 4rem; border-radius: .7rem; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg, #f6f6f8); display: grid; place-items: center; color: var(--bs-secondary-color); --bs-icon-size: 1.4rem; }
.zp2-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.zp2-thumb em { position: absolute; top: -.45rem; right: -.45rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 1rem; display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 700; background: var(--bs-secondary-color); color: #fff; }
.zp2-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zp2-item-main b { font-weight: 600; color: var(--bs-heading-color); font-size: .92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zp2-item-main small { color: var(--bs-secondary-color); font-size: .8rem; }
.zp2-items strong { font-weight: 600; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zp2-totals { margin: 0; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); display: grid; gap: .55rem; }
.zp2-totals > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.zp2-totals dt { font-weight: 400; color: var(--bs-body-color); }
.zp2-totals dt small { color: var(--bs-secondary-color); }
.zp2-totals dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--bs-heading-color); }
.zp2-totals .is-good dt, .zp2-totals .is-good dd { color: var(--bs-success); }
.zp2-total { margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--bs-border-color); align-items: baseline; }
.zp2-total dt { font-size: 1.1rem; font-weight: 600; color: var(--bs-heading-color); }
.zp2-total dd { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.zp2-total dd small { font-size: .75rem; font-weight: 500; color: var(--bs-secondary-color); margin-right: .35rem; }
.zp2-facts { list-style: none; padding: 1.1rem 0 0; margin: 1.1rem 0 0; border-top: 1px dashed var(--bs-border-color); display: grid; gap: .85rem; }
.zp2-facts li { display: flex; gap: .7rem; align-items: flex-start; --bs-icon-size: 1.2rem; }
.zp2-facts i { color: var(--bs-primary); flex: none; margin-top: .1rem; }
.zp2-facts b { display: block; font-size: .87rem; font-weight: 600; color: var(--bs-heading-color); }
.zp2-facts small { font-size: .78rem; color: var(--bs-secondary-color); }
.zp2-help { display: flex; gap: .75rem; align-items: center; margin-top: 1rem; padding: .9rem 1.1rem; border-radius: .9rem; border: 1px solid rgba(var(--bs-success-rgb), .3); background: rgba(var(--bs-success-rgb), .06); color: var(--bs-body-color); --bs-icon-size: 1.6rem; }
.zp2-help i { color: #25d366; }
.zp2-help b { display: block; color: var(--bs-heading-color); font-size: .9rem; }
.zp2-help small { color: var(--bs-secondary-color); }

.zp2-mobile { margin-bottom: 1.25rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-paper-bg, #fff); }
.zp2-mobile summary { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; cursor: pointer; list-style: none; font-weight: 500; color: var(--bs-primary); --bs-icon-size: 1.1rem; }
.zp2-mobile summary::-webkit-details-marker { display: none; }
.zp2-mobile summary span { display: inline-flex; align-items: center; gap: .4rem; }
.zp2-mobile summary b { font-size: 1.15rem; color: var(--bs-heading-color); }
.zp2-mobile[open] .zp2-caret { transform: rotate(180deg); }
.zp2-mobile[open] summary { border-bottom: 1px solid var(--bs-border-color); }
@media (max-width: 767.98px) {
  .zp2-top { align-items: flex-start; }
  .zp2-steps { font-size: .78rem; }
  .zp2-trust { grid-template-columns: 1fr; }
  .zp2-card-head { padding: 1rem; }
  .zp2-frame .zs-payframe-iframe { height: 960px; }
  .zp2-brands span + span { display: none; }
}

/* Carrito vacío: pedido esperando pago */
.zs-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 1.25rem; padding: 1.25rem 1.5rem; border-radius: 1rem; background: var(--bs-paper-bg, #fff); border: 1px solid rgba(var(--bs-warning-rgb), .5); box-shadow: 0 .25rem 1rem rgba(47, 43, 61, .05); }
.zs-pending-thumbs { display: flex; }
.zs-pending-thumbs span { width: 3.5rem; height: 3.5rem; border-radius: .7rem; border: 2px solid var(--bs-paper-bg, #fff); background: var(--bs-tertiary-bg, #f6f6f8); display: grid; place-items: center; overflow: hidden; color: var(--bs-secondary-color); box-shadow: 0 0 0 1px var(--bs-border-color); }
.zs-pending-thumbs span + span { margin-left: -1rem; }
.zs-pending-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.zs-pending-main { flex: 1; min-width: 14rem; display: flex; flex-direction: column; gap: .15rem; }
.zs-pending-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #b86e00; --bs-icon-size: .9rem; }
.zs-pending-main b { font-size: 1.05rem; color: var(--bs-heading-color); }
.zs-pending-main small { color: var(--bs-secondary-color); }
.zs-pending-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.zs-cart-more { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.1rem 1.5rem; border-radius: 1rem; border: 1px dashed var(--bs-border-color); background: var(--bs-paper-bg, #fff); }
.zs-cart-more > span { width: 3rem; height: 3rem; border-radius: .8rem; display: grid; place-items: center; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); --bs-icon-size: 1.4rem; }
.zs-cart-more > div { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
.zs-cart-more b { color: var(--bs-heading-color); }
.zs-cart-more small { color: var(--bs-secondary-color); }

/* Encabezado: pedido esperando pago */
.zs-count.is-pending { background: #f59e0b; animation: zs-pulse 2s ease-in-out infinite; }
@keyframes zs-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .5); } 50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); } }
@media (prefers-reduced-motion: reduce) { .zs-count.is-pending { animation: none; } }
.zs-top-pending { display: inline-block; margin-left: .3rem; padding: .05rem .45rem; border-radius: 1rem; background: #f59e0b; color: #fff; font-size: .7rem; font-weight: 700; }


/* =====================================================================
   Página del pedido
   ===================================================================== */
.zod { padding: 2rem 0 4rem; }
.zod-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.zod-head h1 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .3rem; }
.zod-head p { margin: 0; color: var(--bs-secondary-color); }
.zod-status { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 2rem; font-weight: 600; font-size: .9rem; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); --bs-icon-size: 1rem; }
.zod-status.is-pending_payment { background: rgba(var(--bs-warning-rgb), .16); color: #a35d00; }
.zod-status.is-delivered, .zod-status.is-paid { background: rgba(var(--bs-success-rgb), .14); color: var(--bs-success); }
.zod-status.is-cancelled { background: rgba(var(--bs-secondary-rgb), .14); color: var(--bs-secondary-color); }
.zod-thanks { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.5rem; padding: 1.4rem 1.6rem; border-radius: 1rem; background: linear-gradient(135deg, rgba(var(--bs-success-rgb), .12), rgba(var(--bs-primary-rgb), .06)); border: 1px solid rgba(var(--bs-success-rgb), .3); }
.zod-thanks-ico { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--bs-success); color: #fff; box-shadow: 0 .5rem 1.25rem rgba(var(--bs-success-rgb), .35); --bs-icon-size: 1.8rem; animation: zp2-pop .45s ease; }
.zod-thanks h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 .25rem; }
.zod-thanks p { margin: 0; color: var(--bs-body-color); }
.zod-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-bottom: 1.5rem; padding: 1.4rem 1rem 1.1rem; background: var(--bs-paper-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: 1rem; box-shadow: 0 .125rem 1.5rem rgba(47, 43, 61, .06); }
.zod-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 0 .25rem; color: var(--bs-secondary-color); }
.zod-step::before { content: ""; position: absolute; top: 1.15rem; left: calc(-50% + 1.6rem); right: calc(50% + 1.6rem); height: 3px; border-radius: 3px; background: var(--bs-border-color); }
.zod-step:first-child::before { display: none; }
.zod-step.is-done::before { background: var(--bs-success); }
.zod-step-ico { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--bs-tertiary-bg, #f1f1f4); color: var(--bs-secondary-color); border: 2px solid var(--bs-border-color); --bs-icon-size: 1.1rem; }
.zod-step b { font-size: .85rem; font-weight: 600; color: var(--bs-body-color); }
.zod-step small { font-size: .72rem; }
.zod-step.is-done .zod-step-ico { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.zod-step.is-done b { color: var(--bs-heading-color); }
.zod-step.is-now .zod-step-ico { border-color: var(--bs-primary); color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12); }
.zod-step.is-now small { color: var(--bs-primary); font-weight: 600; }
.zod-step.is-bad .zod-step-ico { background: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }
.zod-step.is-bad b { color: var(--bs-danger); }
.zod-facts { padding: 1.25rem 1.5rem 1.4rem !important; margin: 0 !important; border-top: 0 !important; }
.zod-facts small { display: block; }
.zod-feed { list-style: none; margin: 0; padding: 1.25rem 1.5rem 1.4rem; display: grid; gap: 1rem; }
.zod-feed li { position: relative; display: flex; gap: .85rem; }
.zod-feed li > span { flex: none; width: .75rem; height: .75rem; margin-top: .3rem; border-radius: 50%; background: var(--bs-border-color); box-shadow: 0 0 0 3px var(--bs-paper-bg, #fff); z-index: 1; }
.zod-feed li.is-last > span { background: var(--bs-primary); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .15); }
.zod-feed li:not(:last-child)::after { content: ""; position: absolute; left: .34rem; top: 1.1rem; bottom: -1.1rem; width: 2px; background: var(--bs-border-color); }
.zod-feed b { display: block; font-size: .9rem; color: var(--bs-heading-color); }
.zod-feed small { font-size: .75rem; color: var(--bs-secondary-color); }
.zod-feed p { margin: .2rem 0 0; font-size: .82rem; color: var(--bs-body-color); }

/* Comprobante: zona para subir la foto */
.zs-drop { position: relative; display: flex; align-items: center; min-height: 3.1rem; margin: 0; padding: .55rem .8rem; border: 1.5px dashed var(--bs-border-color); border-radius: .6rem; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.zs-drop:hover, .zs-drop.is-over { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .04); }
.zs-drop.is-invalid { border-color: var(--bs-danger); }
.zs-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zs-drop:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }
.zs-drop-empty, .zs-drop-file { display: flex; align-items: center; gap: .7rem; width: 100%; min-width: 0; }
.zs-drop-empty[hidden], .zs-drop-file[hidden] { display: none; }
.zs-drop-empty > i { color: var(--bs-primary); --bs-icon-size: 1.4rem; }
.zs-drop span span { display: flex; flex-direction: column; min-width: 0; }
.zs-drop b { font-size: .88rem; font-weight: 600; color: var(--bs-heading-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-drop small { font-size: .74rem; color: var(--bs-secondary-color); }
.zs-drop-file img { flex: none; width: 2.4rem; height: 2.4rem; border-radius: .4rem; object-fit: cover; background: var(--bs-tertiary-bg, #f1f1f4); }
.zs-drop-file > span { flex: 1; }
.zs-drop-x { flex: none; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--bs-danger-rgb), .1); color: var(--bs-danger); --bs-icon-size: 1rem; }

@media (max-width: 767.98px) {
  .zod-track { grid-auto-flow: row; grid-auto-columns: auto; gap: .9rem; padding: 1.1rem 1.25rem; }
  .zod-step { flex-direction: row; text-align: left; gap: .75rem; }
  .zod-step::before { top: auto; bottom: calc(100% - .2rem); left: 1.05rem; right: auto; width: 3px; height: .9rem; }
  .zod-step small { margin-left: auto; }
  .zod-thanks { align-items: flex-start; padding: 1.1rem; }
  .zod-thanks-ico { width: 2.8rem; height: 2.8rem; }
}

/* Checkout › formas de pago en lista */
.zs-paylist { display: grid; gap: .75rem; }
.zs-payopt { display: flex; align-items: center; gap: .9rem; margin: 0; padding: 1rem 1.15rem; border: 1px solid var(--bs-border-color); border-radius: .85rem; cursor: pointer; background: var(--bs-paper-bg, #fff); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.zs-payopt:hover { border-color: rgba(var(--bs-primary-rgb), .5); }
.zs-payopt .form-check-input { flex: none; margin: 0; width: 1.25rem; height: 1.25rem; }
.zs-payopt:has(input:checked) { border: 2px solid var(--bs-primary); padding: calc(1rem - 1px) calc(1.15rem - 1px); background: rgba(var(--bs-primary-rgb), .04); box-shadow: 0 .25rem .9rem rgba(var(--bs-primary-rgb), .1); }
.zs-payopt:has(input:focus-visible) { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }
.zs-payopt-ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: .7rem; display: grid; place-items: center; --bs-icon-size: 1.35rem; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); }
.zs-payopt-ico.is-transfer { background: rgba(var(--bs-info-rgb), .12); color: var(--bs-info); }
.zs-payopt-ico.is-cod { background: rgba(var(--bs-success-rgb), .12); color: var(--bs-success); }
.zs-payopt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.zs-payopt-main b { font-weight: 600; color: var(--bs-heading-color); }
.zs-payopt-main small { color: var(--bs-secondary-color); font-size: .82rem; line-height: 1.35; }
.zs-payopt-side { flex: none; display: flex; gap: .35rem; align-items: center; }
.zs-brand { padding: .22rem .45rem; border: 1px solid var(--bs-border-color); border-radius: .35rem; background: #fff; font-size: .68rem; font-weight: 700; color: #333; }
.zs-brand.is-visa { color: #1a1f71; font-weight: 800; letter-spacing: .02em; }
.zs-paytag { padding: .25rem .55rem; border-radius: 1rem; background: var(--bs-tertiary-bg, #f1f1f4); font-size: .72rem; font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap; }
.zs-payopt.is-disabled { opacity: .6; cursor: not-allowed; background: var(--bs-tertiary-bg, #f6f6f8); }
.zs-pay-options.is-invalid .zs-payopt { border-color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .03); }
@media (prefers-reduced-motion: no-preference) { .zs-pay-options.is-invalid .zs-payopt { animation: zs-shake .35s ease; } }
.zs-checkout-btn.is-loading { opacity: .85; cursor: progress; }
@media (max-width: 575.98px) {
  .zs-payopt { flex-wrap: wrap; gap: .7rem; }
  .zs-payopt-side { width: 100%; padding-left: 2.15rem; }
  .zs-payopt-ico { width: 2.2rem; height: 2.2rem; }
}
.zp2-privacy { display: flex; gap: .4rem; align-items: flex-start; margin: .9rem 0 0; font-size: .76rem; color: var(--bs-secondary-color); --bs-icon-size: .9rem; }
/* tamaños de íconos dentro de los bloques de pago */
.zs-pay-ico .icon-base, .zs-payopt-ico .icon-base { width: 1.4rem; height: 1.4rem; font-size: 1.4rem; }
.zs-pay-done > .icon-base { width: 1.7rem; height: 1.7rem; font-size: 1.7rem; flex: none; }
.zod-thanks h2 { line-height: 1.3; }
.zs-pending-actions form { display: inline-flex; margin: 0; }
.zs-pending-x { width: 2.6rem; height: 2.6rem; border-radius: .6rem; }

/* =====================================================================
   Carrito lateral (se desliza desde la derecha) + mapa de entrega
   ===================================================================== */
.zs-drawer { --bs-offcanvas-width: 28rem; display: flex; flex-direction: column; background: var(--bs-body-bg); border-left: 0 !important; box-shadow: -1rem 0 3rem rgba(31, 33, 51, .18); }
@media (max-width: 575.98px) { .zs-drawer { --bs-offcanvas-width: 100vw; } }
.zs-dr-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; background: var(--bs-paper-bg, #fff); border-bottom: 1px solid var(--bs-border-color); }
.zs-dr-head h5 { flex: 1; display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.15rem; font-weight: 600; }
.zs-dr-head h5 .ti { color: var(--zs-primary); font-size: 1.4rem; width: 1.4rem; height: 1.4rem; }
.zs-dr-head h5 span { color: var(--bs-secondary-color); font-weight: 500; font-size: .95rem; }
.zs-dr-clear { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; padding: .35rem .55rem; border-radius: .5rem; font-size: .8rem; color: var(--bs-secondary-color); }
.zs-dr-clear:hover { color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .08); }
.zs-dr-clear .ti { font-size: 1rem; width: 1rem; height: 1rem; }
.zs-dr-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.zs-dr-body.is-busy { opacity: .6; pointer-events: none; transition: opacity .15s; }
.zs-dr-ico { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: rgba(var(--zs-primary-rgb), .12); color: var(--zs-primary); }
.zs-dr-ico .ti { font-size: 1.25rem; width: 1.25rem; height: 1.25rem; }
.zs-dr-ico.is-sm { width: 2rem; height: 2rem; border-radius: .55rem; }
.zs-dr-ico.is-sm .ti { font-size: 1.05rem; width: 1.05rem; height: 1.05rem; }
.zs-dr-ico.is-ok { background: rgba(var(--bs-success-rgb), .12); color: var(--bs-success); }

/* Barra de envío gratis */
.zs-dr-free { padding: .85rem 1rem; border-radius: .9rem; background: var(--bs-paper-bg, #fff); border: 1px solid var(--bs-border-color); }
.zs-dr-free p { display: flex; gap: .55rem; align-items: flex-start; margin: 0; font-size: .86rem; line-height: 1.45; color: var(--bs-body-color); }
.zs-dr-free p .ti { flex: none; color: var(--zs-primary); font-size: 1.2rem; width: 1.2rem; height: 1.2rem; margin-top: .05rem; }
.zs-dr-free b { color: var(--bs-heading-color); }
.zs-dr-free a { font-weight: 600; white-space: nowrap; }
.zs-dr-bar { height: .45rem; margin-top: .65rem; border-radius: 99px; background: var(--bs-gray-100, #eee); overflow: hidden; }
.zs-dr-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--zs-primary), rgba(var(--zs-primary-rgb), .7)); transition: width .5s ease; }
.zs-dr-free.is-done { background: rgba(var(--bs-success-rgb), .08); border-color: rgba(var(--bs-success-rgb), .3); }
.zs-dr-free.is-done p .ti { color: var(--bs-success); }
.zs-dr-free.is-done .zs-dr-bar span { background: var(--bs-success); }
.zs-dr-alert { display: flex; gap: .5rem; padding: .7rem .85rem; border-radius: .75rem; font-size: .82rem; background: rgba(var(--bs-warning-rgb), .12); color: var(--bs-body-color); }
.zs-dr-alert .ti { color: var(--bs-warning); flex: none; }

/* Productos */
.zs-dr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.zs-dr-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: .85rem; padding: .8rem; border-radius: .9rem; background: var(--bs-paper-bg, #fff); border: 1px solid var(--bs-border-color); transition: box-shadow .15s, border-color .15s; }
.zs-dr-item:hover { border-color: rgba(var(--zs-primary-rgb), .35); box-shadow: 0 .25rem .9rem rgba(31, 33, 51, .06); }
.zs-dr-item.has-problem { border-color: rgba(var(--bs-danger-rgb), .45); }
.zs-dr-item.is-new { animation: zsDrNew 1.4s ease; }
@keyframes zsDrNew { 0% { box-shadow: 0 0 0 3px rgba(var(--zs-primary-rgb), .45); } 100% { box-shadow: 0 0 0 0 rgba(var(--zs-primary-rgb), 0); } }
.zs-dr-thumb { width: 4.5rem; height: 4.5rem; border-radius: .7rem; overflow: hidden; display: grid; place-items: center; background: var(--bs-gray-50, #f8f8f9); border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); }
.zs-dr-thumb img { width: 100%; height: 100%; object-fit: contain; }
.zs-dr-thumb .ti { font-size: 1.6rem; width: 1.6rem; height: 1.6rem; }
.zs-dr-main { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.zs-dr-name { font-size: .88rem; font-weight: 600; line-height: 1.3; color: var(--bs-heading-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.zs-dr-name:hover { color: var(--zs-primary); }
.zs-dr-label { font-size: .76rem; color: var(--bs-secondary-color); }
.zs-dr-price { display: flex; align-items: baseline; gap: .4rem; font-size: .9rem; }
.zs-dr-price b { color: var(--zs-primary); font-weight: 600; }
.zs-dr-price s { font-size: .76rem; color: var(--bs-secondary-color); }
.zs-dr-tag { display: inline-flex; align-self: flex-start; align-items: center; gap: .25rem; margin-top: .15rem; padding: .12rem .45rem; border-radius: .4rem; font-size: .7rem; font-weight: 500; }
.zs-dr-tag .ti { font-size: .85rem; width: .85rem; height: .85rem; }
.zs-dr-tag.is-stock { background: rgba(var(--bs-success-rgb), .1); color: var(--bs-success); }
.zs-dr-tag.is-low { background: rgba(var(--bs-warning-rgb), .14); color: #b86e00; }
.zs-dr-tag.is-import { background: rgba(var(--bs-info-rgb), .12); color: var(--bs-info); }
.zs-dr-tag.is-bad { background: rgba(var(--bs-danger-rgb), .1); color: var(--bs-danger); }
.zs-dr-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: .35rem; }
.zs-dr-side form { margin: 0; }
.zs-dr-del { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 0; border-radius: .5rem; background: none; color: var(--bs-secondary-color); }
.zs-dr-del:hover, .zs-dr-del:focus-visible { background: rgba(var(--bs-danger-rgb), .1); color: var(--bs-danger); }
.zs-dr-del .ti { font-size: 1.05rem; width: 1.05rem; height: 1.05rem; }
.zs-dr-step { display: inline-flex; align-items: center; border: 1px solid var(--bs-border-color); border-radius: .6rem; overflow: hidden; background: var(--bs-paper-bg, #fff); }
.zs-dr-step button { width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; background: none; color: var(--bs-heading-color); }
.zs-dr-step button:hover:not(:disabled) { background: rgba(var(--zs-primary-rgb), .1); color: var(--zs-primary); }
.zs-dr-step button:disabled { color: var(--bs-gray-300, #ccc); }
.zs-dr-step button .ti { font-size: .9rem; width: .9rem; height: .9rem; }
.zs-dr-step output { min-width: 1.8rem; text-align: center; font-weight: 600; font-size: .88rem; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; }
.zs-dr-fixed { font-size: .8rem; color: var(--bs-secondary-color); }
.zs-dr-total { font-size: .9rem; font-weight: 600; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Vacío y pedidos pendientes */
.zs-dr-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 3rem 1rem 2rem; }
.zs-dr-empty-ico { width: 5rem; height: 5rem; margin-bottom: .75rem; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--zs-primary-rgb), .1); color: var(--zs-primary); }
.zs-dr-empty-ico .ti { font-size: 2.3rem; width: 2.3rem; height: 2.3rem; }
.zs-dr-empty b { font-size: 1.1rem; color: var(--bs-heading-color); }
.zs-dr-empty small { max-width: 17rem; color: var(--bs-secondary-color); margin-bottom: .9rem; }
.zs-dr-empty-link { font-size: .85rem; margin-top: .4rem; }
.zs-dr-pending { display: grid; gap: .75rem; }
.zs-dr-pending-head { display: flex; gap: .7rem; padding: .85rem 1rem; border-radius: .9rem; background: rgba(var(--bs-warning-rgb), .12); }
.zs-dr-pending-head > .ti { color: #b86e00; font-size: 1.4rem; width: 1.4rem; height: 1.4rem; flex: none; }
.zs-dr-pending-head b { display: block; color: var(--bs-heading-color); font-size: .9rem; }
.zs-dr-pending-head small { color: var(--bs-body-color); font-size: .8rem; }
.zs-dr-paylink { font-size: .8rem; font-weight: 600; margin-top: .2rem; }

/* Ubicación de entrega */
.zs-dr-loc { padding: 1rem; border-radius: .9rem; background: var(--bs-paper-bg, #fff); border: 1px solid var(--bs-border-color); display: grid; gap: .85rem; }
.zs-dr-loc[hidden] { display: none; }
.zs-dr-loc.is-flash { animation: zsDrNew 1.4s ease; }
.zs-dr-loc-head { display: flex; gap: .7rem; align-items: center; }
.zs-dr-loc-head b { display: block; color: var(--bs-heading-color); font-size: .95rem; }
.zs-dr-loc-head small { display: block; color: var(--bs-secondary-color); font-size: .78rem; line-height: 1.35; }
.zs-dr-locform { display: grid; gap: .7rem; margin: 0; }
.zs-dr-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.zs-dr-field { display: grid; gap: .25rem; margin: 0; min-width: 0; }
.zs-dr-field > span { font-size: .76rem; font-weight: 500; color: var(--bs-heading-color); }
.zs-dr-field > span small { font-weight: 400; color: var(--bs-secondary-color); }
.zs-dr-field .form-select, .zs-dr-field .form-control { font-size: .86rem; }
.zs-dr-mapbox { border: 1px dashed var(--bs-border-color); border-radius: .8rem; }
.zs-dr-mapbox[open] { border-style: solid; }
.zs-dr-mapbox > summary { list-style: none; display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; cursor: pointer; border-radius: .8rem; }
.zs-dr-mapbox > summary::-webkit-details-marker { display: none; }
.zs-dr-mapbox > summary:hover { background: rgba(var(--zs-primary-rgb), .05); }
.zs-dr-mapbox > summary > span:not(.zs-dr-ico) { flex: 1; min-width: 0; }
.zs-dr-mapbox > summary b { display: block; font-size: .85rem; color: var(--bs-heading-color); }
.zs-dr-mapbox > summary small { display: block; font-size: .74rem; color: var(--bs-secondary-color); }
.zs-dr-mapbox.is-set > summary small { color: var(--bs-success); font-weight: 500; }
.zs-dr-chev { transition: transform .2s; color: var(--bs-secondary-color); }
.zs-dr-mapbox[open] .zs-dr-chev { transform: rotate(180deg); }
.zs-dr-mapbox .zs-map { padding: 0 .75rem .75rem; }
.zs-dr-opt { display: flex; align-items: center; gap: .7rem; padding: .75rem .85rem; border-radius: .8rem; border: 1.5px solid rgba(var(--bs-success-rgb), .5); background: rgba(var(--bs-success-rgb), .05); }
.zs-dr-opt > div { flex: 1; min-width: 0; }
.zs-dr-opt b { display: block; font-size: .86rem; color: var(--bs-heading-color); }
.zs-dr-opt b span { font-weight: 400; color: var(--bs-secondary-color); }
.zs-dr-opt small { display: block; font-size: .78rem; color: var(--bs-body-color); line-height: 1.35; }
.zs-dr-opt strong { font-size: .9rem; white-space: nowrap; color: var(--bs-heading-color); }

/* Pie: totales y botón */
.zs-dr-foot { padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); background: var(--bs-paper-bg, #fff); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -.5rem 1.5rem rgba(31, 33, 51, .06); }
.zs-dr-foot[hidden] { display: none; }
.zs-dr-sum { margin: 0 0 .85rem; display: grid; gap: .3rem; }
.zs-dr-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .86rem; }
.zs-dr-sum dt { font-weight: 400; color: var(--bs-body-color); }
.zs-dr-sum dt small { color: var(--bs-secondary-color); }
.zs-dr-sum dd { margin: 0; font-weight: 500; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; }
.zs-dr-sum .is-disc dd { color: var(--bs-success); }
.zs-dr-sum .is-total { margin-top: .3rem; padding-top: .55rem; border-top: 1px dashed var(--bs-border-color); }
.zs-dr-sum .is-total dt { font-weight: 600; color: var(--bs-heading-color); font-size: 1rem; }
.zs-dr-sum .is-total dd { font-size: 1.3rem; font-weight: 700; color: var(--zs-primary); }
.zs-dr-go { display: flex; align-items: center; justify-content: center; min-height: 3.1rem; font-size: 1rem; font-weight: 600; border-radius: .8rem; box-shadow: 0 .5rem 1.2rem rgba(var(--zs-primary-rgb), .3); }
.zs-dr-links { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .8rem; color: var(--bs-secondary-color); }
.zs-dr-links button { border: 0; background: none; padding: 0; color: var(--bs-link-color, var(--zs-primary)); }
.zs-dr-links a:hover, .zs-dr-links button:hover { text-decoration: underline; }
.zs-dr-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--bs-border-color); }
.zs-dr-pay span { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem; border-radius: .4rem; font-size: .7rem; background: var(--bs-gray-50, #f6f6f7); color: var(--bs-body-color); }
.zs-dr-pay .ti { font-size: .85rem; width: .85rem; height: .85rem; }
.zs-dr-pay .is-safe { background: rgba(var(--bs-success-rgb), .1); color: var(--bs-success); }
@media (max-width: 575.98px) {
  /* En el celular el pie queda compacto para que se vean los productos */
  .zs-dr-foot { padding-top: .75rem; }
  .zs-dr-sum { gap: .15rem; margin-bottom: .65rem; }
  .zs-dr-sum .is-total dd { font-size: 1.15rem; }
  .zs-dr-pay { display: none; }
  .zs-dr-links { margin-top: .45rem; }
}

/* Aviso flotante al agregar / cambiar */
.zs-dr-toast { position: absolute; left: 1.25rem; right: 1.25rem; top: 4.4rem; z-index: 5; display: flex; align-items: center; gap: .5rem; padding: .65rem .85rem; border-radius: .7rem; font-size: .84rem; font-weight: 500; color: #fff; background: var(--bs-success); box-shadow: 0 .5rem 1.25rem rgba(31, 33, 51, .2); opacity: 0; transform: translateY(-.5rem); transition: opacity .2s, transform .2s; pointer-events: none; }
.zs-dr-toast.is-error { background: var(--bs-danger); }
.zs-dr-toast.is-on { opacity: 1; transform: none; }

/* Mapa (carrito lateral y checkout) */
.zs-map { display: grid; gap: .55rem; }
.zs-map-search { position: relative; display: flex; align-items: center; }
.zs-map-search > .ti { position: absolute; left: .7rem; color: var(--bs-secondary-color); pointer-events: none; font-size: 1rem; width: 1rem; height: 1rem; }
.zs-map-search .form-control { padding-left: 2.1rem; padding-right: 4.6rem; font-size: .86rem; }
.zs-map-go { position: absolute; right: .3rem; padding: .3rem .65rem; border: 0; border-radius: .45rem; background: rgba(var(--zs-primary-rgb), .12); color: var(--zs-primary); font-size: .78rem; font-weight: 600; }
.zs-map-go:hover { background: var(--zs-primary); color: #fff; }
.zs-map-results { position: absolute; top: calc(100% + .3rem); left: 0; right: 0; z-index: 1000; list-style: none; margin: 0; padding: .3rem; border-radius: .7rem; background: var(--bs-paper-bg, #fff); border: 1px solid var(--bs-border-color); box-shadow: 0 .75rem 2rem rgba(31, 33, 51, .18); max-height: 15rem; overflow-y: auto; }
.zs-map-results li { display: flex; gap: .5rem; padding: .5rem .6rem; border-radius: .5rem; font-size: .8rem; line-height: 1.35; cursor: pointer; color: var(--bs-body-color); }
.zs-map-results li .ti { flex: none; color: var(--zs-primary); margin-top: .1rem; font-size: 1rem; width: 1rem; height: 1rem; }
.zs-map-results li:hover, .zs-map-results li.is-active { background: rgba(var(--zs-primary-rgb), .08); }
.zs-map-results li.is-empty { cursor: default; color: var(--bs-secondary-color); }
.zs-map-canvas { position: relative; height: 13rem; border-radius: .75rem; overflow: hidden; background: var(--bs-gray-50, #f2f2f4); border: 1px solid var(--bs-border-color); z-index: 0; }
.zs-map-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .3rem; font-size: .8rem; color: var(--bs-secondary-color); }
.zs-map-ph .ti { font-size: 1.8rem; width: 1.8rem; height: 1.8rem; }
.zs-map-hint { display: flex; gap: .4rem; align-items: flex-start; margin: 0; font-size: .76rem; line-height: 1.4; color: var(--bs-secondary-color); }
.zs-map-hint .ti { flex: none; font-size: .95rem; width: .95rem; height: .95rem; margin-top: .05rem; }
.zs-map-hint.is-set { color: var(--bs-success); }
.zs-map-hint.is-error { color: var(--bs-danger); }
.zs-map-gps { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; min-height: 2.6rem; border: 0; border-radius: .7rem; background: #2f3349; color: #fff; font-size: .86rem; font-weight: 600; }
.zs-map-gps:hover { background: #1f2233; }
.zs-map-gps:disabled { opacity: .7; }
.zs-map-gps .ti { font-size: 1.1rem; width: 1.1rem; height: 1.1rem; }
.zs-map-gps.is-busy .ti { animation: zsSpin 1s linear infinite; }
@keyframes zsSpin { to { transform: rotate(360deg); } }
.zs-pin { background: none; border: 0; }
.zs-pin span { position: absolute; left: 50%; top: 0; width: 2rem; height: 2rem; margin-left: -1rem; border-radius: 50% 50% 50% 0; background: var(--zs-primary); transform: rotate(-45deg); box-shadow: 0 .35rem .8rem rgba(0, 0, 0, .3); border: 3px solid #fff; }
.zs-pin span::after { content: ""; position: absolute; left: 50%; top: 50%; width: .55rem; height: .55rem; margin: -.275rem 0 0 -.275rem; border-radius: 50%; background: #fff; }
.zs-pin.is-ghost span { opacity: .55; }
.leaflet-container { font-family: inherit; }
.leaflet-control-attribution { font-size: .6rem !important; }
[data-bs-theme="dark"] .zs-map-gps { background: #44485e; }

/* Checkout: mapa opcional en la dirección */
.zc-map { margin-top: 1rem; border: 1px dashed var(--bs-border-color); border-radius: .8rem; }
.zc-map[open] { border-style: solid; }
.zc-map > summary { list-style: none; display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; cursor: pointer; border-radius: .8rem; }
.zc-map > summary::-webkit-details-marker { display: none; }
.zc-map > summary:hover { background: rgba(var(--zs-primary-rgb), .05); }
.zc-map > summary > span:not(.zs-dr-ico) { flex: 1; min-width: 0; }
.zc-map > summary b { display: block; font-size: .9rem; color: var(--bs-heading-color); font-weight: 600; }
.zc-map > summary small { display: block; font-size: .78rem; color: var(--bs-secondary-color); }
.zc-map.is-set > summary small { color: var(--bs-success); font-weight: 500; }
.zc-map[open] .zs-dr-chev { transform: rotate(180deg); }
.zc-map .zs-map { padding: 0 .9rem .9rem; }
.zc-map .zs-map-canvas { height: 16rem; }

/* =====================================================================
   Checkout (Finaliza tu compra)
   ===================================================================== */
.zc-card { overflow: hidden; }
.zc-sec { padding: 1.5rem 1.6rem 1.6rem; }
.zc-sec + .zc-sec { border-top: 1px solid var(--bs-border-color); }
.zc-sec-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.zc-sec-head h2 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.zc-sec-head small { color: var(--bs-secondary-color); font-size: .82rem; }
.zc-sec-head > div { flex: 1; min-width: 0; }
.zc-num { flex: none; position: relative; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); font-size: .9rem; transition: background .2s ease, color .2s ease; --bs-icon-size: 1rem; }
.zc-num i { display: none; }
.zc-sec.is-done .zc-num { background: var(--bs-success); color: #fff; }
.zc-sec.is-done .zc-num b { display: none; }
.zc-sec.is-done .zc-num i { display: block; animation: zp2-pop .3s ease; }
.zc-login { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .75rem; border-radius: 2rem; border: 1px solid var(--bs-border-color); font-size: .82rem; font-weight: 500; white-space: nowrap; --bs-icon-size: .95rem; }
.zc-login:hover { border-color: var(--bs-primary); }
.zc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1rem; }
.zc-full { grid-column: 1 / -1; }
.zc-f .form-label { font-size: .84rem; font-weight: 500; color: var(--bs-heading-color); margin-bottom: .35rem; }
.zc-f .form-control, .zc-f .form-select, .zc-f .select2-selection { min-height: 2.9rem; border-radius: .6rem; }
.zc-f .form-control { padding: .65rem .9rem; }
.zc-f .form-control:focus { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }
.zc-f .select2-container--default .select2-selection--single { height: 2.9rem; display: flex; align-items: center; }
.zc-f .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.zc-f .form-text { font-size: .76rem; margin-top: .3rem; }
.zc-f .invalid-feedback:empty { display: none !important; }
.zc-ig .input-group-text { border-radius: .6rem 0 0 .6rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg, #f6f6f8); }
.zc-ig .form-control { border-radius: 0 .6rem .6rem 0; }
.zc-ship { display: block; line-height: 1.5; margin-top: 1.1rem; padding: .75rem 1rem; border-radius: .7rem; background: var(--bs-tertiary-bg, #f6f6f8); color: var(--bs-secondary-color); font-size: .86rem; --bs-icon-size: 1.05rem; }
.zc-ship.is-set { background: rgba(var(--bs-primary-rgb), .06); color: var(--bs-body-color); }
.zc-ship .text-primary { font-weight: 500; }
.zc-notes { margin-top: 1.1rem; }
.zc-notes summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .88rem; font-weight: 500; color: var(--bs-primary); list-style: none; --bs-icon-size: 1.05rem; }
.zc-notes summary::-webkit-details-marker { display: none; }
.zc-terms { margin-top: 1.1rem; padding: .85rem 1rem; border-radius: .7rem; background: var(--bs-tertiary-bg, #f6f6f8); font-size: .86rem; }
.zc-terms .form-check-input { margin-top: .15rem; }
.zc-submit { margin-top: 1rem; height: 3.35rem; font-size: 1.05rem; font-weight: 600; border-radius: .8rem; justify-content: center; box-shadow: 0 .5rem 1.25rem rgba(var(--bs-primary-rgb), .3); }
.zc-trust { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem; font-size: .76rem; color: var(--bs-secondary-color); }
.zc-trust li { display: inline-flex; align-items: center; gap: .3rem; --bs-icon-size: .95rem; }
.zc-trust i { color: var(--bs-success); }
@media (max-width: 767.98px) {
  .zc-sec { padding: 1.2rem 1.1rem 1.3rem; }
  .zc-grid { grid-template-columns: 1fr; }
  .zc-login span { display: none; }
}

/* =====================================================================
   Página de pago: tus datos (corregibles) y elección de forma de pago
   ===================================================================== */
.zp2-who { position: relative; display: grid; gap: .9rem; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; }
.zp2-who-row { display: flex; gap: .8rem; align-items: flex-start; padding-right: 6.5rem; min-width: 0; }
.zp2-who-row + .zp2-who-row { padding-top: .9rem; border-top: 1px dashed var(--bs-border-color); }
.zp2-who-ico { flex: none; width: 2.3rem; height: 2.3rem; border-radius: .65rem; display: grid; place-items: center; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); }
.zp2-who-ico .ti { font-size: 1.15rem; width: 1.15rem; height: 1.15rem; }
.zp2-who-main { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.zp2-who-main small { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.zp2-who-main b { color: var(--bs-heading-color); font-weight: 600; overflow-wrap: anywhere; }
.zp2-who-main span { font-size: .84rem; color: var(--bs-body-color); overflow-wrap: anywhere; }
.zp2-who-edit { position: absolute; top: 1.1rem; right: 1.25rem; margin: 0; }
.zp2-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: 1.25rem 1.5rem 0; }
.zp2-pick.is-single { grid-template-columns: 1fr; }
.zp2-opt { position: relative; display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; text-align: left; border: 1px solid var(--bs-border-color); border-radius: .85rem; background: var(--bs-paper-bg, #fff); color: var(--bs-body-color); transition: border-color .15s, background .15s, box-shadow .15s; }
.zp2-opt:hover { border-color: rgba(var(--bs-primary-rgb), .5); }
.zp2-opt:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }
.zp2-opt.is-on { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .05); box-shadow: inset 0 0 0 1px var(--bs-primary); }
.zp2-opt.is-on .zp2-radio { border: 6px solid var(--bs-primary); }
.zp2-opt-ico { flex: none; width: 2.4rem; height: 2.4rem; border-radius: .65rem; display: grid; place-items: center; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); }
.zp2-opt-ico.is-bank { background: rgba(var(--bs-success-rgb), .12); color: var(--bs-success); }
.zp2-opt-ico .ti { font-size: 1.25rem; width: 1.25rem; height: 1.25rem; }
.zp2-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.zp2-opt-main b { color: var(--bs-heading-color); font-weight: 600; }
.zp2-opt-main small { color: var(--bs-secondary-color); font-size: .78rem; }
.zp2-opt .zp2-brands { position: absolute; top: -.6rem; right: .75rem; }
.zp2-panel { padding: 1.25rem 1.5rem 1.5rem; display: grid; gap: .75rem; }
.zp2-panel[hidden] { display: none; }
.zp2-transfer { gap: 1.1rem; }
.zp2-transfer .zs-pay-steps { margin: 0; }
.zp2-transfer .zs-pay-proof { margin: 0; padding: 1.1rem; border-radius: .85rem; background: var(--bs-gray-50, #f8f8f9); border: 1px solid var(--bs-border-color); }
.zp2-transfer-note { display: flex; gap: .45rem; margin: 0; font-size: .8rem; color: var(--bs-secondary-color); }
.zp2-transfer-note .ti { flex: none; font-size: 1rem; width: 1rem; height: 1rem; margin-top: .1rem; }
@media (max-width: 767.98px) {
  .zp2-who { padding: 1rem; }
  .zp2-who-row { padding-right: 0; }
  .zp2-who-edit { position: static; }
  .zp2-who-edit .btn { width: 100%; }
  .zp2-pick { grid-template-columns: 1fr; padding: 1rem 1rem 0; gap: .9rem; }
  .zp2-panel { padding: 1rem; }
  .zp2-transfer .zs-bank { grid-template-columns: 1fr; }
  .zp2-transfer .zs-bank > div:nth-child(odd) { border-right: 0; }
}

/* =====================================================================
   Pedido: estado y «qué sigue» en una sola tarjeta (después de comprar)
   ===================================================================== */
.zh { --zh-accent: var(--bs-primary); --zh-accent-rgb: var(--bs-primary-rgb); margin-bottom: 1.5rem; background: var(--bs-paper-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: 1.25rem; box-shadow: 0 .25rem 2rem rgba(47, 43, 61, .07); overflow: hidden; }
.zh.is-delivered { --zh-accent: var(--bs-success); --zh-accent-rgb: var(--bs-success-rgb); }
.zh.is-cancelled { --zh-accent: var(--bs-danger); --zh-accent-rgb: var(--bs-danger-rgb); }
.zh-top { display: flex; align-items: center; gap: 1.25rem; padding: 1.75rem 2rem; background: radial-gradient(120% 140% at 0% 0%, rgba(var(--zh-accent-rgb), .11), transparent 60%), linear-gradient(180deg, rgba(var(--zh-accent-rgb), .04), transparent); border-bottom: 1px solid var(--bs-border-color); }
.zh-ico { flex: none; width: 3.75rem; height: 3.75rem; border-radius: 1.1rem; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--zh-accent), rgba(var(--zh-accent-rgb), .75)); box-shadow: 0 .6rem 1.4rem rgba(var(--zh-accent-rgb), .35); --bs-icon-size: 1.8rem; animation: zp2-pop .45s ease; }
.zh-copy { flex: 1; min-width: 0; }
.zh-eyebrow { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--zh-accent); --bs-icon-size: .95rem; }
.zh-copy h2 { margin: .2rem 0 .35rem; font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.zh-copy p { margin: 0; max-width: 46rem; color: var(--bs-body-color); line-height: 1.55; }
.zh-copybtn { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-left: .15rem; border: 0; border-radius: .4rem; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); vertical-align: middle; --bs-icon-size: .9rem; }
.zh-copybtn.is-done { background: var(--bs-success); color: #fff; }
.zh-eta { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding: .9rem 1.2rem; border-radius: 1rem; background: var(--bs-paper-bg, #fff); border: 1px solid rgba(var(--zh-accent-rgb), .25); box-shadow: 0 .35rem 1rem rgba(47, 43, 61, .06); }
.zh-eta small { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-secondary-color); }
.zh-eta b { font-size: 1.6rem; font-weight: 700; line-height: 1.15; color: var(--zh-accent); letter-spacing: -.02em; white-space: nowrap; }
.zh-eta span { max-width: 15rem; font-size: .76rem; color: var(--bs-secondary-color); }
.zh-track .zod-track { margin: 0; padding: 1.5rem 1.5rem 1.25rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.zh-facts { list-style: none; margin: 0; padding: 0 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border-top: 1px solid var(--bs-border-color); }
.zh-facts li { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1rem 1.1rem 0; min-width: 0; }
.zh-facts li + li { padding-left: 1.25rem; border-left: 1px solid var(--bs-border-color); }
.zh-fi { flex: none; width: 2.4rem; height: 2.4rem; border-radius: .75rem; display: grid; place-items: center; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); --bs-icon-size: 1.2rem; }
.zh-facts li.is-cash .zh-fi { background: rgba(var(--bs-success-rgb), .12); color: var(--bs-success); }
.zh-facts li > span:not(.zh-fi) { min-width: 0; }
.zh-facts b { display: block; font-size: .9rem; font-weight: 600; color: var(--bs-heading-color); line-height: 1.3; overflow-wrap: anywhere; }
.zh-facts small { display: block; font-size: .78rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: 1.1rem 2rem; background: var(--bs-gray-25, #fafafb); border-top: 1px solid var(--bs-border-color); }
.zh-actions .btn { border-radius: .7rem; }
.zh-actions-end { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; }
.zh-cancel { margin: 0; }
.zod-eta { color: var(--bs-primary); font-weight: 600; }
.zod-now { color: var(--bs-primary); font-weight: 500; }
@media (max-width: 991.98px) {
  .zh-top { flex-wrap: wrap; padding: 1.4rem 1.4rem; }
  .zh-eta { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem .75rem; text-align: left; }
  .zh-eta b { font-size: 1.3rem; }
  .zh-eta span { flex: 1 1 100%; max-width: none; }
  .zh-facts { padding: 0 1.4rem; }
  .zh-actions { padding: 1rem 1.4rem; }
}
@media (max-width: 767.98px) {
  .zh { border-radius: 1rem; }
  .zh-top { gap: 1rem; padding: 1.25rem 1.1rem; align-items: flex-start; }
  .zh-ico { width: 3rem; height: 3rem; border-radius: .9rem; --bs-icon-size: 1.45rem; }
  .zh-copy { flex: 1 1 calc(100% - 4rem); }
  .zh-track .zod-track { padding: 1rem 1.1rem; }
  .zh-facts { grid-template-columns: 1fr; padding: 0 1.1rem; }
  .zh-facts li, .zh-facts li + li { padding: .85rem 0; border-left: 0; }
  .zh-facts li + li { border-top: 1px dashed var(--bs-border-color); }
  .zh-actions { padding: 1rem 1.1rem; }
  .zh-actions > .btn { flex: 1 1 100%; justify-content: center; }
  .zh-actions-end { margin: 0 auto; }
}
@media print {
  .zs-header, .zs-nav, footer, .zh-actions, .zp2-help, .zp2-back, .alert { display: none !important; }
  .zh, .zod-track, .zp2-card { box-shadow: none !important; break-inside: avoid; }
}

/* Aviso «¡Pedido recibido!» */
.zs-swal-list { list-style: none; margin: 0; padding: .85rem 1rem; display: grid; gap: .6rem; text-align: left; border-radius: .8rem; background: var(--bs-tertiary-bg, #f6f6f8); font-size: .92rem; }
.zs-swal-list li { display: flex; align-items: center; gap: .6rem; color: var(--bs-body-color); }
.zs-swal-list .ti { flex: none; color: var(--bs-primary); --bs-icon-size: 1.15rem; }
.zs-swal-list b { color: var(--bs-heading-color); }
.zs-swal-thanks .swal2-title { font-size: clamp(1.5rem, 5vw, 1.9rem); font-weight: 700; color: var(--bs-heading-color); }
.zs-swal-thanks .swal2-html-container b { white-space: nowrap; }
.zs-swal-list b { white-space: normal !important; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .zs-swal-thanks .swal2-html-container { font-size: .95rem; } .zs-swal-list { font-size: .86rem; } }