/*
  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: center;
    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;
  }
}

.pod-img-main {
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* En desktop, si no hay descripción larga debajo (la imagen es el único hijo
   de la columna), el cuadrado deja de ser 1:1 fijo y pasa a ocupar el mismo
   alto que la columna de info de la derecha -- antes quedaba mucho más alto
   que el contenido cuando el producto no tenía mucha info (precios cortos,
   sin descripción). Si hay descripción abajo, se deja el 1:1 de siempre
   (ahí "iguales alturas" no tiene sentido, la columna ya la ocupa el texto). */
@media (min-width: 769px) {
  .pod-layout {
    align-items: stretch;
  }

  .pod-col-img > .pod-img-main:only-child {
    aspect-ratio: auto;
    height: 100%;
  }
}

.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;
  }
}

/* ── 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;
}

.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;
}