/**
 * Cactus Vintage — storefront styles. Mobile first; desktop from 1024px.
 *
 * Layout follows Rokit (promise strip, centred logo, department band, mega
 * panels, collection head with chips, facet row, product card on a tinted
 * panel). Branding is Cactus Vintage's own: saguaro green on off-white,
 * cactus-flower pink only for sale, Rye (the western slab of their logo)
 * for the wordmark and headlines, DM Sans for the interface, Space Mono for
 * prices and labels.
 *
 * Order: fonts · tokens · base · buttons · header · drawers · layout ·
 * homepage · cards · listings · product page · pages · WooCommerce.
 */

/* ------------------------------------------------------------- fonts -- */

@font-face {
	font-family: "Rye";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/rye-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Rye";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/rye-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("../fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Space Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/space-mono-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Space Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/space-mono-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Space Mono";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/space-mono-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------ tokens -- */

:root {
	--green: #1f4d3a;       /* saguaro — nav band, buttons, headings */
	--green-dark: #163a2b;
	--green-ink: #10241b;   /* footer, promise strip */
	--sage: #a9c3a0;
	--sage-soft: #e8efe3;   /* tinted panels */
	--sage-line: #cddbc6;
	--cream: #faf8f3;       /* page */
	--photo: #ecebe6;       /* ground behind product photos */
	--ink: #16201b;
	--muted: #5d6a62;
	--line: #dcded4;
	--pink: #e4578a;        /* cactus flower — sale only */
	--pink-text: #b0336a;
	--danger: #b42318;

	--display: "Rye", Georgia, serif;
	--ui: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--gutter: 16px;
	/* Content width: 1360 px on laptops, 85% of the screen on big monitors
	   and TVs (from ~1500 px wide), never wider than 2560 px (+ the 40 px gutters). */
	--max: clamp(1360px, calc(85vw + 80px), 2640px);
	--header-h: 64px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
	:root { --gutter: 24px; }
}

@media (min-width: 1024px) {
	:root { --gutter: 40px; --header-h: 76px; }
}

/* -------------------------------------------------------------- base -- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 120px;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font: 400 16px/1.55 var(--ui);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

a:hover { color: var(--green); }

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

button { cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; }

p { margin: 0 0 1em; }

ul, ol { margin: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

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

.cv-skip {
	position: absolute;
	top: -100px; left: 8px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--green);
	color: var(--cream);
}

.cv-skip:focus { top: 8px; }

.cv-muted { color: var(--muted); }

.cv-icon { flex: none; }

.cv-link {
	color: var(--green);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cv-link-icon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ----------------------------------------------------------- buttons -- */

.cv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 24px;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font: 700 14px/1 var(--ui);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.cv-btn:hover { background: var(--ink); color: var(--cream); }

.cv-btn--green { border-color: var(--green); background: var(--green); color: var(--cream); }
.cv-btn--green:hover { border-color: var(--green-dark); background: var(--green-dark); color: var(--cream); }

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

.cv-btn--cream { border-color: var(--cream); background: var(--cream); color: var(--green); }
.cv-btn--cream:hover { border-color: var(--sage); background: var(--sage); color: var(--green-ink); }

.cv-btn--ghost-light { border-color: rgba(250, 248, 243, .7); color: var(--cream); }
.cv-btn--ghost-light:hover { border-color: var(--cream); background: var(--cream); color: var(--green); }

.cv-btn--sm { min-height: 40px; padding: 0 20px; font-size: 13px; }
.cv-btn--lg { min-height: 56px; font-size: 15px; }
.cv-btn--block { display: flex; width: 100%; }

.cv-btn.is-loading { opacity: .7; pointer-events: none; }

.cv-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

/* ------------------------------------------------------------ select -- */

.cv-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.cv-select select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: 44px;
	padding: 0 44px 0 14px;
	border: 1px solid var(--line);
	border-radius: 0;
	background: #fff;
	font-size: 15px;
	cursor: pointer;
}

.cv-select .cv-icon {
	position: absolute;
	right: 14px;
	pointer-events: none;
}

/* ------------------------------------------------------------ topbar -- */

/* The reference's strip: three promises, left / centre / right; on phones
   only the centre one. */
.cv-topbar {
	position: relative;
	min-height: 38px;
	padding: 0 var(--gutter);
	background: var(--green-ink);
	color: var(--cream);
	font: 700 12px/1.3 var(--ui);
	letter-spacing: .02em;
}

.cv-topbar__list {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	max-width: calc(var(--max) - 2 * var(--gutter));
	min-height: 38px;
	margin: 0 auto;
	list-style: none;
}

.cv-topbar__list li { display: none; justify-self: center; }
.cv-topbar__list li:nth-child(2) { display: block; }
.cv-topbar__list a { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.cv-topbar__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cv-topbar__list .cv-icon { color: var(--sage); }

.cv-topbar__demo {
	position: absolute;
	top: 9px; left: 10px;
	padding: 2px 8px;
	background: var(--pink);
	color: var(--ink);
	font: 700 11px/1.4 var(--mono);
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.cv-topbar__list { grid-template-columns: 1fr auto 1fr; }
	.cv-topbar__list li { display: block; }
	.cv-topbar__list li:first-child { justify-self: start; padding-left: 56px; }
	.cv-topbar__list li:last-child { justify-self: end; }
}

/* ------------------------------------------------------------ header -- */

.cv-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--cream);
	box-shadow: 0 1px 0 var(--line);
}

.cv-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	max-width: var(--max);
	height: var(--header-h);
	margin: 0 auto;
	padding: 0 calc(var(--gutter) - 8px);
}

.cv-header__burger {
	justify-self: start;
	width: auto;
	gap: 8px;
	padding: 0 8px;
	font: 700 13px/1 var(--ui);
	letter-spacing: .06em;
	text-transform: uppercase;
	display: inline-flex;
}

.cv-header__search,
.cv-header__links { display: none; }

.cv-header__logo { justify-self: center; color: var(--green); }

.cv-header__tools {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 4px;
}

.cv-tool {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 8px;
	font-size: 15px;
	color: var(--ink);
}

.cv-tool__label { display: none; color: var(--muted); }
.cv-tool__icon { position: relative; display: inline-grid; }

.cv-bag-count {
	position: absolute;
	top: -6px; right: -8px;
	min-width: 19px; height: 19px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--pink);
	color: var(--ink);
	font: 700 11px/19px var(--mono);
	text-align: center;
}

.cv-bag-count.is-empty { display: none; }

/* logo */

.cv-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--green);
	--cv-mark-ink: var(--cream);
}

.cv-logo__mark { width: 34px; height: 34px; }
.cv-logo__word { width: 104px; height: auto; overflow: visible; }

.cv-logo__word text {
	font-family: var(--display);
	font-size: 36px;
	fill: currentColor;
}

.cv-logo--sm .cv-logo__mark { width: 30px; height: 30px; }
.cv-logo--sm .cv-logo__word { width: 92px; }

.cv-logo--light { color: var(--cream); }
.cv-logo--light .cv-logo__mark { color: var(--sage); --cv-mark-ink: var(--green-ink); }

/* nav band (desktop) */

.cv-nav { display: none; }

/* search field (header desktop, phones under the header, 404) */

.cv-search {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1.5px solid var(--ink);
}

.cv-search input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 40px 0 0;
	border: 0;
	background: transparent;
	font-size: 16px;
}

.cv-search input:focus { outline: 0; }
.cv-search input::placeholder { color: var(--muted); }
.cv-search input::-webkit-search-cancel-button { display: none; }

.cv-search button {
	position: absolute;
	right: 0;
	display: grid;
	place-items: center;
	width: 40px; height: 44px;
	padding: 0;
	border: 0;
	background: none;
}

.cv-msearch {
	padding: 6px var(--gutter) 10px;
	background: var(--cream);
	border-bottom: 1px solid var(--line);
}

.cv-msearch .cv-search {
	border: 1px solid var(--line);
	background: #fff;
	padding-left: 14px;
}

@media (min-width: 1024px) {
	.cv-msearch { display: none; }

	.cv-header__burger,
	.cv-header__logo { display: none; }

	/* Top row: links left, search and bag right; the badge sits between. */
	.cv-header__bar { padding: 0 var(--gutter); }

	.cv-header__links { display: flex; gap: 40px; list-style: none; }
	.cv-header__links a { color: var(--muted); font-size: 15px; }
	.cv-header__links a:hover { color: var(--ink); }

	.cv-header__tools { grid-column: 3; gap: 24px; }
	.cv-header__search { display: block; width: 300px; }
	.cv-header__search .cv-search { border-bottom-width: 1px; }
	.cv-header__search .cv-search input { font-size: 15px; }

	.cv-tool__label { display: inline; }

	/* Menu row: four items, the badge, four items — the reference's split. */
	.cv-nav {
		position: relative;
		display: block;
		border-bottom: 1.5px solid var(--ink);
		background: var(--cream);
	}

	.cv-nav__badge {
		position: absolute;
		left: 50%; top: -40px;
		z-index: 80;
		width: 118px; height: 118px;
		border-radius: 50%;
		transform: translateX(-50%);
	}

	.cv-badge { display: block; width: 100%; height: 100%; color: var(--green); --cv-mark-ink: var(--cream); }
	.cv-badge__ground { fill: var(--cream); stroke: var(--ink); stroke-width: 1.5; }
	.cv-badge__text { font-family: var(--display); font-size: 12.5px; fill: var(--green); }

	.cv-nav__list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr)) 150px repeat(4, minmax(0, 1fr));
		max-width: var(--max);
		margin: 0 auto;
		padding: 0 var(--gutter);
		list-style: none;
	}

	.cv-nav__list > li { position: static; justify-self: center; }
	.cv-nav__list > li:first-child { justify-self: start; }
	.cv-nav__list > li:nth-child(5) { grid-column: 6; }
	.cv-nav__list > li:last-child { justify-self: end; }

	.cv-nav__list > li > a {
		position: relative;
		display: flex;
		align-items: center;
		height: 54px;
		color: var(--ink);
		font-size: 15px;
		font-weight: 800;
		letter-spacing: .04em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.cv-nav__list > li > a::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: 12px;
		height: 2px;
		background: var(--green);
		transform: scaleX(0);
		transition: transform .2s var(--ease);
	}

	.cv-nav__list > li:hover > a::after,
	.cv-nav__list > li:focus-within > a::after,
	.cv-nav__list > .current-menu-item > a::after { transform: scaleX(1); }

	.cv-nav__list .cv-nav-sale > a { color: var(--pink-text); }
	.cv-nav__list .cv-nav-sale > a::after { background: var(--pink-text); }

	.cv-nav__list > .has-mega > a { gap: 4px; }

	/* mega panels */

	.cv-mega {
		position: absolute;
		top: 100%; left: 0; right: 0;
		z-index: 70;
		visibility: hidden;
		opacity: 0;
		background: var(--cream);
		color: var(--ink);
		box-shadow: 0 18px 30px -12px rgba(16, 36, 27, .25);
		border-bottom: 4px solid var(--green);
		/* Never taller than the screen below the header: on short screens the
		   panel scrolls inside itself instead of running off the page. */
		max-height: calc(100vh - 240px);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateY(-6px);
		transition: opacity .15s, transform .15s var(--ease), visibility 0s .15s;
	}

	.cv-nav__list > .has-mega:hover > .cv-mega,
	.cv-nav__list > .has-mega:focus-within > .cv-mega {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity .15s, transform .15s var(--ease);
	}

	body.is-mega-closed .cv-mega { visibility: hidden !important; opacity: 0 !important; }

	.cv-mega__inner {
		display: grid;
		grid-template-columns: 1.4fr 1fr 280px;
		gap: 48px;
		max-width: var(--max);
		margin: 0 auto;
		padding: 32px var(--gutter) 36px;
	}

	.cv-mega__col--wide { grid-column: span 2; }

	.cv-mega__title {
		margin: 0 0 14px;
		color: var(--muted);
		font: 700 12px/1 var(--mono);
		letter-spacing: .08em;
		text-transform: uppercase;
	}

	.cv-mega__list { list-style: none; margin-bottom: 18px; }
	.cv-mega__list--cols { columns: 2; column-gap: 32px; }
	/* Brendet A–Z: 60+ brands, so five tight columns keep it to ~13 rows. */
	.cv-mega__col--wide .cv-mega__list--cols { columns: 5; column-gap: 24px; }
	.cv-mega__col--wide .cv-mega__list li { break-inside: avoid; }
	.cv-mega__col--wide .cv-mega__list a { padding: 3px 0; font-size: 14px; }

	.cv-mega__list a {
		display: inline-block;
		padding: 6px 0;
		font-size: 15px;
		font-weight: 500;
	}

	.cv-mega__list a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

	.cv-mega__card {
		position: relative;
		display: block;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: var(--photo);
	}

	.cv-mega__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
	.cv-mega__card:hover img { transform: scale(1.04); }

	.cv-mega__card-label {
		position: absolute;
		left: 12px; bottom: 12px;
		padding: 8px 12px;
		background: var(--cream);
		color: var(--green);
		font-weight: 700;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: .06em;
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.cv-mega__col--wide .cv-mega__list--cols { columns: 4; }
	.cv-nav__list > li > a { font-size: 13px; letter-spacing: .02em; }
	.cv-header__links { gap: 24px; }
	.cv-header__search { width: 240px; }
}

/* ----------------------------------------------------------- drawers -- */

.cv-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	transition: visibility 0s .25s;
}

.cv-drawer.is-open { visibility: visible; transition: none; }

.cv-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(16, 36, 27, .45);
	opacity: 0;
	transition: opacity .25s;
}

.cv-drawer.is-open .cv-drawer__scrim { opacity: 1; }

.cv-drawer__panel {
	position: absolute;
	top: 0; bottom: 0; right: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 90vw);
	background: var(--cream);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .25s var(--ease);
}

.cv-drawer--menu .cv-drawer__panel { left: 0; right: auto; transform: translateX(-100%); }

.cv-drawer.is-open .cv-drawer__panel { transform: none; }

.cv-drawer__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 64px;
	padding: 0 8px 0 var(--gutter);
	background: var(--cream);
	border-bottom: 1px solid var(--line);
}

.cv-drawer__head h2 { font: 400 24px/1.2 var(--display); color: var(--green); }

.cv-drawer__foot {
	position: sticky;
	bottom: 0;
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding: 14px var(--gutter);
	background: var(--cream);
	border-top: 1px solid var(--line);
}

.cv-drawer__foot .cv-btn { flex: 1; padding: 0 12px; }

/* mobile menu */

.cv-mnav { list-style: none; padding: 8px 0; }

.cv-mnav > li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--line);
}

.cv-mnav > li > a {
	flex: 1;
	padding: 15px var(--gutter);
	font-size: 17px;
	font-weight: 600;
}

.cv-mnav .cv-nav-sale > a { color: var(--pink-text); text-transform: uppercase; letter-spacing: .04em; }

.cv-mnav__toggle {
	display: grid;
	place-items: center;
	width: 56px; height: 54px;
	border: 0;
	border-left: 1px solid var(--line);
	background: none;
}

.cv-mnav__toggle .cv-icon { transition: transform .2s; }
.cv-mnav .is-open > .cv-mnav__toggle .cv-icon { transform: rotate(180deg); }

.cv-mnav .sub-menu {
	display: none;
	flex-basis: 100%;
	list-style: none;
	padding: 4px 0 12px;
	background: var(--sage-soft);
}

.cv-mnav .is-open > .sub-menu { display: block; }

.cv-mnav .sub-menu a {
	display: block;
	padding: 9px calc(var(--gutter) + 12px);
	font-size: 15px;
}

.cv-mnav--small { padding: 12px 0 24px; }
.cv-mnav--small > li { border: 0; }

.cv-mnav--small > li > a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px var(--gutter);
	font-size: 15px;
	font-weight: 500;
}

/* ------------------------------------------------------------ layout -- */

.cv-main { display: block; min-height: 50vh; }

.cv-section {
	max-width: var(--max);
	margin: 0 auto;
	padding: 48px var(--gutter);
}

.cv-section--tint {
	max-width: none;
	background: var(--sage-soft);
}

.cv-section--tint > * { max-width: calc(var(--max) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }

.cv-section__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
	text-align: center;
}

.cv-section__title {
	color: var(--green);
	font: 400 clamp(26px, 4vw, 42px)/1.15 var(--display);
	letter-spacing: .01em;
}

.cv-section__lead { max-width: 560px; margin: 0; color: var(--muted); }

.cv-section__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 28px 0 0;
}

@media (min-width: 1024px) {
	.cv-section { padding: 72px var(--gutter); }
}

/* -------------------------------------------------------------- hero -- */

/* The reference's hero: one photo across the full width, the headline,
   a line and two buttons centred on it. */
.cv-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 560px;
	overflow: hidden;
	background: var(--green-dark);
	color: #fff;
	text-align: center;
}

/* Two photos side by side, one person each side of the text. */
.cv-hero__media {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.cv-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 36, 27, .08), rgba(16, 36, 27, .38));
}

.cv-hero__media img,
.cv-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cv-hero__body {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 760px;
	padding: 48px var(--gutter);
}

.cv-hero__title {
	margin: 0 0 16px;
	font: 400 clamp(38px, 6vw, 68px)/1.08 var(--display);
	text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}

.cv-hero__text {
	max-width: 46ch;
	margin: 0 auto 28px;
	font-size: 17px;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

.cv-hero__ctas {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

/* From tablets up, the hero takes the photos' own shape: two 2:3 portraits
   side by side make 4:3, so both show whole, nothing cropped. Phones keep
   the shorter, cropped hero so the text still fits. */
@media (min-width: 768px) {
	.cv-hero { min-height: 0; aspect-ratio: 4 / 3; }
	.cv-hero__ctas { flex-direction: row; justify-content: center; }
	.cv-hero__ctas .cv-btn { min-width: 180px; }
}

@media (min-width: 1024px) {
	.cv-hero__text { font-size: 19px; }
}

/* ------------------------------------------------------------- rails -- */

.cv-rail { position: relative; }

.cv-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 46%;
	gap: 14px;
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter) 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--gutter);
	scrollbar-width: none;
	list-style: none;
}

.cv-rail__track::-webkit-scrollbar { display: none; }

.cv-rail__item { scroll-snap-align: start; min-width: 0; }

.cv-rail__btn {
	position: absolute;
	top: calc(50% - 60px);
	display: none;
	place-items: center;
	width: 46px; height: 46px;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	background: var(--cream);
	color: var(--ink);
	transition: background .15s, color .15s, opacity .15s;
}

.cv-rail__btn:hover { background: var(--ink); color: var(--cream); }
.cv-rail__btn:disabled { opacity: 0; pointer-events: none; }
.cv-rail__btn--prev { left: -22px; }
.cv-rail__btn--next { right: -22px; }

.cv-rail.is-static .cv-rail__btn { display: none; }

@media (min-width: 768px) {
	.cv-rail__track { grid-auto-columns: calc((100% - 2 * 16px - 2 * var(--gutter)) / 3); gap: 16px; }
}

@media (min-width: 1024px) {
	.cv-rail__track {
		grid-auto-columns: calc((100% - 4 * 20px) / 5);
		gap: 20px;
		margin: 0;
		padding: 0 0 6px;
		scroll-padding: 0;
	}

	.cv-rail__btn { display: grid; }
}

/* -------------------------------------------------------------- grid -- */

.cv-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 12px;
	list-style: none;
}

@media (min-width: 768px) {
	.cv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 18px; }
}

@media (min-width: 1024px) {
	.cv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 22px; }
}

/* card */

.cv-card { position: relative; display: flex; flex-direction: column; height: 100%; }

.cv-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--photo);
}

.cv-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .3s, transform .5s var(--ease);
}

.cv-card__img--alt { opacity: 0; }

@media (hover: hover) {
	.cv-card:hover .cv-card__img--alt { opacity: 1; }
	.cv-card:hover .cv-card__img:not(.cv-card__img--alt) { transform: scale(1.02); }
}

.cv-card.is-sold .cv-card__img { filter: grayscale(1); opacity: .55; }

.cv-card__body { padding-top: 12px; }

.cv-card__brand {
	margin: 0 0 4px;
	color: var(--muted);
	font-size: 13px;
}

.cv-card__title {
	display: -webkit-box;
	margin: 0 0 6px;
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.cv-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cv-card__meta {
	margin: 0 0 6px;
	color: var(--muted);
	font-size: 13px;
}

.cv-card__meta:empty { display: none; }

.cv-card__price { margin: 0; }

@media (min-width: 1024px) {
	.cv-card__title { font-size: 16px; }
}

/* stickers */

.cv-sticker {
	position: absolute;
	top: 12px; left: 10px;
	z-index: 1;
	padding: 5px 9px 4px;
	background: var(--sage);
	color: var(--ink);
	font: 700 11px/1.1 var(--mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	transform: rotate(-5deg);
	box-shadow: 0 2px 0 rgba(16, 36, 27, .15);
}

.cv-sticker--sale { background: var(--pink); }
.cv-sticker--sold { background: var(--ink); color: var(--cream); }
.cv-sticker--tag { background: var(--cream); border: 1.5px solid var(--green); color: var(--green); }

.cv-sticker--inline {
	position: static;
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
}

/* price */

.cv-price {
	font: 700 15px/1.3 var(--mono);
	white-space: nowrap;
}

.cv-price ins { text-decoration: none; color: var(--pink-text); }

.cv-price del {
	margin-left: 6px;
	color: var(--muted);
	font-weight: 400;
	font-size: .88em;
}

.cv-price--sold { color: var(--muted); text-transform: uppercase; font-size: 13px; letter-spacing: .06em; }
.cv-price--was { color: var(--muted); text-decoration: line-through; }

.cv-price .woocommerce-Price-currencySymbol { margin-left: 1px; }

/* --------------------------------------------------- category mosaic -- */

/* Edge to edge with no heading, as on the reference. */
.cv-mosaic-wrap { padding: 48px 0 0; }

.cv-mosaic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	list-style: none;
}

/* Phones: the 2 × 2 first, the tall tile under it at full width. */
.cv-mosaic__item:first-child { grid-column: span 2; order: 1; }

.cv-tile {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--photo);
}

.cv-tile img { position: absolute; inset: 0; transition: transform .5s var(--ease); }
.cv-tile:hover img { transform: scale(1.04); }

/* The reference's label: a box centred at the bottom of the photo. */
.cv-tile__label,
.cv-edit__label {
	position: absolute;
	left: 50%; bottom: 12px;
	max-width: calc(100% - 20px);
	padding: 10px 16px;
	background: var(--cream);
	color: var(--green);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: translateX(-50%);
	transition: background .15s, color .15s;
}

.cv-tile:hover .cv-tile__label,
.cv-edit:hover .cv-edit__label { background: var(--green); color: var(--cream); }

/* Long category names wrap on narrow tiles rather than lose their ending. */
.cv-tile__label { width: max-content; white-space: normal; text-wrap: balance; }

@media (max-width: 767px) {
	.cv-tile__label { padding: 8px 12px; font-size: 12px; }
}

/* Desktop: the tall first tile takes the right half (columns 3–4, rows
   1–2), the other four make the 2 × 2 beside it — the reference's mosaic. */
@media (min-width: 768px) {
	.cv-mosaic-wrap { padding-top: 72px; }
	.cv-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
	.cv-mosaic__item:first-child { grid-column: 3 / 5; grid-row: 1 / 3; order: 0; }
	.cv-mosaic__item:first-child .cv-tile { height: 100%; aspect-ratio: auto; }
	.cv-tile__label { bottom: 18px; padding: 12px 22px; font-size: 14px; }
	.cv-mosaic__item:first-child .cv-tile__label { padding: 14px 28px; font-size: 16px; }
}

/* ---------------------------------------------------- edits carousel -- */

.cv-edits { padding-top: 0; }

.cv-rail--edits .cv-rail__track { grid-auto-columns: 62%; gap: 10px; }

.cv-edit {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--photo);
}

.cv-edit img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cv-edit:hover img { transform: scale(1.04); }
.cv-edit__label { bottom: 0; padding: 14px 22px; }

/* Arrows on every width, as on the reference. */
.cv-rail--edits .cv-rail__btn {
	display: grid;
	top: calc(50% - 23px);
	border: 0;
	border-radius: 0;
	background: var(--cream);
}

.cv-rail--edits .cv-rail__btn--prev { left: 0; }
.cv-rail--edits .cv-rail__btn--next { right: 0; }

.cv-rail--edits.is-static .cv-rail__btn { display: none; }

@media (max-width: 1023px) {
	.cv-rail--edits .cv-rail__btn { width: 38px; height: 38px; }
	.cv-rail--edits .cv-rail__btn--prev { left: calc(-1 * var(--gutter) + 6px); }
	.cv-rail--edits .cv-rail__btn--next { right: calc(-1 * var(--gutter) + 6px); }
}

@media (min-width: 768px) {
	.cv-rail--edits .cv-rail__track { grid-auto-columns: calc((100% - 2 * 10px - 2 * var(--gutter)) / 3); }
}

@media (min-width: 1024px) {
	.cv-rail--edits .cv-rail__track { grid-auto-columns: calc((100% - 4 * 8px) / 5); gap: 8px; }
	.cv-rail--edits .cv-rail__btn:disabled { opacity: .45; }
}

/* ------------------------------------------------------- three cards -- */

.cv-cards__list {
	display: grid;
	gap: 28px;
	list-style: none;
}

.cv-card-link { display: block; text-align: center; }

.cv-card-link__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--photo);
}

.cv-card-link__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cv-card-link:hover img { transform: scale(1.04); }

/* The reference's card titles: bold uppercase sans under the photo. */
.cv-card-link__title {
	display: block;
	margin-top: 16px;
	color: var(--green);
	font-size: clamp(18px, 1.7vw, 22px);
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cv-card-link:hover .cv-card-link__title { text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 768px) {
	.cv-cards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
	.cv-card-link__media { aspect-ratio: 1; }
}

/* ------------------------------------------------------------- brands -- */

.cv-brands {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	list-style: none;
}

.cv-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 112px;
	padding: 16px 10px;
	border: 1px solid var(--line);
	background: #fff;
	text-align: center;
	transition: background .15s, color .15s, border-color .15s;
}

.cv-brand__name {
	color: var(--green);
	font: 400 clamp(19px, 2vw, 25px)/1.1 var(--display);
}

.cv-brand__count {
	color: var(--muted);
	font: 400 12px/1 var(--mono);
}

.cv-brand:hover { border-color: var(--green); background: var(--green); }
.cv-brand:hover .cv-brand__name,
.cv-brand:hover .cv-brand__count { color: var(--cream); }

/* Homepage: the reference's square white tiles, each with a logo in black
   and grey; the border darkens on hover instead of the tile turning green. */
.cv-brands--home .cv-brand { aspect-ratio: 1; padding: 16%; }
.cv-brands--home .cv-brand:hover { border-color: var(--ink); background: #fff; }

/* Fill the tile, then shrink the tall and square marks so every logo
   reads at about the same weight. */
.cv-brand__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: grayscale(1) contrast(1.2);
	transition: transform .2s var(--ease);
}

.cv-brand--adidas .cv-brand__logo,
.cv-brand--stussy .cv-brand__logo,
.cv-brand--the-north-face .cv-brand__logo { width: 72%; height: 72%; }
.cv-brand--dickies .cv-brand__logo { width: 92%; }
.cv-brand--levis .cv-brand__logo { width: 64%; }

.cv-brand:hover .cv-brand__logo { transform: scale(1.06); }

/* Homepage on phones: one sideways-scrolling row, as on the reference. */
@media (max-width: 767px) {
	.cv-brands--home {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 40%;
		margin: 0 calc(-1 * var(--gutter));
		padding: 0 var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--gutter);
		scrollbar-width: none;
	}

	.cv-brands--home::-webkit-scrollbar { display: none; }
	.cv-brands--home > li { scroll-snap-align: start; }
	.cv-brands--home .cv-brand { min-height: 0; }
}

@media (min-width: 768px) {
	.cv-brands { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
	.cv-brand { min-height: 150px; }
}

/* -------------------------------------------------------- brand logos -- */

/* Where the reference has "As Featured In": a thin rule above, a heading,
   the logos in black and grey on a centred, wrapping row, each a link. */
.cv-logos { position: relative; }

.cv-logos::before {
	content: "";
	position: absolute;
	left: 50%; top: 0;
	width: 100vw;
	border-top: 1px solid var(--line);
	transform: translateX(-50%);
}

.cv-logos__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 16px;
	list-style: none;
}

.cv-logos__item {
	display: grid;
	place-items: center;
	height: 72px;
	padding: 0 12px;
}

.cv-logos__item img {
	max-width: 100%;
	max-height: 52px;
	filter: grayscale(1) contrast(1.15);
	opacity: .85;
	transition: filter .2s, opacity .2s;
}

.cv-logos__item:hover img,
.cv-logos__item:focus-visible img { opacity: 1; }



/* Square logos read smaller than wordmarks; give them more height. */
.cv-logos__item--harley-davidson img,
.cv-logos__item--umbro img { max-height: 64px; }

@media (min-width: 768px) {
	.cv-logos__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 48px 64px;
		max-width: 1200px;
		margin: 0 auto;
	}

	.cv-logos__list > li { flex: 0 0 168px; }
	.cv-logos__item { height: 96px; }
	.cv-logos__item img { max-height: 60px; }
	.cv-logos__item--harley-davidson img,
	.cv-logos__item--umbro img { max-height: 76px; }
	.cv-logos__item--tommy-hilfiger img,
	.cv-logos__item--lacoste img { max-height: 40px; }
}

/* ----------------------------------------------------------- promises -- */

.cv-promises {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
	max-width: var(--max);
	margin: 0 auto;
	padding: 40px var(--gutter);
	list-style: none;
	text-align: center;
}

.cv-promises li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cv-promises .cv-icon { color: var(--green); margin-bottom: 4px; }
.cv-promises strong { font-size: 15px; }
.cv-promises span { color: var(--muted); font-size: 13px; line-height: 1.4; }

@media (min-width: 1024px) {
	.cv-promises { grid-template-columns: repeat(4, 1fr); padding: 56px var(--gutter); }
}

/* ------------------------------------------------------------- footer -- */

.cv-footer {
	background: var(--green-ink);
	color: rgba(250, 248, 243, .85);
	font-size: 15px;
}

.cv-footer a:hover { color: var(--sage); }

.cv-footer__cols {
	display: grid;
	gap: 36px;
	max-width: var(--max);
	margin: 0 auto;
	padding: 48px var(--gutter) 36px;
}

.cv-footer__logo { display: inline-block; margin-bottom: 16px; }

.cv-footer__brand > p { max-width: 38ch; }

.cv-footer__title {
	margin: 0 0 14px;
	color: var(--sage);
	font: 700 12px/1 var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.cv-footer__links { list-style: none; }
.cv-footer__links li { margin: 0 0 10px; }

.cv-footer__links--icons a,
.cv-footer__links--icons span {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	overflow-wrap: anywhere;
}

.cv-footer__links--icons .cv-icon { margin-top: 2px; color: var(--sage); }

.cv-news__label { display: block; margin: 8px 0 8px; color: var(--cream); font-weight: 600; }

.cv-news__row { display: flex; max-width: 420px; }

.cv-news input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border: 1px solid rgba(250, 248, 243, .35);
	border-right: 0;
	background: transparent;
	color: var(--cream);
}

.cv-news input::placeholder { color: rgba(250, 248, 243, .55); }
.cv-news input:focus { outline: 0; border-color: var(--sage); }
.cv-news .cv-btn { padding: 0 18px; }

.cv-news__done { color: var(--sage); }

.cv-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
	max-width: var(--max);
	margin: 0 auto;
	padding: 18px var(--gutter) 28px;
	border-top: 1px solid rgba(250, 248, 243, .15);
	font: 400 12px/1.5 var(--mono);
}

.cv-footer__bottom p { margin: 0; }

.cv-footer__pay { display: inline-flex; align-items: center; gap: 10px; }
.cv-footer__pay .cv-icon { color: var(--sage); }

@media (min-width: 768px) {
	.cv-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	.cv-footer__cols { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; padding-top: 64px; }
}

/* ---------------------------------------------------------- listings -- */

.cv-listing__head {
	padding: 18px var(--gutter) 28px;
	background: var(--sage-soft);
	text-align: center;
}

.cv-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	max-width: calc(var(--max) - 2 * var(--gutter));
	margin: 0 auto;
	list-style: none;
	font-size: 13px;
	text-align: left;
}

.cv-crumbs li { display: inline-flex; align-items: center; }
.cv-crumbs li + li::before { content: "|"; margin: 0 8px; color: var(--muted); }
.cv-crumbs a { color: var(--muted); }
.cv-crumbs a:hover { color: var(--green); }
.cv-crumbs [aria-current] { font-weight: 600; }

.cv-listing__title {
	margin: 20px auto 12px;
	color: var(--green);
	font: 400 clamp(28px, 5vw, 46px)/1.15 var(--display);
}

.cv-listing__desc {
	max-width: 720px;
	margin: 0 auto;
	color: var(--muted);
}

.cv-listing__desc p { margin: 0; }

.cv-catchips {
	display: flex;
	gap: 8px;
	margin: 22px calc(-1 * var(--gutter)) 0;
	padding: 0 var(--gutter) 4px;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.cv-catchips::-webkit-scrollbar { display: none; }

.cv-catchip {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 14px;
	border: 1.5px solid var(--ink);
	background: var(--cream);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cv-catchip:hover { background: var(--green); border-color: var(--green); color: var(--cream); }

@media (min-width: 1024px) {
	.cv-listing__head { padding: 22px var(--gutter) 40px; }
	.cv-catchips { flex-wrap: wrap; justify-content: center; margin: 28px auto 0; padding: 0; max-width: 1100px; }
}

.cv-listing__body {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--gutter) 64px;
}

/* toolbar */

.cv-toolbar { position: relative; margin-bottom: 20px; }

.cv-toolbar__top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 10px 12px;
	padding: 14px 0;
}

.cv-toolbar__sort { justify-self: stretch; }
.cv-toolbar__sort .cv-select select { min-width: 0; width: 100%; }

.cv-toolbar__open {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	border: 1.5px solid var(--ink);
	background: var(--cream);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 14px;
}

.cv-facet__n {
	display: inline-grid;
	place-items: center;
	min-width: 20px; height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--green);
	color: var(--cream);
	font: 700 11px/1 var(--mono);
}

/* phones: facets live in the drawer */

.cv-toolbar__facets { padding: 4px 0 12px; }

.cv-facet { border-bottom: 1px solid var(--line); }

.cv-facet__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 54px;
	padding: 0 var(--gutter);
	font-weight: 700;
	font-size: 16px;
	list-style: none;
	cursor: pointer;
}

.cv-facet__toggle::-webkit-details-marker { display: none; }
.cv-facet__toggle > span:first-child { flex: 1; }
.cv-facet__toggle .cv-icon { transition: transform .2s; }
.cv-facet[open] .cv-facet__toggle .cv-icon { transform: rotate(180deg); }

.cv-facet__panel { padding: 0 var(--gutter) 14px; }

.cv-facet__list { list-style: none; }

.cv-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
	font-size: 15px;
}

.cv-opt__box {
	display: grid;
	place-items: center;
	width: 20px; height: 20px;
	border: 1.5px solid var(--ink);
	background: #fff;
	color: transparent;
}

.cv-opt.is-on .cv-opt__box { border-color: var(--green); background: var(--green); color: var(--cream); }
.cv-opt__name { flex: 1; }
.cv-opt__count { color: var(--muted); font: 400 12px/1 var(--mono); }
.cv-opt.is-empty { opacity: .4; }

.cv-facet__list--sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cv-facet__list--sizes .cv-opt {
	gap: 6px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	background: #fff;
}

.cv-facet__list--sizes .cv-opt__box { display: none; }
.cv-facet__list--sizes .cv-opt.is-on { border-color: var(--green); background: var(--green); color: var(--cream); }
.cv-facet__list--sizes .cv-opt.is-on .cv-opt__count { color: var(--sage); }

@media (max-width: 1023px) {
	.cv-drawer--filters:not(.is-open) .cv-drawer__panel { box-shadow: none; }
}

/* desktop: one row of facet buttons, panels drop under them */

@media (min-width: 1024px) {
	/* The sort sits at the right end of the facet row, not on a row of its
	   own (the facet buttons keep clear of it). */
	.cv-toolbar { margin-top: 28px; }

	.cv-toolbar__top {
		position: absolute;
		top: 1px; right: 0;
		z-index: 21;
		display: flex;
		align-items: center;
		height: 58px;
		padding: 0;
	}

	.cv-toolbar__open { display: none; }
	.cv-toolbar__sort .cv-select select { width: auto; min-width: 260px; }

	.cv-drawer.cv-drawer--filters {
		position: static;
		visibility: visible;
		transition: none;
	}

	.cv-drawer--filters .cv-drawer__scrim,
	.cv-drawer--filters .cv-drawer__head,
	.cv-drawer--filters .cv-drawer__foot { display: none; }

	.cv-drawer--filters .cv-drawer__panel {
		position: static;
		width: auto;
		overflow: visible;
		background: none;
		transform: none;
		transition: none;
	}

	.cv-toolbar__facets {
		display: flex;
		flex-wrap: wrap;
		gap: 0 48px;
		padding: 0 300px 0 0;
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
	}

	.cv-facet { position: relative; border: 0; }

	.cv-facet__toggle {
		min-height: 58px;
		padding: 0;
		font-size: 15px;
	}

	.cv-facet__toggle .cv-icon { margin-left: 4px; }

	.cv-facet__panel {
		position: absolute;
		top: calc(100% - 4px);
		left: -18px;
		z-index: 20;
		width: max-content;
		min-width: 260px;
		max-width: 420px;
		max-height: 380px;
		overflow-y: auto;
		padding: 14px 18px;
		border: 1px solid var(--line);
		background: #fff;
		box-shadow: 0 16px 28px -14px rgba(16, 36, 27, .3);
	}

	.cv-facet__list--sizes { max-width: 300px; }
}

/* active chips */

.cv-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0 0 22px;
	list-style: none;
}

.cv-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 0 10px 0 14px;
	border-radius: 18px;
	background: var(--sage-soft);
	border: 1px solid var(--sage-line);
	font-size: 14px;
	font-weight: 600;
}

.cv-chip:hover { border-color: var(--green); color: var(--green); }

/* pagination */

.cv-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 48px;
}

.cv-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	border: 1px solid var(--line);
	background: #fff;
	font: 700 14px/1 var(--mono);
}

.cv-pager .page-numbers.current { border-color: var(--green); background: var(--green); color: var(--cream); }
.cv-pager .page-numbers.dots { border: 0; background: none; }
.cv-pager a.page-numbers:hover { border-color: var(--ink); }

/* empty */

.cv-empty { padding: 48px 0; text-align: center; }
.cv-empty__title { font: 400 24px/1.2 var(--display); color: var(--green); }

/* ------------------------------------------------------- product page -- */

.cv-pdp-wrap {
	max-width: var(--max);
	margin: 0 auto;
	padding: 14px var(--gutter) 0;
}

.cv-pdp-wrap .cv-crumbs { margin-bottom: 14px; }
.cv-pdp-wrap .cv-crumbs ol { justify-content: center; text-align: center; }

.cv-notices:empty { display: none; }

.cv-pdp { display: grid; gap: 22px; }

/* gallery */

.cv-gallery { position: relative; margin: 0 calc(-1 * var(--gutter)); }

.cv-gallery__thumbs { display: none; }

.cv-gallery__stage { position: relative; }

.cv-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	background: var(--photo);
}

.cv-gallery__track::-webkit-scrollbar { display: none; }

.cv-gallery__slide {
	flex: 0 0 100%;
	margin: 0;
	aspect-ratio: 3 / 4;
	scroll-snap-align: start;
}

.cv-gallery__img { width: 100%; height: 100%; object-fit: cover; }

.cv-gallery__next {
	position: absolute;
	right: 16px; bottom: 16px;
	display: none;
	place-items: center;
	width: 44px; height: 44px;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	background: rgba(250, 248, 243, .9);
}

.cv-gallery__next:hover { background: var(--ink); color: var(--cream); }

.cv-gallery__dots {
	position: absolute;
	left: 0; right: 0; bottom: 14px;
	display: flex;
	justify-content: center;
	gap: 7px;
}

.cv-gallery__dots span {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: rgba(22, 32, 27, .25);
	transition: background .2s, transform .2s;
}

.cv-gallery__dots .is-on { background: var(--green); transform: scale(1.25); }

.cv-gallery.is-sold .cv-gallery__img { filter: grayscale(1); opacity: .6; }

.cv-gallery__stamp {
	position: absolute;
	top: 50%; left: 50%;
	padding: 10px 26px 8px;
	border: 4px solid var(--ink);
	background: rgba(250, 248, 243, .82);
	color: var(--ink);
	font: 400 clamp(28px, 6vw, 46px)/1 var(--display);
	text-transform: uppercase;
	transform: translate(-50%, -50%) rotate(-8deg);
	pointer-events: none;
}

@media (min-width: 1024px) {
	.cv-pdp-wrap { padding-top: 22px; }
	.cv-pdp-wrap .cv-crumbs ol { justify-content: flex-start; text-align: left; }

	.cv-pdp {
		grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
		gap: 40px;
		align-items: start;
	}

	.cv-gallery { margin: 0; }

	.cv-gallery.has-thumbs {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 18px;
	}

	.cv-gallery__thumbs {
		display: flex;
		flex-direction: column;
		gap: 12px;
		list-style: none;
	}

	.cv-gallery__thumbs button {
		display: block;
		width: 100%;
		padding: 0;
		border: 1px solid transparent;
		background: var(--photo);
		opacity: .75;
		transition: opacity .15s, border-color .15s;
	}

	.cv-gallery__thumbs button:hover,
	.cv-gallery__thumbs .is-on { opacity: 1; border-color: var(--ink); }

	.cv-gallery__thumbs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

	.cv-gallery__next { display: grid; }
	.cv-gallery__dots { display: none; }
}

/* info */

.cv-pdp__info { display: grid; gap: 18px; min-width: 0; }

.cv-pdp__panel {
	padding: 24px var(--gutter);
	margin: 0 calc(-1 * var(--gutter));
	background: var(--sage-soft);
}

.cv-pdp__brand {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--green);
	font-size: 16px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cv-pdp__title {
	margin: 0 0 14px;
	font-size: clamp(22px, 2.3vw, 28px);
	font-weight: 700;
	line-height: 1.25;
}

.cv-pdp__price { margin: 0 0 8px; }
.cv-pdp__price .cv-price { font-size: 24px; }

.cv-pdp__ship { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.cv-pdp__ship strong { color: var(--green); }

.cv-buy { display: grid; gap: 10px; }

.cv-buy__stock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 6px 0 0;
	font-weight: 600;
	font-size: 15px;
}

.cv-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 4px rgba(31, 77, 58, .18);
}

.cv-buy .added_to_cart { display: none; }

.cv-sold { display: grid; gap: 10px; }
.cv-sold__title { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 24px/1.2 var(--display); color: var(--green); }
.cv-sold > p { margin: 0 0 6px; color: var(--muted); }

@media (min-width: 1024px) {
	.cv-pdp__panel { margin: 0; padding: 32px; }
}

/* details card + accordions */

.cv-pdp__card { border: 1px solid var(--line); background: #fff; }

.cv-pdp__details { padding: 22px 20px; }

.cv-pdp__details h2,
.cv-acc summary { font-size: 19px; font-weight: 700; }

.cv-facts { margin: 14px 0 0; }

.cv-facts > div {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	padding: 7px 0;
	font-size: 15px;
}

.cv-facts dt { font-weight: 700; }
.cv-facts dd { margin: 0; color: var(--muted); }
.cv-facts dd a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }

.cv-pdp__desc { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; }

.cv-acc { border-top: 1px solid var(--line); }

.cv-acc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 64px;
	padding: 0 20px;
	list-style: none;
	cursor: pointer;
}

.cv-acc summary::-webkit-details-marker { display: none; }
.cv-acc summary .cv-icon { transition: transform .2s; }
.cv-acc[open] summary .cv-icon { transform: rotate(45deg); }

.cv-acc__body { padding: 0 20px 20px; font-size: 15px; }
.cv-acc__body > p:last-child { margin-bottom: 0; }

.cv-acc__body .cv-muted { display: flex; gap: 8px; margin-top: 12px; font-size: 13px; }

.cv-measure { width: 100%; border-collapse: collapse; }

.cv-measure th,
.cv-measure td {
	padding: 10px 0;
	border-bottom: 1px dashed var(--line);
	text-align: left;
	font-weight: 400;
}

.cv-measure td { text-align: right; font: 700 14px/1.3 var(--mono); }

.cv-cond { display: flex; gap: 4px; margin-bottom: 14px; }

.cv-cond__step {
	flex: 1;
	padding: 8px 4px 0;
	border-top: 5px solid var(--line);
	color: var(--muted);
	font-size: 11px;
	line-height: 1.25;
	text-align: center;
}

.cv-cond__step.is-on { border-top-color: var(--green); }
.cv-cond__step.is-current { color: var(--ink); font-weight: 700; }

.cv-ticks { list-style: none; margin-bottom: 12px; }

.cv-ticks li {
	position: relative;
	padding: 4px 0 4px 26px;
}

.cv-ticks li::before {
	content: "";
	position: absolute;
	left: 2px; top: 11px;
	width: 12px; height: 7px;
	border-left: 2px solid var(--green);
	border-bottom: 2px solid var(--green);
	transform: rotate(-45deg);
}

.cv-pdp__ask { margin: 0; padding: 16px 20px; border-top: 1px solid var(--line); font-size: 14px; }

/* sticky buy bar: phones at the bottom, desktop at the top */

.cv-stickybuy {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 55;
	background: var(--green-ink);
	color: var(--cream);
	transform: translateY(105%);
	transition: transform .25s var(--ease);
}

.cv-stickybuy.is-on { transform: none; }

.cv-stickybuy__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: var(--max);
	margin: 0 auto;
	padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
}

.cv-stickybuy__title { display: none; }
.cv-stickybuy__price { flex: 1; margin: 0; }
.cv-stickybuy__price .cv-price { font-size: 18px; }
.cv-stickybuy__price .cv-price ins { color: var(--pink); }
.cv-stickybuy .cv-btn { flex: 0 1 220px; }

@media (min-width: 1024px) {
	.cv-stickybuy { top: 0; bottom: auto; transform: translateY(-105%); }

	.cv-stickybuy__title {
		display: block;
		flex: 1;
		margin: 0;
		overflow: hidden;
		font-weight: 700;
		font-size: 17px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.cv-stickybuy__price { flex: 0 0 auto; padding: 0 24px; border-left: 1px solid rgba(250, 248, 243, .25); }
}

/* related */

.cv-related__head { margin-bottom: 22px; }
.cv-related .cv-section__title { text-align: left; }

/* ----------------------------------------------------- pages (info) -- */

.cv-page__head {
	padding: 36px var(--gutter);
	background: var(--sage-soft);
	text-align: center;
}

.cv-page__title {
	color: var(--green);
	font: 400 clamp(28px, 5vw, 46px)/1.15 var(--display);
}

.cv-page__lead { max-width: 640px; margin: 12px auto 0; color: var(--muted); font-size: 17px; }

.cv-page__body {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px var(--gutter) 64px;
}

.cv-prose h2 { margin: 1.8em 0 .6em; font-size: 22px; color: var(--green); }
.cv-prose h3 { margin: 1.4em 0 .4em; font-size: 18px; }
.cv-prose > :first-child { margin-top: 0; }
.cv-prose ul { margin: 0 0 1em; padding-left: 1.2em; }
.cv-prose li { margin-bottom: .4em; }
.cv-prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

.cv-page--shop .cv-page__head { padding: 28px var(--gutter); }

/* Kontakt */

.cv-contact {
	display: grid;
	gap: 20px;
	max-width: 1040px;
	margin: 0 auto;
	padding: 40px var(--gutter) 0;
}

.cv-contact__dm {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 32px;
	background: var(--green);
	color: var(--cream);
}

.cv-contact__dm:hover { color: var(--cream); background: var(--green-dark); }
.cv-contact__dm .cv-icon { color: var(--sage); }
.cv-contact__dm-title { font: 400 28px/1.15 var(--display); }
.cv-contact__dm-handle { font: 700 15px/1 var(--mono); color: var(--sage); margin-bottom: 10px; }

.cv-contact__list { list-style: none; display: grid; gap: 4px; }

.cv-contact__list li {
	display: flex;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}

.cv-contact__list .cv-icon { color: var(--green); }
.cv-contact__list div { display: grid; gap: 4px; }
.cv-contact__list a { font-weight: 600; overflow-wrap: anywhere; }

@media (min-width: 768px) {
	.cv-contact { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Brendet */

/* A directory: letter groups flow in columns, each a letter beside its brands. */
.cv-az {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 28px 24px;
	max-width: var(--max);
	margin: 0 auto;
	padding: 36px var(--gutter) 64px;
}

.cv-az__group { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.cv-az__letter { padding-top: 14px; font: 400 32px/1 var(--display); color: var(--green); }
.cv-brands--index { grid-template-columns: 1fr; gap: 10px; }
.cv-brands--index .cv-brand { min-height: 84px; }

/* 404 */

.cv-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 640px;
	margin: 0 auto;
	padding: 64px var(--gutter);
	text-align: center;
}

.cv-404__mark { width: 84px; height: 84px; color: var(--green); }
.cv-404__code { margin: 14px 0 4px; font: 700 15px/1 var(--mono); color: var(--muted); letter-spacing: .3em; }
.cv-404 .cv-page__title { margin-bottom: 14px; }
.cv-404 .cv-search { width: 100%; max-width: 420px; margin: 18px 0 8px; }

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

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 0 0 20px;
	padding: 14px 18px;
	border-left: 4px solid var(--green);
	background: var(--sage-soft);
	font-size: 15px;
	list-style: none;
}

.woocommerce-error { border-left-color: var(--danger); background: #fbecea; }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button,
.woocommerce-info .button { order: 2; }

/* ------------------------------------------- WooCommerce: forms etc -- */

.cv-woo {
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px var(--gutter) 64px;
}

.cv-woo .button,
.cv-woo button[type="submit"],
.cv-drawer .button,
.woocommerce-message .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font: 700 14px/1 var(--ui);
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

.cv-woo .button:hover,
.cv-drawer .button:hover { background: var(--ink); color: var(--cream); }

.cv-woo .button.alt,
.cv-woo .checkout-button,
.cv-woo #place_order,
.cv-drawer .button.checkout {
	border-color: var(--green);
	background: var(--green);
	color: var(--cream);
}

.cv-woo .button.alt:hover,
.cv-woo .checkout-button:hover,
.cv-woo #place_order:hover,
.cv-drawer .button.checkout:hover { border-color: var(--green-dark); background: var(--green-dark); }

.cv-woo .button:disabled,
.cv-woo .button[disabled] { opacity: .45; cursor: not-allowed; }

.cv-woo input[type="text"],
.cv-woo input[type="email"],
.cv-woo input[type="tel"],
.cv-woo input[type="password"],
.cv-woo input[type="number"],
.cv-woo input[type="search"],
.cv-woo select,
.cv-woo textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid #c9ccc2;
	border-radius: 0;
	background: #fff;
	font-size: 16px;
}

.cv-woo textarea { min-height: 96px; }

.cv-woo select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316201b' stroke-width='2'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 14px center;
}

.cv-woo input:focus,
.cv-woo select:focus,
.cv-woo textarea:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }

.cv-woo .form-row { margin: 0 0 16px; }

.cv-woo .form-row label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }

.cv-woo .form-row .required { color: var(--danger); text-decoration: none; }
.cv-woo .form-row .optional { color: var(--muted); font-weight: 400; }

.cv-woo .woocommerce-invalid input,
.cv-woo .woocommerce-invalid select { border-color: var(--danger); }

.cv-woo h2,
.cv-woo h3 {
	margin: 0 0 18px;
	color: var(--green);
	font: 400 24px/1.2 var(--display);
}

.cv-woo .shop_table { width: 100%; border-collapse: collapse; font-size: 15px; }

.cv-woo .shop_table th,
.cv-woo .shop_table td {
	padding: 14px 10px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: middle;
}

.cv-woo .shop_table thead th {
	color: var(--muted);
	font: 700 11px/1.2 var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.cv-woo .shop_table .product-thumbnail img { width: 84px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--photo); }
.cv-woo .shop_table .product-name a { font-weight: 700; }

.cv-woo .shop_table .product-remove a {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	border: 1px solid var(--line);
	font-size: 20px;
	line-height: 1;
}

.cv-woo .shop_table .product-remove a:hover { border-color: var(--danger); color: var(--danger); }

.cv-woo .shop_table .amount { font-family: var(--mono); font-weight: 700; }

.cv-woo .woocommerce-cart-form { margin-bottom: 32px; }

.cv-woo .cart_totals,
.cv-woo .woocommerce-checkout-review-order {
	padding: 24px;
	background: var(--sage-soft);
}

.cv-woo .cart_totals .shop_table th,
.cv-woo .cart_totals .shop_table td { padding: 12px 0; }

.cv-woo .cart_totals .order-total { font-size: 18px; }

.cv-woo .wc-proceed-to-checkout { margin-top: 18px; }
.cv-woo .wc-proceed-to-checkout .button { width: 100%; min-height: 56px; }

.cv-woo .woocommerce-shipping-methods { list-style: none; padding: 0; margin: 0; }
.cv-woo .woocommerce-shipping-methods li { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }

.cv-woo .woocommerce-shipping-destination,
.cv-woo .woocommerce-shipping-calculator { font-size: 13px; color: var(--muted); }

.cv-free-note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 12px 14px;
	background: var(--green);
	color: var(--cream);
	font-size: 14px;
}

.cv-free-note .cv-icon { color: var(--sage); }
.cv-free-note strong { color: var(--sage); }

.cart-empty.woocommerce-info { justify-content: center; }
.cv-woo .return-to-shop { text-align: center; }

@media (min-width: 1024px) {
	.woocommerce-cart .cv-woo .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 48px;
		align-items: start;
	}

	.woocommerce-cart .cv-woo .woocommerce-notices-wrapper,
	.woocommerce-cart .cv-woo .cart-empty,
	.woocommerce-cart .cv-woo .return-to-shop { grid-column: 1 / -1; }
}

/* cart table on phones: each row a card */

@media (max-width: 767px) {
	.cv-woo .shop_table_responsive thead { display: none; }

	.cv-woo .shop_table_responsive tr.cart_item {
		display: grid;
		grid-template-columns: 84px 1fr auto;
		gap: 4px 14px;
		padding: 14px 0;
		border-bottom: 1px solid var(--line);
	}

	.cv-woo .shop_table_responsive tr.cart_item td { padding: 0; border: 0; }

	.cv-woo .shop_table_responsive .product-thumbnail { grid-row: 1 / 4; grid-column: 1; }
	.cv-woo .shop_table_responsive .product-name { grid-column: 2; }
	.cv-woo .shop_table_responsive .product-remove { grid-column: 3; grid-row: 1; }
	.cv-woo .shop_table_responsive .product-price { display: none; }
	.cv-woo .shop_table_responsive .product-subtotal { grid-column: 2; font-size: 14px; }

	.cv-woo .shop_table_responsive tr:not(.cart_item) td { display: block; padding: 14px 0; border: 0; }

	.cv-woo .cart_totals .shop_table tr { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
	.cv-woo .cart_totals .shop_table th,
	.cv-woo .cart_totals .shop_table td { border: 0; }
	.cv-woo .cart_totals .shop_table td::before { display: none; }
}

/* checkout */

.cv-woo form.checkout_coupon,
.cv-woo form.woocommerce-form-login {
	margin: 0 0 24px;
	padding: 20px;
	border: 1px solid var(--line);
	background: #fff;
}

.cv-woo .col2-set .col-2 { margin-top: 12px; }

.cv-woo #ship-to-different-address { font: 700 15px/1.3 var(--ui); color: var(--ink); }
.cv-woo #ship-to-different-address label { display: flex; align-items: center; gap: 10px; }

.cv-woo .woocommerce-checkout-review-order-table th,
.cv-woo .woocommerce-checkout-review-order-table td { padding: 12px 0; }

.cv-woo .woocommerce-checkout-review-order-table .product-total,
.cv-woo .woocommerce-checkout-review-order-table tfoot td { text-align: right; }

.cv-woo .woocommerce-checkout-review-order-table .order-total { font-size: 18px; }

.cv-woo #payment { margin-top: 18px; }
.cv-woo #payment .wc_payment_methods { list-style: none; padding: 0; margin: 0 0 18px; }

.cv-woo #payment .wc_payment_method {
	padding: 14px 16px;
	border: 1.5px solid var(--green);
	background: #fff;
}

.cv-woo #payment .wc_payment_method label { display: inline; margin-left: 6px; font-weight: 700; }
.cv-woo #payment .payment_box { margin-top: 8px; color: var(--muted); font-size: 14px; }
.cv-woo #payment .payment_box p { margin: 0; }

.cv-woo .woocommerce-privacy-policy-text,
.cv-woo .woocommerce-terms-and-conditions-wrapper { color: var(--muted); font-size: 13px; }

.cv-woo .woocommerce-terms-and-conditions-wrapper a,
.cv-woo .woocommerce-privacy-policy-text a { text-decoration: underline; }

.cv-woo #place_order { width: 100%; min-height: 56px; margin-top: 12px; }

@media (min-width: 1024px) {
	.cv-woo form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 440px;
		gap: 0 56px;
		align-items: start;
	}

	.cv-woo form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
	.cv-woo form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 3; }
	.cv-woo form.checkout #order_review_heading { grid-column: 2; margin-top: 0; }
	.cv-woo form.checkout #order_review { grid-column: 2; position: sticky; top: 160px; }

	.cv-woo .woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 16px;
	}

	.cv-woo .woocommerce-billing-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
}

/* order received */

.cv-woo .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin: 0 0 28px;
	padding: 18px;
	background: var(--sage-soft);
	list-style: none;
	font-size: 13px;
}

.cv-woo .woocommerce-order-overview strong { display: block; font-size: 15px; }

.cv-woo .woocommerce-thankyou-order-received {
	color: var(--green);
	font: 400 clamp(24px, 4vw, 32px)/1.2 var(--display);
}

.cv-woo .woocommerce-order-details,
.cv-woo .woocommerce-customer-details { margin-top: 40px; }

.cv-woo address {
	padding: 18px;
	border: 1px solid var(--line);
	background: #fff;
	font-style: normal;
	line-height: 1.7;
}

.cv-woo .woocommerce-columns--addresses { display: grid; gap: 24px; }

@media (min-width: 768px) {
	.cv-woo .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; }
}

.cv-woo .woocommerce-order-details .shop_table td:last-child,
.cv-woo .woocommerce-order-details .shop_table th:last-child { text-align: right; }

/* account */

.cv-woo .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.cv-woo .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 9px 14px;
	border: 1px solid var(--line);
	background: #fff;
	font-size: 14px;
}

.cv-woo .woocommerce-MyAccount-navigation .is-active a { border-color: var(--green); background: var(--green); color: var(--cream); }

.cv-woo .u-columns.col2-set { display: grid; gap: 32px; }

.cv-woo .woocommerce-form-login,
.cv-woo .woocommerce-form-register { max-width: 560px; }

/* Logged out, the account page is just "Hyrje" + the login form: centre it. */
.woocommerce-account:not(.logged-in) .cv-woo .woocommerce { max-width: 560px; margin-inline: auto; }

.cv-woo form.woocommerce-form-register {
	margin: 0 0 24px;
	padding: 20px;
	border: 1px solid var(--line);
	background: #fff;
}

.cv-woo .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; }
.cv-woo .lost_password a { font-size: 14px; text-decoration: underline; }

.cv-woo .password-input { position: relative; display: block; }

.cv-woo .show-password-input {
	position: absolute;
	top: 50%; right: 12px;
	width: 28px; height: 28px;
	padding: 0;
	border: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235d6a62' stroke-width='1.75'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center;
	transform: translateY(-50%);
}

.cv-woo .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

@media (min-width: 1024px) {
	.cv-woo .u-columns.col2-set { grid-template-columns: 1fr 1fr; gap: 56px; }

	.woocommerce-account.logged-in .cv-woo .woocommerce {
		display: grid;
		grid-template-columns: 240px 1fr;
		gap: 48px;
	}

	.cv-woo .woocommerce-MyAccount-navigation ul { flex-direction: column; }
}

.cv-woo input[type="checkbox"],
.cv-woo input[type="radio"] { width: 18px; height: 18px; accent-color: var(--green); }

.cv-woo .woocommerce-form__label-for-checkbox { display: inline-flex !important; align-items: center; gap: 10px; }

/* Every piece is sold individually: no quantity column, nothing to update. */
.cv-woo .shop_table .product-quantity,
.cv-woo .woocommerce-cart-form .actions,
.cv-woo .woocommerce-cart-form tr:has(> .actions) { display: none; }

.cv-woo .cart_totals .shop_table th { width: 40%; padding-right: 16px; }
.cv-woo .cart_totals .shop_table td { text-align: right; }
.cv-woo .woocommerce-shipping-totals td { text-align: left !important; }
.cv-woo .woocommerce-shipping-totals th,
.cv-woo .woocommerce-shipping-totals td { vertical-align: top; }
.cv-woo .cart_totals .woocommerce-shipping-destination { display: none; }

.blockUI.blockOverlay { background: rgba(250, 248, 243, .6) !important; }

/* ----------------------------------------------------- mini cart drawer -- */

.cv-drawer--cart .widget_shopping_cart_content {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px var(--gutter) 0;
}

.cv-drawer--cart .woocommerce-mini-cart { flex: 1; list-style: none; }

.cv-drawer--cart .woocommerce-mini-cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 4px 14px;
	margin-bottom: 16px;
	padding: 0 34px 16px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}

.cv-drawer--cart .woocommerce-mini-cart-item > a:not(.remove) { display: contents; font-weight: 700; }

.cv-drawer--cart .woocommerce-mini-cart-item img {
	grid-row: 1 / 3;
	width: 76px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--photo);
}

.cv-drawer--cart .woocommerce-mini-cart-item .quantity { grid-column: 2; color: var(--muted); font-family: var(--mono); font-size: 13px; }

.cv-drawer--cart .woocommerce-mini-cart-item .remove {
	position: absolute;
	top: 0; right: 0;
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	border: 1px solid var(--line);
	font-size: 18px;
	line-height: 1;
}

.cv-drawer--cart .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 16px 0;
	border-top: 1.5px solid var(--ink);
	font-size: 16px;
}

.cv-drawer--cart .woocommerce-mini-cart__total .amount { font-family: var(--mono); font-weight: 700; }

.cv-drawer--cart .woocommerce-mini-cart__buttons {
	position: sticky;
	bottom: 0;
	display: grid;
	gap: 10px;
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter) 20px;
	background: var(--cream);
}

.cv-drawer--cart .woocommerce-mini-cart__buttons .button { width: 100%; min-height: 52px; }

.cv-drawer--cart .woocommerce-mini-cart__empty-message { padding: 40px 0; color: var(--muted); text-align: center; }

.cv-drawer--cart .cv-added {
	margin: 0 0 16px;
	padding: 10px 14px;
	background: var(--sage);
	font-size: 14px;
	font-weight: 700;
}

/* -------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}