/* * bf-cart.css — BLACK FRIDAY CART (side-cart drawer) * Figma: Ex10uQ9OY3OuzSPi4g2hPb, section 14715:37784 (v2, the designer's post-handover update). * Spec: docs/figma/black-friday-cart-v2/SPEC.md (v1 14702:48246 is history only). * * Loaded after sidecart.css + mulberry.css, only while da_bf_enabled() (includes/woocommerce/ * da-bf-cart.php). Every rule is scoped to `#sidecart.bf`, so the legacy drawer is untouched * when the programme is off. Measurements are the Figma 390px drawer. DESKTOP TYPE = MOBILE * TYPE (v2): the desktop drawer only changes width (400/440/520) and the content gutter * (16/20/24); see the DESKTOP block at the end, which also beats sidecart.css's >=992 bump. * * v2 type ramp (Founders Grotesk 400 / Canela 300 / English 1766 300 italic, no 500 anywhere): * 12 -> 14/16, 14 -> 16/18, 9.5 -> 12/14, plan term 13/16, loose 19px line-heights -> size + 2, * header + block titles 21/24, impact numbers 28/30.8. */ #sidecart.bf { --bf-chip: #D8DDCA; --bf-track: #1E322C; --bf-trash: #C3BEB9; --bf-trash-ring: #AFAAA5; --bf-metal-white: #D0D0D0; --bf-metal-yellow: #DCB84E; --bf-metal-rose: #E9C1B1; --bf-affirm: #4A4AF4; --bf-ink: #202020; --bf-placeholder: #797978; --bf-strike: rgba(62, 60, 57, .7); --bf-ease: cubic-bezier(0, 0, .58, 1); /* Figma EASE_OUT (every prototype link) */ background: var(--pearl); } /* Below 992 the drawer IS the screen (Figma 390 frames have no stroke): drop the legacy 1px onyx edge, which drew a dark line down the left and pushed every BF part 1px right. The 448px desktop panel keeps it, as it separates the drawer from the page behind. */ @media (max-width: 991.98px) { #sidecart.bf { border-left: 0; } } #sidecart.bf p { margin: 0; } /* ============================================================= * * C1 HEADER (14702:48542) — 48 tall in the bag, 42 when empty * ============================================================= */ #sidecart.bf .sidecart_header { position: sticky; top: 0; z-index: 20; } #sidecart.bf .dac_titlebar { min-height: 48px; height: 48px; box-sizing: border-box; padding: 2px 16px; border: 0; } #sidecart.bf:has(.sidecart_cart .dac_empty:not(.bf-dissolve-out *)) .dac_titlebar { min-height: 42px; height: 42px; } /* v2 38057: CA 21/24. The bar centres the line box, and half-leading is symmetric, so the glyphs sit where they did at lh 30; top:3px keeps them on the Figma cap-top in 48 / 42. */ #sidecart.bf h2.sidecart_title:not(.rb-cart-title) { position: relative; top: 3px; font-family: 'Canela', serif; font-weight: 300; font-size: 21px; line-height: 24px; letter-spacing: -0.21px; color: var(--pearl); text-transform: uppercase; white-space: pre; } #sidecart.bf .cart_close { top: calc(50% - 9px); right: 16px; transform: none; width: 13.66px; height: 14px; line-height: 0; } #sidecart.bf .cart_close svg { width: 13.66px; height: 14px; overflow: visible; } #sidecart.bf .cart_close svg path { fill: var(--pearl); } /* C2 water strip — empty bag only (Frame 39161) */ #sidecart.bf .dac_promise { display: none; } #sidecart.bf:has(.sidecart_cart .dac_empty:not(.bf-dissolve-out *)) .dac_promise { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 48px; padding: 5px 29px; background: var(--pearl); /* 0.5px hairline: a .5px border computes to 1px, so draw it as an inset shadow. */ border-bottom: 0; box-shadow: inset 0 -0.5px 0 var(--cognac); } #sidecart.bf .dac_promise_icon svg { width: 23.68px; height: 31px; } #sidecart.bf .dac_promise p { width: 297px; max-width: 100%; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px !important; line-height: 16px !important; letter-spacing: -0.21px; color: var(--cognac); } /* body column: the gifts bar starts 8px UNDER the header (header is drawn over it) */ #sidecart.bf .sidecart_content { padding: 0; gap: 0; } #sidecart.bf .sidecart_cart, #sidecart.bf .cart_contents { gap: 0; } /* ============================================================= * * C3 EMPTY STATE (14702:48249) * ============================================================= */ #sidecart.bf .dac_empty.bf-empty { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 36px 28px 111px; text-align: center; } #sidecart.bf .bf-empty .dac_empty_icon svg { width: 46px; height: 56px; display: block; } #sidecart.bf .bf-empty-copy { display: flex; flex-direction: column; gap: 14px; width: 334px; max-width: 100%; } #sidecart.bf .bf-empty .dac_empty_title { margin: 0; font-family: 'English1766', serif; font-style: italic; font-weight: 300; font-size: 28px; line-height: 30px; letter-spacing: -0.21px; text-transform: lowercase; color: var(--bf-ink); } #sidecart.bf .bf-empty .dac_empty_text { margin: 0; max-width: none; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 16px; line-height: 18px; letter-spacing: -0.21px; color: var(--bf-ink); } /* Figma tile grid from x28: 163 + 10 + 162 (Rectangle 57/223 right edge x363), 1px past the 28px right pad. */ #sidecart.bf .bf-empty .dac_empty_tiles { gap: 10px; width: calc(100% + 1px); margin-right: -1px; grid-template-columns: minmax(0, 163fr) minmax(0, 162fr); } #sidecart.bf .bf-empty .dac_tile { aspect-ratio: 163 / 177; min-width: 0; padding: 0 0 11px; border-radius: 4px; background-size: cover; background-position: center; } /* Right column is 162 wide but shares the row's 177 height (left tile sets it). */ #sidecart.bf .bf-empty .dac_tile:nth-child(even) { aspect-ratio: auto; align-self: stretch; } /* Bottom-row labels (48294/48296) sit 6px above the tile bottom; the top row 11px. */ #sidecart.bf .bf-empty .dac_tile:nth-child(n+3) { padding-bottom: 6px; } /* The bag-*.webp tile exports already carry each tile's Figma gradient (37825/26/29/30), so no second CSS darkening layer (it doubled the bottom shade on WOMEN'S / MEN'S BANDS). */ #sidecart.bf .bf-empty .dac_tile::before { background: none; } #sidecart.bf .bf-empty .dac_tile_title { font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 16px !important; line-height: 18px; letter-spacing: -0.5px; text-transform: none; color: #fff; white-space: nowrap; } /* ============================================================= * * C4 GIFTS BAR (14702:49779) + C5 PRICE CHIP (14702:48830) * ============================================================= */ /* v2 38803: directly under the header (no -8px tuck), scrolls away with the body. */ #sidecart.bf .bf-gifts-bar { position: relative; z-index: 1; box-sizing: border-box; height: 200px; margin-top: 0; padding: 18px 32px; display: flex; flex-direction: column; align-items: center; gap: 20px; background: var(--jade); } #sidecart.bf .bf-bar-headline { width: 100%; text-align: center; font-family: 'English1766', serif; font-style: italic; font-weight: 300; font-size: 18px; line-height: 15px; letter-spacing: -0.21px; color: var(--tourmaline); } /* v2: the freebies row is a FIXED 358 wide and centred at every drawer width (390/400/440/520). */ #sidecart.bf .bf-freebies { position: relative; flex: 0 0 115px; width: 358px; max-width: none; margin: 0; align-self: center; height: 115px; } /* wider than the 326 content box at 390: flex centring overflows it equally into the 32px pads */ /* One continuous 358x4 #1E322C track under the (opaque) circles. */ #sidecart.bf .bf-track { position: absolute; left: 0; right: 0; top: 21px; height: 4px; border-radius: 26px; background: var(--bf-track); } /* Live width in px from da_bf_fill_px() (note 39333); tween: bf-cart.js smart animate. */ #sidecart.bf .bf-fill { position: absolute; left: 0; top: 0; height: 4px; max-width: 100%; border-radius: 26px; background: var(--citrine); } /* Columns: col 1 fixed 95, cols 2-3 hug (Figma 97 / 101) -> circle centres 47.5 / 176 / 307.5. */ #sidecart.bf .bf-tiers { position: absolute; z-index: 1; left: 0; right: 0; top: 2px; height: 115px; display: flex; justify-content: space-between; } /* Free gifts switched off: tier 1 alone, at the goal end of the track (circle 284.5-336.5, da_bf_fill_px_single()). */ #sidecart.bf .bf-gifts-bar--single .bf-tiers { justify-content: flex-end; } #sidecart.bf .bf-tier { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Opaque jade backing disc under each circle: a locked tier is 70% over the BAR colour (Figma 38933 = #ABAFA9 body / #21372F ring), never over the track or the citrine fill running beneath it. */ #sidecart.bf .bf-tier::before { content: ""; position: absolute; top: -1.5px; left: 50%; width: 55px; height: 55px; margin-left: -27.5px; border-radius: 50%; background: var(--jade); pointer-events: none; } #sidecart.bf .bf-tier-circle, #sidecart.bf .bf-tier-text { transition: opacity .3s var(--bf-ease); } #sidecart.bf .bf-tier--1 { width: 95px; } #sidecart.bf .bf-tier--2 { width: 97px; } #sidecart.bf .bf-tier--3 { width: 101px; } #sidecart.bf .bf-tier.is-locked .bf-tier-circle, #sidecart.bf .bf-tier.is-locked .bf-tier-text { opacity: .7; } #sidecart.bf .bf-tier-circle { position: relative; flex: 0 0 52px; width: 52px; height: 52px; } /* 3px CENTRE stroke on a 52 circle -> a 55 disc centred on it */ #sidecart.bf .bf-tier-circle::before { content: ""; position: absolute; inset: -1.5px; box-sizing: border-box; border-radius: 50%; background: var(--pearl-dark); border: 3px solid var(--bf-track); transition: border-color .3s var(--bf-ease); } #sidecart.bf .bf-tier.is-reached .bf-tier-circle::before { border-color: var(--citrine); } #sidecart.bf .bf-tier-icon { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; line-height: 0; } #sidecart.bf .bf-tier-icon svg { display: block; } #sidecart.bf .bf-tier-badge { position: absolute; z-index: 2; left: 31px; top: -3px; width: 21px; height: 21px; line-height: 0; } /* Figma 49794/49823/49838: the badge overhangs the circle's right edge by .5 / 1 / 1.5px. */ #sidecart.bf .bf-tier--1 .bf-tier-badge { left: 31.5px; } #sidecart.bf .bf-tier--2 .bf-tier-badge { left: 32px; } #sidecart.bf .bf-tier--3 .bf-tier-badge { left: 32.5px; } #sidecart.bf .bf-tier-badge svg { width: 21px; height: 21px; display: block; overflow: visible; } #sidecart.bf .bf-tier-text { display: flex; flex-direction: column; align-items: center; gap: 8px; } #sidecart.bf .bf-chip { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 8px; border-radius: 8px; background: transparent; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; color: rgba(228, 222, 216, .6); white-space: nowrap; transition: background-color .3s var(--bf-ease), color .3s var(--bf-ease); } #sidecart.bf .bf-chip--on { background: var(--bf-chip); color: var(--jade); } #sidecart.bf .bf-tier-titles { display: flex; flex-direction: column; align-items: center; } #sidecart.bf .bf-tier-title { font-family: 'Canela', serif; font-weight: 300; font-size: 18px; line-height: 19px; letter-spacing: -0.21px; color: var(--bf-chip); white-space: nowrap; text-align: center; } #sidecart.bf .bf-tier-sub { margin-top: 2px; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; color: var(--tourmaline); white-space: nowrap; } /* ============================================================= * * CART COLUMN + C7 LINE-ITEM BLOCKS * ============================================================= */ /* v2 (D8): CART pad 24 16 20 16 + the accordion's 10 pad-top = 30 from the last block to the first accordion line in every state (the auto-layout value of the tier-2 / desktop frames). */ #sidecart.bf .bf-cart-col { --bf-gutter: 16px; display: flex; flex-direction: column; gap: 36px; padding: 24px var(--bf-gutter) 20px; } #sidecart.bf .sidecart_cart .cart_products.bf-blocks { display: flex; flex-direction: column; gap: 36px; margin: 0; padding: 0; } #sidecart.bf .cart_products.bf-blocks:not(:has(.bf-block)) { display: none; } #sidecart.bf .bf-mirror { display: none !important; } #sidecart.bf .bf-block { display: flex; flex-direction: column; gap: 16px; } #sidecart.bf .bf-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; height: 20px; } #sidecart.bf .bf-block-title, #sidecart.bf .bf-section-title { font-family: 'Canela', serif; font-weight: 300; font-size: 21px; line-height: 24px; letter-spacing: -0.21px; color: var(--onyx); white-space: nowrap; overflow: visible; text-transform: none; /* v2 37999: CA 21/24, the 24px text box sits 2px above the 20px title row (y316 vs 318). The head row bottom-aligns it (box -4..20), so drop it 2px to -2..22. */ position: relative; top: 2px; } #sidecart.bf .bf-trash-wrap { position: static; flex: 0 0 20px; width: 20px; height: 20px; top: auto; right: auto; } #sidecart.bf .sidecart_cart .bf-trash, #sidecart.bf .bf-trash { display: block; width: 20px; height: 20px; padding: 0; margin: 0; border: 0; background: none; opacity: 1; font-size: 0; line-height: 0; color: inherit; cursor: pointer; } #sidecart.bf .bf-trash svg { width: 20px; height: 20px; max-width: none; display: block; } /* 40x40 tap target around the 20px glyph: 10px padding pulled back with -10px margin, so the icon stays exactly where the design puts it. Hover / press turns it onyx. */ #sidecart.bf .bf-trash-wrap { position: relative; } #sidecart.bf .sidecart_cart .bf-trash, #sidecart.bf .bf-trash { box-sizing: content-box; padding: 10px; margin: -10px; -webkit-tap-highlight-color: transparent; } #sidecart.bf .bf-trash svg path { transition: fill .15s var(--bf-ease); } #sidecart.bf .bf-trash:hover svg path, #sidecart.bf .bf-trash:active svg path, #sidecart.bf .bf-trash:focus-visible svg path { fill: var(--onyx); } #sidecart.bf .bf-block-items { display: flex; flex-direction: column; gap: 12px; } #sidecart.bf .bf-block--gift .bf-block-items { gap: 10px; } #sidecart.bf .bf-row { display: flex; gap: 12px; align-items: flex-start; } #sidecart.bf .bf-thumb { flex: 0 0 112px; width: 112px; height: 112px; border-radius: 4px; overflow: hidden; background: #fff; line-height: 0; } #sidecart.bf .bf-thumb a { display: block; width: 100%; height: 100%; } #sidecart.bf .bf-thumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } #sidecart.bf .bf-info { flex: 1 1 auto; min-width: 0; } #sidecart.bf .bf-name { font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 16px; line-height: 18px; letter-spacing: -0.21px; color: var(--onyx); } #sidecart.bf .bf-price { flex: 0 0 auto; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 16px; line-height: 18px; letter-spacing: -0.21px; color: var(--onyx); text-align: right; white-space: nowrap; } #sidecart.bf .bf-price--free { display: flex; flex-direction: column; align-items: flex-end; } #sidecart.bf .bf-price--free s { color: var(--bf-strike); text-decoration: line-through; } #sidecart.bf .bf-meta { font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; color: var(--onyx-light); white-space: pre-wrap; } /* simple product / gift / gift card: info pad 2 0, space-between; left column 192, gap 10 */ #sidecart.bf .bf-info--simple { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; } #sidecart.bf .bf-info-left { flex: 0 1 192px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 0; } #sidecart.bf .bf-info-left .bf-meta { max-width: 180px; } #sidecart.bf .bf-row--gc .bf-info--simple { padding: 0; } #sidecart.bf .bf-row--gc .bf-info-left { padding: 3px 0; } /* v2 38712/38713: the gift line's info column has a second 2px inset (name at block+40). */ #sidecart.bf .bf-gift-line .bf-info-left { padding-top: 2px; } /* Qty stepper (v2 37941-37947): "Qty:" 34 wide, then an 85x23 group -- minus at x0, the 50x23 box at x19, plus at x73 -- top-aligned in a 23px row. Each button is a 24px hit area whose 12px glyph sits exactly where the Figma draws it. */ #sidecart.bf .dac_qty.bf-qty { display: flex; align-items: flex-start; gap: 0; margin: 0; width: fit-content; height: 23px; } #sidecart.bf .bf-qty .dac_qty_label { flex: 0 0 34px; width: 34px; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px !important; line-height: 16px !important; letter-spacing: -0.21px; color: var(--bf-ink); white-space: nowrap; } #sidecart.bf .bf-qty-group { position: relative; flex: 0 0 85px; width: 85px; height: 23px; } #sidecart.bf .bf-qty .dac_qty_box { position: absolute; left: 19px; top: 0; box-sizing: border-box; width: 50px; height: 23px; padding: 2px 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--pearl-dark); border-radius: 4px; background: transparent; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; color: var(--bf-ink); } #sidecart.bf .bf-qty .dac_qty_btn { position: absolute; top: -0.5px; width: 24px; height: 24px; padding: 0; margin: 0; border: 0; background: none; opacity: 1; cursor: pointer; color: var(--citrine); line-height: 0; } #sidecart.bf .bf-qty .dac_qty_minus { left: -6px; } #sidecart.bf .bf-qty .dac_qty_plus { left: 67px; } #sidecart.bf .bf-qty .dac_qty_btn:disabled { color: var(--pearl-dark); opacity: 1; cursor: default; } #sidecart.bf .bf-qty .dac_qty_btn:focus-visible { outline: 1px solid var(--jade); outline-offset: -2px; border-radius: 4px; } #sidecart.bf .bf-qty-glyph { position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; } #sidecart.bf .bf-qty-glyph::before, #sidecart.bf .bf-qty-plus .bf-qty-glyph::after { content: ""; position: absolute; background: currentColor; } #sidecart.bf .bf-qty-glyph::before { left: 0; top: 5.25px; width: 12px; height: 1.5px; } #sidecart.bf .bf-qty-plus .bf-qty-glyph::after { left: 5.25px; top: 0; width: 1.5px; height: 12px; } #sidecart.bf .dac_qty.bf-qty.is-loading { opacity: 1; pointer-events: none; } /* engagement ring rows */ /* Figma rows 39181/39183 keep the default (top) counter-axis alignment. */ #sidecart.bf .bf-row--setting, #sidecart.bf .bf-row--stone { align-items: flex-start; } #sidecart.bf .bf-info--setting, #sidecart.bf .bf-info--stone { display: flex; flex-direction: column; gap: 4px; padding: 2px 0; } #sidecart.bf .bf-namerow { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } #sidecart.bf .bf-namerow .bf-name { max-width: 180px; } /* N14: the line name opens the PDP; it keeps the plain name look. */ #sidecart.bf .bf-name a, #sidecart.bf .bf-name a:hover, #sidecart.bf .bf-name a:visited { color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; } #sidecart.bf .bf-name a:focus-visible { outline: 1px solid var(--onyx); outline-offset: 2px; } #sidecart.bf .bf-meta-lines { display: flex; flex-direction: column; gap: 2px; } #sidecart.bf .bf-info--setting .bf-meta, #sidecart.bf .bf-info--stone .bf-meta { max-width: 180px; } #sidecart.bf .bf-note { font-family: 'English1766', serif; font-style: italic; font-weight: 300; font-size: 14px; line-height: 14px; letter-spacing: -0.21px; color: var(--jade); text-transform: lowercase; } /* protection plans (Mulberry tiles render inside .extend_cart) */ #sidecart.bf .bf-plans { padding: 0; } #sidecart.bf .bf-plans:has(.extend_cart:empty) { display: none; } #sidecart.bf .bf-plans .extend_cart { display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 12px; margin: 0; padding: 0; border: 0; font-size: 14px !important; } #sidecart.bf .bf-plans .extend_cart.is-busy { cursor: progress; } #sidecart.bf .bf-plans .extend_cart.is-busy .extend_cart_item { pointer-events: none; } #sidecart.bf .bf-plans .extend_subinfo { flex: 1 0 100%; margin: 0; display: block; } #sidecart.bf .bf-plans .extend_subinfo p { font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; color: var(--onyx); text-align: center; } #sidecart.bf .bf-plans .bf-plans-lead p { text-align: left; white-space: pre-wrap; } #sidecart.bf .bf-plans .bf-gap { white-space: pre; } #sidecart.bf .bf-plans .extend_subinfo a.mulberry_learn_more, #sidecart.bf .bf-plans .extend_subinfo a.mulberry_learn_more:hover { color: var(--onyx-light); text-decoration: underline; font-size: 14px; } #sidecart.bf .bf-plans .extend_cart_item { flex: 1 1 0; min-width: 0; height: 38px; padding: 4px 10px; border: 0; border-radius: 4px; background: var(--pearl-dark); box-sizing: border-box; } /* T13: the selected "No Plan" chip's text is the chip's own text node (no

): FG 14/16, ls -0.21 (38033). */ #sidecart.bf .bf-plans .extend_cart_item { line-height: 16px; letter-spacing: -0.21px; } #sidecart.bf .bf-plans .extend_cart_item p { font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; color: var(--onyx); white-space: nowrap; } #sidecart.bf .bf-plans .extend_cart_item:not(.extend_plan_none) p:first-child { font-size: 13px; line-height: 16px; color: var(--onyx-light); } #sidecart.bf .bf-plans .extend_cart_item.selected { background: var(--jade); } #sidecart.bf .bf-plans .extend_cart_item.selected p, #sidecart.bf .bf-plans .extend_cart_item.selected p:first-child { color: var(--tourmaline); } @media (hover: hover) and (min-width: 992px) { #sidecart.bf .bf-plans .extend_cart_item:hover { background: var(--jade); } #sidecart.bf .bf-plans .extend_cart_item:hover p { color: var(--tourmaline) !important; } } /* ============================================================= * * C8 FREE GIFTS CAROUSEL (14702:48860) * ============================================================= */ #sidecart.bf .bf-gifts { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 216px; margin-right: calc(-1 * var(--bf-gutter, 16px)); } #sidecart.bf .bf-gifts-head { display: flex; align-items: center; height: 20px; } /* 'Choose your free gift' (14702:48946): text box centred in the 20px title frame, not bottom-nudged. */ #sidecart.bf .bf-gifts-head .bf-section-title { top: 0; } #sidecart.bf .bf-gifts-strip { /* Height follows the tallest tile (locked tier-3 = 190 mobile: UNLOCK 14 + 2-line name + price), so no price is clipped by the x-scroll box (scrollHeight == clientHeight, no vertical scroll jump). The section sizes to its content (no negative margin): .bf-gifts min-height keeps the 216 mobile component (20 + 12 + 180 + 4) for 180px tiles, and a taller tile (locked tier 3 = 190) grows it, so the 30px gap to the accordion is measured from the LAST line of tile text. >=992 frames measure the full 224 (20 + 12 + 192), see the media block. */ display: flex; align-items: flex-start; gap: 10px; height: auto; margin-bottom: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; } #sidecart.bf .bf-gifts-strip::-webkit-scrollbar { display: none; } #sidecart.bf .bf-tile-wrap { flex: 0 0 110px; width: 110px; height: auto; min-height: 180px; } #sidecart.bf .bf-gifts-spacer { flex: 0 0 14px; } #sidecart.bf .bf-tile { display: flex; flex-direction: column; width: 110px; padding: 0; margin: 0; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; outline: none; transition: opacity .3s var(--bf-ease); } #sidecart.bf .bf-tile.is-locked { opacity: .6; cursor: default; } #sidecart.bf .bf-tile-img { position: relative; display: block; width: 110px; height: 110px; border-radius: 4px; overflow: hidden; background: #fff; } #sidecart.bf .bf-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; } #sidecart.bf .bf-tile-img::after { content: ""; position: absolute; inset: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px transparent; pointer-events: none; } /* v2 38553 / 38377: an ADDED tile keeps the 1px jade inside outline, as does the picking tile. */ #sidecart.bf .bf-tile.is-added .bf-tile-img::after, #sidecart.bf .bf-tile.is-picking .bf-tile-img::after { box-shadow: inset 0 0 0 1px var(--jade); } /* Keyboard focus has its own dashed ring, so a cancelled (Esc) tile does not read as picked. */ #sidecart.bf .bf-tile:focus-visible { outline: 1px dashed var(--jade); outline-offset: 2px; } /* No (hover: hover) guard: on touch a tap moves the tile straight to .is-picking anyway. */ #sidecart.bf .bf-tile.is-addable:hover .bf-tile-img::after, #sidecart.bf .bf-tile.is-addable:active .bf-tile-img::after { box-shadow: inset 0 0 0 1px var(--jade); } #sidecart.bf .bf-tile-badge { position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; line-height: 0; } #sidecart.bf .bf-tile-badge svg { width: 18px; height: 18px; display: block; } #sidecart.bf .bf-badge-added { display: none; } #sidecart.bf .bf-tile.is-added .bf-badge-add, #sidecart.bf .bf-tile.is-picking .bf-badge-add { display: none; } #sidecart.bf .bf-tile.is-added .bf-badge-added, #sidecart.bf .bf-tile.is-picking .bf-badge-added { display: block; } #sidecart.bf .bf-tile-text { display: flex; flex-direction: column; padding: 10px 0 4px; } #sidecart.bf .bf-tile-unlock { font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 12px; line-height: 14px; letter-spacing: -0.21px; color: var(--jade); white-space: nowrap; } /* tier-2-reached screens (38084 / 38177 / 38649 / 39221) override UNLOCK AT to 12/16; all-locked screens (37835 / 37990) keep the master's 12/14 */ #sidecart.bf .bf-cart-col.is-tier2 .bf-tile-unlock { line-height: 16px; } #sidecart.bf .bf-tile-name, #sidecart.bf .bf-tile-price { font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; color: var(--onyx); } #sidecart.bf .bf-tile-price { margin-top: 4px; } /* ============================================================= * * C9 METAL PICKER (14702:48987) * ============================================================= */ /* 160x112 pearl popover (designer resize 2026-10-22, was 160x90), 0.75px pearl-dark outside border, no image, no shadow. Done 24px at the top-right, swatch centres 65px down, label baseline ~92, 16px clear below. */ #sidecart.bf .bf-picker { position: absolute; z-index: 6; top: 0; left: 0; box-sizing: border-box; width: 160px; height: 112px; padding: 8px 9px 16px; display: flex; flex-direction: column; align-items: center; gap: 13px; background: var(--pearl); border-radius: 4px; box-shadow: 0 0 0 .75px var(--pearl-dark); opacity: 0; transform: scale(.98); /* no transition: Figma's Free gifts / pick-metal changes are instant (14717:43268) */ } #sidecart.bf .bf-picker[hidden] { display: none; } #sidecart.bf .bf-picker.is-open { opacity: 1; transform: none; } #sidecart.bf .bf-picker-head { display: flex; align-items: center; justify-content: space-between; width: 142px; height: 24px; flex: 0 0 24px; } #sidecart.bf .bf-picker-title { font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; color: var(--onyx-light); white-space: nowrap; } /* Done: 24x24 r4, #E4DED8 @60%, 1.5px check (designer resize 2026-10-22). */ #sidecart.bf .bf-picker-done { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; margin: 0; border: 0; border-radius: 4px; line-height: 0; cursor: pointer; background: rgba(228, 222, 216, .6); color: var(--onyx-light); transition: background-color .15s var(--bf-ease), color .15s var(--bf-ease); } /* hover / press: jade box, tourmaline check (owner call 2026-10-22) */ #sidecart.bf .bf-picker-done:hover, #sidecart.bf .bf-picker-done:focus-visible, #sidecart.bf .bf-picker-done:active { background: var(--jade); color: var(--tourmaline); outline: none; } #sidecart.bf .bf-picker-done svg { width: 24px; height: 24px; display: block; } #sidecart.bf .bf-swatches { width: 142px; display: flex; flex-direction: column; align-items: center; } #sidecart.bf .bf-swatch-row { position: relative; width: 118px; height: 40px; } #sidecart.bf .bf-swatch-cell { position: absolute; top: 0; width: 40px; height: 40px; display: flex; align-items: center; } #sidecart.bf .bf-swatch-cell--white { left: 0; justify-content: flex-start; } #sidecart.bf .bf-swatch-cell--yellow { left: 39px; justify-content: center; } #sidecart.bf .bf-swatch-cell--rose { left: 78px; justify-content: flex-end; } #sidecart.bf .bf-swatch { box-sizing: border-box; width: 24px; height: 24px; padding: 2px; margin: 0; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px transparent; cursor: pointer; line-height: 0; } #sidecart.bf .bf-swatch.is-selected { box-shadow: inset 0 0 0 1px var(--onyx); } #sidecart.bf .bf-swatch:focus-visible { outline: 1px solid var(--jade); outline-offset: 1px; } #sidecart.bf .bf-swatch-dot { display: block; width: 20px; height: 20px; border-radius: 50%; } #sidecart.bf .bf-swatch-label { width: 142px; margin-top: -5px; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; color: var(--onyx-light); text-align: center; } #sidecart.bf .bf-swatch-label[data-align="white"] { text-align: left; } #sidecart.bf .bf-swatch-label[data-align="rose"] { text-align: right; } /* ============================================================= * * C10 COMPLIMENTARY GIFT CARD * ============================================================= */ #sidecart.bf .bf-row--gc { align-items: flex-start; } #sidecart.bf .bf-gc-tile { position: relative; flex: 0 0 112px; width: 112px; height: 66px; border-radius: 4px; overflow: hidden; background: var(--jade); display: block; } #sidecart.bf .bf-gc-noise { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .12; } /* The 30% lives in the SVG's fill-opacity; applying it here too made the M ~9%. */ #sidecart.bf .bf-gc-mono { position: absolute; left: 77px; top: 22px; width: 43px; height: 46px; line-height: 0; } #sidecart.bf .bf-gc-mono svg { width: 43px; height: 46px; display: block; } #sidecart.bf .bf-gc-content { position: absolute; left: 8px; top: 7px; display: flex; flex-direction: column; gap: 8px; } #sidecart.bf .bf-gc-logo { line-height: 0; height: 7.43px; } #sidecart.bf .bf-gc-logo svg { width: 40.44px; height: 7.43px; display: block; overflow: visible; } #sidecart.bf .bf-gc-figs { display: flex; flex-direction: column; } #sidecart.bf .bf-gc-amt { height: 25px; font-family: 'Canela', serif; font-weight: 300; font-size: 24px; line-height: 25px; letter-spacing: -0.21px; color: var(--tourmaline); } #sidecart.bf .bf-gc-word { height: 9px; margin-top: 2px; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 9px; letter-spacing: -0.21px; color: var(--tourmaline); white-space: nowrap; } /* ============================================================= * * C11 SECTION FOOTER ACCORDION (14702:49354) * ============================================================= */ /* v2 40834: pad-top 10, no bottom pad (row 3 ends on the band's top edge at the end of the scroll). */ #sidecart.bf .bf-acc { display: flex; flex-direction: column; padding: 10px 0 0; background: var(--pearl); } #sidecart.bf .bf-acc-row { box-sizing: border-box; height: 48px; overflow: hidden; padding: 8px 16px 14px; background: var(--pearl); border-top: 1px solid var(--pearl-dark); border-radius: 4px 4px 0 0; transition: height var(--bf-acc-dur, .25s) var(--bf-ease); } #sidecart.bf .bf-acc-row.is-open { height: auto; } #sidecart.bf .bf-acc-head { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; height: 20px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; text-align: left; color: #000; } #sidecart.bf .bf-acc-label { display: flex; align-items: flex-start; gap: 1px; min-width: 0; } #sidecart.bf .bf-acc-icon { flex: 0 0 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; line-height: 0; } #sidecart.bf .bf-acc-icon svg { display: block; } #sidecart.bf .bf-acc-text { font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; padding-top: 2px; letter-spacing: -0.21px; word-spacing: -0.6px; color: #000; white-space: nowrap; } #sidecart.bf .bf-acc-chevron { flex: 0 0 20px; width: 20px; height: 20px; line-height: 0; transition: transform var(--bf-acc-dur, .25s) var(--bf-ease); } #sidecart.bf .bf-acc-chevron svg { width: 20px; height: 20px; display: block; } #sidecart.bf .bf-acc-row.is-open .bf-acc-chevron { transform: rotate(180deg); } #sidecart.bf .bf-acc-body { margin-top: 20px; display: flex; flex-direction: column; gap: 20px; } /* Row 3 uses the shared 20px head->body gap (18 is .bf-impact's inner gap). Collapsed bodies are hidden so nothing can leak into the 48px row or take focus. */ /* Open row 3 (Variant5 14702:49746) uses itemSpacing 18 -> 221 tall; collapsed (Default) uses 20. */ #sidecart.bf .bf-acc-row--impact.is-open .bf-acc-body { margin-top: 18px; } /* Smart-animate body: fades in with the opening row, out with the collapse, then hides. */ #sidecart.bf .bf-acc-body { opacity: 1; transition: opacity var(--bf-acc-dur, .25s) var(--bf-ease), visibility 0s; } #sidecart.bf .bf-acc-row:not(.is-open) .bf-acc-body { opacity: 0; visibility: hidden; transition: opacity var(--bf-acc-dur, .25s) var(--bf-ease), visibility 0s linear var(--bf-acc-dur, .25s); } /* hide after the collapse */ #sidecart.bf .bf-ship-dates { display: flex; flex-direction: column; } #sidecart.bf .bf-ship-line { display: flex; align-items: center; gap: 6px; min-height: 20px; padding: 0 20px 0 10px; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; color: var(--onyx-light); } #sidecart.bf .bf-ship-icon { flex: 0 0 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; line-height: 0; } #sidecart.bf .bf-ship-icon svg { display: block; } #sidecart.bf .bf-ship-when { display: flex; gap: 20px; padding: 0 40px 0 36px; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; color: var(--onyx-light); } #sidecart.bf .bf-ink { color: var(--onyx); } #sidecart.bf .bf-share.cart_contact { padding: 0; } #sidecart.bf .bf-share .cart_rebuild_email { display: flex; gap: 14px; margin: 0; } #sidecart.bf .bf-share input#cart_rebuild_email_form { flex: 1 1 auto; min-width: 0; width: auto; height: 36px; margin: 0; padding: 9px 20px 9px 14px; box-sizing: border-box; background: transparent; border: 1px solid var(--pearl-dark); border-radius: 4px; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px !important; line-height: 16px; letter-spacing: -0.21px; color: var(--onyx); } #sidecart.bf .bf-share input#cart_rebuild_email_form::placeholder { color: var(--bf-placeholder); word-spacing: -0.6px; } #sidecart.bf .bf-share button.cart_rebuild_submit { flex: 0 0 100px; width: 100px; height: 36px; padding: 0; border: 0; border-radius: 4px; background: var(--jade); color: var(--pearl); font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px !important; line-height: 16px !important; letter-spacing: -0.21px; text-transform: uppercase; } #sidecart.bf .bf-share .dac_share_thanks { padding: 8px 0; } #sidecart.bf .bf-impact { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 20px 0; border-radius: 4px; background: rgba(170, 181, 197, .4); } /* Figma box is 328, but the web FoundersGrotesk sets ~2-3% wider than Figma's, so 328 wraps to 4 lines; 335 is the width that gives exactly the Figma 3-line breaks (measured on dev-0). */ #sidecart.bf .bf-impact-copy { width: 335px; max-width: calc(100% - 16px); margin: 0 auto; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; word-spacing: -0.6px; color: var(--onyx); text-align: center; } #sidecart.bf .bf-impact-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; box-sizing: border-box; padding: 0 20px; } #sidecart.bf .bf-impact-stats p { display: flex; flex-direction: column; align-items: center; gap: 2px; } #sidecart.bf .bf-impact-num { font-family: 'English1766', serif; font-style: italic; font-weight: 300; font-size: 28px; line-height: 30.8px; letter-spacing: 0; color: #000; } #sidecart.bf .bf-impact-lbl { font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; color: var(--onyx); white-space: nowrap; } /* ============================================================= * * C12 DELIVERY + VALUE BAND (14702:48560) — pinned * ============================================================= */ #sidecart.bf .dac_footer.bf-band { position: sticky; bottom: 0; z-index: 5; margin-top: auto; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; gap: 12px; /* the Figma 1px top stroke is INSIDE the 12px pad -> 11 + 1 */ padding: 11px 16px 16px; background: var(--pearl); border: 0; border-top: 1px solid var(--pearl-dark); border-radius: 0; box-shadow: none; } #sidecart.bf .bf-band .dac_foot_total.cart_subtotal { margin: 0; display: flex; justify-content: space-between; align-items: center; } /* v2 38064-38073: totals 16/18 Regular (the "Test Founders Grotesk 500" base is overridden to 400 on every character), the Shipping row 4px under it. */ #sidecart.bf .bf-band .dac_foot_total { height: 18px; } #sidecart.bf .bf-band .dac_foot_total .dac_foot_label, #sidecart.bf .bf-band .dac_foot_total .dac_foot_items, #sidecart.bf .bf-band .dac_foot_total .dac_foot_amt, #sidecart.bf .bf-band-ship p { margin: 0; font-family: 'FoundersGrotesk' !important; font-weight: 400 !important; font-size: 16px !important; line-height: 18px !important; letter-spacing: -0.21px; color: var(--onyx); } #sidecart.bf .bf-band-ship { display: flex; justify-content: space-between; align-items: center; margin-top: -8px; height: 19px; } /* -8 = band gap 12 -> Figma 4 */ #sidecart.bf .bf-band-ship-label { display: flex; align-items: center; gap: 2px; } #sidecart.bf .bf-band .dac_info { position: relative; width: 17px; height: 19px; line-height: 0; cursor: pointer; outline: none; } #sidecart.bf .bf-band .dac_info svg { width: 17px; height: 19px; display: block; } #sidecart.bf .bf-band .dac_tip { left: 0; transform: none; } #sidecart.bf .bf-band .dac_tip::after { left: 8px; } #sidecart.bf .bf-band .dac_express { display: flex; gap: 12px; height: 42px; } /* Two EQUAL 173 columns: both cells border-box with no content floor, so CHECKOUT's 6px padding no longer makes it 12px wider than the wallet. */ #sidecart.bf .bf-band .dac_express .dac_pay_btn, #sidecart.bf .bf-band .dac_express a.dac_checkout { box-sizing: border-box; height: 42px; flex: 0 0 calc(50% - 6px); min-width: 0; border-radius: 4px; } #sidecart.bf .bf-band .dac_express .dac_pay_apple { background: #000; } /* N13 / C150: the REAL wallet buttons. .dac_pay_wallet is display:contents here, so the cells the row actually lays out are the framework's own containers, which sidecart.css sizes at 44px (Apple with !important). Same 42px half-cell as CHECKOUT; Google's inner button fills it (buttonSizeMode 'fill'; nothing inside Google's button is restyled). max-width + overflow: a wider personalised button can never push CHECKOUT out of the row. */ #sidecart.bf .bf-band .dac_express #sv-wc-google-pay-button-container, #sidecart.bf .bf-band .dac_express .sv-wc-apple-pay-button { box-sizing: border-box !important; height: 42px !important; min-height: 0 !important; flex: 0 0 calc(50% - 6px) !important; min-width: 0 !important; max-width: calc(50% - 6px) !important; border-radius: 4px !important; overflow: hidden; margin: 0 !important; } /* Google Pay mock (non-production hosts, cart_contents.php) only stands in when no real wallet button shows, so the row is always exactly two equal cells. */ #sidecart.bf .bf-band .dac_express:has(.dac_pay_wallet:not(.is-empty)) .dac_pay_gpay_mock, html:not(.da-no-applepay) #sidecart.bf .bf-band .dac_express:has(.dac_pay_apple) .dac_pay_gpay_mock { display: none; } /* the fallback Apple Pay link is showing */ #sidecart.bf .bf-band .dac_express a.dac_pay_gpay_mock { min-width: 0; display: flex; align-items: center; justify-content: center; } #sidecart.bf .bf-band .dac_express a.dac_checkout { background: var(--jade); color: var(--pearl); padding: 0; /* any padding floors the flex-basis-0 cell and breaks the equal halves */ font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 16px; line-height: 18px; letter-spacing: -0.5px; text-transform: uppercase; } #sidecart.bf .dac_footer.bf-band p.affirm-as-low-as { margin: 0; min-height: 21px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px !important; line-height: 16px !important; letter-spacing: -0.21px; color: var(--onyx-light); } #sidecart.bf .dac_footer.bf-band p.affirm-as-low-as .affirm-ala-price { color: var(--bf-affirm); } #sidecart.bf .dac_footer.bf-band p.affirm-as-low-as a { color: var(--onyx-light); text-decoration: underline; } /* Figma has no APR pill; the copy itself is reworded by bf-cart.js (bfAffirmCopy). */ #sidecart.bf .dac_footer.bf-band p.affirm-as-low-as .__apr_badge { display: none !important; } /* ============================================================= * * SMART ANIMATE support (assets/js/bf-cart.js) * ============================================================= */ /* Class flips used to read "from" values must not start CSS transitions. */ #sidecart.bf .bf-notrans, #sidecart.bf .bf-notrans *, #sidecart.bf .bf-notrans *::before { transition: none !important; } /* Old layers kept on screen for the crossfade: same box as the new layer, never interactive. */ #sidecart.bf .bf-ghost { pointer-events: none; } #sidecart.bf .bf-tile-img > img.bf-ghost { position: absolute; inset: 0; } /* The removed, already-decoded photo held over its new copy until that one loads (no blank frame). */ #sidecart.bf .bf-img-host { position: relative; } #sidecart.bf img.bf-img-hold { position: absolute; inset: 0; pointer-events: none; } /* Empty bag <-> bag dissolve: the old frame overlays the top of the new one while it fades. */ #sidecart.bf .sidecart_cart.bf-dissolving { position: relative; } #sidecart.bf .bf-dissolve-out { position: absolute; z-index: 2; left: 0; right: 0; top: 0; background: var(--pearl); pointer-events: none; } #sidecart.bf .bf-tile-text { position: relative; } #sidecart.bf .bf-tile-unlock.bf-ghost { position: absolute; left: 0; top: 10px; } /* Copy crossfade: the old copy sits over the new one, centred, and the chip clips while its width tweens (it is centred in a fixed-width tier column, so nothing else moves). */ #sidecart.bf .bf-xf { position: relative; } #sidecart.bf .bf-chip.bf-xf { overflow: hidden; } #sidecart.bf .bf-xf-out { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding: inherit; white-space: nowrap; pointer-events: none; } /* The request dim (bf-cart.js post() and every sidecart.js handler set an inline opacity:0.5). Figma goes straight from state to state (CHANGE_TO SMART_ANIMATE), so the dim is lighter (0.8) and only shows when the call is slow: it waits 400ms before easing in, and a reply that lands first never dims at all. The way back to 1 has no delay. */ #sidecart.bf .sidecart_content { transition: opacity .2s var(--bf-ease); } #sidecart.bf .sidecart_content[style*="opacity: 0.5"], #sidecart.bf .sidecart_content:has(.sidecart_cart > img[alt="loading spinner"]:not(:only-child)) { opacity: .8 !important; transition: opacity .2s var(--bf-ease) .4s; } /* The refresh spinner (sidecart.js load_sidecart_cart() prepends an in-flow with margin:40px auto) pushed the whole bag down for the call and snapped it back up. Over a rendered bag it is hidden and the slow-call dim above is the loading cue, so nothing moves; it only shows when it is the sole content (a first load into an empty drawer). */ #sidecart.bf .sidecart_cart > img[alt="loading spinner"]:not(:only-child) { display: none !important; } @media (prefers-reduced-motion: reduce) { #sidecart.bf .bf-fill, #sidecart.bf .bf-tier, #sidecart.bf .bf-tier-circle::before, #sidecart.bf .bf-chip, #sidecart.bf .bf-picker, #sidecart.bf .bf-acc-row, #sidecart.bf .bf-acc-chevron, #sidecart.bf .bf-tile, #sidecart.bf .bf-acc-body, #sidecart.bf .bf-acc-row:not(.is-open) .bf-acc-body, #sidecart.bf .sidecart_content, #sidecart.bf .bf-plans .extend_cart_item, #sidecart.bf .bf-plans .extend_cart_item * { transition: none !important; } /* still no dim for a fast reply, but the slow-call dim appears without a fade */ #sidecart.bf .sidecart_content[style*="opacity: 0.5"], #sidecart.bf .sidecart_content:has(.sidecart_cart > img[alt="loading spinner"]:not(:only-child)) { transition: opacity 0s linear .4s !important; } } /* A long product name must never push the trash out of the 358 row (e.g. "Fancy-Cut Lab Diamond Station Bracelet"): the title truncates, keeping room for descenders under the 19px line. */ #sidecart.bf .bf-block-head .bf-block-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-bottom: 4px; margin-bottom: -4px; } /* ============================================================= * * a11y helper: the polite live region bf-cart.js adds for "{tier} unlocked" * ============================================================= */ #sidecart.bf .bf-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================= * * DESKTOP (>= 992): SCREEN SIZE 1 / 2 / 3 (14715:39357 / 40358 / 39811) * * Drawer: right-anchored, top 0, full height, width clamp(400, 30.56vw, 520) -> 400 @1280, * 440 @1440, 520 @1728; no shadow, no edge stroke. Header 48 sticky at the top, the 156 band * sticky at the bottom, the middle scrolls. Mask #000 @60% over the WHOLE page incl. the site * header: #page_overlay (outside the header) for the page, plus a ::before inside the sticky * #masthead for the header itself, stacked under the drawer (which lives in #masthead). * Type is the mobile type; every >=992 bump in sidecart.css is beaten below. * Content gutter: 16 below 1440, 20 from 1440, 24 from 1728. Accordions + band stay 16. * ============================================================= */ @media (min-width: 992px) { div#sidecart.bf { position: fixed; top: 0 !important; right: -100%; width: clamp(400px, 30.56vw, 520px); min-width: 0; max-width: none; height: 100vh !important; height: 100dvh !important; border-left: 0; box-shadow: none; } div#sidecart.bf.open { right: 0; } .admin-bar div#sidecart.bf { top: 32px !important; height: calc(100vh - 32px) !important; height: calc(100dvh - 32px) !important; } /* ONE 60% layer: the #masthead::before already dims the whole viewport (header + .da-promo included), so #page_overlay only catches clicks -- dimming both made the page 84% black. */ body.dac_bag_open:has(#sidecart.bf.open) div#page_overlay { background: transparent; } body.dac_bag_open:has(#sidecart.bf.open) #masthead::before { content: ""; position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .6); cursor: pointer; } #sidecart.bf .cart_close { width: 16px; height: 16px; top: 15px; } #sidecart.bf .cart_close svg { width: 16px; height: 16px; } /* type = mobile: neutralise sidecart.css's >=992 !important bumps on BF nodes */ #sidecart.bf .dac_promise p { font-size: 14px !important; line-height: 16px !important; } #sidecart.bf .bf-plans .extend_cart { font-size: 14px !important; } #sidecart.bf .bf-qty .dac_qty_label { font-size: 14px !important; line-height: 16px !important; } #sidecart.bf .bf-share button.cart_rebuild_submit { font-size: 14px !important; line-height: 16px !important; } #sidecart.bf .dac_footer.bf-band p.affirm-as-low-as { font-size: 14px !important; line-height: 16px !important; } /* the 358 tile strip: scrolls at 400 / 440 (tile 4 cut at the edge) */ #sidecart.bf .bf-gifts { min-height: 0; } #sidecart.bf .bf-gifts-strip { gap: 10px; margin-bottom: 0; } /* desktop Free gifts = 20+12+192 = 224 */ /* desktop instances (39357/40358/39811) carry UNLOCK AT at 12/16 (mobile master 38322 is 12/14) */ #sidecart.bf .bf-tile-unlock { line-height: 16px; } } @media (min-width: 1440px) { #sidecart.bf .bf-cart-col { --bf-gutter: 20px; } } @media (min-width: 1728px) { #sidecart.bf .bf-cart-col { --bf-gutter: 24px; } /* 520 drawer (40182): all four tiles fit, space-between, no end spacer, no scroll, no bleed */ #sidecart.bf .bf-gifts { margin-right: 0; } #sidecart.bf .bf-gifts-strip { justify-content: space-between; gap: 5px; overflow-x: hidden; } #sidecart.bf .bf-gifts-spacer { display: none; } /* five or six gifts: keep the scrolling strip (tile 5 cut at the edge), as below 1728 */ #sidecart.bf .bf-gifts.has-more { margin-right: calc(-1 * var(--bf-gutter, 16px)); } #sidecart.bf .bf-gifts.has-more .bf-gifts-strip { justify-content: flex-start; gap: 10px; overflow-x: auto; } #sidecart.bf .bf-gifts.has-more .bf-gifts-spacer { display: block; } } /* Locked-gift tap message (bf-cart.js lockedMsg): a jade pill over the top of the gift strip. */ #sidecart.bf .bf-gifts-msg { position: absolute; left: 0; right: var(--bf-gutter, 16px); top: 40px; z-index: 5; margin: 0 auto; width: max-content; max-width: calc(100% - var(--bf-gutter, 16px)); padding: 8px 12px; border-radius: 4px; background: #27423B; color: #FAF3ED; font-family: 'FoundersGrotesk'; font-weight: 400; font-size: 14px; line-height: 16px; letter-spacing: -0.21px; text-align: center; opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease-out, transform 200ms ease-out; pointer-events: none; } #sidecart.bf .bf-gifts-msg:empty { padding: 0; } #sidecart.bf .bf-gifts-msg.is-on { opacity: 1; transform: none; } #sidecart.bf .bf-tile.is-locked { cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { #sidecart.bf .bf-gifts-msg { transition: none; } } /* Phones narrower than the 358px Figma track (e.g. 320px): scale the whole freebies block so the third tier is not cut off. Bar geometry stays in track px, so the fill scales with it. */ @media (max-width: 357.98px) { #sidecart.bf .bf-freebies { zoom: 0.88; } } @media (max-width: 314.98px) { #sidecart.bf .bf-freebies { zoom: 0.8; } } /* No "Ring in progress" card in the Black Friday cart (owner): the drawer shows the bag only. !important because sidecart.js writes inline display on the block; the "Shopping Bag" title it inserts after the card goes with it. */ #sidecart.bf .sidecart_ringbuilder, #sidecart.bf .rb-cart-title { display: none !important; } /* Figma 14717:45802 'Done': hover swaps to Variant2 instantly (no transition). */ #sidecart.bf .bf-picker-done { transition: none; }