/* Board Budder theme layer: the SHOPLINE-specific pieces that the static site
   did not have (section wrappers, per-device controls from the editor, cart
   form, search results, customer pages, collection grids). The design itself
   lives in budder.css. */

/* ---------- section wrappers ---------- */
.bb-sec{display:block}
.bb-header-wrap,.bb-announce-wrap,.bb-header-sec-wrap{display:contents}
.bb-header-sec{position:sticky;top:0}
/* the header group renders each section inside its own wrapper, which would
   trap the sticky header in a box the height of the header itself */
.shopline-section:has(> .bb-header-sec),[id^="shopline-section-"]:has(> .bb-header-sec),
.section:has(> .bb-header-sec){display:contents}

/* global width + gutters from Theme settings > Budder · Layout */
.wrap{max-width:var(--max);padding-left:var(--bb-gutter);padding-right:var(--bb-gutter)}
@media(max-width:860px){.wrap{padding-left:var(--bb-gutter-m);padding-right:var(--bb-gutter-m)}}
body{font-size:var(--bb-body-size)}
@media(max-width:860px){body{font-size:var(--bb-body-size-m)}}
h1,h2,h3{letter-spacing:var(--bb-heading-track,-.005em)}
.bbu-38,.v91-article .wrap{max-width:var(--bb-narrow)}
.btn{border-radius:var(--r)}
.announce{background:var(--bb-announce-bg);color:var(--bb-announce-fg)}
footer.site{background:var(--bb-footer-bg);color:var(--bb-footer-fg)}

/* page heading sizes (Theme settings > Budder · Typography) */
.bb-type-ov .v91-page h1,.bb-type-ov .block .head h1{font-size:var(--bb-page-h1-d)!important}
.bb-type-ov .v91-page h2,.bb-type-ov .v91-h2{font-size:var(--bb-page-h2-d)!important}
@media(max-width:860px){
  .bb-type-ov .v91-page h1,.bb-type-ov .block .head h1{font-size:var(--bb-page-h1-m)!important}
  .bb-type-ov .v91-page h2,.bb-type-ov .v91-h2{font-size:var(--bb-page-h2-m)!important}
}

/* per-section controls (every Budder section: Heading size / Spacing / Colors / Visibility) */
.bb-ts .bb-title{font-size:var(--ts-d)!important}
.bb-pad>:first-child{padding-top:var(--pt-d)!important;padding-bottom:var(--pb-d)!important}
.bb-colors>:first-child{background:var(--sbg)!important;color:var(--sfg)!important}
@media(min-width:1181px){.bb-hide-d{display:none!important}}
@media(min-width:861px) and (max-width:1180px){
  .bb-hide-t{display:none!important}
  .bb-ts .bb-title{font-size:var(--ts-t)!important}
  .bb-pad>:first-child{padding-top:var(--pt-t)!important;padding-bottom:var(--pb-t)!important}
}
@media(max-width:860px){
  .bb-hide-m{display:none!important}
  .bb-ts .bb-title{font-size:var(--ts-m)!important}
  .bb-pad>:first-child{padding-top:var(--pt-m)!important;padding-bottom:var(--pb-m)!important}
}
[data-hide-m]{}
@media(max-width:860px){.bb-announce-sec[data-hide-m]{display:none}}

/* ---------- cart drawer (server rendered, refreshed over AJAX) ---------- */
.bb-drawer-body{display:flex;flex-direction:column;flex:1;min-height:0}
.drawer .line a{color:inherit;text-decoration:none}
.drawer .line img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:#fff}
.drawer.is-busy .bb-drawer-body{opacity:.55;pointer-events:none;transition:opacity .15s}
.drawer form{margin:0}
.drawer #checkout[disabled]{opacity:.5;cursor:not-allowed}
.bb-viewcart{text-align:center;margin:.5rem 0 0;font-size:.85rem}
.bb-viewcart a{color:inherit}
.v209-chip[disabled]{opacity:.5}

/* ---------- buttons while adding ---------- */
[data-add-variant].is-loading{opacity:.6;pointer-events:none}

/* ---------- product grids rendered from collections ---------- */
.bb-empty{opacity:.7;padding:1rem 0}
.bb-pagination{display:flex;gap:.5rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.bb-pagination a,.bb-pagination span{min-width:40px;height:40px;display:inline-grid;place-items:center;border:1px solid var(--line-w);border-radius:999px;text-decoration:none;padding:0 .8rem}
.bb-pagination .on{background:var(--cream);color:var(--black);border-color:var(--cream)}

/* ---------- forms posted to SHOPLINE (contact, newsletter) ---------- */
.bb-form-msg{margin:.6rem 0 0;font-size:.9rem}
.bb-form-msg.ok{color:var(--cream)}
.bb-form-msg.err{color:#ff8a7a}
.v91-form .bb-form-msg.ok{color:inherit;font-weight:600}

/* ---------- rich text coming from the editor ---------- */
.bb-rte>*:first-child{margin-top:0}
.bb-rte p{margin:0 0 1rem}
.v91-page .bb-rte ul{padding-left:1.1rem}

/* ---------- search page ---------- */
.bb-search-form{display:flex;gap:.6rem;margin:1rem 0 1.6rem;max-width:640px}
.bb-search-form input{flex:1}
.bb-search-count{opacity:.7;margin:0 0 1rem}

/* ---------- customer account pages (base theme sections) ---------- */
.bb-pt-customers-login main,.bb-pt-customers-register main,.bb-pt-customers-account main,
.bb-pt-customers-addresses main,.bb-pt-customers-order main,.bb-pt-customers-orders main,
.bb-pt-customers-forgot_password main,.bb-pt-customers-activate_account main{background:var(--white);color:var(--black)}

/* ---------- theme editor helpers ---------- */
.bb-editor-note{border:1px dashed currentColor;opacity:.6;padding:1rem;text-align:center;font-size:.85rem;margin:1rem 0}
.bb-ef{display:contents}
.v203-marquee-inner[style],.v203-marquee[style*="--bb-mq-speed"] .v203-marquee-inner{animation-duration:var(--bb-mq-speed,140s)}

/* ---------- temp accents as classes (tabs, swatches, rub-on art, stage) ---------- */
.bb-acc-all{--tab-accent:var(--all);--wax-accent:var(--all);--soon:var(--all)}
.bb-acc-cold{--tab-accent:var(--cold);--wax-accent:var(--cold);--soon:var(--cold)}
.bb-acc-warm{--tab-accent:var(--warm);--wax-accent:var(--warm);--soon:var(--warm)}
.bb-acc-slush{--tab-accent:var(--slush);--wax-accent:var(--slush);--soon:var(--slush)}
.bb-bg-all{background:var(--all)}.bb-bg-cold{background:var(--cold)}.bb-bg-warm{background:var(--warm)}.bb-bg-slush{background:var(--slush)}
.v13-wax-stage[data-sel="all"]{--wax-accent:var(--all)}.v13-wax-stage[data-sel="cold"]{--wax-accent:var(--cold)}
.v13-wax-stage[data-sel="warm"]{--wax-accent:var(--warm)}.v13-wax-stage[data-sel="slush"]{--wax-accent:var(--slush)}
.v209-widget[data-v209-widget="wax"] .v13-wax-stage{min-height:552px!important}
/* picker result (was inline in the static build) */
.picker .result .ph{width:90px;height:90px;border:1.5px dashed var(--ink-3);border-radius:8px}
.picker .result b.bb-rname{display:block;font-size:1.18rem}
.picker .result .bb-racts{display:flex;gap:.5rem;flex-wrap:wrap}
.logo[style*="--bb-logo-h"] img{height:var(--bb-logo-h)!important;width:auto!important}
.bb-nw{white-space:nowrap}
.bb-desc-item+.bb-desc-item{margin-top:0}

/* ---------- cart page (same pieces as the drawer, laid out in the page) ---------- */
.bb-cartpage h1{margin:.3rem 0 1.2rem}
.bb-cart-card{background:var(--white);color:var(--black);border-radius:var(--bb-card-r);overflow:hidden;margin-top:1rem}
.bb-cart-card .lines{padding:1rem 1.2rem}
.bb-cart-card .line img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:#fff}
.bb-cart-card .line a{color:inherit;text-decoration:none}
.bb-cart-card footer{padding:1rem 1.2rem;border-top:2px solid var(--ink)}
.bb-cart-card .tot{display:flex;justify-content:space-between;font-weight:700;margin-bottom:.8rem}
.bb-cart-card #checkout{background:var(--black);color:var(--white);border-color:var(--black);padding:1rem}
.bb-cart-card .empty a{color:inherit}
.bb-cart-card.is-busy{opacity:.55;pointer-events:none}
/* PDP add-to-cart: pill, and beat the .btn radius above */
.btn.pdp-add{border-radius:999px}/* ---- Shared SHOPLINE blocks: missing utility rules ----
   The stock rich-text block renders its content twice, once marked hidden-mobile
   and once hidden-desktop, and relies on the theme to define those two helpers.
   This theme never did, so both copies showed at every width. ---- */
@media (min-width: 861px) {
    .hidden-desktop {
        display: none !important
    }
}

@media (max-width: 860px) {
    .hidden-mobile {
        display: none !important
    }
}/* ---------- section colour controls ----------
   Every Budder section already emits --sbg / --sfg from its Colours settings and
   gets .bb-colors when that switch is on. budder.css paints the inner
   .v13-section with hardcoded colours at a higher specificity, so on those
   sections the controls looked dead. These rules win. Switch off, nothing here
   applies and the section renders exactly as before. */
body .bb-s.bb-colors>:first-child {
    background: var(--sbg) !important;
    color: var(--sfg) !important;
    border-top-color: transparent !important
}

body .bb-s.bb-colors h1,
body .bb-s.bb-colors h2,
body .bb-s.bb-colors h3,
body .bb-s.bb-colors h4,
body .bb-s.bb-colors .bb-title {
    color: var(--sfg) !important
}

body .bb-s.bb-colors .v90-pickwax,
body .bb-s.bb-colors .v13-section-head p {
    color: var(--sfg) !important;
    opacity: .78
}

/* ---------- dark surfaces ----------
   Retints the cards, tabs and controls that sit on top of a dark section
   background. Only applies when the section's Dark surfaces switch is on. */
body .bb-s.bb-dark .v13-wax-stage,
body .bb-s.bb-dark .v13-wax-tab,
body .bb-s.bb-dark .v212-card,
body .bb-s.bb-dark .v212-arrow,
body .bb-s.bb-dark .v217-seg,
body .bb-s.bb-dark .v13-range {
    background: #0d0f14 !important;
    color: #fefefe !important;
    border-color: rgba(255, 255, 255, .16) !important;
    box-shadow: none !important
}

body .bb-s.bb-dark .btn:not(.ghost) {
    background: #fcf1b3 !important;
    color: #000004 !important;
    border-color: transparent !important
}

body .bb-s.bb-dark .btn.ghost {
    background: transparent !important;
    color: #fefefe !important;
    border-color: rgba(255, 255, 255, .3) !important
}

body .bb-s.bb-dark .v217-opt.on {
    background: #fcf1b3 !important;
    color: #000004 !important
}

body .bb-s.bb-dark .v212-dot {
    background: rgba(255, 255, 255, .28) !important
}

body .bb-s.bb-dark .v212-dot.on,
body .bb-s.bb-dark .v212-arrow.v212-next {
    background: #fcf1b3 !important;
    color: #000004 !important
}

/* ---------- header behaviour ----------
   Set from Theme editor > Header > Header behaviour. No class means the theme
   behaves exactly as it did before. */
body .bb-header-sec.bb-head-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0
}

body .bb-header-sec.bb-head-sticky {
    position: sticky !important;
    top: 0
}

body .bb-header-sec.bb-head-scroll {
    position: sticky !important;
    top: 0;
    background: transparent !important;
    transition: background-color .28s ease, backdrop-filter .28s ease
}

body .bb-header-sec.bb-head-scroll.bb-stuck {
    background: var(--bb-head-bg, rgba(0, 0, 4, .72)) !important;
    backdrop-filter: saturate(1.2) blur(8px)
}

/* The home page overrides the header on its own: budder.css carries
   `body.is-home-route header.site{position:absolute!important}` plus two
   narrower copies inside max-width:860px. Those are (0,2,2) selectors and the
   rules above are (0,2,1), so on the home page the header stayed absolute and
   scrolled away no matter which behaviour was picked. The scroll script was
   never the problem: it adds .bb-stuck correctly. These repeat the same
   declarations at (0,3,2) so the setting wins on the home page too, at every
   width. Remove them only if budder.css stops forcing the home header. */
body.is-home-route header.site.bb-head-sticky {
    position: sticky !important;
    top: 0 !important
}

body.is-home-route header.site.bb-head-scroll {
    position: sticky !important;
    top: 0 !important
}

/* Clear at the top, on every page. Away from the home page header.site carries
   a solid background and a bottom border, so those get cleared too. The two
   states are written as :not(.bb-stuck) against .bb-stuck so they can never
   both match the same element: an earlier version used a bare "clear" rule at
   the same specificity as the bar rule and, sitting later in the file, it won
   in both states and left the nav floating unreadable over the page. */
body header.site.bb-head-scroll:not(.bb-stuck),
body.is-home-route header.site.bb-head-scroll:not(.bb-stuck) {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background-color .28s ease, backdrop-filter .28s ease
}

/* The bar, once the page has scrolled. */
body header.site.bb-head-scroll.bb-stuck,
body.is-home-route header.site.bb-head-scroll.bb-stuck {
    background-image: none !important;
    background-color: var(--bb-head-bg, rgba(0, 0, 4, .86)) !important;
    border-bottom: 1px solid var(--line-w, rgba(254, 254, 254, .14)) !important;
    backdrop-filter: saturate(1.2) blur(10px) !important;
    -webkit-backdrop-filter: saturate(1.2) blur(10px) !important;
    transition: background-color .28s ease, backdrop-filter .28s ease
}/* ---------- surfaces follow the section colours ----------
   Cards, tabs and controls inside a Budder section are blended from that
   section's own Background and Text colours, so they stay readable whichever
   way the merchant sets them. Nothing here applies unless Custom section
   colors is switched on, so an untouched section renders exactly as before.
   This replaces the .bb-dark block above, which is kept only as a hook if we
   ever want a hard light/dark preset instead of the blend. */
body .bb-s.bb-colors .v13-wax-stage,
body .bb-s.bb-colors .v13-wax-tab,
body .bb-s.bb-colors .v212-card,
body .bb-s.bb-colors .v212-arrow,
body .bb-s.bb-colors .v217-seg,
body .bb-s.bb-colors .v13-range {
    background: color-mix(in srgb, var(--sbg) 90%, var(--sfg) 10%) !important;
    color: var(--sfg) !important;
    border-color: color-mix(in srgb, var(--sbg) 78%, var(--sfg) 22%) !important;
    box-shadow: none !important
}

body .bb-s.bb-colors .v212-card p,
body .bb-s.bb-colors .v212-card li,
body .bb-s.bb-colors .v13-wax-stage p,
body .bb-s.bb-colors .v13-wax-stage li {
    color: var(--sfg)
}

body .bb-s.bb-colors .btn:not(.ghost),
body .bb-s.bb-colors .v217-opt.on,
body .bb-s.bb-colors .v212-dot.on,
body .bb-s.bb-colors .v212-arrow.v212-next {
    background: var(--sfg) !important;
    color: var(--sbg) !important;
    border-color: transparent !important
}

body .bb-s.bb-colors .btn.ghost {
    background: transparent !important;
    color: var(--sfg) !important;
    border-color: color-mix(in srgb, var(--sbg) 65%, var(--sfg) 35%) !important
}

body .bb-s.bb-colors .v212-dot {
    background: color-mix(in srgb, var(--sbg) 70%, var(--sfg) 30%) !important
}/* budder.css pins the buy-row buttons at body .bb-s .v13-buy-row .btn:first-child,
   which ties on specificity with the block above. Adding .v13-section wins it,
   so the buttons follow the section colours too. */
body .bb-s.bb-colors .v13-section .btn:not(.ghost),
body .bb-s.bb-colors .v13-section .v217-opt.on,
body .bb-s.bb-colors .v13-section .v212-dot.on,
body .bb-s.bb-colors .v13-section .v212-arrow.v212-next {
    background: var(--sfg) !important;
    color: var(--sbg) !important;
    border-color: transparent !important
}

body .bb-s.bb-colors .v13-section .btn.ghost {
    background: transparent !important;
    color: var(--sfg) !important;
    border-color: color-mix(in srgb, var(--sbg) 65%, var(--sfg) 35%) !important
}

body .bb-s.bb-colors .v13-section .v212-dot {
    background: color-mix(in srgb, var(--sbg) 70%, var(--sfg) 30%) !important
}

body .bb-s.bb-colors .v13-section .v13-wax-tab.on,
body .bb-s.bb-colors .v13-section .v13-wax-tab[aria-selected="true"] {
    background: color-mix(in srgb, var(--sbg) 80%, var(--sfg) 20%) !important
}/* Primary buttons and accent pills use the brand cream in a custom-coloured
   section, so a dark home section matches the product pages exactly (the PDP
   Add to cart is --cream on black). Comes after the var(--sfg) version above
   and wins on source order at equal specificity.
   Caveat: if a section is ever given a LIGHT Background, these need a darker
   value, because cream on near-white has almost no contrast. */
body .bb-s.bb-colors .v13-section .btn:not(.ghost),
body .bb-s.bb-colors .v13-section .v217-opt.on,
body .bb-s.bb-colors .v13-section .v212-dot.on,
body .bb-s.bb-colors .v13-section .v212-arrow.v212-next {
    background: var(--cream, #fcf1b3) !important;
    color: var(--black, #000004) !important;
    border-color: transparent !important
}/* ---------- background behind product images ----------
   Driven by Theme settings > Budder · Product images. The variables are only
   emitted when the merchant fills them in, so every fallback below is the value
   that surface already uses and an untouched store renders identically.
   Product PNGs are transparent, so the texture shows through the cutout.
   .offer-figure img is deliberately NOT targeted: the REI packshot sets its own
   white background and needs to keep it. */
html body .gallery>img,
html body .gallery .thumbs button img {
    background-color: var(--bb-prod-bg, #101013) !important;
    background-image: var(--bb-prod-bg-image, none) !important;
    background-size: var(--bb-prod-bg-size, cover) !important;
    background-position: center center !important;
    background-repeat: repeat !important
}

html body .offer-figure.offer-figure {
    background-color: var(--bb-prod-bg, #000004) !important;
    background-image: var(--bb-prod-bg-image, none) !important;
    background-size: var(--bb-prod-bg-size, cover) !important;
    background-position: center center !important;
    background-repeat: repeat !important
}

html body .bb-cart-card .line img {
    background-color: var(--bb-prod-bg, #fff) !important;
    background-image: var(--bb-prod-bg-image, none) !important;
    background-size: var(--bb-prod-bg-size, cover) !important;
    background-position: center center !important;
    background-repeat: repeat !important
}

/* Fill the Bench price row matches the Wax Selector in a custom-coloured
   section: white price, grey review count. The stars already use the brand
   cream in both, so they are left alone. Scoped to .bb-colors, so with the
   section colour switch off the card stays light and the text stays dark. */
body .bb-s.bb-colors .v212-card .v212-price>strong{color:var(--sfg,#fefefe)!important}
body .bb-s.bb-colors .v212-card .v212-stars .stars>span{color:#6c6a63!important}/* Detail labels block on the product page. The shared .v13-use styling was
   written for the light Wax Selector card, so the label renders near-black and
   disappears on the dark product column. These pin the same visual language the
   Wax Selector uses: small mono uppercase grey label over a white value. */
html body .bb-pdp-use {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin: .9rem 0 .2rem
}

html body .bb-pdp-use>span {
    display: flex;
    flex-direction: column;
    gap: .2rem
}

html body .bb-pdp-use b {
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #6c6a63
}

html body .bb-pdp-use>span>span {
    color: var(--white, #fefefe);
    font-size: .95rem;
    line-height: 1.3
}

/* ---------- mobile: Wax Selector matches Fill the Bench ----------
   budder.css has a deliberate mobile block (@media max-width:700px) that whites
   out the wax copy panel and hides the title, temp range, description and the
   detail row. With Custom section colors on, that left white text on a white
   panel, which is why the price looked missing and the tones did not match.
   These rules only apply when the section colour switch is on, so the original
   light design is untouched if it is ever turned back off. */
@media (max-width:700px){
  body .bb-s.bb-colors .v13-wax-copy{background:transparent!important}

  body .bb-s.bb-colors .v13-wax-copy>h3{
    display:block!important;
    margin:0 0 .5rem!important;
    color:var(--sfg)!important;
    font-family:var(--head)!important;
    font-size:clamp(1.55rem,7.4vw,2.1rem)!important;
    line-height:1.05!important;
    letter-spacing:-.02em!important}

  body .bb-s.bb-colors .v13-desc{
    display:-webkit-box!important;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:0 0 .95rem!important;
    color:var(--sfg)!important;
    opacity:.78!important;
    font-size:.95rem!important;
    line-height:1.45!important}

  body .bb-s.bb-colors .v13-price-row [data-v13-price]{color:var(--sfg)!important}
  body .bb-s.bb-colors .v13-price-row [data-v13-stars] .stars i{color:var(--cream,#fcf1b3)!important}
  body .bb-s.bb-colors .v13-price-row [data-v13-stars] .stars>span{color:#6c6a63!important}
}

/* The Details control is a bare underlined text link under 860px. Give it back
   its button shape so the pair reads the same as the bench card. */
@media (max-width:860px){
  body .bb-s.bb-colors .v13-buy-row{display:grid!important;grid-template-columns:1fr!important;gap:.55rem!important}
  body .bb-s.bb-colors .v13-buy-row .btn.ghost{
    display:flex!important;
    width:100%!important;
    min-height:54px!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0 1rem!important;
    border:1px solid color-mix(in srgb,var(--sbg) 62%,var(--sfg) 38%)!important;
    border-radius:11px!important;
    background:transparent!important;
    color:var(--sfg)!important;
    font-family:var(--mono)!important;
    font-size:.78rem!important;
    font-weight:700!important;
    letter-spacing:.1em!important;
    text-transform:uppercase!important;
    text-decoration:none!important}
  body .bb-s.bb-colors .v13-buy-row .btn.ghost::after{content:none!important}
}

/* ---------- mobile hero: centre the headline group ----------
   .bb-mobile-inner is a full-height flex column: kicker group at the top,
   benefit row pinned to the bottom with margin-top:auto. The copy block sat at
   its natural height, so everything bunched under the kicker. Letting the copy
   block grow and giving the headline/intro/button group auto margins centres it
   in the space between the kicker and the benefits. */
@media (max-width:860px){
  body .bb-s .bb-mobile-copy{
    display:flex!important;
    flex-direction:column!important;
    flex:1 1 auto!important;
    min-height:0!important}
  body .bb-s .bb-mobile-kicker{flex:0 0 auto!important}
  body .bb-s .bb-mobile-title{margin-top:auto!important}
  body .bb-s .bb-mobile-actions{margin-bottom:auto!important}
}

/* ---------- Details buttons off: single-button action rows ----------
   The action rows are two-column grids (and one flex row), so dropping the
   ghost Details link would leave the Add to cart button sitting in half the
   width. When a row is left with one child, collapse it to a single full
   width column. Written against :only-child so it costs nothing and reverts
   by itself the moment the Details switch is turned back on. */
.offer-actions:has(>:only-child),
.v212-cta:has(>:only-child),
.v13-buy-row:has(>:only-child){
  display:grid!important;
  grid-template-columns:1fr!important}
.offer-actions>:only-child,
.v212-cta>:only-child,
.v13-buy-row>:only-child{
  width:100%!important;
  grid-column:1/-1!important;
  flex:1 1 auto!important}

/* Product titles are links now that Details is gone. Keep them looking like
   headings: no underline, no colour shift, and the whole line clickable. */
.v212-title>a.bb-tlink,
.v13-wax-copy h3>a.bb-tlink{
  color:inherit!important;
  text-decoration:none!important;
  display:block}
.v212-title>a.bb-tlink:hover,
.v13-wax-copy h3>a.bb-tlink:hover{opacity:.82}

/* ---------- uploaded custom icons ----------
   bb/icon renders one of these two in place of its built-in SVG when a block
   has an upload. Both fill the <i> wrapper the section already sizes (18px in
   the hero proof bar, 26px in the icon links), so nothing else has to change.
   .bb-ico-mask paints the uploaded silhouette with the current icon colour so
   it retints with the colour scheme the same way the built-in SVGs do. The
   desktop proof bar forces its SVGs to #ffa600 rather than currentColor, so
   that context gets the tint var set to match. */
.bb-ico-img,
.bb-ico-mask{display:block;width:100%;height:100%}
.bb-ico-img{object-fit:contain}
.bb-ico-mask{
  background-color:var(--bb-ico-tint,currentColor);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.v23-proof-icon{--bb-ico-tint:#ffa600}

/* ---------- reviews off ----------
   The wax selector and Fill the Bench wrap the stars in their own span, so the
   wrapper survives as an empty flex item and keeps its gap once the reviews
   switch is off. Drop it when it has nothing in it. */
[data-v13-stars]:empty,
.v212-stars:empty{display:none!important}