/* SC CORE · PDP layout — matches pdp.jsx */

/* Fix: WooCommerce gallery starts at opacity:0 waiting for JS init. */
.woocommerce-product-gallery {
  opacity: 1 !important;
  transition: none !important;
}

/* ── Main PDP grid: 61/39 split ── */
.sc-pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

/* ── Breadcrumbs ──
   Moved to components.css (shared chrome, critical-inlined on ALL pages).
   pdp.css is deferred on the PLP, so the breadcrumb sizing must not live here
   or it shifts the grid on the PLP when this sheet swaps in. */

/* ── Prev / Next nav ── */
.sc-pdp-prevnext {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--sc-line);
}
.sc-pdp-prevnext__btn {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--sc-ink);
  text-decoration: none;
}
.sc-pdp-prevnext__btn--next {
  flex-direction: row-reverse;
}
.sc-pdp-prevnext__meta {
  display: flex;
  flex-direction: column;
}
.sc-pdp-prevnext__btn--next .sc-pdp-prevnext__meta {
  align-items: flex-end;
}
.sc-pdp-prevnext__label {
  font-family: var(--sc-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
}
.sc-pdp-prevnext__name {
  font-family: var(--sc-font-display);
  font-weight: 600;
}
.sc-pdp-prevnext__shop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--sc-bg);
  border: 1px solid var(--sc-line-2);
  font-family: var(--sc-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-ink-2);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
@media (hover: hover) {.sc-pdp-prevnext__shop:hover {
  background: var(--sc-ink);
  color: var(--sc-bg, #fff);
  border-color: var(--sc-ink);
}}

/* ── Anchor nav (sticky tabs) ──
   top: respeta el header collapsed (sc-h-scrolled) + announce bar para
   que NO se solape con la barra superior cuando el usuario scrollea.
   z-index: 5 < header z-index (80) → si por viewport raro hay overlap,
   el header queda por encima. */
.sc-pdp-anchor-nav {
  position: sticky;
  /* top = altura COLAPSADA (60px) + announce. Cuando el header colapsa
     al scrollear, la barra sticky queda FLUSH contra él, sin gap. La
     barra solo se activa como sticky cuando el usuario ya ha scrolleado
     pasada su posición fuente — momento en el que el header YA está en
     estado colapsado, así que no se solapa con el header full-height. */
  top: calc(var(--sc-announce-h, 32px) + var(--sc-h-scrolled, 60px));
  z-index: 79;  /* justo debajo del header (80) — visible pero no encima */
  background: color-mix(in oklab, var(--sc-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sc-line-2);
  margin: 0 -28px;
  padding: 0 28px;
}
.sc-pdp-anchor-nav__inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  font-family: var(--sc-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  scrollbar-width: none;
}
.sc-pdp-anchor-nav__inner::-webkit-scrollbar {
  display: none;
}
.sc-pdp-anchor-nav__link {
  padding: 16px 14px;
  text-decoration: none;
  white-space: nowrap;
  color: var(--sc-ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
  transition: color 0.15s, border-color 0.15s;
}
@media (hover: hover) {.sc-pdp-anchor-nav__link:hover {
  color: var(--sc-ink);
}}
.sc-pdp-anchor-nav__link.is-active {
  color: var(--sc-ink);
  border-bottom-color: var(--sc-ink);
  font-weight: 700;
}

/* ── PDP content sections shared ── */
.sc-pdp-section {
  padding: 56px 0 40px;
  scroll-margin-top: 130px;
}
.sc-pdp-section + .sc-pdp-section {
  border-top: 1px solid var(--sc-line-2);
}
.sc-pdp-section .sc-eyebrow {
  margin-bottom: 14px;
}
.sc-pdp-section h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 28px;
}
.sc-pdp-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  overflow: hidden;
}

/* ── Related products ── */
.sc-related {
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--sc-line);
  overflow: hidden;
}
.sc-related__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.sc-related__eyebrow {
  font-family: var(--sc-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
  margin-bottom: 8px;
}
.sc-related__title {
  font-family: var(--sc-font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1;
}
.sc-related__arrows {
  display: flex;
  gap: 8px;
}
.sc-related__arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--sc-line-2);
  background: var(--sc-bg);
  color: var(--sc-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.sc-related__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 24px;
}
.sc-related__track::-webkit-scrollbar {
  height: 8px;
}
.sc-related__track::-webkit-scrollbar-thumb {
  background: var(--sc-line-2);
  border-radius: 999px;
}
.sc-related__item {
  scroll-snap-align: start;
}

/* ═══════════════════════════════════════════════════════
   Product description content (sc-premium-*)
   Replaces WPO custom CSS with theme tokens
   ═══════════════════════════════════════════════════════ */

.sc-premium-product-desc,
.sc-premium-product-desc * { box-sizing: border-box; }

.sc-premium-product-desc {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0;
  color: var(--sc-ink);
  font-family: var(--sc-font-body);
}

/* ── Specs card ── */
.sc-premium-specs-card {
  background: var(--sc-bg);
  border: 1px solid var(--sc-line);
  border-radius: 22px;
  padding: 24px;
  margin-bottom: 34px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  overflow: hidden;
}

.sc-premium-specs-header { margin-bottom: 18px; }

.sc-premium-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sc-ink);
  color: var(--sc-bg);
  font-family: var(--sc-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sc-premium-specs-title {
  margin: 0 0 8px !important;
  font-family: var(--sc-font-display);
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: var(--sc-ink);
}

.sc-premium-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 22px;
}

.sc-premium-badges span {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sc-bg-soft, #f6f4ee);
  color: var(--sc-ink);
  font-family: var(--sc-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid var(--sc-line);
}

.sc-premium-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--sc-line);
  border-radius: 16px;
  overflow: hidden;
}

.sc-premium-spec-item {
  padding: 14px 16px;
  background: var(--sc-bg);
  border-bottom: 1px solid var(--sc-line);
}

.sc-premium-spec-item:nth-child(odd) {
  border-right: 1px solid var(--sc-line);
}

.sc-premium-spec-item:nth-child(4n+1),
.sc-premium-spec-item:nth-child(4n+2) {
  background: var(--sc-bg-soft, #f6f4ee);
}

.sc-premium-spec-item span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--sc-font-mono);
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sc-ink-3);
  font-weight: 700;
}

.sc-premium-spec-item strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: var(--sc-ink);
  font-weight: 700;
}

/* ── Content body ── */
.sc-premium-content {
  width: 100%;
  font-size: 15px;
  line-height: 1.75;
  color: var(--sc-ink-2);
}

.sc-premium-content p { margin: 0 0 16px !important; }
.sc-premium-content p:last-child { margin-bottom: 0 !important; }
.sc-premium-content strong { color: var(--sc-ink); font-weight: 700; }

.sc-premium-content a {
  color: var(--sc-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--sc-accent);
}

/* ── Section blocks ── */
.sc-premium-section {
  width: 100%;
  margin-top: 24px;
  padding: 22px;
  border-radius: 18px;
  background: var(--sc-bg);
  border: 1px solid var(--sc-line);
}

.sc-premium-section h3 {
  margin: 0 0 14px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sc-line);
  font-family: var(--sc-font-display);
  font-size: 20px !important;
  line-height: 1.25 !important;
  color: var(--sc-ink);
  font-weight: 700;
}

.sc-premium-section ul,
.sc-premium-section ol { margin: 0 0 16px; padding-left: 22px; }
.sc-premium-section li { margin-bottom: 8px; line-height: 1.65; }

/* ── Trust / FAQ box ── */
.sc-premium-trust-box {
  width: 100%;
  margin-top: 32px;
  padding: 22px;
  border-radius: 18px;
  background: var(--sc-bg-soft, #f6f4ee);
  border: 1px solid var(--sc-line);
}

.sc-premium-trust-box h3 {
  margin: 0 0 10px !important;
  font-family: var(--sc-font-display);
  font-size: 18px !important;
  line-height: 1.3 !important;
  color: var(--sc-ink);
  font-weight: 700;
}

.sc-premium-trust-box p {
  margin: 0 0 12px !important;
  font-size: 14px;
  line-height: 1.65;
}
.sc-premium-trust-box p:last-child { margin-bottom: 0 !important; }

/* ── FAQ pills grid ── */
.sc-faq-pill-grid {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 36px;
}

.sc-faq-pill-grid > h3 {
  text-align: center;
  margin: 0 0 24px !important;
  padding-bottom: 0;
  border-bottom: 0;
  font-family: var(--sc-font-display);
  font-size: 24px !important;
  line-height: 1.25 !important;
  color: var(--sc-ink);
  font-weight: 700;
}

.sc-faq-pill-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sc-faq-pill-item {
  background: var(--sc-bg);
  border: 1px solid var(--sc-line);
  border-radius: 14px;
  padding: 20px 22px;
  min-height: 140px;
}

.sc-faq-pill-item h3 {
  margin: 0 0 10px !important;
  padding-bottom: 0;
  border-bottom: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(15px, 1.1vw, 19px) !important;
  line-height: 1.3 !important;
  color: var(--sc-ink);
  font-weight: 700;
}

.sc-faq-pill-item p {
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sc-ink-2);
}

/* ── Tables in description ── */
.sc-premium-product-desc .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0 0;
  border: 1px solid var(--sc-line);
  border-radius: 12px;
}

.sc-premium-product-desc .table-responsive table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

/* El min-width fuerza scroll horizontal (estrategia "scroll table"). NO debe
   aplicarse a tablas .sc-table-stack, que en móvil se apilan en cards
   (estrategia "stack" de components.css) y deben caber en el contenedor sin
   desbordar. Excluirlas evita la pelea de especificidad en /envios/. */
.sc-premium-product-desc .table-responsive table:not(.sc-table-stack) {
  min-width: 650px;
}

.sc-premium-product-desc .table-responsive th,
.sc-premium-product-desc .table-responsive td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--sc-line);
  font-size: 13px;
  line-height: 1.45;
}

.sc-premium-product-desc .table-responsive th {
  background: var(--sc-bg-soft, #f6f4ee);
  font-family: var(--sc-font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sc-ink-3);
}

.sc-premium-product-desc .table-responsive tr:last-child td {
  border-bottom: 0;
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .sc-pdp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .sc-pdp-tabs {
    grid-template-columns: minmax(0, 1fr);
  }
  .sc-pdp-prevnext {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .sc-pdp-prevnext__btn {
    justify-content: center;
  }
  .sc-pdp-prevnext__shop {
    align-self: center;
  }
  .sc-related__track {
    grid-auto-columns: minmax(46%, 1fr) !important;
    gap: 12px !important;
  }
  .sc-related__arrows {
    display: none !important;
  }

  /* ── Premium desc mobile ── */
  .sc-premium-specs-card { padding: 18px; border-radius: 18px; }
  .sc-premium-specs-title { font-size: 22px !important; }
  .sc-premium-specs-grid { grid-template-columns: 1fr; }
  .sc-premium-spec-item:nth-child(odd) { border-right: 0; }
  .sc-premium-section { padding: 18px; }
  .sc-premium-section h3 { font-size: 18px !important; }
  .sc-premium-trust-box { padding: 18px; }
  .sc-faq-pill-list { grid-template-columns: 1fr; gap: 12px; }
  .sc-faq-pill-item { padding: 16px; min-height: auto; }
}

/* ── PDP mobile spacing: breadcrumb + grid tight ──────────────────
   En móvil eliminamos el wp-block-gap (~32px) heredado por
   `is-layout-flow` entre breadcrumb y grid, y reducimos el
   margin-bottom del breadcrumb. Sin esto, el primer pixel útil
   (imagen del producto) queda a 60px+ del breadcrumb → percepción
   de "espacio en blanco entre el menú y la imagen". */
@media (max-width: 768px) {
  .sc-pdp-main .sc-wrap > * + * {
    margin-block-start: 0;
  }
}