/* Vapovor theme — skruptfilter components (moved from vapovor-components.css, 19/10/2026). */
body #main :is(.skf-summary .skf-item) { border: 1px solid var(--vvp-ui-info-line); border-radius: var(--vvp-ui-info-radius); background: var(--vvp-ui-info-bg); }
body .skbp--navigation { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--vvp-ui-space-6); }
body .skbp--navigation .skbp__heading { grid-column: 1; grid-row: 1; margin: 0; }
body .skbp--navigation .skbp__heading p { font-weight: 300; }
body .skbp--navigation .skbp__items { grid-column: 1 / -1; gap: 0 var(--vvp-ui-section-gap); padding-top: var(--vvp-ui-space-4); }
body .skbp--navigation .skbp__link { display: block; align-content: center; min-height: 64px; padding: var(--vvp-ui-space-4) 0; border: 0; border-radius: 0; background: transparent; color: var(--vvp-ds-action); }
body .skbp--navigation .skbp__link > span:not([aria-hidden]) { font-size: clamp(16px,1.25vw,18px); font-weight: 500; line-height: 1.35; }
body .skbp--navigation .skbp__link > [aria-hidden] { display: inline-block; margin-inline-start: 8px; font-size: 14px; line-height: 1; opacity: .65; }
body .skbp--navigation .skbp__link:hover { background: transparent; color: var(--vvp-ds-action); }
body .skbp--navigation .skbp__link:is(:hover,:focus-visible) > [aria-hidden] { opacity: 1; }
body .skbp--navigation .skbp__all { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; min-height: 44px; margin: 0; }
body .skbp--navigation .skbp__all > [aria-hidden] { color: var(--vvp-ds-accentText); }
body .skbp--list.skbp--navigation:has(> .skbp__heading) { grid-template-columns: minmax(0,1fr); }
body .skbp--list.skbp--navigation:has(> .skbp__heading) > .skbp__all { grid-column: 1; grid-row: auto; justify-self: start; order: 2; }
body .skbp--list.skbp--navigation:has(> .skbp__heading) > .skbp__items { order: 1; }
body .skbp--navigation .skbp__item { min-width: 0; }
@media (min-width: 768px) {
  body .skbp--list.skbp--navigation > .skbp__items { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body .skbp--navigation .skbp__link { min-height: 88px; padding-block: var(--vvp-ui-space-5); }
}
@media (min-width: 1200px) {
  body .skbp--list.skbp--navigation:has(> .skbp__heading) { grid-template-columns: minmax(0,.85fr) minmax(0,1.65fr); column-gap: var(--vvp-ui-section-gap); row-gap: var(--vvp-ui-space-3); }
  body .skbp--list.skbp--navigation:has(> .skbp__heading) > .skbp__all { grid-row: 2; align-self: start; }
  body .skbp--list.skbp--navigation:has(> .skbp__heading) > .skbp__items { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 0; border: 0; }
}
body .skbp--inline.skbp--brands .skbp__heading { margin-bottom: var(--vvp-ui-space-4); }
body .skbp--inline.skbp--brands .skbp__heading h2 { font-family: var(--vvp-font-ui); font-size: 12px; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; color: var(--vvp-ds-muted); }
body .skbp--inline.skbp--brands .skbp__heading h2::before { content: ''; display: inline-block; width: 18px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--vvp-ds-accentText); }
body .skbp--inline.skbp--brands .skbp__item:not(:last-child)::after { content: "/" / ""; position: absolute; inset-inline-end: -.5ch; top: 50%; width: 1ch; transform: translateY(-50%); text-align: center; pointer-events: none; color: var(--vvp-ds-muted); font: 300 20px/1 var(--vvp-font-ui); opacity: .55; }
body .skbp--inline.skbp--brands .skbp__link { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--vvp-ds-action); white-space: nowrap; font-family: var(--vvp-font-ui); font-size: clamp(20px,2vw,26px); font-weight: 700; letter-spacing: -.025em; }
body .skbp--inline.skbp--brands .skbp__link > [aria-hidden] { display: none; }
body .skbp--inline.skbp--brands .skbp__link:hover { color: var(--vvp-ds-accentText); }
@media (max-width: 767.98px) {
  body .skbp--navigation { grid-template-columns: minmax(0,1fr); gap: var(--vvp-ui-space-3); }
  body .skbp--navigation .skbp__all { grid-column: 1; grid-row: auto; justify-self: start; order: 1; }
  body .skbp--navigation .skbp__items { order: 2; padding-top: 0; }
  body .skbp--navigation .skbp__link { min-height: 48px; padding-block: var(--vvp-ui-space-3); }
  body .skbp--inline.skbp--brands .skbp__heading { margin-bottom: var(--vvp-ui-space-3); }
}
body #wrapper #main .skrupt-brands :is(.skrupt-brands__control-top,.skrupt-brands__tools,.skrupt-brands__alphabet) { min-width: 0; max-width: 100%; }

/* Landing pages : bandeau aligné sur celui des catégories (texte centré, intro à largeur de lecture). */
body:not(#category) #main > #js-product-list-header.skf-landing-header, #js-product-list-header.skf-landing-header h1 { text-align: center; }
#js-product-list-header.skf-landing-header .skf-landing-intro { max-width: 760px; margin: 12px auto 0; text-align: center; }
#js-product-list-header.skf-landing-header .skf-landing-intro p { margin-bottom: 12px; }
#js-product-list-header.skf-landing-header .skf-landing-intro p:last-child { margin-bottom: 0; }

/* Lot 5 (20/10/2026): brand index letters as neutral compact buttons; the selected one is primary. */
body #wrapper #main .skrupt-brands .skrupt-brands__alphabet > button { min-width: var(--vvp-control-height-compact); min-height: var(--vvp-control-height-compact); border-radius: var(--vvp-radius-pill); background: var(--vvp-color-interaction-bg); color: var(--vvp-color-action); font-size: var(--vvp-control-font-size-compact); font-weight: var(--vvp-control-weight); }
body #wrapper #main .skrupt-brands .skrupt-brands__alphabet > button:hover { background: var(--vvp-color-interaction-hover); }
body #wrapper #main .skrupt-brands .skrupt-brands__alphabet > button[aria-pressed="true"] { background: var(--vvp-color-action); color: #fff; }

/* Lot 6 (20/10/2026): brand directory colours on the theme palette. */
body #wrapper #main .skrupt-brands--editorial { --skb-text-color: var(--vvp-color-ink); --skb-accent-color: var(--vvp-color-accent); --skb-navy: var(--vvp-color-action); --skb-muted: var(--vvp-color-text-secondary); --skb-soft: var(--vvp-color-subtle); --skb-line: var(--vvp-color-line); }