/* =========================================================================
   BuyTides — single product layout
   Tokens lifted from the approved ProductPage design.
   ========================================================================= */

/* The block theme adds block-gap margin above anything it wraps, which showed
   as dead space between the header and the card. */
.bt-pdp {
	margin-block-start: 0 !important;
	--bt-navy: #0b2c4d;
	--bt-navy-soft: #2c4658;
	--bt-cyan: #1fc8e3;
	--bt-cyan-tint: #eaf7fb;
	--bt-cyan-pale: #dff6fb;
	--bt-teal: #1b7fa8;
	--bt-mist: #eef2f4;
	--bt-panel: #f6fafc;
	--bt-line: #dde7ee;
	--bt-muted: #7c93a3;
	--bt-white: #fff;

	--bt-r-lg: 28px;
	--bt-r-md: 20px;
	--bt-r-sm: 14px;

	--bt-shell: 1680px;
	--bt-gutter: clamp(16px, 3vw, 32px);

	--bt-sans: "Inter", system-ui, -apple-system, sans-serif;
	--bt-display: "Outfit", "Inter", system-ui, sans-serif;

	background: var(--bt-mist);
	font-family: var(--bt-sans);
	color: var(--bt-navy);
	padding-bottom: clamp(32px, 5vw, 64px);
}

.bt-pdp *,
.bt-pdp *::before,
.bt-pdp *::after {
	box-sizing: border-box;
}

/* Overflow guards. Grid and flex children default to min-width:auto, so a long
   product title or a wide row can push past the viewport on small screens. */
.bt-pdp {
	max-width: 100%;
	overflow-x: clip;
}

.bt-hero > *,
.bt-hero__info > *,
.bt-media__row > *,
.bt-ci__body > * {
	min-width: 0;
}

.bt-pdp img {
	max-width: 100%;
	height: auto;
}

.bt-title,
.bt-tabs__panel,
.bt-legal,
.bt-ships__intro p {
	overflow-wrap: break-word;
}

.bt-pdp__breadcrumb {
	max-width: var(--bt-shell);
	margin: 0 auto;
	padding: 20px var(--bt-gutter) 0;
	font-size: 13.5px;
	color: var(--bt-muted);
}

.bt-pdp__breadcrumb a {
	color: var(--bt-teal);
	text-decoration: none;
}

.bt-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* ---------- Card shell ---------- */

.bt-card {
	max-width: var(--bt-shell);
	width: calc(100% - clamp(24px, 5vw, 56px));
	margin: clamp(16px, 2.5vw, 28px) auto 0;
	background: var(--bt-white);
	border-radius: var(--bt-r-lg);
	padding: clamp(20px, 3vw, 44px);
}

.bt-hero {
	display: grid;
	/* Design uses auto-fit with a 420px floor rather than fixed fractions. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	align-items: start;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

@media (prefers-reduced-motion: reduce) {
	.bt-pdp * {
		transition: none !important;
	}
}



/* ---------- Media column ---------- */

/* The media column follows the buy box down the page: the right column is far
   taller, and without this the image scrolls away and leaves a dead gutter. */
.bt-hero__media {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: clamp(22px, 3vw, 44px);
	align-self: start;
}

/* Framed panel holding the badge rail and the image, per the design. */
.bt-media__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: clamp(14px, 2vw, 24px);
	background: var(--bt-cyan-tint);
	border: 2px solid var(--bt-cyan);
	border-radius: 20px;
	padding: clamp(16px, 2vw, 28px);
	min-height: clamp(420px, 52vw, 620px);
	overflow: hidden;
}

.bt-badgerail {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 26px;
	flex: 0 0 104px;
}

.bt-badgerail__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.bt-badgerail__icon {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--bt-white);
	box-shadow: 0 2px 10px rgba(11, 44, 77, 0.07);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bt-teal);
}

.bt-badgerail__label {
	font-size: 12.5px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--bt-navy-soft);
}

.bt-gallery {
	flex: 1 1 240px;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bt-gallery .woocommerce-product-gallery {
	width: 100% !important;
	margin: 0;
}

.bt-gallery .woocommerce-product-gallery__image img {
	border-radius: var(--bt-r-sm);
	display: block;
	width: 100%;
	height: auto;
}

.bt-tiles {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
}

.bt-tile {
	background: var(--bt-cyan-tint);
	border: 2px solid var(--bt-cyan);
	border-radius: var(--bt-r-sm);
	padding: 18px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--bt-teal);
}

.bt-tile__label {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--bt-navy-soft);
}

/* ---------- Info column ---------- */

.bt-lowstock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-family: var(--bt-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--bt-teal);
}

.bt-lowstock .bt-icon {
	width: 17px;
	height: 17px;
}

.bt-ratingrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

.bt-stars {
	display: flex;
	gap: 2px;
	color: var(--bt-line);
}

.bt-star {
	width: 17px;
	height: 17px;
}

.bt-star.is-on {
	color: var(--bt-cyan);
	fill: var(--bt-cyan);
}

.bt-ratingrow__count {
	font-size: 14px;
	color: var(--bt-muted);
}

.bt-pill {
	font-family: var(--bt-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bt-navy);
	background: var(--bt-cyan-pale);
	border-radius: 5px;
	padding: 4px 9px;
}

.bt-title {
	font-family: var(--bt-display);
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0 0 16px;
	text-wrap: balance;
}

.bt-promises {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bt-promises li {
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--bt-panel);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--bt-navy-soft);
}

.bt-promises .bt-icon {
	width: 16px;
	height: 16px;
	color: var(--bt-teal);
}

.bt-pricerow {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 22px;
}

.bt-price {
	font-family: var(--bt-display);
	font-size: 34px;
	font-weight: 700;
	color: var(--bt-navy);
}

.bt-price del {
	font-size: 20px;
	font-weight: 500;
	color: var(--bt-muted);
	margin-left: 8px;
}

.bt-price ins {
	text-decoration: none;
}

.bt-price__save {
	font-family: var(--bt-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bt-navy);
	background: var(--bt-cyan);
	border-radius: 6px;
	padding: 5px 10px;
}

/* ---------- Spec tabs ---------- */

.bt-tabs {
	margin-bottom: 26px;
}

.bt-tabs__nav {
	display: flex;
	gap: 26px;
	border-bottom: 1px solid var(--bt-line);
	margin-bottom: 16px;
}

.bt-tabs__btn {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 0 0 12px;
	margin-bottom: -1px;
	cursor: pointer;
	font-family: var(--bt-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--bt-muted);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.bt-tabs__btn:hover {
	color: var(--bt-navy);
}

.bt-tabs__btn.is-active {
	color: var(--bt-navy);
	border-bottom-color: var(--bt-cyan);
}

.bt-tabs__panel {
	font-size: 15px;
	line-height: 1.72;
	color: var(--bt-navy-soft);
}

.bt-tabs__panel p {
	margin: 0 0 12px;
}

.bt-tabs__panel p:last-child {
	margin-bottom: 0;
}

.bt-tabs__panel b,
.bt-tabs__panel strong {
	color: var(--bt-navy);
}

/* ---------- Size selector ---------- */

.bt-label {
	font-family: var(--bt-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bt-muted);
	margin: 0 0 12px;
}

.bt-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 26px;
}

.bt-size {
	appearance: none;
	background: var(--bt-white);
	border: 1px solid var(--bt-line);
	border-radius: var(--bt-r-sm);
	padding: 14px 18px;
	min-width: 100px;
	cursor: pointer;
	text-align: left;
	font-family: var(--bt-display);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bt-size:hover:not(.is-active):not(.is-oos) {
	border-color: var(--bt-cyan);
}

.bt-size__name {
	display: block;
	font-size: 17px;
	font-weight: 600;
	color: var(--bt-navy);
}

.bt-size__price {
	display: block;
	font-size: 14px;
	color: var(--bt-muted);
	margin-top: 2px;
}

.bt-size__price .amount {
	color: inherit;
}

.bt-size.is-active {
	background: var(--bt-navy);
	border-color: var(--bt-navy);
}

.bt-size.is-active .bt-size__name {
	color: var(--bt-white);
}

.bt-size.is-active .bt-size__price,
.bt-size.is-active .bt-size__price .amount {
	color: #8fb6cc;
}

.bt-size.is-oos {
	opacity: 0.45;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* ---------- Quantity packs ---------- */

.bt-packhead {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
}

.bt-packhead__title,
.bt-packhead__value {
	font-family: var(--bt-display);
	font-size: 19px;
	font-weight: 600;
}

.bt-packhead__value {
	color: var(--bt-teal);
}

.bt-packs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.bt-pack {
	position: relative;
	appearance: none;
	background: var(--bt-cyan-tint);
	border: 0;
	border-radius: var(--bt-r-sm);
	padding: 16px 14px;
	cursor: pointer;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-family: var(--bt-display);
	color: var(--bt-teal);
}

.bt-pack::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--bt-cyan);
	border-radius: var(--bt-r-sm);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.bt-pack.is-active::after {
	opacity: 1;
}

.bt-pack__label {
	font-size: 17px;
	font-weight: 600;
	color: var(--bt-navy);
	white-space: nowrap;
}

/* Label over price, sitting beside the image rather than under it. flex-shrink
   is 0 so a cramped tile (the three-up columns fall to ~137px around a 1024px
   viewport) squeezes the image, which can afford it, instead of clipping the
   label and the price, which cannot. */
.bt-pack__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 0 0 auto;
}

.bt-pack__price {
	font-family: var(--bt-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--bt-teal);
	line-height: 1.2;
}

/* Photo of the actual pack, sized to a square box so the 1/3/5 compositions
   all sit on the same baseline. Falls back to the vial glyph in the template
   when the image has not been uploaded. */
.bt-pack__img {
	flex: 0 1 auto;
	min-width: 0;
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 8px;
}

/* Centred on the tile's top edge rather than pinned to its right corner. */
.bt-pack__flag {
	position: absolute;
	top: -10px;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bt-navy);
	background: var(--bt-cyan);
	border-radius: 5px;
	padding: 3px 8px;
}

/* ---------- Purchase mode ---------- */

.bt-modes {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 26px;
}

.bt-mode {
	position: relative;
	border-radius: var(--bt-r-sm);
	background: var(--bt-cyan-tint);
}

.bt-mode::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--bt-cyan);
	border-radius: var(--bt-r-sm);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.bt-mode.is-active::after {
	opacity: 1;
}

.bt-mode--sub {
	background: var(--bt-cyan-tint);
}

.bt-mode.is-unavailable {
	opacity: 0.55;
}

/* The one-time option is itself the <label> (the subscribe option wraps one in
   .bt-mode__head instead), so `.bt-mode > label` never matched it. Without this
   the row lost its flex layout and padding: the dot sat on the border, the title
   ran to the card edge and the price wrapped onto its own line. */
label.bt-mode,
.bt-mode > label,
.bt-mode__head {
	width: 100%;
	padding: 20px 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 16px;
	text-align: left;
}

/* The subscribe body runs to two lines, so centring the row put the dot and the
   price 11px below the title. Aligning to the start pins all three to the title
   line, matching the one-time row. */
.bt-mode--sub .bt-mode__head {
	padding-bottom: 16px;
	align-items: flex-start;
}

.bt-mode.is-unavailable .bt-mode__head {
	cursor: not-allowed;
}

.bt-mode input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bt-mode__dot {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--bt-muted);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bt-mode__dot::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--bt-cyan);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.bt-mode.is-active .bt-mode__dot {
	border-color: var(--bt-cyan);
}

.bt-mode.is-active .bt-mode__dot::before {
	opacity: 1;
}

.bt-mode__body {
	flex: 1;
}

.bt-mode__title {
	display: block;
	font-family: var(--bt-display);
	font-size: 17px;
	font-weight: 600;
}

.bt-mode__sub {
	display: block;
	font-size: 13.5px;
	color: var(--bt-muted);
	margin-top: 3px;
}

.bt-mode__figures {
	text-align: right;
}

.bt-mode__total {
	display: block;
	font-family: var(--bt-display);
	font-size: 19px;
	font-weight: 700;
}

.bt-mode__save {
	display: block;
	font-size: 12.5px;
	color: var(--bt-teal);
	margin-top: 3px;
}

.bt-mode__cadence {
	padding: 0 22px 20px;
}

.bt-mode__cadence select {
	width: 100%;
	appearance: none;
	font-family: var(--bt-sans);
	font-size: 14.5px;
	color: var(--bt-navy);
	background: var(--bt-white)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C93A3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
		no-repeat right 16px center / 18px;
	border: 1px solid var(--bt-line);
	border-radius: 10px;
	padding: 13px 44px 13px 16px;
	cursor: pointer;
}

/* ---------- Sticky add to cart ---------- */

/* Parked off-screen rather than display:none so it can slide in, and kept out
   of the tab order until it is actually on screen. */
.bt-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: var(--bt-white);
	border-top: 1px solid var(--bt-line);
	box-shadow: 0 -8px 26px rgba(11, 44, 77, 0.1);
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s;
}

.bt-sticky.is-visible {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.bt-sticky__inner {
	max-width: var(--bt-shell);
	margin: 0 auto;
	padding: 10px clamp(12px, 3vw, 32px);
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.6vw, 20px);
}

.bt-sticky__img {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 10px;
}

.bt-sticky__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bt-sticky__name {
	font-family: var(--bt-display);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--bt-navy);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bt-sticky__price {
	font-family: var(--bt-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--bt-navy);
}

.bt-sticky__packs {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
}

.bt-sticky__pack {
	appearance: none;
	cursor: pointer;
	background: var(--bt-cyan-tint);
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 10px 14px;
	font-family: var(--bt-display);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--bt-navy);
	white-space: nowrap;
	transition: border-color 0.15s ease;
}

.bt-sticky__pack:hover {
	border-color: var(--bt-cyan);
}

.bt-sticky__pack.is-active {
	border-color: var(--bt-cyan);
}

.bt-sticky__add {
	flex: 0 0 auto;
	appearance: none;
	cursor: pointer;
	border: 0;
	border-radius: 12px;
	background: var(--bt-navy);
	color: var(--bt-white);
	font-family: var(--bt-display);
	font-size: 15.5px;
	font-weight: 700;
	padding: 14px 26px;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.bt-sticky__add:hover {
	background: var(--bt-navy-soft);
}

.bt-sticky__add[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (max-width: 760px) {
	.bt-sticky__info {
		flex: 1 1 100%;
		order: 1;
	}

	.bt-sticky__img {
		order: 0;
		width: 40px;
		height: 40px;
	}

	.bt-sticky__packs {
		order: 2;
	}

	.bt-sticky__add {
		order: 3;
		flex: 1 1 auto;
		padding: 13px 18px;
	}

	.bt-sticky__inner {
		flex-wrap: wrap;
		gap: 10px;
	}
}

@media (max-width: 420px) {
	.bt-sticky__pack {
		padding: 9px 10px;
		font-size: 13.5px;
	}
}
/* ---------- First-order promo ---------- */

/* Sits below the related grid and lines up with it: same shell width, same
   gutters, same large radius. */
/* Renamed from .bt-promo: cart-drawer.css already owns that class for the navy
   chip in the drawer, and its display:flex was laying these children out in a
   row. Explicit column flex here so the block cannot be re-flowed by anything
   else either. */
.bt-pdp .bt-firstorder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: var(--bt-shell);
	width: calc(100% - clamp(24px, 5vw, 56px));
	margin: clamp(18px, 2.5vw, 28px) auto 0;
	padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 56px);
	background: var(--bt-cyan-tint);
	border-radius: var(--bt-r-lg);
	text-align: center;
}

.bt-pdp .bt-firstorder__title {
	margin: 0 auto;
	max-width: 18ch;
	font-family: var(--bt-display);
	font-size: clamp(28px, 4vw, 46px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--bt-navy);
}

.bt-pdp .bt-firstorder__title span {
	color: var(--bt-teal);
}

.bt-pdp .bt-firstorder__copy {
	margin: clamp(14px, 1.6vw, 20px) auto 0;
	max-width: 46ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--bt-navy-soft);
}

.bt-pdp .bt-firstorder__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: clamp(20px, 2.4vw, 30px);
	padding: 16px 30px;
	border-radius: 999px;
	background: var(--bt-cyan);
	color: var(--bt-navy);
	font-family: var(--bt-display);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}

.bt-pdp .bt-firstorder__cta:hover {
	background: var(--bt-cyan-pale);
	color: var(--bt-navy);
}
/* ---------- Bac water add-on ---------- */

/* Same tint, radius and 22px gutters as the purchase-mode rows above, so the
   three read as one stack. Single row: checkbox, thumbnail, text and price all
   inline rather than stacked. */
.bt-addon {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0 0 26px;
	padding: 14px 22px;
	border-radius: var(--bt-r-sm);
	background: var(--bt-cyan-tint);
	cursor: pointer;
	text-align: left;
}

.bt-addon::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid var(--bt-cyan);
	border-radius: var(--bt-r-sm);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.bt-addon:has(input:checked)::after,
.bt-addon:focus-within::after {
	opacity: 1;
}

.bt-addon input[type=checkbox] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bt-addon__box {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: 2px solid var(--bt-muted);
	background: var(--bt-white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bt-addon__box::before {
	content: '';
	width: 11px;
	height: 6px;
	border-left: 2.5px solid var(--bt-white);
	border-bottom: 2.5px solid var(--bt-white);
	transform: rotate(-45deg) translate(1px, -1px);
	opacity: 0;
}

.bt-addon input:checked ~ .bt-addon__box {
	background: var(--bt-cyan);
	border-color: var(--bt-cyan);
}

.bt-addon input:checked ~ .bt-addon__box::before {
	opacity: 1;
}

.bt-addon__img {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--bt-white);
}

.bt-addon__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.bt-addon__name {
	font-family: var(--bt-display);
	font-size: 17px;
	font-weight: 600;
	color: var(--bt-navy);
}

.bt-addon__sub {
	font-size: 13.5px;
	color: var(--bt-muted);
}

.bt-addon__price {
	flex: 0 0 auto;
	margin-left: auto;
	font-family: var(--bt-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--bt-navy);
	white-space: nowrap;
}
/* ---------- Submit ---------- */

.bt-submit {
	width: 100%;
	appearance: none;
	border: 0;
	border-radius: var(--bt-r-sm);
	background: linear-gradient(90deg, #0b2c4d 0%, #1b7fa8 100%);
	color: var(--bt-white);
	font-family: var(--bt-display);
	font-size: 20px;
	font-weight: 600;
	padding: 22px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(11, 44, 77, 0.18);
	transition: filter 0.15s ease;
}

.bt-submit:hover {
	filter: brightness(1.12);
}

.bt-submit:active {
	filter: brightness(0.92);
}

.bt-submit[disabled] {
	filter: grayscale(0.5);
	opacity: 0.6;
	cursor: not-allowed;
}

.bt-oos {
	background: var(--bt-panel);
	border-radius: var(--bt-r-sm);
	padding: 20px;
	font-weight: 500;
	color: var(--bt-navy-soft);
}

/* ---------- Reassurance ---------- */

.bt-guarantee {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-top: 24px;
	color: var(--bt-teal);
}

.bt-guarantee p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--bt-navy-soft);
}

.bt-guarantee b {
	color: var(--bt-navy);
}

.bt-legal {
	margin: 18px 0 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--bt-muted);
}

/* ---------- Category shortcuts ---------- */

.bt-shortcuts {
	max-width: var(--bt-shell);
	width: calc(100% - clamp(24px, 5vw, 56px));
	margin: clamp(18px, 2.5vw, 28px) auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(12px, 1.6vw, 20px);
}

/* All three sit in the same tint with no preselected state - the border is the
   only hover affordance. It is transparent rather than absent so the box does
   not resize on hover (box-sizing is border-box across .bt-pdp). */
.bt-shortcut {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: var(--bt-cyan-tint);
	border: 2px solid transparent;
	border-radius: var(--bt-r-md);
	padding: 22px 20px;
	font-family: var(--bt-display);
	font-size: 17px;
	font-weight: 600;
	color: var(--bt-navy);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.bt-shortcut:hover,
.bt-shortcut:focus-visible {
	border-color: var(--bt-cyan);
}

/* The accent modifier is left inert: a filter can still set accent on a
   shortcut, but none of them should render as already chosen. */
.bt-shortcut--accent {
	background: var(--bt-cyan-tint);
}

/* ---------- Ships in the box ---------- */

.bt-ships {
	max-width: var(--bt-shell);
	width: calc(100% - clamp(24px, 5vw, 56px));
	margin: clamp(18px, 2.5vw, 28px) auto 0;
	background: var(--bt-white);
	border-radius: var(--bt-r-lg);
	padding: clamp(28px, 4vw, 56px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(36px, 5vw, 80px);
	align-items: start;
}

.bt-ships__intro h2 {
	font-family: var(--bt-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}

.bt-ships__intro p {
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--bt-navy-soft);
}

.bt-specgrid {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 36px 48px;
}

.bt-specgrid dt {
	font-family: var(--bt-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bt-muted);
	margin-bottom: 8px;
}

.bt-specgrid dd {
	margin: 0;
	font-family: var(--bt-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--bt-navy);
}

/* ---------- Related products (core hook output) ---------- */

/* div.product in the selector is deliberate: woocommerce-blocktheme.css sets
   `.woocommerce div.product .related.products { margin-top: 5em }`, which
   outranks a two-class rule and left ~100px above this section against the
   ~21px above the shortcut row. Matching the shortcuts' clamp puts equal space
   on both sides of those buttons. */
.bt-pdp div.product .related.products {
	max-width: var(--bt-shell);
	width: calc(100% - clamp(24px, 5vw, 56px));
	margin: clamp(18px, 2.5vw, 28px) auto 0;
	background: var(--bt-white);
	border-radius: var(--bt-r-lg);
	padding: clamp(28px, 4vw, 48px);
}

.bt-pdp .related.products > h2 {
	font-family: var(--bt-display);
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 24px;
}

/* The related loop reuses woocommerce/content-product.php, the same card the
   shop grid uses, but shop.css is only enqueued on the shop and taxonomy
   archives - so on a product page that markup arrived with no styling at all.
   The card rules are repeated here, scoped to the related section. The scope is
   also what keeps `.bt-card` from meaning two different things: on this page it
   is the big white page panel above, and three classes outrank that one. */
/* Fixed at four across rather than auto-fill, which would have run to five or
   six columns on a wide screen. minmax(0, 1fr) lets the columns divide the full
   width evenly instead of being held open by their content. */
.bt-pdp .related.products ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}

@media (max-width: 900px) {
	.bt-pdp .related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.bt-pdp .related.products ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* WooCommerce clearfixes the list with ::before/::after. In a grid container
   those generate two phantom grid items, which pushed the first card out of
   column one and wrapped the fourth onto its own row. */
.bt-pdp .related.products ul.products::before,
.bt-pdp .related.products ul.products::after {
	content: none;
}

/* The card template emits <article> straight into the list, so target every
   child rather than the li.product WooCommerce would normally wrap it in. */
.bt-pdp .related.products ul.products > * {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: flex;
	min-width: 0;
}

.bt-pdp .related.products .bt-card {
	/* Reset of the page-panel rule this class carries elsewhere on the page. */
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;

	background: var(--bt-white);
	border: 1.5px solid var(--bt-line);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.bt-pdp .related.products .bt-card:hover {
	border-color: var(--bt-cyan);
	box-shadow: 0 10px 30px rgba(11, 44, 77, 0.1);
}

.bt-pdp .related.products .bt-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--bt-navy);
	overflow: hidden;
}

.bt-pdp .related.products .bt-card__link,
.bt-pdp .related.products .bt-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.bt-pdp .related.products .bt-card__save {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var(--bt-display);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bt-navy);
	background: var(--bt-cyan);
	border-radius: 6px;
	padding: 5px 9px;
}

.bt-pdp .related.products .bt-card__buy {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translate(-50%, 14px);
	opacity: 0;
	border: 0;
	border-radius: 999px;
	background: var(--bt-white);
	color: var(--bt-navy);
	font-family: var(--bt-display);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 20px;
	white-space: nowrap;
	box-shadow: 0 8px 22px rgba(11, 44, 77, 0.28);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.bt-pdp .related.products .bt-card:hover .bt-card__buy,
.bt-pdp .related.products .bt-card__buy:focus-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.bt-pdp .related.products .bt-card__body {
	padding: 16px 18px 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1;
}

.bt-pdp .related.products .bt-card__cat {
	margin: 0;
	font-family: var(--bt-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bt-muted);
}

.bt-pdp .related.products .bt-card__name {
	margin: 0;
	font-family: var(--bt-display);
	font-size: 17.5px;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.01em;
}

.bt-pdp .related.products .bt-card__name a {
	color: var(--bt-navy);
	text-decoration: none;
}

.bt-pdp .related.products .bt-card__name a:hover {
	color: var(--bt-teal);
}

.bt-pdp .related.products .bt-card__dose {
	margin: 0;
	font-size: 13.5px;
	color: var(--bt-muted);
}

.bt-pdp .related.products .bt-card__pricerow {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 2px;
}

.bt-pdp .related.products .bt-card__price {
	font-family: var(--bt-display);
	font-size: 23px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--bt-navy);
}

.bt-pdp .related.products .bt-card__was {
	font-size: 15px;
	color: var(--bt-muted);
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
}

.bt-pdp .related.products .bt-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
	padding-bottom: 16px;
	list-style: none;
}

.bt-pdp .related.products .bt-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--bt-cyan-tint);
	border-radius: 999px;
	padding: 6px 11px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bt-teal);
}

/* Matches the shop grid: solid navy bar across the foot of the card. */
.bt-pdp .related.products .bt-card__view {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: auto;
	border: 0;
	background: var(--bt-navy);
	padding: 16px;
	font-family: var(--bt-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--bt-white);
	text-decoration: none;
	transition: background 0.15s ease;
}

.bt-pdp .related.products .bt-card__view:hover,
.bt-pdp .related.products .bt-card__view:focus-visible {
	background: #164a7a;
	color: var(--bt-white);
}

.bt-pdp .related.products .bt-card__eye {
	width: 19px;
	height: 19px;
}

/* ---------- Motion preferences ---------- */

/* auto-fit resolved to a different track count at several widths (five pack
   tracks at 980px, one spec track at 768px). Explicit counts keep the rows
   predictable. */
.bt-packs {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bt-specgrid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1281px) {
	.bt-specgrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Breadcrumb (under the title) ---------- */

.bt-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin: 0 0 20px;
	font-size: 13.5px;
	color: var(--bt-muted);
}

.bt-crumbs__link {
	color: var(--bt-teal);
	text-decoration: none;
}

.bt-crumbs__link:hover {
	color: var(--bt-navy);
	text-decoration: underline;
}

.bt-crumbs__sep {
	color: #a8bcc7;
}

.bt-crumbs__current {
	color: var(--bt-navy-soft);
	font-weight: 500;
}

@media (max-width: 440px) {
	.bt-crumbs {
		gap: 7px;
		font-size: 12.5px;
	}
}

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

     <=1280  tighten the column gap before anything moves
     <=980   single column: gallery above the buy box
     <=760   badge rail goes horizontal above the gallery
     <=600   size buttons and packs go two-up, card padding drops
     <=440   single-column selectors, compact type
   Every stage keeps the buy box usable with one thumb. */

@media (max-width: 1280px) {
	.bt-hero {
		gap: clamp(24px, 3vw, 44px);
	}

	.bt-specgrid {
		gap: 28px 32px;
	}
}

@media (max-width: 980px) {
	.bt-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Once stacked, a sticky media column would pin itself under the buy box. */
	.bt-hero__media {
		position: static;
	}

	.bt-media__row {
		min-height: 0;
	}

	/* The buy box is what people came for, so it leads once stacked -
	   the gallery follows rather than pushing price below the fold. */
	.bt-hero__media {
		order: 2;
	}

	.bt-hero__info {
		order: 1;
	}

	.bt-title {
		font-size: clamp(26px, 5vw, 34px);
	}
}

@media (max-width: 760px) {
	.bt-media__row {
		flex-direction: column-reverse;
		gap: 14px;
	}

	.bt-badgerail {
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px 18px;
	}

	.bt-badgerail__item {
		flex-direction: row;
		gap: 8px;
		flex: 0 1 auto;
	}

	.bt-badgerail__icon {
		width: 34px;
		height: 34px;
	}

	.bt-badgerail__label {
		text-align: left;
	}

	.bt-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.bt-card,
	.bt-ships {
		padding: 20px 16px;
		border-radius: 20px;
		width: calc(100% - 20px);
	}

	.bt-shortcuts {
		width: calc(100% - 20px);
	}

	.bt-sizes {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.bt-size {
		min-width: 0;
		padding: 12px 14px;
	}

	.bt-packs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.bt-pack {
		padding: 18px 12px;
	}

	.bt-promises {
		gap: 8px;
	}

	.bt-promises li {
		font-size: 12.5px;
		padding: 7px 12px;
	}

	.bt-pricerow {
		gap: 10px;
	}

	.bt-price {
		font-size: 30px;
	}

	.bt-tabs__nav {
		gap: 18px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.bt-tabs__nav::-webkit-scrollbar {
		display: none;
	}

	.bt-tabs__btn {
		white-space: nowrap;
	}

	.bt-mode > label,
	.bt-mode__head {
		padding: 16px 14px;
		gap: 12px;
	}

	.bt-mode__cadence {
		padding: 0 14px 16px;
	}

	.bt-submit {
		font-size: 18px;
		padding: 18px;
	}

	.bt-specgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.bt-specgrid dd {
		font-size: 21px;
	}

	.bt-ships__intro h2 {
		font-size: 25px;
	}
}

@media (max-width: 440px) {
	.bt-sizes,
	.bt-packs,
	.bt-tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.bt-pack__flag {
		right: auto;
	}

	.bt-mode__figures {
		text-align: right;
		flex: 0 0 auto;
	}

	.bt-mode__title {
		font-size: 15.5px;
	}

	.bt-mode__total {
		font-size: 17px;
	}

	.bt-packhead {
		flex-wrap: wrap;
		gap: 4px;
	}

	.bt-packhead__title,
	.bt-packhead__value {
		font-size: 17px;
	}

	.bt-guarantee {
		gap: 10px;
	}

	.bt-badgerail__label {
		font-size: 12px;
	}
}

@media (max-width: 340px) {
	.bt-card,
	.bt-ships {
		padding: 16px 12px;
	}

	.bt-submit {
		font-size: 16px;
		padding: 16px;
	}

	.bt-specgrid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* WooCommerce hard-codes style="opacity:0" on this wrapper and fades it in with
   its own gallery script. Where that script isn't present the featured image
   renders but stays invisible, so the visible state is forced here. !important
   is required: it has to beat an inline style. */
.bt-gallery .woocommerce-product-gallery {
	opacity: 1 !important;
}