/*
  Estilos específicos del detalle de producto (/new/detalle.php)
  Complementa mix-products.css (fuente Proxima Nova ya importada allí).
  Todo bajo .pod-* para no interferir con el catálogo.
*/

/* ── Página ── */
.pod-page {
  width: min(1200px, 96vw);
  margin: 0 auto;
  padding: 0 0 40px;
}

.pod-top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  padding: 10px 0 4px;
}

.pod-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #3483fa;
  text-decoration: none;
  padding: 4px 0;
  line-height: 1;
  transition: color .15s;
}

.pod-back-btn:hover {
  color: #1a5cbf;
  text-decoration: underline;
}

/* ── Título en mobile: arriba de la imagen ── */
.pod-title-mobile {
  display: none;
}

@media (max-width: 768px) {
  .pod-title-mobile {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    margin: 16px 0 16px;
  }
}

/* ── Layout dos columnas ── */
.pod-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  width: 100%;
}

@media (max-width: 768px) {
  .pod-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ── Columna imagen ── */
.pod-col-img {
  position: sticky;
  top: 80px;
}

@media (max-width: 768px) {
  .pod-col-img {
    position: static;
  }
}

/* 4:3 horizontal fijo en todos los productos (pedido del cliente: "que no
   haya una más grande que otra") -- antes era 1:1, y en productos con una
   sola imagen (sin miniaturas) se estiraba a la altura de la columna de
   precios, dando un tamaño distinto por producto. */
.pod-img-main {
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pod-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 12px;
  box-sizing: border-box;
}

.pod-img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #ccc;
}

.pod-img-ph .material-icons {
  font-size: 120px;
}

/* ── Columna info ── */
.pod-col-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}

.pod-title {
  display: block;
  width: auto;
  text-align: left;
  font-size: 22px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
  margin: 0;
}

@media (max-width: 768px) {
  .pod-title {
    display: none;
  }
}

.pod-iva-note {
  margin: 0;
  font-size: 12px;
  color: #999;
  font-weight: 400;
  text-align: left;
}

/* ── Precios ── */
/* Antes era flex column: .po-mix-box/.po-mix-price-row (mix-products.css) usan
   "grid-template-columns: subgrid" para poner la etiqueta (MINORISTA/MAYORISTA)
   a la derecha del precio -- eso solo funciona si el contenedor de arriba es un
   grid con columnas definidas (como .po-mix-stack en products.php). Sin eso el
   subgrid no tiene de qué heredar y todo cae apilado en una sola columna, que es
   lo que pasaba acá. Mismo grid que .po-mix-stack para que quede igual. */
.pod-prices {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 0;
  align-items: start;
}

.pod-price-box {
  border: 1px solid #ededee;
  border-radius: 8px;
  overflow: hidden;
  background: #f7f9fb;
}

/* Precio principal más grande en el detalle */
.pod-price-main {
  font-size: 30px !important;
}

@media (max-width: 480px) {
  .pod-price-main {
    font-size: 24px !important;
  }
}

/* mix-products.css le da min-height:93px a la caja MAYORISTA sin "Precio
   por caja" (ej. venta por unidad simple) para que quede pareja con las
   vecinas en el grid de productos (products.php). Acá en el detalle hay un
   solo producto, no hay vecinas que alinear, y ese mínimo solo deja un
   hueco vacío abajo -- se saca únicamente en mobile (en desktop no se
   notaba/no lo pidieron) y solo dentro de .pod-prices, sin tocar el grid. */
@media (max-width: 768px) {
  .pod-prices .po-mix-box[data-price-box="may"]:not(:has(.po-mix-caja-row)) {
    min-height: 0;
  }
}

/* ── Acciones ── */
.pod-actions {
  border: 1px solid #ededee;
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.pod-actions .po-mix-actions-top {
  align-items: flex-end;
}

/* Botones de acción más grandes en el detalle */
.pod-btn-add {
  height: 44px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}

.pod-btn-remove {
  height: 40px !important;
  border-radius: 8px !important;
}

/* ── Descripción larga ── */
.pod-desc {
  border-top: 1px solid #ededee;
  margin-top: 16px;
  padding-top: 16px;
  text-align: left;
}

/* Ancho completo (debajo de las 2 columnas, arriba de "Productos
   relacionados") en vez de angosta dentro de la columna de la imagen. */
.pod-desc--full {
  width: 100%;
  margin-top: 32px;
  padding-top: 24px;
}

/* Alinear "Productos relacionados" (carrusel compartido con el home, ancho
   min(1600px,95vw) por defecto) al mismo ancho que el resto del detalle
   (min(1200px,96vw)) -- si no, en pantallas grandes el carrusel queda más
   ancho y desalineado del bloque "Lo que tenés que saber" de arriba. */
.pod-page + section .po-i2-products-wrap {
  width: min(1200px, 96vw);
}

.pod-desc-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px;
  text-align: left;
}

.pod-desc-body {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  font-weight: 400;
  text-align: left;
}

/* ── Reajuste de fila "Por caja" dentro de los boxes del detalle ── */
.pod-prices .po-mix-box .po-mix-caja-row {
  padding: 8px 12px 10px;
}

/* Caja MAYORISTA: casi sin padding-top para que quede pegada al precio de
   arriba (ver ajuste de po-mix-price-row más abajo, mismo criterio). */
.pod-prices .po-mix-box[data-price-box="may"] .po-mix-caja-row {
  padding-top: 2px;
}

/* ── Fila de precio dentro del detalle: más padding ── */
.pod-prices .po-mix-box .po-mix-price-row {
  padding: 12px 12px 10px;
}

/* Caja MAYORISTA: sin padding-bottom para que "Precio por caja (X u)" quede
   pegado al precio de arriba (misma idea que el ajuste de products.php, pero
   con más especificidad acá porque si no la regla de arriba la pisa). */
.pod-prices .po-mix-box[data-price-box="may"] .po-mix-price-row {
  padding-bottom: 0;
}

/* ── Encabezado "Productos relacionados" ── */
.po-related-header {
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px dashed #d8d8d8;
}
.po-related-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ml-text, #1a1a1a);
}
.po-related-sub {
  margin: 0;
  font-size: 14px;
  color: var(--ml-text2, #767676);
}