/* BYP 3-pack V11 buy box (product 152584). Every colour, size, weight and radius comes from the site design tokens
   (mu-plugin 52-bollsen-tokens, source: Design System/bollsen/foundations/tokens.css); fallbacks = token values.
   The only per-page colours are the season's campaign colours from the config block (--byp-accent, --byp-on, --byp-tint),
   used where Alen's simulation uses them: Add to basket, Sale badge, offer line, Save pill, 6-pairs box, tinted bands. */

/* hide the default bundle item list from the first paint (html.byp-js is set in <head>); the inputs stay in the form
   and submit. Until the script has built the buy box, hold its height so the button does not jump. */
.byp-js .postid-152584 form.bundle_form .bundled_product,
.byp-js .postid-152584 form.bundle_form .bundle_availability{display:none!important}
.byp-js .postid-152584 form.bundle_form:not(.byp-on)::before{content:"";display:block;height:330px}

/* description under the title: UI body size, muted */
.postid-152584 .product-summary .product-short-description{font-size:var(--size-body,15px);font-weight:var(--weight-body,500);line-height:1.45;color:var(--muted-2,#5b5f80);margin-bottom:10px}
.postid-152584 .product-summary .product-short-description p{margin:0}

/* price block: price + struck "if bought separately" on one line, saving pill, per-pair line */
.postid-152584 .price-wrapper.byp-pricebox{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:12px}
.postid-152584 .price.byp-price{margin:0}
.postid-152584 .price.byp-price del,.postid-152584 .price.byp-price .screen-reader-text{display:none}
.postid-152584 .price.byp-price ins{text-decoration:none}
.postid-152584 .product-summary .price.byp-price,.postid-152584 .product-summary .price.byp-price .amount{font-size:var(--size-section,28px);line-height:1.15;font-weight:var(--weight-headline,800);color:var(--navy,#13152b)}
.byp-strike{font-size:var(--size-body,15px);color:var(--muted-2,#5b5f80)}
.byp-strike s{color:var(--sale,#b3000f);font-weight:var(--weight-bold,700);text-decoration-thickness:2px}
.byp-save,.byp-pp{flex:0 0 100%}
.byp-save span{display:inline-block;margin-top:6px;background:var(--byp-tint,var(--success-soft,#e3f4ea));border-radius:var(--radius-sm,8px);padding:3px 9px;font-size:var(--size-small,13px);font-weight:var(--weight-bold,700);color:var(--navy,#13152b)}
.byp-save:empty{display:none}
.byp-pp{font-size:var(--size-small,13px);color:var(--muted-2,#5b5f80);margin-top:4px}

.byp{display:grid;gap:14px;margin:4px 0 16px}
.byp-lbl{display:block;font-size:var(--size-kicker,11px);font-weight:var(--weight-bold,700);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2,#5b5f80);margin:0 0 6px;width:100%}
.byp-when{display:flex;gap:8px;align-items:center;background:var(--byp-tint,var(--bg-soft,#f5f6fb));border-radius:var(--radius-sm,8px);padding:8px 10px;font-size:var(--size-small,13px);font-weight:var(--weight-label,600);color:var(--navy,#13152b)}
.byp-when::before{content:"";width:8px;height:8px;border-radius:var(--radius-round,50%);background:var(--byp-accent,var(--amber,#ffbc03));flex:none}

.byp-packs{display:flex;flex-wrap:wrap;gap:6px}
.byp-packs button,.byp-chips button{margin:0;border:1px solid var(--line,#e3e5f0);background:var(--bg,#fff);border-radius:var(--radius-pill,999px);padding:7px 13px;font-size:var(--size-small,13px);font-weight:var(--weight-label,600);line-height:1.2;color:var(--navy,#13152b);text-transform:none;letter-spacing:0;min-height:0}
.byp-packs button[aria-pressed="true"]{border-color:var(--navy,#13152b);box-shadow:inset 0 0 0 1px var(--navy,#13152b)}
.byp-chips button[aria-pressed="true"]{background:var(--navy,#13152b);border-color:var(--navy,#13152b);color:#fff}

.byp-slots{display:grid;gap:6px}
.byp-slot{border:1px solid var(--line,#e3e5f0);border-radius:var(--radius-card,12px);background:var(--bg,#fff);overflow:hidden}
.byp-slot.is-open{border-color:var(--navy,#13152b)}
.byp-srow{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:6px 12px 6px 6px;border:0;background:transparent;text-align:left;text-transform:none;letter-spacing:0;min-height:0;line-height:1.2;color:var(--navy,#13152b)}
.byp-srow img{width:40px;height:40px;border-radius:var(--radius-sm,8px);object-fit:cover;margin:0;flex:none}
.byp-sname{flex:1;min-width:0}
.byp-sname b{display:block;font-size:var(--size-body,15px);font-weight:var(--weight-bold,700)}
.byp-use{font-size:var(--size-caption,12px);font-weight:var(--weight-body,500);color:var(--muted-2,#5b5f80)}
.byp-change{font-size:var(--size-small,13px);font-weight:var(--weight-bold,700);text-decoration:underline;text-underline-offset:2px;color:var(--navy,#13152b)}
.byp-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 12px 12px}

.byp-upsell{border:1.5px dashed var(--byp-accent,var(--amber,#ffbc03));border-radius:var(--radius-sm,8px);padding:10px 12px;background:var(--byp-tint,var(--bg-soft,#f5f6fb))}
.byp-upsell,.byp-gift{display:flex;gap:10px;align-items:center;font-size:var(--size-body,15px);font-weight:var(--weight-body,500);line-height:1.4;cursor:pointer;margin:0;color:var(--ink,#1d2036)}
.byp-upsell b{color:var(--navy,#13152b)}
.byp-upsell input,.byp-gift input{margin:0;width:18px;height:18px;accent-color:var(--navy,#13152b);flex:none}

.byp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bg,#fff);border-top:1px solid var(--line,#e3e5f0);box-shadow:var(--elev-modal,0 24px 40px rgba(19,21,43,.14));padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.byp-sticky[hidden]{display:none}
.byp-sin{display:flex;gap:10px;align-items:center;max-width:1020px;margin:0 auto}
.byp-sticky .byp-sum{font-size:var(--size-caption,12px);font-weight:var(--weight-bold,700);line-height:1.25;color:var(--navy,#13152b);min-width:0}
.byp-sticky .byp-sum small{display:none;font-size:var(--size-small,13px);font-weight:var(--weight-body,500);color:var(--muted-2,#5b5f80)}
.byp-sticky .byp-sprice{font-size:var(--size-body,15px);font-weight:var(--weight-headline,800);color:var(--navy,#13152b);white-space:nowrap}
.byp-sticky .button{flex:1;margin:0;border-radius:var(--radius-sm,8px)}
/* phones: label + price stacked on the left, button fills the rest */
@media (max-width:849px){.byp-sin{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px}.byp-sticky .byp-sum{grid-row:1}.byp-sticky .byp-sprice{grid-row:2;grid-column:1}.byp-sticky .button{grid-row:1/3;grid-column:2}}
/* desktop: pack + pairs on the left, price and a fixed-width button on the right */
@media (min-width:850px){.byp-sticky{padding:12px 24px}.byp-sticky .byp-sum{flex:1;font-size:var(--size-body,15px)}.byp-sticky .byp-sum small{display:block;margin-top:2px}.byp-sticky .byp-sprice{font-size:var(--size-h3,19px)}.byp-sticky .button{flex:0 0 260px}}
/* ---------- below the buy box (Alen's V11 layout, on site tokens) ---------- */
.byp-sec{padding:44px 24px;border-top:1px solid var(--line,#e3e5f0);color:var(--ink,#1d2036)}
.byp-sec.byp-tint{background:var(--byp-tint,var(--bg-soft,#f5f6fb));border-top:0}
.byp-in{max-width:980px;margin:0 auto}
.byp-sec h2,.byp-h{margin:0 0 18px;font-size:var(--size-section,28px);line-height:var(--leading-heading,1.2);font-weight:var(--weight-headline,800);color:var(--navy,#13152b);text-align:center;text-wrap:balance}
.byp-lead{margin:-8px auto 20px;max-width:60ch;text-align:center;font-size:var(--size-body,15px);color:var(--muted-2,#5b5f80)}
.byp-kick{font-size:var(--size-kicker,11px);font-weight:var(--weight-bold,700);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2,#5b5f80)}
.byp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.byp-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;font-size:var(--size-body,15px)}
.byp-step i{width:40px;height:40px;border-radius:var(--radius-round,50%);background:var(--navy,#13152b);color:var(--amber,#ffbc03);font-style:normal;font-weight:var(--weight-headline,800);display:grid;place-items:center}
.byp-step b{display:block;color:var(--navy,#13152b);font-weight:var(--weight-bold,700)}
.byp-step b+span{font-size:var(--size-small,13px);color:var(--muted-2,#5b5f80)}
.byp-outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.byp-out{background:var(--bg-soft,#f5f6fb);border-radius:var(--radius-card,12px);overflow:hidden;display:grid;align-content:start}
.byp-out img{width:100%;aspect-ratio:4/3;object-fit:cover;margin:0}
.byp-out div{padding:12px 14px;display:grid;gap:4px}
.byp-out b{font-size:var(--size-body,15px);color:var(--navy,#13152b)}
.byp-out span:not(.byp-kick){font-size:var(--size-small,13px);color:var(--muted-2,#5b5f80)}
.byp-proof{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
.byp-score{background:var(--bg-soft,#f5f6fb);border-radius:var(--radius-card,12px);padding:16px;text-align:center;display:grid;gap:4px}
.byp-score b{font-size:var(--size-h1,40px);line-height:1;font-weight:var(--weight-headline,800);color:var(--navy,#13152b)}
.byp-stars{color:var(--star,#f99b1c);letter-spacing:2px}
.byp-score small{color:var(--muted-2,#5b5f80);font-size:var(--size-caption,12px)}
.byp-topics{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px}
.byp-topics span{font-size:var(--size-caption,12px);font-weight:var(--weight-bold,700);background:var(--bg,#fff);border:1px solid var(--line,#e3e5f0);border-radius:var(--radius-pill,999px);padding:3px 9px;color:var(--navy,#13152b)}
.byp-revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.byp-rv{border:1px solid var(--line,#e3e5f0);border-radius:var(--radius-card,12px);padding:14px;display:grid;gap:6px;align-content:start;font-size:var(--size-body,15px)}
.byp-rv q{font-weight:var(--weight-label,600);color:var(--navy,#13152b)}
.byp-rv small{color:var(--muted-2,#5b5f80);font-size:var(--size-small,13px)}
.byp-cmpw{overflow-x:auto}
.byp-cmp{width:100%;border-collapse:collapse;min-width:520px;font-size:var(--size-body,15px);margin:0}
.byp-cmp th,.byp-cmp td{padding:11px 12px;border:0;border-bottom:1px solid var(--line,#e3e5f0);text-align:center;color:var(--ink,#1d2036)}
.byp-cmp th:first-child,.byp-cmp td:first-child{text-align:left;font-weight:var(--weight-label,600)}
.byp-cmp thead th{font-size:var(--size-small,13px);font-weight:var(--weight-bold,700);color:var(--navy,#13152b);text-transform:none;letter-spacing:0}
.byp-cmp .us{background:var(--byp-tint,var(--bg-soft,#f5f6fb));font-weight:var(--weight-headline,800);color:var(--navy,#13152b)}
.byp-tint .byp-cmp .us{background:var(--bg,#fff)}
.byp-cmp thead .us{border-radius:var(--radius-sm,8px) var(--radius-sm,8px) 0 0}
.byp-cmp .y{color:var(--success,#1d7a4f);font-weight:var(--weight-bold,700)}
.byp-cmp .n{color:var(--muted-light,#8a8fa8)}
.byp-faq{max-width:760px!important;margin-left:auto!important;margin-right:auto!important}
/* expert block sits right under its heading: drop the section's and the block's own top padding */
.byp-exp-life,.byp-exp-music,.byp-exp-life .bxc,.byp-exp-music .bxc{padding-top:0!important}
/* FAQ as white cards (Alen's layout) on the site accordion, which keeps the page's one FAQPage schema */
.byp-faq .accordion{display:grid;gap:8px}
.byp-faq .accordion-item{background:var(--bg,#fff);border:1px solid var(--line,#e3e5f0);border-radius:var(--radius-card,12px);overflow:hidden}
.byp-faq .accordion-title{position:relative;border:0!important;padding:13px 44px 13px 16px!important;font-size:var(--size-body,15px);font-weight:var(--weight-bold,700);color:var(--navy,#13152b)!important;background:transparent!important}
.byp-faq .accordion-title .toggle{display:none}
.byp-faq .accordion-title::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:18px;line-height:1;color:var(--muted-2,#5b5f80)}
.byp-faq .accordion-title.active::after,.byp-faq .accordion-title[aria-expanded="true"]::after{content:"–"}
.byp-faq .accordion-inner{padding:0 16px 14px!important;font-size:var(--size-body,15px);color:var(--muted-2,#5b5f80)}
.byp-faq .accordion-inner p{margin:0}
.byp-step b .amount,.byp-cmp .amount,.byp-was-fill{font-size:inherit;font-weight:inherit;color:inherit}
.byp-faq-band{background:var(--byp-tint,var(--bg-soft,#f5f6fb))}
.byp-guar{display:flex;gap:16px;align-items:center;justify-content:center;max-width:720px;margin:0 auto}
.byp-seal{flex:none;width:76px;height:76px;border-radius:var(--radius-round,50%);border:3px solid var(--navy,#13152b);display:grid;place-items:center;text-align:center;font-weight:var(--weight-headline,800);font-size:var(--size-caption,12px);line-height:1.1;color:var(--navy,#13152b)}
.byp-seal b{font-size:var(--size-h2,22px);display:block}
.byp-guar p{margin:0;color:var(--muted-2,#5b5f80);font-size:var(--size-body,15px)}
.byp-guar p b{color:var(--navy,#13152b)}
/* expert: Melita by default, UMEK when the first pair is Music SoundPRO */
.byp-exp-music,.byp-first-music .byp-exp-life{display:none!important}
.byp-first-music .byp-exp-music{display:block!important}
@media (max-width:849px){
 .byp-sec{padding:32px 16px}
 .byp-sec h2,.byp-h{font-size:24px}
 .byp-steps,.byp-revs,.byp-proof{grid-template-columns:minmax(0,1fr)}
 .byp-outs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(200px,70%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
 .byp-out{scroll-snap-align:start}
}
/* season accent on the buttons and the Sale badge (text colour = --byp-on, so light accents keep dark text) */
.postid-152584 form.bundle_form .single_add_to_cart_button,.byp-sticky .button{background:var(--byp-accent,var(--amber,#ffbc03))!important;border-color:var(--byp-accent,var(--amber,#ffbc03))!important;color:var(--byp-on,var(--navy,#13152b))!important}
.postid-152584 .product-gallery .badge-inner.on-sale,.postid-152584 .product-images .badge-inner.on-sale{background:var(--byp-accent,var(--amber,#ffbc03))!important;color:var(--byp-on,var(--navy,#13152b))!important}
@media (prefers-reduced-motion:reduce){.byp *{transition:none!important}}
