/* 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}
a.v209-chip{display:inline-block;text-decoration:none}

/* ---------- 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.
   T19: same 959/960px breakpoint as the stock base/index.css and as the platform's
   "@media (--mobile)" output for style.* settings. At 860/861 the 861-959px band showed
   the desktop copy with the mobile alignment/spacing, and on customers pages (which also
   load base/index.css) it hid BOTH copies. No bb-* markup uses these two classes. ---- */
@media (min-width: 960px) {
    .hidden-desktop {
        display: none !important
    }
}

@media (max-width: 959px) {
    .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. 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}
/* 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}
}

/* 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}


/* ---------- retailer (REI) cards follow the product image background ----------
   budder.css pins the external/REI figure to solid white in three places:
   .offer-rei .offer-figure and .offer-rei .offer-figure img, plus a later
   duplicate using var(--white). All of them are (0,2,0)/(0,2,1) with
   !important. That was right when the retailer packshot was a white-background
   photo, and wrong now that the artwork is a transparent PNG, so the card sat
   on a white block while every other card carried the texture. These are
   (0,3,0)/(0,3,1) so they win, and they read the same product-background
   variables as every other card, which means the Theme settings and the
   per-section override drive this card too. */
.offer-card.offer-rei .offer-figure,
.offer-card.offer-rei .offer-figure--kit{
  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!important}
.offer-card.offer-rei .offer-figure img,
.offer-card.offer-rei .offer-figure--kit img{
  background:transparent!important;
  mix-blend-mode:normal!important}

/* ---------- product page (T1: product form, express checkout, video, thumbs) ---------- */
/* grid children may shrink below their content, so a long thumbs row never widens the page (F-008) */
.pdp>*{min-width:0}
.pdp .thumbs{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.pdp .thumbs::-webkit-scrollbar{display:none}
.pdp .thumbs button{flex:0 0 auto;position:relative}
.pdp .thumbs button.is-video::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-35%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--white,#fefefe);filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));pointer-events:none}
.pdp .gallery [hidden]{display:none!important}
/* product video in place of the main photo */
.pdp .bb-pdp-video{border:1px solid rgba(254,254,254,.12);border-radius:20px;overflow:hidden;background:#101013}
html body .pdp .gallery .bb-pdp-video img{width:100%!important;height:100%!important;aspect-ratio:auto!important;padding:0!important;border:0!important;border-radius:0!important;object-fit:contain!important;background:#101013!important}
/* product form: same button, now a submit inside {{#product_form}} */
.bb-buy .pdp-add{gap:.25em}
.pdp-add.is-loading,[data-bb-mobile-add].is-loading{opacity:.6;pointer-events:none}
/* express checkout (payment_button): hidden while the chosen option is sold out (stock pattern) */
.bb-express{width:100%}
.bb-express>*:not(:empty){margin-top:.6rem}
.bb-express.is-disabled{display:none}
/* platform "Buy now" button restyled to the theme button (same family as .btn.pdp-add) */
.bb-express .pay-button-common-item{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;width:100%!important;min-height:54px;padding:.9rem 1.4rem!important;border-radius:999px!important;border:2px solid var(--snow)!important;background:transparent!important;color:var(--snow)!important;font-weight:600!important;box-shadow:none!important;cursor:pointer;transition:transform .15s ease,opacity .15s}
.bb-express .pay-button-common-item *{text-align:center!important;color:inherit!important}
.bb-express .pay-button-common-item:hover{transform:translateY(-1px)}
.bb-express .pay-button-common-item:focus-visible{outline:2px solid var(--snow);outline-offset:3px}

/* Cart lines (components/bb/cart-line.html, shared by the cart page and the
   drawer): subscription plan, line item properties, line discounts, the
   struck-through original price and the remove control. Express checkout
   buttons sit under the checkout button; the box is gone when it is empty. */
.line .bb-line-info{min-width:0;overflow-wrap:anywhere}
.line .bb-line-was{color:var(--ink-3);margin-right:.15rem}
.line .bb-line-plan span,.line .bb-line-prop span{font-weight:600}
.line .bb-line-prop a{color:inherit;text-decoration:underline}
.line .bb-line-prop img{display:inline-block;width:32px;height:32px;margin:.2rem .3rem 0 0;vertical-align:middle;border-radius:4px}
.line .bb-line-disc{color:var(--ink)}
.qty .bb-line-rm{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:.2rem;color:var(--ink-3);border-radius:4px}
.qty .bb-line-rm svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.qty .bb-line-rm:hover{color:var(--ink)}
.bb-xcheckout{margin-top:.6rem}
.bb-xcheckout:empty{display:none}
.bb-xcheckout > *{width:100%}
.drawer:focus{outline:none}
/* Closed drawer is also visibility:hidden so nothing in it can be tabbed to
   where inert is unsupported; visibility flips after the slide-out ends. */
.drawer{visibility:hidden;transition:transform .36s cubic-bezier(.2,.8,.2,1),visibility 0s linear .36s!important}
.drawer.open{visibility:visible;transition:transform .36s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s!important}

/* ---------- form results and contact labels ---------- */
form>.bb-form-msg{flex:1 1 100%}
form:has(>.bb-form-msg){flex-wrap:wrap}
.bb-ef~.bb-form-msg{color:inherit;font-weight:600}
.bb-ef~.bb-form-msg.err{color:#ff8a7a}
footer.site .bb-ef~.bb-form-msg.err,.card .bb-ef~.bb-form-msg.err{color:#b3261e}
.bb-cf-field{display:grid;gap:.35rem}
.bb-cf-label{font-size:.9rem;font-weight:600}
/* T4 header/footer (F-027): desktop submenus also open for keyboard focus;
   .bb-shut (Escape / outside click) wins over :hover and :focus-within */
.v74-menu .has-sub:focus-within>.v74-sub{opacity:1;visibility:visible;transform:translateY(0)}
.v74-menu li.has-sub.bb-shut>.v74-sub{opacity:0;visibility:hidden;transform:translateY(6px)}
/* T4 (F-012): country/region + language selectors. Render only on multi-market
   or multi-language stores; styled as small text links like the footer/social rows */
.bb-loc form{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin:0}
.bb-loc-select{-webkit-appearance:none;appearance:none;background:transparent;color:inherit;font:inherit;font-size:.82rem;line-height:1.3;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:.15rem 1rem .15rem 0;cursor:pointer;max-width:16rem;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 6px) 55%,calc(100% - 2px) 55%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.bb-loc-select option{color:#000004;background:#fefefe}
.bb-loc-select:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.bb-loc-head .bb-loc-select{font-size:.78rem}
.bb-loc-mobile{padding:1rem 20px 0}
.bb-loc-foot{margin-top:.2rem}
@media(max-width:860px){.bb-loc-head{display:none}}
/* F-025 stock sections: base/index.css is not loaded outside customers pages (layout/theme.html), so restore
   the two base rules the stock slideshow / carousels and text-columns-with-image depend on. Values from the stock
   base/index.css. Scoped to the stock wrappers on purpose: --page-padding and .page-width are not set globally. */
theme-carousel > ul.carousel__track{padding:0;margin:0;list-style:none}
.slideshow.page-width,.text-columns-with-image-section .page-width,.image-banner-section .page-width{--page-padding:30px;width:100%;max-width:calc(var(--page-padding) * 2 + var(--page-width));padding-inline:var(--page-padding);margin-inline:auto}
@media (max-width:959px){.slideshow.page-width,.text-columns-with-image-section .page-width,.image-banner-section .page-width{--page-padding:20px;max-width:100%}}

/* F-041: stock alignment utilities. The stock sections and blocks (image-with-text, text-columns-with-image,
   rich text, footer blocks ...) print text-{left|center|right} and text-{...}-mobile from the merchant's alignment
   settings, but base/index.css (where these live) only loads on customer pages. Copied verbatim from the stock
   base/index.css (same 959px breakpoint). No bb-* markup or budder.css rule uses these class names. */
.text-left{text-align:start}
.text-center{text-align:center}
.text-right{text-align:end}
@media (max-width:959px){
  .text-left-mobile{text-align:start}
  .text-center-mobile{text-align:center}
  .text-right-mobile{text-align:end}
}

/* T19 (F-041 sweep): the rest of the stock utilities that stock sections and blocks print and that only
   base/index.css defines (not loaded outside customers pages). Copied from the stock base/index.css. None of
   these class names is used by bb-* markup, budder.css or budder.js, so the Budder sections are untouched.
   Deliberately NOT restored: .grid (budder.css uses .grid for its own layouts), the title0-6 / body0-6
   typography scale (restored at the end of this file, F-065) and the
   .button colours/padding (stock buttons already carry the theme's .btn / .btn.ghost look). */
.hidden{display:none!important}
.hidden-empty:empty{display:none}
.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* stock button block: label centred on one line (layout only; the look comes from .btn). The platform's
   express checkout button (.pay-button-common-item, PDP) also carries .button and keeps its own rules. */
.button:not(.pay-button-common-item){position:relative;align-items:center;justify-content:center;text-align:center;white-space:nowrap;vertical-align:middle}
/* no "padding:0 1px" here (stock has it): the stock text-columns cards print an empty Link button when the card has
   no link label, and that padding gave each empty one a 27px line (Gwynnie Park page). Without it they stay 0x0. */
.button--link{position:relative;text-decoration:underline!important;text-underline-offset:6px}
.button--text{position:relative}
/* stock rich text (Rich text / Text blocks, footer and article content): .bb-rte is the Budder equivalent */
.rte{word-break:break-word}
.rte::after{display:block;clear:both;content:""}
.rte ul,.rte ol{padding:revert;margin:revert;list-style:revert}
.rte>p:first-child{margin-block-start:0}
.rte>p:last-child{margin-block-end:0}
.rte a,.rte a:hover{position:relative;padding:0 1px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.rte img,.rte video{max-width:100%;height:auto}
.rte iframe{max-width:100%}
.rte p img{vertical-align:bottom}
.rte table{table-layout:fixed}

/* T19 round 2: the other stock utilities that stock sections and blocks print and that only base/index.css defines.
   Copied from the stock base/index.css (same values, same 959/960px breakpoint). Checked with the rules on and off
   on 15 storefront pages at 390, 900 and 1440 (docs/browser/T19/r2): no element on a page the store shows today
   changes, because none of these class names is printed there; they make the stock sections and blocks a merchant
   adds look and behave as in the default theme. No bb-* markup, budder.css or budder.js uses these names. The
   platform's express checkout button (.pay-button-common-item) also carries .button and is left to its own rules.
   Still NOT restored (owner decision, docs/runs/T19/class-table.md; the typography scale is restored under F-065):
   .grid, and the stock .button colours, padding and borders. */
/* Q19-4: Link / Text style buttons are inline links; let a long label wrap instead of running off the screen */
.button.button--link,.button.button--text{white-space:normal;overflow-wrap:break-word}
.button--fill{width:100%}
.button:disabled:not(.pay-button-common-item),.button.disabled:not(.pay-button-common-item){cursor:not-allowed;opacity:.3}
.button__spinner{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:none;width:20px;height:20px;margin-block-start:-10px;margin-inline-start:-10px;color:rgb(var(--color-button-text))}
.button.loading:not(.pay-button-common-item){color:transparent}
.button.loading .button__spinner{display:flex;animation:animation-circling linear 1.5s infinite}
.loading--rotator{display:none}
.loading .loading--rotator{animation:animation-circling linear 1.5s infinite}
.loading>.loading--rotator{display:inline-flex}
.button.loading .loading--rotator{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:flex;width:20px;height:20px;margin-block-start:-10px;margin-inline-start:-10px;color:rgb(var(--color-button-text));content:""}
@keyframes animation-circling{0%{transform:rotate(0)}100%{transform:rotate(1turn)}}
.button--icon{position:relative;display:inline-flex;padding:0;color:inherit;text-decoration:none;cursor:pointer;background-color:transparent;border:none;transition:transform 300ms}
@media (min-width:960px){.button--icon:hover,.button--icon:focus{transform:scale(1.11)}}
.button--icon::after{display:none}
.button.button--icon:hover{background-color:transparent;box-shadow:none}
/* page width (Full screen / Fluid / Thin settings of the stock sections); --page-padding is set here, not on :root */
.page-width{--page-padding:30px;width:100%;max-width:calc(var(--page-padding) * 2 + var(--page-width));padding-inline:var(--page-padding);margin-inline:auto}
.page-width.page-width--fluid{max-width:100%}
.page-width.page-width--thin{max-width:726px}
@media (max-width:959px){.page-width{--page-padding:20px;max-width:100%}}
/* layout and text helpers */
.overflow-hidden{overflow:hidden}
.flex-align-center{display:flex;align-items:center}
.flex-justify-center{display:flex;justify-content:center}
.block-full-width{display:block;width:100%}
.tag-unstyled{padding:0;margin:0}
.list-unstyled{padding:0;margin:0;list-style:none}
.font-bold{font-weight:bold}
.title-font-bold{font-weight:var(--sort-title-font-weight-bold)!important}
.body-font-bold{font-weight:var(--sort-body-font-weight-bold)!important}
.hover-scale .hover-scale__image{transition:all .5s}
.hover-scale:hover .hover-scale__image{transform:scale(1.05)}
.schema-background{background-color:rgb(var(--color-background))}
/* card and modal border / shadow settings (Theme settings > Product card, Collection card, Card, Modal) */
.modal-border-shadow{box-sizing:border-box;border-color:rgba(var(--color-text),var(--modal-border-opacity));border-style:solid;border-width:var(--modal-border-thickness);border-radius:var(--modal-border-radius);box-shadow:var(--modal-shadow-offset-x) var(--modal-shadow-offset-y) var(--modal-shadow-blur) rgba(var(--color-shadow),var(--modal-shadow-opacity))}
.product-card-shadow-space{display:block;--product-card-shadow-space-top:max(0px,calc(var(--product-card-shadow-blur) - var(--product-card-shadow-offset-y)));--product-card-shadow-space-bottom:max(0px,calc(var(--product-card-shadow-blur) + var(--product-card-shadow-offset-y)));--product-card-shadow-space-start:max(0px,calc(var(--product-card-shadow-blur) - var(--product-card-shadow-offset-x)));--product-card-shadow-space-end:max(0px,calc(var(--product-card-shadow-blur) + var(--product-card-shadow-offset-x)));padding-block:var(--product-card-shadow-space-top) var(--product-card-shadow-space-bottom);padding-inline:var(--product-card-shadow-space-start) var(--product-card-shadow-space-end)}
.collection-card-border-shadow{box-sizing:border-box;overflow:hidden;border-color:rgba(var(--color-text),var(--collection-card-border-opacity));border-style:solid;border-width:var(--collection-card-border-thickness)!important;border-radius:var(--collection-card-border-radius);box-shadow:var(--collection-card-shadow-offset-x) var(--collection-card-shadow-offset-y) var(--collection-card-shadow-blur) rgba(var(--color-shadow),var(--collection-card-shadow-opacity))}
.collection-card-shadow-space{display:block;--collection-card-shadow-space-top:max(0px,calc(var(--collection-card-shadow-blur) - var(--collection-card-shadow-offset-y)));--collection-card-shadow-space-bottom:max(0px,calc(var(--collection-card-shadow-blur) + var(--collection-card-shadow-offset-y)));--collection-card-shadow-space-start:max(0px,calc(var(--collection-card-shadow-blur) - var(--collection-card-shadow-offset-x)));--collection-card-shadow-space-end:max(0px,calc(var(--collection-card-shadow-blur) + var(--collection-card-shadow-offset-x)));padding-block:var(--collection-card-shadow-space-top) var(--collection-card-shadow-space-bottom);padding-inline:var(--collection-card-shadow-space-start) var(--collection-card-shadow-space-end)}
.card-border-shadow{box-sizing:border-box;overflow:hidden;border-color:rgba(var(--color-text),var(--card-border-opacity));border-style:solid;border-width:var(--card-border-thickness)!important;border-radius:var(--card-border-radius);box-shadow:var(--card-shadow-offset-x) var(--card-shadow-offset-y) var(--card-shadow-blur) rgba(var(--color-shadow),var(--card-shadow-opacity))}
/* stock price (product cards, product info) and the "View more / View less" toggle of the stock quantity block */
.product-price{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}
.product-price__item{display:inline}
.product-price__sale{color:rgb(var(--color-sale))}
.product-price__origin{color:rgb(var(--color-light-text));text-decoration:line-through}
.product-price__save--text-style{color:rgb(var(--color-discount))}
.product-price__save--button-style{padding:2px 8px;color:rgb(var(--color-tag-text));background-color:rgb(var(--color-tag-background));border-radius:var(--save-button-radius)}
@layer component{theme-show-more:empty{display:none}theme-show-more:not([open]) [data-more="true"],theme-show-more:not([open]) .view-less{display:none!important}theme-show-more[open] .view-more{display:none!important}}

/* F-033: bb-hero "Headline heading level" = H2. budder.css sizes the desktop hero title with ".v13-hero h1"
   element selectors; these mirror them for an h2 title at the same specificity (:where adds none) and in the
   same order, so an H2 hero looks exactly like the H1 one. The mobile title is styled by class only. */
.v13-hero h2:where(.v23-hero-title){font-size:clamp(4.3rem,6.7vw,7rem);line-height:.83;letter-spacing:-.028em;max-width:none;text-wrap:balance}
.v13-hero h2:where(.v23-hero-title) span{display:block;white-space:nowrap}
@media(max-width:700px){
  .v13-hero h2:where(.v23-hero-title){font-size:clamp(3rem,12.7vw,4rem);line-height:.84;letter-spacing:-.025em;max-width:9.4ch}
  .v13-hero h2:where(.v23-hero-title) span{white-space:normal}
}
@media(min-width:861px){
  body .bb-s .v13-hero h2:where(.v23-hero-title){font-size:clamp(4.6rem,7.3vw,7.5rem)!important;line-height:.83!important;max-width:8.8ch!important;letter-spacing:-.03em!important}
  body .bb-s .v13-hero h2:where(.v23-hero-title){max-width:7.8ch!important;font-size:clamp(4.6rem,6.5vw,7rem)!important;line-height:.84!important;letter-spacing:-.035em!important}
}

/* F-065 (owner-approved, option A as a fluid brand scale): the Typography select of the stock sections and blocks
   (Title 0-6 / Body 0-6, and the Mobile typography select). The stock scale lives in base/index.css, which loads only
   on customer pages, so it did nothing anywhere else. Restored here with the values from Theme settings > Typography,
   which are set to the brand (Archivo Black caps, Open Sans, the Budder letter spacing and line heights). Titles follow
   Budder's fluid heading curves instead of the stock fixed size + mobile ratio, so the stock blocks look as before:
   Title 0-1 = the budder.css h1 curve clamp(2.4rem,6.5vw,5.2rem), Title 2-6 = the h2 curve clamp(1.8rem,4vw,3rem), with
   the setting as the desktop size (--bb-ts*, components/bb/vars.html). Body sizes do not shrink on mobile (Budder body
   text does not). One class of specificity, as in the stock rules, so a stock section's own CSS and a section's
   custom CSS still win as in the default theme. Customer pages keep base/index.css. The platform's express checkout
   text (.pay-button-*, PDP) also prints body3 and keeps its own font. No bb-* markup uses these class names. */
:where(body:not([data-page-type*="customers"])) :is(.title0,.title1,.title2,.title3,.title4,.title5,.title6):not(:where([class*="pay-button"])){font-family:var(--bb-tf),sans-serif;font-size:var(--bb-tz);font-style:var(--bb-tst);font-weight:var(--bb-tw);line-height:var(--bb-tlh);letter-spacing:var(--bb-tls);text-transform:var(--bb-ttt);word-break:break-word}
:where(body:not([data-page-type*="customers"])) :is(.body0,.body1,.body2,.body3,.body4,.body5,.body6):not(:where([class*="pay-button"])){font-family:var(--bb-bf),sans-serif;font-size:var(--bb-bz);font-style:var(--bb-bst);font-weight:var(--bb-bw);line-height:var(--bb-blh);letter-spacing:var(--bb-bls);word-break:break-word}
.title0{--bb-tf:var(--sort-title0-font);--bb-tz:clamp(calc(var(--bb-ts0) * 6px / 13),calc(var(--bb-ts0) * 5vw / 64),calc(var(--bb-ts0) * 1px));--bb-tst:var(--sort-title0-font-style);--bb-tw:var(--sort-title0-font-weight);--bb-tlh:var(--sort-title0-line-height);--bb-tls:var(--sort-title0-letter-spacing);--bb-ttt:var(--sort-title0-text-transform)}
.title1{--bb-tf:var(--sort-title1-font);--bb-tz:clamp(calc(var(--bb-ts1) * 6px / 13),calc(var(--bb-ts1) * 5vw / 64),calc(var(--bb-ts1) * 1px));--bb-tst:var(--sort-title1-font-style);--bb-tw:var(--sort-title1-font-weight);--bb-tlh:var(--sort-title1-line-height);--bb-tls:var(--sort-title1-letter-spacing);--bb-ttt:var(--sort-title1-text-transform)}
.title2{--bb-tf:var(--sort-title2-font);--bb-tz:clamp(calc(var(--bb-ts2) * 3px / 5),calc(var(--bb-ts2) * 1vw / 12),calc(var(--bb-ts2) * 1px));--bb-tst:var(--sort-title2-font-style);--bb-tw:var(--sort-title2-font-weight);--bb-tlh:var(--sort-title2-line-height);--bb-tls:var(--sort-title2-letter-spacing);--bb-ttt:var(--sort-title2-text-transform)}
.title3{--bb-tf:var(--sort-title3-font);--bb-tz:clamp(calc(var(--bb-ts3) * 3px / 5),calc(var(--bb-ts3) * 1vw / 12),calc(var(--bb-ts3) * 1px));--bb-tst:var(--sort-title3-font-style);--bb-tw:var(--sort-title3-font-weight);--bb-tlh:var(--sort-title3-line-height);--bb-tls:var(--sort-title3-letter-spacing);--bb-ttt:var(--sort-title3-text-transform)}
.title4{--bb-tf:var(--sort-title4-font);--bb-tz:clamp(calc(var(--bb-ts4) * 3px / 5),calc(var(--bb-ts4) * 1vw / 12),calc(var(--bb-ts4) * 1px));--bb-tst:var(--sort-title4-font-style);--bb-tw:var(--sort-title4-font-weight);--bb-tlh:var(--sort-title4-line-height);--bb-tls:var(--sort-title4-letter-spacing);--bb-ttt:var(--sort-title4-text-transform)}
.title5{--bb-tf:var(--sort-title5-font);--bb-tz:clamp(calc(var(--bb-ts5) * 3px / 5),calc(var(--bb-ts5) * 1vw / 12),calc(var(--bb-ts5) * 1px));--bb-tst:var(--sort-title5-font-style);--bb-tw:var(--sort-title5-font-weight);--bb-tlh:var(--sort-title5-line-height);--bb-tls:var(--sort-title5-letter-spacing);--bb-ttt:var(--sort-title5-text-transform)}
.title6{--bb-tf:var(--sort-title6-font);--bb-tz:clamp(calc(var(--bb-ts6) * 3px / 5),calc(var(--bb-ts6) * 1vw / 12),calc(var(--bb-ts6) * 1px));--bb-tst:var(--sort-title6-font-style);--bb-tw:var(--sort-title6-font-weight);--bb-tlh:var(--sort-title6-line-height);--bb-tls:var(--sort-title6-letter-spacing);--bb-ttt:var(--sort-title6-text-transform)}
.body0{--bb-bf:var(--sort-body0-font);--bb-bz:var(--sort-body0-size);--bb-bst:var(--sort-body0-style);--bb-bw:var(--sort-body0-font-weight);--bb-blh:var(--sort-body0-line-height);--bb-bls:var(--sort-body0-letter-spacing)}
.body1{--bb-bf:var(--sort-body1-font);--bb-bz:var(--sort-body1-size);--bb-bst:var(--sort-body1-style);--bb-bw:var(--sort-body1-font-weight);--bb-blh:var(--sort-body1-line-height);--bb-bls:var(--sort-body1-letter-spacing)}
.body2{--bb-bf:var(--sort-body2-font);--bb-bz:var(--sort-body2-size);--bb-bst:var(--sort-body2-style);--bb-bw:var(--sort-body2-font-weight);--bb-blh:var(--sort-body2-line-height);--bb-bls:var(--sort-body2-letter-spacing)}
.body3{--bb-bf:var(--sort-body3-font);--bb-bz:var(--sort-body3-size);--bb-bst:var(--sort-body3-style);--bb-bw:var(--sort-body3-font-weight);--bb-blh:var(--sort-body3-line-height);--bb-bls:var(--sort-body3-letter-spacing)}
.body4{--bb-bf:var(--sort-body4-font);--bb-bz:var(--sort-body4-size);--bb-bst:var(--sort-body4-style);--bb-bw:var(--sort-body4-font-weight);--bb-blh:var(--sort-body4-line-height);--bb-bls:var(--sort-body4-letter-spacing)}
.body5{--bb-bf:var(--sort-body5-font);--bb-bz:var(--sort-body5-size);--bb-bst:var(--sort-body5-style);--bb-bw:var(--sort-body5-font-weight);--bb-blh:var(--sort-body5-line-height);--bb-bls:var(--sort-body5-letter-spacing)}
.body6{--bb-bf:var(--sort-body6-font);--bb-bz:var(--sort-body6-size);--bb-bst:var(--sort-body6-style);--bb-bw:var(--sort-body6-font-weight);--bb-blh:var(--sort-body6-line-height);--bb-bls:var(--sort-body6-letter-spacing)}
@media (max-width:959px){
  :where(body:not([data-page-type*="customers"])) :is(.mobile-title0,.mobile-title1,.mobile-title2,.mobile-title3,.mobile-title4,.mobile-title5,.mobile-title6):not(:where([class*="pay-button"])){font-family:var(--bb-tf),sans-serif;font-size:var(--bb-tz);font-style:var(--bb-tst);font-weight:var(--bb-tw);line-height:var(--bb-tlh);letter-spacing:var(--bb-tls);text-transform:var(--bb-ttt);word-break:break-word}
  :where(body:not([data-page-type*="customers"])) :is(.mobile-body0,.mobile-body1,.mobile-body2,.mobile-body3,.mobile-body4,.mobile-body5,.mobile-body6):not(:where([class*="pay-button"])){font-family:var(--bb-bf),sans-serif;font-size:var(--bb-bz);font-style:var(--bb-bst);font-weight:var(--bb-bw);line-height:var(--bb-blh);letter-spacing:var(--bb-bls);word-break:break-word}
  .mobile-title0{--bb-tf:var(--sort-title0-font);--bb-tz:clamp(calc(var(--bb-ts0) * 6px / 13),calc(var(--bb-ts0) * 5vw / 64),calc(var(--bb-ts0) * 1px));--bb-tst:var(--sort-title0-font-style);--bb-tw:var(--sort-title0-font-weight);--bb-tlh:var(--sort-title0-line-height);--bb-tls:var(--sort-title0-letter-spacing);--bb-ttt:var(--sort-title0-text-transform)}
  .mobile-title1{--bb-tf:var(--sort-title1-font);--bb-tz:clamp(calc(var(--bb-ts1) * 6px / 13),calc(var(--bb-ts1) * 5vw / 64),calc(var(--bb-ts1) * 1px));--bb-tst:var(--sort-title1-font-style);--bb-tw:var(--sort-title1-font-weight);--bb-tlh:var(--sort-title1-line-height);--bb-tls:var(--sort-title1-letter-spacing);--bb-ttt:var(--sort-title1-text-transform)}
  .mobile-title2{--bb-tf:var(--sort-title2-font);--bb-tz:clamp(calc(var(--bb-ts2) * 3px / 5),calc(var(--bb-ts2) * 1vw / 12),calc(var(--bb-ts2) * 1px));--bb-tst:var(--sort-title2-font-style);--bb-tw:var(--sort-title2-font-weight);--bb-tlh:var(--sort-title2-line-height);--bb-tls:var(--sort-title2-letter-spacing);--bb-ttt:var(--sort-title2-text-transform)}
  .mobile-title3{--bb-tf:var(--sort-title3-font);--bb-tz:clamp(calc(var(--bb-ts3) * 3px / 5),calc(var(--bb-ts3) * 1vw / 12),calc(var(--bb-ts3) * 1px));--bb-tst:var(--sort-title3-font-style);--bb-tw:var(--sort-title3-font-weight);--bb-tlh:var(--sort-title3-line-height);--bb-tls:var(--sort-title3-letter-spacing);--bb-ttt:var(--sort-title3-text-transform)}
  .mobile-title4{--bb-tf:var(--sort-title4-font);--bb-tz:clamp(calc(var(--bb-ts4) * 3px / 5),calc(var(--bb-ts4) * 1vw / 12),calc(var(--bb-ts4) * 1px));--bb-tst:var(--sort-title4-font-style);--bb-tw:var(--sort-title4-font-weight);--bb-tlh:var(--sort-title4-line-height);--bb-tls:var(--sort-title4-letter-spacing);--bb-ttt:var(--sort-title4-text-transform)}
  .mobile-title5{--bb-tf:var(--sort-title5-font);--bb-tz:clamp(calc(var(--bb-ts5) * 3px / 5),calc(var(--bb-ts5) * 1vw / 12),calc(var(--bb-ts5) * 1px));--bb-tst:var(--sort-title5-font-style);--bb-tw:var(--sort-title5-font-weight);--bb-tlh:var(--sort-title5-line-height);--bb-tls:var(--sort-title5-letter-spacing);--bb-ttt:var(--sort-title5-text-transform)}
  .mobile-title6{--bb-tf:var(--sort-title6-font);--bb-tz:clamp(calc(var(--bb-ts6) * 3px / 5),calc(var(--bb-ts6) * 1vw / 12),calc(var(--bb-ts6) * 1px));--bb-tst:var(--sort-title6-font-style);--bb-tw:var(--sort-title6-font-weight);--bb-tlh:var(--sort-title6-line-height);--bb-tls:var(--sort-title6-letter-spacing);--bb-ttt:var(--sort-title6-text-transform)}
  .mobile-body0{--bb-bf:var(--sort-body0-font);--bb-bz:var(--sort-body0-size);--bb-bst:var(--sort-body0-style);--bb-bw:var(--sort-body0-font-weight);--bb-blh:var(--sort-body0-line-height);--bb-bls:var(--sort-body0-letter-spacing)}
  .mobile-body1{--bb-bf:var(--sort-body1-font);--bb-bz:var(--sort-body1-size);--bb-bst:var(--sort-body1-style);--bb-bw:var(--sort-body1-font-weight);--bb-blh:var(--sort-body1-line-height);--bb-bls:var(--sort-body1-letter-spacing)}
  .mobile-body2{--bb-bf:var(--sort-body2-font);--bb-bz:var(--sort-body2-size);--bb-bst:var(--sort-body2-style);--bb-bw:var(--sort-body2-font-weight);--bb-blh:var(--sort-body2-line-height);--bb-bls:var(--sort-body2-letter-spacing)}
  .mobile-body3{--bb-bf:var(--sort-body3-font);--bb-bz:var(--sort-body3-size);--bb-bst:var(--sort-body3-style);--bb-bw:var(--sort-body3-font-weight);--bb-blh:var(--sort-body3-line-height);--bb-bls:var(--sort-body3-letter-spacing)}
  .mobile-body4{--bb-bf:var(--sort-body4-font);--bb-bz:var(--sort-body4-size);--bb-bst:var(--sort-body4-style);--bb-bw:var(--sort-body4-font-weight);--bb-blh:var(--sort-body4-line-height);--bb-bls:var(--sort-body4-letter-spacing)}
  .mobile-body5{--bb-bf:var(--sort-body5-font);--bb-bz:var(--sort-body5-size);--bb-bst:var(--sort-body5-style);--bb-bw:var(--sort-body5-font-weight);--bb-blh:var(--sort-body5-line-height);--bb-bls:var(--sort-body5-letter-spacing)}
  .mobile-body6{--bb-bf:var(--sort-body6-font);--bb-bz:var(--sort-body6-size);--bb-bst:var(--sort-body6-style);--bb-bw:var(--sort-body6-font-weight);--bb-blh:var(--sort-body6-line-height);--bb-bls:var(--sort-body6-letter-spacing)}
}