/* ==========================================================================
   WOW24 — product page redesign (A / B / C)
   Loaded on product pages only, for arturas@dinamikus.lt (pdp-designs.blade.php).
   Tokens, header, switcher and footer live in site-designs.css (loaded everywhere).
   ========================================================================== */
/* ====================================================== 2. shared resets */
/* Production runs this container edge-to-edge (pr-0 + the row's -12px margins),
   so the gallery starts at x=0. Give it a real gutter and zero the row margins
   so columns start exactly at the gutter. Also fixes the 1452px-in-1440 overflow. */
html[data-pdp-design="a"] #wsus__product_details .container.pr-0 > .breadcrumbs_section,
html[data-pdp-design="a"] #wsus__product_details .container.pr-0 > .wsus__details_bg,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .breadcrumbs_section,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .wsus__details_bg,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .rcb,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .ds,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .rv,
html[data-pdp-design="c"] #wsus__product_details .container.pr-0{
    padding-left:var(--x6) !important; padding-right:var(--x6) !important;
}
html[data-pdp-design="a"] #wsus__product_details .wsus__details_bg .row,
html[data-pdp-design="b"] #wsus__product_details .wsus__details_bg .row,
html[data-pdp-design="c"] #wsus__product_details .row{ margin-left:0 !important; margin-right:0 !important; }
@media (max-width:759px){
html[data-pdp-design="a"] #wsus__product_details .container.pr-0 > .breadcrumbs_section,
html[data-pdp-design="a"] #wsus__product_details .container.pr-0 > .wsus__details_bg,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .breadcrumbs_section,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .wsus__details_bg,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .rcb,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .ds,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .rv,
html[data-pdp-design="c"] #wsus__product_details .container.pr-0{
        padding-left:var(--x4) !important; padding-right:var(--x4) !important;
    }
}
/* misc.css sets body{display:flex}, so .container is a flex item with the
   default min-width:auto and expands to its min-content width — 500px inside a
   390 viewport on variant-heavy products. min-width:0 lets it shrink again.
   (Pre-existing on production; fixed here for the redesigns only.) */
html[data-pdp-design]:not([data-pdp-design="orig"]) #wsus__product_details,
html[data-pdp-design]:not([data-pdp-design="orig"]) #wsus__product_details .container,
html[data-pdp-design]:not([data-pdp-design="orig"]) #wsus__product_details .wsus__details_bg,
html[data-pdp-design]:not([data-pdp-design="orig"]) #wsus__product_details .wsus__details_bg .row,
html[data-pdp-design="c"] #wsus__product_details .row{
    min-width:0 !important; max-width:100% !important;
}
html[data-pdp-design]:not([data-pdp-design="orig"]) #wsus__product_details .col-12{ min-width:0 !important; }
/* the older admin preview partial hard-codes buy-column margins with !important */
html[data-pdp-design="a"] .wsus__pro_details_text .row.mt-3,
html[data-pdp-design="b"] .wsus__pro_details_text .row.mt-3,
html[data-pdp-design="c"] .wsus__pro_details_text .row.mt-3,
html[data-pdp-design="a"] .wsus__pro_details_text .product-details-info,
html[data-pdp-design="b"] .wsus__pro_details_text .product-details-info,
html[data-pdp-design="c"] .wsus__pro_details_text .product-details-info{
    margin:0 !important;
}
/* legible small text — 11px #959595 on white was 2.6:1.
   (breadcrumbs used to be here too; the trail sets its own type — site-designs.css .bcx-*) */
html[data-pdp-design="a"] .product-code,
html[data-pdp-design="b"] .product-code,
html[data-pdp-design="c"] .product-code{ color:var(--ink2) !important; font-size:var(--t-sm) !important; }

/* the disclosure trigger is width:100%, throwing its arrow ~700px right of its label */
html[data-pdp-design="a"] .wow24-pi-trigger,
html[data-pdp-design="b"] .wow24-pi-trigger,
html[data-pdp-design="c"] .wow24-pi-trigger{
    width:auto !important; max-width:100% !important; justify-content:flex-start !important;
    gap:var(--x2) !important;
}
/* the proxy picker + restored copy exist under every design; only redesigns reveal them */
#pdpx-picker,
#pdpx-extra{ display:none; }
html[data-pdp-design="a"] #pdpx-picker,
html[data-pdp-design="b"] #pdpx-picker,
html[data-pdp-design="c"] #pdpx-picker,
html[data-pdp-design="c"] #pdpx-extra{ display:block; }
html[data-pdp-design="a"] .variations-row > *:not(#pdpx-picker),
html[data-pdp-design="b"] .variations-row > *:not(#pdpx-picker),
html[data-pdp-design="c"] .variations-row > *:not(#pdpx-picker){ display:none !important; }
html[data-pdp-design="a"] .variations-row,
html[data-pdp-design="b"] .variations-row,
html[data-pdp-design="c"] .variations-row{
    margin:var(--x5) 0 0 !important;
}
/* ============================================================= 3. gallery
   One system for all three. The production gallery hard-codes a 142px sidebar,
   a 600px image box and translateY hover jumps — all replaced. Only --thumb
   and the wrapper width differ per design. */
html[data-pdp-design="a"] .product-gallery-v2,
html[data-pdp-design="b"] .product-gallery-v2,
html[data-pdp-design="c"] .product-gallery-v2{ width:100%; }
/* explicit order beats column-reverse: some breakpoints re-declare the
   direction, which silently flipped thumbnails above the image on mobile */
html[data-pdp-design="a"] .gallery-container,
html[data-pdp-design="b"] .gallery-container,
html[data-pdp-design="c"] .gallery-container{
    display:flex !important; flex-direction:column !important;
    gap:var(--x3) !important; align-items:stretch !important;
}
html[data-pdp-design="a"] .gallery-main,
html[data-pdp-design="b"] .gallery-main,
html[data-pdp-design="c"] .gallery-main{ order:1 !important; }
html[data-pdp-design="a"] .gallery-thumbnails-sidebar,
html[data-pdp-design="b"] .gallery-thumbnails-sidebar,
html[data-pdp-design="c"] .gallery-thumbnails-sidebar{ order:2 !important; }
/* min-width:0 everywhere in the gallery chain: a flex item defaults to
   min-width:auto, so a row of thumbnails would otherwise force the whole
   gallery (and the page) wider than the viewport. */
html[data-pdp-design="a"] .product-gallery-v2,
html[data-pdp-design="a"] .gallery-container,
html[data-pdp-design="b"] .product-gallery-v2,
html[data-pdp-design="b"] .gallery-container,
html[data-pdp-design="c"] .product-gallery-v2,
html[data-pdp-design="c"] .gallery-container,
html[data-pdp-design="a"] .gallery-main,
html[data-pdp-design="b"] .gallery-main,
html[data-pdp-design="c"] .gallery-main{
    min-width:0 !important; max-width:100% !important;
}
html[data-pdp-design="a"] .gallery-thumbnails-sidebar,
html[data-pdp-design="b"] .gallery-thumbnails-sidebar,
html[data-pdp-design="c"] .gallery-thumbnails-sidebar{
    width:100% !important; flex:0 1 auto !important; position:static !important;
    min-width:0 !important; max-width:100% !important;
}
html[data-pdp-design="a"] .gallery-thumbnails,
html[data-pdp-design="b"] .gallery-thumbnails,
html[data-pdp-design="c"] .gallery-thumbnails{
    display:flex !important; flex-direction:row !important; gap:var(--x2) !important;
    max-height:none !important; overflow-x:auto !important; overflow-y:hidden !important;
    padding:1px !important; margin:0 !important;
    min-width:0 !important; max-width:100% !important;
}
html[data-pdp-design="a"] .main-image-container,
html[data-pdp-design="b"] .main-image-container,
html[data-pdp-design="c"] .main-image-container{ max-width:100% !important; min-width:0 !important; }
html[data-pdp-design="a"] .thumbnail-item,
html[data-pdp-design="b"] .thumbnail-item,
html[data-pdp-design="c"] .thumbnail-item{
    flex:0 0 auto !important; width:var(--thumb) !important; height:var(--thumb) !important;
    margin:0 !important; border:1px solid var(--rule) !important; border-radius:0 !important;
    box-shadow:none !important; transform:none !important; transition:border-color .12s ease !important;
}
html[data-pdp-design="a"] .thumbnail-item:hover,
html[data-pdp-design="a"] .thumbnail-item.active,
html[data-pdp-design="b"] .thumbnail-item:hover,
html[data-pdp-design="b"] .thumbnail-item.active,
html[data-pdp-design="c"] .thumbnail-item:hover,
html[data-pdp-design="c"] .thumbnail-item.active{
    border-color:var(--ink) !important; box-shadow:none !important; transform:none !important;
}
html[data-pdp-design="a"] .thumbnail-item::after,
html[data-pdp-design="b"] .thumbnail-item::after,
html[data-pdp-design="c"] .thumbnail-item::after{ display:none !important; }
html[data-pdp-design="a"] .thumb-nav,
html[data-pdp-design="b"] .thumb-nav,
html[data-pdp-design="c"] .thumb-nav{ display:none !important; }
/* the image box scales with its column instead of being pinned to 600px */
html[data-pdp-design="a"] .main-image-container,
html[data-pdp-design="b"] .main-image-container,
html[data-pdp-design="c"] .main-image-container{
    height:auto !important; aspect-ratio:1/1; width:100% !important;
    border:1px solid var(--rule) !important; box-shadow:none !important;
    background:var(--paper) !important;
}
html[data-pdp-design="a"] #main-gallery-image,
html[data-pdp-design="b"] #main-gallery-image,
html[data-pdp-design="c"] #main-gallery-image{
    max-width:88% !important; max-height:88% !important; object-fit:contain !important;
}
/* ============================================================== 4. picker */
#pdpx-picker{ width:100%; font-family:'Jost',sans-serif; }
#pdpx-picker .pdpx-ax + .pdpx-ax{ margin-top:var(--x5); }
#pdpx-picker .pdpx-axlab{
    display:flex; align-items:baseline; justify-content:space-between; gap:var(--x3);
    font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); margin-bottom:var(--x3);
}
#pdpx-picker .pdpx-axlab em{
    font-style:normal; font-weight:400; letter-spacing:0; text-transform:none; font-size:var(--t-sm);
}
.pdpx-tabs,
.pdpx-chips{ display:flex; flex-wrap:wrap; gap:var(--x2); }
.pdpx-tab,
.pdpx-chip{
    appearance:none; cursor:pointer; text-align:left; background:var(--paper);
    border:1px solid var(--rule); color:var(--ink); font-family:inherit;
    transition:border-color .12s ease, background .12s ease;
}
.pdpx-tab{ min-height:var(--ctl-sm); padding:var(--x2) var(--x4); font-size:var(--t-md); font-weight:600; line-height:1.3; }
.pdpx-tab small{ display:block; font-size:var(--t-xs); font-weight:400; color:var(--muted); margin-top:2px; }
.pdpx-tab.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pdpx-tab.on small{ color:rgba(255,255,255,.66); }
.pdpx-chip{ min-height:var(--ctl-sm); min-width:92px; padding:var(--x2) var(--x3); }
.pdpx-chip b{ display:block; font-size:var(--t-md); font-weight:700; }
.pdpx-chip i{ display:block; font-style:normal; font-size:var(--t-xs); color:var(--muted); font-variant-numeric:tabular-nums; margin-top:1px; }
.pdpx-chip.on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.pdpx-chip.out{ opacity:.42; }
.pdpx-tab:hover,
.pdpx-chip:hover{ border-color:var(--muted); }
.pdpx-shades{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:var(--x3); }
.pdpx-shade{
    appearance:none; cursor:pointer; text-align:left; padding:0; overflow:hidden;
    background:var(--paper); border:1px solid var(--rule); display:flex; flex-direction:column;
    transition:border-color .12s ease;
}
.pdpx-shade .pdpx-sw{
    display:block; width:100%; aspect-ratio:1/1; background-size:cover; background-position:center;
    background-color:var(--rule-soft); border-bottom:1px solid var(--rule-soft);
}
.pdpx-shade .pdpx-sn{ padding:var(--x2) var(--x3) 0; font-size:var(--t-sm); font-weight:600; line-height:1.3; }
.pdpx-shade .pdpx-sp{ padding:2px var(--x3) var(--x2); font-size:var(--t-sm); font-weight:700; font-variant-numeric:tabular-nums; }
.pdpx-shade .pdpx-sp s{ font-weight:400; color:var(--sale); margin-left:var(--x1); font-size:var(--t-xs); }
.pdpx-shade:hover{ border-color:var(--muted); }
.pdpx-shade.on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.pdpx-shade.hid{ display:none; }
.pdpx-search{
    width:100%; max-width:360px; margin-bottom:var(--x3); height:var(--ctl-sm); padding:0 var(--x3);
    border:1px solid var(--rule); font-family:inherit; font-size:var(--t-md); outline:none; background:var(--paper);
}
.pdpx-search:focus{ border-color:var(--ink); }
.pdpx-opts{ display:flex; flex-direction:column; border:1px solid var(--rule); }
.pdpx-opt{
    appearance:none; cursor:pointer; text-align:left; width:100%; background:var(--paper); border:0;
    display:grid; grid-template-columns:14px 88px 1fr auto; gap:var(--x3); align-items:center;
    padding:var(--x3); font-family:inherit; transition:background .12s ease;
}
.pdpx-opt + .pdpx-opt{ border-top:1px solid var(--rule-soft); }
.pdpx-opt:hover{ background:var(--surface); }
.pdpx-opt.on{ background:var(--surface); box-shadow:inset 3px 0 0 var(--ink); }
.pdpx-opt .pdpx-dot{ width:12px; height:12px; border:1px solid var(--muted); border-radius:50%; }
.pdpx-opt.on .pdpx-dot{ border-color:var(--ink); background:var(--ink); box-shadow:inset 0 0 0 2.5px var(--paper); }
.pdpx-opt .pdpx-pr{ font-size:var(--t-base); font-weight:700; font-variant-numeric:tabular-nums; }
.pdpx-opt .pdpx-pr s{ display:block; font-size:var(--t-xs); font-weight:400; color:var(--sale); }
.pdpx-opt .pdpx-wh{ font-size:var(--t-md); font-weight:600; line-height:1.35; }
.pdpx-opt .pdpx-wh em{ display:block; font-style:normal; font-weight:400; font-size:var(--t-xs); color:var(--muted); margin-top:1px; }
.pdpx-opt .pdpx-mt{ text-align:right; font-size:var(--t-xs); color:var(--muted); line-height:1.45; white-space:nowrap; }
.pdpx-opt .pdpx-mt b{ display:block; color:var(--ink); font-weight:600; }
.pdpx-opt .pdpx-mt u{ display:block; text-decoration:none; color:var(--sale); font-weight:700; }
.pdpx-opt.out{ opacity:.45; }
@media (max-width:600px){
.pdpx-opt{ grid-template-columns:14px 78px 1fr; row-gap:var(--x1); }
.pdpx-opt .pdpx-mt{ grid-column:2 / -1; text-align:left; }
.pdpx-shades{ grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); }
}
/* ======================================================= 5. buy controls
   Quantity, add-to-cart and wishlist all sit on --ctl. Admin utilities drop to
   --ctl-sm and move off the CTA row entirely. */
html[data-pdp-design="a"] .wsus__button_area,
html[data-pdp-design="b"] .wsus__button_area,
html[data-pdp-design="c"] .wsus__button_area{
    display:flex !important; align-items:stretch; flex-wrap:wrap; gap:var(--x2) !important;
    margin:var(--x5) 0 0 !important; padding:0 !important; list-style:none !important;
}
html[data-pdp-design="a"] .wsus__button_area > li,
html[data-pdp-design="b"] .wsus__button_area > li,
html[data-pdp-design="c"] .wsus__button_area > li{
    margin:0 !important; padding:0 !important; list-style:none !important;
    display:flex !important; align-items:stretch !important;
}
html[data-pdp-design="a"] .quantity-input,
html[data-pdp-design="b"] .quantity-input,
html[data-pdp-design="c"] .quantity-input{
    height:var(--ctl) !important; width:124px !important; padding:0 !important;
    border:1px solid var(--ink) !important; background:var(--paper) !important; border-radius:0 !important;
    display:flex !important; align-items:center !important; justify-content:space-between !important;
}
html[data-pdp-design="a"] .quantity-button,
html[data-pdp-design="b"] .quantity-button,
html[data-pdp-design="c"] .quantity-button{
    width:var(--ctl-sm) !important; height:100% !important; display:flex !important;
    align-items:center !important; justify-content:center !important; font-size:var(--t-lg) !important;
    user-select:none; cursor:pointer;
}
html[data-pdp-design="a"] #product_input_qty,
html[data-pdp-design="b"] #product_input_qty,
html[data-pdp-design="c"] #product_input_qty{
    width:44px !important; text-align:center !important; border:0 !important;
    font-size:var(--t-base) !important; font-weight:600 !important; background:transparent !important;
}
html[data-pdp-design="a"] .mobileCartBtnHolder,
html[data-pdp-design="b"] .mobileCartBtnHolder,
html[data-pdp-design="c"] .mobileCartBtnHolder{ flex:1 1 180px; display:flex; }
/* production caps this at max-width:300px, so the button stops short of its own
   flex-grown <li> and leaves a dead gap before the wishlist */
html[data-pdp-design="a"] .add_cart.wow_button,
html[data-pdp-design="b"] .add_cart.wow_button,
html[data-pdp-design="c"] .add_cart.wow_button{
    height:var(--ctl) !important; width:100% !important; margin:0 !important;
    min-width:0 !important; max-width:none !important; flex:1 1 auto !important;
    padding:0 var(--x4) !important; border-radius:0 !important; border:0 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    gap:var(--x2); font-size:var(--t-base) !important; font-weight:600 !important;
    letter-spacing:.06em !important; text-transform:uppercase !important;
    background:var(--ink) !important; color:var(--paper) !important;
}
html[data-pdp-design="a"] .wishlist_button,
html[data-pdp-design="b"] .wishlist_button,
html[data-pdp-design="c"] .wishlist_button{
    display:flex !important; align-items:center; justify-content:center;
    box-sizing:border-box !important; padding:0 !important; margin:0 !important;
    width:var(--ctl) !important; height:var(--ctl) !important; flex:0 0 var(--ctl) !important;
    border:1px solid var(--ink); background:var(--paper);
}
html[data-pdp-design="a"] .wishlist_button a,
html[data-pdp-design="b"] .wishlist_button a,
html[data-pdp-design="c"] .wishlist_button a{
    display:flex; align-items:center; justify-content:center; width:100%; height:100%;
}
/* admin utilities: square, small, own row — they inline-style themselves round with margins */
html[data-pdp-design="a"] .pdpx-admin,
html[data-pdp-design="b"] .pdpx-admin,
html[data-pdp-design="c"] .pdpx-admin{
    display:flex; gap:var(--x2); margin-top:var(--x3);
    padding-top:var(--x3); border-top:1px solid var(--rule-soft);
}
html[data-pdp-design="a"] .pdpx-admin .admin_button,
html[data-pdp-design="b"] .pdpx-admin .admin_button,
html[data-pdp-design="c"] .pdpx-admin .admin_button{ list-style:none; margin:0; }
html[data-pdp-design="a"] .admin_button a,
html[data-pdp-design="b"] .admin_button a,
html[data-pdp-design="c"] .admin_button a{
    width:var(--ctl-xs) !important; height:var(--ctl-xs) !important;
    margin-left:0 !important; border-radius:0 !important; box-shadow:none !important;
}
html[data-pdp-design="a"] .admin_button a i,
html[data-pdp-design="b"] .admin_button a i,
html[data-pdp-design="c"] .admin_button a i{ font-size:var(--t-base) !important; }
/* low-stock line from the older preview partial */
html[data-pdp-design="a"] #rkUrgency,
html[data-pdp-design="b"] #rkUrgency,
html[data-pdp-design="c"] #rkUrgency{
    margin:var(--x3) 0 0 !important; font-size:var(--t-md) !important; color:var(--sale) !important;
}
/* price */
html[data-pdp-design="a"] .now-price,
html[data-pdp-design="a"] #variantPriceDisplay,
html[data-pdp-design="b"] .now-price,
html[data-pdp-design="b"] #variantPriceDisplay,
html[data-pdp-design="c"] .now-price,
html[data-pdp-design="c"] #variantPriceDisplay{
    font-size:var(--t-3xl) !important; font-weight:800 !important; line-height:1.1 !important;
    margin:0 !important; color:var(--ink) !important;
}
/* ====================================================== 6. content blocks */
.pdpx-block{ margin-top:var(--x6); }
/* a production h3 rule wins on font-size/colour without these */
.pdpx-block > h3{
    font-size:var(--t-md) !important; font-weight:700 !important;
    letter-spacing:.13em !important; text-transform:uppercase !important;
    color:var(--muted) !important; line-height:1.4 !important;
    margin:0 0 var(--x4) !important; padding:0 0 var(--x2) !important;
    border-bottom:1px solid var(--rule) !important;
}
.pdpx-block .pdpx-body{ font-size:var(--t-lg); line-height:1.65; color:var(--ink2); max-width:68ch; }
.pdpx-faq{ max-width:68ch; }
.pdpx-faq details{ border-bottom:1px solid var(--rule-soft); }
.pdpx-faq details:first-of-type{ border-top:1px solid var(--rule-soft); }
.pdpx-faq summary{
    display:flex; align-items:center; justify-content:space-between; gap:var(--x4);
    cursor:pointer; list-style:none; padding:var(--x4) 0; margin:0;
    font-size:var(--t-base); font-weight:600; line-height:1.45; color:var(--ink);
}
.pdpx-faq summary::-webkit-details-marker{ display:none; }
.pdpx-faq summary::marker{ content:''; }
/* chevron, not a floated plus sign */
.pdpx-faq summary::after{
    content:''; flex:0 0 auto; width:9px; height:9px; margin-right:2px;
    border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
    transform:rotate(45deg) translateY(-2px); transition:transform .18s ease;
}
.pdpx-faq details[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.pdpx-faq summary:hover{ color:var(--ink); }
.pdpx-faq summary:hover::after{ border-color:var(--ink); }
.pdpx-faq summary:focus-visible{ outline:2px solid var(--ink,#111214); outline-offset:2px; }
.pdpx-faq p{
    margin:0; padding:0 var(--x6) var(--x5) 0;
    font-size:var(--t-base); line-height:1.7; color:var(--ink2);
}
/* ==================================================== 7. rails & sections
   The production rails ship 9-11px type and 40px images. Same content, sized
   to be readable, on one card and one heading treatment. */
html[data-pdp-design="c"] .productsContainerSliderHeading,
html[data-pdp-design="c"] .common-h3,
html[data-pdp-design="c"] .jums-gali-patikti-section .productsContainerSliderHeading{
    font-size:var(--t-md) !important; font-weight:700 !important; letter-spacing:.14em !important;
    text-transform:uppercase !important; color:var(--muted) !important; text-align:left !important;
    margin:0 0 var(--x4) !important; padding:0 0 var(--x2) !important;
    border-bottom:1px solid var(--rule) !important; width:100%;
}
/* the divider ships at a hard 1440px, which overflows a 1416px content box by 12 */
html[data-pdp-design="c"] .fluid-divider{
    width:100% !important; max-width:100% !important;
    margin:var(--x7) 0 !important; border:0 !important; border-top:1px solid var(--rule-soft) !important;
    height:0 !important; background:none !important;
}
/* Each direction gets its own rail treatment — they were sharing one grid,
   which made the three designs look identical below the fold.
     A Kopėčios   — dense 3-up line items, matching the decision-first buy rail
     B Vitrina    — image-on-top cards, large and airy, matching the canvas
     C Prekystalis— 2-up line items with a rule and right-aligned price, like receipt rows */
html[data-pdp-design="c"] .products-grid{ grid-template-columns:repeat(2,1fr) !important; gap:0 var(--x6) !important; padding:0 !important; }
/* C — receipt-style rows, price pushed right */
html[data-pdp-design="c"] .recommended-product-item{
    border:0 !important; border-bottom:1px solid var(--rule) !important;
    padding:var(--x3) 0 !important;
}
html[data-pdp-design="c"] .recommended-product-item:hover{ border-bottom-color:var(--ink) !important; }
html[data-pdp-design="c"] .recommended-product-item .product-name-price{
    flex-direction:row !important; align-items:baseline; justify-content:space-between; gap:var(--x3);
}
html[data-pdp-design="c"] .recommended-product-item .price-text{ margin-top:0 !important; white-space:nowrap; }
html[data-pdp-design="c"] .recommended-product-item{
    border:1px solid var(--rule) !important; padding:var(--x3) !important;
    min-height:0 !important; transition:border-color .12s ease !important;
}
html[data-pdp-design="c"] .recommended-product-item:hover{
    transform:none !important; box-shadow:none !important; border-color:var(--ink) !important;
}
/* fixed 64px box so every card lines up regardless of the photo's aspect ratio */
html[data-pdp-design="c"] .recommended-product-item .product-image-container{
    width:64px; height:64px; flex:0 0 64px;
}
html[data-pdp-design="c"] .recommended-product-item .product-image{
    width:100% !important; height:100% !important;
    max-width:none !important; max-height:none !important; object-fit:contain !important;
}
html[data-pdp-design="c"] .recommended-product-item:hover .product-image{ transform:none !important; }
html[data-pdp-design="c"] .recommended-product-item .product-image-container{ padding:0 var(--x3) 0 0 !important; }
html[data-pdp-design="c"] .recommended-product-item .brand-text{ font-size:var(--t-md) !important; font-weight:700 !important; color:var(--ink) !important; }
html[data-pdp-design="c"] .recommended-product-item .name-text{ font-size:var(--t-sm) !important; color:var(--ink2) !important; line-height:1.35 !important; }
html[data-pdp-design="c"] .recommended-product-item .name-text small{ font-size:var(--t-xs) !important; color:var(--muted) !important; line-height:1.35 !important; }
html[data-pdp-design="c"] .recommended-product-item .price-text{
    font-size:var(--t-base) !important; font-weight:700 !important; margin-top:var(--x1) !important;
    font-variant-numeric:tabular-nums;
}
html[data-pdp-design="c"] .recommended-product-item .product-details{ gap:2px !important; margin-left:0 !important; }
/* ============================================================= 8. DESIGN A
   Kopėčios — sticky buy rail, thumbnails under the image. */
html[data-pdp-design="a"]{ --thumb:76px; }
/* cap the image so it stops eating the column, and centre it with its thumbs */
html[data-pdp-design="a"] .product-gallery-v2{ max-width:620px !important; margin:0 auto !important; }
@media (min-width:1200px){
html[data-pdp-design="a"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{ flex:0 0 56%; max-width:56%; }
html[data-pdp-design="a"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-20{
        flex:0 0 44%; max-width:44%; padding-left:var(--x7) !important;
        position:sticky; top:var(--x4); align-self:flex-start;
    }
}
html[data-pdp-design="a"] #product-title{
    font-size:var(--t-3xl) !important; font-weight:700 !important; line-height:1.15 !important;
    letter-spacing:-.02em !important; text-transform:none !important; margin:0 0 var(--x3) !important;
}
html[data-pdp-design="a"] .h1-brand-name{ font-weight:300 !important; }
html[data-pdp-design="a"] .rating-code-row{ margin:0 0 var(--x4) !important; }
/* ============================================================= 8. DESIGN B
   Vitrina — image canvas pinned, the right column scrolls past it. */
html[data-pdp-design="b"]{ --thumb:56px; }
html[data-pdp-design="b"] .product-gallery-v2{ max-width:560px !important; margin:0 auto !important; }
@media (min-width:1200px){
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{
        flex:0 0 54%; max-width:54%; position:sticky; top:0; align-self:flex-start;
        height:100vh; display:flex; flex-direction:column; justify-content:center;
        background:var(--surface); padding:var(--x6) var(--x6) var(--x5) !important;
    }
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-20{
        flex:0 0 46%; max-width:46%; padding-left:var(--x7) !important; padding-top:var(--x6) !important;
    }
html[data-pdp-design="b"] .main-image-container{ border:0 !important; background:transparent !important; box-shadow:none !important; }
html[data-pdp-design="b"] .gallery-thumbnails{ justify-content:center; }
html[data-pdp-design="b"] .thumbnail-item{ background:var(--paper) !important; }
}
html[data-pdp-design="b"] #product-title{
    font-size:var(--t-base) !important; font-weight:700 !important; letter-spacing:.18em !important;
    text-transform:uppercase !important; line-height:1.5 !important; margin:0 0 var(--x2) !important;
}
html[data-pdp-design="b"] .wsus__pro_details_text .h1-brand-name{
    display:block !important; font-size:56px !important; font-weight:200 !important;
    letter-spacing:-.03em !important; text-transform:none !important; line-height:1 !important;
    margin:0 0 var(--x2) !important;
}
html[data-pdp-design="b"] .rating-code-row{ margin:0 0 var(--x5) !important; }
/* ============================================================= 8. DESIGN C
   Prekystalis — three columns, third is a sticky order card built by JS. */
html[data-pdp-design="c"]{ --thumb:64px; }
html[data-pdp-design="c"] .product-gallery-v2{ max-width:460px !important; margin:0 auto !important; }
#pdpx-order{ display:none; }
@media (min-width:1200px){
html[data-pdp-design="c"] #wsus__product_details .row.align-items-start{ align-items:flex-start !important; }
html[data-pdp-design="c"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{ flex:0 0 38%; max-width:38%; }
html[data-pdp-design="c"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-20{
        flex:0 0 33%; max-width:33%; padding-left:var(--x5) !important; padding-right:var(--x5) !important;
    }
html[data-pdp-design="c"] #pdpx-order{
        display:block; flex:0 0 29%; max-width:29%;
        position:sticky; top:var(--x4); align-self:flex-start;
    }
}
@media (max-width:1199px){
html[data-pdp-design="c"] #pdpx-order{ display:block; width:100%; margin-top:var(--x5); }
}
html[data-pdp-design="c"] #pdpx-order{
    padding:var(--x5); background:var(--surface); border:1px solid var(--rule);
    font-family:'Jost',sans-serif;
}
html[data-pdp-design="c"] #product-title{
    font-size:var(--t-2xl) !important; font-weight:700 !important; line-height:1.2 !important;
    text-transform:none !important; margin:0 0 var(--x3) !important;
}
/* order-card internals — one vertical rhythm, no stray margins */
html[data-pdp-design="c"] #pdpx-order > *{ margin:0; }
html[data-pdp-design="c"] #pdpx-order > * + *{ margin-top:var(--x4); }
html[data-pdp-design="c"] #pdpx-order .pdpx-chosen{
    font-size:var(--t-md); line-height:1.5; color:var(--ink2);
    padding:var(--x3) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
html[data-pdp-design="c"] #pdpx-order .pdpx-chosen b{ display:block; color:var(--ink); font-weight:700; font-size:var(--t-base); }
html[data-pdp-design="c"] #pdpx-order .pdpx-chosen span{ display:block; color:var(--muted); margin-top:2px; }
/* the card already states delivery in .pdpx-chosen */
html[data-pdp-design="c"] #pdpx-order #deliveryTimeBadge{ display:none !important; }
html[data-pdp-design="c"] #pdpx-order .shopping-cart-form .wsus__button_area{ margin:0 !important; }
html[data-pdp-design="c"] #pdpx-order .wishlistMobileBtn{ display:none !important; }
html[data-pdp-design="c"] #pdpx-order .pdpx-trust{
    padding-top:var(--x3); border-top:1px solid var(--rule);
    font-size:var(--t-sm); line-height:1.9; color:var(--ink2);
}
html[data-pdp-design="c"] #pdpx-order .pdpx-trust span{ display:block; }
/* ============================== 9. coupon + shipping, all three designs
   `html[data-pdp-design]:not([data-pdp-design="orig"])` = "any redesign".
   Production hides the tab bar whenever only one tab qualifies, which buries
   the coupon; here both tabs always show. */
html[data-pdp-design]:not([data-pdp-design="orig"]) .shipping-discount-container{ margin-top:var(--x5); }
html[data-pdp-design]:not([data-pdp-design="orig"]) .tab-navigation{
    display:flex !important; gap:0; border-bottom:1px solid var(--rule); margin-bottom:var(--x3);
}
html[data-pdp-design]:not([data-pdp-design="orig"]) .tab-button{
    flex:1 1 0; min-height:var(--ctl-sm); padding:0 var(--x2) !important;
    font-family:'Jost',sans-serif !important; font-size:var(--t-sm) !important; font-weight:600 !important;
    letter-spacing:.06em; text-transform:uppercase;
    background:transparent !important; border:0 !important; border-bottom:2px solid transparent !important;
    color:var(--muted) !important; cursor:pointer;
}
html[data-pdp-design]:not([data-pdp-design="orig"]) .tab-button.active{
    color:var(--ink) !important; border-bottom-color:var(--ink) !important;
}
html[data-pdp-design]:not([data-pdp-design="orig"]) .discount-price-row{
    display:flex !important; align-items:baseline; flex-wrap:wrap; gap:var(--x2); font-size:var(--t-md);
}
html[data-pdp-design]:not([data-pdp-design="orig"]) .discount-price{ font-size:var(--t-xl) !important; font-weight:800 !important; }
html[data-pdp-design]:not([data-pdp-design="orig"]) .coupon-code{ font-weight:700; letter-spacing:.06em; }
html[data-pdp-design]:not([data-pdp-design="orig"]) .original-price-row{
    display:flex !important; align-items:baseline; gap:var(--x2); margin-top:var(--x2);
    font-size:var(--t-sm); color:var(--muted);
}
html[data-pdp-design]:not([data-pdp-design="orig"]) .discount-badge{ color:var(--sale); font-weight:700; }
/* the order card already shows the live price directly above */
html[data-pdp-design="c"] #pdpx-order .original-price-row{ display:none !important; }
html[data-pdp-design]:not([data-pdp-design="orig"]) .shipping_method{
    display:flex !important; align-items:center; gap:var(--x2); flex-wrap:nowrap;
    padding:var(--x1) 0 !important; margin:0 !important;
    position:static !important; height:auto !important; min-height:0 !important;
    border:0 !important; box-shadow:none !important; float:none !important;
}
html[data-pdp-design]:not([data-pdp-design="orig"]) .shipping_method *{ position:static !important; }
html[data-pdp-design]:not([data-pdp-design="orig"]) .shipping_method_icon{
    flex:0 0 auto; width:22px !important; height:22px !important; overflow:hidden;
    display:flex !important; align-items:center; justify-content:center;
    border:0 !important; outline:0 !important; padding:0 !important; margin:0 !important;
    box-shadow:none !important; background:none !important;
}
html[data-pdp-design]:not([data-pdp-design="orig"]) .shipping_method_icon > *{
    max-width:22px !important; max-height:22px !important; width:auto !important; height:auto !important;
    object-fit:contain; border:0 !important;
}
html[data-pdp-design]:not([data-pdp-design="orig"]) .shipping_method_details{ flex:1 1 auto; min-width:0; }
html[data-pdp-design]:not([data-pdp-design="orig"]) .shipping_details{
    font-size:var(--t-sm) !important; line-height:1.35; display:block;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html[data-pdp-design]:not([data-pdp-design="orig"]) .shipping_price{ flex:0 0 auto; margin-left:auto; white-space:nowrap; }
html[data-pdp-design]:not([data-pdp-design="orig"]) .shipping_price strong{
    font-size:var(--t-sm) !important; font-variant-numeric:tabular-nums;
}
html[data-pdp-design]:not([data-pdp-design="orig"]) .show-all-shipping-btn{
    background:none !important; border:0 !important; padding:var(--x2) 0 0 !important;
    font-family:'Jost',sans-serif !important; font-size:var(--t-sm) !important; color:var(--muted) !important;
    text-decoration:underline; cursor:pointer;
}
/* ================================ 10. slider rails + wrap fixes ==========
   `x-product-slider` is a different component from `recommended-products` and
   ships its own 9-11px type and 100px images. Same treatment, one rhythm. */
html[data-pdp-design="c"] .recProductsImg,
html[data-pdp-design="c"] .recProductsContainer .recProductsImg,
html[data-pdp-design="c"] .relProductsContainer .recProductsImg{
    height:150px !important; width:150px !important; object-fit:contain !important;
}
html[data-pdp-design="c"] .spl-brand{
    font-size:var(--t-md) !important; font-weight:700 !important; color:var(--ink) !important;
    line-height:1.35 !important; letter-spacing:0 !important;
}
html[data-pdp-design="c"] .spl-detail{
    font-size:var(--t-xs) !important; font-weight:400 !important; color:var(--muted) !important;
    line-height:1.35 !important;
}
html[data-pdp-design="c"] .recProductsTitle{
    font-size:var(--t-sm) !important; line-height:1.35 !important; color:var(--ink2) !important;
    margin-top:var(--x2) !important;
}
html[data-pdp-design="c"] .recProductsPrice{
    font-size:var(--t-base) !important; font-weight:700 !important; color:var(--ink) !important;
    margin-top:var(--x1) !important; font-variant-numeric:tabular-nums;
}
/* Slider cards pin the title to a fixed height, so a 3-line name overflows onto
   the price beneath it. Lay the card out as a flex column and let it grow. */
html[data-pdp-design="c"] .prod-slider-wrapper .product-container{
    display:flex !important; flex-direction:column !important; align-items:center !important;
    height:auto !important; min-height:0 !important; padding:var(--x3) !important;
}
html[data-pdp-design="c"] .prod-slider-wrapper .recProductsTitle,
html[data-pdp-design="c"] .prod-slider-wrapper .spl-lines{
    height:auto !important; min-height:0 !important; max-height:none !important;
    overflow:visible !important; position:static !important; width:100%;
}
html[data-pdp-design="c"] .prod-slider-wrapper .recProductsPrice{
    position:static !important; margin-top:var(--x2) !important; width:100%;
}
/* Production pins .wsus__button_area to a fixed height, so a wrapped wishlist
   escapes the box and lands on top of whatever follows it. */
html[data-pdp-design]:not([data-pdp-design="orig"]) .shopping-cart-form,
html[data-pdp-design]:not([data-pdp-design="orig"]) .wsus__button_area{
    height:auto !important; min-height:0 !important; max-height:none !important;
}
html[data-pdp-design]:not([data-pdp-design="orig"]) .wsus__button_area{
    row-gap:var(--x2) !important; align-items:center !important;
}
html[data-pdp-design="c"] #pdpx-order .mobileCartBtnHolder{ flex:1 1 110px; }
/* ==================================================== 11. mobile (≤767) ==
   Production hides .wsus__button_area below 767 and drives the buy action from
   the fixed sticky bar. My earlier rules forced the inline row back on, which
   both broke that pattern and produced the cramped 124+260+52 row. Follow
   production here: inline row off, sticky bar styled as the primary control. */
@media (max-width:767px){
html[data-pdp-design]:not([data-pdp-design="orig"]) .wsus__button_area{ display:none !important; }
html[data-pdp-design]:not([data-pdp-design="orig"]) #pdpx-admin{ display:none !important; }
html[data-pdp-design]:not([data-pdp-design="orig"]) .mobile-sticky-cart{
        display:flex !important; align-items:center; gap:var(--x2);
        padding:var(--x2) var(--x4); background:var(--paper);
        border-top:1px solid var(--rule); box-shadow:0 -2px 16px rgba(17,18,20,.10);
        z-index:900;
        /* the page's pre-existing 500px min-content would otherwise stretch a
           width:100% fixed bar past the viewport */
        left:0 !important; right:0 !important; width:auto !important;
        max-width:100vw !important; box-sizing:border-box !important;
    }
html[data-pdp-design]:not([data-pdp-design="orig"]) .sticky-cart-qty{
        display:flex !important; align-items:center; flex:0 0 auto;
        height:var(--ctl-mob); border:1px solid var(--ink); background:var(--paper);
    }
html[data-pdp-design]:not([data-pdp-design="orig"]) .sticky-qty-btn{
        width:34px; height:100%; display:flex; align-items:center; justify-content:center;
        font-size:var(--t-lg); cursor:pointer; user-select:none;
    }
html[data-pdp-design]:not([data-pdp-design="orig"]) .sticky-qty-input{
        width:32px !important; height:auto !important; text-align:center; border:0 !important;
        background:transparent !important; font-size:var(--t-base) !important; font-weight:700 !important;
    }
html[data-pdp-design]:not([data-pdp-design="orig"]) .sticky-cart-btn-wrap{ flex:1 1 auto; display:flex; }
html[data-pdp-design]:not([data-pdp-design="orig"]) .mobile-sticky-cart .add_cart{
        height:var(--ctl-mob) !important; width:100% !important; max-width:none !important;
        margin:0 !important; border-radius:0 !important; border:0 !important;
        display:inline-flex !important; align-items:center !important; justify-content:center !important;
        gap:var(--x2); background:var(--ink) !important; color:var(--paper) !important;
        font-size:var(--t-base) !important; font-weight:600 !important;
        letter-spacing:.06em !important; text-transform:uppercase !important;
    }
/* C's bar carries the card's elevation so the two read as one system */
html[data-pdp-design="c"] .mobile-sticky-cart{ box-shadow:0 -2px 20px rgba(17,18,20,.16); }
/* wishlist keeps its own mobile row, which production already provides */
html[data-pdp-design]:not([data-pdp-design="orig"]) .wishlistMobileBtn{
        display:flex !important; align-items:center; justify-content:center; gap:var(--x2);
        margin:var(--x4) 0 0 !important; padding:var(--x3) !important;
        border:1px solid var(--rule); font-size:var(--t-md); color:var(--ink2);
    }
/* nothing in the buy column may exceed the viewport */
html[data-pdp-design]:not([data-pdp-design="orig"]) .wsus__pro_details_text,
html[data-pdp-design]:not([data-pdp-design="orig"]) #pdpx-picker,
html[data-pdp-design]:not([data-pdp-design="orig"]) .variations-row{ min-width:0; max-width:100%; }
html[data-pdp-design]:not([data-pdp-design="orig"]) .pdpx-tabs,
html[data-pdp-design]:not([data-pdp-design="orig"]) .pdpx-chips{ max-width:100%; }
html[data-pdp-design="a"]{ --thumb:64px; }
html[data-pdp-design="b"]{ --thumb:52px; }
html[data-pdp-design="c"]{ --thumb:56px; }
/* ---- mobile rails: the horizontal-scroll cards keep 9-13px type and 60px art ---- */
html[data-pdp-design="c"] .recommended-product-item-mobile{
        min-width:78vw !important; max-width:78vw !important;
        border:1px solid var(--rule) !important; padding:var(--x3) !important;
    }
html[data-pdp-design="c"] .recommended-product-item-mobile .product-image-container{
        width:60px !important; height:60px !important; flex:0 0 60px !important;
        padding:0 var(--x3) 0 0 !important;
    }
html[data-pdp-design="c"] .recommended-product-item-mobile .product-image{
        width:100% !important; height:100% !important;
        max-width:none !important; max-height:none !important; object-fit:contain !important;
    }
html[data-pdp-design="c"] .recommended-product-item-mobile .product-details{
        margin-left:0 !important; gap:2px !important;
    }
html[data-pdp-design="c"] .recommended-product-item-mobile .brand-text{
        font-size:var(--t-md) !important; font-weight:700 !important; color:var(--ink) !important;
    }
html[data-pdp-design="c"] .recommended-product-item-mobile .name-text{
        font-size:var(--t-sm) !important; color:var(--ink2) !important; line-height:1.35 !important;
    }
html[data-pdp-design="c"] .recommended-product-item-mobile .name-text small{
        font-size:var(--t-xs) !important; color:var(--muted) !important; line-height:1.35 !important;
    }
html[data-pdp-design="c"] .recommended-product-item-mobile .price-text{
        font-size:var(--t-base) !important; font-weight:700 !important; margin-top:var(--x1) !important;
    }
html[data-pdp-design="c"] .products-slider-row{
        gap:var(--x3) !important; min-height:0 !important; margin-bottom:var(--x3) !important;
    }
html[data-pdp-design="c"] .products-horizontal-container-mobile{ padding-bottom:var(--x2); }
/* slick rail on mobile */
html[data-pdp-design="c"] .recProductsImg,
html[data-pdp-design="c"] .recProductsContainer .recProductsImg{
        height:120px !important; width:120px !important;
    }
html[data-pdp-design="c"] .slider-arrow{
        width:var(--ctl-xs) !important; height:var(--ctl-xs) !important; font-size:var(--t-lg) !important;
    }
html[data-pdp-design="c"] .productsContainerSliderHeading,
html[data-pdp-design="c"] .common-h3{ margin-bottom:var(--x3) !important; }
html[data-pdp-design="c"] .fluid-divider{ margin:var(--x6) 0 !important; }
/* the H1 is a 4-line server-built string; 32px wraps it to five lines here */
html[data-pdp-design="a"] #product-title,
html[data-pdp-design="c"] #product-title{ font-size:var(--t-xl) !important; line-height:1.2 !important; }
html[data-pdp-design="b"] #product-title{ font-size:var(--t-md) !important; letter-spacing:.14em !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .title-rating-wrapper .product-title .h1-brand-name{ font-size:34px !important; }
/* slider card names run to six lines and leave the cards wildly uneven */
html[data-pdp-design="c"] .spl-brand{
        display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
        overflow:hidden !important;
    }
html[data-pdp-design="c"] .spl-detail{
        white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
    }
html[data-pdp-design="c"] .recommended-product-item-mobile .name-text{
        display:-webkit-box !important; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden !important;
    }
}
/* ============================ 12. carousels (x-product-slider) ===========
   Cards are flex columns with the price pinned to the bottom, so every card in a
   row bottoms out on the same line regardless of how many name lines it has.
   The wrapper keeps overflow:hidden to contain slick's 2^25 track; the arrows
   live INSIDE it (.slider-navigation is width:100%), so they are not clipped. */
html[data-pdp-design="c"] .products-main-content,
html[data-pdp-design="c"] .prod-slider-wrapper,
html[data-pdp-design="c"] .prod-slider,
html[data-pdp-design="c"] .jums-gali-patikti-section,
html[data-pdp-design="c"] .desktop-side-by-side-layout,
html[data-pdp-design="c"] .mobile-stacked-layout{ max-width:100% !important; min-width:0 !important; }
html[data-pdp-design="c"] .products-main-content,
html[data-pdp-design="c"] .prod-slider-wrapper{ overflow:hidden !important; }
html[data-pdp-design="c"] .slick-list{ max-width:100% !important; overflow:hidden !important; }
html[data-pdp-design="c"] .slick-track{ display:flex !important; align-items:stretch !important; }
/* the stretch chain must be unbroken or height:100% resolves to auto and
   margin-top:auto on the price has no free space to consume */
html[data-pdp-design="c"] .slick-slide{ height:auto !important; display:flex !important; }
html[data-pdp-design="c"] .slick-slide > div{ height:auto !important; flex:1 1 auto; display:flex; }
html[data-pdp-design="c"] .prod-slider-wrapper .product-container{ flex:1 1 auto; }
/* the card */
html[data-pdp-design="c"] .prod-slider-wrapper .product-container{
    display:flex !important; flex-direction:column !important; align-items:stretch !important;
    height:100%; min-height:0 !important; padding:var(--x4) !important;
    text-align:center; background:var(--paper);
    transition:border-color .15s ease, background .15s ease;
}
html[data-pdp-design="c"] .prod-slider-wrapper .product-container > a{
    display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit;
}
html[data-pdp-design="c"] .prod-slider-wrapper .recProductsImg{
    width:100% !important; height:160px !important; object-fit:contain !important;
    margin:0 0 var(--x4) !important; display:block;
}
html[data-pdp-design="c"] .prod-slider-wrapper .recProductsTitle,
html[data-pdp-design="c"] .prod-slider-wrapper .spl-lines{
    height:auto !important; min-height:0 !important; max-height:none !important;
    overflow:visible !important; position:static !important; width:100%; margin:0 !important;
}
html[data-pdp-design="c"] .prod-slider-wrapper .spl-brand{
    display:block; font-size:var(--t-md) !important; font-weight:700 !important;
    color:var(--ink) !important; line-height:1.35 !important; margin-bottom:2px;
}
html[data-pdp-design="c"] .prod-slider-wrapper .spl-detail{
    display:block; font-size:var(--t-xs) !important; color:var(--muted) !important;
    line-height:1.4 !important;
}
/* The span right after the brand is the product NAME; the rest are type and
   category. :first-of-type matches by element type, and the first span is
   .spl-brand — so it selected nothing. Adjacent sibling is the right hook. */
html[data-pdp-design="c"] .prod-slider-wrapper .spl-brand + .spl-detail{
    font-size:var(--t-sm) !important; font-weight:600 !important; color:var(--ink) !important;
    margin-bottom:3px;
}
/* price pinned to the card floor so a 2-line and a 4-line card still align */
html[data-pdp-design="c"] .prod-slider-wrapper .recProductsPrice{
    position:static !important; width:100%;
    margin:auto 0 0 !important; padding-top:var(--x3) !important;
    font-size:var(--t-base) !important; font-weight:700 !important; color:var(--ink) !important;
    font-variant-numeric:tabular-nums;
}
/* arrows — keep the component's absolute centring, restyle only the buttons */
html[data-pdp-design="c"] .slider-navigation{
    position:absolute !important; top:50% !important; transform:translateY(-50%) !important;
    width:100% !important; display:flex !important; justify-content:space-between !important;
    pointer-events:none; z-index:10;
}
html[data-pdp-design="c"] .slider-arrow{
    width:var(--ctl-sm) !important; height:var(--ctl-sm) !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    padding:0 !important; margin:0 !important; border-radius:0 !important;
    border:1px solid var(--rule) !important; background:var(--paper) !important;
    color:var(--ink) !important; font-family:'Jost',sans-serif !important;
    font-size:22px !important; line-height:1 !important; font-weight:400 !important;
    box-shadow:none !important; cursor:pointer; pointer-events:auto;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
}
html[data-pdp-design="c"] .slider-arrow:hover{
    border-color:var(--ink) !important; background:var(--ink) !important; color:var(--paper) !important;
}
html[data-pdp-design="c"] .slider-arrow:focus-visible{ outline:2px solid var(--ink,#111214); outline-offset:2px; }
/* tighten the band around each rail */
html[data-pdp-design="c"] .recProductsContainer,
html[data-pdp-design="c"] .relProductsContainer{ margin-bottom:0 !important; }
/* C — a real bordered tile, like the order card */
html[data-pdp-design="c"] .prod-slider-wrapper .product-container{ border:1px solid var(--rule) !important; }
html[data-pdp-design="c"] .prod-slider-wrapper .product-container:hover{ border-color:var(--ink) !important; }
/* ================================= 13. motion, one idea per design ========
   A rise-on-approach · B drift + slow scale on the pinned bottle · C pinned state only */
.pdpx-rise{ opacity:0; transform:translateY(14px); will-change:opacity, transform; }
.pdpx-rise.pdpx-in{
    opacity:1; transform:none;
    transition:opacity .5s ease var(--pdpx-d,0ms), transform .5s cubic-bezier(.22,.61,.36,1) var(--pdpx-d,0ms);
}
html[data-pdp-design="b"] .pdpx-rise{ transform:translateY(24px); }
html[data-pdp-design="b"] .pdpx-rise.pdpx-in{ transition-duration:.72s; }
html[data-pdp-design="b"] #main-gallery-image{ will-change:transform; }
html[data-pdp-design="c"] #pdpx-order{ transition:box-shadow .25s ease, border-color .25s ease; }
html[data-pdp-design="c"] #pdpx-order.pdpx-pinned{
    border-color:var(--ink);
    box-shadow:0 1px 2px rgba(17,18,20,.06), 0 14px 34px rgba(17,18,20,.11);
}
/* drop the compositing hint once revealed — will-change:transform keeps making a
   containing block, which traps position:fixed descendants like the sticky cart */
.pdpx-rise.pdpx-in{ will-change:auto; }
/* No scroll reveal on mobile at all. Beyond being a desktop affordance, any
   transform on an ancestor of .mobile-sticky-cart re-parents that fixed bar and
   it stops spanning the viewport (measured 334-358px instead of 390). */
@media (max-width:767px){
.pdpx-rise,
.pdpx-rise.pdpx-in{
        opacity:1 !important; transform:none !important;
        will-change:auto !important; transition:none !important;
    }
html[data-pdp-design="b"] #main-gallery-image{ transform:none !important; will-change:auto !important; }
}
@media (prefers-reduced-motion:reduce){
.pdpx-rise,
.pdpx-rise.pdpx-in{ opacity:1 !important; transform:none !important; transition:none !important; }
html[data-pdp-design="b"] #main-gallery-image{ transform:none !important; }
}
/* ==================================================== 14. reviews ========
   Untouched until now: 24px uppercase title, pill button, rounded bars. Same
   token system as the rest; layout differs per design. */
html[data-pdp-design="c"] .productsReviewsContainer{ background:var(--paper) !important; }
html[data-pdp-design="c"] .reviews-header{
    display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
    gap:var(--x4); margin:0 0 var(--x5) !important; padding:0 0 var(--x4) !important;
    /* production boxes these in; the redesigns rule them instead */
    border:0 !important; border-bottom:1px solid var(--rule) !important;
    background:transparent !important; box-shadow:none !important;
}
html[data-pdp-design="c"] .reviews-distribution,
html[data-pdp-design="c"] .reviews-photo-gallery{
    border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important;
}
html[data-pdp-design="c"] .reviews-title{
    flex:1 1 100%; margin:0 !important;
    font-size:var(--t-md) !important; font-weight:700 !important; letter-spacing:.14em !important;
    text-transform:uppercase !important; color:var(--muted) !important; line-height:1.4 !important;
}
html[data-pdp-design="c"] .reviews-summary{ display:flex; align-items:center; gap:var(--x3); }
html[data-pdp-design="c"] .reviews-rating-number{
    font-size:var(--t-3xl) !important; font-weight:800 !important; line-height:1 !important; color:var(--ink) !important;
}
html[data-pdp-design="c"] .writeReviewBtn{
    width:auto !important; height:var(--ctl) !important; box-sizing:border-box !important; padding:0 var(--x5) !important;
    border-radius:0 !important; border:1px solid var(--ink) !important;
    background:var(--paper) !important; color:var(--ink) !important;
    font-size:var(--t-md) !important; font-weight:600 !important;
    letter-spacing:.06em !important; text-transform:uppercase !important;
    transition:background .15s ease, color .15s ease;
}
html[data-pdp-design="c"] .writeReviewBtn:hover{ background:var(--ink) !important; color:var(--paper) !important; }
html[data-pdp-design="c"] .reviews-distribution{ display:flex; flex-direction:column; gap:var(--x2); max-width:340px; }
html[data-pdp-design="c"] .reviews-dist-row{
    display:grid !important; grid-template-columns:38px 1fr 30px; gap:var(--x3); align-items:center;
    font-size:var(--t-sm) !important; color:var(--muted) !important;
}
html[data-pdp-design="c"] .reviews-dist-bar{ height:6px !important; background:var(--rule-soft) !important; border-radius:0 !important; }
html[data-pdp-design="c"] .reviews-dist-fill{ height:100% !important; background:var(--ink) !important; border-radius:0 !important; }
html[data-pdp-design="c"] .reviews-dist-count{ text-align:right; font-variant-numeric:tabular-nums; }
html[data-pdp-design="c"] .reviews-photo-gallery{
    display:grid !important; grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
    gap:var(--x2) !important; margin-top:var(--x5) !important;
}
html[data-pdp-design="c"] .reviews-photo-thumb{
    width:100% !important; height:auto !important; aspect-ratio:1/1; object-fit:cover;
    border:1px solid var(--rule) !important; border-radius:0 !important; cursor:pointer;
}
html[data-pdp-design="c"] .review-list .reviews{ list-style:none !important; margin:0 !important; padding:0 !important; }
html[data-pdp-design="c"] .review-item{
    padding:var(--x5) 0 !important; margin:0 !important;
    border:0 !important; border-bottom:1px solid var(--rule-soft) !important;
    border-radius:0 !important; background:transparent !important; box-shadow:none !important;
}
html[data-pdp-design="c"] .review-item-header{ display:flex; align-items:center; gap:var(--x3); flex-wrap:wrap; margin-bottom:var(--x2) !important; }
html[data-pdp-design="c"] .review-item-author{ font-size:var(--t-md) !important; font-weight:700 !important; color:var(--ink) !important; }
html[data-pdp-design="c"] .review-item-date{ font-size:var(--t-sm) !important; color:var(--muted) !important; }
html[data-pdp-design="c"] .review-item-text{
    margin:0 !important; max-width:68ch;
    font-size:var(--t-base) !important; line-height:1.65 !important; color:var(--ink2) !important;
}
html[data-pdp-design="c"] .review-item-images{ display:flex; gap:var(--x2); flex-wrap:wrap; margin-top:var(--x3) !important; }
html[data-pdp-design="c"] .review-item-images img{
    width:72px !important; height:72px !important; object-fit:cover;
    border:1px solid var(--rule) !important; border-radius:0 !important;
}
html[data-pdp-design="c"] .review-list .pagination{ margin-top:var(--x5) !important; }
/* .reviews-container holds ONLY the summary (header + distribution + photo
   gallery); the Livewire list is its next sibling, so any grid here can never
   contain the list. Lay the summary out as a band and let the list follow. */
html[data-pdp-design="c"] .reviews-container{ margin-bottom:var(--x6); }
@media (min-width:992px){
/* A + C — score block left, distribution right */
html[data-pdp-design="c"] .reviews-container{
        display:grid; grid-template-columns:minmax(260px,320px) 1fr;
        column-gap:var(--x7); row-gap:var(--x5); align-items:start;
    }
html[data-pdp-design="c"] .reviews-header{
        grid-column:1; display:block; margin:0; padding:0; border-bottom:0;
    }
html[data-pdp-design="c"] .reviews-summary{ margin:var(--x3) 0 var(--x4); }
html[data-pdp-design="c"] .reviews-distribution{ grid-column:2; max-width:420px; margin:0; }
html[data-pdp-design="c"] .reviews-photo-gallery{ grid-column:1 / -1; }
/* C — the summary sits on a surface card, echoing the order card */
html[data-pdp-design="c"] .reviews-container{
        background:var(--surface); border:1px solid var(--rule); padding:var(--x5);
    }
html[data-pdp-design="c"] .writeReviewBtn{ width:100% !important; }
}
/* ==================================================== 15. tablet 760-1199 ==
   The xl rules that build each layout only start at 1200. Below that production
   forces the two columns to 50% each, which is 376px at 768 — the band the audit
   found orphaning arrows and wrapping the volume row. Stack it instead. */
@media (min-width:768px) and (max-width:1199px){
html[data-pdp-design]:not([data-pdp-design="orig"]) #wsus__product_details .row.align-items-start > .col-xl-6.pl-0,
html[data-pdp-design]:not([data-pdp-design="orig"]) #wsus__product_details .row.align-items-start > .col-xl-6.pl-20{
        flex:0 0 100% !important; max-width:100% !important;
        padding-left:0 !important; padding-right:0 !important; position:static !important;
    }
html[data-pdp-design]:not([data-pdp-design="orig"]) .product-gallery-v2{ max-width:520px !important; margin:0 auto !important; }
html[data-pdp-design]:not([data-pdp-design="orig"]) .wsus__pro_details_text{ margin-top:var(--x6); }
html[data-pdp-design="c"] .products-grid{ grid-template-columns:repeat(2,1fr) !important; }
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{
        height:auto !important; background:var(--surface); padding:var(--x6) !important;
    }
html[data-pdp-design="c"] #pdpx-order{ position:static !important; }
html[data-pdp-design="c"] .recProductsImg,
html[data-pdp-design="c"] .recProductsContainer .recProductsImg{ height:140px !important; width:140px !important; }
html[data-pdp-design="a"]{ --thumb:68px; }
html[data-pdp-design="b"]{ --thumb:60px; }
html[data-pdp-design="c"]{ --thumb:64px; }
}
/* ============================== 16. B's mobile identity ==================
   A and C stay in the page grid on mobile; B keeps its canvas idea by letting
   the bottle run full-bleed on the surface tint, with the brand set large. */
@media (max-width:767px){
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{
        margin-left:calc(var(--x4) * -1) !important; margin-right:calc(var(--x4) * -1) !important;
        width:auto !important; background:var(--surface); padding:var(--x5) var(--x4) var(--x4) !important;
    }
html[data-pdp-design="b"] .product-gallery-v2{ max-width:none !important; }
html[data-pdp-design="b"] .main-image-container{ border:0 !important; background:transparent !important; }
html[data-pdp-design="b"] .thumbnail-item{ background:var(--paper) !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .title-rating-wrapper .product-title .h1-brand-name{ font-size:38px !important; line-height:1 !important; }
html[data-pdp-design="b"] .wsus__pro_details_text{ padding-top:var(--x5); }
}
/* -------------------------------------------------------------- a11y ---- */
html[data-pdp-design="a"] .pdpx-tab:focus-visible,
html[data-pdp-design="a"] .pdpx-chip:focus-visible,
html[data-pdp-design="a"] .pdpx-shade:focus-visible,
html[data-pdp-design="a"] .pdpx-opt:focus-visible,
html[data-pdp-design="b"] .pdpx-tab:focus-visible,
html[data-pdp-design="b"] .pdpx-chip:focus-visible,
html[data-pdp-design="b"] .pdpx-shade:focus-visible,
html[data-pdp-design="b"] .pdpx-opt:focus-visible,
html[data-pdp-design="c"] .pdpx-tab:focus-visible,
html[data-pdp-design="c"] .pdpx-chip:focus-visible,
html[data-pdp-design="c"] .pdpx-shade:focus-visible,
html[data-pdp-design="c"] .pdpx-opt:focus-visible{
    outline:2px solid var(--ink,#111214); outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
.pdpx-tab,
.pdpx-chip,
.pdpx-shade,
.pdpx-opt{ transition:none !important; }
}
/* price row carries a 12px col gutter, so it sat 12px right of the title */
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text .row.mt-3 > [class*="col"],
html:is([data-pdp-design="a"],[data-pdp-design="b"]) #pdpx-picker{
    padding-left:0 !important; padding-right:0 !important;
}
/* buy column order: title → price → code/delivery → details → picker → cart → shipping.
   Price used to sit below the info disclosure and rating row. The disclosure sits
   with the code line it continues: .rating-code-row comes after it in the DOM, so
   it needs its own slot (4) rather than sharing the code row's. */
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text{ display:flex !important; flex-direction:column; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text > *{ order:6; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text > .title-rating-wrapper{ order:1; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text > .row.mt-3{ order:2; margin-top:var(--x3) !important; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text > .rating-code-row{ order:3; margin:var(--x3) 0 0 !important; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text > #wow24PiInline{ order:4; margin-top:var(--x4); }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text > .variations-row{ order:5; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text > .shipping-discount-container{ order:8; }
/* EAN means nothing to a shopper */
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-opt .pdpx-wh em{ display:none; }
/* no reviews yet: drop the empty stars and the big "0" (class set by JS) */
html.pdpx-no-reviews:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_rating{ display:none !important; }
/* with the stars gone, code + delivery would hang off the right edge alone */
html.pdpx-no-reviews:is([data-pdp-design="a"],[data-pdp-design="b"]) .rating-code-row{ justify-content:flex-start !important; }
html.pdpx-no-reviews:is([data-pdp-design="a"],[data-pdp-design="b"]) .rating-code-meta{ text-align:left !important; align-items:flex-start !important; margin-left:0 !important; }
/* admin cog / AI links: the Wow24 icon font has no cog or magic glyph */
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .open_in_admin i::before{ content:"\2699"; font-family:system-ui,sans-serif; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .open_in_ai_content i::before{ content:"\2726"; font-family:system-ui,sans-serif; }
/* ---- A: gallery hugs the buy column instead of floating mid-column ---- */
@media (min-width:1200px){
html[data-pdp-design="a"] .product-gallery-v2{ max-width:680px !important; margin:0 0 0 auto !important; }
}
/* ---- B: product photos are white-ground JPGs; multiply drops the white box on the grey canvas ---- */
html[data-pdp-design="b"] .main-image-container,
html[data-pdp-design="b"] .main-image-container .image-wrapper{ background:transparent !important; }
html[data-pdp-design="b"] #main-gallery-image{ mix-blend-mode:multiply; }
/* B: product name in readable sentence case; the brand keeps the large light setting */
html[data-pdp-design="b"] #product-title{
    font-size:var(--t-xl) !important; font-weight:500 !important; letter-spacing:0 !important;
    text-transform:none !important; line-height:1.3 !important;
}
/* B: on short laptop screens (1280×720) the tall header pushed price off the first screen */
@media (min-width:992px) and (max-height:820px){
html[data-pdp-design="b"] .wsus__pro_details_text .h1-brand-name{ font-size:44px !important; }
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-20{ padding-top:var(--x4) !important; }
}
@media (max-width:767px){
html[data-pdp-design="b"] #product-title{ font-size:var(--t-lg) !important; }
}
/* production rings the wishlist/admin links at 1px; the thumbnail strip is a keyboard-scrollable region */
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text .wsus__button_area li a:focus-visible,
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text .pdpx-admin li a:focus-visible,
html:is([data-pdp-design="a"],[data-pdp-design="b"]) #wsus__product_details .gallery-thumbnails:focus-visible{
    outline:2px solid var(--ink,#111214) !important; outline-offset:2px !important;
}
/* ---- 20.2 "Specialus pasiūlymai" side tab (admin-only, master.blade.php) ----
   44×189 rotated box at right:15px covered the buy column edge. Desktop/tablet:
   a slim vertical tab inside the 32px page gutter. Phone: a compact pill docked
   bottom-left above the sticky cart bar. Element and its click handlers unchanged. */
html:is([data-pdp-design="a"],[data-pdp-design="b"]) #discountCodesToggle{
    right:0 !important; left:auto !important; top:50% !important; bottom:auto !important;
    transform:translateY(-50%) !important; transform-origin:center !important;
    writing-mode:vertical-rl; padding:var(--x3) 5px !important;
    font-family:'Jost',sans-serif; font-size:var(--t-xs) !important; font-weight:600 !important;
    letter-spacing:.08em; line-height:1; background:var(--ink) !important; gap:var(--x2);
}
html:is([data-pdp-design="a"],[data-pdp-design="b"]) #discountCodesToggle #toggleText{
    margin:0 !important; font-size:inherit !important; color:#fff !important; line-height:1;
}
html:is([data-pdp-design="a"],[data-pdp-design="b"]) #discountCodesToggle .close-toggle{
    margin:0 !important; width:16px !important; height:16px !important; line-height:16px !important;
    font-size:13px !important; writing-mode:horizontal-tb;
}
@media (max-width:767px){
html:is([data-pdp-design="a"],[data-pdp-design="b"]) #discountCodesToggle{
        writing-mode:horizontal-tb; transform:none !important;
        top:auto !important; right:auto !important; left:var(--x2) !important;
        bottom:calc(65px + var(--x2)) !important; /* sticky cart bar is 65px */
        padding:var(--x2) var(--x3) !important; min-height:var(--ctl-xs);
        box-shadow:0 2px 10px rgba(17,18,20,.18);
    }
}
/* ---- 20.3 coupon / shipping tabs ----
   §9 forces the tab bar on; production marks it .single-tab (pointer-events:none)
   when only shipping applies, which left a dead "Nuolaidos kodas" tab. Keep only
   the active tab, as a plain heading. */
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .tab-navigation.single-tab{
    justify-content:flex-start;
}
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .tab-navigation.single-tab .tab-button:not(.active){ display:none !important; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .tab-navigation.single-tab .tab-button.active{
    flex:0 0 auto; justify-content:flex-start; padding:0 !important; cursor:default;
    border-bottom:0 !important; color:var(--muted) !important; letter-spacing:.14em;
}
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .tab-navigation.single-tab .tab-button.active::after{ display:none; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .tab-navigation.single-tab ~ .tab-content #discount-tab:not(.active){ display:none !important; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .tab-button:hover{ background:transparent !important; color:var(--ink) !important; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .tab-button i{ font-size:var(--t-base) !important; }
/* one font, no inner indent: the list starts on the same edge as the tab/heading */
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .shipping-discount-container{ font-family:'Jost',sans-serif !important; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .shipping-discount-container :not(.icon):not(i){ font-family:inherit !important; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .shipping-discount-container .tab-pane{ padding:var(--x2) 0 0 !important; animation:none; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .shipping_method{ padding:var(--x1) 0 !important; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .shipping_method:hover{ background:transparent; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .shipping-discount-container span:not(.shipping_details){ font-size:inherit; color:inherit; }
/* the coupon box, when it is real (atomizers) */
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .discount-content{
    background:var(--surface) !important; border:1px solid var(--rule-soft); border-radius:0 !important;
    padding:var(--x4) !important; gap:var(--x2) !important;
}
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .discount-price-row,
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .original-price-row{ justify-content:flex-start !important; margin-top:0 !important; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .discount-price{ color:var(--ink) !important; font-variant-numeric:tabular-nums; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .discount-price span{ font-size:inherit !important; font-weight:inherit; color:inherit !important; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .original-price-row span{ font-size:var(--t-sm) !important; color:var(--muted) !important; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .original-price-value{ color:var(--ink2) !important; font-weight:600; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .coupon-code{
    border-radius:0 !important; background:var(--ink) !important; color:var(--paper) !important;
    font-size:var(--t-sm) !important; padding:2px var(--x2) !important;
}
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .discount-badge{
    border-radius:0 !important; background:transparent !important; padding:0 !important; color:var(--sale) !important;
}
/* phones: A's desktop logo token out-specified the generic mobile one → 3-row header at 360 */
@media (max-width:767px){
/* iOS zooms any input under 16px on focus */
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-search{ font-size:16px; }
}
/* ---- 20.5 mobile title block ----
   Production puts the rating/code column beside the H1 (flex row), squeezing
   the H1 to ~190px. Stack it. Production sets these with !important at (0,4,0). */
@media (max-width:767px){
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text .title-rating-wrapper{
        flex-direction:column !important; align-items:stretch !important; gap:var(--x2) !important;
    }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text .title-rating-wrapper .product-title{ flex:0 0 auto !important; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text .title-rating-wrapper .mobile-rating-code-wrapper{
        width:100%; flex-direction:row !important; flex-wrap:wrap; align-items:center !important;
        gap:var(--x1) var(--x3);
    }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text .title-rating-wrapper .wsus__pro_rating.mobile-rating-inline{
        margin:0 !important; max-width:none !important; justify-content:flex-start !important;
    }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text .title-rating-wrapper .product-code{ margin:0 !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .title-rating-wrapper .product-title .h1-brand-name{ font-size:38px !important; }
}
/* ---- 20.8 tablet / small laptop layout ---- */
/* 992–1199: two columns again instead of a 1300px-deep stack */
@media (min-width:992px) and (max-width:1199px){
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) #wsus__product_details .row.align-items-start{ flex-wrap:nowrap !important; align-items:flex-start !important; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{
        flex:0 0 42% !important; max-width:42% !important;
    }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) #wsus__product_details .row.align-items-start > .col-xl-6.pl-20{
        flex:0 0 58% !important; max-width:58% !important; padding-left:var(--x6) !important;
    }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .product-gallery-v2{ max-width:420px !important; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text{ margin-top:0 !important; }
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{ padding:var(--x5) !important; }
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-20{ padding-top:var(--x4) !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .h1-brand-name{ font-size:44px !important; }
}
/* 768–991: stays stacked, gallery capped so the title arrives on the first screen */
@media (min-width:768px) and (max-width:991px){
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .product-gallery-v2{ max-width:340px !important; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .wsus__pro_details_text{ margin-top:var(--x5) !important; }
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{ padding:var(--x5) var(--x6) !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .h1-brand-name{ font-size:44px !important; }
}
@media (min-width:768px){
html:is([data-pdp-design="a"],[data-pdp-design="b"]) #deliveryTimeBadgeMobile{ display:none !important; }
}
/* the <a> is 60px tall inside the 52px box */
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .wishlist_button a{ height:100% !important; }
html[data-pdp-design="b"] .main-image-container{ border:0 !important; }
/* ---- 20.9 B sticky canvas on short viewports ----
   column is 100vh (32 top + 24 bottom padding); image + 12 gap + thumbs must fit */
@media (min-width:1200px){
html[data-pdp-design="b"] .product-gallery-v2{
        max-width:min(560px, calc(100vh - var(--thumb) - 96px)) !important;
    }
}
/* ---- 20.10 B phone canvas: negative margins without the width → 32px white strip ---- */
@media (max-width:767px){
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{
        width:calc(100% + 2 * var(--x4)) !important; max-width:none !important; flex:0 0 auto !important;
    }
}
/* ---- 20.11 type: production span/i rules leak into our components ----
   misc.css span{color:#000}, style_v7 span,p{font-size:16px}, misc i{font-family:Wow24}.
   :where() keeps these at (0,1,2) so every classed picker/header rule still wins. */
html:is([data-pdp-design="a"],[data-pdp-design="b"]){ --t-xs:12px; }
/* ---- 20.12 tap targets (phones) ---- */
@media (max-width:767px){
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .show-all-shipping-btn{
        min-height:var(--ctl-sm); display:inline-flex !important; align-items:center; padding:0 !important;
    }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .sticky-qty-btn{ width:44px; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .sticky-qty-input{ width:28px !important; }
}
/* ---- 20.14 section rhythm: one band token between rails, empty rails collapse ---- */
html:is([data-pdp-design="a"],[data-pdp-design="b"]){ --pdpx-band:var(--x7); }
@media (max-width:767px){
html:is([data-pdp-design="a"],[data-pdp-design="b"]){ --pdpx-band:var(--x6); }
}
/* ---- 20.15 alignment ---- */
/* phones: one 16px gutter — the buy column and A's gallery sat at 28 */
@media (max-width:767px){
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) .breadcrumbs_section .crumbsCol{ padding-left:0 !important; padding-right:0 !important; }
html[data-pdp-design]:is([data-pdp-design="a"],[data-pdp-design="b"]) #wsus__product_details .row.align-items-start > .col-xl-6.pl-20,
html[data-pdp-design="a"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{
        padding-left:0 !important; padding-right:0 !important;
    }
}
/* B at 1920: option rows ran 794px wide */
@media (min-width:1200px){
html[data-pdp-design="b"] .wsus__pro_details_text{ max-width:600px; }
}
/* ========================================== 22. final verification fixes ====
   From the 2026-09-16 re-check. A/B only unless noted. */
/* B's rise offset (§13, translateY 24px) out-ranked the .pdpx-in reset, so revealed
   blocks stayed 24px low and the reviews block cut into the footer */
html[data-pdp-design="b"] .pdpx-rise.pdpx-in{ transform:none; }
/* atomizers: production activates the coupon tab but leaves the shipping pane active
   too; with the tab bar visible that read as the wrong tab selected */
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .shipping-discount-container:has(#discount-tab-button.active) #shipping-tab{ display:none !important; }
/* keyboard focus must not land under the fixed mobile cart bar */
@media (max-width:767px){
html:is([data-pdp-design="a"],[data-pdp-design="b"]){ scroll-padding-bottom:88px; }
}
/* A's light brand weight leaked into the add-to-cart modal */
html[data-pdp-design="a"] .h1-brand-name{ font-weight:inherit !important; }
html[data-pdp-design="a"] .wsus__pro_details_text .h1-brand-name{ font-weight:300 !important; }
/* picker: format tabs and volume chips on one height; tabs as an even 2-up grid on phones */
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-tab,
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-chip{ min-height:56px; }
@media (max-width:767px){
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-tabs{ display:grid; grid-template-columns:1fr 1fr; }
}
/* load-time shift: while the page is still parsing, the gallery box renders ~2px tall
   and snaps to its square once later styles arrive, shoving the buy column down.
   Reserve the square up front (phones: full width minus the 16px gutters). */
@media (max-width:767px){
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .main-image-container{ min-height:calc(100vw - 2 * var(--x4)); }
}
/* ============================================= 23. gallery navigation (A/B) ====
   Buttons are created by enhanceGallery() in pdp-designs.js. Strip arrows only
   while the thumbnails overflow; main-image arrows only with 2+ images. */
.pdpx-strip-nav,
.pdpx-main-nav{ display:none; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .gallery-thumbnails-sidebar.pdpx-strip{ position:relative !important; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-strip.pdpx-over .gallery-thumbnails{
    padding-left:40px !important; padding-right:40px !important; scroll-padding-inline:40px;
}
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-strip.pdpx-over .pdpx-strip-nav{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:0; bottom:0; z-index:3; width:36px; padding:0; margin:0;
    background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:0;
    font-family:'Jost',sans-serif; font-size:24px; line-height:1; cursor:pointer;
    transition:opacity .15s ease, border-color .15s ease;
}
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-strip-prev{ left:0; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-strip-next{ right:0; }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-strip-nav:hover{ border-color:var(--ink); }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-strip-nav:disabled{ opacity:.3; cursor:default; border-color:var(--rule); }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .main-image-container.pdpx-multi .pdpx-main-nav{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:50%; transform:translateY(-50%); z-index:4;
    width:44px; height:44px; padding:0; margin:0;
    background:rgba(255,255,255,.92); color:var(--ink); border:1px solid var(--rule); border-radius:0;
    font-family:'Jost',sans-serif; font-size:26px; line-height:1; cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
}
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-main-prev{ left:var(--x2); }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-main-next{ right:var(--x2); }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-main-nav:hover{ border-color:var(--ink); background:var(--paper); }
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-main-nav span,
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-strip-nav span{ color:inherit; font-size:inherit; line-height:1; margin-top:-2px; }
@media (prefers-reduced-motion:reduce){
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-strip-nav,
html:is([data-pdp-design="a"],[data-pdp-design="b"]) .pdpx-main-nav{ transition:none; }
}
/* ================================== 24. B · Vitrina production polish ======
   2026-09-17. B only (A and C are retired). Mostly the top of the page; the
   gutter rule below also carries the cases under it (.ds/.rcb/.rv) so every
   block on the page shares one left and right edge. */

/* ---- 24.1 gutters: the container keeps production's 12px left padding (it also
   wraps the lower page, so it stays), which put B's content at 44px on desktop
   and 28px on phones. Compensate on our own boxes → one 32 / 16 gutter.
   The cases below the product (.ds, .rcb, .rv) take the same compensation, so
   the dossier and the display case line up with the buy column above them
   instead of sitting 12–20px inside it. */
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .breadcrumbs_section,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .rcb,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .ds,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .rv,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .wsus__details_bg{
    padding-left:calc(var(--x6) - 12px) !important;
}
@media (max-width:759px){
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .breadcrumbs_section,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .rcb,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .ds,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .rv,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .wsus__details_bg{
        padding-left:calc(var(--x4) - 12px) !important; padding-right:calc(var(--x4) - 12px) !important;
    }
}

/* ---- 24.2 desktop canvas + reading column ---- */
@media (min-width:1200px){
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{
        padding:var(--x6) var(--x7) var(--x5) !important;
    }
/* canvas: 32 top + 24 bottom padding, 12 gap, one thumb row — the image takes the rest */
html[data-pdp-design="b"] .product-gallery-v2{
        max-width:min(720px, calc(100vh - var(--thumb) - 124px)) !important;
    }
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-20{
        padding-left:clamp(48px, 4.4vw, 88px) !important; padding-right:0 !important;
        padding-top:var(--x7) !important;
    }
html[data-pdp-design="b"] .wsus__pro_details_text{ max-width:560px; }
}
@media (min-width:1600px){
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{ flex:0 0 57%; max-width:57%; }
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-20{ flex:0 0 43%; max-width:43%; }
html[data-pdp-design="b"] .wsus__pro_details_text{ max-width:600px; }
html[data-pdp-design="b"] .wsus__pro_details_text .h1-brand-name{ font-size:64px !important; }
}

/* ---- 24.3 title block: light brand, quiet name, calm price ---- */
html[data-pdp-design="b"] .wsus__pro_details_text .h1-brand-name{
    color:var(--ink) !important; letter-spacing:-.025em !important; line-height:1.02 !important;
    margin:0 0 var(--x3) !important; text-decoration:none !important;
}
html[data-pdp-design="b"] #product-title{ font-weight:400 !important; color:var(--ink) !important; line-height:1.4 !important; }
html[data-pdp-design="b"] #product-title span{
    font-size:inherit !important; font-weight:inherit !important; color:inherit !important; line-height:inherit !important;
}
html[data-pdp-design="b"] .wsus__pro_details_text > .row.mt-3{ margin-top:var(--x5) !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .product-details-info{
    border:0 !important; padding:0 !important;
}
html[data-pdp-design="b"] .wsus__pro_details_text .now-price,
html[data-pdp-design="b"] .wsus__pro_details_text #variantPriceDisplay,
html[data-pdp-design="b"] .wsus__pro_details_text #variantPriceText{
    font-family:'Jost',sans-serif !important; font-size:30px !important; font-weight:500 !important;
    letter-spacing:-.01em !important; line-height:1.15 !important; color:var(--ink) !important;
    font-variant-numeric:tabular-nums;
}
/* code + dispatch time: one quiet line under the price instead of 12px over 16px */
html[data-pdp-design="b"] .wsus__pro_details_text > .rating-code-row{ margin:var(--x2) 0 0 !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .rating-code-meta{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap; align-items:baseline !important;
    gap:var(--x1) var(--x4); text-align:left !important;
}
html[data-pdp-design="b"] .wsus__pro_details_text .product-code,
html[data-pdp-design="b"] .wsus__pro_details_text #deliveryTimeBadge,
html[data-pdp-design="b"] .wsus__pro_details_text #deliveryTimeBadge span,
html[data-pdp-design="b"] .wsus__pro_details_text #deliveryTimeBadgeMobile,
html[data-pdp-design="b"] .wsus__pro_details_text #deliveryTimeBadgeMobile span{
    font-family:'Jost',sans-serif !important; font-size:var(--t-md) !important; line-height:1.5 !important;
    color:var(--ink2) !important; font-weight:400 !important;
}
html[data-pdp-design="b"] .wsus__pro_details_text #deliveryTimeText,
html[data-pdp-design="b"] .wsus__pro_details_text #deliveryTimeBadgeMobile span span{ color:var(--ink) !important; font-weight:500 !important; }
html[data-pdp-design="b"] .wsus__pro_details_text #deliveryTimeBadgeMobile{ margin-top:var(--x1) !important; }

/* ---- 24.4 vertical rhythm: hairline → picker → cart → details → delivery ---- */
html[data-pdp-design="b"] .wsus__pro_details_text > .variations-row{
    margin-top:var(--x5) !important; padding-top:0 !important;
    border-top:0 !important;
}
/* products without a picker: the empty row only added a gap */
html[data-pdp-design="b"] .wsus__pro_details_text > .variations-row:not(:has(#pdpx-picker)){ display:none !important; }
html[data-pdp-design="b"] .wsus__button_area{ margin-top:var(--x6) !important; }
html[data-pdp-design="b"] .wsus__pro_details_text > #wow24PiInline{
    margin-top:var(--x6) !important; padding:0 !important;
    border-top:1px solid var(--rule) !important; border-bottom:1px solid var(--rule) !important;
}
html[data-pdp-design="b"] .wsus__pro_details_text .wow24-pi-trigger{
    width:100% !important; min-height:var(--ctl); padding:0 !important;
    font-family:'Jost',sans-serif !important; font-size:var(--t-base) !important; font-weight:500 !important;
    color:var(--ink) !important; background:transparent !important; cursor:pointer;
}
html[data-pdp-design="b"] .wsus__pro_details_text .wow24-pi-trigger > span:not([class]){ font-size:var(--t-base) !important; color:inherit !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .wow24-pi-trigger-ic{ border-radius:0 !important; border-color:var(--ink) !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .wow24-pi-trigger-arrow{ margin-left:auto !important; color:var(--muted) !important; transition:transform .18s ease; }
html[data-pdp-design="b"] .wsus__pro_details_text .wow24-pi-trigger:hover .wow24-pi-trigger-arrow{ color:var(--ink) !important; transform:translateX(3px); }
html[data-pdp-design="b"] .wsus__pro_details_text .wow24-pi-trigger:focus-visible{ outline:2px solid var(--ink) !important; outline-offset:2px; }
html[data-pdp-design="b"] .wsus__pro_details_text .fullnames-list{ padding-bottom:var(--x4); }
html[data-pdp-design="b"] .shipping-discount-container{ margin:var(--x6) 0 0 !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .shipDivider,
html[data-pdp-design="b"] .wsus__pro_details_text > .shipMobDivider{ display:none !important; }
/* the single "Pristatymas" heading: no phantom icon gap, flush with the column edge */
html[data-pdp-design="b"] .tab-navigation.single-tab .tab-button.active{ gap:0 !important; font-size:var(--t-xs) !important; letter-spacing:.16em !important; min-height:0 !important; padding:0 0 var(--x3) !important; }
html[data-pdp-design="b"] .tab-navigation.single-tab .tab-button i{ display:none !important; }
html[data-pdp-design="b"] .tab-button:focus-visible{ outline:2px solid var(--ink) !important; outline-offset:-2px; }
html[data-pdp-design="b"] .shipping-methods-list{ padding:0 !important; margin:0 !important; gap:0 !important; }
html[data-pdp-design="b"] .shipping_method{ min-height:36px; padding:var(--x1) 0 !important; }
html[data-pdp-design="b"] .shipping_price,
html[data-pdp-design="b"] .shipping_price strong{ padding-right:0 !important; margin-right:0 !important; font-weight:500 !important; color:var(--ink) !important; }
html[data-pdp-design="b"] .shipping_details{ color:var(--ink2) !important; }
html[data-pdp-design="b"] .show-all-shipping-btn{ color:var(--ink2) !important; text-underline-offset:3px; }

/* ---- 24.5 cart row: one 52px line, flat black, hairline wishlist ---- */
html[data-pdp-design="b"] .quantity-input{ border-color:var(--rule) !important; }
html[data-pdp-design="b"] .quantity-button{ color:var(--ink) !important; transition:background .12s ease; }
html[data-pdp-design="b"] .quantity-button:hover{ background:var(--surface); }
html[data-pdp-design="b"] #product_input_qty{ color:var(--ink) !important; font-variant-numeric:tabular-nums; }
html[data-pdp-design="b"] .add_cart.wow_button{
    font-family:'Jost',sans-serif !important; font-weight:500 !important; letter-spacing:.12em !important;
    line-height:1.2 !important; transition:background .15s ease !important;
}
html[data-pdp-design="b"] .add_cart.wow_button,
html[data-pdp-design="b"] .add_cart.wow_button span{ color:var(--paper) !important; }
html[data-pdp-design="b"] .add_cart.wow_button i{ color:var(--paper) !important; font-size:16px !important; }
html[data-pdp-design="b"] .add_cart.wow_button:hover{ background:#2b2d31 !important; }
html[data-pdp-design="b"] .add_cart.wow_button:focus-visible{ outline:2px solid var(--ink) !important; outline-offset:2px !important; }
html[data-pdp-design="b"] .wishlist_button{ border-color:var(--rule) !important; transition:border-color .15s ease; }
html[data-pdp-design="b"] .wishlist_button:hover{ border-color:var(--ink) !important; }
html[data-pdp-design="b"] .wishlist_button a{ border:0 !important; border-radius:0 !important; color:var(--ink) !important; }
/* production paints the link black on hover (background black + white text !important) while
   B keeps the heart icon ink → a solid black square. B hover: border darkens (above), icon stays visible. */
html[data-pdp-design="b"] .wishlist_button a:hover,
html[data-pdp-design="b"] .wishlist_button a:focus{ background-color:transparent !important; color:var(--ink) !important; }
html[data-pdp-design="b"] .wishlist_button a:hover .icon,
html[data-pdp-design="b"] .wishlist_button a:focus .icon{ color:var(--ink) !important; }

/* ---- 24.6 picker ---- */
html[data-pdp-design="b"] #pdpx-picker .pdpx-ax + .pdpx-ax{ margin-top:var(--x5); }
html[data-pdp-design="b"] #pdpx-picker .pdpx-axlab{
    font-size:var(--t-xs); font-weight:500; letter-spacing:.16em; color:var(--muted); margin-bottom:var(--x3);
}
html[data-pdp-design="b"] #pdpx-picker .pdpx-axlab span{ font-size:inherit; color:inherit; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-axlab em{ font-size:var(--t-sm); color:var(--muted); letter-spacing:0; }
html[data-pdp-design="b"] .pdpx-tab,
html[data-pdp-design="b"] .pdpx-chip,
html[data-pdp-design="b"] .pdpx-shade,
html[data-pdp-design="b"] .pdpx-opt{ border-radius:0; overflow-wrap:anywhere; hyphens:auto; }
html[data-pdp-design="b"] .pdpx-tab{ font-size:var(--t-base); font-weight:500; padding:var(--x2) var(--x4); line-height:1.25; }
html[data-pdp-design="b"] .pdpx-tab small{ font-size:var(--t-sm); margin-top:3px; }
html[data-pdp-design="b"] .pdpx-tab.on small{ color:rgba(255,255,255,.78); }
html[data-pdp-design="b"] .pdpx-chip{ min-width:88px; padding:var(--x2) var(--x3); }
html[data-pdp-design="b"] .pdpx-chip b{ font-size:var(--t-base); font-weight:500; color:var(--ink); }
html[data-pdp-design="b"] .pdpx-chip i{ font-family:inherit; font-size:var(--t-sm); color:var(--muted); margin-top:2px; }
html[data-pdp-design="b"] .pdpx-tab:not(.on):hover,
html[data-pdp-design="b"] .pdpx-chip:not(.on):hover,
html[data-pdp-design="b"] .pdpx-shade:not(.on):hover{ border-color:var(--ink); }
html[data-pdp-design="b"] .pdpx-tab.on:hover{ background:#2b2d31; }
/* sold out: legible (no 42% ghosting), struck through, still selectable */
html[data-pdp-design="b"] .pdpx-chip.out,
html[data-pdp-design="b"] .pdpx-opt.out,
html[data-pdp-design="b"] #pdpx-picker .pdpx-shade.out{ opacity:1; }
html[data-pdp-design="b"] .pdpx-chip.out b{ color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; }
html[data-pdp-design="b"] .pdpx-chip.out:not(.on){ background:var(--surface); border-style:dashed; }
html[data-pdp-design="b"] .pdpx-opt.out .pdpx-pr,
html[data-pdp-design="b"] .pdpx-opt.out .pdpx-wh{ color:var(--muted); }
/* shade tiles: small by default — a 40-shade foundation is a wall of them — and
   the one under the pointer lifts to full size instead of the grid reflowing */
html[data-pdp-design="b"] .pdpx-shades{ grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:6px; }
html[data-pdp-design="b"] .pdpx-shade{ position:relative; z-index:0; transition:transform .16s ease, border-color .12s ease; }
html[data-pdp-design="b"] .pdpx-shade .pdpx-sw{ position:relative; aspect-ratio:3/2; }
html[data-pdp-design="b"] .pdpx-shade .pdpx-sn{ font-size:var(--t-md); font-weight:500; color:var(--ink); line-height:1.3; padding:var(--x2) var(--x2) 0; }
html[data-pdp-design="b"] .pdpx-shade .pdpx-sp{ font-size:var(--t-sm); font-weight:400; color:var(--ink2); padding:2px var(--x2) var(--x2); }
html[data-pdp-design="b"] .pdpx-shade .pdpx-sp s{ color:var(--muted); }
/* pointer devices only: the tile under the cursor grows back to reading size and
   lifts over its neighbours — the grid itself never moves, so nothing reflows */
@media (hover:hover) and (min-width:768px){
html[data-pdp-design="b"] .pdpx-shade:hover,
html[data-pdp-design="b"] .pdpx-shade:focus-visible{ transform:scale(1.34); z-index:3; }
html[data-pdp-design="b"] .pdpx-shade:hover{ border-color:var(--ink); }
}
@media (prefers-reduced-motion:reduce){
html[data-pdp-design="b"] .pdpx-shade{ transition:none; }
html[data-pdp-design="b"] .pdpx-shade:hover,
html[data-pdp-design="b"] .pdpx-shade:focus-visible{ transform:none; }
}
html[data-pdp-design="b"] #pdpx-picker .pdpx-shade.out .pdpx-sn{ color:var(--muted); }
html[data-pdp-design="b"] #pdpx-picker .pdpx-shade.out .pdpx-sw::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top right, transparent calc(50% - .75px), rgba(255,255,255,.95) calc(50% - .75px), rgba(255,255,255,.95) calc(50% + .75px), transparent calc(50% + .75px));
}
html[data-pdp-design="b"] .pdpx-search{
    height:44px; max-width:320px; padding:0 var(--x3); border-color:var(--rule); border-radius:0;
    font-size:var(--t-base); color:var(--ink); -webkit-appearance:none; appearance:none;
}
html[data-pdp-design="b"] .pdpx-search::placeholder{ color:var(--muted); opacity:1; }
html[data-pdp-design="b"] .pdpx-search:focus{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
/* option rows */
html[data-pdp-design="b"] .pdpx-opt{ min-height:56px; padding:var(--x3) var(--x4) var(--x3) var(--x3); }
html[data-pdp-design="b"] .pdpx-opts{ border-color:var(--rule); }
html[data-pdp-design="b"] .pdpx-opt + .pdpx-opt{ border-top-color:var(--rule-soft); }
html[data-pdp-design="b"] .pdpx-opt .pdpx-dot{ border-radius:0; border-color:var(--muted); background:var(--paper); }
html[data-pdp-design="b"] .pdpx-opt.on .pdpx-dot{ border-color:var(--ink); background:var(--ink); box-shadow:inset 0 0 0 2.5px var(--paper); }
html[data-pdp-design="b"] .pdpx-opt:hover .pdpx-dot{ border-color:var(--ink); }
html[data-pdp-design="b"] .pdpx-opt .pdpx-pr{ font-size:var(--t-base); font-weight:500; color:var(--ink); }
html[data-pdp-design="b"] .pdpx-opt .pdpx-pr s{ font-size:var(--t-sm); color:var(--muted); }
html[data-pdp-design="b"] .pdpx-opt .pdpx-wh{ font-size:var(--t-md); font-weight:400; color:var(--ink); }
html[data-pdp-design="b"] .pdpx-opt .pdpx-mt{ font-size:var(--t-sm); color:var(--ink2); }
html[data-pdp-design="b"] .pdpx-opt .pdpx-mt b{ font-weight:500; }
/* text shade chips + colour dots: square, like everything else in B */
html[data-pdp-design="b"] #pdpx-picker .pdpx-dot-sw{ border-radius:0; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-shades-txt .pdpx-shade{ min-height:44px; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-shades-txt .pdpx-shade .pdpx-sn{ padding:0; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-shades-txt .pdpx-shade .pdpx-sp{ padding:0; color:var(--muted); }
/* focus: black ring on every picker control */
html[data-pdp-design="b"] .pdpx-tab:focus-visible,
html[data-pdp-design="b"] .pdpx-chip:focus-visible,
html[data-pdp-design="b"] .pdpx-shade:focus-visible,
html[data-pdp-design="b"] .pdpx-opt:focus-visible{ outline:2px solid var(--ink) !important; outline-offset:2px; }
html[data-pdp-design="b"] .pdpx-opt:focus-visible{ outline-offset:-2px; }

/* ---- 24.7 gallery arrows: quiet chevrons on the canvas, not white boxes ---- */
html[data-pdp-design="b"] .main-image-container.pdpx-multi .pdpx-main-nav{
    background:transparent; border:0; color:var(--ink); font-size:34px; font-weight:200;
    opacity:.55; transition:opacity .15s ease, background .15s ease;
}
html[data-pdp-design="b"] .pdpx-main-prev{ left:0; }
html[data-pdp-design="b"] .pdpx-main-next{ right:0; }
html[data-pdp-design="b"] .main-image-container.pdpx-multi .pdpx-main-nav:hover,
html[data-pdp-design="b"] .main-image-container.pdpx-multi .pdpx-main-nav:focus-visible{ opacity:1; background:var(--paper); }
@media (hover:hover){
html[data-pdp-design="b"] .main-image-container.pdpx-multi .pdpx-main-nav{ opacity:0; }
html[data-pdp-design="b"] .main-image-container.pdpx-multi:hover .pdpx-main-nav{ opacity:.7; }
}
html[data-pdp-design="b"] .pdpx-main-nav:focus-visible,
html[data-pdp-design="b"] .pdpx-strip-nav:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; opacity:1 !important; }
html[data-pdp-design="b"] .pdpx-strip.pdpx-over .pdpx-strip-nav{
    width:36px; background:var(--surface); border:0; color:var(--ink); font-size:26px;
}
html[data-pdp-design="b"] .pdpx-strip.pdpx-over .pdpx-strip-nav:hover:not(:disabled){ background:var(--paper); }
html[data-pdp-design="b"] .pdpx-strip.pdpx-over .pdpx-strip-nav:disabled{ opacity:.25; }
html[data-pdp-design="b"] .thumbnail-item{ border-color:transparent !important; cursor:pointer; }
html[data-pdp-design="b"] .thumbnail-item:hover{ border-color:var(--rule) !important; }
html[data-pdp-design="b"] .thumbnail-item.active{ border-color:var(--ink) !important; }

/* ---- 24.8 tablet ---- */
@media (min-width:768px) and (max-width:1199px){
html[data-pdp-design="b"] .wsus__pro_details_text .h1-brand-name{ font-size:48px !important; }
}
@media (min-width:768px) and (max-width:991px){
/* stacked: a lower canvas so brand, name and price land on the first screen */
html[data-pdp-design="b"] .product-gallery-v2{ max-width:400px !important; }
html[data-pdp-design="b"] .wsus__pro_details_text{ margin-top:var(--x6) !important; }
}

/* ---- 24.9 phones ---- */
@media (max-width:767px){
/* full-bleed canvas regardless of container padding */
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{
        margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
        width:100vw !important; max-width:100vw !important; flex:0 0 auto !important;
        padding:var(--x4) var(--x4) var(--x3) !important;
    }
/* a 5:4 stage instead of a square: ~70px more of the buy column on the first screen */
html:is([data-pdp-design="a"],[data-pdp-design="b"])[data-pdp-design="b"] .main-image-container{
        aspect-ratio:5/4; min-height:calc((100vw - 2 * var(--x4)) * .8);
    }
html[data-pdp-design="b"] #main-gallery-image{ max-height:92% !important; }
html[data-pdp-design="b"] .wsus__pro_details_text{ padding-top:var(--x5) !important; }
/* title → price → dispatch → code: the code no longer splits name and price */
html[data-pdp-design="b"] .wsus__pro_details_text > .title-rating-wrapper{ display:contents !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .title-rating-wrapper > .product-title{ order:1; }
html[data-pdp-design="b"] .wsus__pro_details_text .title-rating-wrapper > .mobile-rating-code-wrapper{
        order:3; display:flex !important; margin-top:var(--x1) !important;
    }
html[data-pdp-design="b"] .wsus__pro_details_text .title-rating-wrapper .product-code{ font-size:var(--t-sm) !important; color:var(--muted) !important; }
html[data-pdp-design="b"] .wsus__pro_details_text > .row.mt-3{ margin-top:var(--x4) !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .now-price,
html[data-pdp-design="b"] .wsus__pro_details_text #variantPriceDisplay,
html[data-pdp-design="b"] .wsus__pro_details_text #variantPriceText{ font-size:26px !important; }
html[data-pdp-design="b"] #product-title{ font-size:var(--t-lg) !important; }
html[data-pdp-design="b"] .wsus__pro_details_text > .variations-row{ margin-top:var(--x4) !important; padding-top:var(--x4) !important; }
/* shade tiles: four across on a phone, half-height swatches and smaller type —
   a foundation with 10+ shades used to run four rows of 145px tiles before the
   buy button came back into view */
html[data-pdp-design="b"] .pdpx-shades{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
html[data-pdp-design="b"] .pdpx-shade .pdpx-sw{ aspect-ratio:2/1; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-axlab{ margin-bottom:var(--x2); }
/* the tile type is set further down the file (24.x polish), so the phone sizes
   have to come after it — see the block at the end of this file */
html[data-pdp-design="b"] .pdpx-search{ max-width:none; font-size:16px; }
html[data-pdp-design="b"] .pdpx-chips{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
html[data-pdp-design="b"] .pdpx-chip{ min-width:0; }
html[data-pdp-design="b"] .pdpx-opt{ padding:var(--x3); }
/* wishlist: a quiet secondary row, not a second CTA */
html[data-pdp-design="b"] .wishlistMobileBtn{
        min-height:var(--ctl-mob); margin:var(--x3) 0 0 !important; padding:0 var(--x3) !important;
        border:1px solid var(--rule) !important; cursor:pointer;
    }
html[data-pdp-design="b"] .wishlistMobileBtn i{ font-size:18px !important; color:var(--ink) !important; }
html[data-pdp-design="b"] .wishlistMobileBtn span{
        font-size:var(--t-sm) !important; font-weight:500 !important; letter-spacing:.12em; color:var(--ink) !important;
    }
/* on a phone the disclosure belongs to the identity block: it opens the spec rows
   that continue "Prekės kodas", so it follows the code line (order 3 = the rating /
   code wrapper, which precedes it in the DOM) instead of sitting below the cart form. */
html[data-pdp-design="b"] .wsus__pro_details_text > #wow24PiInline{ order:3 !important; margin-top:var(--x3) !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .wow24-pi-trigger{ min-height:var(--ctl-mob); }
/* sticky bar: flat hairline, clears the iPhone home indicator */
html[data-pdp-design="b"] .mobile-sticky-cart{
        box-shadow:none !important; border-top:1px solid var(--rule) !important;
        padding:var(--x2) var(--x4) calc(var(--x2) + env(safe-area-inset-bottom, 0px)) !important;
    }
html[data-pdp-design="b"] .sticky-cart-qty{ border-color:var(--rule) !important; border-radius:0 !important; }
html[data-pdp-design="b"] .sticky-qty-btn{ color:var(--ink) !important; }
html[data-pdp-design="b"] .sticky-qty-input{ color:var(--ink) !important; font-weight:500 !important; }
}
@media (max-width:380px){
html[data-pdp-design="b"] .pdpx-chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---- 24.10 reduced motion ---- */
@media (prefers-reduced-motion:reduce){
html[data-pdp-design="b"] .wow24-pi-trigger-arrow,
html[data-pdp-design="b"] .add_cart.wow_button,
html[data-pdp-design="b"] .wishlist_button,
html[data-pdp-design="b"] .quantity-button,
html[data-pdp-design="b"] .pdpx-main-nav,
html[data-pdp-design="b"] .pdpx-strip-nav{ transition:none !important; }
html[data-pdp-design="b"] .wsus__pro_details_text .wow24-pi-trigger:hover .wow24-pi-trigger-arrow{ transform:none; }
}
/* ---- 24.11 production span/button type leaks into picker buttons (16px black) ---- */
html[data-pdp-design="b"] #pdpx-picker .pdpx-shade .pdpx-sn{ font-size:10px !important; line-height:1.2 !important; padding:5px 5px 0 !important; color:var(--ink) !important; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-shade .pdpx-sp{ font-size:10px !important; color:var(--ink2) !important; line-height:1.2 !important; padding:1px 5px 5px !important; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-shade.out .pdpx-sn,
html[data-pdp-design="b"] #pdpx-picker .pdpx-shades-txt .pdpx-shade .pdpx-sp{ color:var(--muted) !important; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-shades-txt .pdpx-shade.on .pdpx-sp{ color:var(--ink) !important; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-opt .pdpx-pr{ font-size:var(--t-base) !important; color:var(--ink) !important; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-opt .pdpx-wh{ font-size:var(--t-md) !important; color:var(--ink) !important; line-height:1.35 !important; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-opt .pdpx-wh .pdpx-wsh{ font-size:var(--t-sm) !important; color:var(--muted) !important; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-opt .pdpx-mt{ font-size:var(--t-sm) !important; color:var(--ink2) !important; line-height:1.45 !important; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-opt.out .pdpx-pr,
html[data-pdp-design="b"] #pdpx-picker .pdpx-opt.out .pdpx-wh{ color:var(--muted) !important; }
html[data-pdp-design="b"] #pdpx-picker .pdpx-opt .pdpx-mt u{ color:var(--sale) !important; }
html[data-pdp-design="b"] .mobile-sticky-cart .sticky-cart-qty,
html[data-pdp-design="b"] .mobile-sticky-cart .add_cart{ border-radius:0 !important; }
/* tablet: the container pads 20px on both sides there */
@media (min-width:760px) and (max-width:1199px){
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .breadcrumbs_section,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .rcb,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .ds,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .rv,
html[data-pdp-design="b"] #wsus__product_details .container.pr-0 > .wsus__details_bg{
        padding-left:calc(var(--x6) - 20px) !important; padding-right:calc(var(--x6) - 20px) !important;
    }
}
/* shipping price sat left-aligned in a fixed 56px box → 20px ragged right edge */
html[data-pdp-design="b"] .shipping_price{ width:auto !important; min-width:0 !important; text-align:right !important; }
html[data-pdp-design="b"] .shipping_price strong{ font-size:var(--t-md) !important; }
/* format note under the price ("Atomaizeriai"): part of the meta line, not a heading.
   Production paints the span #1a1a1a on #3a3d42 text — unreadable; B gives it the outline
   treatment (paper ground, ink type) next to the filled "Testeris" chip. */
html[data-pdp-design="b"] .wsus__pro_details_text #atomizerBadge{
    font-family:'Jost',sans-serif !important; line-height:1.5 !important;
    background:none !important; padding:0 !important;
}
html[data-pdp-design="b"] .wsus__pro_details_text #atomizerBadge span{
    display:inline-block; padding:3px 9px;
    background:var(--paper) !important; color:var(--ink) !important;
    border:1px solid var(--ink); border-radius:0 !important;
    font-family:'Jost',sans-serif !important; font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.12em; text-transform:uppercase; line-height:1.5 !important;
}
/* 992–1199: two columns without the pinned canvas; keep the image in view while reading */
@media (min-width:992px) and (max-width:1199px){
html[data-pdp-design="b"] #wsus__product_details .row.align-items-start > .col-xl-6.pl-0{
        position:sticky !important; top:var(--x4); align-self:flex-start !important;
    }
}
/* strip arrows: 44px hit width (were 36) */
html[data-pdp-design="b"] .pdpx-strip.pdpx-over .gallery-thumbnails{ padding-left:48px !important; padding-right:48px !important; scroll-padding-inline:48px; }
html[data-pdp-design="b"] .pdpx-strip.pdpx-over .pdpx-strip-nav{ width:44px; }
/* load shift: the strip is empty/unsized until production's gallery script runs, then
   pushes nothing on desktop (canvas is centred) but shifts the image; reserve its row */
html[data-pdp-design="b"] .gallery-thumbnails-sidebar{ min-height:calc(var(--thumb) + 2px) !important; }
html[data-pdp-design="b"] .gallery-thumbnails{ min-height:calc(var(--thumb) + 2px) !important; align-items:center; }
/* load shift (CLS ≈0.12 desktop): body is a centring flex column, so the section
   renders shrink-to-fit (1124px at 1440) until late content widens it to 1440 and the
   pinned canvas image jumps 476→647px. Start it at its final full width. */
html[data-pdp-design="b"] #wsus__product_details{ width:100% !important; align-self:stretch !important; box-sizing:border-box; }
/* breadcrumb row keeps bootstrap's -12px margins → crumbs sat 12px left of the gutter */
html[data-pdp-design="b"] #wsus__product_details .breadcrumbs_section > .row{ margin-left:0 !important; margin-right:0 !important; }

/* 25. admin only — EAN / SKU under chips and option rows (live variant card shows the same) */
.pdpx-adm{ display:block; margin-top:3px; font-style:normal; font-weight:400; font-size:9px; line-height:1.3; letter-spacing:0; color:var(--muted); text-transform:none; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pdpx-chip .pdpx-adm{ text-align:inherit; }

/* admin only — EAN / SKU of the selected variant under the picker */
.pdpx-adm-cur{ margin:8px 0 0; font-family:'Jost',sans-serif; font-size:11px; line-height:1.4; letter-spacing:.02em; color:var(--muted); font-variant-numeric:tabular-nums; }
.pdpx-tab .pdpx-adm{ margin-top:2px; }

/* "Jums gali patikti" (live markup): slick inside a flex row without min-width:0 grows to 33M px on
   tablets and the rail renders as a tall empty gap — let the flex children shrink */
html[data-pdp-design="b"] .desktop-side-by-side-layout > *{ min-width:0; }
html[data-pdp-design="b"] .desktop-side-by-side-layout .products-main-content{ flex:1 1 0%; min-width:0; max-width:100%; }
html[data-pdp-design="b"] .jumsGaliPatiktiSection{ min-width:0; }


/* ======================================================================
   "Papildoma informacija" spec rows (.fullnames-list .pim-row)
   Production left them at 16px grey keys with no rules and values running
   past the column. Same rows, B typography: small uppercase label, ink
   value, hairline between, wrapping instead of overflowing.
   ====================================================================== */
/* only the .open state may set display here: the list is collapsed until wow24PiOpen()
   adds .open, and a display on the base selector would hold it permanently open */
html[data-pdp-design="b"] .product-fullnames.wow24-pi-inline.open .fullnames-list{
    display:block; width:100%; padding-bottom:var(--x4);
}
html[data-pdp-design="b"] .product-fullnames.wow24-pi-inline .pim-row{
    display:flex !important; align-items:baseline; gap:var(--x4);
    width:100%; margin:0; padding:9px 0 !important;
    border-bottom:1px solid var(--rule-soft) !important;
    font-family:'Jost',sans-serif !important; line-height:1.5 !important;
    color:var(--ink) !important; text-decoration:none !important;
}
html[data-pdp-design="b"] .product-fullnames.wow24-pi-inline .pim-row:last-child{ border-bottom:0 !important; }
html[data-pdp-design="b"] .product-fullnames.wow24-pi-inline .pim-row .pim-key{
    flex:0 0 160px; min-width:0;
    font-family:'Jost',sans-serif !important; font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--muted) !important; line-height:1.6 !important;
}
html[data-pdp-design="b"] .product-fullnames.wow24-pi-inline .pim-row .pim-val{
    /* production sets white-space:nowrap here, so long note lists ran past the column */
    flex:1 1 auto; min-width:0; overflow-wrap:anywhere; white-space:normal !important;
    font-family:'Jost',sans-serif !important; font-size:var(--t-base) !important; font-weight:400 !important;
    color:var(--ink) !important; line-height:1.5 !important;
}
/* linked rows keep the underline affordance, in ink not blue */
html[data-pdp-design="b"] .product-fullnames.wow24-pi-inline .pim-row.fullname-link:hover .pim-val{
    text-decoration:underline; text-underline-offset:3px;
}
@media (max-width:759px){
    html[data-pdp-design="b"] .product-fullnames.wow24-pi-inline .pim-row{ flex-direction:column; gap:2px; padding:10px 0 !important; }
    html[data-pdp-design="b"] .product-fullnames.wow24-pi-inline .pim-row .pim-key{ flex:0 0 auto; }
}

/* ======================================================================
   "Prekės informacija" — B composes this section itself
   (frontend/pages/b/partials/pdp-info.blade.php). Editorial layout: a
   micro-label rail, a quiet tag line, and the atomizer note as prose with
   a hairline price breakdown instead of a shadowed card.
   ====================================================================== */
html[data-pdp-design="b"] .pdi{
    display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--x6);
    margin:0 0 var(--x7); padding-top:var(--x5);
    border-top:1px solid var(--ink);
    font-family:'Jost',sans-serif;
}
html[data-pdp-design="b"] .pdi-label{
    margin:0 !important; padding:0 !important;
    font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted) !important; line-height:1.6 !important;
}
html[data-pdp-design="b"] .pdi-main{ min-width:0; }

/* tag line: uppercase links with a hairline underline, no boxes */
html[data-pdp-design="b"] .pdi-tags{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
    gap:var(--x2) var(--x5) !important; margin:0 !important; padding:0 !important; border:0 !important;
}
html[data-pdp-design="b"] .pdi-tags .hashtag-row{ display:contents !important; margin:0 !important; }
html[data-pdp-design="b"] .pdi-tags .hashtag-link,
html[data-pdp-design="b"] .pdi-tags .hashtag-text,
html[data-pdp-design="b"] .pdi-tags .hashtag-shade{
    display:inline-flex; align-items:center; gap:6px; padding:0 !important;
    font-family:'Jost',sans-serif !important; font-size:var(--t-md) !important; font-weight:400 !important;
    letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink2) !important; text-decoration:none !important; line-height:1.6 !important;
}
html[data-pdp-design="b"] .pdi-tags .hashtag-link{
    color:var(--ink) !important; border-bottom:1px solid var(--rule); transition:border-color .2s ease;
}
html[data-pdp-design="b"] .pdi-tags .hashtag-link:hover{ border-bottom-color:var(--ink); }
html[data-pdp-design="b"] .pdi-tags .hashtag-text:empty{ display:none; }
html[data-pdp-design="b"] .pdi-swatch{
    display:inline-block; width:10px; height:10px; border:1px solid var(--rule); border-radius:0;
}

/* atomizer note */
html[data-pdp-design="b"] .pdi-note{
    max-width:72ch; margin:var(--x7) 0 0; padding-top:var(--x5); border-top:1px solid var(--rule);
}
html[data-pdp-design="b"] .pdi-note-title{
    margin:0 0 var(--x4) !important; padding:0 !important;
    font-size:var(--t-md) !important; font-weight:700 !important;
    letter-spacing:.13em; text-transform:uppercase; color:var(--muted) !important; line-height:1.4 !important;
}
html[data-pdp-design="b"] .pdi-note .pdi-lead{
    margin:0 0 var(--x4) !important;
    font-size:var(--t-xl) !important; font-weight:300 !important; line-height:1.35 !important;
    letter-spacing:-.01em; color:var(--ink) !important;
}
html[data-pdp-design="b"] .pdi-note p{
    margin:0 0 var(--x4) !important;
    font-size:var(--t-lg) !important; font-weight:400 !important; line-height:1.7 !important; color:var(--ink2) !important;
}
html[data-pdp-design="b"] .pdi-note strong{ color:var(--ink) !important; font-weight:500 !important; }
html[data-pdp-design="b"] .pdi-sub{
    margin:var(--x6) 0 var(--x3) !important; padding:0 !important;
    font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.16em; text-transform:uppercase; color:var(--muted) !important; line-height:1.6 !important;
}
/* two photos, square frames on the surface grey */
html[data-pdp-design="b"] .pdi-figs{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--x3);
    margin:var(--x5) 0 var(--x6) !important; padding:0;
}
html[data-pdp-design="b"] .pdi-figs img{
    width:100%; height:auto; aspect-ratio:1/1; object-fit:contain;
    background:var(--surface); border-radius:0;
}
/* square bullets instead of the green ✅ */
html[data-pdp-design="b"] .pdi-note ul.pdi-list{ list-style:none; margin:0 0 var(--x4) !important; padding:0 !important; }
html[data-pdp-design="b"] .pdi-note ul.pdi-list > li{
    position:relative; margin:0 0 var(--x3) !important; padding:0 0 0 var(--x4) !important;
    font-size:var(--t-lg) !important; line-height:1.6 !important; color:var(--ink2) !important;
}
html[data-pdp-design="b"] .pdi-note ul.pdi-list > li::before{
    content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--ink);
}
html[data-pdp-design="b"] .pdi-note ul.pdi-list ul{ list-style:none; margin:var(--x2) 0 0 !important; padding:0 !important; }
html[data-pdp-design="b"] .pdi-note ul.pdi-list ul li{
    position:relative; margin:0 0 var(--x2) !important; padding:0 0 0 var(--x4) !important;
    font-size:var(--t-base) !important; line-height:1.6 !important; color:var(--ink2) !important;
}
html[data-pdp-design="b"] .pdi-note ul.pdi-list ul li::before{
    content:""; position:absolute; left:0; top:.8em; width:8px; height:1px; background:var(--muted);
}
/* price breakdown: hairline rows, figures right, total above the ink rule */
html[data-pdp-design="b"] .pdi-price{ margin:0 0 var(--x4) !important; padding:0 !important; }
html[data-pdp-design="b"] .pdi-prow{
    display:flex; align-items:baseline; justify-content:space-between; gap:var(--x4);
    margin:0 !important; padding:10px 0 !important; border-bottom:1px solid var(--rule-soft);
}
html[data-pdp-design="b"] .pdi-prow dt{
    font-size:var(--t-base) !important; font-weight:400 !important; color:var(--ink2) !important; line-height:1.5 !important;
}
html[data-pdp-design="b"] .pdi-prow dd{
    margin:0 !important; white-space:nowrap;
    font-size:var(--t-base) !important; font-weight:400 !important; color:var(--ink) !important; line-height:1.5 !important;
}
html[data-pdp-design="b"] .pdi-prow dd span{ font-size:inherit !important; color:inherit !important; }
html[data-pdp-design="b"] .pdi-total{ border-bottom:0; border-top:1px solid var(--ink); }
html[data-pdp-design="b"] .pdi-total dt,
html[data-pdp-design="b"] .pdi-total dd,
html[data-pdp-design="b"] .pdi-total dd span{
    font-size:var(--t-lg) !important; font-weight:500 !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .pdi-note .pdi-fine{
    font-size:var(--t-md) !important; line-height:1.6 !important; color:var(--muted) !important; margin:0 0 var(--x2) !important;
}
@media (max-width:991px){
    html[data-pdp-design="b"] .pdi{ grid-template-columns:1fr; gap:var(--x4); padding-top:var(--x4); }
    html[data-pdp-design="b"] .pdi-figs{ gap:var(--x2); }
}

/* ======================================================================
   "Mes rekomenduojame" — one display case (pages/b/partials/recommended)
   Anchor pane states what you are viewing; the rest are the picks. The
   hairlines are the grid's own gaps showing through, so there are no
   double borders and no card edges.
   ====================================================================== */
html[data-pdp-design="b"] .rcb{ margin:var(--x7) 0; font-family:'Jost',sans-serif; }
html[data-pdp-design="b"] .rcb-label{
    margin:0 0 var(--x4) !important; padding:0 !important;
    font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.16em; text-transform:uppercase; color:var(--muted) !important; line-height:1.6 !important;
}
html[data-pdp-design="b"] .rcb-case{
    display:grid; grid-template-columns:1.1fr repeat(4, 1fr); grid-auto-rows:minmax(0, auto);
    /* hairlines, not rules: an ink frame made the case shout over the product */
    gap:1px; background:var(--rule-soft); border:1px solid var(--rule);
}
html[data-pdp-design="b"] .rcb-anchor,
html[data-pdp-design="b"] .rcb-item{ background:var(--paper); min-width:0; }
/* the picks live in .rcb-strip so a phone can scroll them; on a desktop the wrapper
   dissolves and they are grid items of the case again */
html[data-pdp-design="b"] .rcb-strip{ display:contents; }
html[data-pdp-design="b"] .rcb-strip > .rcb-item:nth-child(n+5){ display:none; }

/* --- the anchor: what you are looking at --------------------------------- */
html[data-pdp-design="b"] .rcb-anchor{
    /* just the plaque, filling its pane */
    display:flex; padding:var(--x4); text-decoration:none !important;
}
html[data-pdp-design="b"] .rcb-anchor-kicker{
    margin:0 0 var(--x4) !important; 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"] .rcb-anchor-plate{
    display:flex; align-items:center; justify-content:center; flex:1 1 auto;
    width:100%; min-height:132px; padding:var(--x4); background:var(--surface);
}
html[data-pdp-design="b"] .rcb-anchor-logo{ max-width:78%; max-height:104px; object-fit:contain; mix-blend-mode:multiply; }
html[data-pdp-design="b"] .rcb-anchor-shot{ max-width:72%; max-height:112px; object-fit:contain; mix-blend-mode:multiply; }
html[data-pdp-design="b"] .rcb-anchor-body{ display:flex; flex-direction:column; padding-top:var(--x4); }
html[data-pdp-design="b"] .rcb-anchor-brand{
    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"] .rcb-anchor-name{
    margin-top:2px; font-size:var(--t-lg) !important; font-weight:300 !important; line-height:1.3 !important;
    color:var(--ink) !important; overflow-wrap:anywhere;
}
html[data-pdp-design="b"] .rcb-anchor-price{
    margin-top:var(--x2); font-size:var(--t-base) !important; color:var(--ink) !important; font-variant-numeric:tabular-nums;
}
html[data-pdp-design="b"] .rcb-anchor-link{
    display:flex; align-items:center; justify-content:space-between; gap:var(--x3);
    margin-top:var(--x5); padding-top:var(--x3); border-top:1px solid var(--rule);
    font-size:var(--t-md) !important; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink) !important; text-decoration:none !important;
}
html[data-pdp-design="b"] .rcb-anchor-link:hover span:first-child{ text-decoration:underline; text-underline-offset:3px; }
html[data-pdp-design="b"] .rcb-anchor-count{ color:var(--muted) !important; font-variant-numeric:tabular-nums; }

/* --- the picks ----------------------------------------------------------- */
html[data-pdp-design="b"] .rcb-item{
    display:flex; flex-direction:column; padding:var(--x3);
    color:var(--ink) !important; text-decoration:none !important;
    transition:background-color .22s ease;
}
html[data-pdp-design="b"] .rcb-item:hover,
html[data-pdp-design="b"] .rcb-item:focus-visible{ background:var(--surface); outline:0; }
html[data-pdp-design="b"] .rcb-item-plate{
    position:relative; display:block; width:100%; flex:1 1 auto; min-height:118px; overflow:hidden;
}
html[data-pdp-design="b"] .rcb-item-plate img{
    position:absolute; inset:8%; width:84%; height:84%; object-fit:contain; mix-blend-mode:multiply;
}
html[data-pdp-design="b"] .rcb-item-body{ display:flex; flex-direction:column; flex:0 0 auto; padding-top:var(--x3); }
html[data-pdp-design="b"] .rcb-item-brand{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    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"] .rcb-item-name{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin-top:2px; min-height:calc(2 * 1.35em);
    font-size:var(--t-sm) !important; font-weight:400 !important; line-height:1.35 !important;
    color:var(--ink) !important; overflow-wrap:anywhere;
}
html[data-pdp-design="b"] .rcb-item-price{
    margin-top:2px; padding-top:var(--x1, 4px);
    font-size:var(--t-base) !important; font-weight:400 !important; color:var(--ink) !important;
    font-variant-numeric:tabular-nums;
}

/* "Panašūs kvapai": the notes a pick shares with this perfume (2026-09-23) */
html[data-pdp-design="b"] .rcb-item-notes{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin-top:var(--x1, 4px);
    font-size:var(--t-xs) !important; font-weight:500 !important; letter-spacing:.1em; line-height:1.4 !important;
    text-transform:uppercase; color:var(--muted) !important;
}

/* tablet: three picks per row, anchor across the top */
@media (max-width:1199px){
    html[data-pdp-design="b"] .rcb-case{ grid-template-columns:repeat(4, 1fr); }
    html[data-pdp-design="b"] .rcb-anchor{ grid-column:1 / -1; grid-row:auto; }
    html[data-pdp-design="b"] .rcb-anchor-kicker{ margin:0 !important; }
    html[data-pdp-design="b"] .rcb-anchor-plate{ min-height:96px; }
    html[data-pdp-design="b"] .rcb-anchor-body{ padding-top:0; flex:1 1 auto; }
    html[data-pdp-design="b"] .rcb-anchor-link{ margin:0; padding:0; border:0; flex:0 0 auto; }
}
/* phone: the anchor is a single line, the picks become a strip that moves on its own */
@media (max-width:767px){
    html[data-pdp-design="b"] .rcb-case{ grid-template-columns:1fr; }
    /* ten picks in one swipeable row instead of two stacked cards: the case stays
       one screen tall and the whole recommendation set stays reachable */
    html[data-pdp-design="b"] .rcb-strip{
        display:flex; grid-column:1 / -1; gap:1px; background:var(--rule-soft);
        /* overflow-y must be stated: with overflow-x:auto the other axis cannot stay
           "visible" and computes to auto, which left ~4px of vertical slop the finger
           could drag — the strip wobbled up and down during a sideways swipe */
        overflow-x:auto; overflow-y:hidden; overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory; scrollbar-width:none;
    }
    html[data-pdp-design="b"] .rcb-strip::-webkit-scrollbar{ display:none; }
    /* exactly two per screen — half the strip minus its share of the 1px hairline,
       so no third card peeks in and the strip advances a clean pair at a time */
    html[data-pdp-design="b"] .rcb-strip > .rcb-item,
    html[data-pdp-design="b"] .rcb-strip > .rcb-item:nth-child(n+5){
        display:flex; flex:0 0 calc(50% - 0.5px); scroll-snap-align:none;
    }
    /* the snap points are the pairs, not the single cards: with a snap point on every
       card a swipe could rest on an odd one and leave the card on the left cut in half.
       Only the odd cards (1st, 3rd, 5th…) are snap points, so the strip can only ever
       come to rest showing two whole cards. */
    html[data-pdp-design="b"] .rcb-strip > .rcb-item:nth-child(odd){
        scroll-snap-align:start; scroll-snap-stop:always;
    }
    /* smaller cards on a phone: two of them are a page, and a 231px card made the
       strip taller than the case it sits in */
    html[data-pdp-design="b"] .rcb-strip > .rcb-item{ padding:var(--x2); }
    html[data-pdp-design="b"] .rcb-strip .rcb-item-plate{ min-height:66px; }
    html[data-pdp-design="b"] .rcb-strip .rcb-item-body{ padding-top:var(--x2); }
    html[data-pdp-design="b"] .rcb-strip .rcb-item-brand{ font-size:10px !important; letter-spacing:.1em; }
    html[data-pdp-design="b"] .rcb-strip .rcb-item-name{
        font-size:11px !important; line-height:1.3 !important; min-height:calc(2 * 1.3em);
    }
    html[data-pdp-design="b"] .rcb-strip .rcb-item-price{ font-size:12px !important; padding-top:2px; }
    html[data-pdp-design="b"] .rcb-strip .rcb-item-notes{ font-size:9px !important; letter-spacing:.08em; }
    html[data-pdp-design="b"] .rcb-anchor{ padding:var(--x3); }
    html[data-pdp-design="b"] .rcb-anchor-kicker{ flex:0 0 100%; }
    html[data-pdp-design="b"] .rcb-anchor-plate{ min-height:84px; padding:var(--x3); }
    html[data-pdp-design="b"] .rcb-anchor-logo{ max-height:60px; }
}
@media (prefers-reduced-motion:reduce){
    html[data-pdp-design="b"] .rcb-item{ transition:none; }
}

/* --- the brand's shelf, folded into the case ----------------------------- */
html[data-pdp-design="b"] .rcb-brandband{
    grid-column:1 / -1; background:var(--paper); padding:var(--x4);
}
html[data-pdp-design="b"] .rcb-brandband-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:var(--x4);
    margin-bottom:var(--x3);
}
html[data-pdp-design="b"] .rcb-brandband-title{
    margin:0 !important; padding:0 !important;
    font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.16em; text-transform:uppercase; color:var(--muted) !important; line-height:1.6 !important;
}
html[data-pdp-design="b"] .rcb-brandband-link{
    display:inline-flex; align-items:center; gap:var(--x2); flex:0 0 auto;
    font-size:var(--t-md) !important; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink) !important; text-decoration:none !important;
}
html[data-pdp-design="b"] .rcb-brandband-link:hover span:first-child{ text-decoration:underline; text-underline-offset:3px; }
html[data-pdp-design="b"] .rcb-brandband-row{
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--x4);
}
html[data-pdp-design="b"] .rcb-mini{
    display:flex; align-items:center; gap:var(--x3); min-width:0;
    color:var(--ink) !important; text-decoration:none !important;
    padding:var(--x2); transition:background-color .22s ease;
}
html[data-pdp-design="b"] .rcb-mini:hover,
html[data-pdp-design="b"] .rcb-mini:focus-visible{ background:var(--surface); outline:0; }
html[data-pdp-design="b"] .rcb-mini-plate{
    position:relative; flex:0 0 56px; height:56px; background:var(--surface);
}
html[data-pdp-design="b"] .rcb-mini-plate img{
    position:absolute; inset:10%; width:80%; height:80%; object-fit:contain; mix-blend-mode:multiply;
}
html[data-pdp-design="b"] .rcb-mini-body{ display:flex; flex-direction:column; min-width:0; }
html[data-pdp-design="b"] .rcb-mini-name{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    font-size:var(--t-md) !important; line-height:1.35 !important; color:var(--ink) !important; overflow-wrap:anywhere;
}
html[data-pdp-design="b"] .rcb-mini-price{
    margin-top:2px; font-size:var(--t-md) !important; color:var(--muted) !important; font-variant-numeric:tabular-nums;
}
@media (max-width:1199px){
    html[data-pdp-design="b"] .rcb-brandband-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:767px){
    html[data-pdp-design="b"] .rcb-brandband{ padding:var(--x4); }
    /* two-up left each name ~62px of width — a 13px title clamped into that is unreadable,
       so on a phone these are full-width rows */
    html[data-pdp-design="b"] .rcb-brandband-row{ grid-template-columns:1fr; gap:var(--x1, 4px); }
    html[data-pdp-design="b"] .rcb-mini{ gap:var(--x4); padding:var(--x2) 0; }
    html[data-pdp-design="b"] .rcb-mini + .rcb-mini{ border-top:1px solid var(--rule-soft); }
    html[data-pdp-design="b"] .rcb-mini-plate{ flex:0 0 52px; height:52px; }
    html[data-pdp-design="b"] .rcb-mini-name{ font-size:var(--t-base) !important; line-height:1.35 !important; }
    html[data-pdp-design="b"] .rcb-mini-price{ font-size:var(--t-base) !important; }
}

/* --- A · ink as a plaque, not a whole pane -------------------------------
   A solid black column made the case read heavy; the ink is now only the
   plaque the brand is stamped on, and the pane is back on paper. */
html[data-pdp-design="b"] .rcb-anchor{ background:var(--paper) !important; color:var(--ink) !important; }
html[data-pdp-design="b"] .rcb-anchor:has(.rcb-anchor-logo) .rcb-anchor-plate{ background:var(--ink) !important; }
/* invert turns black marks white (and a white-ground logo black); screen then
   drops the black, so both kinds of logo file knock out cleanly */
html[data-pdp-design="b"] .rcb-anchor-logo{ filter:invert(1); mix-blend-mode:screen; }

/* --- C · the caption wipes to ink on hover -------------------------------
   Filling the whole pane was too dark and it killed the photo (multiply on
   black); the ink now wipes up through the caption only. */
html[data-pdp-design="b"] .rcb-item-body{
    position:relative;
    margin:0 calc(-1 * var(--x3)) calc(-1 * var(--x3));
    padding:var(--x3);
    background-image:linear-gradient(var(--ink), var(--ink));
    background-repeat:no-repeat; background-position:left bottom; background-size:100% 0;
    transition:background-size .3s cubic-bezier(.2,.7,.3,1);
}
html[data-pdp-design="b"] .rcb-item:hover .rcb-item-body,
html[data-pdp-design="b"] .rcb-item:focus-visible .rcb-item-body{ background-size:100% 100%; }
html[data-pdp-design="b"] .rcb-item:hover,
html[data-pdp-design="b"] .rcb-item:focus-visible{ background:var(--paper); outline:0; }
html[data-pdp-design="b"] .rcb-item:hover .rcb-item-brand,
html[data-pdp-design="b"] .rcb-item:focus-visible .rcb-item-brand,
html[data-pdp-design="b"] .rcb-item:hover .rcb-item-notes,
html[data-pdp-design="b"] .rcb-item:focus-visible .rcb-item-notes{ color:rgba(255,255,255,.55) !important; }
html[data-pdp-design="b"] .rcb-item:hover .rcb-item-name,
html[data-pdp-design="b"] .rcb-item:hover .rcb-item-price,
html[data-pdp-design="b"] .rcb-item:focus-visible .rcb-item-name,
html[data-pdp-design="b"] .rcb-item:focus-visible .rcb-item-price{ color:var(--paper) !important; }

/* the case rises into view with the rest of the page (pdp-designs.js RISE.b);
   each pane keeps its own stagger, so the row deals itself out left to right */
html[data-pdp-design="b"] .rcb-case > .pdpx-rise:not(.pdpx-in){ transform:translateY(16px); }

/* the plaque is always ink, and a brand without a logo is stamped in type */
html[data-pdp-design="b"] .rcb-anchor .rcb-anchor-plate{ background:var(--ink) !important; }
html[data-pdp-design="b"] .rcb-plaque-word{
    display:block; max-width:86%;
    font-family:'Jost',sans-serif; font-size:clamp(15px, 1.3vw, 21px); font-weight:500 !important;
    letter-spacing:.06em; text-transform:uppercase; line-height:1.15; text-align:center;
    color:var(--paper) !important; overflow-wrap:anywhere;
}

/* ======================================================================
   Closing dossier (pages/b/partials/pdp-dossier): product information,
   reviews and the promo banners in one frame — same cabinet language as
   the recommendation case that follows it.
   ====================================================================== */
html[data-pdp-design="b"] .ds{ margin:var(--x7) 0; font-family:'Jost',sans-serif; }
html[data-pdp-design="b"] .ds-case{
    display:grid; grid-template-columns:1fr 1.25fr 0.8fr;
    gap:1px; background:var(--rule-soft); border:1px solid var(--rule);
}
html[data-pdp-design="b"] .ds-col{ background:var(--paper); min-width:0; padding:var(--x5); }
html[data-pdp-design="b"] .ds-label{
    margin:0 0 var(--x4) !important; padding:0 !important;
    font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.16em; text-transform:uppercase; color:var(--muted) !important; line-height:1.6 !important;
}
html[data-pdp-design="b"] .ds-count{ margin-left:var(--x2); color:var(--ink) !important; font-variant-numeric:tabular-nums; }

/* information: the tag line, same treatment as before */
html[data-pdp-design="b"] .ds-tags{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
    gap:var(--x2) var(--x5) !important; margin:0 !important; padding:0 !important; border:0 !important;
}
html[data-pdp-design="b"] .ds-tags .hashtag-row{ display:contents !important; margin:0 !important; }
/* inline-block, not inline-flex: as a flex container the label is one anonymous
   item that cannot break, so "parfumuotas vanduo, EDP" was cut off mid-word
   instead of wrapping onto a second line */
html[data-pdp-design="b"] .ds-tags .hashtag-link,
html[data-pdp-design="b"] .ds-tags .hashtag-text,
html[data-pdp-design="b"] .ds-tags .hashtag-shade{
    display:inline-block; max-width:100%; padding:0 !important;
    font-family:'Jost',sans-serif !important; font-size:var(--t-md) !important; font-weight:400 !important;
    letter-spacing:.06em; text-transform:uppercase; overflow-wrap:anywhere;
    color:var(--ink2) !important; text-decoration:none !important; line-height:1.6 !important;
}
html[data-pdp-design="b"] .ds-tags .pdi-swatch{ margin-left:6px; vertical-align:middle; }
html[data-pdp-design="b"] .ds-tags .hashtag-link{
    color:var(--ink) !important; border-bottom:1px solid var(--rule); transition:border-color .2s ease;
}
html[data-pdp-design="b"] .ds-tags .hashtag-link:hover{ border-bottom-color:var(--ink); }
html[data-pdp-design="b"] .ds-tags .hashtag-text:empty{ display:none; }

/* reviews */
html[data-pdp-design="b"] .ds-score{
    display:flex; align-items:baseline; gap:var(--x3); margin:0 0 var(--x4) !important;
}
html[data-pdp-design="b"] .ds-score-n{
    font-size:var(--t-3xl) !important; font-weight:300 !important; line-height:1 !important;
    letter-spacing:-.02em; color:var(--ink) !important; font-variant-numeric:tabular-nums;
}
html[data-pdp-design="b"] .ds-stars i{ font-size:13px !important; color:var(--ink) !important; }
html[data-pdp-design="b"] .ds-stars i.non-filled{ color:var(--rule) !important; }
html[data-pdp-design="b"] .ds-empty{
    margin:0 0 var(--x5) !important; font-size:var(--t-lg) !important; font-weight:300 !important;
    line-height:1.5 !important; color:var(--ink2) !important;
}
html[data-pdp-design="b"] .ds-cta{
    display:inline-flex; align-items:center; gap:var(--x2);
    margin:0; padding:0 !important; border:0; background:none !important; cursor:pointer;
    font-family:'Jost',sans-serif !important; font-size:var(--t-md) !important; font-weight:500 !important;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink) !important;
    border-bottom:1px solid var(--rule); transition:border-color .2s ease;
}
html[data-pdp-design="b"] .ds-cta:hover{ border-bottom-color:var(--ink); }
html[data-pdp-design="b"] .ds-list{ margin:0 0 var(--x5); }
html[data-pdp-design="b"] .ds-list .reviews{ list-style:none; margin:0; padding:0; }
html[data-pdp-design="b"] .ds-list .reviews > li{
    margin:0 !important; padding:var(--x4) 0 !important; border-top:1px solid var(--rule-soft);
}

/* banners: framed panes instead of a bare column */
html[data-pdp-design="b"] .ds-promo{ display:flex; flex-direction:column; gap:var(--x3); }
html[data-pdp-design="b"] .ds-promo-item{ display:block; overflow:hidden; background:var(--surface); }
html[data-pdp-design="b"] .ds-promo-item img{ display:block; width:100%; height:auto; }

/* the atomizer note spans the foot of the case */
html[data-pdp-design="b"] .ds-case .pdi-note{
    grid-column:1 / -1; background:var(--paper);
    margin:0 !important; padding:var(--x5) !important; border-top:0;
}
/* the note covers its whole track (otherwise the case's hairline grey shows beside
   it) and holds its content in two columns: copy and photos left, price right */
html[data-pdp-design="b"] .ds-case .pdi-note{ max-width:none !important; width:100%; }
html[data-pdp-design="b"] .pdi-note-inner{ max-width:1100px; }
/* the whole note is a disclosure: collapsed it is just its title and a square
   + / – marker, so the dossier keeps one line for it instead of two screens */
html[data-pdp-design="b"] .pdi-note-sum{
    display:flex; align-items:center; gap:var(--x3);
    list-style:none; cursor:pointer; padding:0;
}
html[data-pdp-design="b"] .pdi-note-sum::-webkit-details-marker{ display:none; }
html[data-pdp-design="b"] .pdi-note-sum .pdi-note-title{ margin:0 !important; }
html[data-pdp-design="b"] .pdi-note-ind{
    position:relative; flex:0 0 auto; width:20px; height:20px;
    border:1px solid var(--rule); transition:border-color .18s ease, background-color .18s ease;
}
html[data-pdp-design="b"] .pdi-note-ind::before,
html[data-pdp-design="b"] .pdi-note-ind::after{
    content:""; position:absolute; left:50%; top:50%; background:var(--ink);
    transform:translate(-50%,-50%); transition:transform .18s ease, opacity .18s ease;
}
html[data-pdp-design="b"] .pdi-note-ind::before{ width:9px; height:1px; }
html[data-pdp-design="b"] .pdi-note-ind::after{ width:1px; height:9px; }
/* open: the upright stroke folds away, leaving a minus */
html[data-pdp-design="b"] .pdi-note-d[open] .pdi-note-ind::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
html[data-pdp-design="b"] .pdi-note-sum:hover .pdi-note-ind{ border-color:var(--ink); }
html[data-pdp-design="b"] .pdi-note-sum:hover .pdi-note-title{ color:var(--ink) !important; }
html[data-pdp-design="b"] .pdi-note-sum:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
/* the body only gets its spacing once it is open */
html[data-pdp-design="b"] .pdi-note-d[open] > .pdi-note-grid{ margin-top:var(--x5); }
@media (prefers-reduced-motion:reduce){
html[data-pdp-design="b"] .pdi-note-ind,
html[data-pdp-design="b"] .pdi-note-ind::before,
html[data-pdp-design="b"] .pdi-note-ind::after{ transition:none; }
}
html[data-pdp-design="b"] .pdi-note-grid{
    display:grid; grid-template-columns:1.1fr 1fr; gap:var(--x5) var(--x7); align-items:start;
}
html[data-pdp-design="b"] .ds-case .pdi-figs{
    grid-template-columns:repeat(2, 120px); gap:var(--x3);
    margin:var(--x4) 0 0 !important;
}
html[data-pdp-design="b"] .ds-case .pdi-figs img{ aspect-ratio:1 / 1; max-height:120px; }
html[data-pdp-design="b"] .pdi-note-side .pdi-sub{ margin-top:0 !important; }

/* the long copy opens on request */
html[data-pdp-design="b"] .pdi-more{ margin-top:var(--x5); border-top:1px solid var(--rule-soft); }
html[data-pdp-design="b"] .pdi-more > summary{
    list-style:none; cursor:pointer; padding:var(--x3) 0 0;
    font-size:var(--t-md) !important; font-weight:500 !important;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink) !important;
}
html[data-pdp-design="b"] .pdi-more > summary::-webkit-details-marker{ display:none; }
html[data-pdp-design="b"] .pdi-more > summary::after{ content:" +"; color:var(--muted); }
html[data-pdp-design="b"] .pdi-more[open] > summary::after{ content:" –"; }
html[data-pdp-design="b"] .pdi-more-body{ max-width:70ch; padding-top:var(--x4); }
@media (max-width:991px){
    html[data-pdp-design="b"] .pdi-note-grid{ grid-template-columns:1fr; gap:var(--x5); }
    html[data-pdp-design="b"] .ds-case .pdi-figs{ grid-template-columns:repeat(2, minmax(0, 132px)); }
}
@media (max-width:1199px){
    html[data-pdp-design="b"] .ds-case{ grid-template-columns:1fr 1fr; }
    html[data-pdp-design="b"] .ds-promo{ grid-column:1 / -1; flex-direction:row; }
    html[data-pdp-design="b"] .ds-promo-item{ flex:1 1 0; }
}
@media (max-width:767px){
    html[data-pdp-design="b"] .ds-case{ grid-template-columns:1fr; }
    /* the facts line is a caption, not body copy: 13px uppercase with 24px gaps
       ran a single value past the column */
    html[data-pdp-design="b"] .ds-tags{ gap:var(--x1, 4px) var(--x4) !important; }
    html[data-pdp-design="b"] .ds-tags .hashtag-link,
    html[data-pdp-design="b"] .ds-tags .hashtag-text,
    html[data-pdp-design="b"] .ds-tags .hashtag-shade{
        font-size:var(--t-xs) !important; letter-spacing:.04em; line-height:1.5 !important;
    }
    html[data-pdp-design="b"] .ds-col{ padding:var(--x4); }
    html[data-pdp-design="b"] .ds-case .pdi-note{ padding:var(--x4) !important; }
}

/* "Neseniai žiūrėtos prekės": the same cabinet, without an anchor pane.
   The strip holds 1–6 items, so the hairlines are drawn on the panes rather
   than by the grid's gaps — otherwise the unused tracks show as grey blocks. */
html[data-pdp-design="b"] .rv-case{
    grid-template-columns:repeat(6, 1fr); gap:0; background:var(--paper);
}
html[data-pdp-design="b"] .rv-case .rcb-item + .rcb-item{ border-left:1px solid var(--rule-soft); }
@media (max-width:1199px){ html[data-pdp-design="b"] .rv-case{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width:767px){
    /* recently viewed becomes a swipeable strip on a phone: the whole history stays
       reachable instead of two items in a grid with the rest hidden */
    html[data-pdp-design="b"] .rv-case{
        display:flex; grid-template-columns:none;
        overflow-x:auto; overflow-y:hidden; overscroll-behavior:contain;
        scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    html[data-pdp-design="b"] .rv-case::-webkit-scrollbar{ display:none; }
    html[data-pdp-design="b"] .rv-case .rcb-item{
        display:flex !important; flex:0 0 62%; scroll-snap-align:start;
    }
}

/* Every block below the product now carries its own frame (dossier, case, strip),
   so the page's rules between them are doubled lines — and two of the three sit
   around markup B does not render at all. */
html[data-pdp-design="b"] #wsus__product_details .fluid-divider{ display:none !important; }

/* ======================================================================
   Wishlist state on the product page
   Production marks the saved state with a red fill (#dc3545) on the desktop
   <li> only, so the phone control showed no change at all. In B the feedback
   is the heart itself: outline → filled ink, on both controls.
   ====================================================================== */
html[data-pdp-design="b"] .wishlist_button.wishlist-active{
    background:var(--paper) !important; border-color:var(--ink) !important;
}
html[data-pdp-design="b"] .wishlist_button.wishlist-active a,
html[data-pdp-design="b"] .wishlist-heart-filled{ color:var(--ink) !important; }
/* swap the outline glyph for the filled one (font.css: heart \e905, heart-o \e904) */
html[data-pdp-design="b"] i.wishlist-heart-filled.icon-heart-o::before{ content:"\e905"; }
html[data-pdp-design="b"] :is(.add_to_wishlist, .pdp-wish) i{ transition:transform .18s cubic-bezier(.2,.7,.3,1); }
html[data-pdp-design="b"] .pdp-wish[aria-busy="true"]{ pointer-events:none; opacity:.6; }
html[data-pdp-design="b"] .wishlist-active i.wishlist-heart-filled{ transform:scale(1.12); }

/* the phone control: a bordered row that inks up once the product is saved */
html[data-pdp-design="b"] .wishlistMobileBtn{
    gap:var(--x2); min-height:48px; margin-top:var(--x3);
    border:1px solid var(--rule); background:var(--paper);
    color:var(--ink) !important; text-decoration:none !important;
    font-family:'Jost',sans-serif; font-size:var(--t-md) !important; font-weight:500 !important;
    letter-spacing:.12em; text-transform:uppercase;
    transition:border-color .2s ease, background-color .2s ease;
}
html[data-pdp-design="b"] .wishlistMobileBtn i{ font-size:16px; }
html[data-pdp-design="b"] .wishlistMobileBtn.wishlist-active{
    border-color:var(--ink); background:var(--surface);
}

/* on a phone the shipping block moves to the foot of the dossier, under the banners */
@media (max-width:767px){
    html[data-pdp-design="b"] .ds-case > .shipping-discount-container{
        grid-column:1 / -1; background:var(--paper); margin:0 !important; padding:var(--x4) !important;
    }
}

/* shade tiles on a phone: the type. It lives here, at the end, because §24's
   polish block sets .pdpx-sn/.pdpx-sp with !important at the same specificity —
   a media query adds none, so the last rule is the one that wins. */
@media (max-width:767px){
html[data-pdp-design="b"] #pdpx-picker .pdpx-shade .pdpx-sn{
        font-size:10px !important; line-height:1.2 !important; padding:5px 5px 0 !important;
    }
html[data-pdp-design="b"] #pdpx-picker .pdpx-shade .pdpx-sp{
        font-size:10px !important; line-height:1.2 !important; padding:1px 5px 5px !important;
    }
}


/* ---- QA 2026-09-21 ---- */
/* low stock: ink text, square ink dot (was orange/red, round) */
html[data-pdp-design="b"] #rkUrgency{ color:var(--ink) !important; }
html[data-pdp-design="b"] #rkUrgency .rk-udot{ border-radius:0 !important; background:var(--ink) !important; width:6px !important; height:6px !important; margin-right:var(--x2); vertical-align:middle; }
/* reviews: Jost everywhere, gap between the stars and the review count */
html[data-pdp-design="b"] :is(.review-item-author,.review-item-text,.review-item-date){ font-family:'Jost',sans-serif !important; }
html[data-pdp-design="b"] .review-item-date{ color:var(--muted) !important; }
html[data-pdp-design="b"] .wsus__pro_rating .prodMainRating{ margin-left:var(--x2) !important; }
/* tablet: the crumb column kept Bootstrap's 12px on 768–1199 and sat off the gutter */
html[data-pdp-design="b"] .breadcrumbs_section .crumbsCol{ padding-left:0 !important; padding-right:0 !important; }
/* gallery keyboard focus: thumbnails and the big photo are focusable buttons now */
html[data-pdp-design="b"] .gallery-container .thumbnail-item:focus-visible,
html[data-pdp-design="b"] .gallery-container .main-image-container:focus-visible{ outline:2px solid var(--ink) !important; outline-offset:-2px; }
/* "Atsiliepimai: N" was #888 (3.5:1) — the design's muted grey passes (4.9:1) */
html[data-pdp-design="b"] .wsus__pro_rating .prodMainRating,
html[data-pdp-design="b"] .wsus__pro_rating .prodMainRating span{ color:var(--muted) !important; }
html[data-pdp-design="b"] .wsus__pro_rating .prodMainRating:hover span{ color:var(--ink) !important; }

/* phone tag block (2026-09-21): brand, categories and facts ran together as one dense wrap of
   12px caps with 4px between lines. Each row is its own group again, with air between the
   rows and between the tags; links get a taller tap area. */
@media (max-width:767px){
    html[data-pdp-design="b"] .ds-tags{ flex-direction:column !important; flex-wrap:nowrap !important; gap:var(--x4) !important; }
    html[data-pdp-design="b"] .ds-tags .hashtag-row{
        display:flex !important; flex-wrap:wrap; align-items:baseline; gap:var(--x2) var(--x4);
    }
    html[data-pdp-design="b"] .ds-tags .hashtag-row:empty{ display:none !important; }
    html[data-pdp-design="b"] .ds-tags .hashtag-row + .hashtag-row{ padding-top:var(--x4) !important; border-top:1px solid var(--rule); }
    html[data-pdp-design="b"] .ds-tags .hashtag-link,
    html[data-pdp-design="b"] .ds-tags .hashtag-text,
    html[data-pdp-design="b"] .ds-tags .hashtag-shade{
        font-size:12px !important; letter-spacing:.06em; line-height:1.6 !important;
    }
    html[data-pdp-design="b"] .ds-tags .hashtag-link{ padding:3px 0 !important; }
    /* the facts row is plain text: sentence case reads easier than a block of caps */
    html[data-pdp-design="b"] .ds-tags .hashtag-text{ text-transform:none; letter-spacing:.01em; font-size:13px !important; color:var(--muted) !important; }
}

/* out-of-stock sticky bar: "Informuoti kai atsiras" in the same black full-width button */
html[data-pdp-design="b"] .mobile-sticky-cart .notify_button{
    height:var(--ctl-mob) !important; width:100% !important; max-width:none !important;
    margin:0 !important; padding:0 var(--x3) !important; border-radius:0 !important; border:0 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    gap:var(--x2); background:var(--ink) !important; color:var(--paper) !important;
    font-family:'Jost',sans-serif !important; font-size:var(--t-base) !important; font-weight:600 !important;
    letter-spacing:.06em !important; text-transform:uppercase !important;
}
html[data-pdp-design="b"] .mobile-sticky-cart .notify_button i{ color:inherit !important; font-size:16px !important; }

/* =====================================================================
   alx- · "inspired by" + "cheaper alternatives" (pages/b/partials/pdp-alternatives, 2026-09-28)
   Eyebrow label → hairline-topped block. Inspired-by = one row card; alternatives = cards in a grid
   that fits its column (3 across in the desktop column), a swipe row on a phone.
   ===================================================================== */
html[data-pdp-design="b"] .alx{ margin-top:var(--x5); padding-top:var(--x4); border-top:1px solid var(--rule); width:100%; }
html[data-pdp-design="b"] .alx-label{
    margin:0 0 var(--x3) !important; font-family:'Jost',sans-serif !important; font-size:var(--t-xs) !important;
    font-weight:500 !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--muted) !important;
}
html[data-pdp-design="b"] .alx a{ text-decoration:none !important; color:var(--ink) !important; }
html[data-pdp-design="b"] .alx-plate{
    display:block; position:relative; width:100%; aspect-ratio:1/1; background:var(--surface); overflow:hidden;
}
html[data-pdp-design="b"] .alx-plate img{
    position:absolute; inset:10%; width:80%; height:80%; object-fit:contain; mix-blend-mode:multiply;
    transition:transform .4s ease;
}
html[data-pdp-design="b"] .alx-card:hover .alx-plate img,
html[data-pdp-design="b"] .alx-row:hover .alx-plate img{ transform:scale(1.04); }
html[data-pdp-design="b"] .alx-brand{
    display:block; font-family:'Jost',sans-serif !important; font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--muted) !important; line-height:1.3;
}
html[data-pdp-design="b"] .alx-name{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    font-family:'Jost',sans-serif !important; font-size:var(--t-base) !important; font-weight:400 !important;
    color:var(--ink) !important; line-height:1.3;
}
html[data-pdp-design="b"] .alx-price{
    display:block; font-family:'Jost',sans-serif !important; font-size:var(--t-base) !important; font-weight:500 !important;
    color:var(--ink) !important;
}

/* inspired by — one row */
html[data-pdp-design="b"] .alx-row{
    display:flex; align-items:center; gap:var(--x4); padding:var(--x3) 0;
}
html[data-pdp-design="b"] .alx-plate--sm{ width:72px; min-width:72px; }
html[data-pdp-design="b"] .alx-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
html[data-pdp-design="b"] .alx-arrow{ flex:0 0 auto; color:var(--muted); transition:color .2s ease, transform .2s ease; }
html[data-pdp-design="b"] .alx-row:hover .alx-arrow{ color:var(--ink); transform:translateX(3px); }

/* cheaper alternatives — cards */
html[data-pdp-design="b"] .alx-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:var(--x5) var(--x4);
}
html[data-pdp-design="b"] .alx-card{ display:flex; flex-direction:column; gap:var(--x1); min-width:0; }
html[data-pdp-design="b"] .alx-card .alx-plate{ margin-bottom:var(--x2); }
html[data-pdp-design="b"] .alx-card .alx-price{ margin-top:auto; padding-top:var(--x1); }
html[data-pdp-design="b"] .alx a:focus-visible{ outline:2px solid var(--ink) !important; outline-offset:2px; }

/* phone: a swipe row, the next card peeking in */
@media (max-width: 575.98px){
    html[data-pdp-design="b"] .alx-grid{
        display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:var(--x3);
        margin:0 calc(-1 * var(--x4)); padding:0 var(--x4) var(--x2); scrollbar-width:none;
    }
    html[data-pdp-design="b"] .alx-grid::-webkit-scrollbar{ display:none; }
    html[data-pdp-design="b"] .alx-card{ flex:0 0 42%; scroll-snap-align:start; }
}
@media (prefers-reduced-motion: reduce){
    html[data-pdp-design="b"] .alx-plate img, html[data-pdp-design="b"] .alx-arrow{ transition:none; }
}