/* ================================================================
   TDFM — Layout de ficha de producto con configurador
   Cargado solo en páginas de producto con TDFM activo.
   ================================================================ */

/* ── Página completa ── */
.tdfm-product-page {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Título ── */
.tdfm-product-title {
  display: block;
  width: 100%;
  text-align: center;
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 1.25rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* ── Hero: miniaturas + texto lateral ── */
.tdfm-product-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem 2rem;
  padding: 0 1.25rem 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.tdfm-product-hero__thumbs {
  flex: 0 0 auto;
}

.tdfm-product-hero__aside {
  flex: 1 1 260px;
  min-width: 0;
  text-align: left;
}

.tdfm-product-hero__aside p {
  margin: 0 0 .65rem;
  line-height: 1.45;
}

.tdfm-product-hero__aside .btn {
  margin-top: .25rem;
}

/* ── Galería del hero TDFM ─────────────────────────────────────────────────
   Estructura Panda:
     .images-container
       └── .images-container-0 (flex row)
             ├── .pro_gallery_top_container  → OCULTAR (imagen grande)
             └── .pro_gallery_thumbs_container → MOSTRAR (tira de thumbs)

   Si el producto tiene 1 sola imagen, no existe pro_gallery_thumbs_container.
   En ese caso dejamos la galería principal pero compactada.
   ─────────────────────────────────────────────────────────────────────── */

/* 1. Ocultar galería principal — solo la tira de thumbs es suficiente */
.tdfm-product-hero__thumbs .pro_gallery_top_container {
  display: none !important;
}

/* 2. Forzar layout del wrapper */
.tdfm-product-hero__thumbs .images-container,
.tdfm-product-hero__thumbs .images-container-0 {
  display: block !important;
  width: auto !important;
}

/* 3. Tira de miniaturas visible y en distribución horizontal */
.tdfm-product-hero__thumbs .pro_gallery_thumbs_container {
  display: block !important;
  width: auto !important;
  max-width: 100%;
}

/* 4. Si NO hay tira de thumbs (1 sola imagen): mostrar galería principal compacta */
.tdfm-product-hero__thumbs .images-container-0:not(:has(.pro_gallery_thumbs_container)) .pro_gallery_top_container {
  display: block !important;
  width: 160px !important;
  flex: none !important;
  margin-bottom: 0 !important;
}
.tdfm-product-hero__thumbs .images-container-0:not(:has(.pro_gallery_thumbs_container)) .pro_gallery_top_inner,
.tdfm-product-hero__thumbs .images-container-0:not(:has(.pro_gallery_thumbs_container)) .pro_gallery_top {
  width: 160px !important;
  height: 160px !important;
}
.tdfm-product-hero__thumbs .images-container-0:not(:has(.pro_gallery_thumbs_container)) .pro_gallery_top .swiper-slide img,
.tdfm-product-hero__thumbs .images-container-0:not(:has(.pro_gallery_thumbs_container)) .pro_gallery_top .swiper-slide picture {
  width: 160px !important;
  height: 160px !important;
  object-fit: cover;
}
.tdfm-product-hero__thumbs .images-container-0:not(:has(.pro_gallery_thumbs_container)) .swiper-button,
.tdfm-product-hero__thumbs .images-container-0:not(:has(.pro_gallery_thumbs_container)) .swiper-pagination,
.tdfm-product-hero__thumbs .images-container-0:not(:has(.pro_gallery_thumbs_container)) .pro_gallery_fullscreen,
.tdfm-product-hero__thumbs .images-container-0:not(:has(.pro_gallery_thumbs_container)) .pro_popup_trigger_box {
  display: none !important;
}

.tdfm-product-hero__thumbs .pro_gallery_thumbs_container.pro_gallery_thumbs_vertical {
  display: block !important;
  width: auto !important;
}

.tdfm-product-hero__thumbs .pro_gallery_thumbs_vertical .swiper-container.pro_gallery_thumbs {
  height: 160px !important;
  width: auto !important;
  min-width: 160px;
}

/* Thumbnails a su tamaño nativo para evitar el blur por upscaling.
   Panda sirve las imágenes del strip en ~125px — mostramos 100px para margen. */
.tdfm-product-hero__thumbs .swiper-slide {
  width: 106px !important;
  height: 100px !important;
}

.tdfm-product-hero__thumbs .pro_gallery_thumb_box {
  width: 100px;
  height: 100px;
}

.tdfm-product-hero__thumbs .pro_gallery_thumb,
.tdfm-product-hero__thumbs .pro_gallery_thumb_box img,
.tdfm-product-hero__thumbs .pro_gallery_thumb_box picture {
  width: 100px !important;
  height: 100px !important;
  object-fit: cover;
}

/* ── Skeleton shimmer para el precio mientras se calcula ── */
/* El espacio (min-width/min-height) ya está reservado en el elemento base,
   aquí solo aplicamos el efecto visual sin cambiar el box model. */
.tdfm__price-value.is-loading {
  color: transparent !important;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: tdfm-shimmer 1.2s infinite linear;
  pointer-events: none;
}

@keyframes tdfm-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Ocultar variantes y carrito mientras JS los mueve al slot del designer.
   Una vez en el slot, el CSS de tdfm.js/.designer.tpl los hace visibles. */
.tdfm-product-hero__aside .product-variants,
.tdfm-product-hero__aside .product-add-to-cart,
.tdfm-product-hero__aside .product-availability,
.tdfm-product-hero__aside .product-minimal-quantity,
.tdfm-product-hero__aside .pro_qty {
  display: none !important;
}

/* Descripción corta en el aside */
.tdfm-product-hero__desc {
  font-size: .95rem;
  line-height: 1.55;
  margin-bottom: .75rem;
  color: #333;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .tdfm-product-hero {
    flex-direction: column;
    padding: 0 .75rem 1rem;
  }

  .tdfm-product-hero__thumbs,
  .tdfm-product-hero__aside {
    width: 100%;
    flex: none;
  }

  .tdfm-product-title {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }
}