/* v447 SENIOR PERFORMANCE + PC/MOBILE POLISH
   Objetivo: sensación tipo app de delivery premium: cards compactas, imágenes controladas,
   modales rápidos, scroll fluido y botones siempre visibles. */

:root{
  --tv-fast: 140ms;
  --tv-med: 220ms;
  --tv-ease: cubic-bezier(.2,.8,.2,1);
}

/* Render más liviano en listas largas */
.category{
  content-visibility:auto;
  contain-intrinsic-size: 320px;
}
.category.open{
  content-visibility:visible;
  contain-intrinsic-size:auto;
}
.products{
  contain: layout style;
}

/* Cards: base sólida para que ninguna imagen vuelva a romper el layout */
.product.compact-product{
  position:relative !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns: 132px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:stretch !important;
  min-height:132px !important;
  max-height:none !important;
  padding:14px !important;
  border-radius:24px !important;
  transform:translateZ(0);
  backface-visibility:hidden;
  transition: transform var(--tv-fast) var(--tv-ease), border-color var(--tv-fast) var(--tv-ease), box-shadow var(--tv-fast) var(--tv-ease);
}
.product.compact-product:hover{
  transform:translateY(-1px) translateZ(0);
}
.product.compact-product:active{
  transform:scale(.995) translateZ(0);
}

.product.compact-product .product-media{
  width:132px !important;
  height:132px !important;
  min-width:132px !important;
  max-width:132px !important;
  aspect-ratio:1 / 1 !important;
  overflow:hidden !important;
  border-radius:20px !important;
  align-self:stretch !important;
  background:linear-gradient(135deg, rgba(255,145,20,.14), rgba(255,255,255,.06)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.product.compact-product .product-media img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  transform:translateZ(0);
  filter:saturate(1.04) contrast(1.02);
}

.product.compact-product .product-body{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  gap:10px !important;
}
.product.compact-product .product-top{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:12px !important;
  align-items:start !important;
}
.product.compact-product .product-top h3{
  min-width:0 !important;
  line-height:1.03 !important;
  overflow-wrap:anywhere !important;
}
.product.compact-product .desc{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  max-height:2.8em !important;
  opacity:.88;
}
.product.compact-product .product-actions{
  margin-top:auto !important;
  display:grid !important;
  grid-template-columns:auto minmax(156px, 220px) !important;
  gap:10px !important;
  align-items:center !important;
}
.product.compact-product .add-btn,
.product.compact-product .details-btn,
.card-buy-control{
  min-height:46px !important;
  border-radius:16px !important;
}
.card-control-slot{
  min-width:0 !important;
}
.card-buy-control{
  width:100% !important;
}

/* Empanadas: nunca más una card gigante en escritorio */
.product.compact-product[data-id="empanadas-builder"] .product-media{
  aspect-ratio:1/1 !important;
  height:132px !important;
}
.product.compact-product[data-id="empanadas-builder"] .product-media img{
  object-fit:cover !important;
  object-position:center center !important;
}

/* Desktop premium: grilla densa y rápida */
@media (min-width: 900px){
  .categories{
    width:min(100%, 1260px) !important;
    margin-inline:auto !important;
  }
  .category.open .products{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap:14px !important;
    align-items:stretch !important;
  }
  .category.open[data-cat="Empanadas"] .products{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  .product.compact-product{
    min-height:156px !important;
    grid-template-columns:156px minmax(0,1fr) !important;
  }
  .product.compact-product .product-media{
    width:156px !important;
    height:156px !important;
    min-width:156px !important;
    max-width:156px !important;
  }
  .product.compact-product .product-top h3{
    font-size:clamp(22px, 1.6vw, 30px) !important;
  }
}

/* Ultra wide: 3 columnas si hay espacio */
@media (min-width: 1320px){
  .category.open .products{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}

/* Mobile: tipo app nativa, cards compactas y sin saltos */
@media (max-width: 699px){
  html, body{
    overscroll-behavior-y:none;
  }
  .category{
    contain-intrinsic-size: 240px;
  }
  .category.open .products{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .product.compact-product{
    grid-template-columns:112px minmax(0,1fr) !important;
    min-height:112px !important;
    padding:12px !important;
    gap:12px !important;
    border-radius:22px !important;
  }
  .product.compact-product .product-media{
    width:112px !important;
    height:112px !important;
    min-width:112px !important;
    max-width:112px !important;
    border-radius:18px !important;
  }
  .product.compact-product .product-top{
    grid-template-columns:1fr !important;
    gap:4px !important;
  }
  .product.compact-product .product-top h3{
    font-size:20px !important;
  }
  .product.compact-product .price{
    font-size:18px !important;
  }
  .product.compact-product .desc{
    -webkit-line-clamp:2 !important;
    font-size:12px !important;
  }
  .product.compact-product .product-actions{
    grid-template-columns:auto 1fr !important;
    gap:8px !important;
  }
  .product.compact-product .add-btn,
  .product.compact-product .details-btn,
  .card-buy-control{
    min-height:40px !important;
    border-radius:14px !important;
  }
}

/* Modales: rápido, fijo, sin bloquear contenido útil */
#productModal,
.product-modal,
.modal,
[class*="modal"]{
  -webkit-font-smoothing:antialiased;
}
#productModal.show .modal-card,
#productModal.show .modal-panel,
#productModal.show [class*="modal-card"],
#productModal.show [class*="modal-panel"]{
  transform:translate3d(0,0,0) !important;
  animation-duration:140ms !important;
  will-change:transform, opacity;
}

/* Si el modal tiene cuerpo + footer, el footer siempre visible */
#productModal .modal-card,
#productModal .modal-panel,
#productModal [class*="modal-card"],
#productModal [class*="modal-panel"]{
  max-height:min(88vh, 760px) !important;
  overflow:hidden !important;
}
#productModal .modal-body,
#productModal [class*="modal-body"],
#productModal .option-scroll,
#productModal [class*="options"]{
  min-height:0;
}
#productModal .modal-footer,
#productModal [class*="modal-footer"],
#productModal .builder-footer,
#productModal [class*="footer"]{
  position:sticky;
  bottom:0;
  z-index:5;
}

/* Empanadas modal: área de sabores scrolleable, footer limpio */
#productModal [data-empanadas],
#productModal .empanadas-builder,
#productModal .flavor-builder{
  min-height:0 !important;
}
#productModal .flavor-list,
#productModal .sabores-list,
#productModal [class*="flavor-list"],
#productModal [class*="sabores"]{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Botones de acción: feedback de app profesional */
button,
.add-btn,
.details-btn,
.card-qty-btn,
.cart-float,
.category-header{
  touch-action:manipulation;
}
button:active,
.add-btn:active,
.details-btn:active,
.card-qty-btn:active,
.cart-float:active{
  transform:scale(.985);
}

/* Menos costo gráfico en PC con fondos borrosos */
@media (min-width: 900px){
  .modal-backdrop,
  #productModal::before,
  .drawer-backdrop{
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
  }
}

/* Estado cargado suave */
html.tv-v447-ready .product.compact-product{
  animation: tvCardIn 180ms var(--tv-ease) both;
}
@keyframes tvCardIn{
  from{ opacity:.001; transform:translateY(5px) translateZ(0); }
  to{ opacity:1; transform:translateY(0) translateZ(0); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}