/* ==========================================================================
   VÀREUX theme styles
   Palette taken from the campaign photography: estate hedges, sandstone,
   the gold crest on the knitwear.
   ========================================================================== */

:root {
	--vx-ink: #1a221d;          /* cypress: body text, buttons */
	--vx-estate: #213129;       /* estate green: footer, announcement */
	--vx-estate-2: #2c4035;     /* estate green, hover */
	--vx-paper: #ffffff;
	--vx-stone: #e6e0d4;        /* limestone bands */
	--vx-stone-2: #f3f0ea;      /* notices, quiet fills */
	--vx-sand: #c9bc9f;         /* secondary text on estate green */
	--vx-rust: #a64627;         /* logo rust: focus, hover */
	--vx-mute: #5d655f;         /* secondary text on white */
	--vx-line: #d8d4cb;         /* dividers */
	--vx-field: #8a928c;        /* form field borders */
	--vx-tile: #ecebe8;         /* image placeholder */
	--vx-error: #8e2a1e;

	--vx-serif: "Marcellus", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--vx-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--vx-gutter: clamp(16px, 4vw, 48px);
	--vx-max: 1440px;
	--vx-header-h: 72px;
	--vx-ease: cubic-bezier(.2, .7, .2, 1);
}

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

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--vx-header-h) + 16px);
}

body {
	margin: 0;
	background: var(--vx-paper);
	color: var(--vx-ink);
	font-family: var(--vx-sans);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.vx-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .28em; }
a:hover { color: var(--vx-rust); }

h1, h2, h3, h4 {
	font-family: var(--vx-serif);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: .005em;
	margin: 0 0 .5em;
}

p { margin: 0 0 1em; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--vx-rust);
	outline-offset: 3px;
}

.vx-main:focus { outline: none; }

.vx-sr,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vx-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 200;
	padding: 12px 20px;
	background: var(--vx-ink);
	color: var(--vx-paper);
	text-decoration: none;
}
.vx-skip:focus { top: 12px; color: var(--vx-paper); }

.vx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vx-wrap {
	width: 100%;
	max-width: var(--vx-max);
	margin-inline: auto;
	padding-inline: var(--vx-gutter);
}

/* --------------------------------------------------------------------------
   Buttons and links
   ----------------------------------------------------------------------- */

.vx-btn,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page .button,
.single_add_to_cart_button,
#place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 28px;
	border: 1px solid var(--vx-ink);
	border-radius: 0;
	background: var(--vx-ink);
	color: var(--vx-paper);
	font-family: var(--vx-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .04em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.vx-btn:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce-page .button:hover,
.single_add_to_cart_button:hover,
#place_order:hover {
	background: var(--vx-estate);
	border-color: var(--vx-estate);
	color: var(--vx-paper);
}

.vx-btn[disabled],
.vx-btn[aria-busy="true"],
.single_add_to_cart_button.disabled,
.single_add_to_cart_button[aria-busy="true"],
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	opacity: .55;
	cursor: not-allowed;
}
.single_add_to_cart_button[aria-busy="true"],
.vx-btn[aria-busy="true"] { cursor: progress; }

.vx-btn--outline {
	background: transparent;
	color: var(--vx-ink);
}
.vx-btn--outline:hover { background: var(--vx-ink); border-color: var(--vx-ink); }

.vx-btn--light {
	background: var(--vx-paper);
	border-color: var(--vx-paper);
	color: var(--vx-estate);
}
.vx-btn--light:hover {
	background: var(--vx-stone);
	border-color: var(--vx-stone);
	color: var(--vx-estate);
}

.vx-btn--block { width: 100%; }

.vx-link {
	display: inline-block;
	color: var(--vx-ink);
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .35em;
}
.vx-link:hover { color: var(--vx-rust); }

/* --------------------------------------------------------------------------
   Announcement and header
   ----------------------------------------------------------------------- */

.vx-announce {
	background: var(--vx-estate);
	color: var(--vx-paper);
	text-align: center;
	font-size: 13px;
	letter-spacing: .02em;
	padding: 9px var(--vx-gutter);
}
.vx-announce p { margin: 0; }
.vx-announce--rotate {
	display: grid;
	grid-template-columns: 32px 1fr 32px;
	align-items: center;
	padding-block: 4px;
}
.vx-announce__track { display: grid; }
.vx-announce__msg { grid-area: 1 / 1; transition: opacity .6s ease, transform .6s var(--vx-ease); }
.vx-announce--rotate .vx-announce__msg:not(.is-active) { opacity: 0; transform: translateY(6px); visibility: hidden; }
.vx-announce__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vx-sand);
	cursor: pointer;
}
.vx-announce__arrow:hover { color: var(--vx-paper); }
.vx-announce :focus-visible { outline-color: var(--vx-sand); }
@media (max-width: 380px) {
	.vx-announce { font-size: 12px; letter-spacing: .01em; }
}

.vx-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--vx-paper);
	border-bottom: 1px solid var(--vx-line);
}
.admin-bar .vx-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vx-header { top: 0; } }

.vx-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--vx-header-h);
	padding-inline: var(--vx-gutter);
}

.vx-tool.vx-header__menu { display: none; justify-self: start; margin-left: -10px; }

.vx-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	letter-spacing: .01em;
}
.vx-nav__list a {
	text-decoration: none;
	padding: 6px 0;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .3s var(--vx-ease);
}
.vx-nav__list a:hover,
.vx-nav__list .current-menu-item > a,
.vx-nav__list a[aria-current="page"] {
	color: var(--vx-ink);
	background-size: 100% 1px;
}

.vx-wordmark {
	margin: 0;
	font-family: var(--vx-serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .34em;
	text-transform: uppercase;
	white-space: nowrap;
}
.vx-wordmark__text {
	display: inline-block;
	margin-right: -.34em;   /* balance trailing letter-spacing */
	color: inherit;
	text-decoration: none;
}

/* Logo image (theme logo or Site Identity logo). */
.vx-logo,
.vx-wordmark .custom-logo-link { display: inline-block; line-height: 0; }
.vx-wordmark--header .vx-logo__img,
.vx-wordmark--header .custom-logo {
	display: block;
	width: auto;
	height: 50px;
	max-width: none;
}
.vx-wordmark--footer .vx-logo__img {
	display: block;
	width: auto;
	height: 128px;
	max-width: none;
}

.vx-header__tools {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 2px;
	margin-right: -10px;
}

.vx-tool {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vx-ink);
	cursor: pointer;
	text-decoration: none;
}
.vx-tool:hover { color: var(--vx-rust); }

.vx-bag-count {
	position: absolute;
	top: 5px;
	right: 3px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--vx-ink);
	color: var(--vx-paper);
	font-size: 10px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}
.vx-bag-count[data-count="0"] { display: none; }

@media (max-width: 1279px) {
	.vx-tool.vx-header__menu { display: inline-flex; }
	.vx-nav { display: none; }
	.vx-wordmark { font-size: 21px; letter-spacing: .3em; }
	.vx-wordmark__text { margin-right: -.3em; }
	.vx-wordmark--header .vx-logo__img,
	.vx-wordmark--header .custom-logo { height: 46px; }
}
@media (max-width: 600px) {
	:root { --vx-header-h: 60px; }
	.vx-tool--account { display: none; }
	.vx-wordmark { font-size: 17px; letter-spacing: .28em; }
	.vx-wordmark__text { margin-right: -.28em; }
	.vx-wordmark--header .vx-logo__img,
	.vx-wordmark--header .custom-logo { height: 40px; }
	.vx-wordmark--footer .vx-logo__img { height: 108px; }
}

/* --------------------------------------------------------------------------
   Panels: menu, search, bag
   ----------------------------------------------------------------------- */

.vx-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(26, 34, 29, .42);
	opacity: 0;
	transition: opacity .3s ease;
}
.vx-scrim.is-open { opacity: 1; }

.vx-panel {
	position: fixed;
	z-index: 100;
	background: var(--vx-paper);
	display: flex;
	flex-direction: column;
	transition: transform .4s var(--vx-ease), opacity .3s ease;
}
.vx-panel[hidden] { display: none; }

.vx-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--vx-header-h);
	padding: 0 var(--vx-gutter);
	border-bottom: 1px solid var(--vx-line);
}
.vx-panel__head .vx-tool { margin-right: -10px; }

/* Keep panels clear of the WordPress toolbar for logged-in admins. */
.admin-bar .vx-menu,
.admin-bar .vx-drawer,
.admin-bar .vx-search { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .vx-menu,
	.admin-bar .vx-drawer,
	.admin-bar .vx-search { top: 46px; }
}

/* Menu */
.vx-menu {
	top: 0;
	bottom: 0;
	left: 0;
	width: min(420px, 90vw);
	transform: translateX(-100%);
	overflow-y: auto;
}
.vx-menu.is-open { transform: none; }
.vx-menu .vx-wordmark { font-size: 17px; }
.vx-menu .vx-wordmark--header .vx-logo__img,
.vx-menu .vx-wordmark--header .custom-logo { height: 36px; }
.vx-menu__nav { padding: 28px var(--vx-gutter) 8px; }
.vx-menu__list { list-style: none; margin: 0; padding: 0; }
.vx-menu__list a {
	display: block;
	padding: 9px 0;
	font-family: var(--vx-serif);
	font-size: 30px;
	line-height: 1.2;
	text-decoration: none;
}
.vx-menu__secondary {
	margin-top: auto;
	padding: 24px var(--vx-gutter) 40px;
	border-top: 1px solid var(--vx-line);
	font-size: 15px;
}
.vx-menu__secondary > a { display: block; padding: 8px 0; text-decoration: none; }
.vx-menu__small { list-style: none; margin: 0; padding: 0; }
.vx-menu__small a { display: block; padding: 8px 0; text-decoration: none; color: var(--vx-mute); }

/* Search */
.vx-search {
	top: 0;
	left: 0;
	right: 0;
	transform: translateY(-100%);
	border-bottom: 1px solid var(--vx-line);
}
.vx-search.is-open { transform: none; }
.vx-search__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: var(--vx-max);
	width: 100%;
	margin-inline: auto;
	padding: 28px var(--vx-gutter);
}
.vx-search__form {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	border-bottom: 1px solid var(--vx-ink);
	padding-bottom: 10px;
}
.vx-search__form input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-family: var(--vx-serif);
	font-size: clamp(22px, 3vw, 32px);
	padding: 4px 0;
	-webkit-appearance: none;
	appearance: none;
}
.vx-search__form input[type="search"]:focus { outline: none; }
.vx-search__form:focus-within { border-bottom-color: var(--vx-rust); }

/* Bag drawer */
.vx-drawer {
	top: 0;
	right: 0;
	bottom: 0;
	width: min(440px, 100vw);
	transform: translateX(100%);
}
.vx-drawer.is-open { transform: none; }
.vx-drawer__title { font-size: 24px; margin: 0; }
.vx-drawer__status {
	margin: 0;
	padding: 0 var(--vx-gutter);
	font-size: 14px;
	color: var(--vx-mute);
}
.vx-drawer__status:not(:empty) { padding-top: 14px; }
.vx-drawer__status.is-error { color: var(--vx-error); }

.vx-drawer__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.vx-drawer__items {
	flex: 1;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 8px var(--vx-gutter);
}
.vx-drawer__item {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--vx-line);
}
.vx-drawer__item:last-child { border-bottom: 0; }
.vx-drawer__thumb { background: var(--vx-tile); aspect-ratio: 2 / 3; }
.vx-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vx-drawer__name { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.35; }
.vx-drawer__name a { text-decoration: none; }
.vx-drawer__meta { margin: 4px 0 0; font-size: 14px; color: var(--vx-mute); }
.vx-drawer__meta p, .vx-drawer__meta dl, .vx-drawer__meta dd, .vx-drawer__meta dt { display: inline; margin: 0; }
.vx-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
}
.vx-drawer__price { font-size: 15px; }
.vx-drawer__remove {
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	color: var(--vx-mute);
	text-decoration: underline;
	text-underline-offset: .3em;
	cursor: pointer;
}
.vx-drawer__remove:hover { color: var(--vx-ink); }

.vx-drawer__foot {
	padding: 20px var(--vx-gutter) 28px;
	border-top: 1px solid var(--vx-line);
	background: var(--vx-paper);
}
.vx-drawer__subtotal {
	display: flex;
	justify-content: space-between;
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 500;
}
.vx-drawer__note { margin: 0 0 18px; font-size: 13px; color: var(--vx-mute); }
.vx-drawer__view { display: block; width: fit-content; margin: 16px auto 0; font-size: 14px; }

.vx-drawer__empty { padding: 40px var(--vx-gutter); }
.vx-drawer__empty p { color: var(--vx-mute); max-width: 32ch; }

.vx-drawer__body.is-loading { opacity: .5; pointer-events: none; transition: opacity .2s; }

/* Quantity stepper */
.vx-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--vx-line);
}
.vx-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.vx-qty__btn:hover { color: var(--vx-rust); }
.vx-qty__btn:disabled { opacity: .35; cursor: not-allowed; }
.vx-qty__val { min-width: 26px; text-align: center; font-size: 14px; }

/* --------------------------------------------------------------------------
   Homepage: colonnade and introduction
   ----------------------------------------------------------------------- */

.vx-colonnade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5px;
	height: clamp(520px, calc(100svh - var(--vx-header-h) - 36px), 1040px);
	background: var(--vx-paper);
}
.vx-colonnade__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--vx-estate);
}
.vx-colonnade__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
}
.vx-colonnade__placeholder { display: block; width: 100%; height: 100%; background: var(--vx-estate); }
.vx-colonnade__item:nth-child(2) .vx-colonnade__placeholder { background: var(--vx-estate-2); }

@media (prefers-reduced-motion: no-preference) {
	.vx-colonnade__img {
		animation: vx-rise 1.6s var(--vx-ease) both;
		animation-delay: calc(var(--vx-i, 0) * 140ms);
	}
	@keyframes vx-rise {
		from { opacity: 0; transform: scale(1.06); }
		to { opacity: 1; transform: none; }
	}
}

.vx-intro {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	align-items: end;
	padding-block: clamp(56px, 8vw, 112px) clamp(24px, 4vw, 48px);
}
.vx-intro__title {
	grid-column: 1 / span 7;
	margin: 0;
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1.08;
	max-width: 15ch;
	text-wrap: balance;
}
.vx-intro__body {
	grid-column: 9 / span 4;
	font-size: 17px;
	color: var(--vx-mute);
}
.vx-intro__body p { margin-bottom: 28px; max-width: 42ch; }

@media (max-width: 900px) {
	.vx-intro { grid-template-columns: 1fr; row-gap: 24px; }
	.vx-intro__title, .vx-intro__body { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
	.vx-colonnade {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 84vw;
		height: auto;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.vx-colonnade::-webkit-scrollbar { display: none; }
	.vx-colonnade__item { aspect-ratio: 2 / 3; scroll-snap-align: start; }
}

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

.vx-section { padding-block: clamp(56px, 8vw, 112px); }
.vx-collection { padding-top: clamp(32px, 4vw, 56px); }

.vx-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(24px, 3vw, 40px);
}
.vx-section__title { margin: 0; font-size: clamp(28px, 3vw, 40px); }

/* --------------------------------------------------------------------------
   Product grid and cards
   ----------------------------------------------------------------------- */

body.vx ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(40px, 4vw, 64px) clamp(12px, 1.8vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}
body.vx ul.products::before,
body.vx ul.products::after { display: none; content: none; }

body.vx ul.products li.product.vx-card {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	text-align: left;
}

.vx-card__link { display: block; text-decoration: none; color: var(--vx-ink); }
.vx-card__link:hover { color: var(--vx-ink); }

.vx-card__media {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--vx-tile);
}
.vx-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .5s ease;
}
.vx-card__img--hover { opacity: 0; }
@media (hover: hover) {
	.vx-card__link:hover .has-hover .vx-card__img--hover { opacity: 1; }
}
.vx-card__flag {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 9px;
	background: var(--vx-paper);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
}

.vx-card__text {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	flex-wrap: wrap;
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.4;
}
.vx-card__name { font-weight: 500; }
.vx-card__link:hover .vx-card__name { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.vx-card__price { color: var(--vx-mute); white-space: nowrap; }

.price del { color: var(--vx-mute); opacity: .8; margin-right: 6px; }
.price ins { text-decoration: none; }
.vx-price-pending { color: var(--vx-mute); }

@media (max-width: 1080px) {
	body.vx ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	body.vx ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
	.vx-card__text { flex-direction: column; gap: 2px; margin-top: 10px; }
}

/* --------------------------------------------------------------------------
   Story split
   ----------------------------------------------------------------------- */

.vx-story {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: min(88svh, 960px);
	background: var(--vx-stone);
}
.vx-story__media { position: relative; overflow: hidden; background: var(--vx-estate); }
.vx-plx {
	position: absolute;
	inset: -7% 0;
	display: block;
	transform: translate3d(0, var(--vx-py, 0px), 0);
	will-change: transform;
}
.vx-story__img,
.vx-story__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
.vx-story__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 7vw, 120px);
}
.vx-story__title { font-size: clamp(32px, 3.6vw, 52px); max-width: 14ch; margin-bottom: 24px; }
.vx-story__copy p { font-size: 17px; max-width: 44ch; margin-bottom: 28px; color: var(--vx-ink); }

@media (max-width: 900px) {
	.vx-story { grid-template-columns: 1fr; }
	.vx-story__media { aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------------------
   Category index
   ----------------------------------------------------------------------- */

.vx-index__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	align-items: start;
}
.vx-index .vx-section__title { grid-column: 1 / -1; margin-bottom: clamp(24px, 3vw, 40px); }
.vx-index__list {
	grid-column: 1 / span 7;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--vx-line);
}
.vx-index__list li { border-top: 1px solid var(--vx-line); }
.vx-index__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(14px, 2vw, 22px) 0;
	text-decoration: none;
	color: var(--vx-ink);
}
.vx-index__name {
	font-family: var(--vx-serif);
	font-size: clamp(28px, 4vw, 52px);
	line-height: 1.1;
	transition: transform .4s var(--vx-ease), color .2s ease;
}
.vx-index__count { font-size: 14px; color: var(--vx-mute); white-space: nowrap; }
.vx-index__link:hover .vx-index__name,
.vx-index__link:focus-visible .vx-index__name { color: var(--vx-rust); transform: translateX(10px); }

.vx-index__preview {
	grid-column: 9 / span 4;
	position: sticky;
	top: calc(var(--vx-header-h) + 32px);
	aspect-ratio: 2 / 3;
	background: var(--vx-tile);
	overflow: hidden;
}
.vx-index__preview img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
	.vx-index__list { grid-column: 1 / -1; }
	.vx-index__preview { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.vx-index__link:hover .vx-index__name { transform: none; }
}

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

/* Newsletter band in estate green; the rest of the footer on limestone so the
   rust logo appears exactly as drawn. */
.vx-footer {
	background: var(--vx-stone-2);
	color: var(--vx-ink);
	margin-top: clamp(40px, 5vw, 72px);
}
body.home .vx-footer { margin-top: 0; }
.vx-footer a { color: var(--vx-ink); text-decoration: none; }
.vx-footer a:hover { color: var(--vx-rust); }

.vx-footer__news {
	padding-block: clamp(56px, 7vw, 96px);
	background: var(--vx-estate);
	color: var(--vx-paper);
}
.vx-footer__news :focus-visible { outline-color: var(--vx-sand); }
.vx-footer__news-inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 28px;
	align-items: end;
}
.vx-footer__news-copy { grid-column: 1 / span 6; }
.vx-footer__news-title { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 12px; }
.vx-footer__news-copy p { margin: 0; color: var(--vx-sand); max-width: 42ch; }
.vx-footer__news .vx-newsletter { grid-column: 8 / span 5; }

.vx-newsletter__label { display: block; font-size: 13px; color: var(--vx-sand); margin-bottom: 8px; }
.vx-newsletter__row { display: flex; gap: 12px; align-items: stretch; }
.vx-newsletter__input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0 2px;
	border: 0;
	border-bottom: 1px solid var(--vx-sand);
	border-radius: 0;
	background: transparent;
	color: var(--vx-paper);
	font-size: 17px;
}
.vx-newsletter__input::placeholder { color: rgba(255, 255, 255, .45); }
.vx-newsletter__input:focus { outline: none; border-bottom-color: var(--vx-paper); }
.vx-newsletter .vx-form-msg { color: var(--vx-sand); }
.vx-newsletter .vx-form-msg.is-error { color: #f0c9bf; }

.vx-footer__main {
	display: grid;
	grid-template-columns: 2fr repeat(3, 1fr);
	gap: 32px 24px;
	padding-block: 56px 48px;
}
.vx-footer__brand .vx-wordmark { font-size: 20px; color: var(--vx-rust); }
.vx-footer__brand .vx-logo:hover { opacity: .85; }
.vx-footer__note { margin: 14px 0 0; color: var(--vx-mute); font-size: 14px; }
.vx-footer__heading {
	font-family: var(--vx-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--vx-mute);
	margin: 0 0 14px;
}
.vx-footer__list,
.vx-footer__social { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.vx-footer__list li,
.vx-footer__social li { margin-bottom: 8px; }
.vx-footer__social a { display: inline-flex; align-items: center; gap: 10px; }

.vx-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-block: 20px 28px;
	border-top: 1px solid var(--vx-line);
	font-size: 13px;
	color: var(--vx-mute);
}
.vx-footer__base p { margin: 0; }
.vx-footer__base a { color: var(--vx-mute); }
.vx-footer__base a:hover { color: var(--vx-rust); }

@media (max-width: 900px) {
	.vx-footer__news-copy,
	.vx-footer__news .vx-newsletter { grid-column: 1 / -1; }
	.vx-footer__main { grid-template-columns: 1fr 1fr; }
	.vx-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	.vx-newsletter__row { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Forms
   ----------------------------------------------------------------------- */

.vx-form-msg { min-height: 1.6em; margin: 12px 0 0; font-size: 14px; }
.vx-form-msg.is-error { color: var(--vx-error); }

.vx-field { margin-bottom: 20px; }
.vx-field label,
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}
.vx-optional { color: var(--vx-mute); font-weight: 400; }

.vx-field input,
.vx-field textarea,
.vx-field select,
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row .input-text,
.woocommerce-page form .form-row select,
.woocommerce .quantity .qty,
.woocommerce-cart table.cart td.actions .coupon .input-text,
#order_comments {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--vx-field);
	border-radius: 0;
	background: var(--vx-paper);
	font-size: 16px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}
.vx-field textarea,
.woocommerce form .form-row textarea { min-height: 140px; resize: vertical; }
.vx-field input:focus,
.vx-field textarea:focus,
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce .quantity .qty:focus {
	outline: none;
	border-color: var(--vx-ink);
	box-shadow: inset 0 0 0 1px var(--vx-ink);
}

select,
.woocommerce form .form-row select,
.woocommerce-ordering select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a221d' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
}

.vx-contact { max-width: 560px; margin-top: 32px; }

/* --------------------------------------------------------------------------
   Pages
   ----------------------------------------------------------------------- */

.vx-page__head { padding-block: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 32px); }
.vx-page__title { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.08; margin: 0; }

.vx-page--editorial .vx-page__content { max-width: calc(720px + 2 * var(--vx-gutter)); margin-inline: 0; }

.vx-prose { font-size: 17px; line-height: 1.7; }
.vx-prose > * { max-width: 66ch; }
.vx-prose h2 { font-size: 28px; margin-top: 1.6em; }
.vx-prose h3 { font-size: 22px; margin-top: 1.4em; }
.vx-prose ul, .vx-prose ol { padding-left: 1.2em; }
.vx-prose li { margin-bottom: .4em; }
.vx-prose img { margin-block: 1.5em; }
.vx-prose a { text-decoration: underline; }
.vx-prose strong { font-weight: 600; }

.vx-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
}
.vx-split__media {
	position: sticky;
	top: var(--vx-header-h);
	margin: 0;
	height: calc(100svh - var(--vx-header-h));
	background: var(--vx-tile);
	overflow: hidden;
}
.vx-split__img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.vx-split__copy { padding: clamp(40px, 7vw, 120px) clamp(24px, 6vw, 96px); }
.vx-split__copy .vx-page__title { margin-bottom: 32px; }

@media (max-width: 900px) {
	.vx-split { grid-template-columns: 1fr; }
	.vx-split__media { position: relative; top: 0; height: auto; aspect-ratio: 4 / 5; }
}

.vx-empty { padding-block: clamp(64px, 10vw, 140px); max-width: calc(620px + 2 * var(--vx-gutter)); margin-inline: 0; }
.vx-empty p { font-size: 17px; color: var(--vx-mute); margin: 20px 0 32px; }
.vx-empty__actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.vx-empty--inline { padding-block: 32px 64px; padding-inline: 0; }
.vx-empty--inline p { margin-top: 0; }

/* Journal fallback */
.vx-meta { font-size: 14px; color: var(--vx-mute); }
.vx-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; padding-bottom: 64px; }
.vx-post__link { text-decoration: none; }
.vx-post__title { font-size: 24px; margin: 16px 0 4px; }
.vx-single { max-width: 720px; padding-bottom: 64px; }
@media (max-width: 760px) { .vx-posts { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Shop archive
   ----------------------------------------------------------------------- */

.vx-archive { padding-bottom: clamp(24px, 4vw, 48px); }
.vx-archive__head { padding-block: clamp(40px, 6vw, 80px) clamp(16px, 2vw, 24px); }
.vx-archive__desc { margin-top: 16px; max-width: 60ch; color: var(--vx-mute); font-size: 17px; }
.vx-archive__desc p:last-child { margin-bottom: 0; }
.vx-archive__count { margin: 0; font-size: 14px; color: var(--vx-mute); white-space: nowrap; }

.vx-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	padding-block: 16px;
	margin-bottom: clamp(28px, 3vw, 40px);
	border-top: 1px solid var(--vx-line);
	border-bottom: 1px solid var(--vx-line);
}
.vx-toolbar__right { display: flex; align-items: center; gap: 24px; }

.vx-catnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}
.vx-catnav a { text-decoration: none; color: var(--vx-mute); padding: 6px 0; }
.vx-catnav a:hover { color: var(--vx-ink); }
.vx-catnav a[aria-current="page"] {
	color: var(--vx-ink);
	text-decoration: underline;
	text-underline-offset: .45em;
}

.woocommerce-ordering { margin: 0 !important; float: none !important; }
.woocommerce-ordering select {
	min-height: 40px;
	padding: 6px 34px 6px 0;
	border: 0;
	border-bottom: 1px solid var(--vx-field);
	border-radius: 0;
	background-color: transparent;
	background-position: right 4px center;
	font-size: 14px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.woocommerce-pagination,
.vx-pagination { margin-top: 56px; }
.woocommerce-pagination ul.page-numbers,
.vx-pagination .nav-links {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0 !important;
}
.woocommerce-pagination ul.page-numbers li { border: 0 !important; }
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	text-decoration: none;
	font-size: 14px;
}
.page-numbers.current { border-bottom: 1px solid var(--vx-ink); }

@media (max-width: 760px) {
	.vx-toolbar { flex-direction: column; align-items: flex-start; }
	.vx-catnav { width: 100%; overflow-x: auto; scrollbar-width: none; }
	.vx-catnav ul { flex-wrap: nowrap; white-space: nowrap; }
	.vx-toolbar__right { width: 100%; justify-content: space-between; }
}

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

.vx-product__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: start;
}

.vx-gallery { position: relative; min-width: 0; }
.vx-gallery__track {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}
.vx-gallery__track:focus-visible { outline-offset: -2px; }
.vx-gallery__item { margin: 0; background: var(--vx-tile); }
.vx-gallery__item:first-child { grid-column: 1 / -1; }
.vx-gallery__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}
.vx-gallery__img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.vx-gallery__count { display: none; }

.vx-summary { min-width: 0; }
/* WooCommerce's layout sheet floats .summary at 48%; the grid owns layout here. */
body.vx div.product div.summary.vx-summary { float: none; width: auto; margin: 0; clear: none; }
.vx-summary__inner {
	position: sticky;
	top: calc(var(--vx-header-h) + 8px);
	max-width: 500px;
	padding: clamp(28px, 4vw, 64px) clamp(20px, 4vw, 64px) 48px;
}
.vx-summary__cat {
	display: inline-block;
	font-size: 14px;
	color: var(--vx-mute);
	text-decoration: none;
	margin-bottom: 14px;
}
.vx-summary__cat:hover { text-decoration: underline; color: var(--vx-ink); }
.vx-summary__title { font-size: clamp(30px, 3vw, 42px); line-height: 1.12; margin: 0 0 14px; }
.vx-summary__price { font-size: 18px; margin: 0 0 24px; }
.vx-summary__intro { color: var(--vx-mute); margin-bottom: 24px; }
.vx-summary__intro p:last-child { margin-bottom: 0; }

.vx-unavailable {
	padding: 20px;
	margin-bottom: 28px;
	background: var(--vx-stone-2);
	font-size: 15px;
}
.vx-unavailable p { margin-bottom: 16px; color: var(--vx-mute); }

/* Variation form */
.vx-summary form.cart { margin: 0 0 28px; }
.vx-summary table.variations,
.vx-summary table.variations tbody,
.vx-summary table.variations tr,
.vx-summary table.variations th,
.vx-summary table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	text-align: left;
	background: none;
}
.vx-summary table.variations { margin-bottom: 4px; }
.vx-summary table.variations tr + tr { margin-top: 20px; }
.vx-summary table.variations th.label { margin-bottom: 10px; }
.vx-summary table.variations label { font-size: 14px; font-weight: 500; }
.vx-summary table.variations label .vx-chosen { font-weight: 400; color: var(--vx-mute); margin-left: 6px; }
.vx-summary table.variations select {
	width: 100%;
	min-height: 48px;
	padding: 0 38px 0 14px;
	border: 1px solid var(--vx-field);
	border-radius: 0;
	background-color: var(--vx-paper);
	-webkit-appearance: none;
	appearance: none;
}
.vx-summary table.variations select.vx-enhanced { display: none; }
.vx-summary .reset_variations { display: none !important; }

.vx-sizes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 8px;
}
.vx-size {
	min-height: 48px;
	padding: 0 8px;
	border: 1px solid var(--vx-line);
	background: var(--vx-paper);
	font-size: 14px;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.vx-size:hover { border-color: var(--vx-ink); }
.vx-size[aria-pressed="true"] {
	border-color: var(--vx-ink);
	background: var(--vx-ink);
	color: var(--vx-paper);
}
.vx-size:disabled,
.vx-size.is-unavailable {
	color: var(--vx-mute);
	text-decoration: line-through;
	cursor: not-allowed;
	opacity: .6;
}
.vx-size-msg { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--vx-error); }
/* Before a size is chosen the button stays at full strength; a click explains what's needed. */
.vx-summary .single_add_to_cart_button.wc-variation-selection-needed { opacity: 1; cursor: pointer; }

.vx-summary .single_variation_wrap .woocommerce-variation-price { margin-bottom: 12px; font-size: 16px; }
.vx-summary .woocommerce-variation-availability p,
.vx-summary .stock { font-size: 14px; color: var(--vx-mute); margin: 0 0 12px; }
.vx-summary .stock.out-of-stock { color: var(--vx-error); }
.vx-summary .quantity { display: none !important; }
.vx-summary .single_add_to_cart_button,
.vx-summary .woocommerce-variation-add-to-cart,
.vx-summary form.cart:not(.variations_form) { width: 100%; }
.vx-summary .single_add_to_cart_button { min-height: 54px; font-size: 15px; float: none !important; }
.vx-summary .woocommerce-variation-add-to-cart { display: flex; }

.vx-summary .product_meta { display: none; }

/* Accordions */
.vx-accordions { border-bottom: 1px solid var(--vx-line); }
.vx-acc { border-top: 1px solid var(--vx-line); }
.vx-acc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.vx-acc summary::-webkit-details-marker { display: none; }
.vx-acc summary .vx-icon { transition: transform .3s var(--vx-ease); flex: none; }
.vx-acc[open] summary .vx-icon { transform: rotate(45deg); }
.vx-acc__body { padding-bottom: 22px; font-size: 15px; color: var(--vx-mute); }
.vx-acc__body.vx-prose { font-size: 15px; line-height: 1.65; }

.vx-product__after { padding-top: clamp(56px, 8vw, 112px); }
.vx-product__after > section > h2,
.related > h2,
.upsells > h2,
.cross-sells > h2 {
	font-size: clamp(28px, 3vw, 40px);
	margin: 0 0 clamp(24px, 3vw, 40px);
}
.vx-product__after .up-sells { margin-bottom: clamp(56px, 7vw, 96px); }

/* Lightbox */
.vx-lightbox {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--vx-paper);
}
.vx-lightbox::backdrop { background: var(--vx-paper); }
.vx-lightbox img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-out; }
.vx-lightbox__close { position: fixed; top: 16px; right: 16px; background: var(--vx-paper); }

@media (max-width: 900px) {
	.vx-product__grid { grid-template-columns: 1fr; }
	.vx-gallery__track {
		display: flex;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.vx-gallery__track::-webkit-scrollbar { display: none; }
	.vx-gallery__item { flex: 0 0 100%; scroll-snap-align: start; }
	.vx-gallery__count {
		display: block;
		position: absolute;
		right: 12px;
		bottom: 12px;
		margin: 0;
		padding: 3px 10px;
		background: var(--vx-paper);
		font-size: 13px;
	}
	.vx-summary__inner { position: static; max-width: none; padding: 28px var(--vx-gutter) 16px; }
}

/* --------------------------------------------------------------------------
   WooCommerce notices
   ----------------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	position: relative;
	list-style: none;
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid var(--vx-line);
	background: var(--vx-stone-2);
	font-size: 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-error { border-color: var(--vx-error); color: var(--vx-error); display: block; }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button,
.woocommerce-info .button { order: 2; min-height: 40px; padding: 0 18px; }
.single-product .woocommerce-notices-wrapper { max-width: var(--vx-max); margin-inline: auto; padding-inline: var(--vx-gutter); }
.single-product .woocommerce-notices-wrapper:not(:empty) { padding-top: 20px; }

/* --------------------------------------------------------------------------
   Bag (cart), checkout, account
   ----------------------------------------------------------------------- */

.vx-page--store .vx-page__content { padding-bottom: 32px; }

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0 0 32px;
	font-size: 15px;
}
.woocommerce table.shop_table th {
	padding: 0 12px 12px 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--vx-mute);
	text-align: left;
	border-bottom: 1px solid var(--vx-line);
}
.woocommerce table.shop_table td {
	padding: 20px 12px 20px 0;
	border-bottom: 1px solid var(--vx-line);
	vertical-align: middle;
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td { padding-block: 14px; color: var(--vx-ink); font-size: 15px; }
.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td { font-size: 17px; font-weight: 500; }

.woocommerce-cart table.cart img { width: 88px; aspect-ratio: 2 / 3; object-fit: cover; background: var(--vx-tile); }
.woocommerce-cart table.cart .product-name a { text-decoration: none; font-weight: 500; }
.woocommerce-cart table.cart .product-name .variation { margin: 6px 0 0; font-size: 14px; color: var(--vx-mute); }
.woocommerce-cart table.cart .product-name .variation dt,
.woocommerce-cart table.cart .product-name .variation dd,
.woocommerce-cart table.cart .product-name .variation p { display: inline; margin: 0; }
.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: 22px;
	line-height: 1;
	color: var(--vx-mute) !important;
	text-decoration: none;
	border-radius: 0;
}
.woocommerce a.remove:hover { background: var(--vx-stone-2); color: var(--vx-ink) !important; }
.woocommerce .quantity .qty { width: 72px; min-height: 44px; text-align: center; padding: 8px; }
.woocommerce-cart table.cart td.actions { padding-top: 24px; }
.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 8px; align-items: stretch; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 200px; }
.woocommerce-cart table.cart td.actions .coupon label { position: absolute; left: -9999px; }

.cart-collaterals .cart_totals h2,
.woocommerce-checkout h3,
#order_review_heading,
.woocommerce-account h2 { font-size: 26px; margin: 0 0 20px; }
.wc-proceed-to-checkout { padding: 0; }
.wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 54px; }
.cart-collaterals .cart_totals { background: var(--vx-stone-2); padding: 28px; }
.cart-collaterals .cart_totals table.shop_table td,
.cart-collaterals .cart_totals table.shop_table th { border-color: var(--vx-line); }
.cart-collaterals .cart_totals table.shop_table th,
#order_review table.shop_table tfoot th { font-size: 15px; font-weight: 400; color: var(--vx-ink); }

.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.woocommerce-shipping-methods li { margin-bottom: 6px; }

/* Checkout */
.woocommerce form .form-row { margin: 0 0 18px; padding: 0; }
.woocommerce form .form-row .required { color: var(--vx-error); text-decoration: none; }
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--vx-error); }
.select2-container .select2-selection--single {
	height: 48px !important;
	border: 1px solid var(--vx-field) !important;
	border-radius: 0 !important;
}
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px !important; padding-left: 14px !important; }
.select2-container .select2-selection--single .select2-selection__arrow { height: 46px !important; right: 8px !important; }
.select2-dropdown { border-color: var(--vx-field) !important; border-radius: 0 !important; }
.select2-results__option--highlighted { background: var(--vx-ink) !important; }

#customer_details { margin-bottom: 40px; }

/* Wide screens: details on the left, order summary held beside them. */
@media (min-width: 1000px) {
	body.vx form.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: clamp(32px, 4vw, 64px);
		align-items: start;
	}
	body.vx form.woocommerce-checkout > * { grid-column: 1 / -1; }
	body.vx form.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 2 / span 2; margin-bottom: 0; }
	body.vx form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 2; }
	body.vx form.woocommerce-checkout #order_review {
		grid-column: 2;
		grid-row: 3;
		position: sticky;
		top: calc(var(--vx-header-h) + 24px);
	}
	body.vx form.woocommerce-checkout .col2-set .col-1,
	body.vx form.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
	body.vx form.woocommerce-checkout .col2-set .col-2 { margin-top: 24px; }
}
#order_review { background: var(--vx-stone-2); padding: 28px; }
#payment { background: transparent; }
#payment ul.payment_methods { list-style: none; margin: 0 0 20px; padding: 0; }
#payment ul.payment_methods li { padding: 14px 0; border-bottom: 1px solid var(--vx-line); }
#payment ul.payment_methods li label { font-weight: 500; }
#payment .payment_box { padding: 12px 0 0; font-size: 14px; color: var(--vx-mute); }
#payment .place-order { padding: 20px 0 0; margin: 0; }
#place_order { width: 100%; min-height: 56px; font-size: 15px; float: none; }
.woocommerce-terms-and-conditions-wrapper { font-size: 14px; color: var(--vx-mute); margin-bottom: 16px; }
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info { display: block; }

/* Account */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--vx-line); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--vx-line); }
.woocommerce-MyAccount-navigation a { display: block; padding: 12px 0; text-decoration: none; font-size: 15px; }
.woocommerce-MyAccount-navigation .is-active a { font-weight: 600; }
.woocommerce-form-login,
.woocommerce-form-register {
	border: 1px solid var(--vx-line) !important;
	border-radius: 0 !important;
	padding: 28px !important;
}
.woocommerce-form-login__rememberme { display: block; margin: 8px 0 16px; font-size: 14px; }
.woocommerce-LostPassword { font-size: 14px; }

/* Reviews inside the accordion */
#reviews .commentlist { list-style: none; margin: 0; padding: 0; }
#reviews .comment_container { padding: 14px 0; border-bottom: 1px solid var(--vx-line); }
#reviews .avatar { display: none; }
.star-rating { color: var(--vx-rust); }


/* --------------------------------------------------------------------------
   Opening film
   ----------------------------------------------------------------------- */

.vx-hero--video {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 560px;
	height: calc(100svh - var(--vx-header-h));
	max-height: 1100px;
	overflow: hidden;
	background: var(--vx-estate);
	color: var(--vx-paper);
	isolation: isolate;
}
.vx-has-announcement .vx-hero--video { height: calc(100svh - var(--vx-header-h) - 36px); }
.vx-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translate3d(0, var(--vx-hy, 0px), 0) scale(var(--vx-hs, 1));
	transform-origin: center 40%;
	will-change: transform;
}
.vx-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% 40%;
	background: var(--vx-estate);
}
.vx-hero__tint { position: absolute; inset: 0; background: #0e1410; pointer-events: none; }
.vx-hero__content {
	position: relative;
	padding-bottom: clamp(56px, 9vh, 112px);
	opacity: var(--vx-ho, 1);
	transform: translate3d(0, var(--vx-hc, 0px), 0);
}
.vx-hero__title {
	margin: 0 0 32px;
	font-size: clamp(42px, 7vw, 104px);
	line-height: 1.02;
	letter-spacing: .01em;
	max-width: 12ch;
	color: var(--vx-paper);
	text-wrap: balance;
}
.vx-hero__cta { min-width: 220px; }
.vx-hero__toggle {
	position: absolute;
	right: var(--vx-gutter);
	bottom: clamp(56px, 9vh, 112px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 50%;
	background: transparent;
	color: var(--vx-paper);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.vx-hero__toggle:hover { background: var(--vx-paper); color: var(--vx-ink); }
.vx-hero--video :focus-visible { outline-color: var(--vx-paper); }

/* Scroll cue: a fine line with a travelling point. */
.vx-hero__cue {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: clamp(40px, 7vh, 72px);
	background: rgba(255, 255, 255, .35);
	overflow: hidden;
}
.vx-hero__cue span {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 40%;
	background: var(--vx-paper);
}
@media (prefers-reduced-motion: no-preference) {
	.vx-hero__cue span { animation: vx-cue 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
	@keyframes vx-cue {
		0% { transform: translateY(-100%); }
		100% { transform: translateY(260%); }
	}
}

@media (max-width: 760px) {
	.vx-hero--video,
	.vx-has-announcement .vx-hero--video { height: 86svh; min-height: 520px; }
	.vx-hero__title { margin-bottom: 24px; }
	.vx-hero__cta { min-width: 0; }
	.vx-hero__toggle { bottom: auto; top: 16px; width: 40px; height: 40px; }
}

/* Header over the film: clear at the top of the homepage, white from the
   first scroll (the script adds .is-solid). Without JavaScript the header
   stays white, so it is never left clear over white content. */
.vx-js .vx-overlay-header .vx-header {
	transition: background-color .45s ease, border-color .45s ease, color .45s ease;
}
.vx-js .vx-overlay-header .vx-header:not(.is-solid):not(:has(:focus-visible)) {
	background: transparent;
	border-bottom-color: transparent;
	color: var(--vx-paper);
}
.vx-js .vx-overlay-header .vx-header:not(.is-solid):not(:has(:focus-visible)) .vx-tool,
.vx-js .vx-overlay-header .vx-header:not(.is-solid):not(:has(:focus-visible)) .vx-nav__list a,
.vx-js .vx-overlay-header .vx-header:not(.is-solid):not(:has(:focus-visible)) .vx-wordmark__text { color: var(--vx-paper); }
.vx-js .vx-overlay-header .vx-header:not(.is-solid):not(:has(:focus-visible)) .vx-bag-count {
	background: var(--vx-paper);
	color: var(--vx-ink);
}
.vx-header .vx-tool,
.vx-header .vx-nav__list a { transition: color .45s ease, background-size .3s var(--vx-ease); }

/* The film starts under the header and fills the screen. */
.vx-js .vx-overlay-header .vx-hero--video {
	margin-top: calc(-1 * var(--vx-header-h) - 1px); /* header height plus its 1px border */
	height: 100svh;
}
.vx-js .vx-overlay-header.vx-has-announcement .vx-hero--video { height: calc(100svh - 36px); }

/* A light shade behind the header only, so the icons read over bright sky. */
.vx-js .vx-overlay-header .vx-hero--video::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: calc(var(--vx-header-h) * 2.2);
	background: linear-gradient(to bottom, rgba(14, 20, 16, .38), rgba(14, 20, 16, 0));
	pointer-events: none;
}

/* Larger logo while the header is clear over the film; it eases back to its
   usual size on the first scroll. Scaled with a transform so nothing on the
   page moves, and drawn from a high-resolution file so it stays sharp. */
.vx-js .vx-overlay-header .vx-header .vx-wordmark--header > a {
	transform-origin: 50% 0;
	transition: transform .6s var(--vx-ease);
}
.vx-js .vx-overlay-header .vx-header:not(.is-solid):not(:has(:focus-visible)) .vx-wordmark--header > a {
	transform: translateY(6px) scale(2);
}
@media (max-width: 1279px) {
	.vx-js .vx-overlay-header .vx-header:not(.is-solid):not(:has(:focus-visible)) .vx-wordmark--header > a { transform: translateY(6px) scale(1.75); }
}
@media (max-width: 600px) {
	.vx-js .vx-overlay-header .vx-header:not(.is-solid):not(:has(:focus-visible)) .vx-wordmark--header > a { transform: translateY(4px) scale(1.45); }
}
@media (prefers-reduced-motion: reduce) {
	.vx-js .vx-overlay-header .vx-header .vx-wordmark--header > a { transition: none; }
}

/* Optional second logo for the clear header (Customise → VÀREUX → Homepage: opening). */
.vx-wordmark--film .vx-logo,
.vx-wordmark--film .custom-logo-link { position: relative; }
.vx-logo__film {
	position: absolute;
	top: 0;
	left: 50%;
	width: auto;
	height: 100%;
	max-width: none;
	transform: translateX(-50%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s ease;
}
.vx-wordmark--film .vx-logo__img,
.vx-wordmark--film .custom-logo { transition: opacity .45s ease; }
.vx-js .vx-overlay-header .vx-header:not(.is-solid):not(:has(:focus-visible)) .vx-wordmark--film .vx-logo__film { opacity: 1; }
.vx-js .vx-overlay-header .vx-header:not(.is-solid):not(:has(:focus-visible)) .vx-wordmark--film .vx-logo__img,
.vx-js .vx-overlay-header .vx-header:not(.is-solid):not(:has(:focus-visible)) .vx-wordmark--film .custom-logo { opacity: 0; }

@media (max-width: 760px) {
	.vx-js .vx-overlay-header .vx-hero--video,
	.vx-js .vx-overlay-header.vx-has-announcement .vx-hero--video { height: calc(86svh + var(--vx-header-h)); }
	.vx-js .vx-overlay-header .vx-hero__toggle { top: calc(var(--vx-header-h) + 16px); }
}

/* --------------------------------------------------------------------------
   Shop the look
   ----------------------------------------------------------------------- */

.vx-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--vx-line);
	border-radius: 50%;
	background: var(--vx-paper);
	color: var(--vx-ink);
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.vx-arrow:hover { border-color: var(--vx-ink); background: var(--vx-ink); color: var(--vx-paper); }

.vx-looks__nav { display: flex; align-items: center; gap: 14px; }
.vx-looks__count { margin: 0; min-width: 44px; text-align: center; font-size: 14px; color: var(--vx-mute); font-variant-numeric: tabular-nums; }

.vx-looks__stage { display: grid; }
.vx-look {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
	transition: opacity .7s ease, visibility 0s linear .7s;
}
.vx-look:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; }
.vx-look.is-active { transition: opacity .7s ease .1s, visibility 0s; }

.vx-look__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--vx-tile);
}
.vx-look__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.vx-hotspot {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vx-ink);
	cursor: pointer;
	transform: translate(-22px, -50%);
}
.vx-hotspot__dot {
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}
.vx-hotspot__dot::before,
.vx-hotspot__dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
/* Outer ring (white, translucent) with a solid centre. */
.vx-hotspot__dot::before {
	width: 30px;
	height: 30px;
	background: rgba(255, 255, 255, .45);
	border: 1px solid rgba(255, 255, 255, .9);
	transition: width .3s var(--vx-ease), height .3s var(--vx-ease), background-color .3s ease;
}
.vx-hotspot__dot::after {
	width: 10px;
	height: 10px;
	background: var(--vx-paper);
	transition: background-color .3s ease, width .3s var(--vx-ease), height .3s var(--vx-ease);
}
.vx-hotspot:hover .vx-hotspot__dot::before,
.vx-hotspot:focus-visible .vx-hotspot__dot::before { width: 36px; height: 36px; background: rgba(255, 255, 255, .7); }
.vx-hotspot.is-active .vx-hotspot__dot::before { background: var(--vx-paper); }
.vx-hotspot.is-active .vx-hotspot__dot::after { background: var(--vx-ink); width: 8px; height: 8px; }
.vx-hotspot:focus-visible { outline: none; }
.vx-hotspot:focus-visible .vx-hotspot__dot { outline: 2px solid var(--vx-paper); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
	.vx-hotspot:not(.is-active) .vx-hotspot__dot::before { animation: vx-breathe 2.8s ease-in-out infinite; }
	@keyframes vx-breathe {
		0%, 100% { transform: translate(-50%, -50%) scale(1); }
		50% { transform: translate(-50%, -50%) scale(1.18); }
	}
}

.vx-hotspot__label {
	padding: 7px 12px;
	background: var(--vx-paper);
	border: 1px solid var(--vx-line);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .25s ease, transform .3s var(--vx-ease);
	pointer-events: none;
}
.vx-hotspot:hover .vx-hotspot__label,
.vx-hotspot:focus-visible .vx-hotspot__label { opacity: 1; transform: none; }

.vx-look__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
}
.vx-look__items { display: grid; width: 100%; max-width: 340px; }
.vx-look__item { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; }
.vx-look__item[hidden] { display: none; }
.vx-look__item.is-entering { animation: vx-item-in .6s var(--vx-ease) both; }
@keyframes vx-item-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}
.vx-look__thumb { display: block; width: 100%; aspect-ratio: 2 / 3; background: var(--vx-tile); overflow: hidden; margin-bottom: 20px; }
.vx-look__thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--vx-ease); }
.vx-look__thumb:hover .vx-look__thumb-img { transform: scale(1.03); }
.vx-look__name { font-size: 24px; margin: 0 0 6px; }
.vx-look__name a { text-decoration: none; }
.vx-look__price { margin: 0 0 20px; color: var(--vx-mute); }
.vx-look__step { display: flex; align-items: center; gap: 16px; }
.vx-look__count { margin: 0; font-size: 13px; color: var(--vx-mute); }

@media (hover: none) {
	.vx-hotspot__label { display: none; }
}
@media (max-width: 900px) {
	.vx-look { grid-template-columns: 1fr; }
	.vx-look__items { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
	.vx-look, .vx-look.is-active { transition: none; }
	.vx-look__item.is-entering { animation: none; }
}

/* --------------------------------------------------------------------------
   Scroll motion (only when .vx-motion is set: JavaScript on and motion allowed)
   ----------------------------------------------------------------------- */

.vx-motion [data-vx-reveal] {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity 1s var(--vx-ease), transform 1.2s var(--vx-ease);
	transition-delay: var(--vx-d, 0ms);
}
.vx-motion [data-vx-reveal].is-in { opacity: 1; transform: none; }

/* Photos open like a curtain and settle from a slight zoom. */
.vx-motion [data-vx-curtain] {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.5s cubic-bezier(.7, 0, .2, 1);
}
.vx-motion [data-vx-curtain] img { transform: scale(1.12); transition: transform 2s var(--vx-ease); }
.vx-motion [data-vx-curtain].is-in { clip-path: inset(0); }
.vx-motion [data-vx-curtain].is-in img { transform: none; }
.vx-motion .vx-look__media[data-vx-curtain] .vx-hotspot { opacity: 0; transition: opacity .6s ease 1.2s; }
.vx-motion .vx-look__media[data-vx-curtain].is-in .vx-hotspot { opacity: 1; }

/* Headings rise word by word. */
.vx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.vx-w > span { display: inline-block; }
.vx-motion [data-vx-split] .vx-w > span {
	transform: translate3d(0, 105%, 0);
	transition: transform 1.1s var(--vx-ease);
	transition-delay: calc(var(--vx-wi, 0) * 60ms + var(--vx-d, 0ms));
}
.vx-motion [data-vx-split].is-in .vx-w > span { transform: none; }

/* Product photos ease in on hover. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.vx-card__img { transition: opacity .5s ease, transform 1.2s var(--vx-ease); }
	.vx-card__link:hover .vx-card__img { transform: scale(1.035); }
}