/* ==========================================================================
   WOW24 — category / search listing, design B · Vitrina (sandbox).
   Markup: resources/views/frontend/pages/b/product.blade.php
           resources/views/components/b/simple-product-list.blade.php
   Cards:  partials/product-loop-item-card.blade.php (shared with production and
           with the AJAX "load more" HTML) — restyled here, never edited.
   JS:     public/js/listing-b.js (+ inline JS in the component)
   Tokens: site-designs.css (--x1..x8, --t-*, --ink … --paper, --tap)

     1. tokens + page frame      5. toolbar · chips · sort
     2. head: crumbs, title,     6. grid + card
        lede, subcategory row    7. empty · load more · SEO copy
     3. compact bar (<1200)      8. responsive
     4. filters: sidebar / sheet 9. focus · motion
   Rules: black & white, square corners, Jost; large type weight 200.
   Production CSS sets span/p colour + 16px, i{font-family:Wow24}, body flex,
   so text inside .bl-page is styled explicitly.
   ========================================================================== */

/* ================================================== 1. tokens + page frame */
html[data-pdp-design="b"] .bl-section{
    width:100%; align-self:stretch; margin:0 !important; padding:0 !important; background:var(--paper);
}
html[data-pdp-design="b"] .bl-container{
    width:100%; max-width:1440px; margin:0 auto; padding:0 var(--x6); box-sizing:border-box;
}
html[data-pdp-design="b"] .bl-page{
    --bl-side:280px;
    --bl-gap-x:var(--x5);
    --bl-gap-y:var(--x7);
    --bl-title:clamp(26px, .9vw + 20px, 38px);
    --bl-plate-hover:#eceef0;
    --bl-hdr:64px;
    display:block; width:100%; margin:0; padding:0 0 var(--x8);
    font-family:'Jost',sans-serif; font-size:15px; line-height:1.6; color:var(--ink);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
html[data-pdp-design="b"] .bl-page *,
html[data-pdp-design="b"] .bl-page *::before,
html[data-pdp-design="b"] .bl-page *::after{ box-sizing:border-box; border-radius:0 !important; }
html[data-pdp-design="b"] .bl-page :is(h1,h2,h3,h4,p,a,span,li,ul,label,button,input,select,strong,b,em){ font-family:inherit; }
html[data-pdp-design="b"] .bl-page :is(h1,h2,h3,h4,p){ margin:0; }
html[data-pdp-design="b"] .bl-page ul{ list-style:none; margin:0; padding:0; }
html[data-pdp-design="b"] .bl-page li{ margin:0; padding:0; }
html[data-pdp-design="b"] .bl-page button{ -webkit-appearance:none; appearance:none; border-radius:0; font:inherit; color:inherit; background:none; }
html[data-pdp-design="b"] .bl-page svg{ display:block; flex:0 0 auto; }
html[data-pdp-design="b"] .bl-page a:hover{ color:inherit; }

/* caption voice — one definition */
html[data-pdp-design="b"] .bl-page :is(.bl-count,.bl-eyebrow,.bl-sec-t > span,.bl-sheet-title,.bl-progress-t,.bl-sort-l,.bl-toolbar-count){
    font-size:var(--t-xs) !important; font-weight:500; line-height:1.4; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* ============================================ 2. head: crumbs, title, lede */
html[data-pdp-design="b"] .bl-head{ padding-top:var(--x5); }

html[data-pdp-design="b"] .bl-crumbs .breadcrumbs_section{ margin:0; padding:0; }
html[data-pdp-design="b"] .bl-crumbs .row{ margin:0 !important; }
html[data-pdp-design="b"] .bl-crumbs .crumbsCol{ padding:0 !important; flex:0 0 100%; max-width:100%; }
/* the trail itself is styled once, site-wide (site-designs.css .bcx-*); this page
   only places it */
html[data-pdp-design="b"] .bl-crumbs ul{ margin:0 !important; }

html[data-pdp-design="b"] .bl-titlerow{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--x2) var(--x5);
    margin-top:var(--x6);
}
html[data-pdp-design="b"] .bl-eyebrow{ flex:0 0 100%; }
html[data-pdp-design="b"] .bl-page .bl-title{
    min-width:0; max-width:100%;
    font-size:var(--bl-title) !important; font-weight:200 !important; line-height:1.04 !important;
    letter-spacing:-.025em; color:var(--ink) !important; text-wrap:balance; overflow-wrap:break-word; hyphens:auto;
}
html[data-pdp-design="b"] .bl-count{ font-variant-numeric:tabular-nums; }

html[data-pdp-design="b"] .bl-admin-tools{ display:flex; gap:var(--x2); margin:0 0 var(--x2); }
html[data-pdp-design="b"] .bl-admin-tools--inline{ align-items:center; margin-top:var(--x4); font-size:var(--t-sm); color:var(--muted); }
html[data-pdp-design="b"] .bl-admin-tools--inline span{ font-size:var(--t-sm); color:var(--muted); }
html[data-pdp-design="b"] .bl-page .bl-admin-btn{
    display:inline-flex; align-items:center; height:28px; padding:0 var(--x3); cursor:pointer;
    border:1px dashed var(--rule); font-size:var(--t-xs); letter-spacing:.08em; color:var(--muted);
}
html[data-pdp-design="b"] .bl-page .bl-admin-btn:hover{ border-color:var(--ink); color:var(--ink); }
html[data-pdp-design="b"] .bl-titlerow .bl-admin-btn{ align-self:center; }

/* lede: category description, 3 lines, expandable */
html[data-pdp-design="b"] .bl-lede{ max-width:68ch; margin-top:var(--x4); }
html[data-pdp-design="b"] .bl-page .bl-lede .description-content{ color:var(--ink2) !important; font-size:15px !important; line-height:1.65 !important; }
html[data-pdp-design="b"] .bl-lede .description-content.collapsed{
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
html[data-pdp-design="b"] .bl-lede .description-content.expanded{ display:block; }
html[data-pdp-design="b"] .bl-page :is(.description-content,.h2-paragraph-content) :is(p,li,span,strong,b,em,a,div){
    font-size:inherit !important; line-height:inherit !important; color:inherit !important;
    text-align:left !important; word-spacing:normal !important; font-family:inherit !important;
}
html[data-pdp-design="b"] .bl-page :is(.description-content,.h2-paragraph-content) :is(strong,b){ font-weight:500 !important; color:var(--ink) !important; }
html[data-pdp-design="b"] .bl-page :is(.description-content,.h2-paragraph-content) p{ margin:0 0 .6em !important; }
html[data-pdp-design="b"] .bl-page :is(.description-content,.h2-paragraph-content) :is(h1,h2,h3,h4,h5,h6){
    margin:1em 0 .4em !important; font-size:17px !important; font-weight:400 !important; line-height:1.4 !important;
    letter-spacing:0; color:var(--ink) !important;
}
html[data-pdp-design="b"] .bl-page :is(.description-content,.h2-paragraph-content) :is(ul,ol){ margin:.4em 0 .8em !important; padding-left:1.2em !important; }
html[data-pdp-design="b"] .bl-page :is(.description-content,.h2-paragraph-content) ul{ list-style:square !important; }
html[data-pdp-design="b"] .bl-page :is(.description-content,.h2-paragraph-content) ol{ list-style:decimal !important; }
html[data-pdp-design="b"] .bl-page :is(.description-content,.h2-paragraph-content) li{ margin:0 0 .3em !important; }
html[data-pdp-design="b"] .bl-page :is(.description-content,.h2-paragraph-content) a{
    color:var(--ink) !important; font-weight:400 !important;
    text-decoration:underline !important; text-decoration-thickness:1px !important; text-underline-offset:3px;
}
html[data-pdp-design="b"] .bl-lede-more{ margin-top:var(--x1); }
html[data-pdp-design="b"] .bl-page .description-expand-btn{
    display:inline-flex; align-items:center; gap:var(--x2); min-height:var(--tap); padding:0; border:0; cursor:pointer;
}
html[data-pdp-design="b"] .bl-page .description-expand-btn .toggle-text{
    font-size:var(--t-sm) !important; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:var(--rule);
}
html[data-pdp-design="b"] .bl-page .description-expand-btn:hover .toggle-text{ text-decoration-color:var(--ink); }
html[data-pdp-design="b"] .bl-page .description-expand-btn .bl-chev{ transition:transform .2s ease; }
html[data-pdp-design="b"] .bl-page .description-expand-btn.expanded .bl-chev{ transform:rotate(180deg); }

/* subcategories: square grey plates with the category image, name underneath.
   Desktop/tablet wrap into rows (nothing hidden, no sideways scrolling);
   phones swipe one row. */
html[data-pdp-design="b"] .bl-subcats{ position:relative; margin-top:var(--x6); }
/* flex, not an auto-fill grid: auto-fill adds empty tracks, so centring the grid
   pushed the real tiles left. Flex centres exactly the tiles, last row included. */
html[data-pdp-design="b"] .bl-subcats ul{
    display:flex; flex-wrap:wrap; justify-content:center; gap:var(--x4);
    list-style:none; margin:0; padding:0;
}
html[data-pdp-design="b"] .bl-subcats li{ flex:0 0 112px; width:112px; margin:0; padding:0; min-width:0; }
html[data-pdp-design="b"] .bl-subcat{
    display:flex; flex-direction:column; align-items:center; gap:var(--x2); text-align:center; color:var(--ink) !important; text-decoration:none !important;
}
html[data-pdp-design="b"] .bl-subcat-plate{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:100%; aspect-ratio:1 / 1; background:transparent; overflow:hidden;
}
html[data-pdp-design="b"] .bl-subcat-plate img{
    width:100%; height:100%; object-fit:contain; transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
/* no image: the plate carries the first letter as a quiet mark */
html[data-pdp-design="b"] .bl-subcat:not(.has-img) .bl-subcat-plate::before{
    content:attr(data-initial); font-size:40px; font-weight:200; color:var(--muted);
}
html[data-pdp-design="b"] .bl-subcat-name{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    font-size:var(--t-md) !important; font-weight:400; line-height:1.35; color:var(--ink) !important;
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:transparent;
    transition:text-decoration-color .2s ease;
}
html[data-pdp-design="b"] .bl-subcat:hover .bl-subcat-plate img{ transform:scale(1.04); }
html[data-pdp-design="b"] .bl-subcat:hover .bl-subcat-name{ text-decoration-color:var(--ink); }
html[data-pdp-design="b"] .bl-subcat:focus-visible{ outline-offset:3px !important; }
/* admin preview of categories hidden from customers */
html[data-pdp-design="b"] .bl-subcat.is-hidden-for-users{ opacity:.5; }
html[data-pdp-design="b"] .bl-subcat.is-hidden-for-users .bl-subcat-name{ text-decoration:underline dashed var(--muted); }

/* ====================================================== 3. compact bar (<1200) */
html[data-pdp-design="b"] .bl-bar{ display:none; }

/* ================================================ 4. filters: sidebar / sheet */
html[data-pdp-design="b"] .bl-layout{
    display:grid; grid-template-columns:var(--bl-side) minmax(0,1fr); gap:0 var(--x7);
    align-items:start; margin-top:var(--x6);
}
html[data-pdp-design="b"] .bl-filters{
    display:flex; flex-direction:column; min-width:0;
    padding:0 !important; margin:0 !important; max-width:none !important; width:auto !important;
}
/* sticky + inner scroll only when the results column is taller than the filters
   (listing-b.js measures and sets .bl-stick); short pages keep every filter in flow */
@media (min-width:1200px){
    html[data-pdp-design="b"] .bl-filters.bl-stick{ position:sticky; top:var(--x5); max-height:calc(100vh - 2 * var(--x5)); }
}
html[data-pdp-design="b"] .bl-sheet-head,
html[data-pdp-design="b"] .bl-sheet-foot,
html[data-pdp-design="b"] .bl-scrim{ display:none; }
html[data-pdp-design="b"] .bl-page .simple-filter-sidebar{
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    padding:0 var(--x3) 0 0 !important; margin:0 !important; background:transparent !important;
    scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}

/* section: hairline, caption header, plus/minus */
html[data-pdp-design="b"] .bl-page .bl-sec{
    margin:0 !important; padding:0 !important; border:0 !important; border-top:1px solid var(--rule) !important;
}
html[data-pdp-design="b"] .bl-page .bl-sec:first-child{ border-top-color:var(--ink) !important; }
html[data-pdp-design="b"] .bl-page .bl-sec-h{ margin:0 !important; padding:0 !important; font-size:inherit !important; }
html[data-pdp-design="b"] .bl-page .bl-sec-t{
    display:flex; align-items:center; justify-content:space-between; gap:var(--x3);
    width:100%; min-height:52px; margin:0; padding:0; border:0; cursor:pointer; text-align:left;
}
html[data-pdp-design="b"] .bl-page .bl-sec-t > span:first-child{ color:var(--ink) !important; overflow-wrap:anywhere; }
html[data-pdp-design="b"] .bl-page .bl-pm{ position:relative; display:block; width:11px; height:11px; flex:0 0 11px; }
html[data-pdp-design="b"] .bl-page .bl-pm::before,
html[data-pdp-design="b"] .bl-page .bl-pm::after{
    content:""; position:absolute; left:0; top:5px; width:11px; height:1px; background:var(--ink); transition:transform .2s ease;
}
html[data-pdp-design="b"] .bl-page .bl-pm::after{ transform:rotate(90deg); }
html[data-pdp-design="b"] .bl-page .bl-sec.is-open .bl-pm::after{ transform:rotate(0deg); }
html[data-pdp-design="b"] .bl-page .bl-sec-b{ padding:0 0 var(--x5); }
html[data-pdp-design="b"] .bl-page .bl-sec:not(.curated-attr-section):not(.is-open) .bl-sec-b{ display:none; }
html[data-pdp-design="b"] .bl-page .curated-attr-chevron{ display:none; }

/* category links */
html[data-pdp-design="b"] .bl-page .category-filter-list li{ margin:0 !important; }
html[data-pdp-design="b"] .bl-page .category-filter-link{
    display:flex !important; align-items:center; min-height:36px; padding:0 !important; background:none !important;
    font-size:var(--t-base) !important; line-height:1.35; color:var(--ink2) !important; text-decoration:none;
}
html[data-pdp-design="b"] .bl-page .category-filter-link:hover{ color:var(--ink) !important; text-decoration:underline; text-underline-offset:4px; }
html[data-pdp-design="b"] .bl-page .category-filter-link.active{ color:var(--ink) !important; font-weight:500; }

/* checkbox rows: square box, label, muted count */
html[data-pdp-design="b"] .bl-page .bl-list{ max-height:none !important; overflow:visible !important; }
html[data-pdp-design="b"] .bl-page .bl-check{
    position:relative; display:flex; align-items:center; gap:var(--x3); margin:0 !important; padding:0 !important; min-height:36px;
}
html[data-pdp-design="b"] .bl-page .bl-check input[type="checkbox"]{
    -webkit-appearance:none; appearance:none; flex:0 0 18px; width:18px !important; height:18px !important; margin:0 !important;
    border:1px solid var(--ink2); background:var(--paper) center / 12px 12px no-repeat; cursor:pointer;
    transition:background-color .15s ease, border-color .15s ease;
}
html[data-pdp-design="b"] .bl-page .bl-check input[type="checkbox"]:hover{ border-color:var(--ink); }
html[data-pdp-design="b"] .bl-page .bl-check input[type="checkbox"]:checked{
    background-color:var(--ink); border-color:var(--ink);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E");
}
html[data-pdp-design="b"] .bl-page .bl-check label{
    flex:1 1 auto; min-width:0; margin:0 !important; padding:var(--x1) 0; cursor:pointer;
    font-size:var(--t-base) !important; line-height:1.35; color:var(--ink2) !important; overflow-wrap:anywhere;
}
html[data-pdp-design="b"] .bl-page .bl-check input:checked + label{ color:var(--ink) !important; }
html[data-pdp-design="b"] .bl-page .bl-check .bl-n{
    margin-left:var(--x1); font-size:var(--t-sm) !important; color:var(--muted) !important; font-variant-numeric:tabular-nums;
}
html[data-pdp-design="b"] .bl-page .bl-list.bl-capped .brand-item:nth-child(n+9):not(:has(input:checked)){ display:none !important; }
html[data-pdp-design="b"] .bl-page .bl-more{
    display:inline-flex; align-items:center; min-height:var(--tap); margin:0; padding:0; border:0; cursor:pointer;
    font-size:var(--t-sm) !important; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:var(--rule);
}
html[data-pdp-design="b"] .bl-page .bl-more:hover{ text-decoration-color:var(--ink); }
html[data-pdp-design="b"] .bl-page .curated-attr-loading,
html[data-pdp-design="b"] .bl-page #brand-no-results,
html[data-pdp-design="b"] .bl-page #series-no-results{
    padding:var(--x2) 0 !important; font-size:var(--t-sm) !important; font-style:normal !important; text-align:left !important; color:var(--muted) !important;
}

/* text fields: hairline underline */
html[data-pdp-design="b"] .bl-page :is(.brand-search-container,.series-search-container){ margin:0 0 var(--x3) !important; }
html[data-pdp-design="b"] .bl-page :is(#brand-search-input,#series-search-input,.curated-attr-search){
    display:block; width:100% !important; height:40px !important; margin:0 0 var(--x2) !important; padding:0 !important;
    border:0 !important; border-bottom:1px solid var(--rule) !important; background:transparent !important; box-shadow:none !important;
    font-size:var(--t-base) !important; color:var(--ink);
}
html[data-pdp-design="b"] .bl-page :is(#brand-search-input,#series-search-input,.curated-attr-search)::placeholder{ color:var(--muted); opacity:1; }
html[data-pdp-design="b"] .bl-page :is(#brand-search-input,#series-search-input,.curated-attr-search):focus{ border-bottom-color:var(--ink) !important; }

/* price: slider + two fields + apply */
html[data-pdp-design="b"] .bl-page .bl-price-slider{
    height:18px; margin:var(--x2) 9px var(--x5); border:0; box-shadow:none; background:transparent;
}
html[data-pdp-design="b"] .bl-page .bl-price-slider.is-off{ display:none; }
html[data-pdp-design="b"] .bl-page .bl-price-slider.noUi-target{ background:transparent; border:0; box-shadow:none; }
html[data-pdp-design="b"] .bl-page .bl-price-slider .noUi-base{ top:8px; height:1px; background:var(--rule); }
html[data-pdp-design="b"] .bl-page .bl-price-slider .noUi-connects{ height:1px !important; background:transparent !important; border-radius:0; }
html[data-pdp-design="b"] .bl-page .bl-price-slider .noUi-connect{ height:1px !important; background:var(--ink) !important; }
/* misc.css paints handles as 20px black circles with !important */
html[data-pdp-design="b"] .bl-page .bl-price-slider .noUi-handle{
    top:-9px !important; right:-9px !important; width:18px !important; height:18px !important;
    border:1px solid var(--ink) !important; background:var(--paper) !important; box-shadow:none !important; cursor:grab;
}
html[data-pdp-design="b"] .bl-page .bl-price-slider .noUi-handle.noUi-active,
html[data-pdp-design="b"] .bl-page .bl-price-slider .noUi-handle:hover{ background:var(--ink) !important; }

html[data-pdp-design="b"] .bl-page .price-range-inputs{
    display:grid !important; grid-template-columns:1fr 1fr; gap:var(--x3); margin:0 0 var(--x3);
}
html[data-pdp-design="b"] .bl-page .price-input-group{
    position:relative; display:flex !important; flex-direction:column; align-items:stretch !important; gap:var(--x1) !important;
}
html[data-pdp-design="b"] .bl-page .price-input-group label{
    min-width:0 !important; margin:0 !important; font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.14em; text-transform:uppercase; color:var(--muted) !important;
}
html[data-pdp-design="b"] .bl-page .price-input-group input[type="number"]{
    width:100% !important; min-width:0 !important; height:var(--tap) !important; min-height:0 !important; margin:0;
    padding:0 26px 0 var(--x3) !important; border:1px solid var(--rule) !important; background:var(--paper);
    box-shadow:none !important; font-size:15px !important; color:var(--ink); font-variant-numeric:tabular-nums;
    -moz-appearance:textfield;
}
html[data-pdp-design="b"] .bl-page .price-input-group input[type="number"]::-webkit-inner-spin-button,
html[data-pdp-design="b"] .bl-page .price-input-group input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
html[data-pdp-design="b"] .bl-page .price-input-group input[type="number"]:focus{ border-color:var(--ink) !important; }
html[data-pdp-design="b"] .bl-page .price-input-group .currency{
    position:absolute; right:var(--x3); bottom:0; height:var(--tap); display:flex; align-items:center;
    font-size:var(--t-base) !important; font-weight:400 !important; color:var(--muted) !important; pointer-events:none;
}
html[data-pdp-design="b"] .bl-page .price-filter-submit-btn,
html[data-pdp-design="b"] .bl-page .bl-btn{
    display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:var(--tap) !important;
    margin:0; padding:0 var(--x5) !important; cursor:pointer; transform:none !important;
    border:1px solid var(--ink) !important; background:transparent !important; color:var(--ink) !important;
    font-size:var(--t-sm) !important; font-weight:500 !important; letter-spacing:.16em; text-transform:uppercase; line-height:1;
    transition:background-color .2s ease, color .2s ease;
}
html[data-pdp-design="b"] .bl-page :is(.price-filter-submit-btn,.bl-btn--ghost):hover{ background:var(--ink) !important; color:var(--paper) !important; }
html[data-pdp-design="b"] .bl-page .bl-btn--solid{ background:var(--ink) !important; color:var(--paper) !important; }
html[data-pdp-design="b"] .bl-page .bl-btn--solid:hover{ background:#000 !important; }

/* clear-all at the foot of the sidebar */
html[data-pdp-design="b"] .bl-page .bl-clear{ margin:0 !important; padding:var(--x3) 0 var(--x5) !important; border-top:1px solid var(--rule); }
html[data-pdp-design="b"] .bl-page #clear-filters-btn{
    display:inline-flex; align-items:center; width:auto; min-height:var(--tap); padding:0 !important; border:0 !important;
    background:transparent !important; cursor:pointer;
    font-size:var(--t-sm) !important; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink) !important;
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:var(--rule);
}
html[data-pdp-design="b"] .bl-page #clear-filters-btn:hover{ text-decoration-color:var(--ink); }

/* ================================================= 5. toolbar · chips · sort */
html[data-pdp-design="b"] .bl-toolbar{
    display:flex; align-items:center; justify-content:space-between; gap:var(--x3) var(--x5);
    min-height:52px; margin:0 0 var(--x6); border-top:1px solid var(--ink);
}
html[data-pdp-design="b"] .bl-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--x2) var(--x4); min-width:0; padding:var(--x2) 0; }
html[data-pdp-design="b"] .bl-chip-list{ display:flex; flex-wrap:wrap; gap:var(--x2); }
html[data-pdp-design="b"] .bl-page .bl-chip{
    display:inline-flex; align-items:center; gap:var(--x2); max-width:100%; min-height:36px; padding:0 var(--x3);
    border:1px solid var(--rule); color:var(--ink) !important; text-decoration:none; transition:border-color .2s ease;
}
html[data-pdp-design="b"] .bl-page .bl-chip-t{ font-size:var(--t-md) !important; line-height:1.3; color:var(--ink) !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:28ch; }
html[data-pdp-design="b"] .bl-page .bl-chip:hover{ border-color:var(--ink); }
html[data-pdp-design="b"] .bl-page .bl-clear-link{
    min-height:36px; padding:0; border:0; cursor:pointer;
    font-size:var(--t-sm) !important; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:var(--rule);
}
html[data-pdp-design="b"] .bl-page .bl-clear-link:hover{ text-decoration-color:var(--ink); }
html[data-pdp-design="b"] .bl-sort{ display:flex; align-items:center; gap:var(--x3); flex:0 0 auto; margin:0; }
html[data-pdp-design="b"] .bl-sort-l{ margin:0; }
html[data-pdp-design="b"] .bl-page #sort-products{
    -webkit-appearance:none; appearance:none; height:var(--tap) !important; border:0 !important; background:transparent !important;
    font-size:var(--t-base) !important; color:var(--ink); cursor:pointer;
}
/* JS replaces the native list with a B dropdown; the select stays for applySort */
html[data-pdp-design="b"] .bl-page .bl-sort{ position:relative; }
html[data-pdp-design="b"] .bl-page #sort-products.bl-sort-native{
    position:absolute !important; width:1px !important; height:1px !important; opacity:0; pointer-events:none; overflow:hidden;
}
html[data-pdp-design="b"] .bl-page .bl-sortbtn{
    display:inline-flex; align-items:center; gap:var(--x2); height:var(--tap); margin:0; padding:0;
    background:transparent; border:0; border-radius:0; cursor:pointer;
    font-family:inherit; font-size:var(--t-base); font-weight:400; color:var(--ink);
}
html[data-pdp-design="b"] .bl-page .bl-sortbtn-t{
    font-size:inherit !important; color:inherit !important;
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:transparent;
    transition:text-decoration-color .15s ease;
}
html[data-pdp-design="b"] .bl-page .bl-sortbtn:hover .bl-sortbtn-t,
html[data-pdp-design="b"] .bl-page .bl-sort.is-open .bl-sortbtn-t{ text-decoration-color:var(--ink); }
html[data-pdp-design="b"] .bl-page .bl-sortbtn svg{ transition:transform .2s ease; }
html[data-pdp-design="b"] .bl-page .bl-sort.is-open .bl-sortbtn svg{ transform:rotate(180deg); }
html[data-pdp-design="b"] .bl-page .bl-sortlist{
    position:absolute; top:100%; right:0; z-index:40; min-width:232px; margin:var(--x1) 0 0; padding:var(--x1) 0;
    list-style:none; background:var(--paper); border:1px solid var(--ink); border-radius:0;
    box-shadow:0 16px 32px -20px rgba(17,18,20,.35);
}
html[data-pdp-design="b"] .bl-page .bl-sortlist[hidden]{ display:none; }
html[data-pdp-design="b"] .bl-page .bl-sortlist li{
    position:relative; display:flex; align-items:center; min-height:40px; margin:0; padding:0 var(--x6) 0 var(--x4);
    font-size:var(--t-base); line-height:1.3; color:var(--ink2); cursor:pointer; white-space:nowrap;
}
html[data-pdp-design="b"] .bl-page .bl-sortlist li:hover,
html[data-pdp-design="b"] .bl-page .bl-sortlist li:focus{ background:var(--surface); color:var(--ink); outline:none !important; }
html[data-pdp-design="b"] .bl-page .bl-sortlist li:focus-visible{ box-shadow:inset 2px 0 0 var(--ink); }
html[data-pdp-design="b"] .bl-page .bl-sortlist li[aria-selected="true"]{ color:var(--ink); font-weight:500; }
html[data-pdp-design="b"] .bl-page .bl-sortlist li[aria-selected="true"]::after{
    content:''; position:absolute; right:var(--x4); top:50%; width:9px; height:5px; margin-top:-4px;
    border-left:1.2px solid var(--ink); border-bottom:1.2px solid var(--ink); transform:rotate(-45deg);
}
@media (prefers-reduced-motion:reduce){
    html[data-pdp-design="b"] .bl-page .bl-sortbtn svg, html[data-pdp-design="b"] .bl-page .bl-sortbtn-t{ transition:none; }
}

/* ============================================================ 6. grid + card */
html[data-pdp-design="b"] .bl-page .categoryPageProductRow{
    display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--bl-gap-y) var(--bl-gap-x) !important;
    margin:0 !important; padding:0 !important; row-gap:var(--bl-gap-y) !important;
}
html[data-pdp-design="b"] .bl-page .categoryPageProductRow > *{
    flex:none !important; width:auto !important; max-width:none !important; min-width:0; margin:0 !important; padding:0 !important;
}
html[data-pdp-design="b"] .bl-page .categoryPageProductRow > .banner-2x2{ grid-column:span 2; grid-row:span 2; }
html[data-pdp-design="b"] .bl-page .categoryPageProductRow > .banner-1x4{ grid-column:1 / -1; }
html[data-pdp-design="b"] .bl-page .product-list-banner img{ display:block; width:100%; height:100%; object-fit:cover; }

html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__product_item{
    position:relative; display:flex !important; flex-direction:column; height:100%; margin:0 !important; padding:0 !important;
    border:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; transform:none !important;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .product-image-container{
    position:relative !important; display:block !important; width:100% !important; height:auto !important; aspect-ratio:1 / 1;
    margin:0 !important; padding:0 !important; overflow:hidden; background:var(--surface) !important;
    transition:background-color .3s ease;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__pro_link{
    position:absolute !important; inset:0; display:block !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__pro_link img.img_1{
    position:absolute !important; inset:11% !important; width:78% !important; height:78% !important; max-width:none !important;
    margin:0 !important; object-fit:contain !important; mix-blend-mode:multiply; opacity:1 !important; transform:none !important;
    background:transparent !important;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__pro_link img.img_2{ display:none !important; }
html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__product_item:hover .product-image-container{ background:var(--bl-plate-hover) !important; }

/* wishlist: bare heart in the plate corner, 44px target */
html[data-pdp-design="b"] .bl-page .categoryPageProduct .productWishIcon{
    position:absolute !important; top:0 !important; right:0 !important; left:auto !important; z-index:3;
    display:flex !important; align-items:center; justify-content:center; width:var(--tap) !important; height:var(--tap) !important;
    margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; cursor:pointer;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .productWishIcon i{ font-size:18px !important; color:var(--ink) !important; margin:0 !important; }

/* badges keep their own content; squared and quiet */
html[data-pdp-design="b"] .bl-page .categoryPageProduct .product-image-container [class*="badge"]{ border-radius:0 !important; box-shadow:none !important; }

html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__product_details{
    display:flex !important; flex-direction:column; align-items:stretch !important; flex:1 1 auto;
    margin:0 !important; padding:var(--x4) 0 0 !important; text-align:left !important; background:transparent !important; height:auto !important;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .categoryPage_brandlink{
    display:block !important; margin:0 !important; padding:0 !important; text-align:left !important; height:auto !important;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4 !important;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .categoryPage_brandlink :is(a,span){
    display:inline !important; margin:0 !important; padding:0 !important;
    font-size:var(--t-xs) !important; font-weight:500 !important; line-height:1.4 !important; letter-spacing:.14em !important;
    text-transform:uppercase; color:var(--muted) !important; text-decoration:none;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .categoryPage_brandlink a:hover{ color:var(--ink) !important; }
html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__pro_name{
    display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:calc(2 * 1.45em); height:auto !important; margin:var(--x1) 0 0 !important; padding:0 !important;
    font-size:var(--t-base) !important; font-weight:400 !important; line-height:1.45 !important; letter-spacing:0 !important;
    text-align:left !important; text-transform:none !important; color:var(--ink) !important; white-space:normal !important;
    overflow-wrap:anywhere; text-decoration:none;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__product_item:hover .wsus__pro_name{
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
/* type / category / set lines carry inline text-align:center !important — a shrink-wrapped
   block makes that irrelevant without touching the partial */
html[data-pdp-design="b"] .bl-page .categoryPageProduct :is(.wsus__product_type,.wsus__category,.wsus__set_composition){
    display:block !important; width:fit-content !important; max-width:100% !important;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:var(--t-sm) !important; font-weight:400 !important; color:var(--muted) !important;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__product_type{ margin-top:var(--x1) !important; }
html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__category a{
    font-size:inherit !important; color:inherit !important; text-decoration:none; line-height:inherit !important;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__category a:hover{ color:var(--ink) !important; text-decoration:underline; text-underline-offset:3px; }
html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__price{
    display:block !important; margin:auto 0 0 !important; padding:var(--x2) 0 0 !important; text-align:left !important;
    font-size:var(--t-lg) !important; font-weight:300 !important; line-height:1.3 !important; letter-spacing:0 !important;
    font-variant-numeric:tabular-nums; color:var(--ink) !important;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .add_cart{ display:none !important; }

/* ================================================ 7. empty · load more · SEO */
html[data-pdp-design="b"] .bl-empty{
    display:flex; flex-direction:column; align-items:flex-start; gap:var(--x5);
    padding:var(--x8) 0; border-top:1px solid var(--rule);
}
html[data-pdp-design="b"] .bl-page .bl-empty-t{
    font-size:clamp(24px, .8vw + 20px, 32px) !important; font-weight:200 !important; line-height:1.2 !important;
    letter-spacing:-.015em; color:var(--ink) !important;
}
html[data-pdp-design="b"] .bl-empty .bl-btn{ width:auto; }

html[data-pdp-design="b"] .bl-more-wrap{
    display:flex; flex-direction:column; align-items:center; gap:var(--x3); margin:var(--x8) 0 0 !important; padding:0 !important;
}
html[data-pdp-design="b"] .bl-page .bl-progress-t{ font-variant-numeric:tabular-nums; color:var(--ink2) !important; }
html[data-pdp-design="b"] .bl-page .bl-progress-t span{ font-size:inherit !important; color:var(--ink) !important; }
html[data-pdp-design="b"] .bl-progress{ position:relative; width:min(240px, 60%); height:1px; background:var(--rule); overflow:hidden; }
html[data-pdp-design="b"] .bl-progress i{ position:absolute; left:0; top:0; bottom:0; background:var(--ink); transition:width .4s ease; }
html[data-pdp-design="b"] .bl-page #show-more-btn{
    display:inline-flex; align-items:center; justify-content:center; min-width:240px; min-height:var(--ctl); margin-top:var(--x3);
    padding:0 var(--x7) !important; border:1px solid var(--ink) !important; background:transparent !important; color:var(--ink) !important;
    cursor:pointer; font-size:var(--t-sm) !important; font-weight:500 !important; letter-spacing:.16em !important; text-transform:uppercase;
    transition:background-color .2s ease, color .2s ease;
}
html[data-pdp-design="b"] .bl-page #show-more-btn{ text-decoration:none !important; }
html[data-pdp-design="b"] .bl-page #show-more-btn:hover:not([aria-busy="true"]){ background:var(--ink) !important; color:var(--paper) !important; }
/* it is a link now (crawlable), so "busy" replaces :disabled */
html[data-pdp-design="b"] .bl-page #show-more-btn[aria-busy="true"]{ cursor:progress; pointer-events:none; color:var(--muted) !important; border-color:var(--rule) !important; }

html[data-pdp-design="b"] .bl-seo{
    margin:120px 0 0 !important; padding:var(--x7) 0 0 calc(var(--bl-side) + var(--x7)) !important;
    border-top:1px solid var(--rule); text-align:left !important;
}
html[data-pdp-design="b"] .bl-seo-sec{ position:relative; max-width:68ch; margin:0 !important; }
html[data-pdp-design="b"] .bl-seo-sec + .bl-seo-sec{ margin-top:var(--x7) !important; }
html[data-pdp-design="b"] .bl-page .bl-seo h2{
    margin:0 0 var(--x3) !important; font-size:clamp(22px, .5vw + 19px, 26px) !important; font-weight:300 !important;
    line-height:1.25 !important; letter-spacing:-.01em; color:var(--ink) !important; text-wrap:balance;
}
html[data-pdp-design="b"] .bl-page .h2-paragraph-content{ font-size:15px !important; line-height:1.7 !important; color:var(--ink2) !important; }
html[data-pdp-design="b"] .bl-seo .bl-admin-tools{ position:absolute; top:0; right:calc(100% + var(--x3)); flex-direction:column; }

/* ============================================================= 8. responsive */
@media (min-width:1600px){
    html[data-pdp-design="b"] .bl-page{ --bl-side:300px; --bl-gap-x:var(--x6); }
}

/* tablet + phone: bar, sheet */
@media (max-width:1199px){
    html[data-pdp-design="b"] .bl-page{ --bl-gap-y:var(--x6); }
    html[data-pdp-design="b"] .bl-layout{ display:block; margin-top:0; }
    html[data-pdp-design="b"] .bl-toolbar .bl-sort{ display:none; }
    html[data-pdp-design="b"] .bl-toolbar{ border-top:0; margin-bottom:var(--x5); min-height:0; }
    html[data-pdp-design="b"] .bl-toolbar:not(:has(.bl-chip-list)){ display:none; }
    html[data-pdp-design="b"] .bl-seo{ padding-left:0 !important; margin-top:var(--x8) !important; }
    html[data-pdp-design="b"] .bl-seo .bl-admin-tools{ position:static; flex-direction:row; }

    /* sticky bar */
    html[data-pdp-design="b"] .bl-bar{
        display:block; position:sticky; top:0; z-index:850; margin:var(--x6) calc(var(--x6) * -1) var(--x5);
        background:var(--paper); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
        transition:top .26s cubic-bezier(.2,.7,.2,1);
    }
    html[data-pdp-design="b"]:has(#pdpx-header.pxh-fixed.pxh-show) .bl-bar{ top:var(--bl-hdr); }
    html[data-pdp-design="b"] .bl-bar-in{ display:grid; grid-template-columns:1fr 1fr; }
    html[data-pdp-design="b"] .bl-page .bl-bar-btn{
        display:flex !important; align-items:center; justify-content:center; gap:var(--x2); width:100% !important; max-width:none !important;
        height:52px; margin:0; padding:0 var(--x4) !important; border:0 !important; background:transparent !important; cursor:pointer;
        font-size:var(--t-sm) !important; font-weight:500 !important; letter-spacing:.14em; text-transform:uppercase; color:var(--ink) !important;
    }
    html[data-pdp-design="b"] .bl-page .bl-bar-btn span{ font-size:inherit !important; color:inherit !important; letter-spacing:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    html[data-pdp-design="b"] .bl-page .bl-bar-stack{ display:flex; flex-direction:column; align-items:center; min-width:0; max-width:100%; line-height:1.25; }
    html[data-pdp-design="b"] .bl-page .bl-bar-btn .bl-bar-sub{
        max-width:100%; margin-top:2px; font-size:var(--t-xs) !important; font-weight:400; letter-spacing:.02em; text-transform:none; color:var(--muted) !important;
    }
    html[data-pdp-design="b"] .bl-page .bl-bar-btn .bl-bar-sub[hidden]{ display:none; }
    html[data-pdp-design="b"] .bl-page .bl-bar-sort{ position:relative; width:auto; max-width:none; margin:0; border-left:1px solid var(--rule); }
    html[data-pdp-design="b"] .bl-page .custom-sort-trigger .bl-chev{ transition:transform .2s ease; }
    html[data-pdp-design="b"] .bl-page .custom-sort-dropdown.open .bl-chev{ transform:rotate(180deg); }
    html[data-pdp-design="b"] .bl-page .custom-sort-panel{
        display:none; position:absolute; top:100%; right:0; left:auto; min-width:100%; max-width:calc(100vw - 16px); z-index:20;
        margin-top:1px; padding:var(--x2) 0; background:var(--paper); border:1px solid var(--ink); box-shadow:none;
    }
    html[data-pdp-design="b"] .bl-page .custom-sort-dropdown.open .custom-sort-panel{ display:block; }
    html[data-pdp-design="b"] .bl-page .custom-sort-option{
        display:flex; align-items:center; min-height:var(--tap); padding:0 var(--x5); border:0; cursor:pointer; white-space:nowrap;
        font-size:var(--t-base); color:var(--ink2); background:transparent;
    }
    html[data-pdp-design="b"] .bl-page .custom-sort-option:hover{ background:var(--surface); color:var(--ink); }
    html[data-pdp-design="b"] .bl-page .custom-sort-option.active{ color:var(--ink); font-weight:500; background:transparent; }
    html[data-pdp-design="b"] .bl-page .custom-sort-option.active::before{ content:""; width:6px; height:6px; margin:0 var(--x3) 0 calc(var(--x3) * -1 - 6px); background:var(--ink); }

    /* sheet */
    html[data-pdp-design="b"] .bl-filters{
        position:fixed !important; top:0; right:0; bottom:0; left:auto; z-index:10001;
        display:flex !important; width:min(440px, 92vw) !important; max-height:none; height:100%; height:100dvh;
        background:var(--paper); visibility:hidden; transform:translateX(100%);
        transition:transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s linear .32s;
        animation:none !important;
    }
    html[data-pdp-design="b"] .bl-filters.mobile-show{ visibility:visible; transform:none; transition:transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s; }
    html[data-pdp-design="b"] .bl-filters.bl-noanim{ transition:none !important; }
    html[data-pdp-design="b"] .bl-scrim{
        display:block; position:fixed; inset:0; z-index:10000; background:rgba(17,18,20,.32);
        opacity:0; visibility:hidden; transition:opacity .32s ease, visibility 0s linear .32s;
    }
    html[data-pdp-design="b"] .bl-filters.mobile-show + .bl-scrim{ opacity:1; visibility:visible; transition:opacity .32s ease, visibility 0s; }
    html[data-pdp-design="b"] .bl-sheet-head{
        display:flex; align-items:center; justify-content:space-between; flex:0 0 auto;
        height:60px; padding:0 var(--x2) 0 var(--x5); border-bottom:1px solid var(--ink);
    }
    html[data-pdp-design="b"] .bl-page .bl-sheet-title{ color:var(--ink) !important; }
    html[data-pdp-design="b"] .bl-page .bl-sheet-title span{ font-size:inherit !important; color:var(--muted) !important; }
    html[data-pdp-design="b"] .bl-page .bl-sheet-x{
        display:flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); padding:0; border:0; cursor:pointer; color:var(--ink);
    }
    html[data-pdp-design="b"] .bl-page .simple-filter-sidebar{ padding:0 var(--x5) var(--x5) !important; }
    html[data-pdp-design="b"] .bl-page .bl-sec:first-child{ border-top:0 !important; }
    html[data-pdp-design="b"] .bl-page .bl-sec-t{ min-height:56px; }
    html[data-pdp-design="b"] .bl-page .bl-check{ min-height:var(--tap); }
    html[data-pdp-design="b"] .bl-page .bl-check input[type="checkbox"]{ flex-basis:20px; width:20px !important; height:20px !important; }
    html[data-pdp-design="b"] .bl-page .bl-check label{ font-size:15px !important; padding:var(--x2) 0; }
    html[data-pdp-design="b"] .bl-page .category-filter-link{ min-height:var(--tap); font-size:15px !important; }
    html[data-pdp-design="b"] .bl-page :is(#brand-search-input,#series-search-input,.curated-attr-search){ height:var(--tap) !important; font-size:16px !important; }
    html[data-pdp-design="b"] .bl-page .price-input-group input[type="number"]{ font-size:16px !important; }
    html[data-pdp-design="b"] .bl-page .bl-clear{ display:none; }
    html[data-pdp-design="b"] .bl-sheet-foot{
        display:flex; gap:var(--x3); flex:0 0 auto; padding:var(--x3) var(--x5) calc(var(--x3) + env(safe-area-inset-bottom));
        border-top:1px solid var(--rule); background:var(--paper);
    }
    html[data-pdp-design="b"] .bl-sheet-foot .bl-btn{ min-height:var(--ctl) !important; }
    html[data-pdp-design="b"] .bl-sheet-foot .bl-btn--ghost{ flex:0 0 auto; width:auto; }
    html[data-pdp-design="b"] .bl-sheet-foot .bl-btn--solid{ flex:1 1 auto; }
    html.bl-locked, html.bl-locked body{ overflow:hidden !important; }
    html.bl-locked #pdpx-switch{ visibility:hidden !important; }
}

/* tablet grid */
@media (max-width:1199px) and (min-width:768px){
    html[data-pdp-design="b"] .bl-page .categoryPageProductRow{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* phone */
@media (max-width:767px){
    html[data-pdp-design="b"] .bl-container{ padding:0 var(--x4); }
    html[data-pdp-design="b"] .bl-page{ --bl-gap-x:var(--x3); --bl-gap-y:var(--x6); --bl-title:clamp(24px, 3vw + 12px, 30px); padding-bottom:var(--x7); }
    html[data-pdp-design="b"] .bl-head{ padding-top:var(--x3); }
    html[data-pdp-design="b"] .bl-titlerow{ margin-top:var(--x4); }
    html[data-pdp-design="b"] .bl-lede .description-content{ font-size:14px; }
    html[data-pdp-design="b"] .bl-subcats{ margin:var(--x5) calc(var(--x4) * -1) 0; }
    html[data-pdp-design="b"] .bl-subcats ul{
        flex-wrap:nowrap; justify-content:flex-start; gap:var(--x3);
        overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
        padding:0 var(--x4); scroll-padding:0 var(--x4);
    }
    html[data-pdp-design="b"] .bl-subcats li{ flex:0 0 25%; width:25%; }
    html[data-pdp-design="b"] .bl-subcats ul::-webkit-scrollbar{ display:none; }
    html[data-pdp-design="b"] .bl-subcats li{ scroll-snap-align:start; }
    html[data-pdp-design="b"] .bl-subcat-name{ font-size:var(--t-md) !important; }
    html[data-pdp-design="b"] .bl-bar{ margin:var(--x4) calc(var(--x4) * -1) var(--x5); }
    html[data-pdp-design="b"] .bl-filters{ width:100% !important; }
    html[data-pdp-design="b"] .bl-sheet-head{ padding-left:var(--x4); }
    html[data-pdp-design="b"] .bl-page .simple-filter-sidebar{ padding:0 var(--x4) var(--x5) !important; }
    html[data-pdp-design="b"] .bl-sheet-foot{ padding-left:var(--x4); padding-right:var(--x4); }
    html[data-pdp-design="b"] .bl-page .categoryPageProductRow{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    html[data-pdp-design="b"] .bl-page .categoryPageProductRow > .banner-2x2{ grid-column:1 / -1; grid-row:auto; }
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__product_details{ padding-top:var(--x3) !important; }
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__pro_name{ font-size:13px !important; }
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .categoryPage_brandlink :is(a,span){ font-size:10px !important; letter-spacing:.12em !important; }
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__price{ font-size:15px !important; }
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .productWishIcon i{ font-size:16px !important; }
    html[data-pdp-design="b"] .bl-page #show-more-btn{ width:100%; min-width:0; }
    html[data-pdp-design="b"] .bl-more-wrap{ margin-top:var(--x7) !important; }
    html[data-pdp-design="b"] .bl-page .bl-chip-t{ max-width:20ch; }
}

/* ======================================================= 9. focus · motion */
html[data-pdp-design="b"] .bl-page :is(a,button,input,select,[tabindex]):focus-visible,
html[data-pdp-design="b"] .bl-page .noUi-handle:focus-visible{
    outline:2px solid #111214 !important; outline-offset:2px !important; box-shadow:none !important;
}

html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__pro_link:focus-visible{ outline-offset:-2px !important; }
html[data-pdp-design="b"] .bl-page .bl-sec-t:focus-visible{ outline-offset:-2px !important; }

@media (prefers-reduced-motion:reduce){
    html[data-pdp-design="b"] .bl-page *,
    html[data-pdp-design="b"] .bl-page *::before,
    html[data-pdp-design="b"] .bl-page *::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

@media (prefers-reduced-motion:reduce){
    html[data-pdp-design="b"] .bl-subcat-plate, html[data-pdp-design="b"] .bl-subcat-plate img, html[data-pdp-design="b"] .bl-subcat-name{ transition:none; }
    html[data-pdp-design="b"] .bl-subcat:hover .bl-subcat-plate img{ transform:none; }
}

/* text fields: focus = darker underline/border (the ring is removed site-wide for fields) */
html[data-pdp-design="b"] .bl-page :is(#price_min_input, #price_max_input):focus{ border-color:var(--ink) !important; }

/* description now sits at the bottom, in the SEO reading column above the H2 sections */
html[data-pdp-design="b"] .bl-lede--bottom{ max-width:68ch; margin:var(--x8) 0 var(--x6); }
@media (max-width:767px){ html[data-pdp-design="b"] .bl-lede--bottom{ margin:var(--x7) 0 var(--x5); } }
/* category H1 at the bottom, above the description */
html[data-pdp-design="b"] .bl-titlerow--bottom{ margin:var(--x8) 0 0; max-width:68ch; }
html[data-pdp-design="b"] .bl-titlerow--bottom + .bl-lede--bottom{ margin-top:var(--x4); }
@media (max-width:767px){ html[data-pdp-design="b"] .bl-titlerow--bottom{ margin-top:var(--x7); } }

/* ============================================================ brand page (B) ====
   frontend/pages/b/brand.blade.php: crumbs · banner · logo + H1 + description · listing · SEO */
html[data-pdp-design="b"] .bb-head{ padding-top:var(--x5); font-family:'Jost',sans-serif; color:var(--ink); }
html[data-pdp-design="b"] .bb-banner{ margin:var(--x4) 0 0; aspect-ratio:1440 / 400; overflow:hidden; background:var(--surface); }
html[data-pdp-design="b"] .bb-banner img{ display:block; width:100%; height:100%; object-fit:cover; }

html[data-pdp-design="b"] .bb-intro{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--x5); margin-top:var(--x6); }
html[data-pdp-design="b"] .bb-intro.has-logo{ grid-template-columns:136px minmax(0,1fr); align-items:start; column-gap:var(--x7); }
html[data-pdp-design="b"] .bb-logo{
    display:flex; align-items:center; justify-content:center; aspect-ratio:1 / 1;
    border:1px solid var(--rule); background:var(--paper); padding:var(--x4);
}
html[data-pdp-design="b"] .bb-logo img{ display:block; width:100%; height:100%; object-fit:contain; }
html[data-pdp-design="b"] .bb-text{ min-width:0; max-width:72ch; }
html[data-pdp-design="b"] .bb-head{ --bl-title:clamp(30px, 1.4vw + 22px, 44px); }
html[data-pdp-design="b"] .bb-head .bb-title{
    margin:0 !important; padding:0 !important; font-family:inherit !important;
    font-size:var(--bl-title) !important; font-weight:200 !important; line-height:1.05 !important; letter-spacing:-.02em !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .bb-head .bb-count{ margin:var(--x2) 0 0 !important; }

html[data-pdp-design="b"] .bb-desc{ margin-top:var(--x4); }
html[data-pdp-design="b"] .bb-desc-body{
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
    font-size:15px; line-height:1.7; color:var(--ink2);
}
html[data-pdp-design="b"] .bb-desc-body.is-open{ display:block; -webkit-line-clamp:unset; overflow:visible; }
html[data-pdp-design="b"] .bb-desc-body :is(p, span, a, strong, em, li){ font-size:inherit !important; line-height:inherit !important; color:inherit !important; }
html[data-pdp-design="b"] .bb-desc-body p{ margin:0 0 var(--x3) !important; }
html[data-pdp-design="b"] .bb-more{
    display:inline-flex; align-items:center; min-height:var(--tap); margin:var(--x1) 0 0; padding:0;
    background:none; border:0; border-radius:0; cursor:pointer; font-family:inherit; font-size:var(--t-base); color:var(--ink);
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;
}
html[data-pdp-design="b"] .bb-more span{ font-size:inherit !important; color:inherit !important; }
html[data-pdp-design="b"] .bb-bannertext{ margin-top:var(--x4); font-size:15px; line-height:1.7; color:var(--ink2); }

/* the listing's own head only carries the count row here — the brand header already has it */
html[data-pdp-design="b"] .bb-head ~ .bl-page .bl-titlerow{ display:none; }
html[data-pdp-design="b"] .bb-head ~ .bl-page .bl-head{ padding-top:0; }

html[data-pdp-design="b"] .bb-seo{ max-width:68ch; margin:var(--x8) 0 var(--x6); }
html[data-pdp-design="b"] .bb-seo-sec + .bb-seo-sec{ margin-top:var(--x6); }
html[data-pdp-design="b"] .bb-seo-h{
    margin:0 0 var(--x3) !important; padding:0 !important; font-family:'Jost',sans-serif !important;
    font-size:clamp(20px, .5vw + 17px, 26px) !important; font-weight:300 !important; line-height:1.25 !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .bb-seo-body{ font-size:15px; line-height:1.7; color:var(--ink2); }

@media (max-width:991px){
    html[data-pdp-design="b"] .bb-banner{ aspect-ratio:16 / 7; }
    html[data-pdp-design="b"] .bb-intro.has-logo{ grid-template-columns:96px minmax(0,1fr); column-gap:var(--x5); }
}
@media (max-width:767px){
    html[data-pdp-design="b"] .bb-head{ padding-top:var(--x3); }
    html[data-pdp-design="b"] .bb-banner{ margin-left:calc(var(--x4) * -1); margin-right:calc(var(--x4) * -1); aspect-ratio:16 / 9; }
    html[data-pdp-design="b"] .bb-intro{ margin-top:var(--x5); }
    html[data-pdp-design="b"] .bb-intro.has-logo{ grid-template-columns:72px minmax(0,1fr); column-gap:var(--x4); }
    html[data-pdp-design="b"] .bb-logo{ padding:var(--x2); }
    html[data-pdp-design="b"] .bb-desc-body{ font-size:14px; -webkit-line-clamp:5; }
    html[data-pdp-design="b"] .bb-seo{ margin:var(--x7) 0 var(--x5); }
}

/* ======================================================================
   Card hover — "vitrina" (replaces the plate tint + name underline)

   Two ideas in one gesture: crop marks close on the object like a
   viewfinder, and a placard with the available sizes appears under the
   price. Nothing scales, nothing shifts: the marks are drawn with
   background gradients on two pseudo-elements (diagonal pairs, 60ms
   apart) and the placard's space is reserved at all times.
   ====================================================================== */
/* the placard: always occupies its line, only the ink and the rule arrive */
html[data-pdp-design="b"] .bl-page .categoryPageProduct .bl-meta{
    position:relative; display:block; overflow:hidden;
    margin:var(--x2) 0 0 !important; padding:7px 0 0 !important;
    min-height:26px; max-width:100%;
    font-family:'Jost',sans-serif; font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.12em; text-transform:uppercase; line-height:1.5 !important;
    color:var(--muted) !important; white-space:nowrap; text-overflow:ellipsis;
    text-align:left !important;   /* the card partial centres its text inline */
    opacity:0; transform:translateY(3px);
    transition:opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1);
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .bl-meta::before{
    content:""; position:absolute; top:0; left:0; width:100%; height:1px;
    background:var(--rule); transform:scaleX(0); transform-origin:left center;
    transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .bl-meta:empty{ display:none; }

@media (hover:hover){
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__product_item:hover .bl-meta{ opacity:1; transform:none; }
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__product_item:hover .bl-meta::before{ transform:scaleX(1); }
    /* the placard is the whole hover: the photo, its plate and the name stay put
       (the old tint + underline were the generic gesture this replaces) */
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__product_item:hover .product-image-container{ background:var(--surface) !important; }
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__product_item:hover .wsus__pro_name{ text-decoration:none !important; }
}
/* keyboard gets the same card, not a different one */
html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__product_item:focus-within .bl-meta{ opacity:1; transform:none; }
html[data-pdp-design="b"] .bl-page .categoryPageProduct .wsus__product_item:focus-within .bl-meta::before{ transform:scaleX(1); }

@media (prefers-reduced-motion:reduce){
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .bl-meta,
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .bl-meta::before{ transition:none; }
}
/* phones never hover: the placard is simply part of the card there */
@media (hover:none){
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .bl-meta{ opacity:1; transform:none; }
    html[data-pdp-design="b"] .bl-page .categoryPageProduct .bl-meta::before{ transform:scaleX(1); }
}

/* card brand link: 24px tap height (WCAG 2.5.8) without moving anything. The wrapper grows 5px
   each way and takes it back with a negative margin (it keeps clipping for the ellipsis); the
   inline link gets vertical padding, which never changes line height. The wrapper lets clicks
   through, so the photo above and the name below keep their whole area. */
html[data-pdp-design="b"] .bl-page .categoryPageProduct .categoryPage_brandlink{
    padding:5px 0 !important; margin:-5px 0 !important; pointer-events:none;
}
html[data-pdp-design="b"] .bl-page .categoryPageProduct .categoryPage_brandlink a{ padding:6px 0 !important; pointer-events:auto; }