/**
 * PDP críticos — cargan desde el plugin (no dependen del CSS adicional del tema).
 * Relacionados: 4 en desktop; en ≤921 solo 2 visibles (PHP pide 4 siempre).
 * Móvil: galería más baja + WhatsApp compacto para acercar título/precio al fold.
 */

/* Desktop: columnas alineadas + sticky sin empujar la foto */
@media (min-width: 922px) {
  html body.single-product .papillon-pdp-stage {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 40px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html body.single-product .papillon-pdp-media,
  html body.single-product .papillon-pdp-stage > .papillon-pdp-media {
    position: sticky !important;
    top: var(
      --papillon-pdp-sticky-top,
      calc(var(--papillon-admin-h, 0px) + var(--papillon-promo-h, 0px) + var(--papillon-header-h, 90px))
    ) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: start !important;
  }

  html body.single-product .summary.entry-summary,
  html body.single-product .papillon-pdp-stage > .summary,
  html body.single-product .papillon-pdp-stage > .entry-summary {
    padding-top: 0 !important;
    margin-top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.single-product .woocommerce-product-gallery {
    margin-top: 0 !important;
  }

  /* Foto completa en desktop (sin recorte). Miniaturas siguen abajo. */
  html body.single-product .woocommerce-product-gallery .flex-viewport,
  html body.single-product .woocommerce-product-gallery__wrapper {
    height: auto !important;
    max-height: calc(100dvh - var(--papillon-pdp-sticky-top, 110px) - 5.5rem) !important;
  }

  html body.single-product .woocommerce-product-gallery__image img,
  html body.single-product .woocommerce-product-gallery .flex-viewport img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - var(--papillon-pdp-sticky-top, 110px) - 5.5rem) !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  /* Banner WhatsApp: JS lo pone en el summary, debajo del ATC */
  html body.single-product .summary > .papillon-pdp-whatsapp,
  html body.single-product .entry-summary > .papillon-pdp-whatsapp,
  html body.single-product .papillon-pdp-stage > .summary > .papillon-pdp-whatsapp {
    margin: 16px 0 24px !important;
  }

  /* Miniaturas: fila scrolleable (drag JS + rueda/trackpad) */
  html body.single-product .woocommerce-product-gallery .flex-control-thumbs,
  html body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 12px 0 0 !important;
    padding: 0 2px 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    cursor: grab;
  }

  html body.single-product .woocommerce-product-gallery .flex-control-thumbs.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  html body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 auto !important;
    cursor: pointer;
  }

  html body.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    cursor: pointer;
  }
}

@media (max-width: 921px) {
  html body.single-product section.related ul.products,
  html body.single-product section.related ul.products.columns-4,
  html body.single-product section.related ul.products.columns-3,
  html body.single-product section.related ul.products.columns-2,
  html body.single-product .related.products ul.products,
  html body.single-product .related.products ul.products.columns-4,
  html body.single-product section.upsells ul.products,
  html body.single-product section.upsells ul.products.columns-4,
  html body.woocommerce.single-product .related ul.products,
  html body.woocommerce.single-product .related ul.products.columns-4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.single-product section.related ul.products > li.product:nth-child(n + 3),
  html body.single-product .related.products ul.products > li.product:nth-child(n + 3),
  html body.single-product section.upsells ul.products > li.product:nth-child(n + 3) {
    display: none !important;
  }
}

html body.single-product .papillon-pdp-whatsapp,
html body.single-product a.papillon-pdp-whatsapp {
  margin-bottom: 16px !important;
}

@media (max-width: 921px) {
  html body.single-product #content,
  html body.single-product .site-content,
  html body.single-product .site-content > .ast-container,
  html body.single-product #primary,
  html body.single-product #main,
  html body.single-product .ast-woocommerce-container,
  html body.single-product .ast-article-single {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  html body.single-product .papillon-pdp-stage,
  html body.single-product .papillon-pdp-media {
    margin-top: 0 !important;
  }

  html body.single-product .summary.entry-summary,
  html body.single-product .papillon-pdp-stage > .summary,
  html body.single-product .papillon-pdp-stage > .entry-summary {
    padding-top: 8px !important;
  }

  /* Galería más baja: menos blanco de estudio, título más cerca */
  html body.single-product .woocommerce-product-gallery .flex-viewport,
  html body.single-product .woocommerce-product-gallery__wrapper {
    max-height: min(56vw, 300px) !important;
  }

  html body.single-product .woocommerce-product-gallery__image img,
  html body.single-product .woocommerce-product-gallery .flex-viewport img {
    max-height: min(56vw, 300px) !important;
    object-fit: cover !important;
    object-position: center 28% !important;
  }

  html body.single-product .woocommerce-product-gallery .flex-control-thumbs,
  html body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs {
    margin: 8px 0 0 !important;
    gap: 6px !important;
  }

  html body.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 48px !important;
    height: 48px !important;
  }

  /* WhatsApp compacto (en summary o bajo galería) */
  html body.single-product .papillon-pdp-whatsapp,
  html body.single-product a.papillon-pdp-whatsapp,
  html body.single-product .papillon-pdp-media > .papillon-pdp-whatsapp,
  html body.single-product .summary > .papillon-pdp-whatsapp,
  html body.single-product .entry-summary > .papillon-pdp-whatsapp {
    margin: 10px 0 14px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  html body.single-product .papillon-pdp-whatsapp__text {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  html body.single-product .papillon-pdp-whatsapp__icon {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }

  html body.single-product .papillon-pdp-whatsapp__icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  html body.single-product .summary > .woocommerce-breadcrumb,
  html body.single-product .entry-summary > .woocommerce-breadcrumb,
  html body.single-product nav.woocommerce-breadcrumb {
    margin: 0 0 8px !important;
  }

  html body.single-product .product_title,
  html body.single-product h1.product_title {
    margin: 0 0 8px !important;
  }
}

/* PAP-057 — Leyenda de variantes antes del ATC */
html body.single-product .papillon-variant-hint {
  margin: 0 0 10px !important;
  color: #5c5357 !important;
  font-family: var(--papillon-font, Lato, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

html body.single-product .papillon-variant-hint[hidden] {
  display: none !important;
}

html body.single-product .papillon-variant-hint.is-alert {
  color: #e2007a !important;
  font-weight: 600 !important;
}

html body.single-product form.cart .single_add_to_cart_button.disabled,
html body.single-product form.cart .single_add_to_cart_button:disabled {
  background: #e2007a !important;
  color: #fff !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

.papillon-pdp-sticky-atc .papillon-variant-hint {
  margin: 0 0 8px !important;
  text-align: center !important;
  font-size: 12px !important;
}

/* RF-VAR-LINEA — Ocultar selector de Línea en ficha de producto */
html body.single-product .variations tr:has(label[for*="linea"]),
html body.single-product .variations tr:has(select[name*="linea"]),
html body.single-product .variations tr:has(select[data-attribute_name*="linea"]),
html body.single-product .variations tr:has(.woo-variation-raw-value[data-attribute_name*="linea"]),
html body.single-product .variations tr:has(.variable-items-wrapper[data-attribute_name*="linea"]),
html body.single-product .papillon-attrs-card tr:has([name*="linea"]),
html body.single-product .papillon-attrs-card tr:has(label[for*="linea"]),
html body.single-product .papillon-hidden-linea-row {
  display: none !important;
}

/* PAP-035 / 036 — Oferta + precio tachado + precio actual en una fila.
   Selectores sin depender de .summary (Astra / Elementor a veces lo mueven). */
html body.single-product div.product p.price,
html body.single-product .summary p.price,
html body.single-product .entry-summary p.price,
html body.single-product .woocommerce-variation-price .price,
html body.single-product .papillon-pdp-stage p.price {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px 12px !important;
}

html body.single-product p.price.papillon-price-sale::before,
html body.single-product .summary p.price:has(> del)::before,
html body.single-product .entry-summary p.price:has(> del)::before,
html body.single-product .woocommerce-variation-price .price:has(> del)::before {
  content: "Oferta" !important;
  display: inline-flex !important;
  align-items: center !important;
  order: -1 !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  border: 1px solid #e2007a !important;
  background: #fff5fa !important;
  color: #e2007a !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body.single-product p.price del {
  display: inline !important;
  color: #9a9194 !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-decoration: line-through !important;
  text-decoration-line: line-through !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: #9a9194 !important;
}

html body.single-product p.price del span,
html body.single-product p.price del bdi,
html body.single-product p.price del .amount,
html body.single-product p.price del .woocommerce-Price-amount {
  display: inline !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-decoration: inherit !important;
}

html body.single-product p.price ins,
html body.single-product p.price ins span,
html body.single-product p.price ins bdi,
html body.single-product p.price ins .amount {
  display: inline !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

html body.single-product p.price .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

html body.single-product ul.products p.price {
  flex-direction: column !important;
  align-items: flex-start !important;
}

html body.single-product ul.products p.price::before {
  content: none !important;
  display: none !important;
}

/* -------------------------------------------------------
   Feedback de carga al seleccionar variaciones.
   Se aplica sobre .woocommerce-variation-price (el div que
   WooCommerce rellena con el precio de la variante elegida).
------------------------------------------------------- */
.papillon-price-loading {
  opacity: 0.35 !important;
  transition: opacity 0.18s ease !important;
  pointer-events: none !important;
  position: relative !important;
  min-height: 36px !important;
}

/* Spinner rosa centrado SOBRE el bloque de precio de variante */
.papillon-price-loading::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 22px !important;
  height: 22px !important;
  border: 2.5px solid #e2007a !important;
  border-top-color: transparent !important;
  border-radius: 50% !important;
  animation: papillon-price-spin 0.55s linear infinite !important;
  z-index: 2 !important;
  margin: 0 !important;
}

/* -------------------------------------------------------
   Override del spinner negro nativo de WooCommerce (blockUI).
   Aparece al cargar variaciones por AJAX — lo reemplazamos
   por un spinner rosa igual al del bloque de precio.
------------------------------------------------------- */
.woocommerce .blockUI.blockOverlay::before,
.woocommerce-variation-add-to-cart .blockUI.blockOverlay::before {
  background: none !important;
  background-image: none !important;
  border: 3px solid #e2007a !important;
  border-top-color: transparent !important;
  border-radius: 50% !important;
  width: 1em !important;
  height: 1em !important;
  font-size: 1.4em !important;
  margin-left: -0.5em !important;
  margin-top: -0.5em !important;
  animation: papillon-price-spin 0.55s linear infinite !important;
  color: transparent !important;
}

@keyframes papillon-price-spin {
  to {
    transform: rotate(360deg);
  }
}