/* Layout 2 columnas para fichas de producto en desktop (lg: 1024px+).
   Image section a la izquierda (sticky), info+configurador a la derecha,
   related products full-width abajo. Aplica solo a páginas producto-*.html */

@media (min-width: 1024px) {
  /* El wrapper exterior tiene overflow-hidden y main tiene overflow-y-auto
     que rompen position: sticky. Hay que neutralizarlos en desktop. */
  body.product-desktop .min-h-\[100dvh\] {
    overflow: visible !important;
    min-height: 0 !important;
  }
  body.product-desktop main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
    padding-top: 0;
    overflow: visible !important;
  }

  /* Primera sección dentro de main = imagen del producto */
  body.product-desktop main > section:first-of-type {
    position: sticky;
    top: 5rem;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 1rem;
    border-radius: 1rem;
    overflow: hidden;
  }

  /* Resto de secciones = columna derecha (info, selectores, configurador) */
  body.product-desktop main > section:not(:first-of-type),
  body.product-desktop main > .info-column,
  body.product-desktop main > nav,
  body.product-desktop main > div {
    grid-column: 2;
  }

  /* Secciones marcadas como full-width vuelven a span 2 columnas */
  body.product-desktop main > section[data-fullwidth],
  body.product-desktop main > section.related-products {
    grid-column: 1 / -1;
    position: static;
    margin-top: 3rem;
  }

  /* En main grid, la imagen tiene altura libre — eliminar aspect ratio fijo
     enorme que puede romper el sticky */
  body.product-desktop main > section:first-of-type {
    max-height: calc(100vh - 6rem);
  }

  /* Bottom bar sticky → en la columna derecha, no full width */
  body.product-desktop .lg\:relative.lg\:max-w-3xl {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}