/* ============================================================
   UPPER REACH WINERY — COMMERCE7 SHOP
   Loaded only on Commerce7 routes (/collection/, /product/,
   /cart/, /profile/, /club/, /checkout/ ...).

   Everything here is scoped to the .ur-c7 body class or to
   #c7-content, so nothing leaks onto the Beaver Builder pages.

   Colours and the button style come from the Beaver Builder
   globals (--fl-global-*), so changing them in the customizer
   changes the shop too. The one exception is the heading font:
   Commerce7's own .c7-title rule outranks the theme's h1-h6 rule,
   so it has to be restated here. It is set once, as
   --ur-heading-font just below, and matches the current global.
   ============================================================ */

:root {
	--ur-shop-gutter: 28px;
	--ur-shop-max: 1180px;

	/* Mirrors the theme's heading font (Customizer > Typography). */
	--ur-heading-font: Vollkorn, serif;
}

/* The full-bleed bands below are wider than their container,
   so stop the page gaining a horizontal scrollbar. */
.ur-c7 #fl-main-content {
	overflow-x: hidden;
	overflow-x: clip;
	background-color: var(--fl-global-cream, #FEF7ED);
}

/* Commerce7 pages supply their own heading, so drop the theme's
   post header (and the admin-only "Edit" link that sits in it). */
.ur-c7 .fl-post-header {
	display: none !important;
}

/* Let the title bar sit flush under the site header. */
.ur-c7 .fl-content,
.ur-c7 .fl-content.col-md-12 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Commerce7 pages have no business being boxed in by the theme's
   article padding. */
.ur-c7 .fl-post-content {
	padding: 0 !important;
}

.ur-c7 .fl-content-full,
.ur-c7 .fl-content {
	padding-left: 0;
	padding-right: 0;
}


/* ============================================================
   1. PAGE TITLE BAR
   Mirrors the "Page Title Bar" Beaver Builder component used on
   the rest of the site: photo, soft dark overlay, translucent
   cream panel, eyebrow / heading / description.
   ============================================================ */

.ur-titlebar,
.ur-shopnav {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.ur-titlebar {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 420px;
	background-color: var(--fl-global-dark-green, #304E1B);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.ur-titlebar::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.25);
}

.ur-titlebar__inner {
	position: relative;
	width: 100%;
	max-width: var(--ur-shop-max);
	margin: 0 auto;
	padding: 60px var(--ur-shop-gutter);
}

.ur-titlebar__panel {
	max-width: 620px;
	background-color: rgba(254, 246, 236, 0.76);
	padding: 40px;
}

.ur-titlebar__eyebrow {
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--fl-global-light-green, #7A8858);
	margin: 0 0 10px;
}

.ur-titlebar__title {
	font-family: var(--ur-heading-font, Vollkorn, serif);
	font-size: 50px;
	line-height: 1;
	font-weight: 400;
	color: var(--fl-global-text, #2d2d2d);
	margin: 0 0 14px;
}

.ur-titlebar__title em {
	font-style: italic;
}

.ur-titlebar__desc p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--fl-global-text, #2d2d2d);
}

@media (max-width: 992px) {

	.ur-titlebar {
		min-height: 340px;
	}

	.ur-titlebar__title {
		font-size: 38px;
	}
}

@media (max-width: 600px) {

	.ur-titlebar {
		min-height: 280px;
	}

	.ur-titlebar__inner {
		padding: 40px 20px;
	}

	.ur-titlebar__panel {
		padding: 26px 22px;
	}

	.ur-titlebar__title {
		font-size: 30px;
	}

	.ur-titlebar__desc p {
		font-size: 15px;
	}
}


/* ============================================================
   2. COLLECTION TABS
   Real links to the Commerce7 collections, so each one keeps its
   own URL. The active one is marked server-side.
   ============================================================ */

.ur-shopnav {
	background-color: var(--fl-global-cream, #FEF7ED);
	border-bottom: 1px solid rgba(45, 45, 45, 0.09);
}

.ur-shopnav__inner {
	max-width: var(--ur-shop-max);
	margin: 0 auto;
	padding: 0 var(--ur-shop-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 34px;
	align-items: stretch;
	justify-content: center;
}

.ur-shopnav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 20px 2px;
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--fl-global-text, #2d2d2d);
	transition: color 0.22s ease;
}

.ur-shopnav__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--fl-global-light-green, #7A8858);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.28s ease;
}

.ur-shopnav__link:hover,
.ur-shopnav__link:focus-visible {
	color: var(--fl-global-light-green, #7A8858);
	text-decoration: none;
}

.ur-shopnav__link:hover::after,
.ur-shopnav__link:focus-visible::after {
	transform: scaleX(1);
}

.ur-shopnav__link.is-active {
	color: var(--fl-global-dark-green, #304E1B);
	font-weight: 600;
}

.ur-shopnav__link.is-active::after {
	transform: scaleX(1);
}

@media (max-width: 782px) {

	.ur-shopnav__inner {
		justify-content: flex-start;
		gap: 0 24px;
		padding: 0 20px;
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.ur-shopnav__inner::-webkit-scrollbar {
		display: none;
	}

	.ur-shopnav__link {
		padding: 16px 2px;
		font-size: 11px;
	}
}


/* ============================================================
   3. THE COMMERCE7 CONTENT AREA
   ============================================================ */

.ur-c7 #c7-content {
	max-width: var(--ur-shop-max);
	margin: 0 auto;
	padding: 64px var(--ur-shop-gutter) 90px;
}

/* Commerce7 prints its own collection heading and blurb. The title
   bar above says the same thing better, so hide them on collections. */
.ur-c7-collection #c7-content .collection-title,
.ur-c7-collection #c7-content .collection-description {
	display: none !important;
}

@media (max-width: 600px) {

	.ur-c7 #c7-content {
		padding: 40px 20px 64px;
	}
}


/* ============================================================
   4. THE PRODUCT GRID (COLLECTION PAGES ONLY)
   Minimal and bottle-led: no card chrome, bottles standing on a
   shared baseline, buy controls arriving on hover.

   Cards in a row stretch to the same height and the price block
   is pinned to the bottom, so prices and buttons line up whether
   a wine's name runs to one line or two and whether or not it
   carries a subtitle like "Limited Release".

   Every rule here is scoped to the collection grid itself.
   Commerce7 reuses the .c7-product class on the single product
   page, so an unscoped rule lands there too — which is what used
   to centre the product page and keep its Add to Cart button
   hidden until hover.
   ============================================================ */

.ur-c7 #c7-content .c7-product-collection__product-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 46px 32px;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1100px) {

	.ur-c7 #c7-content .c7-product-collection__product-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 42px 26px;
	}
}

@media (max-width: 782px) {

	.ur-c7 #c7-content .c7-product-collection__product-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 20px;
	}
}

/* ---- The card ---- */

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

/* ---- Bottle ----
   Some bottle shots are cut out and some are photographed on
   white. Multiply blends that white into the cream ground, so a
   mixed set of images still reads as one row. */

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__image {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	height: 300px;
	margin-bottom: 20px;
	overflow: hidden;
	background: transparent;
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__image a,
.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__image picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	mix-blend-mode: multiply;
	transition: transform 0.5s ease;
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product:hover .c7-product__image img,
.ur-c7 #c7-content .c7-product-collection__product-list .c7-product:focus-within .c7-product__image img {
	transform: translateY(-6px) scale(1.03);
}

@media (max-width: 782px) {

	.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__image {
		height: 230px;
		margin-bottom: 16px;
	}
}

/* ---- Name and subtitle ---- */

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__details {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 0;
	width: 100%;
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__title.c7-title {
	font-family: var(--ur-heading-font, Vollkorn, serif);
	font-size: 18px;
	line-height: 1.3;
	font-weight: 400;
	margin: 0;
	color: var(--fl-global-text, #2d2d2d);
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__title.c7-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.22s ease;
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__title.c7-title a:hover,
.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__title.c7-title a:focus-visible {
	color: var(--fl-global-light-green, #7A8858);
	text-decoration: none;
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__subtitle,
.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__subtitle.c7-subtitle {
	margin: 7px 0 0;
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--fl-global-light-green, #7A8858);
}

@media (max-width: 782px) {

	.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__title.c7-title {
		font-size: 16px;
	}
}

/* ---- Price, pinned to the bottom of the card ---- */

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__add-to-cart {
	margin: auto 0 0;
	padding: 0;
	border: none;
	background: transparent;
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 15px;
	color: var(--fl-global-text, #2d2d2d);
}

/* Commerce7 hides the "Item Price" label from sight but leaves it
   in the flex row, where it still takes a gap. Take it out of flow. */
.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__price .c7-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__price__variant,
.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__variant__price__title {
	font-size: 12px;
	letter-spacing: 0.6px;
	color: var(--fl-global-muted, #666);
}

/* Commerce7 puts a slash between price and size. Drop it: the
   size is already set apart by colour and weight. */
.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__price__variant::before {
	content: '' !important;
	margin: 0 !important;
}

/* ---- Buy controls: revealed on hover, always there on touch ---- */

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__form {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product:hover .c7-product__add-to-cart__form,
.ur-c7 #c7-content .c7-product-collection__product-list .c7-product:focus-within .c7-product__add-to-cart__form {
	opacity: 1;
	transform: translateY(0);
}

/* Keyboard and touch users never get a hover, so never hide it
   from them. */
@media (hover: none), (pointer: coarse) {

	.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__form {
		opacity: 1;
		transform: none;
	}
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__form__quantity {
	flex: 0 0 52px;
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__form__quantity .c7-form__field {
	margin: 0;
	height: 100%;
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__form input[name="quantity"] {
	width: 100%;
	height: 100%;
	min-height: 40px;
	padding: 0 6px;
	text-align: center;
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 13px;
	color: var(--fl-global-text, #2d2d2d);
	background-color: transparent;
	border: 1px solid rgba(45, 45, 45, 0.22);
	border-radius: 0;
	box-shadow: none;
	transition: border-color 0.22s ease;
}

.ur-c7 #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__form input[name="quantity"]:focus {
	outline: none;
	border-color: var(--fl-global-light-green, #7A8858);
}


/* ============================================================
   5. COMMERCE7 BUTTONS
   Commerce7 ships a bright blue primary button. Bring every
   button on these pages onto the site's own button style.
   ============================================================ */

.ur-c7 #c7-content .c7-btn,
.ur-c7 #c7-content .c7-btn--primary,
.ur-c7 #c7-content button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 11px 22px;
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fl-global-button-color, #ffffff);
	background-color: var(--fl-global-light-green, #7A8858);
	border: 1px solid var(--fl-global-light-green, #7A8858);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

.ur-c7 #c7-content .c7-btn:hover,
.ur-c7 #c7-content .c7-btn--primary:hover,
.ur-c7 #c7-content button[type="submit"]:hover,
.ur-c7 #c7-content .c7-btn:focus-visible,
.ur-c7 #c7-content .c7-btn--primary:focus-visible {
	color: var(--fl-global-button-hover-color, #ffffff);
	background-color: var(--fl-global-dark-green, #304E1B);
	border-color: var(--fl-global-dark-green, #304E1B);
	text-decoration: none;
}

.ur-c7 #c7-content .c7-product__add-to-cart__form .c7-btn--primary {
	flex: 1 1 auto;
	padding: 11px 14px;
	letter-spacing: 1px;
}

/* Secondary / outline buttons keep the shape but lose the fill. */
.ur-c7 #c7-content .c7-btn--secondary,
.ur-c7 #c7-content .c7-btn--tertiary {
	color: var(--fl-global-text, #2d2d2d);
	background-color: transparent;
	border-color: rgba(45, 45, 45, 0.3);
}

.ur-c7 #c7-content .c7-btn--secondary:hover,
.ur-c7 #c7-content .c7-btn--tertiary:hover {
	color: #ffffff;
	background-color: var(--fl-global-dark-green, #304E1B);
	border-color: var(--fl-global-dark-green, #304E1B);
}


/* ============================================================
   6. PRODUCT PAGES AND FORMS
   Light touch: type, links and inputs on brand. Commerce7 owns
   the layout of cart, checkout and account.
   ============================================================ */

.ur-c7 #c7-content h1,
.ur-c7 #c7-content h2,
.ur-c7 #c7-content h3,
.ur-c7 #c7-content .c7-title {
	font-family: var(--ur-heading-font, Vollkorn, serif);
	font-weight: 400;
	color: var(--fl-global-text, #2d2d2d);
}

.ur-c7 #c7-content a:not(.c7-btn) {
	color: var(--fl-global-dark-green, #304E1B);
	text-decoration-color: rgba(48, 78, 27, 0.35);
	text-underline-offset: 3px;
	transition: color 0.22s ease;
}

.ur-c7 #c7-content a:not(.c7-btn):hover {
	color: var(--fl-global-light-green, #7A8858);
}

/* Commerce7's inline link-buttons ("Add gift message", "Edit", and
   the like) ship in its default blue. Bring them onto the greens. */
.ur-c7 #c7-content .c7-link,
.ur-c7 #c7-content button.c7-link,
.ur-c7 #c7-content .c7-expand-link,
.ur-c7 #c7-content button.c7-expand-link {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	color: var(--fl-global-light-green, #7A8858);
	cursor: pointer;
	transition: color 0.22s ease;
}

.ur-c7 #c7-content .c7-link:hover,
.ur-c7 #c7-content .c7-link:focus-visible,
.ur-c7 #c7-content .c7-expand-link:hover,
.ur-c7 #c7-content .c7-expand-link:focus-visible {
	color: var(--fl-global-dark-green, #304E1B);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ur-c7 #c7-content input[type="text"],
.ur-c7 #c7-content input[type="email"],
.ur-c7 #c7-content input[type="tel"],
.ur-c7 #c7-content input[type="password"],
.ur-c7 #c7-content input[type="number"],
.ur-c7 #c7-content select,
.ur-c7 #c7-content textarea {
	border-radius: 0;
	border-color: rgba(45, 45, 45, 0.22);
	box-shadow: none;
}

.ur-c7 #c7-content input:focus,
.ur-c7 #c7-content select:focus,
.ur-c7 #c7-content textarea:focus {
	outline: none;
	border-color: var(--fl-global-light-green, #7A8858);
	box-shadow: none;
}


/* ============================================================
   7. THE SINGLE PRODUCT PAGE
   Two columns: the bottle on the left, everything you need in
   order to buy it on the right. Left aligned throughout, and the
   buy controls are always on show — the hover reveal belongs to
   the collection grid, not here.
   ============================================================ */

.ur-c7-product #c7-content {
	padding-top: 56px;
	padding-bottom: 96px;
}

.ur-c7-product #c7-content .c7-product-detail .c7-product {
	display: grid;
	grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
	gap: 40px 68px;
	align-items: start;
	text-align: left;
}

/* ---- Left: the bottle ----
   Sticky, so it stays with you while you read the right column.
   The bottle is capped well under the viewport height on purpose:
   a taller image leaves almost no travel between sticking and
   reaching the bottom of the product block, which reads as "not
   sticky at all". */

.ur-c7-product #c7-content .c7-product__image {
	position: sticky;
	top: 118px;
	align-self: start;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	overflow: visible;
}

.ur-c7-product #c7-content .c7-product__image picture,
.ur-c7-product #c7-content .c7-product__image > a {
	display: block;
	width: 100%;
}

.ur-c7-product #c7-content .c7-product__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(520px, calc(100vh - 230px));
	object-fit: contain;
	object-position: center center;
	mix-blend-mode: multiply;
}

/* ---- Right: name, price, buy, story, specs ---- */

.ur-c7-product #c7-content .c7-product__details {
	display: block;
	width: 100%;
	padding: 0;
	text-align: left;
}

.ur-c7-product #c7-content .c7-product__title,
.ur-c7-product #c7-content .c7-product__title.c7-title {
	font-family: var(--ur-heading-font, Vollkorn, serif);
	font-size: 42px;
	line-height: 1.12;
	font-weight: 400;
	text-align: left;
	margin: 0 0 4px;
	color: var(--fl-global-text, #2d2d2d);
}

.ur-c7-product #c7-content .c7-product__subtitle,
.ur-c7-product #c7-content .c7-product__subtitle.c7-subtitle {
	margin: 0 0 22px;
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-align: left;
	color: var(--fl-global-light-green, #7A8858);
}

/* The buy block: price, quantity and Add to Cart, boxed off from
   the story below it. */
.ur-c7-product #c7-content .c7-product__add-to-cart {
	margin: 0 0 34px;
	padding: 0 0 30px;
	border-bottom: 1px solid rgba(45, 45, 45, 0.12);
	text-align: left;
}

.ur-c7-product #c7-content .c7-product__add-to-cart__price {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 12px;
	margin: 0 0 22px;
	font-family: var(--ur-heading-font, Vollkorn, serif);
	font-size: 30px;
	line-height: 1;
	color: var(--fl-global-text, #2d2d2d);
}

.ur-c7-product #c7-content .c7-product__add-to-cart__price .c7-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ur-c7-product #c7-content .c7-product__add-to-cart__price__variant,
.ur-c7-product #c7-content .c7-product__variant__price__title {
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--fl-global-muted, #666);
}

.ur-c7-product #c7-content .c7-product__add-to-cart__price__variant::before {
	content: '' !important;
	margin: 0 !important;
}

/* Always visible here — never revealed on hover. */
.ur-c7-product #c7-content .c7-product__add-to-cart__form {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	gap: 10px;
	margin: 0;
	opacity: 1;
	transform: none;
}

.ur-c7-product #c7-content .c7-product__add-to-cart__form__quantity {
	flex: 0 0 68px;
}

.ur-c7-product #c7-content .c7-product__add-to-cart__form__quantity .c7-form__field {
	margin: 0;
	height: 100%;
}

.ur-c7-product #c7-content .c7-product__add-to-cart__form input[name="quantity"] {
	width: 100%;
	height: 100%;
	min-height: 48px;
	padding: 0 8px;
	text-align: center;
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 14px;
	color: var(--fl-global-text, #2d2d2d);
	background-color: transparent;
	border: 1px solid rgba(45, 45, 45, 0.22);
	border-radius: 0;
	box-shadow: none;
}

.ur-c7-product #c7-content .c7-product__add-to-cart__form .c7-btn--primary {
	flex: 0 1 260px;
	min-height: 48px;
	padding: 13px 28px;
}

/* Gift cards and other multi-option products pick their amount
   before they can be added. */
.ur-c7-product #c7-content .c7-product__add-to-cart__variants fieldset {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---- The story ---- */

.ur-c7-product #c7-content .c7-product__content {
	margin: 0 0 34px;
	text-align: left;
	font-size: 16px;
	line-height: 1.75;
	color: var(--fl-global-text, #2d2d2d);
}

.ur-c7-product #c7-content .c7-product__content p {
	margin: 0 0 1em;
	text-align: left;
}

.ur-c7-product #c7-content .c7-product__content p:last-child {
	margin-bottom: 0;
}

.ur-c7-product #c7-content .c7-product__content iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* ---- Specs, as a bordered panel ----
   Commerce7 gives us an unlabelled div per row (first child is the
   label, second the value) and a variable number of them — three on
   most wines, four where a taste profile is set. So this has to work
   for any row count, which rules out a fixed two-column grid. */

.ur-c7-product #c7-content .c7-product__specs {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(45, 45, 45, 0.14);
	background-color: rgba(255, 255, 255, 0.45);
	text-align: left;
}

/* Commerce7 prints no heading for this block, so add one. */
.ur-c7-product #c7-content .c7-product__specs::before {
	content: 'Wine Specs';
	display: block;
	padding: 13px 22px;
	background-color: rgba(48, 78, 27, 0.07);
	border-bottom: 1px solid rgba(45, 45, 45, 0.14);
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--fl-global-dark-green, #304E1B);
}

.ur-c7-product #c7-content .c7-product__spec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 22px;
	border: 0;
	border-top: 1px solid rgba(45, 45, 45, 0.09);
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}

.ur-c7-product #c7-content .c7-product__spec:first-of-type {
	border-top: 0;
}

.ur-c7-product #c7-content .c7-product__spec > div:first-child {
	flex: 0 0 auto;
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--fl-global-light-green, #7A8858);
	padding-top: 0;
}

.ur-c7-product #c7-content .c7-product__spec > div:last-child {
	flex: 0 1 auto;
	font-family: var(--ur-heading-font, Vollkorn, serif);
	font-size: 18px;
	line-height: 1.25;
	text-align: right;
	color: var(--fl-global-text, #2d2d2d);
}

/* The taste profile rows render as five circles. Bring them onto
   the brand greens rather than Commerce7's default. */
.ur-c7 #c7-content .c7-taste-profile-score {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ur-c7 #c7-content .c7-taste-circle {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1px solid var(--fl-global-light-green, #7A8858);
	background-color: transparent;
}

.ur-c7 #c7-content .c7-taste-circle--filled {
	background-color: var(--fl-global-dark-green, #304E1B);
	border-color: var(--fl-global-dark-green, #304E1B);
}

/* ---- Stacked on smaller screens ---- */

@media (max-width: 900px) {

	.ur-c7-product #c7-content .c7-product-detail .c7-product {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.ur-c7-product #c7-content .c7-product__image {
		position: static;
		max-width: 340px;
	}

	.ur-c7-product #c7-content .c7-product__image img {
		max-height: 420px;
	}

	.ur-c7-product #c7-content .c7-product__title,
	.ur-c7-product #c7-content .c7-product__title.c7-title {
		font-size: 32px;
	}

	.ur-c7-product #c7-content .c7-product__add-to-cart__price {
		font-size: 26px;
	}
}

@media (max-width: 600px) {

	.ur-c7-product #c7-content {
		padding-top: 34px;
	}

	.ur-c7-product #c7-content .c7-product__add-to-cart__form .c7-btn--primary {
		flex: 1 1 auto;
	}

	.ur-c7-product #c7-content .c7-product__spec {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.ur-c7-product #c7-content .c7-product__spec > div:last-child {
		text-align: left;
	}
}


/* ============================================================
   8. GIFT VOUCHERS
   Scoped to /collection/gift-vouchers/ and nowhere else, so the
   wine collections keep their bottle-on-a-baseline grid.

   Vouchers are landscape photographs of an experience, not
   bottles shot on white. Contain-fitting them inside the wine
   grid's 300px box left a band of empty cream above every card,
   which is the gap at the top of the page. Here they fill a 3:2
   frame instead, the copy is left aligned, and the amount options
   read as buttons.

   These selectors carry .c7-product-collection__product-list too,
   so that they outrank the section 4 rules they are replacing.
   ============================================================ */

.ur-c7-collection-gift-vouchers #c7-content {
	padding-top: 56px;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 54px 34px;
}

@media (max-width: 1100px) {

	.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 46px 28px;
	}
}

@media (max-width: 620px) {

	.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

/* ---- The card ---- */

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product {
	text-align: left;
}

/* ---- A filled 3:2 photograph, no empty band above it ---- */

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__image {
	height: auto;
	aspect-ratio: 3 / 2;
	margin-bottom: 22px;
	background-color: rgba(48, 78, 27, 0.06);
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__image a {
	height: 100%;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__image img {
	object-fit: cover;
	object-position: center center;
	mix-blend-mode: normal;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product:hover .c7-product__image img,
.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product:focus-within .c7-product__image img {
	transform: scale(1.045);
}

/* ---- Copy, left aligned ---- */

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__details {
	align-items: flex-start;
	text-align: left;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__title.c7-title {
	font-size: 21px;
	line-height: 1.25;
	text-align: left;
}

/* The voucher subtitles are whole sentences, so shouting them in
   uppercase green does them no favours. */
.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__subtitle,
.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__subtitle.c7-subtitle {
	margin: 8px 0 0;
	font-family: var(--fl-global-base-font-family, inherit);
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--fl-global-light-green, #7A8858);
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__teaser {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.65;
	text-align: left;
	color: var(--fl-global-muted, #666);
}

/* ---- Amount options as buttons ---- */

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__variants {
	margin: 0 0 16px;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__variants fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-radio {
	position: relative;
	margin: 0;
	padding: 0;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-radio input {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-radio__control {
	display: none;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-radio__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 66px;
	padding: 9px 15px;
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.8px;
	line-height: 1;
	color: var(--fl-global-text, #2d2d2d);
	background-color: transparent;
	border: 1px solid rgba(45, 45, 45, 0.22);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-radio:hover .c7-radio__label {
	border-color: var(--fl-global-light-green, #7A8858);
	color: var(--fl-global-dark-green, #304E1B);
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-radio input:checked ~ .c7-radio__label {
	color: #ffffff;
	background-color: var(--fl-global-dark-green, #304E1B);
	border-color: var(--fl-global-dark-green, #304E1B);
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-radio input:focus-visible ~ .c7-radio__label {
	outline: 2px solid var(--fl-global-light-green, #7A8858);
	outline-offset: 2px;
}

/* ---- Price and buy, always on show ---- */

/* The pills above already say which amount is selected, so the
   variant tag repeated beside the price is just noise. */
.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__price__variant {
	display: none;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__price {
	justify-content: flex-start;
	margin-top: 0;
	margin-bottom: 14px;
	font-size: 16px;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__form {
	justify-content: flex-start;
	margin-top: 0;
	opacity: 1;
	transform: none;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__add-to-cart__form .c7-btn--primary {
	flex: 0 1 190px;
}

.ur-c7-collection-gift-vouchers #c7-content .c7-product-collection__product-list .c7-product__add-to-cart {
	margin-top: 22px;
}