/* ==========================================================================
   Tienda · rediseño premium (28-oct-2026)
   Carga DESPUÉS de diseno-premium.css y solo en body.shop-page.
   Lógica (calculadora, carrito, precios) intacta: solo presentación.
   ========================================================================== */

body.shop-page { background: var(--wx-bg); color: var(--wx-fg); }
body.shop-page .wrap { width: min(100% - 2 * var(--wx-pad), var(--wx-max)); margin-inline: auto; }
body.shop-page main { min-width: 0; }

/* ---------- Cabecera breve ---------- */
body.shop-page .shop-hero { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(8px, 2vw, 16px); display: grid; gap: var(--wx-s4); justify-items: start; }
body.shop-page .shop-hero .crumb { font-size: var(--wx-t-sm); color: var(--wx-muted); margin: 0; }
body.shop-page .shop-hero .crumb a { color: var(--wx-fg-2); }
body.shop-page .shop-hero h1 { font-size: var(--wx-t-h2); line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch; color: var(--wx-fg); }
body.shop-page .shop-hero .wx-lead { max-width: 56ch; font-size: var(--wx-t-body); }
.shop-hero-actions { display: flex; flex-wrap: wrap; gap: var(--wx-s3); align-items: center; }
body.shop-page .shop-hero .wx-btn { min-height: 48px; }

/* Dos recorridos: paquete listo o armar el tuyo */
.shop-paths { width: 100%; display: grid; gap: var(--wx-s3); margin-top: var(--wx-s2); }
@media (min-width: 720px) { .shop-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shop-path { display: grid; gap: var(--wx-s2); padding: clamp(18px, 2.2vw, 26px); min-height: 48px; border: 1px solid var(--wx-line-2); border-radius: var(--wx-r-md); background: var(--wx-bg-2); color: var(--wx-fg); text-decoration: none; transition: border-color var(--wx-dur) var(--wx-ease); }
.shop-path:hover { border-color: var(--wx-lime); }
.shop-path b { font-size: var(--wx-t-h3); letter-spacing: -0.01em; }
.shop-path span { color: var(--wx-fg-2); }
.shop-path em { font: 700 var(--wx-t-xs) / 1 var(--wx-font-mono); letter-spacing: 0.06em; text-transform: uppercase; font-style: normal; color: var(--wx-lime); }

/* ---------- Bloques de temporada ---------- */
body.shop-page .offer-group { padding-top: clamp(40px, 6vw, 72px); }
body.shop-page .offer-group > h2 { font-size: var(--wx-t-h2); letter-spacing: -0.03em; color: var(--wx-fg); }
body.shop-page .pack-pick, body.shop-page .plan-list, body.shop-page .product-count, body.shop-page .plan-intro { color: var(--wx-fg-2); }
body.shop-page .pack-pick { background: var(--wx-bg-2); border: 1px solid var(--wx-line-2); border-radius: var(--wx-r-md); color: var(--wx-fg-2); }
body.shop-page .pack-pick h3 { color: var(--wx-fg); }
body.shop-page .pack-pick[data-pack-id] { border-color: var(--wx-line); }
body.shop-page .pack-price s { color: var(--wx-muted); }
body.shop-page .pack-price b { color: var(--wx-fg); font-size: var(--wx-t-h3); }
body.shop-page .promo-tag { background: var(--wx-lime); color: var(--wx-lime-ink); }
body.shop-page .btn.outline { border-color: var(--wx-line); color: var(--wx-fg); background: transparent; min-height: 48px; }
body.shop-page .btn.outline:hover { border-color: var(--wx-fg); }
body.shop-page .btn { min-height: 48px; }
body.shop-page .btn:not(.outline) { background: var(--wx-lime); color: var(--wx-lime-ink); border-color: var(--wx-lime); }
body.shop-page .text-link { color: var(--wx-lime); }

/* ---------- Búsqueda y filtros ---------- */
body.shop-page .search-box { min-height: 48px; border-radius: var(--wx-r-md); background: var(--wx-bg-3); color: var(--wx-fg); border: 1px solid var(--wx-line); padding: 0 var(--wx-s4); font: 400 var(--wx-t-body) / 1.2 var(--wx-font-sans); width: 100%; }
body.shop-page .search-box::placeholder { color: var(--wx-muted); }
body.shop-page .filter { min-height: 44px; padding: 0 var(--wx-s4); border-radius: var(--wx-r-pill); border: 1px solid var(--wx-line); background: transparent; color: var(--wx-fg-2); font: 700 var(--wx-t-sm) / 1 var(--wx-font-sans); }
body.shop-page .filter:hover { border-color: var(--wx-fg); color: var(--wx-fg); }
body.shop-page .filter[aria-pressed="true"] { background: var(--wx-lime); color: var(--wx-lime-ink); border-color: var(--wx-lime); }
body.shop-page .product-count { font-size: var(--wx-t-sm); color: var(--wx-muted); }

/* ---------- Tarjetas de servicio: beneficio, precio, cobro, resumen, acción ---------- */
body.shop-page .product { background: var(--wx-bg-2); border: 1px solid var(--wx-line-2); border-radius: var(--wx-r-md); color: var(--wx-fg); }
body.shop-page .product.selected { border: 2px solid var(--wx-lime); }
body.shop-page .product-art { background: var(--wx-bg-3); }
body.shop-page .product-body { gap: var(--wx-s2); padding: clamp(18px, 2vw, 24px); }
body.shop-page .product-kind { font: 700 var(--wx-t-xs) / 1.2 var(--wx-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wx-lime); margin: 0; }
body.shop-page .product h2 { font-size: var(--wx-t-h3); line-height: 1.2; letter-spacing: -0.01em; color: var(--wx-fg); margin: 0; }
body.shop-page .product .desc { color: var(--wx-fg-2); font-size: var(--wx-t-body); margin: 0; }
body.shop-page .product-price { font: 700 var(--wx-t-h3) / 1.15 var(--wx-font-sans); color: var(--wx-fg); font-variant-numeric: tabular-nums; margin: var(--wx-s2) 0 var(--wx-s3); }
body.shop-page .product-price small { display: block; font: 400 var(--wx-t-sm) / 1.4 var(--wx-font-sans); color: var(--wx-muted); margin-top: var(--wx-s1); }
body.shop-page .product details { margin: 0 0 var(--wx-s3); }
body.shop-page .product summary { min-height: 44px; display: flex; align-items: center; color: var(--wx-fg); font-weight: 700; cursor: pointer; }
body.shop-page .product ul { color: var(--wx-fg-2); }
body.shop-page .product .btn { margin-top: auto; width: 100%; }

/* ---------- Calculadora (lógica intacta) ---------- */
body.shop-page .calculator { background: var(--wx-bg-2); color: var(--wx-fg); border: 1px solid var(--wx-line); border-radius: var(--wx-r-md); }
body.shop-page .calculator h2 { font: 700 var(--wx-t-h3) / 1.2 var(--wx-font-sans); letter-spacing: -0.01em; color: var(--wx-fg); }
body.shop-page .calculator .note, body.shop-page .calculator small { color: var(--wx-fg-2); }
body.shop-page .cart-line { border-bottom-color: var(--wx-line-2); }
body.shop-page .cart-line .remove { min-width: 48px; min-height: 48px; color: var(--wx-fg); }
body.shop-page .cart-totals .total strong { color: var(--wx-lime); }
body.shop-page .discount-line strong { color: var(--wx-lime); }
body.shop-page .calculator [data-begin-checkout] { box-shadow: none; }
body.shop-page .wx-tag { color: var(--wx-fg); }

/* ---------- Barra de resumen móvil: compacta y sin tapar botones ---------- */
@media (max-width: 800px) {
  body.shop-page { padding-bottom: 84px; }
  body.shop-page .mobile-cart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--wx-s3); padding: var(--wx-s2) var(--wx-gutter) calc(var(--wx-s2) + env(safe-area-inset-bottom)); background: rgba(29, 30, 35, 0.96); border-top: 1px solid var(--wx-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  body.shop-page .mobile-cart [data-mobile-total] { min-width: 0; font-size: var(--wx-t-sm); line-height: 1.3; color: var(--wx-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.shop-page .mobile-cart [data-mobile-total] strong { display: block; color: var(--wx-fg); }
  body.shop-page .mobile-cart .btn { width: auto; flex: none; margin: 0; min-height: 48px; padding: 0 var(--wx-s4); }
  body.shop-page #calculadora, body.shop-page .store-dialog { scroll-margin-bottom: 96px; }
  body.shop-page .store-dialog .calculator { padding-bottom: 24px; }
}
@media (max-width: 560px) {
  body.shop-page .shop-hero h1 { font-size: 2rem; }
  body.shop-page .shop-hero-actions .wx-btn { width: 100%; }
  body.shop-page .filter { min-height: 44px; }
  body.shop-page .product-grid { grid-template-columns: minmax(0, 1fr); gap: var(--wx-s4); }
}

/* ---------- Anti-desborde y movimiento ---------- */
body.shop-page .product-grid, body.shop-page .shop-layout, body.shop-page .pack-cards, body.shop-page .checkout { min-width: 0; max-width: 100%; }
body.shop-page .product-grid > *, body.shop-page .shop-layout > * { min-width: 0; }
body.shop-page :focus-visible { outline: 3px solid var(--wx-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  body.shop-page *, body.shop-page *::before, body.shop-page *::after { transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Sin serif en títulos de bloque: el sistema reserva Gambetta para acentos */
body.shop-page .offer-group > h2, body.shop-page .pack-pick h3, body.shop-page .calculator h2, body.shop-page .checkout-panel h2 { font-family: var(--wx-font-sans); font-weight: 700; }

/* ---------- Resumen de la selección en escritorio: ancho cómodo, aire entre filas, scroll interno si hace falta ---------- */
@media (min-width: 801px) {
  body.shop-page .shop-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, 420px); gap: 32px; }
  body.shop-page .desktop-calculator { max-height: calc(100vh - 124px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  body.shop-page .calculator { padding: 26px 28px; }
  body.shop-page .cart-line { gap: 14px; }
  body.shop-page .cart-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  body.shop-page .cart-totals strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
  body.shop-page .cart-totals .note { line-height: 1.5; }
  body.shop-page .desktop-calculator .cart-line { padding: 10px 0; }
  body.shop-page .desktop-calculator .note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
  body.shop-page .desktop-calculator .cart-totals { margin: 14px 0 8px; }
  /* El botón deja de flotar sobre el resumen: al desplazarse dentro del panel no tapa ninguna línea */
  body.shop-page .desktop-calculator [data-begin-checkout] { position: static; box-shadow: none; margin-top: 16px; }
}