/*
Theme Name: TBFS
Theme URI: https://www.thebreastfeedingshop.com
Author: The Breastfeeding Shop
Description: Lean block theme for thebreastfeedingshop.com. No page builders.
Version: 0.4.21
Requires at least: 6.5
Requires PHP: 8.1
License: Proprietary
Text Domain: tbfs
*/

/* ---------- Section rhythm ----------
   Every top-level band on the page is a .tbfs-section; spacing lives here,
   not in block attributes, so the whole page scales together.

   Design tokens (--wp--custom--*) are defined in theme.json settings.custom:
   band spacing, border/text/footer colors, and card shadows. Change them
   there, not here. */

.tbfs-section {
	padding: var(--wp--custom--spacing--band-y) var(--wp--custom--spacing--band-x);
}

/* WP gives each template-level section (header/main/footer) a 24px top
   margin as default page rhythm. Regular pages rely on it, but the homepage
   and payer landing pages are full-bleed bands that must butt together — so
   zero it on those templates only. */
.home .wp-site-blocks > *,
.page-template-page-payer .wp-site-blocks > * {
	margin-block-start: 0;
}

/* Same rule one level down: payer page CONTENT is also full-bleed bands.
   Without this, the default block gap shows as a thin white bar wherever
   two colored sections meet (e.g. cream products against the teal FAQ on
   generated pages). */
.page-template-page-payer .wp-block-post-content > * {
	margin-block-start: 0;
}

.tbfs-section-title {
	text-wrap: balance;
	margin-bottom: 0.6rem;
	letter-spacing: -0.01em;
}

/* ---------- Header ---------- */

/* The ReviewTube vendor stylesheet sets html,body{overflow-y:scroll}, which
   makes <body> a scroll container and silently disables position:sticky on
   every page it loads on. Restore the default; the modal scroll-locks
   (Woo + nav overlay) are excluded so they still work. */
body:not(.wc-modal--open):not(.wc-block-product-gallery-modal-open) {
	overflow: visible !important;
}

/* Full-bleed strips inside constrained containers stretch with 100vw, which
   includes the scrollbar gutter; clip (not hidden - that would re-enable a
   scroll container and kill position:sticky) the few stray pixels. */
html {
	overflow-x: clip;
}

/* Sticky lives on the template-part wrapper: .tbfs-header inside it is
   exactly the wrapper's height, so sticking the inner div has no room to
   travel and silently does nothing. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* The fixed admin bar overlays the viewport top when logged in. */
body.admin-bar header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.tbfs-header {
	z-index: 50;
	border-bottom: 1px solid var(--wp--custom--color--border-warm);
	background: #fff;
	padding: 0.8rem var(--wp--custom--spacing--band-x);
	transition: box-shadow 0.25s ease, padding 0.2s ease;
}

/* Blur only where the mobile overlay can't open: backdrop-filter turns the
   header into the containing block for position:fixed descendants, which
   would trap the nav overlay inside the header's box. */
@media (min-width: 1024px) {
	.tbfs-header {
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(8px);
	}
}

/* The header nav switches to the hamburger overlay below 1024px, not core's
   600px: between those widths the tab row would wrap into stacked lines,
   which reads broken and misplaces the mega panels. Core only offers 600px
   ("mobile") or always-on, so we re-hide the inline nav and re-show the
   open button in the gap ourselves. */
@media (min-width: 600px) and (max-width: 1023px) {
	.tbfs-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.tbfs-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
}

/* Desktop (>=1024px): the tab row may never wrap. Tabs, cart and CTA sit on
   one nowrap line under the logo; type and gaps flex with the viewport so
   the row always fits the rail. */
@media (min-width: 1024px) {
	.tbfs-header .wp-block-group:has(> .tbfs-nav) {
		flex-wrap: nowrap;
		gap: clamp(0.6rem, 1.2vw, 1.5rem);
	}

	.tbfs-nav .wp-block-navigation__container {
		flex-wrap: nowrap;
		gap: clamp(0.7rem, 1.4vw, 1.4rem);
	}

	.tbfs-nav .wp-block-navigation-item {
		white-space: nowrap;
	}
}

/* Content sits flush under the header on every page: the root block gap
   otherwise opens a white strip between the header and hero bands. Some
   templates wrap content in <main>, Woo product pages in a plain div, so
   this zeroes every top-level child except the footer, which keeps its
   breathing room above the band. */
.wp-site-blocks > :not(footer) {
	margin-block-start: 0;
}

/* .is-scrolled is toggled by scroll-reveal.js once the page moves.
   Scrolled = condensed: tighter padding, smaller logo and CTA, so the
   sticky header hands most of the screen back while browsing. */
.tbfs-header.is-scrolled {
	box-shadow: 0 6px 20px rgba(63, 40, 34, 0.08);
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

.tbfs-header.is-scrolled .tbfs-logo a {
	font-size: 1.05rem;
}

.tbfs-header.is-scrolled .tbfs-header-cta .wp-block-button__link {
	padding: 0.4rem 1rem;
	font-size: 0.88rem;
}

.tbfs-header.is-scrolled > .alignwide {
	row-gap: 0.15rem;
}

/* Wide screens: the condensed header collapses to a single row (logo left,
   nav + cart + CTA right). Everything shrinks just enough that the full nav
   fits inside the 1180px rail; below 1260px it stays a two-row condensed
   header rather than clipping. Measured at 1280px: logo 191px + group 953px
   inside the 1180px rail. */
@media (min-width: 1260px) {
	.tbfs-header.is-scrolled > .alignwide {
		flex-wrap: nowrap;
	}

	.tbfs-header.is-scrolled .tbfs-logo a {
		font-size: 1rem;
	}

	.tbfs-header.is-scrolled .tbfs-nav a {
		font-size: 0.85rem;
		white-space: nowrap;
	}

	.tbfs-header.is-scrolled .wp-block-group:has(> .tbfs-nav) {
		gap: 0.75rem;
		flex-wrap: nowrap;
	}

	.tbfs-header.is-scrolled .tbfs-nav .wp-block-navigation__container {
		flex-wrap: nowrap;
		gap: 0.9rem;
	}

	.tbfs-header.is-scrolled .tbfs-header-cta .wp-block-button__link {
		padding: 0.4rem 0.85rem;
		font-size: 0.85rem;
	}
}

.tbfs-header > .alignwide {
	flex-wrap: wrap;
	row-gap: 0.4rem;
	min-width: 0;
}

.tbfs-logo a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	color: var(--wp--preset--color--teal-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: font-size 0.2s ease;
}

.tbfs-nav a {
	font-weight: 500;
	font-size: 0.95rem;
}

.tbfs-header-cta .wp-block-button__link {
	padding: 0.55rem 1.3rem;
	white-space: nowrap;
}

/* Desktop tab-row typography flexes with the viewport so the nowrap row
   above always fits the rail (see the never-wrap block near the top). */
@media (min-width: 1024px) {
	.tbfs-nav a {
		font-size: clamp(0.83rem, 0.45vw + 0.55rem, 0.95rem);
	}

	.tbfs-header-cta .wp-block-button__link {
		font-size: clamp(0.85rem, 0.45vw + 0.57rem, 1rem);
		padding: 0.5rem clamp(0.85rem, 1.2vw, 1.3rem);
	}
}

/* ---------- Mega menu ----------
   Aeroflow-style panels. The nav block's own submenus are for the overlay
   only; on desktop (>=1024px, our raised nav breakpoint) they are hidden
   and the .tbfs-mega-panel groups open under the header instead.
   Panels are plain blocks in parts/header.html, editable in the Site Editor;
   mega-menu.js toggles .is-open (hover/focus, Escape, click-outside). */

@media (min-width: 1024px) {

	/* desktop: core dropdowns stay closed; panels take over. !important
	   because the block-library stylesheet loads after this one and wins
	   the cascade at equal specificity. */
	.tbfs-nav .wp-block-navigation__submenu-container {
		display: none !important;
	}

	/* chevron stays as the "this opens a panel" affordance */
	.tbfs-nav .wp-block-navigation__submenu-icon {
		margin-left: 0.3rem;
	}

	/* trigger item shows coral when its panel is open */
	.tbfs-nav .tbfs-mm.is-open > a {
		color: var(--wp--preset--color--coral);
	}

	.tbfs-mega-panels {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		/* zero the block margin (WP's default flow gap made the panel float
		   below a see-through strip) but keep horizontal auto: the header's
		   constrained layout caps this container at 1180px, and auto margins
		   are what center it on wider screens */
		margin: 0 auto !important;
	}

	.tbfs-mega-panel {
		display: none;
		/* centered card at any viewport width (don't stretch on wide Macs) */
		max-width: 1180px;
		margin: 0 auto !important;
		background: #fff;
		border-top: 1px solid var(--wp--custom--color--border-warm);
		border-radius: 0 0 22px 22px;
		box-shadow: 0 30px 60px rgba(63, 40, 34, 0.18);
		padding: 2rem var(--wp--custom--spacing--band-x) 2.2rem;
	}

	.tbfs-mega-panel.is-open {
		display: block;
		animation: tbfs-mega-in 0.18s ease;
	}

	@keyframes tbfs-mega-in {
		from { opacity: 0; transform: translateY(-6px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	.tbfs-mega-cols {
		gap: clamp(1.5rem, 3vw, 3rem);
	}

	/* --- Shop panel: category rail on the left, swappable panes beside it.
	   Each .tbfs-rail--<key> link pairs with .tbfs-pane--<key>; mega-menu.js
	   moves .is-active between them on hover/focus. Rail links are real
	   links, so tap/click still navigates to the category page. --- */
	.tbfs-mega-shop {
		display: grid;
		grid-template-columns: 230px minmax(0, 1fr);
		gap: clamp(1.5rem, 2.5vw, 2.5rem);
	}

	ul.tbfs-mega-rail {
		list-style: none;
		margin: 0;
		padding: 0.2rem 1.4rem 0.2rem 0;
		border-right: 1px solid var(--wp--custom--color--border-warm);
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
	}

	ul.tbfs-mega-rail li {
		margin: 0;
	}

	.tbfs-mega-rail-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.6rem;
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 600;
		font-size: 1.02rem;
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
		padding: 0.72rem 0.95rem;
		border-radius: 12px;
		transition: background 0.16s ease, color 0.16s ease;
	}

	.tbfs-mega-rail-link::after {
		content: "\2192";
		color: var(--wp--preset--color--coral);
		opacity: 0;
		transform: translateX(-5px);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}

	.tbfs-mega-rail-link.is-active {
		background: var(--wp--preset--color--coral-soft);
		color: var(--wp--preset--color--teal-dark);
	}

	.tbfs-mega-rail-link.is-active::after {
		opacity: 1;
		transform: translateX(0);
	}

	.tbfs-mega-pane {
		display: none;
	}

	.tbfs-mega-pane.is-active {
		display: block;
		animation: tbfs-pane-in 0.22s ease;
	}

	@keyframes tbfs-pane-in {
		from { opacity: 0; transform: translateX(10px); }
		to   { opacity: 1; transform: translateX(0); }
	}

	@media (prefers-reduced-motion: reduce) {
		.tbfs-mega-panel.is-open,
		.tbfs-mega-pane.is-active {
			animation: none;
		}
	}
}

/* desktop: the CTA lives in the header as a button; hide its nav-item twin */
@media (min-width: 1024px) {
	.tbfs-nav .tbfs-nav-cta {
		display: none;
	}
}

/* ---------- Overlay header + accordion (<1024px) ----------
   The nav overlay is the subnav here; mega panels never render. Core CSS
   forces every submenu open inside the overlay, so we collapse them and let
   core's own chevron toggle buttons (they flip aria-expanded) drive an
   accordion. !important mirrors the desktop overrides: block-library CSS
   loads after this sheet. */
@media (max-width: 1023px) {
	.tbfs-mega-panels {
		display: none;
	}

	/* one row: logo left; cart + hamburger right */
	.tbfs-header {
		padding: 0.7rem 1.1rem;
	}

	.tbfs-header > .alignwide {
		flex-wrap: nowrap;
	}

	/* three icons now (account, cart, hamburger): the row must never wrap
	   or the hamburger drops to a second line beside the logo */
	.tbfs-header .wp-block-group:has(> .tbfs-nav) {
		gap: 0.4rem;
		flex-wrap: nowrap;
		flex-shrink: 0;
	}

	/* the header CTA button is too wide for the row; .tbfs-nav-cta inside
	   the overlay menu replaces it on mobile */
	.tbfs-header .tbfs-header-cta {
		display: none;
	}

	/* cart before hamburger so the menu button sits in the thumb corner */
	.tbfs-header .wp-block-woocommerce-mini-cart {
		order: 1;
	}

	.tbfs-nav {
		order: 2;
	}

	.tbfs-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 4.2rem 1.4rem 2rem;
	}

	/* --- accordion: collapsed by default, chevron opens ---
	   Keyed off .tbfs-acc-open (mega-menu.js), NOT aria-expanded: since
	   WP 6.9 core pins every toggle to aria-expanded="true" while the
	   overlay is open, so aria can't drive the collapse. */
	.tbfs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		display: none !important;
	}

	.tbfs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.tbfs-acc-open > .wp-block-navigation__submenu-container {
		display: flex !important;
	}

	/* core hides the chevron toggles inside the overlay (its submenus used
	   to be always-open there); the accordion needs them back */
	.tbfs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		display: flex !important;
		align-items: center;
	}

	/* the menu list shrinks to its widest row by default; fill the overlay.
	   Row rhythm comes from the rows' own padding, not the layout gap. */
	.tbfs-nav .is-menu-open .wp-block-navigation__container {
		width: 100%;
		gap: 0 !important;
	}

	/* top-level rows: label left, chevron right, divider under each */
	.tbfs-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--wp--custom--color--border-warm);
	}

	.tbfs-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
		font-size: 1.05rem;
		font-weight: 600;
		padding: 0.85rem 0;
		flex: 1;
	}

	/* generous tap target for the toggle; rotate when open. width: auto —
	   core's 0.6em fixed width plus this padding leaves a 0px content box
	   (border-box) and the chevron vanishes */
	.tbfs-nav .is-menu-open .wp-block-navigation-submenu__toggle {
		width: auto;
		padding: 0.85rem 0.4rem 0.85rem 1.2rem;
		margin: 0;
	}

	/* !important: core's ".wp-block-navigation .wp-block-navigation__submenu-icon
	   svg { width: inherit }" ties on specificity and loads later, which
	   collapses the chevron to 0px */
	/* transform !important on both: core rotates the icon off aria-expanded,
	   which WP 6.9 pins to "true" for the whole overlay (see accordion note) */
	.tbfs-nav .is-menu-open .wp-block-navigation-submenu__toggle svg {
		width: 15px !important;
		height: 15px !important;
		transform: none !important;
		transition: transform 0.18s ease;
	}

	.tbfs-nav .is-menu-open .tbfs-acc-open .wp-block-navigation-submenu__toggle svg {
		transform: rotate(180deg) !important;
	}

	/* child links: indented, quieter, own full-width block under the row.
	   !important where core's overlay CSS re-pads them */
	.tbfs-nav .is-menu-open .wp-block-navigation__submenu-container {
		flex-basis: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 0 0 0.8rem 0.9rem !important;
	}

	.tbfs-nav .is-menu-open .wp-block-navigation__submenu-container a {
		font-size: 0.95rem;
		font-weight: 400;
		color: var(--wp--preset--color--muted);
		padding: 0.5rem 0 !important;
	}

	/* overlay CTA: styled as the coral pill the header shows on desktop */
	.tbfs-nav .is-menu-open .wp-block-navigation__container > .tbfs-nav-cta {
		border-bottom: none;
		margin-top: 1.1rem;
	}

	.tbfs-nav .is-menu-open .tbfs-nav-cta > a {
		flex: 1;
		text-align: center;
		background: var(--wp--preset--color--coral);
		color: #fff;
		border-radius: 999px;
		padding: 0.8rem 1.3rem;
	}
}

/* The ReviewTube band pins itself bottom-left with a maxed-out z-index, on
   top of the nav overlay (z 100000) — it was covering the menu's CTA and the
   cart drawer's checkout buttons. Hide it whenever a modal (menu overlay,
   mini-cart drawer) is open. */
html.has-modal-open #seesawengage,
html.has-modal-open #survey-frame,
html.has-modal-open #sb-frame,
html.has-modal-open #avatar-frame,
html.has-modal-open .ss-flip-container,
/* the block mini-cart sets no page class when open; key off its overlay */
html:has(.wc-block-components-drawer__screen-overlay--with-slide-in) #seesawengage,
html:has(.wc-block-components-drawer__screen-overlay--with-slide-in) #survey-frame,
html:has(.wc-block-components-drawer__screen-overlay--with-slide-in) #sb-frame,
html:has(.wc-block-components-drawer__screen-overlay--with-slide-in) #avatar-frame,
html:has(.wc-block-components-drawer__screen-overlay--with-slide-in) .ss-flip-container {
	display: none !important;
}

/* ---------- Mini-cart drawer ----------
   WooCommerce's block mini-cart, restyled to the site: padded serif title,
   product photos on white tiles, quiet serif names, one price per line,
   pill quantity control, and a cream footer band instead of a gray rule.
   The unit price and the product description are hidden here: the line
   total already shows the price, and some short descriptions carry their
   own headings that blow up the drawer. */

.wc-block-mini-cart__drawer .wc-block-components-drawer__content {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close-wrapper {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
	transition: background-color 0.2s ease;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover,
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus-visible {
	background: var(--wp--preset--color--cream);
}

/* The drawer focuses its close button on open; use the site's teal ring
   for keyboard focus and no ring for a tap or click. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus {
	outline: none;
	box-shadow: none;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal-dark);
	outline-offset: 2px;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	margin: 0;
	padding: 1.5rem 4.5rem 1rem 1.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.6rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	mask-image: none;
}

.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-title-items-counter-block {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__items {
	padding: 0.25rem 1.5rem 1rem;
}

/* table.* prefix: outranks Woo's own row grid and cell padding */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: 0 1rem;
	padding: 1rem 0;
	border: 0;
}

.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	padding: 0;
	width: auto;
}

/* The photo is the tile: a true square with rounded corners (padding
   inside a capped width had made it a tall rectangle). */
.wc-block-mini-cart__drawer .wc-block-cart-items__row .wc-block-cart-item__image img {
	box-sizing: border-box;
	width: 100%;
	min-width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	padding: 0;
	background: #fff;
	border: 1px solid var(--wp--custom--color--border-warm);
	border-radius: 14px;
}

/* Woo keeps a second, [hidden] copy of the photo in each cell; only the
   visible one is displayed as a block. */
.wc-block-mini-cart__drawer .wc-block-cart-item__image img:not([hidden]) {
	display: block;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__image img[hidden] {
	display: none;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__product,
.wc-block-mini-cart__drawer .wc-block-cart-item__total {
	padding: 0;
}

/* one even rhythm under the name: details, then the quantity row */
.wc-block-mini-cart__drawer .wc-block-cart-item__wrap > * {
	margin-top: 0;
	margin-bottom: 0;
}

.wc-block-mini-cart__drawer a.wc-block-components-product-name {
	display: block;
	margin: 0 0 0.2rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wc-block-mini-cart__drawer a.wc-block-components-product-name:hover,
.wc-block-mini-cart__drawer a.wc-block-components-product-name:focus-visible {
	color: var(--wp--preset--color--teal-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__wrap > .wc-block-cart-item__prices,
.wc-block-mini-cart__drawer .wc-block-cart-item__wrap .wc-block-components-product-metadata__description {
	display: none !important;
}

.wc-block-mini-cart__drawer .wc-block-components-product-details {
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

.wc-block-mini-cart__drawer .wc-block-cart-item__total {
	font-weight: 700;
	font-size: 1rem;
	padding-top: 0.15rem;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.6rem;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
	width: auto;
	margin: 0;
	border: 1px solid var(--wp--custom--color--border-warm);
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector::after {
	border: 0;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input {
	width: 2.25rem;
	min-width: 0;
	font-weight: 600;
	background: transparent;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button {
	min-width: 36px;
	height: 36px;
	color: var(--wp--preset--color--teal-dark);
	opacity: 1;
	transition: background-color 0.2s ease;
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: var(--wp--preset--color--teal-light);
}

.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:disabled {
	color: var(--wp--custom--color--border-warm);
}

.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--muted);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link:hover,
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link:focus-visible {
	color: var(--wp--preset--color--coral-dark);
	background: var(--wp--preset--color--coral-soft);
}

/* Footer: a cream band (tone step) instead of a gray rule */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
	margin-top: auto;
	padding: 1.25rem 1.5rem 1.5rem;
	background: var(--wp--preset--color--cream);
	border: 0;
	box-shadow: none;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer::before {
	display: none;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal {
	padding: 0;
	margin: 0 0 1rem;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.2rem;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions {
	display: flex;
	flex-direction: row-reverse;
	gap: 0.75rem;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button {
	flex: 1 1 0;
	min-height: 48px;
	margin: 0;
	padding: 0.7rem 1.25rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1rem;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout {
	background: var(--wp--preset--color--coral);
	color: #fff;
	border: 2px solid var(--wp--preset--color--coral);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover {
	background: var(--wp--preset--color--coral-dark);
	border-color: var(--wp--preset--color--coral-dark);
	color: #fff;
}

/* Woo's outline style adds a dark inset ring and dark text; outrank it */
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-mini-cart__shopping-button {
	background: transparent;
	color: var(--wp--preset--color--teal-dark);
	border: 2px solid var(--wp--preset--color--teal-dark);
	box-shadow: none;
}

.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-mini-cart__footer-cart:hover,
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-mini-cart__shopping-button:hover {
	background: var(--wp--preset--color--teal-dark);
	color: #fff;
}

.wc-block-mini-cart__drawer .wc-block-components-button:active {
	transform: translateY(1px);
}

/* Empty cart */
.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper {
	padding: 4rem 1.5rem 2rem;
	text-align: center;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper p {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.35rem;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button {
	min-height: 48px;
	padding: 0.7rem 1.75rem;
	border-radius: 999px;
	font-weight: 600;
}

@media (max-width: 480px) {
	/* stacked: checkout (the main action) on top */
	.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions {
		flex-direction: column-reverse;
	}
	.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 64px 1fr auto;
	}
}

.tbfs-mega-head {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.7rem;
}

/* Panel link groups are List blocks so each link is its own editable item */
ul.tbfs-mega-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.tbfs-mega-links li {
	margin: 0;
}

.tbfs-mega-links a {
	display: block;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	padding: 0.3rem 0;
}

.tbfs-mega-links a:hover {
	color: var(--wp--preset--color--teal-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* "View all" lead link: teal with an arrow */
.tbfs-mega-links a.tbfs-mega-viewall {
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
}

.tbfs-mega-links a.tbfs-mega-viewall::after {
	content: " \2192";
}

/* brand list flows into two columns */
.tbfs-mega-brandlist {
	columns: 2;
	column-gap: 1.5rem;
}

.tbfs-mega-text {
	font-size: 0.92rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
	margin: 0 0 0.8rem;
}

/* promo card (featured product / contact) */
.tbfs-mega-promo {
	background: var(--wp--preset--color--coral-soft);
	border-radius: 16px;
	padding: 1.2rem 1.3rem 1.3rem;
	height: 100%;
}

.tbfs-mega-promo-img {
	margin: 0 0 0.9rem;
}

.tbfs-mega-promo-img img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: contain;
	border-radius: 10px;
}

/* photos (vs cut-out product shots) fill their frame */
.tbfs-mega-promo-photo img {
	object-fit: cover;
}

.tbfs-mega-promo-tag {
	display: inline-block;
	background: var(--wp--preset--color--coral);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.28rem 0.6rem;
	margin: 0 0 0.5rem;
}

.tbfs-mega-promo-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.08rem;
	line-height: 1.3;
	margin: 0 0 0.35rem;
}

.tbfs-mega-promo-text {
	font-size: 0.85rem;
	color: var(--wp--custom--color--text-warm);
	margin: 0 0 0.9rem;
}

.tbfs-mega-promo-btn .wp-block-button__link {
	padding: 0.5rem 1.2rem;
}

.tbfs-mega-contact {
	background: var(--wp--preset--color--teal-light);
}

.tbfs-mega-phone {
	margin: 0 0 0.9rem;
}

.tbfs-mega-phone a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--wp--preset--color--teal-dark);
	text-decoration: none;
}

.tbfs-mega-phone a:hover {
	text-decoration: underline;
}

/* ---------- Hero (Aeroflow-style split band) ---------- */

.tbfs-hero-split {
	display: grid;
	/* capped tracks + centered: on very wide screens the text and photo stay
	   near each other in the middle while the coral band runs full-bleed */
	grid-template-columns: minmax(0, 780px) minmax(0, 640px);
	justify-content: center;
	background: var(--wp--preset--color--coral-soft);
	position: relative;
	overflow: hidden;
}

.tbfs-hero-split__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem);
	/* heavier left inset so the text block sits comfortably in from the
	   viewport edge on wide screens */
	padding-left: clamp(1.5rem, 7vw, 7.5rem);
	position: relative;
	overflow: hidden;
}

.tbfs-hero-split__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
}

/* Photo composition: rounded card over an organic blob, with floating badges */
.tbfs-hero-figure {
	position: relative;
	width: min(100%, 380px);
}

.tbfs-hero-figure .wp-block-image {
	margin: 0;
}

.tbfs-hero-figure::before {
	content: "";
	position: absolute;
	inset: -8% -12% -5% -12%;
	background: var(--wp--preset--color--teal-light);
	border-radius: 55% 45% 52% 48% / 48% 55% 45% 52%;
	z-index: 0;
}

.tbfs-hero-figure img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	/* The frame owns the shape; the photo fills it via cover. Weekly image
	   swaps then never move the badges/blob, whatever the upload's size.
	   --tbfs-hero-focus nudges the crop when a subject sits off-center
	   (e.g. "center 30%" to favor a face near the top). */
	aspect-ratio: 838 / 1100;
	object-fit: cover;
	object-position: var(--tbfs-hero-focus, center);
	border-radius: 28px 28px 28px 96px;
	border: 6px solid #fff;
	/* The photo and its tags float over the blob; a soft warm shadow keeps
	   white product shots from reading as a flat white shape. */
	box-shadow: 0 18px 40px rgba(63, 40, 34, 0.1);
}

/* Landscape mode: add is-landscape to .tbfs-hero-figure when the weekly
   photo is wider than tall. Wider, shorter frame with its own badge/blob
   tuning; the default stays portrait. */
.tbfs-hero-figure.is-landscape {
	width: min(100%, 620px);
}

/* A landscape photo needs a wider media track than the portrait 640px or
   it reads small next to the text block; rebalance the two hero columns
   and slim the media padding when the figure is landscape. Desktop only:
   the :has() selectors outweigh the single-class mobile stacking rules,
   so without the media query they'd force two columns on phones too. */
@media (min-width: 782px) {
	.tbfs-hero-split:has(.tbfs-hero-figure.is-landscape) {
		grid-template-columns: minmax(0, 720px) minmax(0, 740px);
	}

	.tbfs-hero-split:has(.tbfs-hero-figure.is-landscape) .tbfs-hero-split__media {
		padding-left: clamp(1.5rem, 3vw, 2.5rem);
		padding-right: clamp(1.5rem, 3vw, 2.5rem);
	}
}

.tbfs-hero-figure.is-landscape img {
	aspect-ratio: 3 / 2;
}

/* The blob's inset percentages resolve against the frame (top/bottom vs
   height, left/right vs width), so the short-wide frame needs more vertical
   bleed and less horizontal to keep the same organic hug. */
.tbfs-hero-figure.is-landscape::before {
	inset: -12% -7% -9% -7%;
}

.tbfs-hero-badge {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	background: #fff;
	border-radius: 16px;
	padding: 0.6rem 0.95rem;
	/* the tags overlap the (often white) photo: they need their own lift */
	box-shadow: 0 10px 26px rgba(63, 40, 34, 0.16);
}

.tbfs-hero-badge p {
	margin: 0;
}

/* Badges drift gently on the hero photo; the two run at different speeds
   and phases so they never move in lockstep. */
@media (prefers-reduced-motion: no-preference) {
	.tbfs-hero-badge {
		animation: tbfs-float 6s ease-in-out infinite;
	}
	.tbfs-hero-badge--new {
		animation-duration: 7s;
		animation-delay: 1.2s;
	}
}

@keyframes tbfs-float {
	0%, 100% {
		translate: 0 0;
	}
	50% {
		translate: 0 -7px;
	}
}

.tbfs-hero-badge--specs {
	left: -14%;
	bottom: 10%;
}

.tbfs-hero-badge--new {
	top: -4%;
	right: -11%;
}

/* Landscape frame is wider, so the same percentages would throw the badges
   far outside it; pull the horizontal offsets in and lift --new a touch so
   it clears the shorter top edge. */
.tbfs-hero-figure.is-landscape .tbfs-hero-badge--specs {
	left: -7%;
	bottom: -6%;
}

.tbfs-hero-figure.is-landscape .tbfs-hero-badge--new {
	top: -7%;
	right: -5%;
}

.tbfs-hero-badge__tag {
	flex: none;
	background: var(--wp--preset--color--coral);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.28rem 0.6rem;
}

.tbfs-hero-badge__icon {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
	color: #fff;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.tbfs-hero-badge__text {
	line-height: 1.3;
	font-size: 0.78rem;
	color: var(--wp--custom--color--text-warm);
}

.tbfs-hero-badge__text strong {
	display: block;
	font-size: 0.92rem;
	color: var(--wp--preset--color--contrast);
}


.tbfs-eyebrow,
p.is-style-tbfs-eyebrow {
	text-wrap: balance;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--teal-dark);
	margin: 0 0 1.1rem;
}

.tbfs-hero-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(2rem, 3.3vw + 1rem, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 1.1rem;
	max-width: 13em;
	text-wrap: balance;
}

/* Desktop: the headline is sized from its own column (a container), so it
   is as large as two lines allow at every width, and may run into the
   panel's right padding (the gap before the photo). */
@media (min-width: 782px) {
	.tbfs-hero-split__panel {
		container-type: inline-size;
	}
	.tbfs-hero-split .tbfs-hero-title {
		font-size: clamp(2rem, 10.4cqi, 3.75rem);
		margin-right: -3.5rem;
		max-width: none;
	}
}

.tbfs-hero-sub {
	font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem);
	color: var(--wp--custom--color--text-warm);
	max-width: 32em;
	margin: 0 0 1.9rem;
	line-height: 1.7;
}

.tbfs-hero-actions {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	flex-wrap: wrap;
}

/* Hero buttons are core button blocks; theme.json supplies the coral pill,
   these classes add the shadow/hover lift and turn the second one into a
   plain text link. */
.tbfs-hero-btn .wp-block-button__link {
	font-size: 1rem;
	padding: 0.85rem 2.1rem;
	transition: transform 0.15s ease, background 0.15s ease;
}

.tbfs-hero-btn .wp-block-button__link:hover {
	transform: translateY(-1px);
}

.tbfs-hero-link .wp-block-button__link,
.is-style-tbfs-text-link .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
	font-size: 1rem;
	padding: 0;
	border-radius: 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.tbfs-hero-link .wp-block-button__link:hover,
.is-style-tbfs-text-link .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.tbfs-hero-note {
	font-size: 0.85rem;
	color: var(--wp--custom--color--text-warm-light);
	margin: 1.4rem 0 0;
}

@media (max-width: 781px) {
	.tbfs-hero-split {
		grid-template-columns: 1fr;
	}
	.tbfs-hero-split__media {
		padding: 1rem 2rem 3rem;
	}
	.tbfs-hero-split__panel {
		padding-bottom: 1.5rem;
	}
	.tbfs-hero-figure {
		width: min(72vw, 300px);
	}
	/* A 3:2 image at 300px wide is only 200px tall and reads tiny on a
	   phone; let landscape run wider so it keeps presence when stacked. */
	.tbfs-hero-figure.is-landscape {
		width: min(84vw, 400px);
	}
	.tbfs-hero-figure::after {
		right: -24px;
		bottom: -18px;
		width: 96px;
		height: 96px;
	}
	.tbfs-hero-badge {
		padding: 0.45rem 0.7rem;
		border-radius: 12px;
		gap: 0.45rem;
	}
	.tbfs-hero-badge__text {
		font-size: 0.68rem;
	}
	.tbfs-hero-badge__text strong {
		font-size: 0.8rem;
	}
	.tbfs-hero-badge__icon {
		width: 26px;
		height: 26px;
	}
	.tbfs-hero-badge__tag {
		font-size: 0.56rem;
		padding: 0.22rem 0.5rem;
	}
	.tbfs-hero-badge--specs {
		left: -9%;
		bottom: 8%;
	}
	.tbfs-hero-badge--new {
		top: -4%;
		right: -7%;
	}
	.tbfs-hero-figure.is-landscape .tbfs-hero-badge--specs {
		left: -5%;
		bottom: -6%;
	}
	.tbfs-hero-figure.is-landscape .tbfs-hero-badge--new {
		top: -6%;
		right: -4%;
	}
	.tbfs-hero-split__panel {
		text-align: center;
		align-items: center;
	}
}

/* Press feedback: every button compresses slightly while held. Specificity
   matches the per-button :hover rules so pressing always wins the cascade
   (this block must stay after those rules in the file). */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link {
		transition: transform 0.1s ease;
	}
	.wp-block-button .wp-block-button__link:active {
		transform: scale(0.97);
	}
}

.tbfs-cta .wp-block-button__link {
	font-size: 1.02rem;
	transition: transform 0.15s ease, background 0.15s ease;
}

.tbfs-cta .wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* ---------- Payer landing pages ----------
   Compact hero band shared by every payer page (patterns/payer-hero.php in
   templates/page-payer.html). Same coral family as the homepage hero; the
   H1 is the page title, so this CSS must hold up for short ("TRICARE") and
   long ("Blue Cross Blue Shield of Texas") payer names alike. */

.tbfs-payer-hero {
	background: var(--wp--preset--color--coral-soft);
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 6vw, 4.5rem) var(--wp--custom--spacing--band-x) clamp(3.25rem, 6vw, 5rem);
}

/* narrow screens: the cluster crowds the hero text, so drop it (same rule
   for the flow hero below and the account band in the plugin CSS) */
@media (max-width: 899px) {
	.tbfs-payer-hero::before,
	.tbfs-flow-hero::before {
		display: none;
	}
}

.tbfs-payer-hero__inner {
	position: relative;
	z-index: 1;
}

.tbfs-payer-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1.9rem, 2.6vw + 1rem, 3rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 1.1rem;
	max-width: 18em;
}

/* ---------- Order-flow hero ----------
   Compact coral-soft band above the wizard on /order-through-insurance/.
   The extra bottom padding is what the wizard card overlaps into (the
   .tbfs-flow-body group below pulls itself up), so the first card straddles
   the band edge instead of floating under a bare heading. */

.tbfs-flow-hero {
	background: var(--wp--preset--color--coral-soft);
	position: relative;
	overflow: hidden;
	padding: clamp(2.1rem, 4vw, 2.9rem) var(--wp--custom--spacing--band-x) clamp(3.6rem, 6vw, 4.6rem);
}

.tbfs-flow-hero__inner {
	position: relative;
	z-index: 1;
}

.tbfs-flow-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1.8rem, 2.2vw + 1rem, 2.7rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 0.8rem;
}

.tbfs-flow-sub {
	color: var(--wp--custom--color--text-warm);
	margin: 0;
}

/* pull the wizard up so its sticky bar card overlaps the band edge */
.tbfs-flow-body {
	margin-top: -2.4rem;
}

/* "Good to know" card under the wizard, on the same 828px rail; the
   calc keeps side gutters on screens narrower than the rail */
.tbfs-flow-notes {
	width: min(828px, calc(100% - 2rem));
	margin: 2.8rem auto 0;
	/* The support email is one long unbreakable string; let it wrap
	   instead of running past the card edge on phones. */
	overflow-wrap: anywhere;
}

/* ---------- Coverage checklist card ---------- */

.tbfs-coverage-card {
	background: var(--wp--preset--color--teal-light);
	border-radius: 20px;
	padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem);
}

.tbfs-coverage-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
}

ul.tbfs-check-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}

ul.tbfs-check-list li {
	position: relative;
	padding-left: 2rem;
	margin: 0 0 0.55rem;
}

ul.tbfs-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.18em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--teal);
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.7rem;
}

.tbfs-coverage-note {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* "Not covered" companion card: white with a warm border instead of teal,
   and coral x markers instead of teal checks. Pairs with .tbfs-coverage-card
   in a two-column layout on payer pages. */
.tbfs-coverage-card--not {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--border-warm);
}

ul.tbfs-cross-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}

ul.tbfs-cross-list li {
	position: relative;
	padding-left: 2rem;
	margin: 0 0 0.55rem;
}

ul.tbfs-cross-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.18em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--coral-soft);
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0604f' stroke-width='3' stroke-linecap='round'><line x1='7' y1='7' x2='17' y2='17'/><line x1='17' y1='7' x2='7' y2='17'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.65rem;
}

/* stacked coverage columns keep a gap on mobile */
.tbfs-coverage-cols {
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: 2.4rem;
}

/* ---------- YouTube facade ----------
   Click-to-load video (assets/js/yt-facade.js). The button holds a
   self-hosted thumbnail; the iframe only exists after a click. */

.tbfs-yt-facade {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--card);
	background: #000;
	margin-top: 2.2rem;
}

.tbfs-yt-facade__btn {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.tbfs-yt-facade__btn img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.tbfs-yt-facade__btn:hover img {
	transform: scale(1.02);
	opacity: 0.92;
}

.tbfs-yt-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--coral);
	box-shadow: 0 10px 30px rgba(63, 40, 34, 0.35);
	transition: transform 0.15s ease, background 0.15s ease;
	pointer-events: none;
}

.tbfs-yt-facade__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 53%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.75rem 0 0.75rem 1.25rem;
	border-color: transparent transparent transparent #fff;
}

.tbfs-yt-facade__btn:hover .tbfs-yt-facade__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--wp--preset--color--coral-dark);
}

.tbfs-yt-facade iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Steps ---------- */

/* Cream band so the page reads white -> cream -> teal-light down the fold.
   Background lives here (not a block attribute) so pages with the pattern
   already expanded into post content restyle too.
   No card chrome: each step is a large numeral over its title and text, and
   on desktop the three steps descend like a staircase so the order reads
   from position as well as from the numbers. */
.tbfs-steps-section {
	background: var(--wp--preset--color--cream);
}

.tbfs-steps {
	gap: clamp(2rem, 5vw, 4.5rem);
	margin-top: clamp(2.4rem, 4vw, 3.4rem);
	align-items: flex-start;
}

.tbfs-step-card {
	max-width: 22rem;
}

@media (min-width: 782px) {
	.tbfs-step-card:nth-child(2) {
		margin-top: clamp(1.5rem, 3vw, 2.75rem);
	}
	.tbfs-step-card:nth-child(3) {
		margin-top: clamp(3rem, 6vw, 5.5rem);
	}
}

.tbfs-step-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0 0 0.6rem;
}

.tbfs-step-head p,
.tbfs-step-head h3 {
	margin: 0;
}

.tbfs-step-num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(4rem, 7vw, 6rem);
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--coral-dark);
}

.tbfs-step-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.6vw, 1.45rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.tbfs-step-card .has-small-font-size {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

/* Phones: numeral in its own column beside the title and text */
@media (max-width: 781px) {
	.tbfs-steps {
		gap: 2rem;
	}
	.tbfs-step-card {
		display: grid;
		grid-template-columns: 3.4rem 1fr;
		column-gap: 0.9rem;
		max-width: none;
	}
	/* outranks core's .is-layout-flex display on the group */
	.tbfs-step-card .tbfs-step-head.wp-block-group {
		display: contents;
	}
	.tbfs-step-num {
		grid-row: 1 / span 2;
		font-size: 3.6rem;
	}
	.tbfs-step-title {
		grid-column: 2;
		margin: 0.2rem 0 0.4rem;
	}
	.tbfs-step-card .has-small-font-size {
		grid-column: 2;
	}
}

/* ---------- Why moms choose ---------- */

/* Desktop: the heading holds its own left column and the four reasons sit
   in a 2x2 list beside it. No cards: each reason is an icon on a white
   circle (a tone step against the teal band), a serif title and its text. */
.tbfs-why-grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 3.5vw, 2.75rem) clamp(1.75rem, 3.5vw, 3rem);
	margin-top: clamp(2.4rem, 4vw, 3rem);
}

@media (min-width: 1120px) {
	.tbfs-why.is-layout-constrained {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 30rem) minmax(0, 42rem) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 5vw, 5rem);
		align-items: start;
	}
	.tbfs-why.is-layout-constrained > * {
		max-width: none;
		margin: 0;
	}
	.tbfs-why > .tbfs-section-title {
		grid-column: 2;
		text-align: left;
	}
	.tbfs-why > .tbfs-why-grid.wp-block-columns {
		grid-column: 3;
		margin-top: 0.4rem;
	}
}

.tbfs-why-card {
	display: grid;
	grid-template-columns: 3rem 1fr;
	column-gap: 1rem;
	align-content: start;
}

.tbfs-why-title {
	grid-column: 2;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0.45rem 0 0.4rem;
}

.tbfs-why-card .has-small-font-size {
	grid-column: 2;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

@media (max-width: 781px) {
	.tbfs-why-grid.wp-block-columns {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* Icon circles are pure CSS on the card (no markup to break in the editor);
   stroke color is teal-dark (#2a7670) baked into the SVG since background
   images can't be tinted with mask the way the old span could. */
.tbfs-why-card::before {
	content: "";
	display: block;
	grid-row: 1 / span 2;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	background-image: var(--tbfs-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.35rem;
}

.tbfs-why-card--shield {
	--tbfs-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a7670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>");
}

.tbfs-why-card--check {
	--tbfs-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a7670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 11 12 14 22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>");
}

.tbfs-why-card--truck {
	--tbfs-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a7670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='3' width='15' height='13' rx='1'/><polygon points='16 8 20 8 23 11 23 16 16 16 16 8'/><circle cx='5.5' cy='18.5' r='2.5'/><circle cx='18.5' cy='18.5' r='2.5'/></svg>");
}

.tbfs-why-card--heart {
	--tbfs-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a7670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
}

/* ---------- Brands ---------- */

.tbfs-brands {
	padding-top: clamp(2.25rem, 4vw, 3.25rem);
	padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

/* Header account icon (Woo hooked block): match the cart's dark icon color
   instead of the teal link color, and pull the cart closer so the glyph
   gaps read even (account and cart both carry ~8px internal padding; the
   hamburger has none). */
.tbfs-header .wp-block-woocommerce-customer-account {
	margin-right: -8px;
}

.tbfs-header .wp-block-woocommerce-customer-account a {
	color: var(--wp--preset--color--contrast);
}

.tbfs-brands-label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1.1rem;
}

/* The label is an h2 for the heading outline; keep the small-label look. */
h2.tbfs-brands-label {
	font-family: inherit;
	margin-top: 0;
}

.tbfs-brands-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 0;
}

.tbfs-pill,
p.is-style-tbfs-pill {
	display: inline-block;
	margin: 0;
	padding: 0.4rem 1.1rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--wp--preset--color--teal-dark);
	background: var(--wp--preset--color--cream);
}

/* No outline: the fill is the edge. Cream on white pages, white on the
   colored bands (insurance plans on teal-light). */
.has-background .tbfs-pill,
.has-background p.is-style-tbfs-pill {
	background: #fff;
}

/* ---------- About blurb ---------- */

.tbfs-about-text {
	color: var(--wp--preset--color--contrast);
	line-height: 1.7;
}

/* ---------- Payer band ---------- */

.tbfs-payers-sub {
	color: var(--wp--preset--color--muted);
	margin: 0.5rem auto 1.6rem;
	max-width: 42em;
}

.tbfs-payers-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 0;
}

.tbfs-pill--link {
	padding: 0;
}

.tbfs-pill--link a {
	display: inline-block;
	padding: 0.4rem 1.1rem;
	color: inherit;
	text-decoration: none;
}

.tbfs-pill--link:hover {
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--coral);
}

.tbfs-pill--more {
	background: var(--wp--preset--color--teal-dark);
	border-color: var(--wp--preset--color--teal-dark);
	color: #fff;
}

.tbfs-pill--more:hover {
	background: var(--wp--preset--color--coral);
	color: #fff;
}

.tbfs-payers-note {
	color: var(--wp--preset--color--muted);
	margin-top: 1.2rem;
}

/* ---------- Testimonial ---------- */

/* The stars are the review's own five-star rating; the aggregate Google
   score is the small .tbfs-rating line under the attribution. */
.tbfs-stars {
	text-align: center;
	color: var(--wp--preset--color--coral);
	font-size: 1.25rem;
	letter-spacing: 0.3em;
	margin: 0 0 1.1rem;
}

.tbfs-rating {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0.35rem;
}

.tbfs-quote {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.15rem, 0.7vw + 1rem, 1.45rem);
	line-height: 1.55;
	max-width: 34em;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

/* Real quotation marks wrap the quote inline; no floating glyph. */
.tbfs-quote::before,
.tbfs-quote::after {
	color: var(--wp--preset--color--coral);
	font-size: 1.25em;
	line-height: 0;
	vertical-align: -0.08em;
}

.tbfs-quote::before {
	content: "\201C";
	margin-right: 0.06em;
}

.tbfs-quote::after {
	content: "\201D";
	margin-left: 0.06em;
}

.tbfs-quote-attr {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	margin-top: 1.2rem;
}

/* Rating-led testimonial: the aggregate Google score up top (no individual
   customer is quoted), then a line in the team's own voice. */
.tbfs-rating-score {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	margin: 0;
}

.tbfs-rating-num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.6rem, 3vw + 1.6rem, 3.4rem);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

.tbfs-rating-score .tbfs-stars {
	margin: 0;
}

.tbfs-testimonial .tbfs-rating {
	font-size: 0.95rem;
	margin-top: 0.5rem;
}

.tbfs-quote--team {
	margin-top: 1.8rem;
}

.tbfs-quote--team::before,
.tbfs-quote--team::after {
	content: none;
}

.tbfs-reviews-link {
	margin-top: 1.3rem;
	font-weight: 700;
}

.tbfs-reviews-link a {
	color: var(--wp--preset--color--teal-dark);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.tbfs-reviews-link a:hover,
.tbfs-reviews-link a:focus-visible {
	color: var(--wp--preset--color--coral-dark);
}

/* ---------- Reviews page ---------- */

/* Cream band so the white review cards lift off it; rating summary on top,
   a masonry of cards (CSS columns, so long and short reviews pack tightly),
   then the call to action. */
.tbfs-reviews {
	background: var(--wp--preset--color--cream);
}

.tbfs-reviews-summary {
	text-align: center;
}

.tbfs-reviews-summary .tbfs-rating {
	font-size: 0.95rem;
	margin-top: 0.5rem;
}

.tbfs-reviews-grid {
	columns: 3 300px;
	column-gap: 1.25rem;
	margin-top: 2.6rem;
}

.tbfs-reviews .tbfs-review-card {
	break-inside: avoid;
	margin: 0 0 1.25rem;
	padding: 1.5rem 1.5rem 1.3rem;
	border: 1px solid #f1e4da;
	border-left: 1px solid #f1e4da;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(63, 40, 34, 0.05);
	font-style: normal;
}

.tbfs-review-card::before {
	content: "\201C";
	display: block;
	height: 1.7rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3.4rem;
	line-height: 1;
	color: var(--wp--preset--color--coral);
}

.tbfs-review-card p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--contrast);
}

.tbfs-review-card cite {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: 1.15rem;
	font-style: normal;
}

.tbfs-review-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--teal-light);
	color: var(--wp--preset--color--teal-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.05rem;
}

.tbfs-review-name {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
}

.tbfs-review-src {
	display: block;
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
}

.tbfs-reviews-cta {
	margin-top: 2.4rem;
	text-align: center;
}

/* ---------- CTA card ---------- */

/* CTA follows the teal FAQ band, so it needs full top rhythm of its own
   (the reduced top it had when it followed a white section reads cramped) */

.tbfs-cta-card {
	background: var(--wp--preset--color--coral-soft);
	border-radius: 24px;
	padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3rem);
}

.tbfs-cta-sub {
	color: var(--wp--preset--color--muted);
	margin-bottom: 1.6rem;
}

/* ---------- Category cards ---------- */

.tbfs-cats {
	gap: clamp(0.9rem, 1.5vw, 1.2rem);
	margin-top: 2.4rem;
}

.tbfs-cat-card {
	position: relative;
	background: var(--wp--preset--color--cream);
	border-radius: 20px;
	padding: 1.8rem 1.5rem 1.7rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tbfs-cat-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

/* Same CSS-icon technique as the why-cards */
.tbfs-cat-card::before {
	content: "";
	display: block;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	background-image: var(--tbfs-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.5rem;
	transition: transform 0.2s ease;
}

.tbfs-cat-card:hover::before {
	transform: scale(1.06);
}

/* Corner arrow chip: the visible "this whole card is a link" affordance
   for the stretched link below */
.tbfs-cat-card::after {
	content: "";
	position: absolute;
	top: 2.4rem;
	right: 1.5rem;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0604f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m13 6 6 6-6 6'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.95rem;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.tbfs-cat-card:hover::after {
	background-color: var(--wp--preset--color--coral-soft);
	transform: translateX(2px);
}

.tbfs-cat-card--pump {
	--tbfs-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f37868' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='13' r='7'/><path d='M9 6.5 12 3l3 3.5'/><circle cx='12' cy='13' r='2.5'/></svg>");
}

.tbfs-cat-card--socks {
	--tbfs-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f37868' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3h8v9l3 4a4 4 0 0 1-6 5l-5-4V3z'/><path d='M8 8h8'/></svg>");
}

.tbfs-cat-card--box {
	--tbfs-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f37868' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8l-9-5-9 5v8l9 5 9-5V8z'/><path d='M3 8l9 5 9-5'/><path d='M12 13v8'/></svg>");
}

.tbfs-cat-card--chat {
	--tbfs-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f37868' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7a8.5 8.5 0 1 1 16.1-3.8z'/></svg>");
}

.tbfs-cat-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.18rem;
	letter-spacing: -0.01em;
	margin: 1rem 0 0.45rem;
}

.tbfs-cat-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Stretched link: the title link covers the whole card */
.tbfs-cat-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 20px;
}

.tbfs-cat-title a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--teal-dark);
	outline-offset: 2px;
}

.tbfs-cat-card:hover .tbfs-cat-title a {
	color: var(--wp--preset--color--teal-dark);
}

.tbfs-cat-card .has-small-font-size {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* ---------- Product cards ---------- */

.tbfs-products-sub {
	color: var(--wp--preset--color--muted);
	margin-top: 0.5rem;
}

.tbfs-products {
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: 2.4rem;
}

/* Photo area is white edge to edge (product shots have white
   backgrounds), cream from the name down. A soft warm outline keeps the
   white top from disappearing into a white page. */
.tbfs-product-card {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--custom--color--border-warm);
	border-radius: 18px;
	overflow: hidden;
	padding: 1.4rem 1.4rem 1.6rem;
	/* column so the coverage chip sits on the bottom edge and lines up
	   across the row whatever the name length */
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	text-align: center;
}

.tbfs-product-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

/* outranks core's flow-layout ":first-child { margin-block-start: 0 }" */
.tbfs-product-card > .tbfs-product-img {
	align-self: stretch;
	margin: -1.4rem -1.4rem 1.2rem;
	padding: 1.2rem;
	background: #fff;
	overflow: hidden;
}

.tbfs-product-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

@media (prefers-reduced-motion: no-preference) {
	.tbfs-product-img img {
		transition: transform 0.3s ease;
	}
	.tbfs-product-card:hover .tbfs-product-img img {
		transform: scale(1.04);
	}
}

.tbfs-product-name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.12rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
}

.tbfs-product-name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.tbfs-product-name a:hover {
	color: var(--wp--preset--color--teal-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tbfs-product-desc {
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.9rem;
}

.tbfs-product-badge {
	display: inline-block;
	margin: auto 0 0;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--teal-light);
	color: var(--wp--preset--color--teal-dark);
	font-size: 0.875rem;
	font-weight: 700;
}

.tbfs-products-more {
	margin-top: 2rem;
}

/* ---------- Resupply strip ---------- */

/* Strip bands (resupply, military) are not .tbfs-section: their vertical
   padding is tuned so the WHITE gap on each side matches the section rhythm,
   accounting for colored neighbors whose padding doesn't read as whitespace. */

.tbfs-resupply {
	/* products section (white) above supplies its own bottom padding;
	   why-section below is teal, so all the white gap must come from here */
	padding: 0 var(--wp--custom--spacing--band-x) var(--wp--custom--spacing--band-y);
}

.tbfs-resupply-card {
	background: var(--wp--preset--color--coral-soft);
	border-radius: 20px;
	padding: 1.4rem clamp(1.4rem, 3vw, 2.2rem);
	align-items: center;
	gap: 1rem 2rem;
}

.tbfs-resupply-text {
	margin: 0;
	max-width: 38em;
	color: var(--wp--custom--color--text-warm);
}

.tbfs-resupply-text strong {
	color: var(--wp--preset--color--contrast);
}

.tbfs-resupply-btn .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
	padding: 0.65rem 1.5rem;
}

.tbfs-resupply-btn .wp-block-button__link:hover {
	background: var(--wp--preset--color--teal-dark);
	color: #fff;
}

/* ---------- Military / TRICARE band ---------- */

.tbfs-military {
	/* testimonial above is coral, journal below is white: white gap above
	   comes from here, white gap below from the journal's top padding */
	padding: var(--wp--custom--spacing--band-y) var(--wp--custom--spacing--band-x) 0;
}

/* flipped neighbors (white section above, colored band below): the white
   gap above comes from the neighbor's bottom padding, so this band owns
   only the gap below. Used on payer pages (TriWest card before the FAQ). */
.tbfs-military--flip {
	padding: 0 var(--wp--custom--spacing--band-x) var(--wp--custom--spacing--band-y);
}

.tbfs-military-card {
	border: 1px solid var(--wp--custom--color--border-cool);
	border-radius: 20px;
	padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.4rem, 3vw, 2.4rem);
	align-items: center;
	justify-content: flex-start;
	gap: 1rem clamp(1.5rem, 3vw, 2.5rem);
	background: var(--wp--preset--color--base);
}

.tbfs-military-img {
	margin: 0;
	flex: 0 0 auto;
}

.tbfs-military-img img {
	display: block;
	width: clamp(150px, 16vw, 200px);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 14px;
}

.tbfs-military-text {
	flex: 1 1 24rem;
	min-width: 0;
	max-width: 44em;
}

.tbfs-military-actions {
	margin-top: 1.1rem;
}

.tbfs-military-text .tbfs-eyebrow {
	margin-bottom: 0.2rem;
}

.tbfs-military-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.2vw + 1rem, 1.6rem);
	letter-spacing: -0.01em;
	margin: 0;
}

.tbfs-military-text .has-small-font-size {
	color: var(--wp--preset--color--muted);
	margin: 0.4rem 0 0;
}

.tbfs-military-btn .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--teal-dark);
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
	padding: 0.6rem 1.5rem;
}

.tbfs-military-btn .wp-block-button__link:hover {
	background: var(--wp--preset--color--teal-dark);
	color: #fff;
}

/* ---------- Brand row (inside the popular pumps section) ----------
   Replaces the separate brand-pills band on the homepage. Sits between the
   section intro and the pump cards as plain shop-by-brand links: no box,
   no pills, so it reads as navigation for the cards below. */

.tbfs-brand-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin-top: 1.1rem;
}

.tbfs-brand-row-label {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0;
}

.tbfs-brand-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tbfs-brand-list a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--wp--preset--color--teal-dark);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.tbfs-brand-list a:hover,
.tbfs-brand-list a:focus-visible {
	color: var(--wp--preset--color--coral-dark);
	text-decoration-color: currentColor;
}

/* ---------- TRICARE + reorder band ----------
   Replaces the resupply strip and the military band on the homepage (the
   payer pages keep .tbfs-military). Two filled panels, no outlines or
   shadows: cream for TRICARE, coral-soft for reorders. Products (white)
   above supplies the top gap; the teal why-band below needs this band to
   own the white gap under it. */

.tbfs-families {
	padding: 0 var(--wp--custom--spacing--band-x) var(--wp--custom--spacing--band-y);
}

.tbfs-families-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 1.25rem;
}

/* the grids own their spacing: drop core's flow-layout block gap */
.tbfs-families-grid > *,
.tbfs-families-payers > *,
.tbfs-families-payers-plans > *,
.tbfs-families-tricare > *,
.tbfs-families-body > *,
.tbfs-families-resupply > * {
	margin-block-start: 0;
}

/* Insurance plans: full-width light-blue panel across the top of the
   group; heading and intro on the left, plan links on the right. */
.tbfs-families-payers {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
	gap: 1.25rem clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.5rem);
	background: var(--wp--preset--color--teal-light);
	border-radius: 24px;
}

.tbfs-families-payers .tbfs-families-text {
	margin-bottom: 0;
}

.tbfs-families-payers .tbfs-payers-row.wp-block-group {
	justify-content: flex-start;
	gap: 0.5rem;
}

.tbfs-families-payers .tbfs-pill {
	background: #fff;
	font-size: 0.95rem;
}

.tbfs-families-payers .tbfs-pill--more {
	background: var(--wp--preset--color--teal-dark);
}

.tbfs-families-payers .tbfs-payers-note {
	margin: 0.9rem 0 0;
	font-size: 0.95rem;
}

.tbfs-families-tricare {
	display: grid;
	grid-template-columns: clamp(180px, 17vw, 240px) minmax(0, 1fr);
	background: var(--wp--preset--color--cream);
	border-radius: 24px;
	overflow: hidden;
}

.tbfs-families-img {
	margin: 0;
}

.tbfs-families-img img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 18rem;
	object-fit: cover;
}

.tbfs-families-body {
	align-self: center;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.tbfs-families-resupply {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(1.75rem, 3vw, 2.75rem);
	background: var(--wp--preset--color--coral-soft);
	border-radius: 24px;
}

.tbfs-families-kicker {
	margin: 0 0 0.35rem;
	font-weight: 600;
	color: var(--wp--preset--color--teal-dark);
}

.tbfs-families-title {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1.45rem, 1.1vw + 1.05rem, 1.8rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.tbfs-families-text {
	margin: 0 0 1.4rem;
	max-width: 34em;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.tbfs-families-btn .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--teal-dark);
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
	padding: 0.6rem 1.5rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tbfs-families-btn .wp-block-button__link:hover,
.tbfs-families-btn .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--teal-dark);
	color: #fff;
}

@media (max-width: 1023px) {
	.tbfs-families-grid {
		grid-template-columns: 1fr;
	}
	.tbfs-families-payers {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 781px) {
	.tbfs-brand-row {
		flex-direction: column;
		align-items: center;
	}
	.tbfs-families-tricare {
		grid-template-columns: 1fr;
	}
	.tbfs-families-img img {
		min-height: 0;
		aspect-ratio: 16 / 10;
		object-position: 50% 15%;
	}
}

/* ---------- Journal cards ----------
   The homepage journal is a Query Loop (patterns/journal.php): the ul gets
   .tbfs-journal and each li.wp-block-post is a card, so new posts pick up
   the card look automatically. .tbfs-journal-card remains for hand-built
   cards inserted on other pages. */

.tbfs-journal {
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: 2.4rem;
}

.tbfs-journal-query {
	margin-block-start: 2.4rem;
}

ul.tbfs-journal {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tbfs-journal > .wp-block-post,
.tbfs-journal-card {
	background: var(--wp--preset--color--cream);
	border-radius: 18px;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	padding-bottom: 1.4rem;
}

.tbfs-journal > .wp-block-post:hover,
.tbfs-journal-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

.tbfs-journal-img {
	margin: 0 0 1.1rem;
}

.tbfs-journal-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.tbfs-journal-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.12rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0 1.4rem 0.5rem;
}

.tbfs-journal-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.tbfs-journal-title a:hover {
	color: var(--wp--preset--color--teal-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tbfs-journal-card .has-small-font-size,
.tbfs-journal-excerpt {
	color: var(--wp--preset--color--muted);
	margin: 0 1.4rem;
}

.tbfs-journal-excerpt p {
	margin: 0;
}

.tbfs-journal-more {
	margin-top: 2rem;
}

/* ---------- FAQ ---------- */

.tbfs-faq {
	margin-top: 2.2rem;
}

.tbfs-faq-item {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--border-cool);
	border-radius: 14px;
	padding: 1rem 1.3rem;
}

.tbfs-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--wp--preset--color--contrast);
	list-style: none;
	position: relative;
	padding-right: 2rem;
}

.tbfs-faq-item summary::-webkit-details-marker {
	display: none;
}

.tbfs-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 0.2rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--wp--preset--color--teal-dark);
	transition: transform 0.2s ease;
}

/* the + rotates into an x rather than swapping glyphs, so it can animate */
.tbfs-faq-item[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.tbfs-faq-item p {
	margin: 0.8rem 0 0.2rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

@media (prefers-reduced-motion: no-preference) {
	.tbfs-faq-item[open] p {
		animation: tbfs-faq-open 0.22s ease;
	}
}

@keyframes tbfs-faq-open {
	from {
		opacity: 0;
		translate: 0 -4px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* ---------- FAQ page (/breast-pumping-faq/) ----------
   The full FAQ page (pattern tbfs/faq-page) reuses .tbfs-faq / .tbfs-faq-item
   for the accordions and adds an intro hero + labeled category headings. */
.tbfs-faqpage {
	padding-block: var(--wp--custom--spacing--band-y);
	padding-inline: var(--wp--custom--spacing--band-x);
}

.tbfs-faqpage-hero {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.tbfs-faqpage-title {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: -0.02em;
	margin: 0;
}

.tbfs-faqpage-intro {
	color: var(--wp--preset--color--muted);
	max-width: 60ch;
	margin: 1rem auto 0;
	line-height: 1.7;
}

.tbfs-faqpage-intro a {
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
	white-space: nowrap;
}

/* Category label above each accordion group */
.tbfs-faq-cat {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: -0.01em;
	margin: clamp(2rem, 4vw, 2.8rem) 0 0.4rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wp--custom--color--border-warm);
}

/* Tighten the group's own top margin since the category heading spaces it */
.tbfs-faqpage .tbfs-faq {
	margin-top: 1rem;
}

/* The closing CTA sits below the last group with breathing room */
.tbfs-faqpage .tbfs-cta-card {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* ---------- Sizing chart (/maternity-compression/maternity-compression-chart/)
   Hero is the shared .tbfs-payer-hero coral band. The body is a stack of plain
   outlined tables (no per-table cards), each with a coral-accented title. */
.tbfs-sizing-page {
	padding-block: clamp(2.5rem, 5vw, 3.75rem) var(--wp--custom--spacing--band-y);
	padding-inline: var(--wp--custom--spacing--band-x);
}

.tbfs-sizing-section-title {
	margin-top: 0;
}

.tbfs-sizing-block {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.tbfs-sizing-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.9rem;
	padding-left: 0.85rem;
	border-left: 3px solid var(--wp--preset--color--coral);
}

/* The table scrolls on narrow screens rather than breaking the layout */
.tbfs-sizing-table {
	overflow-x: auto;
	margin: 0;
}

/* A clean outlined table (not a card): thin border + rounded corners */
.tbfs-sizing-table table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	border: 1px solid var(--wp--custom--color--border-cool);
	border-radius: 12px;
	overflow: hidden;
	font-size: 0.95rem;
}

/* Drop core's per-cell gridlines; the header tint + zebra rows carry structure */
.tbfs-sizing-table th,
.tbfs-sizing-table td {
	border: 0;
}

/* Soft teal-tint header instead of a heavy solid band */
.tbfs-sizing-table thead th {
	background: var(--wp--preset--color--teal-light);
	color: var(--wp--preset--color--teal-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-align: center;
	padding: 0.72rem 0.9rem;
	white-space: nowrap;
}

.tbfs-sizing-table thead th:first-child {
	text-align: left;
}

/* Row label: bold teal, no fill, lets the zebra do the separating */
.tbfs-sizing-table tbody th[scope="row"] {
	text-align: left;
	font-weight: 600;
	color: var(--wp--preset--color--teal-dark);
	padding: 0.72rem 0.9rem;
	white-space: nowrap;
}

.tbfs-sizing-table tbody td {
	text-align: center;
	padding: 0.72rem 0.9rem;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Zebra rows for scanability, no hard gridlines */
.tbfs-sizing-table tbody tr:nth-child(even) th,
.tbfs-sizing-table tbody tr:nth-child(even) td {
	background: var(--wp--preset--color--cream);
}

.tbfs-sizing-table figcaption {
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
	margin-top: 0.85rem;
	text-align: left;
	line-height: 1.5;
}

.tbfs-sizing-page .tbfs-cta-card {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* Sizing tables on phones: shrink type + padding and let cells wrap so the
   tables (each 3-4 columns after the sizes-as-rows transpose) fit at width:100%
   with no horizontal scroll. The overflow-x:auto on the figure is only a safety
   net for the wider >600px nowrap layout. */
@media (max-width: 600px) {
	.tbfs-sizing-table table {
		font-size: 0.78rem;
	}
	.tbfs-sizing-table thead th,
	.tbfs-sizing-table tbody th[scope="row"],
	.tbfs-sizing-table tbody td {
		padding: 0.5rem 0.4rem;
		white-space: normal; /* let headers + labels wrap so the table fits the screen */
	}
}

/* ---------- Breast pump comparison tool (/breast-pump-comparison-chart/)
   Coral hero + intro, then the interactive widget rendered by the
   [tbfs_pump_compare] shortcode (its .tbfs-pc-* styles ship with the plugin).
   We only own the intro blurb and disclaimer typography here. */
.tbfs-compare-page {
	padding-block: clamp(2.5rem, 5vw, 3.75rem) var(--wp--custom--spacing--band-y);
	padding-inline: var(--wp--custom--spacing--band-x);
}

.tbfs-compare-page .tbfs-cta-card {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.tbfs-compare-blurb {
	color: var(--wp--preset--color--muted);
	max-width: 60ch;
	margin: 0.6rem auto 0 auto;
	line-height: 1.7;
	margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}

.tbfs-compare-disclaimer {
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	text-align: center;
	max-width: 70ch;
	margin-inline: auto;
}

/* ---------- Due date calculator (/whats-my-due-date/) ----------
   Coral hero, then a title-less body wrapping the self-contained calculator
   (its own scoped styles live in the wp:html block). We only own the outer
   page rhythm and the CTA gap here. */
.tbfs-duedate-page {
	padding-block: clamp(2.5rem, 5vw, 3.75rem) var(--wp--custom--spacing--band-y);
	padding-inline: var(--wp--custom--spacing--band-x);
}

.tbfs-duedate-page .tbfs-cta-card {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.tbfs-duedate-disclaimer {
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
	margin: clamp(1.25rem, 3vw, 1.75rem) auto 0 auto;
	text-align: center;
	max-width: 60ch;
}

/* ---------- Downloads (/sample-prescription/) ---------- */
.tbfs-downloads-grid {
	gap: clamp(1rem, 2.5vw, 1.5rem);
	margin-top: 0;
}

.tbfs-download-card {
	height: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--border-cool);
	border-radius: 18px;
	box-shadow: var(--wp--custom--shadow--card-sm);
	padding: clamp(1.4rem, 3vw, 1.9rem);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tbfs-download-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

/* Small document icon above the title, pure CSS so nothing breaks in the editor */
.tbfs-download-card::before {
	content: "";
	display: block;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: 1rem;
	border-radius: 12px;
	background: var(--wp--preset--color--coral-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c8503c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='18' x2='12' y2='12'/%3E%3Cpolyline points='9 15 12 18 15 15'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.tbfs-download-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	letter-spacing: -0.01em;
	margin: 0 0 0.6rem;
}

.tbfs-download-desc {
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin: 0 0 1.3rem;
}

.tbfs-downloads-note {
	color: var(--wp--preset--color--muted);
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.tbfs-downloads-note a {
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
}

/* ---------- About (/about/) ---------- */
.tbfs-about-h2 {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: -0.01em;
	margin: 0 0 1.1rem;
}

.tbfs-about-story p {
	color: var(--wp--preset--color--contrast);
	font-size: 1.06rem;
	line-height: 1.75;
	margin: 0 0 1.2rem;
}

.tbfs-about-privacy {
	background: var(--wp--preset--color--cream);
	border-radius: 18px;
	max-width: 820px;
	margin-inline: auto;
}

.tbfs-about-privacy-text {
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
	margin: 0;
}

.tbfs-about-privacy-text a {
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
}

/* ---------- Contact (/contact/) ---------- */
.tbfs-contact-cols {
	gap: clamp(1.5rem, 4vw, 3rem);
}

.tbfs-contact-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-dark);
	margin: 0 0 0.4rem;
}

.tbfs-contact-phone {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1.1;
}

.tbfs-contact-phone a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.tbfs-contact-phone a:hover {
	color: var(--wp--preset--color--teal-dark);
}

.tbfs-contact-hours {
	color: var(--wp--preset--color--muted);
	margin: 0.5rem 0 0;
}

.tbfs-contact-rule {
	border-color: var(--wp--custom--color--border-warm);
	margin: 1.5rem 0;
}

.tbfs-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1rem;
}

.tbfs-contact-list li {
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}

.tbfs-contact-list strong {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-dark);
}

.tbfs-contact-list a {
	color: var(--wp--preset--color--teal-dark);
	word-break: break-word;
}

/* Location card (fills the right column, links out for directions) */
.tbfs-location-card {
	background: var(--wp--preset--color--teal-light);
	border-radius: 18px;
	padding: clamp(1.6rem, 3vw, 2.2rem);
}

.tbfs-location-card::before {
	content: "";
	display: block;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: 1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%232a6f6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

.tbfs-location-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-dark);
	margin: 0 0 0.5rem;
}

.tbfs-location-address {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3rem;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.tbfs-location-note {
	color: var(--wp--preset--color--muted);
	margin: 0.75rem 0 1.25rem;
}

/* Self-service card grid */
.tbfs-help-grid {
	gap: clamp(0.9rem, 2vw, 1.25rem);
	margin-top: 2.2rem;
}

.tbfs-help-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--border-cool);
	border-radius: 16px;
	box-shadow: var(--wp--custom--shadow--card-sm);
	padding: 1.4rem 1.3rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tbfs-help-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

.tbfs-help-title {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: -0.01em;
	margin: 0 0 0.4rem;
}

.tbfs-help-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.tbfs-help-title a::after {
	content: " \2192";
	color: var(--wp--preset--color--teal-dark);
}

.tbfs-help-card:hover .tbfs-help-title a {
	color: var(--wp--preset--color--teal-dark);
}

.tbfs-help-desc {
	color: var(--wp--preset--color--muted);
	margin: 0;
	line-height: 1.55;
}

/* Message form (frontend only until the mail handler lands).
   The form column is first in source so phones see the form right after the
   hero; on desktop the columns row-reverses so the info column reads left. */
.tbfs-contact-split {
	align-items: flex-start;
}

@media (min-width: 782px) {
	.tbfs-contact-split {
		flex-direction: row-reverse;
	}
}

.tbfs-contact-info .tbfs-location-card {
	margin-top: 1.75rem;
}

.tbfs-cform-title {
	margin: 0;
}

.tbfs-cform-sub {
	color: var(--wp--preset--color--muted);
	max-width: 34rem;
	margin: 0.6rem 0 0;
}

.tbfs-cform-card {
	display: block;
	max-width: 760px;
	margin: 1.5rem 0 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--border-warm);
	border-radius: 18px;
	box-shadow: var(--wp--custom--shadow--card-sm);
	padding: clamp(1.6rem, 3.5vw, 2.4rem);
}

.tbfs-cform-grid {
	display: grid;
	/* Width-driven so the pairs collapse to one column whenever the form
	   sits in a narrow column, not just on small viewports. */
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.1rem 1.25rem;
}

.tbfs-cform-field {
	display: grid;
	gap: 0.4rem;
}

.tbfs-cform-field--full {
	grid-column: 1 / -1;
}

.tbfs-cform-field label {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.tbfs-cform-opt {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.tbfs-cform-field input,
.tbfs-cform-field select,
.tbfs-cform-field textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.9rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--wp--custom--color--border-cool);
	border-radius: 12px;
	background-color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
}

.tbfs-cform-field textarea {
	min-height: 8.5rem;
	resize: vertical;
	line-height: 1.55;
}

.tbfs-cform-field select {
	appearance: none;
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232a6f6a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.95rem center;
}

.tbfs-cform-field input:focus,
.tbfs-cform-field select:focus,
.tbfs-cform-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal-dark);
	box-shadow: 0 0 0 3px var(--wp--preset--color--teal-light);
}

.tbfs-cform-actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.tbfs-cform-submit {
	cursor: pointer;
}

.tbfs-cform-note {
	flex: 1;
	min-width: 14rem;
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.tbfs-cform-note a {
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
	white-space: nowrap;
}

.tbfs-cform-submit:disabled {
	cursor: progress;
	opacity: 0.7;
}

/* Honeypot: off-screen for people, still filled in by bots. */
.tbfs-cform-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tbfs-cform-error {
	margin: 1.25rem 0 0;
	padding: 0.8rem 1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--coral-soft, #fdeae7);
	color: #b0432f;
	font-size: 0.9rem;
}

.tbfs-cform-done:focus {
	outline: none;
}

.tbfs-cform-done__title {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--large);
}

.tbfs-cform-done p {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.tbfs-cform-done a {
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.tbfs-cform-actions {
		display: grid;
		gap: 0.9rem;
	}
}

/* ---------- Legal / policy pages ---------- */
.tbfs-legal-header {
	padding-block: clamp(2.5rem, 5vw, 3.75rem) 0;
	padding-inline: var(--wp--custom--spacing--band-x);
}

.tbfs-legal-title {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: -0.02em;
	margin: 0;
}

.tbfs-legal-updated {
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	margin: 0.9rem 0 0;
}

.tbfs-legal-body {
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem) var(--wp--custom--spacing--band-y);
	padding-inline: var(--wp--custom--spacing--band-x);
	color: var(--wp--preset--color--contrast);
	font-size: 0.98rem;
	line-height: 1.72;
}

.tbfs-legal-body h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.4rem;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 2.2rem 0 0.8rem;
}

.tbfs-legal-body h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.14rem;
	margin: 1.6rem 0 0.6rem;
}

.tbfs-legal-body h4 {
	font-weight: 600;
	margin: 1.3rem 0 0.5rem;
}

.tbfs-legal-body p {
	margin: 0 0 1.1rem;
}

.tbfs-legal-body ul,
.tbfs-legal-body ol {
	margin: 0 0 1.1rem;
	padding-left: 1.4rem;
}

.tbfs-legal-body li {
	margin-bottom: 0.4rem;
}

.tbfs-legal-body a {
	color: var(--wp--preset--color--teal-dark);
	text-underline-offset: 2px;
	word-break: break-word;
}

/* Warranty / any legal table: compact bordered layout that scrolls on mobile */
.tbfs-legal-body table {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4rem;
	font-size: 0.92rem;
}

.tbfs-legal-body th,
.tbfs-legal-body td {
	border: 1px solid var(--wp--custom--color--border-cool);
	padding: 0.55rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

.tbfs-legal-body thead th,
.tbfs-legal-body tr:first-child td {
	background: var(--wp--preset--color--cream);
	font-weight: 600;
}

/* ---------- Block styles ----------
   "Card" is pickable on Group and Column blocks in the editor Styles panel:
   the generic card recipe without needing a tbfs-* class. */

.is-style-tbfs-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--border-cool);
	border-radius: 18px;
	padding: 1.7rem 1.6rem;
	box-shadow: var(--wp--custom--shadow--card);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.is-style-tbfs-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

/* ---------- Scroll reveal ----------
   .tbfs-reveal is added by assets/js/scroll-reveal.js at runtime, so the
   page renders fully visible without JS. Reduced-motion users never get
   the class at all. */

.tbfs-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.tbfs-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ---------- Footer ---------- */

.tbfs-footer {
	padding: 3rem var(--wp--custom--spacing--band-x) 2rem;
}

/* On phones and tablets the ReviewTube band is a ~120px bar pinned to the
   bottom of the screen; give the footer room so its last links can scroll
   up above the bar instead of sitting under it. */
@media (max-width: 1023px) {
	html:has(#survey-frame) .tbfs-footer {
		padding-bottom: calc(2rem + 130px);
	}
}

.tbfs-footer a {
	color: var(--wp--custom--color--footer-link);
	text-decoration: none;
}

.tbfs-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.tbfs-footer-head {
	letter-spacing: 0.1em;
	font-weight: 700;
	color: var(--wp--preset--color--teal);
}

.tbfs-footer-contact {
	color: var(--wp--custom--color--footer-muted);
	margin-top: 1.2rem;
}

.tbfs-footer-contact a {
	color: var(--wp--custom--color--footer-link);
}

.tbfs-footer-policies {
	margin-top: 2.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	color: var(--wp--custom--color--footer-muted);
}

/* the policies row above owns the divider; legal is a quiet last line */
.tbfs-footer-legal {
	margin-top: 0.6rem;
	color: var(--wp--custom--color--footer-muted);
}

/* ---------- Shop archives (shop, category, brand) ---------- */

.tbfs-shop-hero {
	padding: 3.2rem var(--wp--custom--spacing--band-x) 0.4rem;
	text-align: center;
}

.tbfs-shop-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.8rem, 3.2vw, 2.5rem);
	letter-spacing: -0.01em;
	margin: 0;
}

/* Term SEO copy sits under the grid, dressed as a soft cream band so it
   reads as a buying guide rather than a text dump. The term-description
   block renders nothing when the term has no copy, so empty archives get
   no stray band. */
.tbfs-shop-desc {
	max-width: 900px;
	margin: 3.6rem auto 0;
	padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 5vw, 4rem);
	background: var(--wp--preset--color--cream);
	border-radius: 24px;
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	line-height: 1.75;
}

.tbfs-shop-desc h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.4rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	margin: 2.4rem 0 0.8rem;
}

.tbfs-shop-desc h2:first-child {
	margin-top: 0;
}

.tbfs-shop-desc h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1rem;
	color: var(--wp--preset--color--contrast);
	margin: 1.8rem 0 0.5rem;
}

.tbfs-shop-desc p {
	margin: 0 0 1em;
}

.tbfs-shop-desc a {
	color: var(--wp--preset--color--teal-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tbfs-shop-body {
	padding: 1.6rem var(--wp--custom--spacing--band-x) 4rem;
}

/* Toolbar: brand pills left, count + sorting right; wraps on small screens */
.tbfs-shop-toolbar {
	margin-bottom: 0.4rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
}

/* Row under the pills: count left, search + sorting right */
.tbfs-shop-sort {
	margin-top: 1.1rem;
}

.tbfs-shop-sort-controls {
	gap: 0.6rem;
}

.tbfs-shop-search input[type="search"] {
	padding: 0 1rem;
	width: clamp(160px, 18vw, 240px);
}

.tbfs-shop-search input[type="search"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal-dark);
}

.tbfs-shop-search input[type="search"]::placeholder {
	color: var(--wp--preset--color--muted);
}

/* Grid dims while a live-search fetch is in flight */
.tbfs-shop-grid.is-searching {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

@media (max-width: 600px) {
	.tbfs-shop-sort-controls,
	.tbfs-shop-search,
	.tbfs-shop-search input[type="search"] {
		width: 100%;
	}
}

.tbfs-shop-toolbar .woocommerce-result-count {
	margin: 0;
	white-space: nowrap;
}

/* Search input and sort select share one control style so they sit as a
   matched pair (same height, radius, type size). */
.tbfs-shop-toolbar .woocommerce-ordering,
.tbfs-shop-toolbar .tbfs-shop-search {
	margin: 0;
	display: flex;
	align-items: center;
}

.tbfs-shop-toolbar .woocommerce-ordering select,
.tbfs-shop-search input[type="search"] {
	box-sizing: border-box;
	height: 2.5rem;
	border: 1px solid var(--wp--custom--color--border-cool);
	border-radius: 999px;
	font-size: 0.9rem;
	font-family: inherit;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
}

.tbfs-shop-toolbar .woocommerce-ordering select {
	padding: 0 2rem 0 1rem;
}

/* Brand chips restyled as brand pills. The row hides itself when the
   collection yields fewer than two brands (accessories carry no brands,
   matching live), so most non-pump archives show only count + sorting. */
.tbfs-brand-pills:not(:has(.wc-block-product-filter-chips__item:nth-child(2))) {
	display: none;
}

.tbfs-brand-pills .wc-block-product-filter-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tbfs-brand-pills .wc-block-product-filter-chips__item {
	appearance: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--border-cool);
	border-radius: 999px;
	padding: 0.32rem 0.95rem;
	font-size: 0.88rem;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.tbfs-brand-pills .wc-block-product-filter-chips__item:hover {
	border-color: var(--wp--preset--color--teal-dark);
}

.tbfs-brand-pills .wc-block-product-filter-chips__item[aria-checked="true"],
.tbfs-brand-pills .wc-block-product-filter-chips__item.is-selected {
	background: var(--wp--preset--color--teal-light);
	border-color: var(--wp--preset--color--teal-dark);
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
}

/* Product Collection items pick up the same card language as the
   hand-picked homepage cards (.tbfs-product-card). */
.tbfs-shop-grid .wc-block-product-template {
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: 1.6rem;
}

.tbfs-shop-grid .wc-block-product {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--custom--color--border-warm);
	border-radius: 18px;
	overflow: hidden;
	padding: 1.4rem 1.4rem 1.6rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	text-align: center;
	/* Column so the insurance button can sit on the card's bottom edge and
	   line up across a row whatever the title length. */
	display: flex;
	flex-direction: column;
	container-type: inline-size;
}

.tbfs-shop-grid .wc-block-product:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

/* same split as the homepage cards: white photo area, cream below */
.tbfs-shop-grid .tbfs-shop-img {
	background: #fff;
	overflow: hidden;
	margin: -1.4rem -1.4rem 1.2rem;
	padding: 1.2rem;
}

.tbfs-shop-grid .tbfs-shop-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

.tbfs-shop-grid .tbfs-shop-name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 0.4rem;
}

.tbfs-shop-grid .tbfs-shop-name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.tbfs-shop-grid .tbfs-shop-name a:hover {
	color: var(--wp--preset--color--teal-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tbfs-shop-grid .tbfs-shop-price {
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
}

/* Price stays with the title; the insurance button sits on the card's
   bottom edge (the card is a flex column) so buttons line up in a row. */
.tbfs-shop-grid .tbfs-card-insurance {
	margin-top: auto;
	padding-top: 0.8rem;
}

/* Card insurance button (plugin Product_Availability::card_price): replaces
   the price on insurance-only products, sits under it on "both". Outline
   pill so a full grid of them stays light; fills coral on hover. Label uses
   a deeper coral than the palette so small text meets 4.5:1 on white. */
.tbfs-card-insurance {
	margin: 0.8rem 0 0;
	text-align: center;
}

.tbfs-card-insurance .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0.4rem 1rem;
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--coral-dark);
	color: #b4473a;
	font-size: 0.875rem;
	line-height: 1.3;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

/* One line whenever the card has room; narrow 2-up phone cards still wrap. */
@container (min-width: 200px) {
	.tbfs-card-insurance .wp-element-button {
		white-space: nowrap;
	}
}

.tbfs-card-insurance .wp-element-button:hover,
.tbfs-card-insurance .wp-element-button:focus-visible {
	background: var(--wp--preset--color--coral-dark);
	color: var(--wp--preset--color--base);
}

/* .tbfs-shop-pagination is styled with .tbfs-blog-pagination in the shared
   Pagination block below (Blog section). */

/* ---------- Content landing pages (page-landing template) ---------- */

.tbfs-landing-benefit .wp-block-media-text__media img {
	border-radius: 18px;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.tbfs-landing-mediatext {
	gap: clamp(1.6rem, 4vw, 3.5rem);
}

.tbfs-landing-h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
}

.tbfs-landing-teaser {
	background: var(--wp--preset--color--cream);
	border-radius: 18px;
	padding: 2rem;
}

.tbfs-landing-teaser p {
	color: var(--wp--preset--color--muted);
}

/* ---------- Single product (PDP) ---------- */

.tbfs-pdp {
	padding: 2rem var(--wp--custom--spacing--band-x) 3.6rem;
}

.tbfs-pdp-breadcrumbs {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1.6rem;
}

.tbfs-pdp-cols {
	gap: clamp(1.6rem, 3.5vw, 3.2rem);
}

.tbfs-pdp .tbfs-pdp-gallery {
	background: #fff;
	border: 1px solid var(--wp--custom--color--border-cool);
	border-radius: 18px;
	padding: 1rem;
	align-self: start;
}

/* Woo's zoom trigger is z-index 99; keep that inside the gallery so it cannot
   paint over the sticky header (z-index 50) and its mega menu panels. */
.tbfs-pdp .tbfs-pdp-gallery .woocommerce-product-gallery {
	isolation: isolate;
}

.tbfs-pdp-title {
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	letter-spacing: -0.01em;
	margin: 0 0 0.9rem;
}

.tbfs-pdp-badge {
	margin-bottom: 1.2rem;
}

/* Intro blurb beside the gallery (product excerpt, as on live) */
.tbfs-pdp .tbfs-pdp-short {
	margin-bottom: 1.4rem;
}

.tbfs-pdp .tbfs-pdp-short p {
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.8rem;
}

/* Live blurbs sometimes open with their own heading; keep it subordinate
   to the product H1 above it */
.tbfs-pdp .tbfs-pdp-short h2,
.tbfs-pdp .tbfs-pdp-short h3 {
	font-size: 1.1rem;
	letter-spacing: -0.01em;
	margin: 0 0 0.6rem;
}

.tbfs-pdp .tbfs-pdp-short p:last-child {
	margin-bottom: 0;
}

.tbfs-pdp .tbfs-pdp-short .wp-block-post-excerpt__more-text {
	display: none;
}

/* Insurance path is the hero action on every product */
.tbfs-pdp-insurance {
	background: var(--wp--preset--color--teal-light);
	border-radius: 14px;
	padding: 1.3rem 1.4rem 1.4rem;
	margin-bottom: 1.4rem;
}

.tbfs-pdp-insurance-lead {
	margin: 0 0 0.9rem;
	color: var(--wp--preset--color--teal-dark);
	font-weight: 500;
}

/* Ordering states: the template always renders both the insurance CTA and
   the retail box; the plugin's body class (tbfs-avail-*) decides what shows.
   Products default to retail-only until explicitly marked. */

/* Retail only: no insurance claims anywhere, retail becomes the one action */
.tbfs-avail-retail .tbfs-pdp-insurance,
.tbfs-avail-retail .tbfs-pdp-badge,
.tbfs-avail-retail .tbfs-pdp-retail-label {
	display: none;
}

.tbfs-avail-retail .tbfs-pdp .tbfs-pdp-retail {
	border: none;
	padding: 0;
}

.tbfs-avail-retail .tbfs-pdp .tbfs-pdp-retail .wp-block-add-to-cart-form button,
.tbfs-avail-retail .tbfs-pdp .tbfs-pdp-retail .single_add_to_cart_button {
	background: var(--wp--preset--color--coral);
	border-color: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--base);
	padding: 0.8rem 1.8rem;
}

.tbfs-avail-retail .tbfs-pdp .tbfs-pdp-retail .wp-block-add-to-cart-form button:hover,
.tbfs-avail-retail .tbfs-pdp .tbfs-pdp-retail .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--coral-dark);
	border-color: var(--wp--preset--color--coral-dark);
	color: var(--wp--preset--color--base);
}

/* Insurance only: hide the retail path even if a price exists */
.tbfs-avail-insurance .tbfs-pdp .tbfs-pdp-retail {
	display: none;
}

/* Both: belt-and-braces for products marked "both" without a retail price
   (Woo renders no cart form, so the box would sit empty) */
.tbfs-avail-both .tbfs-pdp .tbfs-pdp-retail:not(:has(form.cart)) {
	display: none;
}

.tbfs-pdp .tbfs-pdp-retail {
	border: 1px solid var(--wp--custom--color--border-cool);
	border-radius: 14px;
	padding: 1.1rem 1.4rem 1.3rem;
}

.tbfs-pdp-retail-label {
	font-weight: 600;
	font-size: 0.92rem;
	margin: 0 0 0.3rem;
}

.tbfs-pdp-price {
	color: var(--wp--preset--color--contrast);
	font-size: 1.15rem;
	font-weight: 600;
}

.tbfs-pdp .tbfs-pdp-retail .wp-block-add-to-cart-form button,
.tbfs-pdp .tbfs-pdp-retail .single_add_to_cart_button {
	background: transparent;
	color: var(--wp--preset--color--teal-dark);
	border: 1.5px solid var(--wp--preset--color--teal-dark);
	border-radius: 999px;
	font-weight: 600;
	padding: 0.6rem 1.6rem;
}

.tbfs-pdp .tbfs-pdp-retail .wp-block-add-to-cart-form button:hover,
.tbfs-pdp .tbfs-pdp-retail .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--teal-dark);
	color: #fff;
}

.tbfs-pdp-meta {
	margin-top: 1.3rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

.tbfs-pdp .tbfs-pdp-details {
	margin-top: 2.4rem;
}

/* --- Gallery: uniform thumbnail strip under the main image ---
   Woo's flexslider owns the main viewport; thumbnails live in
   ol.flex-control-thumbs, so that's what gets the grid. */

.tbfs-pdp .tbfs-pdp-gallery .woocommerce-product-gallery__image img {
	border-radius: 10px;
}

/* !important: flexslider JS re-measures and re-floats these after load, so
   plain cascade wins are undone at runtime. Scoped tightly to the PDP gallery. */
.tbfs-pdp .tbfs-pdp-gallery .flex-control-thumbs {
	position: static !important;
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.55rem;
	margin: 0.8rem 0 0;
	padding: 0;
	list-style: none;
}

.tbfs-pdp .tbfs-pdp-gallery .flex-control-thumbs li {
	display: block !important;
	margin: 0 !important;
	padding: 0;
	width: auto !important;
	float: none !important;
}

.tbfs-pdp .tbfs-pdp-gallery .flex-control-thumbs img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
	border: 1.5px solid var(--wp--custom--color--border-cool);
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.tbfs-pdp .tbfs-pdp-gallery .flex-control-thumbs img:hover,
.tbfs-pdp .tbfs-pdp-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--wp--preset--color--teal-dark);
}

/* --- Cart forms: quantity, selects, buttons share one height and language --- */

.tbfs-pdp .tbfs-pdp-retail form.cart {
	margin: 0.9rem 0 0;
}

.tbfs-pdp .tbfs-pdp-retail form.cart:not(.variations_form),
.tbfs-pdp .tbfs-pdp-retail form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 0.7rem;
}

.tbfs-pdp .tbfs-pdp-retail .quantity input.qty {
	width: 4.4rem;
	padding: 0.6rem 0.4rem;
	height: 100%;
	text-align: center;
	font: inherit;
	color: var(--wp--preset--color--contrast);
	border: 1.5px solid var(--wp--custom--color--border-cool);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
}

.tbfs-pdp .tbfs-pdp-retail .quantity input.qty:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal-dark);
}

/* Variation picker: label + branded select, no table chrome */
.tbfs-pdp .tbfs-pdp-retail table.variations {
	border-collapse: collapse;
	margin: 0;
}

.tbfs-pdp .tbfs-pdp-retail table.variations th,
.tbfs-pdp .tbfs-pdp-retail table.variations td {
	border: none;
	padding: 0 0 0.7rem;
	text-align: left;
	vertical-align: middle;
}

.tbfs-pdp .tbfs-pdp-retail table.variations th.label {
	padding-right: 0.9rem;
	font-weight: 600;
	font-size: 0.92rem;
}

.tbfs-pdp .tbfs-pdp-retail table.variations select {
	font: inherit;
	font-size: 0.95rem;
	/* Woo blocktheme forces height: 3em; with the body line-height inherited
	   that clips the text. Size the pill from its own content instead. */
	height: auto;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	padding: 0.7rem 2.2rem 0.7rem 0.95rem;
	border: 1.5px solid var(--wp--custom--color--border-cool);
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	appearance: none;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23577c76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 0.85em;
}

.tbfs-pdp .tbfs-pdp-retail table.variations select:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal-dark);
}

.tbfs-pdp .tbfs-pdp-retail .reset_variations {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

.tbfs-pdp .tbfs-pdp-retail .woocommerce-variation-price {
	margin-bottom: 0.7rem;
	font-size: 1.15rem;
	font-weight: 600;
}

.tbfs-pdp .tbfs-pdp-retail .woocommerce-variation-availability .out-of-stock {
	color: var(--wp--preset--color--coral-dark);
	font-size: 0.9rem;
	margin: 0 0 0.7rem;
}

.tbfs-pdp .tbfs-pdp-retail .single_add_to_cart_button.disabled,
.tbfs-pdp .tbfs-pdp-retail .single_add_to_cart_button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.tbfs-pdp .tbfs-pdp-retail .stock.out-of-stock {
	color: var(--wp--preset--color--muted);
	font-size: 0.92rem;
}

/* --- Details tabs: quiet underline nav instead of Woo's grey boxes --- */

.tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs {
	display: flex;
	gap: 1.6rem;
	margin: 0 0 1.8rem;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wp--custom--color--border-cool);
}

.tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs::before,
.tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs::after,
.tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs li::before,
.tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs li::after {
	display: none;
}

.tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs li,
.tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs li.active {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs li a {
	display: inline-block;
	padding: 0.55rem 0.1rem 0.7rem;
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	border-bottom: 2.5px solid transparent;
	margin-bottom: -1px;
}

.tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs li.active a {
	color: var(--wp--preset--color--teal-dark);
	border-bottom-color: var(--wp--preset--color--teal-dark);
}

/* Woo injects a heading that repeats the active tab's name; the tab is the label */
.tbfs-pdp .tbfs-pdp-details .woocommerce-Tabs-panel > h2:first-child {
	display: none;
}

/* --- Details prose: readable measure, calm hierarchy --- */

.tbfs-pdp .tbfs-pdp-details .wc-tab {
	max-width: 76ch;
}

.tbfs-pdp .tbfs-pdp-details .wc-tab p,
.tbfs-pdp .tbfs-pdp-details .wc-tab li {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--wp--custom--color--text-warm, var(--wp--preset--color--contrast));
}

.tbfs-pdp .tbfs-pdp-details .wc-tab h2 {
	font-size: 1.45rem;
	letter-spacing: -0.01em;
	margin: 2.2rem 0 0.8rem;
}

.tbfs-pdp .tbfs-pdp-details .wc-tab h3 {
	font-size: 1.15rem;
	margin: 1.8rem 0 0.6rem;
}

.tbfs-pdp .tbfs-pdp-details .wc-tab > h2:nth-child(2),
.tbfs-pdp .tbfs-pdp-details .wc-tab > h3:nth-child(2) {
	margin-top: 0;
}

/* Live descriptions drop images mid-paragraph as inline floats; give them
   their own line so text never wraps around a ragged edge. */
.tbfs-pdp .tbfs-pdp-details .wc-tab img {
	display: block;
	max-width: min(100%, 560px);
	height: auto;
	margin: 1.6rem 0;
	border-radius: 12px;
}

/* Additional information (attributes) table */
.tbfs-pdp .tbfs-pdp-details .woocommerce-product-attributes {
	border-collapse: collapse;
	max-width: 76ch;
}

.tbfs-pdp .tbfs-pdp-details .woocommerce-product-attributes th,
.tbfs-pdp .tbfs-pdp-details .woocommerce-product-attributes td {
	border: none;
	border-bottom: 1px solid var(--wp--custom--color--border-cool);
	padding: 0.65rem 1.4rem 0.65rem 0;
	text-align: left;
	font-style: normal;
	background: none;
}

.tbfs-pdp .tbfs-pdp-details .woocommerce-product-attributes th {
	font-weight: 600;
	width: 11rem;
}

.tbfs-pdp .tbfs-pdp-details .woocommerce-product-attributes p {
	margin: 0;
}

@media (max-width: 781px) {
	.tbfs-shop-grid .wc-block-product {
		padding: 1.1rem 1rem 1.2rem;
	}
	/* photo area follows the tighter card padding */
	.tbfs-shop-grid .tbfs-shop-img {
		margin: -1.1rem -1rem 1rem;
		padding: 1rem;
	}
	.tbfs-pdp-cols {
		gap: 1.4rem;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 781px) {
	.wp-block-button.tbfs-header-cta {
		display: none;
	}
	.tbfs-cats,
	.tbfs-products,
	.tbfs-journal {
		gap: 0.9rem;
	}
	.tbfs-cat-card {
		padding: 1.3rem 1.2rem;
	}
	.tbfs-cat-card::after {
		top: 1.9rem;
		right: 1.2rem;
	}
	.tbfs-resupply-card,
	.tbfs-military-card {
		justify-content: center;
		text-align: center;
	}
	.tbfs-military-img {
		/* size the figure, not just the img: the figure otherwise
		   shrink-wraps to the image's natural width and overflows the card */
		width: min(100%, 320px);
		margin: 0 auto;
	}
	.tbfs-military-img img {
		width: 100%;
		aspect-ratio: 3 / 2;
	}
	.tbfs-military-actions {
		justify-content: center;
	}
	/* keep product images from going edge-to-edge when columns stack */
	.tbfs-product-img img {
		max-width: 260px;
		margin: 0 auto;
	}
}

/* ==========================================================================
   Blog: index (posts page) + single post
   The index reuses .tbfs-journal card styling (see Journal cards above); the
   rules here add the title band, the meta line on cards, pagination, and the
   full single-post reading layout.
   ========================================================================== */

/* ---------- Blog index ---------- */

.tbfs-blog-hero {
	padding-block: var(--wp--custom--spacing--band-y) 0;
	padding-inline: var(--wp--custom--spacing--band-x);
}

.tbfs-blog-title {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: -0.02em;
	margin: 0;
}

.tbfs-blog-intro {
	color: var(--wp--preset--color--muted);
	max-width: 62ch;
	margin: 1.1rem auto 0;
	line-height: 1.7;
}

.tbfs-blog-body {
	padding-block: clamp(2.25rem, 5vw, 3.5rem) var(--wp--custom--spacing--band-y);
	padding-inline: var(--wp--custom--spacing--band-x);
}

/* Card meta line: category pill + date, sitting above the title */
.tbfs-journal-meta {
	margin: 1.1rem 1.4rem 0;
	align-items: center;
	gap: 0.5rem 0.7rem;
	font-size: var(--wp--preset--font-size--small);
}

.tbfs-journal-meta .tbfs-journal-cat {
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.72rem;
}

.tbfs-journal-meta .tbfs-journal-cat a {
	color: inherit;
	text-decoration: none;
}

.tbfs-journal-meta .tbfs-journal-cat a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tbfs-journal-meta .wp-block-post-date {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* When the card carries a meta line, tighten the title's top margin */
.tbfs-blog-grid .tbfs-journal-title {
	margin-top: 0.5rem;
}

/* ---------- Pagination (shared: blog index + shop/category archives) ----------
   The blog and Woo query loops both render core .wp-block-query-pagination with
   .page-numbers cells and prev/next blocks, so one treatment styles both: each
   cell is a soft rounded button, the current page is filled teal, and prev/next
   collapse to chevron-only buttons (their verbose "Previous Page" text hidden). */
.tbfs-blog-pagination,
.tbfs-shop-pagination {
	margin-top: clamp(2.4rem, 4vw, 3.4rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
}

.tbfs-blog-pagination .wp-block-query-pagination-numbers,
.tbfs-shop-pagination .wp-block-query-pagination-numbers {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.tbfs-blog-pagination .page-numbers,
.tbfs-shop-pagination .page-numbers,
.tbfs-blog-pagination .wp-block-query-pagination-previous,
.tbfs-blog-pagination .wp-block-query-pagination-next,
.tbfs-shop-pagination .wp-block-query-pagination-previous,
.tbfs-shop-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.7rem;
	height: 2.7rem;
	padding: 0 0.65rem;
	border-radius: 999px;
	border: 1px solid var(--wp--custom--color--border-cool);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease,
		border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

/* Only the clickable cells (anchors) react to hover */
.tbfs-blog-pagination a.page-numbers:hover,
.tbfs-shop-pagination a.page-numbers:hover,
.tbfs-blog-pagination .wp-block-query-pagination-previous:hover,
.tbfs-blog-pagination .wp-block-query-pagination-next:hover,
.tbfs-shop-pagination .wp-block-query-pagination-previous:hover,
.tbfs-shop-pagination .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--teal-dark);
	transform: translateY(-1px);
	box-shadow: var(--wp--custom--shadow--card-sm);
}

/* Current page: filled teal */
.tbfs-blog-pagination .page-numbers.current,
.tbfs-shop-pagination .page-numbers.current {
	background: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--base);
}

/* The "…" gap is text, not a button */
.tbfs-blog-pagination .page-numbers.dots,
.tbfs-shop-pagination .page-numbers.dots {
	min-width: 1.4rem;
	padding: 0 0.2rem;
	border-color: transparent;
	background: transparent;
	color: var(--wp--preset--color--muted);
}

/* Prev/next: hide the verbose label, show a chevron glyph instead */
.tbfs-blog-pagination .wp-block-query-pagination-previous,
.tbfs-blog-pagination .wp-block-query-pagination-next,
.tbfs-shop-pagination .wp-block-query-pagination-previous,
.tbfs-shop-pagination .wp-block-query-pagination-next {
	font-size: 0;
	padding: 0;
}

.tbfs-blog-pagination .wp-block-query-pagination-previous::before,
.tbfs-shop-pagination .wp-block-query-pagination-previous::before {
	content: "\2039"; /* ‹ */
	font-size: 1.4rem;
}

.tbfs-blog-pagination .wp-block-query-pagination-next::before,
.tbfs-shop-pagination .wp-block-query-pagination-next::before {
	content: "\203A"; /* › */
	font-size: 1.4rem;
}

/* ---------- Single post ---------- */

.tbfs-post {
	padding-block: clamp(2rem, 5vw, 3.25rem) 0;
	padding-inline: var(--wp--custom--spacing--band-x);
}

.tbfs-post-header {
	text-align: center;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.tbfs-post-eyebrow {
	color: var(--wp--preset--color--teal-dark);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.78rem;
	margin-bottom: 0.75rem;
}

.tbfs-post-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.tbfs-post-eyebrow a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tbfs-post-title {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 0.85rem;
}

.tbfs-post-date {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.tbfs-post-featured {
	margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
	max-width: 980px;
}

.tbfs-post-featured img {
	width: 100%;
	border-radius: 18px;
	box-shadow: var(--wp--custom--shadow--card);
}

/* Reading column: comfortable measure, generous rhythm */
.tbfs-post-content {
	color: var(--wp--preset--color--contrast);
	font-size: 1.06rem;
	line-height: 1.75;
}

.tbfs-post-content p {
	margin: 0 0 1.35rem;
}

.tbfs-post-content h2,
.tbfs-post-content h3,
.tbfs-post-content h4 {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 2.2rem 0 0.9rem;
}

.tbfs-post-content h2 {
	font-size: 1.7rem;
}

.tbfs-post-content h3 {
	font-size: 1.35rem;
}

.tbfs-post-content a {
	color: var(--wp--preset--color--teal-dark);
	text-underline-offset: 3px;
}

.tbfs-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.tbfs-post-content ul,
.tbfs-post-content ol {
	margin: 0 0 1.35rem;
	padding-left: 1.4rem;
	line-height: 1.7;
}

.tbfs-post-content li {
	margin-bottom: 0.5rem;
}

.tbfs-post-content blockquote {
	border-left: 3px solid var(--wp--preset--color--coral);
	margin: 1.75rem 0;
	padding: 0.4rem 0 0.4rem 1.25rem;
	color: var(--wp--custom--color--text-warm);
	font-style: italic;
}

.tbfs-post-divider {
	max-width: 760px;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto clamp(1.5rem, 3vw, 2rem);
	border-color: var(--wp--custom--color--border-warm);
}

.tbfs-post-nav {
	max-width: 760px;
	margin: 0 auto;
	gap: 1rem;
}

.tbfs-post-nav .wp-block-post-navigation-link {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

.tbfs-post-nav .wp-block-post-navigation-link a {
	color: var(--wp--preset--color--teal-dark);
	text-decoration: none;
}

.tbfs-post-nav .wp-block-post-navigation-link a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tbfs-post-related {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	background: var(--wp--preset--color--cream);
}

@media (max-width: 781px) {
	.tbfs-post-content {
		font-size: 1rem;
	}
	.tbfs-post-content h2 {
		font-size: 1.45rem;
	}
	.tbfs-blog-grid,
	.tbfs-related-query .tbfs-journal {
		gap: 0.9rem;
	}
}