/*
 * Voltage Cosmetics — component styles.
 *
 * Tokens come from theme.json as --wp--preset--* / --wp--custom--* variables.
 * They are aliased to shorter --vc-* names once here so component rules stay
 * readable and a token rename is a one-line change.
 *
 * The Figma file is desktop-only (1600px artboards, absolute positioning), so every
 * layout below is authored mobile-first and reflows into the designed desktop
 * composition at the breakpoints noted per component.
 */

:root {
	--vc-gold: var(--wp--preset--color--primary, #b67d23);
	--vc-gold-light: var(--wp--preset--color--primary-light, #d6ae5e);
	--vc-dark: var(--wp--preset--color--dark, #32373b);
	--vc-black: var(--wp--preset--color--contrast, #000);
	--vc-text: var(--wp--preset--color--contrast-body, #212529);
	--vc-nav: var(--wp--preset--color--contrast-nav, #3a4e54);
	--vc-muted: var(--wp--preset--color--muted, #3e3e3e);
	--vc-muted-2: var(--wp--preset--color--muted-2, #888);
	--vc-muted-3: var(--wp--preset--color--muted-3, #999);
	--vc-border: var(--wp--preset--color--border, #e4e4e4);
	--vc-surface-alt: var(--wp--preset--color--surface-alt, #f7f7f7);
	--vc-white: #fff;

	--vc-font-display: var(--wp--preset--font-family--display);
	--vc-font-body: var(--wp--preset--font-family--body);
	--vc-font-ui: var(--wp--preset--font-family--ui);

	--vc-container: var(--wp--custom--container, 1140px);
	--vc-gutter: var(--wp--custom--gutter, 19px);
	--vc-gutter-lg: var(--wp--custom--gutter-lg, 33px);
	--vc-radius-sm: var(--wp--custom--radius--sm, 5px);
	--vc-radius-card: var(--wp--custom--radius--card, 20px);

	--vc-shadow-card: 0 4px 14px 0 rgba(0, 0, 0, 0.16);
	--vc-shadow-btn: 0 4px 2px rgba(0, 0, 0, 0.25);

	--vc-header-h: 80px;
	--vc-edge: clamp(1rem, 5vw, 2.5rem);
	/* Shared reading column for institutional pages and article bodies. Fixed px on
	 * purpose: ch resolves against each element's own font, so "72ch" on a 40px
	 * heading was 1645px and the page title escaped the column. */
	--vc-prose: 680px;
}

/* The mobile artboard gives the logo noticeably more room than a typical compact
 * header — the brand mark is 67px tall at 360px wide. */
@media (min-width: 782px) {
	:root {
		--vc-header-h: 98px;
	}
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Reserve the intrinsic ratio of every product/editorial image so a slow image
 * can never shift the layout it sits in. */
img {
	block-size: auto;
	max-inline-size: 100%;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible,
:where(textarea):focus-visible,
:where([tabindex]):focus-visible {
	outline: 2px solid var(--vc-gold);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	inline-size: auto;
	block-size: auto;
	background: var(--vc-white);
	color: var(--vc-black);
	box-shadow: var(--vc-shadow-card);
}

.vc-container {
	inline-size: 100%;
	max-inline-size: var(--vc-container);
	margin-inline: auto;
	padding-inline: var(--vc-edge);
}

/* -------------------------------------------------------------------------
 * Buttons — three sizes exist in the design (hero 186x47, card 157x39, PDP 211x48).
 * Widths are treated as minimums so Spanish labels, which run longer than the
 * placeholder copy, never overflow their box.
 * ---------------------------------------------------------------------- */

.vc-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-inline-size: 186px;
	/* The designed width is a minimum, not a floor that may overflow: without this a
	 * button inside a narrow card pushes the whole page sideways. */
	max-inline-size: 100%;
	min-block-size: 47px;
	padding: 0 var(--wp--custom--button--padding-inline, 19px);
	border: 0;
	border-radius: var(--vc-radius-sm);
	background: var(--vc-gold);
	color: var(--vc-white);
	font-family: var(--vc-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.vc-btn:hover,
.vc-btn:focus-visible,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--vc-dark);
	color: var(--vc-white);
	text-decoration: none;
}

/* The design applies a drop-shadow filter to buttons. Kept off the primary CTA on
 * hover so the state change reads as a colour shift rather than a lift. */
.vc-btn--shadow {
	filter: drop-shadow(var(--vc-shadow-btn));
}

.vc-btn--outline {
	min-inline-size: 157px;
	min-block-size: 39px;
	background: var(--vc-white);
	border: 1px solid var(--vc-gold);
	color: var(--vc-gold);
}

.vc-btn--outline:hover,
.vc-btn--outline:focus-visible {
	background: var(--vc-gold);
	color: var(--vc-white);
}

.vc-btn--white {
	background: var(--vc-white);
	color: var(--vc-black);
}

.vc-btn--white:hover,
.vc-btn--white:focus-visible {
	background: var(--vc-dark);
	color: var(--vc-white);
}

.vc-btn--cta {
	min-inline-size: 211px;
	min-block-size: 48px;
	justify-content: flex-start;
	gap: 1rem;
	font-family: var(--vc-font-ui);
	text-transform: none;
}

.vc-btn__chevron {
	flex: 0 0 auto;
	inline-size: 6px;
	block-size: 12px;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.vc-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: var(--vc-white);
	border-block-end: 1px solid var(--vc-border);
}

.vc-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-block-size: var(--vc-header-h);
	max-inline-size: var(--vc-container);
	margin-inline: auto;
	padding-inline: var(--vc-edge);
	/* Without this a flex item refuses to shrink below its content width, which is how
	 * the nav pushed the action icons past the viewport edge. */
	min-inline-size: 0;
}

.vc-header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-inline-end: auto;
}

/* The current mark is wide (3.7:1) — kept shorter than the old boxed logo so the
 * logo, eight nav items and three icons all fit inside the 1140px container. */
.vc-header__logo img,
.vc-header__logo svg {
	inline-size: auto;
	block-size: 46px;
}

@media (min-width: 782px) {
	.vc-header__logo img,
	.vc-header__logo svg {
		block-size: 56px;
	}
}

.vc-nav {
	display: none;
}

/*
 * The nav appears at 1140px, not 1024px.
 *
 * The design's nav row is 1078px wide next to a 191px logo and three action icons —
 * about 1270px of content. Revealing it at 1024px made the header 1088px wide inside a
 * 1024px viewport, so every page scrolled sideways. Between 1024px and 1140px the
 * drawer is the correct affordance.
 */
@media (min-width: 1140px) {
	.vc-nav {
		display: block;
		min-inline-size: 0;
	}

	.vc-nav ul {
		display: flex;
		align-items: center;
		/* Eight items plus three action icons share the row now; tighter steps keep
		 * "Blog" clear of the search icon at every width. */
		gap: clamp(0.5rem, 1vw, 1rem);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vc-nav a {
		color: var(--vc-nav);
		font-family: var(--vc-font-body);
		font-size: 0.875rem;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	}

	.vc-nav {
		margin-inline-end: 0.75rem;
	}

	.vc-nav a:hover,
	.vc-nav a[aria-current] {
		color: var(--vc-gold);
		text-decoration: none;
	}
}

.vc-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(0.35rem, 1.2vw, 1.25rem);
	flex: 0 0 auto;
}

.vc-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vc-gold);
	cursor: pointer;
}

.vc-icon-btn svg {
	inline-size: 22px;
	block-size: 22px;
	fill: currentColor;
}

.vc-cart-count {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 2px;
	min-inline-size: 18px;
	padding: 0 4px;
	border-radius: 9999px;
	background: var(--vc-dark);
	color: var(--vc-white);
	font-family: var(--vc-font-ui);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.vc-cart-count[hidden] {
	display: none;
}

/* Mobile navigation drawer. Uses the popover attribute so it needs no JavaScript
 * for open/close, focus trapping or Escape handling. */
.vc-nav-toggle {
	display: inline-flex;
}

/* Must match the nav breakpoint exactly, or there is a band with neither nav nor
 * toggle and the site becomes unnavigable. */
@media (min-width: 1140px) {
	.vc-nav-toggle {
		display: none;
	}
}

.vc-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	inline-size: min(88vw, 380px);
	max-block-size: 100dvh;
	padding: 1.5rem var(--vc-edge) 3rem;
	border: 0;
	margin: 0;
	overflow-y: auto;
	background: var(--vc-white);
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
}

.vc-drawer:not(:popover-open) {
	display: none;
}

.vc-drawer::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

.vc-drawer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-drawer li + li {
	border-block-start: 1px solid var(--vc-border);
}

.vc-drawer a {
	display: block;
	padding: 0.9rem 0;
	color: var(--vc-nav);
	font-family: var(--vc-font-body);
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.vc-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-block-size: clamp(320px, 46vw, 486px);
	overflow: hidden;
	isolation: isolate;
	background: var(--vc-dark);
}

.vc-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.vc-hero__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* Scrim so white display type stays legible over any photograph, which the design
 * relies on but does not draw. */
.vc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0) 85%);
}

.vc-hero__inner {
	inline-size: 100%;
	max-inline-size: var(--vc-container);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--vc-edge);
}

.vc-hero__title {
	max-inline-size: 22ch;
	margin: 0;
	color: var(--vc-white);
	font-family: var(--vc-font-display);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 600;
	line-height: 1.05;
	text-shadow: var(--wp--custom--hero-text-shadow, 0 4px 4px rgba(0, 0, 0, 0.25));
}

.vc-hero__subtitle {
	max-inline-size: 44ch;
	margin: 1.25rem 0 0;
	color: var(--vc-white);
	font-family: var(--vc-font-body);
	font-size: clamp(1.125rem, 2.4vw, 1.875rem);
	font-weight: 600;
	line-height: 1.33;
}

.vc-hero__cta {
	margin-block-start: 1.75rem;
}

/* Blog band: same treatment, lower profile than the front-page hero. */
.vc-hero--compact {
	min-block-size: clamp(260px, 28vw, 380px);
}

/* -------------------------------------------------------------------------
 * Sections
 * ---------------------------------------------------------------------- */

.vc-section {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.vc-section--tight {
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.vc-section__head {
	max-inline-size: 62ch;
	margin-inline: auto;
	margin-block-end: clamp(1.75rem, 4vw, 2.75rem);
	text-align: center;
}

.vc-section__title {
	margin: 0;
	color: var(--vc-black);
	font-family: var(--vc-font-display);
	font-size: var(--wp--preset--font-size--h2);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}

.vc-section__intro {
	margin: 0.85rem 0 0;
	color: var(--vc-muted);
	font-family: var(--vc-font-body);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.45;
}

/* -------------------------------------------------------------------------
 * Category pills
 * ---------------------------------------------------------------------- */

.vc-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem clamp(0.75rem, 3vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 186px;
	min-block-size: 47px;
	padding: 0 1.25rem;
	border: 1px solid var(--vc-black);
	border-radius: var(--vc-radius-sm);
	background: var(--vc-white);
	color: var(--vc-dark);
	font-family: var(--vc-font-body);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* The dark pill is the selected state in the design; reused for hover since no
 * hover state was drawn. */
.vc-pill:hover,
.vc-pill:focus-visible,
.vc-pill[aria-current="page"] {
	background: var(--vc-dark);
	border-color: var(--vc-dark);
	color: var(--vc-white);
	text-decoration: none;
}

/*
 * Mobile: the Figma mobile artboard stacks the five pills vertically at full width
 * (285px wide, 47px tall, ~10px apart), with the current category shown in the dark
 * fill. A horizontal scrolling strip would have been the more common pattern, but it
 * is not what was designed — and stacked full-width rows are easier to hit anyway.
 */
@media (max-width: 700px) {
	.vc-pills {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 10px;
	}

	.vc-pill {
		inline-size: 100%;
		min-inline-size: 0;
		min-block-size: 47px;
	}
}

/* -------------------------------------------------------------------------
 * Product card
 *
 * The design lays the card out horizontally: image on the left, text column on the
 * right, 356x369. That works from 480px up; below it the card stacks.
 * ---------------------------------------------------------------------- */

/*
 * Column count comes from available width, never from a fixed count. The design's
 * card is 356px wide; forcing 4 fixed columns squeezed each card to ~250px, the text
 * column inside it to ~90px, and every title wrapped one word per line — which is
 * exactly how the first staging build looked. auto-fill with a 300px floor gives
 * 3 columns at the 1140px container and degrades to 2 and 1 without ever producing
 * a sliver.
 */
.vc-products,
.vc-products--4 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vc-gutter-lg) var(--vc-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.vc-products,
	.vc-products--4 {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

/*
 * Row and column alignment inside the loops.
 *
 * WordPress marks the post-template <ul> as `is-layout-flow` and injects a
 * margin-block-start into every sibling but the first. Inside a grid that margin
 * shifted item 2+ down ~25px, so the first card of each row sat higher than the
 * rest — the misalignment visible on the blog archive. The :where() WP uses has
 * zero specificity, so a plain rule removes it.
 */
.vc-products > * + *,
.vc-posts > * + * {
	margin-block-start: 0;
}

/* Every cell must fill its grid track so all cards in a row share the same height
 * and their pinned elements (button, "leer más") land on the same baseline. */
.vc-products > li,
.vc-posts > li {
	min-inline-size: 0;
	margin: 0;
}

.vc-products > li > .vc-card {
	block-size: 100%;
}

.vc-card {
	position: relative;
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 0.75rem;
	/* stretch, not start: the body must fill the row so its auto margin can pin the
	 * buy button to the card's bottom edge. */
	align-items: stretch;
	padding: 1rem;
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-card);
	background: var(--vc-white);
	box-shadow: var(--vc-shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.vc-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.vc-card__media {
	display: block;
	/* The WooCommerce product-image block positions its img absolutely; without a
	 * positioned media box it resolved against .vc-card (position:relative) and the
	 * photo spilled over the text column. */
	position: relative;
	/* start, not stretch: stretched to the row height (324px), aspect-ratio derived
	 * the width from it (259px) and the image overflowed its 120px column across the
	 * text. Anchoring to the column width makes aspect-ratio derive height instead. */
	align-self: start;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: calc(var(--vc-radius-card) - 8px);
}

.vc-card__media img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* Neutralise the block's own wrappers so they never add height of their own. */
.vc-card__media .wc-block-components-product-image,
.vc-card__media a {
	position: static;
	display: block;
	margin: 0;
}

.vc-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	/* No percentage min-height here: min-block-size:100% inside an auto-height grid
	 * row resolves circularly and made the body (and its button) overflow the card's
	 * border. The stretch on the parent grid does the same job correctly. */
	min-inline-size: 0;
}

.vc-card__title {
	/* Three lines shown, three lines reserved: with every title box identical, the
	 * price row lands at the same height in every card of the row. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-block-size: calc(3 * 1.25em);
	margin: 0;
	/* Clear of the wishlist heart pinned to the card's top-right corner. */
	padding-inline-end: 1.75rem;
	font-family: var(--vc-font-display);
	/* Fluid between 17px and 22px so the designed size survives wide cards without
	 * strangling narrow ones. */
	font-size: clamp(1.0625rem, 0.9rem + 0.7vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.vc-card__title a {
	color: var(--vc-black);
	text-decoration: none;
}

.vc-card__title a:hover {
	color: var(--vc-gold);
	text-decoration: none;
}

.vc-card__prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--vc-font-display);
}

.vc-card__price {
	color: var(--vc-gold-light);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 700;
	line-height: 1;
}

.vc-card__price-was {
	color: var(--vc-muted-2);
	font-size: 1.25rem;
	font-weight: 300;
	text-decoration: line-through;
}

/* WooCommerce renders prices as `<del>` + `<ins>` via get_price_html(), not with the
 * theme's own classes, so the design's gold-current / struck-grey treatment is mapped
 * onto that markup here rather than fighting it in PHP. */
.vc-card__prices .woocommerce-Price-amount,
.vc-card__prices ins,
.vc-card__prices > span:only-child {
	color: var(--vc-gold-light);
	font-family: var(--vc-font-display);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.vc-card__prices del,
.vc-card__prices del .woocommerce-Price-amount {
	order: -1;
	color: var(--vc-muted-2);
	font-size: 1.25rem;
	font-weight: 300;
	text-decoration: line-through;
}

.vc-card__prices ins {
	background: none;
}

/* The same mapping on the product page, where the design uses the darker gold and
 * Poppins rather than the display face. */
.vc-product__prices .woocommerce-Price-amount,
.vc-product__prices ins,
.vc-product__prices > span:only-child {
	color: var(--vc-gold);
	font-family: var(--vc-font-ui);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.vc-product__prices ins {
	background: none;
}

.vc-product__prices del,
.vc-product__prices del .woocommerce-Price-amount {
	order: -1;
	color: var(--vc-muted-3);
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: line-through;
}

.vc-card__meta {
	/* Descriptions vary wildly in length; three clamped lines keep every card's
	 * text block the same height so the buttons stay level. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: var(--vc-black);
	font-family: var(--vc-font-body);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.4;
}

.vc-card__actions {
	margin-block-start: auto;
	padding-block-start: 0.75rem;
}

/*
 * The product-button block puts any className on its WRAPPER div, not on the anchor —
 * giving the wrapper .vc-btn produced a white pill with a second gold button inside,
 * spilling out of the card. Style the inner control the block actually renders.
 */
.vc-card__actions .wp-block-woocommerce-product-button {
	margin: 0;
}

.vc-card__actions .wc-block-components-product-button {
	margin: 0;
}

.vc-card__actions .wc-block-components-product-button__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 157px;
	max-inline-size: 100%;
	min-block-size: 39px;
	padding: 0 1.25rem;
	border: 1px solid var(--vc-gold);
	border-radius: var(--vc-radius-sm);
	background: var(--vc-white);
	color: var(--vc-gold);
	font-family: var(--vc-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.vc-card__actions .wc-block-components-product-button__button:hover {
	background: var(--vc-gold);
	color: var(--vc-white);
}

/* The sale badge WooCommerce renders inside the image link duplicates ours. */
.vc-card .wc-block-components-product-sale-badge {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	padding: 0.25rem 0.5rem;
	border-radius: var(--vc-radius-sm);
	background: var(--vc-gold);
	color: var(--vc-white);
	font-family: var(--vc-font-ui);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
}

.vc-card__wishlist {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-end: 6px;
	z-index: 2;
	display: grid;
	place-items: center;
	/* 44px is the accessibility floor for a touch target. The glyph stays at the
	 * designed 16px; only the hit area grows. */
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vc-muted-2);
	cursor: pointer;
}

.vc-card__wishlist[aria-pressed="true"] {
	color: var(--vc-gold);
}

.vc-badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 2;
	padding: 0.25rem 0.5rem;
	border-radius: var(--vc-radius-sm);
	background: var(--vc-gold);
	color: var(--vc-white);
	font-family: var(--vc-font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
}

/*
 * The mobile artboard keeps the card's horizontal composition at 360px — image column
 * on the left, text on the right — rather than stacking it. The image column narrows
 * instead. Verified against the 282x366 mobile Cardwine in the Figma file.
 */
@media (max-width: 479px) {
	.vc-card {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 0.6rem;
		padding: 0.85rem;
	}

	.vc-card__title {
		font-size: 1.125rem;
	}

	.vc-card__price {
		font-size: 1.5rem;
	}

	.vc-card__actions .vc-btn {
		inline-size: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Horizontal carousels — CSS scroll-snap instead of a slider library.
 * ---------------------------------------------------------------------- */

.vc-carousel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(78vw, 356px);
	gap: var(--vc-gutter-lg);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--vc-edge);
	padding: 0.5rem var(--vc-edge) 1.5rem;
	margin-inline: calc(var(--vc-edge) * -1);
	overscroll-behavior-x: contain;
	list-style: none;
	/* The arrows and dots are the scroll affordance now; the native scrollbar is
	 * redundant chrome the design never shows. */
	scrollbar-width: none;
}

.vc-carousel::-webkit-scrollbar {
	display: none;
}

.vc-carousel > * {
	scroll-snap-align: start;
}

/*
 * Fixed-per-view sliders for the homepage rows: exactly N cards visible, the rest
 * reachable by horizontal scroll. These override both the full-bleed defaults above
 * and the wrapping grid from .vc-products/.vc-posts, so a fourth product slides
 * instead of wrapping into a lonely second row.
 */
.vc-carousel--2,
.vc-carousel--3 {
	grid-template-columns: none;
	grid-auto-flow: column;
	margin-inline: 0;
	padding-inline: 0;
	padding-block: 0.5rem 1.25rem;
	scroll-padding-inline: 0;
}

.vc-carousel--3 {
	grid-auto-columns: calc((100% - 2 * var(--vc-gutter-lg)) / 3);
}

.vc-carousel--2 {
	grid-auto-columns: calc((100% - var(--vc-gutter-lg)) / 2);
}

/* One-and-a-bit cards per view on phones, so the slider affordance is visible. */
@media (max-width: 700px) {
	.vc-carousel--2,
	.vc-carousel--3 {
		grid-auto-columns: 85%;
	}
}

/* Carousel chrome injected by main.js: arrows flanking the track, dots below (product
 * rows), or a "1 / N" counter next to the section title (reviews). */
.vc-carousel-wrap {
	position: relative;
}

.vc-carousel-arrow {
	position: absolute;
	inset-block-start: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	margin-block-start: -18px;
	border: 1px solid var(--vc-border);
	border-radius: 50%;
	background: var(--vc-white);
	color: var(--vc-muted);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.vc-carousel-arrow:hover {
	border-color: var(--vc-gold);
	color: var(--vc-gold);
}

.vc-carousel-arrow:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.vc-carousel-arrow--prev {
	inset-inline-start: -18px;
}

.vc-carousel-arrow--next {
	inset-inline-end: -18px;
}

/* Inside the tighter page gutter on small screens, sit just inside the edge instead
 * of overhanging it — overhanging there is what reintroduces horizontal scroll. */
@media (max-width: 700px) {
	.vc-carousel-arrow--prev {
		inset-inline-start: 4px;
	}

	.vc-carousel-arrow--next {
		inset-inline-end: 4px;
	}
}

.vc-carousel-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-block-start: 1rem;
}

/*
 * The button IS the 44px target (transparent, no visible box); the small pill is a
 * decorative ::after centred inside it. An earlier version drew the dot itself at
 * 8px and relied on an overflowing ::before for the hit area — real touch targets
 * hit-test fine that way, but automated audits (this project's included) measure the
 * button's own border box, so it read as a defect. Sizing the box for real removes
 * the ambiguity.
 */
.vc-carousel-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.vc-carousel-dot::after {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	border-radius: 9999px;
	background: var(--vc-border);
	transition: inline-size 0.2s ease, background-color 0.2s ease;
}

.vc-carousel-dot.is-active::after {
	inline-size: 22px;
	background: var(--vc-gold);
}

/* The reviews carousel's own prev/next buttons, placed next to the title instead of
 * flanking the cards — see .vc-reviews__nav. */
.vc-carousel-arrow-inline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	border: 1px solid var(--vc-border);
	border-radius: 50%;
	background: var(--vc-white);
	color: var(--vc-muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.vc-carousel-arrow-inline:hover {
	border-color: var(--vc-gold);
	color: var(--vc-gold);
}

.vc-carousel-arrow-inline:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Trust bar / badges / conversion
 * ---------------------------------------------------------------------- */

.vc-trust {
	display: grid;
	gap: 0.6rem;
	margin: 1.25rem 0 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-sm);
	background: var(--vc-surface-alt);
	list-style: none;
}

/*
 * The site-wide bar under the hero. Unlike the boxed product-page variant, this reads
 * as a slim ribbon: horizontal, centred, gold icons — matching the design's icon row
 * rather than the grey list the first build shipped.
 */
.vc-trust--bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem clamp(1.25rem, 4vw, 3.5rem);
	margin: 0;
	padding: 0.85rem var(--vc-edge);
	border: 0;
	border-radius: 0;
	border-block-end: 1px solid var(--vc-border);
	background: var(--vc-white);
}

.vc-trust--bar .vc-trust__item {
	font-size: 0.875rem;
	font-weight: 600;
}

@media (max-width: 700px) {
	.vc-trust--bar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem 1rem;
		justify-items: start;
	}

	.vc-trust--bar .vc-trust__item {
		font-size: 0.8125rem;
	}
}

.vc-trust__item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--vc-text);
	font-family: var(--vc-font-ui);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.35;
}

.vc-trust__icon {
	flex: 0 0 auto;
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	color: var(--vc-gold);
	-webkit-mask: var(--vc-mask) center / contain no-repeat;
	mask: var(--vc-mask) center / contain no-repeat;
}

.vc-trust__icon--truck {
	--vc-mask: url("../img/icon-truck.svg");
}

.vc-trust__icon--leaf {
	--vc-mask: url("../img/icon-leaf.svg");
}

.vc-trust__icon--lab {
	--vc-mask: url("../img/icon-lab.svg");
}

.vc-trust__icon--shield {
	--vc-mask: url("../img/icon-shield.svg");
}

.vc-shipping-progress {
	margin-block: 1rem;
	font-family: var(--vc-font-ui);
	font-size: var(--wp--preset--font-size--meta);
}

.vc-shipping-progress p {
	margin: 0 0 0.5rem;
}

.vc-shipping-progress__track {
	block-size: 8px;
	border-radius: 9999px;
	background: var(--vc-border);
	overflow: hidden;
}

.vc-shipping-progress__bar {
	display: block;
	block-size: 100%;
	border-radius: 9999px;
	background: var(--vc-gold);
	transition: inline-size 0.3s ease;
}

.vc-shipping-progress--qualified {
	color: #1a7f37;
	font-weight: 600;
}

.vc-stock-urgency {
	margin: 0.5rem 0;
	color: #a4501a;
	font-family: var(--vc-font-ui);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
}

.vc-price-pro {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	color: var(--vc-gold);
	font-weight: 700;
}

.vc-price-pro small {
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Breadcrumb
 * ---------------------------------------------------------------------- */

.vc-breadcrumb {
	padding-block: 1rem;
	color: var(--vc-muted);
	font-family: var(--vc-font-ui);
	font-size: 0.8125rem;
}

.vc-breadcrumb a {
	color: var(--vc-muted);
	text-decoration: none;
}

.vc-breadcrumb a:hover {
	color: var(--vc-gold);
}

.vc-breadcrumb__sep {
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	vertical-align: -0.15em;
	margin-inline: 0.15rem;
	background: currentColor;
	-webkit-mask: url("../img/icon-chevron.svg") center / 0.6em no-repeat;
	mask: url("../img/icon-chevron.svg") center / 0.6em no-repeat;
}

/* -------------------------------------------------------------------------
 * Shop facets — server-rendered navigation in place of the React filter blocks
 * ---------------------------------------------------------------------- */

.vc-facets {
	display: grid;
	gap: 1.75rem;
	align-content: start;
}

.vc-facet__title {
	margin: 0 0 0.6rem;
	color: var(--vc-black);
	font-family: var(--vc-font-display);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
}

.vc-facet__list {
	display: grid;
	gap: 0.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-facet__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.45rem 0;
	color: var(--vc-text);
	font-family: var(--vc-font-ui);
	font-size: 0.9375rem;
	text-decoration: none;
	border-block-end: 1px solid var(--vc-border);
}

.vc-facet__list a:hover,
.vc-facet__list a[aria-current="page"] {
	color: var(--vc-gold);
}

.vc-facet__list a[aria-current="page"] {
	font-weight: 700;
}

.vc-facet__count {
	flex: 0 0 auto;
	color: var(--vc-muted-2);
	font-size: 0.75rem;
}

/*
 * On mobile the facets go BELOW the product grid, not above it.
 *
 * Two reasons: products first is what sells on a phone, and the facet chips reflow
 * when the webfont lands — with the column above the grid that reflow was the whole
 * CLS 0.27 Lighthouse measured on category pages. Below the fold, the same reflow
 * costs nothing.
 */
@media (max-width: 781px) {
	.wp-block-columns:has(> .wp-block-column .vc-facets) {
		display: flex;
		flex-direction: column;
	}

	.wp-block-column:has(.vc-facets) {
		order: 2;
	}

	.vc-facets {
		gap: 1.25rem;
	}

	.vc-facet__list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.vc-facet__list a {
		min-block-size: 44px;
		padding: 0.5rem 0.85rem;
		border: 1px solid var(--vc-border);
		border-radius: var(--vc-radius-sm);
		font-size: 0.875rem;
	}
}

/* The migrated PrestaShop category descriptions are full SEO essays. They belong at
 * the foot of the archive (where the old store showed them), styled as prose. */
.vc-term-seo {
	max-inline-size: var(--vc-prose, 680px);
	color: var(--vc-muted);
	font-family: var(--vc-font-ui);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.vc-term-seo p {
	margin-block: 0 1em;
}

/* -------------------------------------------------------------------------
 * Single product
 * ---------------------------------------------------------------------- */

.vc-product {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 900px) {
	.vc-product {
		grid-template-columns: minmax(0, 530fr) minmax(0, 626fr);
		align-items: start;
	}
}

.vc-gallery {
	display: grid;
	gap: 0.75rem;
}

.vc-gallery__main {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--vc-radius-sm);
	background: var(--vc-surface-alt);
}

/*
 * WooCommerce's classic gallery ships with an inline `opacity: 0` that its jQuery
 * slider is supposed to lift. This theme removes jQuery and the slider on purpose,
 * so the reveal never ran and the product photo was simply invisible. The !important
 * is required to beat the inline style.
 */
.vc-product .woocommerce-product-gallery {
	opacity: 1 !important;
}

.vc-product .woocommerce-product-gallery__wrapper {
	display: grid;
	gap: 0.75rem;
}

/* First image is the hero; any further ones render as a thumbnail row. */
.vc-product .woocommerce-product-gallery__wrapper > div:first-child img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: var(--vc-radius-sm);
	background: var(--vc-surface-alt);
}

.vc-product .woocommerce-product-gallery__wrapper > div:not(:first-child) {
	display: inline-block;
	inline-size: 96px;
}

.vc-product .woocommerce-product-gallery__wrapper > div:not(:first-child) img {
	inline-size: 96px;
	block-size: 96px;
	object-fit: contain;
	border: 1px solid var(--vc-border);
	border-radius: 4px;
	background: var(--vc-white);
}

/* The block-based gallery on the product page: give its main image a real box and a
 * static position, or it renders zero-height next to the summary column. */
.vc-product .wp-block-woocommerce-product-image-gallery,
.vc-product .wc-block-product-gallery {
	position: relative;
}

.vc-product .wp-block-woocommerce-product-image-gallery img,
.vc-product .wc-block-product-gallery__large-image img,
.vc-product .woocommerce-product-gallery__image img {
	position: static;
	inline-size: 100%;
	block-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
	border-radius: var(--vc-radius-sm);
	background: var(--vc-surface-alt);
}

.vc-gallery__main img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.vc-gallery__thumbs {
	display: flex;
	gap: 0.6rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-gallery__thumbs li {
	flex: 0 0 84px;
	scroll-snap-align: start;
}

.vc-gallery__thumbs img {
	aspect-ratio: 1;
	object-fit: contain;
	border: 1px solid var(--vc-border);
	border-radius: 4px;
	cursor: pointer;
}

.vc-product__title {
	margin: 0 0 0.5rem;
	color: var(--vc-text);
	font-family: var(--vc-font-ui);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 700;
	line-height: 1.28;
}

.vc-product__rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-end: 0.75rem;
	font-family: var(--vc-font-ui);
	font-size: 0.875rem;
}

.vc-product__availability {
	margin: 0 0 0.5rem;
	color: var(--vc-black);
	font-family: var(--vc-font-ui);
	font-size: var(--wp--preset--font-size--meta);
}

.vc-product__prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-end: 1rem;
	font-family: var(--vc-font-ui);
}

.vc-product__price {
	color: var(--vc-gold);
	font-size: var(--wp--preset--font-size--price);
	font-weight: 700;
	line-height: 1;
}

.vc-product__price-was {
	color: var(--vc-muted-3);
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: line-through;
}

.vc-product__excerpt {
	color: var(--vc-black);
	font-family: var(--vc-font-ui);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
}

.vc-product__certs {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-block: 1.25rem;
}

.vc-product__certs img {
	inline-size: auto;
	block-size: 60px;
}

.vc-product__form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-block: 1.25rem;
}

/* -------------------------------------------------------------------------
 * Blog
 * ---------------------------------------------------------------------- */

.vc-blog {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	max-inline-size: var(--vc-container);
	margin-inline: auto;
	padding-block: clamp(2rem, 5vw, 3.5rem);
	padding-inline: var(--vc-edge);
}

/* The sidebar keeps the design's 307px column but with a wider gutter, so it
 * breathes instead of hugging the content and the right edge. */
@media (min-width: 900px) {
	.vc-blog {
		grid-template-columns: minmax(0, 1fr) 307px;
		column-gap: clamp(2.5rem, 5vw, 4.5rem);
	}
}

.vc-sidebar {
	gap: 2.5rem;
}

.vc-widget__title {
	color: var(--vc-black);
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
}

.vc-posts {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.vc-posts--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vc-gutter-lg);
	}
}

/* Flex column filling the cell: with equal image ratios and clamped text, every
 * element sits at the same y in every card of the row. */
.vc-post-card {
	display: flex;
	flex-direction: column;
	block-size: 100%;
}

/* 16:9, not square: full-column square photos made every card scroll-height tall. */
.vc-post-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--vc-surface-alt);
}

.vc-post-card__media img {
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.vc-post-card:hover .vc-post-card__media img {
	transform: scale(1.03);
}

.vc-post-card__tag {
	/* Without this, the flex column's default cross-axis stretch blockifies the tag
	 * to the card's full width — "inline-block" alone does not stop it, because a
	 * flex item's stretched size wins over its own display. This is what turned the
	 * category tag into a full-width gold-bordered bar. */
	align-self: flex-start;
	display: inline-block;
	margin-block: 1.1rem 0.6rem;
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--vc-gold);
	color: var(--vc-gold);
	font-family: var(--vc-font-body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
}

.vc-post-card__title {
	/* Clamped to two lines and reserved at two lines, so a one-line title and a
	 * three-line title occupy identical space and the dates align across the row. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-block-size: calc(2 * 1.3em);
	margin: 0 0 0.6rem;
	font-family: var(--vc-font-body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.3;
}

.vc-post-card__title a {
	color: var(--vc-black);
	text-decoration: none;
}

.vc-post-card__title a:hover {
	color: var(--vc-gold);
}

.vc-post-card__meta {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--vc-black);
	font-family: var(--vc-font-body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
}

.vc-post-card__meta::after {
	content: "";
	order: 1;
	inline-size: 13px;
	block-size: 1px;
	background: var(--vc-gold);
}

.vc-post-card__author {
	order: 2;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-transform: uppercase;
}

.vc-post-card__author img {
	inline-size: 35px;
	block-size: 35px;
	border-radius: 50%;
	object-fit: cover;
}

.vc-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-block-start: 0.9rem;
	color: var(--vc-black);
	font-family: var(--vc-font-body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.vc-post-card__more:hover {
	color: var(--vc-gold);
	text-decoration: none;
}

.vc-post-card__more::after {
	content: "";
	inline-size: 8px;
	block-size: 7px;
	background: currentColor;
	-webkit-mask: url("../img/icon-arrow.svg") center / contain no-repeat;
	mask: url("../img/icon-arrow.svg") center / contain no-repeat;
}

/* Sidebar */

.vc-sidebar {
	display: grid;
	gap: 2.25rem;
	align-content: start;
}

.vc-widget__title {
	margin: 0 0 1rem;
	font-family: var(--vc-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
}

.vc-widget ul {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-widget a {
	color: var(--vc-text);
	font-family: var(--vc-font-ui);
	font-size: 0.9375rem;
	text-decoration: none;
}

.vc-widget a:hover {
	color: var(--vc-gold);
}

.vc-recent {
	display: grid;
	gap: 1rem;
}

.vc-recent__item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
}

.vc-recent__item img {
	aspect-ratio: 1;
	object-fit: cover;
}

/*
 * "Entradas recientes" follows the Figma sidebar: a stack of large cards — photo the
 * full width of the column, then the date line, then the bold title. The old
 * thumbnail-row treatment is gone; it read as broken next to the design.
 */
.vc-widget .wp-block-latest-posts.vc-recent-lg {
	display: grid;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-widget .vc-recent-lg > li {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.vc-widget .vc-recent-lg .wp-block-latest-posts__featured-image {
	order: 0;
	margin: 0 0 0.7rem;
}

.vc-widget .vc-recent-lg .wp-block-latest-posts__featured-image img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
}

.vc-widget .vc-recent-lg .wp-block-latest-posts__post-date {
	order: 1;
	margin: 0 0 0.35rem;
	color: var(--vc-muted);
	font-family: var(--vc-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vc-widget .vc-recent-lg > li > a {
	order: 2;
	display: block;
	color: var(--vc-black);
	font-family: var(--vc-font-ui);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.vc-widget .vc-recent-lg > li > a:hover {
	color: var(--vc-gold);
}

/* Filled block buttons ship white text always. Without this, buttons rendered from
 * template parts picked up the link colour and sat dark-on-gold. The outline style
 * keeps its own colouring. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	color: var(--vc-white);
}

/* Categories as the design draws them: gold chevron + name, no counts, no boxes. */
.vc-widget .wp-block-categories.vc-cats {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-widget .vc-cats li {
	margin: 0;
}

.vc-widget .vc-cats a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 44px;
	color: var(--vc-text);
	font-family: var(--vc-font-ui);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.vc-widget .vc-cats a::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 0.6em;
	block-size: 0.9em;
	background: var(--vc-gold);
	-webkit-mask: url("../img/icon-chevron.svg") center / contain no-repeat;
	mask: url("../img/icon-chevron.svg") center / contain no-repeat;
}

.vc-widget .vc-cats a:hover {
	color: var(--vc-gold);
}

/* Search: clean field with the round gold icon button inside, as drawn. */
.vc-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.3rem 0.3rem 0.9rem;
	border: 1px solid var(--vc-border);
	border-radius: 5px;
	background: var(--vc-white);
}

.vc-search .wp-block-search__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: 0.45rem 0;
	border: 0;
	outline-offset: 4px;
	font-family: var(--vc-font-ui);
	font-size: 0.9375rem;
	color: var(--vc-text);
}

.vc-search .wp-block-search__button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vc-gold);
	color: var(--vc-white);
	cursor: pointer;
}

.vc-search .wp-block-search__button svg {
	inline-size: 18px;
	block-size: 18px;
	fill: currentColor;
}

.vc-search .wp-block-search__button:hover {
	background: var(--vc-dark);
}

/*
 * Síguenos: gold outline circles in a row.
 *
 * The circle lives on the ANCHOR, not the <li>: the block's own styles size and pad
 * the anchor, so a circle drawn on the li rendered as an empty ring with the icon
 * floating at its top-left corner — the breakage visible in staging. The flex display
 * is stated explicitly because the block's layout CSS is not generated inside a
 * template part.
 */
.vc-follow.wp-block-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-follow .wp-block-social-link {
	display: inline-flex;
	margin: 0 !important;
	background: none !important;
	border: 0;
}

.vc-follow .wp-block-social-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--vc-gold);
	border-radius: 50%;
	color: var(--vc-gold);
	transition: background-color 0.18s ease, color 0.18s ease;
}

.vc-follow .wp-block-social-link a:hover {
	background: var(--vc-gold);
	color: var(--vc-white);
}

.vc-follow .wp-block-social-link svg {
	inline-size: 18px;
	block-size: 18px;
	fill: currentColor;
}

.vc-search-form {
	display: flex;
	gap: 0;
}

.vc-search-form input[type="search"] {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--vc-border);
	border-inline-end: 0;
	border-radius: 0;
	font-family: var(--vc-font-ui);
	font-size: 0.9375rem;
}

.vc-search-form button {
	flex: 0 0 auto;
	min-inline-size: 0;
	padding-inline: 1rem;
	border-radius: 0;
}

/* Article body */

/* Centred reading column. Without the auto margins the 72ch cap left the whole
 * article hugging the container's left edge with half the viewport empty — which is
 * exactly how the migrated pages looked broken. */
.vc-article {
	max-inline-size: var(--vc-prose, 680px);
	margin-inline: auto;
}

/*
 * Title and content must start on the SAME x.
 *
 * Two things were shifting the body 40px right of the title: WordPress's global
 * padding lands on the post-content element itself, and the migrated pages carry a
 * second .vc-article on their inner wrapper, which re-applied the column inside the
 * already-constrained one. Zero the padding and let the inner wrapper simply fill.
 */
.wp-block-post-content.vc-article {
	padding-inline: 0;
}

.vc-article .vc-article {
	max-inline-size: none;
	margin-inline: 0;
}

/* The institutional page title shares the article's reading column so heading and
 * text start on the same vertical line. */
.vc-page-head__title {
	max-inline-size: var(--vc-prose, 680px);
	margin-inline: auto;
}

.vc-page-head.has-global-padding {
	padding-inline: 0;
}

.vc-article > * + * {
	margin-block-start: 1.25rem;
}

.vc-article h2 {
	margin-block-start: 2.25rem;
	font-family: var(--vc-font-display);
	font-size: var(--wp--preset--font-size--h3);
}

.vc-article h3 {
	margin-block-start: 1.75rem;
	font-family: var(--vc-font-display);
	font-size: var(--wp--preset--font-size--card-title);
}

.vc-article p,
.vc-article li {
	font-family: var(--vc-font-ui);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.vc-article img {
	border-radius: var(--vc-radius-sm);
}

.vc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-tags a {
	display: inline-block;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--vc-border);
	color: var(--vc-muted);
	font-family: var(--vc-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.vc-tags a:hover {
	border-color: var(--vc-gold);
	color: var(--vc-gold);
}

/* Pagination */

.vc-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding-block: 2rem;
	font-family: var(--vc-font-ui);
}

.vc-pagination a,
.vc-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 46px;
	min-block-size: 46px;
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-sm);
	color: var(--vc-text);
	font-weight: 700;
	text-decoration: none;
}

.vc-pagination a:hover,
.vc-pagination .current {
	background: var(--vc-gold);
	border-color: var(--vc-gold);
	color: var(--vc-white);
}

/* -------------------------------------------------------------------------
 * Newsletter band
 * ---------------------------------------------------------------------- */

.vc-newsletter {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.5rem, 6vw, 3.5rem);
	overflow: hidden;
	background: var(--vc-dark);
	color: var(--vc-white);
	text-align: center;
}

.vc-newsletter__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.vc-newsletter__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.vc-newsletter::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.5) 37%, rgba(0, 0, 0, 0.72) 100%);
}

.vc-newsletter__inner {
	max-inline-size: 815px;
	margin-inline: auto;
	padding-inline: var(--vc-edge);
}

.vc-newsletter__title {
	margin: 0 0 0.75rem;
	color: var(--vc-white);
	font-family: var(--vc-font-body);
	font-size: var(--wp--preset--font-size--banner);
	font-weight: 400;
	text-transform: uppercase;
}

.vc-newsletter__text {
	margin: 0 0 1.5rem;
	font-family: var(--vc-font-body);
	font-size: clamp(1rem, 2vw, 1.5rem);
	line-height: 1.4;
}

.vc-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	max-inline-size: 751px;
	margin-inline: auto;
}

.vc-newsletter__form input[type="email"] {
	flex: 1 1 260px;
	min-inline-size: 0;
	min-block-size: 63px;
	padding-inline: 1.25rem;
	border: 0;
	border-radius: 0;
	background: var(--vc-white);
	color: var(--vc-text);
	font-family: var(--vc-font-body);
	font-size: 1rem;
}

.vc-newsletter__form button {
	flex: 0 0 auto;
	min-inline-size: 150px;
	min-block-size: 63px;
	border-radius: 0;
}

.vc-newsletter__consent {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.75rem;
	margin-block-start: 1.25rem;
	font-family: var(--vc-font-body);
	font-size: 0.9375rem;
	line-height: 1.45;
	text-align: start;
}

.vc-newsletter__consent input[type="checkbox"] {
	flex: 0 0 auto;
	inline-size: 25px;
	block-size: 25px;
	margin: 0;
	accent-color: var(--vc-gold);
}

.vc-newsletter__consent a {
	color: var(--vc-white);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Category photo tiles (home)
 * ---------------------------------------------------------------------- */

.vc-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--vc-gutter-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--vc-radius-sm);
	isolation: isolate;
}

.vc-tile img {
	/* block, not inline: the inline baseline reserved a few pixels under the image
	 * and the tile's gradient showed through as an empty grey strip. */
	display: block;
	inline-size: 100%;
	block-size: auto;
	/* Landscape, as approved: the portrait 4/5 crop cut the product art the tiles
	 * are built around. 4:3 matches the source mockups' own framing. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.vc-tile:hover img {
	transform: scale(1.04);
}

.vc-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}

.vc-tile__label {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline: 0;
	z-index: 1;
	color: var(--vc-white);
	font-family: var(--vc-font-body);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------------------------
 * About / Origen band
 * ---------------------------------------------------------------------- */

.vc-about {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	background: var(--vc-surface-alt);
}

.vc-about__inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

@media (min-width: 800px) {
	.vc-about__inner {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}
}

.vc-about__media {
	margin: 0;
}

.vc-about__media img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--vc-radius-sm);
}

.vc-about__title {
	margin: 0 0 1rem;
	color: var(--vc-gold);
	font-family: var(--vc-font-ui);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
}

.vc-about__body p {
	margin: 0 0 1rem;
	color: var(--vc-text);
	font-family: var(--vc-font-ui);
	font-size: 1rem;
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
 * Institutional page header — the migrated pages rendered as a small bold label
 * lost at the top left; this gives them a real title treatment.
 * ---------------------------------------------------------------------- */

.vc-page-head {
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem);
}

.vc-page-head__title {
	position: relative;
	/* Centred into the same 72ch reading column as the article below it — the
	 * earlier `margin: 0` shorthand was silently undoing that centring. */
	margin: 0 auto;
	max-inline-size: var(--vc-prose, 680px);
	padding-block-end: 0.75rem;
	color: var(--vc-black);
	font-family: var(--vc-font-display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	text-transform: uppercase;
}

.vc-page-head__title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 64px;
	block-size: 3px;
	background: var(--vc-gold);
}

/* -------------------------------------------------------------------------
 * Filosofía page — the Figma artboard's vegan / cruelty-free composition
 * ---------------------------------------------------------------------- */

.vc-philosophy__row {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 900px) {
	.vc-philosophy__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
	}
}

.vc-philosophy__card {
	display: grid;
	place-items: center;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: 6px;
}

.vc-philosophy__card--green {
	background: #8bc53f;
}

.vc-philosophy__card--light {
	background: #d7e8b0;
}

.vc-philosophy__card img {
	inline-size: min(220px, 100%);
	block-size: auto;
}

.vc-philosophy__text h2,
.vc-philosophy__text h3 {
	font-family: var(--vc-font-display);
	font-size: 1.125rem;
	text-transform: uppercase;
}

.vc-philosophy__text p {
	font-family: var(--vc-font-ui);
	font-size: 0.9375rem;
	line-height: 1.7;
}

/*
 * The Figma artboard's alternating composition: card | text, then text | card.
 * This section runs wider than the prose column, so both the post-content block and
 * the page title are widened when the philosophy layout is present, keeping the
 * title's left edge on the content's left edge.
 */
.wp-block-post-content.vc-article:has(.vc-philosophy) {
	max-inline-size: 1000px;
}

.vc-page-head:has(+ .wp-block-post-content .vc-philosophy) .vc-page-head__title {
	max-inline-size: 1000px;
}

.vc-philosophy {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
}

.vc-ph-row {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
}

@media (min-width: 800px) {
	.vc-ph-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vc-ph-media {
	margin: 0;
}

.vc-ph-media img {
	inline-size: 100%;
	block-size: auto;
	border-radius: 6px;
}

.vc-ph-text h2 {
	margin: 0 0 0.75rem;
	font-family: var(--vc-font-display);
	font-size: 1.125rem;
	text-transform: uppercase;
}

.vc-ph-text p {
	margin: 0 0 0.9rem;
	font-family: var(--vc-font-ui);
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* On mobile the media always leads its text, matching the Figma mobile page. */
@media (max-width: 799px) {
	.vc-ph-row--reverse {
		display: flex;
		flex-direction: column-reverse;
	}
}

/* -------------------------------------------------------------------------
 * Reviews (Opiniones)
 * ---------------------------------------------------------------------- */

.vc-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1.75rem;
}

.vc-reviews__eyebrow {
	margin: 0 0 0.25rem;
	color: var(--vc-gold);
	font-family: var(--vc-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-transform: uppercase;
}

.vc-reviews__title {
	margin: 0;
	color: var(--vc-dark);
	font-family: var(--vc-font-ui);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
}

.vc-reviews__nav {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.vc-reviews__counter {
	margin-inline-end: 0.25rem;
	color: var(--vc-black);
	font-family: var(--vc-font-ui);
	font-size: 1.0625rem;
	font-weight: 700;
}

/* The list is a 2-per-view carousel now, sized like the home product/blog rows. */
.vc-reviews__list {
	gap: var(--vc-gutter-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-review {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.25rem 1.4rem 1.5rem;
	border: 1px solid var(--vc-gold);
	border-radius: 6px;
	background: var(--vc-white);
}

.vc-review__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.vc-review__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 50%;
	background: var(--vc-border);
	color: var(--vc-white);
	font-family: var(--vc-font-ui);
	font-size: 1.25rem;
	font-weight: 700;
}

.vc-review__name {
	display: block;
	color: var(--vc-black);
	font-family: var(--vc-font-ui);
	font-size: 0.9375rem;
	font-weight: 700;
}

.vc-review__subject {
	display: block;
	color: var(--vc-gold);
	font-family: var(--vc-font-ui);
	font-size: 0.8125rem;
}

.vc-review__text {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--vc-text);
	font-family: var(--vc-font-ui);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.vc-review__text::after {
	content: "";
	display: block;
	inline-size: 120px;
	block-size: 2px;
	margin-block-start: 0.9rem;
	background: var(--vc-gold);
}

.vc-reviews__aggregate {
	margin: 1.5rem 0 0;
	color: var(--vc-muted);
	font-family: var(--vc-font-ui);
	font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
 * Stats band
 * ---------------------------------------------------------------------- */

.vc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.vc-stats__value {
	display: block;
	color: var(--vc-gold);
	font-family: var(--vc-font-display);
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	font-weight: 700;
	line-height: 1;
}

.vc-stats__label {
	display: block;
	margin-block-start: 0.4rem;
	color: var(--vc-text);
	font-family: var(--vc-font-body);
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
}

/* Brand commitment badges reuse the stats grid but read as prose, not figures. */
.vc-badges {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.vc-badges__img {
	display: block;
	inline-size: 75px;
	block-size: 75px;
	margin-inline: auto;
	margin-block-end: 0.75rem;
}

.vc-badges__title {
	display: block;
	color: var(--vc-black);
	font-family: var(--vc-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	text-transform: uppercase;
}

.vc-badges__text {
	display: block;
	margin-block-start: 0.4rem;
	color: var(--vc-muted);
	font-family: var(--vc-font-body);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.45;
}

.vc-section__title--tight {
	margin-block-end: 2rem;
}

/* -------------------------------------------------------------------------
 * Professional (B2B) area
 * ---------------------------------------------------------------------- */

.vc-pro-benefits {
	margin-block: clamp(2rem, 5vw, 3rem);
	text-align: start;
}

.vc-pro-status {
	max-inline-size: 68ch;
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-sm);
	background: var(--vc-surface-alt);
	text-align: center;
}

.vc-pro-status p {
	margin: 0 0 1rem;
	color: var(--vc-text);
	font-family: var(--vc-font-ui);
	font-size: 1rem;
	line-height: 1.6;
}

.vc-pro-status__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.vc-pro-status__note {
	margin-block-end: 0;
	color: var(--vc-muted);
	font-size: var(--wp--preset--font-size--meta);
}

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

.vc-footer {
	position: relative;
	padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
	background: var(--vc-dark);
	color: var(--vc-white);
	font-family: var(--vc-font-ui);
}

.vc-footer::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background: rgba(17, 17, 17, 0.1);
}

.vc-footer__inner {
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.5rem);
	max-inline-size: var(--vc-container);
	margin-inline: auto;
	padding-inline: var(--vc-edge);
}

@media (min-width: 782px) {
	.vc-footer__inner {
		grid-template-columns: minmax(0, 280px) repeat(4, minmax(0, 1fr));
		gap: 2rem;
	}
}

/* The footer uses the light (white-lettering) variant of the mark, straight on
 * the dark background — no plate. */
.vc-footer__brand img,
.vc-footer__brand svg {
	inline-size: auto;
	block-size: 64px;
	margin-block-end: 1.25rem;
}

.vc-footer__address {
	margin: 0;
	font-size: var(--wp--preset--font-size--meta);
	font-style: normal;
	line-height: 1.66;
}

.vc-footer__address a {
	color: var(--vc-white);
	text-decoration: none;
}

.vc-footer__col-title {
	margin: 0 0 0.75rem;
	color: var(--vc-white);
	font-family: var(--vc-font-ui);
	font-size: var(--wp--preset--font-size--footer-heading);
	font-weight: 600;
	text-transform: none;
}

.vc-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-footer li a {
	display: block;
	padding-block: 0.2rem;
	color: var(--vc-white);
	font-size: var(--wp--preset--font-size--small);
	line-height: 2.1;
	text-decoration: none;
}

.vc-footer li a:hover {
	color: var(--vc-gold-light);
	text-decoration: underline;
}

.vc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-inline-size: var(--vc-container);
	margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
	padding: 1.25rem var(--vc-edge) 0;
	border-block-start: 1px solid var(--wp--custom--footer-divider, rgba(247, 247, 247, 0.1));
	font-size: var(--wp--preset--font-size--small);
}

.vc-footer__social {
	display: flex;
	gap: 1rem;
}

.vc-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 24px;
	block-size: 24px;
	color: var(--vc-gold);
}

.vc-footer__social svg {
	inline-size: 16px;
	block-size: 16px;
	fill: currentColor;
}

.vc-footer__payments {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.vc-footer__payments img {
	block-size: 16px;
	inline-size: auto;
}

/* -------------------------------------------------------------------------
 * Consent banner
 *
 * Accept and reject are visually identical so refusing is exactly as easy as
 * accepting — that symmetry is what makes the consent valid, not a style choice.
 * ---------------------------------------------------------------------- */

.vc-consent {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 90;
	padding: 1.25rem var(--vc-edge);
	background: var(--vc-white);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
}

.vc-consent[hidden] {
	display: none;
}

.vc-consent__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	max-inline-size: var(--vc-container);
	margin-inline: auto;
}

.vc-consent__text {
	flex: 1 1 320px;
}

.vc-consent__title {
	margin: 0 0 0.35rem;
	font-family: var(--vc-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	text-transform: uppercase;
}

.vc-consent__text p {
	margin: 0;
	color: var(--vc-text);
	font-family: var(--vc-font-ui);
	font-size: 0.875rem;
	line-height: 1.5;
}

.vc-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.vc-consent__actions .vc-btn {
	min-inline-size: 150px;
	min-block-size: 44px;
}

@media (max-width: 600px) {
	.vc-consent__actions {
		inline-size: 100%;
	}

	.vc-consent__actions .vc-btn {
		flex: 1 1 100%;
	}
}

/* -------------------------------------------------------------------------
 * Touch ergonomics
 *
 * The Figma file is desktop-only, so its 39px card button and 21px footer links were
 * never sized for a finger. Rather than change the desktop composition, the minimums
 * are lifted only where the pointer is actually coarse — so the design stays faithful
 * on a mouse and usable on a phone.
 * ---------------------------------------------------------------------- */

@media (pointer: coarse) {
	.vc-btn,
	.vc-btn--outline,
	.vc-btn--cta,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		min-block-size: 44px;
	}

	.vc-footer li a,
	.vc-widget a,
	.vc-footer__address a {
		padding-block: 0.6rem;
	}

	.vc-footer__address a {
		display: inline-block;
	}

	/* The footer logo is a link; give it a real hit area without moving the mark. */
	.vc-footer__logo {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}

	.vc-pagination a,
	.vc-pagination span {
		min-inline-size: 48px;
		min-block-size: 48px;
	}

	.vc-post-card__tag,
	.vc-tags a {
		padding-block: 0.55rem;
	}

	.vc-post-card__more {
		padding-block: 0.5rem;
	}

	/* Footer social glyphs stay 16px; the anchor around them gets a real hit area. */
	.vc-footer__social a {
		inline-size: 44px;
		block-size: 44px;
	}

	/* Links rendered by core blocks — post titles, category terms, the excerpt "read
	 * more" and block buttons — carry no theme class to target, so they are reached
	 * through the block classes WordPress emits. Padding alone left them at 32-42px,
	 * so the minimum is stated explicitly and the box is centred on the text. */
	.wp-block-post-title a,
	.wp-block-post-terms a,
	.wp-block-latest-posts__post-title,
	.wp-block-post-excerpt__more-link,
	.wp-block-button__link,
	.vc-newsletter__consent a {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}

	.wp-block-button__link {
		padding-block: 0.75rem;
	}

	/* Breadcrumb trail, rendered by WooCommerce with no per-link class. */
	.vc-breadcrumb a,
	.woocommerce-breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}

	/* Same specificity as the base card-button rule, or the 39px there wins. */
	.vc-card__actions .wc-block-components-product-button__button {
		min-block-size: 44px;
	}

	.vc-carousel-arrow,
	.vc-carousel-arrow-inline {
		inline-size: 44px;
		block-size: 44px;
	}

	/* Re-centre vertically: the absolute positioning offset is half the arrow's
	 * height, which just changed from 36px to 44px. */
	.vc-carousel-arrow {
		margin-block-start: -22px;
	}
}

/* -------------------------------------------------------------------------
 * Motion and print
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.vc-header,
	.vc-footer,
	.vc-newsletter,
	.vc-sidebar,
	.vc-carousel {
		display: none !important;
	}
}