/* Ficha de producto */

.pdp__crumbs { font-size: 11px; color: rgba(36,48,41,.6); padding-block: 10px; }
.pdp__crumbs b { color: var(--green); }

/* Cuadrado (no alto fijo) porque las fotos de producto son cuadradas de 1200×1200 y
   con fondo blanco: así la foto llena el recuadro justo. Con el alto fijo de 240px que
   había aquí, en móvil el recuadro salía apaisado, la foto cuadrada se quedaba en medio
   y asomaban dos franjas beige a los lados. El beige solo debe verse cuando NO hay foto. */
.pdp__main { aspect-ratio: 1 / 1; background: linear-gradient(135deg,#e7dcb0,#d8cda0); border-radius: var(--r-lg); display: grid; place-items: center; color: #9a8f63; font-size: 12px; position: relative; overflow: hidden; }
/* La foto se ve entera y centrada dentro del recuadro, sin recortar ni desbordarlo. */
.pdp__main img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pdp__badge:not(:empty) { position: absolute; top: 12px; left: 12px; background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: var(--r-sm); }
/* ── Miniaturas ──
   ESTABAN ROTAS: el recuadro tenía altura fija (54px) pero no había ni overflow:hidden
   ni ninguna regla para el <img> de dentro. La foto se pintaba a tamaño natural y se
   derramaba sobre el resto de la página. */
.pdp__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pdp__thumb {
  width: 64px; height: 64px; flex: 0 0 auto;
  padding: 0; border: 0; cursor: pointer;
  background: var(--card);
  border-radius: var(--r-sm);
  overflow: hidden;                      /* ← lo que faltaba */
  box-shadow: inset 0 0 0 1px rgba(59,91,68,.18);
  transition: box-shadow .12s ease;
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pdp__thumb:hover { box-shadow: inset 0 0 0 2px rgba(59,91,68,.45); }
.pdp__thumb.is-active { box-shadow: inset 0 0 0 2px var(--green); }

/* La imagen principal se puede ampliar: que se note. */
.pdp__main[data-ampliable] { cursor: zoom-in; }
.pdp__zoom {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(255,253,245,.92);
  border-radius: 50%; width: 34px; height: 34px;
  display: grid; place-items: center; font-size: 15px;
  box-shadow: 0 2px 8px rgba(36,48,41,.18);
  pointer-events: none;
}

.pdp__info { padding-top: 18px; }
.pdp__name { font-weight: 600; font-size: var(--fs-h2); margin: 4px 0 10px; }
.pdp__price { display: flex; align-items: baseline; gap: 10px; }
.pdp__price-now { font-family: var(--font-ui); font-weight: 800; color: var(--green); font-size: 30px; letter-spacing: -.01em; }
.pdp__price-was:not(:empty) { font-size: 15px; color: rgba(36,48,41,.68); text-decoration: line-through; }

.pdp__variants { margin-top: 18px; }
.pdp__variants-label { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
/* Segundo grupo en adelante (Talla debajo de Color): separación entre grupos. */
.pdp__opts + .pdp__variants-label { margin-top: 18px; }
/* Valor elegido junto al nombre del atributo ("Color: Pacífico"), como en las tiendas de ropa. */
.pdp__variants-value { font-weight: 500; color: rgba(36,48,41,.65); }
.pdp__variants-value:not(:empty)::before { content: ': '; }
/* Rejilla y no fila: aguanta desde 2 formatos (ocupan todo el ancho) hasta muchos valores,
   que se reparten en filas del mismo tamaño sin desbordar la columna. */
.pdp__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.pdp__opt { text-align: center; padding: 14px 6px; border-radius: var(--r-md); font-size: 16px; font-weight: 700; background: var(--card); box-shadow: inset 0 0 0 1.5px rgba(59,91,68,.2); color: var(--ink); }
.pdp__opt.is-selected { background: var(--green); color: var(--cream); box-shadow: none; }
.pdp__opt small { display: block; font-size: 13px; font-weight: 500; opacity: .8; margin-top: 3px; }

.pdp__mini { display: flex; gap: 8px; margin-top: 16px; }
.pdp__mini div { flex: 1; background: var(--card); border-radius: var(--r-md); padding: 12px 8px; text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.35; box-shadow: var(--shadow-card); }
.pdp__mini b { display: block; font-size: 22px; margin-bottom: 5px; color: var(--green); }

/* ── Acordeón ── */
.pdp__details { margin-top: 16px; padding-bottom: 8px; }
/* Títulos del acordeón en verde de marca y con cuerpo: son los encabezados de la
   información del producto, no letra pequeña. */
.pdp__acc { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(59,91,68,.25); padding: 18px 2px; font-size: 17px; font-weight: 700; color: var(--green); cursor: pointer; }
.pdp__acc-sign { color: var(--green); font-size: 22px; }
/* 16px es el mínimo cómodo de lectura en web; estaba en 13.5px y encima al 70% de
   opacidad, que le comía el contraste. Es el texto que decide una compra
   (composición, análisis, condiciones de envío): tiene que leerse sin esfuerzo. */
.pdp__acc-body { display: none; font-size: 16px; color: rgba(36,48,41,.88); line-height: 1.7; padding: 0 2px 18px; max-width: 68ch; }
.pdp__acc-body.is-open { display: block; }
.pdp__acc-body p { margin-bottom: 10px; }
.pdp__acc-body p:last-child { margin-bottom: 0; }
.pdp__acc-body strong { color: var(--ink); font-weight: 700; }
.pdp__acc-body a { color: var(--green); text-decoration: underline; }

@media (min-width: 768px) {
  .pdp__acc { font-size: 18px; }
  .pdp__acc-body { font-size: 16.5px; }
}

/* ── Cross-sell ── */
.pdp__cross { background: var(--card); padding-block: 18px; margin-top: 8px; }

/* ── Barra de compra fija ── */
.pdp__buybar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--cream); border-top: 2px solid var(--green); padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 -8px 24px rgba(36,48,41,.10); }
.pdp__buybar-price { font-family: var(--font-ui); font-weight: 800; color: var(--green); font-size: 22px; line-height: 1; }
.pdp__buybar-price small { display: block; font-family: var(--font-ui); font-size: 10px; font-weight: 600; color: rgba(36,48,41,.55); }
.pdp__qty { display: flex; align-items: center; background: var(--card); border-radius: var(--r-md); box-shadow: inset 0 0 0 1.5px rgba(59,91,68,.2); }
.pdp__qty button { width: 32px; height: 40px; color: var(--green); font-size: 20px; background: transparent; }
.pdp__qty span { width: 30px; text-align: center; font-weight: 700; }
.pdp__buybar-add { flex: 1; }
.pdp { padding-bottom: 96px; } /* hueco para que la buybar fija no tape contenido */

@media (min-width: 768px) {
  .pdp { padding-bottom: 0; }
  .pdp__crumbs.container, .pdp__top.container { max-width: 1240px; }
  /* El texto largo (descripción, ingredientes) se queda en 820px aunque la página sea
     más ancha: una línea de ~90 caracteres cansa de leer. */
  .pdp__bottom.container { max-width: 820px; }
  /* Dos columnas: galería (izquierda, sticky) + caja de compra (derecha) */
  .pdp__top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  /* min-width:0 — por defecto una columna de grid no baja de su contenido mínimo; sin esto,
     un contenido ancho (muchas variaciones) empuja la columna y descuadra la ficha. */
  .pdp__top > * { min-width: 0; }
  .pdp__gallery { position: sticky; top: 92px; }
  /* La barra de compra deja de ser fija y se integra en la columna derecha */
  .pdp__buybar { position: static; box-shadow: none; border-top: none; border: 1px solid rgba(59,91,68,.15); border-radius: var(--r-lg); margin-top: 18px; }
}

/* Distintivo de oferta sobre el botón de formato (variante rebajada, ej. 15kg -20%) */
.pdp__opt { position: relative; overflow: visible; }
.pdp__opt-off { position: absolute; top: -9px; right: -6px; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 8px; box-shadow: 0 2px 6px rgba(36,48,41,.22); }

/* Banner de oferta 5+1 en la ficha (Bewi Dog 800 g) */
.pdp__promo { margin-top: 14px; background: #fff6e0; color: var(--ink); border: 1.5px dashed var(--gold); border-radius: var(--r-md); padding: 10px 12px; font-size: 14px; font-weight: 600; }
.pdp__promo strong { color: var(--coral); }

/* ── Imagen a pantalla completa (lightbox) ── */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(36,48,41,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }   /* si no, el display:flex se come el hidden */
.lightbox__img {
  max-width: min(92vw, 900px); max-height: 88vh;
  object-fit: contain;
  background: var(--card);
  border-radius: var(--r-md);
}
.lightbox__cerrar {
  position: absolute; top: 16px; right: 20px;
  background: none; border: 0; cursor: pointer;
  color: var(--cream); font-size: 30px; line-height: 1; padding: 6px 10px;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,253,245,.14); border: 0; cursor: pointer;
  color: var(--cream); font-size: 34px; line-height: 1;
  width: 48px; height: 64px; border-radius: var(--r-md);
}
.lightbox__nav:hover { background: rgba(255,253,245,.26); }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
@media (max-width: 599px) {
  .lightbox__nav { width: 40px; height: 54px; font-size: 28px; }
}