/** Shopify CDN: Minification failed

Line 860:0 All "@import" rules must come first

**/
/* AI 2026-11-04 (Chris: tidy up): ONE stylesheet for the BFCM home sections. Built by concatenating the former
   per-round files in their effective cascade order (last appearance on the home page): bfcm-boost.css, bfcm-ghost.css, bfcm-ext.css, bfcm-incart.css, bfcm-round4.css, bfcm-final.css, bfcm-final2.css, bfcm-final3.css, bfcm-2026-plus.css, bfcm-2026.css, bfcm-wow.css, bfcm-wow2.css, bfcm-mobile.css.
   Edit here from now on; the old files are no longer loaded. */

/* ===== from bfcm-boost.css ===== */
/* AI 2026-11-01 V27: ALL header / announcement bar / mega menu / dropdown / cart overrides REMOVED. The theme's own header, announcement bar, menus, cart drawer and language/country dropdowns run untouched. Only BFCM section rules remain below. */

.bfcm-hero__grid{padding-top:clamp(4px,1vw,16px);padding-bottom:clamp(56px,6vw,96px);align-items:center}
.bfcm-collage{width:104%;margin-left:-4%;aspect-ratio:1/.9;max-width:none}
.bfcm-card--l{--r:-6deg;left:0;top:15%;width:36%;z-index:1}
.bfcm-card--c{--r:0deg;left:27%;top:2%;width:50%;z-index:3}
.bfcm-card--r{--r:5deg;left:72%;top:14%;width:28%;z-index:2}
.bfcm-card__img,.bfcm-card__ph{aspect-ratio:3/4.15}
.bfcm-card--l .bfcm-card__img,.bfcm-card--l .bfcm-card__ph,
.bfcm-card--r .bfcm-card__img,.bfcm-card--r .bfcm-card__ph{aspect-ratio:3/4.4}
.bfcm-card__foot{min-height:0;aspect-ratio:7/1}
.bfcm-card--c .bfcm-card__foot{min-height:0;aspect-ratio:3.4/1;padding:0 7%;display:flex;align-items:center;justify-content:flex-start}
.bfcm-badge b{font-size:clamp(40px,5.2vw,96px)}
.bfcm-badge small{font-size:clamp(11px,1.3vw,22px)}

@media(min-width:750px){
  .bfcm-hero__grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);padding-top:clamp(8px,1.2vw,20px)}
  .bfcm-collage{width:108%;margin-left:-4%;aspect-ratio:1/.86}
  .bfcm-card--l{left:0;top:17%;width:34%}
  .bfcm-card--c{left:26%;top:0;width:48%}
  .bfcm-card--r{left:71%;top:15%;width:29%}
  .bfcm-badge b{font-size:clamp(48px,6.4vw,118px)}
  .bfcm-badge small{font-size:clamp(12px,1.6vw,28px)}
}

@media(max-width:749px){
  .bfcm-collage{width:100%;margin:20px 0 0;aspect-ratio:1/.95}
  .bfcm-card--l{left:0;width:38%}
  .bfcm-card--c{left:25%;width:50%}
  .bfcm-card--r{left:70%;width:30%}
  .bfcm-badge b{font-size:clamp(30px,10.5vw,52px)}
  .bfcm-badge small{font-size:clamp(9px,3vw,14px)}
}

/* ===== V20 cutout fixes ===== */
.bfcm .bfcm-dcard__img,.bfcm .bfcm-panel2 img{mix-blend-mode:normal}
.bfcm .bfcm-dcard__stage{background:#fff}
.bfcm .bfcm-dcard__img{object-fit:cover;object-position:center top}
.bfcm .bfcm-cut-pending{opacity:0}
.bfcm .bfcm-cut-done{opacity:1;transition:opacity .25s ease}
.bfcm .bfcm-piece__img{object-fit:contain;background:#fff;aspect-ratio:5/4}
.bfcm .bfcm-look__hero::before{display:none}

/* ===== V21 look hero ===== */
.bfcm .bfcm-look__heroimg{
  filter:brightness(1.05) contrast(1.08);
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 52%,#000 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 62% 66% at 50% 52%,#000 62%,transparent 100%);
  -webkit-mask-composite:source-over;mask-composite:add}

/* ===== V22 colour panel ===== */
.bfcm .bfcm-panel2{overflow:hidden;position:relative}
.bfcm .bfcm-panel2>div{position:relative;flex:1;min-height:clamp(200px,22vw,360px);overflow:hidden;margin:0 -8% calc(-1*clamp(14px,1.6vw,26px))}
.bfcm .bfcm-panel2 img{position:absolute;left:0;top:0;width:100%;height:112%;aspect-ratio:auto;object-fit:cover;object-position:center top;transform:none}

/* ===== V24 mobile ===== */
@media(max-width:749px){
  .bfcm .bfcm-tiers__row .bfcm-tier--feat{grid-column:auto!important;order:0!important;min-height:130px!important}
  .bfcm .bfcm-tiers__row .bfcm-tier--feat .bfcm-tier__pct{font-size:clamp(40px,13vw,60px)!important}
  .bfcm .bfcm-pieces{grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important}
}

/* ===== V28 hero floating shapes: keep them off the floating header and the headline ===== */
.bfcm-hero > .bfcm-deco:nth-of-type(1){top:24%!important;left:46%!important}
.bfcm-hero > .bfcm-deco:nth-of-type(2){top:21%!important;left:91%!important}
.bfcm-hero > .bfcm-deco:nth-of-type(8){top:19%!important;left:78%!important}
.bfcm-hero > .bfcm-deco:nth-of-type(9){top:34%!important;left:1%!important}

/* ===== from bfcm-ghost.css ===== */
/* AI 2026-11-02 v5: Door Crashers colour ghosts. Extra colourway images stack and crossfade (the shown one gets .is-cur). Swatches are a row INSIDE the sale card's info block (under the price). The size panel stays hidden until a colour is picked, then slides up above the info block so it never covers the name, price or swatches. */
.bfcm .bfcm-dcard__img{transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.bfcm .bfcm-dcard .bfcm-ghost-img{opacity:0;pointer-events:none}
.bfcm .bfcm-dcard[data-ghost-cur] .bfcm-dcard__img{opacity:0}
.bfcm .bfcm-dcard[data-ghost-cur] .bfcm-dcard__img.is-cur{opacity:1}
.bfcm .bfcm-ghost-sw__b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background-color:#ccc;box-shadow:0 0 0 1px rgba(0,0,0,.45);cursor:pointer;padding:0;transition:transform .2s ease,box-shadow .2s ease}
.bfcm .bfcm-ghost-sw__b:hover,.bfcm .bfcm-ghost-sw__b:focus-visible{transform:scale(1.2)}
.bfcm .bfcm-ghost-sw__b.is-on{box-shadow:0 0 0 2px #000}
/* the row in the sale card */
.bfcm .bfcm-dcard .bfcm-ghost-sw{position:relative;z-index:9;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:7px;margin:10px 0 0;padding:0;background:none;box-shadow:none;border-radius:0}
.bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b{width:28px;height:28px}
.bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b.is-on{box-shadow:0 0 0 2px #000}
.bfcm .bfcm-ghost-sw__nm{margin-left:4px;font:700 14px/1.1 'Jost',Arial,sans-serif;color:#000;min-width:0}
.bfcm .bfcm-ghost-sw.is-nudge{animation:bfcm3-shake .5s}
/* sizes: not before a colour is picked */
.bfcm .bfcm-dcard.has-sw:not(.has-color):not(.is-open) .bfcm-qa .bfcm-qa__panel{transform:translateY(calc(100% + 80px));visibility:hidden}
.bfcm .bfcm-dcard.has-sw:not(.has-color) .bfcm-qa-host__x{display:none}
/* v6: once a colour is picked the size panel pushes up from the bottom of the card (default quick-add slide). The swatch row stays on top, and the sizes sit above it. */
.bfcm .bfcm-dcard.has-sw .bfcm-qa__panel{padding-bottom:calc(var(--sw-h,70px) + 8px)}
.bfcm .bfcm-dcard.has-sw .bfcm-ghost-sw{z-index:30}
/* v6: centred swatch row, name on its own line */
.bfcm .bfcm-dcard .bfcm-ghost-sw{justify-content:center;gap:14px;margin-top:12px}
.bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__nm{flex:0 0 100%;text-align:center;margin:4px 0 0;font-size:18px;line-height:1.15;letter-spacing:.01em}
/* AI 2026-11-02: price drop. Number ticks from the Was price down to the sale price when the card scrolls in (bfcm-price.js) */
.bfcm .bfcm-dcard__sale.is-dropping{display:inline-block;animation:bfcm-price-drop .5s cubic-bezier(.2,.9,.3,1.3) both}
.bfcm .bfcm-dcard__sale.is-landed{animation:bfcm-price-land .5s cubic-bezier(.2,1.6,.4,1)}
.bfcm .bfcm-dcard__sale[data-pd-wait]{visibility:hidden}
@keyframes bfcm-price-drop{0%{transform:translateY(0)}60%{transform:translateY(5px)}100%{transform:translateY(0)}}
@keyframes bfcm-price-land{0%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.bfcm .bfcm-dcard__sale.is-dropping,.bfcm .bfcm-dcard__sale.is-landed{animation:none}}
/* v6: countdown ring that circles the swatch until the colour changes */
@property --bfcm-p{syntax:'<angle>';inherits:false;initial-value:0deg}
.bfcm .bfcm-ghost-sw__b{position:relative}
.bfcm .bfcm-ghost-sw__b.is-count::after{content:'';position:absolute;inset:-6px;border-radius:50%;pointer-events:none;background:conic-gradient(#000 var(--bfcm-p),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:bfcm-ring var(--bfcm-ring-ms,2400ms) linear forwards}
@keyframes bfcm-ring{from{--bfcm-p:0deg}to{--bfcm-p:360deg}}
@media(prefers-reduced-motion:reduce){.bfcm .bfcm-ghost-sw__b.is-count::after{display:none}}
@media(max-width:749px){.bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.bfcm .bfcm-dcard__img{transition:opacity .01s}.bfcm .bfcm-ghost-sw.is-nudge{animation:none}}
/* colour slot list (theme editor, or ?bfcm_slots=1) */
.bfcm .bfcm-dcard .bfcm-ghost-legend{position:absolute;top:8px;left:8px;right:8px;z-index:12;margin:0;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.97);color:#000;border:1px dashed #000;font:400 12px/1.35 'Jost',Arial,sans-serif;pointer-events:none}
.bfcm .bfcm-dcard .bfcm-ghost-legend[hidden]{display:none}
.bfcm .bfcm-ghost-legend ol{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:1px}
.bfcm .bfcm-ghost-legend li{display:flex;align-items:center;gap:6px}
.bfcm .bfcm-ghost-legend__th{flex:0 0 20px;width:20px;height:24px;object-fit:contain;background:#eee;border-radius:3px}
.bfcm .bfcm-ghost-legend__slot{display:inline-block;min-width:58px;font-weight:700}
.bfcm .bfcm-ghost-legend i{font-style:normal;font-size:11px;color:#0a7a3e}
.bfcm .bfcm-ghost-legend i.is-empty{color:#777}
.bfcm .bfcm-ghost-legend i.is-out{color:#BF1763}
.bfcm .bfcm-ghost-legend p{margin:4px 0 0}

/* ===== from bfcm-ext.css ===== */
/* AI 2026-11-02 v3: swatches live OUTSIDE the quick-add panel. Colour option inside the panel is hidden; swatches drive it. */
.bfcm .bfcm-qa__opt.is-external{display:none!important}
.bfcm .bfcm-ghost-sw__b.is-out{opacity:.35}
.bfcm .bfcm-ghost-sw__b.is-sel{box-shadow:0 0 0 2px #000}
.bfcm .bfcm-ghost-sw__b:focus-visible{outline:2px solid #000;outline-offset:2px}
/* Make it a look swatches: self-contained look (this section does not load bfcm-ghost.css) */
.bfcm .bfcm-lstep .bfcm-ext-sw{position:absolute;z-index:9;top:46px;right:10px;display:flex;flex-direction:column;flex-wrap:wrap-reverse;align-content:flex-start;gap:7px;max-height:190px;padding:8px 6px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 2px 8px rgba(0,0,0,.14)}
.bfcm .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background-color:#ccc;box-shadow:0 0 0 1px rgba(0,0,0,.4);cursor:pointer;padding:0;transition:transform .2s ease,box-shadow .2s ease}
.bfcm .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b:hover,.bfcm .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b:focus-visible{transform:scale(1.2)}
.bfcm .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b.is-sel{box-shadow:0 0 0 2px #000}
.bfcm .bfcm-lstep.has-ext{position:relative;padding-right:50px}
.bfcm .bfcm-lstep__img img{transition:opacity .22s ease}
.bfcm .bfcm-lstep .bfcm-qa__vals.is-row{gap:4px}
.bfcm .bfcm-lstep .bfcm-qa__vals.is-row .bfcm-qa__val{min-height:26px;min-width:26px;padding:0 7px;font-size:11px}
@media(max-width:749px){.bfcm .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b{width:30px;height:30px}.bfcm .bfcm-lstep.has-ext{padding-right:56px}}
/* Desktop: the swatch column sits OUTSIDE the card, on its right edge */
@media(min-width:990px){
 .bfcm .bfcm-lstep.has-ext{overflow:visible;padding-right:12px}
 .bfcm .bfcm-lstep .bfcm-ext-sw{top:54px;right:auto;left:calc(100% + 10px);background:none;box-shadow:none;padding:0;max-height:none;flex-wrap:nowrap;gap:9px}
 .bfcm .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b{width:30px;height:30px;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.2)}
 .bfcm .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b.is-sel{box-shadow:0 0 0 2px #000,0 3px 8px rgba(0,0,0,.2)}
 .bfcm .bfcm-look__panel{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(300px,.95fr) minmax(0,.8fr)}
 .bfcm .bfcm-builder .bfcm-steps{max-width:340px;padding-right:56px;box-sizing:border-box;margin-left:-70px}
 .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep{max-width:232px}
}
/* AI 2026-11-02: the white blur. The model photo (z-index 3) painted its white background over the left edge of the pick cards. Cards now sit above it. */
.bfcm .bfcm-look__side{position:relative;z-index:5}
.bfcm .bfcm-builder .bfcm-steps,.bfcm .bfcm-builder .bfcm-builder__bar{position:relative;z-index:5}
/* the card you are using comes to the front, so sizes hidden under the next card can be tapped */
.bfcm .bfcm-steps .bfcm-lstep{position:relative;z-index:1}
.bfcm .bfcm-steps .bfcm-lstep:is(:hover,:focus-within){z-index:4}
/* AI 2026-11-02 v6: Door Crashers hide out-of-stock sizes and colours entirely (no crossed-out chips). Sizes re-check against the picked colour. */
/* AI 2026-11-04 (Chris): sold-out sizes/colours are shown again, clearly crossed out (see bfcm-wow2.css). Only the editor ghost swatches stay hidden. */
.bfcm .bfcm-ghost-sw__b.is-out{position:relative;opacity:.45;filter:grayscale(1);cursor:not-allowed;overflow:visible}
.bfcm .bfcm-ghost-sw__b.is-out::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:3px;margin-top:-1.5px;background:#000;border-radius:3px;rotate:-45deg;box-shadow:0 0 0 1.5px #fff;pointer-events:none}
.bfcm .bfcm-ghost-sw__b.is-out:hover{transform:none!important}
/* editor-only legend */
.bfcm .bfcm-ghost-legend{margin:6px 14px 10px;padding:8px 10px;border-radius:10px;background:#fff;color:#000;font:400 12px/1.4 'Jost',Arial,sans-serif;display:flex;flex-direction:column;gap:2px;border:1px dashed #000;position:relative;z-index:10}
.bfcm .bfcm-dcard .bfcm-ghost-legend{position:absolute}

/* ===== from bfcm-incart.css ===== */
/* AI 2026-11-02 v5: compact. Pill and panel share one width, one 40px control height, one radius, one border. Option dropdowns sit side by side; quantity + remove share one line. Quick-add sheet is lifted above the pill/panel (vars set by bfcm-incart.js) so it no longer overlaps the swatches. */
.bfcm-incart,.bfcm-incart-p{--ic-h:40px;--ic-pink:#BF1763;box-sizing:border-box;width:calc(100% - 24px);margin-left:12px;margin-right:12px;font-family:Jost,sans-serif}
.bfcm-incart-p *{box-sizing:border-box}
.bfcm-incart{position:relative;z-index:6;display:flex;align-items:center;justify-content:center;gap:6px;max-width:none;min-height:var(--ic-h);margin-top:8px;margin-bottom:8px;padding:0 14px;border:2px solid #000;border-radius:999px;background:#000;color:#fff;font-weight:700;font-size:16px;line-height:1;box-shadow:none;cursor:pointer;text-align:center;transition:transform .18s ease,background .18s ease,color .18s ease}
.bfcm-incart:hover{transform:translateY(-1px)}
.bfcm-incart.is-open,.bfcm-incart[aria-expanded=true]{background:#fff;color:#000}
.bfcm-incart:focus-visible{outline:3px solid #FF69B4;outline-offset:2px}
.bfcm-incart.is-pop{animation:bfcm-incart-pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes bfcm-incart-pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.bfcm-incart-p{position:relative;z-index:6;margin-top:-2px;margin-bottom:10px;padding:10px;border:2px solid #000;border-radius:16px;background:#fff;color:#000;box-shadow:none;font-weight:400;font-size:16px;line-height:1.2;text-align:left}
.bfcm-incart-p[hidden]{display:none}
.bfcm-incart-p.is-busy{opacity:.55;pointer-events:none}
.bfcm-incart-p[data-err]::after{content:"Something went wrong. Please try again.";display:block;margin-top:8px;color:var(--ic-pink);font-weight:700;font-size:14px}
.bfcm-incart-p__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bfcm-incart-p__row+.bfcm-incart-p__row{margin-top:10px;padding-top:10px;border-top:1px solid rgba(0,0,0,.15)}
.bfcm-incart-p__f{display:block;margin:0;min-width:0}
.bfcm-incart-p__f>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bfcm-incart-p__f select{display:block;width:100%;max-width:none;min-height:var(--ic-h);padding:0 10px;border:2px solid #000;border-radius:999px;background-color:#fff;color:#000;font:400 16px Jost,sans-serif;text-overflow:ellipsis}
.bfcm-incart-p__q{grid-column:1/-1;display:grid;grid-template-columns:var(--ic-h) 32px var(--ic-h) 1fr;align-items:center;gap:6px}
.bfcm-incart-p__q button{min-width:var(--ic-h);min-height:var(--ic-h);padding:0;border:2px solid #000;border-radius:999px;background:#fff;color:#000;font:700 20px/1 Jost,sans-serif;cursor:pointer}
.bfcm-incart-p__q b{text-align:center;font-size:16px;font-weight:700}
.bfcm-incart-p__q .bfcm-incart-p__rm{justify-self:end;min-width:0;padding:0 14px;font-size:16px;border-color:var(--ic-pink);color:var(--ic-pink)}
.bfcm-incart-p button:focus-visible,.bfcm-incart-p select:focus-visible{outline:3px solid #FF69B4;outline-offset:2px}
/* lift the quick-add sheet above the pill/panel so it never covers the swatches */
.bfcm .bfcm-dcard.has-incart .bfcm-qa__panel{bottom:var(--ic-b,0px)}
.bfcm .bfcm-dcard.has-incart.has-sw .bfcm-qa__panel{padding-bottom:calc(var(--ic-sw,70px) + 8px)}
@media (prefers-reduced-motion:reduce){.bfcm-incart.is-pop{animation:none}.bfcm-incart{transition:none}}

/* ===== from bfcm-round4.css ===== */
/* AI 2026-11-03 round 4: (1) calmer in-cart Edit pill + panel (no heavy outlines), (2) Make it a look cards tidied (no overlap, swatches inside the card, quiet editor note), (3) Door Crashers info block: big centred price on top, name below. */

/* ---- 1. In cart / Edit: quiet pill, soft panel ---- */
.bfcm .bfcm-incart{border:0;background:#f1f1f1;color:#000;min-height:38px;font-size:14px;font-weight:700;border-radius:12px;box-shadow:none}
.bfcm .bfcm-incart:hover{background:#e8e8e8;transform:none}
.bfcm .bfcm-incart.is-open,.bfcm .bfcm-incart[aria-expanded=true]{background:#e8e8e8;color:#000}
.bfcm .bfcm-incart-p{border:0;background:#f7f7f7;border-radius:14px;margin-top:0;padding:10px;box-shadow:none}
.bfcm .bfcm-incart-p__f select{border:1px solid rgba(0,0,0,.22);border-radius:10px;min-height:38px;font-size:14px;background-color:#fff}
.bfcm .bfcm-incart-p__q button{border:1px solid rgba(0,0,0,.22);border-radius:10px;min-height:38px;min-width:38px;font-size:18px;background:#fff}
.bfcm .bfcm-incart-p__q .bfcm-incart-p__rm{border:0;background:transparent;text-decoration:underline;font-size:14px;color:#BF1763}
.bfcm .bfcm-incart-p__row+.bfcm-incart-p__row{border-top-color:rgba(0,0,0,.1)}

/* ---- 2. Make it a look cards ---- */
.bfcm .bfcm-steps .bfcm-lstep,.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep{width:100%;max-width:300px;margin-left:auto!important;margin-right:auto!important;transform:none!important;padding:14px!important;overflow:visible}
.bfcm .bfcm-steps .bfcm-lstep+.bfcm-lstep{margin-top:18px!important}
.bfcm .bfcm-steps .bfcm-lstep:hover{transform:translateY(-4px)!important}
.bfcm .bfcm-steps .bfcm-lstep .bfcm-lstep__img{aspect-ratio:3/4;max-height:none;max-width:100%;background:#fff;border-radius:12px}
.bfcm .bfcm-steps .bfcm-lstep .bfcm-lstep__img img{object-fit:contain;object-position:center}
.bfcm .bfcm-lstep__name{flex-wrap:nowrap;justify-content:space-between;font-size:16px}
.bfcm .bfcm-lstep .bfcm-ext-sw{position:static!important;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin:2px 0 8px;left:auto;top:auto;max-height:none}
.bfcm .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b{width:28px;height:28px}
.bfcm .bfcm-lstep.has-ext{padding-right:14px!important}
.bfcm .bfcm-ghost-legend--look{position:static;margin:8px 0 0;padding:6px 8px;border:0;border-radius:8px;background:#f3f3f3;font:400 11px/1.3 'Jost',Arial,sans-serif;color:#555;pointer-events:auto}
.bfcm .bfcm-ghost-legend--look summary{cursor:pointer;font-weight:700}
.bfcm .bfcm-ghost-legend--look[hidden]{display:none}

/* ---- 3. Door Crashers: price on top (big, centred), name below ---- */
.bfcm .bfcm-dcard .bfcm-dcard__info{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:18px}
.bfcm .bfcm-dcard .bfcm-dcard__prices{order:1;display:flex;flex-direction:column;align-items:center;gap:0;margin:0 0 6px;flex-wrap:nowrap}
.bfcm .bfcm-dcard .bfcm-dcard__sale{font:700 clamp(56px,5.6vw,88px)/.95 'Jost',Arial,sans-serif;transform-origin:center bottom;letter-spacing:-.02em}
.bfcm .bfcm-dcard .bfcm-dcard__was{font:400 clamp(16px,1.3vw,20px)/1.2 'Jost',Arial,sans-serif;margin-top:4px}
.bfcm .bfcm-dcard .bfcm-dcard__name{order:2;min-height:2.2em;margin:4px 0 0;text-align:center;font-size:clamp(19px,1.7vw,26px)}
.bfcm .bfcm-dcard .bfcm-ghost-sw{order:3;justify-content:center}
.bfcm .bfcm-dcard .bfcm-dcard__info>*:not(.bfcm-dcard__prices):not(.bfcm-dcard__name):not(.bfcm-ghost-sw){order:4}
@media(max-width:749px){.bfcm .bfcm-dcard .bfcm-dcard__sale{font-size:clamp(44px,13vw,60px)}}

/* ===== from bfcm-final.css ===== */
/* AI 2026-11-02 final pass (v2, checked on the live preview): loaded last. */

/* AI 2026-11-03: Shop by discount taller. Section has more air; tiles are tall cards with the % stacked over OFF over the link. */
.bfcm.bfcm-tiers{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(64px,8vw,120px)}
.bfcm .bfcm-tiers__row{padding:28px 0 24px;align-items:stretch}
.bfcm .bfcm-tier{min-height:clamp(300px,27vw,460px);gap:clamp(8px,1vw,16px);padding-top:clamp(28px,3vw,48px);padding-bottom:clamp(28px,3vw,48px)}
.bfcm .bfcm-tier--feat{min-height:clamp(340px,31vw,520px)}
.bfcm .bfcm-tier .bfcm-tier__pct{font-size:clamp(40px,4.1vw,64px)}
.bfcm .bfcm-tier--feat .bfcm-tier__pct{font-size:clamp(54px,5.6vw,88px)}
.bfcm .bfcm-tier .bfcm-tier__off{font-size:clamp(18px,2vw,30px)}
.bfcm .bfcm-tier .bfcm-tier__link{margin-top:clamp(6px,1vw,14px)}
@media(max-width:989px){
  .bfcm .bfcm-tiers__row{gap:14px}
  .bfcm .bfcm-tier,.bfcm .bfcm-tier:first-child{min-height:210px}
  .bfcm .bfcm-tiers__row .bfcm-tier--feat{min-height:230px!important}
}

/* ---------- Door Crashers: tight, centred, and the size picker sits IN the card (never over the price) ---------- */
.bfcm .bfcm-dcard .bfcm-dcard__info{padding:10px 14px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0}
.bfcm .bfcm-dcard .bfcm-dcard__prices{margin:0 0 2px;gap:0;line-height:1}
.bfcm .bfcm-dcard .bfcm-dcard__sale{line-height:.95;margin:0}
.bfcm .bfcm-dcard .bfcm-dcard__was{font:400 15px/1.1 'Jost',Arial,sans-serif;margin:2px 0 0}
.bfcm .bfcm-dcard .bfcm-dcard__name{font:700 clamp(17px,1.35vw,20px)/1.15 'Jost',Arial,sans-serif;min-height:2.3em;margin:4px 0 0;display:flex;align-items:center;justify-content:center;text-align:center;letter-spacing:0}
.bfcm .bfcm-dcard .bfcm-dcard__name a{line-height:1.15}
.bfcm .bfcm-dcard .bfcm-ghost-sw{justify-content:center;gap:9px;margin:6px 0 0}
.bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b{width:24px;height:24px}
.bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__nm{flex:0 0 100%;margin:2px 0 0;font:700 14px/1.1 'Jost',Arial,sans-serif;min-height:1.1em}
@media(max-width:749px){.bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b{width:28px;height:28px}.bfcm .bfcm-dcard .bfcm-dcard__name{font-size:16px}}
.bfcm .bfcm-dcard .bfcm-qa{position:static!important;overflow:visible!important;pointer-events:auto!important;inset:auto!important}
.bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__panel{position:static!important;transform:none!important;visibility:visible!important;opacity:1!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;padding:6px 14px 14px!important;min-height:0!important;max-height:none!important;overflow:visible!important;width:100%;box-sizing:border-box;transition:none!important}
.bfcm .bfcm-dcard .bfcm-qa__panel::after{display:none!important}
.bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__toggle,.bfcm .bfcm-dcard .bfcm-qa [data-qa-toggle]{display:none!important}
/* v3: every card always shows its size row and Add to cart (never a card with no way to buy) */
.bfcm .bfcm-dcard.has-sw:not(.has-color) .bfcm-qa .bfcm-qa__panel{display:block!important;visibility:visible!important;transform:none!important}
.bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__panel{padding-bottom:16px!important;display:flex!important;flex-direction:column;align-items:stretch}
.bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__add{width:100%!important;max-width:none!important;align-self:stretch;margin:8px 0 0!important;padding:0 12px!important;font-size:16px!important;white-space:nowrap}
.bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__vals{justify-content:center!important}
.bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__lab{text-align:center;justify-content:center}

/* ---------- Make it a look: desktop = copy | photo | two pick cards (swatches on their side) | outfit panel ---------- */
@media(min-width:990px){
  .bfcm .bfcm-look__panel{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) 292px 262px!important;column-gap:clamp(10px,1.4vw,24px)!important}
  .bfcm .bfcm-builder .bfcm-steps{grid-column:3!important;grid-row:1/6!important;justify-self:start!important;align-self:center!important;width:292px!important;max-width:292px!important;padding-right:54px!important;box-sizing:border-box;display:flex!important;flex-direction:column}
  .bfcm .bfcm-panel2{grid-column:4!important;width:262px!important;max-width:262px!important;aspect-ratio:3/4.5!important}
}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep{width:100%!important;max-width:100%!important;overflow:visible!important;position:relative;padding:10px 12px 20px!important;border-radius:16px;box-sizing:border-box}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep+.bfcm-lstep{margin-top:-12px!important}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(odd){transform:rotate(-2deg)!important;margin-left:0!important;margin-right:auto!important}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(even){transform:rotate(2deg)!important;margin-left:auto!important;margin-right:0!important}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(1){z-index:1}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(2){z-index:2}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(3){z-index:3}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n):hover,.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n):focus-within{transform:rotate(0) translateY(-4px)!important;z-index:6}
@media(prefers-reduced-motion:reduce){.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n):hover{transform:none!important}}
/* photo box: fixed height, every colour photo stacked inside */
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-lstep__img{position:relative;display:block;width:100%!important;max-width:100%!important;height:170px!important;max-height:170px!important;aspect-ratio:auto!important;margin:0!important;background:#fff;border-radius:12px;overflow:hidden}
.bfcm .bfcm-lstep__img img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;background:transparent!important}
.bfcm .bfcm-lstep__ci{opacity:0;transition:opacity .25s ease}
.bfcm .bfcm-lstep__ci.is-on{opacity:1}
.bfcm .bfcm-lstep.has-ci .bfcm-lstep__base{opacity:0}
.bfcm .bfcm-lstep__name{display:flex!important;flex-wrap:nowrap!important;justify-content:space-between!important;align-items:baseline;gap:8px;margin:8px 2px 6px!important;font:700 15px/1.15 'Jost',Arial,sans-serif!important}
.bfcm .bfcm-lstep__name b{flex:none;font-size:16px}
.bfcm .bfcm-lstep__top{line-height:1.1;margin-bottom:6px}
/* swatches: a column just outside the right edge of each card (desktop); a row inside on phones */
@media(min-width:750px){
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-ext-sw{position:absolute!important;left:calc(100% + 10px)!important;right:auto!important;top:44px!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:10px!important;margin:0!important;max-height:none!important;padding:0!important;background:none!important;box-shadow:none!important;z-index:6}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b{width:30px!important;height:30px!important;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 3px 8px rgba(0,0,0,.18)!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b.is-sel{box-shadow:0 0 0 2px #000,0 3px 8px rgba(0,0,0,.2)!important}
}

/* ---------- Make it a look: outfit panel on the right (inspo: heading, then overlapped pieces on the colour block) ---------- */
.bfcm .bfcm-panel2>div{position:relative}
.bfcm .bfcm-panel2 .bfcm-panel2__default{transition:opacity .25s ease}
.bfcm .bfcm-panel2.has-outfit .bfcm-panel2__default{opacity:0!important}
.bfcm .bfcm-panel2 h4{position:relative;z-index:5}
.bfcm .bfcm-outfit{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:4px 10px 10px;background:transparent}
.bfcm .bfcm-outfit[hidden],.bfcm .bfcm-outfit__f[hidden]{display:none!important}
.bfcm .bfcm-outfit__f{margin:0;flex:1 1 0;min-height:0;width:76%;display:flex;flex-direction:column;align-items:center;position:relative;animation:bfcm-of-in .35s ease both;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.bfcm .bfcm-outfit__f:nth-of-type(1){align-self:flex-end;transform:rotate(4deg);z-index:2}
.bfcm .bfcm-outfit__f:nth-of-type(2){align-self:flex-start;transform:rotate(-3deg);z-index:1;margin-top:-12%}
.bfcm .bfcm-outfit__f--layer{flex:.6 1 0;width:50%;align-self:flex-end;transform:rotate(-4deg);z-index:3;margin-top:-14%}
.bfcm .bfcm-outfit figcaption,.bfcm .bfcm-outfit__tot{display:none!important}
.bfcm .bfcm-panel2 .bfcm-outfit img{position:static!important;inset:auto!important;width:100%!important;height:100%!important;flex:1 1 0;min-height:0;object-fit:contain!important;object-position:center!important;mix-blend-mode:normal!important;transform:none!important;aspect-ratio:auto!important;background:transparent!important}
@keyframes bfcm-of-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.bfcm .bfcm-outfit__f{animation:none}}
@media(max-width:989px){.bfcm .bfcm-panel2{min-height:380px;aspect-ratio:auto}.bfcm .bfcm-panel2>div{min-height:300px}}

/* ---------- v3 Make it a look: cards stagger (titles never covered); colour block is as tall as the card stack ---------- */
@media(min-width:990px){
  .bfcm .bfcm-builder .bfcm-steps{align-self:start!important}
  .bfcm .bfcm-panel2{grid-row:1/6!important;align-self:stretch!important;aspect-ratio:auto!important;height:auto!important;min-height:560px;overflow:visible!important;justify-self:start}
  .bfcm .bfcm-panel2>div{flex:1 1 auto!important;overflow:visible!important;margin:0!important;min-height:420px}
  .bfcm .bfcm-outfit{padding:0 4px 18px;justify-content:flex-start}
  .bfcm .bfcm-outfit__f{width:92%!important}
  .bfcm .bfcm-outfit__f:nth-of-type(1){align-self:flex-end;transform:rotate(5deg);margin-top:2%}
  .bfcm .bfcm-outfit__f:nth-of-type(2){align-self:flex-start;transform:rotate(-4deg);margin-top:-22%;margin-left:-8%}
  .bfcm .bfcm-outfit__f--layer{width:56%!important;margin-top:-10%}
}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep{padding:16px 12px 22px!important}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep+.bfcm-lstep{margin-top:-4px!important}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(odd){transform:translateX(-6px) rotate(-1.5deg)!important}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(even){transform:translateX(6px) rotate(1.5deg)!important}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep__top{position:relative;z-index:2;background:#fff}
@media(prefers-reduced-motion:reduce){.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n){transform:none!important}}

/* ---------- v4 phone/tablet: the pick cards stack in one column (no sideways scroll), full width ---------- */
@media(max-width:989px){
  .bfcm .bfcm-builder .bfcm-steps{display:flex!important;flex-direction:column!important;overflow:visible!important;scroll-snap-type:none!important;width:100%!important;max-width:420px!important;margin:0 auto!important;padding:6px 8px 10px!important;gap:0!important;align-self:auto!important;justify-self:center!important;grid-column:auto!important;grid-row:auto!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep{width:100%!important;max-width:100%!important;flex:0 0 auto!important;margin-left:0!important;margin-right:0!important;scroll-snap-align:none}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep+.bfcm-lstep{margin-top:14px!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(odd){transform:rotate(-1deg)!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(even){transform:rotate(1deg)!important}
  .bfcm .bfcm-panel2{width:100%!important;max-width:420px!important;margin:18px auto 0!important;aspect-ratio:auto!important;height:auto!important;min-height:420px!important;overflow:visible!important}
  .bfcm .bfcm-panel2>div{min-height:340px!important;overflow:visible!important}
  .bfcm .bfcm-outfit{justify-content:flex-start;padding-bottom:12px}
  .bfcm .bfcm-outfit__f{width:70%!important}
  .bfcm .bfcm-outfit__f--layer{width:46%!important}
  .bfcm .bfcm-outfit__f:nth-of-type(2){margin-top:-16%!important}
}

@media(max-width:749px){
  .bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__vals{flex-wrap:wrap!important;gap:6px!important}
  .bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__val:not(.is-color){min-width:38px!important;width:auto!important;height:38px!important;padding:0 8px!important;font-size:13px!important;flex:0 0 auto}
  .bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__panel{padding-left:8px!important;padding-right:8px!important}
  .bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__add{font-size:14px!important;padding:0 6px!important}
}

/* ---------- v5 Make it a look: NO colour block. Copy | photo | pick cards side by side, then one clear "add the look" bar under the cards ---------- */
.bfcm .bfcm-panel2{display:none!important}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-ext-sw{position:static!important;left:auto!important;top:auto!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;justify-content:center;align-items:center;gap:10px!important;margin:6px 0 8px!important;padding:0!important}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b{width:28px!important;height:28px!important}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep,.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n){transform:none!important;margin:0!important;padding:14px 14px 18px!important;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n):hover,.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n):focus-within{transform:translateY(-6px)!important}
.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-lstep__img{height:230px!important;max-height:230px!important}
.bfcm .bfcm-builder .bfcm-builder__bar::before{content:"Build your look: pick a colour and size on each card, then add them all in one tap.";display:block;margin:0 0 10px;font:400 15px/1.35 'Jost',Arial,sans-serif;color:#000;text-align:left}
.bfcm .bfcm-builder .bfcm-builder__add{background:#000!important;color:#fff!important;border-radius:999px;font-weight:700}
.bfcm .bfcm-builder .bfcm-builder__add.is-wait{background:#000!important;color:#fff!important;opacity:.55}
@media(min-width:990px){
  .bfcm .bfcm-look__panel{grid-template-columns:minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.9fr)!important;grid-template-rows:1fr auto auto 1fr!important;column-gap:clamp(14px,2vw,32px)!important;align-items:center!important}
  .bfcm .bfcm-look__copy h3{grid-column:1!important;grid-row:2!important}
  .bfcm .bfcm-look__copy>div{grid-column:1!important;grid-row:3!important}
  .bfcm .bfcm-look__hero{grid-column:2!important;grid-row:1/5!important}
  .bfcm .bfcm-builder .bfcm-steps{grid-column:3!important;grid-row:1/4!important;align-self:end!important;justify-self:stretch!important;width:100%!important;max-width:none!important;padding:0 0 0 0!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:16px!important;margin:0!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep{width:100%!important;max-width:none!important;align-self:stretch}
  .bfcm .bfcm-builder .bfcm-steps{align-items:stretch!important}
  .bfcm .bfcm-builder .bfcm-builder__bar{grid-column:3!important;grid-row:4!important;align-self:start!important;justify-self:stretch!important;width:100%!important;max-width:none!important;margin:18px 0 0!important}
}
@media(max-width:989px){
  .bfcm .bfcm-builder .bfcm-steps{max-width:460px!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep,.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n){transform:none!important}
  .bfcm .bfcm-builder .bfcm-builder__bar{max-width:460px;margin:16px auto 0!important;width:100%}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-lstep__img{height:200px!important;max-height:200px!important}
}

/* ---------- v6 Make it a look: cards held like a hand of cards (fan, pivot from the bottom, lift + straighten on hover) ---------- */
@media(min-width:990px){
  .bfcm .bfcm-builder .bfcm-steps{display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:flex-end!important;gap:0!important;grid-template-columns:none!important;padding:28px 0 12px!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep{flex:0 1 300px!important;width:300px!important;max-width:300px!important;align-self:flex-end!important;transform-origin:50% 120%!important;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .3s!important;box-shadow:0 10px 26px rgba(0,0,0,.18)!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep+.bfcm-lstep{margin-left:-36px!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(1){transform:rotate(-5deg) translateY(10px)!important;z-index:1}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(2){transform:rotate(3deg)!important;z-index:2}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(3){transform:rotate(9deg) translateY(14px)!important;z-index:3}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n):hover,.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n):focus-within{transform:rotate(0) translateY(-22px) scale(1.03)!important;z-index:10!important;box-shadow:0 22px 40px rgba(0,0,0,.28)!important}
}
@media(max-width:989px){
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(1){transform:rotate(-2deg)!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(2){transform:rotate(2deg)!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(3){transform:rotate(-1.5deg)!important}
}
@media(prefers-reduced-motion:reduce){.bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n):hover{transform:none!important}}

/* ---------- v8 (appended at end of file below) ---------- */
/* ---------- v7 Make it a look: compact 3 columns. Left = heading + copy + button, centre = photo, right = tall portrait cards ---------- */
.bfcm .bfcm-look__h2--col{display:none}
@media(min-width:990px){
  .bfcm .bfcm-look__head .bfcm-look__h2{display:none!important}
  .bfcm .bfcm-look__head:not(:has(.bfcm-look__tabs)){display:none!important}
  .bfcm .bfcm-look__head{margin-bottom:12px!important}
  html body .bfcm.bfcm-look .bfcm-look__copy .bfcm-look__h2--col{display:block!important;margin:0 0 8px!important;font-size:clamp(34px,3.4vw,48px)!important;line-height:1!important}
  html body .bfcm.bfcm-look .bfcm-look__copy h3{font-size:clamp(20px,1.8vw,26px)!important;line-height:1.1!important;margin:0 0 8px 0!important;padding:0!important;text-indent:0!important;text-align:left!important;width:100%!important;max-width:none!important;align-self:flex-start!important;position:static!important;left:auto!important;transform:none!important}
  html body .bfcm.bfcm-look .bfcm-look__copy>div{font-size:16px!important;line-height:1.4!important;margin-bottom:14px!important}
  .bfcm .bfcm-look__hero{max-height:440px!important}
  .bfcm .bfcm-look__hero img{max-height:440px!important}

  .bfcm.bfcm-look.bfcm-pad{padding-top:36px!important;padding-bottom:36px!important}
  .bfcm .bfcm-look__panel{grid-template-columns:minmax(0,.8fr) minmax(0,.95fr) minmax(0,1.5fr)!important;grid-template-rows:auto auto!important;align-items:center!important;column-gap:clamp(14px,2vw,30px)!important;row-gap:0!important}
  .bfcm .bfcm-look__copy{grid-column:1!important;grid-row:1/3!important;display:flex!important;flex-direction:column;align-items:flex-start;align-self:center}
  .bfcm .bfcm-look__copy h3,.bfcm .bfcm-look__copy>div{grid-column:auto!important;grid-row:auto!important}
  .bfcm .bfcm-look__copy h3{margin:0 0 8px!important}
  .bfcm .bfcm-look__copy>div{margin-bottom:16px!important}
  .bfcm .bfcm-look__hero{grid-column:2!important;grid-row:1/3!important;max-height:520px;align-self:center}
  .bfcm .bfcm-look__hero img{max-height:520px;object-fit:cover}
  .bfcm .bfcm-builder .bfcm-steps{grid-column:3!important;grid-row:1!important;align-self:end!important;justify-self:stretch!important;padding:16px 0 8px!important;justify-content:center!important}
  .bfcm .bfcm-builder .bfcm-builder__bar{grid-column:3!important;grid-row:2!important;margin:10px 0 0!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep{flex:0 1 215px!important;width:215px!important;max-width:215px!important;padding:10px 10px 12px!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep+.bfcm-lstep{margin-left:-16px!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(1){transform:rotate(-3deg) translateY(6px)!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(2){transform:rotate(2.5deg)!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(3){transform:rotate(6deg) translateY(10px)!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-lstep__img{height:240px!important;max-height:240px!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-ext-sw{gap:7px!important;margin:4px 0 6px!important}
  .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b{width:22px!important;height:22px!important}
  .bfcm .bfcm-lstep__name{margin:6px 2px 4px!important;font-size:14px!important}
  .bfcm .bfcm-builder .bfcm-builder__bar::before{font-size:13px;margin-bottom:8px}
}

/* ---------- In cart · Edit: simple, one line per item ---------- */
.bfcm .bfcm-incart-p{background:transparent!important;border:0!important;box-shadow:none!important;padding:0 2px!important;margin-top:0!important;border-radius:0!important}
.bfcm .bfcm-incart-p .bfcm-incart-p__row{display:flex!important;flex-wrap:nowrap;align-items:center;gap:6px!important;margin:0!important;padding:0!important;border:0!important}
.bfcm .bfcm-incart-p .bfcm-incart-p__row+.bfcm-incart-p__row{margin-top:6px!important}
.bfcm .bfcm-incart-p .bfcm-incart-p__f{flex:1 1 0;min-width:0;display:block}
.bfcm .bfcm-incart-p .bfcm-incart-p__f:first-child{flex:1.5 1 0}
.bfcm .bfcm-incart-p .bfcm-incart-p__f select{width:100%;min-height:36px!important;height:36px;padding:0 6px 0 10px!important;border:1px solid rgba(0,0,0,.18)!important;border-radius:10px!important;background-color:#fff!important;font:400 15px/1 'Jost',Arial,sans-serif!important}
.bfcm .bfcm-incart-p .bfcm-incart-p__n{flex:none;font:700 14px/1 'Jost',Arial,sans-serif;color:#000}
.bfcm .bfcm-incart-p .bfcm-incart-p__rm{flex:none;width:36px;min-width:36px!important;height:36px;min-height:36px!important;padding:0!important;border:0!important;background:transparent!important;color:#BF1763!important;font:700 18px/1 'Jost',Arial,sans-serif!important;text-decoration:none!important;cursor:pointer;border-radius:10px}
.bfcm .bfcm-incart-p .bfcm-incart-p__rm:hover{background:rgba(191,23,99,.12)!important}

/* ---------- v8 Make it a look: tight centred 3 columns. Tabs centred on top, photo never cropped, cards side by side with a small tilt ---------- */
@media(min-width:990px){
  html body .bfcm.bfcm-look .bfcm-look__wrap{max-width:1180px!important;margin:0 auto!important}
  html body .bfcm.bfcm-look .bfcm-look__head{display:flex!important;justify-content:center!important;margin:0 0 18px!important}
  html body .bfcm.bfcm-look .bfcm-look__tabs{justify-content:center!important;margin:0 auto!important}
  html body .bfcm.bfcm-look .bfcm-look__panel{grid-template-columns:230px 340px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:24px!important;justify-content:center!important;align-items:center!important}
  html body .bfcm.bfcm-look .bfcm-look__copy{grid-column:1!important;grid-row:1/3!important;align-self:center!important}
  html body .bfcm.bfcm-look .bfcm-look__hero{grid-column:2!important;grid-row:1/3!important;height:auto!important;max-height:none!important;align-self:center!important;display:flex;align-items:center;justify-content:center}
  html body .bfcm.bfcm-look .bfcm-look__hero>div{height:auto!important;width:100%!important}
  html body .bfcm.bfcm-look .bfcm-look__hero img,html body .bfcm.bfcm-look .bfcm-look__heroimg{position:static!important;width:100%!important;height:auto!important;max-height:480px!important;object-fit:contain!important;object-position:center top!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps{display:flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:stretch!important;gap:14px!important;padding:14px 0 6px!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep{flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:240px!important;margin:0!important;transform-origin:50% 100%!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep+.bfcm-lstep{margin-left:0!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(1){transform:rotate(-2deg)!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(2){transform:rotate(1.5deg)!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(3){transform:rotate(-1deg)!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n):hover,html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n):focus-within{transform:rotate(0) translateY(-8px)!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-lstep__img{height:260px!important;max-height:260px!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-builder__bar{grid-column:3!important;grid-row:2!important;margin:6px 0 0!important}
}
/* v9: outer margins = theme (section padding 2.6vw like the hero), full width columns, tabs under the copy on the left */
@media(min-width:990px){
  html body .bfcm.bfcm-look .bfcm-look__wrap{max-width:1600px!important;position:relative}
  html body .bfcm.bfcm-look .bfcm-look__panel{grid-template-columns:minmax(230px,.8fr) minmax(280px,1fr) minmax(0,1.7fr)!important;column-gap:clamp(20px,2.4vw,40px)!important;justify-content:stretch!important}
  html body .bfcm.bfcm-look .bfcm-look__head{position:absolute!important;left:0;bottom:0;margin:0!important;z-index:3;justify-content:flex-start!important;display:flex!important}
  html body .bfcm.bfcm-look .bfcm-look__tabs{justify-content:flex-start!important;margin:0!important}
  html body .bfcm.bfcm-look .bfcm-look__copy{align-self:stretch!important;justify-content:flex-end!important;padding-bottom:72px!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep{max-width:300px!important}
  html body .bfcm.bfcm-look .bfcm-look__hero img,html body .bfcm.bfcm-look .bfcm-look__heroimg{max-height:520px!important}
}
/* v10: copy vertically centred with tabs just under it; cards overlap like a hand; swatches first, sizes only after a colour is picked; no long caption, normal-size add button */
.bfcm .bfcm-builder .bfcm-builder__bar::before{display:none!important;content:none!important}
html body .bfcm.bfcm-look .bfcm-builder .bfcm-lstep:has(.bfcm-ext-sw .bfcm-ghost-sw__b):not(:has(.bfcm-ghost-sw__b.is-sel)) .bfcm-qa{display:none!important}
html body .bfcm.bfcm-look .bfcm-builder .bfcm-builder__bar{display:flex!important;justify-content:center;flex-direction:column;align-items:center;gap:6px}
html body .bfcm.bfcm-look .bfcm-builder .bfcm-builder__add{width:auto!important;min-width:260px;max-width:340px;height:48px;min-height:48px;padding:0 28px;font-size:16px}
@media(min-width:990px){
  html body .bfcm.bfcm-look .bfcm-look__copy{justify-content:center!important;padding-bottom:0!important}
  html body .bfcm.bfcm-look .bfcm-look__head{bottom:auto!important;top:calc(50% + 150px)!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps{justify-content:center!important;align-items:flex-end!important;gap:0!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep{flex:0 0 270px!important;width:270px!important;max-width:270px!important;transform-origin:50% 110%!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep+.bfcm-lstep{margin-left:-18px!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps{padding-bottom:30px!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-builder__bar{margin-top:20px!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(1){transform:rotate(-4deg) translateY(8px)!important;z-index:1}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(2){transform:rotate(3deg)!important;z-index:2}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(3){transform:rotate(7deg) translateY(12px)!important;z-index:3}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n):hover,html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(n):focus-within{transform:rotate(0) translateY(-12px) scale(1.03)!important;z-index:10!important}
}
/* v11 (2026-11-03): Door Crashers = colour swatches only until a colour is picked, then sizes, then the add button appears once a size is chosen (no instruction text). */
html body .bfcm .bfcm-dcard.has-sw:not(.has-color) .bfcm-qa{display:none!important}
html body .bfcm .bfcm-dcard.has-sw.has-color .bfcm-qa{display:block!important}
html body .bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__lab{display:none!important}
/* AI 2026-11-03: Door Crashers keep the size circles visible after a size is picked (selected one filled black), Add to cart sits under them */
html body .bfcm .bfcm-dcard .bfcm-qa__opt.is-done .bfcm-qa__wrap{grid-template-rows:1fr!important;opacity:1!important;pointer-events:auto!important}
html body .bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__val[aria-pressed="true"]:not(.is-color),html body .bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__val[aria-pressed="true"]:not(.is-color) *{background:#000!important;color:#fff!important;border-color:#000!important;-webkit-text-fill-color:#fff!important}
html body .bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__panel{padding-top:2px!important}
/* v11 Make it a look: Anton heading like the other sections, bigger centre photo, stacked tabs, outline (not grey) button until options are picked */
html body .bfcm.bfcm-look .bfcm-look__h2--col,html body .bfcm.bfcm-look .bfcm-look__h2{font-family:'Anton',Impact,'Arial Narrow',Arial,sans-serif!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:0!important;line-height:.92!important}
html body .bfcm.bfcm-look .bfcm-builder .bfcm-builder__add.is-wait{background:transparent!important;color:#000!important;border:2px solid #000!important;opacity:1!important}
html body .bfcm.bfcm-look .bfcm-builder .bfcm-builder__add.is-wait:hover{background:#000!important;color:#fff!important}
@media(min-width:990px){
  html body .bfcm.bfcm-look .bfcm-look__h2--col{font-size:clamp(40px,3.9vw,64px)!important;margin:0 0 12px!important;white-space:nowrap}
  html body .bfcm.bfcm-look .bfcm-look__panel{grid-template-columns:minmax(260px,.9fr) minmax(340px,1.25fr) minmax(0,1.5fr)!important;column-gap:clamp(8px,1.2vw,20px)!important}
  html body .bfcm.bfcm-look .bfcm-look__hero img,html body .bfcm.bfcm-look .bfcm-look__heroimg{max-height:660px!important;width:100%!important}
  html body .bfcm.bfcm-look .bfcm-look__tabs{flex-direction:column!important;align-items:flex-start!important;gap:8px!important;flex-wrap:nowrap!important}
  html body .bfcm.bfcm-look .bfcm-look__tab{min-height:42px!important;padding:0 22px!important}
  html body .bfcm.bfcm-look .bfcm-look__copy .bfcm-look__head{position:static!important;top:auto!important;left:auto!important;margin:20px 0 0!important;display:flex!important;justify-content:flex-start!important}
  html body .bfcm.bfcm-look .bfcm-look__copy>div[data-reveal]{margin-bottom:0!important}
}
/* v12: Make it a look matches Door Crashers scale (padding, heading, bigger cards); size bubbles always on ONE line */
html body .bfcm.bfcm-look .bfcm-qa__vals,html body .bfcm.bfcm-look .bfcm-qa__vals.is-row{display:flex!important;flex-wrap:nowrap!important;gap:4px!important;justify-content:center!important}
html body .bfcm.bfcm-look .bfcm-qa__val:not(.is-color){flex:0 1 auto!important;min-width:0!important;width:auto!important;height:32px!important;padding:0 8px!important;font-size:12px!important;line-height:1!important}
@media(min-width:990px){
  html body .bfcm.bfcm-look.bfcm-pad{padding-top:clamp(40px,4.4vw,76px)!important;padding-bottom:clamp(36px,4vw,64px)!important}
  html body .bfcm.bfcm-look .bfcm-look__copy p.bfcm-look__h2--col{font-size:clamp(44px,4.6vw,72px)!important;white-space:normal!important;line-height:.9!important;margin:0 0 14px!important}
  html body .bfcm.bfcm-look .bfcm-look__copy h3{font-size:clamp(20px,1.9vw,30px)!important}
  html body .bfcm.bfcm-look .bfcm-look__copy>div{font-size:18px!important}
  html body .bfcm.bfcm-look .bfcm-look__panel{grid-template-columns:minmax(260px,.85fr) minmax(340px,1.15fr) minmax(0,1.6fr)!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep{flex:0 1 285px!important;width:285px!important;max-width:285px!important;padding-left:10px!important;padding-right:10px!important}
  html body .bfcm.bfcm-look .bfcm-qa__vals{gap:3px!important}
  html body .bfcm.bfcm-look .bfcm-qa__val:not(.is-color){padding:0 6px!important;font-size:11.5px!important}
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-lstep__img{height:300px!important;max-height:300px!important}
  html body .bfcm.bfcm-look .bfcm-look__hero img,html body .bfcm.bfcm-look .bfcm-look__heroimg{max-height:720px!important}
}
@media(max-width:989px){
  html body .bfcm.bfcm-look .bfcm-look__head{display:flex!important;justify-content:center!important}
  html body .bfcm.bfcm-look .bfcm-look__tabs{justify-content:center!important}
  html body .bfcm.bfcm-look .bfcm-look__hero img,html body .bfcm.bfcm-look .bfcm-look__heroimg{object-fit:contain!important;height:auto!important;max-height:420px!important}
}
/* AI 2026-11-03 v14: In cart · Edit looks part of the card: black pill like the other buttons, panel = soft frosted tray tucked under it, pill-shaped selects, round remove button */
html body .bfcm .bfcm-incart{background:#000!important;color:#fff!important;border:2px solid #000!important;border-radius:999px!important;font-family:'Jost',Arial,sans-serif!important;font-weight:700!important;box-shadow:none!important}
html body .bfcm .bfcm-incart.is-open{border-bottom-left-radius:999px!important}
html body .bfcm .bfcm-incart:hover{background:#fff!important;color:#000!important}
html body .bfcm .bfcm-incart-p{background:rgba(255,255,255,.55)!important;backdrop-filter:blur(4px);border:0!important;border-radius:18px!important;padding:8px!important;margin-top:8px!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)!important}
html body .bfcm .bfcm-incart-p .bfcm-incart-p__f select{border:2px solid #000!important;border-radius:999px!important;background-color:#fff!important;font:700 15px/1 'Jost',Arial,sans-serif!important;color:#000!important;padding-left:14px!important}
html body .bfcm .bfcm-incart-p .bfcm-incart-p__rm,html body .bfcm .bfcm-incart-p__row .bfcm-incart-p__rm{width:36px!important;min-width:36px!important;height:36px!important;border:2px solid #000!important;border-radius:50%!important;background:#fff!important;color:#000!important;font-size:15px!important}
html body .bfcm .bfcm-incart-p .bfcm-incart-p__rm:hover{background:#000!important;color:#fff!important}
/* AI 2026-11-03 v13: bigger Door Crashers swatches on desktop/tablet too */
@media(min-width:750px){html body .bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b{width:38px!important;height:38px!important}}
/* AI 2026-11-03 mobile Door Crashers: swatches big, exactly 3 per line, colour name under; In-cart edit panel readable (colour select + remove on line one, size select full width on line two). */
@media(max-width:749px){
  html body .bfcm .bfcm-dcard .bfcm-ghost-sw{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px 8px!important;justify-items:center!important;align-items:center!important;max-width:168px;margin:12px auto 0!important}
  html body .bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b{width:42px!important;height:42px!important;min-width:42px}
  html body .bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__nm{grid-column:1/-1!important;flex:none!important;margin:2px 0 0!important;font-size:17px!important}
  html body .bfcm .bfcm-dcard .bfcm-ghost-sw{max-width:100%!important;gap:12px 6px!important}
  html body .bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b{width:52px!important;height:52px!important;min-width:52px!important}
  html body .bfcm .bfcm-incart-p{padding:8px!important}
  html body .bfcm .bfcm-incart-p__row{display:grid!important;grid-template-columns:minmax(0,1fr) 40px!important;gap:8px!important;align-items:center}
  html body .bfcm .bfcm-incart-p__row .bfcm-incart-p__f{grid-column:1/-1!important}
  html body .bfcm .bfcm-incart-p__row .bfcm-incart-p__f:first-of-type{grid-column:1!important;grid-row:1}
  html body .bfcm .bfcm-incart-p__row .bfcm-incart-p__rm{grid-column:2!important;grid-row:1;width:40px;min-width:40px;height:40px;padding:0;border:2px solid #BF1763;border-radius:50%;background:#fff;color:#BF1763;font:700 16px/1 Jost,sans-serif}
  html body .bfcm .bfcm-incart-p__row .bfcm-incart-p__n{grid-column:1/-1}
  html body .bfcm .bfcm-incart-p__f select{width:100%!important;font-size:15px!important;padding:0 28px 0 12px!important;text-overflow:ellipsis;overflow:hidden}
}
/* AI 2026-11-03 v16: dropdown text sits on the LEFT of each pill (was pushed right by theme centring/indent), chevron stays on the right */
html body .bfcm .bfcm-incart-p select,html body .bfcm .bfcm-incart-p .bfcm-incart-p__f select{text-align:left!important;text-align-last:left!important;text-indent:0!important;padding-left:18px!important;padding-right:38px!important;justify-content:flex-start!important}
html body .bfcm .bfcm-incart-p .bfcm-incart-p__f{display:block!important;text-align:left!important;margin:0!important}
html body .bfcm .bfcm-incart-p .bfcm-incart-p__row{justify-content:flex-start!important;align-items:center!important}
/* AI 2026-11-03 v17: own chevron with real space on the RIGHT of each dropdown (theme arrow sat on the edge); extra right padding on the tray */
html body .bfcm .bfcm-incart-p .bfcm-incart-p__f select{-webkit-appearance:none!important;appearance:none!important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1.5 1.5L7 7l5.5-5.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>")!important;background-repeat:no-repeat!important;background-size:14px 9px!important;background-position:right 22px center!important;padding-right:52px!important}
html body .bfcm .bfcm-incart-p{padding-right:20px!important;padding-left:20px!important}
html body .bfcm .bfcm-incart-p .bfcm-incart-p__row{padding-right:4px!important}
/* AI 2026-11-03 v15: In-cart dropdowns breathe: roomier tray, bigger gaps between the two dropdowns and the remove button, text inset from the pill edge, chevron clear of the edge */
html body .bfcm .bfcm-incart-p{padding:14px 14px!important;margin-top:10px!important}
html body .bfcm .bfcm-incart-p .bfcm-incart-p__row{gap:12px!important}
html body .bfcm .bfcm-incart-p .bfcm-incart-p__row+.bfcm-incart-p__row{margin-top:12px!important}
html body .bfcm .bfcm-incart-p .bfcm-incart-p__f select{height:44px!important;min-height:44px!important;padding-left:20px!important;padding-right:38px!important;background-position:right 16px center!important;text-overflow:ellipsis}
html body .bfcm .bfcm-incart-p .bfcm-incart-p__rm,html body .bfcm .bfcm-incart-p__row .bfcm-incart-p__rm{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important}
@media(max-width:749px){
  html body .bfcm .bfcm-incart-p{padding:12px!important}
  html body .bfcm .bfcm-incart-p__row{grid-template-columns:minmax(0,1fr) 44px!important;gap:12px 10px!important}
  html body .bfcm .bfcm-incart-p__row .bfcm-incart-p__rm{width:44px!important;min-width:44px!important;height:44px!important}
  html body .bfcm .bfcm-incart-p__f select{padding:0 36px 0 18px!important}
}
/* AI 2026-11-03 v17b: final word on chevron spacing (must stay last) */
html body.template-page .bfcm .bfcm-incart-p .bfcm-incart-p__f select,html body .bfcm .bfcm-incart-p .bfcm-incart-p__f select{padding-right:52px!important;background-position:right 22px center!important;background-size:14px 9px!important}
@media(max-width:749px){html body .bfcm .bfcm-incart-p__f select{padding:0 50px 0 18px!important;background-position:right 20px center!important}}
/* AI 2026-11-03 v18: Make it a look cards less crammed: bigger, more spaced swatches; size row sits clear of the title; was price beside sale price */
html body .bfcm.bfcm-look .bfcm-lstep .bfcm-lstep__name{margin:10px 2px 14px!important;gap:10px!important}
html body .bfcm.bfcm-look .bfcm-lstep__pr{flex:none;display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
html body .bfcm.bfcm-look .bfcm-lstep__pr s{font:400 13px/1 'Jost',Arial,sans-serif;color:#444;text-decoration-thickness:1.5px}
html body .bfcm.bfcm-look .bfcm-piece small s{color:#444;font-weight:400}
html body .bfcm.bfcm-look .bfcm-lstep .bfcm-ext-sw{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:12px 16px!important;margin:4px 0 8px!important;padding:2px 0!important}
html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b{width:38px!important;height:38px!important;min-width:38px!important}
html body .bfcm.bfcm-look .bfcm-lstep .bfcm-qa__panel{padding-top:10px!important}
html body .bfcm.bfcm-look .bfcm-lstep .bfcm-qa__lab{margin:0 0 12px!important;padding:0!important;line-height:1.2!important;letter-spacing:.08em}
html body .bfcm.bfcm-look .bfcm-lstep .bfcm-qa__opt{margin:0 0 10px!important}
html body .bfcm.bfcm-look .bfcm-qa__vals,html body .bfcm.bfcm-look .bfcm-qa__vals.is-row{gap:8px!important}
html body .bfcm.bfcm-look .bfcm-qa__val:not(.is-color){height:40px!important;padding:0 13px!important;font-size:14px!important;min-width:44px!important}
@media(min-width:990px){
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep{flex:0 1 300px!important;width:300px!important;max-width:300px!important}
  html body .bfcm.bfcm-look .bfcm-qa__vals{gap:8px!important}
  html body .bfcm.bfcm-look .bfcm-qa__val:not(.is-color){padding:0 12px!important;font-size:14px!important}
}
/* AI 2026-11-03 v19: size bubbles WRAP inside the card (were one nowrap line, clipped at the card edge) */
html body .bfcm.bfcm-look .bfcm-qa__vals,html body .bfcm.bfcm-look .bfcm-qa__vals.is-row{flex-wrap:wrap!important;justify-content:center!important;gap:8px 6px!important;max-width:100%!important;overflow:visible!important}
html body .bfcm.bfcm-look .bfcm-qa__val:not(.is-color){flex:0 0 auto!important;height:38px!important;min-width:42px!important;padding:0 10px!important;font-size:14px!important}
html body .bfcm.bfcm-look .bfcm-lstep,html body .bfcm.bfcm-look .bfcm-lstep .bfcm-qa,html body .bfcm.bfcm-look .bfcm-lstep .bfcm-qa__panel,html body .bfcm.bfcm-look .bfcm-lstep .bfcm-qa__opt{overflow:visible!important;max-width:100%}
@media(max-width:749px){
  html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b{width:40px!important;height:40px!important;min-width:40px!important}
  html body .bfcm.bfcm-look .bfcm-lstep .bfcm-ext-sw{gap:12px 14px!important}
  html body .bfcm.bfcm-look .bfcm-qa__vals,html body .bfcm.bfcm-look .bfcm-qa__vals.is-row{gap:6px!important}
  html body .bfcm.bfcm-look .bfcm-qa__val:not(.is-color){padding:0 10px!important;min-width:40px!important}
}
/* AI 2026-11-03 v20: phone In-cart edit panel. Earlier flex rule (higher specificity) squashed the two dropdowns on top of each other and the remove button. Now: grid, each dropdown full width on its own line, remove button beside the first. */
@media(max-width:749px){
  html body .bfcm .bfcm-dcard .bfcm-incart-p .bfcm-incart-p__row,html body .bfcm .bfcm-incart-p .bfcm-incart-p__row{display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;flex-wrap:wrap!important;gap:10px!important;align-items:center!important;margin:0!important;padding:0!important}
  html body .bfcm .bfcm-incart-p .bfcm-incart-p__row+.bfcm-incart-p__row{margin-top:12px!important}
  html body .bfcm .bfcm-incart-p .bfcm-incart-p__row .bfcm-incart-p__f{grid-column:1/-1!important;width:100%!important;min-width:0!important;flex:none!important;display:block!important}
  html body .bfcm .bfcm-incart-p .bfcm-incart-p__row .bfcm-incart-p__f:first-child{grid-column:1!important;grid-row:1!important}
  html body .bfcm .bfcm-incart-p .bfcm-incart-p__row .bfcm-incart-p__f select{width:100%!important;min-width:0!important;max-width:100%!important;display:block!important}
  html body .bfcm .bfcm-incart-p .bfcm-incart-p__row .bfcm-incart-p__rm{grid-column:2!important;grid-row:1!important;justify-self:end}
  html body .bfcm .bfcm-incart-p .bfcm-incart-p__row .bfcm-incart-p__n{grid-column:1/-1!important}
}
/* AI 2026-11-03: collapsed "SIZE  Change : One" pill: real padding on the outside so text never hugs the rounded ends */
html body .bfcm .bfcm-qa__opt.is-done .bfcm-qa__lab,
html body .bfcm .bfcm-lstep .bfcm-qa__opt.is-done .bfcm-qa__lab{padding:9px 22px!important;min-height:40px!important;gap:6px 8px!important;box-sizing:border-box!important}
html body .bfcm .bfcm-qa__opt.is-done .bfcm-qa__lab b{margin-right:0}
/* AI 2026-11-04: Door Crashers images no longer slide up (entrance, backdrop and hover). Fade only; image stays put. */
html body .bfcm.bfcm-ready .bfcm-dcard[data-reveal],html body .bfcm.bfcm-ready .bfcm-dcard[data-reveal].is-in{translate:0 0!important}
html body .bfcm .bfcm-dcard .bfcm-dcard__back{transform:none!important}
/* AI 2026-11-04 (2): hover on the photos restored to how it was (rule removed). Real slide-up cause: the entrance keyframes animate `translate` 42% to 3%; drop that entrance, keep the gentle sway. */
html body .bfcm.bfcm-ready .bfcm-dcard.w-in .bfcm-dcard__img{animation-name:bfcm2-sway2!important}
/* AI 2026-11-04 (3): variant photos crossfade smoothly again (opacity transition guaranteed, not overridden) */
html body .bfcm .bfcm-dcard .bfcm-dcard__img{transition:opacity .5s ease,transform .45s cubic-bezier(.2,.8,.2,1)!important}
@media(prefers-reduced-motion:reduce){html body .bfcm .bfcm-dcard .bfcm-dcard__img{transition:opacity .01s!important}}
/* AI 2026-11-04 (4): hover restored: only the PHOTO grows. The whole card no longer lifts, scales or gets a shadow box. */
html body .bfcm .bfcm-dcard:hover,html body .bfcm .bfcm-dcard:focus-within{translate:none!important;scale:1!important;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))!important;box-shadow:none!important;--r:0deg;--ty:0}
/* AI 2026-11-04 (5): mouse tilt restored on hover (card tilts toward the cursor); still no lift, scale or shadow box */
@media(prefers-reduced-motion:reduce){html body .bfcm .bfcm-dcard:hover,html body .bfcm .bfcm-dcard:focus-within{transform:none!important}}
html body .bfcm .bfcm-dcard:hover .bfcm-dcard__stage,html body .bfcm .bfcm-dcard:hover .bfcm-dcard__stage::after{box-shadow:none!important;filter:none!important}
html body .bfcm .bfcm-dcard:hover .bfcm-dcard__img{transform:perspective(700px) translateY(-8px) scale(1.09)!important;transition:opacity .5s ease,transform .18s linear!important}
@media(prefers-reduced-motion:reduce){html body .bfcm .bfcm-dcard:hover .bfcm-dcard__img{transform:none!important}}

/* ===== from bfcm-final2.css ===== */
/* AI 2026-11-04 (Chris): Door Crashers phone swatches match the size circles; sheet swatches too; in-cart label is plain; discount tiles calm on phones. */
.bfcm .bfcm-incart.is-label{cursor:default;pointer-events:none}
/* AI 2026-11-04 (Chris): after Add, hide every colour/size step and show only the "Added" button until it resets */
html body .bfcm .bfcm-qa.is-added .bfcm-qa__opt,html body .bfcm .bfcm-qa.is-added .bfcm-qa__msg{display:none!important}
html body .bfcm .bfcm-qa.is-added .bfcm-qa__add{display:flex!important;background:#000;color:#fff;pointer-events:none}
html body .bfcm .bfcm-qa__panel.is-sheet .bfcm-qa.is-added .bfcm-qa__add.is-wait,html body .bfcm .bfcm-qa__panel.is-sheet.is-added .bfcm-qa__add.is-wait{display:flex!important}
/* AI 2026-11-04 (Chris): selected colour must be obvious on phones: thick black ring + check badge, others stay calm */
@media(max-width:749px){
  html body .bfcm .bfcm-qa__val.is-color[aria-pressed="true"],html body .bfcm .bfcm-ghost-sw__b.is-on,html body .bfcm .bfcm-ghost-sw__b.is-sel{position:relative;box-shadow:0 0 0 3px #fff,0 0 0 6px #000!important}
  html body .bfcm .bfcm-qa__val.is-color[aria-pressed="true"]::after,html body .bfcm .bfcm-ghost-sw__b.is-on::after,html body .bfcm .bfcm-ghost-sw__b.is-sel::after{content:"✓";position:absolute;top:-10px;right:-10px;width:22px;height:22px;border-radius:50%;background:#000;color:#fff;font:700 13px/22px 'Jost',Arial,sans-serif;text-align:center;z-index:3;pointer-events:none}
  html body .bfcm .bfcm-qa__val.is-color:not([aria-pressed="true"]){opacity:.8}
}
/* AI 2026-11-04 (Chris): one button only (no separate In cart pill); every size visible, sold out = clearly crossed out; My Size highlighted */
.bfcm .bfcm-incart{display:none!important}
.bfcm .bfcm-qa__val:not(.is-color).is-out{opacity:.55;background:#e9e9e9!important;color:#6b6b6b!important;border-style:dashed!important;cursor:not-allowed}
.bfcm .bfcm-qa__val.is-color.is-out{opacity:.5;filter:grayscale(1);cursor:not-allowed}
/* AI 2026-11-04 (Chris): out-of-stock colours hide completely, on the card and in the popup. Sizes keep their crossed-out state. */
html body .bfcm .bfcm-qa__val.is-color.is-out,html body .bfcm .bfcm-ghost-sw__b.is-out{display:none!important}
.bfcm .bfcm-qa__val.is-mine{position:relative;box-shadow:none!important}
.bfcm .bfcm-qa__val.is-mine:not(.is-out)::before{content:"★";position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;background:#fff;color:#000;border:2px solid #000;box-sizing:border-box;font:700 10px/14px 'Jost',Arial,sans-serif;text-align:center;z-index:2;pointer-events:none}
/* AI 2026-11-04 (Chris): Door Crashers always show the button. Before a colour is picked it is an outline "Pick a colour" button (options stay hidden); after, it follows the steps and turns into Add to cart. */
html body .bfcm .bfcm-dcard.has-sw .bfcm-qa .bfcm-qa__add{display:none!important}
html body .bfcm .bfcm-dc-hint{position:relative;z-index:31;display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:12px 0 0;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#000;box-shadow:inset 0 0 0 2px #000;font:700 16px/1 'Jost',Arial,sans-serif;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
/* AI 2026-11-04 (Chris): no white fill: outline only until a size is picked, then solid black (same for the native step button on Amour) */
html body .bfcm .bfcm-dcard .bfcm-qa__add.is-wait{background:transparent!important;color:#000!important;box-shadow:inset 0 0 0 2px #000!important;border:0!important}
html body .bfcm .bfcm-dcard .bfcm-qa__add:not(.is-wait):not(.is-busy){background:#000!important;color:#fff!important}
/* AI 2026-11-04 (Chris): no arrow; button inset from the card edges like the Amour button; slim timer bar under the colour name (no circles) */
html body .bfcm .bfcm-qa__add.is-wait .bfcm-qa__addtxt::after{content:none!important;animation:none!important}
html body .bfcm .bfcm-dcard .bfcm-dc-hint{width:auto;margin:12px 14px 18px;padding:0 22px}
html body .bfcm .bfcm-dc-timer{display:block;width:64px;height:5px;margin:8px auto 0;border-radius:99px;background:rgba(0,0,0,.18);overflow:hidden}
html body .bfcm .bfcm-dc-timer i{display:block;width:100%;height:100%;border-radius:99px;background:#000;transform:scaleX(0);transform-origin:left center}
html body .bfcm .bfcm-dc-timer.is-run i{animation:bfcm-dctimer 2.4s linear forwards}
html body .bfcm .bfcm-dcard.has-color .bfcm-dc-timer{display:none}
@keyframes bfcm-dctimer{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){html body .bfcm .bfcm-dc-timer{display:none}}
html body .bfcm .bfcm-dc-hint.is-ready{background:#000;color:#fff}
html body .bfcm .bfcm-dc-hint.is-busy{opacity:.7}
/* AI 2026-11-04 (Chris): My Size star badge in pink (links to the My Size look); keeps the star visible even on the selected black size circle */
html body .bfcm .bfcm-qa__val.is-mine:not(.is-out)::before{background:#FF69B4!important;color:#000!important;-webkit-text-fill-color:#000!important;border:2px solid #000!important;opacity:1!important;box-shadow:none!important}
/* AI 2026-11-04 (Chris: crowded, star cut off): room around the option rows so badges never clip, calmer selected rings */
html body .bfcm .bfcm-qa__vals{padding:8px 8px 4px!important;overflow:visible!important;gap:12px!important}
html body .bfcm .bfcm-qa__opt{overflow:visible!important}
html body .bfcm .bfcm-qa__val.is-color[aria-pressed="true"],html body .bfcm .bfcm-ghost-sw__b.is-on,html body .bfcm .bfcm-ghost-sw__b.is-sel{box-shadow:0 0 0 2px #fff,0 0 0 4px #000!important}
html body .bfcm .bfcm-qa__val.is-color[aria-pressed="true"]::after,html body .bfcm .bfcm-ghost-sw__b.is-on::after,html body .bfcm .bfcm-ghost-sw__b.is-sel::after{top:-6px!important;right:-6px!important;width:18px!important;height:18px!important;font:700 11px/18px 'Jost',Arial,sans-serif!important}
.bfcm .bfcm-qa__add.is-incart:not(.is-busy){background:#000;color:#fff}

/* swatches = same circle language as the size pills: white centre ring, black 2px edge, colour inside */
@media(max-width:749px){
  html body .bfcm .bfcm-dcard .bfcm-ghost-sw{gap:12px;justify-content:center;padding:0 4px}
  html body .bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b{width:46px!important;height:46px!important;min-width:46px!important;box-sizing:border-box;border:2px solid #000!important;padding:4px!important;background-clip:content-box!important;background-origin:content-box!important;background-color:transparent;box-shadow:none!important;transform:none}
  html body .bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b.is-on,html body .bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b.is-sel{box-shadow:0 0 0 2px #fff,0 0 0 4px #000!important}
  html body .bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__nm{margin-top:4px}
}

/* the options sheet: colour swatches in the same style, 3-4 per line with room */
html body .bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__vals{gap:12px}
html body .bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__val.is-color{width:48px!important;height:48px!important;box-sizing:border-box;border:2px solid #000!important;padding:4px!important;background-clip:content-box!important;background-origin:content-box!important;background-color:transparent;box-shadow:none!important}
html body .bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__val.is-color[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px #000!important}
/* AI 2026-11-04 (Chris): the countdown ring drew a second circle round each swatch (overlapping circles). It stays as an invisible timer so colours still rotate, but nothing is drawn. */
html body .bfcm .bfcm-ghost-sw__b.is-count::after{background:none!important;-webkit-mask:none!important;mask:none!important;border:0!important;box-shadow:none!important}
/* a hidden Add to cart until every step is done (no "Step 1: pick a colour" text) */
html body .bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__add.is-wait{display:none!important}

/* discount tiles: no float, no scroll lift, no spinning rays, no count-up jitter on phones and tablets */
@media(max-width:989px){
  html body .bfcm.bfcm-ready .bfcm-tier[data-reveal],html body .bfcm.bfcm-ready .bfcm-tier[data-reveal].w-in,html body .bfcm.bfcm-ready .bfcm-tier--feat,html body .bfcm.bfcm-ready .bfcm-tier--feat.w-in{animation:none!important;transition:none!important}
  html body .bfcm.bfcm-ready .bfcm-tier[data-reveal].is-focus,html body .bfcm.bfcm-ready .bfcm-tier[data-reveal]:hover{transform:rotate(var(--r,0deg))!important}
  html body .bfcm .bfcm-tier--feat::before{animation:none!important}
  html body .bfcm .bfcm-tier__pct{font-variant-numeric:tabular-nums}
}

/* AI 2026-11-04 (Chris): desktop discount tiles wider and shorter, overlapping more; narrower heading column gives the row more room. */
@media(min-width:990px){
  html body .bfcm .bfcm-tiers__grid{grid-template-columns:minmax(0,.62fr) minmax(0,2.8fr)}
  html body .bfcm .bfcm-tiers__row{padding:24px 12px 20px 0}
  html body .bfcm .bfcm-tier{min-height:clamp(210px,17vw,300px);margin-left:-3.5%;padding-left:1%;padding-right:5.5%}
  html body .bfcm .bfcm-tier .bfcm-tier__pct{font-size:clamp(34px,3.5vw,54px)}
  html body .bfcm .bfcm-tier--feat .bfcm-tier__pct{font-size:clamp(48px,5vw,76px)}
  html body .bfcm .bfcm-tier:last-child{padding-right:2%}
  html body .bfcm .bfcm-tier:first-child{margin-left:0}
  html body .bfcm .bfcm-tier--feat{min-height:clamp(240px,20vw,340px);flex-grow:1.5}
}

/* ===== from bfcm-final3.css ===== */
/* AI 2026-11-04 (Chris, phone options sheet): round size bubbles, more room at the bottom, button text fits */
html body .bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__val:not(.is-color){width:52px!important;min-width:52px!important;height:52px!important;min-height:52px!important;padding:0!important;border-radius:50%!important;display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;flex:none;font-size:15px;line-height:1;white-space:nowrap}
html body .bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__vals{gap:12px 14px;padding-bottom:6px;justify-content:flex-start}
html body .bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__opt{padding-bottom:10px}
html body .bfcm .bfcm-sheet__box{padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))!important}
html body .bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__add{margin-top:10px;padding-left:16px;padding-right:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== from bfcm-2026-plus.css ===== */
/* SweetLegs BFCM 2026 - "plus" layer: bigger scale, tighter spacing, richer motion. Loads after bfcm-2026.css. */

/* ---------- shared: shine on buttons ---------- */
.bfcm-btn{position:relative;overflow:hidden}
.bfcm-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s var(--bf-ease)}
.bfcm-btn:hover::after,.bfcm-btn:focus-visible::after{left:130%}
.bfcm .bfcm-btn--black:hover{background:#111}
@keyframes bfcm-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes bfcm-bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes bfcm-glow{0%,100%{opacity:.55;scale:1}50%{opacity:.95;scale:1.08}}
@keyframes bfcm-rise{
  0%{opacity:0;transform:translateY(54px) skewY(5deg);text-shadow:7px 0 0 var(--bf-pink),-7px 0 0 var(--bf-violet)}
  55%{opacity:1;text-shadow:7px 0 0 var(--bf-pink),-7px 0 0 var(--bf-violet)}
  100%{opacity:1;transform:none;text-shadow:0 0 0 transparent}
}

/* ---------- HERO: big, tight, overlapping like the design ---------- */
.bfcm-hero{isolation:isolate}
.bfcm-hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:0;align-items:center;max-width:1640px;padding-top:clamp(18px,2.4vw,36px);padding-bottom:clamp(30px,3.4vw,52px)}
.bfcm-hero__text{position:relative;z-index:8}
.bfcm .bfcm-hero__h1{font-size:clamp(78px,13.4vw,226px);line-height:.83;letter-spacing:-.004em}
.bfcm .bfcm-hero__sub{font-size:clamp(40px,6.2vw,104px);line-height:.9;margin-top:.1em}
.bfcm .bfcm-hero__offer{font-size:clamp(20px,2.3vw,36px);margin:clamp(12px,1.4vw,22px) 0 clamp(18px,2vw,30px)}
.bfcm .bfcm-hero__link{font-size:clamp(16px,1.4vw,20px)}
.bfcm-hero .bfcm-btn--white{min-height:clamp(48px,4vw,64px);padding:0 clamp(28px,3vw,48px);font-size:clamp(17px,1.6vw,24px)}
.bfcm-ready .bfcm-hero__h1 span{animation:bfcm-rise .8s var(--bf-ease) both}
.bfcm-ready .bfcm-hero__h1 span:nth-child(2){animation-delay:.1s}
.bfcm-ready .bfcm-hero__sub{animation:bfcm-rise .8s var(--bf-ease) .22s both}

.bfcm-collage{width:112%;max-width:none;margin-left:-10%;aspect-ratio:1/.98}
.bfcm-collage::before{content:"";position:absolute;inset:6% 4% 0;background:radial-gradient(closest-side,rgba(255,105,180,.38),rgba(180,105,255,.16) 55%,transparent 72%);animation:bfcm-glow 5s ease-in-out infinite;z-index:0;pointer-events:none}
.bfcm-card{transform:perspective(1000px) rotate(var(--r,0deg)) translate(var(--px,0),var(--py,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s var(--bf-ease),box-shadow .4s}
.bfcm-card--l{--r:-7deg;left:5%;top:17%;width:32%;z-index:1}
.bfcm-card--c{--r:0deg;left:30%;top:0;width:43%;z-index:3}
.bfcm-card--r{--r:6deg;left:69%;top:9%;width:30%;z-index:2}
.bfcm-card--c .bfcm-card__foot{min-height:17%}
.bfcm-badge small{font-size:clamp(14px,2.2vw,34px)}
.bfcm-badge b{font-size:clamp(48px,7.6vw,128px)}
.bfcm-card--l:hover{--r:-3deg}.bfcm-card--r:hover{--r:2deg}.bfcm-card--c:hover{--r:-1.5deg}
.bfcm-card:hover{box-shadow:0 34px 60px rgba(0,0,0,.7),0 0 0 3px var(--bf-pink);z-index:6}
.bfcm-ready .bfcm-hero .bfcm-card{animation:bfcm-deal .75s var(--bf-ease) backwards,bfcm-float 6.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*90ms + 150ms),calc(var(--i,0)*-1.7s)}
.bfcm-card:hover{animation-play-state:running,paused}

/* ticker: bigger, with star separators */
.bfcm-ticker{transform:rotate(-1.6deg) scaleX(1.04);margin:-18px 0}
.bfcm-ticker__track span{font-size:clamp(22px,2.6vw,38px);padding:clamp(14px,1.6vw,22px) clamp(18px,2.4vw,36px);display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.bfcm-ticker__track span::after{content:"\2726";font-family:Arial,sans-serif;font-size:.62em;color:#000}
.bfcm-ticker-wrap{padding:18px 0 22px}

/* ---------- DOOR CRASHERS ---------- */
.bfcm-dc{padding-top:clamp(22px,3vw,44px);padding-bottom:clamp(36px,4.5vw,64px)}
.bfcm-dc__head{margin-bottom:clamp(14px,1.8vw,24px)}
.bfcm .bfcm-dc__h2{font-size:clamp(58px,8.4vw,136px);line-height:.88}
.bfcm .bfcm-dc__tag{font-size:clamp(22px,2.8vw,42px)}
.bfcm-dc__grid{gap:clamp(10px,1.4vw,20px)}
.bfcm-dcard{transform:perspective(1000px) rotate(var(--r,0deg)) translateY(var(--ty,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .28s var(--bf-ease),box-shadow .4s,scale .3s var(--bf-ease)}
.bfcm-ready .bfcm-dcard[data-reveal]{opacity:0;translate:0 46px;transform:perspective(1000px) rotate(var(--r,0deg)) translateY(var(--ty,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .6s var(--bf-ease),translate .7s var(--bf-ease),transform .28s var(--bf-ease),box-shadow .4s,scale .3s var(--bf-ease);transition-delay:calc(var(--i,0)*110ms),calc(var(--i,0)*110ms),0s,0s,0s}
.bfcm-ready .bfcm-dcard[data-reveal].is-in{opacity:1;translate:0 0;transform:perspective(1000px) rotate(var(--r,0deg)) translateY(var(--ty,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.bfcm-dcard__back{transition:transform .6s var(--bf-ease),opacity .4s,clip-path .5s var(--bf-ease)}
.bfcm-dcard__name{font-size:clamp(17px,1.6vw,22px);font-weight:700}
.bfcm-dcard__sale{display:inline-block;transform-origin:left bottom;transition:transform .35s var(--bf-ease)}
.bfcm-dcard:hover{--r:-2deg;--ty:-14px;scale:1.03;box-shadow:0 28px 48px rgba(0,0,0,.28);z-index:4}
.bfcm-dcard:nth-child(even):hover{--r:2deg}
.bfcm-dcard:hover .bfcm-dcard__back{clip-path:polygon(0 2%,100% 0,100% 100%,0 100%)}
.bfcm-dcard:hover .bfcm-dcard__img{transform:scale(1.09) translateY(-8px)}
.bfcm-dcard:hover .bfcm-dcard__sale{transform:scale(1.12) rotate(-3deg)}
.bfcm-dcard__flag{background:#000;color:#fff}

/* ---------- DISCOUNT TIERS ---------- */
.bfcm-tiers{padding-top:clamp(30px,4vw,56px);padding-bottom:clamp(36px,4.6vw,64px)}
.bfcm .bfcm-tiers__h2{font-size:clamp(46px,6vw,96px)}
.bfcm .bfcm-tiers__sub{font-size:clamp(22px,2.4vw,34px)}
.bfcm .bfcm-tier{margin-left:-2%;padding:clamp(22px,2.6vw,40px) 6px}
.bfcm-tier__pct{font-size:clamp(36px,4.8vw,72px)}
.bfcm-tier--feat .bfcm-tier__pct{font-size:clamp(54px,7vw,108px)}
.bfcm-tier__off{font-size:clamp(15px,1.6vw,24px)}
.bfcm-tier__link{font-size:clamp(12px,1.1vw,15px);font-weight:700}
.bfcm-tier:nth-child(1){animation:bfcm-bob 3.4s ease-in-out -0.0s infinite}
.bfcm-tier:nth-child(2){animation:bfcm-bob 3.4s ease-in-out -.6s infinite}
.bfcm-tier:nth-child(3){animation:bfcm-bob 3.4s ease-in-out -1.2s infinite}
.bfcm-tier:nth-child(4){animation:bfcm-bob 3.4s ease-in-out -1.8s infinite}
.bfcm-tier:nth-child(5){animation:bfcm-bob 3.4s ease-in-out -2.4s infinite}
.bfcm .bfcm-tier--feat{animation:bfcm-pulse 2.4s ease-in-out infinite,bfcm-bob 3.4s ease-in-out -3s infinite}
.bfcm-tier:hover{animation-play-state:paused;transform:translateY(-14px) rotate(0deg) scale(1.1);box-shadow:0 22px 36px rgba(0,0,0,.6),0 0 0 3px #fff}
.bfcm-ready .bfcm-tier[data-reveal].is-in:hover{transform:translateY(-14px) rotate(0deg) scale(1.1)}

/* ---------- MAKE IT A LOOK ---------- */
.bfcm-look{padding-top:clamp(28px,3.4vw,52px)}
.bfcm .bfcm-look__h2{font-size:clamp(58px,8.4vw,136px)}
.bfcm-look__heroimg{animation:bfcm-float 7s ease-in-out infinite}
.bfcm-piece{transform:perspective(800px) rotate(var(--r,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.bfcm-piece:hover,.bfcm-piece:focus-visible{--r:0deg;transform:perspective(800px) rotate(0deg) translateY(-10px) scale(1.06) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.bfcm-panel2:hover{transform:rotate(-1deg) translateY(-8px) scale(1.02)}

/* ---------- responsive ---------- */
@media(max-width:989px){
  .bfcm-hero__grid{grid-template-columns:minmax(0,1fr)}
  .bfcm-collage{width:100%;margin:6px auto 0;max-width:640px}
}
@media(max-width:749px){
  .bfcm .bfcm-hero__h1{font-size:clamp(78px,24vw,130px)}
  .bfcm .bfcm-hero__sub{font-size:clamp(40px,12vw,70px)}
  .bfcm-collage{aspect-ratio:1/1.05}
  .bfcm .bfcm-tier,.bfcm .bfcm-tier:first-child{margin-left:0}
  .bfcm-tier:nth-child(n){animation:none}
  .bfcm .bfcm-tier--feat{animation:bfcm-pulse 2.4s ease-in-out infinite}
}
@media(hover:none){
  .bfcm-dcard:hover{--r:0deg;--ty:0;scale:1}
  .bfcm-tier:hover{transform:rotate(var(--r,0deg))}
}
@media(prefers-reduced-motion:reduce){
  .bfcm *,.bfcm *::before,.bfcm *::after{animation:none!important;transition:none!important}
  .bfcm-ready .bfcm-dcard[data-reveal]{opacity:1!important;translate:none!important}
}

/* ===== from bfcm-2026.css ===== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Jost:wght@400;500;700&display=swap');

/* SweetLegs BFCM 2026 - "Black Friday. In full colour."  V6: sizes re-checked against the mockup, portrait product cards, fun-shopping motion pass.
   Motion: hero deal-in + idle sway + pointer parallax, door-crasher 3D tilt/glare/pop, tier slide-in + sway + 70% pulse, look slide/stagger, button shine, ticker with pause.
   Everything is static under prefers-reduced-motion. All rules are scoped to .bfcm sections; no theme header/footer overrides. */
.bfcm{--bf-pink:#FF69B4;--bf-apricot:#FFB469;--bf-mint:#69FFB4;--bf-blue:#69B4FF;--bf-violet:#B469FF;--bf-lime:#B4FF69;--bf-dpink:#BF1763;--bf-ease:cubic-bezier(.2,.8,.2,1);--bf-spring:cubic-bezier(.34,1.56,.64,1);font-family:'Jost',Arial,sans-serif;color:#000;position:relative;overflow:hidden;-webkit-font-smoothing:antialiased}
.bfcm *,.bfcm *::before,.bfcm *::after{box-sizing:border-box}
.bfcm img{display:block;max-width:100%}
.bfcm a{color:inherit}
.bfcm-anton{font-family:'Anton',Impact,'Arial Narrow',Arial,sans-serif;font-weight:400;text-transform:uppercase;line-height:.9}
.bfcm-c-pink{--c:var(--bf-pink)}.bfcm-c-apricot{--c:var(--bf-apricot)}.bfcm-c-mint{--c:var(--bf-mint)}.bfcm-c-blue{--c:var(--bf-blue)}.bfcm-c-violet{--c:var(--bf-violet)}.bfcm-c-lime{--c:var(--bf-lime)}
.bfcm-pad{padding-left:clamp(16px,2.6vw,48px);padding-right:clamp(16px,2.6vw,48px)}

/* buttons (with a shine sweep on hover) */
.bfcm-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 30px;border-radius:999px;font:700 17px/1 'Jost',Arial,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .25s var(--bf-spring),box-shadow .22s var(--bf-ease),background .2s,color .2s}
.bfcm .bfcm-btn--white{background:#fff;color:#000}
.bfcm .bfcm-btn--black{background:#000;color:#fff}
.bfcm-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);z-index:-1;pointer-events:none}
.bfcm .bfcm-btn--white::after{background:linear-gradient(100deg,transparent,rgba(255,105,180,.5),transparent)}
.bfcm-btn:hover::after,.bfcm-btn:focus-visible::after{left:130%;transition:left .6s var(--bf-ease)}
.bfcm-btn:hover,.bfcm-btn:focus-visible{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 20px rgba(0,0,0,.25)}
.bfcm-btn:active{transform:scale(.97)}
.bfcm-btn .bfcm-arrow{display:inline-block;transition:transform .25s var(--bf-spring)}
.bfcm-btn:hover .bfcm-arrow{transform:translateX(6px)}
.bfcm a:focus-visible,.bfcm button:focus-visible{outline:3px solid var(--bf-pink);outline-offset:3px}

/* reveal (hidden only once JS marks the section ready) */
.bfcm-ready [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .55s var(--bf-ease),transform .6s var(--bf-ease);transition-delay:calc(var(--i,0)*80ms)}
.bfcm-ready [data-reveal].is-in{opacity:1;transform:none}

/* ============ HERO ============ */
.bfcm-hero{background:#000;color:#fff}
.bfcm-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;max-width:1600px;margin:0 auto;padding-top:clamp(24px,3vw,48px);padding-bottom:clamp(48px,5vw,84px);gap:0}
.bfcm-hero__text{position:relative;z-index:4}
.bfcm .bfcm-hero__h1{margin:0;font-size:clamp(64px,12.4vw,200px);line-height:.88;color:#fff}
.bfcm-hero__h1 span{display:block;white-space:nowrap}
.bfcm .bfcm-hero__sub{margin:.1em 0 0;font-size:clamp(34px,5.4vw,88px);line-height:.9;color:var(--bf-pink)}
.bfcm .bfcm-hero__offer{margin:clamp(12px,1.3vw,20px) 0 clamp(18px,2vw,30px);font-size:clamp(18px,2.1vw,32px);font-weight:400;color:#fff;line-height:1.2}
.bfcm-hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.bfcm .bfcm-hero__link{color:#fff;font-size:17px;text-underline-offset:4px;transition:color .2s,letter-spacing .25s}
.bfcm .bfcm-hero__link:hover{color:var(--bf-pink);letter-spacing:.03em}
.bfcm-sticker{display:none!important}

.bfcm-collage{position:relative;width:118%;margin-left:-14%;aspect-ratio:1/.95;max-width:none}
.bfcm-lay{position:absolute;inset:0;pointer-events:none}
.bfcm-lay .bfcm-card{pointer-events:auto}
.bfcm-card{--tx:0px;--ty:0px;position:absolute;margin:0;background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.55);transform:translate(var(--tx),var(--ty)) rotate(var(--r,0deg));transition:transform .35s var(--bf-ease),box-shadow .3s,translate .3s var(--bf-spring)}
.bfcm-card__img,.bfcm-card__ph{width:100%;aspect-ratio:3/4.3;object-fit:cover;object-position:top}
.bfcm-card__ph{background:#222 repeating-linear-gradient(45deg,#2a2a2a 0 12px,#333 12px 24px)}
.bfcm-card__foot{background:var(--c,var(--bf-pink));min-height:clamp(18px,2.2vw,36px)}
.bfcm-card--l{--r:-6deg;left:23%;top:15%;width:26%;z-index:1}
.bfcm-card--c{--r:0deg;left:46%;top:0;width:33%;z-index:3}
.bfcm-card--r{--r:6deg;left:76%;top:11%;width:22%;z-index:2}
.bfcm-card--c .bfcm-card__foot{display:flex;align-items:center;justify-content:flex-start;padding:4px 7%;min-height:clamp(54px,7vw,116px)}
.bfcm-badge{display:flex;align-items:center;gap:.18em;color:#000;font-family:'Anton',Impact,Arial,sans-serif;text-transform:uppercase;line-height:.85}
.bfcm-badge small{font-size:clamp(11px,1.45vw,24px);line-height:.9;max-width:1.3em}
.bfcm-badge b{display:inline-block;transform-origin:left center;font-weight:400;font-size:clamp(40px,6.4vw,104px)}
.bfcm-card:hover{box-shadow:0 26px 50px rgba(0,0,0,.7);z-index:5;translate:0 -10px;scale:1.03}
.bfcm-card--l:hover{--r:-3deg}.bfcm-card--r:hover{--r:3deg}.bfcm-card--c:hover{--r:-1.5deg}

/* hero entrance: deal in once, staggered (guide: 500-700ms, 70-100ms stagger), then a gentle idle sway */
@keyframes bfcm-deal{from{opacity:0;transform:translateY(60px) rotate(calc(var(--r,0deg) + 12deg)) scale(.9)}to{opacity:1;transform:rotate(var(--r,0deg))}}
@keyframes bfcm-sway{0%,100%{rotate:-1.1deg}50%{rotate:1.1deg}}
@keyframes bfcm-hue{0%,100%{color:var(--bf-pink)}16%{color:var(--bf-apricot)}33%{color:var(--bf-mint)}50%{color:var(--bf-blue)}66%{color:var(--bf-violet)}83%{color:var(--bf-lime)}}
@keyframes bfcm-throb{0%,100%{scale:1}50%{scale:1.08}}
.bfcm-ready .bfcm-hero .bfcm-card{animation:bfcm-deal .65s var(--bf-ease) backwards,bfcm-sway 5.5s ease-in-out 1.2s infinite;animation-delay:calc(var(--i,0)*90ms + 80ms),calc(var(--i,0)*.7s + 1.2s)}
.bfcm-ready .bfcm-hero .bfcm-card:hover{animation-play-state:running,paused}
.bfcm-ready .bfcm-hero__sub{animation:bfcm-hue 10s linear 1.5s infinite}
.bfcm-ready .bfcm-badge b{animation:bfcm-throb 2.2s ease-in-out 1.5s infinite}

/* ticker */
.bfcm-ticker-wrap{background:transparent;padding:0;margin-top:-26px;position:relative;z-index:6}
.bfcm-ticker{background:var(--bf-pink);color:#000;transform:rotate(-1deg) scaleX(1.03);position:relative;overflow:hidden;display:flex;align-items:center}
.bfcm-ticker__track{display:flex;flex:1;white-space:nowrap;width:max-content;animation:bfcm-ticker var(--speed,28s) linear infinite}
.bfcm-ticker__track span{font-family:'Anton',Impact,Arial,sans-serif;font-size:clamp(17px,2.1vw,32px);letter-spacing:.07em;padding:clamp(12px,1.2vw,18px) clamp(22px,3.2vw,52px);text-transform:uppercase}
.bfcm-ticker:hover .bfcm-ticker__track{animation-duration:calc(var(--speed,28s)*2.2)}
.bfcm-ticker.is-paused .bfcm-ticker__track{animation-play-state:paused}
.bfcm-ticker__pause{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:2px solid #000;background:var(--bf-pink);color:#000;font:700 12px/1 'Jost',Arial,sans-serif;cursor:pointer;z-index:2}
@keyframes bfcm-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ DOOR CRASHERS ============ */
.bfcm-dc{background:#fff;padding-top:clamp(40px,4.4vw,76px);padding-bottom:clamp(36px,4vw,64px)}
.bfcm-dc__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 30px;max-width:1600px;margin:0 auto clamp(18px,2vw,32px)}
.bfcm .bfcm-dc__h2{margin:0;font-size:clamp(46px,8vw,128px);line-height:.9;color:#000}
.bfcm .bfcm-dc__tag{margin:0;font:700 clamp(20px,2.3vw,36px)/1.1 'Jost',Arial,sans-serif;color:var(--bf-dpink)}
@media(min-width:750px){.bfcm-dc__tag{border-left:3px solid var(--bf-pink);padding-left:30px}}
.bfcm-dc__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,22px);max-width:1600px;margin:0 auto;perspective:1400px}
.bfcm-dcard{position:relative;display:flex;flex-direction:column;background:var(--c,var(--bf-pink));min-width:0;transition:transform .3s var(--bf-ease),box-shadow .3s,translate .3s var(--bf-spring)}
/* portrait product card (3:4.3), matching the store's portrait cards */
.bfcm-dcard__stage{position:relative;background:#f4f4f4;aspect-ratio:3/4.3;overflow:hidden}
.bfcm-dcard__stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--gx,50%) var(--gy,25%),rgba(255,255,255,.55),transparent 55%)}
.bfcm-dcard:hover .bfcm-dcard__stage::after{opacity:1}
.bfcm-dcard__back{position:absolute;inset:0;background:var(--c,var(--bf-pink));clip-path:polygon(0 15%,100% 0,100% 100%,0 100%);transform:translateY(24%);opacity:0;transition:transform .55s var(--bf-spring),opacity .35s,clip-path .35s var(--bf-ease)}
.bfcm-dcard.is-in .bfcm-dcard__back,.bfcm-dcard:not([data-reveal]) .bfcm-dcard__back{transform:none;opacity:1}
.bfcm-dcard:nth-child(2).is-in .bfcm-dcard__back{transition-delay:.07s}.bfcm-dcard:nth-child(3).is-in .bfcm-dcard__back{transition-delay:.14s}.bfcm-dcard:nth-child(4).is-in .bfcm-dcard__back{transition-delay:.21s}
.bfcm-dcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;mix-blend-mode:multiply;transform-origin:50% 100%;transition:transform .45s var(--bf-spring)}
.bfcm-dcard:hover .bfcm-dcard__img{transform:scale(1.07) translateY(-2%)}
.bfcm-dcard__ph{position:absolute;inset:0;display:grid;place-items:center;font:500 14px 'Jost',Arial,sans-serif;color:#555}
.bfcm-dcard__flag{position:absolute;left:10px;top:10px;z-index:3;background:#000;color:#fff;font:700 13px/1 'Jost',Arial,sans-serif;padding:7px 10px;border-radius:999px}
.bfcm-dcard__info{background:var(--c,var(--bf-pink));padding:12px clamp(14px,1.5vw,22px) 0;flex:0}
.bfcm-dcard__name{margin:0;font:500 clamp(16px,1.35vw,20px)/1.15 'Jost',Arial,sans-serif;min-height:2.3em;color:#000}
.bfcm-dcard__name a{text-decoration:none}
.bfcm-dcard__prices{display:flex;align-items:baseline;gap:10px;margin-top:6px;flex-wrap:wrap}
.bfcm-dcard__sale{display:inline-block;transform-origin:left bottom;font:700 clamp(32px,3.2vw,50px)/1 'Jost',Arial,sans-serif;color:#000}
.bfcm-dcard__was{font:400 clamp(15px,1.2vw,18px) 'Jost',Arial,sans-serif;color:#000}
.bfcm-dcard__was s{position:relative;text-decoration:none}
.bfcm-dcard__was s::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:#000;transform-origin:left;transition:transform .5s var(--bf-ease) .6s}
.bfcm-ready .bfcm-dcard:not(.is-in) .bfcm-dcard__was s::after{transform:scaleX(0)}
@keyframes bfcm-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
.bfcm-ready .bfcm-dcard.is-in .bfcm-dcard__sale{animation:bfcm-pop .6s var(--bf-ease) calc(var(--i,0)*80ms + .35s) backwards}
.bfcm-dcard:hover .bfcm-dcard__sale{animation:bfcm-throb 1s ease-in-out infinite}
.bfcm-dcard__btn{margin:0}
.bfcm-dcard__cta{background:var(--c,var(--bf-pink));padding:12px clamp(14px,1.5vw,22px) clamp(14px,1.5vw,22px);margin-top:auto}
.bfcm .bfcm-dcard__btn{width:100%;min-height:50px}
.bfcm-dcard:hover{translate:0 -10px;box-shadow:0 22px 34px rgba(0,0,0,.24);z-index:3}
.bfcm-dcard:hover .bfcm-dcard__back{clip-path:polygon(0 4%,100% 0,100% 100%,0 100%)}
/* pointer tilt (set by JS once the reveal has finished) */
.bfcm-ready .bfcm-dcard.is-live{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s linear,box-shadow .3s,translate .3s var(--bf-spring);transition-delay:0s}

/* ============ DISCOUNT TIERS ============ */
.bfcm-tiers{background:#000;color:#fff;padding-top:clamp(30px,3.4vw,56px);padding-bottom:clamp(34px,3.8vw,64px)}
.bfcm-tiers__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.3fr);align-items:center;gap:clamp(16px,2.4vw,40px);max-width:1600px;margin:0 auto}
.bfcm .bfcm-tiers__h2{margin:0;font-size:clamp(34px,4.4vw,70px);line-height:.95;color:#fff}
.bfcm .bfcm-tiers__sub{margin:10px 0 0;font:400 clamp(18px,1.8vw,28px)/1.2 'Jost',Arial,sans-serif;color:#fff}
.bfcm-tiers__row{display:flex;align-items:stretch;padding:14px 0 16px}
.bfcm .bfcm-tier{position:relative;overflow:hidden;flex:1 1 0;min-width:0;min-height:clamp(150px,15vw,250px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:clamp(4px,.6vw,10px);padding:16px 4px;background:var(--c);color:#000;text-decoration:none;transform:rotate(var(--r,0deg));margin-left:-1.2%;transition:transform .35s var(--bf-spring),box-shadow .22s,opacity .25s,scale .3s var(--bf-spring);border-radius:3px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.bfcm .bfcm-tier:first-child{margin-left:0}
.bfcm-tier:nth-child(1){--r:-3deg;--sx:-60px}.bfcm-tier:nth-child(2){--r:2deg;--sx:60px}.bfcm-tier:nth-child(3){--r:-2deg;--sx:-60px}.bfcm-tier:nth-child(4){--r:3deg;--sx:60px}.bfcm-tier:nth-child(5){--r:-2deg;--sx:-60px}.bfcm-tier:nth-child(6){--r:2deg;--sx:60px}
.bfcm .bfcm-tier__pct{display:block;font-family:'Anton',Impact,Arial,sans-serif;font-size:clamp(28px,3.6vw,60px);line-height:.9;color:#000;transition:transform .3s var(--bf-spring)}
.bfcm .bfcm-tier__off{font:700 clamp(15px,1.5vw,24px)/1 'Jost',Arial,sans-serif;color:#000}
.bfcm .bfcm-tier__link{font:500 clamp(11px,.95vw,14px)/1 'Jost',Arial,sans-serif;text-decoration:underline;text-underline-offset:3px;color:#000}
.bfcm .bfcm-tier--feat{flex:1.35 1 0;min-height:clamp(170px,17vw,282px);z-index:2}
.bfcm .bfcm-tier--feat .bfcm-tier__pct{font-size:clamp(40px,5.2vw,88px)}
/* sweeping shine */
.bfcm-tier::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);pointer-events:none}
.bfcm-ready .bfcm-tier::after{animation:bfcm-shine 5s ease-in-out infinite;animation-delay:calc(var(--k,0)*.45s + 1s)}
.bfcm-tier:nth-child(1){--k:0}.bfcm-tier:nth-child(2){--k:1}.bfcm-tier:nth-child(3){--k:2}.bfcm-tier:nth-child(4){--k:3}.bfcm-tier:nth-child(5){--k:4}.bfcm-tier:nth-child(6){--k:5}
@keyframes bfcm-shine{0%,70%{left:-70%}100%{left:170%}}
.bfcm-ready .bfcm-tier{animation:bfcm-sway 4s ease-in-out infinite;animation-delay:calc(var(--k,0)*-.6s)}
.bfcm-ready .bfcm-tier--feat{animation:bfcm-throb 2.4s ease-in-out infinite}
.bfcm-ready .bfcm-tier--feat .bfcm-tier__pct{animation:bfcm-throb 2.4s ease-in-out .2s infinite}
.bfcm .bfcm-tier:hover,.bfcm .bfcm-tier:focus-visible{animation-play-state:paused;transform:translateY(-14px) rotate(0deg);scale:1.08;z-index:6;box-shadow:0 18px 28px rgba(0,0,0,.6)}
.bfcm .bfcm-tier:hover .bfcm-tier__pct{transform:scale(1.18)}
.bfcm-tiers__row:has(.bfcm-tier:hover) .bfcm-tier:not(:hover){opacity:.82;scale:.97}
.bfcm-ready .bfcm-tier[data-reveal]{transform:translate(var(--sx,0),28px) rotate(var(--r,0deg));transition:opacity .5s var(--bf-ease),transform .7s var(--bf-spring);transition-delay:calc(var(--i,0)*80ms)}
.bfcm-ready .bfcm-tier[data-reveal].is-in{transform:rotate(var(--r,0deg))}
.bfcm-ready .bfcm-tier[data-reveal].is-in:hover{transform:translateY(-14px) rotate(0deg)}

/* ============ MAKE IT A LOOK ============ */
.bfcm-look{background:#fff;padding-top:clamp(36px,4vw,68px);padding-bottom:clamp(40px,4.4vw,76px)}
.bfcm-look__wrap{max-width:1600px;margin:0 auto}
.bfcm-look__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(16px,2vw,32px)}
.bfcm .bfcm-look__h2{margin:0;font-family:'Jost',Arial,sans-serif;font-weight:700;text-transform:none;font-size:clamp(40px,5.8vw,92px);line-height:.95;letter-spacing:-.02em;color:#000}
.bfcm-look__tabs{display:flex;flex-wrap:wrap;gap:8px}
.bfcm-look__tab{min-height:46px;padding:0 22px;border-radius:999px;border:2px solid #000;background:#fff;color:#000;font:700 16px/1 'Jost',Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s,transform .25s var(--bf-spring)}
.bfcm-look__tab:hover{transform:translateY(-3px) rotate(-2deg)}
.bfcm-look__tab:active{transform:scale(.95)}
.bfcm-look__tab[aria-selected="true"]{background:#000;color:#fff}
.bfcm-look__panels{display:grid}
.bfcm-look__panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.15fr) minmax(0,1.15fr);gap:clamp(12px,2vw,32px);align-items:center;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
.bfcm-look__panel.is-active{opacity:1;visibility:visible;transition:opacity .25s ease}
.bfcm-look__copy h3{margin:0 0 10px;font:700 clamp(24px,2.6vw,40px)/1.05 'Jost',Arial,sans-serif;color:#000}
.bfcm-look__copy p{margin:0 0 22px;font:400 clamp(16px,1.2vw,19px)/1.45 'Jost',Arial,sans-serif;max-width:32ch}
.bfcm-look__hero{position:relative;aspect-ratio:4/5;display:grid;place-items:end center}
.bfcm-look__hero::before{content:"";position:absolute;left:10%;right:10%;bottom:0;height:18%;background:#f1f1f1;border-radius:4px}
.bfcm-look__heroimg{position:relative;width:100%;height:100%;object-fit:contain;object-position:bottom}
.bfcm-look__ph{width:100%;height:100%;background:#eee;display:grid;place-items:center;font:500 14px 'Jost',Arial,sans-serif;color:#555}
.bfcm-look__side{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(10px,1.2vw,18px);align-items:center}
.bfcm-pieces{display:grid;gap:clamp(10px,1.2vw,18px);align-content:center}
/* portrait piece cards (4:5 image, whole product visible) */
.bfcm-piece{display:block;background:#fff;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.16);padding:10px;transform:rotate(var(--r,0deg));transition:transform .35s var(--bf-spring),box-shadow .25s}
.bfcm-pieces .bfcm-piece:nth-child(1){--r:-2.5deg}.bfcm-pieces .bfcm-piece:nth-child(2){--r:2deg}.bfcm-pieces .bfcm-piece:nth-child(3){--r:-1.5deg}
.bfcm-piece:hover,.bfcm-piece:focus-visible{transform:rotate(0deg) translateY(-10px) scale(1.04);box-shadow:0 18px 30px rgba(0,0,0,.26);z-index:4}
.bfcm-piece__img{width:100%;aspect-ratio:4/5;object-fit:contain;background:#f4f4f4;transition:transform .4s var(--bf-spring)}
.bfcm-piece:hover .bfcm-piece__img{transform:scale(1.06)}
.bfcm-piece__lab{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font:500 16px/1.2 'Jost',Arial,sans-serif;color:#000}
.bfcm-piece__lab small{display:block;font:400 14px 'Jost',Arial,sans-serif;color:#444}
.bfcm-piece__go{flex:none;width:30px;height:30px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;font-size:14px;transition:transform .3s var(--bf-spring),background .2s}
.bfcm-piece:hover .bfcm-piece__go{transform:translateX(4px) scale(1.15);background:var(--bf-dpink)}
.bfcm-panel2{background:var(--c,var(--bf-mint));padding:clamp(14px,1.6vw,26px);display:flex;flex-direction:column;gap:12px;transition:transform .35s var(--bf-spring),box-shadow .3s}
.bfcm-panel2:hover{transform:translateY(-8px) rotate(1deg);box-shadow:0 16px 28px rgba(0,0,0,.2)}
.bfcm .bfcm-panel2 h4{margin:0;font-family:'Jost',Arial,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.4vw,38px);line-height:1;color:#000}
.bfcm-panel2 img{width:100%;aspect-ratio:4/5;object-fit:cover;mix-blend-mode:multiply}
/* look change: hero slides in and settles, cards deal in one by one */
@keyframes bfcm-lookhero{from{opacity:0;transform:translateX(36px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bfcm-lookpiece{from{opacity:0;transform:translateY(34px) rotate(calc(var(--r,0deg) + 7deg)) scale(.92)}to{opacity:1;transform:rotate(var(--r,0deg))}}
@keyframes bfcm-lookpanel{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
.bfcm-look__panel.is-active .bfcm-look__hero{animation:bfcm-lookhero .55s var(--bf-ease) both}
.bfcm-look__panel.is-active .bfcm-piece{animation:bfcm-lookpiece .6s var(--bf-ease) both}
.bfcm-look__panel.is-active .bfcm-pieces .bfcm-piece:nth-child(1){animation-delay:.12s}
.bfcm-look__panel.is-active .bfcm-pieces .bfcm-piece:nth-child(2){animation-delay:.24s}
.bfcm-look__panel.is-active .bfcm-pieces .bfcm-piece:nth-child(3){animation-delay:.36s}
.bfcm-look__panel.is-active .bfcm-panel2{animation:bfcm-lookpanel .6s var(--bf-ease) .3s both}

/* ============ RESPONSIVE ============ */
@media(max-width:989px){
 .bfcm-dc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bfcm-look__panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .bfcm-look__copy{grid-column:1/-1}
 .bfcm-look__side{grid-column:1/-1}
}
@media(max-width:749px){
 .bfcm-hero__grid{grid-template-columns:1fr}
 .bfcm .bfcm-hero__h1{font-size:clamp(64px,22vw,120px)}
 .bfcm .bfcm-hero__sub{font-size:clamp(34px,11vw,60px)}
 .bfcm-collage{width:100%;margin:20px 0 0;aspect-ratio:1/.95}
 .bfcm-card--l{left:2%;width:30%}.bfcm-card--c{left:30%;width:40%}.bfcm-card--r{left:68%;width:30%}
 .bfcm-tiers__grid{grid-template-columns:1fr}
 .bfcm-tiers__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .bfcm .bfcm-tier,.bfcm .bfcm-tier:first-child{margin-left:0;min-height:130px}
 .bfcm .bfcm-tier--feat{grid-column:1/-1;order:99}
 .bfcm-look__panel{grid-template-columns:1fr}
 .bfcm-look__hero{aspect-ratio:4/5;max-width:440px;margin:0 auto;width:100%}
 .bfcm-look__side{grid-template-columns:1fr}
 .bfcm-pieces{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .bfcm-piece{padding:6px}.bfcm-piece__lab{font-size:14px}.bfcm-piece__go{display:none}
 .bfcm-ready .bfcm-tier[data-reveal]{--sx:0px}
}
@media(hover:none){
 .bfcm-dcard:hover,.bfcm-piece:hover,.bfcm-panel2:hover{translate:none}
 .bfcm-piece:hover,.bfcm-panel2:hover{transform:rotate(var(--r,0deg))}
 .bfcm .bfcm-tier:hover{transform:rotate(var(--r,0deg));scale:1}
 .bfcm-card:hover{translate:none;scale:1}
 .bfcm-dcard:hover .bfcm-dcard__img{transform:none}
 .bfcm-dcard:active,.bfcm-piece:active,.bfcm .bfcm-tier:active{scale:.97}
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
 .bfcm *,.bfcm *::before,.bfcm *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .bfcm-ready [data-reveal]{opacity:1!important;transform:none!important}
 .bfcm-ready .bfcm-tier[data-reveal]{transform:rotate(var(--r,0deg))!important}
 .bfcm-dcard__back{opacity:1!important;transform:none!important}
 .bfcm-ready .bfcm-dcard:not(.is-in) .bfcm-dcard__was s::after{transform:none!important}
 .bfcm-ticker{transform:rotate(-1deg)!important}
 .bfcm-ticker__track{overflow-x:auto;width:100%}
 .bfcm-ticker__pause{display:none}
 .bfcm-tier::after,.bfcm-btn::after{display:none}
}

/* AI 2026-11-04 (Chris): "Make it a look" now uses the native Favourite-combos section (fanned, overlapping cards).
   Restyled to the BFCM look: Anton display heading, black-outlined pill inputs, black pill button. Scoped to this instance. */
[id$="__bfcm_combos"] .s-ai-sale-combos .combos-head h2{font-family:'Anton',Impact,Arial,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.92;font-size:clamp(56px,8vw,115px);color:#000}
[id$="__bfcm_combos"] .s-ai-sale-combos .combos-head h2 em{font-style:normal;color:#FF69B4}
[id$="__bfcm_combos"] .s-ai-sale-combos .combos-eyebrow{color:#000;letter-spacing:.14em}
[id$="__bfcm_combos"] .s-ai-sale-combos .combos-head p{color:#000;font-weight:500}
[id$="__bfcm_combos"] .s-ai-sale-combos .combo-size-select{border:0!important;box-shadow:inset 0 0 0 2px #000;border-radius:999px;min-height:48px;padding:0 44px 0 20px;font:700 15px/1 'Jost',Arial,sans-serif;color:#000;background-color:#fff}
[id$="__bfcm_combos"] .s-ai-sale-combos .combo-size-select:focus{outline:none;box-shadow:inset 0 0 0 3px #FF69B4}
[id$="__bfcm_combos"] .s-ai-sale-combos .combo-size-select[disabled]{opacity:.45}
[id$="__bfcm_combos"] .s-ai-sale-combos .combo-swatch{box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.35)}
[id$="__bfcm_combos"] .s-ai-sale-combos .combo-swatch.is-active{box-shadow:0 0 0 2px #fff,0 0 0 4px #000}
[id$="__bfcm_combos"] .s-ai-sale-combos .pair-shop-link{background:#000;color:#fff;border:0;border-radius:999px;min-height:52px;padding:0 28px;font:700 16px/1 'Jost',Arial,sans-serif;letter-spacing:0;text-transform:none;box-shadow:none}
[id$="__bfcm_combos"] .s-ai-sale-combos .pair-shop-link:hover{background:#FF69B4;color:#000}
[id$="__bfcm_combos"] .s-ai-sale-combos .pair-add-btn{opacity:1;background:transparent;color:#000;box-shadow:inset 0 0 0 2px #000}
[id$="__bfcm_combos"] .s-ai-sale-combos .pair-add-btn.ready{background:#000;color:#fff;box-shadow:none}
[id$="__bfcm_combos"] .s-ai-sale-combos .pair-add-btn.done{background:#B4FF69;color:#000}
[id$="__bfcm_combos"] .s-ai-sale-combos .pair-save-center{background:#FF69B4;border-color:#000;color:#000}

/* ===== from bfcm-wow.css ===== */
/* SweetLegs BFCM 2026 - WOW layer (V1, 2026-11-01).
   Loaded AFTER bfcm-2026.css / bfcm-boost.css. Rules are scoped to .bfcm sections only (no header/footer/cart overrides).
   Rule of thumb that keeps this glitch-free: idle loops animate ONLY the individual props translate / rotate / scale,
   hover + entrance use transform, so two effects never fight over the same property. Everything is static under prefers-reduced-motion. */
.bfcm{--bf-spring2:cubic-bezier(.34,1.8,.5,1)}
.bfcm-fx{position:fixed;inset:0;width:100%;height:100%;z-index:9;pointer-events:none}

/* ---------- stacking: content above decorations ---------- */
.bfcm-dc__head,.bfcm-dc__grid,.bfcm-tiers__grid,.bfcm-look__wrap{position:relative;z-index:2}
.bfcm-deco{position:absolute;z-index:1;pointer-events:none;opacity:0;scale:.2;transition:opacity .5s,scale .9s var(--bf-spring2);transition-delay:calc(var(--n,0)*80ms + 200ms);will-change:transform}
.bfcm.bfcm-on .bfcm-deco{opacity:1;scale:1}
.bfcm-deco svg{display:block;width:100%;height:auto;overflow:visible;animation:var(--an,bfcm2-bob) var(--sp,6s) ease-in-out var(--dl,0s) infinite}
@keyframes bfcm2-bob{0%,100%{translate:0 0;rotate:-6deg}50%{translate:0 -14px;rotate:6deg}}
@keyframes bfcm2-spinslow{to{rotate:360deg}}
@keyframes bfcm2-twinkle{0%,100%{scale:1;rotate:0deg}50%{scale:1.35;rotate:45deg}}
@keyframes bfcm2-wig{0%,100%{rotate:-10deg;translate:-6px 0}50%{rotate:10deg;translate:6px 4px}}
@keyframes bfcm2-spin{to{rotate:360deg}}

/* ---------- HERO ---------- */
.bfcm-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(560px circle at var(--hx,72%) var(--hy,38%),rgba(255,105,180,.32),rgba(180,105,255,.15) 42%,transparent 70%)}
.bfcm-hero__grid{position:relative;z-index:2}
.bfcm-collage{perspective:1200px}
.bfcm-collage>.bfcm-lay:nth-child(1){z-index:1}
.bfcm-collage>.bfcm-lay:nth-child(2){z-index:3}
.bfcm-collage>.bfcm-lay:nth-child(3){z-index:2}
/* hero cards are driven by a spring loop in bfcm-wow.js (inline transform + opacity); neutralise the old CSS animation stack */
.bfcm.bfcm-ready .bfcm-hero .bfcm-card{animation:none;translate:none;scale:none;rotate:none;transition:box-shadow .3s;will-change:transform}
.bfcm.bfcm-ready .bfcm-hero .bfcm-card:hover{translate:none;scale:none}
/* headline letters */
.bfcm.bfcm-ready .bfcm-ltr{display:inline-block;transform-origin:50% 100%;animation:bfcm2-drop .85s var(--bf-spring2) backwards;animation-delay:calc(var(--k)*42ms + 120ms);transition:transform .28s var(--bf-spring2),color .2s;cursor:default}
.bfcm.bfcm-ready .bfcm-hero__h1 .bfcm-ltr:hover{transform:translateY(-.09em) rotate(-5deg) scale(1.07);color:var(--bf-pink)}
@keyframes bfcm2-drop{from{opacity:0;translate:0 -.8em;rotate:-16deg;scale:.55}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
.bfcm.bfcm-ready .bfcm-hero__sub{animation:none}
.bfcm.bfcm-ready .bfcm-hero__sub .bfcm-ltr{animation:bfcm2-drop .85s var(--bf-spring2) backwards,bfcm-hue 6s linear infinite;animation-delay:calc(var(--k)*42ms + 700ms),calc(var(--k)*-.28s)}
.bfcm.bfcm-ready .bfcm-hero__sub .bfcm-ltr:hover{transform:translateY(-.1em) rotate(6deg) scale(1.12)}
/* CTA: a little wiggle every few seconds so the eye goes there */
.bfcm.bfcm-ready .bfcm-hero .bfcm-btn--white{animation:bfcm2-nudge 5s ease-in-out 3.5s infinite}
.bfcm.bfcm-ready .bfcm-hero .bfcm-btn--white:hover{animation:none}
@keyframes bfcm2-nudge{0%,86%,100%{rotate:0deg;scale:1}89%{rotate:-4deg;scale:1.07}93%{rotate:4deg;scale:1.07}97%{rotate:-2deg;scale:1.03}}
.bfcm .bfcm-btn{transition:transform .25s var(--bf-spring),box-shadow .22s var(--bf-ease),background .2s,color .2s,translate .3s var(--bf-ease)}
/* ticker driven by JS (speeds up and reverses with scroll) */
.bfcm-ticker.is-js .bfcm-ticker__track{animation:none!important;will-change:transform}

/* ---------- headings: colour-bar wipe ---------- */
.bfcm.bfcm-ready .bfcm-wipe[data-reveal]{opacity:1;transform:none;position:relative;display:inline-block}
.bfcm-wipe__t{display:inline-block}
.bfcm-wipe:not(.w-in) .bfcm-wipe__t{opacity:0}
.bfcm-wipe::after{content:"";position:absolute;left:-1.5%;right:-1.5%;top:4%;bottom:0;background:var(--wc,#FF69B4);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.bfcm-wipe.w-in .bfcm-wipe__t{animation:bfcm2-wt .85s steps(1,end) both}
.bfcm-wipe.w-in::after{animation:bfcm2-bar .85s cubic-bezier(.7,0,.3,1) both}
@keyframes bfcm2-wt{0%,49%{opacity:0}50%,100%{opacity:1}}
@keyframes bfcm2-bar{0%{transform:scaleX(0);transform-origin:0 50%}50%{transform:scaleX(1);transform-origin:0 50%}50.01%{transform:scaleX(1);transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}

/* ---------- DOOR CRASHERS ---------- */
.bfcm.bfcm-ready .bfcm-dc__grid{perspective:none}
.bfcm.bfcm-ready .bfcm-dcard[data-reveal]{opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s linear,translate .3s var(--bf-spring),box-shadow .3s;transition-delay:0s;will-change:transform}
.bfcm.bfcm-ready .bfcm-dcard[data-reveal]:not(.w-in){opacity:0}
.bfcm-dcard:nth-child(odd){--cr:-5deg}.bfcm-dcard:nth-child(even){--cr:5deg}
.bfcm.bfcm-ready .bfcm-dcard.w-in{animation:bfcm2-cardin .85s var(--bf-spring2) backwards;animation-delay:calc(var(--i,0)*120ms)}
@keyframes bfcm2-cardin{from{opacity:0;translate:0 80px;rotate:var(--cr,-4deg);scale:.9}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
/* the angled colour backdrop (white photo area, colour wedge behind the model) */
.bfcm .bfcm-dcard .bfcm-dcard__stage{background:#fff;overflow:visible;clip-path:inset(0 0 -3px 0);margin-bottom:-1px}
.bfcm .bfcm-dcard .bfcm-dcard__back{inset:0 0 -3px 0;opacity:1;transform:none;clip-path:polygon(0 11%,100% 0,100% 100%,0 100%);transition:clip-path .6s var(--bf-spring2)}
.bfcm .bfcm-dcard:hover .bfcm-dcard__back{clip-path:polygon(0 0,100% 11%,100% 100%,0 100%)}
.bfcm.bfcm-ready .bfcm-dcard.w-in .bfcm-dcard__back{animation:bfcm2-back .8s var(--bf-ease) backwards;animation-delay:calc(var(--i,0)*120ms + 150ms)}
@keyframes bfcm2-back{from{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}to{clip-path:polygon(0 11%,100% 0,100% 100%,0 100%)}}
.bfcm.bfcm-ready .bfcm-dcard.w-in .bfcm-dcard__img{animation:bfcm2-model .95s var(--bf-spring2) backwards,bfcm2-sway2 6.5s ease-in-out infinite;animation-delay:calc(var(--i,0)*120ms + 350ms),calc(var(--i,0)*.7s + 1.8s)}
@keyframes bfcm2-model{from{translate:0 42%;scale:.78}to{translate:0 0;scale:1}}
@keyframes bfcm2-sway2{0%,100%{rotate:-1.1deg}50%{rotate:1.1deg}}
.bfcm.bfcm-ready .bfcm-dcard.w-in .bfcm-dcard__sale{animation:bfcm2-stamp .7s var(--bf-spring2) backwards;animation-delay:calc(var(--i,0)*120ms + 800ms)}
@keyframes bfcm2-stamp{from{opacity:0;scale:2.6;rotate:-18deg}to{opacity:1;scale:1;rotate:0deg}}
.bfcm.bfcm-ready .bfcm-dcard:hover .bfcm-dcard__sale{animation:bfcm-throb 1s ease-in-out infinite}
.bfcm.bfcm-ready .bfcm-dcard:not(.w-in) .bfcm-dcard__was s::after{transform:scaleX(0)}
.bfcm.bfcm-ready .bfcm-dcard.w-in .bfcm-dcard__was s::after{transform:scaleX(1);transition:transform .5s var(--bf-ease) calc(var(--i,0)*120ms + 1.3s)}
.bfcm.bfcm-ready .bfcm-dcard__flag{animation:bfcm2-wiggle 4.5s ease-in-out 2s infinite}
@keyframes bfcm2-wiggle{0%,84%,100%{rotate:0deg}88%{rotate:-8deg}92%{rotate:8deg}96%{rotate:-4deg}}

/* ---------- DISCOUNT TIERS ---------- */
.bfcm.bfcm-ready .bfcm-tier[data-reveal]{opacity:0;transform:rotate(var(--r));transition:transform .35s var(--bf-spring2),box-shadow .22s,opacity .25s,scale .3s var(--bf-spring2);transition-delay:0s;animation:none}
.bfcm.bfcm-ready .bfcm-tier[data-reveal].w-in{opacity:1;animation:bfcm2-dealin .95s var(--bf-spring2) backwards,bfcm2-float 4.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*110ms),calc(var(--i,0)*110ms + 1.1s)}
.bfcm-tier:nth-child(1){--fx:150px}.bfcm-tier:nth-child(2){--fx:90px}.bfcm-tier:nth-child(3){--fx:30px}.bfcm-tier:nth-child(4){--fx:-30px}.bfcm-tier:nth-child(5){--fx:-90px}.bfcm-tier:nth-child(6){--fx:-150px}
@keyframes bfcm2-dealin{from{opacity:0;transform:translate(var(--fx,0),80px) rotate(calc(var(--r)*6)) scale(.5)}to{opacity:1;transform:rotate(var(--r))}}
@keyframes bfcm2-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
.bfcm.bfcm-ready .bfcm-tier[data-reveal]:hover,.bfcm.bfcm-ready .bfcm-tier[data-reveal]:focus-visible{transform:translateY(-14px) rotate(0deg)}
.bfcm.bfcm-ready .bfcm-tier--feat{animation:none}
.bfcm.bfcm-ready .bfcm-tier--feat.w-in{animation:bfcm2-dealin .95s var(--bf-spring2) backwards,bfcm2-float 4.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*110ms),calc(var(--i,0)*110ms + 1.1s)}
.bfcm .bfcm-tier__pct,.bfcm .bfcm-tier__off,.bfcm .bfcm-tier__link{position:relative;z-index:1}
.bfcm .bfcm-tier--feat::before{content:"";position:absolute;left:50%;top:50%;width:260%;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.5) 0 7deg,transparent 7deg 22deg);animation:bfcm2-spin 16s linear infinite;z-index:0;pointer-events:none}

/* ---------- MAKE IT A LOOK ---------- */
.bfcm-look__panels{position:relative}
.bfcm-curtain{position:absolute;inset:-12px;z-index:9;pointer-events:none}
.bfcm-curtain i{position:absolute;inset:0;animation:bfcm2-curtain .75s cubic-bezier(.7,0,.2,1) both}
@keyframes bfcm2-curtain{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 101%)}}
.bfcm-look:not(.bfcm-on) .bfcm-piece,.bfcm-look:not(.bfcm-on) .bfcm-look__hero,.bfcm-look:not(.bfcm-on) .bfcm-panel2{opacity:0}
.bfcm-pieces .bfcm-piece:nth-child(1){--pi:0}.bfcm-pieces .bfcm-piece:nth-child(2){--pi:1}.bfcm-pieces .bfcm-piece:nth-child(3){--pi:2}
.bfcm.bfcm-ready.bfcm-on .bfcm-look__panel.is-active .bfcm-piece{transform-origin:50% -6px;animation:bfcm2-swing 1.4s ease-out backwards,bfcm2-bob2 4.5s ease-in-out infinite;animation-delay:calc(.25s + var(--pi,0)*.15s),calc(1.8s + var(--pi,0)*.45s)}
@keyframes bfcm2-swing{0%{opacity:0;rotate:-24deg}22%{opacity:1;rotate:15deg}46%{rotate:-9deg}70%{rotate:4deg}100%{rotate:0deg}}
@keyframes bfcm2-bob2{0%,100%{translate:0 0}50%{translate:0 -6px}}
.bfcm.bfcm-ready.bfcm-on .bfcm-look__panel.is-active .bfcm-look__hero{animation:bfcm2-herolook 1s var(--bf-spring2) backwards}
@keyframes bfcm2-herolook{from{opacity:0;translate:60px 0;rotate:4deg;scale:.94}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
.bfcm.bfcm-ready.bfcm-on .bfcm-look__panel.is-active .bfcm-panel2{animation:bfcm2-panel 1s var(--bf-spring2) .4s backwards}
@keyframes bfcm2-panel{from{opacity:0;translate:0 60px;rotate:6deg}to{opacity:1;translate:0 0;rotate:0deg}}
.bfcm-look__heroimg{animation:bfcm2-kb 14s ease-in-out infinite alternate}
@keyframes bfcm2-kb{from{scale:1}to{scale:1.05}}
.bfcm-look__tab[aria-selected="true"]{animation:bfcm2-tabpop .55s var(--bf-spring2)}
@keyframes bfcm2-tabpop{from{scale:.88}to{scale:1}}

@media(max-width:749px){.bfcm-deco.hide-m{display:none}}

/* ---------- REDUCED MOTION: everything visible and still ---------- */
@media(prefers-reduced-motion:reduce){
 .bfcm *,.bfcm *::before,.bfcm *::after{animation:none!important;transition:none!important}
 .bfcm-fx,.bfcm-curtain{display:none!important}
 .bfcm.bfcm-ready .bfcm-dcard[data-reveal],.bfcm.bfcm-ready .bfcm-tier[data-reveal],.bfcm-look .bfcm-piece,.bfcm-look .bfcm-look__hero,.bfcm-look .bfcm-panel2{opacity:1!important}
 .bfcm-deco{opacity:1!important;scale:1!important}
 .bfcm-hero::before{display:none}
}

/* ===== from bfcm-wow2.css ===== */
/* SweetLegs BFCM 2026 - WOW2 layer (V1, 2026-11-01): hero card bases + badge, crossing ribbons, shoppable quick-add panels,
   savings-tier picks panel, Make it a look break-out, touch auto-spotlight. Scoped to .bfcm sections. Loaded after bfcm-wow.css. */

/* ---------- hero cards: footers sized from the card width so the three bases match and the 70% badge always fits ---------- */
.bfcm.bfcm-hero{overflow-x:clip;overflow-y:visible}
.bfcm.bfcm-hero .bfcm-card{container-type:inline-size}
.bfcm.bfcm-hero .bfcm-card__foot{aspect-ratio:auto!important;min-height:0!important;height:13cqw;padding:0;display:block}
.bfcm.bfcm-hero .bfcm-card--c .bfcm-card__foot{height:auto!important;padding:2.6cqw 6cqw 3cqw;display:flex;align-items:center;justify-content:flex-start}
/* AI 2026-11-02: the two side photos get taller coloured bases, as in the inspo (was 13cqw) */
.bfcm.bfcm-hero .bfcm-card--l .bfcm-card__foot,.bfcm.bfcm-hero .bfcm-card--r .bfcm-card__foot{height:40cqw}
.bfcm.bfcm-hero .bfcm-badge{gap:2.2cqw;align-items:center}
.bfcm.bfcm-hero .bfcm-badge b{font-size:25cqw;line-height:.82}
.bfcm.bfcm-hero .bfcm-badge small{font-size:6.4cqw;line-height:.95;max-width:1.4em;text-align:left}

/* ---------- crossing ribbons ---------- */
/* AI 2026-11-01 V30: two parallel ribbons stacked (no crossing, nothing hidden), no pause button */
.bfcm-ribbons{position:relative;z-index:7;height:auto!important;display:flex;flex-direction:column;overflow:hidden;padding:clamp(18px,2vw,30px) 0;margin-top:calc(-1*clamp(20px,2vw,32px));pointer-events:none}
.bfcm-ribbons .bfcm-ticker{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:106%;margin-left:-3%;pointer-events:none;box-shadow:0 8px 16px rgba(0,0,0,.25)}
/* AI V32: crossing ribbons back (Chris liked the cross); shadow no longer clipped into a hard line */
.bfcm .bfcm-ribbons{overflow:visible!important;overflow-x:clip!important;overflow-y:visible!important;padding:clamp(30px,4vw,60px) 0 clamp(40px,5vw,72px)}
.bfcm .bfcm-ribbons{background:linear-gradient(180deg,#000 0,#000 30%,#fff 95%)!important}
.bfcm .bfcm-ribbons .bfcm-ticker{box-shadow:0 14px 28px -6px rgba(0,0,0,.22)}
.bfcm .bfcm-ribbons .bfcm-ticker--a{transform:rotate(-3deg)!important;z-index:2}
.bfcm .bfcm-ribbons .bfcm-ticker--b{transform:rotate(2deg)!important;z-index:1;margin-top:calc(-1*clamp(34px,3.6vw,56px))}
.bfcm .bfcm-ticker__pause{display:none!important}
/* AI V31: hero glow fades out at the bottom so there is no hard edge ("black line") above the ribbons */
.bfcm-hero::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 92%);mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 92%)}
.bfcm .bfcm-ribbons .bfcm-ticker__track span{padding:clamp(11px,1.1vw,16px) clamp(20px,2.6vw,44px)}
.bfcm-ticker--b .bfcm-ticker__track{animation-direction:reverse}
.bfcm-ribbons:has(.is-paused) .bfcm-ticker--b .bfcm-ticker__track{animation-play-state:paused}
.bfcm .bfcm-ticker__track b{font-weight:400;display:inline-block;margin:0 .6em;font-size:.8em;vertical-align:.1em}
.bfcm-dc{padding-top:clamp(54px,5.4vw,96px)}


/* ---------- Door Crashers: bigger names, no pill on the face ---------- */
.bfcm .bfcm-dcard{position:relative}
.bfcm .bfcm-dcard__info{padding:14px clamp(14px,1.5vw,22px) clamp(16px,1.6vw,24px)}
.bfcm .bfcm-dcard .bfcm-dcard__name{font:700 clamp(21px,1.9vw,30px)/1.1 'Jost',Arial,sans-serif;min-height:2.2em;letter-spacing:-.01em}
.bfcm .bfcm-dcard__cta{display:none}

/* ---------- quick-add panel (cards, tier picks, look pieces) ---------- */
.bfcm .bfcm-qa{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6}
.bfcm .bfcm-qa__panel{position:absolute;left:0;right:0;bottom:0;background:#fff;color:#000;padding:14px 14px 16px;border-radius:20px 20px 0 0;box-shadow:0 -12px 30px rgba(0,0,0,.2);transform:translateY(105%);transition:transform .5s cubic-bezier(.34,1.5,.5,1);pointer-events:auto;display:grid;gap:10px;max-height:100%;overflow:auto}
.bfcm .bfcm-qa-host.is-open>.bfcm-qa .bfcm-qa__panel{transform:none}
@media(hover:hover){.bfcm .bfcm-qa-host:is(:hover,:focus-within)>.bfcm-qa .bfcm-qa__panel{transform:none}}
.bfcm .bfcm-qa__lab{font:700 13px/1 'Jost',Arial,sans-serif;text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px}
.bfcm .bfcm-qa__lab b{font-weight:500;text-transform:none;letter-spacing:0;margin-left:2px}
.bfcm .bfcm-qa__vals{display:flex;flex-wrap:wrap;gap:7px}
.bfcm .bfcm-qa__val{min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;border:2px solid #000;background:#fff;color:#000;font:700 15px/1 'Jost',Arial,sans-serif;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.8,.5,1),background .15s,color .15s,box-shadow .2s}
.bfcm .bfcm-qa__val:hover{transform:translateY(-3px) rotate(-3deg)}
.bfcm .bfcm-qa__val.is-color{padding:0;width:44px;height:44px;overflow:hidden;border-radius:50%}
.bfcm .bfcm-qa__val.is-color img{width:100%;height:100%;object-fit:cover;display:block}
.bfcm .bfcm-qa__val[aria-pressed="true"]{background:#000;color:#fff;transform:scale(1.1);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--c,#FF69B4)}
.bfcm .bfcm-qa__val.is-out{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.bfcm .bfcm-qa__val.is-out:hover{transform:none}
.bfcm .bfcm-qa__opt.is-nudge{animation:bfcm3-shake .5s}
.bfcm .bfcm-qa__opt.is-nudge .bfcm-qa__lab{color:#BF1763}
@keyframes bfcm3-shake{0%,100%{translate:0}20%{translate:-7px}40%{translate:7px}60%{translate:-5px}80%{translate:4px}}
.bfcm .bfcm-qa__add{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;border-radius:999px;border:0;background:#000;color:#fff;font:700 17px/1 'Jost',Arial,sans-serif;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.8,.5,1),background .2s,box-shadow .2s}
.bfcm .bfcm-qa__add::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);z-index:-1}
.bfcm .bfcm-qa__add:hover::after{left:130%;transition:left .6s}
.bfcm .bfcm-qa__add:hover{transform:translateY(-2px) scale(1.03)}
.bfcm .bfcm-qa__add.is-wait{opacity:.55}
.bfcm .bfcm-qa__add.is-busy .bfcm-qa__addtxt::after{content:"...";display:inline-block;animation:bfcm3-dots 1s steps(4) infinite;width:1em;text-align:left}
@keyframes bfcm3-dots{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.bfcm .bfcm-qa__add.is-done{background:var(--bf-pink,#FF69B4);color:#000;animation:bfcm3-pop .6s cubic-bezier(.34,1.8,.5,1)}
@keyframes bfcm3-pop{0%{scale:.9}50%{scale:1.1}100%{scale:1}}
.bfcm .bfcm-qa__msg{margin:0;font:500 14px/1.3 'Jost',Arial,sans-serif;color:#BF1763;min-height:0}
.bfcm .bfcm-qa__msg:empty{display:none}
.bfcm .bfcm-qa__msg a{color:#000;font-weight:700}
.bfcm .bfcm-qa__more{font:500 14px/1 'Jost',Arial,sans-serif;color:#000;text-underline-offset:3px;justify-self:center}
.bfcm .bfcm-qa__fallback{width:100%}
.bfcm .bfcm-qa__toggle{display:none}
@media(hover:none){
 .bfcm .bfcm-qa__toggle{display:grid;place-items:center;position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:0;background:#000;color:#fff;font:700 26px/1 'Jost',Arial,sans-serif;z-index:7;cursor:pointer;transition:rotate .35s cubic-bezier(.34,1.8,.5,1),background .2s;box-shadow:0 4px 12px rgba(0,0,0,.3)}
 .bfcm .bfcm-qa-host.is-open>.bfcm-qa__toggle{rotate:45deg;background:var(--bf-pink,#FF69B4);color:#000}
}
.bfcm-fly{position:fixed;z-index:99998;width:84px;height:110px;object-fit:cover;border-radius:10px;pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.bfcm-conf{position:fixed;z-index:99999;pointer-events:none;width:8px;height:12px}

/* piece cards are now divs with a link inside */
.bfcm .bfcm-piece{position:relative}
.bfcm .bfcm-piece__link{display:block;text-decoration:none;color:inherit}
.bfcm .bfcm-piece .bfcm-qa__toggle{top:6px;right:6px;width:40px;height:40px}

/* ---------- savings tiers: shoppable picks ---------- */
.bfcm .bfcm-tier[data-shop-target].is-open{box-shadow:0 0 0 4px #fff,0 18px 28px rgba(0,0,0,.6)}
.bfcm .bfcm-tier[data-shop-target] .bfcm-tier__link::after{content:" \2193";display:inline-block;transition:transform .3s}
.bfcm .bfcm-tier[data-shop-target].is-open .bfcm-tier__link::after{transform:rotate(180deg)}
.bfcm-shop{position:relative;z-index:3;max-width:1600px;margin:0 auto}
.bfcm-shop__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s cubic-bezier(.2,.8,.2,1),margin .65s}
.bfcm-shop__panel.is-open{grid-template-rows:1fr;margin-top:12px}
.bfcm-shop__inner{overflow:hidden;min-height:0;position:relative;padding-top:14px}
.bfcm-shop__inner::before{content:"";position:absolute;top:0;left:calc(var(--ax,50%) - 14px);border:14px solid transparent;border-top:0;border-bottom:15px solid var(--c);z-index:1}
.bfcm-shop__box{position:relative;background:var(--c);color:#000;border-radius:22px;padding:clamp(14px,1.6vw,26px);transform-origin:50% 0}
.bfcm-shop__panel.is-open .bfcm-shop__box{animation:bfcm3-box .6s cubic-bezier(.34,1.4,.5,1)}
@keyframes bfcm3-box{from{opacity:0;scale:.96 .9}to{opacity:1;scale:1}}
.bfcm-shop__head{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-bottom:14px}
.bfcm .bfcm-shop__head h3{margin:0;font-size:clamp(28px,3vw,48px);line-height:.95;color:#000}
.bfcm .bfcm-shop__all{font:700 17px/1 'Jost',Arial,sans-serif;color:#000;text-underline-offset:4px}
.bfcm .bfcm-shop__close{margin-left:auto;width:44px;height:44px;border-radius:50%;border:0;background:#000;color:#fff;font:700 26px/1 'Jost',Arial,sans-serif;cursor:pointer;transition:rotate .3s cubic-bezier(.34,1.8,.5,1)}
.bfcm .bfcm-shop__close:hover{rotate:90deg}
.bfcm-shop__track{display:flex;gap:clamp(10px,1.2vw,18px);overflow-x:auto;scroll-snap-type:x proximity;padding:14px 4px 16px;-webkit-overflow-scrolling:touch}
.bfcm .bfcm-pcard{position:relative;flex:0 0 clamp(170px,16.5vw,250px);scroll-snap-align:start;background:#fff;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.15);transition:transform .35s cubic-bezier(.34,1.8,.5,1),box-shadow .25s}
.bfcm .bfcm-pcard:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 16px 28px rgba(0,0,0,.28)}
.bfcm .bfcm-shop__panel.is-open .bfcm-pcard{animation:bfcm3-pc .7s cubic-bezier(.34,1.5,.5,1) backwards;animation-delay:calc(var(--i,0)*70ms + .2s)}
@keyframes bfcm3-pc{from{opacity:0;translate:0 50px;rotate:5deg}to{opacity:1;translate:0 0;rotate:0deg}}
.bfcm .bfcm-pcard__img{position:relative;display:block;aspect-ratio:3/4.3;overflow:hidden;border-radius:14px 14px 0 0;background:#f4f4f4}
.bfcm .bfcm-pcard__img img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s cubic-bezier(.34,1.5,.5,1)}
.bfcm .bfcm-pcard:hover .bfcm-pcard__img img{transform:scale(1.07)}
.bfcm .bfcm-pcard__badge{position:absolute;left:8px;top:8px;background:#000;color:#fff;font:700 13px/1 'Jost',Arial,sans-serif;padding:7px 10px;border-radius:999px}
.bfcm .bfcm-pcard__info{padding:12px 14px 16px}
.bfcm .bfcm-pcard__info h4{margin:0;font:700 clamp(16px,1.2vw,19px)/1.15 'Jost',Arial,sans-serif;min-height:2.3em}
.bfcm .bfcm-pcard__info a{text-decoration:none;color:#000}
.bfcm .bfcm-pcard__price{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.bfcm .bfcm-pcard__price b{font:700 clamp(22px,1.8vw,28px)/1 'Jost',Arial,sans-serif}
.bfcm .bfcm-pcard__price s{font:400 15px 'Jost',Arial,sans-serif;color:#444}

/* ---------- Make it a look: tighter, and the model breaks the section line ---------- */
.bfcm.bfcm-look{overflow-x:clip;overflow-y:visible;z-index:2;padding-top:clamp(24px,2.6vw,44px);padding-bottom:clamp(60px,7vw,120px)}
.bfcm .bfcm-look__head{margin-bottom:clamp(6px,1vw,16px)}
.bfcm .bfcm-look__h2{font-size:clamp(40px,5.2vw,84px)}
.bfcm .bfcm-look__panel{align-items:end}
@media(min-width:990px){
 .bfcm .bfcm-look__hero{aspect-ratio:4/4.6;margin-bottom:calc(-1*clamp(50px,6vw,100px));position:relative;z-index:3}
 .bfcm .bfcm-look__copy{padding-bottom:clamp(10px,2vw,40px)}
}

/* ---------- touch: the card nearest the middle of the screen plays its hover moment ---------- */
.bfcm .bfcm-dcard.is-focus .bfcm-dcard__back{clip-path:polygon(0 0,100% 11%,100% 100%,0 100%)}
.bfcm .bfcm-dcard.is-focus .bfcm-dcard__img{transform:scale(1.05) translateY(-2%)}
.bfcm .bfcm-dcard.is-focus .bfcm-dcard__sale{animation:bfcm-throb 1.2s ease-in-out infinite}
.bfcm.bfcm-ready .bfcm-tier[data-reveal].is-focus{transform:translateY(-8px) rotate(0deg)}
.bfcm .bfcm-piece.is-focus{transform:rotate(0deg) translateY(-6px)}
/* scroll-velocity rubber skew on the card grids */
.bfcm-dc__grid,.bfcm-tiers__row{transform:skewY(var(--sk,0deg))}
@media(prefers-reduced-motion:reduce){.bfcm-dc__grid,.bfcm-tiers__row{transform:none!important}.bfcm .bfcm-qa__panel{transition:none!important}}

/* ===== V31 (2026-11-01): proper slide-up panel, one step at a time, sizes on one row, PDP-style sold-out slash, grid picks ===== */
/* panel: fully off the card when closed (no peek of the card colour / shadow), no overshoot, white skirt below so nothing shows under it */
.bfcm .bfcm-qa__panel{min-height:52%;align-content:end;transform:translateY(calc(100% + 80px));visibility:hidden;transition:transform .6s cubic-bezier(.22,1,.36,1),visibility 0s .6s;padding-bottom:18px}
.bfcm .bfcm-qa__panel::after{content:"";position:absolute;left:0;right:0;top:100%;height:80px;background:#fff}
.bfcm .bfcm-qa-host.is-open>.bfcm-qa .bfcm-qa__panel{transform:none;visibility:visible;transition-delay:0s}
@media(hover:hover){.bfcm .bfcm-qa-host:is(:hover,:focus-within)>.bfcm-qa .bfcm-qa__panel{transform:none;visibility:visible;transition-delay:0s}}
/* steps */
.bfcm .bfcm-qa__opt.is-single{display:none}
.bfcm .bfcm-qa__opt.is-later{display:none}
.bfcm .bfcm-qa__wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.bfcm .bfcm-qa__wrap>.bfcm-qa__vals{overflow:hidden;min-height:0;padding:6px 6px 8px;margin:-6px -6px -8px}
.bfcm .bfcm-qa__opt.is-done .bfcm-qa__wrap{grid-template-rows:0fr;opacity:0;pointer-events:none}
.bfcm .bfcm-qa__opt.is-active{animation:bfcm4-step .5s cubic-bezier(.22,1,.36,1)}
@keyframes bfcm4-step{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
.bfcm .bfcm-qa__opt.is-active .bfcm-qa__val{animation:bfcm4-in .55s cubic-bezier(.34,1.6,.5,1) backwards;animation-delay:calc(var(--k,0)*50ms + 80ms)}
@keyframes bfcm4-in{from{opacity:0;scale:.3;translate:0 14px}to{opacity:1;scale:1;translate:0 0}}
.bfcm .bfcm-qa__opt.is-done .bfcm-qa__lab{display:flex;align-items:center;gap:6px;margin:0;padding:10px 14px;border-radius:999px;background:#f2f2f2;cursor:pointer;min-height:44px}
.bfcm .bfcm-qa__opt.is-done .bfcm-qa__lab::after{content:"Change";margin-left:auto;font:600 13px/1 'Jost',Arial,sans-serif;text-transform:none;letter-spacing:0;text-decoration:underline;text-underline-offset:3px}
.bfcm .bfcm-qa__opt.is-done .bfcm-qa__lab:hover{background:#e6e6e6}
.bfcm .bfcm-qa__opt.is-done .bfcm-qa__lab{animation:bfcm4-in .45s cubic-bezier(.34,1.6,.5,1)}
/* selection moment */
.bfcm .bfcm-qa__val[aria-pressed="true"]{animation:bfcm4-sel .5s cubic-bezier(.34,1.8,.5,1)}
@keyframes bfcm4-sel{0%{scale:.8}55%{scale:1.3}100%{scale:1}}
/* sizes: all on ONE row as circles */
.bfcm .bfcm-qa__vals.is-row{flex-wrap:nowrap;gap:4px;justify-content:space-between}
.bfcm .bfcm-qa__vals.is-row .bfcm-qa__val{flex:1 1 0;min-width:0;max-width:46px;width:auto;height:auto;min-height:0;aspect-ratio:1;padding:0;border-radius:50%;font-size:clamp(11px,3.4cqw,14px);display:grid;place-items:center}
.bfcm .bfcm-qa{container-type:inline-size}
@container (max-width:360px){.bfcm .bfcm-qa__vals.is-row .bfcm-qa__val{font-size:12px}}
.bfcm .bfcm-qa__val[aria-pressed="true"]{transform:none;scale:1.08}
/* sold out: the PDP slash through the circle (no strike-through text) */
.bfcm .bfcm-qa__val{position:relative}
.bfcm .bfcm-qa__val.is-out{opacity:.5;text-decoration:none;overflow:visible}
.bfcm .bfcm-qa__val.is-out::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:3px;margin-top:-1.5px;background:#000;border-radius:3px;rotate:-45deg;box-shadow:0 0 0 1.5px #fff;pointer-events:none}
/* ===== V32 (2026-11-01): shorter panel, clear step button, swatch dot, My Size, full-details pill ===== */
.bfcm .bfcm-qa__panel{min-height:0;display:grid;gap:10px;padding:14px 14px 16px;max-height:88%;overflow:auto}
.bfcm .bfcm-qa__dot{display:none;width:20px;height:20px;border-radius:50%;border:2px solid #000;margin:0 2px 0 8px;flex:none;order:2}
.bfcm .bfcm-qa__dot.is-on{display:inline-block;animation:bfcm4-sel .5s cubic-bezier(.34,1.8,.5,1)}
.bfcm .bfcm-qa__lab{display:flex;align-items:center}
.bfcm .bfcm-qa__lab b{order:3}
.bfcm .bfcm-qa__add.is-wait{opacity:1;background:#fff;color:#000;box-shadow:inset 0 0 0 2px #000;border:0}
.bfcm .bfcm-qa__add.is-wait .bfcm-qa__addtxt::after{content:" \2193";display:inline-block;animation:bfcm-nudge 1.1s ease-in-out infinite}
@keyframes bfcm-nudge{50%{translate:0 3px}}
/* V36: touch bottom sheet for the options (lives on <body>) */
html.bfcm-sheet-lock{overflow:hidden}
.bfcm-sheet{position:fixed;inset:0;z-index:100000;pointer-events:none}
.bfcm-sheet__bd{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s}
.bfcm-sheet__box{position:absolute;left:0;right:0;bottom:0;max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;background:#fff;color:#000;border-radius:24px 24px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .38s cubic-bezier(.22,1,.36,1);box-shadow:0 -16px 40px rgba(0,0,0,.3)}
.bfcm-sheet.is-in{pointer-events:auto}
.bfcm-sheet.is-in .bfcm-sheet__bd{opacity:1}
.bfcm-sheet.is-in .bfcm-sheet__box{transform:none}
.bfcm-sheet__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bfcm-sheet__img{width:52px;height:68px;object-fit:cover;object-position:top;border-radius:10px;background:#f2f2f2;flex:none}
.bfcm-sheet__title{flex:1;font:700 18px/1.2 'Jost',Arial,sans-serif}
.bfcm-sheet__x{width:44px;height:44px;border-radius:50%;border:0;background:#f2f2f2;color:#000;font:400 28px/1 'Jost',Arial,sans-serif;cursor:pointer;flex:none}
.bfcm .bfcm-qa__panel.is-sheet{position:static;transform:none!important;opacity:1!important;pointer-events:auto!important;max-height:none!important;overflow:visible!important;box-shadow:none;border-radius:0;padding:0;background:transparent;gap:12px}
.bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__val{min-height:48px}
.bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__val.is-color{width:48px;height:48px}
.bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__vals.is-row{flex-wrap:wrap}
@media(min-width:700px){.bfcm-sheet__box{left:50%;right:auto;width:min(520px,100%);margin-left:calc(min(520px,100%)/-2);border-radius:24px 24px 0 0}}
@media(prefers-reduced-motion:reduce){.bfcm-sheet__box,.bfcm-sheet__bd{transition:none}}
/* V35: narrow (phone) cards: buttons never overflow or clip */
.bfcm .bfcm-qa__add,.bfcm .bfcm-qa__more{min-width:0;max-width:100%}
.bfcm .bfcm-qa__add .bfcm-qa__addtxt{min-width:0;overflow:hidden;text-overflow:ellipsis}
@container (max-width:270px){
  .bfcm .bfcm-qa__panel{padding:12px 10px 14px;gap:8px}
  .bfcm .bfcm-qa__add{min-height:46px;font-size:15px;padding:0 10px}
  .bfcm .bfcm-qa__more{min-height:40px;font-size:14px;padding:0 10px}
  .bfcm .bfcm-qa__long{display:none}
  .bfcm .bfcm-qa__val.is-color{width:38px;height:38px}
}
/* V37: .bfcm sets position:relative + overflow:hidden, which flattened the sheet to nothing: force fixed */
.bfcm.bfcm-sheet{position:fixed!important;inset:0!important;overflow:visible!important;z-index:2147483000}
/* V37: the sheet's panel must be visible (the closed-panel rule hides it) */
.bfcm .bfcm-qa__panel.is-sheet{visibility:visible!important;display:grid;min-height:0;transition:none;overflow:visible!important;width:100%;box-sizing:border-box}
.bfcm .bfcm-qa__panel.is-sheet::after{display:none}
.bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__add,.bfcm .bfcm-qa__panel.is-sheet .bfcm-qa__more{width:100%;min-height:52px;font-size:17px}
/* V34: no inner scrolling; panel slides away after add-to-cart */
.bfcm .bfcm-qa__panel{overflow:hidden!important;max-height:none!important;overscroll-behavior:auto}
.bfcm .bfcm-qa.is-dismiss .bfcm-qa__panel{transform:translateY(110%)!important;opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s}
.bfcm .bfcm-qa.is-dismiss~.bfcm-qa__toggle{pointer-events:none}
/* V33: arrow gets its own space; "See full details" is a full-width, level pill with a spaced arrow */
.bfcm .bfcm-qa__add.is-wait .bfcm-qa__addtxt::after{content:"\2193";margin-left:.55em;vertical-align:-1px}
.bfcm .bfcm-qa__add .bfcm-qa__addtxt{display:inline-flex;align-items:center;white-space:nowrap}
.bfcm .bfcm-qa__more{justify-self:stretch;width:100%;box-sizing:border-box;margin:0;padding:0 18px;text-align:center;white-space:nowrap;color:#000}
.bfcm .bfcm-qa__more span[aria-hidden]{display:inline-block;margin-left:2px;transition:translate .2s}
.bfcm .bfcm-qa__more:hover span[aria-hidden]{translate:4px 0}
.bfcm .bfcm-qa__more{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:999px;background:#f2f2f2;text-decoration:none;font:700 15px/1 'Jost',Arial,sans-serif;transition:background .2s,transform .25s cubic-bezier(.34,1.8,.5,1)}
.bfcm .bfcm-qa__more:hover{background:#e6e6e6;transform:translateY(-2px)}
.bfcm .bfcm-qa.has-mysize .bfcm-qa__opt .bfcm-qa__lab b::after{content:none}
.bfcm .bfcm-qa__val.is-mine{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--bf-pink,#FF69B4)}
.bfcm .bfcm-qa__opt.is-done .bfcm-qa__lab b.is-mine-tag::after{content:" · My Size";color:#BF1763;font-weight:700}
.bfcm .bfcm-qa__opt.is-done .bfcm-qa__lab .bfcm-qa__dot{order:2}
@media(prefers-reduced-motion:reduce){.bfcm .bfcm-qa__add.is-wait .bfcm-qa__addtxt::after,.bfcm .bfcm-qa__dot.is-on{animation:none}}
/* Door Crashers: whole picture opens the full product view */
.bfcm .bfcm-dcard__stage{position:relative}
.bfcm .bfcm-dcard__open{position:absolute;inset:0;z-index:4;display:block}
/* picks: a collection-style grid with show more */
.bfcm-shop__grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);overflow:visible!important;scroll-snap-type:none;padding:14px 4px 16px}
@media(max-width:989px){.bfcm-shop__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bfcm .bfcm-shop__grid .bfcm-pcard{flex:none;min-width:0}
.bfcm .bfcm-shop__grid .bfcm-pcard[hidden]{display:none}
.bfcm .bfcm-shop__grid .bfcm-pcard.is-new{animation:bfcm3-pc .7s cubic-bezier(.34,1.5,.5,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
.bfcm-shop__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;padding:4px 0 6px}
.bfcm .bfcm-shop__more{min-height:50px;padding:0 28px;border-radius:999px;border:0;background:#000;color:#fff;font:700 17px/1 'Jost',Arial,sans-serif;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.8,.5,1)}
.bfcm .bfcm-shop__more:hover{transform:translateY(-3px) scale(1.04)}
@media(prefers-reduced-motion:reduce){.bfcm .bfcm-qa__opt.is-active,.bfcm .bfcm-qa__opt.is-active .bfcm-qa__val,.bfcm .bfcm-qa__val[aria-pressed="true"],.bfcm .bfcm-shop__grid .bfcm-pcard.is-new{animation:none!important}}
/* ===== 2026-11-02 round: scroll never trapped, lighter motion, tidy panels, step builder ===== */
.bfcm .bfcm-qa,.bfcm .bfcm-qa__panel,.bfcm .bfcm-qa__wrap>.bfcm-qa__vals{overscroll-behavior:auto;touch-action:pan-y}
.bfcm-deco svg{animation:none!important}
@media(max-width:989px){.bfcm-deco{display:none!important}}
/* closed picks panels take no space and show no pointer arrow (the stacked arrows on desktop) */
.bfcm-shop__panel:not(.is-open){visibility:hidden;transition:grid-template-rows .65s cubic-bezier(.2,.8,.2,1),margin .65s,visibility 0s .65s}
.bfcm-shop__panel:not(.is-open) .bfcm-shop__inner{padding-top:0}
.bfcm-shop__panel:not(.is-open) .bfcm-shop__inner::before{display:none}
.bfcm-shop__panel.is-open{visibility:visible}
/* sizes with long names (kids) become pills that wrap */
.bfcm .bfcm-qa__vals.is-row.has-long{flex-wrap:wrap;justify-content:flex-start;gap:8px}
.bfcm .bfcm-qa__vals.is-row.has-long .bfcm-qa__val{flex:0 0 auto;max-width:none;aspect-ratio:auto;border-radius:999px;padding:0 16px;min-height:44px;min-width:44px}
/* Make it a look: portrait step cards with inline options */
.bfcm .bfcm-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.bfcm .bfcm-lstep{position:relative;background:#fff;border-radius:16px;padding:10px;box-shadow:0 6px 18px rgba(0,0,0,.14);transition:transform .3s cubic-bezier(.34,1.8,.5,1),box-shadow .25s;min-width:0}
.bfcm .bfcm-lstep:hover{transform:translateY(-4px) rotate(-.6deg)}
.bfcm .bfcm-lstep.is-ready{box-shadow:0 0 0 3px #000,0 8px 18px rgba(0,0,0,.18)}
.bfcm .bfcm-lstep.is-nudge{animation:bfcm-shake .45s}
@keyframes bfcm-shake{25%{translate:-6px 0}50%{translate:6px 0}75%{translate:-3px 0}}
.bfcm .bfcm-lstep__top{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:700 15px/1.1 'Jost',Arial,sans-serif}
.bfcm .bfcm-lstep__n{flex:none;width:28px;height:28px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;font:700 15px/1 'Jost',Arial,sans-serif}
.bfcm .bfcm-lstep__lab small{font-weight:400;opacity:.7}
.bfcm .bfcm-lstep__img{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:12px;background:#f4f4f4}
.bfcm .bfcm-lstep__img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.bfcm .bfcm-lstep__name{margin:8px 2px 6px;font:700 16px/1.2 'Jost',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.bfcm .bfcm-lstep .bfcm-qa{position:static;overflow:visible;pointer-events:auto;container-type:inline-size}
.bfcm .bfcm-lstep .bfcm-qa__panel{position:static;transform:none;visibility:visible;box-shadow:none;border-radius:0;padding:0;min-height:0;overflow:visible!important;background:transparent}
.bfcm .bfcm-lstep .bfcm-qa__panel::after,.bfcm .bfcm-lstep .bfcm-qa__toggle,.bfcm .bfcm-lstep [data-qa-toggle],.bfcm .bfcm-lstep .bfcm-qa__add{display:none}
.bfcm .bfcm-lstep .bfcm-qa__val.is-color{width:40px;height:40px}
.bfcm .bfcm-builder__bar{margin-top:14px}
.bfcm .bfcm-builder__add{width:100%;min-height:56px;border-radius:999px;border:0;background:#000;color:#fff;font:700 18px/1 'Jost',Arial,sans-serif;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.8,.5,1)}
.bfcm .bfcm-builder__add.is-wait{background:#fff;color:#000;box-shadow:inset 0 0 0 2px #000}
.bfcm .bfcm-builder__add:not(.is-wait):hover{transform:translateY(-3px)}
.bfcm .bfcm-builder__msg{margin:8px 0 0;font:400 15px/1.3 'Jost',Arial,sans-serif;min-height:1em}
@media(max-width:989px){
 .bfcm .bfcm-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:6px 16px 14px;scrollbar-width:none}
 .bfcm .bfcm-steps::-webkit-scrollbar{display:none}
 .bfcm .bfcm-lstep{flex:0 0 78%;max-width:320px;scroll-snap-align:start}
 .bfcm .bfcm-shop__grid .bfcm-pcard[hidden]{display:none!important}
 .bfcm .bfcm-shop__more{display:inline-flex!important;align-items:center;justify-content:center}
}
/* V38 mobile: like the Halloween page, product rows swipe sideways as tall portrait cards with the next card peeking */
@media(max-width:989px){
.bfcm .bfcm-shop__grid{display:flex!important;flex-wrap:nowrap;gap:12px;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch;scroll-padding-left:16px;margin:0 -16px;padding:14px 16px 22px;scrollbar-width:none}
.bfcm .bfcm-shop__grid::-webkit-scrollbar{display:none}
.bfcm .bfcm-shop__grid .bfcm-pcard{display:block!important;flex:0 0 68%!important;max-width:290px;scroll-snap-align:start}
.bfcm .bfcm-shop__grid .bfcm-pcard[hidden]{display:none!important}
.bfcm .bfcm-shop__grid .bfcm-pcard__img{aspect-ratio:3/4}
.bfcm .bfcm-shop__foot{padding-top:0}
/* Savings tiles: no skew on fast scroll, always visible once on the page, tidier heading */
.bfcm-dc__grid,.bfcm-tiers__row{transform:none!important}
.bfcm.bfcm-ready .bfcm-tier[data-reveal]{opacity:1!important}
.bfcm .bfcm-tiers__h2{font-size:clamp(38px,11vw,52px);line-height:1}
.bfcm .bfcm-tiers__sub{font-size:20px;margin-top:8px}
.bfcm-tiers{padding-top:36px;padding-bottom:36px}
.bfcm-tiers__row{padding:20px 0 12px}
/* Make it a look: three portrait cards in a swipe row */
.bfcm .bfcm-look__side{min-width:0;max-width:100%}
.bfcm .bfcm-pieces{display:flex!important;flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-padding-left:16px;margin:0 -16px;padding:14px 16px 22px;scrollbar-width:none}
.bfcm .bfcm-pieces::-webkit-scrollbar{display:none}
.bfcm .bfcm-pieces .bfcm-piece{flex:0 0 64%;max-width:270px;scroll-snap-align:start;padding:8px}
.bfcm .bfcm-pieces .bfcm-piece .bfcm-piece__img{aspect-ratio:3/4;object-fit:cover;object-position:center top;width:100%}
.bfcm .bfcm-piece__lab{font-size:16px;margin-top:10px;padding:0 4px 4px}
.bfcm .bfcm-piece__lab small{font-size:14px}
}
/* ===== 2026-11-02 b: desktop Make it a look layout + one calm reveal for Door Crashers / tiles ===== */
@media(min-width:990px){
 /* original inspo: copy | main photo | stacked step cards + colour panel (no full-width row) */
 .bfcm .bfcm-look__panel{grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);align-items:center}
 .bfcm .bfcm-look__hero{margin-bottom:0;aspect-ratio:4/4.8}
 .bfcm .bfcm-look__side{grid-column:auto;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);align-items:center;margin-top:0}
 .bfcm .bfcm-builder{min-width:0}
 .bfcm .bfcm-steps{display:grid;grid-template-columns:1fr;grid-auto-flow:row;gap:0}
 .bfcm .bfcm-steps .bfcm-lstep+.bfcm-lstep{margin-top:-18px}
 .bfcm .bfcm-steps .bfcm-lstep:nth-child(odd){transform:rotate(-2deg) translateX(-8px)}
 .bfcm .bfcm-steps .bfcm-lstep:nth-child(even){transform:rotate(2deg) translateX(10px)}
 .bfcm .bfcm-look__side{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
 .bfcm .bfcm-steps .bfcm-lstep .bfcm-lstep__img{aspect-ratio:1/1;max-height:200px}
 .bfcm .bfcm-steps .bfcm-lstep .bfcm-lstep__img img{object-fit:contain;background:#fff}
 .bfcm .bfcm-panel2 h4{font-size:clamp(16px,1.35vw,24px);overflow-wrap:normal;word-break:normal;hyphens:none}
 .bfcm .bfcm-panel2{padding:clamp(12px,1.2vw,18px)}
 .bfcm .bfcm-panel2 img{aspect-ratio:4/4.6}
 .bfcm .bfcm-builder__add{font-size:15px;padding:0 16px;white-space:normal;line-height:1.15}
 .bfcm .bfcm-steps .bfcm-lstep:hover{transform:rotate(0) translateY(-4px);z-index:2}
 .bfcm .bfcm-lstep__lab{min-width:0}
}
.bfcm-dc__grid,.bfcm-tiers__row{transform:none!important}
/* ===== 2026-11-02 perf pass 2 ===== */
/* 1. Headline letters: the endless per-letter colour animation repaints text on the main thread every frame. Drop-in stays; colours are now fixed palette steps. */
/* in-between: letters keep palette colours; every ~6s a quick colour wave runs along the line (idle the rest of the time, paused off-screen) */
.bfcm.bfcm-ready .bfcm-hero__sub .bfcm-ltr{--c:#FF69B4;animation:bfcm2-drop .85s var(--bf-spring2) backwards,bfcm-wave 6s ease-in-out infinite;animation-delay:calc(var(--k)*42ms + 700ms),calc(var(--k)*-.2s + 2.5s)}
@keyframes bfcm-wave{0%,55%,100%{color:var(--c)}68%{color:#fff}80%{color:var(--bf-lime)}90%{color:var(--bf-blue)}}
@media(prefers-reduced-motion:reduce){.bfcm.bfcm-ready .bfcm-hero__sub .bfcm-ltr{animation:none}}
@media(max-width:749px){.bfcm.bfcm-ready .bfcm-hero__sub .bfcm-ltr{animation:bfcm2-drop .85s var(--bf-spring2) backwards;animation-delay:calc(var(--k)*42ms + 700ms)}}
.bfcm .bfcm-hero__sub .bfcm-ltr:nth-child(6n+1){color:var(--bf-pink)}
.bfcm .bfcm-hero__sub .bfcm-ltr:nth-child(6n+2){color:var(--bf-apricot)}
.bfcm .bfcm-hero__sub .bfcm-ltr:nth-child(6n+3){color:var(--bf-mint)}
.bfcm .bfcm-hero__sub .bfcm-ltr:nth-child(6n+4){color:var(--bf-blue)}
.bfcm .bfcm-hero__sub .bfcm-ltr:nth-child(6n+5){color:var(--bf-violet)}
.bfcm .bfcm-hero__sub .bfcm-ltr:nth-child(6n){color:var(--bf-lime)}
/* 2. Anything that loops only runs while its section is on screen (class set by bfcm-wow2.js). */
.bfcm.bfcm-offscreen *,.bfcm.bfcm-offscreen *::before,.bfcm.bfcm-offscreen *::after{animation-play-state:paused!important}
/* 3. Phones: no endless looping on the heavy decorative layers. */
@media(max-width:749px){
 .bfcm .bfcm-tier--feat::before{animation:none}
 .bfcm-collage::before{animation:none}
 .bfcm .bfcm-deco svg{animation:none}
}
/* ===== 2026-11-02 c: compact step cards closer to the inspo (small photo, tight rows, swatches visible) ===== */
.bfcm .bfcm-lstep{padding:12px 14px 14px;border-radius:18px}
.bfcm .bfcm-lstep__top{margin-bottom:4px;font-size:16px}
.bfcm .bfcm-lstep__n{width:26px;height:26px;font-size:14px}
.bfcm .bfcm-lstep .bfcm-lstep__img{aspect-ratio:1/1;max-height:132px;width:auto;max-width:62%;margin:0 auto;background:transparent;border-radius:0}
.bfcm .bfcm-lstep .bfcm-lstep__img img{object-fit:contain;background:transparent}
.bfcm .bfcm-lstep__name{margin:6px 2px 6px;font-size:17px;line-height:1.15}
.bfcm .bfcm-lstep .bfcm-qa__val.is-color{width:34px;height:34px}
.bfcm .bfcm-lstep .bfcm-qa__vals.is-row{flex-wrap:wrap;justify-content:flex-start;gap:6px}
.bfcm .bfcm-lstep .bfcm-qa__vals.is-row .bfcm-qa__val{flex:0 0 auto;max-width:none;width:auto;aspect-ratio:auto;border-radius:999px;padding:0 13px;min-height:36px;min-width:36px;font-size:14px;white-space:nowrap}
@media(min-width:990px){
 .bfcm .bfcm-steps .bfcm-lstep .bfcm-lstep__img{max-height:132px;aspect-ratio:1/1}
 .bfcm .bfcm-steps .bfcm-lstep+.bfcm-lstep{margin-top:-6px}
 .bfcm .bfcm-steps .bfcm-lstep:nth-child(odd){transform:rotate(-1.6deg) translateX(-6px)}
 .bfcm .bfcm-steps .bfcm-lstep:nth-child(even){transform:rotate(1.6deg) translateX(8px)}
}
/* ===== 2026-11-02 d: inspo-style minimal step cards: label, big cutout, one-line name + price, small swatch dots ===== */
.bfcm .bfcm-lstep{padding:10px 14px 12px;border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.16)}
.bfcm .bfcm-lstep__top{margin-bottom:0;font-size:15px}
.bfcm .bfcm-lstep__n{width:22px;height:22px;font-size:12px}
.bfcm .bfcm-lstep .bfcm-lstep__img{max-height:150px;max-width:70%;aspect-ratio:3/4}
.bfcm .bfcm-lstep__name{margin:2px 2px 4px;font-size:15px;justify-content:space-between;flex-wrap:nowrap;gap:8px}
.bfcm .bfcm-lstep__name b{flex:none;font-size:16px}
.bfcm .bfcm-lstep .bfcm-qa__lab{font-size:11px;margin-bottom:5px}
.bfcm .bfcm-lstep .bfcm-qa__val.is-color{width:26px;height:26px;border-width:2px}
.bfcm .bfcm-lstep .bfcm-qa__vals{gap:6px}
.bfcm .bfcm-lstep .bfcm-qa__vals.is-row .bfcm-qa__val{min-height:28px;min-width:28px;padding:0 10px;font-size:12px}
@media(min-width:990px){
 .bfcm .bfcm-steps .bfcm-lstep{width:86%}
 .bfcm .bfcm-steps .bfcm-lstep .bfcm-lstep__img{max-height:150px;aspect-ratio:3/4}
 .bfcm .bfcm-steps .bfcm-lstep+.bfcm-lstep{margin-top:-10px}
 .bfcm .bfcm-steps .bfcm-lstep:nth-child(odd){transform:rotate(-2.5deg);margin-left:0}
 .bfcm .bfcm-steps .bfcm-lstep:nth-child(even){transform:rotate(2.5deg);margin-left:14%}
 .bfcm .bfcm-steps .bfcm-lstep:hover{transform:rotate(0) translateY(-6px) scale(1.02)}
}
.bfcm .bfcm-lstep{overflow:hidden}
.bfcm .bfcm-lstep .bfcm-qa__lab{flex-wrap:wrap;gap:4px 8px}
.bfcm .bfcm-lstep .bfcm-qa__opt.is-done .bfcm-qa__lab{flex-wrap:wrap;border-radius:18px;min-width:0}
/* Door Crashers: fade only (no slide + tilt + perspective at the same time), so nothing jumps while the page loads */
.bfcm.bfcm-ready .bfcm-dcard[data-reveal],.bfcm-ready .bfcm-dcard[data-reveal]{translate:none!important;transition:opacity .5s ease,transform .2s linear,box-shadow .25s}
.bfcm.bfcm-ready .bfcm-dcard[data-reveal].w-in,.bfcm.bfcm-ready .bfcm-dcard[data-reveal].is-in{opacity:1}
.bfcm.bfcm-ready .bfcm-dcard.w-in .bfcm-dcard__back,.bfcm.bfcm-ready .bfcm-dcard.is-in .bfcm-dcard__back{transition:clip-path .45s ease,opacity .3s ease}
/* tiles: one entrance, no endless floating */
.bfcm.bfcm-ready .bfcm-tier[data-reveal].w-in{animation:bfcm2-dealin .6s var(--bf-spring2) backwards;animation-delay:calc(var(--i,0)*80ms)}
.bfcm.bfcm-ready .bfcm-look__panel.is-active .bfcm-piece,.bfcm-look__panel.is-active .bfcm-piece{animation:none}
/* ===== 2026-11-02 f: Make it a look, tighter: one CTA (the Step / Add bar), narrow cards, grouped copy column ===== */
.bfcm .bfcm-look__copy>.bfcm-btn{display:none}
.bfcm .bfcm-lstep .bfcm-qa__opt.is-done .bfcm-qa__lab{padding:6px 12px;min-height:34px;border-radius:999px}
.bfcm .bfcm-lstep .bfcm-qa__opt.is-done .bfcm-qa__lab::after{font-size:12px}
.bfcm .bfcm-lstep .bfcm-qa__opt+.bfcm-qa__opt{margin-top:6px}
@media(min-width:990px){
 .bfcm .bfcm-look__panel{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(250px,300px) minmax(0,.6fr);column-gap:clamp(14px,1.6vw,28px);row-gap:0;grid-template-rows:repeat(3,min-content);align-content:center}
 .bfcm .bfcm-look__hero,.bfcm .bfcm-steps,.bfcm .bfcm-panel2{grid-row:1/4}
 .bfcm .bfcm-look__copy h3{margin:0 0 12px}
 .bfcm .bfcm-look__copy>div{margin-bottom:16px!important}
 .bfcm .bfcm-builder__bar{margin:0;max-width:340px}
 .bfcm .bfcm-builder__add{min-height:52px}
 .bfcm .bfcm-steps .bfcm-lstep{width:100%;max-width:300px}
 .bfcm .bfcm-steps .bfcm-lstep:nth-child(even){margin-left:14px}
 .bfcm .bfcm-steps .bfcm-lstep .bfcm-lstep__img{max-height:130px}
}
/* ===== 2026-11-02 e: Make it a look reads left to right: copy > Step bar > photo > cards > colour panel. Phones: top down. No outlines on cards. ===== */
.bfcm .bfcm-lstep.is-ready{box-shadow:0 10px 26px rgba(0,0,0,.16)}
.bfcm .bfcm-lstep.is-ready .bfcm-lstep__n{background:#BF1763}
@media(min-width:990px){
 .bfcm .bfcm-look__panel{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,.95fr) minmax(0,.62fr);column-gap:clamp(8px,1.2vw,20px);grid-template-rows:repeat(4,min-content);align-items:center;align-content:center}
 .bfcm .bfcm-look__copy>div{margin-bottom:18px!important}
 .bfcm .bfcm-look__copy,.bfcm .bfcm-look__side,.bfcm .bfcm-builder{display:contents}
 .bfcm .bfcm-look__copy h3{grid-column:1;grid-row:1;align-self:end}
 .bfcm .bfcm-look__copy>div{grid-column:1;grid-row:2;align-self:start}
 .bfcm .bfcm-builder__bar{grid-column:1;grid-row:3;margin:0 0 14px;align-self:start}
 .bfcm .bfcm-look__copy>.bfcm-btn{grid-column:1;grid-row:4;justify-self:start;align-self:start}
 .bfcm .bfcm-look__hero{grid-column:2;grid-row:1/5}
 .bfcm .bfcm-steps{grid-column:3;grid-row:1/5;align-self:center}
 .bfcm .bfcm-panel2{grid-column:4;grid-row:1/5;align-self:center}
 .bfcm .bfcm-steps .bfcm-lstep{width:100%}
 .bfcm .bfcm-steps .bfcm-lstep:nth-child(odd){margin-left:0;transform:rotate(-2.5deg)}
 .bfcm .bfcm-steps .bfcm-lstep:nth-child(even){margin-left:8%;transform:rotate(2.5deg)}
 .bfcm .bfcm-steps .bfcm-lstep:hover{transform:rotate(0) translateY(-6px) scale(1.02)}
}
/* ===== 2026-11-02 g: final overrides (keep last): one CTA, narrow cards, tight copy column ===== */
.bfcm .bfcm-look__copy>.bfcm-btn{display:none!important}
@media(min-width:990px){
 .bfcm .bfcm-look__panel{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(250px,300px) minmax(0,.6fr);column-gap:clamp(14px,1.6vw,28px);row-gap:0;grid-template-rows:repeat(3,min-content);align-content:center}
 .bfcm .bfcm-look__hero,.bfcm .bfcm-steps,.bfcm .bfcm-panel2{grid-row:1/4}
 .bfcm .bfcm-look__copy h3{margin:0 0 12px}
 .bfcm .bfcm-look__copy>div{margin-bottom:16px!important}
 .bfcm .bfcm-builder__bar{margin:0;max-width:340px}
 .bfcm .bfcm-steps .bfcm-lstep{max-width:300px}
 .bfcm .bfcm-steps .bfcm-lstep:nth-child(even){margin-left:14px}
 .bfcm .bfcm-steps .bfcm-lstep .bfcm-lstep__img{max-height:130px}
}
/* ===== 2026-11-02 h: portrait cards sitting right beside the photo (inspo): narrow column, tall cutout, no floating ===== */
@media(min-width:990px){
 .bfcm .bfcm-look__panel{grid-template-columns:minmax(0,.85fr) minmax(0,.95fr) 250px minmax(0,.7fr);column-gap:clamp(6px,.8vw,14px);justify-content:start}
 .bfcm .bfcm-steps{justify-self:start;width:250px}
 .bfcm .bfcm-steps .bfcm-lstep{width:210px;max-width:210px;padding:10px 12px 12px}
 .bfcm .bfcm-steps .bfcm-lstep:nth-child(even){margin-left:36px}
 .bfcm .bfcm-steps .bfcm-lstep .bfcm-lstep__img{max-width:100%;max-height:none;aspect-ratio:4/4.3;margin:0}
 .bfcm .bfcm-steps .bfcm-lstep .bfcm-lstep__img img{object-fit:contain}
 .bfcm .bfcm-lstep__name{font-size:14px;flex-wrap:wrap;justify-content:flex-start;gap:0 8px}
 .bfcm .bfcm-lstep__name b{font-size:15px}
 .bfcm .bfcm-steps .bfcm-lstep+.bfcm-lstep{margin-top:-14px}
 .bfcm .bfcm-panel2{justify-self:start;width:100%;max-width:260px;margin-left:clamp(8px,1.4vw,24px)}
 .bfcm .bfcm-look__hero{justify-self:center}
}
/* ===== 2026-11-02 i: Make it a look, final tidy. Copy grouped and centred beside the photo; pick cards + the Step/Add button stacked as ONE column right next to the photo (flow: look > pick options > add); colour panel last. Everything packs to the centre so nothing floats apart. ===== */
@media(min-width:990px){
 .bfcm .bfcm-look__panel{grid-template-columns:minmax(0,280px) minmax(0,330px) 250px minmax(0,240px);grid-template-rows:auto auto;column-gap:clamp(6px,.8vw,14px);row-gap:0;justify-content:center;align-items:center;align-content:center}
 .bfcm .bfcm-look__copy h3{grid-column:1;grid-row:1;align-self:end;margin:0 0 12px}
 .bfcm .bfcm-look__copy>div{grid-column:1;grid-row:2;align-self:start;margin:0!important}
 .bfcm .bfcm-look__hero{grid-column:2;grid-row:1/3;max-width:330px;width:100%;justify-self:center}
 .bfcm .bfcm-builder{display:flex;flex-direction:column;align-items:flex-start;gap:16px;grid-column:3;grid-row:1/3;align-self:center;width:250px}
 .bfcm .bfcm-builder .bfcm-steps{grid-column:auto;grid-row:auto;width:250px;align-self:auto}
 .bfcm .bfcm-builder .bfcm-builder__bar{grid-column:auto;grid-row:auto;margin:0;width:250px;max-width:250px;align-self:auto}
 .bfcm .bfcm-builder .bfcm-builder__add{width:100%;min-height:52px;padding:0 16px;font-size:15px}
 .bfcm .bfcm-panel2{grid-column:4;grid-row:1/3;margin-left:clamp(6px,1vw,16px);align-self:center}
}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* ===== 2026-11-02 j: Door Crashers, bigger product photos. The image is enlarged from the bottom (independent `scale`, so the hover/sway transforms still work), anchored to the bottom of the colour block, and allowed to rise above the top edge of the card (sides and bottom stay clipped) so the garment fills the block and no longer floats. ===== */
.bfcm .bfcm-dcard__stage{overflow:visible;clip-path:inset(-34% 0 0 0)}
.bfcm .bfcm-dcard__img{object-fit:cover;object-position:center bottom;transform-origin:50% 100%;scale:1.24;translate:0 0}
.bfcm .bfcm-dc__grid{margin-top:clamp(56px,6.2vw,100px)}
@media(max-width:749px){.bfcm .bfcm-dcard__img{scale:1.14}}
@media(prefers-reduced-motion:reduce){.bfcm .bfcm-dcard__img{scale:1.12}}
/* ===== 2026-11-02 k: Door Crashers pop-out fix. Cause of the crop: bfcm-wow.css clips the stage with `.bfcm .bfcm-dcard .bfcm-dcard__stage` (higher specificity than the rule above), so the enlarged photo was cut at the card top. Match that specificity, show the WHOLE photo (contain, no crop), let it rise above the card and spill a little at the sides. Also removed the white hover shine that washed photos out. ===== */
.bfcm .bfcm-dcard .bfcm-dcard__stage{overflow:visible;clip-path:inset(-60% -10% 0 -10%);margin-bottom:-1px}
.bfcm .bfcm-dcard .bfcm-dcard__img{object-fit:contain;object-position:center bottom;transform-origin:50% 100%;scale:1.06;translate:0 2%}
.bfcm .bfcm-dcard .bfcm-dcard__stage::after,.bfcm .bfcm-dcard:hover .bfcm-dcard__stage::after{display:none!important;opacity:0!important;background:none!important}
/* ===== 2026-11-02 l: Make it a look, clean rebuild of the desktop grid (supersedes e,g,h,i). Left column = heading, text, then the Step/Add button directly under the text, all flush left (no left gap). Then photo, the stacked pick cards, and a tall colour poster panel like the inspo. ===== */
@media(min-width:990px){
 .bfcm .bfcm-look__panel{grid-template-columns:minmax(0,1.1fr) minmax(0,.95fr) minmax(0,.8fr) minmax(0,.85fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(12px,1.8vw,30px);row-gap:0;justify-content:stretch;align-items:center;align-content:stretch}
 .bfcm .bfcm-look__copy,.bfcm .bfcm-look__side,.bfcm .bfcm-builder{display:contents}
 .bfcm .bfcm-look__copy h3{grid-column:1;grid-row:2;align-self:end;justify-self:start;margin:0 0 14px;text-align:left;font-size:clamp(30px,3.2vw,54px);line-height:1.02;max-width:11ch}
 .bfcm .bfcm-look__copy>div{grid-column:1;grid-row:3;align-self:start;justify-self:start;margin:0 0 22px!important;max-width:30ch;text-align:left}
 .bfcm .bfcm-builder .bfcm-builder__bar{grid-column:1;grid-row:4;align-self:start;justify-self:start;margin:0;width:100%;max-width:340px}
 .bfcm .bfcm-builder .bfcm-builder__add{width:100%;min-height:54px;padding:0 20px;font-size:16px}
 .bfcm .bfcm-look__hero{grid-column:2;grid-row:1/6;align-self:center;justify-self:center;max-width:none;width:100%;margin:0}
 .bfcm .bfcm-builder .bfcm-steps{grid-column:3;grid-row:1/6;align-self:center;justify-self:start;width:100%;max-width:270px;margin:0}
 .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep{width:100%;max-width:240px}
 .bfcm .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(even){margin-left:clamp(10px,2vw,30px)}
 .bfcm .bfcm-panel2{grid-column:4;grid-row:1/6;align-self:center;justify-self:start;width:100%;max-width:320px;margin:0;padding:0;gap:0;display:flex;flex-direction:column;aspect-ratio:3/5.2;overflow:hidden}
 .bfcm .bfcm-panel2 h4{font-family:'Anton','Jost',Arial,sans-serif;font-weight:400;font-size:clamp(24px,2.1vw,34px);line-height:1.02;padding:clamp(16px,1.6vw,24px) clamp(16px,1.6vw,24px) 0;letter-spacing:.01em}
 .bfcm .bfcm-panel2>div{flex:1;margin:0;min-height:0;overflow:hidden;position:relative}
 .bfcm .bfcm-panel2 img{position:absolute;inset:auto 0 0 0;width:100%;height:100%;object-fit:cover;object-position:center bottom;mix-blend-mode:multiply!important;transform:scale(1.12);transform-origin:50% 100%}
 .bfcm .bfcm-panel2{background:var(--c,#69FFB4)!important;isolation:isolate}
 .bfcm .bfcm-panel2>div{background:transparent!important;mix-blend-mode:normal!important}
 /* Multiply tinted the garments mint (guide: keep garment colour true). A transparent cutout upload gives the inspo look; a studio photo sits as-is on the card. */
 .bfcm .bfcm-panel2 img{mix-blend-mode:normal!important;transform:none}
 .bfcm .bfcm-panel2>div{margin:14px clamp(12px,1.2vw,18px) clamp(12px,1.2vw,18px)!important}
 .bfcm .bfcm-look__panel{grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,.8fr) minmax(0,.85fr)}
}
@media(max-width:749px){.bfcm .bfcm-dcard .bfcm-dcard__img{scale:1}.bfcm .bfcm-dcard .bfcm-dcard__stage{clip-path:inset(-40% -4% 0 -4%)}}
@media(prefers-reduced-motion:reduce){.bfcm .bfcm-dcard .bfcm-dcard__img{scale:1}}
/* ===== 2026-11-02 m: (1) Door Crashers photo no longer jumps. Cause: the entrance animation bfcm2-model animated `scale` .78 to 1, overriding the resting scale (1.3), so photos showed small then snapped up when it ended. New keyframes start and end at the resting scale (--dcs). (2) Colour block behind each photo a bit smaller: it now starts lower on the card (top inset). ===== */
.bfcm .bfcm-dcard .bfcm-dcard__img{--dcs:1.06}
@media(max-width:749px){.bfcm .bfcm-dcard .bfcm-dcard__img{--dcs:1}}
@media(prefers-reduced-motion:reduce){.bfcm .bfcm-dcard .bfcm-dcard__img{--dcs:1}}
/* 2026-11-03: price stamp animation (bfcm-wow.css) kept the price invisible while the countdown ran. Cards with a Was price skip it; the countdown is the entrance. */
.bfcm.bfcm-ready .bfcm-dcard:not(:hover) .bfcm-dcard__sale[data-pd-wait],.bfcm.bfcm-ready .bfcm-dcard:not(:hover) .bfcm-dcard__sale[data-pd]:not(.is-dropping):not(.is-landed){animation:none!important;opacity:1!important}
.bfcm .bfcm-dcard .bfcm-dcard__sale.is-dropping{animation:bfcm-price-drop .5s cubic-bezier(.2,.9,.3,1.3) both!important;opacity:1!important}
.bfcm .bfcm-dcard .bfcm-dcard__sale.is-landed{animation:bfcm-price-land .5s cubic-bezier(.2,1.6,.4,1)!important;opacity:1!important}
@keyframes bfcm4-model{from{translate:0 42%;scale:calc(var(--dcs,1.3)*.85)}to{translate:0 3%;scale:var(--dcs,1.3)}}
.bfcm.bfcm-ready .bfcm-dcard.w-in .bfcm-dcard__img{animation-name:bfcm4-model,bfcm2-sway2}
.bfcm .bfcm-dcard .bfcm-dcard__back{inset:16% 0 -3px 0}

/* ===== from bfcm-mobile.css ===== */
/* AI 2026-11-04 (Chris): phone-only round. Thicker ribbons, bigger centred matching section headings, tidy Make it a look (2 cards side by side). */
@media (max-width:749px){
 html body .bfcm .bfcm-ribbons{padding:46px 0 58px!important}
 html body .bfcm .bfcm-ribbons .bfcm-ticker__track span{font-size:24px!important;line-height:1.1!important;padding:20px 26px!important}
 html body .bfcm .bfcm-ribbons .bfcm-ticker--b{margin-top:-30px!important}

 html body .bfcm .bfcm-dc__head,html body .bfcm .bfcm-tiers__grid>div:first-child,html body .bfcm.bfcm-look .bfcm-look__head{text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
 html body .bfcm .bfcm-dc__h2,html body .bfcm .bfcm-tiers__h2,html body .bfcm.bfcm-look .bfcm-look__head .bfcm-look__h2{display:block!important;font-family:'Anton',Impact,sans-serif!important;font-weight:400!important;text-transform:uppercase!important;font-size:68px!important;line-height:.9!important;text-align:center!important;margin:0 auto 10px!important;white-space:normal!important;position:static!important;max-width:100%!important}
 html body .bfcm .bfcm-dc__tag,html body .bfcm .bfcm-tiers__sub{text-align:center!important;font:700 20px/1.25 'Jost',Arial,sans-serif!important;margin:0 auto!important}
 html body .bfcm.bfcm-look .bfcm-look__tabs{justify-content:center!important;margin:6px auto 0!important}

 html body .bfcm.bfcm-look.bfcm-pad{padding-top:36px!important;padding-bottom:28px!important}
 html body .bfcm.bfcm-look .bfcm-look__head{position:static!important;margin:0 0 14px!important}
 html body .bfcm.bfcm-look .bfcm-look__panel{display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important}
 html body .bfcm.bfcm-look .bfcm-look__copy{align-items:center!important;text-align:center!important;padding:0!important;align-self:center!important}
 html body .bfcm.bfcm-look .bfcm-look__copy .bfcm-look__h2--col{display:none!important}
 html body .bfcm.bfcm-look .bfcm-look__copy h3{text-align:center!important;font-size:22px!important;margin:0 0 4px!important}
 html body .bfcm.bfcm-look .bfcm-look__copy>div{display:none!important}
 html body .bfcm.bfcm-look .bfcm-look__copy .bfcm-btn{display:none!important}
 html body .bfcm.bfcm-look .bfcm-look__hero{width:100%!important;max-height:250px!important;height:auto!important;margin:0 auto!important}
 html body .bfcm.bfcm-look .bfcm-look__hero img,html body .bfcm.bfcm-look .bfcm-look__heroimg{max-height:250px!important;width:auto!important;margin:0 auto!important;display:block!important}
 html body .bfcm.bfcm-look .bfcm-look__side{width:100%!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;padding:6px 0 0!important;justify-content:stretch!important;align-items:start!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep{width:auto!important;max-width:none!important;min-width:0!important;flex:none!important;margin:0!important;padding:10px 8px!important;transform:none!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep:nth-child(3){grid-column:1/-1!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-lstep__img{height:150px!important;max-height:150px!important}
 html body .bfcm.bfcm-look .bfcm-lstep .bfcm-lstep__name{margin:6px 0 8px!important;gap:6px!important;font-size:13px!important;line-height:1.15!important;flex-wrap:wrap}
 html body .bfcm.bfcm-look .bfcm-lstep__pr{font-size:14px!important}
 html body .bfcm.bfcm-look .bfcm-lstep .bfcm-ext-sw{box-shadow:none!important;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;gap:8px!important;margin:2px 0 6px!important;justify-content:center!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-ext-sw .bfcm-ghost-sw__b{width:28px!important;height:28px!important;min-width:28px!important}
 html body .bfcm.bfcm-look .bfcm-qa__vals,html body .bfcm.bfcm-look .bfcm-qa__vals.is-row{flex-wrap:nowrap!important;gap:3px!important;justify-content:center!important;width:100%!important}
 html body .bfcm.bfcm-look .bfcm-qa__val:not(.is-color){flex:1 1 0!important;min-width:0!important;width:auto!important;height:28px!important;padding:0!important;font-size:9.5px!important;letter-spacing:-.2px!important;line-height:1!important;overflow:visible!important;display:flex;align-items:center;justify-content:center}
 html body .bfcm.bfcm-look .bfcm-lstep .bfcm-qa__lab{margin:0 0 6px!important;font-size:10px!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-builder__add{min-width:0!important;width:100%!important;max-width:none!important;height:44px!important;min-height:44px!important;padding:0 16px!important;font-size:15px!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps{padding-bottom:0!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-builder__bar{margin-top:10px!important}
}
/* AI 2026-11-04 round B (Chris): bigger identical headings, thicker ribbons, tighter Make it a look so both cards show, one-line sizes, tidy card titles. */
@media (max-width:749px){
 html body .bfcm .bfcm-ribbons{padding:56px 0 70px!important}
 html body .bfcm .bfcm-ribbons .bfcm-ticker__track span{font-size:28px!important;padding:24px 28px!important}
 html body .bfcm .bfcm-ribbons .bfcm-ticker--b{margin-top:-34px!important}
 html body .bfcm .bfcm-dc__h2,html body .bfcm .bfcm-tiers__h2,html body .bfcm.bfcm-look .bfcm-look__head .bfcm-look__h2{font-size:78px!important;line-height:.92!important;margin:0 auto 8px!important}
 html body .bfcm .bfcm-dc__tag,html body .bfcm .bfcm-tiers__sub{font-size:21px!important}
 html body .bfcm.bfcm-look.bfcm-pad{padding-top:30px!important;padding-bottom:22px!important}
 html body .bfcm.bfcm-look .bfcm-look__head{margin:0 0 6px!important}
 html body .bfcm.bfcm-look .bfcm-look__tabs{margin:0 auto 2px!important}
 html body .bfcm.bfcm-look .bfcm-look__panel{gap:4px!important}
 html body .bfcm.bfcm-look .bfcm-look__copy h3{font-size:20px!important;margin:0!important}
 html body .bfcm.bfcm-look .bfcm-look__hero{max-height:170px!important}
 html body .bfcm.bfcm-look .bfcm-look__hero img,html body .bfcm.bfcm-look .bfcm-look__heroimg{max-height:170px!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps{gap:8px!important;padding:2px 0 0!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep{padding:8px 8px 10px!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-steps .bfcm-lstep .bfcm-lstep__img{height:118px!important;max-height:118px!important}
 html body .bfcm.bfcm-look .bfcm-lstep__top{display:flex!important;align-items:center!important;gap:6px!important;margin:0 0 4px!important}
 html body .bfcm.bfcm-look .bfcm-lstep__n{width:20px!important;height:20px!important;min-width:20px!important;font-size:11px!important}
 html body .bfcm.bfcm-look .bfcm-lstep__lab{font-size:12px!important;line-height:1.1!important;white-space:nowrap!important;letter-spacing:-.1px!important}
 html body .bfcm.bfcm-look .bfcm-qa__vals,html body .bfcm.bfcm-look .bfcm-qa__vals.is-row{flex-wrap:nowrap!important;gap:2px!important}
 html body .bfcm.bfcm-look .bfcm-qa__val:not(.is-color){height:30px!important;font-size:10px!important;letter-spacing:0!important;padding:0 1px!important;min-width:0!important;border-radius:999px!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-builder__bar{margin-top:8px!important}
 html body .bfcm.bfcm-look .bfcm-builder .bfcm-builder__add{height:42px!important;min-height:42px!important}
}

/* AI 2026-11-04 (Chris): on phones the wide soft ribbon shadow read as a flat grey band - a tighter shadow hugs each ribbon at its own angle */
@media (max-width: 749px) {
  html body .bfcm .bfcm-ribbons .bfcm-ticker { box-shadow: 0 7px 10px -5px rgba(0,0,0,.30) !important; }
}
/* AI 2026-11-04 (Chris): the black-to-white fade behind the ribbons showed as a flat grey band on phones.
   Split black/white along the pink ribbon's own angle (-3deg) so the switch happens hidden behind it. */
@media (max-width: 749px) {
  html body .bfcm .bfcm-ribbons { background: linear-gradient(177deg, #000 0%, #000 54%, #fff 54%) !important; }
}

/* AI 2026-11-04 (Chris, round 2): "Make it a look" - desktop: BIG Door-Crashers-size title on the LEFT (sticky), cards on the RIGHT.
   No colour panel behind the cards (Chris). Arrows + dots (shown at 2+ looks) restyled to BFCM black. Mobile stays stacked. */
[id$="__bfcm_combos"] .s-ai-sale-combos .combo-nav{margin-top:28px;gap:16px}
[id$="__bfcm_combos"] .s-ai-sale-combos .combo-btn{width:52px;height:52px;border:2px solid #000;background:#fff;color:#000;font:700 26px/1 'Jost',Arial,sans-serif;padding-bottom:3px}
[id$="__bfcm_combos"] .s-ai-sale-combos .combo-btn:hover{background:#000;border-color:#000;color:#fff;transform:scale(1.08)}
[id$="__bfcm_combos"] .s-ai-sale-combos .combo-btn:focus-visible{outline:3px solid #FF69B4;outline-offset:3px}
[id$="__bfcm_combos"] .s-ai-sale-combos .combo-dot{width:10px;height:10px;background:rgba(0,0,0,.2)}
[id$="__bfcm_combos"] .s-ai-sale-combos .combo-dot.active{width:28px;border-radius:99px;background:#000}
@media (min-width: 990px){
  [id$="__bfcm_combos"] .s-ai-sale-combos{display:grid;grid-template-columns:minmax(360px,.95fr) minmax(0,1.2fr);column-gap:clamp(32px,4vw,80px);align-items:start;max-width:1440px;margin:0 auto;padding-left:clamp(24px,4vw,60px);padding-right:clamp(24px,4vw,60px)}
  [id$="__bfcm_combos"] .s-ai-sale-combos .combos-head{grid-column:1;grid-row:1;text-align:left;position:sticky;top:110px;margin:0;padding:clamp(24px,4vw,64px) 0 0;max-width:none}
  [id$="__bfcm_combos"] .s-ai-sale-combos .combos-head h2{font-size:clamp(64px,8vw,115px);line-height:.9;margin:10px 0 20px;text-align:left}
  [id$="__bfcm_combos"] .s-ai-sale-combos .combos-eyebrow{text-align:left;margin:0}
  [id$="__bfcm_combos"] .s-ai-sale-combos .combos-head p{text-align:left;margin:0;max-width:440px;font-size:18px;line-height:1.5}
  [id$="__bfcm_combos"] .s-ai-sale-combos .combos-slider{grid-column:2;grid-row:1;min-width:0;overflow-x:clip;overflow-y:visible;padding:24px 0}
  /* AI: the carousel peeks at neighbouring looks; in the 2-column layout that peek landed behind the title - keep it inside the right column */
}
/* AI 2026-11-04 (Chris): seated model photo back beside the cards (desktop, under the title); smaller and centred on mobile */
[id$="__bfcm_combos"] .s-ai-sale-combos .combos-side-img{margin:24px auto 0;max-width:280px}
[id$="__bfcm_combos"] .s-ai-sale-combos .combos-side-img img{display:block;width:100%;height:auto}
@media (min-width: 990px){
  [id$="__bfcm_combos"] .s-ai-sale-combos .combos-side-img{margin:clamp(20px,3vw,48px) 0 0;max-width:min(100%,520px)}
}

/* ==========================================================================
   AI 2026-11-04 (Chris: "widths and margins are all different - clean it up").
   ONE layout rhythm for every BFCM home section (hero excepted):
   - content max 1600px, side gutters clamp(16px, 2.6vw, 48px)  (the original .bfcm-pad gutter)
   - top/bottom padding clamp(56px, 5.5vw, 96px)
   Earlier rounds each set their own values (36px / 4.4vw / 100px / 120px ...), which is why they drifted.
   ========================================================================== */
:root{--bf-gutter:clamp(16px,2.6vw,48px);--bf-vpad:clamp(56px,5.5vw,96px);--bf-maxw:1600px}
html body main .bfcm.bfcm-pad:not(.bfcm-hero){padding-top:var(--bf-vpad)!important;padding-bottom:var(--bf-vpad)!important;padding-left:var(--bf-gutter)!important;padding-right:var(--bf-gutter)!important}
/* Make it a look (combos section) on the same grid */
html body main [id$="__bfcm_combos"] .s-ai-sale-combos{max-width:calc(var(--bf-maxw) + 2 * var(--bf-gutter));margin-left:auto;margin-right:auto;padding:var(--bf-vpad) var(--bf-gutter)!important;box-sizing:border-box}

/* ==========================================================================
   AI 2026-11-04 (Chris round 3): match the LIVE theme's page grid and the Categories/Tiers heading style.
   Gutters/max width now come from the theme itself (--page-padding 48px desktop / 20px mobile, --page-width),
   so BFCM lines up with the header logo and the footer. Overrides the earlier --bf-gutter values.
   ========================================================================== */
:root{--bf-gutter:var(--page-padding,3rem);--bf-maxw:var(--page-width,1900px)}
/* Make it a look: heading exactly like Categories (Anton 44-72px desktop / 44-64px mobile, bold Jost subheading) */
html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combos-eyebrow{display:none}
html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combos-head h2{font-family:'Anton',Impact,Arial,sans-serif;font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:0;color:#000;font-size:clamp(44px,13vw,64px);margin:0 0 10px}
html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combos-head h2 em{font-style:normal;color:inherit}
html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combos-head p{font-family:'Jost',Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:#000;max-width:none}
/* centre photo of the model */
html body main [id$="__bfcm_combos"] .s-ai-sale-combos .pair-look{width:min(78%,340px);margin:0 auto 18px;transition:opacity .25s ease}
html body main [id$="__bfcm_combos"] .s-ai-sale-combos .pair-look.is-swapping{opacity:.35}
html body main [id$="__bfcm_combos"] .s-ai-sale-combos .pair-look img{display:block;width:100%;height:auto}
@media (min-width: 990px){
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos{grid-template-columns:minmax(280px,.7fr) minmax(0,1.9fr)!important}
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combos-head{position:sticky;top:110px;padding-top:0}
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combos-head h2{font-size:clamp(44px,4.6vw,72px)!important;margin:0 0 12px}
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combos-head p{font-size:clamp(20px,1.9vw,30px)!important;max-width:420px}
  /* each look = model photo (left) + fanned cards and pickers (right) */
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combo-pair:has(.pair-look){flex:0 0 100%;margin:0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);grid-template-areas:"look fan" "look foot";column-gap:clamp(16px,2.4vw,40px);align-items:start;justify-items:center}
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combo-pair:has(.pair-look) .pair-look{grid-area:look;width:100%;max-width:460px;margin:0;align-self:center}
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combo-pair:has(.pair-look) .pair-fan{grid-area:fan;width:clamp(320px,30vw,460px)}
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combo-pair:has(.pair-look) .pair-foot{grid-area:foot}
}
/* AI 2026-11-04: Categories / Door Crashers / Hero carry their own inline ID-scoped !important gutters (2.6vw).
   #MainContent + 2 classes outranks them, so every BFCM section sits on the theme's --page-padding like the header and footer. */
html body #MainContent .bfcm.bfcm-pad:not(.bfcm-hero){padding-left:var(--page-padding,3rem)!important;padding-right:var(--page-padding,3rem)!important}
html body #MainContent .bfcm.bfcm-hero .bfcm-hero__grid{padding-left:var(--page-padding,3rem)!important;padding-right:var(--page-padding,3rem)!important}

/* AI 2026-11-04 (Chris): the nav-links block above the footer is left EXACTLY as the live theme renders it (its own 1400px width) - no BFCM overrides.
   Shop by Category: stop the theme slider's edge-bleed (-48px margin) so the cards end on the page margin like every other section. */
html body #MainContent [id$="__bfcm_categories"] .bfcm-cat__stage slider-element{margin-right:0!important;padding-right:0!important}

/* AI: Standard theme width — inner grids span the full content box (max --page-width minus gutters), same as core sections. Was capped at 1600. */
html body #MainContent [id$="__bfcm_door_crashers"] .bfcm-dc__head,html body #MainContent [id$="__bfcm_door_crashers"] .bfcm-dc__grid,html body #MainContent [id$="__bfcm_tiers"] .bfcm-tiers__grid{max-width:none!important;margin-left:0!important;margin-right:0!important}

/* AI: Make it a look — one step at a time (colour → top size → legging size → add), like Door Crashers. Copy hidden. */
[id$="__bfcm_combos"] .lk-steps .pair-name,[id$="__bfcm_combos"] .lk-steps .pair-sub,[id$="__bfcm_combos"] .lk-steps .pair-price-row,[id$="__bfcm_combos"] .lk-steps .combo-size-label,[id$="__bfcm_combos"] .lk-steps .combo-size-select,[id$="__bfcm_combos"] .lk-steps .pair-add-btn{display:none!important}
[id$="__bfcm_combos"] .lk-steps [data-lk]{display:none!important;margin:0!important}
[id$="__bfcm_combos"] .lk-steps[data-step="color"] [data-lk="color"],[id$="__bfcm_combos"] .lk-steps[data-step="top"] [data-lk="top"],[id$="__bfcm_combos"] .lk-steps[data-step="bcolor"] [data-lk="bcolor"],[id$="__bfcm_combos"] .lk-steps[data-step="bottom"] [data-lk="bottom"]{display:block!important;animation:lkIn .28s ease both}
@keyframes lkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
[id$="__bfcm_combos"] .lk-steps .swatch-row{justify-content:center!important}
[id$="__bfcm_combos"] .lk-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
[id$="__bfcm_combos"] .lk-chip{min-width:44px;height:40px;padding:0 12px;border:1.5px solid rgba(0,0,0,.18);border-radius:999px;background:#fff;color:#000;font:600 14px/1 'Jost',Arial,sans-serif;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
[id$="__bfcm_combos"] .lk-chip:hover{border-color:#000}
[id$="__bfcm_combos"] .lk-chip[aria-pressed="true"]{background:#000;color:#fff;border-color:#000}
[id$="__bfcm_combos"] .lk-chip:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
[id$="__bfcm_combos"] .lk-chip:focus-visible,[id$="__bfcm_combos"] .lk-hint:focus-visible,[id$="__bfcm_combos"] .lk-done button:focus-visible{outline:2px solid #FF69B4;outline-offset:2px}
[id$="__bfcm_combos"] .lk-done{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:0;margin:0 0 12px}
[id$="__bfcm_combos"] .lk-done:empty{display:none}
[id$="__bfcm_combos"] .lk-done button{border:0;background:#f3f3f3;border-radius:999px;padding:6px 12px;font:600 12px/1 'Jost',Arial,sans-serif;color:#000;cursor:pointer}
[id$="__bfcm_combos"] .lk-done button:hover{background:#e6e6e6}
[id$="__bfcm_combos"] .lk-hint{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:14px 0 0;padding:0 22px;border:0;border-radius:999px;background:transparent;color:#000;box-shadow:inset 0 0 0 2px #000;font:700 16px/1 'Jost',Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s}
[id$="__bfcm_combos"] .lk-hint.is-ready{background:#000;color:#fff}
[id$="__bfcm_combos"] .lk-hint.is-busy{opacity:.7}
[id$="__bfcm_combos"] .lk-hint.is-done{background:#000;color:#fff}
@media (prefers-reduced-motion:reduce){[id$="__bfcm_combos"] .lk-steps [data-lk]{animation:none!important}}

/* AI: Make it a look uses the same desktop grid as Shop by Category / Discount (.8fr title | 2.8fr content, same gap) so all three title columns and content columns line up at every width. */
@media(min-width:990px){
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos{grid-template-columns:minmax(0,.8fr) minmax(0,2.8fr)!important;column-gap:clamp(16px,2.4vw,40px)!important}
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combo-pair:has(.pair-look){grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combo-pair:has(.pair-look) .pair-look{justify-self:start!important}
}

/* AI: Make it a look, cleaner pairing with the photo — cards + picker sit as one block centred on the photo's height, same width as the cards; photo gets the same rounded corners as the cards. */
@media(min-width:990px){
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combo-pair:has(.pair-look){grid-template-areas:"look ." "look fan" "look foot" "look .";grid-template-rows:1fr auto auto 1fr;align-items:center;row-gap:0}
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combo-pair:has(.pair-look) .pair-look{align-self:stretch;display:flex;align-items:center}
  html body main [id$="__bfcm_combos"] .s-ai-sale-combos .combo-pair:has(.pair-look) .pair-foot{width:clamp(320px,30vw,460px);max-width:none;padding:0 12px}
}
html body main [id$="__bfcm_combos"] .pair-look img{border-radius:20px;display:block;width:100%;height:auto}
html body main [id$="__bfcm_combos"] .lk-steps .swatch-row{margin-top:18px}

/* AI: Chris — cards overlap the seated photo more. Mobile: cards ride up over the bottom of the photo. Desktop: cards + picker slide left over the photo's right edge. */
html body main [id$="__bfcm_combos"] .combo-pair:has(.pair-look) .pair-fan{position:relative;z-index:2}
html body main [id$="__bfcm_combos"] .combo-pair:has(.pair-look) .pair-foot{position:relative;z-index:2}
@media(max-width:989px){
  html body main [id$="__bfcm_combos"] .combo-pair:has(.pair-look) .pair-fan{margin-top:clamp(-280px,-46vw,-160px)!important}
}
@media(min-width:990px){
  html body main [id$="__bfcm_combos"] .combo-pair:has(.pair-look) .pair-fan,html body main [id$="__bfcm_combos"] .combo-pair:has(.pair-look) .pair-foot{left:clamp(-180px,-9vw,-80px)}
}

/* AI: Chris — look cards styled like the Shop by Category cards: white card, 24px corners, no shadow or glow, photo on soft grey, name underneath in Jost with a coloured bar (pink top, violet leggings). Fan tilt kept. */
html body main [id$="__bfcm_combos"] .pair-card,html body main [id$="__bfcm_combos"] .pair-card.is-front{box-shadow:none!important;background:#fff;border-radius:24px;display:flex;flex-direction:column}
html body main [id$="__bfcm_combos"] .pair-card img{flex:1 1 auto;min-height:0;height:auto!important;background:#f1f1f4}
html body main [id$="__bfcm_combos"] .pair-card.is-front img{transform:none}
html body main [id$="__bfcm_combos"] .pair-card-label{position:static!important;flex:0 0 auto;background:#fff!important;color:#000!important;font:700 16px/1.2 'Jost',Arial,sans-serif!important;letter-spacing:-.2px;padding:12px 14px 13px!important;border-bottom:6px solid #FF69B4;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body main [id$="__bfcm_combos"] .pair-card--2 .pair-card-label{border-bottom-color:#B36BFF}
html body main [id$="__bfcm_combos"] .pair-fan::before,html body main [id$="__bfcm_combos"] .pair-fan::after,html body main [id$="__bfcm_combos"] .pair-card::before,html body main [id$="__bfcm_combos"] .pair-card::after{display:none!important}
/* AI: card names wrap to two lines instead of cutting off. */
html body main [id$="__bfcm_combos"] .pair-card-label{white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px!important}

/* AI: Chris — lighter subtext under every BFCM section heading so it isn't so blocky. */
html body #MainContent [id$="__bfcm_door_crashers"] .bfcm-dc__tag,html body #MainContent [id$="__bfcm_categories"] .bfcm-dc__tag,html body #MainContent [id$="__bfcm_tiers"] .bfcm-tiers__sub,html body #MainContent [id$="__bfcm_combos"] .combos-head p{font-weight:400!important}
/* AI: arrows/dots when moved under the heading (desktop). */
html body main [id$="__bfcm_combos"] .combos-head .combo-nav{justify-content:flex-start!important;margin:28px 0 0!important;padding:0!important;position:static!important;width:auto!important}
/* AI: look cards are clickable previews. */
html body main [id$="__bfcm_combos"] .pair-card{cursor:pointer}
html body main [id$="__bfcm_combos"] .pair-card:focus-visible{outline:3px solid #000;outline-offset:3px}

/* AI: Chris — big black bold price in each look card's top corner (sale price; regular price struck under it when on sale). */
html body main [id$="__bfcm_combos"] .pair-card{position:absolute}
html body main [id$="__bfcm_combos"] .pair-card-price{position:absolute;top:12px;right:12px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:8px 12px;border-radius:14px;background:#fff;color:#000;font-family:'Jost',Arial,sans-serif;line-height:1;pointer-events:none}
html body main [id$="__bfcm_combos"] .pair-card-price b{font-weight:800;font-size:clamp(22px,2vw,30px);letter-spacing:-.5px}
html body main [id$="__bfcm_combos"] .pair-card-price s{font-size:13px;font-weight:500;color:#777}

/* AI: My Size chip in the look size steps — pink ring + tiny "My size" tag, same pink as the store's My Size pill. */
html body main [id$="__bfcm_combos"] .lk-chip.is-mine{position:relative;box-shadow:0 0 0 2px #FF69B4}
html body main [id$="__bfcm_combos"] .lk-chip.is-mine::after{content:'My size';position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);padding:1px 5px;border-radius:999px;background:#FF69B4;color:#fff;font:700 8px/1.2 'Jost',Arial,sans-serif;letter-spacing:.04em;white-space:nowrap;text-transform:uppercase}
html body main [id$="__bfcm_combos"] .lk-chips{row-gap:14px}

/* AI: Chris — soft depth shadow on the look cards (tight + neutral, not the old pink glow). Front card lifts a touch more. */
html body main [id$="__bfcm_combos"] .combo-pair .pair-card{box-shadow:0 2px 6px rgba(0,0,0,.06),0 14px 32px rgba(0,0,0,.14)!important}
html body main [id$="__bfcm_combos"] .combo-pair .pair-card.is-front{box-shadow:0 4px 10px rgba(0,0,0,.08),0 22px 44px rgba(0,0,0,.18)!important}

/* AI: colour step — sizes available in the previewed colour (sold out struck, My Size pink), and a dashed pink ring + slash on swatches where the shopper's saved size is sold out. */
html body main [id$="__bfcm_combos"] .lk-avail{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:6px}
html body main [id$="__bfcm_combos"] .lk-avail:empty{display:none}
html body main [id$="__bfcm_combos"] .lk-avail__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
html body main [id$="__bfcm_combos"] .lk-avail__lab{font:500 13px/1 'Jost',Arial,sans-serif;color:#555;margin-right:2px}
html body main [id$="__bfcm_combos"] .lk-avail__s{font:600 12px/1 'Jost',Arial,sans-serif;color:#000;padding:4px 7px;border-radius:999px;background:#f1f1f4}
html body main [id$="__bfcm_combos"] .lk-avail__s.is-out{color:#aaa;text-decoration:line-through;background:transparent}
html body main [id$="__bfcm_combos"] .lk-avail__s.is-mine{box-shadow:0 0 0 2px #FF69B4}
html body main [id$="__bfcm_combos"] .lk-avail__warn{margin:0;font:600 13px/1.3 'Jost',Arial,sans-serif;color:#d1206f}
html body main [id$="__bfcm_combos"] .combo-swatch[data-nomine]{opacity:.55}
html body main [id$="__bfcm_combos"] .combo-swatch[data-nomine]::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(to top right,transparent calc(50% - 1px),#FF69B4 calc(50% - 1px),#FF69B4 calc(50% + 1px),transparent calc(50% + 1px))}

/* AI: Chris — the "In <colour>:" size line is bigger and tappable (tap a size = choose colour + size); sold-out sizes are clearly struck. */
html body main [id$="__bfcm_combos"] .lk-avail__row{gap:8px}
html body main [id$="__bfcm_combos"] .lk-avail__lab{font-size:15px}
html body main [id$="__bfcm_combos"] .lk-avail__s{min-width:40px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font:600 15px/1 'Jost',Arial,sans-serif;border:1.5px solid rgba(0,0,0,.15);background:#fff;border-radius:999px;color:#000}
html body main [id$="__bfcm_combos"] button.lk-avail__s{cursor:pointer;transition:border-color .15s,background .15s,color .15s}
html body main [id$="__bfcm_combos"] button.lk-avail__s:hover{border-color:#000;background:#000;color:#fff}
html body main [id$="__bfcm_combos"] button.lk-avail__s:focus-visible{outline:2px solid #FF69B4;outline-offset:2px}
html body main [id$="__bfcm_combos"] .lk-avail__s.is-out{color:#b5b5b5;border-color:rgba(0,0,0,.08);text-decoration:line-through 2px;background:#fafafa}
html body main [id$="__bfcm_combos"] .lk-avail__warn{font-size:14px}

/* AI: Chris — small "Limited" tag under colour swatches where some sizes are sold out. */
html body main [id$="__bfcm_combos"] .lk-steps .combo-swatches .swatch-row{padding-bottom:16px}
html body main [id$="__bfcm_combos"] .combo-swatch[data-limited]::before{content:'Limited';position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);padding:2px 6px;border-radius:999px;background:#000;color:#fff;font:700 9px/1.1 'Jost',Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
html body main [id$="__bfcm_combos"] .combo-swatch[data-limited]{overflow:visible}
/* AI: room between swatches so the "Limited" tags don't touch. */
html body main [id$="__bfcm_combos"] .lk-steps .combo-swatches .swatch-row{gap:22px!important}

/* AI: Chris — sizes on a single row: "In <colour>:" label sits above, chips shrink to fit (both the colour-step line and the size steps). */
html body main [id$="__bfcm_combos"] .lk-avail__row{flex-wrap:wrap;justify-content:center}
html body main [id$="__bfcm_combos"] .lk-avail__lab{flex:0 0 100%;text-align:center;margin:0 0 2px}
html body main [id$="__bfcm_combos"] .lk-avail__row,html body main [id$="__bfcm_combos"] .lk-chips{column-gap:6px}
html body main [id$="__bfcm_combos"] .lk-avail__row .lk-avail__s,html body main [id$="__bfcm_combos"] .lk-chips .lk-chip{flex:0 1 auto;min-width:0;height:36px;padding:0 clamp(6px,1vw,11px);font-size:14px}
html body main [id$="__bfcm_combos"] .lk-chips{flex-wrap:nowrap}
html body main [id$="__bfcm_combos"] .lk-avail__row{display:flex}
html body main [id$="__bfcm_combos"] .lk-avail__sizes{display:flex;flex-wrap:nowrap;justify-content:center;gap:6px}

/* AI: Chris — picks summary under the cards: [top swatch + size]  +  [leggings size], left/right like the cards above. */
html body main [id$="__bfcm_combos"] .lk-done{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:14px;margin:0 0 14px!important;min-height:0}
html body main [id$="__bfcm_combos"] .lk-done:empty{display:none!important}
html body main [id$="__bfcm_combos"] .lk-sum__side{display:flex;align-items:center;gap:8px;min-width:0}
html body main [id$="__bfcm_combos"] .lk-sum__side.is-l{justify-content:flex-end}
html body main [id$="__bfcm_combos"] .lk-sum__side.is-r{justify-content:flex-start}
html body main [id$="__bfcm_combos"] .lk-done .lk-sum__it{display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:36px;padding:0 12px;border:1.5px solid rgba(0,0,0,.15)!important;border-radius:999px;background:#fff!important;color:#000;font:700 16px/1 'Jost',Arial,sans-serif!important;cursor:pointer;transition:border-color .15s}
html body main [id$="__bfcm_combos"] .lk-done .lk-sum__it:hover{border-color:#000!important}
html body main [id$="__bfcm_combos"] .lk-done .lk-sum__it.is-colour{padding:0;width:36px;border-color:transparent!important}
html body main [id$="__bfcm_combos"] .lk-sum__dot{width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 1.5px rgba(0,0,0,.15)}
html body main [id$="__bfcm_combos"] .lk-done .lk-sum__it.is-colour:hover .lk-sum__dot{box-shadow:0 0 0 2px #000}
html body main [id$="__bfcm_combos"] .lk-done .lk-sum__it.is-mine{box-shadow:0 0 0 2px #FF69B4}
html body main [id$="__bfcm_combos"] .lk-sum__plus{font:700 22px/1 'Jost',Arial,sans-serif;color:#000;visibility:hidden}
html body main [id$="__bfcm_combos"] .lk-sum__plus.is-on{visibility:visible}

/* AI: Chris — tag reads "Limited sizes" (stacked on two lines so it fits under the swatch). */
html body main [id$="__bfcm_combos"] .combo-swatch[data-limited]::before{content:'Limited\A sizes';white-space:pre;text-align:center;line-height:1.05;padding:3px 6px;border-radius:8px}
html body main [id$="__bfcm_combos"] .lk-steps .combo-swatches .swatch-row{padding-bottom:28px}

/* AI: Chris — swatches never look sold out when only the shopper's size is out: no dimming, no slash. The "Limited sizes" tag + the size line carry that info. */
html body main [id$="__bfcm_combos"] .combo-swatch[data-nomine]{opacity:1}
html body main [id$="__bfcm_combos"] .combo-swatch[data-nomine]::after{display:none}

/* AI: Chris — "Top" / "Leggings" labels above each side of the picks summary. */
html body main [id$="__bfcm_combos"] .lk-sum__side{flex-direction:column;align-items:stretch;gap:5px}
html body main [id$="__bfcm_combos"] .lk-sum__side.is-l{align-items:flex-end}
html body main [id$="__bfcm_combos"] .lk-sum__side.is-r{align-items:flex-start}
html body main [id$="__bfcm_combos"] .lk-sum__row{display:flex;align-items:center;gap:8px}
html body main [id$="__bfcm_combos"] .lk-sum__lab{font:600 11px/1 'Jost',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#777}
html body main [id$="__bfcm_combos"] .lk-sum__plus{align-self:end;padding-bottom:7px}

/* AI: Chris — mobile: tighter gap between the heading text and the model photo. */
@media(max-width:989px){html body main [id$="__bfcm_combos"] .combos-head{margin-bottom:12px!important}}

/* AI: Chris — mobile hairline under the ribbons: the hero's solid black background peeked out below the white ribbon backdrop on high-density screens (sub-pixel rounding). Make the hero's last few pixels white and pull the next section up 1px to close the seam. */
@media (max-width: 749px) {
  html body #MainContent .bfcm.bfcm-hero{background:linear-gradient(to top,#fff 0,#fff 4px,#000 4px) !important}
  html body #MainContent [id$="__bfcm_hero"] + .shopify-section{margin-top:-1px}
}

/* AI: Chris — Door Crasher colour-cycle timer bar kept, fixed: centred under the colour name, and only shown on the card that is
   counting down (fades in while it fills, fades out after), so no card shows an empty "stuck" bar. */
html body .bfcm .bfcm-dcard .bfcm-dc-timer{display:block!important;width:64px!important;max-width:40%;margin:8px auto 0!important;align-self:center!important;opacity:0;transition:opacity .25s}
html body .bfcm .bfcm-dcard .bfcm-dc-timer.is-run{opacity:1!important}
html body .bfcm .bfcm-dcard.has-color .bfcm-dc-timer{display:none!important}

/* AI: Chris — mobile Shop by Discount: the featured 70% tile was taller (min-height 230) and stretched the 60% tile beside it. Same height as the rest on phones. */
@media (max-width: 749px) {
  html body #MainContent [id$="__bfcm_tiers"] .bfcm-tier,html body #MainContent [id$="__bfcm_tiers"] .bfcm-tier--feat{min-height:130px!important;height:auto!important}
}
@media (max-width: 749px) {
  html body #MainContent [id$="__bfcm_tiers"] .bfcm-tier--feat .bfcm-tier__pct{font-size:40px!important}
}

/* AI: Chris — discount tiles: number + "Shop now" centred on the whole tile (equal side padding), not nudged into the part the next tile doesn't cover. The overlap stays as is. */
@media (min-width: 750px) {
  html body #MainContent [id$="__bfcm_tiers"] .bfcm-tier,html body #MainContent [id$="__bfcm_tiers"] .bfcm-tier:last-child{padding-left:8px!important;padding-right:8px!important}
}

/* AI: Chris — tapped model photo comes forward over the cards (cards dip back slightly). */
html body main [id$="__bfcm_combos"] .combo-pair .pair-look{position:relative;z-index:1;cursor:zoom-in;transition:transform .35s cubic-bezier(.34,1.4,.5,1),filter .3s}
html body main [id$="__bfcm_combos"] .combo-pair .pair-fan{transition:opacity .3s,transform .35s}
html body main [id$="__bfcm_combos"] .combo-pair.lk-look-front .pair-look{z-index:6;cursor:zoom-out;transform:scale(1.04);filter:drop-shadow(0 18px 30px rgba(0,0,0,.18))}
html body main [id$="__bfcm_combos"] .combo-pair.lk-look-front .pair-fan{opacity:.55;transform:scale(.97)}
html body main [id$="__bfcm_combos"] .pair-look:focus-visible{outline:3px solid #000;outline-offset:3px}
@media (prefers-reduced-motion: reduce){html body main [id$="__bfcm_combos"] .combo-pair .pair-look,html body main [id$="__bfcm_combos"] .combo-pair .pair-fan{transition:none}}

/* AI: Chris — size buttons stay perfect circles (colour-step size line + size steps), still one row. */
html body main [id$="__bfcm_combos"] .lk-avail__row .lk-avail__s,html body main [id$="__bfcm_combos"] .lk-chips .lk-chip{flex:0 0 auto!important;width:clamp(34px,10vw,42px)!important;height:clamp(34px,10vw,42px)!important;min-width:0!important;padding:0!important;border-radius:50%!important;font-size:clamp(12px,3.4vw,14px)!important;letter-spacing:-.2px}
html body main [id$="__bfcm_combos"] .lk-avail__sizes,html body main [id$="__bfcm_combos"] .lk-chips{gap:clamp(4px,1.4vw,8px)!important}

/* AI: Chris — Door Crasher swatches + My Size styled like Make it a look.
   Swatches: soft edge + highlight; the picked/previewed colour gets a pink ring + glow (no black ring / tick).
   My Size: pink ring + small "MY SIZE" tag under the size (replaces the star badge).
   On the pink card the pink would vanish, so ring/tag go black there. */
html body .bfcm .bfcm-ghost-sw__b,html body .bfcm .bfcm-qa__val.is-color{border:1.5px solid rgba(0,0,0,.18)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 1px 3px rgba(0,0,0,.12)!important;transition:transform .15s cubic-bezier(.34,1.56,.64,1),border-color .15s,box-shadow .15s!important}
html body .bfcm .bfcm-ghost-sw__b:hover,html body .bfcm .bfcm-qa__val.is-color:hover{transform:scale(1.12)}
html body .bfcm .bfcm-ghost-sw__b.is-on,html body .bfcm .bfcm-ghost-sw__b.is-sel,html body .bfcm .bfcm-qa__val.is-color[aria-pressed="true"]{--sw-ring:#FF69B4;border-color:var(--sw-ring)!important;box-shadow:inset 0 0 0 2px #fff,0 0 0 1.5px var(--sw-ring),0 3px 12px rgba(255,105,180,.4)!important;transform:scale(1.08)}
html body .bfcm .bfcm-c-pink .bfcm-ghost-sw__b.is-on,html body .bfcm .bfcm-c-pink .bfcm-ghost-sw__b.is-sel,html body .bfcm .bfcm-c-pink .bfcm-qa__val.is-color[aria-pressed="true"]{--sw-ring:#000;box-shadow:inset 0 0 0 2px #fff,0 0 0 1.5px #000,0 3px 12px rgba(0,0,0,.3)!important}
html body .bfcm .bfcm-qa__val.is-color[aria-pressed="true"]::after,html body .bfcm .bfcm-ghost-sw__b.is-on::after,html body .bfcm .bfcm-ghost-sw__b.is-sel::after{content:none!important}

html body .bfcm .bfcm-qa__val.is-mine:not(.is-out){box-shadow:0 0 0 2px #FF69B4!important}
html body .bfcm .bfcm-qa__val.is-mine:not(.is-out)::before{content:'My size'!important;top:auto!important;right:auto!important;left:50%!important;bottom:-9px!important;transform:translateX(-50%);width:auto!important;height:auto!important;padding:1px 5px!important;border:0!important;border-radius:999px!important;background:#FF69B4!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font:700 8px/1.2 'Jost',Arial,sans-serif!important;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;z-index:2}
html body .bfcm .bfcm-c-pink .bfcm-qa__val.is-mine:not(.is-out){box-shadow:0 0 0 2px #000!important}
html body .bfcm .bfcm-c-pink .bfcm-qa__val.is-mine:not(.is-out)::before{background:#000!important}
html body .bfcm .bfcm-qa__vals{row-gap:14px!important}

/* AI perf 2026-11-04: ribbon tracks and the scroll-skewed card grids get their own compositor layer so moving them doesn't repaint the page. */
html body .bfcm .bfcm-ticker__track{will-change:transform;backface-visibility:hidden}
html body .bfcm-dc__grid,html body .bfcm-tiers__row{will-change:transform}

/* AI: Chris — Door Crasher buttons line up across a row even when one card has more swatch rows: the button sits at the
   bottom of the (equal-height) card instead of straight under the swatches. */
html body .bfcm .bfcm-dcard{flex-direction:column}
html body .bfcm .bfcm-dcard > .bfcm-dc-hint{margin-top:auto!important}
html body .bfcm .bfcm-dcard .bfcm-dcard__info{padding-bottom:12px}

/* AI: the look-style swatch ring lost to an older, more specific black-ring rule (visible on phones). Same rule, matching specificity, placed last. */
html body .bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b.is-on,html body .bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b.is-sel,html body .bfcm .bfcm-dcard .bfcm-qa .bfcm-qa__val.is-color[aria-pressed="true"]{border-color:#FF69B4!important;box-shadow:inset 0 0 0 2px #fff,0 0 0 1.5px #FF69B4,0 3px 12px rgba(255,105,180,.4)!important}
html body .bfcm .bfcm-dcard.bfcm-c-pink .bfcm-ghost-sw .bfcm-ghost-sw__b.is-on,html body .bfcm .bfcm-dcard.bfcm-c-pink .bfcm-ghost-sw .bfcm-ghost-sw__b.is-sel,html body .bfcm .bfcm-dcard.bfcm-c-pink .bfcm-qa .bfcm-qa__val.is-color[aria-pressed="true"]{border-color:#000!important;box-shadow:inset 0 0 0 2px #fff,0 0 0 1.5px #000,0 3px 12px rgba(0,0,0,.3)!important}
html body .bfcm .bfcm-dcard .bfcm-ghost-sw .bfcm-ghost-sw__b:not(.is-on):not(.is-sel){border:1.5px solid rgba(0,0,0,.18)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 1px 3px rgba(0,0,0,.12)!important}

/* AI: Chris — Door Crasher timer bars bigger on narrower screens (desktop size kept). */
@media (max-width: 989px) {
  html body .bfcm .bfcm-dcard .bfcm-dc-timer{width:55%!important;max-width:none;height:6px}
}