/* ==========================================================================
   WOW24 — brands list (/prekiu-zenklai), design B · Vitrina.
   Markup: resources/views/frontend/pages/b/brands.blade.php
   Tokens: site-designs.css. Sticky tools bar: filter field + A–Z letters.
   ========================================================================== */
html[data-pdp-design="b"] .br-section{ width:100%; align-self:stretch; margin:0 !important; padding:0 !important; background:var(--paper); }
html[data-pdp-design="b"] .br-page{
    width:100%; max-width:1280px; margin:0 auto; padding:0 var(--x6) 120px; box-sizing:border-box;
    font-family:'Jost',sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased;
}
html[data-pdp-design="b"] .br-page *{ box-sizing:border-box; border-radius:0 !important; }
html[data-pdp-design="b"] .br-page :is(h1,h2,p,a,span,li,ul,input,label){ font-family:'Jost',sans-serif; }
html[data-pdp-design="b"] .br-page :is(h1,h2,p,ul){ margin:0; padding:0; }
html[data-pdp-design="b"] .br-page svg{ display:block; flex:0 0 auto; }
html[data-pdp-design="b"] .br-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

html[data-pdp-design="b"] .br-head{ padding-top:var(--x5); }
html[data-pdp-design="b"] .br-crumbs{ display:block; min-height:0; }/* the plate strip (.bcx-list, site-designs.css) */
html[data-pdp-design="b"] .br-titlerow{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--x2) var(--x4); margin-top:var(--x6); }
html[data-pdp-design="b"] .br-page .br-title{
    font-size:clamp(32px, 1.6vw + 22px, 52px) !important; font-weight:200 !important; line-height:1.05 !important;
    letter-spacing:-.02em !important; text-transform:none !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .br-page .br-count{ font-size:var(--t-base) !important; color:var(--muted) !important; }

/* tools: filter + letters, sticky under the viewport top */
html[data-pdp-design="b"] .br-tools{
    position:sticky; top:0; z-index:5; display:grid; grid-template-columns:280px minmax(0,1fr); gap:var(--x5); align-items:center;
    margin-top:var(--x6); padding:var(--x3) 0; background:var(--paper); border-top:1px solid var(--ink); border-bottom:1px solid var(--rule);
}
html[data-pdp-design="b"] .br-find{ position:relative; display:flex; align-items:center; margin:0; color:var(--muted); }
html[data-pdp-design="b"] .br-find svg{ position:absolute; left:0; pointer-events:none; }
html[data-pdp-design="b"] .br-page .br-find input{
    width:100%; height:44px !important; margin:0 !important; padding:0 0 0 28px !important; border:0 !important; border-bottom:1px solid var(--rule) !important;
    background:transparent !important; box-shadow:none !important; outline:none; font-size:16px !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .br-page .br-find input:focus{ border-bottom-color:var(--ink) !important; }
html[data-pdp-design="b"] .br-find input::-webkit-search-cancel-button{ -webkit-appearance:none; }
html[data-pdp-design="b"] .br-letters{ display:flex; flex-wrap:wrap; gap:0; }
html[data-pdp-design="b"] .br-page .br-letters a{
    display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:40px; padding:0 6px;
    font-size:var(--t-base) !important; font-weight:400; color:var(--ink2) !important; text-decoration:none !important; transition:background-color .15s ease, color .15s ease;
}
html[data-pdp-design="b"] .br-page .br-letters a:hover{ color:var(--ink) !important; background:var(--surface); }
html[data-pdp-design="b"] .br-page .br-letters a.is-on{ background:var(--ink); color:var(--paper) !important; }
html[data-pdp-design="b"] .br-page .br-letters a.is-off{ color:var(--rule) !important; pointer-events:none; }

/* groups */
html[data-pdp-design="b"] .br-group{
    display:grid; grid-template-columns:120px minmax(0,1fr); gap:var(--x5); padding:var(--x6) 0; border-bottom:1px solid var(--rule);
    scroll-margin-top:84px;
}
html[data-pdp-design="b"] .br-group[hidden]{ display:none; }
html[data-pdp-design="b"] .br-page .br-letter{
    font-size:56px !important; font-weight:200 !important; line-height:1 !important; letter-spacing:-.02em; color:var(--ink) !important; text-transform:none !important;
}
html[data-pdp-design="b"] .br-list{ list-style:none; columns:4 200px; column-gap:var(--x6); }
html[data-pdp-design="b"] .br-list li{ margin:0; padding:0; break-inside:avoid; }
html[data-pdp-design="b"] .br-list li[hidden]{ display:none; }
html[data-pdp-design="b"] .br-page .br-list a{
    display:flex; align-items:baseline; justify-content:space-between; gap:var(--x3); min-height:36px; padding:var(--x1) 0;
    color:var(--ink) !important; text-decoration:none !important;
}
html[data-pdp-design="b"] .br-page .br-name{ font-size:15px !important; line-height:1.35; color:inherit !important; overflow-wrap:anywhere; }
html[data-pdp-design="b"] .br-page .br-n{ flex:0 0 auto; font-size:var(--t-sm) !important; color:var(--muted) !important; font-variant-numeric:tabular-nums; }
html[data-pdp-design="b"] .br-page .br-list a:hover .br-name{ text-decoration:underline; text-underline-offset:3px; }
html[data-pdp-design="b"] .br-page .br-empty{ padding:var(--x7) 0; font-size:var(--t-lg) !important; color:var(--muted) !important; }

@media (max-width:991.98px){
    html[data-pdp-design="b"] .br-page{ padding:0 var(--x5) var(--x8); }
    html[data-pdp-design="b"] .br-tools{ grid-template-columns:minmax(0,1fr); gap:var(--x2); }
    html[data-pdp-design="b"] .br-letters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--x5) * -1); padding:0 var(--x5); }
    html[data-pdp-design="b"] .br-letters::-webkit-scrollbar{ display:none; }
    html[data-pdp-design="b"] .br-page .br-letters a{ min-width:40px; height:44px; }
    html[data-pdp-design="b"] .br-group{ grid-template-columns:72px minmax(0,1fr); scroll-margin-top:124px; }
    html[data-pdp-design="b"] .br-page .br-letter{ font-size:44px !important; }
}
@media (max-width:767.98px){
    html[data-pdp-design="b"] .br-page{ padding:0 var(--x4) var(--x7); }
    html[data-pdp-design="b"] .br-letters{ margin:0 calc(var(--x4) * -1); padding:0 var(--x4); }
    html[data-pdp-design="b"] .br-group{ grid-template-columns:minmax(0,1fr); gap:var(--x2); padding:var(--x5) 0; }
    html[data-pdp-design="b"] .br-page .br-letter{ font-size:36px !important; }
    html[data-pdp-design="b"] .br-list{ columns:2 140px; column-gap:var(--x4); }
    html[data-pdp-design="b"] .br-page .br-list a{ min-height:44px; }
}
html[data-pdp-design="b"] .br-page :is(a, input):focus-visible{ outline:2px solid var(--ink) !important; outline-offset:2px; }