/* Estilos propios de la Ficha de Producto — reutiliza variables y clases base de style.css */

.breadcrumb {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 150px 24px 0;
  max-width: 1300px;
  margin-left: auto; margin-right: auto;
  padding: 0 0 40px;
}
.breadcrumb a { color: var(--gray); }
.breadcrumb a:hover { color: var(--black); }
.breadcrumb span { color: var(--black); }

.product-page {
  padding: 0 24px 110px;
  max-width: 1300px;
  margin: 0 auto;
}

.product-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: start;
}

/* Galería */
.gallery-main {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--gray-light);
  margin-bottom: 16px;
}
.gallery-main img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; position: absolute; inset: 0;
  transition: opacity 0.5s ease;
}
.gallery-main img.is-active { opacity: 1; position: relative; }
.gallery-thumbs { display: flex; gap: 12px; }
.gallery-thumb {
  width: 84px; height: 84px; overflow: hidden; cursor: pointer;
  border: 1px solid transparent; opacity: 0.55; transition: opacity 0.25s ease, border-color 0.25s ease;
  padding: 0; background: none;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.is-active { opacity: 1; border-color: var(--black); }
.gallery-thumb:hover { opacity: 1; }

/* Info del producto */
.product-info-tag {
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-dark); display: block; margin-bottom: 10px;
}
.product-info-title {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 500;
  margin-bottom: 14px; line-height: 1.1;
}
.product-info-price {
  font-family: var(--font-sans); font-size: 0.85rem; color: var(--gray);
  padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border);
}

/* Ficha técnica */
.product-specs { margin-bottom: 30px; }
.spec-row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  font-family: var(--font-sans); font-size: 0.82rem;
}
.spec-row dt { color: var(--gray); }
.spec-row dd { color: var(--black); text-align: right; }

/* Variantes */
.variant-group { margin-bottom: 26px; }
.variant-label {
  display: block; font-family: var(--font-sans); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 12px;
}
.variant-options { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-chip {
  padding: 9px 20px; border: 1px solid var(--border); background: none;
  font-family: var(--font-sans); font-size: 0.8rem; color: var(--black);
  cursor: pointer; transition: all 0.2s ease;
}
.variant-chip:hover { border-color: var(--black); }
.variant-chip.is-active { background: var(--black); border-color: var(--black); color: var(--white); }

/* Cantidad + agregar al carrito */
.buy-row { display: flex; gap: 14px; margin-bottom: 32px; }
.qty-stepper {
  display: flex; align-items: center; border: 1px solid var(--border);
}
.qty-stepper button {
  width: 42px; height: 48px; background: none; border: none; cursor: pointer;
  font-size: 1rem; color: var(--black);
}
.qty-stepper button:hover { background: var(--gray-light); }
.qty-stepper span { width: 34px; text-align: center; font-family: var(--font-sans); font-size: 0.85rem; }
.btn-add-cart {
  flex: 1;
  font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--green); color: var(--white); border: none; cursor: pointer;
  transition: background 0.25s ease;
}
.btn-add-cart:hover { background: var(--gold-dark); }

/* Confianza mini */
.trust-mini {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid var(--border);
}
.trust-mini-item {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.03em; color: var(--gray);
}
.trust-mini-item svg { color: var(--black); flex: 0 0 auto; }

/* Acordeón */
.product-accordion { margin-top: 46px; }
.accordion-item { border-top: 1px solid var(--border); }
.accordion-item:last-child { border-bottom: 1px solid var(--border); }
.accordion-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after {
  content: "+"; font-size: 1.1rem; color: var(--gray); transition: transform 0.25s ease;
}
.accordion-item[open] summary::after { content: "–"; }
.accordion-item p {
  font-family: var(--font-display); font-size: 1rem; color: var(--gray);
  line-height: 1.6; padding: 0 0 22px; max-width: 560px;
}

/* También te puede interesar */
.related-section { padding: 100px 24px 0; max-width: 1400px; margin: 0 auto; }

@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* --- Estilos para el formulario nativo de WooCommerce (precio, variaciones, cantidad,
   agregar al carrito) — se usa el formulario real de WooCommerce (no uno propio) para
   que el precio, el stock y las variaciones funcionen de verdad, solo re-vestido con
   los colores/tipografías de la marca. */
.product-info p.price {
  font-family: var(--font-sans); font-size: 1.1rem; color: var(--black);
  padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border);
}
.product-info p.price del { color: var(--gray); opacity: 0.7; margin-right: 10px; }
.product-info p.price ins { text-decoration: none; }

/* display:flex para que el botón "Añadir al carrito" llene el ancho restante junto al
   selector de cantidad — antes el botón tenía ancho automático (según su texto) y
   quedaba más angosto que "Pagar con Caja de Ahorro" debajo, que sí es width:100%. */
.product-info form.cart { margin-bottom: 26px; display: flex; align-items: stretch; gap: 14px; }
.product-info table.variations { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.product-info table.variations tr { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.product-info table.variations th.label {
  text-align: left; font-family: var(--font-sans); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); font-weight: 400;
}
.product-info table.variations td.value select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  font-family: var(--font-sans); font-size: 0.85rem; background: var(--white); color: var(--black);
}
.product-info .woocommerce-variation-price .price { border: none; padding: 0; margin: 0 0 16px; font-size: 1rem; }
.product-info .woocommerce-variation-availability { margin-bottom: 16px; font-family: var(--font-sans); font-size: 0.8rem; }

.product-info .quantity { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
/* Cuando el stock es 1 (piezas únicas, el caso más común en Joyas), WooCommerce oculta
   el selector convirtiéndolo en un input type="hidden" — sin esto, el contenedor vacío
   igual ocupaba espacio en el flex y desalineaba el botón respecto a "Pagar con Caja
   de Ahorro" debajo. */
.product-info .quantity:has(input[type="hidden"]) { display: none; }
.product-info .quantity .qty {
  width: 70px; height: 48px; text-align: center;
  border: 1px solid var(--border); font-family: var(--font-sans); font-size: 0.9rem;
}
/* !important necesario: el propio CSS de WooCommerce (button.alt) tiene la misma
   especificidad y, según el orden de carga, puede ganarle a esta regla — así se
   garantiza que el botón use siempre el verde de marca y no el morado por defecto de WC. */
.product-info button.single_add_to_cart_button {
  font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--green) !important; color: var(--white) !important; border: none; cursor: pointer;
  padding: 0 20px; height: 48px; flex: 1 1 auto; vertical-align: middle; transition: background 0.25s ease;
}
.product-info button.single_add_to_cart_button:hover { background: var(--gold-dark) !important; }
.product-info button.single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; }
.product-info p.stock { font-family: var(--font-sans); font-size: 0.8rem; color: var(--gray); margin-top: 14px; }
.product-info p.stock.out-of-stock { color: #a53030; }

.ca-product-btn { display: block; text-align: center; width: 100%; margin: 14px 0 26px; padding: 13px 0; }

.product-info .bijou-bs-equivalent { display: block; font-family: var(--font-sans); font-size: 0.8rem; color: var(--gray); margin: -14px 0 20px; }
.bijou-divisas-note {
  font-family: var(--font-sans); font-size: 0.78rem; color: var(--gold-dark);
  background: rgba(160,129,80,0.08); border: 1px solid rgba(160,129,80,0.25);
  padding: 8px 14px; margin-bottom: 18px; display: inline-block;
}