/* Black Friday 2026 homepage (owner approved "Look A", 2026-11-09).
   Linked only while PromoSchedule's blackfriday window is on. Every rule is
   scoped to a bf- class so nothing else on the page can change; headings use
   the self-hosted Outfit (the site does not load Poppins). State comes from
   data-te-promo on <html>, set by the banner script in the layout, so "applied"
   is only ever said once the cart really has the code. */
.bf-hero, .bf-perks, .bf-sec, .bf-gifts, .bf-dates, .bf-end, .bf-pdp, .bf-pdp-dates, .bf-saved, .bf-prompt, .bf-sumcap, .bf-teams, .bf-cat-hero, .bf-cat-price, .bf-cat-note {
    --ink: #0A0A0C; --panel: #15161A; --hair: rgba(255, 255, 255, 0.12); --soft: rgba(255, 255, 255, 0.82);
    --blue: #1776C8; --blue-dark: #125A9C; --sky: #5BB0FF; --label: #CDE4FA;
    --body: #4b5563; --muted: #6b7280; --line: #e5e7eb; --well: #F3F4F6;
    --head: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-family: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.bf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bf-wrap { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.bf-saved .i, .bf-sumcap .i, .bf-hero .i, .bf-pdp .i, .bf-pdp-dates .i, .bf-perks .i, .bf-sec .i, .bf-teams .i, .bf-gifts .i, .bf-dates .i, .bf-end .i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bf-hero .i--fill, .bf-perks .i--fill { fill: currentColor; stroke: none; }
.bf-hero .i--leaf, .bf-perks .i--leaf { fill: #ff0000; stroke: none; color: #ff0000; }
.bf-hero .i--20, .bf-end .i--20 { width: 20px; height: 20px; }
.bf-perks .i--22 { width: 20px; height: 20px; }
.bf-dates .i--28 { width: 28px; height: 28px; }
.bf-hero .i--bold, .bf-sec .i--bold, .bf-teams .i--bold, .bf-gifts .i--bold, .bf-end .i--bold { stroke-width: 2.25; }
.bf-hero a, .bf-sec a, .bf-gifts a, .bf-end a { text-decoration: none; }
.bf-pdp button:focus-visible, .bf-pdp-dates a:focus-visible, .bf-hero a:focus-visible, .bf-hero button:focus-visible, .bf-sec a:focus-visible, .bf-gifts a:focus-visible, .bf-end a:focus-visible, .bf-end button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.bf-sec a:focus-visible { outline-color: var(--blue); }

/* What the visitor's cart says (the banner script sets data-te-promo). */
.bf-if-applied, .bf-if-saved { display: none; }
html[data-te-promo="applied"] .bf-if-applied, html[data-te-promo="saved"] .bf-if-saved { display: inline; }
html[data-te-promo="applied"] .bf-if-off, html[data-te-promo="saved"] .bf-if-off { display: none; }
.bf-narrow { display: none; }
.bf-nb { white-space: nowrap; }
.bf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* Hero */
.bf-hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.bf-hero__media { position: absolute; top: 0; bottom: 0; left: 100px; right: -100px; }
.bf-hero__media picture { display: block; height: 100%; }
.bf-hero__media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: right top; }
.bf-hero__shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, #0A0A0C 0%, rgba(10, 10, 12, 0.94) 30%, rgba(10, 10, 12, 0.4) 62%, rgba(10, 10, 12, 0) 100%); }
.bf-hero__inner { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: clamp(540px, 45.8vw, 660px); padding-top: 56px; padding-bottom: 56px; }
.bf-hero__copy { position: relative; max-width: 720px; display: flex; flex-direction: column; align-items: flex-start; }
.bf-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bf-canada { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 9999px; color: #fff; font: 700 13px/18px var(--head); letter-spacing: 0.08em; white-space: nowrap; }
.bf-canada .i { width: 16px; height: 16px; }
/* The logo's maple leaf, large and faint behind the headline. */
.bf-hero__leaf { position: absolute; left: -70px; top: 50%; width: 620px; height: 700px; transform: translateY(-50%) rotate(-8deg); fill: rgba(255, 0, 0, 0.07); pointer-events: none; }
.bf-tag { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 9999px; background: #fff; color: var(--ink); font: 700 13px/18px var(--head); letter-spacing: 0.08em; white-space: nowrap; }
.bf-hero h1 { margin: 22px 0 0; font: 800 clamp(60px, 6.95vw, 100px)/0.98 var(--head); letter-spacing: -0.005em; text-transform: uppercase; color: #fff; }
.bf-hero__ship { margin: 18px 0 0; font: 800 clamp(18px, 1.8vw, 26px)/1.2 var(--head); color: var(--sky); text-transform: uppercase; }
.bf-hero__sub { margin: 16px 0 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--soft); }
.bf-coderow { margin-top: 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bf-code { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border: 0; border-radius: 9999px; background: var(--blue); color: #fff; font: 700 18px/1 var(--head); white-space: nowrap; cursor: pointer; transition: background 0.15s ease; }
.bf-code small { font-weight: 600; font-size: 12px; letter-spacing: 0.12em; }
.bf-code b { font-weight: 700; letter-spacing: 0.04em; }
.bf-code .bf-code__check { display: none; color: var(--blue); stroke-width: 2.75; }
html[data-te-promo="applied"] .bf-code, html[data-te-promo="saved"] .bf-code { background: #fff; color: var(--ink); cursor: default; }
html[data-te-promo="applied"] .bf-code small, html[data-te-promo="saved"] .bf-code small,
html[data-te-promo="applied"] .bf-code .bf-code__copy, html[data-te-promo="saved"] .bf-code .bf-code__copy { display: none; }
html[data-te-promo="applied"] .bf-code .bf-code__check, html[data-te-promo="saved"] .bf-code .bf-code__check { display: block; }
.bf-code.is-busy { opacity: 0.6; pointer-events: none; }
.bf-note { font-size: 14px; line-height: 20px; color: var(--soft); }
.bf-ctas { margin-top: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 30px; border-radius: 9999px; font: 700 17px/1 var(--head); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.bf-btn--white, .bf-btn--white:hover, .bf-btn--white:focus { background: #fff; color: var(--ink); }
.bf-btn--ghost, .bf-btn--ghost:hover, .bf-btn--ghost:focus { border: 2px solid rgba(255, 255, 255, 0.7); color: #fff; }

/* Best sellers */
.bf-sec { padding: 72px 0; background: #fff; scroll-margin-top: 190px; }
.bf-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.bf-h2 { margin: 0; font: 800 36px/1.15 var(--head); letter-spacing: -0.01em; color: var(--ink); }
.bf-sub { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--body); }
.bf-link, .bf-link:hover, .bf-link:focus { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: -10px; font-weight: 700; font-size: 15px; color: var(--blue); white-space: nowrap; }
.bf-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.bf-card, .bf-card:hover, .bf-card:focus { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: var(--ink); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.bf-card__well { position: relative; height: 240px; padding: 20px; background: var(--well); }
.bf-card__well img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.bf-badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 9999px; background: var(--ink); color: #fff; font: 700 12px/16px var(--head); letter-spacing: 0.06em; }
.bf-card__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 16px; }
.bf-card__name { margin: 0; font: 600 16px/22px var(--head); color: var(--ink); }
.bf-card__meta { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.bf-card__from { margin: auto 0 0; padding-top: 14px; font-size: 14px; line-height: 20px; color: var(--muted); }
.bf-card__from s { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bf-card__price { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bf-card__price b { font: 800 26px/32px var(--head); color: var(--ink); }
.bf-card__price span { font-weight: 700; font-size: 13px; color: var(--blue); }
.bf-card__note { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.bf-tile, .bf-tile:hover, .bf-tile:focus { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px; border-radius: 12px; background: var(--ink); color: #fff; }
.bf-tile h3 { margin: 0; font: 800 28px/1.15 var(--head); letter-spacing: -0.01em; color: #fff; }
.bf-tile p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--soft); }
.bf-tile__go { align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 9999px; background: #fff; color: var(--ink); font: 700 15px/1 var(--head); white-space: nowrap; transition: background 0.15s ease; }

/* Gifts */
.bf-gifts { background: var(--ink); padding: 80px 0; color: #fff; }
.bf-gifts .bf-h2 { font-size: 40px; color: #fff; }
.bf-gifts .bf-sub { margin-top: 10px; font-size: 17px; color: var(--soft); }
.bf-gifts__row { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bf-gift, .bf-gift:hover, .bf-gift:focus { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; height: 480px; border-radius: 16px; background: var(--panel); color: #fff; }
.bf-gift__media { position: absolute; left: 0; right: 0; bottom: 0; top: var(--shift, 0px); }
.bf-gift__media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, center); transition: transform 0.4s ease; }
.bf-gift__shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(10, 10, 12, 0) 48%, rgba(10, 10, 12, 0.92) 63%, rgba(10, 10, 12, 0.97) 100%); }
.bf-gift__text { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 28px; }
.bf-gift__kicker { font: 700 12px/16px var(--head); letter-spacing: 0.1em; color: var(--sky); }
.bf-gift h3 { margin: 10px 0 0; font: 800 26px/1.15 var(--head); color: #fff; }
.bf-gift p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--soft); }
.bf-gift__go { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font: 700 15px/22px var(--head); }

/* Christmas order-by dates: the first thing under the hero (owner, 2026-11-09) */
.bf-dates { background: var(--blue); padding: 22px 0; color: #fff; scroll-margin-top: 190px; }
.bf-dates__row { display: flex; align-items: center; gap: 32px; }
.bf-dates__head { flex: 0 0 320px; display: flex; align-items: center; gap: 14px; }
.bf-dates__head .i { color: #fff; }
.bf-dates__title { margin: 0; font: 800 24px/1.18 var(--head); letter-spacing: -0.005em; color: #fff; }
.bf-dates__grid { flex: 1 1 auto; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bf-date { min-width: 0; padding: 12px 16px; border-radius: 10px; background: #fff; display: flex; flex-direction: column; gap: 2px; }
.bf-date span { font-weight: 600; font-size: 13px; line-height: 18px; color: var(--body); }
.bf-date b { font: 800 22px/28px var(--head); color: var(--ink); white-space: nowrap; }
.bf-date.is-past { background: rgba(255, 255, 255, 0.72); }
.bf-date.is-past b { color: var(--muted); font-weight: 600; }
.bf-date.is-past em { font-style: normal; font-weight: 600; font-size: 12px; line-height: 16px; color: var(--body); }
.bf-dates__rush { margin: 14px 0 0; display: flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: 14px; line-height: 1.5; color: #fff; }
.bf-dates__rush .i { margin-top: 2px; }

/* One short bar: Canadian owned, shipping, rush, reviews, email (owner, 2026-11-09) */
.bf-perks { background: var(--ink); color: #fff; }
.bf-perks ul { list-style: none; margin: 0 auto; padding-top: 16px; padding-bottom: 16px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14px; line-height: 20px; }
.bf-perks li { display: flex; align-items: center; gap: 10px; padding: 2px 16px; white-space: nowrap; }
.bf-perks li + li { border-left: 1px solid var(--hair); }
.bf-perks li:first-child { padding-left: 0; }
.bf-perks li:last-child { padding-right: 0; }
.bf-perks .i { color: var(--sky); }
.bf-perks .i--leaf { color: #ff0000; }
.bf-perks a, .bf-perks a:hover, .bf-perks a:focus { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bf-perks a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

/* Product page: the block under the price, the dates and the crossed-out price */
.bf-pdp-was { color: #6b7280; font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bf-pdp { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: 14px; background: var(--ink); color: #fff; }
.bf-pdp p { margin: 0; }
.bf-pdp__top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.bf-pdp .bf-tag { padding: 4px 10px; font-size: 12px; line-height: 16px; }
.bf-pdp__when { font: 600 13px/18px var(--head); color: var(--label); }
.bf-pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.bf-pdp__price b { font: 800 34px/40px var(--head); letter-spacing: -0.01em; color: #fff; white-space: nowrap; }
.bf-pdp__price > span { font: 700 15px/20px var(--head); color: var(--sky); white-space: nowrap; }
.bf-pdp__blank { font-size: 13px; line-height: 18px; color: var(--soft); }
.bf-pdp__offer { font-size: 14px; line-height: 20px; color: var(--soft); }
.bf-pdp__row { margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.bf-pdp .bf-code { height: 48px; padding: 0 18px; font-size: 16px; gap: 8px; }
.bf-pdp-dates { padding: 14px 16px; border-radius: 12px; background: var(--blue); color: #fff; }
.bf-pdp-dates__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bf-pdp-dates__title { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 15px/20px var(--head); color: #fff; }
.bf-pdp-dates__all, .bf-pdp-dates__all:hover, .bf-pdp-dates__all:focus { flex: none; display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; font-size: 13px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bf-pdp-dates ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bf-pdp-dates li { min-width: 0; padding: 8px 12px; border-radius: 8px; background: #fff; display: flex; flex-direction: column; }
.bf-pdp-dates li span { font-weight: 600; font-size: 12px; line-height: 16px; color: var(--body); }
.bf-pdp-dates li b { font: 800 16px/22px var(--head); color: var(--ink); white-space: nowrap; }
.bf-pdp-dates__rush { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; line-height: 20px; color: #fff; }
.bf-pdp-more { padding: 56px 0; }
.bf-pdp-more .bf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bf-psb-price { color: #0f172a; font-weight: 800; font-size: 13px; }

/* Cart and checkout: state comes from the cart itself, on the server */
.bf-saved, .bf-prompt { border-radius: 16px; background: var(--ink); color: #fff; margin-bottom: 16px; }
.bf-saved p, .bf-prompt p, .bf-sumcap p { margin: 0; }
.bf-saved { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 0 12px; padding: 16px 18px; }
.bf-saved__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; }
.bf-saved .i--20 { width: 20px; height: 20px; stroke-width: 2.75; }
.bf-saved .i--16 { width: 16px; height: 16px; }
p.bf-saved__h { font: 700 16px/1.3 var(--head); color: #fff; }
p.bf-saved__s { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--label); }
.bf-saved__side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
p.bf-saved__ship, p.bf-saved__last { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--sky); white-space: nowrap; }
p.bf-saved__last { color: #fff; }
.bf-prompt { display: grid; gap: 16px; padding: 18px; }
.bf-prompt__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bf-prompt .bf-tag { padding: 4px 10px; font-size: 12px; line-height: 16px; }
.bf-prompt__when { font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--sky); }
p.bf-prompt__h { margin-top: 14px; font: 800 24px/1.2 var(--head); letter-spacing: -0.01em; color: #fff; }
p.bf-prompt__s { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--label); }
.bf-prompt__s b { font-weight: 700; color: #fff; }
.bf-prompt__btn { width: 100%; height: 52px; border: 0; cursor: pointer; }
.bf-cart-dates { margin: 16px 0; }
.bf-sumcap { padding: 16px 20px; background: var(--ink); color: #fff; }
.bf-sumcap__on { display: none; align-items: center; gap: 12px; }
.bf-sumcap.is-on .bf-sumcap__on { display: flex; }
.bf-sumcap.is-on .bf-sumcap__off { display: none; }
.bf-sumcap__tick { flex: none; width: 36px; height: 36px; border-radius: 9999px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.bf-sumcap .i--20 { width: 20px; height: 20px; stroke-width: 2.75; }
.bf-sumcap__on p { min-width: 0; display: flex; flex-direction: column; }
.bf-sumcap__on strong { font: 700 16px/22px var(--head); color: #fff; }
.bf-sumcap__on p > span { font-size: 14px; line-height: 20px; color: var(--label); }
.bf-sumcap__off { display: flex; flex-direction: column; align-items: flex-start; }
.bf-sumcap .bf-tag { padding: 4px 10px; font-size: 12px; line-height: 16px; }
p.bf-sumcap__title { margin: 10px 0 0; font: 800 22px/1.2 var(--head); letter-spacing: -0.01em; color: #fff; }
p.bf-sumcap__text { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--soft); }
.bf-sumcap__text b { font-weight: 700; color: #fff; }
.bf-sumcap__btn { width: 100%; height: 48px; margin-top: 14px; border: 0; font-size: 15px; cursor: pointer; }
p.bf-sumcap__err { margin-top: 8px; font-size: 13px; line-height: 18px; color: #fff; }
p.bf-sumcap__err:empty { display: none; }

/* Closing band */
.bf-end { background: var(--ink); padding: 72px 0; color: #fff; }
.bf-end__row { display: flex; align-items: center; justify-content: space-between; gap: 28px 40px; flex-wrap: wrap; }
.bf-end h2 { margin: 0; font: 800 clamp(40px, 4.2vw, 56px)/1 var(--head); letter-spacing: -0.005em; text-transform: uppercase; color: #fff; }
.bf-end__ship { margin: 14px 0 0; font: 700 20px/1.3 var(--head); color: var(--sky); }
.bf-end__act { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bf-end__btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bf-end .bf-btn { height: 52px; padding: 0 28px; }
.bf-end__foot { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 20px; color: var(--soft); }

/* Team and staff orders: the printed price of 24 pieces, under the best sellers
   (owner, 2026-11-11). A grey band so it reads apart from the white cards above. */
.bf-teams { padding: 64px 0; background: var(--well); }
.bf-teams__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 48px; align-items: center; }
.bf-teams__kicker { margin: 0 0 10px; font: 700 12px/16px var(--head); letter-spacing: 0.1em; color: var(--blue); }
.bf-teams .bf-sub { margin-top: 12px; }
.bf-teams__more { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--body); }
.bf-teams .bf-link { margin: 14px 0 0; }
.bf-teams__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bf-team, .bf-team:hover, .bf-team:focus { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: var(--ink); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.bf-team__well { height: 168px; padding: 16px; border-bottom: 1px solid var(--line); }
.bf-team__well img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.bf-team__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 14px 16px 16px; }
.bf-team__name { margin: 0; font: 600 16px/22px var(--head); color: var(--ink); }
.bf-team__meta { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.bf-team__from { margin: auto 0 0; padding-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted); }
.bf-team__from s { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bf-team__price { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bf-team__price b { font: 800 26px/32px var(--head); color: var(--ink); }
.bf-team__price > span { font-weight: 700; font-size: 13px; color: var(--blue); }

/* Catalogue page (/products), where the hero's "Shop the sale" lands (owner,
   2026-11-11): the blue header turns black and states the offer, and each
   category tile gains its lowest blank price with the code. */
.bf-cat-hero.products-hero-v2 { padding: 40px 0 44px; background: var(--ink); }
.bf-cat-hero__tags { margin: 0 0 16px; }
.bf-cat-hero h1 { font-family: var(--head); color: #fff; }
.bf-cat-hero p.bf-cat-hero__offer { margin: 14px auto 0; max-width: none; font: 800 22px/1.25 var(--head); text-transform: uppercase; color: var(--sky); }
.bf-cat-hero p.bf-cat-hero__sub { margin: 10px auto 0; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--soft); }
.bf-cat-price { margin: 0 0 2px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; line-height: 20px; color: var(--muted); }
.bf-cat-price s { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.bf-cat-price b { font: 800 22px/28px var(--head); color: var(--ink); }
.bf-cat-price > span { font-weight: 700; font-size: 13px; color: var(--blue); }
.bf-cat-note { margin: 0 0 12px; font-size: 12px; line-height: 16px; color: var(--muted); }

/* Trust explainers (owner, 2026-11-11): the site's tooltip engine in the sale's
   skin, a white card that reads on the black hero, the blue dates and the black
   bar. Wording lives in views/home/_bf2026-tips.php. Desktop pointers only: the
   engine never runs on touch screens, so phones see no change. */
#te-tt[data-skin="bf"] { max-width: 300px; padding: 14px 16px 15px; border-radius: 12px; background: #fff; color: #374151; font: 500 13.5px/1.5 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; letter-spacing: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(10, 10, 12, 0.08); }
#te-tt[data-skin="bf"] strong { margin: 0 0 5px; color: #1776C8; font: 800 11px/16px 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif; letter-spacing: 0.09em; }
#te-tt[data-skin="bf"]::after { border-width: 7px; }
#te-tt[data-skin="bf"].te-tt-top::after, #te-tt[data-skin="bf"].te-tt-bottom::after { left: clamp(18px, var(--tett-arrow-x, 50%), calc(100% - 18px)); margin-left: -7px; }
#te-tt[data-skin="bf"].te-tt-top::after { border-top-color: #fff; }
#te-tt[data-skin="bf"].te-tt-bottom::after { border-bottom-color: #fff; }
@media (hover: hover) and (pointer: fine) {
    .bf-hero [data-tooltip], .bf-dates [data-tooltip], .bf-perks [data-tooltip] { cursor: help; }
    .bf-hero a[data-tooltip], .bf-perks [data-tooltip] a { cursor: pointer; }
    .bf-tip { text-decoration: underline dotted transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color 0.15s ease; }
    .bf-tip:hover { text-decoration-color: currentColor; }
    .bf-canada[data-tooltip] { transition: border-color 0.15s ease, background-color 0.15s ease; }
    .bf-canada[data-tooltip]:hover { border-color: #fff; background-color: rgba(255, 255, 255, 0.1); }
    .bf-dates__head[data-tooltip]:hover .bf-dates__title { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 5px; }
    .bf-date[data-tooltip] { transition: transform 0.18s ease, box-shadow 0.18s ease; }
    .bf-date[data-tooltip]:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22); }
    .bf-perks li[data-tooltip] > span { text-decoration: underline dotted transparent; text-underline-offset: 5px; transition: text-decoration-color 0.15s ease; }
    .bf-perks li[data-tooltip]:hover > span { text-decoration-color: rgba(255, 255, 255, 0.7); }
}

@media (min-width: 768px) {
    .bf-saved { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 16px 22px; }
    .bf-saved__side { grid-column: auto; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 6px; margin: 0; padding: 2px 0 2px 22px; border-top: 0; border-left: 1px solid var(--hair); }
    .bf-prompt { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 22px 24px; }
    p.bf-prompt__h { font-size: 26px; }
    .bf-prompt__btn { width: auto; height: 56px; padding: 0 34px; }
}

@media (hover: hover) {
    .bf-code:hover { background: var(--blue-dark); }
    html[data-te-promo="applied"] .bf-code:hover, html[data-te-promo="saved"] .bf-code:hover { background: #fff; }
    .bf-btn--white:hover, .bf-tile:hover .bf-tile__go { background: var(--label); }
    .bf-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
    .bf-card:hover { transform: translateY(-4px); border-color: #cbd5e1; box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1); }
    .bf-team:hover { transform: translateY(-4px); border-color: #cbd5e1; box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1); }
    .bf-gift:hover .bf-gift__media img { transform: scale(1.03); }
    .bf-gift:hover .bf-gift__go, .bf-link:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* The five items stop fitting one line before the tablet layout. */
@media (max-width: 1200px) {
    .bf-perks ul { flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
    .bf-perks li, .bf-perks li + li, .bf-perks li:first-child, .bf-perks li:last-child { padding: 0; border: 0; }
}

@media (max-width: 1100px) {
    .bf-dates__row { flex-direction: column; align-items: stretch; gap: 14px; }
    .bf-dates__head { flex: none; }
}

@media (max-width: 1023px) {
    .bf-teams__row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .bf-wide { display: none; }
    .bf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .bf-tile { grid-column: span 2; }
    .bf-hero__media { left: 220px; right: -140px; }
    .bf-hero__shade { background: linear-gradient(90deg, #0A0A0C 0%, rgba(10, 10, 12, 0.96) 42%, rgba(10, 10, 12, 0.68) 68%, rgba(10, 10, 12, 0.1) 100%); }
    .bf-hero__sub { max-width: 380px; }
    .bf-gifts__row { gap: 16px; }
    .bf-gift h3 { font-size: 22px; }
    .bf-gift h3 br { display: none; }
    .bf-gift__text { padding: 22px; }
}

@media (max-width: 767px) {
    .bf-teams { padding: 44px 0; }
    .bf-teams__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .bf-team, .bf-team:hover, .bf-team:focus { flex-direction: row; }
    .bf-team__well { flex: 0 0 104px; height: auto; min-height: 116px; padding: 10px; border-bottom: 0; border-right: 1px solid var(--line); }
    .bf-team__body { padding: 12px 14px; }
    .bf-team__from { padding-top: 6px; }
    .bf-team__price b { font-size: 22px; line-height: 28px; }
    .bf-cat-hero.products-hero-v2 { padding: 28px 0 30px; }
    .bf-cat-hero p.bf-cat-hero__offer { font-size: 18px; }
    .bf-cat-hero p.bf-cat-hero__sub { font-size: 14px; }
    .bf-wrap { padding-left: 20px; padding-right: 20px; }
    .bf-narrow { display: inline; }

    .bf-hero { display: flex; flex-direction: column; }
    .bf-hero__inner { order: 1; width: 100%; min-height: 0; padding-top: 24px; padding-bottom: 0; overflow: hidden; }
    /* Phone photo starts at the gift box, not the wall above it (owner, 2026-11-09). */
    .bf-hero__media { order: 2; position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 100%; height: min(90vw, 440px); margin-top: 10px; overflow: hidden; }
    .bf-hero__media::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(180deg, #0A0A0C 0%, rgba(10, 10, 12, 0.5) 6%, rgba(10, 10, 12, 0) 15%); }
    .bf-hero__media img { width: 108%; margin-left: -4%; object-position: center 70%; }
    .bf-hero__shade { display: none; }
    .bf-hero__leaf { left: auto; right: -120px; top: 40px; width: 340px; height: 385px; transform: rotate(8deg); }
    .bf-tag { padding: 5px 12px; font-size: 12px; }
    .bf-canada { padding: 4px 12px; font-size: 12px; }
    .bf-hero h1 { margin-top: 16px; font-size: clamp(40px, 12.4vw, 64px); }
    .bf-hero__ship { margin-top: 12px; font-size: 17px; text-wrap: balance; }
    .bf-hero__sub { margin-top: 10px; font-size: 15px; line-height: 1.5; }
    .bf-coderow { margin-top: 20px; gap: 8px 14px; }
    .bf-note { font-size: 13px; }
    .bf-ctas { margin-top: 18px; gap: 10px; width: 100%; flex-wrap: nowrap; }
    .bf-ctas .bf-btn { flex: 1 1 0; height: 52px; padding: 0 12px; font-size: 15px; }

    .bf-sec { padding: 44px 0; scroll-margin-top: 130px; }
    .bf-sec__head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .bf-h2 { font-size: 26px; }
    .bf-sub { font-size: 15px; }
    .bf-link, .bf-link:hover, .bf-link:focus { margin-bottom: 0; }
    .bf-grid { margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .bf-card--extra { display: none; }
    .bf-card__well { height: 150px; padding: 14px; }
    .bf-badge { top: 8px; left: 8px; padding: 4px 8px; font-size: 10.5px; line-height: 14px; }
    .bf-card__body { padding: 12px; }
    .bf-card__name { font-size: 14px; line-height: 19px; }
    .bf-card__meta { font-size: 12px; line-height: 17px; }
    .bf-card__from { padding-top: 10px; font-size: 13px; line-height: 18px; }
    /* The label sits under the price so every card in a row matches. */
    .bf-card__price { flex-direction: column; gap: 0; }
    .bf-card__price b { font-size: 20px; line-height: 26px; }
    .bf-card__price span { font-size: 12px; line-height: 16px; }
    .bf-card__note { font-size: 11.5px; line-height: 15px; }
    .bf-tile, .bf-tile:hover, .bf-tile:focus { grid-column: span 2; flex-direction: row; align-items: center; gap: 12px; padding: 18px; }
    .bf-tile > div { min-width: 0; }
    .bf-tile h3 { font-size: 20px; }
    .bf-tile p { margin-top: 4px; font-size: 13px; line-height: 1.4; }
    .bf-tile__go { align-self: center; flex: none; height: 44px; padding: 0 16px; font-size: 14px; }

    .bf-gifts { padding: 48px 0; }
    .bf-gifts .bf-h2 { font-size: 28px; }
    .bf-gifts .bf-sub { font-size: 15px; }
    .bf-gifts__row { margin: 22px -20px 0; padding: 0 20px 4px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .bf-gifts__row::-webkit-scrollbar { display: none; }
    .bf-gift, .bf-gift:hover, .bf-gift:focus { flex: 0 0 min(80vw, 320px); height: 420px; scroll-snap-align: start; }
    .bf-gift__media { top: calc(var(--shift, 0px) * 0.875); }
    .bf-gift h3 { font-size: 24px; }
    .bf-gift h3 br { display: inline; }

    .bf-dates { padding: 20px 0; scroll-margin-top: 130px; }
    .bf-dates__head { align-items: flex-start; gap: 10px; }
    .bf-dates__head .i--28 { width: 24px; height: 24px; margin-top: 1px; }
    .bf-dates__title { font-size: 20px; }
    .bf-dates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bf-date { padding: 10px 12px; }
    .bf-date span { font-size: 12.5px; line-height: 17px; }
    .bf-date b { font-size: 18px; line-height: 24px; }
    .bf-dates__rush { margin-top: 12px; gap: 8px; font-size: 13px; }

    .bf-perks ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding-top: 16px; padding-bottom: 16px; font-size: 13px; line-height: 18px; }
    .bf-perks li, .bf-perks li + li { gap: 8px; white-space: normal; }
    .bf-perks li:last-child { grid-column: span 2; }
    .bf-perks .i--22 { width: 18px; height: 18px; }

    /* Phones: compact, so Start Designing stays on the first screen (owner, 2026-09-27). */
    .bf-pdp { position: relative; padding: 12px 14px; gap: 4px; }
    .bf-pdp:not(.bf-pdp--last) .bf-pdp__top { position: absolute; top: 18px; right: 14px; }
    .bf-pdp:not(.bf-pdp--last) .bf-pdp__when { display: none; }
    .bf-wide-only { display: none; }
    .bf-pdp__price b { font-size: 30px; line-height: 36px; }
    .bf-pdp__offer { display: none; }
    .bf-pdp .bf-note { display: none; }
    .bf-pdp__row { margin-top: 4px; gap: 6px 12px; }
    .bf-pdp .bf-code { height: 44px; }
    .bf-pdp-more { padding: 40px 0; }
    .bf-pdp-more .bf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .bf-end { padding: 48px 0; }
    .bf-end h2 { font-size: clamp(40px, 12.4vw, 64px); }
    .bf-end__ship { margin-top: 10px; font-size: 16px; }
    .bf-end__act, .bf-end__btns { width: 100%; }
    .bf-end__btns { flex-direction: column; align-items: stretch; gap: 10px; }
    .bf-end__btns .bf-code { justify-content: center; }
    .bf-end__foot { margin-top: 28px; padding-top: 18px; font-size: 13px; }
}

@media (max-width: 560px) {
    .bf-hero__media img { width: 124%; margin-left: -12%; object-position: center 80%; }
}

/* One line for the price, badge and rating on normal phones during the sale. */
@media (max-width: 430px) {
    .bf-pdp-line { font-size: 14px !important; }
}

/* The smallest phones in use: nothing may push the page sideways. */
@media (max-width: 359px) {
    .bf-pdp__top { display: none; }
    .bf-pdp--last .bf-pdp__top { display: flex; }
    .bf-code { padding: 0 16px; font-size: 16px; gap: 8px; }
    .bf-code small { display: none; }
    .bf-ctas { flex-wrap: wrap; }
    .bf-ctas .bf-btn { flex: 1 1 100%; }
    .bf-tile, .bf-tile:hover, .bf-tile:focus { flex-direction: column; align-items: flex-start; }
    .bf-tile__go { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .bf-code, .bf-btn, .bf-card, .bf-team, .bf-tile__go, .bf-gift__media img, .bf-tip, .bf-canada[data-tooltip], .bf-date[data-tooltip], .bf-perks li[data-tooltip] > span { transition: none; }
    .bf-date[data-tooltip]:hover { transform: none; }
}