/*
	Theme Name: VEREDO (Hello Elementor Child)
	Theme URI: https://veredo.eu
	Description: Custom VEREDO caviar house theme, built on Hello Elementor for use with Elementor Pro.
	Author: VEREDO
	Template: hello-elementor
	Version: 1.0.0
	Text Domain: hello-elementor-child
*/

/* ==========================================================================
   VEREDO Brand Design Tokens
   Mirrors the CSS custom properties from the original Next.js storefront
   (src/styles/globals.css) so Elementor global colors/typography and any
   custom CSS in this theme stay pixel-matched to the source design.
   ========================================================================== */

:root {
	--veredo-black: #0a0a0a;       /* bg primary */
	--veredo-anthracite: #1a1a1a;  /* bg secondary */
	--veredo-charcoal: #2a2a2a;    /* border / muted surfaces */
	--veredo-ivory: #c0c0c0;       /* text primary */
	--veredo-silver: #9a9a9a;      /* text secondary */
	--veredo-cream: #fffef5;
	--veredo-gold: #b8a070;        /* accent */

	--veredo-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--veredo-font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

/* Type scale reference (values are set directly per-element in Elementor,
   not via custom property — every heading below is already set to these):
     hero (homepage H1 only): 2.5rem  -> 4rem     @768px
     h1   (page titles):      2rem    -> 2.75rem  @768px
     h2   (section headings): 1.5rem  -> 1.875rem @768px
     h3   (card/subsection):  1.125rem (no step)
     logo ("VEREDO" wordmark): 1.5rem -> 1.75rem  @768px
     ui   (nav/buttons/footer labels): 0.8125rem */

body {
	background-color: var(--veredo-black);
	color: var(--veredo-ivory);
	font-family: var(--veredo-font-sans);
}

/* Accessibility: Elementor Pro form fields need a real <label> so screen
   readers get an accessible name (placeholder text alone isn't reliable —
   it disappears on input and isn't consistently exposed by every browser/AT
   pairing). Both form fields on the site (Founders Selection request-access,
   footer newsletter) now carry a proper field_label; this keeps the label
   in the accessibility tree while preserving the existing placeholder-only
   visual design — no layout change. */
.elementor-widget-form label.elementor-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Radio/checkbox inputs sit flush against their label text everywhere
   (WooCommerce variations, checkout payment/shipping methods, forms) —
   give every one consistent breathing room from its label. */
input[type="radio"],
input[type="checkbox"] {
	margin-right: 0.5em;
	margin-left: 0;
	vertical-align: middle;
}
label input[type="radio"],
label input[type="checkbox"] {
	margin-right: 0.5em;
}

/* Buttons — matches .btn-primary in the original storefront */
.veredo-btn-primary,
.elementor-button.veredo-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	color: var(--veredo-ivory) !important;
	border: 1px solid var(--veredo-ivory);
	padding: 0.9em 2.2em;
	font-family: var(--veredo-font-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	transition: background-color 0.3s ease, color 0.3s ease;
	border-radius: 0;
}
.veredo-btn-primary:hover {
	background-color: var(--veredo-ivory);
	color: var(--veredo-black) !important;
}

/* Badge — matches .badge */
.veredo-badge {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--veredo-charcoal);
	color: var(--veredo-silver);
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.25rem 0.75rem;
}

/* Container widths — matches .container-wide / .container-narrow */
.veredo-container-wide {
	max-width: 80rem; /* max-w-7xl */
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
.veredo-container-narrow {
	max-width: 48rem; /* max-w-3xl */
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* Fallback product tile (no photo) — matches ProductCard.tsx empty state */
.veredo-no-photo {
	background-color: var(--veredo-charcoal);
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
}
.veredo-no-photo span {
	font-family: var(--veredo-font-serif);
	font-size: 2.5rem;
	color: rgba(154, 154, 154, 0.3);
}

/* WooCommerce dark-theme overrides so default templates (shop archive,
   cart, checkout, my account) match the brand until/unless replaced by
   dedicated Elementor Pro Theme Builder templates. */
.woocommerce,
.woocommerce-page {
	color: var(--veredo-ivory);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce a {
	font-family: var(--veredo-font-serif);
	color: var(--veredo-ivory);
}
.woocommerce span.price,
.woocommerce ul.products li.product .price {
	color: rgba(192, 192, 192, 0.7);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--veredo-ivory);
}
.woocommerce ul.products li.product a img {
	background: var(--veredo-charcoal);
}
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
	background-color: transparent;
	color: var(--veredo-ivory);
	border: 1px solid var(--veredo-ivory);
	border-radius: 0;
	font-family: var(--veredo-font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.8125rem;
	padding: 0.9em 2.2em;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
	background-color: var(--veredo-ivory);
	color: var(--veredo-black);
}
.woocommerce-additional-information table.shop_attributes,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border-color: var(--veredo-charcoal);
	color: var(--veredo-ivory);
	background: transparent;
}

/* Cart / Checkout / My Account — shared dark theming for the pages built
   directly from WooCommerce's own core widgets & templates. */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
	border-color: var(--veredo-charcoal);
	border-radius: 0;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--veredo-charcoal);
	color: var(--veredo-ivory);
}
.woocommerce table.shop_table thead th {
	font-family: var(--veredo-font-sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--veredo-silver);
}
.woocommerce td.product-name a,
.woocommerce .cart_item .product-name a {
	color: var(--veredo-ivory);
	font-family: var(--veredo-font-serif);
}
.woocommerce .quantity input.qty,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select {
	background: transparent;
	border: 1px solid var(--veredo-charcoal);
	border-radius: 0;
	color: var(--veredo-ivory);
	padding: 0.65em 0.9em;
}
.woocommerce .quantity input.qty:focus,
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	border-color: var(--veredo-ivory);
	outline: none;
}
.woocommerce form .form-row label {
	color: var(--veredo-silver);
	font-size: 0.8125rem;
}
.woocommerce-cart-form__cart-item .product-remove a,
.woocommerce a.remove {
	color: var(--veredo-silver) !important;
	background: transparent !important;
}
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
	background: var(--veredo-anthracite);
	border: 1px solid var(--veredo-charcoal);
	padding: 1.5rem;
}
.woocommerce-cart .cart_totals table,
.woocommerce-checkout #order_review table {
	border: none;
}
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td,
.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td {
	border-color: var(--veredo-charcoal);
}
.woocommerce-checkout .woocommerce-checkout-payment,
.woocommerce-checkout ul.payment_methods {
	background: var(--veredo-anthracite);
	border: 1px solid var(--veredo-charcoal) !important;
}
.woocommerce-checkout ul.payment_methods li {
	border-color: var(--veredo-charcoal) !important;
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--veredo-charcoal) !important;
	color: var(--veredo-ivory);
}
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--veredo-charcoal) !important;
}
.woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--veredo-charcoal);
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--veredo-charcoal);
}
.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.9em 1.2em;
	font-family: var(--veredo-font-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--veredo-silver);
	transition: color 0.3s ease, background-color 0.3s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
	color: var(--veredo-ivory);
	background: var(--veredo-charcoal);
}
.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--veredo-ivory);
	background: var(--veredo-charcoal);
}
.woocommerce-MyAccount-content table.my_account_orders {
	border-color: var(--veredo-charcoal);
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background: var(--veredo-anthracite) !important;
	border-top-color: var(--veredo-gold) !important;
	color: var(--veredo-ivory) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--veredo-gold) !important;
}
.select2-container--default .select2-selection--single {
	background: transparent;
	border: 1px solid var(--veredo-charcoal);
	border-radius: 0;
	height: auto;
	padding: 0.4em 0;
}
.select2-container--default .select2-selection__rendered {
	color: var(--veredo-ivory);
	line-height: normal;
}
.select2-dropdown {
	background: var(--veredo-anthracite);
	border-color: var(--veredo-charcoal);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--veredo-charcoal);
}
.select2-container--default .select2-results__option {
	color: var(--veredo-ivory);
}

/* ==========================================================================
   Language switcher (Polylang)
   pll_the_languages() returns bare <li> elements; the wrapping
   <ul class="veredo-lang-switcher"> comes from veredo_lang_switcher_shortcode()
   in functions.php. Before that the header rendered two unstyled text links
   with nothing but a collapsed space between them. Treated here as one
   segmented control — a single bordered unit, active language in gold — so it
   reads as a deliberate control next to the cart and account icons.
   ========================================================================== */
.veredo-lang-switcher {
	display: inline-flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--veredo-charcoal);
	line-height: 1;
}
.veredo-lang-switcher .lang-item {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.veredo-lang-switcher .lang-item + .lang-item {
	border-left: 1px solid var(--veredo-charcoal);
}
.veredo-lang-switcher .lang-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.25rem;
	padding: 0 0.7rem;
	font-family: var(--veredo-font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--veredo-silver);
	background-color: transparent;
	transition: color 0.3s ease, background-color 0.3s ease;
}
.veredo-lang-switcher .lang-item a:hover {
	color: var(--veredo-ivory);
	background-color: var(--veredo-charcoal);
}
.veredo-lang-switcher .lang-item a:focus-visible {
	color: var(--veredo-ivory);
	outline: 1px solid var(--veredo-gold);
	outline-offset: -1px;
}
.veredo-lang-switcher .current-lang a,
.veredo-lang-switcher .current-lang a:hover {
	color: var(--veredo-gold);
	background-color: var(--veredo-charcoal);
	cursor: default;
}

/* ==========================================================================
   Header — the right-hand cluster (language switcher, account, cart)

   The header container is a `1fr auto 1fr` grid — logo | burger | this
   cluster — and the cluster itself is a nowrap flex row aligned to the end.

   Every Elementor container inherits `.e-con.e-flex { --width: 100% }`, so
   the (currently empty) my-account container went into that flex row asking
   for the full width of the right-hand track. With the row already over
   budget, the browser shrank every item proportionally — including the cart
   widget, whose box ended up far narrower than the toggle button inside it.
   That button can't shrink, so it spilled out to the right of its own box:
   on a 360-390px phone the bag icon landed past the edge of the screen.

   Fix is two-part: size the cluster's children to their content instead of
   to the whole row, and on phones drop the cart subtotal so the toggle is a
   44x44 icon target that fits the track it's actually given.

   The `header.elementor-69` prefix is not decoration — Elementor prints
   post-69.css (the header's own generated CSS) *after* this stylesheet, so
   merely matching its `.elementor-69 .elementor-element.elementor-element-*`
   specificity would lose the tie. The element selector breaks it.
   ========================================================================== */

/* Content-sized, never shrinking. If the cluster ever does run out of room
   again, a flex-end row overflows towards its start — so the cart stays put
   at the right edge instead of being pushed off-screen. */
header.elementor-69 .elementor-element.elementor-element-eb7cadd > * {
	width: auto;
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	/* The "lei 0,00" subtotal is what made the toggle ~126px wide — more than
	   the ~118px the right-hand track can offer on a 360px phone. Phones get
	   the bag icon and its count bubble only. */
	header.elementor-69 .elementor-element.elementor-element-e04c5e4 .elementor-menu-cart__toggle .elementor-button-text {
		display: none;
	}

	/* 12px around the 20px icon = a 44px tap target, and the button's box then
	   sits flush inside the header's own 16px side padding. */
	header.elementor-69 .elementor-element.elementor-element-e04c5e4 {
		--toggle-icon-padding: 12px;
	}
}

/* ==========================================================================
   Single product — spacing between the variation options and the text and
   controls around them.

   Left to WooCommerce core + the Elementor widget CSS, these sit almost flush:
   the "Anulează" reset link touches the option <select>, the attribute label
   column has no horizontal padding, quantity and Add-to-cart are 4px apart
   (WooCommerce's float default), and SKU / Category run together as bare
   inline spans separated only by a collapsed whitespace character.
   ========================================================================== */

/* Attribute rows ("Greutate" → dropdown). */
.woocommerce div.product form.cart table.variations th.label {
	padding-right: 1.5rem;
	vertical-align: middle;
}
.woocommerce div.product form.cart table.variations td.value {
	vertical-align: middle;
}
.woocommerce div.product form.cart table.variations select {
	max-width: 100%;
}

/* "Anulează" is a distinct action, not part of the option list — separate it
   from the dropdown and give it its own quieter treatment. */
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-left: 1.25rem;
	vertical-align: middle;
	font-family: var(--veredo-font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--veredo-silver);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}
.woocommerce div.product form.cart .reset_variations:hover,
.woocommerce div.product form.cart .reset_variations:focus {
	color: var(--veredo-ivory);
}

/* Stock line revealed with the chosen variation. */
.woocommerce div.product .single_variation .woocommerce-variation-availability p.stock {
	margin: 0 0 1rem;
	font-family: var(--veredo-font-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--veredo-silver);
}

/* Quantity + Add to cart: replace WooCommerce's 4px float gap with a real
   row so the two controls read as one action group at any width. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}
/* Core's clearfix pseudo-elements would otherwise become flex items and add
   two phantom gaps to that row. */
.woocommerce div.product form.cart:not(.variations_form)::before,
.woocommerce div.product form.cart:not(.variations_form)::after {
	display: none;
}
.woocommerce div.product form.cart div.quantity {
	float: none;
	margin: 0;
}
.woocommerce div.product form.cart div.quantity input.qty {
	width: 5rem;
	min-height: 2.75rem;
	text-align: center;
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
	min-height: 2.75rem;
	margin: 0;
}

/* SKU / Category meta line. */
.woocommerce div.product .product_meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 2rem;
}
.woocommerce div.product .product_meta > span {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
}
.woocommerce div.product .product_meta .detail-label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--veredo-silver);
}
.woocommerce div.product .product_meta .sku,
.woocommerce div.product .product_meta .detail-content,
.woocommerce div.product .product_meta .detail-content a {
	color: var(--veredo-ivory);
}

/* Product tabs. WooCommerce draws the tab chrome — rounded "shoulders" either
   side of each tab and the rule beneath the row — as pseudo-elements in a pale
   grey the dark restyle never reached, so they survive as light notches on
   black. Drop them and space the tabs on a flat baseline instead. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.25rem;
	margin: 0;
	padding: 0;
	overflow: visible;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.85rem 0;
	font-weight: 500;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	box-shadow: inset 0 -1px 0 var(--veredo-ivory);
}

/* ==========================================================================
   Small-screen optimisation

   WooCommerce ships woocommerce-smallscreen.css (≤768px) which already stacks
   the cart/checkout/order tables and the two-column form sets, so this section
   deliberately does not re-implement that — it covers what that file doesn't:
   tap-target sizes, the iOS focus-zoom trap, the product page's own layout,
   and dark-theme polish on the stacked tables.
   ========================================================================== */

/* Nothing should be able to push the viewport sideways. `clip` rather than
   `hidden` so no scroll container is created around the fixed header. */
html,
body {
	overflow-x: clip;
}

@media (max-width: 767px) {
	/* iOS Safari zooms the page whenever a focused field is under 16px — every
	   WooCommerce field here is 13px. Lift them to 16px on phones only. */
	.woocommerce input[type="text"],
	.woocommerce input[type="email"],
	.woocommerce input[type="tel"],
	.woocommerce input[type="password"],
	.woocommerce input[type="number"],
	.woocommerce input[type="search"],
	.woocommerce textarea,
	.woocommerce select,
	.elementor-field-textual {
		font-size: 16px;
	}

	/* Comfortable tap targets on everything people actually press. */
	.woocommerce button.button,
	.woocommerce a.button,
	.woocommerce input.button,
	.woocommerce #respond input#submit,
	.veredo-btn-primary,
	.elementor-button {
		min-height: 2.75rem;
	}
	.woocommerce-MyAccount-navigation li a {
		padding-top: 1em;
		padding-bottom: 1em;
	}
	.veredo-lang-switcher .lang-item a {
		min-width: 2.75rem;
		min-height: 2.75rem;
	}

	/* Variation picker: label above a full-width dropdown instead of a
	   two-column table squeezed into ~340px. */
	.woocommerce div.product form.cart table.variations,
	.woocommerce div.product form.cart table.variations tbody,
	.woocommerce div.product form.cart table.variations tr,
	.woocommerce div.product form.cart table.variations th,
	.woocommerce div.product form.cart table.variations td {
		display: block;
		width: 100%;
	}
	.woocommerce div.product form.cart table.variations th.label {
		padding: 0 0 0.4rem;
	}
	.woocommerce div.product form.cart table.variations td.value {
		padding: 0;
	}
	.woocommerce div.product form.cart table.variations select {
		width: 100%;
		min-width: 0;
		min-height: 2.75rem;
	}
	.woocommerce div.product form.cart .reset_variations {
		margin: 0.75rem 0 0;
	}

	/* Keep quantity and Add-to-cart on one row, button taking the rest. */
	.woocommerce div.product form.cart button.single_add_to_cart_button {
		flex: 1 1 auto;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	/* Tabs and the attributes table inside them. */
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		gap: 0 1.25rem;
	}
	.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
	.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
		display: block;
		width: 100%;
		padding: 0.6rem 0;
	}
	.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
		border-top: none;
		padding-top: 0;
	}

	/* Meta line stacks rather than wrapping mid-pair. */
	.woocommerce div.product .product_meta {
		gap: 0.6rem 1.5rem;
	}
}

/* WooCommerce's stacked-table view (≤768px) labels each cell from its
   data-title attribute; style those labels for the dark theme. */
@media (max-width: 768px) {
	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		font-family: var(--veredo-font-sans);
		font-size: 0.75rem;
		font-weight: 500;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--veredo-silver);
	}
	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		padding: 0.9rem 1rem;
	}
	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		border-bottom: 1px solid var(--veredo-charcoal);
	}
	.woocommerce-cart .cart-collaterals .cart_totals,
	.woocommerce-checkout #order_review {
		padding: 1.25rem;
	}
}

/* ==========================================================================
   Product cards — one card design, everywhere

   Product grids come from three places on this site: the Elementor "Archive
   Products" widget (/shop/ and the category archives), a plain [products]
   shortcode on /selectia-noastra/, and the related-products widget under a
   single product. Each of those used to carry its own copy of the card design
   in the widget's Elementor custom CSS, so the same six products came out
   different on every page — four columns here and three there, a faded price
   here and a full-strength one there, different space above the title. The
   design now lives here only, keyed off `ul.products`; the widgets carry no
   card CSS of their own any more. The homepage's hand-built featured card
   opts into the same rules through `.veredo-product-card` (further down), so
   there is still exactly one card design to change.

   Where a rule has to out-rank Elementor's kit-level WooCommerce typography
   (`.elementor-widget-wc-archive-products.elementor-wc-products ul.products
   li.product .price`, which would otherwise set the price in the heading
   serif), it is written through `a.woocommerce-loop-product__link` — the
   image, title and price genuinely sit inside that link, and going through it
   buys the extra element the cascade needs without reaching for !important.
   ========================================================================== */
:root {
	--veredo-card-ratio: 4 / 5;    /* portrait tile, matches the thumbnail crop */
	--veredo-card-title-gap: 1rem; /* image -> title */
	--veredo-card-price-gap: 0.5rem; /* title -> price (minimum) */
}

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* !important: Elementor prints the archive widget's default 20px/40px gaps
	   at a specificity no theme selector can reach. The two gaps are kept close
	   to each other on purpose — the old 16px/64px pairing read as four loose
	   columns rather than one grid. */
	column-gap: clamp(1.25rem, 2.2vw, 2rem) !important;
	row-gap: clamp(2.25rem, 3.2vw, 3rem) !important;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* WooCommerce's float clearfix would take up two cells of that grid. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none;
}
@media (min-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: center;
}

/* The whole tile is a single link, so it is also the card's flex column: that
   lets the price sit on `margin-top: auto` and line up across a row without
   padding every title out to a fixed two-line height — which is what used to
   leave a hole under each short product name. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	text-decoration: none;
	color: inherit;
}

/* --- Media ---------------------------------------------------------------
   `.veredo-card-media` is a wrapper the theme adds around the loop thumbnail
   (see veredo_loop_product_thumbnail() in functions.php) purely so the hover
   zoom has something to be clipped by. Without it the scaled image bleeds
   down over the title. The homepage card's Elementor image widget carries the
   same class, which is what lets both share these rules. */
.veredo-card-media {
	/* flex, not block, purely to blockify the image: Elementor's image widget
	   forces `display:inline-block` on it at a specificity this rule would have
	   to fight, and an inline image leaves a baseline gap under the tile. */
	display: flex;
	width: 100%;
	overflow: hidden;
	/* Same charcoal as the branded placeholder tile's ground, so an image that
	   hasn't decoded yet doesn't flash a different tone into the grid. */
	background-color: var(--veredo-charcoal);
}
.woocommerce ul.products li.product .veredo-card-media img,
.woocommerce ul.products li.product img,
.veredo-product-card .veredo-card-media img {
	display: block;
	width: 100%;
	margin: 0;
	aspect-ratio: var(--veredo-card-ratio);
	object-fit: cover;
	transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.woocommerce ul.products li.product:hover .veredo-card-media img,
.veredo-product-card:hover .veredo-card-media img {
	transform: scale(1.045);
}
/* Products still awaiting photography fall back to the branded placeholder
   (media library #32) — a 4:5 charcoal tile with a faint serif V, already cut
   to the card's ratio, so it just covers like any other photo. It holds no
   subject to zoom into, so it sits still on hover instead of drifting. */
.woocommerce ul.products li.product img.woocommerce-placeholder {
	border: none;
}
.woocommerce ul.products li.product:hover .veredo-card-media img.woocommerce-placeholder,
.woocommerce ul.products li.product:hover img.woocommerce-placeholder {
	transform: none;
}

/* --- Title ---------------------------------------------------------------- */
.woocommerce ul.products li.product a.woocommerce-loop-product__link .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.veredo-product-card .veredo-card-title .elementor-heading-title {
	font-family: var(--veredo-font-serif);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: var(--veredo-ivory);
	margin: var(--veredo-card-title-gap) 0 0;
	padding: 0;
	transition: color 0.35s ease;
}
@media (min-width: 768px) {
	.woocommerce ul.products li.product a.woocommerce-loop-product__link .woocommerce-loop-product__title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.veredo-product-card .veredo-card-title .elementor-heading-title {
		font-size: 1.125rem;
	}
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.veredo-product-card:hover .veredo-card-title .elementor-heading-title {
	color: var(--veredo-cream);
}

/* --- Price ---------------------------------------------------------------
   `margin-top: auto` is what aligns prices across a row; the padding is the
   minimum breathing room under a title that already fills the card. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link .price,
.woocommerce ul.products li.product .price,
.veredo-product-card .veredo-card-price {
	display: block;
	margin: 0;
	margin-top: auto;
	padding-top: var(--veredo-card-price-gap);
	font-family: var(--veredo-font-sans);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.06em;
	/* Full-strength ivory: the price is the most scannable thing on the card,
	   and the faded grey it used to sit at was the weakest contrast here. */
	color: var(--veredo-ivory);
}
.woocommerce ul.products li.product .price del,
.veredo-product-card .veredo-card-price del {
	opacity: 0.5;
	margin-right: 0.4em;
}
.woocommerce ul.products li.product .price ins,
.veredo-product-card .veredo-card-price ins {
	text-decoration: none;
	font-weight: 500;
}
/* The whole card is already a link to the product; WooCommerce's per-card
   button (which for every variable product here only re-links to that same
   page) would put a second, competing call to action under each one. */
.woocommerce ul.products li.product .button {
	display: none;
}
/* Sale flash: flush into the tile corner, no chrome of its own. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link .onsale,
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	z-index: 2;
	margin: 0;
	padding: 0.4rem 0.7rem;
	min-height: 0;
	min-width: 0;
	border: none;
	border-radius: 0;
	background-color: rgba(10, 10, 10, 0.85);
	color: var(--veredo-gold);
	font-family: var(--veredo-font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- The homepage featured card ------------------------------------------
   Built out of Elementor widgets rather than a WooCommerce loop, so it needs
   the container rules the `li.product` selectors above give the loop cards.
   Everything that carries actual design (media, title, price) is shared. */
.veredo-product-card {
	text-align: center;
	text-decoration: none;
}
/* Species line — the one part of this card the loop cards have no equivalent
   for. Sits between title and price as a quiet caption. */
.veredo-product-card .veredo-card-sub {
	font-family: var(--veredo-font-sans);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.5;
	color: var(--veredo-silver);
	margin-top: 0.35rem;
	font-style: italic;
}

/* --- Archive toolbar (result count + sorting) and pagination -------------- */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin: 0 0 1.5rem;
	font-family: var(--veredo-font-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--veredo-silver);
}
.woocommerce .woocommerce-result-count {
	padding-top: 0.75rem;
}
.woocommerce .woocommerce-ordering select {
	padding: 0.5em 0.7em;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--veredo-silver);
	border-color: rgba(42, 42, 42, 0.8);
}
/* Hairline under the toolbar, echoing the header's bottom border. Scoped to
   the sorting form so the shortcode grid on /selectia-noastra/ — which has no
   toolbar above it — doesn't get a stray rule floating over it. */
.woocommerce form.woocommerce-ordering + ul.products {
	border-top: 1px solid rgba(42, 42, 42, 0.6);
	padding-top: clamp(2rem, 3.5vw, 2.75rem);
}
.woocommerce nav.woocommerce-pagination {
	text-align: center;
	margin-top: 4rem;
}
.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	gap: 0.5rem;
	border: none;
	margin: 0;
	padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: none;
	margin: 0;
	overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 0.5rem;
	border: 1px solid var(--veredo-charcoal);
	border-radius: 0;
	background: transparent;
	font-family: var(--veredo-font-sans);
	font-size: 0.8125rem;
	color: var(--veredo-silver);
	transition: color 0.3s ease, border-color 0.3s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	color: var(--veredo-ivory);
	border-color: var(--veredo-ivory);
	background: transparent;
}

@media (max-width: 767px) {
	:root {
		--veredo-card-title-gap: 0.85rem;
	}
	.woocommerce ul.products li.product a.woocommerce-loop-product__link .woocommerce-loop-product__title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 1rem;
	}
	.woocommerce ul.products li.product a.woocommerce-loop-product__link .price,
	.woocommerce ul.products li.product .price {
		font-size: 0.6875rem;
	}
	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering {
		float: none;
		margin-bottom: 1rem;
	}
	.woocommerce .woocommerce-result-count {
		padding-top: 0;
	}
	.woocommerce .woocommerce-ordering select {
		width: 100%;
	}
}