.travelike-product-hero__grid {
	display: flex;
	/* No horizontal gap: the content column (and its grey box) butts
	   flush against the product image. Keep a row gap for when the
	   columns stack on mobile. */
	column-gap: 0;
	row-gap: 1.5rem;
	/* Stretch so the content column matches the image height; content is then
	   vertically centred and its (fluid) text fits that height. */
	align-items: stretch;
	flex-wrap: wrap;
}

.travelike-product-hero__grid > .travelike-product-hero__image,
.travelike-product-hero__grid > .travelike-product-hero__content {
	flex: 1 1 320px;
	min-width: 0;
}

.travelike-product-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.travelike-product-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0; /* image is not rounded */
}

.travelike-product-hero__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	border-radius: 12px;
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--muted);
}

/* The content column itself has no left padding so the grey box can
   sit flush against the image. The readable elements (title, teaser,
   price, button) get a comfortable left inset instead, so only the
   grey box touches the image. */
/* Fluid type: scales down as the viewport narrows so the text keeps pace with
   the (also-shrinking) image height. */
.travelike-product-hero__title {
	margin: 0 0 0.5rem;
	padding-inline-start: 1.75rem;
	/* Montserrat 700, matching the global h1/h2 style (keeps the hero's own
	   responsive size rather than a flat 33px). */
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(0.9rem, -1.735rem + 5.37vw, 2.4rem);
	line-height: 1.15;
}

.travelike-product-hero__teaser {
	margin: 0 0 0.75rem;
	padding-inline-start: 1.75rem;
	font-family: var(--wp--preset--font-family--montserrat);
	text-transform: uppercase;
	letter-spacing: 0;
	/* The brand "standard page blue" — driven by the Customizer Accent colour
	   setting (travelike_accent → --primary), not a hardcoded value. */
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: 1.1em !important;
	line-height: 1.35;
}

.travelike-product-hero__price {
	margin: 0 0 1rem;
	padding-inline-start: 1.75rem;
	font-weight: 600;
	font-size: 2.1em;
	color: #000;
}

/* Pay-what-you-want note — small, grey, normal weight, on the same line as the price. */
.travelike-product-hero__price-note {
	display: inline;
	margin-left: 0.4rem;
	font-size: 0.72rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
}

/* Buy-now is a nested squeezy/buy-now block (wrapped in .wp-block-squeezy-buy-now).
   Span the column width so the block's own text-align (left/center/right) can
   position the button; the inset keeps a left-aligned button lined up with the
   title/teaser. */
.travelike-product-hero__content > .wp-block-squeezy-buy-now {
	align-self: stretch;
	padding-inline-start: 1.75rem;
	margin-block-start: 0.75rem;
}

.travelike-product-hero__notice {
	padding-inline-start: 1.75rem;
	color: var(--wp--preset--color--muted);
	font-style: italic;
}

/* Grey description box: attaches to the image on its left side.
   Flat left corners (facing the image), rounded right corners.
   No left margin so it butts flush against the product image. */
.travelike-product-hero__image {
	position: relative;
	z-index: 2; /* image above the grey box so the box can tuck under it */
	/* A square product image can't be as tall as readable copy + a button, so
	   centre it: any height difference becomes balanced padding above/below the
	   image instead of a gap only below it. */
	align-self: center;
}

.travelike-product-hero .travelike-greybox {
	position: relative;
	z-index: 1;
	/* Fixed tuck (covers a transparent image edge band) instead of a % of the
	   column — a % stole most of the text width at small widths, forcing the copy
	   into many lines and overflowing the image height. */
	--tl-hero-overlap: 2.5rem;
	margin-bottom: 1.25rem;
	/* All corners rounded; the box slides ~33% under the image on the left
	   (behind any transparent image edge). The matching inline padding keeps the
	   text out from under the image. */
	border-radius: 14px;
	margin-inline-start: calc(-1 * var(--tl-hero-overlap));
	padding-inline-start: calc(var(--tl-hero-overlap) + 1.75rem);
	font-size: clamp(0.5rem, -0.33rem + 1.667vw, 0.95rem);
	line-height: 1.5;
}

@media (max-width: 781px) {
	.travelike-product-hero__grid {
		flex-direction: column;
	}

	/* Stacked: reset the horizontal tuck; all corners stay rounded. */
	.travelike-product-hero .travelike-greybox {
		border-radius: 14px;
		margin-inline: 0;
		padding-inline: 1.75rem;
	}

	/* Stacked = no image-height constraint, so the fluid down-scaling is no
	   longer needed; restore comfortable, readable sizes. */
	.travelike-product-hero__title {
		font-size: 1.6rem;
	}
	.travelike-product-hero__teaser {
		font-size: 1.1rem;
	}
	.travelike-product-hero__price {
		font-size: 1.2rem;
	}
	.travelike-product-hero .travelike-greybox {
		font-size: 0.95rem;
	}
}