/* =========================================================
   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:calc(25px * var(--text-zoom));
  }
}


/* =========================================================
   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:26px !important;
  }

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

  .detail-description-section p{
    max-height:none !important;
    font-size:12px !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:calc(10.5px * var(--text-zoom)) !important;
    line-height:1.25 !important;
  }