/* ============================================================
   Bebé Crece — detalle de producto ordenado + banner responsive
   2026-07-12
   ============================================================ */

/* ---------- Modal / detalle de producto ---------- */
#productModal,
#productDetailModal{
  overflow-x:hidden!important;
  overscroll-behavior:contain;
}

#productModal .product-detail-modal.bc-product-layout-ready,
#productDetailModal .product-detail-modal.bc-product-layout-ready{
  width:min(1180px,calc(100vw - 28px))!important;
  max-width:1180px!important;
  max-height:calc(100dvh - 24px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-gutter:stable;
}

#productModal .bc-product-layout-grid,
#productDetailModal .bc-product-layout-grid{
  display:grid!important;
  grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr)!important;
  align-items:start!important;
  gap:28px!important;
  padding:32px 32px 22px!important;
}

#productModal .bc-product-layout-grid > *,
#productDetailModal .bc-product-layout-grid > *{
  min-width:0!important;
}

/* La columna visual termina después de imagen y miniaturas. */
#productModal .bc-product-layout-grid .detail-image,
#productDetailModal .bc-product-layout-grid .detail-image,
#productDetailModal .bc-product-layout-grid > .detail-gallery-wrap{
  align-self:start!important;
  min-height:0!important;
  height:auto!important;
}

#productModal .bc-product-layout-grid .detail-image{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  padding:20px!important;
  gap:14px!important;
}

#productModal .bc-product-layout-grid .detail-image > #modalProductImage{
  width:100%!important;
  height:clamp(260px,36vw,430px)!important;
  max-height:430px!important;
  object-fit:contain!important;
  flex:none!important;
}

#productModal .bc-product-layout-grid .detail-gallery-wrap,
#productDetailModal .bc-product-layout-grid .detail-thumbs-strip{
  width:100%!important;
  max-width:100%!important;
}

#productModal .bc-product-layout-grid .detail-info,
#productDetailModal .bc-product-layout-grid .detail-info{
  display:block!important;
  min-width:0!important;
  padding:8px 4px 0!important;
  text-align:left!important;
}

#productModal .bc-product-layout-grid .detail-info h2,
#productDetailModal .bc-product-layout-grid .detail-info h2{
  max-width:100%!important;
  margin:4px 0 10px!important;
  font-size:clamp(30px,3.1vw,44px)!important;
  line-height:1.08!important;
  overflow-wrap:anywhere;
}

/* Etiquetas debajo del nombre, según el orden solicitado. */
#productModal .bc-product-layout-grid .detail-tags,
#productDetailModal .bc-product-layout-grid .detail-tags{
  margin:0 0 12px!important;
}

#productModal .bc-product-layout-grid .detail-price,
#productDetailModal .bc-product-layout-grid .detail-price,
#productDetailModal .bc-product-layout-grid .detail-price-row{
  margin-top:10px!important;
  margin-bottom:14px!important;
}

#productModal .bc-product-layout-grid .detail-options,
#productDetailModal .bc-product-layout-grid .detail-options{
  width:100%!important;
  max-width:100%!important;
  margin:14px 0 18px!important;
}

#productModal .bc-product-layout-grid .detail-options input,
#productModal .bc-product-layout-grid .detail-options select,
#productDetailModal .bc-product-layout-grid .detail-options input,
#productDetailModal .bc-product-layout-grid .detail-options select{
  width:100%!important;
  min-width:0!important;
}

#productModal .bc-product-layout-grid .detail-actions,
#productDetailModal .bc-product-layout-grid .detail-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  width:100%!important;
  margin-top:14px!important;
}

#productModal .bc-product-layout-grid .detail-actions button,
#productDetailModal .bc-product-layout-grid .detail-actions button{
  width:100%!important;
  min-height:50px!important;
  white-space:normal!important;
  line-height:1.25!important;
}

/* Pago flexible y entrega permanecen después de los botones. */
#productModal .bc-support-row,
#productDetailModal .bc-support-row{
  width:100%!important;
  margin-top:16px!important;
  align-items:stretch!important;
}

#productModal .bc-support-row > *,
#productDetailModal .bc-support-row > *{
  min-width:0!important;
  height:100%!important;
}

/* Contenedor inferior: descripción y luego recomendados. */
#productModal .bc-product-detail-bottom,
#productDetailModal .bc-product-detail-bottom{
  display:grid!important;
  gap:18px!important;
  padding:0 32px 32px!important;
  width:100%!important;
}

#productModal .bc-description-section,
#productDetailModal .bc-description-section,
#productModal .bc-recommend-section,
#productDetailModal .bc-recommend-section{
  width:100%!important;
  min-width:0!important;
  border:1px solid #d9e5fb!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  padding:20px 22px!important;
  box-shadow:0 10px 28px rgba(16,42,99,.06)!important;
}

#productModal .bc-description-title,
#productDetailModal .bc-description-title{
  margin:0 0 10px!important;
  color:#102a63!important;
  font-size:18px!important;
  line-height:1.25!important;
  font-weight:900!important;
}

#productModal .bc-description-body,
#productDetailModal .bc-description-body{
  position:relative;
  max-width:900px!important;
}

#productModal .bc-product-description-text,
#productDetailModal .bc-product-description-text{
  display:block!important;
  width:100%!important;
  max-width:900px!important;
  margin:0!important;
  color:#52678f!important;
  font-size:15px!important;
  line-height:1.72!important;
  text-align:left!important;
  overflow-wrap:anywhere;
  transition:max-height .3s cubic-bezier(.22,1,.36,1),opacity .2s ease;
}

#productModal .bc-product-description-text.is-collapsed,
#productDetailModal .bc-product-description-text.is-collapsed{
  max-height:6.9em!important;
  overflow:hidden!important;
}

#productModal .bc-description-body.has-collapsed-copy::after,
#productDetailModal .bc-description-body.has-collapsed-copy::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2.4em;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(248,251,255,0),#f8fbff 82%);
}

#productModal .bc-description-toggle,
#productDetailModal .bc-description-toggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  margin-top:12px!important;
  padding:9px 14px!important;
  border:1px solid #cbdcf8!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#2048a0!important;
  font:800 13px/1.2 Poppins,Arial,sans-serif!important;
  cursor:pointer!important;
}

#productModal .bc-description-toggle:hover,
#productDetailModal .bc-description-toggle:hover{
  background:#eef4ff!important;
}

#productModal .bc-description-toggle[hidden],
#productDetailModal .bc-description-toggle[hidden]{
  display:none!important;
}

/* Se oculta únicamente la introducción duplicada del modal dinámico. */
#productModal .bc-description-source-hidden,
#productDetailModal .bc-description-source-hidden{
  display:none!important;
}

/* Recomendados al final y en una cuadrícula flexible. */
#productModal .bc-recommend-section .recommend-box,
#productDetailModal .bc-recommend-section .recommend-box{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  width:100%!important;
}

#productModal .bc-recommend-section .recommend-title,
#productDetailModal .bc-recommend-section .recommend-title{
  margin:0 0 14px!important;
  font-size:18px!important;
  line-height:1.25!important;
}

#productModal .bc-recommend-section .recommend-grid,
#productDetailModal .bc-recommend-section .recommend-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  max-height:none!important;
  overflow:visible!important;
}

#productModal .bc-recommend-section .recommend-card,
#productDetailModal .bc-recommend-section .recommend-card{
  min-width:0!important;
  width:100%!important;
  height:auto!important;
}

/* Los envoltorios viejos quedan vacíos después de centralizar recomendados. */
#productModal .modal-side-extra:empty,
#productDetailModal .modal-side-extra:empty,
#productDetailModal .modal-bottom-extra:empty,
#productDetailModal .detail-support-left:empty{
  display:none!important;
}

/* ---------- Banner principal del inicio ---------- */
#inicio-promocion.hero-top{
  width:100%!important;
  padding:14px 0 18px!important;
  overflow:hidden!important;
}

#inicio-promocion .father-day-banner-wrap.hero-wide{
  width:calc(100% - 24px)!important;
  max-width:none!important;
  margin:0 auto!important;
}

#inicio-promocion .father-day-banner{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border-radius:26px!important;
}

#inicio-promocion .father-day-slider{
  width:100%!important;
  max-width:none!important;
  aspect-ratio:1959/802!important;
}

#inicio-promocion .father-day-slide,
#inicio-promocion .father-day-slide img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
}

#inicio-promocion .father-day-slide img{
  object-fit:cover!important;
  object-position:center!important;
}

/* También evita que el segundo banner del inicio quede limitado de más. */
#banner-todo-nino-nina .index-main-banner-wrap{
  width:calc(100% - 24px)!important;
  max-width:none!important;
}

@media (max-width:980px){
  #productModal .bc-product-layout-grid,
  #productDetailModal .bc-product-layout-grid{
    grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr)!important;
    gap:20px!important;
    padding:26px 24px 18px!important;
  }

  #productModal .bc-recommend-section .recommend-grid,
  #productDetailModal .bc-recommend-section .recommend-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  #productModal .bc-product-detail-bottom,
  #productDetailModal .bc-product-detail-bottom{
    padding:0 24px 26px!important;
  }
}

@media (max-width:760px){
  #productModal,
  #productDetailModal{
    padding:8px!important;
    align-items:flex-start!important;
  }

  #productModal .product-detail-modal.bc-product-layout-ready,
  #productDetailModal .product-detail-modal.bc-product-layout-ready{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:22px!important;
  }

  #productModal .bc-product-layout-grid,
  #productDetailModal .bc-product-layout-grid{
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding:52px 14px 16px!important;
  }

  #productModal .bc-product-layout-grid .detail-image,
  #productDetailModal .bc-product-layout-grid > .detail-gallery-wrap{
    width:100%!important;
    max-width:100%!important;
  }

  #productModal .bc-product-layout-grid .detail-image{
    padding:12px!important;
    border-radius:20px!important;
  }

  #productModal .bc-product-layout-grid .detail-image > #modalProductImage{
    height:clamp(230px,78vw,330px)!important;
  }

  #productDetailModal .detail-image-enhanced{
    height:clamp(230px,74vw,320px)!important;
    min-height:230px!important;
  }

  #productModal .bc-product-layout-grid .detail-info,
  #productDetailModal .bc-product-layout-grid .detail-info{
    padding:0!important;
  }

  #productModal .bc-product-layout-grid .detail-info h2,
  #productDetailModal .bc-product-layout-grid .detail-info h2{
    font-size:clamp(27px,8.5vw,36px)!important;
  }

  #productModal .bc-product-layout-grid .detail-options,
  #productDetailModal .bc-product-layout-grid .detail-options{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  #productModal .bc-support-row,
  #productDetailModal .bc-support-row{
    grid-template-columns:1fr!important;
  }

  #productModal .bc-product-detail-bottom,
  #productDetailModal .bc-product-detail-bottom{
    padding:0 14px 18px!important;
    gap:14px!important;
  }

  #productModal .bc-description-section,
  #productDetailModal .bc-description-section,
  #productModal .bc-recommend-section,
  #productDetailModal .bc-recommend-section{
    border-radius:18px!important;
    padding:16px!important;
  }

  #productModal .bc-recommend-section .recommend-grid,
  #productDetailModal .bc-recommend-section .recommend-grid{
    grid-template-columns:1fr!important;
  }

  #inicio-promocion.hero-top{
    padding:8px 0 10px!important;
  }

  #inicio-promocion .father-day-banner-wrap.hero-wide,
  #banner-todo-nino-nina .index-main-banner-wrap{
    width:100%!important;
    max-width:100%!important;
  }

  #inicio-promocion .father-day-banner{
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
  }

  #inicio-promocion .father-day-slider{
    aspect-ratio:1959/802!important;
  }

  #banner-todo-nino-nina .index-main-banner-wrap{
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
  }
}

@media (max-width:430px){
  #productModal .bc-product-layout-grid,
  #productDetailModal .bc-product-layout-grid{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  #productModal .bc-product-detail-bottom,
  #productDetailModal .bc-product-detail-bottom{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  #productModal .bc-product-layout-grid .detail-actions button,
  #productDetailModal .bc-product-layout-grid .detail-actions button{
    min-height:48px!important;
    font-size:14px!important;
  }
}

/* Accesorios usa un modal dinámico con display:contents; se normaliza para
   que la descripción y recomendados queden realmente debajo de la compra. */
body.bc-page-accesorios #productDetailModal .product-detail-modal.bc-product-layout-ready{
  padding:0!important;
}
body.bc-page-accesorios #productDetailModal #productDetailContent{
  display:block!important;
  width:100%!important;
}
body.bc-page-accesorios #productDetailModal #productDetailContent > .product-detail-grid-enhanced.bc-product-layout-grid{
  display:grid!important;
  grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr)!important;
  grid-template-rows:auto!important;
  gap:28px!important;
  width:100%!important;
}
body.bc-page-accesorios #productDetailModal #productDetailContent > .product-detail-grid-enhanced.bc-product-layout-grid > .detail-gallery-wrap,
body.bc-page-accesorios #productDetailModal #productDetailContent > .product-detail-grid-enhanced.bc-product-layout-grid > .detail-info{
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%!important;
}
body.bc-page-accesorios #productDetailModal #productDetailContent > .bc-product-detail-bottom{
  display:grid!important;
  width:100%!important;
  margin:0!important;
}

@media (max-width:760px){
  body.bc-page-accesorios #productDetailModal #productDetailContent > .product-detail-grid-enhanced.bc-product-layout-grid{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
}

/* BC 20260713 — modal oficial idéntico desde buscador y categorías */
#productModal .bc-support-section,
#productDetailModal .bc-support-section{
  width:100%!important;
  min-width:0!important;
}
#productModal .bc-support-section .bc-support-row,
#productDetailModal .bc-support-section .bc-support-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  margin:0!important;
}
#productModal .detail-sku-pill:empty,
#productDetailModal .detail-sku-pill:empty{display:none!important}
@media(max-width:720px){
  #productModal .bc-support-section .bc-support-row,
  #productDetailModal .bc-support-section .bc-support-row{
    grid-template-columns:1fr!important;
  }
}


/* ============================================================
   V20 — Botones descripción/entrega + recomendados 3 por fila
   ============================================================ */
#productModal .bc-recommend-section .recommend-grid,
#productDetailModal .bc-recommend-section .recommend-grid,
body.bc-page-accesorios #productDetailModal .recommend-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
}

@media (max-width:980px){
  #productModal .bc-recommend-section .recommend-grid,
  #productDetailModal .bc-recommend-section .recommend-grid,
  body.bc-page-accesorios #productDetailModal .recommend-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:760px){
  #productModal .bc-recommend-section .recommend-grid,
  #productDetailModal .bc-recommend-section .recommend-grid,
  body.bc-page-accesorios #productDetailModal .recommend-grid{
    grid-template-columns:1fr !important;
  }
}