/* ========================================================================= BuyTides — site header and footer ========================================================================= */ /* The page wrappers (.bt-pdp, .bt-shop) paint the site's mist background, but the first child's margin-top collapses up through them and out to , which left a 20-30px strip of bare white under the header on every template. flow-root keeps that margin inside the wrapper; body carries the same colour so nothing shows white if another template repeats the pattern. */ body { background: #eef2f4; } .bt-pdp, .bt-shop { display: flow-root; } .bt-header, .bt-footer { --bt-navy: #0b2c4d; --bt-navy-mid: #164a7a; --bt-navy-deep: #08213a; --bt-cyan: #1fc8e3; --bt-cyan-bright: #6fe4f2; --bt-cyan-tint: #eaf7fb; --bt-teal: #1b7fa8; --bt-line: #dde7ee; --bt-line-hover: #c7e9f3; --bt-mist: #eef2f4; --bt-white: #fff; --bt-ink-1: #b9d2e2; --bt-ink-2: #8fb6cc; --bt-ink-3: #e4f0f7; --bt-shell: 1680px; --bt-gutter: clamp(16px, 3vw, 32px); --bt-sans: "Inter", system-ui, -apple-system, sans-serif; --bt-display: "Outfit", "Inter", system-ui, sans-serif; font-family: var(--bt-sans); color: var(--bt-navy); /* The source design sets no line-height anywhere, so every box in it computes at `normal` (~1.2). Twenty Twenty-Five inherits 1.6 from the theme body, which silently inflates every text-bearing element here — the marquee, the cart button, the nav pills. Pinning `normal` is what makes these render at the design's real heights rather than padding being trimmed to compensate. */ line-height: normal; font-size: 16px; letter-spacing: normal; } /* Same reason: neutralise the block wrapper the template part renders inside, plus the theme's global block spacing, so the header/footer sit flush. */ .wp-block-template-part:has(> .bt-header), .wp-block-template-part:has(> .bt-footer) { margin-block: 0; padding: 0; } .bt-header, .bt-footer { margin-block: 0 !important; max-width: none; } .bt-header > *, .bt-footer > * { margin-block: 0; } .bt-header *, .bt-footer *, .bt-header *::before, .bt-footer *::before { box-sizing: border-box; } /* Hardening against theme + wpautop interference. Everything below re-establishes a known baseline inside the chrome. Two things were inflating the header on a real install: the theme's paragraph and list margins landing on flex children, and stray

/
tags that wpautop injected into the shortcode output. Both add vertical space that align-items:center cannot balance, which is why the bar rendered 139px tall with 32px above the content and 54px below it. */ .bt-header *, .bt-footer * { margin-block: 0; } /* Overflow guards. Flex and grid children default to min-width:auto, which means a long word or a wide row can push past the viewport and create a horizontal scrollbar on small screens. */ .bt-bar__inner > *, .bt-actions > *, .bt-footer__grid > *, .bt-hero__info > * { min-width: 0; } .bt-header, .bt-footer { max-width: 100%; overflow-x: clip; } .bt-footer__blurb, .bt-signup__copy, .bt-notice__item p, .bt-footer__links a { overflow-wrap: break-word; } /* wpautop leftovers: empty paragraphs and line breaks between block-level pieces have no business in the chrome. */ .bt-header > p:empty, .bt-footer > p:empty, .bt-header br, .bt-footer br { display: none; } /* Neutralise block-gap margins applied to direct children by the theme. */ .bt-header > *, .bt-footer > *, .bt-bar__inner > *, .bt-rail__inner > * { margin-block-start: 0; margin-block-end: 0; } .bt-header ul, .bt-footer ul { list-style: none; margin: 0; padding: 0; } .bt-header a, .bt-footer a { text-decoration: none; } .bt-header .bt-icon, .bt-footer .bt-icon { width: 18px; height: 18px; flex: 0 0 auto; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 999; width: auto; height: auto; clip: auto; background: var(--bt-navy); color: #fff; padding: 12px 18px; border-radius: 8px; } /* ---------- Announcement marquee ---------- */ .bt-marquee { width: 100%; background: var(--bt-navy); overflow: hidden; } .bt-marquee__track { display: flex; width: max-content; animation: bt-marquee 42s linear infinite; } .bt-marquee:hover .bt-marquee__track, .bt-marquee:focus-within .bt-marquee__track { animation-play-state: paused; } .bt-marquee__group { display: flex; align-items: center; gap: 34px; padding: 11px 17px; /* Pinned to the 16px line box the reference renders at. Left to inherit, the theme's 1.6 body line-height inflates this bar 38px -> 42px. */ line-height: 16px; font-family: var(--bt-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; white-space: nowrap; } .bt-marquee__dot { color: var(--bt-cyan); } @keyframes bt-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-33.333%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .bt-marquee__track { animation: none; width: 100%; overflow-x: auto; } .bt-marquee__group:not(:first-child) { display: none; } } /* ---------- Compliance strip ---------- */ .bt-ruo { margin: 0; width: 100%; background: var(--bt-cyan); text-align: center; padding: 10px 24px; /* Reference bar height: 36px. */ line-height: 16px; font-family: var(--bt-display); font-size: 12.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bt-navy); } /* ---------- Main bar ---------- */ .bt-bar { width: 100%; background: var(--bt-white); border-bottom: 1px solid var(--bt-line); } .bt-bar__inner { max-width: var(--bt-shell); margin: 0 auto; padding: 16px var(--bt-gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; } .bt-logo { display: flex; flex-direction: row; align-items: center; gap: 14px; flex: 0 0 auto; color: var(--bt-navy); } .bt-logo__mark { display: block; height: 30px; width: auto; } .bt-logo__wordmark { display: block; height: 26px; width: auto; flex: 0 0 auto; } /* Hard caps on anything image-like in the lockup. These are deliberately blunt. get_custom_logo() renders its own markup that sits outside .bt-logo, and an inline SVG with only a viewBox has no intrinsic size, so either one can render at full natural size and swamp the page if a scoped rule fails to match. Capping by element as well as by class means a missed selector degrades to "slightly wrong" instead of "unusable". */ .bt-header img, .bt-header svg, .bt-footer img, .bt-footer svg { max-width: 100%; } /* :where() keeps these at zero specificity for the class portion, so the explicit .bt-logo__mark / .bt-logo__wordmark sizes still win. Without that the safety net silently overrode the intended 30px mark. */ :where(.bt-logo) img, :where(.bt-logo) svg, :where(.custom-logo-link) img { max-height: 40px; width: auto; height: auto; } img.custom-logo { max-height: 40px; width: auto; height: auto; } .bt-logo--custom { display: inline-flex; align-items: center; flex: 0 0 auto; } .bt-logo--custom .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; } /* ---------- Primary nav ---------- */ .bt-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; } .bt-nav__list a { font-family: var(--bt-display); font-size: 15.5px; font-weight: 500; line-height: 20px; color: var(--bt-navy); transition: color 0.15s ease; } .bt-nav__list a:hover, .bt-nav__list .current-menu-item > a { color: var(--bt-teal); } .bt-nav { flex: 1 1 340px; min-width: 0; } /* ---------- Burger (mobile only) ---------- */ .bt-burger { display: none; appearance: none; background: none; border: 1px solid var(--bt-line); border-radius: 10px; width: 42px; height: 42px; margin-left: auto; cursor: pointer; align-items: center; justify-content: center; } .bt-burger__box { display: flex; flex-direction: column; gap: 4px; width: 18px; } .bt-burger__box span { display: block; height: 2px; background: var(--bt-navy); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .bt-burger[aria-expanded="true"] .bt-burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .bt-burger[aria-expanded="true"] .bt-burger__box span:nth-child(2) { opacity: 0; } .bt-burger[aria-expanded="true"] .bt-burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ---------- Actions cluster ---------- */ .bt-actions { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 12px; flex: 0 1 auto; margin-left: auto; } /* Centring is asserted on each child as well as the container. align-items on the parent alone proved fragile in the live theme - the three controls came out in a staircase, each ~21px lower than the last - and align-self can't be undone by a stray alignment rule further up the cascade. */ .bt-actions > * { align-self: center; flex: 0 0 auto; vertical-align: middle; } .bt-search { display: flex; align-items: center; height: 40px; width: 40px; border-radius: 999px; border: 1px solid var(--bt-line); background: var(--bt-white); overflow: hidden; transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease; } .bt-search.is-open { width: 260px; border-color: var(--bt-line-hover); } .bt-search__toggle { appearance: none; flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bt-navy); } .bt-search__toggle:hover { background: var(--bt-cyan-tint); } .bt-search__field { flex: 1; min-width: 0; appearance: none; border: 0; outline: none; background: transparent; font-family: var(--bt-sans); font-size: 14.5px; color: var(--bt-navy); padding: 0 14px 0 2px; opacity: 0; transition: opacity 0.2s ease; } .bt-search.is-open .bt-search__field { opacity: 1; } .bt-iconbtn { appearance: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bt-line); background: var(--bt-white); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bt-navy); transition: background 0.15s ease, border-color 0.15s ease; } .bt-iconbtn:hover { background: var(--bt-cyan-tint); border-color: var(--bt-line-hover); } .bt-textus { display: flex; align-items: center; gap: 8px; font-family: var(--bt-display); font-size: 15px; font-weight: 600; color: var(--bt-teal); border: 1.5px solid var(--bt-cyan); border-radius: 999px; padding: 9px 18px; line-height: 19px; transition: background 0.15s ease, color 0.15s ease; } .bt-textus:hover { background: var(--bt-cyan-tint); color: var(--bt-navy); } /* Prescription CTA, sitting between the account icon and the cart. Uses the same cyan as the research-use band under the header. */ .bt-rx { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--bt-cyan); color: var(--bt-navy); font-family: var(--bt-display); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; border-radius: 999px; padding: 12px 20px; white-space: nowrap; text-decoration: none; transition: background 0.15s ease; } .bt-rx:hover, .bt-rx:focus-visible { background: var(--bt-cyan-bright); color: var(--bt-navy); } @media (max-width: 1240px) { .bt-rx { font-size: 14px; padding: 11px 15px; } } .bt-cart { display: flex; align-items: center; gap: 9px; border: 0; border-radius: 999px; background: var(--bt-navy); color: #fff; font-family: var(--bt-display); font-size: 15px; font-weight: 600; padding: 11px 19px; /* Cart height (43px) is set by the 21px badge, so the label matches it. */ line-height: 21px; cursor: pointer; transition: background 0.15s ease; } .bt-cart:hover { background: var(--bt-navy-mid); color: #fff; } .bt-cart:active { background: var(--bt-navy-deep); } .bt-cart__count { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; border-radius: 999px; background: var(--bt-cyan); color: var(--bt-navy); font-size: 12.5px; font-weight: 700; padding: 0 6px; line-height: 21px; } .bt-cart__count.is-empty { background: rgba(255, 255, 255, 0.22); color: #fff; } /* ---------- Category rail ---------- */ .bt-rail { width: 100%; background: var(--bt-white); border-bottom: 1px solid var(--bt-line); } .bt-rail__inner { max-width: var(--bt-shell); margin: 0 auto; padding: 14px var(--bt-gutter); overflow-x: auto; scrollbar-width: thin; } .bt-rail__list { display: flex; flex-wrap: nowrap; gap: 10px; justify-content: space-between; min-width: min-content; } .bt-rail__list a { display: block; font-family: var(--bt-display); font-size: 14.5px; font-weight: 500; color: var(--bt-navy); border: 1px solid var(--bt-line); border-radius: 999px; padding: 9px 18px; /* 39px reference height = 18px padding + 2px border + 19px line box. */ line-height: 19px; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; } .bt-rail__list a:hover, .bt-rail__list .current-menu-item > a { background: var(--bt-cyan-tint); border-color: var(--bt-line-hover); } .bt-rail__list li { flex: 0 0 auto; } /* ---------- Header responsive ---------- */ /* ---------- Header responsive ---------- Three stages rather than one hard switch: <=1100 tighten the gaps before anything has to move <=1100 nav collapses behind the burger; logo and actions share row one <=560 drop to the essentials and let search take its own row Flex `order` keeps the DOM order accessible (logo, burger, nav, actions) while presenting logo | actions | burger visually. */ @media (max-width: 1280px) { .bt-bar__inner { gap: 16px 24px; } .bt-nav__list { gap: 12px 18px; } .bt-nav__list a { font-size: 15px; } .bt-rail__list { justify-content: flex-start; gap: 8px; } } @media (max-width: 1100px) { .bt-bar__inner { gap: 12px 16px; padding-block: 12px; } .bt-logo { order: 1; } .bt-actions { order: 2; margin-left: auto; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; } .bt-burger { display: flex; order: 3; margin-left: 0; } .bt-nav { order: 4; flex: 1 1 100%; display: none; } .bt-nav.is-open { display: block; } .bt-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-top: 4px; border-top: 1px solid var(--bt-line); } .bt-nav__list a { display: block; padding: 12px 2px; font-size: 16px; line-height: 22px; } .bt-nav__list li + li a { border-top: 1px solid var(--bt-line); } .bt-textus { display: none; } } @media (max-width: 600px) { /* The phone lockup is the wordmark, not the molecule mark: with search and the account link gone from this row there is space for a lockup that actually says the brand name. Reversed from the desktop bar, which shows both. */ .bt-logo__mark { display: none; } .bt-logo__wordmark { display: block; height: 24px; width: auto; } /* Phone header: logo | Get Your Prescription | cart | menu. Search and the account link are dropped rather than shrunk — both are reachable from the burger menu and the account page, and four controls plus a logo cannot share a 375px row without every one of them becoming too small to hit. */ /* The cart sits between the prescription button and the burger, but those three are not siblings: .bt-rx and .bt-cart live inside .bt-actions while .bt-burger is a child of .bt-bar__inner. display:contents dissolves the wrapper so all of them become flex items of the same row and `order` can sequence them. DOM order is untouched, so the tab order still reads logo, menu, prescription, cart. */ .bt-actions { display: contents; } .bt-bar__inner { flex-wrap: wrap; gap: 8px; } .bt-search, .bt-actions .bt-iconbtn { display: none; } .bt-logo { order: 1; } .bt-rx { order: 2; margin-inline: auto; } .bt-cart { order: 3; } .bt-burger { order: 4; margin-left: 0; } /* Still full-width on its own row when the burger opens it. */ .bt-nav { order: 5; flex: 1 1 100%; } .bt-logo__mark { height: 26px; } .bt-rx { font-size: 13px; padding: 11px 14px; } /* Cart collapses to a round icon button matching the burger's footprint. The label is kept in the DOM for screen readers rather than deleted. */ .bt-cart { position: relative; justify-content: center; gap: 0; width: 42px; height: 42px; padding: 0; flex: 0 0 auto; } .bt-cart__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .bt-cart__icon { width: 20px; height: 20px; } .bt-cart__count { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; line-height: 14px; border: 2px solid var(--bt-white); } /* A "0" bubble is noise: an empty cart should read as no badge at all. */ .bt-cart__count.is-empty { display: none; } } @media (max-width: 560px) { .bt-logo__mark { height: 26px; } .bt-logo__wordmark { height: 22px; } .bt-logo { gap: 10px; } /* Search gets its own row once open so it isn't fighting the cart for space on a 360px screen. */ .bt-search.is-open { flex: 1 1 100%; width: 100%; order: 3; } .bt-cart { padding: 11px 15px; font-size: 14.5px; } .bt-rail__inner { padding-block: 10px; } .bt-rail__list a { font-size: 14px; padding: 8px 14px; } .bt-marquee__group { gap: 22px; padding: 10px 13px; font-size: 12px; } .bt-ruo { /* Wraps to two lines here, so the pinned 16px line box is relaxed into a ratio to keep the lines from crowding. */ line-height: 1.45; padding: 9px 18px; letter-spacing: 0.07em; } } @media (max-width: 400px) { /* Compact tier. The account icon stays visible here, so the cluster has to find its space by shrinking rather than by dropping a control. */ .bt-bar__inner { gap: 10px; padding-inline: 14px; } .bt-actions { gap: 7px; } .bt-search, .bt-iconbtn, .bt-burger { width: 36px; height: 36px; } .bt-search__toggle { flex: 0 0 34px; width: 34px; height: 34px; } .bt-cart { height: 38px; padding: 0 13px; gap: 7px; font-size: 14px; } .bt-cart__count { min-width: 20px; height: 20px; line-height: 20px; font-size: 12px; } .bt-logo__mark { height: 24px; } } @media (max-width: 330px) { .bt-bar__inner { gap: 8px; padding-inline: 10px; } .bt-actions { gap: 5px; } .bt-search, .bt-iconbtn, .bt-burger { width: 34px; height: 34px; } .bt-cart { padding: 0 11px; } .bt-logo__mark { height: 22px; } } @media (max-width: 305px) { /* Folded-phone cover screens (~280px). Everything still fits on one row; below this the design would have to start dropping controls. */ .bt-bar__inner { gap: 7px; padding-inline: 8px; } .bt-actions { gap: 4px; } .bt-search, .bt-iconbtn, .bt-burger { width: 32px; height: 32px; } .bt-search__toggle { flex: 0 0 30px; width: 30px; height: 30px; } .bt-cart { height: 34px; padding: 0 9px; gap: 5px; font-size: 13px; } .bt-cart__count { min-width: 18px; height: 18px; line-height: 18px; font-size: 11.5px; } .bt-logo__mark { height: 20px; } .bt-marquee__group { font-size: 11px; gap: 18px; } } /* ========================================================================= Footer ========================================================================= */ .bt-footer { width: 100%; background: var(--bt-navy); color: #fff; } .bt-footer__inner { max-width: var(--bt-shell); margin: 0 auto; padding: clamp(40px, 6vw, 56px) var(--bt-gutter) 40px; } .bt-footer a { color: var(--bt-ink-1); transition: color 0.15s ease; } .bt-footer a:hover { color: var(--bt-cyan); } .bt-footer__rule { height: 1px; border: 0; background: rgba(255, 255, 255, 0.14); margin: 40px 0 44px; } .bt-promisegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; } .bt-promisegrid__title { display: block; font-family: var(--bt-display); font-size: 16.5px; font-weight: 600; margin-bottom: 7px; } .bt-promisegrid__copy { display: block; font-size: 14.5px; color: var(--bt-ink-2); } .bt-footer__grid { display: grid; /* Explicit tracks rather than auto-fit + span 2: auto-fit resolved to four tracks at some widths while the brand column needed five, dropping a link column onto its own row. */ grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 48px; } .bt-footer__brand { min-width: 0; } .bt-footer .bt-logo { color: #fff; margin-bottom: 20px; } .bt-footer .bt-logo__wordmark path { fill: #fff; } .bt-footer__blurb { margin: 0 0 20px; font-size: 15px; line-height: 1.7; color: var(--bt-ink-1); max-width: 38ch; } .bt-socials { display: flex; gap: 12px; margin-bottom: 28px; } .bt-socials a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); color: var(--bt-ink-1); transition: border-color 0.15s ease, color 0.15s ease; } .bt-socials a:hover { border-color: var(--bt-cyan); color: var(--bt-cyan); } .bt-signup__title { font-family: var(--bt-display); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin: 4px 0 12px; } .bt-signup__copy { margin: 0 0 16px; font-size: 14.5px; line-height: 1.7; color: var(--bt-ink-2); max-width: 44ch; } .bt-signup__row { display: flex; flex-wrap: wrap; gap: 12px; max-width: 420px; } .bt-signup__row input { flex: 1 1 220px; min-width: 0; font-family: var(--bt-sans); font-size: 15px; color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 10px; padding: 14px 16px; } .bt-signup__row input::placeholder { color: var(--bt-ink-2); } .bt-signup__row button { appearance: none; border: 0; border-radius: 10px; background: var(--bt-cyan); color: var(--bt-navy); font-family: var(--bt-display); font-size: 15.5px; font-weight: 600; padding: 14px 24px; cursor: pointer; transition: background 0.15s ease; } .bt-signup__row button:hover { background: var(--bt-cyan-bright); } .bt-signup__row.is-inactive { opacity: 0.45; } .bt-signup__row.is-inactive input, .bt-signup__row.is-inactive button { cursor: not-allowed; } .bt-signup__note { margin: 10px 0 0; font-size: 12.5px; color: var(--bt-ink-2); } .bt-footer__coltitle { font-family: var(--bt-display); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin: 0 0 14px; } .bt-footer__links a { display: block; font-size: 15px; line-height: 2.1; } .bt-footer__note { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--bt-ink-1); } .bt-footer__ruo { margin: 0 0 18px; font-size: 13.5px; line-height: 1.75; color: var(--bt-ink-2); } .bt-footer__ruo b { color: #fff; } /* ---------- Regulatory notice ---------- */ .bt-notice { margin: 0 0 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .bt-notice__summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 18px 2px; cursor: pointer; font-family: var(--bt-display); font-size: 15px; font-weight: 500; color: var(--bt-ink-3); } .bt-notice__summary::-webkit-details-marker { display: none; } .bt-notice__summary::marker { content: ""; } /* Clicking the notice left a focus ring across the bottom of the footer. The outline is dropped for pointer focus only — :focus-visible keeps a real indicator, because a keyboard user still has to see where they are. The supplied design removed it for both; that would make the notice impossible to operate by keyboard without guessing. */ .bt-notice__summary:focus:not(:focus-visible), .bt-notice:focus:not(:focus-visible) { outline: none; box-shadow: none; } .bt-notice__summary:focus-visible { outline: 2px solid var(--bt-cyan); outline-offset: 3px; border-radius: 8px; } .bt-notice__flag { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #e03a3a; color: #fff; font-family: var(--bt-display); font-size: 12px; font-weight: 700; line-height: 1; } .bt-notice__label { flex: 1; min-width: 0; } .bt-notice__chevron { transition: transform 0.2s ease; } .bt-notice[open] .bt-notice__chevron { transform: rotate(180deg); } .bt-notice__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: clamp(22px, 3vw, 56px); padding: 6px 2px 26px; border-top: 1px dashed rgba(255, 255, 255, 0.14); } .bt-notice__col { display: flex; flex-direction: column; gap: 20px; padding-top: 22px; } .bt-notice__item h4 { margin: 0 0 7px; display: flex; gap: 10px; align-items: baseline; font-family: var(--bt-display); font-size: 13.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; } .bt-notice__num { font-size: 12.5px; font-weight: 700; color: var(--bt-cyan); letter-spacing: 0.04em; } .bt-notice__item p { margin: 0; font-size: 13px; line-height: 1.72; color: var(--bt-ink-2); } .bt-notice__item b { color: #d8e9f4; } .bt-notice__updated { margin: 0 0 18px; font-size: 12.5px; color: var(--bt-ink-2); } .bt-footer__copyright { margin: 0; font-size: 13px; line-height: 1.7; color: var(--bt-ink-2); } /* ---------- Footer responsive ---------- The brand column carries the logo, blurb, socials and signup, so it needs roughly double the width of a link column. It keeps its 2-column span until there isn't room for three tracks, then goes full width. */ @media (max-width: 1100px) { .bt-footer__grid { /* auto-fit resolved to three tracks around 960px, wrapping a link column onto its own row. Four explicit tracks fit down to 900px. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .bt-notice__body { gap: 20px 36px; } } @media (max-width: 900px) { .bt-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .bt-footer__brand { grid-column: 1 / -1; } .bt-promisegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .bt-footer__rule { margin: 32px 0 34px; } .bt-specgrid { gap: 28px 32px; } } @media (max-width: 680px) { .bt-notice__body { grid-template-columns: minmax(0, 1fr); padding-bottom: 20px; } .bt-notice__col:last-child { padding-top: 0; } .bt-notice__summary { align-items: flex-start; font-size: 14.5px; line-height: 1.5; } .bt-notice__flag, .bt-notice__chevron { margin-top: 2px; } .bt-footer__inner { padding-bottom: 32px; } } @media (max-width: 520px) { .bt-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } .bt-promisegrid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .bt-footer__brand { grid-column: auto; } .bt-signup__row { max-width: none; } .bt-signup__row input, .bt-signup__row button { flex: 1 1 100%; } .bt-specgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .bt-specgrid dd { font-size: 22px; } .bt-footer__blurb, .bt-signup__copy { max-width: none; } } /* ---------- Phone header sizing (must follow the compact tiers) ---------- The 400/330/305 tiers above shrink the controls to 36-32px because they were written when search and the account link still shared this row. Below 600px both are gone, so the two remaining controls can hold a 44px tap target the whole way down and the prescription button absorbs the leftover width instead. These blocks come last so they win over those tiers. */ @media (max-width: 600px) { .bt-cart, .bt-burger { width: 44px; height: 44px; flex: 0 0 44px; } .bt-cart { padding: 0; } } @media (max-width: 400px) { .bt-rx { font-size: 12.5px; padding: 12px 12px; } } @media (max-width: 340px) { /* Last resort before the row would have to break: the two 44px controls are held, and the logo and the button's side padding give way instead. At 320px this leaves ~6px of slack on the row. */ .bt-rx { font-size: 11.5px; padding: 13px 7px; letter-spacing: -0.01em; } .bt-logo__wordmark { height: 17px; } } /* The cart glyph is a phone-only affordance: above 600px the button still reads as a labelled "Cart" pill exactly as before, so the icon stays out of it rather than widening the desktop bar. */ .bt-cart__icon { display: none; } @media (max-width: 600px) { .bt-cart__icon { display: block; } } /* Wordmark step-down: it is roughly 40px wider than the mark it replaces on phones, so the row needs it to shrink a tier earlier than the mark did. */ @media (max-width: 400px) { .bt-logo__wordmark { height: 20px; } } /* Narrowest phone tier (~320px and below). Must come last: the 400px step-down above also matches here, and both set the same property. The two 44px controls are held; the wordmark, the button's type and the row gap give way instead. Leaves ~11px of slack at 320px. */ @media (max-width: 340px) { .bt-bar__inner { gap: 7px; } .bt-logo__wordmark { height: 16px; } .bt-rx { font-size: 11px; padding: 13px 6px; } } /* ---------- Block-built header bridge ---------- The header shell is authored in parts/header.html as core blocks, so a few pieces arrive wrapped differently than the old PHP markup: • announcements are core/paragraph, not bare • the prescription button is core/button, so the pill is the inner while the flex item is the wrapping

• core/group adds its own wrapper around .bt-bar__inner and .bt-actions These rules map the design onto that markup. Everything above is untouched. */ /* Core groups carry a layout class that sets its own display; the header's own rules must win. */ .bt-header .wp-block-group.bt-marquee__track, .bt-header .wp-block-group.bt-marquee__group, .bt-header .wp-block-group.bt-bar__inner, .bt-header .wp-block-group.bt-actions { display: flex; } /* Announcements: paragraphs rather than spans, with the separator dot moved from its own element into a pseudo-element so the editor shows seven plain text fields and nothing else. */ .bt-marquee__group > p { margin: 0; display: flex; align-items: center; gap: 34px; white-space: nowrap; } .bt-marquee__group > p::after { content: "●"; color: var(--bt-cyan); } /* The prescription button: core/button nests an inside a

. The div stays the flex item (mobile ordering and centring target it) and the anchor takes the pill. */ .bt-rx-wrap { display: contents; } .bt-bar__inner .bt-rx { background: none; padding: 0; border-radius: 0; } .bt-bar__inner .bt-rx .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; background: var(--bt-cyan); color: var(--bt-navy); font-family: var(--bt-display); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; border-radius: 999px; padding: 12px 20px; white-space: nowrap; text-decoration: none; transition: background 0.15s ease; } .bt-bar__inner .bt-rx .wp-block-button__link:hover, .bt-bar__inner .bt-rx .wp-block-button__link:focus-visible { background: var(--bt-cyan-bright); } /* The phone tiers sized the old single-element button; retarget them. */ @media (max-width: 600px) { .bt-bar__inner .bt-rx .wp-block-button__link { font-size: 13px; padding: 11px 14px; } } @media (max-width: 400px) { .bt-bar__inner .bt-rx .wp-block-button__link { font-size: 12.5px; padding: 12px 12px; } } @media (max-width: 340px) { .bt-bar__inner .bt-rx .wp-block-button__link { font-size: 11px; padding: 13px 6px; letter-spacing: -0.01em; } } /* The bridge above gives .bt-actions a class-plus-class selector to beat the core layout class, which also outranks the phone rule that dissolves the wrapper — so the contents rule needs the same weight to win back below 600px. Without this the cart and burger drop to a second row. */ @media (max-width: 600px) { .bt-header .wp-block-group.bt-actions { display: contents; } } /* The core/buttons wrapper has to dissolve so the button itself is the flex item the header orders. Core ships .wp-block-buttons.is-layout-flex with two classes, so a single-class rule loses to it — hence the header prefix. Same reason for restating the auto margin that centres the button on phones. */ .bt-header .wp-block-buttons.bt-rx-wrap { display: contents; } @media (max-width: 600px) { .bt-bar__inner .wp-block-button.bt-rx { margin-inline: auto; } }