/* ==========================================================================
   Ficha de producto (woocommerce/single-product.php, content-single-product.php)
   Migas, galería, resumen (precio, stock, compra, Frakmenta, meta), tabla de
   variaciones (Woo Variations Table), pestañas (incluidas las de Custom Product
   Tabs), "También te recomendamos" y relacionados.
   Cards y grid: components/product-card.css. Migas: components/breadcrumb.css.
   [box] y [button] de Divi: components/legacy-shortcodes.css.

   Especificidad: WooCommerce y Divi estilizan la ficha con selectores como
   `.woocommerce div.product div.images` (0-3-2) o
   `body.woocommerce div.product .woocommerce-tabs ul.tabs li.active` (0-5-4).
   Acá se parte de `body.byc .product-page` (0-2-1) y se suman clases hasta
   superarlos. !important solo donde Divi, los plugins o el CSS personalizado
   de Divi lo usan, y está comentado.
   ========================================================================== */

/* ---------- Reset dentro de la ficha ----------
   Igual que en la tienda: Divi da padding-bottom a p y h*, y márgenes a las listas.
   `:where(.product-page) p` pesa 0-0-1: le gana a Divi y pierde contra cualquier clase. */
:where(.product-page) :is(h1, h2, h3, h4, p, ul, ol, li, dl, dd) {
  margin: 0;
  padding: 0;
}
:where(.product-page) :is(ul, ol) { list-style: none!important }

.product-page { padding-bottom: var(--section-space); }

.product-page__breadcrumb { padding-block: 24px; }

/* ==========================================================================
   Layout: galería | resumen
   ========================================================================== */
.product-page__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding-top: 16px;
}

/* La galería acompaña el scroll mientras se lee un resumen largo */
.product-page__gallery {
  position: sticky;
  top: calc(var(--header-height-compact) + 24px);
}

/* ==========================================================================
   Galería nativa de WooCommerce (FlexSlider + PhotoSwipe)
   Contenedor cuadrado con la imagen en object-fit: contain: las fotos del sitio
   tienen tamaños distintos (555×347, 600×600, 500×500…) y así todas ocupan el
   mismo espacio. Mismo tratamiento que la card: fondo gris y multiply.
   ========================================================================== */
body.byc .product-page .woocommerce-product-gallery.images {
  container: product-gallery / inline-size;
  position: relative;
  float: none;
  width: 100%;
  margin: 0;
}

body.byc .product-page .woocommerce-product-gallery.images .woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
}

body.byc .product-page .woocommerce-product-gallery.images :is(.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder) {
  background: var(--color-media);
}

body.byc .product-page .woocommerce-product-gallery.images :is(.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder) img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 8%;
  object-fit: contain;
  mix-blend-mode: multiply;
  box-shadow: none;
}

body.byc .product-page .woocommerce-product-gallery.images .woocommerce-product-gallery__image a {
  display: block;
  cursor: zoom-in;
}

/* ---------- Flechas (directionNav de FlexSlider) ----------
   Abajo a la derecha de la imagen principal: 100cqi es el ancho de la galería,
   que es también el alto de la imagen (cuadrada). */
body.byc .product-page .woocommerce-product-gallery.images .flex-direction-nav {
  position: absolute;
  top: calc(100cqi - 56px);
  right: 12px;
  z-index: 2;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.byc .product-page .woocommerce-product-gallery.images .flex-direction-nav li {
  margin: 0;
  padding: 0;
}

/* El texto ("Imagen anterior") queda para lectores de pantalla; se ve el chevron */
body.byc .product-page .woocommerce-product-gallery.images .flex-direction-nav a {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  background: var(--color-white);
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition);
}
body.byc .product-page .woocommerce-product-gallery.images .flex-direction-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  background: var(--color-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}
body.byc .product-page .woocommerce-product-gallery.images .flex-direction-nav .flex-next::before { transform: scaleX(-1); }

body.byc .product-page .woocommerce-product-gallery.images .flex-direction-nav a:hover {
  border-color: var(--color-ink);
  background: var(--color-ink);
}
body.byc .product-page .woocommerce-product-gallery.images .flex-direction-nav a:hover::before { background: var(--color-white); }

body.byc .product-page .woocommerce-product-gallery.images .flex-direction-nav a:focus-visible { outline-offset: -4px; }

/* Primera / última imagen (sin loop) */
body.byc .product-page .woocommerce-product-gallery.images .flex-direction-nav .flex-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- Miniaturas (controlNav de FlexSlider) ---------- */
body.byc .product-page .woocommerce-product-gallery.images .flex-control-nav.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

body.byc .product-page .woocommerce-product-gallery.images .flex-control-nav.flex-control-thumbs li {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  background: var(--color-media);
}

body.byc .product-page .woocommerce-product-gallery.images .flex-control-nav.flex-control-thumbs li img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  padding: 6%;
  border: 1px solid transparent;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 1; /* WooCommerce atenúa las inactivas: se marca la activa con borde */
  cursor: pointer;
  transition: border-color var(--transition);
}
body.byc .product-page .woocommerce-product-gallery.images .flex-control-nav.flex-control-thumbs li img:hover { border-color: var(--color-line-strong); }
body.byc .product-page .woocommerce-product-gallery.images .flex-control-nav.flex-control-thumbs li img.flex-active { border-color: var(--color-ink); }
body.byc .product-page .woocommerce-product-gallery.images .flex-control-nav.flex-control-thumbs li img:focus-visible { outline-offset: 2px; }

/* ---------- Badge de oferta y botón "Ampliar" ----------
   El badge (span.onsale) toma top/left y colores de woocommerce.css. */
.product-page__gallery .onsale {
  position: absolute;
  z-index: 3;
}

.product-page__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  background: var(--color-white);
}

/* ==========================================================================
   Resumen
   ========================================================================== */
body.byc .product-page .summary.entry-summary {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.product-summary__eyebrow { margin-bottom: 12px; }

body.byc .product-page .summary .product_title {
  margin: 0 0 20px;
  padding: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2cqi, var(--fs-xl));
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
}

body.byc .product-page .summary .woocommerce-product-rating { margin: 0 0 16px; }

/* ---------- Precio ----------
   Se mantiene p.price con los importes como hijos directos: Frakmenta lee el precio
   del primer `p.price > .woocommerce-Price-amount > bdi` de la página. */
body.byc .product-page .summary p.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 28px;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-lg)!important;
  font-weight: 600;
  line-height: 1.2;
}

body.byc .product-page .summary p.price span {
  color: inherit;
  font-size: inherit;
}

body.byc .product-page .summary p.price del {
  color: var(--color-graphite);
  font-size: var(--fs-md);
  font-weight: 400;
}

body.byc .product-page .summary p.price ins {
  background: none;
  color: var(--color-ink);
  text-decoration: none;
}

/* "IVA INCLUIDO" (sufijo de precio de WooCommerce) */
body.byc .product-page .summary p.price .woocommerce-price-suffix {
  color: var(--color-graphite);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ---------- "Opciones disponibles" (Woo Variations Table, productos variables) ---------- */
body.byc .product-page .summary .available-options-btn { margin: 0 0 28px; }
body.byc .product-page .summary .available-options-btn .button { width: 100%; }

/* ---------- Descripción corta ---------- */
body.byc .product-page .summary .woocommerce-product-details__short-description {
  margin: 0 0 28px;
  color: var(--color-ink-soft);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.product-page .woocommerce-product-details__short-description > * + * { margin-top: 0.75em; }

.product-page .woocommerce-product-details__short-description li {
  position: relative;
  padding-left: 20px;
}
.product-page .woocommerce-product-details__short-description li + li { margin-top: 0.35em; }
.product-page .woocommerce-product-details__short-description ul > li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 2px;
  width: 5px;
  height: 5px;
  background: var(--color-ink);
}
.product-page .woocommerce-product-details__short-description ol {
  padding-left: 1.25em;
  list-style: decimal;
}
.product-page .woocommerce-product-details__short-description ol > li { padding-left: 0; }

/* Logos de marca insertados en la descripción corta */
.product-page .woocommerce-product-details__short-description img {
  display: block;
  width: auto;
  max-height: 40px;
}

/* ---------- Stock (p.stock de WooCommerce) ---------- */
body.byc .product-page .summary .stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 12px;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.byc .product-page .summary .stock::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
}
body.byc .product-page .summary .stock.available-on-backorder::before { background: var(--color-peach-strong); }
body.byc .product-page .summary .stock.out-of-stock { color: var(--color-danger); }
body.byc .product-page .summary .stock.out-of-stock::before { background: var(--color-danger); }

/* ---------- Formulario de compra (productos simples) ---------- */
body.byc .product-page .summary form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
}

/* Clearfix de WooCommerce: en un flex serían ítems vacíos que suman gap */
body.byc .product-page .summary form.cart::before,
body.byc .product-page .summary form.cart::after { display: none; }

/* !important: Divi fija ese margen con !important */
body.byc .product-page .summary form.cart div.quantity {
  float: none;
  margin: 0 !important;
}

body.byc .product-page .summary form.cart .single_add_to_cart_button {
  flex: 1 1 220px;
  float: none;
}

/* ---------- Frakmenta ----------
   Su JS inserta el simulador (.col-img-payment) justo después de form.cart y, según el
   importe, un aviso (.frakmenta-advertising). Solo se ajusta el envoltorio y la tipografía:
   el interior lo arma su CSS remoto. */
/* !important: el plugin pone margin-bottom inline en .col-img-payment */
body.byc .product-page .summary .col-img-payment {
  margin: 0 0 24px !important;
  padding: 8px!important;
  border: 1px solid var(--color-line);
  background: var(--color-white);
}

body.byc .product-page .summary :is(.col-img-payment, .frakmenta-advertising),
body.byc .product-page .summary :is(.col-img-payment, .frakmenta-advertising) :is(div, span, label, select, td) {
  font-family: var(--font-sans);
  margin: 0!important;
}

body.byc .product-page .summary .col-img-payment .fk-select-plazo {
  width: auto;
  min-height: 0;
  padding: 2px 6px;
  border: 1px solid var(--color-line-strong);
  border-radius: 0;
}

body.byc .product-page .summary .col-img-payment a { color: var(--color-ink); }

body.byc .product-page .summary .frakmenta-advertising {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 24px;
  color: var(--color-graphite);
  font-size: var(--fs-sm);
}
body.byc .product-page .summary .frakmenta-advertising img {
  width: auto;
  height: 18px;
}

/* ---------- Meta: referencia, categorías y etiquetas (single-product/meta.php) ---------- */
body.byc .product-page .summary .product_meta {
  margin: 32px 0 0;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}

.product-meta__list {
  display: grid;
  gap: 16px;
}

.product-meta__row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px 16px;
  align-items: baseline;
}

.product-meta__label {
  color: var(--color-graphite);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.product-meta__value {
  font-variant-numeric: tabular-nums;
}

.product-meta__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.byc .product-page .product-meta__chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
body.byc .product-page a.product-meta__chip:hover {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

/* Lo que otros plugins agreguen en woocommerce_product_meta_end (p. ej. la marca) */
body.byc .product-page .product_meta > :is(span, p, div:not(.product-meta__list)) {
  display: block;
  margin-top: 16px;
}

/* ==========================================================================
   Debajo del resumen, a ancho completo
   ========================================================================== */
/* body.byc + 3 clases: le gana a los márgenes de Divi y Woo en tabs/upsells/relacionados
   (p. ej. `body.woocommerce .woocommerce-tabs { margin: 30px 0 45px }`). */
.product-page__details { margin-top: var(--section-space); }
body.byc .product-page .product-page__details > * + * { margin-top: var(--section-space); }

/* Títulos de sección (tabla de variaciones, upsells, relacionados): como .section-head */
body.byc .product-page :is(.variations-table h3.available-title, .up-sells > h2, .related > h2) {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0 0 40px;
  padding: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.05;
}
body.byc .product-page :is(.variations-table h3.available-title, .up-sells > h2, .related > h2)::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

/* ==========================================================================
   Tabla de variaciones (Woo Variations Table)
   Componente Svelte que se arma en el navegador dentro de #woo-variations-table-component:
   filtros (.variation-filters), table.variations con data-title en cada celda, cantidad y
   botón por fila. Su CSS usa `#variations …` (1-1-2): acá `body.byc #variations …`.
   ========================================================================== */
body.byc .product-page .variations-table {
  clear: none;
  margin-bottom: 0;
  /* Lo usa el botón "Opciones disponibles" (assets/js/product.js) */
  scroll-margin-top: calc(var(--header-height-compact) + 24px);
}
body.byc .product-page .variations-table:focus { outline: none; }

/* ---------- Filtros y buscador ---------- */
body.byc #variations .variation-filters { margin: 0 0 24px; }

body.byc #variations .variation-filters .filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}

body.byc #variations .variation-filters .filter {
  display: flex;
  flex: 0 1 240px;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

body.byc #variations .variation-filters .filter label {
  display: block;
  margin: 0;
  color: var(--color-graphite);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

body.byc #variations .variation-filters :is(input, select) {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-line-strong);
  border-radius: 0;
  background-color: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}
body.byc #variations .variation-filters select {
  padding-right: 36px;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
body.byc #variations .variation-filters :is(input, select):hover { border-color: var(--color-graphite); }

/* ---------- Tabla ---------- */
body.byc #variations table.variations {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}

body.byc #variations table.variations th {
  min-width: 0;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--color-line-strong);
  background: none;
  color: var(--color-graphite);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
body.byc #variations table.variations th.active { color: var(--color-ink); font-weight: 600; }

/* Flechas de orden: triángulos del plugin, con el color del texto */
body.byc #variations table.variations th .arrow.asc { border-top-color: currentColor; }
body.byc #variations table.variations th .arrow.dsc { border-bottom-color: currentColor; }

body.byc #variations table.variations td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
  transition: background-color var(--transition);
}
body.byc #variations table.variations tbody tr:hover td { background: var(--color-media); }

/* Miniatura */
body.byc #variations table.variations .item:has(> img) {
  display: inline-flex;
  background: var(--color-media);
}
body.byc #variations table.variations .item img {
  display: block;
  width: 64px;
  height: 64px;
  padding: 4px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

body.byc #variations table.variations .in-stock { color: var(--color-success); font-weight: 600; }
body.byc #variations table.variations .out-of-stock { color: var(--color-danger); font-weight: 600; }

body.byc #variations table.variations .woocommerce-Price-amount { font-weight: 600; }
body.byc #variations table.variations del { color: var(--color-graphite); }
body.byc #variations table.variations ins { text-decoration: none; }
body.byc #variations table.variations .woocommerce-price-suffix {
  display: block;
  color: var(--color-graphite);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.byc #variations table.variations td.quantity form { margin: 0; }
body.byc #variations table.variations input.qty {
  width: 72px;
  min-width: 0;
  height: 44px;
  min-height: 44px;
}

body.byc #variations table.variations :is(th, td).add-to-cart {
  min-width: 0;
  text-align: right;
}
body.byc #variations table.variations td.add-to-cart .button.button {
  min-height: 44px;
  padding: 0 18px;
  white-space: nowrap;
}

/* Fila de "sin resultados" */
body.byc #variations table.variations td[colspan] {
  padding-block: 32px;
  color: var(--color-graphite);
  text-align: center;
}

/* ==========================================================================
   Pestañas (single-product/tabs/tabs.php)
   !important: Divi fija color y padding de los links, y display/borde de los ítems
   en mobile, con !important.
   ========================================================================== */
body.byc .product-page .product-tabs.woocommerce-tabs {
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
}

body.byc .product-page .product-tabs ul.product-tabs__list.wc-tabs {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-line);
  background: none;
  list-style: none;
  scrollbar-width: none;
}
body.byc .product-page .product-tabs ul.product-tabs__list.wc-tabs::-webkit-scrollbar { display: none; }
body.byc .product-page .product-tabs ul.product-tabs__list.wc-tabs::before { display: none; }

body.byc .product-page .product-tabs .product-tabs__list .product-tabs__item {
  position: static;
  display: block !important;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.byc .product-page .product-tabs .product-tabs__list .product-tabs__item::before,
body.byc .product-page .product-tabs .product-tabs__list .product-tabs__item::after { display: none; }

body.byc .product-page .product-tabs .product-tabs__list .product-tabs__item .product-tabs__link {
  display: block !important;
  margin-bottom: -1px;
  padding: 16px 20px 14px !important;
  border-bottom: 2px solid transparent;
  color: var(--color-graphite) !important;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
body.byc .product-page .product-tabs .product-tabs__list .product-tabs__item .product-tabs__link:hover { color: var(--color-ink) !important; }
body.byc .product-page .product-tabs .product-tabs__list .product-tabs__item.active .product-tabs__link {
  border-bottom-color: var(--color-ink);
  color: var(--color-ink) !important;
}
body.byc .product-page .product-tabs .product-tabs__list .product-tabs__item .product-tabs__link:focus-visible { outline-offset: -2px; }

/* ---------- Paneles ---------- */
body.byc .product-page .product-tabs .product-tabs__panel.panel {
  max-width: 880px;
  margin: 0;
  padding: 40px 0 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.7;
}
body.byc .product-page .product-tabs .product-tabs__panel.panel:focus-visible { outline-offset: 8px; }

/* Título que agrega Custom Product Tabs dentro del panel: repite el de la pestaña.
   Queda para lectores de pantalla y conserva su clase (el plugin puede filtrarlo). */
.product-tabs__panel .yikes-custom-woo-tab-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.product-tabs__panel > * + *,
.product-tabs__panel :is(p, ul, ol, table, figure, blockquote) + :is(p, ul, ol, table, figure, blockquote, h2, h3, h4) {
  margin-top: 1em;
}

body.byc .product-page .product-tabs__panel :is(h2, h3, h4) {
  margin-top: 1.5em;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
}
body.byc .product-page .product-tabs__panel h2 { font-size: 2rem; }
body.byc .product-page .product-tabs__panel h3 { font-size: var(--fs-lg); }
body.byc .product-page .product-tabs__panel h4 { font-size: 1.25rem; }
body.byc .product-page .product-tabs__panel > :first-child,
body.byc .product-page .product-tabs__panel > .yikes-custom-woo-tab-title + * { margin-top: 0; }

body.byc .product-page .product-tabs__panel :is(strong, b) { color: var(--color-ink); }

body.byc .product-page .product-tabs__panel a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

body.byc .product-page .product-tabs__panel ul > li {
  position: relative;
  padding-left: 22px;
}
body.byc .product-page .product-tabs__panel ul > li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--color-ink);
}
body.byc .product-page .product-tabs__panel ol {
  padding-left: 1.4em;
  list-style: decimal;
}
body.byc .product-page .product-tabs__panel li + li { margin-top: 0.4em; }

body.byc .product-page .product-tabs__panel img {
  max-width: 100%;
  height: auto;
}

/* Videos embebidos: 16:9 a todo el ancho. Si Divi los envuelve con fitVids
   (.fluid-width-video-wrapper), el alto lo da el envoltorio. */
body.byc .product-page .product-tabs__panel iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
body.byc .product-page .product-tabs__panel .fluid-width-video-wrapper iframe { height: 100%; }

/* ---------- Tablas (descripción, Custom Product Tabs e "Información adicional") ----------
   !important: las tablas pegadas desde el editor traen estilos inline (bordes, fondos,
   anchos, altos) y WooCommerce estiliza table.shop_attributes con sus propios bordes. */
body.byc .product-page .product-tabs__panel table {
  width: 100% !important;
  max-width: 100%;
  margin-inline: 0;
  border: 0 !important;
  border-collapse: collapse;
  border-spacing: 0;
  background: none !important;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

body.byc .product-page .product-tabs__panel table :is(th, td) {
  height: auto !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-line) !important;
  background: none !important;
  color: var(--color-ink);
  font-style: normal;
  text-align: left;
  vertical-align: top;
}

body.byc .product-page .product-tabs__panel table tr:first-child > :is(th, td) {
  border-top: 1px solid var(--color-line-strong) !important;
}

/* Primera columna como etiqueta (ficha técnica de dos columnas) */
body.byc .product-page .product-tabs__panel table :is(th, tr > td:first-child:not(:only-child)) {
  font-weight: 600;
}

body.byc .product-page .product-tabs__panel table thead th {
  color: var(--color-graphite);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

body.byc .product-page .product-tabs__panel table :is(th, td) :is(p, ul, ol) { margin: 0; }

/* "Información adicional" (peso, dimensiones, atributos) */
body.byc .product-page .product-tabs__panel table.shop_attributes th { width: 34%; }
body.byc .product-page .product-tabs__panel table.shop_attributes td a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   "También te recomendamos" y productos relacionados
   El grid y la card son los de la tienda (loop/loop-start.php + content-product.php).
   ========================================================================== */
body.byc .product-page :is(.up-sells, .related) {
  clear: none;
  width: auto;
  margin-bottom: 0;
}

/* Clearfix de WooCommerce (.woocommerce .products ul::before/::after): dentro de un
   grid serían dos celdas vacías. */
body.byc .product-page .products .product-grid::before,
body.byc .product-page .products .product-grid::after {
  content: none;
  display: none;
}

/* Menos productos que columnas: el grid se achica a esa cantidad de columnas, del
   mismo ancho que en el grid de 4, en vez de dejar columnas vacías. */
.product-page .product-grid:has(> li:last-child:nth-child(1)) { grid-template-columns: minmax(0, calc((100% - 72px) / 4)); }
.product-page .product-grid:has(> li:last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, calc((100% - 72px) / 4))); }
.product-page .product-grid:has(> li:last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, calc((100% - 72px) / 4))); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@container site (max-width: 1023px) {
  .product-page__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* Apilada: sin sticky y con un ancho máximo para no agrandar fotos de 500–600 px */
  .product-page__gallery {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }

  .product-page .product-grid:has(> li:last-child:nth-child(1)) { grid-template-columns: minmax(0, calc((100% - 24px) / 2)); }
  .product-page .product-grid:has(> li:last-child:nth-child(n + 2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container site (max-width: 767px) {
  .product-page__breadcrumb { padding-block: 16px; }

  .product-page__main {
    gap: 28px;
    padding-top: 0;
  }

  body.byc .product-page .woocommerce-product-gallery.images .flex-control-nav.flex-control-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .product-meta__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .product-page__details,
  body.byc .product-page .product-page__details > * + * { margin-top: 64px; }

  body.byc .product-page :is(.variations-table h3.available-title, .up-sells > h2, .related > h2) {
    gap: 20px;
    margin-bottom: 28px;
    font-size: 2.125rem;
  }

  body.byc .product-page .product-tabs ul.product-tabs__list.wc-tabs { gap: 24px; }
  body.byc .product-page .product-tabs .product-tabs__panel.panel { padding-top: 28px; }

  /* Tablas anchas: scroll horizontal dentro del panel */
  body.byc .product-page .product-tabs__panel table {
    display: block;
    overflow-x: auto;
  }

  .product-page .product-grid:has(> li:last-child:nth-child(1)) { grid-template-columns: minmax(0, calc((100% - 12px) / 2)); }

  /* ---------- Tabla de variaciones → tarjetas ----------
     Cada fila es una tarjeta: el nombre de la columna sale del data-title de la celda.
     Cantidad y botón comparten la última línea. Pisa el mobile del plugin (media query). */
  body.byc #variations .variation-filters .filter { flex: 1 1 100%; }

  body.byc #variations table.variations,
  body.byc #variations table.variations tbody {
    display: block;
    width: 100%;
  }

  body.byc #variations table.variations thead { display: none; }

  body.byc #variations table.variations tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-line);
  }

  body.byc #variations table.variations td {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: auto;
    max-width: none;
    padding: 6px 0;
    border: 0;
    line-height: 1.4;
    text-align: right;
  }
  body.byc #variations table.variations tbody tr:hover td { background: none; }

  body.byc #variations table.variations td > span { display: block; }

  body.byc #variations table.variations td::before {
    content: attr(data-title);
    display: block;
    flex-shrink: 0;
    width: auto;
    padding: 0;
    color: var(--color-graphite);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-align: left;
    text-transform: uppercase;
  }

  /* Celdas sin título (cantidad, botón, "sin resultados") o con la miniatura */
  body.byc #variations table.variations td:not([data-title])::before,
  body.byc #variations table.variations td:has(> .item > img)::before { display: none; }
  body.byc #variations table.variations td:has(> .item > img) { justify-content: flex-start; }

  /* Celdas vacías (p. ej. inventario sin gestionar) */
  body.byc #variations table.variations td:has(> .item:empty) { display: none; }

  body.byc #variations table.variations td.quantity,
  body.byc #variations table.variations td.add-to-cart {
    display: block;
    width: auto;
    padding-top: 12px;
    text-align: left;
  }
  body.byc #variations table.variations td.quantity { grid-column: 1; }
  body.byc #variations table.variations td.add-to-cart { grid-column: 2; }
  /* Sin stock no hay cantidad: el botón ocupa la fila */
  body.byc #variations table.variations td.quantity:empty { display: none; }
  body.byc #variations table.variations td.quantity:empty + td.add-to-cart { grid-column: 1 / -1; }

  body.byc #variations table.variations input.qty { width: 100%; }
  body.byc #variations table.variations td.add-to-cart .button.button { width: 100%; }

  body.byc #variations table.variations td[colspan] {
    display: block;
    text-align: center;
  }
}