/* Estilos de la ficha (producto.html). Salieron del <style> de la página
   (#14 de la auditoría UX/CRO, 30/09): así se cachean un año con ?v= y la
   ficha deja de mandarlos en cada vista. Al editar, subí el ?v= en producto.html. */

    /* ── Layout ─────────────────────────────────────────── */
    /* Desktop: la columna de compra es más alta que la galería y dejaba un hueco
       enorme abajo a la izquierda. Igual que MercadoLibre/Amazon, la descripción
       y las especificaciones suben a esa columna, debajo de la galería. */
    .product-layout {
      display: grid;
      grid-template-columns: 45% 55%;
      gap: 40px;
      align-items: start;
      padding: 32px 0 64px;
    }
    #gallery-col      { grid-column: 1; grid-row: 1; }
    .product-detail   { grid-column: 2; grid-row: 1 / span 2; }
    #tabs-section     { grid-column: 1; grid-row: 2; min-width: 0; }
    /* La fila 2 sólo debe crecer con el contenido de las tabs */
    .product-layout   { grid-template-rows: auto auto; }

    @media (max-width: 768px) {
      .product-layout { grid-template-columns: 1fr; gap: 24px; padding: 16px 0 48px; }
      /* Mobile: una sola columna en orden natural — galería, compra y recién
         después la descripción (el precio y el botón no deben quedar debajo). */
      #gallery-col, .product-detail, #tabs-section {
        grid-column: 1;
        grid-row: auto;
      }
    }

    /* ── Galería ─────────────────────────────────────────── */
    .gallery-main {
      position: relative;
      aspect-ratio: 1 / 1;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .gallery-main img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 24px;
      transition: opacity 0.18s ease, transform 0.3s ease;
    }
    .gallery-main img.fading { opacity: 0; transform: scale(0.97); }
    .gallery-main:hover img:not(.fading) { transform: scale(1.04); }

    /* Flechas de galería */
    .gallery-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      background: rgba(255,255,255,0.92);
      border: 1px solid var(--border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-2);
      z-index: 2;
      transition: background 0.15s, color 0.15s, box-shadow 0.15s;
      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }
    .gallery-arrow:hover { background: #fff; color: var(--blue); box-shadow: 0 2px 8px rgba(0,0,0,0.16); }
    .gallery-arrow:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
    .gallery-arrow-prev { left: 10px; }
    .gallery-arrow-next { right: 10px; }
    @media (max-width: 600px) {
      .gallery-arrow { width: 44px; height: 44px; }
    }

    .gallery-thumbs {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    .thumb {
      width: 64px;
      height: 64px;
      border: 2px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      cursor: pointer;
      background: #fff;
      transition: border-color 0.15s;
      flex-shrink: 0;
    }
    .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
    .thumb.active { border-color: var(--blue); }
    .thumb:hover { border-color: var(--blue); }

    /* ── Info columna derecha ────────────────────────────── */
    .product-detail { display: flex; flex-direction: column; gap: 16px; }


    .breadcrumb a { color: var(--blue); text-decoration: none; }
    /* Celular: la ruta en un renglón (el título largo se corta), más pegada
       arriba. Antes ocupaba dos renglones antes de la foto. */
    @media (max-width: 640px) {
      .breadcrumb { flex-wrap: nowrap; padding-top: 10px !important; font-size: 12px; min-width: 0; }
      .breadcrumb #bc-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    }

    .breadcrumb span { color: var(--text-3); }

    .product-title {
      font-family: var(--font-accent);
      font-size: clamp(22px, 2.6vw, 30px);
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--ink);
      line-height: 1.2;
    }

    .rating-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-3);
    }
    .stars { color: var(--star); letter-spacing: 1px; font-size: 18px; }
    /* #8 — rating clickeable hacia las opiniones */
    a.rating-row { text-decoration: none; cursor: pointer; width: fit-content; }
    a.rating-row:hover { color: var(--blue); }
    .rating-count-inline { color: var(--text-3); }
    a.rating-row:hover .rating-count-inline { color: var(--blue); }

    /* Badge urgencia estilo ML — ¡ÚLTIMA UNIDAD! / ¡ÚLTIMAS N! */
    .stock-badge-urgent {
      display: inline-flex; align-items: center; gap: 5px;
      background: var(--urgency); color: #fff;
      font-family: var(--font-accent); font-size: 12px; font-weight: 700;
      padding: 5px 12px; border-radius: 20px; letter-spacing: 0.02em;
    }

    .price-block { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .price-cuotas {
      flex-basis: 100%;
      font-size: 14.5px;
      font-weight: 600;
      color: var(--blue);
      cursor: help;
    }
    .price-main {
      font-family: var(--font-accent);
      font-size: 34px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--ink);
      line-height: 1;
    }

    .divider { height: 1px; background: var(--border); }

    /* ── Guía de medidas (mallas) ─────────────────────────── */
    /* Mi equipo */
    .eq-ficha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 14px; padding: 10px 12px;
      border: 1px solid var(--border, #e5e5e5); border-radius: 10px; font-size: 14px; line-height: 1.4; background: var(--bg-2, #f7f7f8); }
    .eq-ficha[hidden] { display: none; }
    .ship-calc[hidden] { display: none; }   /* plegada con el envío ya calculado (10/10) */
    .eq-ficha-txt { flex: 1; min-width: 180px; }
    .eq-ficha-txt small { display: block; font-size: 12.5px; color: var(--text-3, #777); margin-top: 1px; }
    .eq-ficha-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
    .eq-ficha.ok { background: #effaf2; border-color: #bfe5c9; }
    .eq-ficha.ok .eq-ficha-ic { background: #15803d; }
    .eq-ficha.no { background: #fdf2f2; border-color: #f2c9c9; }
    .eq-ficha.no .eq-ficha-ic { background: #b42318; }
    .eq-ficha-acc { display: flex; gap: 2px; flex-wrap: wrap; }
    .eq-ficha-link { border: 0; background: none; padding: 4px 6px; font: inherit; font-size: 13.5px; font-weight: 600;
      color: var(--blue, #2563eb); cursor: pointer; text-decoration: none; border-radius: 6px; white-space: nowrap; }
    .eq-ficha-link.en-linea { padding: 0; font-size: inherit; }
    /* Sin equipo elegido: un renglón chico, sin caja (07/10) */
    .eq-ficha.eq-ficha-min { background: none; border: 0; padding: 0; margin: 0 0 12px; font-size: 13.5px; color: var(--text-2); }
    .eq-ficha-min .eq-ficha-link.en-linea { text-decoration: underline; text-underline-offset: 2px; color: var(--text); }
    /* Pegado al primer paso (Color / Modelo): sin el hueco de 24px de arriba */
    .eq-ficha-min + #variants-block .variant-selectors > .paso-head:first-child { margin-top: 6px; }
    .size-guide {
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      /* Sin margen arriba el título quedaba tocando la barra de stock. */
      margin: 18px 0 4px;
      overflow: hidden;
    }
    .size-guide > summary {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      cursor: pointer;
      list-style: none;
      user-select: none;
    }
    .size-guide > summary::-webkit-details-marker { display: none; }
    .size-guide > summary svg:first-child { flex-shrink: 0; color: var(--blue); }
    .size-guide .sg-chevron {
      margin-left: auto;
      color: var(--text-3);
      transition: transform 0.2s ease;
    }
    .size-guide[open] .sg-chevron { transform: rotate(180deg); }
    .size-guide-body {
      padding: 0 14px 12px;
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--text-2);
    }
    .size-guide-body p { margin: 0 0 8px; }
    /* Aviso dentro de la guía: los casos en los que el número de milímetros
       no alcanza para saber si la malla entra. */
    .size-guide-body .sg-ojo {
      margin: 8px 0; padding: 8px 10px;
      background: color-mix(in srgb, var(--urgency, #C2410C) 8%, transparent);
      border: 1px solid color-mix(in srgb, var(--urgency, #C2410C) 25%, transparent);
      border-radius: 8px; font-size: 12.5px; line-height: 1.5;
    }
    .size-guide-body .sg-mas { color: var(--text-3); font-weight: 400; }
    /* Cerrada, la guía era una segunda caja gris debajo de la de
       compatibilidad. Ahora es un link liviano, y si el paso 1 ya tiene
       "¿Qué ancho es mi reloj?" (que la abre) no se muestra: era la misma
       ayuda dos veces. Abierta, sigue siendo el panel de siempre. */
    .size-guide:not([open]) { background: none; border: 0; margin: 14px 0 0; }
    .size-guide:not([open]) > summary { padding: 0; font-weight: 500; color: var(--text-2); }
    .size-guide:not([open]) .sg-chevron { margin-left: 0; }
    .size-guide.con-atajo:not([open]) { display: none; }
    .sg-table {
      width: 100%;
      border-collapse: collapse;
      margin: 8px 0;
    }
    .sg-table td {
      padding: 7px 10px;
      border: 1px solid var(--border);
      vertical-align: top;
    }
    .sg-table td:first-child {
      font-weight: 700;
      color: var(--ink);
      white-space: nowrap;
      width: 1%;
      background: var(--white);
    }
    .sg-note {
      display: flex;
      gap: 7px;
      align-items: flex-start;
      background: var(--white);
      border-radius: var(--radius-sm);
      padding: 9px 11px;
      font-size: 12px;
      color: var(--text-3);
    }
    .sg-note svg { flex-shrink: 0; margin-top: 1px; color: var(--blue); }

    /* ── Selector de variantes ───────────────────────────── */
    .variants-label {
      font-family: var(--font-accent);
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-2);
      margin-bottom: 10px;
    }
    .variant-selectors {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: flex-end;
    }
    /* Los wrappers NO se estiran por defecto.
       Para el caso 2-dropdowns se les pone flex:1 inline. */
    .variant-select-wrapper {
      min-width: 0;
    }
    .variant-select-label {
      font-family: var(--font-body);
      font-size: 12px;
      color: var(--text-3);
      margin-bottom: 6px;
      display: block;
    }
    .variant-select {
      border: 1px solid var(--border-2);
      border-radius: var(--radius);
      padding: 8px 12px;
      font-size: 14px;
      font-family: var(--font-body);
      background: var(--white);
      color: var(--text);
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s;
      /* ancho natural según opciones, no forzado al 100% */
      width: auto;
      max-width: 100%;
    }
    /* Cuando el wrapper tiene flex:1 (2-dropdowns) el select ocupa todo */
    .variant-select-wrapper[style*="flex:1"] .variant-select,
    .variant-select-wrapper[style*="flex: 1"] .variant-select { width: 100%; }
    .variant-select:hover { border-color: var(--blue); }
    .variant-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.1); }
    .variant-select:disabled { opacity: 0.5; cursor: not-allowed; }
    .variant-select option:disabled {
      color: var(--text-3);
      background: var(--bg);
      font-style: italic;
    }

    /* ── Condición y colores WZ ────────────────────────────── */
    .wz-cond-badge {
      display: inline-flex; align-items: center;
      font-size: 11px; font-weight: 600; letter-spacing: .03em;
      padding: 3px 9px; border-radius: 20px; flex-shrink: 0;
    }
    .wz-cond-nuevo  { background: #dcfce7; color: #166534; }
    .wz-cond-cpo    { background: var(--bg-2, #F1F1F1); color: var(--text); }
    .wz-cond-usado  { background: #f3f4f6; color: #4b5563; }
    .wz-colors-block { margin-top: 14px; }
    .wz-colors-label {
      font-family: var(--font-accent); font-size: 12px;
      font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-2); margin-bottom: 8px;
    }
    .wz-colors-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
    .wz-color-chip {
      display: inline-flex; align-items: center; gap: 5px;
      border: 1.5px solid var(--border-2); border-radius: 20px;
      padding: 4px 12px; font-size: 12px; font-weight: 500;
      color: var(--text); background: var(--bg-card);
      cursor: pointer; transition: border-color .15s, background .15s;
    }
    .wz-color-chip:hover { border-color: var(--ink); background: var(--bg); }
    .wz-color-chip.selected {
      border-color: var(--ink); background: var(--ink);
      color: #fff; font-weight: 600;
    }
    .wz-color-dot {
      display: inline-block; width: 12px; height: 12px; border-radius: 50%;
      border: 1px solid rgba(0,0,0,.15); flex-shrink: 0;
    }
    /* Botón consultar WhatsApp */
    .btn-wsp-consult {
      display: none; width: 100%; align-items: center; justify-content: center;
      gap: 9px; padding: 14px 20px; border-radius: var(--r-md);
      background: #25d366; color: #fff; font-size: 15px; font-weight: 700;
      border: none; cursor: pointer; transition: background .15s, transform .1s;
      letter-spacing: .01em;
    }
    .btn-wsp-consult:hover { background: #1ebe5d; transform: translateY(-1px); }
    .btn-wsp-consult svg { flex-shrink: 0; }

    /* Bloque informativo "por encargo" (a_pedido) */
    .encargo-info {
      background: var(--blue-light);
      border: 1px solid #C7D2FE;
      border-radius: var(--r-md, 12px);
      padding: 12px 14px;
      margin-bottom: 10px;
    }
    .encargo-info-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink, #0A0A0A);
      margin-bottom: 4px;
    }
    .encargo-info-text {
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-2, #54545A);
    }

    /* ── Variantes WZ locales (productos propios) ──────────── */
    .wz-var-btn {
      display: inline-flex; align-items: center;
      padding: 8px 14px;
      border: 2px solid var(--border-2);
      border-radius: var(--radius);
      background: var(--white);
      color: var(--text);
      font-size: 13px; font-weight: 500; font-family: var(--font-body);
      cursor: pointer;
      transition: border-color .15s, background .15s, color .15s;
      line-height: 1.2;
    }
    .wz-var-btn:hover:not(:disabled) { border-color: var(--ink); }
    .wz-var-btn.active {
      border-color: var(--blue);
      background: var(--blue-light);
      color: var(--blue);
      font-weight: 600;
    }
    .wz-var-btn:disabled {
      opacity: .45; cursor: not-allowed;
      text-decoration: line-through;
    }
    .wz-var-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

    /* Fallback si hay muchas variantes sin agrupar */
    .variants-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .variant-btn {
      border: 1px solid var(--border-2);
      border-radius: var(--radius);
      padding: 9px 16px;
      font-size: 13px;
      font-family: var(--font-body);
      background: var(--white);
      color: var(--text);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .variant-btn:hover { border-color: var(--ink); }
    .variant-btn.active {
      border-color: var(--ink);
      background: var(--ink);
      color: #fff;
      font-weight: 600;
    }
    .variant-btn.disabled {
      opacity: 0.4; cursor: not-allowed;
      text-decoration: line-through; color: var(--text-3);
    }
    .variant-btn.disabled:hover { border-color: var(--border-2); }

    /* ── Variant tiles estilo MercadoLibre (foto + label visible) ── */
    .variant-tiles {
      display: flex; flex-wrap: wrap; gap: 10px;
      padding: 4px 0;
    }
    .variant-tile {
      display: flex; flex-direction: column;
      align-items: center; gap: 6px;
      cursor: pointer;
      padding: 4px;
      border: 2px solid transparent;
      border-radius: 10px;
      transition: border-color .15s, background .15s;
      background: var(--bg-card);
      width: 80px;
      flex-shrink: 0;
    }
    .variant-tile:hover {
      border-color: var(--border-2);
      background: var(--bg);
    }
    .variant-tile.active {
      border-color: var(--blue);
      background: var(--blue-light);
    }
    .variant-tile-img {
      width: 64px; height: 64px;
      border-radius: 8px;
      overflow: hidden;
      background-color: var(--bg);
      background-size: cover;
      background-position: center;
      border: 1px solid var(--border);
      position: relative;
      flex-shrink: 0;
    }
    .variant-tile-label {
      font-size: 11px;
      color: var(--text);
      font-weight: 500;
      text-align: center;
      line-height: 1.25;
      max-width: 72px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .variant-tile.active .variant-tile-label {
      color: var(--blue);
      font-weight: 600;
    }
    .variant-tile.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .variant-tile.disabled .variant-tile-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--red) calc(50% - 1.5px), var(--red) calc(50% + 1.5px), transparent calc(50% + 1.5px));
      pointer-events: none;
    }
    .variant-tile.disabled .variant-tile-label {
      color: var(--text-3);
      text-decoration: line-through;
    }
    .variant-tile.disabled:hover {
      border-color: transparent;
      background: var(--bg-card);
    }
    .variant-tile:focus-visible {
      outline: none;
      border-color: var(--blue);
    }

    /* ── Color swatches (cuando NO hay fotos por variante — solo colores puros) ── */
    .color-swatches {
      display: flex; flex-wrap: wrap; gap: 10px;
      padding: 4px 0 18px;  /* extra bottom para que el label en hover no se corte */
    }
    /* Fila compacta de color cuando va debajo de tiles (no necesita padding extra) */
    .axis-color-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .axis-color-row .color-swatches,
    .axis-color-row .variant-tiles { padding-bottom: 4px; }
    .axis-color-row-label {
      font-size: 12px;
      color: var(--text-3);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .axis-color-row .variant-select { width: auto; min-width: 120px; }
    .color-selected-label {
      font-size: 13px; color: var(--text-3); margin-bottom: 6px;
    }
    .color-selected-label strong {
      color: var(--text); font-weight: 600;
    }
    .color-swatch {
      width: 44px; height: 44px;
      border-radius: 50%;
      border: 2px solid var(--border);
      cursor: pointer;
      position: relative;
      background-color: var(--bg-card);
      background-size: cover;
      background-position: center;
      transition: transform .15s, border-color .15s;
      padding: 0;
      flex-shrink: 0;
    }
    .color-swatch::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px solid var(--blue);
      opacity: 0;
      transition: opacity .15s;
      pointer-events: none;
    }
    .color-swatch.active::after { opacity: 1; }
    .color-swatch:hover { transform: scale(1.06); border-color: var(--text-3); }
    .color-swatch.disabled {
      opacity: 0.45; cursor: not-allowed;
    }
    .color-swatch.disabled::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--red) calc(50% - 1.5px), var(--red) calc(50% + 1.5px), transparent calc(50% + 1.5px));
      pointer-events: none;
    }
    .color-swatch.disabled:hover { transform: none; border-color: var(--border); }
    .color-swatch-label {
      position: absolute;
      bottom: -22px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      color: var(--text);
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 2px 6px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s;
      z-index: 1;
    }
    .color-swatch:hover .color-swatch-label,
    .color-swatch:focus-visible .color-swatch-label { opacity: 1; }
    .color-swatch:focus-visible {
      outline: none;
      border-color: var(--blue);
    }

    /* ── Selector de cantidad ────────────────────────────── */
    .qty-wrap {
      display: inline-flex;
      border: 1px solid var(--border-2);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .qty-btn {
      width: 38px;
      height: 38px;
      background: var(--bg);
      border: none;
      font-size: 18px;
      color: var(--text-2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
      font-family: var(--font-body);
    }
    .qty-btn:hover:not(:disabled) { background: var(--bg3, #EBEBEB); color: var(--text); }
    .qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .qty-input {
      width: 48px;
      border: none;
      border-left: 1px solid var(--border-2);
      border-right: 1px solid var(--border-2);
      text-align: center;
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      background: var(--white);
      box-shadow: none;
      border-radius: 0;
      padding: 0;
    }
    .qty-input:focus { outline: none; box-shadow: none; border-color: var(--border-2); }

    /* ── Calculadora de envío ──────────────────────────────
       Estilo "Calculá el costo y tiempo de envío" de ML: input de
       código postal + botón, y debajo el listado de opciones reales
       (costo + fecha estimada) que devuelve Mercado Envíos. */
    .ship-calc {
      max-width: 360px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
    }
    .ship-calc-label {
      display: flex; align-items: center; gap: 8px;
      font-size: 12.5px; font-weight: 600; color: var(--ink);
      margin: 0 0 9px;
    }
    .ship-calc-label svg { color: var(--blue); flex-shrink: 0; }
    /* #5 — calculador de envío colapsable (<details>) para acortar el camino al CTA */
    .ship-calc > summary { list-style: none; cursor: pointer; margin: 0; }
    .ship-calc > summary::-webkit-details-marker { display: none; }
    .ship-calc[open] > summary { margin-bottom: 9px; }
    .ship-calc-chevron { margin-left: auto; color: var(--text-3); transition: transform 0.2s ease; flex-shrink: 0; }
    .ship-calc[open] .ship-calc-chevron { transform: rotate(180deg); }
    .ship-calc-form { display: flex; gap: 8px; }
    .ship-cp-input {
      flex: 0 1 130px; min-width: 0;
      height: 36px; padding: 0 12px;
      border: 1px solid var(--border-input);
      border-radius: var(--radius);
      font-size: 13.5px; color: var(--text);
      font-family: var(--font-body);
      background: var(--white);
    }
    .ship-cp-input:focus { outline: none; border-color: var(--blue); }
    .ship-calc-btn {
      height: 36px; padding: 0 16px;
      border: none; border-radius: var(--radius);
      background: var(--ink); color: #fff;
      font-size: 12.5px; font-weight: 600;
      cursor: pointer; transition: background 0.15s;
      white-space: nowrap;
    }
    .ship-calc-btn:hover:not(:disabled) { background: var(--ink-soft, #333); }
    .ship-calc-btn:disabled { opacity: 0.6; cursor: progress; }
    .ship-calc-result { margin-top: 12px; }
    .ship-calc-result:empty { margin-top: 0; }
    .ship-calc-msg { font-size: 12px; color: var(--text-3); margin: 0; }
    .ship-calc-msg.is-error { color: var(--red, #d33); }
    .ship-option {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 10px; padding: 9px 0;
      border-top: 1px solid var(--border);
      font-size: 12.5px;
    }
    .ship-option:first-child { border-top: none; padding-top: 0; }
    .ship-option-name { font-weight: 600; color: var(--text); margin: 0 0 2px; }
    .ship-option-eta  { color: var(--text-3); margin: 0; }
    .ship-option-cost { font-weight: 700; color: var(--text); white-space: nowrap; }
    .ship-option-cost.is-free { color: var(--green); }

    /* ── Acciones ────────────────────────────────────────── */
    .actions {
      display: flex;
      flex-direction: row;
      gap: 8px;
    }
    .btn-add-cart {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: transparent;
      color: var(--ink);
      border: 1.5px solid var(--ink);
      padding: 0 22px;
      height: 48px;
      font-family: var(--font-accent);
      font-size: 14px;
      font-weight: 600;
      border-radius: var(--radius);
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
    }
    .btn-add-cart:hover  { background: var(--ink); color: #fff; }
    .btn-add-cart.added  { background: var(--green); border-color: var(--green); color: #fff; }

    .btn-buy-now {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: var(--ink);
      color: #fff;
      border: none;
      padding: 0 28px;
      height: 48px;
      font-family: var(--font-accent);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.01em;
      border-radius: var(--radius);
      cursor: pointer;
      white-space: nowrap;
      box-shadow: var(--shadow-sm);
      transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
      flex: 0 0 auto;
    }
    .btn-buy-now:hover { background: var(--ink-soft); transform: translateY(-1px); box-shadow: var(--shadow); }
    .btn-buy-now:disabled, .btn-add-cart:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }

    @media (max-width: 480px) {
      .actions { flex-direction: column; }
      .btn-add-cart, .btn-buy-now { width: 100%; flex: none; }
    }

    /* Botón favoritos en la PDP: override del corazón circular → botón de texto.
       Compactos y uno al lado del otro (no ocupan el ancho completo): son
       acciones secundarias, no deben competir en tamaño con "Comprar ahora". */
    .wz-fav-pdp {
      position: static; width: auto; height: auto; border-radius: var(--radius, 10px);
      margin-top: 0; padding: 8px 10px; gap: 5px; box-shadow: none;
      background: var(--white); border: 1px solid var(--border); color: var(--text-2);
      font-family: var(--font-accent, inherit); font-size: 12.5px; font-weight: 500;
      flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap;
    }
    .wz-fav-pdp .wz-fav-label { overflow: hidden; text-overflow: ellipsis; }
    .wz-fav-pdp svg { width: 15px; height: 15px; }
    .wz-fav-pdp:hover { transform: none; background: var(--bg); color: #e0245e; border-color: #e0245e; }
    .wz-fav-pdp.is-fav { color: #e0245e; border-color: #e0245e; background: #fff0f4; }
    .wz-fav-pdp .wz-fav-label { line-height: 1; }
    .wz-fav-pdp.is-fav .wz-fav-label::after { content: ' ✓'; }

    /* ── Trust badges ────────────────────────────────────── */
    .trust-row {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 12px;
      color: var(--text-3);
      flex-wrap: wrap;
    }
    .trust-item { display: flex; align-items: center; gap: 5px; }
    .trust-sep { color: var(--border-2); }

    /* Tarjeta de confianza (garantías/envío/pago). Había dos bloques con
       contenido distinto —uno condicional sólo para iPhones, otro genérico
       siempre visible— pero reimplementando el mismo patrón ícono+texto a
       mano con estilos inline cada vez. Acá el patrón, una sola vez. */
    .trust-card { background: var(--bg-2); border-radius: var(--radius); padding: 14px 16px; }
    .trust-rows { display: flex; flex-direction: column; gap: 10px; }
    .trust-rows--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .trust-row { display: flex; align-items: flex-start; gap: 8px; }
    .trust-row svg { flex-shrink: 0; margin-top: 1px; }
    .trust-row-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
    .trust-row-sub { margin: 0; font-size: 11px; color: var(--text-3); }

    /* ── Métodos de pago ─────────────────────────────────── */
    .pay-label {
      font-family: var(--font-accent);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-3);
      margin-bottom: 12px;
    }
    .pay-cards { display: flex; gap: 8px; flex-wrap: wrap; }
    /* Chips uniformes monocromos (premium) en vez del arcoíris de marcas */
    .pay-card {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      padding: 0 13px;
      border-radius: var(--radius-sm);
      background: var(--bg-card);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      font-family: var(--font-accent);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.01em;
      white-space: nowrap;
      color: var(--text-2);
    }
    .pay-logo { height: 16px; width: auto; display: block; opacity: 0.78; }
    .pay-card-text { font-family: var(--font-accent); font-size: 11px; font-weight: 600; color: var(--text-2); }
    .pay-note {
      font-size: 12px;
      color: var(--text-3);
      margin-top: 10px;
      line-height: 1.45;
    }

    /* ── Tabs ────────────────────────────────────────────── */
    .tabs-nav {
      display: flex;
      border-bottom: 1px solid var(--border);
      gap: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .tabs-nav::-webkit-scrollbar { display: none; }
    .tab-btn {
      padding: 12px 20px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-2);
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
      font-family: var(--font-body);
      white-space: nowrap;
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }

    .tab-panel { display: none; padding: 24px 0; }
    .tab-panel.active { display: block; }
    .tab-panel p { font-size: 15px; color: var(--text-2); line-height: 1.7; margin-bottom: 12px; }

    /* ── Video del producto (asignado desde el admin) ──────── */
    .video-embed-wrap {
      position: relative; width: 100%; max-width: 640px;
      aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
      background: #000; box-shadow: 0 4px 20px rgba(0,0,0,.12);
    }
    .video-embed-wrap iframe,
    .video-embed-wrap video {
      position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
      background: #000;
    }
    .video-link-card {
      display: flex; align-items: center; gap: 14px;
      max-width: 480px; padding: 16px 18px;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--bg-2); text-decoration: none; color: inherit;
      transition: border-color .15s, transform .1s;
    }
    .video-link-card:hover { border-color: var(--blue); transform: translateY(-1px); }
    .video-link-card .ic {
      width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
      background: var(--blue-light, rgba(37,99,235,.12)); color: var(--blue);
      display: flex; align-items: center; justify-content: center;
    }
    .video-link-card .t { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
    .video-link-card .s { font-size: 12px; color: var(--text-3); margin: 2px 0 0; word-break: break-all; }

    .desc-collapsible {
      position: relative;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }
    .desc-collapsible.collapsed { max-height: 260px; }
    .desc-collapsible.collapsed::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 64px;
      background: linear-gradient(to bottom, transparent, var(--bg));
      pointer-events: none;
    }
    .desc-toggle-btn {
      display: none;
      align-items: center;
      gap: 6px;
      margin-top: 16px;
      padding: 9px 18px;
      font-size: 13px;
      font-weight: 600;
      font-family: var(--font-body);
      color: var(--blue);
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .desc-toggle-btn.visible { display: inline-flex; }
    .desc-toggle-btn:hover { background: var(--blue-light); border-color: var(--blue); }
    .desc-toggle-btn svg { transition: transform 0.25s ease; }
    .desc-toggle-btn.expanded svg { transform: rotate(180deg); }

    /* ── Puntos clave (bajo el precio) ─────────────────────── */
    .key-points {
      list-style: none;
      margin: 4px 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .key-points li {
      position: relative;
      padding-left: 18px;
      font-size: 14px;
      line-height: 1.45;
      color: var(--text-2);
    }
    .key-points li::before {
      content: '';
      position: absolute;
      left: 4px; top: 8px;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--text-3);
    }
    .key-points li strong { color: var(--text); font-weight: 500; }

    .specs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .specs-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
    .specs-table td:first-child { font-weight: 500; color: var(--text); width: 40%; }
    .specs-table td:last-child { color: var(--text-2); }

    /* ── Relacionados ────────────────────────────────────── */
    /* Una sola línea separa el bloque de compra de las recomendaciones; entre
       cross-sell, relacionados y vistos no va ninguna. */
    .related-section { padding: 56px 0 0; border-top: 0; }
    #crosssell-section { border-top: 1px solid var(--pdp-line); }

    .section-title { font-family: var(--font-accent); font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--text); }

    /* Escala de la tarjeta según el handoff: título 13.5/1.4, precio 20/600,
       meta 11.5. Producción venía con 13, 19/700 y 11 — la diferencia se nota
       sobre todo en el precio, que es el número que se compara entre tarjetas.
       Va acotado a las tres secciones de la PDP: .product-card también la usa
       el catálogo, que tiene su propio diseño y no se toca desde acá. */
    #crosssell-section .product-name,
    #related-section   .product-name,
    #recent-section    .product-name {
      font-size: 13.5px; line-height: 1.4;
      /* 2 líneas a 13.5/1.4 son 37.8px; con el min-height de 35px la segunda
         línea empujaba el precio y las tarjetas quedaban desalineadas. */
      min-height: 38px;
    }
    #crosssell-section .product-price,
    #related-section   .product-price,
    #recent-section    .product-price {
      font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
    }
    #crosssell-section .product-cuotas,
    #related-section   .product-cuotas,
    #recent-section    .product-cuotas,
    #crosssell-section .product-shipping,
    #related-section   .product-shipping,
    #recent-section    .product-shipping,
    /* La línea de rating de la tarjeta ("4,5 (120) · 493 vendidos") venía en
       11px; el diseño la pone en 11.5, igual que cuotas y envío. */
    #crosssell-section .product-rating,
    #related-section   .product-rating,
    #recent-section    .product-rating { font-size: 12px; }
    .section-header { align-items: baseline; margin-bottom: 20px; }
    .section-link {
      font-size: 13px; color: var(--text-2);
      text-decoration: underline; text-underline-offset: 2px;
    }
    /* Cuatro tarjetas en escritorio (el handoff usa una grilla de 4); el
       carrusel se queda para poder mostrar más de cuatro. */
    @media (min-width: 1025px) {
      .related-section .carousel-track > .product-card { flex: 0 0 calc((100% - 48px) / 4); }
    }

    /* Carousel: estilos compartidos en design-system.css (.carousel-wrap,
       .carousel-track, .carousel-arrow) */

    /* ── Vistos recientemente ─────────────────────────────── */
    .recent-section { padding: 56px 0 72px; border-top: 0; }
    .recent-strip {
      display: flex; gap: 16px;
      overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .recent-strip::-webkit-scrollbar { display: none; }
    /* La tira de vistos usaba un ancho fijo (200px, 160 en mobile) mientras
       los carruseles de arriba se calculan sobre la grilla. Apiladas en la
       misma página se veían como tres bloques de tamaños distintos. Ahora
       sigue la misma grilla que los otros dos en cada breakpoint. */
    .rv-card { flex: 0 0 calc((100% - 48px) / 4); scroll-snap-align: start; min-width: 0; }
    @media (max-width: 1024px) { .rv-card { flex: 0 0 calc((100% - 32px) / 3); } }
    @media (max-width: 600px)  { .rv-card { flex: 0 0 44%; } }

    /* ── Stock ───────────────────────────────────────────── */
    .stock-ok   { color: var(--green); font-size: 13px; font-weight: 500; }



    /* ── Reseñas ─────────────────────────────────────────── */
    .reviews-section {
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid var(--border);
    }
    @media (max-width: 768px) {
      .reviews-section { margin-top: 32px; padding-top: 28px; }
    }
    /* Header de reseñas: título+fuente a la izquierda, calificación a la derecha */
    .reviews-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .reviews-header-left { display: flex; flex-direction: column; gap: 3px; }
    .reviews-title-row   { display: flex; align-items: baseline; gap: 8px; }
    .reviews-header h2   { font-size: 18px; font-weight: 600; color: var(--text); }
    .reviews-count       { font-size: 13px; color: var(--text-3); }
    .reviews-source      { font-size: 12px; color: var(--text-3); font-style: italic; }
    /* Calificación promedio compacta — aparece a la derecha del header */
    .reviews-summary {
      display: none; /* se muestra via JS cuando hay datos */
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      background: var(--bg);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      flex-shrink: 0;
    }
    .reviews-avg-num   { font-size: 32px; font-weight: 700; color: var(--text); line-height: 1; }
    .reviews-avg-stars { color: var(--star); font-size: 16px; letter-spacing: 2px; }
    .reviews-avg-label { font-size: 11px; color: var(--text-3); }

    /* Carousel horizontal de reseñas */
    /* Wrapper del carousel — flechas overlay */
    .reviews-carousel-wrap {
      position: relative;
    }
    .reviews-list {
      display: flex;
      flex-direction: row;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* Salir del padding del container para llegar al borde */
      margin: 0 -16px;
      padding: 0 16px 4px;
    }
    .reviews-list::-webkit-scrollbar { display: none; }
    @media (min-width: 768px) {
      .reviews-list { margin: 0 -24px; padding: 0 24px 4px; }
    }
    @media (min-width: 1024px) {
      .reviews-list { margin: 0 -32px; padding: 0 32px 4px; }
    }

    /* Flechas: van debajo, junto al origen. Superpuestas tapaban el texto
       de la primera y la última reseña visibles. */
    .reviews-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
    .reviews-foot .reviews-source { margin: 0; }
    .reviews-nav { display: flex; gap: 8px; flex-shrink: 0; }
    .reviews-arrow-btn {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px;
      background: var(--bg-card); border: 1px solid var(--border-2);
      border-radius: 50%; color: var(--text-2);
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
    }
    .reviews-arrow-btn:hover:not(:disabled) {
      border-color: var(--blue); color: var(--blue);
      box-shadow: 0 2px 10px rgba(var(--blue-rgb),0.2);
    }
    .reviews-arrow-btn:disabled { opacity: .35; cursor: default; }
    /* En el celu se desliza con el dedo */
    @media (hover: none) and (max-width: 767px) { .reviews-nav { display: none; } }

    .review-card {
      flex: 0 0 300px;
      scroll-snap-align: start;
      padding: 16px 18px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--white);
    }
    @media (max-width: 480px) {
      .review-card { flex: 0 0 calc(100vw - 64px); }
    }
    .review-card-top {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .review-stars-sm { color: var(--star); font-size: 13px; letter-spacing: 1px; flex-shrink: 0; }
    /* El título se achica hasta donde haga falta (min-width: 0), así que sin
       recorte su TEXTO se salía de la caja y se montaba sobre la fecha —
       sobre todo con la tipografía de respaldo, más ancha, antes de que
       termine de cargar Inter. */
    .review-title    {
      font-size: 13px; font-weight: 600; color: var(--text); flex: 1 1 auto; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .review-date     { font-size: 11px; color: var(--text-3); white-space: nowrap; margin-left: auto; flex-shrink: 0; }
    /* Respuesta de la tienda a una reseña de la web (se escribe en el panel → Reseñas) */
    .review-reply { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--border, #e5e5e5); background: var(--bg-subtle, #f7f7f8); border-radius: 0 6px 6px 0; }
    .review-reply-de { display: block; font-size: 11.5px; font-weight: 700; color: var(--text, #111); margin-bottom: 2px; }
    .review-reply p { margin: 0; font-size: 12.5px; color: var(--text-2, #444); line-height: 1.5; white-space: pre-line; }
    .review-content  { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

    /* Fotos de la reseña */
    .review-photos {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .review-photo {
      width: 72px;
      height: 72px;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
      cursor: pointer;
      flex-shrink: 0;
      background: var(--bg);
    }
    .review-photo img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.2s;
    }
    .review-photo:hover img { transform: scale(1.08); }

    /* Visor de fotos + reseña — estilo "publicaciones de clientes" de
       MercadoLibre: imagen grande a un lado, texto de la reseña al otro,
       con flechas (y teclado ← →) para recorrer todas las reseñas con foto. */
    .review-lightbox {
      display: none;
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.86);
      align-items: center; justify-content: center;
      padding: 24px;
    }
    .review-lightbox.open { display: flex; }
    .review-lightbox-close {
      position: absolute; top: 14px; right: 16px;
      width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      background: rgba(0,0,0,0.5);
      color: #fff; font-size: 24px; line-height: 1;
      cursor: pointer; opacity: 0.92; z-index: 3;
      transition: background 0.15s, opacity 0.15s;
    }
    .review-lightbox-close:hover { opacity: 1; background: rgba(0,0,0,0.66); }
    .review-lightbox-content {
      display: flex;
      width: 100%; max-width: 980px; max-height: 88vh;
      background: var(--white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }
    .review-lightbox-media {
      flex: 1 1 58%;
      min-width: 0;
      background: var(--bg);
      display: flex; align-items: center; justify-content: center;
      padding: 14px;
    }
    .review-lightbox-media img {
      max-width: 100%; max-height: 88vh;
      object-fit: contain; display: block;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--white);
    }
    .review-lightbox-info {
      flex: 1 1 42%;
      min-width: 0;
      padding: 28px 30px;
      display: flex; flex-direction: column; gap: 12px;
      overflow-y: auto;
    }
    .review-lightbox-badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 700;
      color: var(--text-3);
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .review-lightbox-stars { color: var(--star); font-size: 16px; letter-spacing: 1.5px; }
    .review-lightbox-title {
      font-family: var(--font-accent);
      font-size: 17px; font-weight: 700; color: var(--text);
      line-height: 1.35;
    }
    .review-lightbox-text {
      font-size: 14px; color: var(--text-2); line-height: 1.65;
      white-space: pre-wrap;
    }
    .review-lightbox-meta {
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      font-size: 12px; color: var(--text-3);
    }
    .review-lightbox-nav {
      flex-shrink: 0;
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.12);
      border: none; color: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background 0.15s, opacity 0.15s;
      margin: 0 18px;
      z-index: 2;
    }
    .review-lightbox-nav:hover { background: rgba(255,255,255,0.28); }
    .review-lightbox-nav[hidden] { display: none; }
    @media (max-width: 760px) {
      .review-lightbox { padding: 0; }
      .review-lightbox-content {
        flex-direction: column;
        max-height: 100vh; height: 100%;
        border-radius: 0;
        overflow-y: auto;
      }
      .review-lightbox-media { flex: 0 0 auto; position: relative; min-height: 46vh; }
      .review-lightbox-media img { max-height: 46vh; width: 100%; }
      .review-lightbox-info { flex: 1 1 auto; padding: 20px; }
      /* En mobile las flechas y la "x" se anclan sobre el área de la
         foto (no sobre el panel de texto) y llevan un fondo oscuro
         circular propio para verse bien sea cual sea el color de la
         imagen de fondo. */
      .review-lightbox-nav {
        position: absolute; top: 23vh; transform: translateY(-50%);
        margin: 0; width: 38px; height: 38px;
        background: rgba(0,0,0,0.45); color: #fff;
      }
      .review-lightbox-nav:hover { background: rgba(0,0,0,0.6); }
      .review-lightbox-nav.prev { left: 10px; }
      .review-lightbox-nav.next { right: 10px; }
      .review-lightbox-close { top: 14px; right: 16px; }
    }

    .reviews-load-more { margin-top: 20px; margin-bottom: 36px; display: flex; justify-content: center; }
    .reviews-load-more button {
      padding: 9px 28px;
      border: 1.5px solid var(--border-2);
      border-radius: var(--radius);
      background: var(--white);
      font-family: var(--font-accent); font-size: 13px; font-weight: 600;
      color: var(--text-2); cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
    }
    .reviews-load-more button:hover { border-color: var(--blue); color: var(--blue); }
    .reviews-load-more button:disabled { opacity: 0.4; cursor: default; }
    .reviews-skeleton { display: flex; flex-direction: row; gap: 12px; overflow: hidden; }
    .reviews-skeleton-item { flex: 0 0 300px; height: 140px; border-radius: var(--radius-lg); }

    /* ── Estado vacío / error ────────────────────────────── */
    .not-found {
      text-align: center;
      padding: 80px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .not-found svg { color: var(--border-2); }
    .not-found h2 { font-size: 22px; font-weight: 600; color: var(--text); }
    .not-found p  { font-size: 14px; color: var(--text-3); }

    /* ── Shimmer ─────────────────────────────────────────── */
    .skeleton { animation: shimmer 1.4s infinite linear;
      background: linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%);
      background-size: 200% 100%;
      border-radius: var(--radius);
    }

    /* ── Sticky add-to-cart bar (solo mobile) ────────────── */
    /* ── Back-in-stock (avisame cuando haya stock) ── */
    .stock-alert-block {
      border: 1px solid var(--border-2);
      border-radius: var(--radius);
      background: var(--bg-2);
      padding: 14px 16px;
      margin-top: 4px;
      max-width: 420px;
    }
    .stock-alert-title {
      display: flex; align-items: center; gap: 7px;
      font-size: 13px; font-weight: 600; color: var(--ink);
      margin: 0 0 10px;
    }
    .stock-alert-title svg { color: var(--blue); flex-shrink: 0; }
    .stock-alert-form { display: flex; gap: 8px; max-width: 360px; }
    .stock-alert-form input[type="email"] {
      flex: 1; min-width: 0;
      border: 1px solid var(--border-input); border-radius: var(--radius);
      padding: 10px 12px; font-size: 14px; font-family: var(--font-body);
      background: var(--white); color: var(--text);
    }
    .stock-alert-form input[type="email"]:focus {
      outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(var(--blue-rgb),0.1);
    }
    .stock-alert-form button {
      border: none; border-radius: var(--radius);
      background: var(--ink); color: #fff;
      padding: 0 18px; font-size: 14px; font-weight: 600; font-family: var(--font-accent);
      cursor: pointer; white-space: nowrap; transition: background .15s;
    }
    .stock-alert-form button:hover:not(:disabled) { background: var(--ink-soft, #333); }
    .stock-alert-form button:disabled { opacity: .6; cursor: default; }
    .stock-alert-msg { font-size: 12px; margin: 8px 0 0; min-height: 0; }
    .stock-alert-msg.ok  { color: var(--green); }
    .stock-alert-msg.err { color: var(--red); }

    .sticky-buy-bar {
      position: fixed; bottom: 0; left: 0; right: 0;
      background: var(--bg-card);
      border-top: 1px solid var(--border);
      padding: 10px 16px;
      padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
      display: none;
      align-items: center;
      gap: 12px;
      z-index: 100;
      box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
      transform: translateY(100%);
      transition: transform .25s ease-out;
    }
    .sticky-buy-bar.visible {
      transform: translateY(0);
    }
    .sticky-buy-info {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 2px;
    }
    .sticky-buy-price {
      font-size: 18px; font-weight: 700;
      color: var(--text);
      line-height: 1.1;
    }
    .sticky-buy-stock {
      font-size: 11px;
      color: var(--text-3);
    }
    .sticky-buy-stock.low { color: #c9a800; }
    .sticky-buy-stock.none { color: var(--red); font-weight: 600; }
    .sticky-buy-btn {
      background: var(--blue); color: #fff;
      font-size: 14px; font-weight: 600;
      padding: 0 22px; min-height: 48px;
      border-radius: var(--radius);
      border: none; cursor: pointer;
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      transition: background .15s, opacity .15s;
    }
    .sticky-buy-btn:hover { background: var(--blue-dark); }
    .sticky-buy-btn:disabled {
      background: var(--text-3); cursor: not-allowed; opacity: .7;
    }
    .sticky-buy-btn.added {
      background: var(--green); pointer-events: none;
    }

    /* Solo se muestra en mobile */
    @media (max-width: 768px) {
      .sticky-buy-bar { display: flex; }
      /* Padding-bottom al main para que la bar no tape el contenido */
      body.has-sticky-buy main { padding-bottom: 80px; }
    }
    /* ══════════════════════════════════════════════════════════════
       REDISEÑO PDP — design_handoff_pdp
       Los valores salen de REFERENCIA del handoff. Va al final del
       <style> a propósito: pisa las reglas viejas sin tener que
       reescribirlas una por una.
       ══════════════════════════════════════════════════════════════ */
    :root {
      --pdp-line:        #EAEAEA;
      --pdp-line-strong: #D2D2D7;
      --pdp-line-faint:  #F2F2F3;
      --pdp-subtle:      #8A8A91;
      --pdp-faint:       #A9A9B0;
      --pdp-sunken:      #F7F7F8;
    }

    /* ── Above the fold: dos columnas, sin fila 2 ───────────── */
    .product-layout {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      grid-template-rows: auto;
      gap: 56px;
      padding: 24px 0 72px;
    }
    /* La columna tiene que ocupar TODO el alto de la fila: con align-items:start
       se encogía al alto de la galería y el sticky se quedaba sin recorrido —
       la foto no bajaba y abajo quedaba un hueco del alto de la diferencia. */
    #gallery-col    { grid-column: 1; grid-row: 1; align-self: stretch; }
    .product-detail { grid-column: 2; grid-row: 1; gap: 0; }

    /* ── Galería: miniaturas verticales + imagen sticky ─────── */
    /* El tope se calcula solo: el header de la tienda es sticky y mide 131px
       con la barra de categorías, así que anclar a 24px dejaba la foto por
       debajo de él. Lo mide ajustarTopePegado() al cargar y al redimensionar;
       el valor de respaldo cubre el caso de que el JS no llegue a correr. */
    :root { --wz-top-pegado: 147px; }
    .gallery-grid {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 14px;
      position: sticky;
      top: var(--wz-top-pegado);
    }
    .gallery-thumbs {
      flex-direction: column;
      gap: 10px;
      margin-top: 0;
      flex-wrap: nowrap;
      max-height: calc(100vh - var(--wz-top-pegado) - 40px);
      overflow-y: auto;
      scrollbar-width: none;
    }
    .gallery-thumbs::-webkit-scrollbar { display: none; }
    /* Miniatura del video: misma caja que las fotos, con el triángulo encima
       para que se entienda de un vistazo que no es otra foto. */
    .thumb-video { position: relative; }
    .thumb-video::after {
      content: ''; position: absolute; inset: 0;
      background: rgba(10,10,10,.34);
      border-radius: 10px; pointer-events: none;
    }
    .thumb-video .tv-play {
      position: absolute; inset: 0; margin: auto;
      width: 26px; height: 26px; border-radius: 50%;
      background: rgba(255,255,255,.94);
      display: flex; align-items: center; justify-content: center;
      z-index: 1; pointer-events: none;
    }
    .thumb-video .tv-play svg { margin-left: 2px; }
    /* El video ocupa el mismo lugar que la foto grande. */
    .gal-video {
      position: absolute; inset: 0; width: 100%; height: 100%;
      background: #000; border-radius: inherit; z-index: 3;
    }
    .gal-video video, .gal-video iframe {
      width: 100%; height: 100%; border: 0; display: block;
      object-fit: contain; background: #000;
    }
    .thumb {
      width: 72px;
      height: 72px;
      border: 0;
      border-radius: 10px;
      background: #fff;
      /* La selección es un inset, no un borde: pasar de 1px a 2px movería
         la miniatura 1px y con ella toda la columna. */
      box-shadow: inset 0 0 0 1px var(--pdp-line);
      transition: box-shadow 0.15s ease;
    }
    .thumb.active { box-shadow: inset 0 0 0 2px var(--ink); }
    .thumb:hover  { box-shadow: inset 0 0 0 1.5px var(--pdp-line-strong); }
    /* Con muchas fotos la tira (9 × 72 + 8 × 10 = 728px) superaba a la foto
       (467) y la grilla se estiraba a la columna más alta: quedaba un blanco
       debajo de la foto. La tira muestra las miniaturas que entran en el alto
       de la foto y la última lleva "+N"; al tocarla se despliegan todas dentro
       del mismo alto (la tira scrollea). Lo calcula ajustarTiraMiniaturas(). */
    .thumb.thumb-oculta { display: none; }
    .thumb.thumb-mas { position: relative; }
    .thumb.thumb-mas::after {
      content: '+' attr(data-mas); position: absolute; inset: 0; z-index: 1;
      display: flex; align-items: center; justify-content: center;
      background: rgba(10,10,10,.55); color: #fff; border-radius: 10px;
      font-size: 15px; font-weight: 600;
    }
    .thumb.active:hover { box-shadow: inset 0 0 0 2px var(--ink); }
    .thumb img { padding: 6px; }

    .gallery-main {
      border: 1px solid var(--pdp-line);
      border-radius: 16px;
    }
    .gallery-main img { padding: 28px 28px 34px; }

    /* Superpuestos de la imagen principal */
    .gal-badge {
      position: absolute; left: 16px; top: 16px; z-index: 2;
      background: var(--ink); color: #fff;
      font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
      padding: 5px 11px; border-radius: 6px;
    }
    .gal-caption {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
      padding: 10px 0; text-align: center; pointer-events: none;
      font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--text-3);
    }
    .gal-zoom-pill {
      position: absolute; right: 16px; bottom: 16px; z-index: 2;
      display: inline-flex; align-items: center; gap: 6px;
      height: 32px; padding: 0 12px; border-radius: 999px;
      background: rgba(255,255,255,.92); border: 1px solid var(--pdp-line);
      font-size: 11.5px; color: var(--text-2); pointer-events: none;
    }
    .gal-fav {
      position: absolute; right: 16px; top: 16px; z-index: 3;
      width: 44px; height: 44px; padding: 0; border-radius: 50%;
      background: #fff; border: 1px solid var(--pdp-line);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--text-3);
    }
    .gal-fav .wz-fav-label { display: none; }
    /* Compartir va debajo del corazón, misma esquina */
    .gal-share { top: 68px; }

    /* Aire de la columna de compra, tal cual el prototipo: el separador a 28
       del bloque de cuotas y el encabezado del paso 1 a 24 del separador. */
    .product-detail > .divider { margin-top: 28px; background: var(--pdp-line); }
    /* Sin raya antes de "¿Le va a tu reloj?" (10/10): la línea va pegada al
       color, la raya separaba la pregunta de lo que pregunta. */
    .product-detail > .divider:has(+ .eq-ficha:not([hidden])) { display: none; }
    .product-detail > .divider + .eq-ficha { margin-top: 18px; }
    #variant-selectors > .paso-head:first-child { margin-top: 24px; }
    .gal-fav svg { width: 18px; height: 18px; }
    @media (max-width: 600px) {
      .gal-zoom-pill { display: none; }
    }

    /* ── Columna de compra ──────────────────────────────────── */
    .pdp-eyebrow {
      font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--pdp-subtle);
    }
    /* "WZMALLAS · SAMSUNG WATCH" sobre el título repetía la marca del logo y
       la categoría que ya dice el título: el título arranca la columna.
       "Exclusivo online" (productos propios) se sigue viendo. */
    .product-detail .pdp-eyebrow { display: none; }
    .product-detail #wz-direct-badge { margin-bottom: 10px; }
    .product-detail .product-title {
      margin-top: 0;
      /* 30 y no los 38 del handoff: ese mock usa un título de dos palabras y
         los de ML son de 50-60 caracteres, que a 38px caen en tres líneas y
         mandan el CTA abajo del pliegue. */
      font-size: 30px;
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1.12;
      text-wrap: pretty;
    }
    .product-detail a.rating-row {
      margin-top: 14px;
      gap: 10px;
      font-size: 13px;
      color: var(--text-2);
    }
    .product-detail .rating-row .stars { font-size: 14px; letter-spacing: 1.5px; }
    .product-detail #rating-avg-num { color: var(--text); font-weight: 600; }
    .product-detail .rating-count-inline {
      color: var(--text-2);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .rating-line {
      margin-top: 14px;
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      font-size: 13px; color: var(--text-2);
    }
    .rating-line a.rating-row { margin-top: 0; }
    .rating-sold-sep { color: var(--pdp-line-strong); }

    .price-block {
      margin-top: 24px;
      align-items: flex-end;
      gap: 14px;
    }
    /* A 46px el precio competía con el título en vez de acompañarlo. A 36
       sigue siendo el número más grande de la columna, que es lo que tiene
       que ser. */
    .price-main { font-size: 36px; letter-spacing: -0.03em; line-height: 0.95; }
    .price-was {
      font-size: 16px; color: var(--pdp-subtle);
      text-decoration: line-through; padding-bottom: 4px;
    }
    .price-save {
      padding-bottom: 5px;
      font-size: 13px; font-weight: 600; color: var(--green);
    }
    /* Va pegado al precio y antes de las cuotas: es el precio más bajo que el
       comprador puede pagar de verdad, y es sobre el que compara. */
    .price-transf {
      margin-top: 6px;
      font-size: 13.5px; font-weight: 600; color: var(--green);
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    /* "Ver medios de pago" vive en este renglón desde el 07/10 */
    .price-transf .pay-toggle { margin-left: 4px; }
    .price-transf .pt-off {
      font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
      padding: 2px 6px; border-radius: 5px;
      background: color-mix(in srgb, var(--green) 12%, transparent);
      color: var(--green);
    }
    .price-cuotas-row {
      margin-top: 10px;
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    }
    .price-cuotas {
      flex-basis: auto;
      font-size: 14px; font-weight: 600; color: var(--text);
    }
    /* "6 cuotas de $3.046" son un 32% más que el precio de lista. Callarlo
       hace que el comprador lo descubra en el checkout. */
    .price-cuotas .cuotas-nota { font-weight: 400; color: var(--text-2); }
    .pay-toggle {
      background: none; border: 0; cursor: pointer;
      font: inherit; font-size: 13px; font-weight: 400; color: var(--text-2);
      text-decoration: underline; text-underline-offset: 2px;
      /* Área de toque de 44px sin mover nada: el padding se compensa con el margen */
      padding: 12px 0; margin: -12px 0;
    }
    .pdp-subtotal { margin-top: 8px; font-size: 13px; color: var(--text-2); }

    .pay-panel {
      margin-top: 14px;
      border: 1px solid var(--pdp-line); background: #fff;
      border-radius: 14px; padding: 18px;
    }
    .pay-panel-title {
      font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
      text-transform: uppercase; color: var(--pdp-subtle);
    }
    .pay-grid {
      margin-top: 12px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
    }
    .pay-grid > div {
      display: flex; justify-content: space-between; gap: 12px;
      font-size: 13.5px; color: var(--text);
      padding: 7px 0; border-bottom: 1px solid var(--pdp-line-faint);
    }
    .pay-grid b { font-weight: 600; }
    .pay-panel .pay-row { margin-top: 10px; }
    .pay-panel .pay-note { margin-top: 12px; }

    .pdp-sep { margin-top: 28px; height: 1px; background: var(--pdp-line); }

    /* Confianza: 4 celdas sin caja — encajonarlas compite con el CTA */
    .pdp-trust {
      margin-top: 20px;
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px 20px;
    }
    /* Un renglón por celda: el segundo ("Devolución sin costo", "Cifrado
       SSL…") duplicaba el alto y casi no sumaba. */
    /* El de WhatsApp es un <a> (no un div): sin esto quedaba el ícono arriba del texto */
    .pdp-trust > div, .pdp-trust > a { display: flex; align-items: center; gap: 10px; }
    .pdp-trust svg { flex-shrink: 0; }
    .pdp-trust p { font-size: 13px; font-weight: 600; color: var(--text); }
    .pdp-more-note { margin-top: 20px; font-size: 13px; color: var(--text-2); }

    /* Envío gratis antes de agregar: "Te faltan $X" debajo del precio */
    .pdp-envio-nudge {
      margin-top: 10px; display: flex; align-items: center; gap: 6px;
      font-size: 13px; color: var(--text-2);
    }
    .pdp-envio-nudge[hidden] { display: none; }
    .pdp-envio-nudge svg { flex-shrink: 0; color: var(--text); }
    .pdp-envio-nudge strong { font-weight: 600; color: var(--text); }
    .pdp-envio-nudge.ok { color: var(--green); }
    .pdp-envio-nudge.ok svg, .pdp-envio-nudge.ok strong { color: var(--green); }
    /* "· sumá un protector ($21.500)": abre el selector de variantes sin salir */
    .pdp-envio-nudge .nudge-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
    /* Línea unida con el CP (10/10): el texto se parte en renglones, el ícono arriba */
    .pdp-envio-nudge.con-cp { align-items: flex-start; line-height: 1.45; }
    .pdp-envio-nudge.con-cp svg { margin-top: 2px; }
    .pdp-envio-nudge .nudge-cambiar { background: none; border: 0; padding: 0; font: inherit; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
    /* Envío al CP guardado, debajo del precio: "Envío a CP 1635: Flex $8.990, llega hoy · …" */
    .pdp-envio-cp { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
    .pdp-envio-cp[hidden] { display: none; }
    .pdp-envio-cp strong { color: var(--text); font-weight: 600; }
    .pdp-envio-cp .gratis { color: var(--green); font-weight: 600; }
    .pdp-envio-cp button { background: none; border: 0; padding: 0 0 0 4px; font: inherit; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

    /* El ítem de WhatsApp de la fila de confianza es un link */
    .pdp-trust a.pdp-trust-wa { color: inherit; text-decoration: none; }
    /* "Medios de pago" (10/10): botón con la pinta de los demás ítems */
    .pdp-trust .pdp-trust-pagos { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
    .pdp-trust .pdp-trust-pagos p { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pdp-line-strong); }
    .pdp-trust .pdp-trust-pagos:hover p { text-decoration-color: currentColor; }
    .pdp-trust a.pdp-trust-wa p { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pdp-line-strong); }
    .pdp-trust a.pdp-trust-wa:hover p { text-decoration-color: currentColor; }

    /* Celular: puntitos sobre la foto en vez de la tira de miniaturas. La tira
       medía 90px y era lo que dejaba el título y el precio fuera de la primera
       pantalla; con puntitos, flechas y deslizar, se recorren igual (patrón de
       ML). Si la publicación tiene video, la tira se queda: es la única forma
       de abrirlo. En escritorio no cambia nada. */
    .gal-dots { display: none; }
    @media (max-width: 900px) {
      .gallery-grid:not(.con-video) .gallery-thumbs { display: none; }
      .gallery-grid:not(.con-video) .gal-dots {
        display: flex; justify-content: center; gap: 6px;
        position: absolute; left: 0; right: 0; bottom: 32px; z-index: 2; pointer-events: none;
      }
      .gal-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(10,10,10,.18); }
      .gal-dots i.on { background: var(--ink); }
    }

    /* ── Detalle a ancho completo: acordeones ───────────────── */
    #detalle-section { padding-bottom: 8px; }
    .acc-item + .acc-item, .acc-item:first-child { border-top: 1px solid var(--pdp-line); }
    .acc-head {
      width: 100%; background: none; border: 0; padding: 0;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      height: 60px; cursor: pointer;
      font: inherit; font-size: 15px; font-weight: 600; color: var(--text);
      text-align: left;
    }
    .acc-head .acc-chev { color: var(--text-2); flex-shrink: 0; transition: transform 0.18s ease; }
    .acc-item.open .acc-chev { transform: rotate(180deg); }
    .acc-body { display: none; padding-bottom: 22px; }
    .acc-item.open .acc-body { display: block; }
    .acc-end { border-top: 1px solid var(--pdp-line); }
    @media (max-width: 768px) { .acc-head { height: 56px; } }

    .spec-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
    .spec-rows > div {
      display: flex; justify-content: space-between; gap: 12px;
      padding: 9px 0; border-bottom: 1px solid var(--pdp-line-faint); font-size: 13px;
    }
    .spec-rows dt, .spec-rows .spec-k { color: var(--pdp-subtle); }
    .spec-rows dd, .spec-rows .spec-v { color: var(--text); text-align: right; }
    @media (max-width: 700px) { .spec-rows { grid-template-columns: 1fr; } }

    .compat-pills { display: flex; gap: 8px; flex-wrap: wrap; }
    .compat-pill {
      display: inline-flex; align-items: center; gap: 6px;
      height: 34px; padding: 0 13px;
      border: 1px solid var(--pdp-line); border-radius: 999px;
      font-size: 12.5px; color: var(--text);
    }
    .compat-pill.no { color: var(--pdp-faint); }
    .compat-pill .ok { color: var(--green); }

    /* ── Responsive ─────────────────────────────────────────── */
    @media (max-width: 900px) {
      .product-layout { grid-template-columns: 1fr; gap: 28px; padding: 16px 0 48px; }
      #gallery-col, .product-detail { grid-column: 1; grid-row: auto; }
      /* Nada de sticky en mobile: la galería tiene que scrollear con todo */
      .gallery-grid {
        position: static;
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .gallery-thumbs {
        flex-direction: row;
        overflow-x: auto;
        max-height: none;
        order: 2;
      }
      .product-detail .product-title { font-size: clamp(24px, 6vw, 30px); }
      .price-main { font-size: 34px; }
      .pay-grid { grid-template-columns: 1fr; }
      .pdp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }   /* 2×2 también en el celular (10/10) */
    }

    /* ── Pasos 1 y 2: modelo y color ────────────────────────── */
    .paso-head {
      display: flex; align-items: center; gap: 9px;
      font-size: 13px; font-weight: 600; color: var(--text);
    }
    .paso-num {
      width: 20px; height: 20px; border-radius: 50%;
      background: var(--ink); color: #fff;
      font-size: 11px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .paso-head .paso-libre { font-weight: 400; color: var(--text-2); }
    .paso-link {
      margin-left: auto; font-size: 12.5px; color: var(--text-2);
      text-decoration: underline; text-underline-offset: 2px;
      background: none; border: 0; cursor: pointer; font-family: inherit;
      /* Área de toque de 44px sin cambiar el alto del renglón */
      padding: 12px 0; margin-top: -12px; margin-bottom: -12px;
    }
    .paso-estado { margin-left: auto; font-size: 12.5px; }

    /* Con 11 modelos una grilla de botones no entra: disparador + desplegable */
    .modelo-trigger {
      margin-top: 12px; width: 100%;
      min-height: 60px; padding: 0 18px;
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      background: #fff; border: 0; border-radius: 12px;
      box-shadow: inset 0 0 0 1px var(--pdp-line-strong);
      cursor: pointer; text-align: left; font-family: inherit;
    }
    .modelo-trigger:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
    /* Abierto: anillo negro de 2px, igual que el swatch elegido */
    .modelo-wrap.open .modelo-trigger { box-shadow: inset 0 0 0 2px var(--ink); }
    /* La foto de lo elegido queda a la vista con el menú cerrado: es la
       confirmación de qué se está por comprar. */
    .modelo-trigger-izq { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .modelo-trigger-thumb {
      width: 42px; height: 42px; flex-shrink: 0;
      border-radius: 9px; background: #fff;
      background-size: cover; background-position: center;
      box-shadow: inset 0 0 0 1px var(--pdp-line);
    }
    .modelo-trigger-thumb[hidden] { display: none; }
    .modelo-trigger-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .modelo-trigger-name { font-size: 15px; font-weight: 600; color: var(--text); }
    .modelo-trigger-hint { font-size: 12.5px; color: var(--text-2); font-weight: 400; }
    .modelo-chev { color: var(--text-2); flex-shrink: 0; transition: transform 0.18s ease; }
    .modelo-wrap.open .modelo-chev { transform: rotate(180deg); }

    .modelo-pop {
      display: none;
      margin-top: 8px;
      background: #fff; border: 1px solid var(--pdp-line);
      border-radius: 14px; box-shadow: 0 8px 28px rgba(17,17,17,.08);
      overflow: hidden;
    }
    .modelo-wrap.open .modelo-pop { display: block; }
    .modelo-buscador {
      padding: 12px 14px; border-bottom: 1px solid var(--pdp-line-faint);
      display: flex; align-items: center; gap: 10px;
    }
    .modelo-buscador svg { flex-shrink: 0; }
    .modelo-buscador input {
      flex: 1 1 auto; border: 0; outline: none; background: transparent;
      font-family: inherit; font-size: 14px; color: var(--text);
    }
    .modelo-lista { max-height: 288px; overflow: auto; }
    .modelo-row {
      width: 100%; min-height: 48px; padding: 0 14px;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      background: none; border: 0; border-bottom: 1px solid var(--pdp-line-faint);
      cursor: pointer; font-family: inherit; text-align: left;
    }
    .modelo-row:hover { background: var(--pdp-sunken); }
    .modelo-row.sel   { background: var(--pdp-sunken); }
    /* Mi equipo: las variantes que le entran van juntas y primero, con rótulo
       ("Para tu Apple Watch 45 mm"); las demás abajo ("Otras medidas"). */
    .modelo-grupo, .variants-grupo {
      font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em;
      text-transform: uppercase; color: var(--pdp-subtle);
    }
    .modelo-grupo { padding: 12px 14px 6px; border-bottom: 1px solid var(--pdp-line-faint); }
    .variants-grupo { flex-basis: 100%; grid-column: 1 / -1; margin: 2px 0 -2px; }
    .modelo-row-izq { display: flex; align-items: center; gap: 10px; min-width: 0; }
    /* Miniatura de la variante. Reemplaza al punto gris cuando la variación
       tiene foto propia: elegir un color leyendo su nombre es adivinar. */
    .modelo-thumb {
      width: 34px; height: 34px; flex-shrink: 0;
      border-radius: 8px; background: #fff;
      background-size: cover; background-position: center;
      box-shadow: inset 0 0 0 1px var(--pdp-line);
    }
    .modelo-row.agotado .modelo-thumb { opacity: .4; }
    .modelo-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: transparent; flex-shrink: 0;
    }
    .modelo-row.sel .modelo-dot { background: var(--ink); }
    .modelo-row-name { font-size: 14px; color: var(--text); }
    .modelo-row.agotado .modelo-row-name { color: var(--pdp-faint); }
    .modelo-row-stock { font-size: 12px; white-space: nowrap; }
    .modelo-vacio { padding: 16px 14px; font-size: 13px; color: var(--pdp-subtle); }

    /* Otros colores (13/10): el mismo producto publicado una vez por color.
       Cada foto es un link a su ficha (lo arma el servidor, lib/fichas-color.js);
       se ve igual que los swatches de abajo. */
    .pdp-otros { margin: 4px 0 18px; }
    .pdp-otros-fila { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
    .pdp-otro {
      position: relative;
      width: 60px; height: 60px; padding: 3px;
      background: #fff; border-radius: 12px;
      box-shadow: inset 0 0 0 1px var(--border);
      display: flex; text-decoration: none;
      transition: box-shadow 0.15s ease;
    }
    .pdp-otro:hover { box-shadow: inset 0 0 0 1.5px var(--pdp-line-strong); }
    .pdp-otro.active, .pdp-otro.active:hover { box-shadow: inset 0 0 0 2px var(--ink); }
    .pdp-otro:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
    .pdp-otro-chip { flex: 1 1 auto; border-radius: 9px; background: var(--bg) center / cover no-repeat; }
    .pdp-otro.agotado .pdp-otro-chip { opacity: .35; }
    .pdp-otro.agotado::after {
      content: ''; position: absolute;
      left: 6px; right: 6px; top: 29px; height: 1px;
      background: var(--pdp-subtle); transform: rotate(-45deg);
    }

    /* Swatches de color: mosaico con la foto real de cada color */
    #color-swatches.pdp-swatches {
      display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px;
    }
    .pdp-swatch {
      position: relative;
      width: 60px; height: 60px; padding: 3px;
      background: #fff; border: 0; border-radius: 12px;
      box-shadow: inset 0 0 0 1px var(--border);
      cursor: pointer; display: flex;
      transition: box-shadow 0.15s ease;
    }
    .pdp-swatch:hover { box-shadow: inset 0 0 0 1.5px var(--pdp-line-strong); }
    .pdp-swatch.active,
    .pdp-swatch.active:hover { box-shadow: inset 0 0 0 2px var(--ink); }
    .pdp-swatch-chip {
      flex: 1 1 auto; border-radius: 9px;
      background-size: cover; background-position: center;
    }
    .pdp-swatch.agotado .pdp-swatch-chip { opacity: .35; }
    .pdp-swatch.agotado::after {
      content: ''; position: absolute;
      left: 6px; right: 6px; top: 29px; height: 1px;
      background: var(--pdp-subtle); transform: rotate(-45deg);
    }
    /* Stock bajo: una sola vez, con la cifra, en el renglón del paso (ver
       wzActualizarPasos). Sale del stock real de la variante elegida. */
    .paso-estado.stock-bajo, .modelo-trigger-hint.stock-bajo { color: var(--urgency); font-weight: 600; }
    .paso-estado.sin-stock { color: var(--pdp-faint); }

    /* La línea de stock vieja repetía "Últimas N" tres renglones más arriba. */
    .product-detail #stock-status { display: none; }

    .paso-sep { margin-top: 22px; }
    .paso-sep-corto { margin-top: 12px; }
    @media (max-width: 768px) {
      .pdp-swatch { width: 48px; height: 48px; }
      .pdp-swatch.agotado::after { top: 23px; }
    }

    /* ── Contador + CTA ─────────────────────────────────────── */
    .actions {
      margin-top: 24px;
      gap: 12px;
      align-items: stretch;
    }
    .product-detail .qty-wrap {
      height: 56px; padding: 0 6px; gap: 2px;
      border: 1px solid var(--pdp-line-strong); border-radius: 12px;
      overflow: visible; flex-shrink: 0; background: #fff;
      align-items: center;
    }
    .product-detail .qty-btn {
      width: 44px; height: 44px; border-radius: 9px;
      background: transparent; font-size: 20px;
    }
    .product-detail .qty-btn:hover:not(:disabled) { background: var(--pdp-line-faint); }
    .product-detail .qty-input {
      width: 30px; min-width: 26px; border: 0;
      background: transparent; font-size: 15px;
    }
    /* El CTA principal es "Agregar": es la acción que hace casi todo el mundo.
       "Comprar ahora" pasa a secundario, debajo y sin relleno. */
    .product-detail .btn-add-cart {
      flex: 1 1 auto; height: 56px; padding: 0 18px;
      background: var(--ink); color: #fff; border: 0;
      border-radius: 12px; gap: 9px;
      font-size: 15.5px; letter-spacing: -0.01em;
      box-shadow: 0 2px 10px rgba(10,10,10,.14);
    }
    .product-detail .btn-add-cart:hover { background: var(--ink-soft); color: #fff; }
    .product-detail .btn-add-cart.added { background: var(--green); color: #fff; }
    .product-detail .btn-buy-now {
      margin-top: 10px; width: 100%; height: 52px;
      background: transparent; color: var(--ink);
      border: 1.5px solid var(--ink); border-radius: 12px;
      box-shadow: none; font-size: 15px;
    }
    .product-detail .btn-buy-now:hover {
      background: var(--ink); color: #fff; transform: none; box-shadow: none;
    }
    /* Agotado no es lo mismo que deshabilitado: el CTA cambia de trabajo y
       pasa a capturar el aviso, así que tiene que seguir siendo clickeable. */
    .product-detail .btn-add-cart:disabled { opacity: 1; cursor: pointer; pointer-events: auto; }
    /* El handoff fija 12.5px como piso del cuerpo de texto ("no bajar de
       ahí"); esta nota estaba en 12. */
    /* "Despachamos hoy" es un argumento de compra, no una nota al pie: en el
       gris más flojo (Lc 59) a 12,5px se perdía con luz de sol. */
    .despacho-nota {
      margin-top: 10px; text-align: center;
      font-size: 13px; font-weight: 500; color: var(--text-2);
    }

    /* Captura de aviso: reemplaza a "Comprar ahora", no se suma */
    .product-detail .stock-alert-block {
      border: 0; background: transparent; padding: 0;
      margin-top: 10px; max-width: none;
    }
    .product-detail .stock-alert-title { display: none; }
    .product-detail .stock-alert-form { gap: 8px; max-width: none; }
    .product-detail .stock-alert-form input[type="email"] {
      height: 52px; border-radius: 12px; padding: 0 14px;
      border: 1px solid var(--border-input);
    }
    .product-detail .stock-alert-form button {
      height: 52px; padding: 0 20px; border-radius: 12px;
      background: transparent; color: var(--ink);
      border: 1.5px solid var(--ink); font-size: 14.5px;
    }
    .product-detail .stock-alert-form button:hover:not(:disabled) { background: var(--ink); color: #fff; }
    .alt-sugerencia { margin-top: 10px; font-size: 12.5px; color: var(--text-2); }

    @media (max-width: 480px) {
      .actions { flex-direction: row; }
      .product-detail .btn-add-cart { width: auto; flex: 1 1 auto; }
    }

    /* ── Calculadora de envío ───────────────────────────────── */
    .product-detail .ship-calc {
      max-width: none; margin-top: 24px;
      border: 1px solid var(--pdp-line); border-radius: 14px;
      background: #fff; padding: 18px;
    }
    .product-detail .ship-calc-label {
      display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
      font-size: 13.5px; font-weight: 600; color: var(--text);
    }
    .product-detail .ship-calc-label svg { color: var(--text); }
    .product-detail .ship-calc-form { gap: 8px; }
    .product-detail .ship-cp-input {
      flex: 1 1 auto; height: 48px; padding: 0 14px;
      border: 1px solid var(--border-input); border-radius: 10px;
      font-size: 14px;
    }
    .product-detail .ship-calc-btn {
      height: 48px; padding: 0 20px; border-radius: 10px;
      background: var(--pdp-line-faint); color: var(--text);
      font-size: 13.5px; font-weight: 600; border: 0; cursor: pointer;
      flex-shrink: 0;
    }
    .product-detail .ship-calc-btn:hover:not(:disabled) { background: #E7E7E9; color: var(--text); }
    .product-detail .ship-calc-result:not(:empty) { margin-top: 14px; }
    .product-detail .ship-option {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 12px 0; border-top: 1px solid var(--pdp-line-faint); border-bottom: 0;
    }
    .product-detail .ship-option-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
    .product-detail .ship-option-eta  { margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
    .product-detail .ship-option-cost { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
    .product-detail .ship-option-cost.is-free { color: var(--green); }

    /* Fichas de variante (pocas opciones con foto): mismo anillo inset que
       los swatches del paso 2, sin el salto de 1px del borde. */
    .product-detail .variant-tile {
      border: 0;
      border-radius: 12px;
      box-shadow: inset 0 0 0 1px var(--border);
    }
    .product-detail .variant-tile:hover { box-shadow: inset 0 0 0 1.5px var(--pdp-line-strong); }
    .product-detail .variant-tile.active,
    .product-detail .variant-tile.active:hover { box-shadow: inset 0 0 0 2px var(--ink); }
    .product-detail .variant-tile-img { border-radius: 9px; }
    /* En la columna de compra (527px) seis mosaicos de 80px con 10px de aire
       sumaban 530 y el sexto caía solo a una segunda fila. */
    @media (min-width: 901px) {
      .product-detail .variant-tiles { gap: 8px; }
    }

    /* Un solo CTA en mobile: dos botones compiten por el mismo pulgar, y
       la barra fija de abajo ya repite "Agregar". */
    @media (max-width: 768px) {
      .product-detail .btn-buy-now { display: none; }
    }

    /* ── Barra fija de compra (mobile) ──────────────────────── */
    .sticky-buy-bar {
      background: rgba(255,255,255,.97);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid var(--pdp-line);
      padding: 10px 16px;
      padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
      box-shadow: none;
    }
    .sticky-buy-price { font-size: 16px; font-weight: 600; }
    /* El precio se repite acá para no obligar a volver arriba a confirmarlo */
    .sticky-buy-stock { font-size: 11px; color: var(--pdp-subtle); }
    .sticky-buy-stock.low { color: var(--urgency); font-weight: 600; }
    .sticky-buy-btn {
      flex: 1 1 auto; flex-shrink: 1;
      background: var(--ink); color: #fff;
      min-height: 48px; border-radius: 12px;
      font-size: 14.5px; font-weight: 600;
    }
    .sticky-buy-btn:hover { background: var(--ink-soft); }
    .sticky-buy-nombre { display: none; }

    /* ── Barra fija de compra en escritorio (#4 de la auditoría) ──
       En una notebook "Agregar al carrito" quedaba fuera de la primera
       pantalla en 6 de 8 fichas. La misma barra del celular aparece abajo
       mientras el botón principal no está a la vista (setupStickyBuyBar) y
       se va cuando aparece: nombre, precio, stock y el botón. */
    @media (min-width: 769px) {
      .sticky-buy-bar {
        display: flex; gap: 20px;
        padding: 10px max(24px, calc((100vw - 1136px) / 2));
        padding-bottom: 10px;
      }
      .sticky-buy-info {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center;
      }
      .sticky-buy-nombre {
        display: block; grid-row: 1 / span 2;
        font-size: 14px; font-weight: 600; color: var(--text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .sticky-buy-price, .sticky-buy-stock { grid-column: 2; text-align: right; }
      .sticky-buy-btn { flex: 0 0 auto; padding: 0 32px; }
      body.has-sticky-buy main { padding-bottom: 80px; }
      /* El botón de WhatsApp sube para no quedar encima de "Agregar" */
      body:has(#sticky-buy-bar.visible) #wz-wa-btn { bottom: 92px; }
      /* Las columnas pegajosas acompañan el cambio de alto del header */
      .product-detail, .detalle-col { transition: top .22s ease; }
    }

    /* ── Combo ──────────────────────────────────────────────── */
    .combo-card {
      margin-top: 24px; padding: 16px 18px;
      border: 1px solid var(--pdp-line); background: #fff; border-radius: 14px;
      display: flex; align-items: center; gap: 14px;
    }
    .combo-check {
      width: 24px; height: 24px; flex-shrink: 0; padding: 0;
      border: 0; border-radius: 7px; background: transparent;
      box-shadow: inset 0 0 0 1.5px var(--pdp-line-strong);
      display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .combo-check svg { opacity: 0; }
    .combo-check.on { background: var(--ink); box-shadow: none; }
    .combo-check.on svg { opacity: 1; }
    .combo-thumb {
      width: 46px; height: 46px; flex-shrink: 0;
      border-radius: 10px; background: var(--pdp-sunken); overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .combo-thumb img { width: 100%; height: 100%; object-fit: contain; }
    .combo-txt { flex: 1 1 auto; min-width: 0; }
    .combo-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
    .combo-sub { margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
    .combo-precio { text-align: right; flex-shrink: 0; }
    .combo-precio p { font-size: 15px; font-weight: 600; color: var(--text); }
    .combo-precio-old { font-size: 11.5px; color: var(--pdp-subtle); text-decoration: line-through; font-weight: 400; }

    /* ── Opiniones ──────────────────────────────────────────── */
    .reviews-grid {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      gap: 56px;
      align-items: start;
      padding: 64px 0 0;
      border-top: 1px solid var(--pdp-line);
    }
    .reviews-resumen { display: block; background: none; border: 0; padding: 0; }
    .reviews-resumen h2 {
      font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--text);
    }
    .reviews-nota-row {
      margin-top: 16px; display: flex; align-items: baseline; gap: 10px;
    }
    /* Estaba en 46px, igual de grande que el precio del producto. La
       calificación acompaña, no compite: ninguno de los referentes le da ese
       peso. */
    .reviews-avg-num {
      font-size: 32px; font-weight: 600; letter-spacing: -0.04em;
      color: var(--ink); line-height: 1;
    }
    .reviews-avg-stars { color: var(--star); font-size: 14px; letter-spacing: 2px; }
    .reviews-avg-label { margin-top: 3px; font-size: 12.5px; color: var(--text-2); }

    /* La distribución sale de rating_levels; si la API no la trae, no se dibuja */
    .reviews-dist { margin-top: 18px; display: flex; flex-direction: column; gap: 5px; }
    .dist-row {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; color: var(--text-2);
    }
    .dist-row .dist-n    { width: 10px; text-align: right; }
    .dist-row .dist-star { color: var(--star); }
    .dist-row .dist-riel {
      flex: 1 1 auto; height: 5px; border-radius: 999px;
      background: var(--pdp-line-faint); overflow: hidden;
    }
    .dist-row .dist-fill { display: block; height: 5px; background: var(--text); }
    .dist-row .dist-pct  { width: 28px; }
    .reviews-source { margin-top: 16px; font-size: 12px; color: var(--text-3); font-style: italic; }

    /* Mosaico de fotos de clientes: la primera ocupa 2×2 */
    .reviews-fotos {
      margin-bottom: 20px;
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: 1fr; gap: 8px;
    }
    .reviews-foto {
      position: relative; aspect-ratio: 1/1; overflow: hidden;
      border: 1px solid var(--pdp-line); border-radius: 12px;
      background: var(--bg); cursor: pointer; padding: 0;
    }
    .reviews-fotos.con-hero .reviews-foto:first-child { grid-column: span 2; grid-row: span 2; }
    .reviews-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .reviews-foto-pill {
      position: absolute; right: 10px; top: 10px;
      display: inline-flex; align-items: center; gap: 4px;
      height: 24px; padding: 0 9px; border-radius: 999px;
      background: rgba(255,255,255,.94);
      font-size: 11px; font-weight: 600; color: var(--text);
    }
    .reviews-foto-pill .star { color: var(--star); }
    .reviews-foto--mas {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; background: var(--pdp-sunken);
    }
    .reviews-foto--mas b { font-size: 15px; font-weight: 600; color: var(--text); }
    .reviews-foto--mas span { font-size: 10.5px; color: var(--pdp-subtle); }

    .reviews-todas {
      margin-top: 16px; width: 100%; height: 48px;
      display: flex; align-items: center; justify-content: center;
      background: transparent; border: 1px solid var(--pdp-line-strong);
      border-radius: 12px; font-family: inherit;
      font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer;
    }
    .reviews-todas:hover { background: var(--pdp-sunken); }

    @media (max-width: 900px) {
      .reviews-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
      .reviews-avg-num { font-size: 30px; }
      .reviews-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    /* ── Lo que más repiten ─────────────────────────────────── */
    .reviews-temas {
      margin-bottom: 20px; padding: 16px 18px;
      background: var(--bg); border: 1px solid var(--pdp-line); border-radius: 14px;
    }
    .reviews-temas-titulo {
      font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
      text-transform: uppercase; color: var(--pdp-subtle);
    }
    .reviews-temas-chips { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
    .tema-chip {
      display: inline-flex; align-items: center; gap: 6px;
      height: 34px; padding: 0 12px;
      border: 1px solid var(--pdp-line); border-radius: 999px;
      background: #fff; font-size: 12.5px; color: var(--text);
    }
    /* Los reparos también entran: la mezcla honesta convierte mejor y baja
       las devoluciones. Van en gris, no en rojo — no son una alarma. */
    .tema-chip.neg { color: var(--text-2); }
    .tema-chip b { font-weight: 400; color: var(--pdp-subtle); }

    /* ══ Banda de detalle: opiniones | ficha técnica ══════════
       Un solo bloque a ancho completo, fondo blanco entre dos líneas.
       Las dos columnas van al mismo ancho (1fr / 1fr). */
    .detalle-banda {
      background: #FFFFFF;
      border-top: 1px solid var(--pdp-line);
      border-bottom: 1px solid var(--pdp-line);
    }
    .detalle-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 56px;
      align-items: start;
      padding: 64px 0;
    }
    /* Sin reseñas la ficha técnica ocupa todo: media banda vacía se ve rota */
    .detalle-grid.sin-opiniones { grid-template-columns: minmax(0, 1fr); }
    .detalle-grid.sin-opiniones #opiniones { display: none; }

    /* La sección de opiniones ya no lleva su propio separador: la banda
       entera está delimitada por los bordes de arriba y abajo. */
    .reviews-section {
      margin-top: 0; padding-top: 0; border-top: 0;
    }
    /* "3 opiniones", junto al título, baja hasta acá: sin este margen el
       encabezado quedaba tapado por el header, que es pegajoso desde 769px
       (en el celular se va con el scroll y no hace falta). */
    @media (min-width: 769px) {
      .reviews-section { scroll-margin-top: var(--wz-top-pegado); }
    }
    .opiniones-h2 {
      font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--text);
    }
    /* La nota y las barras van en la MISMA fila, no una debajo de la otra */
    .reviews-nota-row {
      margin-top: 16px;
      display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    }
    .reviews-nota { display: flex; align-items: baseline; gap: 10px; }
    .reviews-dist {
      flex: 1 1 200px; min-width: 180px;
      margin-top: 0; display: flex; flex-direction: column; gap: 5px;
    }
    .reviews-fotos { margin-top: 20px; margin-bottom: 0; }
    .reviews-temas { margin-top: 20px; margin-bottom: 0; }
    .reviews-todas { margin-top: 16px; }
    .reviews-panel { margin-top: 20px; }
    .reviews-panel .reviews-foot .reviews-source { margin: 0; }

    /* Con la mitad del ancho, la ficha técnica va en una sola columna */
    .spec-rows { display: block; }
    .spec-rows > div {
      padding: 10px 0; font-size: 13.5px;
      border-bottom: 1px solid var(--pdp-line-faint);
    }

    @media (max-width: 900px) {
      .detalle-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 0; }
      .reviews-avg-num { font-size: 30px; }
    }

    /* ── Ficha y opiniones debajo de la foto (escritorio) ───────
       La columna de compra mide ~1.000px y la foto ~470: debajo de la foto
       quedaba un hueco blanco de 330 a 770px (medido en 30 fichas reales,
       mediana 500) que la foto pegajosa arrastraba mientras se bajaba.
       Como en MercadoLibre, la ficha técnica y las opiniones suben a esa
       columna (ubicarDetalle las muda desde la banda de abajo) y la que
       acompaña el scroll es la columna de compra. En el celular no cambia
       nada: siguen en la banda, después del botón de compra. */
    .detalle-col { display: none; }
    @media (min-width: 901px) {
      /* Fila 2 flexible: el alto que la columna de compra tenga de más va
         ahí, y la ficha arranca pegada a la foto (con dos filas "auto" el
         sobrante se repartía y abría un hueco entre las dos). */
      .detalle-costado #product-layout { grid-template-rows: auto 1fr; }
      .detalle-costado #product-layout .product-detail { grid-row: 1 / span 2; }
      .detalle-costado .detalle-col { display: block; grid-column: 1; grid-row: 2; min-width: 0; }
      /* Casi siempre esta columna es la más larga y la que acompaña es la de
         compra. Si no (ficha corta, sin opiniones y muchas variantes), la que
         acompaña es ésta, y tampoco queda hueco al final. */
      .detalle-costado .detalle-col { position: sticky; top: var(--wz-top-detalle, var(--wz-top-pegado)); align-self: start; }
      .detalle-costado .gallery-grid { position: static; }
      .detalle-costado #detalle-section { display: none !important; }
      .detalle-costado .pdp-more-note { display: none; }
      .detalle-col .detalle-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
      /* Primero va lo que se ve (estrellas, barras, fotos de clientes) y la
         descripción arranca en 4 líneas en vez de ~11: al costado de la foto
         un bloque largo de texto se leía como una pared. El resto, en "Ver más". */
      .detalle-col .desc-collapsible.collapsed { max-height: 92px; }
      .detalle-col .desc-collapsible.collapsed::after { height: 40px; }
      /* Una sola voz debajo de la foto: "Opiniones" lleva el mismo título que
         Descripción o Especificaciones (era un título de 26px entre filas de
         15px) y cada bloque arranca en una línea fina, como una lista. "Ver
         más" y "Leer las N opiniones" son el mismo link, sin caja. */
      .detalle-col #opiniones { padding-bottom: 26px; }
      .detalle-col .opiniones-h2 {
        height: 60px; display: flex; align-items: center;
        border-top: 1px solid var(--pdp-line);
        font-size: 15px; font-weight: 600; letter-spacing: 0;
      }
      .detalle-col .reviews-nota-row { margin-top: 0; }
      .detalle-col .reviews-todas, .detalle-col .desc-toggle-btn {
        width: fit-content; height: auto; padding: 0; margin-top: 14px;
        justify-content: flex-start; gap: 6px;
        background: none; border: 0; border-radius: 0;
        font-size: 13.5px; font-weight: 600; color: var(--text);
        text-decoration: underline; text-underline-offset: 3px;
      }
      .detalle-col .reviews-todas:hover, .detalle-col .desc-toggle-btn:hover {
        background: none; border: 0; color: var(--text); text-decoration-thickness: 2px;
      }
      /* El carrusel de reseñas sale 32px por los costados para llegar al borde
         de la pantalla; al lado de la columna de compra se metía en el aire
         entre las dos. Acá termina en el borde de la columna. */
      .detalle-col .reviews-list { margin: 0; padding: 0 0 4px; }

      /* La columna de compra acompaña el scroll. --wz-top-compra la calcula
         ajustarTopesColumnas: si no entra en la pantalla se pega por abajo, una
         vez vista entera, en vez de esconder el envío hasta el final. */
      .product-detail { position: sticky; top: var(--wz-top-compra, var(--wz-top-pegado)); align-self: start; }
    }

    /* Sin miniaturas la grilla no puede seguir reservando la columna de 72px:
       el escenario caía ahí y la foto salía del tamaño de una miniatura. */
    .gallery-grid.sin-miniaturas { grid-template-columns: minmax(0, 1fr); }

    /* Nunca una grilla de 4 columnas con una sola card: tres cuartos de hueco
       blanco en el lugar de mayor intención de compra se lee como página rota. */
    .carousel-track.pocos-1, .carousel-track.pocos-2, .carousel-track.pocos-3,
    .recent-strip.pocos-1, .recent-strip.pocos-2, .recent-strip.pocos-3 {
      overflow-x: visible;
    }
    /* Antes, con 1-3 ítems las tarjetas de relacionados se ensanchaban a
       302 o 373px para no dejar la fila a medio llenar. El efecto secundario
       era peor que el problema: "Completá tu…" mostraba tarjetas de 272px y
       justo abajo "También te puede interesar" las mostraba de 373px. Se
       mantienen en el ancho de la grilla y quedan alineadas a la izquierda,
       que es lo que muestra el diseño (grilla de 4, celdas vacías si sobran). */
    /* Con pocos ítems las flechas del carrusel no tienen a dónde llevar */
    .carousel-wrap.sin-flechas .carousel-arrow { display: none; }


    /* ── Preguntas de compradores (respondidas en ML) ── */
    .preguntas { margin-top: 28px; }
    .preguntas[hidden] { display: none; }
    .pregunta { padding: 12px 0; border-top: 1px solid var(--pdp-line, var(--border)); }
    .pregunta.oculta { display: none; }
    .pregunta-q { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.45; }
    .pregunta-a { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
    .pregunta-f { color: var(--text-3); font-size: 12px; white-space: nowrap; }
    .preguntas-mas { margin-top: 6px; background: none; border: 0; padding: 8px 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
    .preguntas-pie { margin: 10px 0 0; font-size: 13px; color: var(--text-2); }
    .preguntas-pie a { color: var(--text); font-weight: 600; }