/* ===================================================================
   catalogo.css — vasitos.es
   Estilos exclusivos del Catálogo (archive-product.php).
   Usa las mismas variables definidas en site-chrome.css.
=================================================================== */

.vc-breadcrumb{ max-width:1160px; margin:0 auto; padding:18px 40px 0; font-size:11.5px; color:var(--muted); }
.vc-breadcrumb a{ color:var(--muted); text-decoration:none; }
.vc-breadcrumb a:hover{ color:var(--orange); }
.vc-breadcrumb .sep{ margin:0 6px; opacity:.6; }
.vc-breadcrumb .current{ color:var(--ink); }

.vc-page-title{ max-width:1160px; margin:0 auto; padding:18px 40px 0; }
.vc-page-title h1{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:800; font-size:30px; letter-spacing:-.01em; margin:0; }
.vc-page-title p{ font-size:12.5px; color:var(--muted); margin-top:4px; }

/* Filtros */
.vc-filters{ max-width:1160px; margin:0 auto; padding:22px 40px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.vc-filter-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.vc-filter-pill{ padding:9px 16px; border-radius:20px; background:var(--step-bg); font-size:12px; font-weight:500; color:var(--ink); cursor:pointer; border:1.5px solid transparent; text-decoration:none; }
.vc-filter-pill.active{ background:var(--ink); color:#fff; }
.vc-filter-pill:hover:not(.active){ border-color:var(--line-strong); }
.vc-filter-sort{ display:flex; align-items:center; gap:8px; }
.vc-filter-sort label{ font-size:11.5px; color:var(--muted); }
.vc-filter-sort select{ height:36px; border:1px solid var(--line-strong); border-radius:6px; padding:0 10px; font-size:12px; font-family:'IBM Plex Sans',sans-serif; background:var(--surface); }

/* Rejilla de productos */
.vc-catalog-grid{ max-width:1160px; margin:0 auto; padding:28px 40px 8px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.vc-prod-card{ background:var(--surface); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; text-decoration:none; display:block; }
.vc-prod-card-img{ aspect-ratio:1/1; background:var(--surface); display:flex; align-items:center; justify-content:center; padding:20px; }
.vc-prod-card-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.vc-prod-card-body{ padding:0 16px 16px; }
.vc-cat-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.vc-cat{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.vc-ref{ font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--line-strong); }
.vc-prod-card-body b{ display:block; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:15px; font-weight:700; margin-bottom:10px; line-height:1.15; color:var(--ink); }
.vc-select-opts-btn{ display:block; width:100%; text-align:center; background:var(--step-bg); color:var(--ink); border-radius:7px; padding:9px 0; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; font-size:11.5px; letter-spacing:.02em; }
.vc-prod-card:hover .vc-select-opts-btn{ background:var(--orange); color:#fff; }

.vc-no-products{ max-width:1160px; margin:0 auto; padding:60px 40px; text-align:center; color:var(--muted); }

/* Paginación — heredamos el estilo de WooCommerce pero lo ajustamos */
.vc-pagination{ max-width:1160px; margin:0 auto; padding:20px 40px 20px; }
.vc-pagination .woocommerce-pagination ul.page-numbers{ display:flex; justify-content:center; gap:8px; list-style:none; padding:0; margin:0; }
.vc-pagination .page-numbers li{ list-style:none; }
.vc-pagination .page-numbers a, .vc-pagination .page-numbers span{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); background:var(--step-bg); text-decoration:none;
}
.vc-pagination .page-numbers .current{ background:var(--ink); color:#fff; }
.vc-pagination .page-numbers a:hover{ background:var(--line); }

/* Bloque de texto SEO */
.vc-seo-text-block{ max-width:900px; margin:0 auto; padding:20px 40px 50px; }
.vc-seo-text{ max-height:120px; overflow:hidden; position:relative; }
.vc-seo-text.expanded{ max-height:none; }
.vc-seo-text:not(.expanded)::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:50px; background:linear-gradient(180deg, transparent, var(--surface)); }
.vc-seo-text h2{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:17px; margin-bottom:12px; color:var(--ink); }
.vc-seo-text p{ font-size:12.5px; color:var(--muted); line-height:1.75; margin-bottom:12px; }
.vc-seo-text p strong{ color:var(--ink); font-weight:600; }
.vc-seo-toggle{ display:block; margin:10px auto 0; background:none; border:none; font-size:11.5px; color:var(--orange); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.vc-seo-toggle:hover{ color:#DB4E27; }

@media (max-width:860px){
  .vc-breadcrumb, .vc-page-title, .vc-filters, .vc-catalog-grid, .vc-pagination{ padding-left:20px; padding-right:20px; }
  .vc-filters{ flex-direction:column; align-items:stretch; }
  .vc-catalog-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .vc-seo-text-block{ padding:16px 20px 40px; }
}