/* =========================================================
   ARCHIVE PRODUCT – RESPONSIVE ONLY
   Pegar en: css/responsive.css
   ========================================================= */

/* ---------- <= 1024px (tablet) ---------- */
@media (max-width: 1024px) {
  .toc-archive-wrap{
    padding-left:16px;
    padding-right:16px;
  }

  /* Hero */
  .toc-hero{
    padding-top:20px;
    padding-bottom:16px;
  }
  .toc-hero-row{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:flex-start;
  }
  .toc-title{
    font-size:28px;
    line-height:1.1;
  }
  .toc-count{
    font-size:12px;
    letter-spacing:.12em;
  }

  /* Toolbar */
  .toc-toolbar-inner{
    gap:12px;
    flex-wrap:wrap;
  }
  .toc-toolbar-divider{
    display:none;
  }
  .toc-sort{
    margin-left:0;
  }
  .toc-search-link{
    margin-left:auto;
  }

  /* Grid */
  .toc-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
  }
  .toc-name{
    font-size:12px;
  }
  .toc-price{
    font-size:12px;
    white-space:nowrap;
  }
  .toc-subline{
    flex-wrap:wrap;
    gap:6px;
  }

  /* Drawer width */
  .toc-drawer{
    width:min(420px, 92vw);
  }
}

/* ---------- <= 768px (mobile) ---------- */
@media (max-width: 768px) {
  .toc-archive-wrap{
    padding-left:14px;
    padding-right:14px;
  }

  /* Hero */
  .toc-breadcrumb{
    font-size:10px;
    flex-wrap:wrap;
    gap:6px;
  }
  .toc-hero-row{
    gap:8px;
  }
  .toc-title{
    font-size:24px;
  }
  .toc-count{
    font-size:11px;
    letter-spacing:.14em;
  }

  /* Toolbar stack */
  .toc-toolbar{
    position:sticky;
    top:0;
    z-index:30;
    backdrop-filter:saturate(180%) blur(10px);
  }
  .toc-toolbar-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 10px;
    align-items:center;
  }

  .toc-filters-btn{
    width:100%;
    justify-content:center;
  }
  .toc-sort{
    width:100%;
    justify-content:flex-end;
  }
  .toc-sort-label{
    display:none;
  }
  .toc-sort-btn{
    width:100%;
    justify-content:space-between;
  }

  .toc-view{
    display:none;
  }

  .toc-search-link{
    grid-column:1 / -1;
    width:100%;
    text-align:center;
  }

  /* Active filters chips */
  .toc-active-filters{
    padding-top:10px;
    padding-bottom:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:10px;
  }
  .toc-active-filters::-webkit-scrollbar{ height:0; }

  /* Grid */
  .toc-grid-wrap{
    padding-top:16px;
  }
  .toc-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }

  .toc-item{
    min-width:0;
  }

  /* Keep image ratio stable */
  .toc-media{
    display:block;
    position:relative;
    overflow:hidden;
  }
  .toc-img{
    width:100%;
    height:auto;
    aspect-ratio:4 / 5;
    object-fit:cover;
    display:block;
  }
  .toc-img-hover{
    display:none; /* hover no sirve en mobile */
  }

  /* Meta layout */
  .toc-meta{
    padding-top:10px;
  }
  .toc-meta-row{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-start;
  }
  .toc-name a{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .toc-price{
    order:2;
    font-size:13px;
  }
  .toc-subline{
    margin-top:6px;
    font-size:10px;
    line-height:1.2;
    flex-wrap:wrap;
    gap:6px;
  }

  /* Pagination spacing */
  .toc-pagination{
    padding-top:18px;
  }

  /* Drawer full-screen feel */
  .toc-drawer-root.is-open .toc-drawer-scrim{
    opacity:1;
  }
  .toc-drawer{
    width:100vw;
    max-width:100vw;
    border-radius:16px 16px 0 0;
    bottom:0;
    top:auto;
    height:min(86vh, 720px);
  }
  .toc-drawer-head{
    position:sticky;
    top:0;
    z-index:2;
  }
  .toc-drawer-foot{
    position:sticky;
    bottom:0;
    z-index:2;
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }

  /* Filters UI: size grid */
  .toc-sizegrid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  /* Material chips tighter */
  .toc-chips{
    gap:10px;
  }
}

/* ---------- <= 480px (small mobile) ---------- */
@media (max-width: 480px) {
  .toc-title{
    font-size:22px;
  }

  .toc-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .toc-meta-row{
    gap:8px;
  }

  .toc-sort-menu{
    width:min(260px, 88vw);
    right:0;
    left:auto;
  }

  .toc-drawer-title{
    font-size:14px;
    letter-spacing:.12em;
  }

  .toc-drawer-foot{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .toc-btn-outline,
  .toc-btn-solid{
    width:100%;
  }

  .toc-searchbox input{
    font-size:14px;
  }
}

/* ---------- touch devices: disable hover image & hover-only effects ---------- */
@media (hover: none) and (pointer: coarse) {
  .toc-img-hover{ display:none !important; }
}