/* MiratechSpA — Ficha de producto (Producto.html) */

.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); padding: var(--space-5) 0; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-navy); }
.crumbs .sep { width: 13px; height: 13px; color: var(--text-subtle); }
.crumbs .cur { color: var(--text-strong); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }

/* padding solo vertical: el lateral lo pone .wrap (padding:0 28px / 0 20px en móvil).
   Antes 'padding: 30px 0 64px' reseteaba a 0 los lados y el contenido tocaba el borde. */
.pd-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-8); padding-top: var(--space-6); padding-bottom: var(--space-9); align-items: start; }
/* min-width:0 evita que una imagen ancha impida encoger la columna del grid
   (los grid items traen min-width:auto por defecto y se desbordan en móvil). */
.pd-layout > * { min-width: 0; }

/* ----- gallery: la columna izquierda es solo imagen (la info vive a la derecha) ----- */
.pd-gallery { display: flex; flex-direction: column; gap: var(--space-3); }
/* Fila con scroll horizontal, arrastrable (mouse/touch) cuando hay más
   miniaturas de las que caben — nunca hace wrap a una segunda fila. */
.pd-thumbs {
  display: flex; gap: var(--space-2); flex-wrap: nowrap;
  overflow-x: auto; scroll-snap-type: x proximity; cursor: grab;
  scrollbar-width: none;
}
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-thumbs.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.pd-thumb {
  width: 84px; height: 84px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-subtle);
  background: var(--surface-sunken); display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  overflow: hidden; padding: 0; flex: none; scroll-snap-align: start;
}
.pd-thumb:hover { border-color: var(--steel-400); transform: translateY(-1px); }
.pd-thumb.active { border-color: var(--brand-navy); box-shadow: 0 0 0 1px var(--brand-navy); }
.pd-thumb .lucide, .pd-thumb i { width: 20px; height: 20px; color: var(--steel-500); }
/* contain igual que la imagen principal, para que la miniatura muestre exactamente el
   mismo encuadre que se verá en grande. Fondo blanco (no el gris hundido del botón):
   así el margen propio de la foto se funde con el recuadro en vez de dibujar un
   cuadrado claro dentro de uno gris. */
.pd-thumb img {
  width: 100%; height: 100%; object-fit: contain;
  display: block; background: var(--surface-card);
}
/* Sin padding, a diferencia de la imagen grande: en 84px cada píxel cuenta, y quitarle
   un 6% dejaba el contenido de la foto demasiado chico para reconocerlo. El aire lo
   aporta el propio contain sobre una foto que no es cuadrada. */
.pd-thumb:has(img) { background: var(--surface-card); }

.pd-gallery-main {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-xl); border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  display: grid; place-items: center; position: relative; overflow: hidden;
  /* El aire lo pone el contenedor, no la imagen: muchas fotos vienen recortadas al
     ras del producto y sin este margen tocan los bordes de la caja. Va en el padre
     para que el object-fit de la <img> siga midiendo sobre el espacio ya reducido. */
  padding: 6%; cursor: zoom-in;
}
/* Sin foto: degradado de marca detrás del ícono placeholder. */
.pd-gallery-main:not(:has(img)) { background: linear-gradient(155deg, var(--marine-50), var(--steel-50)); }
/* contain, no cover: la foto se ve completa aunque no sea cuadrada. El aire lo pone
   el padding del contenedor (un padding aquí desbordaría la img al 100%). */
.pd-gallery-main img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease-out); }
.pd-gallery-main:hover img { transform: scale(1.015); }
.pd-gallery-main .lucide, .pd-gallery-main > i { width: 140px; height: 140px; color: var(--steel-500); stroke-width: 1.2; }
.pd-gallery-main .pd-badge { position: absolute; top: var(--space-4); left: var(--space-4); }
.pd-zoom-hint {
  position: absolute; bottom: var(--space-4); right: var(--space-4); width: 38px; height: 38px; border-radius: var(--radius-pill);
  background: rgba(17,42,61,.55); color: #fff; display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pd-gallery-main:hover .pd-zoom-hint { background: rgba(17,42,61,.75); transform: scale(1.06); }
.pd-zoom-hint .lucide, .pd-zoom-hint i { width: 18px; height: 18px; }

@media (max-width: 560px) {
  .pd-thumb { width: 72px; height: 72px; }
}

/* ----- lightbox de zoom: la imagen ocupa toda la pantalla; en desktop se
   acerca con los botones +/-, en móvil con pellizco (dos dedos) y se arrastra
   con un dedo cuando está ampliada. ----- */
.img-lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(17,42,61,.9); backdrop-filter: blur(3px);
}
.img-lightbox.open { display: block; }
body.lightbox-abierto { overflow: hidden; }
.img-lightbox-viewport {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; /* el JS maneja pinch/drag a mano, sin gestos nativos del navegador de por medio */
}
.img-lightbox-viewport img {
  max-width: 92vw; max-height: 88vh; border-radius: var(--radius-md); box-shadow: var(--shadow-xl);
  transform-origin: center center; user-select: none; -webkit-user-drag: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.img-lightbox-viewport.is-panning img { transition: none; }
.img-lightbox-viewport.is-zoomed img { cursor: grab; }
.img-lightbox-viewport.is-zoomed.is-panning img { cursor: grabbing; }
.img-lightbox-close {
  position: absolute; top: 22px; right: 22px; z-index: 1; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(17,42,61,.85); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); transition: background 120ms; cursor: pointer;
}
.img-lightbox-close:hover { background: var(--brand-navy); }
.img-lightbox-close .lucide, .img-lightbox-close i { width: 20px; height: 20px; }

.img-lightbox-zoom {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 1;
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--radius-pill);
  background: rgba(17,42,61,.85); box-shadow: var(--shadow-md);
}
.img-lightbox-zoom button {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; cursor: pointer; transition: background 120ms;
}
.img-lightbox-zoom button:hover { background: var(--brand-navy); }
.img-lightbox-zoom button .lucide, .img-lightbox-zoom button i { width: 16px; height: 16px; }
.img-lightbox-zoom span { min-width: 42px; text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); color: #fff; }

@media (max-width: 640px) {
  .img-lightbox-zoom { display: none; } /* en móvil el zoom es por pellizco, sin botones */
}

/* ----- info panel: cabecera + compra + specs + envío, todo a la derecha ----- */
.pd-info { display: flex; flex-direction: column; gap: var(--space-5); }

/* Cabecera compacta: marca y SKU son metadatos discretos, el nombre manda. */
.pd-head { display: flex; flex-direction: column; gap: 2px; }
.pd-brand { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--steel-600); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--fw-semibold); }
.pd-title { font-size: var(--fs-2xl); font-weight: var(--fw-extra); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 2px 0; }
.pd-sku { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-subtle); }

/* ----- tarjeta de compra: el foco de la página ----- */
.pd-buy-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  padding: var(--space-5); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: var(--space-4);
}

.pd-stock { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.pd-stock .dot { width: 7px; height: 7px; border-radius: 50%; }
.pd-stock.st-in { background: var(--success-soft); color: var(--green-600); } .pd-stock.st-in .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(46,158,107,.18); }
.pd-stock.st-low { background: var(--warning-soft); color: var(--amber-600); } .pd-stock.st-low .dot { background: var(--warning); }
.pd-stock.st-out { background: var(--slate-100); color: var(--text-subtle); } .pd-stock.st-out .dot { background: var(--slate-400); }
.pd-stock-count { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 4px; }

.pd-price-block { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pd-price { font-family: var(--font-mono); font-size: clamp(30px, 4vw, 38px); font-weight: var(--fw-extra); color: var(--brand-navy); letter-spacing: var(--ls-tight); line-height: 1; }
.pd-iva { font-size: var(--fs-xs); color: var(--text-subtle); }

.pd-presentacion { display: grid; gap: 8px; }
.pd-presentacion-lbl { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-body); }
.pd-presentacion-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-presentacion-opt {
  padding: 8px 15px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-default);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pd-presentacion-opt:hover { border-color: var(--brand-steel); }
.pd-presentacion-opt.active { border-color: var(--brand-navy); background: var(--surface-brand-soft); color: var(--brand-navy); font-weight: var(--fw-semibold); }

/* El botón es el elemento más llamativo de la card: tamaño y sombra propia. */
/* Cantidad + botón de agregar, en una fila (el componente .cantidad vive en store.css). */
.pd-buy { display: flex; align-items: stretch; gap: 10px; }
.pd-buy .pd-add-btn { flex: 1 1 auto; min-width: 0; }

.pd-add-btn { width: 100%; font-size: var(--fs-md); font-weight: var(--fw-bold); padding: 16px; box-shadow: var(--shadow-md); }
.pd-add-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.pd-assurances { display: grid; gap: 10px; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.pd-note { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); }
.pd-note-ico { flex: none; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--surface-accent-soft); color: var(--steel-600); display: grid; place-items: center; }
.pd-note-ico .lucide, .pd-note-ico i { width: 14px; height: 14px; }

/* ----- ficha técnica: grid de iconos, dos columnas cuando hay espacio ----- */
.pd-specs-side {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.pd-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); }
.pd-spec-item { display: flex; align-items: flex-start; gap: 10px; }
.pd-spec-item .lucide, .pd-spec-item > i { width: 17px; height: 17px; color: var(--steel-500); flex: none; margin-top: 2px; }
.pd-spec-item .k { display: block; font-size: var(--fs-2xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.pd-spec-item .v { display: block; font-size: var(--fs-sm); color: var(--text-strong); font-weight: var(--fw-semibold); margin-top: 1px; }

@media (max-width: 420px) {
  .pd-specs-grid { grid-template-columns: 1fr; }
}

/* ----- envío y devoluciones: acordeón nativo (<details>), compacto por defecto ----- */
.pd-ship-block {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 0 var(--space-5);
}
.pd-ship-block summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 0; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong);
}
.pd-ship-block summary::-webkit-details-marker { display: none; }
.pd-ship-block summary span { display: flex; align-items: center; gap: 9px; }
.pd-ship-block summary span .lucide, .pd-ship-block summary span > i { width: 17px; height: 17px; color: var(--steel-600); }
.pd-ship-chevron { width: 17px; height: 17px; color: var(--text-subtle); transition: transform var(--dur-base) var(--ease-out); }
.pd-ship-block[open] .pd-ship-chevron { transform: rotate(180deg); }
.pd-ship-list { list-style: none; margin: 0; padding: 0 0 var(--space-4); display: grid; gap: 10px; font-size: var(--fs-sm); color: var(--text-body); border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
.pd-ship-list li { display: flex; gap: 10px; align-items: flex-start; }
.pd-ship-list li .lucide, .pd-ship-list li i { width: 15px; height: 15px; color: var(--steel-600); margin-top: 2px; flex: none; }

/* ----- specs (tabla reusada en la sección ancha "Especificaciones" del fabricante) ----- */
.pd-specs { display: grid; gap: 0; }
.pd-specs .row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.pd-specs .row:last-child { border-bottom: none; }
.pd-specs .k { color: var(--text-muted); }
.pd-specs .v { color: var(--text-strong); font-weight: var(--fw-semibold); text-align: right; }
.pd-specs--ancho { max-width: 640px; }

@media (max-width: 880px) {
  .pd-layout { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-6); }
  .pd-buy-card { padding: var(--space-4); }
}

/* ===== Descripción + Especificaciones (sección ancha, estilo ficha extendida) ===== */
.pd-desc-section { padding: 48px 0; }
.pd-desc-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 24px; }
.pd-desc-tabs .pd-tab { position: relative; padding: 12px 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); background: none; border: none; cursor: pointer; }
.pd-desc-tabs .pd-tab.active { color: var(--text-strong); font-weight: var(--fw-bold); }
.pd-desc-tabs .pd-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand-navy); border-radius: 2px; }
.pd-desc-panel { display: none; font-size: var(--fs-sm); color: var(--text-body); line-height: var(--lh-relaxed); }
.pd-desc-panel.active { display: block; }

.pd-desc-rich { overflow-wrap: break-word; word-break: break-word; }
.pd-desc-rich p { margin-bottom: 12px; }
.pd-desc-rich h1, .pd-desc-rich h2, .pd-desc-rich h3, .pd-desc-rich h4 { overflow-wrap: break-word; word-break: break-word; }
.pd-desc-rich ul, .pd-desc-rich ol { margin: 12px 0 12px 22px; }
.pd-desc-rich ul { list-style: disc; }
.pd-desc-rich ol { list-style: decimal; }
.pd-desc-rich li { margin-bottom: 4px; }
.pd-desc-rich a { color: var(--text-link); text-decoration: underline; }
.pd-desc-rich strong { font-weight: var(--fw-bold); color: var(--text-strong); }
.pd-desc-rich img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
.pd-desc-rich table { max-width: 100%; display: block; overflow-x: auto; }

/* ===== Productos destacados (carrusel) ===== */
.rel-section { padding: 48px 0 80px; margin-top: 24px; border-top: 1px solid var(--border-subtle); background: var(--surface-page); }
.rel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.rel-title .eyebrow { margin-bottom: 12px; }
.rel-head h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--fw-extra); letter-spacing: var(--ls-tight); }
.rel-nav { display: flex; gap: 8px; }
.rel-arrow {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--border-default); background: var(--surface-card);
  color: var(--text-body); cursor: pointer; transition: border-color 120ms, color 120ms, background 120ms;
}
.rel-arrow:hover { border-color: var(--steel-400); color: var(--brand-navy); background: var(--surface-sunken); }
.rel-arrow i { width: 18px; height: 18px; }

/* Track con scroll horizontal: caben tantas cards como permita el ancho.
   overflow-x:hidden bloquea el arrastre manual (dedo/rueda) para que la única
   forma de navegar sea con las flechas — el scroll sigue existiendo para que
   scrollBy() (usado por los botones) funcione, solo no es interactivo a mano.
   scroll-snap deja cada salto de flecha encajado en una card. */
.rel-track {
  display: flex; gap: 16px; overflow-x: hidden; scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
/* Techo 265px (no 280): con el límite de 8 productos por sección y .wrap en su
   ancho máximo (1200px, útil 1144px), 4 cards a 280px + 3 gaps de 16px suman
   1168px — 24px más de lo que cabe. Un exceso mínimo así no activa .rel-fits
   (exige que quepan TODAS) y deja la 4ª card cortada a medio camino en vez de
   mostrarse completa o quedar fuera. A 265px, 4 cards + gaps caben siempre. */
.rel-card { flex: 0 0 clamp(220px, 24vw, 265px); scroll-snap-align: start; }
.rel-card:last-child { scroll-snap-align: end; }

/* Cuando todas las cards caben (.rel-fits, lo marca el JS): sin flechas, centradas
   y sin scrollbar — así no se ve un carrusel a medias con 2 productos. */
.rel-fits .rel-nav { display: none; }
.rel-fits .rel-track { justify-content: center; overflow-x: visible; }

@media (max-width: 560px) {
  .rel-card { flex-basis: 100%; }
  .rel-head h2 { font-size: 20px; }
}

/* ===== Productos similares: mismo carrusel que Destacados, va justo después
   del panel superior (sin el borde/fondo que separa secciones intermedias). ===== */
.rel-section--similares { margin-top: 0; border-top: none; background: none; padding: 48px 0 0; }

@media (max-width: 880px) {
  .rel-section--similares { padding-top: var(--space-6); }
}