/*
Theme Name: AniraVibe
Author: AniraVibe
Description: Lightweight custom theme for AniraVibe. Reproduces the original Elementor / Hello Elementor build without depending on Elementor.
Version: 1.10.1
Requires at least: 6.0
Requires PHP: 7.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aniravibe
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--av-brand: #213a30;
	--av-text: #171a18;
	--av-button: #213a30;
	--av-link: #213a30;
	--av-link-hover: #162820;
	--av-footer: #626662;
	--av-grey: #626662;
	--av-body: #171a18;
	--av-gradient-top: #fdfffe;
	--av-gradient-bottom: #becfc0;
	--av-max: 1140px;
	--av-font-content: "Roboto", sans-serif;
	--av-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ==========================================================================
   Base (mirrors the Hello Elementor reset the site was built on)
   ========================================================================== */

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

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: #f3f3ef;
	color: var(--av-body);
	font-family: var(--av-font-system);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Home, the three Collections and Explore More share this page background. */
body.av-gradient {
	background-image: linear-gradient(180deg, var(--av-gradient-top) 0%, var(--av-gradient-bottom) 100%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0.5rem 1rem;
	color: inherit;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
	margin-block: 0 0.9rem;
}

a {
	background-color: transparent;
	color: var(--av-link);
	text-decoration: none;
}

a:hover,
a:active {
	color: var(--av-link-hover);
}

b,
strong {
	font-weight: bolder;
}

img {
	max-width: 100%;
	height: auto;
	border-style: none;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

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

.skip-link:focus {
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto;
	background: #fff;
	color: var(--av-text);
}

/* ==========================================================================
   Widths
   ========================================================================== */

/* Main content width used by the Elementor-built pages. */
.av-wrap {
	max-width: var(--av-max);
	margin-inline: auto;
}

/* Stepped width used by Hello Elementor for the header, posts and page titles. */
.av-narrow {
	width: 100%;
	margin-inline: auto;
}

@media (max-width: 575px) {
	.av-narrow {
		padding-inline: 10px;
	}
}

@media (min-width: 576px) {
	.av-narrow {
		max-width: 500px;
	}
}

@media (min-width: 768px) {
	.av-narrow {
		max-width: 600px;
	}
}

@media (min-width: 992px) {
	.av-narrow {
		max-width: 800px;
	}
}

@media (min-width: 1200px) {
	.av-narrow {
		max-width: 1140px;
	}
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */

.av-header {
	position: relative;
	padding-block: 1rem;
	font-family: var(--av-font-system);
}

/* The branding area is intentionally empty (no logo, no site title). */
.av-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
}

.av-nav .menu,
.av-nav .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.av-nav a {
	display: block;
	padding: 8px 15px;
}

.av-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 8px 15px;
	padding: 0.5rem;
	border: 0;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.05);
	color: #171a18;
	cursor: pointer;
}

.av-menu-toggle__icon {
	display: block;
	width: 1.25rem;
}

.av-menu-toggle__icon::before,
.av-menu-toggle__icon::after {
	content: "";
	display: block;
	height: 3px;
	border-radius: 3px;
	background-color: currentColor;
	transition: all 0.2s ease-in-out;
}

.av-menu-toggle__icon::before {
	margin-block-end: 0.5rem;
	box-shadow: 0 0.35rem 0 currentColor;
}

.av-menu-toggle[aria-expanded="true"] .av-menu-toggle__icon::before {
	box-shadow: none;
	transform: translateY(0.35rem) rotate(45deg);
}

.av-menu-toggle[aria-expanded="true"] .av-menu-toggle__icon::after {
	transform: translateY(-0.35rem) rotate(-45deg);
}

/* Desktop: horizontal menu with hover / focus dropdown. */
@media (min-width: 992px) {
	.av-menu-toggle {
		display: none;
	}

	.av-nav {
		display: flex;
		align-items: center;
	}

	.av-nav .menu {
		display: flex;
		flex-wrap: wrap;
	}

	.av-nav li {
		position: relative;
		display: flex;
	}

	.av-nav .menu-item-has-children {
		padding-inline-end: 15px;
	}

	.av-nav .menu-item-has-children::after {
		content: "▾";
		display: flex;
		align-items: center;
		justify-content: center;
		color: #626662;
		font-size: 1.5em;
	}

	.av-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 2;
		display: none;
		min-width: 150px;
		background: #fff;
	}

	.av-nav .sub-menu li {
		border-block-end: 1px solid #d5d7d2;
	}

	.av-nav .sub-menu li:last-child {
		border-block-end: none;
	}

	.av-nav li:hover > .sub-menu,
	.av-nav li:focus-within > .sub-menu {
		display: block;
	}
}

/* 991px and below: hamburger with a full-width white panel. */
@media (max-width: 991px) {
	.av-nav {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10000;
		width: 100%;
		background: #fff;
	}

	.js .av-nav {
		display: none;
	}

	.js .av-nav.is-open {
		display: block;
	}

	.no-js .av-menu-toggle {
		display: none;
	}

	.no-js .av-nav {
		position: static;
	}

	.av-nav li {
		display: block;
	}

	.av-nav a {
		padding: 20px;
		background: #fff;
		box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.102);
		color: #171a18;
	}

	.av-nav .current-menu-item a {
		background: #213a30;
		color: #fff;
	}

	/* Collections works as an accordion. */
	.js .av-nav .sub-menu {
		display: none;
	}

	.js .av-nav .is-open > .sub-menu {
		display: block;
	}
}

/* ==========================================================================
   Shared content building blocks (Elementor-built pages)
   ========================================================================== */

.av-page {
	color: var(--av-text);
	font-family: var(--av-font-content);
}

.av-page a {
	text-decoration: underline;
}

.av-section {
	padding: 10px;
}

.av-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.av-row {
	display: flex;
	gap: 20px;
}

.av-col {
	min-width: 0;
}

/* Former Elementor heading widgets. */
.av-title {
	margin: 0;
	font-family: var(--av-font-content);
	font-weight: 600;
	line-height: 1;
}

.av-title a {
	color: inherit;
}

.av-text {
	font-family: var(--av-font-content);
	font-weight: 400;
}

.av-text img,
.av-col img {
	vertical-align: middle;
}

.av-anchor {
	height: 0;
}

/* Core blocks used by the page designs: keep the original look.
   (:where keeps this low-specificity so section rules below can set margins.) */
:where(.av-page) .wp-block-image {
	margin: 0;
}

.av-page .wp-block-separator {
	width: auto;
	height: 0;
	margin: 0.5em auto;
	border: 1px inset;
	color: #808080;
	opacity: 1;
}

/* Paragraphs that were written as single lines separated by blank lines. */
.av-lines p {
	margin-block-end: 1.5em;
}

.av-lines p:last-child {
	margin-block-end: 0;
}

/* Buttons (core Button block). */
.av-button-wrap {
	display: flex;
	justify-content: center;
}

.av-button-wrap .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 24px;
	border-radius: 3px;
	background-color: var(--av-button);
	color: #fff;
	font-family: var(--av-font-content);
	font-size: 26px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-decoration: underline;
}

.av-button-wrap .wp-block-button__link:hover,
.av-button-wrap .wp-block-button__link:focus {
	color: #fff;
}

.av-button-large .wp-block-button__link {
	font-size: 38px;
}

/* Amazon icon: Font Awesome Free "amazon" (brands), https://fontawesome.com, CC BY 4.0. */
.av-button-amazon .wp-block-button__link::before {
	content: "";
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Home (legacy layout: av-home-*, av-story, av-curious, av-part, av-observations)
   Kept so the previous Home content still renders until it is replaced with
   the "AniraVibe – Home page" pattern (av-h-*, below).
   ========================================================================== */

.av-home-brand {
	padding: 100px 10px 0;
	text-align: center;
}

.av-brand {
	color: var(--av-brand);
	font-size: 60px;
}

.av-home-hero {
	padding: 100px 20px 40px;
}

.av-home-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	text-align: center;
}

.av-tagline {
	color: var(--av-text);
	font-size: 46px;
	font-weight: 500;
	line-height: 56px;
	letter-spacing: 0.5px;
}

.av-home-hero__sub {
	margin-block: 10px 25px;
}

.av-home-hero__sub p {
	margin-block-end: 9px;
}

.av-home-hero__media {
	width: 100%;
	margin-block-start: -10px;
	padding-block: 120px 80px;
}

.av-home-hero__media img {
	display: block;
	width: 100%;
	height: 550px;
	object-fit: cover;
}

.av-story__row {
	padding: 10px;
}

.av-story__text {
	flex: 1 1 0;
	padding: 50px;
	line-height: 1.7;
	text-align: center;
}

.av-story__media {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	padding-inline-start: 30px;
}

.av-story__media img {
	display: block;
	width: 100%;
}

.av-curious__row {
	align-items: center;
	justify-content: space-between;
	gap: 80px;
	margin-block-end: 60px;
	padding: 10px;
}

.av-curious__text {
	flex: 0 0 60%;
	padding: 10px;
	text-align: center;
}

.av-curious__heading {
	font-size: 28px;
}

.av-curious__link {
	color: var(--av-brand);
	font-size: 24px;
}

.av-curious__small {
	font-size: 20px;
	font-weight: 500;
}

.av-curious__media {
	flex: 1 1 auto;
	padding: 10px;
}

.av-curious__media img {
	display: block;
	width: 100%;
	margin-inline: auto;
}

.av-part__row {
	flex-direction: row-reverse;
	padding: 10px;
}

.av-part__text {
	flex: 0 1 55%;
	padding-block: 100px;
	text-align: center;
}

.av-part__media {
	flex: 0 1 60%;
	padding: 10px;
}

.av-part__media img {
	display: block;
	width: 100%;
}

.av-observations__row {
	padding: 10px;
}

.av-observations__text {
	flex: 0 0 35%;
	padding: 10px;
	text-align: center;
}

.av-observations__media {
	flex: 1 1 0;
	padding: 10px;
	text-align: center;
}

/* ==========================================================================
   Home (buyer-focused layout, pattern "aniravibe/home")

   Every rule is scoped to the .av-h wrapper group, so it only applies once
   the Home page content uses the new pattern. Desktop and mobile are laid
   out separately; see the tablet and mobile blocks at the end of this part.
   ========================================================================== */

body.av-gradient:has(.av-h) {
	background-color: #f3f3ef;
	background-image: none;
}

.av-h {
	--h-ink: #171a18;
	--h-muted: #626662;
	--h-card: #fff;
	--h-blush: #e9eae5;
	--h-blush-deep: #d5d7d2;
	--h-line: #d5d7d2;
	--h-line-strong: #bfc2bc;
	--h-accent: var(--av-button);
	--h-accent-dark: #162820;
	--h-rose: #213a30;
	--h-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--h-gutter: 24px;
	--h-space: 56px;

	color: var(--h-ink);
	font-family: var(--av-font-content);
	font-size: 16px;
	line-height: 1.5;
}

.av-h h1,
.av-h h2,
.av-h h3,
.av-h p {
	margin: 0;
}

.av-h a {
	color: inherit;
	text-decoration: none;
}

.av-h .wp-block-image,
.av-h .wp-block-buttons {
	margin: 0;
}

.av-h .wp-block-image img {
	display: block;
}

.av-h-wrap {
	width: min(1132px, 100% - 2 * var(--h-gutter));
	margin-inline: auto;
}

.av-h-section {
	padding-block-start: var(--h-space);
}

.av-h > :last-child {
	padding-block-end: var(--h-space);
}

.av-h-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 24px;
	margin-block-end: 22px;
}

.av-h-title {
	font-family: var(--h-serif);
	font-size: 36px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.av-h-intro {
	color: var(--h-muted);
	font-size: 15px;
}

.av-h-kicker {
	color: var(--h-rose);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Buttons (core Button block with av-h-btn / av-h-btn--solid) */
.av-h .av-h-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 22px;
	border: 1px solid var(--h-line-strong);
	border-radius: 999px;
	background-color: var(--h-card);
	color: var(--h-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.av-h .av-h-btn .wp-block-button__link:hover,
.av-h .av-h-btn .wp-block-button__link:focus-visible {
	border-color: var(--h-accent);
	color: var(--h-accent);
}

.av-h .av-h-btn--solid .wp-block-button__link {
	border-color: var(--h-accent);
	background-color: var(--h-accent);
	color: #fff;
}

.av-h .av-h-btn--solid .wp-block-button__link:hover,
.av-h .av-h-btn--solid .wp-block-button__link:focus-visible {
	border-color: var(--h-accent-dark);
	background-color: var(--h-accent-dark);
	color: #fff;
}

/* Hero */
.av-h-hero {
	padding-block: 8px 44px;
}

.av-h-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 48px;
	align-items: center;
}

.av-h-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.av-h-brand {
	color: var(--av-brand);
	font-family: var(--h-serif);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
}

.av-h-hero__title {
	max-width: 13ch;
	font-family: var(--h-serif);
	font-size: 58px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.015em;
}

.av-h-hero__lead {
	max-width: 40ch;
	color: var(--h-muted);
	font-size: 18px;
}

.av-h .av-h-routes {
	gap: 10px;
	margin-block-start: 6px;
}

.av-h-hero__trust {
	color: var(--h-muted);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-h-hero__media img {
	width: 100%;
	height: 460px;
	border-radius: 24px;
	object-fit: cover;
	object-position: center 45%;
}

/* What are your nails asking for? */
.av-h-needs__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	padding: 22px 28px;
	border-radius: 20px;
	background-color: var(--h-blush);
}

.av-h-needs__title {
	flex: 0 1 auto;
	font-family: var(--h-serif);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
}

.av-h .av-h-chips {
	display: grid;
	flex: 1 1 620px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.av-h .av-h-chip .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	height: 100%;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: 14px;
	background-color: var(--h-card);
	color: var(--h-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
	text-align: left;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

.av-h .av-h-chip .wp-block-button__link::after {
	content: "→";
	flex-shrink: 0;
	color: var(--h-accent);
}

.av-h .av-h-chip .wp-block-button__link:hover,
.av-h .av-h-chip .wp-block-button__link:focus-visible {
	border-color: var(--h-accent);
	color: var(--h-accent);
}

/* Choose your way */
.av-h-ways__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.av-h-way {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--h-line);
	border-radius: 20px;
	background-color: var(--h-card);
	transition: box-shadow 0.25s, transform 0.25s;
}

.av-h-way:hover {
	box-shadow: 0 14px 30px -18px rgba(76, 40, 30, 0.45);
	transform: translateY(-3px);
}

.av-h-way:focus-within {
	outline: 2px solid var(--h-accent);
	outline-offset: 2px;
}

.av-h-way__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.av-h-way__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 18px 22px 22px;
}

.av-h-way__title {
	font-family: var(--h-serif);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.05;
}

.av-h-way__text {
	color: var(--h-muted);
	font-size: 15px;
}

.av-h-link {
	margin-block-start: auto;
	padding-block-start: 8px;
	font-size: 15px;
	font-weight: 600;
}

.av-h .av-h-link a {
	color: var(--h-accent);
}

.av-h .av-h-link a::after {
	content: " →";
}

.av-h .av-h-link a:focus-visible {
	outline: none;
}

/* The CTA link covers the whole card. */
.av-h-way .av-h-link a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Which one suits you? */
.av-h-compare__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 20px;
}

/* Subgrid keeps the attribute rows aligned across the three cards. */
.av-h-option {
	display: grid;
	grid-row: span 6;
	grid-template-rows: subgrid;
	row-gap: 0;
	padding: 22px;
	border: 1px solid var(--h-line);
	border-radius: 20px;
	background-color: var(--h-card);
}

.av-h-option__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 10px;
	padding-block-end: 14px;
}

.av-h-option__title {
	font-family: var(--h-serif);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
}

.av-h-badge {
	padding: 4px 10px;
	border-radius: 999px;
	background-color: var(--h-blush);
	color: var(--h-accent-dark);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.av-h-attr {
	padding-block: 11px;
	border-block-start: 1px solid var(--h-line);
	font-size: 15px;
	line-height: 1.4;
}

.av-h-attr strong {
	display: block;
	margin-block-end: 2px;
	color: var(--h-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-h-attr--not strong {
	color: var(--h-rose);
}

.av-h .av-h-option__cta {
	align-self: end;
	padding-block-start: 14px;
}

.av-h .av-h-option__cta .wp-block-button,
.av-h .av-h-option__cta .wp-block-button__link {
	width: 100%;
}

/* Start with these guides */
.av-h-guides__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.av-h-guide {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border: 1px solid var(--h-line);
	border-radius: 16px;
	background-color: var(--h-card);
	transition: border-color 0.2s;
}

.av-h-guide:hover {
	border-color: var(--h-line-strong);
}

.av-h-guide:focus-within {
	outline: 2px solid var(--h-accent);
	outline-offset: 2px;
}

.av-h-guide__media {
	flex: 0 0 84px;
}

.av-h-guide__media img {
	width: 84px;
	height: 84px;
	border-radius: 12px;
	object-fit: cover;
}

.av-h-guide__body {
	min-width: 0;
}

.av-h-guide__title {
	font-family: var(--av-font-content);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.av-h .av-h-guide__title a:focus-visible {
	outline: none;
}

.av-h-guide:hover .av-h-guide__title a {
	color: var(--h-accent);
}

.av-h-guide__title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.av-h-guide__text {
	margin-block-start: 4px;
	color: var(--h-muted);
	font-size: 14px;
	line-height: 1.4;
}

/* How Anira Vibe chooses */
.av-h-trust__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
	gap: 32px 40px;
	align-items: center;
	padding: 32px 36px;
	border-radius: 24px;
	background-color: var(--h-blush);
}

.av-h-quote {
	margin-block-start: 10px;
	color: var(--h-accent-dark);
	font-family: var(--h-serif);
	font-size: 21px;
	font-style: italic;
	line-height: 1.25;
}

.av-h-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.av-h-point {
	padding-inline-start: 14px;
	border-inline-start: 2px solid var(--h-blush-deep);
}

.av-h-point__title {
	margin-block-end: 4px;
	font-family: var(--av-font-content);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.av-h-point p {
	color: var(--h-muted);
	font-size: 14px;
	line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
	.av-h-way {
		transition: none;
	}

	.av-h-way:hover {
		transform: none;
	}
}

/* Tablet and small laptop (768px - 1099px) */
@media (min-width: 768px) and (max-width: 1099px) {
	.av-h-hero__grid {
		gap: 32px;
	}

	.av-h-hero__title {
		font-size: 46px;
	}

	.av-h-hero__media img {
		height: 400px;
	}

	.av-h .av-h-routes {
		gap: 8px;
	}

	.av-h .av-h-routes .wp-block-button__link {
		padding-inline: 16px;
		font-size: 14px;
	}

	.av-h .av-h-chips {
		flex-basis: 100%;
	}

	.av-h-trust__inner {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.av-h-guides__grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.av-h-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.av-h .av-h-chips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile (767px and below): recomposed for thumb browsing, not just stacked. */
@media (max-width: 767px) {
	.av-h {
		--h-gutter: 16px;
		--h-space: 36px;
	}

	.av-h-head {
		margin-block-end: 14px;
	}

	.av-h-title {
		font-size: 28px;
	}

	.av-h-intro {
		font-size: 14px;
	}

	/* Hero: headline, promise and routes first; a short image strip after. */
	.av-h-hero {
		padding-block: 0 24px;
	}

	.av-h-hero__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.av-h-hero__text {
		gap: 12px;
	}

	.av-h-brand {
		font-size: 20px;
	}

	.av-h-hero__title {
		max-width: none;
		font-size: 36px;
	}

	.av-h-hero__lead {
		font-size: 16px;
	}

	.av-h .av-h-routes {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		width: 100%;
		margin-block-start: 4px;
	}

	.av-h .av-h-routes .wp-block-button__link {
		width: 100%;
		height: 100%;
		min-height: 50px;
		padding: 8px 6px;
		border-radius: 14px;
		font-size: 14px;
	}

	.av-h-hero__trust {
		font-size: 11px;
		letter-spacing: 0.03em;
	}

	.av-h-hero__media img {
		height: auto;
		aspect-ratio: 16 / 7;
		border-radius: 18px;
		object-position: center 55%;
	}

	/* Needs: a compact 2 x 2 grid of chips. */
	.av-h-needs__inner {
		gap: 12px;
		padding: 16px;
		border-radius: 18px;
	}

	.av-h-needs__title {
		font-size: 22px;
	}

	.av-h .av-h-chips {
		flex-basis: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.av-h .av-h-chip .wp-block-button__link {
		min-height: 56px;
		padding: 10px 12px;
		border-radius: 12px;
		font-size: 14px;
	}

	/* Choose your way: horizontal cards, all three visible at once. */
	.av-h-ways__grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.av-h-way {
		flex-direction: row;
		border-radius: 16px;
	}

	.av-h-way:hover {
		transform: none;
	}

	/* The image fills its column; the card height comes from the text. */
	.av-h .av-h-way__media {
		position: relative;
		flex: 0 0 34%;
		max-width: 132px;
		min-height: 128px;
	}

	.av-h-way__media img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.av-h-way__body {
		gap: 3px;
		padding: 12px 14px;
	}

	.av-h-kicker {
		font-size: 11px;
	}

	.av-h-way__title {
		font-size: 23px;
	}

	.av-h-way__text {
		font-size: 14px;
		line-height: 1.35;
	}

	.av-h-link {
		padding-block-start: 6px;
		font-size: 14px;
	}

	/* Compare: one compact card per option, label and value side by side. */
	.av-h-compare__grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.av-h-option {
		grid-row: auto;
		grid-template-rows: none;
		padding: 14px 16px 16px;
		border-radius: 16px;
	}

	.av-h-option__head {
		padding-block-end: 8px;
	}

	.av-h-option__title {
		font-size: 23px;
	}

	.av-h-attr {
		display: grid;
		grid-template-columns: 86px minmax(0, 1fr);
		gap: 10px;
		padding-block: 8px;
		font-size: 14px;
		line-height: 1.35;
	}

	.av-h-attr strong {
		margin: 0;
		padding-block-start: 2px;
		font-size: 10.5px;
	}

	.av-h .av-h-option__cta {
		padding-block-start: 10px;
	}

	.av-h .av-h-option__cta .wp-block-button__link {
		min-height: 46px;
	}

	/* Guides: slim rows with small thumbnails. */
	.av-h-guides__grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.av-h-guide {
		gap: 12px;
		padding: 8px;
		border-radius: 14px;
	}

	.av-h-guide__media {
		flex-basis: 64px;
	}

	.av-h-guide__media img {
		width: 64px;
		height: 64px;
		border-radius: 10px;
	}

	.av-h-guide__title {
		font-size: 15px;
	}

	.av-h-guide__text {
		margin-block-start: 2px;
		font-size: 13px;
	}

	/* Trust: intro, then a 2 x 2 grid. */
	.av-h-trust__inner {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 20px 18px;
		border-radius: 18px;
	}

	.av-h-quote {
		margin-block-start: 6px;
		font-size: 19px;
	}

	.av-h-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 12px;
	}

	.av-h-point {
		padding-inline-start: 10px;
	}

	.av-h-point__title {
		font-size: 14px;
	}

	.av-h-point p {
		font-size: 13px;
	}
}

/* Small phones (380px and below): give the need chips a little more room. */
@media (max-width: 380px) {
	.av-h-needs__inner {
		padding: 14px 12px;
	}

	.av-h .av-h-chip .wp-block-button__link {
		gap: 6px;
		padding: 10px;
		font-size: 13.5px;
	}
}

/* ==========================================================================
   Eco Polish (pattern "aniravibe/eco-polish")

   Builds on the homepage design system (.av-h tokens, buttons, headings,
   wrap, section heads, guide cards). Everything page-specific is scoped to
   .av-e, so it only applies to content that uses this layout.
   ========================================================================== */

.av-e {
	--h-space: 48px;
}

.av-e a:focus-visible {
	outline: 2px solid var(--h-accent);
	outline-offset: 2px;
}

/* Hero: promise on the left, quick choice on the right */
.av-e-hero {
	padding-block: 8px 0;
}

.av-e-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

.av-e-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.av-e-hero__title {
	max-width: 18ch;
	font-family: var(--h-serif);
	font-size: 50px;
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.015em;
}

.av-e-hero__lead {
	max-width: 42ch;
	color: var(--h-muted);
	font-size: 17px;
}

.av-h .av-e-hero__ctas {
	gap: 10px;
	margin-block-start: 4px;
}

.av-e-hero__note {
	color: var(--h-muted);
	font-size: 12px;
}

.av-e-quick {
	padding: 20px 22px 22px;
	border-radius: 20px;
	background-color: var(--h-blush);
}

.av-e .av-e-quick__title {
	margin-block-end: 12px;
	font-family: var(--h-serif);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.1;
}

.av-e-quick__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.av-e-tile {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border: 1px solid transparent;
	border-radius: 14px;
	background-color: var(--h-card);
	transition: border-color 0.2s;
}

.av-e-tile:hover {
	border-color: var(--h-accent);
}

.av-e-tile__media {
	flex: 0 0 56px;
}

.av-e-tile__media img {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
}

.av-e-tile__text {
	min-width: 0;
	color: var(--h-muted);
	font-size: 13px;
	line-height: 1.3;
}

.av-e-tile__text strong {
	display: block;
	color: var(--h-ink);
	font-size: 15px;
	font-weight: 600;
}

.av-e-tile__text a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.av-e .av-e-tile__text a:focus-visible {
	outline: none;
}

.av-e-tile:focus-within {
	outline: 2px solid var(--h-accent);
	outline-offset: 2px;
}

/* The picks */
.av-e-picks {
	scroll-margin-top: 16px;
}

.av-e-disclosure {
	color: var(--h-muted);
	font-size: 12.5px;
}

.av-e-picks__grid {
	display: grid;
	gap: 16px;
}

.av-e-pick {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--h-line);
	border-radius: 20px;
	background-color: var(--h-card);
	scroll-margin-top: 16px;
}

.av-e-pick:target {
	border-color: var(--h-accent);
	box-shadow: 0 0 0 2px var(--h-accent);
}

.av-e-pick__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.av-e-pick__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 14px 18px 0;
}

.av-e .av-e-badge {
	margin-block-end: 4px;
	padding: 3px 10px;
	border-radius: 999px;
	background-color: var(--h-blush);
	color: var(--h-accent-dark);
	font-size: 12px;
	font-weight: 600;
}

.av-e .av-e-badge--star {
	background-color: var(--h-accent);
	color: #fff;
}

.av-e-pick__name {
	font-family: var(--h-serif);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.1;
}

.av-e-pick__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 8px 18px 18px;
}

.av-e .av-e-pick__lead {
	margin-block-end: 10px;
	color: var(--h-muted);
	font-size: 14.5px;
	line-height: 1.45;
}

.av-e-attr {
	padding-block: 8px;
	border-block-start: 1px solid var(--h-line);
	font-size: 14px;
	line-height: 1.4;
}

.av-e-attr strong {
	display: block;
	margin-block-end: 1px;
	color: var(--h-muted);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-e-attr--watch strong {
	color: var(--h-rose);
}

.av-h .av-e-buy {
	margin-block-start: auto;
	padding-block-start: 12px;
}

.av-h .av-e-buy .wp-block-button,
.av-h .av-e-buy .wp-block-button__link {
	width: 100%;
}

/* Compare at a glance */
.av-e-compare {
	scroll-margin-top: 16px;
}

/* Desktop and tablet compare with the table; phones get the four verdict
   tiles instead (see the mobile block). */
.av-e-verdicts {
	display: none;
}

.av-e-verdicts__intro {
	margin-block-end: 10px;
	color: var(--h-muted);
	font-size: 14px;
}

.av-e-verdicts__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.av-e-verdict a {
	display: block;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: 14px;
	background-color: var(--h-blush);
	color: var(--h-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	transition: border-color 0.2s;
}

.av-e-verdict a:hover {
	border-color: var(--h-accent);
}

.av-e-verdict a::after {
	content: "\00a0→";
	color: var(--h-accent);
}

.av-e-verdict strong {
	display: block;
	margin-block-end: 3px;
	color: var(--h-accent-dark);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.av-e .av-e-table {
	margin: 0;
	overflow-x: auto;
	border: 1px solid var(--h-line);
	border-radius: 16px;
	background-color: var(--h-card);
}

.av-e .av-e-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	line-height: 1.4;
}

.av-e .av-e-table thead {
	border: 0;
}

.av-e .av-e-table th,
.av-e .av-e-table td {
	padding: 12px 16px;
	border: 0;
	text-align: left;
	vertical-align: top;
}

.av-e .av-e-table th {
	color: var(--h-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-e .av-e-table td {
	border-block-start: 1px solid var(--h-line);
}

.av-e .av-e-table td:first-child {
	font-weight: 600;
	white-space: nowrap;
}

.av-e .av-e-table td:first-child a {
	color: var(--h-accent);
}

.av-e .av-e-table td:first-child a::after {
	content: " ↗";
	font-size: 0.85em;
}

/* How to choose: Details blocks. On desktop and tablet they are shown as
   always-open cards; on phones they are collapsed accordion rows (styled
   like the Buyer questions below). */
.av-e-tips {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

@media (min-width: 768px) {
	.av-e .av-e-tip {
		padding: 18px 20px;
		border-radius: 16px;
	}

	.av-e .av-e-tip summary {
		display: block;
		min-height: 0;
		margin-block-end: 6px;
		padding: 0;
		font-size: 16px;
		pointer-events: none;
		cursor: default;
	}

	.av-e .av-e-tip summary::after {
		content: none;
	}

	.av-e .av-e-tip::details-content {
		display: block;
		content-visibility: visible;
	}

	.av-e .av-e-tip p {
		padding: 0;
	}
}

.av-e-tip a,
.av-e-q a {
	color: var(--h-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Buyer questions */
.av-e-faq__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	align-items: start;
}

.av-e-q {
	border: 1px solid var(--h-line);
	border-radius: 14px;
	background-color: var(--h-card);
}

.av-e-q summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.av-e-q summary::-webkit-details-marker {
	display: none;
}

.av-e-q summary::after {
	content: "+";
	flex-shrink: 0;
	color: var(--h-accent);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}

.av-e-q[open] summary::after {
	content: "−";
}

.av-e-q p {
	padding: 0 16px 14px;
	color: var(--h-muted);
	font-size: 14.5px;
	line-height: 1.45;
}

/* Continue exploring (reuses the homepage guide cards) */
.av-e .av-e-disclaimer {
	margin-block-start: 24px;
	color: var(--h-muted);
	font-size: 12.5px;
}

/* Desktop and tablet (768px and up): picks as a 2 x 2 grid of horizontal
   cards, so the first two "Check price" buttons sit in the first screen. */
@media (min-width: 768px) {
	.av-e-picks__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	/* Image column on the left, details on the right. */
	.av-e-pick {
		display: grid;
		grid-template-columns: 32% minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"media head"
			"media body";
	}

	.av-e .av-e-pick__media {
		position: relative;
		grid-area: media;
	}

	.av-e-pick__media img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.av-e-pick__head {
		grid-area: head;
		padding: 14px 16px 0;
	}

	.av-e-pick__body {
		grid-area: body;
		padding: 6px 16px 16px;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.av-e-hero__title {
		font-size: 42px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.av-e-hero__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.av-e-hero__title {
		max-width: none;
	}

	.av-e-quick__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.av-e-tile {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.av-e-tile__media,
	.av-e-tile__media img {
		width: 100%;
	}

	.av-e-tile__media img {
		height: 72px;
	}

	.av-e-tips {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

/* Mobile (767px and below) */
@media (max-width: 767px) {
	.av-e {
		--h-space: 32px;
	}

	/* Hero: short promise, two actions, then the quick choice right away. */
	.av-e-hero__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.av-e-hero__text {
		gap: 10px;
	}

	.av-e-hero__title {
		max-width: none;
		font-size: 34px;
	}

	.av-e-hero__lead {
		font-size: 15.5px;
	}

	.av-h .av-e-hero__ctas {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		width: 100%;
	}

	.av-h .av-e-hero__ctas .wp-block-button__link {
		width: 100%;
		min-height: 48px;
		padding-inline: 10px;
	}

	.av-e-hero__note {
		font-size: 11.5px;
	}

	.av-e-quick {
		padding: 14px 12px 12px;
		border-radius: 18px;
	}

	.av-e .av-e-quick__title {
		margin-block-end: 10px;
		font-size: 21px;
	}

	.av-e-quick__grid {
		gap: 8px;
	}

	.av-e-tile {
		gap: 10px;
		min-height: 60px;
		padding: 6px;
		border-radius: 12px;
	}

	.av-e-tile__media {
		flex-basis: 46px;
	}

	.av-e-tile__media img {
		width: 46px;
		height: 46px;
		border-radius: 8px;
	}

	.av-e-tile__text {
		font-size: 12px;
	}

	.av-e-tile__text strong {
		font-size: 14px;
	}

	/* Picks: thumbnail + name side by side, details below, full-width CTA. */
	.av-e-picks__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.av-e-pick {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr);
		grid-template-areas:
			"media head"
			"body body";
		column-gap: 12px;
		padding: 12px;
		border-radius: 16px;
	}

	.av-e .av-e-pick__media {
		grid-area: media;
	}

	.av-e-pick__media img {
		width: 88px;
		height: 88px;
		border-radius: 12px;
		aspect-ratio: auto;
	}

	.av-e-pick__head {
		grid-area: head;
		justify-content: center;
		gap: 2px;
		padding: 0;
	}

	.av-e .av-e-badge {
		font-size: 11px;
	}

	.av-e-pick__name {
		font-size: 21px;
	}

	.av-e-pick__body {
		grid-area: body;
		padding: 10px 0 0;
	}

	.av-e .av-e-pick__lead {
		margin-block-end: 6px;
		font-size: 14px;
	}

	.av-e-attr {
		display: grid;
		grid-template-columns: 78px minmax(0, 1fr);
		gap: 10px;
		padding-block: 7px;
		font-size: 13.5px;
		line-height: 1.35;
	}

	.av-e-attr strong {
		margin: 0;
		padding-block-start: 2px;
		font-size: 10px;
	}

	.av-h .av-e-buy {
		padding-block-start: 8px;
	}

	.av-h .av-e-buy .wp-block-button__link {
		min-height: 48px;
	}

	/* Compare: the four verdict tiles replace the table. */
	.av-e-verdicts {
		display: block;
	}

	.av-e .av-e-table {
		display: none;
	}

	.av-e-verdict a {
		padding: 10px 12px;
		border-radius: 12px;
		font-size: 14px;
	}

	.av-e-verdict strong {
		font-size: 10px;
	}

	/* How to choose and FAQ: single-column accordion rows. */
	.av-e-tips {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.av-e-faq__grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.av-e-q summary {
		font-size: 14.5px;
	}

	.av-e-q p {
		font-size: 14px;
	}

	.av-e .av-e-disclaimer {
		margin-block-start: 18px;
		font-size: 12px;
	}
}

/* ==========================================================================
   Press-On Magic (pattern "aniravibe/press-on-magic")

   Reuses the homepage design system (.av-h) and the Eco Polish components
   (.av-e: hero, quick choice, pick cards, compare table/verdicts, tips,
   buyer questions). Only the differences live here, scoped to .av-p.
   There are no product photos, so each set is shown as a nail-shape
   swatch of its shape and colour (not a photo of the product).
   ========================================================================== */

/* Nail swatches */
.av-p-swatch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(160deg, #f3f3ef 0%, #e9eae5 100%);
}

.av-p-nail {
	flex-shrink: 0;
	width: 56px;
	height: 80px;
	box-shadow: inset 0 -8px 12px rgba(0, 0, 0, 0.12), 0 8px 16px -10px rgba(70, 25, 25, 0.55);
}

.av-p-nail--oval {
	border-radius: 50%;
}

.av-p-nail--almond {
	border-radius: 50% 50% 46% 46% / 68% 68% 32% 32%;
}

.av-p-nail--red-velvet {
	background:
		radial-gradient(55% 38% at 42% 34%, rgba(255, 140, 155, 0.55), transparent 72%),
		linear-gradient(160deg, #a01d33 0%, #5c0b19 100%);
}

.av-p-nail--grey-lines {
	background:
		repeating-radial-gradient(circle at 15% 115%, transparent 0 9px, rgba(255, 255, 255, 0.85) 9px 10px, transparent 10px 19px),
		linear-gradient(160deg, #bdb2ad 0%, #8e837f 100%);
}

.av-p-nail--french {
	background: linear-gradient(to top, #f1d2ca 0 70%, #fffaf7 70%);
}

.av-p-nail--ombre {
	background: linear-gradient(to top, #e5b0b4 0%, #fff4f1 100%);
}

.av-p-nail--mauve {
	background: linear-gradient(160deg, #b8828f 0%, #86505e 100%);
}

/* Small swatch inside the quick-choice tiles */
.av-p-swatch--mini {
	flex: 0 0 48px;
	width: 48px;
	height: 56px;
	border-radius: 10px;
}

.av-p-swatch--mini .av-p-nail {
	width: 20px;
	height: 30px;
}

.av-p-swatch--trio .av-p-nail {
	width: 40px;
	height: 60px;
}

/* Quick choice: three rows */
.av-p .av-p-quick__grid {
	grid-template-columns: 1fr;
}

/* How to choose: four across on desktop */
@media (min-width: 1024px) {
	.av-p .av-p-tips {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Picks (768px and up): one wide horizontal card per set, swatch on the left,
   so the first "Shop" button stays in the first screen. */
@media (min-width: 768px) {
	.av-p .av-p-picks__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.av-p .av-e-pick {
		grid-template-columns: 24% minmax(0, 1fr);
	}
}

/* Laptop and desktop: the four detail rows sit in a 2 x 2 grid. */
@media (min-width: 1024px) {
	.av-p .av-e-pick__body {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		align-content: start;
	}

	.av-p .av-e-pick__lead,
	.av-h.av-p .av-e-buy {
		grid-column: 1 / -1;
	}

	.av-h.av-p .av-e-buy {
		max-width: 340px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.av-p .av-p-quick__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.av-p .av-p-tips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile */
@media (max-width: 767px) {
	/* Quick choice: three compact columns, swatch above the text. */
	.av-p .av-p-quick__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}

	.av-p .av-p-quick__grid .av-e-tile {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 6px 6px 8px;
	}

	.av-p .av-p-quick__grid .av-p-swatch--mini {
		flex-basis: auto;
		width: 100%;
		height: 44px;
	}

	.av-p .av-p-quick__grid .av-e-tile__text {
		font-size: 11px;
	}

	.av-p .av-p-quick__grid .av-e-tile__text strong {
		font-size: 13px;
		line-height: 1.2;
	}

	.av-p .av-e-pick__media {
		width: 88px;
		height: 88px;
		border-radius: 12px;
	}

	.av-p .av-e-pick__media .av-p-nail {
		width: 36px;
		height: 54px;
	}

	.av-p .av-p-swatch--trio {
		gap: 5px;
	}

	.av-p .av-p-swatch--trio .av-p-nail {
		width: 20px;
		height: 32px;
	}

	.av-p .av-p-verdicts__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Starter Kits (pattern "aniravibe/starter-kits")

   Reuses the homepage design system (.av-h), the Eco Polish components
   (.av-e) and the Press-On Magic card layout and swatch panel (.av-p).
   Only the differences live here, scoped to .av-k. There are no product
   photos, so each kit is shown as an abstract colour palette (not a
   photo of the product or its exact shades).
   ========================================================================== */

/* Colour palettes */
.av-k-palette {
	flex-shrink: 0;
	width: 72px;
	height: 54px;
}

.av-k-palette--gel {
	background:
		radial-gradient(circle at 12% 22%, #d81b60 0 6px, transparent 6.5px),
		radial-gradient(circle at 37% 22%, #f06292 0 6px, transparent 6.5px),
		radial-gradient(circle at 62% 22%, #ff8a65 0 6px, transparent 6.5px),
		radial-gradient(circle at 87% 22%, #ffd54f 0 6px, transparent 6.5px),
		radial-gradient(circle at 12% 50%, #81c784 0 6px, transparent 6.5px),
		radial-gradient(circle at 37% 50%, #4db6ac 0 6px, transparent 6.5px),
		radial-gradient(circle at 62% 50%, #64b5f6 0 6px, transparent 6.5px),
		radial-gradient(circle at 87% 50%, #7986cb 0 6px, transparent 6.5px),
		radial-gradient(circle at 12% 78%, #ba68c8 0 6px, transparent 6.5px),
		radial-gradient(circle at 37% 78%, #8d6e63 0 6px, transparent 6.5px),
		radial-gradient(circle at 62% 78%, #fafafa 0 6px, transparent 6.5px),
		radial-gradient(circle at 87% 78%, #263238 0 6px, transparent 6.5px);
}

.av-k-palette--poly {
	background:
		radial-gradient(circle at 18% 30%, #f3c1c6 0 9px, transparent 9.5px),
		radial-gradient(circle at 50% 30%, #e39aa5 0 9px, transparent 9.5px),
		radial-gradient(circle at 82% 30%, #f7e3d9 0 9px, transparent 9.5px),
		radial-gradient(circle at 18% 72%, #c98b9a 0 9px, transparent 9.5px),
		radial-gradient(circle at 50% 72%, #fdfaf8 0 9px, transparent 9.5px),
		radial-gradient(circle at 82% 72%, #d4b3a6 0 9px, transparent 9.5px);
}

.av-p-swatch--mini .av-k-palette {
	transform: scale(0.6);
}

/* Quick choice: two rows beside the hero on desktop */
@media (min-width: 992px) {
	.av-k .av-k-quick__grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.av-k .av-k-quick__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* A larger palette inside the wide card's swatch column */
@media (min-width: 768px) {
	.av-k .av-e-pick__media .av-k-palette {
		transform: scale(1.5);
	}
}

/* ==========================================================================
   Articles (pattern "aniravibe/nail-notes"): Nail Notes, "Why your nails keep breaking"

   Builds on the homepage design system (.av-h tokens, buttons, section
   heads, guide cards). Article styles are scoped to .av-a.

   REUSABLE (candidate article system): hero, series label, dek, meta line,
   lede, reading column, section headings, callouts, contextual product
   module, disclosure, aside, closing line,
   products recap, keep exploring.
   ARTICLE-SPECIFIC: the "What kind of breaking keeps happening?" jump tiles
   and the two product icons.
   ========================================================================== */

/* Posts don't carry the designed-page body class, so set the page tone here. */
body:has(.av-a) {
	background-color: #f3f3ef;
	background-image: none;
}

.av-a {
	--a-text: #171a18;
	--a-measure: 600px;
}

.av-a a:focus-visible {
	outline: 2px solid var(--h-accent);
	outline-offset: 2px;
}

/* Hero */
.av-a-hero {
	padding-block: 8px 36px;
}

.av-a-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	gap: 48px;
	align-items: center;
}

.av-a .av-a-series {
	color: var(--h-rose);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-a .av-a-series a:hover {
	color: var(--h-accent);
}

.av-a .av-a-title {
	max-width: 17ch;
	margin-block-start: 12px;
	font-family: var(--h-serif);
	font-size: 52px;
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.av-a .av-a-dek {
	max-width: 46ch;
	margin-block-start: 16px;
	color: var(--h-muted);
	font-size: 19px;
	line-height: 1.5;
}

.av-a .av-a-meta {
	margin-block-start: 16px;
	color: var(--h-muted);
	font-size: 13px;
}

.av-a .av-a-meta a,
.av-a .av-a-col p a,
.av-a .av-a-col li a {
	color: var(--h-accent-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.av-a .av-a-hero__media img {
	width: 100%;
	max-height: 460px;
	aspect-ratio: 4 / 5;
	border-radius: 22px;
	object-fit: cover;
}

/* Reading column */
.av-a-col {
	width: min(var(--a-measure), 100% - 2 * var(--h-gutter));
	margin-inline: auto;
	color: var(--a-text);
	font-size: 17.5px;
	line-height: 1.75;
}

.av-a .av-a-col > * + * {
	margin-block-start: 18px;
}

.av-a .av-a-col > h2 {
	margin-block-start: 52px;
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.12;
	scroll-margin-top: 20px;
}

.av-a .av-a-col > h2 + p {
	margin-block-start: 14px;
}

/* Opening paragraph */
.av-a .av-a-lede {
	color: var(--h-ink);
	font-size: 19.5px;
	line-height: 1.65;
}

.av-a .av-a-col ul {
	margin: 0;
	padding-inline-start: 20px;
}


/* Jump tiles (article-specific) */
.av-a .av-a-jump {
	margin-block-start: 22px;
}

.av-a .av-a-jump__title {
	margin-block-end: 10px;
	color: var(--h-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-a-jump__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.av-a .av-a-col .av-a-jump__tile a {
	position: relative;
	display: block;
	height: 100%;
	padding: 12px 38px 12px 14px;
	border: 1px solid var(--h-line);
	border-radius: 14px;
	background-color: var(--h-card);
	color: var(--h-muted);
	font-size: 13.5px;
	line-height: 1.35;
	text-decoration: none;
	transition: border-color 0.2s;
}

.av-a .av-a-jump__tile a:hover {
	border-color: var(--h-accent);
}

.av-a .av-a-jump__tile a::after {
	content: "↓";
	position: absolute;
	top: 50%;
	right: 14px;
	color: var(--h-accent);
	transform: translateY(-50%);
}

.av-a .av-a-jump__tile strong {
	display: block;
	color: var(--h-ink);
	font-size: 15px;
	font-weight: 600;
}

/* Callouts */
.av-a .av-a-callout {
	padding: 16px 20px;
	border: 1px solid var(--h-line);
	border-left: 4px solid var(--h-accent);
	border-radius: 14px;
	background-color: var(--h-card);
}

.av-a .av-a-callout__title {
	margin-block-end: 6px;
	color: var(--h-accent-dark);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-a .av-a-callout li {
	font-size: 16px;
	line-height: 1.6;
}

.av-a .av-a-callout li + li {
	margin-block-start: 6px;
}

.av-a .av-a-callout strong {
	color: var(--h-ink);
	font-weight: 600;
}

/* Disclosure and contextual product module */
.av-a .av-a-disclosure {
	margin-block-start: 26px;
	color: var(--h-muted);
	font-size: 12.5px;
	line-height: 1.5;
}

.av-a .av-a-disclosure + .av-a-product {
	margin-block-start: 10px;
}

.av-a .av-a-product {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 18px;
	padding: 18px;
	border: 1px solid var(--h-line);
	border-radius: 18px;
	background-color: var(--h-card);
	scroll-margin-top: 20px;
}

.av-a .av-a-product__icon {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 14px;
	background: linear-gradient(160deg, #f3f3ef 0%, #e9eae5 100%);
}

/* Generic bottle silhouette: a hint of the product type, not the product. */
.av-a .av-a-product__icon::before {
	content: "";
	position: absolute;
	bottom: 12px;
	left: 50%;
	width: 26px;
	height: 30px;
	border-radius: 7px;
	background-color: var(--a-liquid, #f3d9d2);
	box-shadow: inset 0 -8px 10px rgba(0, 0, 0, 0.08), 0 4px 10px -6px rgba(70, 25, 25, 0.5);
	transform: translateX(-50%);
}

.av-a .av-a-product__icon::after {
	content: "";
	position: absolute;
	bottom: 42px;
	left: 50%;
	width: 14px;
	height: 16px;
	border-radius: 4px 4px 2px 2px;
	background-color: #5b4750;
	transform: translateX(-50%);
}

.av-a .av-a-product__icon--oil {
	--a-liquid: #e8bd78;
}

.av-a .av-a-product__icon--coat {
	--a-liquid: #f7e6e2;
}


.av-a .av-a-product__role {
	color: var(--h-rose);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-a .av-a-product__name {
	margin-block-start: 2px;
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.15;
}

.av-a .av-a-product__text {
	margin-block-start: 6px;
	color: var(--h-muted);
	font-size: 15px;
	line-height: 1.55;
}

.av-a .av-a-product__note {
	margin-block-start: 6px;
	color: var(--h-muted);
	font-size: 13.5px;
	font-style: italic;
	line-height: 1.5;
}

.av-h .av-a-product__cta {
	margin-block-start: 12px;
}

.av-a .av-a-aside {
	padding-inline-start: 14px;
	border-inline-start: 2px solid var(--h-blush-deep);
	color: var(--h-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* Closing line */
.av-a .av-a-col > .av-a-closer {
	margin-block-start: 24px;
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 27px;
	font-weight: 600;
	line-height: 1.25;
}

/* Products recap */
.av-a .av-a-col > .av-a-recap {
	margin-block-start: 48px;
	padding: 22px 24px 24px;
	border-radius: 20px;
	background-color: var(--h-blush);
}

.av-a .av-a-recap__title {
	margin-block-end: 6px;
	font-family: var(--h-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.15;
}

.av-a .av-a-col .av-a-recap__row a {
	position: relative;
	display: block;
	margin-block-start: 8px;
	padding: 11px 44px 11px 14px;
	border-radius: 12px;
	background-color: var(--h-card);
	color: var(--h-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: box-shadow 0.2s;
}

.av-a .av-a-recap__row a:hover {
	box-shadow: 0 0 0 1px var(--h-accent);
}

.av-a .av-a-recap__row a::after {
	content: "↗";
	position: absolute;
	top: 50%;
	right: 16px;
	color: var(--h-accent);
	transform: translateY(-50%);
}

.av-a .av-a-recap__row strong {
	display: block;
	color: var(--h-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}


/* Tablet and small laptop */
@media (min-width: 768px) and (max-width: 1199px) {
	.av-a-hero__grid {
		gap: 32px;
	}

	.av-a .av-a-title {
		font-size: 42px;
	}
}

/* Mobile: title and promise first, a short image strip, then straight into reading. */
@media (max-width: 767px) {
	.av-a-hero {
		padding-block: 0 24px;
	}

	.av-a-hero__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.av-a .av-a-title {
		max-width: none;
		font-size: 34px;
	}

	.av-a .av-a-dek {
		font-size: 17px;
	}

	.av-a .av-a-lede {
		font-size: 18px;
	}

	.av-a .av-a-meta {
		font-size: 12.5px;
	}

	.av-a .av-a-hero__media img {
		max-height: none;
		aspect-ratio: 16 / 9;
		border-radius: 18px;
		object-position: center 30%;
	}

	.av-a-col {
		font-size: 17px;
	}

	.av-a .av-a-col > h2 {
		margin-block-start: 40px;
		font-size: 28px;
	}


	.av-a-jump__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.av-a .av-a-jump__tile a {
		padding: 10px 30px 10px 12px;
		font-size: 12.5px;
	}

	.av-a .av-a-jump__tile a::after {
		right: 10px;
	}

	.av-a .av-a-jump__tile strong {
		font-size: 14px;
	}

	.av-a .av-a-callout {
		padding: 14px 16px;
	}

	.av-a .av-a-product {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 14px;
		padding: 14px;
	}

	.av-a .av-a-product__icon {
		width: 52px;
		height: 52px;
		border-radius: 12px;
	}

	.av-a .av-a-product__icon::before {
		bottom: 8px;
		width: 20px;
		height: 22px;
		border-radius: 5px;
	}

	.av-a .av-a-product__icon::after {
		bottom: 30px;
		width: 10px;
		height: 12px;
	}

	.av-a .av-a-product__name {
		font-size: 21px;
	}

	.av-h .av-a-product__cta {
		grid-column: 1 / -1;
		margin-inline-start: -66px;
	}

	.av-h .av-a-product__cta .wp-block-button,
	.av-h .av-a-product__cta .wp-block-button__link {
		width: 100%;
	}

	.av-h .av-a-product__cta .wp-block-button__link {
		min-height: 48px;
	}

	.av-a .av-a-col > .av-a-recap {
		padding: 18px;
	}

	.av-a .av-a-col > .av-a-closer {
		font-size: 24px;
	}
}

/* ==========================================================================
   Explore More (pattern "aniravibe/explore-more"): the editorial front door

   Builds on the homepage design system (.av-h tokens, kicker, buttons) and
   reuses the collection illustrations (.av-p-nail shapes, .av-k-palette).
   Everything else is scoped to .av-x.

   PERMANENT COMPONENTS: opening, featured read (any story: article, guide,
   comparison), "Where do yours usually give up?" (belongs to the featured
   story; remove it when a feature has no natural jump points), shorter
   reads list, "Skipping the salon?" doors.
   ========================================================================== */

.av-x {
	--x-rule: #d5d7d2;
}

.av-x a:focus-visible {
	outline: 2px solid var(--h-accent);
	outline-offset: 3px;
}

/* Opening: a masthead, not a hero */
.av-x-open {
	padding-block: 28px 44px;
}

.av-x-open__grid {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.av-x .av-x-title {
	margin-block-start: 12px;
	font-family: var(--h-serif);
	font-size: 68px;
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.av-x .av-x-dek {
	max-width: 34ch;
	margin-block-start: 16px;
	color: var(--h-muted);
	font-size: 19px;
	line-height: 1.5;
}

/* A shade card of five nails, echoing the collections */
.av-x-shades {
	display: flex;
	flex-shrink: 0;
	align-items: flex-end;
	gap: 14px;
	padding-block-end: 6px;
}

.av-x .av-x-shades .av-p-nail {
	width: 46px;
	height: 68px;
}

.av-x .av-x-shades .av-p-nail:nth-child(odd) {
	transform: translateY(-14px);
}

/* Featured read: the permanent centrepiece */
.av-x-feature__card {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	overflow: hidden;
	border-radius: 28px;
	background-color: var(--h-card);
	box-shadow: 0 1px 0 var(--h-line), 0 24px 48px -36px rgba(70, 30, 30, 0.45);
}

.av-x .av-x-feature__media {
	position: relative;
	min-height: 100%;
}

.av-x .av-x-feature__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.av-x-feature__body {
	padding: 48px 56px 44px;
}

.av-x .av-x-feature__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	color: var(--h-muted);
	font-size: 13px;
}

.av-x .av-x-feature__label strong {
	padding: 5px 12px;
	border-radius: 999px;
	background-color: var(--h-blush);
	color: var(--h-rose);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-x .av-x-feature__title {
	max-width: 13ch;
	margin-block-start: 18px;
	font-family: var(--h-serif);
	font-size: 54px;
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.av-x .av-x-feature__title a:hover {
	color: var(--h-accent-dark);
}

.av-x .av-x-feature__dek {
	max-width: 40ch;
	margin-block-start: 16px;
	color: var(--h-muted);
	font-size: 18px;
	line-height: 1.55;
}

.av-h .av-x-feature__cta {
	margin-block-start: 24px;
}

/* "Where do yours usually give up?" */
.av-x-ask {
	margin-block-start: 32px;
	padding-block-start: 22px;
	border-block-start: 1px solid var(--h-line);
}

.av-x .av-x-ask__q {
	font-family: var(--h-serif);
	font-size: 22px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.2;
}

.av-x .av-x-ask__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	max-width: 460px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.av-x .av-x-ask__options a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--h-line-strong);
	border-radius: 999px;
	color: var(--h-ink);
	font-size: 14px;
	line-height: 1.2;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.av-x .av-x-ask__options a::after {
	content: "↓";
	color: var(--h-accent);
	font-size: 13px;
}

.av-x .av-x-ask__options a:hover,
.av-x .av-x-ask__options a:focus-visible {
	border-color: var(--h-accent);
	background-color: var(--h-blush);
	color: var(--h-accent-dark);
}

/* Shorter reads: a contents page, not cards */
.av-x-reads {
	padding-block-start: 72px;
}

.av-x-reads__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 48px;
}

.av-x .av-x-reads__title {
	font-family: var(--h-serif);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.1;
}

.av-x .av-x-reads__note {
	margin-block-start: 8px;
	color: var(--h-muted);
	font-size: 15px;
}

.av-x-reads__list {
	border-block-start: 1px solid var(--x-rule);
}

.av-x-read {
	position: relative;
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) 24px;
	grid-template-areas:
		"topic title arrow"
		"topic text arrow";
	column-gap: 20px;
	align-items: baseline;
	padding-block: 22px;
	border-block-end: 1px solid var(--x-rule);
}

.av-x-read::after {
	content: "→";
	grid-area: arrow;
	align-self: center;
	justify-self: end;
	color: var(--h-accent);
	transition: transform 0.2s;
}

.av-x .av-x-read__topic {
	grid-area: topic;
	color: var(--h-rose);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-x .av-x-read__title {
	grid-area: title;
	font-family: var(--h-serif);
	font-size: 27px;
	font-weight: 600;
	line-height: 1.15;
}

/* The whole row is the link. */
.av-x .av-x-read__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.av-x .av-x-read__text {
	grid-area: text;
	margin-block-start: 4px;
	color: var(--h-muted);
	font-size: 15px;
	line-height: 1.5;
}

.av-x-read:hover .av-x-read__title a {
	color: var(--h-accent-dark);
}

.av-x-read:hover::after {
	transform: translateX(4px);
}

/* Skipping the salon? Two evenings, not a product grid */
.av-x-salon {
	padding-block-start: 72px;
}

.av-x-salon__panel {
	padding: 44px 48px 48px;
	border-radius: 28px;
	background-color: var(--h-blush);
}

.av-x-salon__head {
	text-align: center;
}

.av-x .av-x-salon__title {
	font-family: var(--h-serif);
	font-size: 44px;
	font-weight: 600;
	line-height: 1.05;
}

.av-x .av-x-salon__intro {
	margin-block-start: 8px;
	color: var(--h-muted);
	font-size: 16px;
}

.av-x-salon__doors {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: stretch;
	gap: 24px;
	margin-block-start: 32px;
}

.av-x .av-x-salon__or {
	align-self: center;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--h-card);
	color: var(--h-muted);
	font-family: var(--h-serif);
	font-size: 18px;
	font-style: italic;
}

.av-x-door {
	position: relative;
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 22px;
	align-items: center;
	padding: 22px;
	border-radius: 22px;
	background-color: var(--h-card);
	transition: box-shadow 0.2s;
}

.av-x-door:hover {
	box-shadow: 0 0 0 1px var(--h-accent);
}

.av-x .av-x-door__art {
	gap: 8px;
	height: 150px;
	border-radius: 16px;
}

.av-x .av-x-door__art .av-p-nail {
	width: 30px;
	height: 46px;
}

.av-x .av-x-door__art .av-k-palette {
	flex-shrink: 1;
	transform: scale(0.8);
}

.av-x .av-x-door__art:has(.av-k-palette) {
	flex-direction: column;
	gap: 0;
}

.av-x .av-x-door__label {
	color: var(--h-rose);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-x .av-x-door__title {
	margin-block-start: 6px;
	font-family: var(--h-serif);
	font-size: 27px;
	font-weight: 600;
	line-height: 1.12;
}

.av-x .av-x-door__text {
	margin-block-start: 8px;
	color: var(--h-muted);
	font-size: 15px;
	line-height: 1.5;
}

.av-x .av-x-door__link {
	margin-block-start: 14px;
	color: var(--h-accent-dark);
	font-size: 15px;
	font-weight: 600;
}

.av-x .av-x-door__link a::after {
	content: " →";
}

/* The whole door is the link. */
.av-x .av-x-door__link a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 22px;
}

/* Tablet and small laptop */
@media (min-width: 768px) and (max-width: 1099px) {
	.av-x .av-x-title {
		font-size: 56px;
	}

	.av-x-feature__body {
		padding: 36px 36px 32px;
	}

	.av-x .av-x-feature__title {
		font-size: 42px;
	}

	.av-x-reads__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.av-x-salon__panel {
		padding: 36px 28px 32px;
	}

	.av-x-salon__doors {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.av-x .av-x-salon__or {
		justify-self: center;
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
}

/* Mobile: every section earns its scroll */
@media (max-width: 767px) {
	.av-x-open {
		padding-block: 12px 26px;
	}

	.av-x-open__grid {
		position: relative;
		display: block;
	}

	.av-x .av-x-title {
		margin-block-start: 8px;
		font-size: 44px;
	}

	.av-x .av-x-dek {
		margin-block-start: 10px;
		font-size: 17px;
	}

	.av-x-shades {
		position: absolute;
		top: -2px;
		right: 0;
		gap: 6px;
		padding: 0;
	}

	.av-x .av-x-shades .av-p-nail {
		width: 16px;
		height: 24px;
		box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.12);
	}

	.av-x .av-x-shades .av-p-nail:nth-child(odd) {
		transform: none;
	}

	.av-x-feature__card {
		grid-template-columns: 1fr;
		width: 100%;
		border-radius: 0;
		box-shadow: none;
	}

	.av-x .av-x-feature__media {
		min-height: 0;
	}

	.av-x .av-x-feature__media img {
		position: static;
		height: auto;
		aspect-ratio: 16 / 10;
		object-position: center 30%;
	}

	.av-x-feature__body {
		padding: 22px var(--h-gutter) 28px;
	}

	.av-x .av-x-feature__title {
		max-width: none;
		margin-block-start: 14px;
		font-size: 36px;
	}

	.av-x .av-x-feature__dek {
		margin-block-start: 10px;
		font-size: 16.5px;
	}

	.av-h .av-x-feature__cta {
		margin-block-start: 18px;
	}

	.av-h .av-x-feature__cta .wp-block-button,
	.av-h .av-x-feature__cta .wp-block-button__link {
		width: 100%;
	}

	.av-h .av-x-feature__cta .wp-block-button__link {
		min-height: 50px;
	}

	.av-x-ask {
		margin-block-start: 24px;
		padding-block-start: 18px;
	}

	.av-x .av-x-ask__q {
		font-size: 20px;
	}

	.av-x .av-x-ask__options a {
		min-height: 48px;
		padding: 10px 14px;
		border-radius: 14px;
		background-color: var(--h-card);
	}

	.av-x-reads {
		padding-block-start: 44px;
	}

	.av-x-reads__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.av-x .av-x-reads__title {
		font-size: 28px;
	}

	.av-x .av-x-reads__note {
		margin-block-start: 4px;
		font-size: 14.5px;
	}

	.av-x-read {
		grid-template-columns: minmax(0, 1fr) 20px;
		grid-template-areas:
			"topic arrow"
			"title arrow"
			"text arrow";
		column-gap: 12px;
		padding-block: 18px;
	}

	.av-x .av-x-read__title {
		margin-block-start: 4px;
		font-size: 23px;
	}

	.av-x .av-x-read__text {
		font-size: 14.5px;
	}

	.av-x-salon {
		padding-block-start: 44px;
	}

	.av-x-salon__panel {
		width: 100%;
		padding: 32px var(--h-gutter) 28px;
		border-radius: 0;
	}

	.av-x .av-x-salon__title {
		font-size: 34px;
	}

	.av-x .av-x-salon__intro {
		font-size: 15px;
	}

	.av-x-salon__doors {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-block-start: 22px;
	}

	.av-x .av-x-salon__or {
		justify-self: center;
		width: 34px;
		height: 34px;
		font-size: 15px;
	}

	.av-x-door {
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 16px;
		align-items: start;
		padding: 16px;
		border-radius: 18px;
	}

	.av-x .av-x-door__art {
		gap: 5px;
		height: 110px;
		border-radius: 12px;
	}

	.av-x .av-x-door__art .av-p-nail {
		width: 20px;
		height: 31px;
	}

	.av-x .av-x-door__art .av-k-palette {
		transform: scale(0.62);
		margin-block: -8px;
	}

	.av-x .av-x-door__title {
		margin-block-start: 4px;
		font-size: 22px;
	}

	.av-x .av-x-door__text {
		margin-block-start: 6px;
		font-size: 14.5px;
	}

	.av-x .av-x-door__link {
		margin-block-start: 10px;
	}

	.av-x .av-x-door__link a::before {
		border-radius: 18px;
	}
}

/* ==========================================================================
   Articles (pattern "aniravibe/the-small-details"): The small details, "What people notice about a man's hands"

   Uses the article system (.av-a: reading column, lede, disclosure, callout,
   product module, recap, keep exploring) and the homepage tokens (.av-h).
   Only this article's own components are scoped to .av-d: the typographic
   hero with its struck-through list, the "What stands out up close" ledger,
   the paired kit comparison, the gift note and the closing quote.
   ========================================================================== */

.av-d {
	--d-stone: #ffffff;
	--d-stone-deep: #d5d7d2;
}

/* Hero: typographic, no photo */
.av-d-hero {
	padding-block: 16px 40px;
}

.av-d-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: 56px;
	align-items: center;
}

.av-d .av-d-title {
	max-width: 17ch;
	margin-block-start: 12px;
	font-family: var(--h-serif);
	font-size: 56px;
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.av-d .av-d-strike {
	margin: 0;
	padding: 30px 34px;
	border-radius: 24px;
	background-color: var(--d-stone);
	list-style: none;
	font-family: var(--h-serif);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.3;
}

.av-d .av-d-strike li {
	color: #626662;
	text-decoration: line-through;
	text-decoration-color: rgba(98, 102, 98, 0.7);
	text-decoration-thickness: 1.5px;
}

.av-d .av-d-strike li:last-child {
	margin-block-start: 10px;
	color: var(--h-ink);
	font-size: 44px;
	font-style: italic;
	font-weight: 600;
	text-decoration: none;
}

/* What stands out up close: a ledger that doubles as navigation */
.av-d .av-d-ledger {
	margin-block-start: 26px;
}

.av-d .av-d-ledger__title {
	margin-block-end: 8px;
	color: var(--h-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-d .av-a-col .av-d-ledger__list {
	margin: 0;
	padding: 0;
	border-block-start: 1px solid var(--d-stone-deep);
	list-style: none;
}

.av-d .av-a-col .av-d-ledger__list a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 20px;
	gap: 16px;
	align-items: baseline;
	padding-block: 12px;
	border-block-end: 1px solid var(--d-stone-deep);
	color: var(--h-muted);
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
}

.av-d .av-d-ledger__list a::after {
	content: "↓";
	justify-self: end;
	color: var(--h-accent);
}

.av-d .av-d-ledger__list strong {
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 20px;
	font-weight: 600;
}

.av-d .av-d-ledger__list a:hover strong {
	color: var(--h-accent-dark);
}

/* Two kits, side by side */
.av-d .av-a-disclosure + .av-d-pair {
	margin-block-start: 10px;
}

.av-d-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	scroll-margin-top: 20px;
}

.av-d-kit {
	display: flex;
	flex-direction: column;
	padding: 20px 20px 22px;
	border: 1px solid var(--h-line);
	border-radius: 18px;
	background-color: var(--h-card);
}


.av-d .av-d-kit__role {
	color: var(--h-rose);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-d .av-d-kit__name {
	margin-block-start: 6px;
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.15;
}

.av-d .av-d-kit__text {
	margin-block-start: 8px;
	color: var(--h-muted);
	font-size: 14.5px;
	line-height: 1.55;
}

.av-d .av-d-kit__note {
	margin-block-start: 8px;
	color: var(--h-muted);
	font-size: 13.5px;
	font-style: italic;
	line-height: 1.5;
}

.av-h .av-d-kit__cta {
	margin-block-start: auto;
	padding-block-start: 16px;
}

.av-h .av-d-kit__cta .wp-block-button,
.av-h .av-d-kit__cta .wp-block-button__link {
	width: 100%;
}

.av-h .av-d-kit__cta .wp-block-button__link {
	font-size: 14.5px;
}

/* Product icon: a round balm tin */
.av-d .av-d-icon--salve::before {
	bottom: 20px;
	width: 44px;
	height: 26px;
	border-radius: 50% / 40%;
	background: linear-gradient(180deg, #f1c86b 0%, #d9a441 100%);
}

.av-d .av-d-icon--salve::after {
	bottom: 38px;
	width: 44px;
	height: 12px;
	border-radius: 50%;
	background-color: #5b4750;
}


/* Gift note */
.av-d .av-d-gift {
	border-left-color: var(--h-rose);
	background-color: var(--d-stone);
}

.av-d .av-d-gift p:not(.av-a-callout__title) {
	font-size: 15.5px;
	line-height: 1.6;
}

/* Closing quote (the original article's own last line) */
.av-d .av-a-col > .av-d-quote {
	margin-block-start: 44px;
	padding-inline-start: 20px;
	border-inline-start: 3px solid var(--h-accent);
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 30px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.25;
}

/* Keep exploring: two items, so two columns */
.av-d .av-h-guides__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Tablet and small laptop */
@media (min-width: 768px) and (max-width: 1099px) {
	.av-d-hero__grid {
		gap: 32px;
	}

	.av-d .av-d-title {
		font-size: 46px;
	}

	.av-d .av-d-strike {
		padding: 24px 26px;
		font-size: 25px;
	}

	.av-d .av-d-strike li:last-child {
		font-size: 36px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.av-d-hero {
		padding-block: 4px 22px;
	}

	.av-d-hero__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.av-d .av-d-title {
		max-width: none;
		font-size: 36px;
	}

	/* The struck-through list becomes one compact line of type. */
	.av-d .av-d-strike {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 2px 12px;
		padding: 14px 16px;
		border-radius: 16px;
		font-size: 17px;
	}

	.av-d .av-d-strike li:last-child {
		margin: 0;
		font-size: 24px;
	}

	.av-d .av-a-col .av-d-ledger__list a {
		grid-template-columns: minmax(0, 1fr) 16px;
		gap: 2px 12px;
		padding-block: 11px;
		font-size: 14px;
	}

	.av-d .av-d-ledger__list strong {
		grid-column: 1;
		font-size: 19px;
	}

	.av-d .av-d-ledger__list a::after {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
	}

	.av-d-pair {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.av-d-kit {
		padding: 16px 16px 18px;
	}

	.av-d .av-d-kit__name {
		font-size: 21px;
	}

	.av-h .av-d-kit__cta .wp-block-button__link {
		min-height: 48px;
	}

	.av-d .av-d-icon--salve::before {
		bottom: 12px;
		width: 34px;
		height: 20px;
	}

	.av-d .av-d-icon--salve::after {
		bottom: 26px;
		width: 34px;
		height: 10px;
	}

	.av-d .av-a-col > .av-d-quote {
		margin-block-start: 36px;
		font-size: 25px;
	}

	.av-d .av-h-guides__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Articles (pattern "aniravibe/the-quiet-routine"): The quiet routine, "What your nails reflect"

   Uses the article system (.av-a: series label, dek, meta, reading column,
   lede, disclosure, callout, product module, recap, keep exploring), the
   homepage tokens (.av-h) and the collection nail shape (.av-p-nail).
   Only this article's own components are scoped to .av-q: the nail-timeline
   hero, the "Reading the record" rows, the two-step routine, the small print
   note and the closing line.
   ========================================================================== */

.av-q {
	--q-stone: #ffffff;
	--q-stone-deep: #d5d7d2;
	--q-sage: #213a30;
}

/* Hero: headline beside a nail drawn as a timeline */
.av-q-hero {
	padding-block: 16px 40px;
}

.av-q-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	gap: 56px;
	align-items: center;
}

.av-q .av-q-title {
	max-width: 13ch;
	margin-block-start: 12px;
	font-family: var(--h-serif);
	font-size: 58px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.av-q-timeline {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 22px;
	padding: 28px 30px;
	border-radius: 24px;
	background-color: var(--q-stone);
}

.av-q .av-q-timeline__nail {
	width: 92px;
	height: 150px;
	background: linear-gradient(to top, #e6bcaf 0 32.5%, #fffaf8 32.5% 33.5%, #efcfc4 33.5% 65.5%, #fffaf8 65.5% 66.5%, #faeee9 66.5%);
}

.av-q .av-q-timeline__labels {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	color: var(--h-muted);
	font-size: 13.5px;
	line-height: 1.3;
}

.av-q .av-q-timeline__labels strong {
	display: block;
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 19px;
	font-weight: 600;
}

/* Reading the record */
.av-q .av-q-rows {
	border-block-start: 1px solid var(--q-stone-deep);
}

.av-q-row {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 18px;
	padding-block: 16px;
	border-block-end: 1px solid var(--q-stone-deep);
}

.av-q .av-a-col .av-q-row > p {
	margin: 0;
}

.av-q .av-q-row__sign {
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
}

.av-q .av-q-row__cause,
.av-q .av-q-row__try {
	color: var(--h-muted);
	font-size: 15px;
	line-height: 1.5;
}

.av-q .av-q-row__try {
	color: var(--a-text);
}

.av-q .av-q-row__cause strong,
.av-q .av-q-row__try strong {
	display: block;
	margin-block-end: 2px;
	color: var(--q-sage);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.av-q .av-q-row__try strong {
	color: var(--h-rose);
}

/* The two-step routine */
.av-q .av-a-disclosure + .av-q-step {
	margin-block-start: 12px;
}

.av-q-step {
	padding: 22px 22px 24px;
	border-radius: 20px;
	background-color: var(--q-stone);
}

.av-q .av-q-step__when {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.av-q .av-q-step__when strong {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--h-accent);
	color: #fff;
	font-family: var(--av-font-content);
	font-size: 14px;
	font-weight: 600;
}

.av-q .av-q-step__text {
	margin-block-start: 8px;
	font-size: 16.5px;
	line-height: 1.6;
}

.av-q .av-q-step .av-q-product {
	margin-block-start: 16px;
}

/* A round lemon tin */
.av-q .av-q-icon--tin::before {
	bottom: 20px;
	width: 44px;
	height: 26px;
	border-radius: 50% / 40%;
	background: linear-gradient(180deg, #f4dc7a 0%, #e0b93f 100%);
}

.av-q .av-q-icon--tin::after {
	bottom: 38px;
	width: 44px;
	height: 12px;
	border-radius: 50%;
	background-color: #f1e3a2;
	box-shadow: inset 0 0 0 2px #d8bf5a;
}

.av-q .av-a-col > .av-q-small {
	margin-block-start: 12px;
	color: var(--h-muted);
	font-size: 13.5px;
	font-style: italic;
	line-height: 1.5;
}

/* One thing a routine can't fix: calm, not clinical */
.av-q .av-q-note {
	margin-block-start: 32px;
	border-left-color: var(--q-sage);
}

.av-q .av-q-note .av-a-callout__title {
	color: var(--q-sage);
}

.av-q .av-q-note p:not(.av-a-callout__title) {
	font-size: 15.5px;
	line-height: 1.6;
}

/* Closing line */
.av-q .av-a-col > .av-q-closing {
	margin-block-start: 40px;
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 30px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	text-wrap: balance;
}

/* Keep exploring: two items, so two columns */
.av-q .av-h-guides__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Tablet and small laptop */
@media (min-width: 768px) and (max-width: 1099px) {
	.av-q-hero__grid {
		gap: 32px;
	}

	.av-q .av-q-title {
		font-size: 48px;
	}

	.av-q-timeline {
		padding: 22px 20px;
		gap: 16px;
	}

	.av-q .av-q-timeline__nail {
		width: 74px;
		height: 122px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.av-q-hero {
		padding-block: 4px 22px;
	}

	.av-q-hero__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.av-q .av-q-title {
		max-width: none;
		font-size: 38px;
	}

	/* The timeline turns sideways: a short strip under the headline. */
	.av-q-timeline {
		justify-content: flex-start;
		gap: 14px;
		padding: 14px 16px;
		border-radius: 16px;
	}

	.av-q .av-q-timeline__nail {
		width: 40px;
		height: 64px;
	}

	.av-q .av-q-timeline__labels {
		padding: 0;
		font-size: 12.5px;
	}

	.av-q .av-q-timeline__labels strong {
		display: inline;
		margin-inline-end: 6px;
		font-size: 16px;
	}

	.av-q-row {
		grid-template-columns: 1fr;
		gap: 6px;
		padding-block: 14px;
	}

	.av-q .av-q-row__sign {
		font-size: 20px;
	}

	.av-q .av-q-row__cause strong,
	.av-q .av-q-row__try strong {
		display: inline;
		margin-inline-end: 6px;
	}

	.av-q-step {
		padding: 18px 16px 18px;
		border-radius: 16px;
	}

	.av-q .av-q-step__when {
		font-size: 22px;
	}

	.av-q .av-q-icon--tin::before {
		bottom: 12px;
		width: 34px;
		height: 20px;
	}

	.av-q .av-q-icon--tin::after {
		bottom: 26px;
		width: 34px;
		height: 10px;
	}

	.av-q .av-a-col > .av-q-closing {
		margin-block-start: 32px;
		font-size: 25px;
	}

	.av-q .av-h-guides__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Posts: ordinary block-editor articles (single.php)

   Any post that is not built from an article pattern gets the Anira Vibe
   article look automatically: the wrapper carries .av-h (tokens) and .av-a
   (article system: cream page, reading column, series label, title, dek,
   paragraph rhythm, H2s, list and link styles). The rules below only add what
   ordinary content needs on top: the header and featured image, H3/H4, images
   and captions, quotes, tables, buttons, separators and embeds.
   ========================================================================== */

.av-post__header {
	width: min(var(--a-measure), 100% - 2 * var(--h-gutter));
	margin-inline: auto;
	padding-block: 24px 32px;
}

.av-post .av-post__header .av-a-title {
	max-width: none;
}

.av-post__media {
	width: min(880px, 100% - 2 * var(--h-gutter));
	margin: 0 auto 40px;
}

.av-post .av-post__media img {
	display: block;
	width: 100%;
	max-height: 560px;
	border-radius: 22px;
	object-fit: cover;
}

/* Headings below H2 */
.av-post .av-post__content > h3 {
	margin-block-start: 36px;
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}

.av-post .av-post__content > h4 {
	margin-block-start: 28px;
	color: var(--h-ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.av-post .av-post__content > :is(h3, h4) + * {
	margin-block-start: 10px;
}

/* Lists */
.av-post .av-post__content ol {
	margin: 0;
	padding-inline-start: 22px;
}

.av-post .av-post__content li + li {
	margin-block-start: 6px;
}

.av-post .av-post__content li::marker {
	color: var(--h-accent);
}

/* Links inside quotes, tables and captions get the article link style too */
.av-post .av-post__content :is(blockquote, td, th, figcaption) a {
	color: var(--h-accent-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Images, galleries and captions */
.av-post .av-post__content > :is(.wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-table, .wp-block-quote, .wp-block-pullquote) {
	margin-block: 28px;
}

.av-post .av-post__content .wp-block-image img {
	border-radius: 16px;
}

.av-post .av-post__content :is(figcaption, .wp-element-caption) {
	margin-block-start: 8px;
	color: var(--h-muted);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* Quotes */
.av-post .av-post__content .wp-block-quote {
	margin-inline: 0;
	padding-inline-start: 20px;
	border-inline-start: 3px solid var(--h-accent);
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 23px;
	font-style: italic;
	line-height: 1.4;
}

.av-post .av-post__content .wp-block-quote cite {
	display: block;
	margin-block-start: 8px;
	color: var(--h-muted);
	font-family: var(--av-font-content);
	font-size: 14px;
	font-style: normal;
}

.av-post .av-post__content .wp-block-pullquote {
	padding: 24px 0;
	border-block: 1px solid var(--h-line);
	color: var(--h-ink);
	font-family: var(--h-serif);
	font-size: 26px;
	font-style: italic;
	line-height: 1.35;
	text-align: center;
}

.av-post .av-post__content .wp-block-pullquote cite {
	display: block;
	margin-block-start: 10px;
	color: var(--h-muted);
	font-family: var(--av-font-content);
	font-size: 14px;
	font-style: normal;
	text-transform: none;
}

/* Tables: scroll sideways on small screens instead of overflowing */
.av-post .av-post__content .wp-block-table {
	overflow-x: auto;
}

.av-post .av-post__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.av-post .av-post__content :is(th, td) {
	padding: 10px 12px;
	border: 0;
	border-block-end: 1px solid var(--h-line);
	text-align: left;
	vertical-align: top;
}

.av-post .av-post__content th {
	color: var(--h-ink);
	font-weight: 600;
}

.av-post .av-post__content thead {
	border: 0;
}

.av-post .av-post__content thead th {
	border-block-end: 2px solid var(--h-line-strong);
}

/* Buttons: the site's mocha pill; the block editor's "Outline" style gets the white pill */
.av-post .av-post__content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 22px;
	border: 1px solid var(--h-accent);
	border-radius: 999px;
	background-color: var(--h-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s;
}

.av-post .av-post__content .wp-block-button__link:hover,
.av-post .av-post__content .wp-block-button__link:focus-visible {
	border-color: var(--h-accent-dark);
	background-color: var(--h-accent-dark);
	color: #fff;
}

.av-post .av-post__content .is-style-outline .wp-block-button__link {
	border-color: var(--h-line-strong);
	background-color: var(--h-card);
	color: var(--h-ink);
}

.av-post .av-post__content .is-style-outline .wp-block-button__link:hover,
.av-post .av-post__content .is-style-outline .wp-block-button__link:focus-visible {
	border-color: var(--h-accent);
	background-color: var(--h-card);
	color: var(--h-accent);
}

/* Separators */
.av-post .av-post__content .wp-block-separator {
	width: 80px;
	margin-block: 40px;
	margin-inline: auto;
	border: 0;
	border-block-start: 1px solid var(--h-line-strong);
}

/* Mobile */
@media (max-width: 767px) {
	.av-post__header {
		padding-block: 12px 24px;
	}

	.av-post__media {
		margin-block-end: 28px;
	}

	.av-post .av-post__media img {
		max-height: 420px;
		border-radius: 18px;
	}

	.av-post .av-post__content > h3 {
		margin-block-start: 30px;
		font-size: 23px;
	}

	.av-post .av-post__content .wp-block-quote {
		font-size: 20px;
	}

	.av-post .av-post__content .wp-block-pullquote {
		font-size: 22px;
	}

	.av-post .av-post__content .wp-block-button,
	.av-post .av-post__content .wp-block-button__link {
		width: 100%;
	}

	.av-post .av-post__content .wp-block-button__link {
		min-height: 48px;
	}
}

/* ==========================================================================
   Collections
   ========================================================================== */

.av-page-heading {
	color: var(--av-text);
	font-size: 32px;
}

.av-lead {
	font-size: 24px;
}

.av-disclosure {
	color: var(--av-text);
	font-size: 14px;
	font-weight: 400;
}

.av-justify {
	text-align: justify;
}

.av-center {
	text-align: center;
}

/* One product per row: image column + text column (Eco Polish). */
.av-product {
	margin-block-start: 60px;
	padding: 60px 10px 10px;
}

.av-product__row {
	align-items: center;
	gap: 30px;
}

.av-product__media {
	flex: 0 1 40%;
	padding: 10px;
	text-align: center;
}

.av-product__media img {
	width: 100%;
	max-width: 220px;
}

.av-product__body {
	flex: 0 1 60%;
	padding-block: 15px;
}

.av-closing {
	padding: 60px 10px 6px;
}

.av-closing .av-stack {
	padding: 10px;
}

.av-disclaimer p {
	font-size: 15px;
}

/* Press on Magic */
.av-press-hero__text {
	flex: 0 1 40%;
	padding: 10px;
	text-align: center;
}

.av-press-hero__media {
	flex: 0 1 60%;
	padding: 10px;
	text-align: center;
}

.av-press-hero__media img {
	width: 60%;
}

.av-press-choosing .av-button-wrap {
	margin-block-start: 30px;
	padding-block-start: 30px;
}

.av-press-products {
	padding: 120px 10px 10px;
}

.av-press-products__row {
	align-items: center;
}

.av-press-products__media {
	flex: 0 1 40%;
	padding: 10px;
	text-align: center;
}

.av-press-products__media img {
	width: 100%;
}

/* The original left an empty 20% column here; the products now use the remaining width. */
.av-press-products__body {
	flex: 1 1 0;
	padding: 10px;
}

/* Starter Kits */
.av-starter__row > .av-col {
	flex: 1 1 0;
	padding: 10px;
}

.av-starter__row img {
	width: 100%;
}

/* Kept at its natural (square) proportions instead of the stretched original. */
.av-starter__row .av-starter__extra {
	padding: 10px;
	text-align: center;
}

.av-starter__row .av-starter__extra img {
	width: auto;
	max-width: 93%;
	max-height: 336px;
}

/* Explore More */
.av-explore__media {
	text-align: center;
}

/* ==========================================================================
   Posts, blog listing and standard pages
   ========================================================================== */

.av-entry-title {
	font-size: 2.5rem;
}

.av-entry-content a {
	text-decoration: underline;
}

.av-legal .av-entry-content {
	color: var(--av-grey);
}

.av-post-summary__title a {
	text-decoration: none;
}

.av-pagination {
	display: flex;
	justify-content: space-between;
	margin-block: 2rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.av-footer {
	padding: 30px 10px 48px;
	color: var(--av-footer);
	font-family: var(--av-font-content);
	text-align: center;
}

.av-footer p {
	margin-block: 0 0.9rem;
}

.av-footer__sep {
	color: var(--av-grey);
}

/* ==========================================================================
   Tablet (768px - 1024px): columns stay side by side
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
	.av-story__media img,
	.av-part__media img {
		height: 500px;
		object-fit: cover;
	}

	.av-curious__media img {
		height: 303px;
		object-fit: cover;
	}
}

/* ==========================================================================
   Mobile (767px and below): columns stack in source order
   ========================================================================== */

@media (max-width: 767px) {
	.av-row {
		flex-direction: column;
	}

	.av-row > .av-col {
		flex: 0 0 auto;
		width: 100%;
	}

	/* Home */
	.av-home-hero {
		padding: 60px 0 10px;
	}

	.av-home-hero__inner > :not(.av-home-hero__media) {
		padding-inline: 10px;
	}

	.av-tagline {
		font-size: 16px;
	}

	.av-home-hero__sub {
		margin-block: 0 15px;
	}

	.av-home-hero__sub p {
		margin-block-end: 0;
	}

	.av-home-hero__media {
		margin-block-start: -15px;
	}

	.av-home-hero__media img {
		height: 360px;
	}

	.av-story__row {
		max-width: 318px;
	}

	.av-story__text {
		padding: 0 18px;
		text-align: left;
	}

	.av-story__media img {
		height: 350px;
		object-fit: cover;
	}

	.av-curious__row {
		align-items: flex-start;
	}

	.av-row > .av-curious__text {
		max-width: 293px;
		text-align: left;
	}

	.av-curious__media img {
		width: 89%;
		height: 400px;
		object-fit: cover;
	}

	.av-part__row {
		flex-direction: column;
	}

	.av-part__text {
		padding: 0;
		text-align: left;
	}

	.av-part__media img {
		width: 87%;
		height: 450px;
		object-fit: cover;
	}

	.av-observations__text {
		text-align: left;
	}

	/* Collections */
	.av-intro {
		padding: 50px;
	}

	.av-cta .av-button-wrap {
		margin-block-end: 50px;
	}

	.av-product {
		margin-block-start: 0;
		padding: 0;
	}

	.av-product__body {
		padding: 50px;
	}

	.av-closing {
		padding: 0 20px;
	}

	.av-button-large .wp-block-button__link {
		font-size: 21px;
	}
}