/* ==========================================================================
   RN.MATES . Página de producto individual (single product)
   Hoja propia del agente "single-product". NO toca theme.css.
   Reutiliza tokens y clases rn-* del design system; solo agrega lo necesario
   para el layout de producto: breadcrumb, galería double-bezel, sumario sticky,
   variaciones, cantidad + add-to-cart, tabs/acordeón, tira de confianza,
   relacionados y up-sells.
   Mobile-first. Light-only.
   ========================================================================== */

/* ============================ 1. WRAPPER / LAYOUT ====================== */
.rn-single {
  padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(3rem, 7vw, 6rem);
}

/* El wrapper estándar de WooCommerce (woocommerce-page) no debe limitar el ancho:
   usamos .rn-container interno. */
.rn-single__inner {
  /* hereda padding/ancho de .rn-container */
}

.rn-single__layout {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .rn-single__layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

/* ============================ 2. BREADCRUMB ============================ */
/* WooCommerce imprime .woocommerce-breadcrumb vía woocommerce_breadcrumb. */
.woocommerce-breadcrumb {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-bottom: clamp(1rem, 3vw, 1.75rem);
  font-size: var(--fs-sm);
  color: var(--c-tinta-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
}
.woocommerce-breadcrumb a {
  color: var(--c-tinta-2);
}
.woocommerce-breadcrumb a:hover {
  color: var(--c-acento);
}

/* ============================ 3. GALERÍA ============================== */
.rn-single__gallery {
  position: relative;
}

.rn-gallery {
  position: relative;
}

/* Double-bezel: bandeja + placa con radios concéntricos (igual que .rn-bezel). */
.rn-gallery__bezel {
  padding: 0.5rem;
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--c-tinta) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-tinta) 8%, transparent);
  box-shadow: var(--sh-float);
}
.rn-gallery__core {
  position: relative;
  border-radius: calc(var(--r-xl) - 0.5rem);
  overflow: hidden;
  background: var(--c-crema-2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

/* El figure es el contenedor que controla el flexslider de WooCommerce. */
.rn-gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
}
.rn-gallery .woocommerce-product-gallery__image,
.rn-gallery .woocommerce-product-gallery__image--placeholder {
  aspect-ratio: 4 / 5;
}
.rn-gallery .woocommerce-product-gallery__image a,
.rn-gallery .woocommerce-product-gallery__image--placeholder {
  display: block;
  width: 100%;
  height: 100%;
}
.rn-gallery .woocommerce-product-gallery__image img,
.rn-gallery .woocommerce-product-gallery__image--placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botón de zoom/lightbox de WooCommerce (trigger). */
.rn-gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--c-crema);
  border: 1px solid var(--c-linea);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  color: var(--c-cuero-700);
  text-indent: 0;
  font-size: 1.1rem;
  transition: color var(--tr), background var(--tr), transform var(--tr);
}
.rn-gallery .woocommerce-product-gallery__trigger:hover {
  color: var(--c-acento);
  transform: translateY(-1px);
}

/* Miniaturas (flex-control-thumbs que arma WooCommerce, o el partial rn). */
.rn-gallery .flex-control-thumbs,
.rn-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}
.rn-gallery .flex-control-thumbs li {
  margin: 0;
  list-style: none;
}
.rn-gallery .flex-control-thumbs img,
.rn-gallery__thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--c-linea);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity var(--tr), border-color var(--tr), transform var(--tr);
}
.rn-gallery .flex-control-thumbs img:hover,
.rn-gallery__thumbs img:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.rn-gallery .flex-control-thumbs img.flex-active,
.rn-gallery .flex-control-thumbs .flex-active img {
  opacity: 1;
  border-color: var(--c-verde-600);
}
/* Botones-miniatura de la galería propia del tema (reset + estado activo). */
.rn-gallery__thumb {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--r-md);
}
.rn-gallery__thumb img {
  display: block;
}
.rn-gallery__thumb.is-active img {
  opacity: 1;
  border-color: var(--c-verde-600);
}
.rn-gallery__thumb:focus-visible {
  outline: 2px solid var(--c-verde-600);
  outline-offset: 2px;
}
.rn-gallery__thumb:focus-visible img {
  opacity: 1;
}

/* Sale flash sobre la galería. */
.rn-single__sale {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

/* ============================ 4. SUMARIO (sticky) ===================== */
.rn-single__summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 900px) {
  .rn-single__summary {
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
  }
}

.rn-single__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--c-verde-900);
  margin: 0;
}

.rn-single__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
/* wc_get_rating_html imprime .star-rating; lo adaptamos al look rn-stars. */
.rn-single__rating .star-rating,
.rn-single__rating .woocommerce-product-rating__stars {
  font-size: 1rem;
  color: var(--c-acento);
}
.rn-single__rating-link {
  font-size: var(--fs-sm);
  color: var(--c-tinta-3);
}
.rn-single__rating-link:hover {
  color: var(--c-acento);
}

.rn-single__price {
  margin: 0;
}
.rn-single__price .amount,
.rn-single__price ins .amount {
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--c-tinta);
}
.rn-single__price ins {
  text-decoration: none;
}
.rn-single__price del,
.rn-single__price del .amount {
  color: var(--c-tinta-3);
  font-size: 1.05rem;
  font-weight: 400;
}

.rn-single__excerpt {
  color: var(--c-tinta-2);
  line-height: var(--lh-body);
}
.rn-single__excerpt p {
  max-width: 60ch;
}
.rn-single__excerpt ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}
.rn-single__excerpt li {
  margin-bottom: 0.25rem;
}

/* Disponibilidad / stock. */
.rn-single .stock {
  font-size: var(--fs-sm);
  font-weight: 500;
}
.rn-single .stock.in-stock {
  color: var(--c-ok);
}
.rn-single .stock.out-of-stock,
.rn-single .stock.available-on-backorder {
  color: var(--c-alerta);
}

/* ============================ 5. CARRITO / CANTIDAD ================== */
.rn-single__cart {
  margin: var(--sp-2) 0 0;
}
.rn-single__cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}
.rn-single__cart-row .rn-qty {
  flex: none;
}
.rn-single__cart-row .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 12rem;
}

/* Stepper de cantidad (.rn-qty viene del design system; afinamos botones). */
.rn-single .rn-qty {
  height: 100%;
  min-height: 52px;
}
.rn-single .rn-qty__btn {
  width: 46px;
  display: grid;
  place-items: center;
  color: var(--c-cuero-700);
  background: transparent;
  border: none;
  transition: color var(--tr), background var(--tr);
}
.rn-single .rn-qty__btn:hover {
  background: var(--c-crema-2);
  color: var(--c-acento);
}
.rn-single .rn-qty__btn svg {
  width: 18px;
  height: 18px;
}
.rn-single .rn-qty input.qty {
  width: 52px;
  height: auto;
  text-align: center;
  border: none;
  background: transparent;
}

/* Add-to-cart estilo button-in-button (hereda .rn-btn del design system). */
.rn-single .single_add_to_cart_button {
  min-height: 52px;
}

/* ============================ 6. VARIACIONES ========================= */
.rn-single__cart--variable {
  display: block;
}
.rn-variations {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-3);
}
.rn-variations__row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--sp-3);
}
.rn-variations__label {
  text-align: left;
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-tinta-2);
}
.rn-variations__label label {
  margin: 0;
}
.rn-variations__value {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.rn-variations__value .rn-select,
.rn-variations__value select {
  flex: 1 1 12rem;
}
.rn-variations__reset {
  font-size: var(--fs-sm);
  color: var(--c-tinta-3);
}
.rn-variations__reset:hover {
  color: var(--c-acento);
}

.rn-single__variation {
  margin-bottom: var(--sp-3);
}
.rn-single__variation .woocommerce-variation-price .price,
.rn-single__variation .price {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-tinta);
}
.rn-single__variation .woocommerce-variation-availability .stock {
  margin-top: 0.35rem;
}
.rn-single__variation-cart {
  margin-top: var(--sp-3);
}
.rn-single__variations-empty {
  color: var(--c-alerta);
  font-weight: 500;
}

/* ============================ 7. META =============================== */
.rn-single__meta {
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-linea);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  color: var(--c-tinta-2);
}
.rn-single__meta-row a {
  color: var(--c-verde-700);
}
.rn-single__meta-row a:hover {
  color: var(--c-acento);
}
.rn-single__meta-label {
  font-weight: 500;
  color: var(--c-tinta-3);
}

/* ============================ 8. TIRA DE CONFIANZA ================== */
.rn-single__trust {
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-linea);
}
.rn-single__trust .rn-chip {
  font-size: var(--fs-sm);
}

/* ============================ 9. TABS / ACORDEÓN =================== */
.rn-single__extras {
  margin-top: clamp(2.5rem, 6vw, 5rem);
}

.rn-tabs {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.rn-tabs__heading {
  font-size: var(--fs-h2);
  margin-bottom: clamp(1rem, 3vw, 1.75rem);
}
.rn-tabs__list {
  border-top: 1px solid var(--c-linea);
}
.rn-tabs__item {
  border-bottom: 1px solid var(--c-linea);
}
.rn-tabs__title {
  margin: 0;
  font-size: 1rem;
}
.rn-tabs__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0.25rem;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-verde-900);
  cursor: pointer;
  transition: color var(--tr);
}
.rn-tabs__trigger:hover {
  color: var(--c-acento);
}
.rn-tabs__chevron {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-pill);
  background: var(--c-crema-2);
  color: var(--c-cuero-700);
  transition: transform var(--tr), background var(--tr), color var(--tr);
}
.rn-tabs__chevron svg {
  width: 18px;
  height: 18px;
}
.rn-tabs__trigger[aria-expanded="true"] .rn-tabs__chevron {
  transform: rotate(180deg);
  background: var(--c-verde-100);
  color: var(--c-verde-800);
}

/* Panel: por defecto visible (sin JS); el JS lo colapsa progresivamente. */
.rn-tabs__panel {
  padding: 0 0.25rem 1.5rem;
  color: var(--c-tinta-2);
  line-height: var(--lh-body);
}
.rn-tabs__panel > :first-child {
  margin-top: 0;
}
.rn-tabs__panel h2,
.rn-tabs__panel h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
}
.rn-tabs__panel p {
  max-width: 70ch;
}

/* Estado colapsado cuando el JS toma control (data-rn-accordion activo). */
[data-rn-accordion].is-enhanced .rn-tabs__panel {
  display: none;
}
[data-rn-accordion].is-enhanced .rn-tabs__panel.is-open {
  display: block;
}

/* Tabla de información adicional (atributos). */
.rn-tabs__panel .woocommerce-product-attributes,
.rn-tabs__panel .shop_attributes {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.rn-tabs__panel .shop_attributes th,
.rn-tabs__panel .shop_attributes td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--c-linea);
  vertical-align: top;
}
.rn-tabs__panel .shop_attributes th {
  width: 32%;
  font-weight: 500;
  color: var(--c-tinta);
  background: var(--c-crema-2);
}
.rn-tabs__panel .shop_attributes td p {
  margin: 0;
}

/* ============================ 10. RESEÑAS ========================== */
.rn-tabs__panel #reviews .commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.rn-tabs__panel #reviews .comment_container {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.rn-tabs__panel #reviews .avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  flex: none;
}
.rn-tabs__panel #reviews .comment-text {
  flex: 1;
  background: var(--c-crema);
  border: 1px solid var(--c-linea);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.rn-tabs__panel #reviews .star-rating {
  color: var(--c-acento);
  margin-bottom: 0.4rem;
}
.rn-tabs__panel #reviews .comment-form,
.rn-tabs__panel #review_form_wrapper {
  margin-top: var(--sp-5);
}
.rn-tabs__panel #reviews .comment-form label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-tinta-2);
  margin-bottom: 0.35rem;
}
.rn-tabs__panel #reviews .comment-form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.rn-tabs__panel #reviews .comment-form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--c-crema);
  color: var(--c-tinta);
  border: 1px solid var(--c-arena-2);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.rn-tabs__panel #reviews .comment-form input:focus,
.rn-tabs__panel #reviews .comment-form textarea:focus {
  outline: none;
  border-color: var(--c-verde-600);
  box-shadow: 0 0 0 3px var(--c-verde-100);
}
.rn-tabs__panel #reviews .comment-form .submit,
.rn-tabs__panel #reviews .comment-form [type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  padding: 0.9rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  background: var(--c-verde-600);
  color: var(--c-crema);
  cursor: pointer;
  transition: background var(--tr), transform var(--tr);
}
.rn-tabs__panel #reviews .comment-form [type="submit"]:hover {
  background: var(--c-verde-700);
  transform: translateY(-1px);
}
/* Selector de estrellas para puntuar (lo clickeable en el formulario). */
.rn-tabs__panel #reviews .comment-form-rating { margin-bottom: var(--sp-4); }
.rn-tabs__panel #reviews .comment-form-rating > label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-tinta-2);
  margin-bottom: 0.4rem;
}
.rn-tabs__panel #reviews p.stars a,
.rn-tabs__panel #reviews p.stars a::before { color: var(--c-acento); }

/* ============================ 11. RELACIONADOS / UP-SELLS ========= */
.rn-related,
.rn-upsells {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding-block: 0;
}
.rn-related__head,
.rn-upsells__head {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* WooCommerce envuelve el loop en ul.products (woocommerce_product_loop_start).
   Lo convertimos en la grilla rn de 4 columnas reutilizando .rn-product. */
.rn-related ul.products,
.rn-upsells ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rn-related ul.products::before,
.rn-related ul.products::after,
.rn-upsells ul.products::before,
.rn-upsells ul.products::after {
  content: none;
}
.rn-related ul.products li.product,
.rn-upsells ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  list-style: none;
}

/* ============================ 12. RESPONSIVE FINOS =============== */
@media (max-width: 560px) {
  .rn-single__cart-row .single_add_to_cart_button {
    min-width: 100%;
  }
  .rn-related ul.products,
  .rn-upsells ul.products {
    /* !important para ganarle a .woocommerce ul.products de woo-overrides.css
       (misma especificidad pero carga después). */
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================ 13. REDUCED MOTION ================ */
@media (prefers-reduced-motion: reduce) {
  .rn-tabs__chevron,
  .rn-gallery .flex-control-thumbs img,
  .rn-gallery__thumbs img {
    transition: none;
  }
}