/* ==========================================================================
   WOW24 — remaining pages in design B · Vitrina
     1. shared frame          fs-page, er-page, bg-page, tr-page
     2. išpardavimas          frontend/pages/b/flash-sale.blade.php        fs-*
     3. error pages           errors/b/*.blade.php                         er-*
     4. blog                  frontend/pages/b/blog(-detail).blade.php     bg-*
     5. order tracking        frontend/pages/b/product-track.blade.php     tr-*
   Tokens: site-designs.css (--x1..x8, --t-*, --ink … --paper).
   Production traps handled locally: span{color:#000;font-size:16px},
   i{font-family:Wow24}, li{padding:0}, a{color:…} — every text element here
   sets its own size and colour.
   ========================================================================== */

/* ============================================ 1. shared frame */
html[data-pdp-design="b"] :is(.fs-section,.er-section,.bg-section,.tr-section){
    width:100%; align-self:stretch; margin:0 !important; padding:0 !important; background:var(--paper);
}
html[data-pdp-design="b"] :is(.fs-page,.er-page,.bg-page,.tr-page){
    width:100%; max-width:1440px; margin:0 auto; padding:var(--x5) var(--x6) 120px; box-sizing:border-box;
    font-family:'Jost',sans-serif; color:var(--ink);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
html[data-pdp-design="b"] :is(.fs-page,.er-page,.bg-page,.tr-page) *,
html[data-pdp-design="b"] :is(.fs-page,.er-page,.bg-page,.tr-page) *::before,
html[data-pdp-design="b"] :is(.fs-page,.er-page,.bg-page,.tr-page) *::after{ box-sizing:border-box; border-radius:0 !important; }
html[data-pdp-design="b"] :is(.fs-page,.er-page,.bg-page,.tr-page) :is(h1,h2,h3,p,a,span,li,label,button,input,select,small,b,strong,s,dt,dd,time){
    font-family:'Jost',sans-serif;
}
/* the shared breadcrumb partial carries bootstrap row/col padding */
html[data-pdp-design="b"] :is(.fs-crumbs,.bg-crumbs,.tr-crumbs) .breadcrumbs_section{ margin:0; padding:0; }
html[data-pdp-design="b"] :is(.fs-crumbs,.bg-crumbs,.tr-crumbs) .row{ margin:0 !important; }
html[data-pdp-design="b"] :is(.fs-crumbs,.bg-crumbs,.tr-crumbs) .crumbsCol{ padding:0 !important; flex:0 0 100%; max-width:100%; }
html[data-pdp-design="b"] :is(.fs-crumbs,.bg-crumbs,.tr-crumbs) ul{ margin:0 !important; }

/* one title scale for these pages, the listing's */
html[data-pdp-design="b"] :is(.fs-page,.bg-page,.tr-page,.er-page) :is(.fs-title,.bg-title,.tr-title){
    margin:0 !important; padding:0 !important;
    font-size:clamp(30px, 1.4vw + 20px, 48px) !important; font-weight:200 !important; line-height:1.04 !important;
    letter-spacing:-.025em; text-transform:none !important; color:var(--ink) !important; text-wrap:balance;
}
html[data-pdp-design="b"] :is(.fs-page,.bg-page,.tr-page,.er-page) :is(.fs-eyebrow,.bg-eyebrow,.tr-eyebrow,.er-eyebrow){
    margin:0 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.4 !important;
}

/* ============================================ 2. išpardavimas */
html[data-pdp-design="b"] .fs-head{
    display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--x5) var(--x7);
    margin-top:var(--x6); padding-bottom:var(--x6); border-bottom:1px solid var(--ink);
}
html[data-pdp-design="b"] .fs-page .fs-count{
    margin:var(--x3) 0 0 !important; font-size:var(--t-md) !important; letter-spacing:.04em; color:var(--muted) !important;
    font-variant-numeric:tabular-nums;
}
/* countdown: four hairline cells, tabular figures so the row never twitches */
html[data-pdp-design="b"] .fs-page .fs-clock-cap{
    margin:0 0 var(--x2) !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"] .fs-clock-row{
    display:grid; grid-template-columns:repeat(4, 72px); gap:1px; background:var(--rule); border:1px solid var(--rule);
}
html[data-pdp-design="b"] .fs-clock-cell{ display:flex; flex-direction:column; align-items:center; padding:var(--x3) 0 var(--x2); background:var(--paper); }
html[data-pdp-design="b"] .fs-page .fs-clock-cell b{
    font-size:28px !important; font-weight:300 !important; line-height:1 !important; color:var(--ink) !important;
    font-variant-numeric:tabular-nums;
}
html[data-pdp-design="b"] .fs-page .fs-clock-cell small{
    margin-top:6px; font-size:10px !important; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) !important;
}

/* toolbar: brand chips left, sort right */
html[data-pdp-design="b"] .fs-bar{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--x4) var(--x6);
    padding:var(--x5) 0;
}
html[data-pdp-design="b"] .fs-chips{ display:flex; flex-wrap:wrap; gap:var(--x2); min-width:0; }
html[data-pdp-design="b"] .fs-page .fs-chip{
    display:inline-flex; align-items:center; gap:var(--x2); min-height:34px; padding:0 var(--x3);
    border:1px solid var(--rule); background:var(--paper); text-decoration:none !important;
    transition:border-color .15s ease, background-color .15s ease;
}
html[data-pdp-design="b"] .fs-page .fs-chip span{ font-size:var(--t-sm) !important; letter-spacing:.04em; color:var(--ink) !important; }
html[data-pdp-design="b"] .fs-page .fs-chip small{ font-size:var(--t-xs) !important; color:var(--muted) !important; font-variant-numeric:tabular-nums; }
html[data-pdp-design="b"] .fs-page .fs-chip:hover{ border-color:var(--ink); }
html[data-pdp-design="b"] .fs-page .fs-chip.is-on{ background:var(--ink); border-color:var(--ink); }
html[data-pdp-design="b"] .fs-page .fs-chip.is-on :is(span,small){ color:var(--paper) !important; }
html[data-pdp-design="b"] .fs-sort{ display:flex; align-items:center; gap:var(--x3); margin:0 0 0 auto; }
html[data-pdp-design="b"] .fs-page .fs-sort-l{
    margin:0; font-size:var(--t-xs) !important; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) !important;
}
html[data-pdp-design="b"] .fs-page .fs-sort select{
    height:40px; padding:0 34px 0 var(--x3); border:1px solid var(--rule); background:var(--paper);
    font-size:var(--t-base) !important; color:var(--ink); cursor:pointer;
    -webkit-appearance:none; appearance:none;
    background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position:calc(100% - 17px) 17px, calc(100% - 12px) 17px; background-size:5px 5px; background-repeat:no-repeat;
}
html[data-pdp-design="b"] .fs-page .fs-sort select:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* grid: hairlines are the grid's own gaps, the same cabinet as the product page */
html[data-pdp-design="b"] .fs-grid{
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;
    background:var(--rule-soft); border:1px solid var(--rule-soft);
}
html[data-pdp-design="b"] .fs-page .fs-card{
    position:relative; display:flex; flex-direction:column; min-width:0; padding:var(--x4);
    background:var(--paper); color:var(--ink) !important; text-decoration:none !important;
    transition:background-color .2s ease;
}
html[data-pdp-design="b"] .fs-page .fs-card:hover{ background:var(--surface); }
html[data-pdp-design="b"] .fs-page .fs-card:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
html[data-pdp-design="b"] .fs-card-plate{ position:relative; display:block; aspect-ratio:1 / 1; overflow:hidden; }
html[data-pdp-design="b"] .fs-card-plate img{
    position:absolute; inset:6%; width:88%; height:88%; object-fit:contain; mix-blend-mode:multiply;
    transition:transform .35s ease;
}
html[data-pdp-design="b"] .fs-page .fs-card:hover .fs-card-plate img{ transform:scale(1.04); }
/* the discount as a stamped plate, ink on paper's opposite */
html[data-pdp-design="b"] .fs-page .fs-card-off{
    position:absolute; top:0; left:0; padding:4px 8px; background:var(--ink);
    font-size:var(--t-sm) !important; font-weight:500 !important; letter-spacing:.04em; line-height:1.3 !important;
    color:var(--paper) !important; font-variant-numeric:tabular-nums;
}
html[data-pdp-design="b"] .fs-card-body{ display:flex; flex-direction:column; flex:1 1 auto; padding-top:var(--x4); }
html[data-pdp-design="b"] .fs-page .fs-card-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;
    line-height:1.4 !important; color:var(--muted) !important;
}
html[data-pdp-design="b"] .fs-page .fs-card-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-md) !important; font-weight:400 !important; line-height:1.35 !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .fs-card-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--x2); margin-top:auto; padding-top:var(--x2); }
html[data-pdp-design="b"] .fs-page .fs-now{
    font-size:var(--t-lg) !important; font-weight:500 !important; color:var(--ink) !important; font-variant-numeric:tabular-nums;
}
html[data-pdp-design="b"] .fs-page .fs-was{
    font-size:var(--t-sm) !important; color:var(--muted) !important; font-variant-numeric:tabular-nums;
}

html[data-pdp-design="b"] .fs-more{ display:flex; flex-direction:column; align-items:center; gap:var(--x2); margin-top:var(--x7); }
html[data-pdp-design="b"] .fs-page .fs-more-btn{
    display:inline-flex; align-items:center; justify-content:center; min-width:240px; height:48px; padding:0 var(--x6);
    border:1px solid var(--ink); background:var(--paper); color:var(--ink) !important; text-decoration:none !important;
    font-size:var(--t-md) !important; font-weight:500 !important; letter-spacing:.12em; text-transform:uppercase;
    transition:background-color .2s ease, color .2s ease;
}
html[data-pdp-design="b"] .fs-page .fs-more-btn:hover{ background:var(--ink); color:var(--paper) !important; }
html[data-pdp-design="b"] .fs-page .fs-more-btn[aria-busy="true"]{ opacity:.5; pointer-events:none; }
html[data-pdp-design="b"] .fs-page .fs-more-note{ margin:0 !important; font-size:var(--t-sm) !important; color:var(--muted) !important; font-variant-numeric:tabular-nums; }
html[data-pdp-design="b"] .fs-page .fs-more-note span{ font-size:inherit !important; color:var(--ink) !important; }

/* empty: a statement and somewhere to go, not a blank page */
html[data-pdp-design="b"] .fs-empty{ max-width:640px; padding:var(--x8) 0 var(--x5); }
html[data-pdp-design="b"] .fs-page .fs-empty-t{
    margin:0 0 var(--x3) !important; font-size:var(--t-2xl) !important; font-weight:300 !important; line-height:1.2 !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .fs-page .fs-empty-s{ margin:0 !important; font-size:var(--t-lg) !important; line-height:1.6 !important; color:var(--ink2) !important; }

/* a list of "go here" links, shared by the sale and error pages */
html[data-pdp-design="b"] :is(.fs-empty-links,.er-links){
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 var(--x6); margin-top:var(--x6);
    border-top:1px solid var(--rule);
}
html[data-pdp-design="b"] :is(.fs-page,.er-page) :is(.fs-empty-links,.er-links) a{
    display:flex; align-items:center; justify-content:space-between; min-height:52px;
    border-bottom:1px solid var(--rule); text-decoration:none !important;
    font-size:var(--t-lg) !important; color:var(--ink) !important; transition:padding-left .2s ease;
}
html[data-pdp-design="b"] :is(.fs-page,.er-page) :is(.fs-empty-links,.er-links) a span{
    font-size:var(--t-lg) !important; color:var(--muted) !important; transition:transform .2s ease, color .2s ease;
}
html[data-pdp-design="b"] :is(.fs-page,.er-page) :is(.fs-empty-links,.er-links) a:hover span{ color:var(--ink) !important; transform:translateX(4px); }

/* ============================================ 3. error pages (404, 410, product unavailable)
   The code is the page's one big gesture — thin numerals at display size; the
   rest is a way out: search, categories, home. */
html[data-pdp-design="b"] .er-grid{
    display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--x7) var(--x8);
    align-items:start; padding:var(--x8) 0 var(--x5);
}
html[data-pdp-design="b"] .er-page .er-code{
    margin:0 0 var(--x4) !important; padding:0 !important;
    font-size:clamp(96px, 12vw, 200px) !important; font-weight:100 !important; line-height:.82 !important;
    letter-spacing:-.05em; color:var(--ink) !important; font-variant-numeric:tabular-nums;
}
html[data-pdp-design="b"] .er-page .er-title{
    margin:0 !important; padding:0 !important; max-width:18ch;
    font-size:clamp(28px, 1.2vw + 20px, 42px) !important; font-weight:300 !important; line-height:1.1 !important;
    letter-spacing:-.02em; text-transform:none !important; color:var(--ink) !important; overflow-wrap:anywhere;
}
html[data-pdp-design="b"] .er-page .er-text{
    margin:var(--x4) 0 0 !important; max-width:52ch;
    font-size:var(--t-lg) !important; line-height:1.6 !important; color:var(--ink2) !important;
}
html[data-pdp-design="b"] .er-search{ margin-top:var(--x6); max-width:560px; }
html[data-pdp-design="b"] .er-page .er-search-l{
    display:block; margin:0 0 var(--x2); font-size:var(--t-xs) !important; font-weight:500; letter-spacing:.16em;
    text-transform:uppercase; color:var(--muted) !important;
}
html[data-pdp-design="b"] .er-search-row{ display:flex; }
html[data-pdp-design="b"] .er-page .er-search input{
    flex:1 1 auto; min-width:0; height:52px; padding:0 var(--x4); border:1px solid var(--ink); border-right:0;
    background:var(--paper); font-size:16px !important; color:var(--ink); outline:0;
}
html[data-pdp-design="b"] .er-page .er-search input::placeholder{ color:var(--muted); }
html[data-pdp-design="b"] .er-page .er-search button{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:var(--x2); height:52px; padding:0 var(--x5);
    border:1px solid var(--ink); background:var(--ink); color:var(--paper) !important; cursor:pointer;
    font-size:var(--t-md) !important; font-weight:500 !important; letter-spacing:.12em; text-transform:uppercase;
}
html[data-pdp-design="b"] .er-page .er-search button span{ font-size:inherit !important; color:inherit !important; }
html[data-pdp-design="b"] .er-page .er-search :is(input,button):focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
html[data-pdp-design="b"] .er-page .er-home{
    display:inline-block; margin-top:var(--x5); padding-bottom:2px; border-bottom:1px solid var(--rule);
    font-size:var(--t-md) !important; font-weight:500 !important; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink) !important; text-decoration:none !important; transition:border-color .2s ease;
}
html[data-pdp-design="b"] .er-page .er-home:hover{ border-bottom-color:var(--ink); }
html[data-pdp-design="b"] .er-side{ padding-top:var(--x3); }
html[data-pdp-design="b"] .er-side .er-links{ grid-template-columns:1fr; margin-top:0; }

/* ============================================ 4. blog
   An editorial page, not a product grid: photographs at a steady 3:2, type does
   the rest. The article is one reading column (68ch); the pasted Word HTML in
   the body is normalised by .bg-prose. */
html[data-pdp-design="b"] .bg-head{ margin-top:var(--x6); }
html[data-pdp-design="b"] .bg-tabs{
    display:flex; flex-wrap:wrap; gap:0 var(--x5); margin-top:var(--x6); border-bottom:1px solid var(--rule);
}
html[data-pdp-design="b"] .bg-page .bg-tabs a{
    display:inline-flex; align-items:center; min-height:44px; margin-bottom:-1px; border-bottom:1px solid transparent;
    font-size:var(--t-md) !important; font-weight:500 !important; letter-spacing:.12em; text-transform:uppercase;
    color:var(--muted) !important; text-decoration:none !important; transition:color .15s ease, border-color .15s ease;
}
html[data-pdp-design="b"] .bg-page .bg-tabs a:hover{ color:var(--ink) !important; }
html[data-pdp-design="b"] .bg-page .bg-tabs a.is-on{ color:var(--ink) !important; border-bottom-color:var(--ink); }

html[data-pdp-design="b"] .bg-page .bg-meta{
    margin:0 !important; font-size:var(--t-xs) !important; font-weight:500 !important; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted) !important; line-height:1.5 !important;
}
html[data-pdp-design="b"] .bg-page .bg-meta :is(a,time,span){ font-size:inherit !important; color:inherit !important; letter-spacing:inherit; text-decoration:none !important; }
html[data-pdp-design="b"] .bg-page .bg-meta a:hover{ color:var(--ink) !important; }

/* lead story */
html[data-pdp-design="b"] .bg-lead{
    display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--x7); align-items:center;
    margin-top:var(--x7); padding-bottom:var(--x7); border-bottom:1px solid var(--rule);
}
html[data-pdp-design="b"] .bg-lead-img,
html[data-pdp-design="b"] .bg-card-img{ display:block; aspect-ratio:3 / 2; overflow:hidden; background:var(--surface); }
html[data-pdp-design="b"] :is(.bg-lead-img,.bg-card-img) img{
    display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;
}
html[data-pdp-design="b"] .bg-lead:hover .bg-lead-img img,
html[data-pdp-design="b"] .bg-card:hover .bg-card-img img{ transform:scale(1.03); }
html[data-pdp-design="b"] .bg-page .bg-lead-t{
    margin:var(--x3) 0 0 !important; padding:0 !important;
    font-size:clamp(26px, 1vw + 18px, 38px) !important; font-weight:300 !important; line-height:1.12 !important;
    letter-spacing:-.02em; text-transform:none !important; color:var(--ink) !important; text-wrap:balance;
}
html[data-pdp-design="b"] .bg-page :is(.bg-lead-t,.bg-card-t) a{ color:inherit !important; text-decoration:none !important; }
html[data-pdp-design="b"] .bg-page .bg-lede{ margin:var(--x4) 0 0 !important; font-size:var(--t-lg) !important; line-height:1.6 !important; color:var(--ink2) !important; }
html[data-pdp-design="b"] .bg-page .bg-read{
    display:inline-flex; gap:var(--x2); margin-top:var(--x5); padding-bottom:2px; border-bottom:1px solid var(--rule);
    font-size:var(--t-md) !important; font-weight:500 !important; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink) !important; text-decoration:none !important; transition:border-color .2s ease;
}
html[data-pdp-design="b"] .bg-page .bg-read span{ font-size:inherit !important; color:inherit !important; }
html[data-pdp-design="b"] .bg-page .bg-read:hover{ border-bottom-color:var(--ink); }

/* the grid of the rest */
html[data-pdp-design="b"] .bg-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--x7) var(--x5); margin-top:var(--x7); }
html[data-pdp-design="b"] .bg-card .bg-meta{ margin-top:var(--x4) !important; }
html[data-pdp-design="b"] .bg-page .bg-card-t{
    margin:var(--x2) 0 0 !important; padding:0 !important;
    font-size:var(--t-xl) !important; font-weight:400 !important; line-height:1.3 !important;
    text-transform:none !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .bg-page .bg-card-t a:hover{ text-decoration:underline !important; text-decoration-thickness:1px !important; text-underline-offset:4px; }
html[data-pdp-design="b"] .bg-page .bg-empty{ margin:var(--x7) 0 0 !important; font-size:var(--t-lg) !important; color:var(--ink2) !important; }

html[data-pdp-design="b"] .bg-pager{
    display:flex; align-items:center; justify-content:space-between; margin-top:var(--x8); padding-top:var(--x4); border-top:1px solid var(--rule);
}
html[data-pdp-design="b"] .bg-page .bg-pager :is(a,span){
    font-size:var(--t-md) !important; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink) !important; text-decoration:none !important;
}
html[data-pdp-design="b"] .bg-page .bg-pager .is-off{ color:var(--rule) !important; }
html[data-pdp-design="b"] .bg-page .bg-pager .bg-pager-n{ color:var(--muted) !important; letter-spacing:.04em; font-variant-numeric:tabular-nums; }

/* article */
html[data-pdp-design="b"] .bg-article{ max-width:760px; margin:var(--x7) auto 0; }
html[data-pdp-design="b"] .bg-page .bg-article-t{
    margin:var(--x3) 0 0 !important; padding:0 !important;
    font-size:clamp(32px, 1.6vw + 22px, 52px) !important; font-weight:200 !important; line-height:1.06 !important;
    letter-spacing:-.025em; text-transform:none !important; color:var(--ink) !important; text-wrap:balance;
}
html[data-pdp-design="b"] .bg-hero{ margin:var(--x7) calc(50% - 50vw + var(--x6)) 0; max-width:none; }
html[data-pdp-design="b"] .bg-hero img{ display:block; width:100%; max-height:620px; object-fit:cover; }
@media (min-width:1200px){
    /* the photograph runs wider than the text, capped at the page frame */
    html[data-pdp-design="b"] .bg-hero{ margin-left:-160px; margin-right:-160px; }
}
@media (max-width:1199px){
    html[data-pdp-design="b"] .bg-hero{ margin-left:0; margin-right:0; }
}

html[data-pdp-design="b"] .bg-prose{ margin-top:var(--x7); font-size:18px; line-height:1.75; color:var(--ink2); }
html[data-pdp-design="b"] .bg-prose :is(font, span, b, strong, em, i, u){
    font-family:inherit !important; font-size:inherit !important; color:inherit !important; background:none !important;
}
html[data-pdp-design="b"] .bg-prose :is(p, li, div){
    font-family:'Jost',sans-serif !important; font-size:18px !important; line-height:1.75 !important; color:var(--ink2) !important;
    margin-left:0 !important; text-indent:0 !important; text-align:left !important;
}
html[data-pdp-design="b"] .bg-prose p{ margin:0 0 1.1em !important; }
html[data-pdp-design="b"] .bg-prose p:empty{ display:none; }
html[data-pdp-design="b"] .bg-prose :is(b, strong){ font-weight:500 !important; color:var(--ink) !important; }
html[data-pdp-design="b"] .bg-prose :is(h2,h3,h4){
    margin:1.8em 0 .6em !important; padding:0 !important; font-family:'Jost',sans-serif !important;
    font-weight:400 !important; line-height:1.25 !important; letter-spacing:-.01em; text-transform:none !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .bg-prose h2{ font-size:28px !important; }
html[data-pdp-design="b"] .bg-prose :is(h3,h4){ font-size:22px !important; }
html[data-pdp-design="b"] .bg-prose :is(ul,ol){ margin:0 0 1.2em !important; padding-left:1.2em !important; }
html[data-pdp-design="b"] .bg-prose li{ margin:0 0 .4em !important; padding-left:.2em !important; list-style:inherit; }
html[data-pdp-design="b"] .bg-prose ul li{ list-style:square; }
html[data-pdp-design="b"] .bg-prose a{ color:var(--ink) !important; text-decoration:underline !important; text-decoration-thickness:1px !important; text-underline-offset:3px; }
html[data-pdp-design="b"] .bg-prose img{ display:block; max-width:100%; height:auto; margin:1.6em 0; }
html[data-pdp-design="b"] .bg-prose blockquote{ margin:1.6em 0 !important; padding:0 0 0 var(--x5) !important; border-left:1px solid var(--ink); font-size:22px; font-weight:300; color:var(--ink); }
html[data-pdp-design="b"] .bg-prose table{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:16px; }
html[data-pdp-design="b"] .bg-prose :is(td,th){ padding:var(--x2) var(--x3); border-bottom:1px solid var(--rule); text-align:left; }

/* below the article */
html[data-pdp-design="b"] .bg-block{ margin-top:var(--x8); padding-top:var(--x6); border-top:1px solid var(--ink); }
html[data-pdp-design="b"] .bg-page .bg-block-t{
    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;
}
html[data-pdp-design="b"] .bg-block .bg-grid{ margin-top:var(--x5); }
html[data-pdp-design="b"] .bg-prods{
    display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:1px; margin-top:var(--x5);
    background:var(--rule-soft); border:1px solid var(--rule-soft);
}
html[data-pdp-design="b"] .bg-page .bg-prod{
    display:flex; flex-direction:column; min-width:0; padding:var(--x4); background:var(--paper);
    color:var(--ink) !important; text-decoration:none !important; transition:background-color .2s ease;
}
html[data-pdp-design="b"] .bg-page .bg-prod:hover{ background:var(--surface); }
html[data-pdp-design="b"] .bg-prod-plate{ position:relative; display:block; aspect-ratio:1 / 1; margin-bottom:var(--x3); }
html[data-pdp-design="b"] .bg-prod-plate img{ position:absolute; inset:8%; width:84%; height:84%; object-fit:contain; mix-blend-mode:multiply; }
html[data-pdp-design="b"] .bg-page .bg-prod-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;
}
html[data-pdp-design="b"] .bg-page .bg-prod-name{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px;
    font-size:var(--t-sm) !important; line-height:1.35 !important; color:var(--ink) !important;
}
html[data-pdp-design="b"] .bg-page .bg-prod-price{ margin-top:auto; padding-top:var(--x2); font-size:var(--t-base) !important; color:var(--ink) !important; }

/* ============================================ 5. order tracking
   Form left, answer right: the result card is the same cabinet (hairline frame,
   ink for the state that matters) as the rest of the site. */
html[data-pdp-design="b"] .tr-grid{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--x7) var(--x8);
    align-items:start; margin-top:var(--x6);
}
html[data-pdp-design="b"] .tr-page .tr-text{ margin:var(--x4) 0 0 !important; max-width:48ch; font-size:var(--t-lg) !important; line-height:1.6 !important; color:var(--ink2) !important; }
html[data-pdp-design="b"] .tr-form{ display:grid; gap:var(--x4); max-width:480px; margin-top:var(--x6); }
html[data-pdp-design="b"] .tr-field{ display:block; margin:0; }
html[data-pdp-design="b"] .tr-page .tr-field > span{
    display:block; margin-bottom:var(--x2); font-size:var(--t-xs) !important; font-weight:500 !important;
    letter-spacing:.16em; text-transform:uppercase; color:var(--muted) !important;
}
html[data-pdp-design="b"] .tr-page .tr-field input{
    display:block; width:100%; height:52px; padding:0 var(--x4); border:1px solid var(--rule); background:var(--paper);
    font-size:16px !important; color:var(--ink); outline:0; transition:border-color .2s ease;
}
html[data-pdp-design="b"] .tr-page .tr-field input::placeholder{ color:#a3a7ab; }
html[data-pdp-design="b"] .tr-page .tr-field input:focus{ border-color:var(--ink); }
html[data-pdp-design="b"] .tr-page .tr-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:var(--x2); height:52px; padding:0 var(--x6);
    border:1px solid var(--ink); background:var(--ink); color:var(--paper) !important; cursor:pointer;
    font-size:var(--t-md) !important; font-weight:500 !important; letter-spacing:.12em; text-transform:uppercase;
}
html[data-pdp-design="b"] .tr-page .tr-btn span{ font-size:inherit !important; color:inherit !important; }
html[data-pdp-design="b"] .tr-page .tr-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
/* red only as a thin line, as everywhere else in B */
html[data-pdp-design="b"] .tr-page .tr-miss{
    margin:var(--x5) 0 0 !important; max-width:480px; padding:var(--x3) 0 var(--x3) var(--x4) !important;
    border-left:2px solid #b3261e; font-size:var(--t-base) !important; line-height:1.5 !important; color:var(--ink) !important;
}

html[data-pdp-design="b"] .tr-card{ border:1px solid var(--rule); }
html[data-pdp-design="b"] .tr-card-head{ padding:var(--x5); border-bottom:1px solid var(--rule); }
html[data-pdp-design="b"] .tr-page .tr-no{
    margin:0 !important; font-size:var(--t-2xl) !important; font-weight:300 !important; letter-spacing:.02em;
    color:var(--ink) !important; font-variant-numeric:tabular-nums;
}
html[data-pdp-design="b"] .tr-page .tr-state{
    display:inline-block; margin:var(--x3) 0 0 !important; padding:4px 10px; background:var(--ink);
    font-size:var(--t-xs) !important; font-weight:500 !important; letter-spacing:.14em; text-transform:uppercase; color:var(--paper) !important;
}
html[data-pdp-design="b"] .tr-page .tr-state.is-cancelled{ background:var(--paper); color:var(--ink) !important; border:1px solid var(--ink); }

/* the timeline: a vertical hairline, filled dots for what has happened */
html[data-pdp-design="b"] .tr-steps{ list-style:none; margin:0; padding:var(--x5); border-bottom:1px solid var(--rule); }
html[data-pdp-design="b"] .tr-steps li{ position:relative; display:flex; align-items:center; gap:var(--x3); min-height:36px; margin:0; padding:0 !important; }
html[data-pdp-design="b"] .tr-steps li:not(:last-child)::after{
    content:""; position:absolute; left:5px; top:24px; bottom:-12px; width:1px; background:var(--rule);
}
html[data-pdp-design="b"] .tr-steps li.is-done:not(:last-child)::after{ background:var(--ink); }
html[data-pdp-design="b"] .tr-dot{ position:relative; z-index:1; flex:0 0 11px; width:11px; height:11px; border:1px solid var(--rule); background:var(--paper); }
html[data-pdp-design="b"] .tr-steps li.is-done .tr-dot{ background:var(--ink); border-color:var(--ink); }
html[data-pdp-design="b"] .tr-steps li.is-now .tr-dot{ border-color:var(--ink); box-shadow:inset 0 0 0 2px var(--paper); background:var(--ink); }
html[data-pdp-design="b"] .tr-page .tr-step-l{ font-size:var(--t-base) !important; color:var(--muted) !important; }
html[data-pdp-design="b"] .tr-page .tr-steps li:is(.is-done,.is-now) .tr-step-l{ color:var(--ink) !important; }
html[data-pdp-design="b"] .tr-page .tr-steps li.is-now .tr-step-l{ font-weight:500 !important; }

html[data-pdp-design="b"] .tr-facts{ margin:0; padding:var(--x3) var(--x5); }
html[data-pdp-design="b"] .tr-facts > div{ display:flex; justify-content:space-between; gap:var(--x4); padding:var(--x2) 0; border-bottom:1px solid var(--rule-soft); }
html[data-pdp-design="b"] .tr-facts > div:last-child{ border-bottom:0; }
html[data-pdp-design="b"] .tr-page .tr-facts dt{ margin:0; font-size:var(--t-sm) !important; font-weight:400; color:var(--muted) !important; }
html[data-pdp-design="b"] .tr-page .tr-facts dd{ margin:0; font-size:var(--t-base) !important; color:var(--ink) !important; text-align:right; font-variant-numeric:tabular-nums; }
html[data-pdp-design="b"] .tr-page .tr-note{ margin:0 !important; padding:var(--x4) var(--x5) !important; border-top:1px solid var(--rule); background:var(--surface); font-size:var(--t-sm) !important; line-height:1.5 !important; color:var(--ink2) !important; }

html[data-pdp-design="b"] .tr-help{ padding:var(--x5); border:1px solid var(--rule-soft); background:var(--surface); }
html[data-pdp-design="b"] .tr-page .tr-help p{ margin:0 0 var(--x3) !important; font-size:var(--t-base) !important; line-height:1.6 !important; color:var(--ink2) !important; }
html[data-pdp-design="b"] .tr-page .tr-help p:last-child{ margin-bottom:0 !important; }
html[data-pdp-design="b"] .tr-page .tr-help a{ color:var(--ink) !important; text-decoration:none !important; border-bottom:1px solid var(--rule); }
html[data-pdp-design="b"] .tr-page .tr-help a:hover{ border-bottom-color:var(--ink); }
html[data-pdp-design="b"] .tr-page .tr-help a span{ font-size:inherit !important; color:inherit !important; }

@media (max-width:1199px){
    html[data-pdp-design="b"] .fs-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
    html[data-pdp-design="b"] .bg-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    html[data-pdp-design="b"] .bg-prods{ grid-template-columns:repeat(3, minmax(0,1fr)); }
    html[data-pdp-design="b"] .bg-prods > .bg-prod:nth-child(n+4){ display:none; }
}
@media (max-width:767px){
    html[data-pdp-design="b"] :is(.fs-page,.er-page,.bg-page,.tr-page){ padding:var(--x4) var(--x4) var(--x8); }
    html[data-pdp-design="b"] .fs-head{ margin-top:var(--x5); padding-bottom:var(--x5); }
    html[data-pdp-design="b"] .fs-clock-row{ grid-template-columns:repeat(4, minmax(0,1fr)); }
    html[data-pdp-design="b"] .fs-clock{ width:100%; }
    html[data-pdp-design="b"] .fs-page .fs-clock-cell b{ font-size:22px !important; }
    /* chips become one swipe row instead of a wall of wrapped buttons */
    html[data-pdp-design="b"] .fs-bar{ flex-direction:column; align-items:stretch; }
    html[data-pdp-design="b"] .fs-chips{
        flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; margin:0 calc(-1 * var(--x4)); padding:0 var(--x4);
    }
    html[data-pdp-design="b"] .fs-chips::-webkit-scrollbar{ display:none; }
    html[data-pdp-design="b"] .fs-page .fs-chip{ flex:0 0 auto; }
    html[data-pdp-design="b"] .fs-sort{ width:100%; margin:0; justify-content:space-between; }
    html[data-pdp-design="b"] .fs-page .fs-sort select{ flex:1 1 auto; min-width:0; width:100%; font-size:16px !important; }
    html[data-pdp-design="b"] .fs-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    html[data-pdp-design="b"] .fs-page .fs-card{ padding:var(--x3); }
    html[data-pdp-design="b"] .fs-page .fs-card-name{ font-size:var(--t-sm) !important; }
    html[data-pdp-design="b"] .fs-page .fs-now{ font-size:var(--t-base) !important; }
    html[data-pdp-design="b"] :is(.fs-empty-links,.er-links){ grid-template-columns:1fr; }
    html[data-pdp-design="b"] .er-grid{ grid-template-columns:1fr; gap:var(--x7); padding-top:var(--x6); }
    html[data-pdp-design="b"] .bg-lead{ grid-template-columns:1fr; gap:var(--x5); margin-top:var(--x6); padding-bottom:var(--x6); }
    html[data-pdp-design="b"] .tr-grid{ grid-template-columns:1fr; gap:var(--x6); margin-top:var(--x5); }
    html[data-pdp-design="b"] .tr-form{ max-width:none; }
    html[data-pdp-design="b"] .tr-page .tr-btn{ width:100%; }
    html[data-pdp-design="b"] .bg-grid{ grid-template-columns:1fr; gap:var(--x6); }
    html[data-pdp-design="b"] .bg-tabs{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
    html[data-pdp-design="b"] .bg-page .bg-tabs a{ flex:0 0 auto; }
    html[data-pdp-design="b"] .bg-article{ margin-top:var(--x5); }
    html[data-pdp-design="b"] .bg-hero{ margin:var(--x5) calc(-1 * var(--x4)) 0; }
    html[data-pdp-design="b"] .bg-prose{ margin-top:var(--x6); }
    html[data-pdp-design="b"] .bg-prose :is(p,li,div){ font-size:17px !important; line-height:1.7 !important; }
    html[data-pdp-design="b"] .bg-prose h2{ font-size:24px !important; }
    /* products: a swipe row of two and a half */
    html[data-pdp-design="b"] .bg-prods{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; }
    html[data-pdp-design="b"] .bg-page .bg-prod{ flex:0 0 42%; scroll-snap-align:start; padding:var(--x3); }
    html[data-pdp-design="b"] .er-page .er-search button{ padding:0 var(--x4); }
    html[data-pdp-design="b"] .fs-empty{ padding-top:var(--x7); }
}
@media (prefers-reduced-motion:reduce){
    html[data-pdp-design="b"] :is(.fs-page,.er-page,.bg-page,.tr-page) *{ transition:none !important; }
}