/* ==========================================================================
   WOW24 — site-wide design sandbox: live ("orig") vs B · Vitrina.
   A and C were retired 2026-09-17; B becomes the site design.
   Loaded on every page for arturas@dinamikus.lt only (layouts/partials/site-designs.blade.php).

   Owns what every page shares: switcher, B tokens, keyboard focus, the sandbox
   header (#pdpx-header, pdp-header.blade.php) + category sheet, and the B footer
   (site-footer-designs.blade.php). Page rules: pdp-designs.css, home-b.css.

   Production CSS to keep in mind: misc.css span{color:#000}, i{font-family:Wow24},
   body{display:flex}; style_v7.css *{outline:0}, button:focus{outline:none!important},
   span,p{font-size:16px}. Text is styled explicitly; focus rings use !important.

   Breakpoints: phone <768 · tablet 768–991 · desktop ≥992 (compact nav ≤1199).
   ========================================================================== */

/* ============================================================ 0. switcher */
#pdpx-switch{
    position:fixed; top:10px; right:10px; z-index:99999;
    display:flex; align-items:stretch;
    background:#fff; border:1px solid #111; box-shadow:0 4px 18px rgba(0,0,0,.18);
    font-family:'Jost',sans-serif; user-select:none;
}
#pdpx-switch .pdpx-brand{
    display:flex; align-items:center; padding:0 9px; font-size:9px; font-weight:700;
    letter-spacing:.13em; text-transform:uppercase; color:#6c7075; border-right:1px solid #e2e2e2;
}
#pdpx-switch button{
    appearance:none; border:0; background:#fff; color:#111; cursor:pointer;
    padding:8px 12px; font-family:inherit; font-size:12px; font-weight:600; line-height:1.1;
    border-right:1px solid #e2e2e2; transition:background .12s ease;
}
#pdpx-switch button:last-child{ border-right:0; }
#pdpx-switch button small{ display:block; font-size:9px; font-weight:400; color:#6c7075; }
#pdpx-switch button:hover{ background:#f2f2f2; }
#pdpx-switch button.on{ background:#111; color:#fff; }
#pdpx-switch button.on small{ color:rgba(255,255,255,.72); }
#pdpx-switch button:focus-visible{ outline:2px solid #111214 !important; outline-offset:-4px !important; }
#pdpx-switch button.on:focus-visible{ outline-color:#fff !important; }
@media (max-width:759px){
    #pdpx-switch{ top:auto; bottom:78px; right:8px; }
    #pdpx-switch button{ padding:7px 10px; font-size:11px; }
    #pdpx-switch button small,
    #pdpx-switch .pdpx-brand{ display:none; }
}

/* ============================================================== 1. tokens */
html[data-pdp-design="b"]{
    /* spacing — 4px base */
    --x1:4px; --x2:8px; --x3:12px; --x4:16px; --x5:24px; --x6:32px; --x7:48px; --x8:72px;

    /* type */
    --t-xs:11px; --t-sm:12px; --t-md:13px; --t-base:14px;
    --t-lg:16px; --t-xl:20px; --t-2xl:26px; --t-3xl:32px;

    /* colour — black & white only */
    --ink:#111214; --ink2:#3a3d42; --muted:#6c7075;
    --rule:#dcdee1; --rule-soft:#eceef0; --surface:#f5f6f7; --paper:#fff;
    --sale:#a8331f;

    /* controls */
    --ctl:52px; --ctl-sm:40px; --ctl-xs:32px; --ctl-mob:48px;
    --tap:44px;

    /* gallery */
    --thumb:72px;
}

/* ====================================================== 2. B, site-wide ==== */
/* production chrome is hidden and leaves the tab order (flip to "Dabartinis" and it returns) */
html[data-pdp-design="b"] header.bg-white,
html[data-pdp-design="b"] nav.wsus__main_menu,
html[data-pdp-design="b"] footer.footer_2{ display:none !important; visibility:hidden !important; }
/* the live mobile menu is reused on phones/tablets (site-designs.js liveMenuInit):
   hidden and out of the tab order while closed, above B's header when open */
html[data-pdp-design="b"] #wsus__mobile_menu:not(.show_m_menu){ visibility:hidden !important; }
html[data-pdp-design="b"] #wsus__mobile_menu.show_m_menu{ visibility:visible !important; z-index:10001 !important; }
@media (min-width:992px){
    html[data-pdp-design="b"] #wsus__mobile_menu{ display:none !important; }
}
/* spacer for the hidden production mobile header */
html[data-pdp-design="b"] .blankDiv{ display:none !important; }

/* keyboard focus: ink ring everywhere; white on dark surfaces (.b-on-dark) */
html[data-pdp-design="b"] :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
    outline:2px solid #111214 !important; outline-offset:2px !important;
}
html[data-pdp-design="b"] .b-on-dark :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
    outline-color:#fff !important;
}
/* text fields and selects: no ring — browsers treat every click into a field as
   focus-visible. Each field shows focus with its own border/underline instead. */
html[data-pdp-design="b"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]), select, textarea):focus-visible{
    outline:none !important; box-shadow:none !important;
}

/* misc.css: span{color:#000;font-size:16px}, i{font-family:Wow24} — neutralised inside
   the sandbox's own widgets (#pdpx-picker lives on product pages) */
html[data-pdp-design="b"] #pdpx-picker span{ font-size:inherit; color:inherit; }
html[data-pdp-design="b"] :where(#pdpx-picker, #pdpx-header) i:not(.icon){ font-family:inherit; font-style:normal; }

/* scroll lock while the category sheet is open */
html.pxh-locked{ scrollbar-gutter:stable; }
html.pxh-locked,
html.pxh-locked body{ overflow:hidden !important; }
html.pxh-locked .mobile-sticky-cart,
html.pxh-locked #discountCodesToggle,
html.pxh-locked #pdpx-switch{ visibility:hidden !important; }

/* ============================================================== 3. header ==
   Own markup (pdp-header.blade.php), first child of <body>. Only rendered visible
   under B, so rules below are scoped to #pdpx-header alone.
     desktop   [search ········ ] [ LOGO ] [ ········ utils]
               [categories] [ nav links, centred ] [phone]
     tablet    [≡ search ] [ LOGO ] [ utils]         (nav lives in the sheet)
     phone     [≡ LOGO ················ utils]
               [search ······························]
   On scroll the bar row detaches into a compact fixed bar that slides in when
   the visitor scrolls up (site-designs.js, "headroom"); the header's height is
   locked first, so nothing below moves.
   ========================================================================== */
#pdpx-header{ display:none; }
html[data-pdp-design="b"] #pdpx-header{
    display:block; position:relative; z-index:900;
    /* body is display:flex in misc.css */
    width:100%; align-self:stretch; flex:0 0 auto; box-sizing:border-box;
    background:var(--paper); color:var(--ink);
    font-family:'Jost',sans-serif; font-size:var(--t-base); line-height:1.4;
    --pxh-logo:232px;
}
#pdpx-header *,
#pdpx-header *::before,
#pdpx-header *::after{ box-sizing:border-box; }
#pdpx-header span{ color:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:inherit; }
/* font.css paints .icon grey with margin-left:5px and a fixed 16px */
#pdpx-header .icon{ color:inherit !important; margin:0 !important; font-size:inherit !important; line-height:1; }
#pdpx-header .pxh-inner{ width:100%; max-width:1440px; margin:0 auto; padding:0 var(--x6); }

/* ---- promo strip ---- */
#pdpx-header .pxh-promo{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 var(--x2);
    min-height:36px; padding:var(--x2) var(--x4); background:var(--surface); color:var(--ink2);
    font-size:var(--t-sm); font-weight:400; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; text-align:center;
}
#pdpx-header .pxh-promo strong{ font-weight:600; color:var(--ink); }

/* ---- bar ---- */
#pdpx-header .pxh-bar{ background:var(--paper); }
#pdpx-header .pxh-bar > .pxh-inner{
    display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-areas:"left logo utils"; align-items:center; column-gap:var(--x6);
    min-height:96px; padding-top:var(--x4); padding-bottom:var(--x4);
}
#pdpx-header .pxh-logo{ grid-area:logo; justify-self:center; display:block; line-height:0; }
#pdpx-header .pxh-logo img{ display:block; width:var(--pxh-logo); max-width:none; height:auto; }

#pdpx-header .pxh-search{
    grid-area:left; justify-self:start; width:100%; max-width:340px; margin:0;
    display:flex; align-items:center; border-bottom:1px solid var(--ink);
}
#pdpx-header .pxh-search input{
    flex:1 1 auto; min-width:0; height:var(--tap); margin:0; padding:0;
    border:0; border-radius:0; background:transparent; -webkit-appearance:none; appearance:none;
    font-family:inherit; font-size:15px; font-weight:400; letter-spacing:.02em; color:var(--ink);
}
#pdpx-header .pxh-search input::placeholder{
    color:var(--muted); opacity:1; font-size:var(--t-sm); letter-spacing:.14em; text-transform:uppercase;
}
#pdpx-header .pxh-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
/* the ring goes round the whole field, not the bare input */
html[data-pdp-design="b"] #pdpx-header .pxh-search input:focus-visible{ outline:none !important; }
/* no box round the field: focus is shown by the underline getting heavier (no layout shift) */
html[data-pdp-design="b"] #pdpx-header .pxh-search input:focus{ outline:none !important; box-shadow:none !important; }
html[data-pdp-design="b"] #pdpx-header .pxh-search:focus-within{ outline:none !important; box-shadow:0 1px 0 0 var(--ink); background:var(--surface); }
#pdpx-header .pxh-search button{
    flex:0 0 auto; width:var(--tap); height:var(--tap); margin-right:-12px; padding:0;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:transparent; border:0; border-radius:0; color:var(--ink); font-size:18px;
}

#pdpx-header .pxh-utils{ grid-area:utils; justify-self:end; display:flex; align-items:center; gap:var(--x1); margin-right:-10px; }
#pdpx-header .pxh-utils > a,
#pdpx-header .pxh-acc > a{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:var(--tap); height:var(--tap); color:var(--ink); font-size:20px; text-decoration:none;
}
#pdpx-header .pxh-utils > a:hover,
#pdpx-header .pxh-acc > a:hover{ color:var(--ink2); }

/* account dropdown — desktop only (hover or keyboard focus); touch and ≤991 just follow the link */
#pdpx-header .pxh-acc{ position:relative; }
#pdpx-header .pxh-acc-menu{ display:none; }
@media (hover:hover) and (min-width:992px){
    #pdpx-header .pxh-acc-menu{
        position:absolute; top:100%; right:-8px; z-index:950; width:288px;
        display:block; visibility:hidden; opacity:0; transform:translateY(4px);
        padding:var(--x5); background:var(--paper); border:1px solid var(--rule); border-top:2px solid var(--ink);
        font-family:'Jost',sans-serif; text-align:left;
        transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
    }
    /* invisible bridge so the pointer can travel from the icon into the panel */
    #pdpx-header .pxh-acc-menu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
    #pdpx-header .pxh-acc:hover .pxh-acc-menu,
    #pdpx-header .pxh-acc:focus-within .pxh-acc-menu{
        visibility:visible; opacity:1; transform:none; transition:opacity .15s ease, transform .15s ease;
    }
}
#pdpx-header .pxh-acc-who{ display:flex; flex-direction:column; padding-bottom:var(--x3); border-bottom:1px solid var(--ink); }
#pdpx-header .pxh-acc-name{ font-size:var(--t-lg) !important; font-weight:400; line-height:1.35; color:var(--ink) !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pdpx-header .pxh-acc-mail{ font-size:var(--t-sm) !important; line-height:1.4; color:var(--muted) !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pdpx-header .pxh-acc-list{ list-style:none; margin:0; padding:0; }
#pdpx-header .pxh-acc-list li{ margin:0; padding:0; border-bottom:1px solid var(--rule); }
#pdpx-header .pxh-acc-list a{
    display:flex; align-items:baseline; justify-content:space-between; gap:var(--x3); min-height:40px; padding:var(--x2) 0;
    color:var(--ink2) !important; text-decoration:none !important;
}
#pdpx-header .pxh-acc-list a span{ font-size:var(--t-base) !important; color:inherit !important; }
#pdpx-header .pxh-acc-list a em{ font-style:normal; font-size:var(--t-sm) !important; color:var(--muted) !important; font-variant-numeric:tabular-nums; }
#pdpx-header .pxh-acc-list a:hover{ color:var(--ink) !important; }
#pdpx-header .pxh-acc-list a:hover span{ text-decoration:underline; text-underline-offset:3px; }
#pdpx-header .pxh-acc-out{ margin:var(--x3) 0 0; }
#pdpx-header .pxh-acc-out button{
    min-height:36px; margin:0; padding:0; border:0; background:none; cursor:pointer; -webkit-appearance:none; appearance:none;
    font-family:'Jost',sans-serif; font-size:var(--t-sm); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
#pdpx-header .pxh-acc-out button:hover{ color:var(--ink); }
#pdpx-header .pxh-acc-cap{
    margin:0 0 var(--x3) !important; font-size:var(--t-xs) !important; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) !important;
}
#pdpx-header .pxh-acc-btn{
    display:flex; align-items:center; justify-content:center; min-height:44px; margin-top:var(--x2); padding:0 var(--x4);
    background:var(--ink); border:1px solid var(--ink); color:var(--paper) !important; text-decoration:none !important;
    font-size:var(--t-sm) !important; font-weight:500; letter-spacing:.14em; text-transform:uppercase; transition:background-color .2s ease, color .2s ease;
}
#pdpx-header .pxh-acc-btn:hover{ background:var(--paper); color:var(--ink) !important; }
#pdpx-header .pxh-acc-btn--line{ background:transparent; color:var(--ink) !important; }
#pdpx-header .pxh-acc-btn--line:hover{ background:var(--ink); color:var(--paper) !important; }
#pdpx-header .pxh-acc-note{ margin:var(--x3) 0 0 !important; font-size:var(--t-sm) !important; line-height:1.5; color:var(--muted) !important; }
#pdpx-header .pxh-acc-menu :is(a, button):focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
#pdpx-header .pxh-count{
    position:absolute; top:3px; right:1px; min-width:18px; height:18px; padding:0 4px;
    display:flex; align-items:center; justify-content:center;
    background:var(--ink); color:var(--paper) !important; border-radius:0;
    font-size:11px !important; font-weight:600; line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums;
}

/* burger (tablet/phone, and the compact bar) — drawn, not an icon-font glyph */
#pdpx-header .pxh-burger{
    grid-area:left; justify-self:start; display:none; align-items:center; justify-content:center;
    width:var(--tap); height:var(--tap); margin-left:-12px; padding:0;
    appearance:none; background:none; border:0; border-radius:0; color:var(--ink); cursor:pointer;
}
#pdpx-header .pxh-burger-lines{
    position:relative; display:block; width:20px; height:14px; flex:0 0 auto;
    border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
}
#pdpx-header .pxh-burger-lines::after{
    content:""; position:absolute; left:0; right:0; top:50%; border-top:1.5px solid currentColor; transform:translateY(-50%);
}

/* ---- nav row ---- */
#pdpx-header .pxh-nav{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--paper); }
#pdpx-header .pxh-nav > .pxh-inner{
    display:grid; grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);
    align-items:stretch; column-gap:var(--x5); min-height:52px;
}
#pdpx-header .pxh-links{ display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap; }
#pdpx-header .pxh-cats,
#pdpx-header .pxh-link,
#pdpx-header .pxh-phone{
    display:flex; align-items:center; gap:var(--x3); min-height:52px; padding:0 var(--x4); margin:0;
    white-space:nowrap; text-decoration:none; color:var(--ink);
    font-family:inherit; font-size:var(--t-md); font-weight:500; line-height:1.2;
    letter-spacing:.1em; text-transform:uppercase;
}
#pdpx-header .pxh-cats{
    justify-self:start; padding-left:0; appearance:none; background:none; border:0; border-radius:0; cursor:pointer;
}
#pdpx-header .pxh-cats .pxh-burger-lines{ width:18px; height:11px; border-width:1px; }
#pdpx-header .pxh-cats .pxh-burger-lines::after{ border-top-width:1px; }
#pdpx-header .pxh-phone{ justify-self:end; padding-right:0; font-weight:400; letter-spacing:.06em; }
#pdpx-header .pxh-phone .icon{ font-size:14px !important; }
#pdpx-header .pxh-link:hover,
#pdpx-header .pxh-cats:hover span:not(.pxh-burger-lines),
#pdpx-header .pxh-phone:hover span,
#pdpx-header .pxh-link[aria-current="page"]{
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px;
}
#pdpx-header.pxh-cats-open .pxh-cats span:not(.pxh-burger-lines){ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }

@media (min-width:1600px){
    html[data-pdp-design="b"] #pdpx-header{ --pxh-logo:248px; }
}
/* narrow desktop: tighter nav, phone as an icon */
@media (min-width:992px) and (max-width:1199px){
    html[data-pdp-design="b"] #pdpx-header{ --pxh-logo:200px; }
    #pdpx-header .pxh-link{ padding:0 var(--x3); letter-spacing:.06em; }
    #pdpx-header .pxh-cats{ letter-spacing:.06em; }
    #pdpx-header .pxh-phone span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
    #pdpx-header .pxh-phone{ min-width:var(--tap); justify-content:flex-end; }
}
/* short desktop viewports: less air in the bar */
@media (min-width:992px) and (max-height:760px){
    #pdpx-header .pxh-bar > .pxh-inner{ min-height:80px; padding-top:var(--x3); padding-bottom:var(--x3); }
    html[data-pdp-design="b"] #pdpx-header{ --pxh-logo:200px; }
    #pdpx-header .pxh-nav > .pxh-inner,
    #pdpx-header .pxh-cats, #pdpx-header .pxh-link, #pdpx-header .pxh-phone{ min-height:46px; }
}

/* ---- tablet + the compact bar: burger joins the search on the left ---- */
@media (max-width:991px){
    html[data-pdp-design="b"] #pdpx-header{ --pxh-logo:176px; }
    #pdpx-header .pxh-nav{ display:none; }
    #pdpx-header .pxh-bar{ border-bottom:1px solid var(--rule); }
    #pdpx-header .pxh-bar > .pxh-inner{ min-height:80px; column-gap:var(--x4); }
}
@media (min-width:768px) and (max-width:991px){
    #pdpx-header .pxh-burger{ display:flex; }
    #pdpx-header .pxh-search{ margin-left:calc(var(--tap) - 12px + var(--x3)); width:auto; max-width:300px; }
}
@media (min-width:768px){
    #pdpx-header.pxh-fixed .pxh-burger{ display:flex; }
    #pdpx-header.pxh-fixed .pxh-search{ margin-left:calc(var(--tap) - 12px + var(--x3)); width:auto; max-width:300px; }
}

/* ---- phone ---- */
@media (max-width:767px){
    html[data-pdp-design="b"] #pdpx-header{ --pxh-logo:124px; }
    #pdpx-header .pxh-inner{ padding:0 var(--x4); }
    #pdpx-header .pxh-promo{ min-height:32px; padding:6px var(--x4); font-size:11px; letter-spacing:.1em; }
    #pdpx-header .pxh-bar > .pxh-inner{
        grid-template-columns:auto minmax(0,1fr) auto;
        grid-template-areas:"burger logo utils" "search search search";
        column-gap:var(--x2); row-gap:0; min-height:0; padding-top:6px; padding-bottom:var(--x3);
    }
    #pdpx-header .pxh-burger{ display:flex; grid-area:burger; }
    #pdpx-header .pxh-logo{ justify-self:start; }
    #pdpx-header .pxh-search{ grid-area:search; max-width:none; margin-top:var(--x1); }
    #pdpx-header .pxh-search input{ font-size:16px; } /* no iOS zoom */
    #pdpx-header .pxh-utils{ gap:0; }
    /* the search underline is the rule here */
    #pdpx-header .pxh-bar{ border-bottom:0; }
    #pdpx-header.pxh-fixed .pxh-bar{ border-bottom:1px solid var(--rule); }
}

/* ---- compact fixed bar ---- */
#pdpx-header.pxh-fixed .pxh-bar{
    position:fixed; top:0; left:0; right:0; z-index:950;
    border-bottom:1px solid var(--rule); transform:translateY(-101%);
}
#pdpx-header.pxh-fixed.pxh-show .pxh-bar{ transform:none; }
#pdpx-header.pxh-fixed.pxh-anim .pxh-bar{ transition:transform .26s cubic-bezier(.2,.7,.2,1); }
#pdpx-header.pxh-fixed .pxh-bar > .pxh-inner{ min-height:64px; padding-top:var(--x2); padding-bottom:var(--x2); }
html[data-pdp-design="b"] #pdpx-header.pxh-fixed{ --pxh-logo:136px; }
@media (max-width:767px){
    #pdpx-header.pxh-fixed .pxh-bar > .pxh-inner{ min-height:56px; padding-top:6px; padding-bottom:6px; }
    #pdpx-header.pxh-fixed .pxh-search{ display:none; }
    html[data-pdp-design="b"] #pdpx-header.pxh-fixed{ --pxh-logo:112px; }
}

/* ===================================================== 4. category sheet ===
   Own markup (pdp-header-cats.blade.php). Desktop: a centred paper sheet over a
   dimmed page. ≤991: a full-screen sheet with a sticky title row, plus the nav
   links and phone the hidden nav row would have carried.
   JS: scroll lock, focus trap, Escape, focus returns to the trigger.
   ========================================================================== */
#pdpx-header .pxh-catpanel[hidden]{ display:none !important; }
#pdpx-header .pxh-catpanel{
    position:fixed; inset:0; z-index:10000;
    display:flex; align-items:flex-start; justify-content:center;
    padding:var(--x8) var(--x5) var(--x6); overflow-y:auto; overscroll-behavior:contain;
    background:rgba(17,18,20,.5);
}
#pdpx-header.pxh-cats-open{ z-index:10000; }
#pdpx-header .pxh-sheet{
    position:relative; width:100%; max-width:1040px; margin:0 auto;
    padding:0 var(--x7) var(--x7); background:var(--paper); color:var(--ink); outline:0;
    box-shadow:0 24px 64px rgba(17,18,20,.18);
}
#pdpx-header .pxh-sheethead{
    display:flex; align-items:center; justify-content:space-between; gap:var(--x4);
    padding:var(--x6) 0 var(--x5); margin-bottom:var(--x6); border-bottom:1px solid var(--rule);
}
#pdpx-header .pxh-cattitle{
    margin:0 !important; padding:0 !important; color:var(--ink) !important;
    font-family:'Jost',sans-serif !important; font-size:36px !important; font-weight:200 !important;
    line-height:1.1 !important; letter-spacing:-.01em !important; text-transform:none !important;
}
#pdpx-header .pxh-catclose{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:var(--tap); height:var(--tap); margin-right:-10px; padding:0;
    appearance:none; background:none; border:0; border-radius:0; color:var(--ink); cursor:pointer;
}
#pdpx-header .pxh-x{ position:relative; display:block; width:20px; height:20px; }
#pdpx-header .pxh-x::before,
#pdpx-header .pxh-x::after{
    content:""; position:absolute; left:-2px; right:-2px; top:50%; border-top:1.5px solid currentColor;
}
#pdpx-header .pxh-x::before{ transform:rotate(45deg); }
#pdpx-header .pxh-x::after{ transform:rotate(-45deg); }
#pdpx-header .pxh-catclose:hover{ background:var(--surface); }

#pdpx-header .pxh-catinner{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:var(--x6) var(--x6);
}
#pdpx-header .pxh-cat-top{
    display:block; padding:0 0 var(--x2); margin:0 0 var(--x2); border-bottom:1px solid var(--rule);
    color:var(--ink); text-decoration:none; font-size:18px; font-weight:400; line-height:1.3; letter-spacing:0;
}
#pdpx-header .pxh-catsub{ list-style:none; margin:0; padding:0; }
#pdpx-header .pxh-catsub a{
    display:block; padding:5px 0; color:var(--ink2); text-decoration:none;
    font-size:var(--t-base); font-weight:400; line-height:1.45;
}
#pdpx-header .pxh-cat-top:hover,
#pdpx-header .pxh-catsub a:hover{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
#pdpx-header .pxh-catsub a.pxh-catmore{ color:var(--ink); font-weight:500; }
#pdpx-header .pxh-sheetlinks{ display:none; }

@media (max-width:991px){
    #pdpx-header .pxh-catpanel{ display:block; padding:0; background:var(--paper); }
    #pdpx-header .pxh-sheet{
        max-width:none; min-height:100%; box-shadow:none;
        padding:0 var(--x6) calc(var(--x7) + env(safe-area-inset-bottom, 0px));
    }
    #pdpx-header .pxh-sheethead{
        position:sticky; top:0; z-index:1; min-height:64px; padding:var(--x2) 0; margin-bottom:var(--x5);
        background:var(--paper);
    }
    #pdpx-header .pxh-cattitle{ font-size:28px !important; }
    #pdpx-header .pxh-catinner{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--x6) var(--x5); }
    #pdpx-header .pxh-cat-top{ display:flex; align-items:center; min-height:var(--tap); padding:0; font-size:20px; font-weight:300; }
    #pdpx-header .pxh-catsub a{ display:flex; align-items:center; min-height:var(--tap); padding:var(--x1) 0; font-size:15px; line-height:1.3; }
    #pdpx-header .pxh-sheetlinks{
        display:flex; flex-direction:column; margin-top:var(--x7); padding-top:var(--x4); border-top:1px solid var(--rule);
    }
    #pdpx-header .pxh-sheetlinks a{
        display:flex; align-items:center; min-height:var(--tap); color:var(--ink); text-decoration:none;
        font-size:var(--t-md); font-weight:500; letter-spacing:.1em; text-transform:uppercase;
    }
    #pdpx-header .pxh-sheetlinks a[aria-current="page"]{ text-decoration:underline; text-underline-offset:6px; }
    #pdpx-header .pxh-sheetlinks a.pxh-sheetphone{
        margin-top:var(--x4); font-size:30px; font-weight:200; letter-spacing:-.01em; text-transform:none;
        font-variant-numeric:tabular-nums;
    }
}
@media (max-width:767px){
    #pdpx-header .pxh-sheet{ padding-left:var(--x4); padding-right:var(--x4); }
    #pdpx-header .pxh-sheethead{ min-height:56px; }
    #pdpx-header .pxh-cattitle{ font-size:24px !important; }
    #pdpx-header .pxh-catinner{ grid-template-columns:minmax(0,1fr); gap:var(--x5); }
    #pdpx-header .pxh-catsub{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--x4); }
}

/* ============================================================ 5. footer B ==
   Markup: layouts/partials/site-footer-designs.blade.php. A grey plate: contact
   (phone as light display type) on the left, three link columns on the right,
   a base row with logo, payment marks and copyright. Production CSS colours and
   sizes a/span/p/h2/h3 globally, so every text node is set explicitly.
   ========================================================================== */
.sfx{ display:none; }
html[data-pdp-design="b"] .sfx-b{
    display:block; width:100%; align-self:stretch; flex:0 0 auto; box-sizing:border-box;
    /* production gives every <footer> a top padding; with the newsletter band as the first
       child that showed as a grey strip above it. The band brings its own spacing. */
    margin-top:var(--x8); padding-top:0 !important; background:var(--surface); color:var(--ink);
    font-family:'Jost',sans-serif; font-size:var(--t-base); line-height:1.5;
}
html[data-pdp-design="b"] .sfx-b *{ box-sizing:border-box; }
html[data-pdp-design="b"] .sfx-b ul{ list-style:none; margin:0; padding:0; }
html[data-pdp-design="b"] .sfx-b img{ max-width:100%; height:auto; }
html[data-pdp-design="b"] .sfx-b-inner{
    max-width:1440px; margin:0 auto; padding:var(--x8) var(--x6) 0;
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-areas:"lead cols" "base base";
    column-gap:var(--x7);
}
html[data-pdp-design="b"] .sfx-b-lead{ grid-area:lead; min-width:0; }
html[data-pdp-design="b"] .sfx-b-label,
html[data-pdp-design="b"] .sfx-b-col h3{
    margin:0 0 var(--x4) !important; padding:0 !important; color:var(--muted) !important;
    font-family:'Jost',sans-serif !important; font-size:var(--t-sm) !important; font-weight:500 !important;
    line-height:1.4 !important; letter-spacing:.14em !important; text-transform:uppercase !important;
}
html[data-pdp-design="b"] .sfx-b-phone{
    display:inline-block; color:var(--ink) !important; text-decoration:none; white-space:nowrap;
    font-size:clamp(24px, .6vw + 18px, 30px); font-weight:300; line-height:1.2; letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;
}
html[data-pdp-design="b"] .sfx-b-mail{
    display:flex; width:fit-content; max-width:100%; align-items:center; min-height:var(--tap); margin-top:var(--x2);
    color:var(--ink2) !important; font-size:17px; font-weight:400; text-decoration:none; overflow-wrap:anywhere;
}
html[data-pdp-design="b"] .sfx-b-social{ display:flex; flex-wrap:wrap; gap:0 var(--x5); margin-top:var(--x1); }
html[data-pdp-design="b"] .sfx-b-social a{
    display:inline-flex; align-items:center; min-height:var(--tap);
    color:var(--ink2) !important; font-size:var(--t-base); font-weight:400; letter-spacing:.02em;
    text-decoration:underline; text-decoration-color:#a9adb2; text-decoration-thickness:1px; text-underline-offset:5px;
}
html[data-pdp-design="b"] .sfx-b-phone:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
html[data-pdp-design="b"] .sfx-b-mail:hover,
html[data-pdp-design="b"] .sfx-b-social a:hover{ color:var(--ink) !important; text-decoration:underline; text-decoration-color:var(--ink); text-underline-offset:5px; }

html[data-pdp-design="b"] .sfx-b-cols{
    grid-area:cols; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--x6) var(--x5);
}
html[data-pdp-design="b"] .sfx-b-col{ min-width:0; }
html[data-pdp-design="b"] .sfx-b-col a{
    display:inline-block; padding:5px 0; color:var(--ink2) !important; text-decoration:none;
    font-size:15px; font-weight:400; line-height:1.4;
}
html[data-pdp-design="b"] .sfx-b-col a:hover{ color:var(--ink) !important; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }

html[data-pdp-design="b"] .sfx-b-base{
    grid-area:base; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--x4) var(--x6);
    margin-top:var(--x8); padding:var(--x5) 0 var(--x6); border-top:1px solid var(--rule);
}
html[data-pdp-design="b"] .sfx-b-logo{ display:block; line-height:0; }
html[data-pdp-design="b"] .sfx-b-logo img{ display:block; width:112px; }
html[data-pdp-design="b"] .sfx-b-pay{ display:flex; align-items:center; gap:var(--x5); }
html[data-pdp-design="b"] .sfx-b-pay li{ display:flex; line-height:0; }
html[data-pdp-design="b"] .sfx-b-pay img{ height:20px; width:auto; filter:grayscale(1); opacity:.7; mix-blend-mode:multiply; }
html[data-pdp-design="b"] .sfx-b-copy{
    margin:0 !important; color:var(--muted) !important; font-size:var(--t-md) !important; line-height:1.5 !important;
}

@media (max-width:991px){
    html[data-pdp-design="b"] .sfx-b-inner{ grid-template-columns:minmax(0,1fr); grid-template-areas:"lead" "cols" "base"; }
    html[data-pdp-design="b"] .sfx-b-cols{ margin-top:var(--x7); padding-top:var(--x6); border-top:1px solid var(--rule); }
    html[data-pdp-design="b"] .sfx-b-base{ margin-top:var(--x7); }
}
@media (max-width:767px){
    html[data-pdp-design="b"] .sfx-b{ margin-top:var(--x7); }
    html[data-pdp-design="b"] .sfx-b-inner{ padding:var(--x7) var(--x4) 0; }
    html[data-pdp-design="b"] .sfx-b-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--x6) var(--x4); }
    html[data-pdp-design="b"] .sfx-b-col h3{ margin-bottom:var(--x2) !important; }
    html[data-pdp-design="b"] .sfx-b-col a{ display:flex; align-items:center; min-height:var(--tap); padding:var(--x1) 0; line-height:1.3; }
    html[data-pdp-design="b"] .sfx-b-base{ flex-direction:column; align-items:flex-start; gap:var(--x4); padding-bottom:var(--x6); }
    /* product pages: the plate runs under the fixed add-to-cart bar instead of a white body gap */
    html[data-pdp-design="b"]:has(.mobile-sticky-cart) body{ padding-bottom:0 !important; }
    html[data-pdp-design="b"]:has(.mobile-sticky-cart) .sfx-b-base{ padding-bottom:calc(var(--x6) + 72px + env(safe-area-inset-bottom, 0px)); }
}

/* ======================================================= 6. reduced motion */
@media (prefers-reduced-motion:reduce){
    #pdpx-switch button{ transition:none !important; }
    #pdpx-header.pxh-fixed.pxh-anim .pxh-bar{ transition:none !important; }
}

/* ============================================================ search (B) ====
   Plain-JS instant search (site-designs.js searchInit, data from /search-suggest/).
     ≥768  .bsx-panel  dropdown under the header bar, full content width, 2 columns
     ≤767  .bsx-sheet  full-screen sheet with its own field
   Scroll lock: html.bsx-locked only (overflow) — never body position:fixed. */
.bsx-panel, .bsx-sheet, .bsx-scrim{ display:none; }
html.bsx-locked, html.bsx-locked body{ overflow:hidden !important; }

html[data-pdp-design="b"] #pdpx-header .bsx-scrim:not([hidden]){
    display:block; position:fixed; inset:0; z-index:-1; background:rgba(17,18,20,.24);
}
html[data-pdp-design="b"] #pdpx-header .bsx-panel:not([hidden]){
    display:block; position:absolute; top:100%; left:0; right:0; z-index:5;
    max-height:min(74vh, 700px); overflow:auto; overscroll-behavior:contain;
    background:var(--paper); border-top:1px solid var(--ink); border-bottom:1px solid var(--rule);
    box-shadow:0 24px 48px -32px rgba(17,18,20,.35);
    text-align:left; font-family:'Jost',sans-serif; color:var(--ink);
}
html[data-pdp-design="b"] #pdpx-header.pxh-fixed .bsx-panel:not([hidden]){ max-height:calc(100vh - 72px); }
/* not fixed: the panel starts below the full header, so cap it by what is left of the screen */
html[data-pdp-design="b"] #pdpx-header:not(.pxh-fixed) .bsx-panel:not([hidden]){ max-height:min(700px, calc(100vh - var(--bsx-top, 180px) - 16px)); }
@media (max-width:767px){
    html[data-pdp-design="b"] #pdpx-header .bsx-panel,
    html[data-pdp-design="b"] #pdpx-header .bsx-scrim{ display:none !important; }
}

html[data-pdp-design="b"] .bsx-sheet:not([hidden]){
    display:flex; flex-direction:column; position:fixed; inset:0; z-index:10002;
    background:var(--paper); color:var(--ink); font-family:'Jost',sans-serif;
}
@media (min-width:768px){ html[data-pdp-design="b"] .bsx-sheet{ display:none !important; } }

/* busy line: a hairline that sweeps while a request is in flight */
.bsx-bar{ position:relative; height:1px; overflow:hidden; }
.bsx-panel .bsx-bar{ position:sticky; top:0; z-index:1; }
.is-busy > .bsx-bar::after{
    content:''; position:absolute; top:0; bottom:0; left:-40%; width:40%; background:var(--ink);
    animation:bsx-sweep 1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes bsx-sweep{ to{ left:100%; } }

/* sheet top: the field, set large and light */
.bsx-sheet-top{
    flex:0 0 auto; display:flex; align-items:center; gap:var(--x2);
    padding:calc(var(--x2) + env(safe-area-inset-top, 0px)) var(--x2) var(--x2) var(--x4);
    border-bottom:1px solid var(--ink); margin:0;
}
.bsx-sheet-top input{
    flex:1 1 auto; min-width:0; height:52px; margin:0; padding:0; border:0; border-radius:0; background:transparent;
    -webkit-appearance:none; appearance:none; font-family:inherit; font-size:20px; font-weight:300; color:var(--ink);
}
.bsx-sheet-top input::placeholder{ color:var(--muted); opacity:1; }
.bsx-sheet-top input::-webkit-search-cancel-button{ -webkit-appearance:none; }
html[data-pdp-design="b"] .bsx-sheet-top input:focus-visible{ outline:none !important; }
.bsx-x{
    position:relative; flex:0 0 auto; width:var(--tap); height:var(--tap); margin:0; padding:0;
    background:none; border:0; border-radius:0; cursor:pointer; color:var(--ink);
}
.bsx-x::before, .bsx-x::after{
    content:''; position:absolute; left:50%; top:50%; width:20px; height:1.5px; background:currentColor;
}
.bsx-x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.bsx-x::after{ transform:translate(-50%,-50%) rotate(-45deg); }

.bsx-sheet .bsx-body{
    flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    padding:var(--x5) var(--x4) calc(var(--x7) + env(safe-area-inset-bottom, 0px));
}
.bsx-panel .bsx-body{ padding:var(--x6) var(--x6) var(--x6); } /* same side gutter as the header row */

/* layout: main (products / recent / top) + side (names, lines, categories, banner) */
.bsx-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:var(--x8); }
.bsx-grid.is-single{ grid-template-columns:minmax(0,1fr); max-width:760px; }
.bsx-main, .bsx-side{ min-width:0; }
.bsx-sec + .bsx-sec{ margin-top:var(--x6); }
@media (max-width:991px){
    .bsx-grid{ grid-template-columns:minmax(0,1fr); row-gap:var(--x6); }
    .bsx-panel .bsx-body{ padding:var(--x5) var(--x6); }
}

/* section heading */
.bsx-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--x3); margin:0 0 var(--x3); padding-bottom:var(--x2); border-bottom:1px solid var(--rule); }
.bsx-h{
    margin:0 !important; padding:0 !important; font-family:inherit !important;
    font-size:var(--t-xs) !important; font-weight:500 !important; line-height:1.4 !important;
    letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--muted) !important;
}
.bsx-clear{
    min-height:32px; margin:0; padding:0; background:none; border:0; cursor:pointer;
    font-family:inherit; font-size:var(--t-sm); color:var(--ink2); text-decoration:underline; text-underline-offset:3px;
}
.bsx-clear:hover{ color:var(--ink); }

/* chips: recent searches + suggestions */
.bsx-chips{ display:flex; flex-wrap:wrap; gap:var(--x2); }
.bsx-chip{
    display:inline-flex; align-items:center; min-height:40px; max-width:100%; margin:0; padding:0 var(--x3);
    background:var(--paper); border:1px solid var(--rule); border-radius:0; cursor:pointer;
    font-family:inherit; font-size:var(--t-base); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:border-color .15s ease;
}
.bsx-chip:hover{ border-color:var(--ink); }
@media (max-width:767px){ .bsx-chip{ min-height:var(--tap); } }

/* product rows */
.bsx-prod{
    display:grid; grid-template-columns:64px minmax(0,1fr) auto; column-gap:var(--x4); align-items:center;
    padding:var(--x3) 0; border-bottom:1px solid var(--rule-soft); color:var(--ink) !important; text-decoration:none !important;
}
.bsx-thumb{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; padding:6px; background:var(--surface); overflow:hidden; }
.bsx-thumb img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.bsx-prod-text{ display:block; min-width:0; }
.bsx-prod-text > span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.35; }
.bsx-prod .bsx-prod-brand{ font-size:var(--t-md); font-weight:600; color:var(--ink); }
.bsx-prod .bsx-prod-name{ font-size:var(--t-base); color:var(--ink2); }
.bsx-prod .bsx-prod-meta{ font-size:var(--t-sm); color:var(--muted); }
.bsx-prod .bsx-tag{ display:inline-block !important; margin-top:var(--x1); padding:1px var(--x2); border:1px solid var(--rule); font-size:var(--t-xs); color:var(--ink2); }
.bsx-prod .bsx-prod-price{ font-size:var(--t-base); color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.bsx-prod:hover .bsx-prod-name{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.bsx-prod:focus-visible{ outline-offset:-2px !important; }
@media (max-width:767px){
    .bsx-prod{ grid-template-columns:56px minmax(0,1fr) auto; column-gap:var(--x3); }
    .bsx-thumb{ width:56px; height:56px; }
}

.bsx-more{
    display:flex; align-items:center; justify-content:center; width:100%; min-height:var(--tap); margin:0; padding:0;
    background:none; border:0; border-bottom:1px solid var(--rule-soft); border-radius:0; cursor:pointer;
    font-family:inherit; font-size:var(--t-sm); color:var(--ink2); text-decoration:underline; text-underline-offset:3px;
}
.bsx-more:hover{ background:var(--surface); color:var(--ink); }
.bsx-all{
    display:flex; align-items:center; justify-content:center; min-height:52px; margin-top:var(--x4); padding:0 var(--x5);
    background:var(--ink); color:var(--paper) !important; text-decoration:none !important;
    font-size:var(--t-sm); font-weight:500; letter-spacing:.14em; text-transform:uppercase; transition:background-color .15s ease;
}
.bsx-all:hover{ background:#2b2d31; }
.bsx-none{ margin:0 0 var(--x2) !important; padding:var(--x3) 0 !important; font-size:var(--t-base) !important; color:var(--muted) !important; }

/* brand names: B's signature large light type */
.bsx-names, .bsx-rows{ list-style:none; margin:0; padding:0; }
.bsx-names{ display:flex; flex-wrap:wrap; gap:0 var(--x5); }
.bsx-names li, .bsx-rows li{ margin:0; padding:0; }
.bsx-names a{
    display:inline-flex; align-items:center; min-height:var(--tap); color:var(--ink2) !important;
    font-size:24px; font-weight:200; letter-spacing:-.01em; line-height:1.2; text-decoration:underline;
    text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:transparent;
    transition:color .15s ease, text-decoration-color .15s ease;
}
.bsx-names a:hover{ color:var(--ink) !important; text-decoration-color:var(--ink); }
.bsx-rows li{ border-bottom:1px solid var(--rule-soft); }
.bsx-rows a{ display:flex; align-items:center; min-height:var(--tap); font-size:var(--t-base); color:var(--ink) !important; text-decoration:none; }
.bsx-rows a:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:767px){ .bsx-names a{ font-size:22px; } }

.bsx-banner img{ display:block; width:100%; height:auto; }
.bsx-banner.bsx-slider{ position:relative; }
.bsx-banner .bsx-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.bsx-banner .bsx-slide.is-on{ position:relative; opacity:1; }
.bsx-banner .bsx-slide a{ display:block; }
.bsx-banner-bar{ display:flex; align-items:center; gap:12px; padding:10px 2px 2px; font-size:13px; }
.bsx-banner-bar .bsx-caption{ font-weight:600; text-decoration:none; color:inherit; margin-right:auto; }
.bsx-banner-bar .bsx-caption:hover{ text-decoration:underline; }
.bsx-count{ display:inline-flex; align-items:center; gap:6px; opacity:.65; font-variant-numeric:tabular-nums; }
.bsx-count b{ font-weight:600; }
.bsx-count i{ width:12px; height:1px; background:currentColor; display:inline-block; opacity:.5; }
.bsx-progress{ flex:0 0 54px; height:2px; border-radius:2px; background:rgba(0,0,0,.14); position:relative; overflow:hidden; }
.bsx-progress i{ position:absolute; inset:0 auto 0 0; width:0; background:currentColor; opacity:.85; }
.bsx-arrows{ display:inline-flex; gap:2px; }
.bsx-arrow{ background:none; border:0; padding:2px; margin:0; cursor:pointer; color:inherit; line-height:0; opacity:.6; }
.bsx-arrow:hover{ opacity:1; }
/* phone sheet: 8 popular brand names are enough on one screen */
@media (max-width:767px){ .bsx-sheet .bsx-names li:nth-child(n+9){ display:none; } }

@media (prefers-reduced-motion:reduce){
    .is-busy > .bsx-bar::after{ animation:none; left:0; width:100%; opacity:.35; }
    .bsx-chip, .bsx-all, .bsx-names a{ transition:none; }
}

/* ======================================================================
   Page width guard (B for everyone): legacy full-bleed rows/dividers from the
   live markup (.fluid-divider, .row with negative margins on the product page,
   .divider on login) are a few px wider than the viewport. clip — unlike hidden —
   does not create a scroll container, so position:sticky keeps working.
   ====================================================================== */
html[data-pdp-design="b"],
html[data-pdp-design="b"] body{ overflow-x:clip; }


/* ======================================================================
   Live mobile menu on TABLETS (760–991px). Its look comes from mobile.css,
   which only loads below 760px — without this the panel is the unstyled
   navy default. Same white rows as on phones, as a left sheet.
   ====================================================================== */
@media (min-width:760px) and (max-width:991.98px){
    html[data-pdp-design="b"] #wsus__mobile_menu{
        position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important;
        width:min(420px, 100vw) !important; height:100% !important; margin:0 !important; padding:0 !important;
        display:flex !important; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
        background:var(--paper) !important; color:var(--ink); border-right:1px solid var(--ink);
        font-family:'Jost',sans-serif;
    }
    html[data-pdp-design="b"] #wsus__mobile_menu .wsus__mobile_menu_close{
        position:absolute; top:6px; right:6px; z-index:2; width:44px; height:44px;
        display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--ink); background:none; cursor:pointer;
    }
    html[data-pdp-design="b"] #wsus__mobile_menu .mainMobileMenu{ display:flex !important; flex-direction:column !important; padding:0 0 var(--x6); }
    html[data-pdp-design="b"] #wsus__mobile_menu .mainMobileMenu > a,
    html[data-pdp-design="b"] #wsus__mobile_menu .mainMobileMenu > a:hover{ text-decoration:none; color:var(--ink); }
    html[data-pdp-design="b"] #wsus__mobile_menu .menu-row{
        position:relative; display:flex !important; flex-direction:row; align-items:center; width:100%; min-height:52px;
        margin:0 !important; padding:var(--x3) 56px var(--x3) var(--x5) !important; border-bottom:1px solid var(--rule-soft);
        background:var(--paper) !important;
    }
    html[data-pdp-design="b"] #wsus__mobile_menu .menu-row > *:first-child{ margin-right:var(--x4); }
    html[data-pdp-design="b"] #wsus__mobile_menu .menu-row :is(span, a){
        font-family:'Jost',sans-serif; font-size:15px !important; font-weight:400; color:var(--ink) !important; text-decoration:none;
    }
    html[data-pdp-design="b"] #wsus__mobile_menu .menu-row i:first-child{ font-size:18px; color:var(--muted); }
    html[data-pdp-design="b"] #wsus__mobile_menu .menu-row.menu-cat > i:last-child:not(:first-child){
        position:absolute; right:var(--x2); top:50%; transform:translateY(-50%); width:44px; height:44px;
        display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted) !important; cursor:pointer;
    }
    html[data-pdp-design="b"] #wsus__mobile_menu .menu-cat-img-link{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; background:var(--surface); }
    html[data-pdp-design="b"] #wsus__mobile_menu .menu-cat-img-link img{ width:30px; height:30px; object-fit:contain; mix-blend-mode:multiply; }
    html[data-pdp-design="b"] #wsus__mobile_menu .mobile-menu-contact-heading{
        display:block; margin:var(--x6) var(--x5) var(--x3); font-size:11px !important; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) !important;
    }
    html[data-pdp-design="b"] #wsus__mobile_menu .mainMobileMenu > .row{
        display:flex; align-items:center; gap:var(--x3); width:auto; margin:0 var(--x5) var(--x2) !important; padding:0 !important;
    }
    html[data-pdp-design="b"] #wsus__mobile_menu .mainMobileMenu > .row :is(a, i){ width:auto !important; padding:0 !important; color:var(--ink) !important; font-size:15px; text-decoration:none; }
    html[data-pdp-design="b"] #wsus__mobile_menu .socialIconLink{
        display:inline-flex !important; align-items:center; justify-content:center; width:44px !important; height:44px !important;
        border:1px solid var(--rule) !important; border-radius:0 !important; color:var(--ink) !important;
    }
}


/* ======================================================================
   Audit fixes (site-wide, B)
   ====================================================================== */
/* scroll-to-top: square, 44px, ink */
html[data-pdp-design="b"] .wsus__scroll_btn{
    width:44px !important; height:44px !important; line-height:44px !important; border-radius:0 !important;
    background:var(--ink) !important; color:var(--paper) !important; box-shadow:none !important; border:0 !important;
    /* hidden until main.js shows it after 300px of scroll (it used to sit on the page at load,
       over the hero slider's arrow); below modals, never above a backdrop */
    display:none; align-items:center; justify-content:center; padding:0; cursor:pointer; z-index:800 !important;
}
html[data-pdp-design="b"] .wsus__scroll_btn svg{ display:block; }
html[data-pdp-design="b"] .wsus__scroll_btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
/* phones: clear of the sticky add-to-cart bar on product pages */
@media (max-width:767px){
    html[data-pdp-design="b"] body:has(.mobile-sticky-cart) .wsus__scroll_btn{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* toast messages (toastr): square, ink, thin red line for errors */
html[data-pdp-design="b"] #toast-container > div{
    border-radius:0 !important; box-shadow:none !important; opacity:1 !important; background-image:none !important;
    padding:14px 16px !important; width:320px; max-width:calc(100vw - 24px);
    background-color:var(--ink) !important; color:var(--paper) !important; font-family:'Jost',sans-serif !important; font-size:14px !important;
    border-left:3px solid var(--paper) !important;
}
html[data-pdp-design="b"] #toast-container > .toast-error{ border-left-color:#e05a4f !important; }
html[data-pdp-design="b"] #toast-container .toast-title{ font-weight:500; }
/* tablet header: keep the search clear of the centred logo */
@media (min-width:768px) and (max-width:991px){
    /* page gutter 32 + burger offset 44 + 24px air before the centred logo */
    #pdpx-header .pxh-search{ max-width:calc(50vw - var(--pxh-logo) / 2 - 100px); }
    #pdpx-header .pxh-search input{ font-size:16px; }
}
@media (min-width:768px){
    #pdpx-header.pxh-fixed .pxh-search{ max-width:min(300px, calc(50vw - var(--pxh-logo) / 2 - 100px)); }
}
@media (min-width:760px) and (max-width:991.98px){
    html[data-pdp-design="b"] #wsus__mobile_menu .mainMobileMenu > .row a.socialIconLink{ width:44px !important; min-width:44px; padding:0 !important; }
}

/* pagination (vendor/pagination/custom-limited) */
.wow-pages{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--x1, 4px); margin:32px 0; font-family:'Jost',sans-serif; }
.wow-pages-item{
    display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 8px;
    border:1px solid #dcdee1; border-radius:0; background:#fff; color:#111214 !important; font-size:14px; text-decoration:none !important;
}
a.wow-pages-item:hover{ border-color:#111214; }
.wow-pages-item.is-on{ background:#111214; border-color:#111214; color:#fff !important; }
.wow-pages-item.is-off{ color:#c4c7cb !important; }
.wow-pages-item.is-gap{ border-color:transparent; min-width:24px; }

/* ======================================================================
   Error pages (errors/404, errors/product-unavailable) — B styling on the live markup
   ====================================================================== */
html[data-pdp-design="b"] .errorPageContainer{
    width:100%; max-width:760px !important; margin:0 auto !important; padding:96px 24px 120px !important; box-sizing:border-box; align-self:stretch;
    font-family:'Jost',sans-serif;
}
html[data-pdp-design="b"] .errorPageHolder{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; text-align:left !important; }
html[data-pdp-design="b"] .errorPageHolder .errorHeading{
    display:block; font-family:'Jost',sans-serif !important; font-size:clamp(96px, 12vw + 40px, 180px) !important; font-weight:200 !important;
    line-height:.9 !important; letter-spacing:-.04em !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .errorPageHolder .errorPageTitle{
    display:block; margin-top:var(--x5); font-family:'Jost',sans-serif !important; font-size:clamp(28px, 1.2vw + 20px, 40px) !important;
    font-weight:300 !important; line-height:1.15 !important; letter-spacing:-.01em; text-transform:none !important; color:var(--ink) !important;
    padding-bottom:var(--x5); border-bottom:1px solid var(--ink); width:100%;
}
html[data-pdp-design="b"] .errorPageHolder .errorPageDescription{
    display:block; margin-top:var(--x5) !important; max-width:560px; font-family:'Jost',sans-serif !important; font-size:16px !important;
    line-height:1.7 !important; color:var(--ink2) !important; text-align:left !important;
}
html[data-pdp-design="b"] .errorPageHolder > a{ margin-top:var(--x6); text-decoration:none !important; }
html[data-pdp-design="b"] .errorPageHolder .wow_button{
    display:flex !important; align-items:center; justify-content:center; min-width:260px; min-height:56px; margin:0 !important; padding:0 var(--x6) !important;
    background:var(--ink) !important; border:1px solid var(--ink) !important; border-radius:0 !important; color:var(--paper) !important; box-shadow:none !important;
    font-family:'Jost',sans-serif !important; font-size:var(--t-base) !important; font-weight:500 !important; letter-spacing:.16em !important; text-transform:uppercase !important;
    transition:background-color .2s ease, color .2s ease;
}
html[data-pdp-design="b"] .errorPageHolder .wow_button:hover{ background:var(--paper) !important; color:var(--ink) !important; }
@media (max-width:767.98px){
    html[data-pdp-design="b"] .errorPageContainer{ padding:56px 16px 72px !important; }
    html[data-pdp-design="b"] .errorPageHolder > a,
    html[data-pdp-design="b"] .errorPageHolder .wow_button{ width:100%; }
}

/* ======================================================================
   "Added to cart" modal (partials/cart_modal) — B details on the live markup
   ====================================================================== */
html[data-pdp-design="b"] .cart_modal .checkedMark{ color:var(--ink) !important; font-size:18px !important; }
html[data-pdp-design="b"] .cart_modal .cart_modal_label{
    font-family:'Jost',sans-serif !important; font-size:24px !important; font-weight:300 !important; letter-spacing:-.01em; text-transform:none !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .cart_modal :is(.cart_modal_content, button, a){ border-radius:0 !important; box-shadow:none !important; }
html[data-pdp-design="b"] .cart_modal .cartModalMainImage{ background:var(--surface); mix-blend-mode:multiply; object-fit:contain; }
html[data-pdp-design="b"] .cart_modal #cartModalBottomTitle{
    font-family:'Jost',sans-serif !important; font-size:var(--t-xs) !important; font-weight:500 !important; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) !important;
}
/* nothing to recommend and no banner: drop the empty "Rekomenduojame" band */
html[data-pdp-design="b"] .cart_modal .cartModalBottom:not(:has(.prod-slider-wrapper, img)){ display:none !important; }
/* the modal already says "Prekė įdėta į krepšelį" — no second toast while it is open */
html[data-pdp-design="b"] body:has(.cart_modal.show) #toast-container > .toast-success{ display:none !important; }

/* ======================================================================
   B mobile menu (#pxh-mmenu) — the old drawer rebuilt in plain JS.
   Markup: frontend/pages/partials/pdp-mobile-menu.blade.php
   Behaviour: public/js/mobile-menu-b.js
   ====================================================================== */
#pxh-mmenu{
    position:fixed; inset:0; z-index:10002;
    background:rgba(17,18,20,.45);
    opacity:0; transition:opacity .22s ease;
    font-family:'Jost',sans-serif;
}
#pxh-mmenu[hidden]{ display:none; }
#pxh-mmenu.is-open{ opacity:1; }
#pxh-mmenu .pxh-mm{
    position:absolute; top:0; left:0; bottom:0;
    width:min(420px, 100vw); height:100%;
    display:flex; flex-direction:column;
    padding:44px 0 32px;   /* the close button sits in its own strip, like the old menu */
    background:var(--paper); color:var(--ink);
    border-right:1px solid var(--ink);
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(-100%); transition:transform .24s ease;
    outline:none;
}
#pxh-mmenu.is-open .pxh-mm{ transform:translateX(0); }
@media (prefers-reduced-motion:reduce){
    #pxh-mmenu, #pxh-mmenu .pxh-mm{ transition:none; }
}
#pxh-mmenu .pxh-mm-close{
    position:absolute; top:4px; right:4px; z-index:2;
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    padding:0; border:0; background:none; cursor:pointer;
}
#pxh-mmenu .pxh-mm-close .pxh-x{ position:relative; width:16px; height:16px; display:block; }
#pxh-mmenu .pxh-mm-close .pxh-x::before,
#pxh-mmenu .pxh-mm-close .pxh-x::after{
    content:""; position:absolute; top:50%; left:0; width:16px; height:1px; background:var(--ink);
}
#pxh-mmenu .pxh-mm-close .pxh-x::before{ transform:rotate(45deg); }
#pxh-mmenu .pxh-mm-close .pxh-x::after{ transform:rotate(-45deg); }

/* one row: icon/image, name, and (for categories) an expander pinned right */
#pxh-mmenu .pxh-mm-item{ position:relative; }
#pxh-mmenu .pxh-mm-row{
    display:flex; align-items:center; gap:12px; width:100%; min-height:52px;
    padding:10px 56px 10px 20px;
    border-bottom:1px solid var(--rule-soft);
    color:var(--ink) !important; font-size:15px; font-weight:400; line-height:1.3;
    text-decoration:none !important; background:var(--paper);
}
#pxh-mmenu .pxh-mm-row:hover{ background:var(--surface); }
#pxh-mmenu .pxh-mm-row span{ font-size:15px !important; color:var(--ink) !important; }
#pxh-mmenu .pxh-mm-row i{ flex:0 0 auto; width:20px; font-size:18px; color:var(--muted); text-align:center; }
#pxh-mmenu .pxh-mm-row img{
    flex:0 0 auto; width:30px; height:30px; object-fit:contain; mix-blend-mode:multiply; background:var(--surface);
}
#pxh-mmenu .pxh-mm-account{ border-bottom:1px solid var(--ink); }
#pxh-mmenu .pxh-mm-exp{
    position:absolute; top:0; right:0; width:52px; height:52px;
    display:flex; align-items:center; justify-content:center;
    padding:0; border:0; border-bottom:1px solid var(--rule-soft); background:none; cursor:pointer;
}
#pxh-mmenu .pxh-mm-chev{
    width:8px; height:8px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
    transform:rotate(-45deg); transition:transform .18s ease; margin-left:-3px;
}
#pxh-mmenu .pxh-mm-exp[aria-expanded="true"] .pxh-mm-chev{ transform:rotate(45deg); margin:-3px 0 0 0; }

/* a loaded level: animated open/close, nested rows a touch quieter */
#pxh-mmenu .pxh-mm-sub{ height:0; overflow:hidden; transition:height .22s ease; background:var(--paper); }
#pxh-mmenu .pxh-mm-sub[hidden]{ display:none; }
#pxh-mmenu .pxh-mm-sub .pxh-mm-row{ min-height:48px; font-size:14px; color:var(--muted-ink, var(--ink)) !important; }
#pxh-mmenu .pxh-mm-sub .pxh-mm-row span{ font-size:14px !important; }
#pxh-mmenu .pxh-mm-sub .pxh-mm-exp{ height:48px; }

/* nav links, then the contact block the old menu ended with */
#pxh-mmenu .pxh-mm-links{ margin-top:24px; border-top:1px solid var(--ink); }
#pxh-mmenu .pxh-mm-head{
    display:block; margin:32px 20px 12px;
    font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) !important;
}
#pxh-mmenu .pxh-mm-contact{
    display:flex; align-items:center; gap:12px; padding:6px 20px;
    color:var(--ink) !important; font-size:15px; text-decoration:none !important;
}
#pxh-mmenu .pxh-mm-contact i{ width:20px; font-size:16px; color:var(--muted); text-align:center; }
#pxh-mmenu .pxh-mm-social{ display:flex; gap:8px; margin:16px 20px 0; }
#pxh-mmenu .pxh-mm-social a{
    display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
    border:1px solid var(--rule); color:var(--ink) !important; text-decoration:none !important;
}
@media (min-width:992px){
    #pxh-mmenu{ display:none !important; }
}

/* ======================================================================
   Footer newsletter (layouts/partials/site-footer-designs)
   A band above the footer proper: statement left, field right. Square,
   hairlines, one ink button — the only filled control down here.
   ====================================================================== */
html[data-pdp-design="b"] .sfx-news{
    border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
    background:var(--paper); font-family:'Jost',sans-serif;
}
html[data-pdp-design="b"] .sfx-news-inner{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--x6) var(--x8);
    align-items:start; max-width:1440px; margin:0 auto; padding:var(--x7) var(--x6);
}
html[data-pdp-design="b"] .sfx-news-title{
    margin:0 0 var(--x2) !important; padding:0 !important;
    font-size:var(--t-2xl) !important; font-weight:300 !important; line-height:1.2 !important;
    letter-spacing:-.01em; color:var(--ink) !important;
}
html[data-pdp-design="b"] .sfx-news-sub{
    margin:0 !important; font-size:var(--t-lg) !important; line-height:1.5 !important; color:var(--ink2) !important;
}
html[data-pdp-design="b"] .sfx-news-label{
    display:block; margin-bottom:var(--x2);
    font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.16em; text-transform:uppercase; color:var(--muted) !important;
}
html[data-pdp-design="b"] .sfx-news-row{ display:flex; gap:var(--x2); }
html[data-pdp-design="b"] .sfx-news-input{
    flex:1 1 auto; min-width:0; height:52px; padding:0 var(--x4);
    /* a form field's edge needs 3:1 against the page (WCAG 1.4.11); the hairline --rule is 1.35:1 */
    border:1px solid #8b8f94; border-radius:0; background:var(--paper);
    font-family:'Jost',sans-serif; font-size:var(--t-lg) !important; color:var(--ink) !important;
    transition:border-color .2s ease;
}
html[data-pdp-design="b"] .sfx-news-input::placeholder{ color:var(--muted); }
html[data-pdp-design="b"] .sfx-news-input:focus{ outline:0; border-color:var(--ink); }
html[data-pdp-design="b"] .sfx-news-btn{
    flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:var(--x2);
    height:52px; padding:0 var(--x5); border:1px solid var(--ink); border-radius:0;
    background:var(--ink); color:var(--paper) !important; cursor:pointer;
    font-family:'Jost',sans-serif; font-size:var(--t-md) !important; font-weight:500 !important;
    letter-spacing:.12em; text-transform:uppercase;
    transition:background-color .2s ease;
}
html[data-pdp-design="b"] .sfx-news-btn:hover{ background:#000; }
html[data-pdp-design="b"] .sfx-news-fine{
    margin:var(--x3) 0 0 !important; max-width:62ch;
    font-size:var(--t-md) !important; line-height:1.5 !important; color:var(--muted) !important;
}
html[data-pdp-design="b"] .sfx-news-fine a{
    color:var(--ink) !important; text-decoration:none; border-bottom:1px solid var(--rule);
}
html[data-pdp-design="b"] .sfx-news-fine a:hover{ border-bottom-color:var(--ink); }
@media (max-width:991px){
    html[data-pdp-design="b"] .sfx-news-inner{ grid-template-columns:1fr; padding:var(--x6) var(--x5); gap:var(--x5); }
}
@media (max-width:600px){
    html[data-pdp-design="b"] .sfx-news-row{ flex-direction:column; }
    html[data-pdp-design="b"] .sfx-news-btn{ width:100%; }
}

/* ======================================================================
   Breadcrumbs · the plate strip (partials/breadcrumbs.blade.php, .bcx-*)
   Every page shared one grey line of text with slashes — the most generic
   element on the site. B builds it out of the same cabinet the product page
   is made of: one hairline frame split into plates, the gaps between them
   doing the work the slashes used to. Ink marks the fixed points — the home
   plate you came from, and the plate you are standing on. The live design
   still gets the plain list (the "/" stays in the markup).
   ====================================================================== */
html[data-pdp-design="b"] .bcx-list{
    display:inline-flex !important; flex-wrap:nowrap; align-items:stretch;
    max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
    margin:0 !important; padding:0 !important; list-style:none;
    /* the hairlines are the frame's own background showing through 1px gaps —
       no double borders where two plates meet */
    gap:1px; background:var(--rule); border:1px solid var(--rule);
    font-family:'Jost',sans-serif; line-height:1 !important;
}
html[data-pdp-design="b"] .bcx-list::-webkit-scrollbar{ display:none; }
html[data-pdp-design="b"] .bcx-list > li{
    display:flex; align-items:center; flex:0 0 auto;
    margin:0 !important; padding:0 !important; background:var(--paper);
    font-size:10px !important; font-weight:500 !important;
    letter-spacing:.12em; text-transform:uppercase; color:var(--muted) !important;
    white-space:nowrap;
}
/* the gap is the separator now */
html[data-pdp-design="b"] .bcx-sep{ display:none !important; }

html[data-pdp-design="b"] .bcx-item{ padding:0 !important; }
html[data-pdp-design="b"] .bcx-item{ min-width:0; flex:0 1 auto; }
html[data-pdp-design="b"] .bcx-item > a,
html[data-pdp-design="b"] .bcx-current{
    /* block, not flex, so a label too long for the screen can ellipsis;
       the line-height does the centring — and it has to come after the font
       shorthand, which resets it */
    display:block; font:inherit !important;
    height:24px; line-height:24px !important; padding:0 var(--x3) !important;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    letter-spacing:inherit; text-transform:inherit;
    color:var(--muted) !important; text-decoration:none !important;
    transition:background-color .18s ease, color .18s ease;
}
html[data-pdp-design="b"] .bcx-item > a:hover{ background:var(--surface); color:var(--ink) !important; }
/* the deepest step is where the trail ends (on a product page that is the category,
   not the page itself) — ink type, but no fill: the filled plate means "you are here" */
html[data-pdp-design="b"] .bcx-list > .bcx-item:last-child:not(.bcx-current) > a{ color:var(--ink) !important; }
html[data-pdp-design="b"] .bcx-item > a:focus-visible{ outline:2px solid var(--ink); outline-offset:-3px; }
/* the plate you are standing on */
html[data-pdp-design="b"] .bcx-current{ background:var(--ink) !important; }
html[data-pdp-design="b"] .bcx-current,
html[data-pdp-design="b"] .bcx-current > a,
html[data-pdp-design="b"] .bcx-current > a:hover{ background:var(--ink) !important; color:var(--paper) !important; }
/* home: the start of the strip — a grey plate, so the ink stays on the one that
   says where you are (two filled plates read as a black bar, not as a path) */
html[data-pdp-design="b"] .bcx-home{ background:var(--surface) !important; }
html[data-pdp-design="b"] .bcx-home > a{
    display:flex; align-items:center; justify-content:center;
    width:28px; height:24px; padding:0 !important; margin:0 !important;
    background:var(--surface); color:var(--ink) !important; text-decoration:none !important;
    transition:background-color .18s ease, color .18s ease;
}
html[data-pdp-design="b"] .bcx-home > a:hover{ background:var(--ink); color:var(--paper) !important; }
html[data-pdp-design="b"] .bcx-home > a:focus-visible{ outline:2px solid var(--ink); outline-offset:-3px; }
html[data-pdp-design="b"] .bcx-home i{ font-size:11px !important; line-height:1 !important; color:inherit !important; margin:0 !important; }

@media (max-width:767px){
    html[data-pdp-design="b"] .bcx-list > li{ font-size:9px !important; letter-spacing:.06em; }
    html[data-pdp-design="b"] .bcx-item > a,
    html[data-pdp-design="b"] .bcx-current{ height:20px; line-height:20px !important; padding:0 7px !important; }
    html[data-pdp-design="b"] .bcx-home > a{ width:22px; height:20px; }
    html[data-pdp-design="b"] .bcx-home i{ font-size:10px !important; }
    /* a deep tree has to fit the screen: the ancestors give up their width first
       (ellipsis), the plate you came from keeps its label whole */
    html[data-pdp-design="b"] .bcx-list > .bcx-item:last-child{ flex:0 0 auto; }
}
@media (prefers-reduced-motion:reduce){
    html[data-pdp-design="b"] .bcx-item > a,
    html[data-pdp-design="b"] .bcx-home > a{ transition:none; }
}

/* ======================================================================
   Overlays — one language for the cart, review and notify modals
   (partials/cart_modal, livewire/write-product-review, #notify-modal in
   product-detail). Light title, micro-caps labels, 1px fields, 48px
   buttons (ink = the action, outline = the way back), square panels.
   ====================================================================== */

/* --- cart modal ("Prekė įdėta į krepšelį") ------------------------------ */
/* the ✓ and the title sat in bootstrap columns: on a phone the title started 42px right of the tick */
html[data-pdp-design="b"] .cart_modal .cartModalTop > .col-12 > .row:first-child{
    display:flex !important; flex-wrap:nowrap; align-items:center; gap:var(--x3); margin:0 !important; padding-right:36px;
}
html[data-pdp-design="b"] .cart_modal .checkedMark,
html[data-pdp-design="b"] .cart_modal .cart_modal_label{ flex:0 0 auto; width:auto !important; margin:0 !important; padding:0 !important; }
html[data-pdp-design="b"] .cart_modal .cart_modal_label{ flex:1 1 auto; line-height:1.2 !important; }
/* product: brand as the eyebrow, name in ink — same on every width */
html[data-pdp-design="b"] .cart_modal #cart_modal_product_title{
    font-family:'Jost',sans-serif !important; font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.14em; text-transform:uppercase; color:var(--muted) !important; line-height:1.4 !important;
}
html[data-pdp-design="b"] .cart_modal #cart_modal_product_description{
    margin-top:2px; font-family:'Jost',sans-serif !important; font-size:var(--t-base) !important; font-weight:400 !important;
    line-height:1.4 !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .cart_modal #cart_modal_product_price{
    font-family:'Jost',sans-serif !important; font-size:var(--t-lg) !important; font-weight:500 !important; color:var(--ink) !important;
    font-variant-numeric:tabular-nums;
}
/* the two actions: identical on a phone and a desktop (the phone had 12px lowercase) */
html[data-pdp-design="b"] .cart_modal :is(#cart_modal_continue_shop, #cart_modal_purchase_next){
    display:inline-flex !important; align-items:center; justify-content:center; gap:var(--x2);
    width:100% !important; height:48px !important; margin:0 !important; padding:0 var(--x4) !important;
    border:1px solid var(--ink) !important; font-family:'Jost',sans-serif !important; font-size:var(--t-md) !important;
    font-weight:500 !important; letter-spacing:.12em !important; text-transform:uppercase !important; line-height:1 !important;
    transition:background-color .2s ease, color .2s ease;
}
html[data-pdp-design="b"] .cart_modal #cart_modal_continue_shop{ background:var(--paper) !important; color:var(--ink) !important; }
html[data-pdp-design="b"] .cart_modal #cart_modal_continue_shop:hover{ background:var(--ink) !important; color:var(--paper) !important; }
html[data-pdp-design="b"] .cart_modal #cart_modal_purchase_next{ background:var(--ink) !important; color:var(--paper) !important; }
html[data-pdp-design="b"] .cart_modal #cart_modal_purchase_next:hover{ background:#000 !important; }
html[data-pdp-design="b"] .cart_modal :is(#cart_modal_continue_shop, #cart_modal_purchase_next) .icon{ font-size:10px !important; color:inherit !important; margin:0 !important; }
/* with the recommendation band hidden, the top section's divider was a stray line under the buttons */
html[data-pdp-design="b"] .cart_modal .cartModalTop:has(+ .cartModalBottom:not(:has(.prod-slider-wrapper, img))){ border-bottom:0 !important; }
html[data-pdp-design="b"] .cart_modal #cart_modal_close{ color:var(--ink) !important; cursor:pointer; }
@media (max-width:991px){
    html[data-pdp-design="b"] .cart_modal .cartModalTop{ padding:var(--x2) 0 0 !important; }
    html[data-pdp-design="b"] .cart_modal .cart_modal_label{ font-size:var(--t-xl) !important; }
    /* the button row kept bootstrap's -12px row margins, so the buttons stuck out past the content above */
    html[data-pdp-design="b"] .cart_modal .cartModalTop .row.mt-30{ margin:var(--x5) 0 0 !important; }
    html[data-pdp-design="b"] .cart_modal .cartModalTop .row.mt-30 > [class*="col-"]{ padding:0 !important; }
    html[data-pdp-design="b"] .cart_modal .cartModalTop .row.mt-30 > [class*="col-"]:first-child{ margin-bottom:var(--x2) !important; }
}

/* --- review modal ("Įvertinkite prekę") ---------------------------------- */
html[data-pdp-design="b"] .write_review_modal .wr-modal{ border-radius:0 !important; box-shadow:none !important; font-family:'Jost',sans-serif; }
html[data-pdp-design="b"] .write_review_modal .wr-modal__title{
    font-family:'Jost',sans-serif !important; font-size:24px !important; font-weight:300 !important; letter-spacing:-.01em; color:var(--ink) !important;
}
html[data-pdp-design="b"] .write_review_modal .wr-modal__close{ color:var(--ink) !important; min-width:44px; min-height:44px; margin:-12px -12px 0 0 !important; }
/* the product thumbnail grew to ~155px with grey bars on a phone — keep it a 64px plate */
html[data-pdp-design="b"] .write_review_modal .wr-product__img{
    width:64px !important; height:64px !important; max-width:64px !important; flex:0 0 64px !important;
    object-fit:contain !important; background:var(--surface) !important; mix-blend-mode:multiply; padding:4px;
}
html[data-pdp-design="b"] .write_review_modal .wr-product__brand{ font-size:var(--t-xs) !important; font-weight:500 !important; letter-spacing:.14em; color:var(--muted) !important; }
html[data-pdp-design="b"] .write_review_modal .wr-field > label,
html[data-pdp-design="b"] .write_review_modal .wr-field__label{
    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"] .write_review_modal .wr-input{ border:1px solid var(--rule) !important; border-radius:0 !important; font-family:'Jost',sans-serif !important; font-size:16px !important; }
html[data-pdp-design="b"] .write_review_modal .wr-input:focus{ border-color:var(--ink) !important; outline:0; box-shadow:none !important; }
/* the incentive: black and white, not beige */
html[data-pdp-design="b"] .write_review_modal .wr-incentive{
    background:var(--surface) !important; border:0 !important; border-left:2px solid var(--ink) !important; border-radius:0 !important;
}
html[data-pdp-design="b"] .write_review_modal .wr-incentive__title{ 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"] .write_review_modal .wr-dropzone{ border:1px dashed var(--rule) !important; border-radius:0 !important; background:var(--paper) !important; }
html[data-pdp-design="b"] .write_review_modal .wr-dropzone:hover{ border-color:var(--ink) !important; }
/* consent: a square B checkbox instead of the browser's own */
html[data-pdp-design="b"] .write_review_modal .wr-consent input[type="checkbox"]{
    -webkit-appearance:none; appearance:none; flex:0 0 18px; width:18px; height:18px; margin:0 var(--x2) 0 0; vertical-align:-4px;
    border:1px solid var(--ink); border-radius:0; background:var(--paper); cursor:pointer; position:relative;
}
html[data-pdp-design="b"] .write_review_modal .wr-consent input[type="checkbox"]:checked{ background:var(--ink); }
html[data-pdp-design="b"] .write_review_modal .wr-consent input[type="checkbox"]:checked::after{
    content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid var(--paper); border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
}
html[data-pdp-design="b"] .write_review_modal .wr-consent input[type="checkbox"]:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
html[data-pdp-design="b"] .write_review_modal .wr-btn{
    height:48px !important; border-radius:0 !important; border:1px solid var(--ink) !important; box-shadow:none !important;
    font-family:'Jost',sans-serif !important; font-size:var(--t-md) !important; font-weight:500 !important; letter-spacing:.12em !important; text-transform:uppercase !important;
}
html[data-pdp-design="b"] .write_review_modal .wr-btn--primary{ background:var(--ink) !important; color:var(--paper) !important; }
html[data-pdp-design="b"] .write_review_modal .wr-btn--ghost{ background:var(--paper) !important; color:var(--ink) !important; }
@media (max-width:767px){
    /* production turns it into a bottom sheet with rounded top corners — B has no rounded corners */
    html[data-pdp-design="b"] .write_review_modal :is(.write_review_content, .wr-modal){ border-radius:0 !important; }
}

/* --- notify modal ("Informuoti kai prekė bus prieinama") ----------------- */
/* a 2px black frame and 2px button borders — lighter to match the other two */
html[data-pdp-design="b"] #notify-modal .notify-modal-content{ border:0 !important; border-radius:0 !important; box-shadow:none !important; font-family:'Jost',sans-serif; }
html[data-pdp-design="b"] #notify-modal .notify-modal-overlay{ background:rgba(17,18,20,.5) !important; }
html[data-pdp-design="b"] #notify-modal .notify-modal-close{ color:var(--ink) !important; min-width:44px; min-height:44px; }
html[data-pdp-design="b"] #notify-modal .notify-modal-title{
    font-family:'Jost',sans-serif !important; font-size:24px !important; font-weight:300 !important; letter-spacing:-.01em; line-height:1.2 !important;
    color:var(--ink) !important; padding-right:36px;
}
html[data-pdp-design="b"] #notify-modal .notify-modal-text{ font-size:var(--t-base) !important; line-height:1.6 !important; color:var(--ink2) !important; }
html[data-pdp-design="b"] #notify-modal .notify-form-group label{
    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"] #notify-modal .notify-input{ height:48px; border:1px solid var(--rule) !important; border-radius:0 !important; font-size:16px !important; font-family:'Jost',sans-serif !important; }
html[data-pdp-design="b"] #notify-modal .notify-input:focus{ border-color:var(--ink) !important; outline:0; }
html[data-pdp-design="b"] #notify-modal .notify-btn{
    height:48px; padding:0 var(--x5) !important; border:1px solid var(--ink) !important; border-radius:0 !important;
    font-family:'Jost',sans-serif !important; font-size:var(--t-md) !important; font-weight:500 !important; letter-spacing:.12em !important; text-transform:uppercase !important;
}
html[data-pdp-design="b"] #notify-modal .notify-btn-cancel{ background:var(--paper) !important; color:var(--ink) !important; }
html[data-pdp-design="b"] #notify-modal .notify-btn-confirm{ background:var(--ink) !important; color:var(--paper) !important; }
@media (max-width:767px){
    html[data-pdp-design="b"] #notify-modal .notify-modal-actions{ display:grid !important; grid-template-columns:1fr; gap:var(--x2); }
    html[data-pdp-design="b"] #notify-modal .notify-btn{ width:100%; }
    html[data-pdp-design="b"] #notify-modal .notify-btn-confirm{ order:-1; }
}

/* --- toasts never cover a modal's header or its close button -------------- */
/* phones: toasts become a bottom bar above the sticky cart (they sat over the header and every modal title) */
@media (max-width:767px){
    html[data-pdp-design="b"] #toast-container{
        top:auto !important; right:var(--x3) !important; left:var(--x3) !important;
        bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important; width:auto !important;
    }
    html[data-pdp-design="b"] #toast-container > div{ width:100% !important; max-width:none !important; margin:var(--x2) 0 0 !important; }
}
/* any width: while the review or notify modal is open, toasts go to the bottom corner */
html[data-pdp-design="b"] body:has(.write_review_modal.active, #notify-modal:not([style*="none"])) #toast-container{
    top:auto !important; bottom:var(--x5) !important;
}


/* ======================================================================
   Landmarks + skip link (WCAG 1.3.1 / 2.4.1)
   ====================================================================== */
/* <main> wraps the page content inside body's centred flex column — it repeats that
   setup so every page inside it lays out exactly as it did as a direct body child */
.site-main{ display:flex; flex-direction:column; align-items:center; width:100%; min-width:0; flex:1 0 auto; outline:0; }
.skip-link{
    position:fixed; left:var(--x3, 12px); top:var(--x3, 12px); z-index:100000; transform:translateY(-200%);
    padding:12px 18px; background:#111214; color:#fff !important; text-decoration:none !important;
    font-family:'Jost',sans-serif; font-size:14px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
}
/* :focus-visible, not :focus — on phones a script returning focus after a popup closed could land
   on the link and pop it up for touch users; the browser only flags keyboard focus as visible */
.skip-link:focus-visible{ transform:none; outline:2px solid #fff; outline-offset:-4px; }

/* the cart modal close and the review stars are real buttons now — keep the look of the icons */
html[data-pdp-design="b"] .cart_modal #cart_modal_close{
    position:absolute; background:none; border:0; padding:0; min-width:44px; min-height:44px;
    display:flex; align-items:center; justify-content:center; line-height:1;
}
html[data-pdp-design="b"] .cart_modal #cart_modal_close:focus-visible,
html[data-pdp-design="b"] .write_review_modal .wr-star:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
html[data-pdp-design="b"] .write_review_modal .wr-star{
    display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px;
    margin:0; padding:0; border:0; background:none; cursor:pointer; line-height:1;
}
html[data-pdp-design="b"] .write_review_modal .wr-star .icon{ color:#dcdee1; transition:color .12s ease; }
/* hints were #999 on white (2.8:1) — muted token 4.97:1 (WCAG 1.4.3) */
html[data-pdp-design="b"] .write_review_modal :is(.wr-rating__label, .wr-field__hint, .wr-dropzone__hint){ color:var(--muted) !important; }

/* card heart is a <button> now (2026-09-21): no browser button chrome anywhere a card shows */
html[data-pdp-design="b"] button.productWishIcon{
    -webkit-appearance:none; appearance:none; background:transparent; border:0; border-radius:0; padding:0;
    font:inherit; color:var(--ink); cursor:pointer;
}
html[data-pdp-design="b"] button.productWishIcon:focus-visible{ outline:2px solid var(--ink); outline-offset:-4px; }