/* Lightweight layout helpers — colors come from design-tokens + design.css */

.trust-grid svg{
  width:28px!important;height:28px!important;max-width:28px!important;max-height:28px!important;
}
.sector-icon svg{width:26px!important;height:26px!important}
.product-picture img,
.detail-main-image img{
  max-width:92%;object-fit:contain;margin:0 auto;
}
.category-image img{
  width:100%;height:100%;object-fit:contain;object-position:center;
}
.filter-form{display:grid;gap:14px}
.filter-group{display:grid;gap:8px}
.filter-group input,
.filter-group select{
  width:100%;height:42px;border:1px solid var(--line);border-radius:8px;padding:0 12px;background:#fff;color:var(--ink);
}
.filter-links{display:grid;gap:8px}
.filter-links a{font-size:12px;color:var(--muted-2);padding:6px 0;border-bottom:1px solid var(--line-soft)}
.filter-links a.active,.filter-links a:hover{color:var(--orange);font-weight:700}
.catalog-results{min-width:0}
.add-quote{border:0;background:transparent;color:var(--orange);font-size:11px;font-weight:700;padding:0;cursor:pointer}
.search-results{
  margin-top:8px;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.search-results a{
  display:flex;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line-soft);color:var(--ink)
}
.search-results a:last-child{border:0}
.search-results img{width:40px;height:40px;object-fit:contain}
.search-results strong{display:block;font-size:12px}
.search-results small{color:var(--muted);font-size:11px}
.search-results p{padding:12px;color:var(--muted);margin:0}

@media(max-width:960px){
  .catalog-layout{grid-template-columns:1fr !important}
}

/* Catalog search / pagination / mobile */
.catalog-heading{align-items:flex-end}
.filter-drawer-toggle{
  display:none;
  width:100%;
  min-height:56px;
  margin:0 0 14px;
  padding:12px 14px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,var(--navy) 0%,#24385f 100%);
  color:#fff;
  font:inherit;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(27,42,74,.22);
  align-items:center;
  gap:12px;
  text-align:left;
}
.filter-drawer-toggle-icon{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);
  color:#fff;
}
.filter-drawer-toggle-icon svg{width:20px;height:20px}
.filter-drawer-toggle-copy{
  display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;
}
.filter-drawer-toggle-copy strong{
  font-size:15px;font-weight:800;letter-spacing:.01em;color:#fff;
}
.filter-drawer-toggle-copy small{
  font-size:12px;font-weight:500;color:rgba(255,255,255,.72);
}
.filter-drawer-toggle-action{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:0 14px;border-radius:999px;
  background:var(--orange);color:#fff;font-size:12px;font-weight:800;
}
.filters-close{display:none;border:0;background:transparent;font-size:28px;line-height:1;color:var(--muted);cursor:pointer}
.filter-backdrop{display:none}
.filter-actions{display:flex;gap:10px;align-items:center}
.filter-actions .btn-outline,.filter-clear{
  display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 14px;
  border:1px solid var(--line);border-radius:8px;color:var(--ink);font-weight:600;background:#fff;
}
.catalog-toolbar{
  display:grid;gap:12px;margin-bottom:20px;
}
.catalog-toolbar-form{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.catalog-sort{
  display:flex;align-items:center;gap:10px;min-height:46px;
  padding:0 12px 0 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  min-width:min(100%,220px);width:100%;max-width:320px;
}
.catalog-sort-label{
  font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;flex-shrink:0;
}
.catalog-sort select{
  flex:1;min-width:0;height:44px;border:0;outline:0;background:transparent;
  color:var(--ink);font-size:14px;font-weight:700;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231B2A4A' d='M1.2 1.2 6 6l4.8-4.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;padding-right:22px;
}
.active-filters{display:flex;flex-wrap:wrap;gap:8px}
.active-filters .chip{
  display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;
  background:var(--orange-soft, #fff0e5);color:var(--orange);font-size:12px;font-weight:600;
}
#catalog-category-list{max-height:280px;overflow:auto;padding-right:4px}
.pagination{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  margin-top:28px;
}
.pagination a,.pagination .pagination-nav,.pagination .pagination-ellipsis{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;border:1px solid var(--line);
  border-radius:8px;color:var(--ink);background:#fff;font-weight:600;font-size:13px;
}
.pagination a.active{background:var(--orange);border-color:var(--orange);color:#fff}
.pagination .pagination-nav{min-width:auto;padding:0 12px}
.pagination .pagination-nav.is-disabled,
.pagination .pagination-ellipsis{
  opacity:.45;border-style:dashed;pointer-events:none;
}
.pagination-meta{
  text-align:center;margin:10px 0 0;color:var(--muted);font-size:12px;
}
.product-card--skeleton{pointer-events:none}
.product-card--skeleton .product-picture{height:187px}
.skeleton-block,
.skeleton-line{
  background:linear-gradient(90deg,#f2f3f5 25%,#e6e8eb 37%,#f2f3f5 63%);
  background-size:400% 100%;
  animation:catalog-shimmer 1.15s ease infinite;
}
.skeleton-line{height:12px;border-radius:6px;margin-top:10px}
.skeleton-line--lg{width:82%;height:15px}
.skeleton-line--sm{width:46%}
@keyframes catalog-shimmer{from{background-position:100% 0}to{background-position:0 0}}
.product-picture img[data-src]{opacity:0}
.product-picture img.is-loaded,
.product-tile-showcase img.is-loaded{opacity:1;transition:opacity .25s ease}
.catalog-infinite .infinite-status{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:28px 12px 12px;color:var(--muted);font-size:13px;font-weight:600;
}
.catalog-infinite .infinite-status[hidden],
.catalog-infinite .infinite-sentinel[hidden],
.catalog-infinite .infinite-end[hidden]{
  display:none !important;
}
.catalog-infinite .infinite-spinner{
  width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(27,42,74,.15);border-top-color:var(--orange);
  animation:catalog-spin .7s linear infinite;
}
@keyframes catalog-spin{to{transform:rotate(360deg)}}
.catalog-infinite .infinite-sentinel{height:1px;width:100%;pointer-events:none}
.catalog-infinite .infinite-end{
  text-align:center;padding:20px 12px 8px;margin:0;
  font-size:13px;color:var(--muted);font-weight:600;
}
.brand-detail-identity{display:flex;gap:18px;align-items:center;min-width:0}
.brand-detail-logo{
  width:88px;height:88px;object-fit:contain;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px;flex-shrink:0;
}

@media(max-width:960px){
  .filter-drawer-toggle{display:flex}
  .filters-close{display:block}
  .sidebar-filters{
    position:fixed!important;z-index:200!important;top:0!important;left:0!important;bottom:0!important;
    width:min(360px,92vw)!important;max-width:360px!important;
    height:100dvh!important;margin:0!important;border-radius:0!important;
    transform:translateX(-105%);transition:transform .22s ease;
    overflow:auto;box-shadow:none;padding:20px!important;
    background:#fff!important;display:block!important;
  }
  .sidebar-filters.is-open,
  .filters.is-open,
  .filters.filters-open{
    display:block!important;
    transform:translateX(0)!important;
    box-shadow:12px 0 40px rgba(0,0,0,.22)!important;
    inset:auto!important;
    top:0!important;left:0!important;bottom:0!important;
    right:auto!important;
    z-index:200!important;
  }
  .filter-backdrop:not([hidden]){
    display:block!important;position:fixed;inset:0;z-index:190!important;background:rgba(20,24,30,.5);border:0;
  }
  body.filters-open{overflow:hidden}
  body.filters-open .site-header{z-index:40!important}
  .page-title-band .catalog-heading,
  .catalog-heading{
    flex-direction:row!important;
    align-items:flex-end!important;
    justify-content:space-between;
    gap:12px;
    padding:18px 0 16px!important;
  }
  .catalog-heading h1{font-size:26px!important;margin:0!important}
  .catalog-heading p{margin-top:6px!important;font-size:13px!important;line-height:1.45!important}
  .catalog-heading .result-total{display:none!important}
  .catalog-layout{padding-top:16px!important;padding-bottom:40px!important;gap:14px!important}
  .filter-drawer-toggle{
    min-height:48px;margin:0 0 10px;padding:10px 12px;border-radius:12px;
    box-shadow:0 6px 16px rgba(27,42,74,.16);
  }
  .filter-drawer-toggle-icon{width:34px;height:34px;border-radius:8px}
  .filter-drawer-toggle-icon svg{width:17px;height:17px}
  .filter-drawer-toggle-copy strong{font-size:14px}
  .filter-drawer-toggle-copy small{display:none}
  .filter-drawer-toggle-action{min-height:30px;padding:0 12px;font-size:11px}
  .catalog-toolbar{
    padding:0;gap:8px;margin-bottom:12px;border:0;border-radius:0;
    box-shadow:none;background:transparent;
  }
  .catalog-toolbar-form{
    display:flex;
    gap:8px;
    align-items:stretch;
  }
  .catalog-sort{width:100%;min-width:0;max-width:none;border-radius:10px}
  .catalog-sort{min-height:42px;padding:0 10px 0 12px}
  .catalog-sort select{height:40px;font-size:13px}
  .product-grid.catalog-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  .pagination{gap:6px}
  .pagination a,.pagination .pagination-nav{min-width:34px;height:34px;font-size:12px}
  .brand-detail-identity{align-items:flex-start}
  .brand-detail-logo{width:64px;height:64px}
}

@media(max-width:700px){
  .product-grid.catalog-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .catalog-toolbar-form{flex-direction:column;align-items:stretch}
  .page-heading p{font-size:13px}
  .top-bar .top-right .info-item{display:none}
  .nav-inner{gap:10px}
  .quote-basket span small{display:none}
  .header-search-panel .header-search{flex-wrap:nowrap}
  .header-search-panel input{font-size:14px}

  /* app.css hides .nav-band on mobile (React-era). PHP header lives IN nav-band — keep it visible. */
  .nav-band,.nav-bar{
    display:block!important;
    position:relative!important;
    z-index:60!important;
    box-shadow:none!important;
  }
  .nav-inner,.nav-bar-inner{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    min-height:60px!important;
    padding:8px 0!important;
  }
  .nav-brand .site-logo{height:40px!important;max-width:150px!important}
  .nav-actions{gap:8px!important}
  .search-trigger{width:38px;height:38px}
  .quote-basket{
    padding:8px 10px!important;
    gap:6px!important;
  }
  .quote-basket span{display:none!important}
  .mobile-menu-toggle{
    display:grid!important;
    place-items:center;
    width:40px;height:40px;
    border:1px solid rgba(255,255,255,.2)!important;
    border-radius:8px;
    color:#fff!important;
    font-size:20px;
  }
  .nav-inner nav,
  .nav-band nav,
  #mobile-nav{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    position:fixed!important;
    top:0!important;left:0!important;right:auto!important;bottom:0!important;
    width:min(300px,86vw)!important;
    max-width:300px!important;
    height:100dvh!important;
    background:var(--navy)!important;
    padding:0 0 24px!important;
    gap:0!important;
    z-index:121!important;
    transform:translateX(-105%);
    transition:transform .28s ease;
    visibility:hidden;
    pointer-events:none;
    overflow-y:auto;
    border-top:0!important;
    box-shadow:12px 0 40px rgba(0,0,0,.28);
  }
  .nav-band.is-open,
  #nav-band.is-open,
  body.nav-open .nav-band,
  body.nav-open .nav-bar,
  body.nav-open .site-header{
    z-index:120!important;
  }
  .nav-band.is-open .nav-inner nav,
  #nav-band.is-open nav,
  .nav-band.is-open nav,
  body.nav-open #mobile-nav{
    transform:translateX(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .nav-band.is-open nav a,
  #mobile-nav a{
    padding:15px 18px!important;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:15px!important;
    position:relative;
    z-index:2;
    pointer-events:auto!important;
  }
  body.nav-open .mobile-nav-backdrop{
    z-index:110!important;
  }

  .top-bar,.topbar{min-height:0!important}
  .top-bar-inner,.topbar-inner{
    padding:8px 0!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
  }
  .top-left .info-item:not([href^="tel"]){display:none!important}
  .top-right .info-item{display:none!important}
  .topbar-whatsapp{padding-left:0!important;border:0!important;font-size:12px!important}
  .top-bar a,.topbar a{font-size:12px!important}

  .hero{min-height:auto!important}
  .hero-content{padding:36px 0 28px!important}
  .hero h1{font-size:clamp(28px,8vw,36px)!important;margin-bottom:14px!important}
  .hero-copy>p{font-size:14px!important;line-height:1.65!important;max-width:100%!important;margin-bottom:20px!important}
  .hero-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline-light{
    width:100%;
    justify-content:center;
    min-height:46px;
    font-size:13px!important;
  }
  .hero-bottom{
    margin-top:24px!important;
    flex-wrap:wrap;
    gap:14px;
  }
  .trust-strip,.trust-bar{padding:18px 0!important}
  .trust-grid{
    grid-template-columns:1fr 1fr!important;
    gap:0!important;
  }
  .trust-grid>div{
    padding:14px 10px!important;
    gap:10px!important;
    border-right:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
  }
  .trust-grid>div:nth-child(2n){border-right:0!important}
  .trust-grid strong{font-size:12px!important}
  .trust-grid small{font-size:11px!important;line-height:1.4}
}