/* ==========================================================================
   Bottling page
   --------------------------------------------------------------------------
   The parts of the V8 product page that are not native Bricks elements: the
   hero badge list, and the spec table where it appears at page scale rather
   than card scale.

   The spec table markup is shared with the product card, so the rules here
   only change its scale. Anything structural belongs in vd-product-card.css,
   or the two will drift.
   ========================================================================== */

/* --- hero badges -------------------------------------------------------- */

.vd-badges {
	display: flex;
	flex-direction: column;
	gap: var(--at-space--s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vd-badges__item {
	display: flex;
	align-items: center;
	gap: var(--at-space--s);
	font-family: georgia, serif;
	font-size: var(--at-heading--xs, 1.35rem);
	line-height: 1.2;
	color: var(--at-white);
}

.vd-badges__icon {
	flex: 0 0 auto;
	width: 1.45em;
	height: 1.45em;
	color: var(--secondary);
}

/* The ABV line is the only one carrying data, so it leads. */
.vd-badges__item--abv .vd-badges__label {
	font-variant-numeric: tabular-nums;
}

/* The availability line can carry a link (its "Public line" field is HTML). */
.vd-badges__label a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--secondary);
	text-underline-offset: 0.2em;
}

.vd-badges__label a:hover,
.vd-badges__label a:focus-visible {
	color: var(--secondary);
}

/* --- spec table at page scale ------------------------------------------- */

/* Same markup as the card. Only the scale changes: the page has room for the
   label and value to sit on one line with air around them. */
.vd-product-spec .product-card__spec {
	font-size: var(--at-text--s);
	border-top: 1px solid var(--secondary);
}

.vd-product-spec .product-card__spec dt,
.vd-product-spec .product-card__spec dd {
	padding-block: 0.62em;
}

/* The card truncates a long value to keep its rows level. The page has the
   room, so a long distillery or wood type wraps instead of losing its end. */
.vd-product-spec .product-card__spec-value {
	white-space: normal;
	overflow: visible;
}

/* A value column never narrows below its longest word, so a single long word
   (Campbeltown) pushes the columns apart instead of running into the next
   label or breaking mid-word. */
.vd-product-spec .product-card__spec {
	grid-template-columns: auto minmax(min-content, 1fr) auto minmax(min-content, 1fr);
}

.vd-product-spec .product-card__spec-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--secondary);
	text-underline-offset: 0.2em;
}

.vd-product-spec .product-card__spec-link:hover,
.vd-product-spec .product-card__spec-link:focus-visible {
	color: var(--secondary);
}

@media (max-width: 575px) {
	.vd-product-spec .product-card__spec {
		grid-template-columns: auto 1fr;
	}

	/* One label per row now (bottling and distillery tables alike), so none is
	   indented as a second column (Andy, 2026-10-16). */
	.vd-product-spec .product-card__spec dt:nth-of-type(even) {
		padding-left: 0;
	}
}

/* --- distillery ("Distilled at") -------------------------------------- */

/* V8: the name heads the left column, the story sits under it, and the spec
   table and "Other releases" link sit beside the story on the right. */
.vd-distillery {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	grid-template-areas:
		"head  ."
		"story aside";
	column-gap: var(--at-space--2xl, var(--at-space--xl));
	row-gap: var(--at-space--m);
	align-items: start;
}

.vd-distillery__head {
	grid-area: head;
}

.vd-distillery__eyebrow {
	margin: 0 0 var(--at-space--2xs);
	font-family: georgia, serif;
	font-size: var(--at-text--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary-l-5);
}

.vd-distillery__name {
	margin: 0;
}

.vd-distillery__description {
	grid-area: story;
}

.vd-distillery__description > :first-child {
	margin-top: 0;
}

.vd-distillery__description > :last-child {
	margin-bottom: 0;
}

.vd-distillery__aside {
	grid-area: aside;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--at-space--m);
}

.vd-distillery__aside .vd-product-spec {
	width: 100%;
}

.vd-distillery__more {
	font-family: georgia, serif;
	font-size: var(--at-text--m);
	color: var(--secondary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.vd-distillery__more:hover,
.vd-distillery__more:focus-visible {
	color: var(--light);
}

/* No description: name, then the spec under it, in the left column. */
.vd-distillery--no-story {
	grid-template-areas:
		"head  ."
		"aside .";
}

@media (max-width: 767px) {
	.vd-distillery {
		grid-template-columns: 1fr;
		grid-template-areas:
			"head"
			"story"
			"aside";
	}

	.vd-distillery--no-story {
		grid-template-areas:
			"head"
			"aside";
	}
}

/* --- tasting notes ------------------------------------------------------ */

/* Nose, Palate and Finish, three across on the gold band. Each is prose from
   ACF, so the heading rule is the only thing holding them together. */
.vd-tasting-notes {
	display: grid;
	grid-template-columns: repeat(var(--vd-notes-cols, 3), minmax(0, 1fr));
	gap: var(--at-space--l);
}

.vd-tasting-notes__item > :first-child {
	padding-bottom: var(--at-space--2xs);
	margin-bottom: var(--at-space--s);
	border-bottom: 1px solid currentColor;
}

@media (max-width: 767px) {
	.vd-tasting-notes {
		--vd-notes-cols: 1;
	}
}

/* --- media panel -------------------------------------------------------- */

/* The bottle sits in the white panel with room round it, and follows the page
   down as the detail column scrolls past (Andy, 2026-10-16).

   - contain: size takes the panel out of the row's height calculation, so the
     row is as tall as the detail column and the panel simply stretches to it.
     The bottle can then never make the section taller than its content.
   - The gallery is sticky inside the panel, at most one screen tall (less the
     header and the padding) and at most the panel's own height, and the image
     is contained and centred within it, so the bottle stays in the middle of
     the visible part of the panel as the page scrolls.
   - Bricks gives the gallery element WooCommerce's gallery class as well, so
     the rules that fill the inner wrappers must not reach the element itself:
     at 100% it was as tall as the panel and had no room to stick. */
.vd-product-media {
	--vd-media-pad: var(--at-space--xl);
	contain: size;
	justify-content: flex-start !important; /* Bricks centres the column; sticky needs the bottle at the top. */
	padding: var(--vd-media-pad) !important;
}

.vd-product-media > .brxe-product-gallery {
	position: sticky;
	top: calc(var(--vd-header-height, 0px) + var(--vd-media-pad));
	width: 100%;
	height: min(100%, calc(100vh - var(--vd-header-height, 0px) - 2 * var(--vd-media-pad))) !important;
	height: min(100%, calc(100dvh - var(--vd-header-height, 0px) - 2 * var(--vd-media-pad))) !important;
}

.vd-product-media .brxe-product-gallery .woocommerce-product-gallery,
.vd-product-media .woocommerce-product-gallery__wrapper,
.vd-product-media .woocommerce-product-gallery__image,
.vd-product-media .woocommerce-product-gallery__image > a,
.vd-product-media .flex-viewport {
	width: 100%;
	height: 100% !important;
	margin: 0;
}

.vd-product-media .woocommerce-product-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* No zoom or lightbox on a bottling (removed in vd-product-badges.php), so
   nothing should look clickable either. */
.vd-product-media .woocommerce-product-gallery__trigger {
	display: none;
}

/* Phones keep the side by side layout, with less room round the bottle. */
@media (max-width: 767px) {
	.vd-product-media {
		--vd-media-pad: var(--at-space--s);
	}

}

/* --- detail columns ------------------------------------------------------ */

/* V8 splits the detail pane in two: badges and the tasting wheel on the left,
   the copy and the spec table on the right, with price, cart and sku centred
   beneath them both. The widths are set on the blocks in the template; this
   only has to collapse them, since two narrow columns are worse than one. */
.vd-detail-cols {
	display: flex;
	align-items: flex-start;
}

@media (max-width: 991px) {
	.vd-detail-cols {
		flex-direction: column;
		row-gap: var(--at-space--l);
	}

	.vd-detail-cols > * {
		width: 100% !important;
	}
}

/* ==========================================================================
   Tour page
   --------------------------------------------------------------------------
   Prototype V4 "Tasting": starting point and FAQs on the left of the visit
   and book section, the Bookings calendar on the right.
   ========================================================================== */

/* --- starting point ----------------------------------------------------- */

.vd-tour-visit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--at-space--m);
	align-items: start;
}

/* No map (a shop without coordinates): the details take the full width. */
.vd-tour-visit > .vd-tour-visit__details:only-child {
	grid-column: 1 / -1;
}

.vd-tour-visit__map {
	aspect-ratio: 4 / 3;
	min-height: 12rem;
	border: 2px solid var(--secondary);
	background: var(--primary-d-2);
}

.vd-tour-visit__eyebrow {
	margin: 0 0 var(--at-space--2xs);
	font-family: georgia, serif;
	font-size: var(--at-text--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary-l-5);
}

.vd-tour-visit__address {
	margin: 0 0 var(--at-space--xs);
	font-size: var(--at-text--s);
	line-height: 1.5;
}

/* The start address arrives a line per paragraph; set it as one address block,
   with the place name (bold in the field) leading in the heading face. */
.vd-tour-visit__address p {
	margin: 0;
}

.vd-tour-visit__address strong {
	display: block;
	margin-bottom: var(--at-space--3xs, 0.25em);
	font-family: georgia, serif;
	font-weight: 400;
	font-size: var(--at-heading--s);
	line-height: 1.2;
}

.vd-tour-visit__directions {
	font-family: georgia, serif;
	color: var(--secondary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- FAQs --------------------------------------------------------------- */

.vd-tour-faqs__title {
	margin: 0 0 var(--at-space--s);
}

.vd-tour-faqs__item {
	border-top: 1px solid var(--secondary);
}

.vd-tour-faqs__item:last-child {
	border-bottom: 1px solid var(--secondary);
}

.vd-tour-faqs__question {
	display: flex;
	align-items: baseline;
	gap: var(--at-space--xs);
	padding: var(--at-space--xs) 0;
	cursor: pointer;
	list-style: none;
	font-size: var(--at-text--s);
}

.vd-tour-faqs__question::-webkit-details-marker {
	display: none;
}

/* A chevron that turns as the answer opens. */
.vd-tour-faqs__question::before {
	content: '';
	flex: 0 0 auto;
	width: 0.45em;
	height: 0.45em;
	border-right: 1.5px solid var(--secondary);
	border-bottom: 1.5px solid var(--secondary);
	transform: translateY(-0.1em) rotate(-45deg);
	transition: transform 0.2s ease;
}

.vd-tour-faqs__item[open] > .vd-tour-faqs__question::before {
	transform: translateY(-0.2em) rotate(45deg);
}

.vd-tour-faqs__answer {
	padding: 0 0 var(--at-space--s) calc(0.45em + var(--at-space--xs));
	font-size: var(--at-text--s);
}

.vd-tour-faqs__answer > :first-child {
	margin-top: 0;
}

.vd-tour-faqs__answer > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.vd-tour-faqs__question::before {
		transition: none;
	}
}

@media (max-width: 575px) {
	.vd-tour-visit {
		grid-template-columns: 1fr;
	}
}

/* --- booking form (WooCommerce Bookings) -------------------------------- */

/* Bookings ships jQuery UI's grey theme and its own bright green, much of it
   !important. Everything here is scoped to the booking form and restates
   only colour, type and spacing, so the plugin's behaviour is untouched.
   The !important flags answer the plugin's own; they are not a habit. */

.wc-bookings-booking-form {
	--vd-bk-line: var(--secondary);
	--vd-bk-ink: var(--light);
	--vd-bk-muted: var(--primary-l-5);
	--vd-bk-ground: var(--primary-d-2);
	--vd-bk-active-ink: var(--primary-d-5);

	margin: 0 0 var(--at-space--m);
	padding: var(--at-space--m);
	border: 1px solid var(--vd-bk-line);
	background: transparent;
	color: var(--vd-bk-ink);
}

/* Persons and other fields */
.wc-bookings-booking-form .form-field label {
	display: block;
	margin-bottom: var(--at-space--2xs);
	font-family: georgia, serif;
	font-size: var(--at-text--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vd-bk-muted);
}

.wc-bookings-booking-form .wc-bookings-date-picker-timezone-block,
.wc-bookings-booking-form .timezone-details {
	font-size: var(--at-text--xs);
	color: var(--vd-bk-muted);
}

/* --- calendar --------------------------------------------------------- */

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker {
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--at-space--xs) 0;
	border: 0;
	border-radius: 0;
	background: var(--vd-bk-ground) !important;
	color: var(--vd-bk-ink);
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-title {
	margin: 0;
	font-family: georgia, serif;
	font-size: var(--at-text--m);
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--vd-bk-ink);
}

/* Prev / next: the jQuery UI sprite is replaced with a drawn chevron. */
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev,
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-next {
	top: 50%;
	width: 2.25rem;
	height: 2.25rem;
	transform: translateY(-50%);
	border: 0 !important;
	background: transparent !important;
	cursor: pointer;
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev span,
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-next span {
	display: none;
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev::before,
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-next::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.55rem;
	height: 0.55rem;
	border-top: 1.5px solid var(--vd-bk-line);
	border-right: 1.5px solid var(--vd-bk-line);
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-state-disabled.ui-datepicker-prev,
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-state-disabled.ui-datepicker-next {
	opacity: 0.3;
	cursor: default;
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker table {
	margin: var(--at-space--2xs) 0 0;
	border-collapse: separate;
	border-spacing: 3px;
	font-size: var(--at-text--s);
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker th {
	padding: var(--at-space--2xs) 0;
	font-size: var(--at-text--xs);
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--vd-bk-muted);
	background: transparent !important;
	border: 0;
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td {
	padding: 0;
	border: 0;
	background: transparent !important;
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td a,
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td span {
	padding: 0.55em 0;
	border: 1px solid transparent !important;
	border-radius: 0;
	background: none !important;
	background-color: transparent !important;
	color: var(--vd-bk-ink) !important;
	text-align: center;
	text-shadow: none;
}

/* Days that cannot be booked fade back; other months fade further. */
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-state-disabled,
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-unselectable {
	opacity: 1;
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-state-disabled span,
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-state-disabled a {
	color: var(--vd-bk-ink) !important;
	opacity: 0.28;
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-other-month span,
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-other-month a {
	opacity: 0.15;
}

/* Bookable days: a gold outline, filled gold on hover and when chosen. */
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable:not(.ui-state-disabled) a {
	border-color: var(--vd-bk-line) !important;
}

.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable:not(.ui-state-disabled) a:hover,
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable:not(.ui-state-disabled) a:focus-visible,
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-current-day a,
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td a.ui-state-active {
	background-color: var(--vd-bk-line) !important;
	color: var(--vd-bk-active-ink) !important;
	font-weight: 600;
}

/* Some times taken, some free. */
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.partial_booked a {
	background: linear-gradient(to bottom right, transparent 50%, var(--primary-t-6) 50%) !important;
}

/* Today is marked, not filled. */
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-today a,
.wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-today span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- time slots ------------------------------------------------------- */

.wc-bookings-booking-form .block-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: var(--at-space--2xs);
	margin: var(--at-space--s) 0 0;
	padding: 0;
	list-style: none;
}

.wc-bookings-booking-form .block-picker li {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
}

.wc-bookings-booking-form .block-picker li a {
	display: block;
	width: auto !important;
	height: auto !important;
	margin: 0;
	padding: 0.6em 0.4em;
	border: 1px solid var(--vd-bk-line) !important;
	border-radius: 0;
	background: transparent !important;
	color: var(--vd-bk-ink) !important;
	font-size: var(--at-text--s);
	text-align: center;
	text-decoration: none;
	text-shadow: none;
}

.wc-bookings-booking-form .block-picker li a:hover,
.wc-bookings-booking-form .block-picker li a:focus-visible,
.wc-bookings-booking-form .block-picker li a.selected {
	background: var(--vd-bk-line) !important;
	color: var(--vd-bk-active-ink) !important;
	font-weight: 600;
}

.wc-bookings-booking-form .block-picker li.fully_booked a,
.wc-bookings-booking-form .block-picker li.unavailable a {
	border-color: transparent !important;
	background: transparent !important;
	color: var(--vd-bk-ink) !important;
	text-decoration: line-through;
	opacity: 0.35;
	cursor: not-allowed;
}

/* --- cost ------------------------------------------------------------- */

.wc-bookings-booking-form .wc-bookings-booking-cost {
	margin: var(--at-space--s) 0 0;
	padding: var(--at-space--xs) var(--at-space--s);
	border: 0;
	border-left: 3px solid var(--vd-bk-line);
	background: var(--vd-bk-ground);
	color: var(--vd-bk-ink);
	font-size: var(--at-text--s);
}

.wc-bookings-booking-form .wc-bookings-booking-cost .booking-cost-label {
	margin: 0;
}

.wc-bookings-booking-form .wc-bookings-booking-cost strong {
	font-family: georgia, serif;
	font-size: var(--at-heading--xs);
	font-weight: 400;
}

/* "Please choose a date" and other messages from the plugin. */
.wc-bookings-booking-form .wc-bookings-booking-cost .booking-error {
	color: var(--vd-bk-ink);
}

/* ==========================================================================
   Quantity (every product page, and the sticky add-to-basket bar)
   --------------------------------------------------------------------------
   Two digits is all anyone orders, so the box is sized for two and joined to
   its minus and plus buttons as one control (Andy, 2026-10-16).
   ========================================================================== */

.single-product .quantity,
.vd-buy-bar .quantity {
	display: inline-flex;
	align-items: stretch;
	width: max-content !important; /* Bricks fixes the control's width and stretches the input to fill it. */
	height: 4.4rem;
	border: 1px solid color-mix(in srgb, var(--secondary) 70%, transparent);
	box-sizing: border-box;
}

.single-product .quantity input.qty,
.vd-buy-bar .quantity input.qty {
	flex: 0 0 4.6rem !important;
	width: 4.6rem !important;
	min-width: 0;
	max-width: 4.6rem;
	align-self: stretch;
	height: auto !important;
	min-height: 0 !important; /* Bricks sets 48px, taller than the control. */
	padding: 0 !important;
	margin: 0;
	border: 0;
	border-radius: 0;
	text-align: center;
	font-size: var(--at-text--m);
	-moz-appearance: textfield;
	appearance: textfield;
}

.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button,
.vd-buy-bar .quantity input.qty::-webkit-outer-spin-button,
.vd-buy-bar .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product .quantity .action,
.vd-buy-bar .quantity .action {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 3.6rem !important;
	width: 3.6rem !important;
	align-self: stretch;
	height: auto !important;
	min-height: 0 !important;
	border: 0 !important; /* Bricks borders each button; the control has one border. */
	cursor: pointer;
}

.single-product .quantity .action svg,
.vd-buy-bar .quantity .action svg {
	width: 1.4rem;
	height: 1.4rem;
}

.single-product .quantity .action.disabled {
	opacity: 0.35;
	cursor: default;
}

/* ==========================================================================
   Buy bar (every product that can be bought)
   --------------------------------------------------------------------------
   Slides up once the page's own Add to basket has scrolled out of view
   (vd-product-page.js). Quantity x price and the button, as in the page.
   ========================================================================== */

.vd-buy-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	background: var(--primary-d-3, #1d2b22);
	color: var(--light);
	border-top: 2px solid var(--secondary);
	box-shadow: 0 -0.4rem 1.6rem rgb(0 0 0 / 0.25);
	padding: 1.8rem var(--at-gutter, 2rem) calc(2.6rem + env(safe-area-inset-bottom));
	transform: translateY(110%);
	transition: transform 0.35s ease;
}

.vd-buy-bar.is-shown {
	transform: translateY(0);
}

.vd-buy-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--at-space--m);
	max-width: var(--at-content-width, 140rem);
	margin: 0 auto;
}

.vd-buy-bar__title {
	margin: 0;
	font-family: georgia, serif;
	font-size: var(--at-heading--s);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.vd-buy-bar__buy {
	display: flex;
	align-items: center;
	gap: var(--at-space--s);
	flex: 0 0 auto;
}

.vd-buy-bar .quantity {
	color: var(--light);
}

.vd-buy-bar .quantity input.qty {
	background: var(--light);
	color: var(--primary-d-3, #1d2b22);
}

.vd-buy-bar__times {
	font-size: var(--at-heading--xs);
}

.vd-buy-bar__price {
	font-family: georgia, serif;
	font-size: var(--at-heading--m, 2.8rem);
	line-height: 1;
	white-space: nowrap;
}

.vd-buy-bar__price del {
	font-size: 0.6em;
	opacity: 0.6;
	margin-right: 0.3em;
}

.vd-buy-bar__price ins {
	text-decoration: none;
}

.vd-buy-bar__button {
	border: 0;
	padding: 1.3rem 2.4rem;
	background: var(--secondary);
	color: var(--primary-d-3, #1d2b22);
	font-family: georgia, serif;
	font-weight: 700;
	font-size: var(--at-text--s);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	border-radius: 0.6rem;
}

.vd-buy-bar__button:hover,
.vd-buy-bar__button:focus-visible {
	background: var(--light);
}

/* Room at the foot of the page, so the bar never sits over the last line. */
.vd-buy-bar-shown body {
	padding-bottom: 9.6rem;
}

@media (max-width: 767px) {
	.vd-buy-bar__title {
		display: none;
	}

	.vd-buy-bar__inner {
		justify-content: center;
	}

	.vd-buy-bar__buy {
		gap: var(--at-space--xs);
	}

	.vd-buy-bar__price {
		font-size: var(--at-heading--s);
	}

	.vd-buy-bar__button {
		padding: 1.3rem 1.4rem;
		letter-spacing: 0.12em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vd-buy-bar {
		transition: none;
	}
}

/* ==========================================================================
   Sold-out popup
   --------------------------------------------------------------------------
   A Bricks popup template (slug vd-sold-out-bottling): its look is set in
   Bricks. Only the card grid is here, so it matches the Shop's.
   ========================================================================== */

.vd-sold-out-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--at-space--m);
	text-align: left;
}

@media (max-width: 991px) {
	.vd-sold-out-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Sold out: no quantity, so no "x" before the price either, and the price
   ("Out of Stock") centred on its own. */
#brxe-pb43bt:not(:has(.quantity)) .brxe-product-price::before {
	content: none;
}

#brxe-pb43bt:not(:has(.quantity)) .brxe-product-price {
	grid-column: 1 / -1;
	justify-self: center;
}

/* Sold out: "Out of Stock" in place of the price (vd-product-page-extras.php). */
.vd-price-sold-out {
	font-family: var(--at-body-font-family, inherit);
	font-size: var(--at-text--m);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--light) 70%, transparent);
}

/* ==========================================================================
   Title bar ribbon (Sale or Sold Out), as on the cards
   ========================================================================== */

/* The ribbon's element (pb09rb, first in the title bar) covers the bar
   without taking up a line in it, and the ribbon sits in its top right. */
#brxe-pb09rb {
	position: absolute;
	inset: 0;
	pointer-events: none;
	margin: 0;
}

.vd-hero-ribbon {
	z-index: 1;
}

/* The title bar is much wider than a card, so on desktop its ribbon is twice
   the card's size, pulled in to match (Andy, 2026-10-16). */
@media (min-width: 992px) {
	.vd-hero-ribbon {
		--vd-ribbon-in: 6.4rem;
	}

	.vd-hero-ribbon span {
		font-size: 2.2rem;
	}
}

/* ==========================================================================
   Sold-out product page: monotone, all but the photographs
   --------------------------------------------------------------------------
   The page's colours all come from the theme tokens, so swapping the tokens
   for greys inside the content turns the greens and golds grey (Andy,
   2026-10-16). The header, footer and popup keep their colours. Coloured
   artwork that is not a photograph (the tasting wheel, the badge icons) is
   greyed with a filter.
   ========================================================================== */

.vd-sold-out-product #brx-content {
	--primary: #5c5c5c;
	--primary-d-1: #555;
	--primary-d-2: #4a4a4a;
	--primary-d-3: #3b3b3b;
	--primary-l-5: #b4b4b4;
	--primary-l-6: #c4c4c4;
	--secondary: #8e8e8e;
	background-color: var(--primary);
}

.vd-sold-out-product #brx-content > section,
.vd-sold-out-product #brx-content .brxe-section {
	background-color: var(--primary);
}

/* The tasting notes band was gold; a lighter grey keeps it a band. */
.vd-sold-out-product #brxe-pb30ns {
	background-color: var(--secondary);
}

.vd-sold-out-product .vd-wheel,
.vd-sold-out-product .vd-badges svg,
.vd-sold-out-product .vd-badges img {
	filter: grayscale(1);
}

/* ==========================================================================
   You Might Also Like (WooCommerce related products, every product page)
   --------------------------------------------------------------------------
   One row that scrolls sideways, cards the same widths as the Shop grid (4
   across, 3 on tablets, 2 on phones). Squeezed into four fixed columns, the
   cards were wider than their columns and ran off the page (Andy, 2026-10-16).
   ========================================================================== */

.brxe-product-related ul.products {
	--vd-rel-cols: 4;
	--vd-rel-gap: var(--at-space--m);
	display: grid !important;
	grid-auto-flow: column;
	grid-template-columns: none !important;
	grid-auto-columns: calc((100% - (var(--vd-rel-cols) - 1) * var(--vd-rel-gap)) / var(--vd-rel-cols));
	gap: var(--vd-rel-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	padding: 0 0 var(--at-space--s);
	scrollbar-width: thin;
	scrollbar-color: var(--secondary) transparent;
}

.brxe-product-related ul.products > li {
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	float: none !important;
	scroll-snap-align: start;
}

@media (max-width: 991px) {
	.brxe-product-related ul.products {
		--vd-rel-cols: 3;
	}
}

@media (max-width: 599px) {
	.brxe-product-related ul.products {
		--vd-rel-cols: 2;
	}
}

/* Narrow screens: quantity x a sale price (two prices) at full heading size
   was wider than the detail column and pushed the page sideways. Smaller
   there, and a sale price may wrap. */
@media (max-width: 767px) {
	#brxe-pb43bt .brxe-product-price {
		font-size: var(--at-heading--m);
		min-width: 0;
	}

	#brxe-pb43bt .brxe-product-price .price {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: center;
		column-gap: 0.3em;
	}

	#brxe-pb43bt .brxe-product-price del {
		font-size: 0.6em;
	}
}

/* Phones: the detail column is too narrow for quantity and price side by
   side, so the price goes on its own line under the quantity. */
@media (max-width: 575px) {
	#brxe-pb43bt {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	#brxe-pb43bt .quantity {
		grid-row: 1 !important;
		grid-column: 1 !important;
		justify-self: center;
	}

	#brxe-pb43bt .brxe-product-price {
		grid-row: 2 !important;
		grid-column: 1 !important;
		justify-self: center;
		margin-top: var(--at-space--xs);
	}

	#brxe-pb43bt .single_add_to_cart_button {
		grid-row: 3 !important;
	}
}

/* Small phones: the buy bar's quantity, price and button only just fit, so
   everything tightens and the struck-out sale price is dropped. */
@media (max-width: 479px) {
	.vd-buy-bar {
		padding-left: var(--at-space--s);
		padding-right: var(--at-space--s);
	}

	.vd-buy-bar__buy {
		width: 100%;
		justify-content: space-between;
		gap: 0.6rem;
	}

	.vd-buy-bar .quantity .action {
		flex-basis: 3rem !important;
		width: 3rem !important;
	}

	.vd-buy-bar .quantity input.qty {
		flex-basis: 3.4rem !important;
		width: 3.4rem !important;
		max-width: 3.4rem;
	}

	.vd-buy-bar__times,
	.vd-buy-bar__price del {
		display: none;
	}

	.vd-buy-bar__price {
		font-size: var(--at-heading--xs);
	}

	.vd-buy-bar__button {
		padding: 1.2rem 1rem;
		font-size: var(--at-text--xs);
		letter-spacing: 0.08em;
	}
}

/* The "x" between quantity and price, set here as well as in the Bricks
   element (pb43bt), where a save once turned its escape into a NUL byte and
   the page showed "?0d7". A file keeps the escape safe; the body prefix lets
   it win over the element's own rule. */
body #brxe-pb43bt .brxe-product-price::before {
	content: "\00D7";
}

body #brxe-pb43bt:not(:has(.quantity)) .brxe-product-price::before {
	content: none;
}