/* SleepHome — página de producto. Requiere tokens.css + components.css.
   Solo en is_product(). Fuente: SleepHome Final.dc.html (Producto 2b). */

.shm-pdp { padding-top: 8px; }

/* ============ Breadcrumb ============ */

.shm-pdp__crumbs {
  font-size: 13px;
  color: var(--color-text-muted);
  padding-top: 26px;
  margin-bottom: 26px;
}

.shm-pdp__crumbs a {
  color: var(--color-brand-strong);
  text-decoration: none;
}

.shm-pdp__crumbs a:hover { color: var(--color-brand-stronger); }

/* ============ Bloque superior: galería | compra ============ */

.shm-pdp__top {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 0;
  margin-bottom: 0 !important; /* si no, colapsa con el margin-top de detalles */
}

/* --- Galería (Woo) --- */
/* Woo core mete .woocommerce div.product div.images{width:48%;float:left} —
   su layout de 2 columnas por defecto. Lo anulamos: la galería llena su
   columna del grid. !important porque el selector de Woo tiene más peso. */
.shm-pdp__gallery .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0;
}

/* Igual para el panel de compra, por si Woo le aplica el 48%/float. */
.shm-pdp__buy { width: 100%; }

/* flexslider (slider de Woo) mete estilos inline y viewport propio.
   !important para imponer el layout del diseño sobre él. */
.shm-pdp__gallery .woocommerce-product-gallery__image,
.shm-pdp__gallery .woocommerce-product-gallery__wrapper {
  margin: 0 !important;
  height: auto !important;
}

.shm-pdp__gallery .woocommerce-product-gallery__image img {
  border-radius: 12px;
  border: 1px solid var(--color-border); /* marco visible con fotos sobre blanco */
  aspect-ratio: 1;
  object-fit: cover;
  width: 100% !important;
  height: 100% !important;
}

/* Miniaturas: 4 columnas iguales, apaisadas (84px alto), como el diseño.
   flex-basis 25% le gana al width inline que fija flexslider al li (en flex,
   flex-basis manda sobre width). flex-wrap deja 4 por fila. */
.shm-pdp__gallery .flex-control-thumbs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  list-style: none;
  width: 100% !important;
}

.shm-pdp__gallery .flex-control-thumbs li {
  position: relative;
  flex: 0 0 calc(25% - 9px); /* 4 por fila con gap 12px */
  height: 84px !important;
  width: auto !important;
  margin: 0 !important;
  min-width: 0;
}

.shm-pdp__gallery .flex-control-thumbs img {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid var(--color-border); /* marco visible en miniaturas inactivas */
  object-fit: cover;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s ease;
}

/* Activa/hover: borde teal completo. Border (no outline) para que no se recorte
   arriba/abajo y se vea el marco en los 4 lados. */
.shm-pdp__gallery .flex-control-thumbs img.flex-active,
.shm-pdp__gallery .flex-control-thumbs img:hover {
  opacity: 1;
  border: 2px solid var(--color-brand-strong);
}

/* --- Panel de compra sticky --- */
.shm-pdp__panel {
  position: sticky;
  top: 16px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px;
}

.shm-pdp__panel .shm-pdp__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 30px;
  margin: 0 0 8px;
  color: var(--color-text);
  line-height: 1.15;
}

.shm-pdp__price { margin: 0 0 18px; }

/* p.price trae margen de Kadence → el hueco título-precio. Se anula. */
.shm-pdp__price .price {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 23px;
  color: var(--color-price);
}

.shm-pdp__price .price del { color: var(--color-text-muted); font-size: .8em; margin-right: 8px; }
.shm-pdp__price .price ins { text-decoration: none; color: var(--color-sale); }

/* --- Formulario de variación --- */
.shm-pdp__panel .variations {
  width: 100%;
  margin: 0 !important;
  border: 0;
}

/* margin-bottom solo entre atributos (varios tr); el último pega con los botones */
.shm-pdp__panel .variations tr { display: block; margin-bottom: 14px; }
.shm-pdp__panel .variations tr:last-child { margin-bottom: 0 !important; }

.shm-pdp__panel .variations th.label {
  display: block;
  text-align: left;
  padding: 0 0 10px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.shm-pdp__panel .variations td.value { display: block; padding: 0; }

/* Select nativo (si el plugin de swatches no está configurado) */
.shm-pdp__panel .variations select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-input);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Chips del plugin Variation Swatches (ul.variable-items-wrapper > li.variable-item).
   Especificidad alta para ganarle al stylesheet propio del plugin. */
.shm-pdp__panel ul.variable-items-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.shm-pdp__panel ul.variable-items-wrapper li.variable-item {
  margin: 0;
  padding: 9px 16px;
  border: 1px solid var(--color-border-input);
  border-radius: 6px;
  font-size: 13px;
  color: #555;
  background: transparent; /* deja ver el crema del panel, como el diseño */
  cursor: pointer;
  box-shadow: none;
  width: auto;
  height: auto;
  min-height: 0;
  min-width: 0;
  line-height: 1.2;
}

/* Contenedores internos del plugin: solo pasan el texto. */
.shm-pdp__panel ul.variable-items-wrapper li.variable-item .variable-item-contents,
.shm-pdp__panel ul.variable-items-wrapper li.variable-item .variable-item-span {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.shm-pdp__panel ul.variable-items-wrapper li.variable-item.selected,
.shm-pdp__panel ul.variable-items-wrapper li.variable-item:hover {
  border-color: var(--color-brand-strong);
  background: var(--color-brand-strong);
  color: var(--color-text-on-brand);
}

/* Variación no disponible (combinación agotada): atenuada y tachada. */
.shm-pdp__panel ul.variable-items-wrapper li.variable-item.disabled,
.shm-pdp__panel ul.variable-items-wrapper li.variable-item[disabled] {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.shm-pdp__panel .reset_variations {
  display: inline-block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 6px;
}

/* Anular TODO margen interno del bloque de variación (Woo mete varios que
   no logro ubicar uno a uno). El gap chips→contenido va SOLO en el wrap. */
.shm-pdp__panel .single_variation_wrap,
.shm-pdp__panel .single_variation_wrap * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.shm-pdp__panel .single_variation_wrap { margin-top: 18px !important; }

/* El precio/stock solo existe al elegir tamaño → su margen no afecta cuando
   está vacío. Da el respiro precio→botones únicamente cuando hay precio. */
.shm-pdp__panel .single_variation .price {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-price);
  margin-bottom: 12px !important;
}
.shm-pdp__panel .single_variation .woocommerce-variation-availability {
  font-size: 13px;
  color: var(--color-text-tertiary);
}

/* --- Cantidad + botones --- */
.shm-pdp__panel .woocommerce-variation-add-to-cart {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Producto simple (sin variaciones): la fila de compra pega igual. */
.shm-pdp__panel form.cart:not(.variations_form) {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 18px 0 0;
}

.shm-pdp__panel .quantity input.qty {
  width: 64px;
  padding: 12px 8px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-input);
  font-size: 15px;
  text-align: center;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Botón "Añadir al carrito" (primario teal). .button en el selector para
   ganarle al padding de botón de Kadence/Woo. */
.shm-pdp__panel .single_add_to_cart_button.button {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 0;
  border-radius: var(--radius-btn);
  padding: 14px 30px !important; /* Kadence fija min-height + padding horizontal */
  min-height: 0 !important;
  height: auto !important; /* Kadence fija height:40px y se come el padding vertical */
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1.2 !important; /* Kadence fuerza line-height 40px → texto se sale */
  cursor: pointer;
  transition: background .2s ease;
}

.shm-pdp__panel .single_add_to_cart_button:hover { background: var(--btn-primary-bg-hover); }

/* Botón "Comprar ahora" (plugin) en dorado. Comparte clase
   .single_add_to_cart_button con Añadir, así que la clase .wc-buy-now-btn
   (más específica aquí) lo pinta de dorado por encima del teal. */
.shm-pdp__panel .wc-buy-now-btn.single_add_to_cart_button {
  background: var(--btn-accent-bg) !important; /* el plugin/Woo fuerza teal en .button.alt */
  color: var(--btn-accent-text) !important;
  border: 0;
}

.shm-pdp__panel .wc-buy-now-btn.single_add_to_cart_button:hover {
  background: var(--btn-accent-bg-hover) !important;
  color: var(--color-text-on-brand) !important;
}

/* Botón deshabilitado (variación sin elegir) — atenuado pero visible. */
.shm-pdp__panel .single_add_to_cart_button.disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* --- WhatsApp --- */
/* El form de Woo no debe arrastrar su margen inferior al WhatsApp. */
.shm-pdp__panel form.variations_form,
.shm-pdp__panel form.cart { margin-bottom: 0 !important; }

/* Aviso "añadido al carrito": va bajo los botones de compra, compacto. */
.shm-pdp__panel .woocommerce-message,
.shm-pdp__panel .woocommerce-error,
.shm-pdp__panel .woocommerce-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: nowrap; /* el botón se queda a la derecha, el texto envuelve solo */
  margin: 14px 0 0 !important;
  padding: 14px 16px !important;
  background: var(--color-bg);
  border: 0;
  border-left: 3px solid var(--color-brand-strong);
  border-radius: var(--radius-input);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.shm-pdp__panel .woocommerce-message::before,
.shm-pdp__panel .woocommerce-error::before,
.shm-pdp__panel .woocommerce-info::before { display: none !important; }

.shm-pdp__panel .woocommerce-message .button {
  order: 2;
  flex: none;
  margin: 0;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: var(--radius-btn);
  white-space: nowrap;
}
.shm-pdp__panel .woocommerce-message .button:hover { background: var(--btn-primary-bg-hover); }

.shm-pdp__wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px; /* gap deliberado a los botones de arriba */
  background: var(--color-whatsapp);
  color: var(--color-text-on-brand);
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  padding: 13px 26px;
  border-radius: var(--radius-btn);
  text-decoration: none;
}

.shm-pdp__wa:hover { opacity: .92; color: var(--color-text-on-brand); }

/* --- Mini sellos --- */
.shm-pdp__seals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-input);
}

.shm-pdp__seal { text-align: center; }
.shm-pdp__seal-t { display: block; font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-text); }
.shm-pdp__seal-s { display: block; font-size: 11.5px; color: var(--color-text-tertiary); }

/* ============ Descripción + Información adicional ============ */

.shm-pdp__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 36px !important; /* gap controlado top→detalles (Kadence mete de más) */
  padding-bottom: 40px;
}

.shm-h2--sm {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--color-text);
  margin: 0 0 14px;
}

.shm-pdp__details .shm-pdp__desc ul { margin: 0; padding-left: 18px; }
.shm-pdp__details .shm-pdp__desc,
.shm-pdp__details .shm-pdp__desc li,
.shm-pdp__details .shm-pdp__desc p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-secondary);
  font-weight: var(--fw-light);
}

/* Tabla de información adicional. Selectores con .shop_attributes + tbody y
   !important en bordes para ganarle a las filas punteadas de Woo/Kadence. */
.shm-pdp__info table.shop_attributes {
  width: 100%;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px;
  overflow: hidden;
  /* separate (no collapse): collapse anula el border-radius de la tabla */
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 14px;
}

.shm-pdp__info table.shop_attributes th,
.shm-pdp__info table.shop_attributes td {
  padding: 12px 16px !important;
  text-align: left;
  border: 0 !important;
}

.shm-pdp__info table.shop_attributes th {
  width: 40%;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.shm-pdp__info table.shop_attributes td { color: var(--color-text-secondary); font-style: normal; }

/* Fila alterna: pintar las CELDAS (el td trae fondo blanco de Woo que taparía el tr) */
.shm-pdp__info table.shop_attributes tr:nth-child(even) th,
.shm-pdp__info table.shop_attributes tr:nth-child(even) td {
  background: var(--color-bg-alt) !important;
}
.shm-pdp__info table.shop_attributes tr:nth-child(odd) th,
.shm-pdp__info table.shop_attributes tr:nth-child(odd) td {
  background: var(--color-bg) !important;
}
.shm-pdp__info table.shop_attributes p { margin: 0; }

/* ============ Relacionados ============ */

.shm-pdp__related { padding: 20px 0 60px; }

.shm-pdp__related .related > h2,
.shm-pdp__related h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 26px;
  color: var(--color-text);
  margin: 0 0 26px;
}

.shm-pdp__related ul.products { grid-template-columns: repeat(4, 1fr); }

/* ============ Responsive ============ */

@media (max-width: 900px) {
  .shm-pdp__top { grid-template-columns: 1fr; gap: 28px; }
  .shm-pdp__panel { position: static; }
  .shm-pdp__details { grid-template-columns: 1fr; gap: 28px; }
  .shm-pdp__related ul.products { grid-template-columns: repeat(2, 1fr); }
}