/*
 * Brabourne Vineyard – custom styles
 * Loaded after Flatsome via the child theme's functions.php.
 * Only for things Flatsome's settings can't do.
 *
 * Units: font sizes in rem (1rem = 16px at default browser settings),
 * so text respects visitors' browser text-size preferences.
 * Borders, heights, widths and offsets stay in px.
 *
 * Colours: use the palette variables below rather than hex codes,
 * so a colour change only needs making in one place.
 *
 * CLASS INDEX – add these in the UX Builder (Class field)
 * ---------------------------------------------------------------
 * Page structure
 * Banner    title-banner     Grey title bar with [page_title] (H1)
 * Slider    title-slider     Custom arrows, slow fade, dots on mobile
 * Section   section-intro    First section on a page (also product
 *                            layouts): more space top than bottom
 * Section   divider-bottom   Two thin green lines below the section
 * Row       row-tight        No extra 30px under the columns
 * Banner    quote-banner     Photo strip with a quote (blockquote)
 * Row       story-row        Image + text row (image in first column)
 * Row       story-row reverse  Same, image on the right on desktop
 * Row       closing-pair     Two equal-height items at page end
 * Column    video-panel      Grey panel behind a video (closing pair)
 * Column    feature-panel    Dark grey panel (Our Vineyard)
 * Row       info-blocks      Blocks with a thin line above (Getting here)
 * Text      contact-details  Contact details with small grey labels
 * Column    legal-text       Simple / legal pages
 * Section   credits          Credits page (with section-intro)
 * Text      intro-text       Larger intro line at the top of a page
 *
 * Cards and buttons
 * Row       signpost-cards   Card styling for Image Boxes
 * Row       signpost-cards cta-card  Closing CTA: dark grey button
 * Image Box / Column  card-pink | card-green  Panel colour (CTA
 *                            blocks: on the column holding the block)
 * Column    button-light     White button on that card/CTA
 * Image Box button-green     Bright green button, white outline
 * Image Box button-outline   White outline button on a coloured card
 * Row       quote-card       Product/quote card with bottle image
 * Button    button-dark      Dark grey button, white border
 * Button    button-bright    Bright green button, white border
 *
 * Text and media
 * Text      caption          Small italic caption under image/video
 * Text      caption caption-upper  Uppercase caption (Shadow video)
 * Text      heading-normal-case  Section H2 without uppercase
 * Text      hero-caption     Caption over a hero photo (+ gradient)
 * Div       video-embed      Vimeo/YouTube iframe, 16:9
 * Div       map-embed        Google Map iframe, 4:3
 * Video     video-file       Self-hosted video, full width
 *
 * Homepage
 * Text      home-welcome-text  Welcome band (tagline + H1)
 * Products  home-strip       Experiences strip (tall images)
 * Products  centre-mobile    One centred card per slide on phones
 * Products / Slider  no-slider-nav  No arrows or dots
 * Row       reviews          Google reviews widget
 * Text      reviews-more     "Read more reviews" link
 *
 * Shop and products
 * Products  shop-grid        Shop (Buy Wine) product cards
 * Text      shop-notice      Mix-and-match notice above the grid
 * Products  no-excerpt       No descriptions, dark grey names
 * Text      product-offer    Mix-and-match line on wine pages
 * Products  event-grid       Our events (Experiences) cards
 *
 * Footer and forms
 * Text      footer-heading   Semi-bold footer text
 * Follow    footer-social    Spaced, larger footer social icons
 * Column    newsletter-signup  Newsletter page form
 * (CF7 form markup: cf-row, cf-note – see the contact form section) */

/* ---------------------------------------------------------------
 * Brand palette (from the Figma, checked 8 Oct 2026)
 * Pink panels and rosé buttons use the Figma pink #9b6673 (the 2026
 * brand guidelines have #af6478 – to confirm with the designer).
 * ------------------------------------------------------------- */

:root {
	--bv-dark-grey: #3f3f3f;
	--bv-green-dark: #767e19;
	--bv-green-mid: #949e12;
	--bv-green-bright: #b2c316;
	--bv-pink: #9b6673; /* pink panels and rosé buttons (Figma) */
	--bv-pink-mid: #df99aa;
	--bv-pink-bright: #ec718f; /* pink buttons, Buy Wine in the mobile menu */
	--bv-black: #000000;
	--bv-grey-1: #666666;
	--bv-grey-2: #999999;
	--bv-grey-3: #cccccc;
	--bv-grey-4: #f2f2f2;
	--bv-white: #ffffff;
	--bv-divider: var(--bv-green-mid); /* double-line dividers; try --bv-green-bright if lighter */
	--bv-review-bg: #d9d9d9; /* review card grey, from the Figma */
	--bv-green-hover: #c9d279; /* bright green button hover (Figma) */
	--bv-menu-green: #767b2b; /* top of the mobile menu gradient (Figma) */
}

/* ---------------------------------------------------------------
 * Header: logo
 * ------------------------------------------------------------- */

/* Full-width header (Figma): 35px of space at each side on desktop.
   The logo is pulled left by its built-in clear space, so the
   visible logo sits 35px from the screen edge. */
@media (min-width: 850px) {
	#header .header-main .container {
		max-width: none;
		padding-left: 35px;
		padding-right: 35px;
	}
	#logo {
		margin-left: -18px;
	}
}

/* Mobile header: pull the logo left so the visible logo lines up
   with the page content (the logo file has built-in clear space) */
@media (max-width: 849px) {
	#logo {
		margin-left: -20px;
	}
}

/* ---------------------------------------------------------------
 * Header: menu
 * ------------------------------------------------------------- */

/* Keep each menu item on one line (e.g. "Tours & Tastings") */
.header-nav-main > li > a {
	white-space: nowrap;
}

/* Main menu text (Figma): Raleway Medium 16px, 20px line spacing,
   mixed case. The current page is Bold and bright green (colour set
   in Header → Header Main). */
#header .header-nav-main.nav > li > a {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

/* Wide screens: menu items spread out as the window widens (about
   36px apart at 1440px, up to 48px), with a clear gap before the
   basket and SHOP button (Figma) */
@media (min-width: 1440px) {
	#header .header-nav-main > li {
		margin: 0 clamp(12px, 1.25vw, 24px);
	}
	#header .header-nav-main > li.cart-item {
		margin-left: clamp(30px, 5vw, 80px);
	}
}

#header .header-nav-main.nav > li.current-menu-item > a {
	font-weight: 700;
}

/* No dropdown arrows on the main menu (Figma) */
.header-nav-main > li > a > i.icon-angle-down {
	display: none;
}

/* Main menu: text stays white on hover. Only the exact current page
   is green (set in Header → Header Main); parent items stay white. */
#header .header-nav-main.nav > li:not(.current-menu-item) > a:hover {
	color: var(--bv-white);
}

#header .header-nav-main.nav > li.current-menu-ancestor:not(.current-menu-item) > a {
	color: var(--bv-white);
}

/* Header Shop button (Figma): bright green, 2px white border,
   36px tall, 8px x 38px padding, SemiBold 17px uppercase white
   text. Lighter green on hover (Figma). White on bright green is
   low contrast; flagged with the designer. */
#header .header-main .header-button > .button:not(.is-outline) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	min-height: 0;
	padding: 8px 38px;
	line-height: 1;
	background-color: var(--bv-green-bright) !important;
	border: 2px solid var(--bv-white);
	border-radius: 0;
	color: var(--bv-white) !important;
	font-size: 1.0625rem;
	font-weight: 600;
	text-transform: uppercase;
	transition: background-color 0.3s;
}

#header .header-main .header-button > .button:not(.is-outline):hover,
#header .header-main .header-button > .button:not(.is-outline):focus {
	background-color: var(--bv-green-hover) !important;
	border-color: var(--bv-white) !important;
	color: var(--bv-white) !important;
	box-shadow: none !important;
	opacity: 1 !important;
}

/* ---------------------------------------------------------------
 * Header: cart
 * ------------------------------------------------------------- */

/* Bag icon: the box wraps the bag image exactly (no extra line
   height or spacing), so the count below is positioned relative
   to the bag itself and stays put when the sticky header shrinks
   the icon on scroll */
.header-cart-icon.image-icon {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.header-cart-icon.image-icon img {
	display: block;
}

/* Cart count inside the bag icon, like the old site, positioned
   as a percentage of the bag's height */
.header-cart-icon.image-icon[data-icon-label]::after {
	top: 69% !important;
	left: 50% !important;
	right: auto !important;
	transform: translate(-50%, -50%) !important;
	min-width: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	color: var(--bv-green-bright);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
}

/* Show the count even when the cart is empty, like the old site */
.header-cart-icon.image-icon[data-icon-label="0"]::after {
	display: block;
}

/* Desktop: larger basket, 42px wide as in the Figma (52px tall at
   the Figma's proportions; the count stays centred in the bag, as
   it's positioned by percentage) */
@media (min-width: 850px) {
	#header .header-main .header-cart-icon.image-icon img {
		width: 42px;
		height: auto;
	}
}

/* ---------------------------------------------------------------
 * Dropdown menus
 * (radius, border and shadow are set in Header → Dropdown Style)
 * ------------------------------------------------------------- */

/* Remove the pointer triangle above dropdowns */
.nav-dropdown-has-arrow li.has-dropdown:before,
.nav-dropdown-has-arrow li.has-dropdown:after {
	display: none;
}

/* Centre dropdowns below their menu item */
.header-nav-main li.has-dropdown:hover > .nav-dropdown,
.header-nav-main li.current-dropdown > .nav-dropdown {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

/* Remove Flatsome's extra padding around dropdown items, and clip
   item backgrounds to the rounded corners */
#header .header-nav-main .nav-dropdown {
	padding: 0;
	overflow: hidden;
	text-align: center;
}

/* No side spacing on dropdown list items */
#header .header-nav-main .nav-dropdown > li {
	margin: 0;
	padding: 0;
}

/* Items run edge to edge, so highlights reach the sides and corners */
#header .header-nav-main .nav-dropdown > li > a {
	margin: 0;
	padding-left: 20px;
	padding-right: 20px;
	color: var(--bv-green-bright);
	font-size: 1rem;
	font-weight: 600;
}

/* Darker green on hover or keyboard focus
   (the current page keeps its highlighted style) */
#header .header-nav-main .nav-dropdown > li:not(.current-menu-item) > a:hover,
#header .header-nav-main .nav-dropdown > li:not(.current-menu-item) > a:focus {
	color: var(--bv-green-dark);
}

/* Current page highlighted */
#header .header-nav-main .nav-dropdown > li.current-menu-item > a {
	background-color: var(--bv-green-bright);
	color: var(--bv-white);
}

/* Round the first and last items' corners to match the dropdown's
   10px radius (set in Dropdown Style), so highlights fit the corners */
#header .header-nav-main .nav-dropdown > li:first-child > a {
	border-radius: 10px 10px 0 0;
}

#header .header-nav-main .nav-dropdown > li:last-child > a {
	border-radius: 0 0 10px 10px;
}

/* ---------------------------------------------------------------
 * Header on medium screens (laptops and landscape tablets, 850–1299px)
 * Shrink the logo, menu text and spacing so the menu, Shop button
 * and cart fit on one line. Flatsome switches to the mobile menu
 * below 850px. Raise the upper limit if the menu still wraps
 * just above it. Kept after the header rules so it overrides them.
 * ------------------------------------------------------------- */

@media (min-width: 850px) and (max-width: 1439px) {
	#logo {
		width: 240px !important;
	}
	#logo img {
		max-width: 240px;
	}
	.header-nav-main > li {
		margin: 0 6px;
	}
	.header-nav-main > li > a {
		font-size: 0.875rem;
	}
}

/* Burger menu up to 1149px (Flatsome switches at 850px, but the full
   menu, basket and SHOP button no longer fit on one line below about
   1150px). Shows Flatsome's mobile header (logo, basket, burger) and
   hides the desktop menu in that range. */
@media (min-width: 850px) and (max-width: 1149px) {
	#header .header-main .flex-col.hide-for-medium {
		display: none !important;
	}
	#header .header-main .flex-col.show-for-medium {
		display: block !important;
	}
}

/* ---------------------------------------------------------------
 * Header: mini cart
 * Desktop: dropdown under the basket icon. Phones: the basket
 * drawer. The first rule overrides the dropdown menu rules above
 * (no padding, centred text), which also reach the dropdown.
 * ------------------------------------------------------------- */

#header .header-nav-main .cart-item .nav-dropdown {
	width: 320px;
	padding: 20px !important;
	text-align: left;
}

/* Product rows: name dark grey and left-aligned, room on the
   right for the remove (×) button */
.widget_shopping_cart .mini_cart_item {
	text-align: left;
	border-bottom: 1px solid var(--bv-grey-4);
}

.widget_shopping_cart .mini_cart_item a:not(.remove) {
	padding-right: 25px;
	color: var(--bv-dark-grey);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
}

.widget_shopping_cart .mini_cart_item a:not(.remove):hover {
	color: var(--bv-green-dark);
}

/* Remove (×): quieter, green on hover */
.widget_shopping_cart a.remove {
	border-color: var(--bv-grey-3) !important;
	color: var(--bv-grey-2) !important;
}

.widget_shopping_cart a.remove:hover {
	border-color: var(--bv-green-dark) !important;
	color: var(--bv-green-dark) !important;
}

/* Quantity box: square like the rest of the site */
.widget_shopping_cart .quantity,
.widget_shopping_cart .quantity input,
.widget_shopping_cart .quantity .button {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Prices */
.widget_shopping_cart .amount {
	color: var(--bv-dark-grey);
	font-weight: 600;
}

/* Subtotal: label left, amount right */
.woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: 15px 0;
	color: var(--bv-dark-grey);
	font-weight: 500;
}

/* Buttons: View basket (white) and Checkout (bright green), in the
   site's square button style */
.woocommerce-mini-cart__buttons .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	margin: 0 0 10px;
	padding: 0;
	background-color: var(--bv-white) !important;
	border: 2px solid var(--bv-dark-grey) !important;
	border-radius: 0 !important;
	color: var(--bv-dark-grey) !important;
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
}

.woocommerce-mini-cart__buttons .button.checkout {
	margin-bottom: 0;
	background-color: var(--bv-green-bright) !important;
}

.woocommerce-mini-cart__buttons .button:hover,
.woocommerce-mini-cart__buttons .button:focus {
	background-color: var(--bv-green-dark) !important;
	color: var(--bv-white) !important;
}

/* Booking details and add-ons in the mini basket and basket drawer
   (date, time, people, cheese): one line per item, label and value
   together, smaller and quieter than the product name */
.widget_shopping_cart .mini_cart_item dl.variation {
	margin: 6px 0 8px;
	padding: 0;
	border: 0;
	color: var(--bv-grey-1);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.widget_shopping_cart .mini_cart_item dl.variation dt,
.widget_shopping_cart .mini_cart_item dl.variation dd,
.widget_shopping_cart .mini_cart_item dl.variation dd p {
	display: inline;
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.widget_shopping_cart .mini_cart_item dl.variation dt {
	font-weight: 600;
}

.widget_shopping_cart .mini_cart_item dl.variation dd {
	font-weight: 400;
}

/* New line after each value */
.widget_shopping_cart .mini_cart_item dl.variation dd::after {
	content: "\A";
	white-space: pre;
}

.widget_shopping_cart .mini_cart_item dd.variation-CheesePlatter10pp{white-space:nowrap}

/* Desktop dropdown: a little wider, so fewer lines wrap */
@media (min-width: 850px) {
	#header .header-nav-main .cart-item .nav-dropdown {
		width: 360px;
	}
}

/* ---------------------------------------------------------------
 * BASKET AND CHECKOUT
 * ------------------------------------------------------------ */

/* Basket + checkout: booking details, one label and value per line */
.woocommerce-cart-form dl.variation,.woocommerce-checkout-review-order-table dl.variation{margin:6px 0 8px;padding:0;border:0;font-size:0.875rem;line-height:1.45}
.woocommerce-cart-form dl.variation dt,.woocommerce-cart-form dl.variation dd,.woocommerce-cart-form dl.variation dd p,.woocommerce-checkout-review-order-table dl.variation dt,.woocommerce-checkout-review-order-table dl.variation dd,.woocommerce-checkout-review-order-table dl.variation dd p{display:inline;float:none;clear:none;margin:0;padding:0;font-size:inherit;line-height:inherit}
.woocommerce-cart-form dl.variation dt,.woocommerce-checkout-review-order-table dl.variation dt{font-weight:600}
.woocommerce-cart-form dl.variation dd::after,.woocommerce-checkout-review-order-table dl.variation dd::after{content:"\A";white-space:pre}

/* Basket (phone): hide "1 x" on bookings, keep it for wine */
.woocommerce-cart-form .cart_item:has(.variation-BookingDate) .mobile-product-price__qty{display:none}

/* Basket drawer (phones): white panel, title like the section
   headings, no grey divider under it, dark grey close (×) */
#cart-popup .cart-popup-inner {
	background-color: var(--bv-white) !important;
	text-align: left;
}

#cart-popup .cart-popup-title {
	color: var(--bv-dark-grey);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
}

#cart-popup .cart-popup-title .is-divider {
	display: none;
}

#cart-popup .mfp-close,
.off-canvas-cart .mfp-close {
	color: var(--bv-dark-grey) !important;
}

/* Basket: hide the Quantity heading when nothing in the basket has a quantity box (bookings only) */
.woocommerce-cart-form:not(:has(input.qty[type="number"])) th.product-quantity{visibility:hidden}

/* Checkout: hide "× 1" after bookings, keep it for wine */
.woocommerce-checkout-review-order-table .cart_item:has(.variation-BookingDate) .product-quantity{display:none}

/* Order received page: hide the free local delivery message */
.woocommerce-order-received .delivery-notice{display:none}

/* Order received page: add-on label and value on one line */
.woocommerce-order-details .wc-item-meta{margin:6px 0 10px;padding:0;list-style:none;font-size:0.875rem}
.woocommerce-order-details .wc-item-meta li{margin:0}
.woocommerce-order-details .wc-item-meta li strong,.woocommerce-order-details .wc-item-meta li p{display:inline;margin:0}
.woocommerce-order-details .bv-item-extra{margin:8px 0 0;font-size:0.875rem}

/* ---------------------------------------------------------------
 * Mobile menu drawer (as in the Figma): olive fading to dark grey,
 * mixed-case white text, sub-items open and indented, Buy Wine in
 * pink, legal links smaller below a dashed line.
 * Menu: "Mobile menu" in the Main Menu – Mobile location. Classes
 * (Appearance → Menus → CSS Classes): Buy Wine "menu-buy-wine",
 * Privacy Policy "menu-small menu-divider", Terms "menu-small".
 * Customizer → Header → Mobile Menu: uppercase off, submenus
 * Accordion (the CSS keeps them open).
 * ------------------------------------------------------------- */

/* Panel: gradient fills the full height of the drawer */
.mfp-content:has(> .mobile-sidebar) {
	min-height: 100%;
	background: linear-gradient(180deg, var(--bv-menu-green) 4.4%, var(--bv-dark-grey) 38.8%) !important;
}

.mobile-sidebar {
	background: transparent !important;
}

/* No lines between items, no hover backgrounds */
.mobile-sidebar .nav-sidebar li {
	border: 0 !important;
}

.mobile-sidebar .nav-sidebar li > a {
	background: none !important;
}

/* Top-level items: Medium 20px (Figma) */
.mobile-sidebar .nav-sidebar > li > a {
	padding: 6px 20px !important;
	color: var(--bv-white);
	font-size: 1.25rem !important;
	font-weight: 500;
	line-height: 1.33;
	text-transform: none;
}

/* Items with sub-menus: let the row wrap, so the sub-menu sits on
   its own full-width line under the link (Flatsome lays each item
   out as a single row) */
.mobile-sidebar .nav-sidebar li.has-child {
	flex-wrap: wrap !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

.mobile-sidebar .nav-sidebar li.has-child > a {
	flex: 1 1 auto;
}

/* Sub-items: always open, indented, smaller and lighter */
.mobile-sidebar .nav-sidebar li ul {
	display: block !important;
	flex: 0 0 100%;
	width: 100% !important;
	visibility: visible !important;
	opacity: 1 !important;
	max-height: none !important;
	height: auto !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
}

/* Sub-menus: undo every way Flatsome's accordion can hide them
   (on the sub-menu and the sub-items) */
.mobile-sidebar .nav-sidebar li ul,
.mobile-sidebar .nav-sidebar li ul li {
	position: static !important;
	transform: none !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	pointer-events: auto !important;
}

.mobile-sidebar .nav-sidebar li ul li {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	max-height: none !important;
}

.mobile-sidebar .nav-sidebar li ul li > a {
	padding: 6px 20px 6px 28px !important;
	color: var(--bv-white);
	font-size: 1rem !important;
	font-weight: 400;
	line-height: 1.67;
	text-transform: none;
}

/* Submenus are always open, so no expand/collapse arrows */
.mobile-sidebar .nav-sidebar .toggle {
	display: none !important;
}

/* Current page in bright green */
.mobile-sidebar .nav-sidebar .current-menu-item > a {
	color: var(--bv-green-bright);
}

/* Shop: bright green, bold (Figma) */
.mobile-sidebar .nav-sidebar .menu-buy-wine > a {
	color: var(--bv-green-bright);
	font-weight: 700;
}

/* Legal links: smaller and lighter */
.mobile-sidebar .nav-sidebar .menu-small > a {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
	font-size: 0.875rem !important;
	font-weight: 400;
	line-height: 1.33;
}

/* Dashed line above the legal links, inset to match the text
   (Flatsome lays menu items out as rows, so the line is given
   its own full-width row above the link) */
.mobile-sidebar .nav-sidebar .menu-divider {
	display: flex !important;
	flex-wrap: wrap;
}

.mobile-sidebar .nav-sidebar .menu-divider::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 150px;
	max-width: calc(100% - 40px);
	margin: 15px 0 20px 20px;
	border-top: 1px dashed var(--bv-white);
}

.mobile-sidebar .nav-sidebar .menu-divider > a {
	flex: 1 1 100%;
}

/* Close (×) in white, including its icon */
.mfp-content:has(> .mobile-sidebar) ~ .mfp-close,
.mfp-wrap:has(.mobile-sidebar) .mfp-close,
.mfp-wrap:has(.mobile-sidebar) .mfp-close svg {
	color: var(--bv-white) !important;
	stroke: var(--bv-white) !important;
	opacity: 1 !important;
}

/* ---------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------- */

/* All footer text semi-bold, 14px, as in the Figma */
#footer .text,
#footer .text p,
#footer .text a {
	font-size: 0.875rem;
	font-weight: 600;
}

/* Semi-bold headings (add the class "footer-heading"
   to a Text element in the footer UX Block) */
.footer-heading {
	font-weight: 600;
}

/* Social icons spaced apart like the old site
   (add the class "footer-social" to the Follow Icons element).
   Covers both the element itself and Flatsome's inner container. */
.footer-social,
.footer-social .social-icons {
	display: flex !important;
	justify-content: center;
	gap: 100px;
}

.footer-social a {
	margin: 0 !important;
}

/* Larger social icons */
.footer-social a i {
	font-size: 2rem;
}

/* Smaller gap on phones and tablets */
@media (max-width: 849px) {
	.footer-social,
	.footer-social .social-icons {
		gap: 60px;
	}
}

/* Hide Flatsome's absolute footer bar
   (copyright and links are in the footer UX Block instead) */
.absolute-footer {
	display: none !important;
}

/* Remove Flatsome's extra padding below columns,
   so the section padding controls the spacing */
#footer .col {
	padding-bottom: 0;
}

/* Newsletter sign-up (MC4WP form in the footer): white email box and
   a bright green SIGN UP button with a white border, stacked, full width
   (as on the current site) */
#footer .mc4wp-form .newsletter-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: none;
	margin: 0 0 10px;
}

#footer .mc4wp-form input[type="email"] {
	height: 40px;
	margin: 0;
	padding: 0 15px;
	background-color: var(--bv-white);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--bv-dark-grey);
	font-size: 1rem;
}

#footer .mc4wp-form input[type="email"]::placeholder {
	color: var(--bv-grey-2);
}

#footer .mc4wp-form input[type="submit"] {
	width: 100%;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background-color: var(--bv-green-bright) !important;
	border: 2px solid var(--bv-white) !important;
	border-radius: 0;
	color: var(--bv-white) !important;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

#footer .mc4wp-form input[type="submit"]:hover,
#footer .mc4wp-form input[type="submit"]:focus {
	background-color: var(--bv-green-hover) !important;
}

/* Small privacy note under the button, and the "thank you" / error
   messages, in light grey */
#footer .text .newsletter-note,
#footer .mc4wp-response p {
	max-width: none;
	margin: 0;
	color: var(--bv-grey-3);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
}

#footer .newsletter-note a {
	color: var(--bv-grey-3);
	text-decoration: underline;
}

.newsletter-signup .cf-note {
	margin-top: 15px;
	color: var(--bv-grey-1);
	font-size: 0.8125rem;
}

/* Newsletter page: text as normal; only the form is limited in width */
.newsletter-signup .mc4wp-form {
	max-width: 420px;
}

/* No shadow on the email box, including Flatsome's focus glow */
.newsletter-signup .mc4wp-form input[type="email"],
.newsletter-signup .mc4wp-form input[type="email"]:focus {
	box-shadow: none !important;
}
/* ---------------------------------------------------------------
 * AGE VERIFICATION POPUP (CPS | Age Verification plugin)
 * Styled like the live site: centred in the window, uppercase
 * title, light grey "Under 18" and dark grey "Over 18" buttons,
 * square edges. The plugin's own centring/theme options are
 * Pro-only, so it's done here. "Over 18" is the plugin's primary
 * button. #surbma-yes-no-popup beats the plugin's own styles.
 * ------------------------------------------------------------- */

/* White box: centred in the window. It still slides down slightly
   as it appears, like the plugin's own animation. */
#surbma-yes-no-popup .uk-modal-dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	padding: 20px;
	border-radius: 0;
	color: var(--bv-dark-grey);
	text-align: center;
	transform: translate(-50%, calc(-50% - 100px));
}

#surbma-yes-no-popup.uk-open .uk-modal-dialog {
	transform: translate(-50%, -50%);
}

/* Title */
#surbma-yes-no-popup .uk-modal-header {
	margin-bottom: 10px;
}

#surbma-yes-no-popup .uk-modal-header h2 {
	margin: 0;
	color: var(--bv-dark-grey);
	font-size: 1.625rem;
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Message */
#surbma-yes-no-popup .uk-modal-content,
#surbma-yes-no-popup .uk-modal-content p {
	color: var(--bv-dark-grey);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
}

#surbma-yes-no-popup .uk-modal-content p:last-child {
	margin-bottom: 0;
}

/* Buttons: centred, square, a little gap between them */
#surbma-yes-no-popup .uk-modal-footer {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 15px;
	text-align: center;
}

#surbma-yes-no-popup .uk-modal-footer .uk-button {
	min-width: 95px;
	min-height: 40px;
	margin: 0;
	padding: 0 15px;
	background-color: var(--bv-grey-4);
	border: 0;
	border-radius: 0;
	color: var(--bv-dark-grey);
	font-size: 1rem;
	font-weight: 400;
	line-height: 40px;
	transition: background-color 0.3s, color 0.3s;
}

/* Over 18 (the plugin's primary button): dark grey, white text */
#surbma-yes-no-popup .uk-modal-footer .uk-button-primary {
	background-color: var(--bv-dark-grey);
	color: var(--bv-white);
}

/* Both: dark green on hover or keyboard focus */
#surbma-yes-no-popup .uk-modal-footer .uk-button:hover,
#surbma-yes-no-popup .uk-modal-footer .uk-button:focus {
	background-color: var(--bv-green-dark);
	color: var(--bv-white);
}

/* Phones: the plugin stacks the buttons full width; remove its
   extra gap so the flex gap above does the spacing */
@media (max-width: 479px) {
	#surbma-yes-no-popup .uk-modal-footer {
		flex-direction: column;
	}
	#surbma-yes-no-popup .uk-modal-footer .uk-button + .uk-button {
		margin-top: 0;
	}
}

/* Phones and small tablets: nearly full width, as on the live site
   (the plugin sets the width to "auto" below 768px, which shrinks
   the centred box to fit its text) */
@media (max-width: 767px) {
	#surbma-yes-no-popup .uk-modal-dialog {
		width: calc(100% - 20px);
	}
}

/* Question as the first line of the message, styled like the old
   title (kept out of the title so it isn't a heading for Google) */
#surbma-yes-no-popup .uk-modal-content .age-question {
	margin-bottom: 10px;
	font-size: 1.625rem;
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------
 * Title bar on standard pages (Banners with the class "title-banner").
 * Change the bar's look here and it updates on every page.
 * ".banner.title-banner" beats Flatsome's own ".banner h1" rules.
 * ------------------------------------------------------------- */

/* Let the banner's content layer span the full screen */
.banner.title-banner .banner-layers {
	max-width: 100%;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Text box always full width
   (!important beats the width Flatsome sets per text box) */
.banner.title-banner .text-box {
	width: 100% !important;
}

/* Dark bar behind the title. The Figma uses #666 in Multiply
   mode, which darkens the photo the same as black at 60% */
.banner.title-banner .text-box-content {
	background-color: rgba(0, 0, 0, 0.6);
	padding: 16px 20px;
}

/* Title */
.banner.title-banner h1 {
	margin: 0;
	color: var(--bv-white);
	font-size: 3.25rem;
	font-weight: 400;
	text-transform: uppercase;
}

/* Phones: 36px title in a 54px bar (Figma) */
@media (max-width: 549px) {
	.banner.title-banner .text-box-content {
		padding: 6px 20px;
	}
	.banner.title-banner h1 {
		font-size: 2.25rem;
	}
}

/* ---------------------------------------------------------------
 * Signpost cards on landing pages (Row with the class
 * "signpost-cards", an Image Box in each column).
 * Grey is the default. For a coloured panel, add "card-pink" or
 * "card-green" to the Image Box (cards built on the page), or to the
 * column holding the Block element (CTA blocks), so each page can
 * choose the colour of a shared CTA block.
 * In each Image Box: image height 64%, text colour Light, and
 * leave the text background and text padding settings empty
 * so these rules apply.
 * Watermark: assets/img/logo-overlay.svg in the child theme
 * (the old site's file, angle built into the artwork).
 * ------------------------------------------------------------- */

/* Equal-height cards: each card fills its column, the text panel
   stretches, and the buttons line up along the bottom */
.signpost-cards .col-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.signpost-cards .box {
	position: relative;
	overflow: hidden;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Keep the image at full width and height inside the flexible card */
.signpost-cards .box-image {
	flex-shrink: 0;
	width: 100%;
}

.signpost-cards .box-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: var(--bv-dark-grey);
	text-align: center;
	padding: 30px 42px !important;
}

.signpost-cards .box-text-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.signpost-cards .box-text .button {
	margin-top: auto;
}

/* Logo watermark over the whole card, like the old site:
   8% opacity, anchored top right, covering the card.
   pointer-events: none keeps the image and button clickable. */
.signpost-cards .box::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/logo-overlay.svg") no-repeat top right / cover;
	opacity: 0.08;
	pointer-events: none;
	z-index: 5;
}

/* Text: white, Raleway Medium (500), 16px with 20px line spacing (Figma) */
.signpost-cards .box .box-text,
.signpost-cards .box .box-text p,
.signpost-cards .box .box-text .text,
.signpost-cards .box .box-text .box-text-inner {
	color: var(--bv-white) !important;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
}

.signpost-cards .box-text p {
	margin-bottom: 30px;
}

/* Panel colour options: on the Image Box, or on the column that
   holds a CTA block (so each page can choose the colour) */
.signpost-cards .card-pink .box-text,
.card-pink .signpost-cards .box-text {
	background-color: var(--bv-pink);
}

.signpost-cards .card-green .box-text,
.card-green .signpost-cards .box-text {
	background-color: var(--bv-green-dark);
}

/* Button: white outline on grey cards. Figma: SemiBold (600) 17px,
   uppercase, 8px x 38px padding, 2px border, 36px tall */
.signpost-cards .box-text .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	max-width: 100%;
	height: 36px;
	min-height: 0;
	padding: 0 38px;
	line-height: 1;
	background-color: transparent !important;
	border: 2px solid var(--bv-white) !important;
	border-radius: 0;
	color: var(--bv-white) !important;
	font-size: 1.0625rem;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Button: white background, dark border and text on coloured cards */
.signpost-cards .card-pink .box-text .button,
.signpost-cards .card-green .box-text .button,
.card-pink .signpost-cards .box-text .button,
.card-green .signpost-cards .box-text .button {
	background-color: var(--bv-white) !important;
	border-color: var(--bv-dark-grey) !important;
	color: var(--bv-dark-grey) !important;
}

/* Grey / outline card buttons: mid grey on hover or keyboard focus
   (Figma "Grey hover") */
.signpost-cards .box-text .button:hover,
.signpost-cards .box-text .button:focus {
	background-color: var(--bv-grey-2) !important;
	border-color: var(--bv-white) !important;
	color: var(--bv-white) !important;
	box-shadow: none !important;
}

/* White buttons on coloured cards: Figma "White hover" (pale grey,
   light border, light grey text) */
.signpost-cards .card-pink .box-text .button:hover,
.signpost-cards .card-pink .box-text .button:focus,
.signpost-cards .card-green .box-text .button:hover,
.signpost-cards .card-green .box-text .button:focus,
.card-pink .signpost-cards .box-text .button:hover,
.card-pink .signpost-cards .box-text .button:focus,
.card-green .signpost-cards .box-text .button:hover,
.card-green .signpost-cards .box-text .button:focus {
	background-color: var(--bv-grey-4) !important;
	border-color: var(--bv-review-bg) !important;
	color: var(--bv-grey-3) !important;
	box-shadow: none !important;
}

/* Closing CTA cards (Row with "signpost-cards cta-card"):
   dark grey button with a white border, as in the Figma.
   Kept after the coloured-card rules so it wins over them. */
.signpost-cards.cta-card .box-text .button,
.signpost-cards.cta-card .card-pink .box-text .button,
.signpost-cards.cta-card .card-green .box-text .button {
	background-color: var(--bv-dark-grey) !important;
	border-color: var(--bv-white) !important;
	color: var(--bv-white) !important;
}

.signpost-cards.cta-card .box-text .button:hover,
.signpost-cards.cta-card .box-text .button:focus {
	background-color: var(--bv-grey-2) !important;
	border-color: var(--bv-white) !important;
	color: var(--bv-white) !important;
}

/* Bright green button with a white outline on a card (add
   "button-green" to the Image Box), as on the About us Figma's
   Our Family card */
.signpost-cards .button-green .box-text .button {
	background-color: var(--bv-green-bright) !important;
	border-color: var(--bv-white) !important;
	color: var(--bv-white) !important;
}

/* White outline button on a coloured card (add "button-outline"
   to the Image Box), e.g. the green Experiences card on the
   homepage. Kept after the coloured-card rules so it wins. */
.signpost-cards .button-outline .box-text .button {
	background-color: transparent !important;
	border-color: var(--bv-white) !important;
	color: var(--bv-white) !important;
}

.signpost-cards .button-outline .box-text .button:hover,
.signpost-cards .button-outline .box-text .button:focus {
	background-color: var(--bv-grey-2) !important;
	border-color: var(--bv-white) !important;
	color: var(--bv-white) !important;
}
.signpost-cards .button-green .box-text .button:hover,
.signpost-cards .button-green .box-text .button:focus {
	background-color: var(--bv-green-hover) !important;
	border-color: var(--bv-white) !important;
}

/* Signpost cards on tablets in portrait (550–849px): three cards are
   narrow, so less padding and buttons that can wrap onto two lines,
   instead of pushing the row wider than the screen */
@media (min-width: 550px) and (max-width: 849px) {
	.signpost-cards .col-inner,
	.signpost-cards .box,
	.signpost-cards .box-text,
	.signpost-cards .box-text-inner {
		min-width: 0;
	}
	.signpost-cards .box-text {
		padding: 25px 15px !important;
	}
	.signpost-cards .box-text .button {
		height: auto;
		min-height: 36px;
		padding: 8px 12px;
		font-size: 0.9375rem;
		line-height: 1.2;
		white-space: normal;
	}
}

/* Page-level override: white button with dark text on a card
   (add "button-light" to the column holding the card or CTA block) */
.button-light .signpost-cards .box-text .button,
.button-light .signpost-cards.cta-card .box-text .button {
	background-color: var(--bv-white) !important;
	border-color: var(--bv-dark-grey) !important;
	color: var(--bv-dark-grey) !important;
}

.button-light .signpost-cards .box-text .button:hover,
.button-light .signpost-cards .box-text .button:focus,
.button-light .signpost-cards.cta-card .box-text .button:hover,
.button-light .signpost-cards.cta-card .box-text .button:focus {
	background-color: var(--bv-grey-4) !important;
	border-color: var(--bv-review-bg) !important;
	color: var(--bv-grey-3) !important;
}

/* Phones: less padding inside cards and buttons, so long button
   labels (e.g. BOOK TOURS + TASTINGS) fit and stay centred */
@media (max-width: 549px) {
	.signpost-cards .box-text {
		padding: 30px 25px !important;
	}
	.signpost-cards .box-text-inner {
		width: 100%;
		min-width: 0;
	}
	.signpost-cards .box-text .button {
		padding: 0 20px;
	}
}

/* ---------------------------------------------------------------
 * STORY PAGES
 * Our Family, Fur & Feathers, History, Our Vineyard etc.
 * ------------------------------------------------------------- */

/* Title slider: dots on mobile only (as in the Figma).
   Turn on bullets in the Slider settings. */
@media (min-width: 850px) {
	.title-slider .flickity-page-dots {
		display: none;
	}
}

/* Title slider arrows: dark arrow on a semi-transparent white circle,
   no change on hover. Flatsome's own arrow icon is hidden and
   replaced with our own, so its hover colours can't affect it.
   (The arrow colour %233f3f3f is dark grey; CSS variables can't be
   used inside the SVG code.) */
.title-slider .flickity-prev-next-button svg {
	display: none !important;
}

.title-slider .flickity-prev-next-button,
.title-slider .flickity-prev-next-button:hover,
.title-slider .flickity-prev-next-button:focus {
	width: 40px;
	height: 40px;
	border: none !important;
	border-radius: 50%;
	box-shadow: none !important;
	opacity: 1 !important;
	transition: none !important;
	background-color: rgba(255, 255, 255, 0.85) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 18px !important;
}

.title-slider .flickity-prev-next-button.next,
.title-slider .flickity-prev-next-button.next:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f3f3f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
}

.title-slider .flickity-prev-next-button.previous,
.title-slider .flickity-prev-next-button.previous:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f3f3f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") !important;
}

/* Slower, softer fade between slides (Flatsome's default is 0.6s) */
.title-slider .flickity-slider > div {
	transition: transform 0.6s, opacity 1.7s ease-in-out, box-shadow 0.6s !important;
}

/* Title sliders: no loading spinner (the dark grey background shows
   for the moment before the first photo appears) */
.title-slider .loading-spin,
.title-slider ~ .loading-spin {
	display: none !important;
}

/* Section headings (H2) in page sections: green, bold, uppercase,
   as in the Figma. Scoped to UX Builder sections so WooCommerce
   page headings (cart totals etc.) aren't affected. */
.section h2 {
	color: var(--bv-green-dark);
	font-size: 1.375rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* Section headings that keep their normal capitalisation (add the
   class "heading-normal-case" to the Text element) */
.section .heading-normal-case h2 {
	text-transform: none;
}

/* ---------------------------------------------------------------
 * Story rows (Row with the class "story-row", image in the first
 * column, text in the second). Add "reverse" for image-right rows;
 * phones always show the image first. Vertical centring is set in
 * the Row settings.
 * ------------------------------------------------------------- */

@media (min-width: 850px) {
	.story-row.reverse {
		flex-direction: row-reverse;
	}
}

/* Story rows: remove Flatsome's extra 30px under the columns, so the
   section padding is even above and below (keeps dividers centred).
   On phones, keep a gap between the stacked image and text. */
.story-row > .col {
	padding-bottom: 0;
}

@media (max-width: 849px) {
	.story-row > .col:first-child {
		padding-bottom: 20px;
	}
}

/* First section under the title banner: more space at the top than
   the bottom (Flatsome's padding setting sets both together).
   !important is needed to override Flatsome's section ID rule. */
.section-intro {
	padding-top: 75px !important;
	padding-bottom: 0 !important;
}

/* Intro section with a divider below it: keep space above the lines */
.section-intro.divider-bottom {
	padding-bottom: 50px !important;
}
/* Dark grey behind title banners and sliders while the photo
   loads, so new pages don't flash white under the dark header */
.title-slider,
.title-slider .banner,
.banner.title-banner {
	background-color: var(--bv-dark-grey);
}
/* ---------------------------------------------------------------
 * Quote banners (Banner at the top level of the page, with the
 * class "quote-banner"). Set the banner height (about 300px) and
 * text box width (about 40% desktop, 60% tablet, 90% mobile) in
 * the Banner settings. Format the quote as a blockquote.
 * ------------------------------------------------------------- */

/* Translucent white box (70% white, Figma) */
.banner.quote-banner .text-box-content {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 25px 30px;
}

/* Quote text: Raleway Medium (500) 22px, 31px line spacing (Figma
   "large pull quote"). Overrides Flatsome's default blockquote style. */
.banner.quote-banner blockquote,
.banner.quote-banner blockquote p,
.banner.quote-banner p {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--bv-dark-grey);
	font-size: 1.375rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.41;
	text-align: center;
}

/* Rows without Flatsome's extra 30px under the columns (Row with
   the class "row-tight"), so the section padding sets the spacing */
.row-tight > .col {
	padding-bottom: 0;
}

/* ---------------------------------------------------------------
 * Double-line divider below a section (Section with the class
 * "divider-bottom"). Same lines as the quote banners.
 * ------------------------------------------------------------- */

.divider-bottom {
	margin-bottom: 20px;
	box-shadow:
		0 10px 0 var(--bv-white),
		0 12px 0 var(--bv-divider),
		0 16px 0 var(--bv-white),
		0 18px 0 var(--bv-divider);
}

/* Two thin lines above and below, separated from the photo by a
   white gap (drawn with stacked shadows; margins make room for them) */
.banner.quote-banner {
	margin: 20px 0;
	box-shadow:
		0 -10px 0 var(--bv-white),
		0 -12px 0 var(--bv-divider),
		0 -16px 0 var(--bv-white),
		0 -18px 0 var(--bv-divider),
		0 10px 0 var(--bv-white),
		0 12px 0 var(--bv-divider),
		0 16px 0 var(--bv-white),
		0 18px 0 var(--bv-divider);
}

/* ---------------------------------------------------------------
 * Captions (Text element with the class "caption", directly under
 * an image or video). Italic, as in the Figma photo captions.
 * Add "caption-upper" as well for the uppercase style used under
 * the Shadow video.
 * ------------------------------------------------------------- */

.caption,
.caption p {
	margin-top: 8px;
	color: var(--bv-dark-grey);
	font-size: 0.8125rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
}

/* No extra space after the last paragraph in a caption */
.caption p:last-child {
	margin-bottom: 0;
}

/* Uppercase caption: larger, not italic */
.caption.caption-upper,
.caption.caption-upper p {
	font-size: 0.9375rem;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
 * Contact details (Text element with the class "contact-details"):
 * small grey uppercase labels (the <strong> at the start of each
 * paragraph) above each address, email, phone etc.
 * ------------------------------------------------------------- */
.contact-details p {
	margin-bottom: 18px;
	color: var(--bv-dark-grey);
	font-size: 1rem;
	line-height: 1.5;
}

.contact-details p strong {
	display: block;
	margin-bottom: 2px;
	color: var(--bv-grey-1);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.contact-details a {
	color: var(--bv-green-dark);
}

.contact-details a:hover,
.contact-details a:focus {
	color: var(--bv-dark-grey);
}

/* ---------------------------------------------------------------
 * Info blocks (Rows with the class "info-blocks"), e.g. Getting
 * here: thin green line above each block, dark grey H3, body text
 * ------------------------------------------------------------- */
.info-blocks > .col > .col-inner {
	padding-top: 18px;
	border-top: 1px solid var(--bv-grey-3);
}

.info-blocks h3 {
	margin-bottom: 10px;
	color: var(--bv-dark-grey);
	font-size: 1.125rem;
	font-weight: 600;
}

.info-blocks p,
.info-blocks li {
	color: var(--bv-dark-grey);
	font-size: 1rem;
	line-height: 1.5;
}

.info-blocks ul {
	margin-left: 1.1em;
}

/* ---------------------------------------------------------------
 * Product/quote card (Row with the class "quote-card": text in one
 * column, bottle image in the other). Used for the winemaker quote
 * (UX Block) and page-specific product features.
 * ------------------------------------------------------------- */

/* Card: border, bottle sitting on the bottom edge, quote centred */
.quote-card {
	border: 1px solid var(--bv-grey-2);
	padding: 20px 20px 0 30px;
	align-items: stretch;
}

/* Remove Flatsome's default space under the columns */
.quote-card > .col {
	padding-bottom: 0;
}

/* Quote column: centred vertically, indented from the card edge */
.quote-card > .col:first-child {
	align-self: center;
	padding-bottom: 20px;
	padding-left: 40px;
}

@media (max-width: 549px) {
	.quote-card > .col:first-child {
		padding-left: 20px;
	}
}

/* Bottle column: sits on the bottom edge */
.quote-card > .col:last-child {
	align-self: flex-end;
}

/* Bottle: larger, centred in its column */
.quote-card .img img {
	display: block;
	width: auto;
	max-height: 380px;
	margin: 0 auto;
}

.quote-card blockquote,
.quote-card blockquote p,
.quote-card .quote {
	margin: 0 0 15px;
	padding: 0;
	border: 0;
	color: var(--bv-dark-grey);
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
}

.quote-card .attribution {
	margin-bottom: 20px;
	font-size: 0.75rem;
}

/* Quote card button: bright green with dark grey text and border,
   like the shop buttons (white on bright green fails contrast).
   Dark green with white text on hover. */
.quote-card .button {
	background-color: var(--bv-green-bright) !important;
	border: 2px solid var(--bv-dark-grey) !important;
	border-radius: 0;
	color: var(--bv-dark-grey) !important;
	font-size: 1.0625rem;
	font-weight: 600;
	text-transform: uppercase;
}

.quote-card .button:hover,
.quote-card .button:focus {
	background-color: var(--bv-green-dark) !important;
	border-color: var(--bv-dark-grey) !important;
	color: var(--bv-white) !important;
	box-shadow: none !important;
}

/* ---------------------------------------------------------------
 * Feature panel (Column with the class "feature-panel"): dark grey
 * panel with a full-width image, centred white text, and an inner
 * row of two items (e.g. video + polaroids on Our Vineyard)
 * ------------------------------------------------------------- */

/* Dark grey panel with space at the bottom */
.col.feature-panel > .col-inner {
	background-color: var(--bv-dark-grey);
	padding-bottom: 30px;
}

/* Text: white, centred, Medium (500), like the signpost cards */
.feature-panel .text,
.feature-panel .text p {
	color: var(--bv-white);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
}

/* Space around the text so it doesn't touch the panel edges */
.feature-panel .text {
	padding: 20px 40px 0;
}

.feature-panel .text p:last-child {
	margin-bottom: 0;
}

/* Inner row: inset from the panel edges
   (overrides Flatsome's negative margins on nested rows) */
.feature-panel .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 20px 30px 0;
}

/* Remove Flatsome's extra space under the inner columns */
.feature-panel .row > .col {
	padding-bottom: 0;
}

/* Text under the video and polaroids: a little less side padding */
.feature-panel .row .text {
	padding: 15px 10px 0;
}

/* Inner row: give images the same 16:9 box as the video, with the
   image fitted inside and sitting at the bottom, so the text below
   both starts at the same height */
.feature-panel .row .img {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.feature-panel .row .img .img-inner {
	position: absolute;
	inset: 0;
}

.feature-panel .row .img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

/* Feature panel: a self-hosted video sits in the same 16:9 box as
   the image beside it, with the same 16px gap below (Flatsome's
   image margin), so the texts underneath line up */
.feature-panel .col-inner > p:has(> .video-file) {
	aspect-ratio: 16 / 9;
	margin: 0 0 16px;
	line-height: 0;
}

.feature-panel .col-inner > p:has(> .video-file) .video-file {
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------
 * Closing pair (Row with the class "closing-pair"): two items side
 * by side at the end of a page. CTA cards stretch to equal height,
 * with their buttons lined up along the bottom.
 * ------------------------------------------------------------- */

.closing-pair {
	align-items: stretch !important;
}

.closing-pair > .col > .col-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* CTA cards fill the column's height */
.closing-pair > .col > .col-inner > .signpost-cards {
	flex: 1;
}

/* Closing pair: video in a light grey panel the same height as the
   card beside it (add "video-panel" to the column), with the
   caption centred in the space below the video */
.closing-pair .video-panel > .col-inner {
	background-color: var(--bv-grey-4);
}

.closing-pair .video-panel .caption {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 20px;
}

/* Closing pair: CTA blocks fill the full column height (removes
   Flatsome's extra 30px under the block's own column), so both
   items end level */
.closing-pair .signpost-cards > .col {
	padding-bottom: 0;
}

/* ---------------------------------------------------------------
 * SHOP
 * Buy Wine page: Flatsome Products element with the class
 * "shop-grid" (categories Wine, Accessories, Gift Voucher).
 * Cards stacked as in the client's design: label-style title,
 * square image, one-liner, "Find out more", then Bottle and Case
 * side by side, each with its price above an Add to basket button.
 * Products element: columns 2 / 2 / 1, equalize items OFF (the CSS
 * makes the cards equal height), 12+ products. Images square (1:1).
 * Snippets: "Shop – wine card titles" (label-style names) and the
 * quick-buy options.
 * ------------------------------------------------------------- */

/* Mix-and-match notice above the grid (Text element with the
   class "shop-notice", in the same column as the products) */
.text.shop-notice {
	margin-bottom: 20px;
	padding: 25px 20px;
	background-color: var(--bv-green-bright);
	text-align: center;
}

.text.shop-notice p {
	margin: 0;
	color: var(--bv-white);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

/* Equal-height cards in each row: the column stretches, and the
   card grows to fill it (never a fixed height, so content can't
   spill out of the card) */
.shop-grid .product-small.col > .col-inner {
	display: flex;
	flex-direction: column;
	height: auto !important;
	min-height: 100%;
}

/* Card: one centred column with a thin border. The text area is
   "unwrapped" (display: contents) so its parts can be ordered
   around the image: title, image, one-liner, quick-buy. */
.shop-grid .product-small.box {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	height: auto !important;
	padding: 25px;
	border: 1px solid var(--bv-green-bright);
	background-color: var(--bv-white);
	color: var(--bv-dark-grey);
	text-align: center;
}

.shop-grid .product-small .box-text {
	display: contents;
}

/* Everything in the card centred (overrides the Products element's
   own alignment), and any extra items added by plugins (e.g. the
   voucher's "Minimum" price) placed after the one-liner instead of
   jumping to the top. The numbered rules below set the main order. */
.shop-grid .product-small .box-text > * {
	order: 3;
	text-align: center !important;
}

/* 1. Title block, centred as a column */
.shop-grid .product-small .title-wrapper {
	order: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 20px;
}

/* Product names styled like the bottle labels (added by the
   "Shop – wine card titles" snippet): year, name with a rule
   underneath, style, type. Flatsome's own title is hidden.
   Each line has a fixed height (and is always output, empty if
   unused), so years, names, rules, styles and types each sit at
   the same height across a row of cards. */
.shop-grid .name.product-title {
	display: none;
}

.shop-grid .wine-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--bv-dark-grey);
}

/* Year: one line, sitting close above the name, like the label */
.shop-grid .wine-year {
	height: 1.1em;
	margin-bottom: 3px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.1;
}

/* Name: text with a rule underneath (the two-line space is now on .wine-title) */
.shop-grid .wine-name {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 0;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--bv-dark-grey);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
}

/* Year sits directly above the name, like the label. The title block
   keeps a fixed height (room for a two-line name), with any spare
   space above the year, so the rules under the names still line up
   across a row. */
.shop-grid .wine-title {
	min-height: 5.1rem;
}

.shop-grid .wine-year {
	margin-top: auto;
}

.shop-grid .wine-title:hover .wine-name,
.shop-grid .wine-title:focus .wine-name {
	color: var(--bv-green-dark);
}

/* Style: one line */
.shop-grid .wine-style {
	height: 1.4em;
	margin: 8px 0 0;
	color: var(--bv-dark-grey);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Type: room for two lines */
.shop-grid .wine-type {
	min-height: 2.8em;
	margin: 12px 0 0;
	color: var(--bv-dark-grey);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Keep the empty style and type lines (Flatsome hides empty
   paragraphs), so the photos still line up */
.shop-grid .wine-style,
.shop-grid .wine-type {
	display: block !important;
}

/* 2. Image: full card width, square. The square is set on the
   image area itself, and Flatsome's image wrapper and the image
   are made to fill it, whatever sizing Flatsome adds. (Flatsome's
   small hover-tool overlays are left alone.) */
.shop-grid .product-small .box-image {
	order: 2;
	position: relative;
	flex: none;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 0 20px;
	overflow: hidden;
}

.shop-grid .product-small .box-image > div:not([class*="image-tools"]),
.shop-grid .product-small .box-image > div:not([class*="image-tools"]) > a,
.shop-grid .product-small .box-image > a {
	position: absolute !important;
	inset: 0;
	height: 100% !important;
	padding: 0 !important;
}

.shop-grid .product-small .box-image img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* 3. One-liner (short description) */
.shop-grid .product-small .box-excerpt {
	order: 3;
	max-width: 30em;
	margin: 0 auto 20px;
	color: var(--bv-dark-grey);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.45;
}

/* No separate price: the quick-buy options show it */
.shop-grid .price-wrapper {
	display: none !important;
}

/* 4. Quick-buy area at the bottom of the card (covers Flatsome's
   button wrapper too, if it adds one) */
.shop-grid .product-small .add-to-cart-button,
.shop-grid .product-small .quick-buy {
	order: 4;
	width: 100%;
	margin-top: auto !important;
}

/* "Find out more →" link to the product page, above the options */
.shop-grid .box-text a.quick-buy-more {
	display: inline-block;
	margin: 0 0 28px;
	color: var(--bv-green-dark);
	font-size: 0.9375rem;
	font-weight: 500;
}

.shop-grid .quick-buy-more:hover,
.shop-grid .quick-buy-more:focus {
	color: var(--bv-dark-grey);
}

/* Options side by side (one centred option for the stopper and
   voucher) */
.shop-grid .quick-buy-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.shop-grid .quick-buy-options:has(> :only-child) {
	grid-template-columns: minmax(0, 260px);
	justify-content: center;
}

/* Each option: label and price above its button */
.shop-grid .quick-buy-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	text-align: center;
}

.shop-grid .quick-buy-label {
	color: var(--bv-dark-grey);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.35;
}

.shop-grid .quick-buy-label strong {
	display: block;
	font-weight: 600;
	text-transform: uppercase;
}

/* Buttons: bright green with dark grey text and border (white on
   bright green fails contrast), full width of their column. Dark
   green on hover. */
.shop-grid .product-small .box-text .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	min-height: 0;
	margin: auto 0 0;
	padding: 0 10px;
	line-height: 1;
	background-color: var(--bv-green-bright) !important;
	border: 2px solid var(--bv-dark-grey) !important;
	border-radius: 0;
	color: var(--bv-dark-grey) !important;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.shop-grid .product-small .box-text .button:hover,
.shop-grid .product-small .box-text .button:focus {
	background-color: var(--bv-green-dark) !important;
	border-color: var(--bv-dark-grey) !important;
	color: var(--bv-white) !important;
	box-shadow: none !important;
}

/* Phones: cards and notice almost full width, and more compact
   cards so each fits on one screen. Empty title lines are dropped
   (one card per row, so nothing to line up), and spacing is tighter. */
@media (max-width: 549px) {
	.text.shop-notice {
		margin-left: -10px;
		margin-right: -10px;
		padding: 12px 15px;
	}
	.text.shop-notice p {
		font-size: 1rem;
	}
	.shop-grid > .product-small.col {
		padding-left: 5px;
		padding-right: 5px;
	}
	.shop-grid .product-small.box {
		padding: 15px 12px;
	}
	.shop-grid .product-small .title-wrapper {
		margin-bottom: 12px;
	}
	.shop-grid .wine-title {
		min-height: 0;
	}
	.shop-grid .wine-year {
		margin-top: 0;
	}
	.shop-grid .wine-year:empty,
	.shop-grid .wine-style:empty,
	.shop-grid .wine-type:empty {
		display: none !important;
	}
	.shop-grid .wine-name {
		min-height: 0;
		padding-bottom: 4px;
		font-size: 1.25rem;
	}
	.shop-grid .wine-style {
		margin-top: 4px;
	}
	.shop-grid .wine-type {
		min-height: 0;
		margin-top: 6px;
	}
	.shop-grid .product-small .box-image {
		max-width: none;
		margin: 0 0 12px;
	}
	.shop-grid .product-small .box-excerpt {
		margin-bottom: 12px;
		font-size: 0.875rem;
	}
	.shop-grid .box-text a.quick-buy-more {
		margin-bottom: 14px;
	}
	.shop-grid .quick-buy-options {
		gap: 8px;
	}
	.shop-grid .quick-buy-row {
		gap: 6px;
	}
	.shop-grid .product-small .box-text .button {
		height: 36px;
		font-size: 0.8125rem;
	}
}

/* Card text centred even when Flatsome wraps the title in an
   extra element */
.shop-grid .product-small .box-text > div:has(> .title-wrapper) > * {
	text-align: center !important;
}

/* Shop card buttons: the text can wrap onto two lines when a card is
   narrow (e.g. iPad landscape with Safari's sidebar open), instead of
   spilling out of the button. On wider cards it stays on one line. */
.shop-grid .product-small .box-text .button {
	height: auto !important;
	min-height: 40px;
	padding: 6px 6px !important;
	line-height: 1.2 !important;
	white-space: normal !important;
	overflow-wrap: anywhere;
}

/* Slightly smaller button text on narrower desktop widths */
@media (min-width: 850px) and (max-width: 1199px) {
	.shop-grid .product-small .box-text .button {
		font-size: 0.75rem !important;
		letter-spacing: 0 !important;
	}
	.shop-grid .quick-buy-options {
		gap: 8px;
	}
}

/* ---------------------------------------------------------------
 * PRODUCT LISTS
 * Related products / upsells ("You might like" on product pages)
 * and Products elements with the class "no-excerpt" (e.g. the
 * Products Carousel block): no descriptions, dark grey names.
 * ------------------------------------------------------------- */

/* No short description (lists included, as the browser moves them
   outside Flatsome's excerpt paragraph) */
.related .box-excerpt,
.upsells .box-excerpt,
.up-sells .box-excerpt,
.no-excerpt .box-excerpt,
.no-excerpt .box-text ul,
.no-excerpt .box-text ol {
	display: none !important;
}

/* Related products and upsells: no price, just the Buy button */
.related .price-wrapper,
.upsells .price-wrapper {
	display: none;
}

/* Product names in dark grey, green on hover */
.related .name a,
.upsells .name a,
.no-excerpt .name a {
	color: var(--bv-dark-grey);
	font-size: 1.125rem;
	font-weight: 400;
}

.related .name a:hover,
.related .name a:focus,
.upsells .name a:hover,
.upsells .name a:focus,
.no-excerpt .name a:hover,
.no-excerpt .name a:focus {
	color: var(--bv-green-dark);
}

/* Related products and upsells: equal-height cards, with the Buy
   buttons lined up along the bottom however long the name */
.related .product-small.col > .col-inner,
.upsells .product-small.col > .col-inner {
	height: 100%;
}

.related .product-small.box,
.upsells .product-small.box {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.related .product-small .box-text,
.upsells .product-small .box-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.related .product-small .name,
.upsells .product-small .name {
	margin-bottom: 15px;
}

/* Buy button (from the quick-buy snippet): like the shop buttons */
.related .box-text .button,
.upsells .box-text .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	height: 36px;
	min-height: 0;
	margin: auto 0 0 !important;
	padding: 0 38px;
	line-height: 1;
	background-color: var(--bv-green-bright) !important;
	border: 2px solid var(--bv-white) !important;
	border-radius: 0;
	color: var(--bv-white) !important;
	font-size: 1.0625rem;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.3s, color 0.3s;
}

.related .box-text .button:hover,
.related .box-text .button:focus,
.upsells .box-text .button:hover,
.upsells .box-text .button:focus {
	background-color: var(--bv-green-dark) !important;
	color: var(--bv-white) !important;
	box-shadow: none !important;
}

/* Phones: related products and upsells in one swipeable row, two
   cards at a time */
@media (max-width: 549px) {
	.related .row,
	.upsells .row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 10px;
	}

	.related .row > .product-small.col,
	.upsells .row > .product-small.col {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		scroll-snap-align: start;
	}
}

/* Sliders without arrows or dots (Products or Slider element with
   the class "no-slider-nav"); drag and swipe still work */
.no-slider-nav .flickity-prev-next-button,
.no-slider-nav .flickity-page-dots {
	display: none !important;
}

/* ---------------------------------------------------------------
 * PRODUCT PAGES (all products)
 * Custom product layouts: Wine (Wine and Accessories categories),
 * Experiences (see the next section); the gift voucher uses
 * Flatsome's default layout. Main description shown with the
 * [bv_product_description] shortcode.
 * ------------------------------------------------------------- */

/* Separators ("/", e.g. in breadcrumbs): Regular, like the rest of
   the text */
span.divider {
	font-weight: 400 !important;
}

/* Title styled like the shop cards (mixed case, weight 400, thin
   rule underneath) */
.single-product .product_title {
	display: inline-block;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bv-dark-grey);
	color: var(--bv-dark-grey);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.25;
}

/* No small grey line under the title */
.single-product .product_title + .is-divider {
	display: none;
}

/* Bottle and case prices on separate lines, with a gap between
   them (label semi-bold, price normal weight) */
.product-page-price .price-option {
	display: block;
	margin-bottom: 8px;
	color: var(--bv-dark-grey);
	font-size: 1.125rem;
	font-weight: 600;
}

.product-page-price .price-option:last-child {
	margin-bottom: 0;
}

.product-page-price .price-option .amount {
	font-weight: 400;
}

/* Main description: body text, Regular (400) 16px with 22px line
   spacing (Figma) */
.single-product .product-description {
	color: var(--bv-dark-grey);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.375;
}

/* Options: no "Clear" link (only two options) */
.single-product .reset_variations {
	display: none !important;
}

/* "Size" label hidden visually but kept for screen readers, so the
   dropdown lines up with the quantity box below */
.single-product .variations th.label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Options and quantity/button row: same width, so the left and
   right edges line up (button fills the space beside the quantity
   box). Flatsome's table spacing removed. */
.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations td {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 0;
	padding: 0;
	border: 0;
}

.single-product table.variations {
	margin-bottom: 15px;
}

.single-product .variations select {
	width: 100%;
	height: 44px;
	margin: 0;
	border: 1px solid var(--bv-grey-2);
	border-radius: 0;
	box-shadow: none;
	color: var(--bv-dark-grey);
	font-size: 1rem;
}

.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	gap: 10px;
	max-width: 320px;
}

.single-product .woocommerce-variation-add-to-cart .quantity {
	flex: 0 0 auto;
	margin: 0;
}

.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	flex: 1;
	margin: 0;
}

/* No repeated price (or dashed line) after choosing an option:
   both prices are already shown under the title */
.single-product .woocommerce-variation-price {
	display: none;
}

.single-product .single_variation_wrap .woocommerce-variation {
	border-top: 0;
}

/* Quantity box: square, same height as the button */
.single-product .quantity .minus,
.single-product .quantity .plus,
.single-product .quantity .qty {
	height: 44px;
	min-height: 44px;
	border-color: var(--bv-grey-2);
	border-radius: 0;
	box-shadow: none;
}

/* Add to basket / Book now: Figma "Green ADD TO BASKET" (bright
   green, white SemiBold 17px text). Kept 44px tall and with a dark
   grey border so it lines up with, and stands out like, the
   quantity box beside it. Dark green on hover. */
.single-product .single_add_to_cart_button {
	height: 44px;
	min-height: 44px;
	padding: 0 28px;
	line-height: 1;
	background-color: var(--bv-green-bright) !important;
	border: 2px solid var(--bv-dark-grey) !important;
	border-radius: 0;
	color: var(--bv-white) !important;
	font-size: 1.0625rem;
	font-weight: 600;
	text-transform: uppercase;
}

.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus {
	background-color: var(--bv-green-dark) !important;
	color: var(--bv-white) !important;
	box-shadow: none !important;
}

/* Mix-and-match line under Add to basket (Text element with the
   class "product-offer"); wines only, as the wine layout is also
   used for accessories */
.text.product-offer p {
	margin: 0 0 10px;
	color: var(--bv-green-dark);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.single-product .product:not(.product_cat-wine) .product-offer {
	display: none;
}

/* Wines: the tasting notes tab title looks like a centred section
   heading (green, bold, uppercase), with no Flatsome lines above
   or under it and no change on hover */
.product_cat-wine .woocommerce-tabs .nav {
	justify-content: center;
}

.product_cat-wine .woocommerce-tabs .nav > li > a,
.product_cat-wine .woocommerce-tabs .nav > li > a:hover,
.product_cat-wine .woocommerce-tabs .nav > li > a:focus {
	padding: 0;
	color: var(--bv-green-dark);
	font-size: 1.375rem;
	font-weight: 700;
	text-transform: uppercase;
}

.product_cat-wine .woocommerce-tabs .nav-line::before,
.product_cat-wine .woocommerce-tabs .nav-line > li > a::before {
	display: none;
}

/* No thin grey line above sections such as "You might like" (the
   double green dividers separate them) */
.single-product .product-section {
	border-top: 0;
}

/* Product Add-Ons: no automatic price after the label (the label
   itself says e.g. "Cheese Platter (£10 pp)") */
.single-product .wc-pao-addon-price {
	display: none;
}

/* Tasting notes (WooCommerce attributes table): fixed columns, so
   the values line up in the same place on every product however
   long or short they are. Labels take the first 30%. */
.single-product .woocommerce-product-attributes {
	width: 100%;
	table-layout: fixed;
}

.single-product .woocommerce-product-attributes th {
	width: 30%;
}

.single-product .woocommerce-product-attributes td {
	text-align: left;
}

/* Product gallery: zoom cursor instead of Flatsome's "grab" hand
   (clicking opens the image full size; swiping between images
   still works) */
.product-gallery-slider.flickity-enabled.is-draggable .flickity-viewport,
.product-gallery-slider.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
	cursor: zoom-in;
}

/* Product gallery: on touch screens (iPad, phones) switch off the
   hover-zoom layer, so taps reach the gallery (thumbnails and the
   full-size lightbox). Mouse users keep the hover zoom. */
@media (hover: none) and (pointer: coarse) {
	.product-gallery .zoomImg {
		display: none !important;
	}
}

/* Product gallery thumbnails: mark them as clickable, so Safari on
   iPad sends the tap through (it ignores taps on plain boxes) */
.product-thumbnails .col,
.product-thumbnails a,
.product-thumbnails img {
	cursor: pointer;
}
/* ---------------------------------------------------------------
 * GIFT VOUCHER (gift card plugin, category "wps_wgm_giftcard")
 * Uses Flatsome's default product layout.
 * ------------------------------------------------------------- */

/* Square text and message boxes like the live site (the quantity
   box keeps its own style) */
.product_cat-wps_wgm_giftcard form.cart input[type="text"]:not(.qty),
.product_cat-wps_wgm_giftcard form.cart input[type="email"],
.product_cat-wps_wgm_giftcard form.cart input[type="number"]:not(.qty),
.product_cat-wps_wgm_giftcard form.cart textarea {
	height: 42px;
	padding: 0 10px;
	background-color: var(--bv-white);
	border: 1px solid var(--bv-grey-3);
	border-radius: 0;
	box-shadow: none;
	color: var(--bv-dark-grey);
	font-size: 1rem;
}

.product_cat-wps_wgm_giftcard form.cart textarea {
	height: 64px;
	padding: 10px;
}

.product_cat-wps_wgm_giftcard form.cart input:not(.qty):focus,
.product_cat-wps_wgm_giftcard form.cart textarea:focus {
	border-color: var(--bv-green-dark);
	outline: none;
}

/* Delivery method: email is the only option, so the radio button,
   its label and the plugin's info line are hidden, and our own
   help text is added under the email box (as on the live site).
   Thin grey border instead of a shadow. */
.wps_wgm_delivery_method {
	box-shadow: none !important;
	border: 1px solid var(--bv-grey-3);
}

.wps_wgm_delivery_method #wps_wgm_to_email_send,
.wps_wgm_delivery_method .wps_wgm_method,
.wps_wgm_msg_info {
	display: none !important;
}

.wps_wgm_delivery_method #wps_wgm_to_email {
	margin-bottom: 10px;
}

.wps_wgm_delivery_method::after {
	content: "Please enter your own email address if you would prefer to forward voucher to recipient or print out.";
	display: block;
	color: var(--bv-dark-grey);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* The plugin's live preview box (From / To / Message), which
   Flatsome's gallery picks up as an extra, unstyled slide. The
   form's "Preview" link still shows the voucher before buying. */
.wps_wgm_wrapper_for_preview {
	display: none !important;
}

/* ---------------------------------------------------------------
 * EXPERIENCES PRODUCT PAGES
 * Product layouts assigned to the Experiences category (booking)
 * and to offline events (info only).
 * ------------------------------------------------------------- */

/* Title: large, centred and uppercase like the live site's
   booking pages, without the rule used on wine pages */
.product_cat-experiences .product_title {
	display: block;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 4rem;
	font-weight: 500;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
}

/* Price lines: bold text in the description shows as green and
   semi-bold */
.product_cat-experiences .product-description strong,
.product_cat-experiences .product-description b {
	color: var(--bv-green-dark);
	font-weight: 600;
}

/* Practical notes (short description): first line level with the
   top of the image, bullets in line with the text above */
.product_cat-experiences .product-short-description > :first-child {
	margin-top: 0;
}

.product_cat-experiences .product-short-description ul {
	margin: 0 0 0 1.25em;
	padding: 0;
}

.product_cat-experiences .product-short-description li {
	margin: 0 0 8px;
}

/* Booking box: one border around the whole booking area (calendar,
   person fields and add-ons such as the cheese platter) */
.product_cat-experiences form.cart {
	padding: 15px 15px 20px;
	border: 1px solid var(--bv-grey-3);
}

.single-product .wc-bookings-booking-form {
	padding: 0;
	border: 0;
}
/* Person fields: label left, square box right, on one line */
.single-product .wc-bookings-booking-form [class*="wc_bookings_field_persons"] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin: 0 0 15px;
}

.single-product .wc-bookings-booking-form [class*="wc_bookings_field_persons"] label {
	margin: 0;
	color: var(--bv-dark-grey);
	font-size: 1rem;
	font-weight: 400;
}

.single-product .wc-bookings-booking-form [class*="wc_bookings_field_persons"] input,
.single-product .wc-pao-addon-container .wc-pao-addon-field {
	flex-shrink: 0;
	width: 135px;
	height: 34px;
	margin: 0;
	padding: 0 6px;
	border: 1px solid var(--bv-dark-grey);
	border-radius: 0;
	box-shadow: none;
	color: var(--bv-dark-grey);
	font-size: 1rem;
}

/* Calendar: available dates in brand green with white text (past
   and unavailable dates keep Bookings' grey) */
.single-product .wc-bookings-date-picker .ui-datepicker td.bookable:not(.ui-state-disabled):not(.ui-datepicker-unselectable) a,
.single-product .wc-bookings-date-picker .ui-datepicker td.bookable:not(.ui-state-disabled):not(.ui-datepicker-unselectable) span {
	background-color: var(--bv-green-dark) !important;
	color: var(--bv-white) !important;
}

/* Hover and the chosen date: bright green with dark grey text */
.single-product .wc-bookings-date-picker .ui-datepicker td.bookable:not(.ui-state-disabled) a:hover,
.single-product .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-current-day a {
	background-color: var(--bv-green-bright) !important;
	color: var(--bv-dark-grey) !important;
}

/* Time slots (shown after choosing a date): three square boxes per
   row, chosen slot in brand green. A wrapping row (not a grid) so
   the "Choose a date…" message gets the full width. */
.single-product .wc-bookings-booking-form .block-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 15px 0 0;
	padding: 0;
}

.single-product .wc-bookings-booking-form .block-picker li {
	flex: 0 0 calc((100% - 16px) / 3);
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none;
}

/* Fully booked dates: grey like other unavailable dates
   (Bookings colours them red by default) */
.single-product .wc-bookings-date-picker .ui-datepicker td.fully_booked a,
.single-product .wc-bookings-date-picker .ui-datepicker td.fully_booked span {
	background-color: var(--bv-grey-4) !important;
	background-image: none !important;
	color: var(--bv-grey-2) !important;
}

/* The "Choose a date above…" message (an item without a time
   slot link) takes the full width */
.single-product .wc-bookings-booking-form .block-picker li:not(:has(a)) {
	flex-basis: 100%;
}

.single-product .wc-bookings-booking-form .block-picker li a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 40px;
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--bv-white) !important;
	border: 1px solid var(--bv-grey-2) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--bv-dark-grey) !important;
	font-size: 1rem;
}

.single-product .wc-bookings-booking-form .block-picker li a:hover {
	border-color: var(--bv-green-dark) !important;
	color: var(--bv-green-dark) !important;
}

.single-product .wc-bookings-booking-form .block-picker li a.selected {
	background-color: var(--bv-green-dark) !important;
	border-color: var(--bv-green-dark) !important;
	color: var(--bv-white) !important;
}

/* Cheese platter (Product Add-Ons): label left, box right */
.single-product .wc-pao-addon-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin: 20px 0 15px;
}

.single-product .wc-pao-addon-container .wc-pao-addon-name {
	margin: 0;
	color: var(--bv-dark-grey);
	font-size: 1rem;
	font-weight: 400;
}

.single-product .wc-pao-addon-container .wc-pao-addon-wrap {
	margin: 0;
}

@media (max-width: 849px) {
	.product_cat-experiences .product_title {
		font-size: 3rem;
	}
}

@media (max-width: 549px) {
	.product_cat-experiences .product_title {
		font-size: 2.25rem;
	}
}

/* Experience header banner ([bv_product_header]): the product name in
   the grey strip, styled like the other page titles */
.banner.title-banner .bv-banner-title {
	margin: 0;
	color: var(--bv-white);
	font-size: 3.25rem;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

@media (max-width: 549px) {
	.banner.title-banner .bv-banner-title {
		font-size: 2.25rem;
		line-height: 1;
	}
}

/* Title banners (and title sliders) on screens that aren't tall
   enough to show the whole banner – small laptops, iPad landscape:
   the banner fills the screen below the header, with the title bar
   raised from the bottom so it's always visible without scrolling.
   Taller screens keep the full banner height. */
@media (min-width: 850px) and (max-height: 950px) {
	.banner.title-banner,
	.title-slider .banner {
		height: calc(100vh - 130px) !important;
		height: calc(100svh - 130px) !important;
		min-height: 380px;
		padding-top: 0 !important;
	}
	.banner.title-banner .text-box {
		top: auto !important;
		bottom: 10% !important;
		transform: translateX(-50%) !important;
	}
}

/* While a banner is showing, the product's own H1 is hidden visually
   (kept for search engines and screen readers), so the name isn't
   shown twice */
.single-product:has(.bv-product-header) .product_title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Product pages on phones: less space between the header banner and
   the content (section-intro gives 75px, which is a lot on a small
   screen) */
@media (max-width: 549px) {
	.single-product .section-intro {
		padding-top: 35px !important;
	}
}

/* Product layouts: hide the empty paragraphs WordPress adds around
   the [bv_product_header] shortcode, which add extra space under
   the banner */
.custom-product-page > p:empty {
	display: none;
}

/* Product layouts with a header banner: the section that only holds
   the (visually hidden) product title takes up no space, so the
   content starts straight under the banner. The H1 stays in the
   page for Google and screen readers. */
.custom-product-page:has(.bv-product-header) > .section:has(.product_title) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.custom-product-page:has(.bv-product-header) > .section:has(.product_title) .col {
	padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------
 * PRICE ROUNDEL (Heidi's graphic at the top of the Tour + Tasting
 * description, with alt text). Swap the image on 1 January.
 * ------------------------------------------------------------- */
/* Tour + Tasting price roundel (Graphic at the top of the
   description, found by its file name, so it works for both the
   2026–27 and 2027 versions). 200px keeps the smallest text
   readable. Phones: centred above the text. Desktop: floats right
   of the opening paragraph. */
.single-product img[src*="tour-and-tasting-price"] {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
	margin: 0 auto 20px;
}

@media (min-width: 850px) {
	.single-product img[src*="tour-and-tasting-price"] {
		float: right;
		margin: 0 0 15px 25px;
	}
}

/* ---------------------------------------------------------------
 * EVENT GRID
 * Experiences page: Products element with the class "event-grid"
 * (tag "events-page", columns 3 / 2 / 1). Cards: date with a rule,
 * title, featured line(s), then the image with the button over it
 * (all added by the "Experiences page" snippet).
 * ------------------------------------------------------------- */

/* Equal-height cards with a thin green border */
.event-grid .product-small.col > .col-inner {
	height: 100%;
}

/* Text first, image underneath (the image comes first in the
   HTML, so column-reverse puts it at the bottom) */
.event-grid .product-small.box {
	display: flex;
	flex-direction: column-reverse;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--bv-green-bright);
	background-color: var(--bv-white);
}

.event-grid .product-small .box-text {
	flex: 1;
	padding: 0 0 15px !important;
	color: var(--bv-dark-grey);
	text-align: center;
}

/* Image: 8:9, as in the Figma */
.event-grid .product-small .box-image img {
	width: 100%;
	aspect-ratio: 8 / 9;
	object-fit: cover;
}

/* Date line with a thin rule underneath */
.event-grid .event-date {
	display: inline-block;
	margin: 0 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--bv-dark-grey);
	font-size: 1rem;
	font-weight: 400;
}

/* Title */
.event-grid .product-small .name a {
	color: var(--bv-dark-grey);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.3;
}

.event-grid .product-small .name a:hover,
.event-grid .product-small .name a:focus {
	color: var(--bv-green-dark);
}

/* Featured line(s): small uppercase */
.event-grid .event-featured {
	margin: 10px 0 0;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* No price, description or standard button on event cards */
.event-grid .price-wrapper,
.event-grid .box-excerpt,
.event-grid .box-text .button,
.event-grid .add-to-cart-button {
	display: none !important;
}

/* Button over the image, always visible on every screen size
   (Flatsome normally hides this area on phones and only shows
   it on hover) */
.event-grid .grid-tools,
.event-grid .image-tools.bottom {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	left: 0;
	right: 0;
	bottom: 15px;
	background: none !important;
	text-align: center;
}

.event-grid .event-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 140px;
	height: 36px !important;
	min-height: 0;
	margin: 0 !important;
	padding: 0 38px !important;
	line-height: 1 !important;
	background-color: var(--bv-white) !important;
	border: 2px solid var(--bv-dark-grey) !important;
	border-radius: 0;
	color: var(--bv-dark-grey) !important;
	font-size: 1.0625rem;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.3s, color 0.3s;
}

/* Figma "Grey hover": light grey, white border, dark grey text */
.event-grid .event-button:hover,
.event-grid .event-button:focus {
	background-color: var(--bv-grey-3) !important;
	border-color: var(--bv-white) !important;
	color: var(--bv-dark-grey) !important;
	box-shadow: none !important;
}

/* ---------------------------------------------------------------
 * Simple / legal pages (Column with the class "legal-text"):
 * Privacy Policy, Terms & Conditions, Delivery Policy etc.
 * H1 title in uppercase, quieter H2/H3 than the green section
 * headings, comfortable list spacing.
 * ------------------------------------------------------------- */

.legal-text h1 {
	margin: 0 0 30px;
	color: var(--bv-dark-grey);
	font-size: 3.75rem;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

/* ".section" added to beat the green section heading rule */
.section .legal-text h2 {
	margin: 40px 0 15px;
	color: var(--bv-dark-grey);
	font-size: 1.5rem;
	font-weight: 400;
	text-transform: none;
}

.legal-text h3 {
	margin: 30px 0 10px;
	color: var(--bv-dark-grey);
	font-size: 1.25rem;
	font-weight: 400;
	text-transform: none;
}

.legal-text p,
.legal-text li {
	color: var(--bv-dark-grey);
	line-height: 1.75;
}

.legal-text ul,
.legal-text ol {
	margin: 0 0 20px 1.25em;
}

.legal-text li {
	margin-bottom: 8px;
}

/* Lists inside lists */
.legal-text li ul,
.legal-text li ol {
	margin-top: 8px;
	margin-bottom: 0;
}

@media (max-width: 849px) {
	.legal-text h1 {
		font-size: 3rem;
	}
}

@media (max-width: 549px) {
	.legal-text h1 {
		font-size: 2.25rem;
	}
}

/* ---------------------------------------------------------------
 * Credits page (Section with the classes "section-intro credits"):
 * large dark heading, names as H3, dark links, no green
 * ------------------------------------------------------------- */

/* ".section.credits" beats the green section heading rule */
.section.credits h2 {
	margin: 0 0 30px;
	color: var(--bv-dark-grey);
	font-size: 2.25rem;
	font-weight: 700;
	text-transform: uppercase;
}

.credits h3 {
	margin: 0 0 5px;
	color: var(--bv-dark-grey);
	font-size: 1.25rem;
	font-weight: 600;
}

.credits p {
	margin: 0 0 30px;
}

.credits p a {
	color: var(--bv-dark-grey);
}

.credits p a:hover,
.credits p a:focus {
	color: var(--bv-green-dark);
}

@media (max-width: 549px) {
	.section.credits h2 {
		font-size: 1.75rem;
	}
}

/* ---------------------------------------------------------------
 * HOMEPAGE
 * Hero: Banner "home-hero" (video background; settings in the
 * Banner). Welcome band: Section "home-welcome" (#3F3F3F set in the
 * Section) with a Text element "home-welcome-text" (paragraph =
 * tagline, H1 = title). Experiences strip: Products element
 * "home-strip" (tag events-page, slider).
 * ------------------------------------------------------------- */

/* Welcome band (Text element "home-welcome-text": paragraph =
   tagline, H1 = title). Phones (Figma): 26px title, green line,
   16px tagline, centred. Desktop (Figma): tagline right-aligned,
   2px green vertical line 69px tall, 22px title on the right. */
.home-welcome-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.home-welcome-text h1 {
	order: 1;
	width: 100%;
	margin: 0 0 19px;
	padding-bottom: 19px;
	border-bottom: 1px solid var(--bv-green-mid);
	color: var(--bv-white);
	font-size: 1.625rem;
	font-weight: 500;
	line-height: 1.15;
	text-wrap: balance;
	text-transform: uppercase;
}

.home-welcome-text p {
	order: 2;
	margin: 0;
	color: var(--bv-white);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
	text-transform: uppercase;
}

@media (min-width: 850px) {
	.home-welcome-text {
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		text-align: right;
	}
	.home-welcome-text p {
		font-size: min(1rem, 3.75vw);
		white-space: nowrap;
	}
	.home-welcome-text h1 {
		order: 2;
		flex: 0 0 auto;
		width: auto;
		margin: 0 0 0 20px;
		padding: 23px 0 23px 15px;
		border-bottom: 0;
		border-left: 2px solid var(--bv-green-mid);
		font-size: 1.375rem;
		text-align: left;
		white-space: nowrap;
	}
}

/* Welcome band on small laptops / iPad landscape (850–1279px):
   slightly smaller text, so it isn't squashed next to the medals */
@media (min-width: 850px) and (max-width: 1279px) {
	.home-welcome-text p {
		font-size: 0.875rem;
	}
	.home-welcome-text h1 {
		font-size: 1.25rem;
	}
}

/* TEMPORARY (medals hidden until the correct ones arrive):
   hide the empty medal column and centre the welcome text.
   Delete this block when the medals go back. */
@media (min-width: 550px) {
	.home-welcome .col:not(:has(.home-welcome-text)) {
		display: none;
	}
	.home-welcome .col:has(.home-welcome-text) {
		flex-basis: 100%;
		max-width: 100%;
	}
	.home-welcome-text {
		justify-content: center;
	}
}

/* Experiences strip: tall images (8:9) with a small uppercase
   caption; no price, description or buttons */
.home-strip .product-small .box-image {
	position: relative;
	aspect-ratio: 8 / 9;
	overflow: hidden;
}

.home-strip .product-small .box-image > div:not([class*="image-tools"]),
.home-strip .product-small .box-image > div:not([class*="image-tools"]) > a {
	position: absolute !important;
	inset: 0;
	height: 100% !important;
	padding: 0 !important;
}

.home-strip .product-small .box-image img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.home-strip .box-excerpt,
.home-strip .price-wrapper,
.home-strip .add-to-cart-button,
.home-strip .box-text .button {
	display: none !important;
}

.home-strip .name a {
	color: var(--bv-dark-grey);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Products slider with one card on phones, centred (add the class
   "centre-mobile" to the Products element). Each slide fills the
   width, and the card sits in the middle at a sensible size. */
@media (max-width: 549px) {
	.centre-mobile .product-small.col {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: 100% !important;
	}
	.centre-mobile .product-small.col > .col-inner {
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}
	/* Remove the row's side margins and the card's side padding, so
	   each slide is exactly the screen width and the card centres */
	.centre-mobile.row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.centre-mobile .product-small.col {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Product carousel captions: small uppercase (homepage Figma).
   Remove if About us should keep mixed case. */
.no-excerpt .name a {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Dark grey button with a white border (Button element with the
   class "button-dark"), e.g. SHOP over the homepage hero */
.button.button-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	min-height: 0;
	padding: 0 38px;
	line-height: 1;
	background-color: var(--bv-dark-grey) !important;
	border: 2px solid var(--bv-white) !important;
	border-radius: 0;
	color: var(--bv-white) !important;
	font-size: 1.0625rem;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
}

.button.button-dark:hover,
.button.button-dark:focus {
	background-color: var(--bv-grey-2) !important;
	box-shadow: none !important;
}

/* Bright green button with a white border (Button element with the
   class "button-bright"), e.g. TOURS + TASTINGS over the homepage hero */
.button.button-bright {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	min-height: 0;
	padding: 0 38px;
	line-height: 1;
	background-color: var(--bv-green-bright) !important;
	border: 2px solid var(--bv-white) !important;
	border-radius: 0;
	color: var(--bv-white) !important;
	font-size: 1.0625rem;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
}

.button.button-bright:hover,
.button.button-bright:focus {
	background-color: var(--bv-green-hover) !important;
	box-shadow: none !important;
}

/* Caption over a hero photo (Text element with the class
   "hero-caption"): white, uppercase, slight shadow for legibility */
.hero-caption,
.hero-caption p {
	margin: 0;
	color: var(--bv-white);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Hero slides with a caption: Flatsome's banner overlay (set any
   Overlay colour in the Banner's Background settings) becomes a
   soft dark gradient over the bottom half, multiplied, so the white
   caption reads clearly (designer feedback) */
.banner:has(.hero-caption) .overlay {
	top: auto !important;
	height: 60% !important;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.75) 100%) !important;
	mix-blend-mode: multiply;
	opacity: 1 !important;
	z-index: 1;
	visibility: visible !important;
}

/* Keep the caption and button above the gradient */
.banner:has(.hero-caption) .banner-layers {
	z-index: 2;
}

/* Embedded video (Vimeo/YouTube iframe inside a div with the class
   "video-embed"): full width, 16:9 */
.video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--bv-black);
}

.video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Embedded map (Google Maps iframe inside a div with the class
   "map-embed"): full width of its column, 4:3 */
.map-embed {
	position: relative;
	aspect-ratio: 4 / 3;
	background-color: var(--bv-grey-4);
}

.map-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Self-hosted video (video element with the class "video-file"):
   full width of its column, keeps its shape */
.video-file {
	display: block;
	width: 100%;
	height: auto;
}

/* Experiences strip (Products slider with the class "home-strip"):
   title only (no description, practical notes lists, price or
   buttons), and no arrows or dots (drag/swipe still works) */
.home-strip .product-small .box-text > *:not(.title-wrapper) {
	display: none !important;
}

/* ---------------------------------------------------------------
 * Google reviews (Trustindex "Widgets for Google Reviews"), styled
 * like the Figma: grey cards with the name, five green stars and
 * the review in quotation marks. Widget shortcode in a Row with
 * the class "reviews"; "Read more reviews…" link in a Text element
 * with the class "reviews-more".
 * Widget settings: grid, 5-star only, full text if available
 * (the widget sets the text height in its HTML, which CSS can't
 * override, so long reviews keep a "Read more" link).
 * Selectors are long on purpose, to outrank Trustindex's own CSS.
 * ------------------------------------------------------------- */

/* Site font throughout (the widget brings its own) */
#wrapper .ti-reviews-container,
#wrapper .ti-reviews-container * {
	font-family: inherit !important;
}

/* Reviews: full text shown (widget set to "Scroll"; this removes the
   scroll box's height limit and scrollbar), no "Read more" link */
#wrapper .ti-reviews-container .ti-review-item .ti-review-content,
#wrapper .ti-reviews-container .ti-review-item .ti-review-content * {
	max-height: none !important;
	height: auto !important;
	overflow: visible !important;
	-webkit-line-clamp: unset !important;
	line-clamp: unset !important;
}

#wrapper .ti-reviews-container .ti-review-item .ti-read-more {
	display: none !important;
}

/* Show the first three reviews on tablet and desktop (one row),
   six on phones (swipeable row) */
@media (min-width: 550px) {
	#wrapper .ti-reviews-container .ti-reviews-container-wrapper .ti-review-item:nth-child(n+4) {
		display: none !important;
	}
}

@media (max-width: 549px) {
	#wrapper .ti-reviews-container .ti-reviews-container-wrapper .ti-review-item:nth-child(n+7) {
		display: none !important;
	}
}

/* "Read more" / "Read less" on long reviews (added by the
   "Reviews: Read more on long reviews" snippet) */
#wrapper .ti-reviews-container .bv-read-more {
	display: inline-block;
	min-height: 0;
	margin: 10px 0 0;
	padding: 0;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--bv-dark-grey) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	line-height: 1.4;
	text-decoration: underline !important;
	text-transform: none !important;
	letter-spacing: 0;
	cursor: pointer;
}

#wrapper .ti-reviews-container .bv-read-more:hover,
#wrapper .ti-reviews-container .bv-read-more:focus {
	color: var(--bv-green-dark) !important;
}

/* Cards: flat grey panels, equal height, generous padding */
#wrapper .ti-reviews-container .ti-reviews-container-wrapper .ti-review-item > .ti-inner {
	height: 100%;
	padding: 30px !important;
	background: var(--bv-review-bg) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Name */
#wrapper .ti-reviews-container .ti-review-item .ti-profile-details .ti-name {
	color: var(--bv-dark-grey) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
}

/* Not in the Figma: date and Google logo */
#wrapper .ti-reviews-container .ti-review-item .ti-profile-details .ti-date,
#wrapper .ti-reviews-container .ti-review-item .ti-review-header .ti-platform-icon {
	display: none !important;
}

/* Stars: five green stars instead of the widget's yellow ones
   (only 5-star reviews are shown) */
#wrapper .ti-reviews-container .ti-review-item .ti-stars .ti-star {
	display: none !important;
}

#wrapper .ti-reviews-container .ti-review-item .ti-stars::before {
	content: "★★★★★";
	display: block;
	margin: 12px 0 15px;
	color: var(--bv-green-mid);
	font-size: 1.75rem;
	letter-spacing: 2px;
	line-height: 1;
}

/* Review text: Regular (400) 16px, 21px line spacing (Figma), in
   quotation marks */
#wrapper .ti-reviews-container .ti-review-item .ti-review-content {
	color: var(--bv-dark-grey) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.3125 !important;
}

#wrapper .ti-reviews-container .ti-review-item .ti-review-content::before {
	content: "\201C";
}

#wrapper .ti-reviews-container .ti-review-item .ti-review-content::after {
	content: "\201D";
}

/* "Read more" on long reviews: small, underlined, dark grey */
#wrapper .ti-reviews-container .ti-review-item .ti-read-more .ti-read-more-active {
	color: var(--bv-dark-grey) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	text-decoration: underline !important;
}

/* "Read more reviews…" link: right-aligned, SemiBold 16px,
   underlined, as in the Figma */
.text.reviews-more {
	text-align: right;
}

.text.reviews-more a {
	color: var(--bv-dark-grey);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: underline;
}

.text.reviews-more a:hover,
.text.reviews-more a:focus {
	color: var(--bv-green-dark);
}

/* Phones: reviews in one swipeable row, about 250px per card
   (homepage Figma), instead of stacked */
@media (max-width: 549px) {
	#wrapper .ti-reviews-container .ti-reviews-container-wrapper {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 15px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 10px;
	}
	#wrapper .ti-reviews-container .ti-reviews-container-wrapper .ti-review-item {
		flex: 0 0 250px !important;
		width: 250px !important;
		max-width: none !important;
		margin: 0 15px 0 0 !important;
		scroll-snap-align: start;
	}
}
/* ---------------------------------------------------------------
 * PHONES: spacing and text from the mobile Figma
 * ------------------------------------------------------------- */
@media (max-width: 549px) {
	/* Less space between the title banner and the first section */
	.section-intro {
		padding-top: 30px !important;
	}

		/* Title strip: 45px above the bottom of the photo, as in the
	   Figma (overrides the banner's own Position Y on phones) */
	.banner.title-banner .text-box {
		top: auto !important;
		bottom: 45px !important;
		transform: translateX(-50%) !important;
	}

	/* Signpost cards: 25px from the screen edges, 16px apart */
	.signpost-cards {
		padding-left: 10px;
		padding-right: 10px;
	}

	.signpost-cards > .col {
		padding-bottom: 16px;
	}

	/* Body text: 22px line spacing */
	.section .text p,
	.section .text li {
		line-height: 1.375;
	}

	/* Shadow caption: 17px */
	.caption.caption-upper,
	.caption.caption-upper p {
		font-size: 1.0625rem;
		line-height: 1.3;
	}
}

/* ---------------------------------------------------------------
 * PHONES: title slider strip, dots and arrows as in the Figma
 * ------------------------------------------------------------- */
@media (max-width: 549px) {
	/* Title strip: exactly 54px deep, title centred in it */
	.banner.title-banner .text-box-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 54px;
		padding: 0 20px;
	}

	.banner.title-banner h1 {
		line-height: 1;
	}

	/* Dots: just under the strip, on the photo */
	.title-slider .flickity-page-dots {
		bottom: 21px;
		line-height: 0;
	}

	.title-slider .flickity-page-dots .dot {
		width: 10px;
		height: 10px;
		margin: 0 2.5px;
		background-color: var(--bv-grey-3);
		border: 1px solid var(--bv-white);
		border-radius: 50%;
		opacity: 1;
	}

	/* Current slide: white */
	.title-slider .flickity-page-dots .dot.is-selected {
		background-color: var(--bv-white);
	}

	/* Arrows: small pale circle, thin grey chevron (31px in the Figma) */
	.title-slider .flickity-prev-next-button,
	.title-slider .flickity-prev-next-button:hover,
	.title-slider .flickity-prev-next-button:focus {
		width: 31px;
		height: 31px;
		background-color: rgba(255, 255, 255, 0.85) !important;
		background-size: 14px !important;
	}

	.title-slider .flickity-prev-next-button.next {
		right: 13px;
	}

	.title-slider .flickity-prev-next-button.previous {
		left: 13px;
	}
}

/* Title slider arrows: fade in just after the page loads, so the
   brief half-styled version isn't seen while the slider sets up.
   (Uses filter rather than opacity, as the arrow rules above fix
   opacity at 1.) */
@keyframes bv-arrows-in {
	from { filter: opacity(0); }
	to { filter: opacity(1); }
}

.title-slider .flickity-prev-next-button {
	animation: bv-arrows-in 0.3s ease 0.6s both;
}

/* Visitors who prefer less motion: show the arrows straight away */
@media (prefers-reduced-motion: reduce) {
	.title-slider .flickity-prev-next-button {
		animation: none;
	}
}

/* Phones: show the title slider arrows (Flatsome hides all slider
   arrows under 550px with ".slider-wrapper .flickity-prev-next-button").
   Covers the class being on the slider wrapper or inside it. */
@media screen and (max-width: 549px) {
	.slider-wrapper.title-slider .flickity-prev-next-button,
	.slider-wrapper .title-slider .flickity-prev-next-button {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		top: 279px !important;
		transform: none !important;
		bottom: auto !important;
		width: 31px !important;
		height: 31px !important;
		padding: 0 !important;
		min-height: 0 !important;
	}

	/* No left arrow on the first slide, as in the Figma */
	.slider-wrapper.title-slider .flickity-prev-next-button.previous:disabled,
	.slider-wrapper .title-slider .flickity-prev-next-button.previous:disabled {
		display: none !important;
	}
}

/* ---------------------------------------------------------------
 * Title strip near the bottom of the photo on tablet and desktop
 * (about 7% up, as on the live site), whatever each banner's
 * Position Y is set to. Short screens: see the rule under
 * EXPERIENCES PRODUCT PAGES (title strip 10% up).
 * ------------------------------------------------------------- */
@media (min-width: 550px) {
	.banner.title-banner .text-box {
		top: auto !important;
		bottom: 7% !important;
		transform: translateX(-50%) !important;
	}
}
/* Product carousel ("no-excerpt" Products element): the middle 60%
   of each square photo (full height, sides cropped), keeping the
   centred bottle */
.no-excerpt .product-small .box-image {
	position: relative;
	aspect-ratio: 3 / 5;
	overflow: hidden;
}

.no-excerpt .product-small .box-image > div:not([class*="image-tools"]),
.no-excerpt .product-small .box-image > div:not([class*="image-tools"]) > a,
.no-excerpt .product-small .box-image > a {
	position: absolute !important;
	inset: 0;
	height: 100% !important;
	padding: 0 !important;
}

.no-excerpt .product-small .box-image img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

/* ---------------------------------------------------------------
 * POP-UP (snippet "Pop-ups"): centred image over a dark background,
 * × in the top right. Desktop image up to 800px wide,
 * mobile image up to 389px.
 * ------------------------------------------------------------- */
.bv-popup {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s;
}

.bv-popup[hidden] {
	display: none;
}

.bv-popup.is-open {
	opacity: 1;
}

.bv-popup__box {
	position: relative;
	width: 100%;
	max-width: 800px;
}

.bv-popup__link img {
	display: block;
	width: 100%;
	height: auto;
}

.bv-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.9) !important;
	border: 0;
	border-radius: 50%;
	color: var(--bv-dark-grey) !important;
	font-size: 1.5rem;
	line-height: 36px;
	cursor: pointer;
}

.bv-popup__close:hover,
.bv-popup__close:focus {
	background: var(--bv-white) !important;
}

@media (max-width: 549px) {
	.bv-popup__box {
		max-width: 389px;
	}
}

/* WHITE FRAME OPTION (not confirmed yet). To use it, remove the
   comment markers around this block. It frames the image in white
   (25px, 12px on phones) with a plain × in the corner, like the
   old site.

.bv-popup__box {
	padding: 25px;
	background-color: var(--bv-white);
}

.bv-popup__close {
	top: 0;
	right: 0;
	width: 25px;
	height: 25px;
	background: none !important;
	border-radius: 0;
	font-size: 1.25rem;
	line-height: 25px;
}

.bv-popup__close:hover,
.bv-popup__close:focus {
	background: none !important;
	color: var(--bv-green-dark) !important;
}

@media (max-width: 549px) {
	.bv-popup__box {
		padding: 12px;
	}
}
*/

@media (prefers-reduced-motion: reduce) {
	.bv-popup {
		transition: none;
	}
}

/* ---------------------------------------------------------------
 * Contact form (Contact Form 7, Plan your visit): square fields,
 * labels above, name and email side by side on desktop, bright
 * green Send button
 * ------------------------------------------------------------- */
.wpcf7 label {
	display: block;
	margin-bottom: 15px;
	color: var(--bv-dark-grey);
	font-size: 0.9375rem;
	font-weight: 500;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	margin: 4px 0 0;
	padding: 8px 12px;
	border: 1px solid var(--bv-grey-2);
	border-radius: 0;
	box-shadow: none;
	color: var(--bv-dark-grey);
	font-size: 1rem;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: var(--bv-green-dark);
}

/* Name and email side by side on tablet and desktop */
.wpcf7 label input,
.wpcf7 label textarea {
	display: block;
}

@media (min-width: 550px) {
	.wpcf7 .cf-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}

.wpcf7 input[type="submit"] {
	height: 40px;
	min-height: 0;
	margin: 5px 0 0;
	padding: 0 38px;
	background-color: var(--bv-green-bright) !important;
	border: 2px solid var(--bv-dark-grey) !important;
	border-radius: 0;
	color: var(--bv-dark-grey) !important;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus {
	background-color: var(--bv-green-dark) !important;
	color: var(--bv-white) !important;
}

.wpcf7 .cf-note {
	margin: 12px 0 0;
	color: var(--bv-grey-1);
	font-size: 0.8125rem;
}

/* Form messages ("Thank you, your message has been sent", errors):
   site colours, square corners */
.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 15px;
	border: 2px solid var(--bv-green-dark);
	border-radius: 0;
	color: var(--bv-dark-grey);
	font-size: 0.9375rem;
}

/* Sent successfully: dark green border (beats Contact Form 7's own
   "sent" green) */
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--bv-green-dark);
}

/* Missing or invalid fields, or a failed send */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--bv-pink);
}

/* The small "please fill in this field" note under a field */
.wpcf7 .wpcf7-not-valid-tip {
	color: var(--bv-pink);
	font-size: 0.8125rem;
}

/* Short intro line at the top of a page (Text element "intro-text") */
.intro-text p {
	color: var(--bv-dark-grey);
	font-size: 1.125rem;
}