/* ==========================================================================
   Wine catalog pages on the Gifts template (Nicole Nov 4, Erik approved).
   /collection/crash/, /collection/keras-collection/,
   /collection/signature/ (templates/taxonomy-wine_collection-*.html)
   and the Wine Story's Fan Favorites (blocks/wine-hub).

   Prototype: prototypes/13/catalog.css over 09-gifts.css. gifting.css stays the
   template (the pages' <main> also carries .rhinory-page--gifting); this file
   only adds the packshot card variant and the collection-story lines, rooted on
   .rhinory-page--catalog. Brief docs/briefs/2026-11-04-wine-catalog-pages.md.
   ========================================================================== */

/* ---- collection hero: ONE photo, no rotator ---- */
.rhinory-page--catalog .ct-hero-photo {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--gx-carbon);
	box-shadow: 0 40px 84px -40px rgba(45, 41, 38, 0.52);
}
.rhinory-page--catalog .ct-hero-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.94) contrast(1.04);
}
.rhinory-page--catalog .ct-hero-photo--crash img { object-position: 50% 60%; }
.rhinory-page--catalog .ct-hero-photo--keras img { object-position: 50% 45%; }
.rhinory-page--catalog .ct-hero-photo--signature img { object-position: 50% 62%; }

/* ---- the collection's story lines (prototype .ct-meaning / .ct-p / .ct-from) ---- */
.rhinory-page--catalog .ct-meaning {
	margin: 24px 0 0;
	font-family: var(--gx-ff-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(21px, 2vw, 26px);
	line-height: 1.34;
	color: var(--gx-ink-2);
	text-wrap: pretty;
}
.rhinory-page--catalog .ct-meaning strong {
	font-style: normal;
	font-weight: 500;
	color: var(--gx-burgundy);
}
.rhinory-page--catalog .ct-p {
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--gx-ink-2);
	max-width: 60ch;
	text-wrap: pretty;
}
.rhinory-page--catalog .ct-from {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 22px 0 0;
}
.rhinory-page--catalog .ct-from .n {
	font-family: var(--gx-ff-display);
	font-weight: 500;
	font-size: 36px;
	line-height: 1;
	color: var(--gx-burgundy);
	font-variant-numeric: lining-nums;
}
.rhinory-page--catalog .ct-from .l {
	font-family: var(--gx-ff-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gx-ink-2);
}
.rhinory-page--catalog .gx-hero .gx-btns { margin-top: 32px; }

/* ---- wine card: the gift card with a packshot on paper (prototype .ct-card) ----
   Token overrides sit on the block roots, as gifting.css explains. */
.rhinory-page--catalog .gx-slot--wines,
.rhinory-page--catalog .gx-slot--wines .winery-product-card {
	--winery-card-media-aspect-ratio: 1 / 1;
	--winery-card-media-inset: 0px;
}
.rhinory-page--catalog .gx-slot--wines .winery-product-card__media {
	background: var(--gx-paper);
}
.rhinory-page--catalog .gx-slot--wines .winery-product-card__image,
.rhinory-page--catalog .gx-slot--wines .winery-product-card__secondary-image {
	object-fit: contain;
	padding: 8% 15%;
	filter: saturate(0.96) contrast(1.03) drop-shadow(0 14px 22px rgba(45, 41, 38, 0.16));
	transform-origin: 50% 72%;
}
.rhinory-page--catalog .gx-slot--wines .winery-product-card:hover .winery-product-card__image,
.rhinory-page--catalog .gx-slot--wines .winery-product-card:focus-within .winery-product-card__image {
	transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
	.rhinory-page--catalog .gx-slot--wines .winery-product-card:hover .winery-product-card__image,
	.rhinory-page--catalog .gx-slot--wines .winery-product-card:focus-within .winery-product-card__image {
		transform: none;
	}
}

/* ---- teaser strip without a photo: two links side by side ---- */
.rhinory-page--catalog .ct-tsr .gx-tsr__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
}

/* ==========================================================================
   Polish pass (CD 2026-11-04, prototypes/design_handoff/_placed-2026-11-04-collection-53-polish/)
   ========================================================================== */

/* Visible breadcrumb, the PDP's pattern; it matches the page's BreadcrumbList. */
.rhinory-page--catalog .ct-crumb {
	background: var(--gx-paper);
	padding-top: 28px;
}
.rhinory-page--catalog .ct-crumb__trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 11px;
	margin: 0 auto;
	font-family: var(--gx-ff-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.rhinory-page--catalog .ct-crumb__trail a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--gx-ink-2);
}
.rhinory-page--catalog .ct-crumb__trail a:hover { color: var(--gx-burgundy); }
.rhinory-page--catalog .ct-crumb__trail .sep { color: var(--gx-rule-2); }
.rhinory-page--catalog .ct-crumb__current { color: var(--gx-burgundy); }
.rhinory-page--catalog .ct-crumb + .gx-hero .gx-hero__grid { padding-top: 40px; }

/* 44px tap areas without changing the drawn size: card titles get 6px of hit
   padding; the member-price trigger an invisible 44px hit area. */
.rhinory-page--catalog .gx-slot--wines .winery-product-card__title-link {
	display: inline-block;
	padding-block: 6px;
	margin-block: -6px;
}
.rhinory-page--catalog .gx-slot--wines .winery-product-card__member-preview-toggle {
	position: relative;
}
.rhinory-page--catalog .gx-slot--wines .winery-product-card__member-preview-toggle::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}

/* Batch reveal (assets/js/catalog.js sets --rv per batch, 0/100/200/300ms in
   reading order whatever the column count). */
.rhinory-page--catalog .gx-slot--wines .winery-product-card.gx-reveal[style*="--rv"] {
	transition-delay: var(--rv);
}

/* The add confirmation with a View cart action; it holds while hovered or
   focused (assets/js/catalog.js). */
.ct-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100vw - 32px);
	padding: 12px 18px;
	background: #1A1512;
	color: #FBF7EE;
	font-family: "Josefin Sans", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
	transform: translate(-50%, 16px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s, transform 0.25s;
}
.ct-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}
.ct-toast .ct-toast-go {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: -12px 0;
	padding: 0 4px;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: #E8C9A0;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ct-toast .ct-toast-go:hover { color: #FBF7EE; }
.ct-toast .ct-toast-go:focus-visible { outline: 2px solid #E8C9A0; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.ct-toast { transition: none; }
}

/* Phones: name, meaning line, price and buttons first, then the image, then
   the story (so "Shop the wines" is in the first screen). */
@media (max-width: 720px) {
	.rhinory-page--catalog .gx-hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.rhinory-page--catalog .gx-hero__copy { display: contents; }
	.rhinory-page--catalog .gx-hero__headline { order: 1; }
	.rhinory-page--catalog .gx-hero .ct-meaning { order: 2; margin-top: 18px; }
	.rhinory-page--catalog .gx-hero .ct-from { order: 3; margin-top: 16px; }
	.rhinory-page--catalog .gx-hero .gx-btns { order: 4; margin-top: 24px; }
	.rhinory-page--catalog .gx-hero__media { order: 5; margin-top: 32px; width: 100%; }
	.rhinory-page--catalog .gx-hero .ct-p { order: 6; margin-top: 24px; }
}
/* Narrow phones: the hero buttons stack full width and may wrap. */
@media (max-width: 480px) {
	.rhinory-page--catalog .gx-hero .gx-btns { flex-direction: column; align-items: stretch; }
	.rhinory-page--catalog .gx-hero .gx-btn {
		min-width: 0;
		padding: 16px 20px;
		letter-spacing: 0.12em;
		white-space: normal;
		text-align: center;
		justify-content: center;
	}
}

/* Tablets: two packshots a row rather than one very tall column. */
@media (min-width: 600px) and (max-width: 900px) {
	.rhinory-page--catalog .gx-slot--wines .winery-product-catalog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}