/* BuyTides — "not sure what's right for you" promo card.

   Sits in the product grid as a sibling of the product cards on the shop page
   and on category archives. It deliberately carries no .bt-card class: the two
   grids style .bt-card differently (shop uses .bt-card__media, the archives use
   .bt-media), and inheriting either would drag in padding and borders this card
   does not want. It only has to match the grid cell, which it does by being a
   grid child like any other. */

.bt-promo {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	padding: clamp(22px, 2.2vw, 30px);
	/* Brand navy ramp — --bt-navy, --bt-navy-mid, --bt-navy-deep. Hard-coded
	   rather than var()'d because those custom properties are scoped to
	   .bt-header / .bt-footer and do not reach the product grid. */
	background: linear-gradient(155deg, #2b3754 0%, #164a7a 55%, #08213a 100%);
	color: #fff;
	min-height: 100%;
}

/* Chain banner, stood on end down the right edge.

   The asset is a wide horizontal strip (1005x336), so it is laid out at that
   ratio and rotated a quarter turn. Rotation happens after layout, which is why
   the offset looks odd: a 560x170 box spun about its centre overhangs its own
   footprint by (560-170)/2 = 195px each side, so right:-195px is what brings
   the ROTATED right edge flush with the card. overflow:hidden on the card trims
   whatever runs past the top and bottom. */
.bt-promo::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	right: -195px;
	width: 560px;
	height: 170px;
	transform: translateY(-50%) rotate(90deg);
	background: url("../img/buytides-chain-banner.svg") center / contain no-repeat;
	opacity: 0.4;
	pointer-events: none;
}

/* Content rides above the watermark. Without this the copy shares a stacking
   level with it and the chain cuts through the text. */
.bt-promo > * {
	position: relative;
	z-index: 1;
}

.bt-promo__title {
	margin: 0 0 14px;
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(21px, 1.7vw, 26px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #fff;
}

.bt-promo__lede {
	margin: 0 0 16px;
	font-family: "Outfit", system-ui, sans-serif;
	font-size: clamp(15px, 1.15vw, 17px);
	font-style: italic;
	font-weight: 500;
	line-height: 1.35;
	color: #e4f0f7;
}

.bt-promo__copy {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: #b9d2e2;
}

/* margin-top:auto pins the button to the bottom edge however tall the cell
   grows, so the promo lines up with the product cards' View Now bar rather than
   floating mid-cell in a short row. */
.bt-promo__cta {
	margin-top: auto;
	padding-top: 26px;
}

.bt-promo__cta a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 15px 20px;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	font-family: "Outfit", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: #fff;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bt-promo__cta a:hover,
.bt-promo__cta a:focus-visible {
	background: #fff;
	border-color: #fff;
	color: #2b3754;
}

/* The grid's own min-height rules come from the product cards; on a phone the
   promo has no image to give it height, so it gets a floor of its own. */
@media (max-width: 600px) {
	.bt-promo {
		min-height: 320px;
	}
}