/* =========================================================
   RESPONSIVE GENERAL
========================================================= */

@media (max-width:900px){

  .topbar{
    padding:14px 18px;
  }

  .brand h1{
    font-size:var(--brand-title-size-mobile, 24px);
  }

  .brand-logo{
    width:var(--logo-size-mobile, 56px);
    height:var(--logo-size-mobile, 56px);
  }

  .catalog-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
  }

  .product-image-wrap{
    height:220px;
  }

  .variant-layout{
    grid-template-columns:1fr;
  }

  .cart-panel{
    width:100%;
    max-width:100%;
  }

  .detail-modal-content{
    width:96vw;
    max-width:96vw;
    padding:18px;
  }

  .product-detail-layout{
    grid-template-columns:minmax(0,1fr) minmax(300px,.88fr);
    gap:20px;
  }

  .detail-image-wrap.detail-gallery{
    min-height:360px;
    height:52vh;
  }

  .product-detail-info > h2{
    font-size:25px;
  }
}


/* =========================================================
   FICHA DEL PRODUCTO EN CELULAR
========================================================= */

@media (max-width:700px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body.modal-open{
    overflow:hidden !important;
  }

  .product-detail-modal{
    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;

    margin:0 !important;
    padding:6px !important;

    align-items:flex-start !important;
    justify-content:center !important;

    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .detail-modal-content{
    position:relative !important;

    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    min-width:0 !important;

    height:auto !important;
    max-height:calc(100dvh - 12px) !important;

    margin:0 auto !important;
    padding:12px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;

    border-radius:16px !important;
    box-sizing:border-box !important;
  }

  .product-detail-layout{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    gap:14px !important;
    box-sizing:border-box !important;
  }

  .product-detail-media,
  .product-detail-info,
  .detail-description-section,
  .detail-wholesale,
  .detail-variants,
  .detail-option-list,
  .detail-action-grid{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .detail-image-wrap.detail-gallery{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:42vh !important;
    min-height:280px !important;
    max-height:370px !important;

    border-radius:14px !important;
    box-sizing:border-box !important;
  }

  .detail-image-wrap.detail-gallery > img{
    width:100% !important;
    max-width:100% !important;
    height:100% !important;

    padding:10px !important;
    object-fit:contain !important;
    box-sizing:border-box !important;
  }

  .detail-thumbs{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    display:flex !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;

    -webkit-overflow-scrolling:touch;
  }

  .detail-thumb{
    flex:0 0 62px !important;
    width:62px !important;
    height:62px !important;
  }

  .product-detail-info{
    padding:0 2px 4px !important;
  }

  .product-detail-info > h2{
    margin-right:34px !important;
    font-size:22px !important;
  }

  .detail-price{
    font-size:29px !important;
  }

  .detail-description-section p{
    max-height:none !important;
    font-size:13px !important;
  }

  .detail-wholesale-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    gap:6px !important;
  }

  .detail-wholesale-tier{
    min-width:0 !important;
    padding:8px 3px !important;
  }

  .detail-wholesale-tier span,
  .detail-wholesale-tier strong{
    display:block !important;
    max-width:100% !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;

    font-size:10.5px !important;
    line-height:1.25 !important;
  }

  .detail-option-list{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:7px !important;
    overflow:hidden !important;
  }

  .detail-variant-btn{
    min-width:0 !important;
    max-width:100% !important;

    min-height:36px !important;
    padding:7px 10px !important;
    font-size:11px !important;
  }

  .detail-action-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .detail-whatsapp-btn,
  .detail-cart-btn{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    min-height:42px !important;
    padding:8px 5px !important;
    font-size:10.5px !important;
  }

  /* Mientras el modal está abierto, el carrito permanece oculto solo
     si todavía no existe ningún producto agregado. */
  body.modal-open:not(.cart-has-items) .cart-floating{
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Después de agregar el primer producto desde el modal, muestra el mismo
     carrito flotante del inicio para continuar comprando o culminar el pedido. */
  body.modal-open.cart-has-items .cart-floating{
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:120 !important;
  }
}


/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media (max-width:520px){

  .topbar{
    display:grid !important;
    grid-template-columns:72px 1fr 82px !important;
    align-items:center !important;
    gap:6px !important;
    text-align:initial !important;
  }

  .btn-light{
    width:auto;
  }

  body.mobile-view-large .catalog-grid{
    grid-template-columns:1fr !important;
  }

  body.mobile-view-large .product-image-wrap{
    height:330px;
  }

  body.mobile-view-compact .catalog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  body.mobile-view-compact .product-image-wrap{
    height:165px;
  }

  body.mobile-view-compact .card-whatsapp-btn{
    width:94%;
    min-height:34px;
    margin-top:8px;
    padding:7px 8px;
    font-size:11px;
  }

  body.mobile-view-compact .card-whatsapp-btn .whatsapp-icon{
    width:16px;
    height:16px;
  }

  body.mobile-view-compact .product-open-hint{
    display:none;
  }

  .detail-meta-row{
    font-size:12px;
  }

  .footer{
    flex-direction:column;
    text-align:center;
  }

  .social-links{
    justify-content:center;
  }

  .modal-content{
    padding:16px;
  }

  .cart-floating{
    right:16px;
    bottom:16px;
  }
}

/* =========================================================
   PROTECCIÓN PWA: la barra de instalación nunca aparece en PC.
========================================================= */
@media (min-width: 1025px){
  #installAppBar.install-app-bar{
    display:none !important;
  }
}


/* V54: botones del modal siempre en una sola fila en celular. */
@media (max-width:700px){
  .detail-action-grid{
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) minmax(0,1.22fr) !important;
    grid-auto-flow:column !important;
    align-items:stretch !important;
    gap:4px !important;
    width:100% !important;
  }

  .detail-action-grid .detail-whatsapp-btn{
    grid-column:1 !important;
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    min-height:38px !important;
    margin:0 !important;
  }

  .detail-action-grid .detail-close-link,
  .detail-action-grid .detail-cart-btn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:38px !important;
    margin:0 !important;
    padding:5px 3px !important;
    font-size:8.7px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
}

/* V55: en celular, Seguir viendo y Agregar al carrito iguales y en una fila. */
@media (max-width:700px){
  .detail-action-grid{
    grid-template-columns:38px minmax(0,1fr) minmax(0,1fr) !important;
    grid-auto-flow:column !important;
    gap:4px !important;
    width:100% !important;
  }
  .detail-action-grid .detail-close-link,
  .detail-action-grid .detail-cart-btn,
  .detail-action-grid #detailAddCartBtn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:38px !important;
    height:38px !important;
    padding:5px 3px !important;
    border-radius:9px !important;
    font-size:8.7px !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }
}

/* V65: ajuste final solicitado únicamente para el modal en celular. */
@media (max-width:700px){
  .detail-quantity-row{
    position:relative!important;
    justify-content:center!important;
    gap:0!important;
    padding-left:42px!important;
    padding-right:0!important;
  }

  .detail-quantity-row > span{
    position:absolute!important;
    left:0!important;
    margin:0!important;
  }

  .detail-quantity-control{
    margin:0!important;
  }

  .detail-action-grid .detail-close-link,
  .detail-action-grid .detail-cart-btn,
  .detail-action-grid #detailAddCartBtn{
    font-size:10px!important;
  }
}