/* ==========================================================================
   Valsteel: loja [vs_loja] e páginas de marca [vs_marca]
   Usa a abertura, a barra de pesquisa e a ajuda da página de categoria (vs-categoria.css).
   ========================================================================== */

/* Abertura sem imagem: o texto ocupa a largura toda */
.vs .vs-ch-inner.vs-lj-hero--wide { grid-template-columns: minmax(0, 1fr); }
.vs .vs-ch-actions.vs-cluster { gap: var(--vs-space-3); }
.vs a.vs-lj-quote { display: inline-flex; align-items: center; gap: var(--vs-space-2); min-height: 44px; padding: .5rem 1.125rem; font-size: var(--vs-fs-sm); font-weight: 700; color: var(--vs-white); text-decoration: none; background: var(--vs-orange); transition: background-color var(--vs-fast); }
.vs a.vs-lj-quote .vs-icon { width: 18px; height: 18px; color: var(--vs-white); }
.vs a.vs-lj-quote:hover { color: var(--vs-white); background: var(--vs-orange-dark); }

/* Logótipo da marca no lugar da imagem */
.vs .vs-lj-logo { padding: 14%; }
.vs .vs-lj-logo img { inset: 14%; width: 72%; height: 72%; mix-blend-mode: normal; }

/* Títulos de secção */
.vs .vs-lj-section-title { margin: 0 0 var(--vs-space-5); text-transform: none; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 750; line-height: 1.15; letter-spacing: -.025em; color: var(--vs-navy); }
.vs .vs-lj-section-title em { font-style: normal; font-weight: 300; }

/* Gamas ---------------------------------------------------------------- */
.vs .vs-lj-ranges { padding-block: var(--vs-space-7) 0; }
.vs .vs-lj-range-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vs-space-6); }
.vs .vs-lj-range-group { display: grid; align-content: start; gap: var(--vs-space-3); }
.vs .vs-lj-range-brand { margin: 0; font-size: var(--vs-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vs .vs-lj-range-brand a { color: var(--vs-steel-600); text-decoration: none; }
.vs .vs-lj-range-brand a:hover { color: var(--vs-navy); }
.vs .vs-lj-range-list { display: flex; flex-wrap: wrap; gap: var(--vs-space-2); margin: 0; padding: 0; list-style: none; }
.vs .vs-lj-range-list a { display: inline-flex; align-items: center; gap: var(--vs-space-2); min-height: 40px; padding: .375rem .875rem; font-size: var(--vs-fs-sm); font-weight: 600; color: var(--vs-navy); text-decoration: none; background: var(--vs-white); border: 1px solid var(--vs-steel-200); transition: border-color var(--vs-fast), color var(--vs-fast), transform var(--vs-fast); }
.vs .vs-lj-range-list .vs-icon { width: 14px; height: 14px; color: var(--vs-steel-400); transition: color var(--vs-fast), transform var(--vs-fast); }
.vs .vs-lj-range-list a:hover { border-color: var(--vs-navy); transform: translateY(-1px); }
.vs .vs-lj-range-list a:hover .vs-icon { color: var(--vs-orange); transform: translateX(2px); }

/* Grelha de produtos ------------------------------------------------- */
.vs .vs-lj { padding-block: var(--vs-space-7) var(--vs-space-8); }
.vs .vs-lj-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--vs-space-3); margin: 0 0 var(--vs-space-5); }
.vs .vs-lj-select { position: relative; display: grid; gap: 4px; min-width: 180px; }
.vs .vs-lj-select > span { font-size: var(--vs-fs-xs); font-weight: 600; color: var(--vs-steel-600); }
.vs .vs-lj-select select { width: 100%; height: 48px; margin: 0; padding: 0 40px 0 14px; font-family: var(--vs-font); font-size: var(--vs-fs-sm); font-weight: 500; color: var(--vs-ink); background: var(--vs-white); border: 1px solid var(--vs-steel-300); border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }
.vs .vs-lj-select select:hover { border-color: var(--vs-steel-400); }
.vs .vs-lj-select select:focus { border-color: var(--vs-navy); outline: none; box-shadow: 0 0 0 3px rgba(29, 88, 126, .18); }
.vs .vs-lj-select .vs-icon { position: absolute; right: 14px; bottom: 15px; width: 18px; height: 18px; color: var(--vs-steel-400); pointer-events: none; }
.vs .vs-lj-bar .vs-ct-search { align-self: flex-end; }

.vs .vs-lj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vs-space-3); margin: 0; padding: 0; list-style: none; }
.vs .vs-lj-grid > li { display: flex; min-width: 0; }
.vs .vs-lj-grid > li[hidden] { display: none; }
.vs a.vs-lj-card { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: var(--vs-space-4); flex: 1; min-width: 0; padding: var(--vs-space-3); padding-right: var(--vs-space-4); color: var(--vs-ink); text-decoration: none; background: var(--vs-white); border: 1px solid var(--vs-steel-200); transition: border-color var(--vs-fast), box-shadow var(--vs-mid), transform var(--vs-mid) var(--vs-ease); }
.vs .vs-lj-media { display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; background: var(--vs-steel-50); }
.vs .vs-lj-media img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; transition: transform 500ms var(--vs-ease); }
.vs .vs-lj-placeholder .vs-icon { width: 28px; height: 28px; color: var(--vs-steel-300); }
.vs .vs-lj-body { display: grid; align-content: center; gap: 3px; min-width: 0; }
.vs .vs-lj-cat { overflow: hidden; font-size: var(--vs-fs-xs); font-weight: 600; color: var(--vs-steel-600); white-space: nowrap; text-overflow: ellipsis; }
.vs .vs-lj-name { display: -webkit-box; overflow: hidden; font-size: .9375rem; font-weight: 650; line-height: 1.3; color: var(--vs-navy); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vs .vs-lj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--vs-space-3); margin-top: 2px; }
.vs .vs-lj-sku { font-size: var(--vs-fs-xs); font-variant-numeric: tabular-nums; color: var(--vs-steel-600); }
.vs .vs-lj-arrow { display: grid; place-items: center; width: 32px; height: 32px; color: var(--vs-steel-400); border: 1px solid var(--vs-steel-200); transition: background-color var(--vs-fast), color var(--vs-fast), border-color var(--vs-fast), transform var(--vs-mid) var(--vs-ease); }
.vs .vs-lj-arrow .vs-icon { width: 15px; height: 15px; }
.vs a.vs-lj-card:hover, .vs a.vs-lj-card:focus-visible { border-color: var(--vs-navy); box-shadow: 0 16px 32px -26px rgba(15, 35, 48, .55); transform: translateY(-2px); }
.vs a.vs-lj-card:hover .vs-lj-media img { transform: scale(1.08); }
.vs a.vs-lj-card:hover .vs-lj-arrow, .vs a.vs-lj-card:focus-visible .vs-lj-arrow { color: var(--vs-white); background: var(--vs-orange); border-color: var(--vs-orange); transform: translateX(2px); }

/* Marca sem produtos online ------------------------------------------ */
.vs .vs-lj-empty-brand { padding-block: var(--vs-space-7); }
.vs .vs-lj-empty-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--vs-space-5); padding: var(--vs-space-6); background: var(--vs-white); border: 1px solid var(--vs-steel-200); }
.vs .vs-lj-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; color: var(--vs-navy); background: var(--vs-steel-100); }
.vs .vs-lj-empty-icon .vs-icon { width: 26px; height: 26px; }
.vs .vs-lj-empty-card .vs-h3 { margin: 0 0 var(--vs-space-2); text-transform: none; }
.vs .vs-lj-empty-card .vs-h3 em { font-style: normal; font-weight: 300; }
.vs .vs-lj-empty-card .vs-text { max-width: 62ch; margin: 0; color: var(--vs-steel-600); }
.vs .vs-lj-empty-actions { display: flex; flex-wrap: wrap; gap: var(--vs-space-3); }

/* Marcas ---------------------------------------------------------------- */
.vs .vs-lj-brands { padding-block: var(--vs-space-7) var(--vs-space-8); background: var(--vs-steel-50); border-top: 1px solid var(--vs-steel-200); }
.vs .vs-lj-brand-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--vs-space-3); margin: 0; padding: 0; list-style: none; }
.vs .vs-lj-brand-list li { display: flex; }
.vs a.vs-lj-brand { display: grid; grid-template-rows: 96px auto; flex: 1; color: var(--vs-ink); text-decoration: none; background: var(--vs-white); border: 1px solid var(--vs-steel-200); transition: border-color var(--vs-fast), transform var(--vs-mid) var(--vs-ease), box-shadow var(--vs-mid); }
.vs .vs-lj-brand-logo { display: grid; place-items: center; padding: var(--vs-space-4) var(--vs-space-5); }
.vs .vs-lj-brand-logo img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter var(--vs-mid), opacity var(--vs-mid); }
.vs .vs-lj-brand-name { padding: var(--vs-space-3) var(--vs-space-4); font-size: var(--vs-fs-sm); font-weight: 600; color: var(--vs-navy); border-top: 1px solid var(--vs-steel-200); }
.vs a.vs-lj-brand:hover { border-color: var(--vs-navy); transform: translateY(-2px); box-shadow: 0 16px 32px -26px rgba(15, 35, 48, .5); }
.vs a.vs-lj-brand:hover img, .vs a.vs-lj-brand.is-current img { filter: none; opacity: 1; }
.vs a.vs-lj-brand.is-current { border-color: rgba(236, 115, 40, .45); }
.vs a.vs-lj-brand.is-current .vs-lj-brand-name { color: var(--vs-orange-text); }

/* Responsivo ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .vs .vs-lj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .vs .vs-lj-range-groups { grid-template-columns: minmax(0, 1fr); }
  .vs .vs-lj-select { flex: 1 1 160px; min-width: 0; }
  .vs .vs-lj-empty-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .vs .vs-lj-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .vs a.vs-lj-card { grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--vs-space-3); }
  .vs .vs-lj-media { width: 64px; height: 64px; }
  .vs .vs-lj-empty-actions .vs-btn { width: 100%; justify-content: center; }
}

/* Pesquisa e páginas no servidor ------------------------------------- */
.vs .vs-lj { scroll-margin-top: 110px; }
.vs .vs-lj-bar .vs-lj-go { min-height: 48px; border: 0; font-family: var(--vs-font); cursor: pointer; }
.vs .vs-lj-bar .vs-ct-clear { align-self: center; }
.vs .vs-lj-bar.is-loading { opacity: .6; pointer-events: none; }
.vs .vs-lj-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--vs-space-2); margin-top: var(--vs-space-6); }
.vs .vs-lj-page { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--vs-space-3); font-size: var(--vs-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--vs-navy); text-decoration: none; background: var(--vs-white); border: 1px solid var(--vs-steel-200); transition: border-color var(--vs-fast), background-color var(--vs-fast); }
.vs a.vs-lj-page:hover { color: var(--vs-navy); border-color: var(--vs-navy); }
.vs .vs-lj-page.is-current { color: var(--vs-white); background: var(--vs-navy); border-color: var(--vs-navy); }
.vs .vs-lj-page--nav { font-size: 1.25rem; }
.vs .vs-lj-page-gap { color: var(--vs-steel-400); }