/*
Theme Name: Aria Does Nails
Theme URI: https://ariadoesnails.com
Author: Aria Dalling
Description: Custom press-on nail studio — gallery, ready-to-ship shop, and a made-to-order intake flow with design approval before anything gets made.
Version: 1.3.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aria-does-nails
*/

/* =========================================================================
   TOKENS

   The palette follows the one discipline rule that separates the premium
   shops from the amateur ones: a calm, warm, low-saturation ground, with the
   saturated colour delivered by the photography. Two accents (hot pink,
   lilac) run the page; aqua is held in reserve for badges only. Y2K here
   means loud product on a quiet ground with a few unhinged accents — not a
   rainbow gradient behind everything.

   Colour values are overridden at runtime by inc/customizer.php, which emits
   :root custom properties from the Customizer settings.
   ====================================================================== */

:root {
	/* Ground + ink — sampled from the logo. Its deep purple outline becomes the
	   site's ink, which is what makes the whole page feel like it belongs to
	   the mark rather than merely sitting next to it. */
	--adn-bg: #fdfaf8;              /* warm off-white — never pure white */
	--adn-bg-alt: #f7eef4;          /* colour-blocked section ground */
	--adn-ink: #542560;             /* logo outline purple */
	--adn-ink-soft: #7a5c82;
	--adn-line: #e7d9e6;

	/* Accents — two working, one reserved. Pulled toward the logo but kept a
	   step more saturated: pastels alone go invisible on buttons and badges,
	   and the nails still have to be the loudest thing on the page. */
	--adn-hot: #f2579b;             /* primary: buttons, links, the loud word */
	--adn-lilac: #c9a8db;           /* secondary — straight from the logo */
	--adn-aqua: #7fd4c4;            /* RESERVED — badges and sparkles only */
	--adn-butter: #e8d496;          /* logo gold, for sticker fills */

	/* States */
	--adn-good: #3bae72;
	--adn-muted: #a2939f;

	/* Chrome — a real nail finish and a Y2K signature, doing double duty */
	--adn-chrome: linear-gradient(135deg, #ece4f0 0%, #c3b6cf 35%, #ffffff 55%, #8e7f96 100%);

	/* Type */
	--adn-display: "Fredoka", "Baloo 2", ui-rounded, "Hiragino Maru Gothic ProN",
		"Trebuchet MS", system-ui, sans-serif;
	--adn-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	/* Scale — fluid, so headings stay big on phones without overflowing */
	--adn-step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
	--adn-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
	--adn-step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.55rem);
	--adn-step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
	--adn-step-3: clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
	--adn-step-4: clamp(2.8rem, 2rem + 4vw, 5rem);

	/* Space + shape */
	--adn-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
	--adn-section: clamp(3rem, 2rem + 5vw, 6.5rem);
	--adn-wide: 1280px;
	--adn-text: 68ch;
	--adn-r: 18px;                  /* rounded everything — the Y2K tell */
	--adn-r-lg: 32px;
	--adn-r-pill: 999px;

	--adn-shadow: 0 2px 0 rgba(25, 20, 25, 0.06), 0 12px 28px rgba(25, 20, 25, 0.08);
	--adn-shadow-lift: 0 4px 0 rgba(25, 20, 25, 0.08), 0 22px 44px rgba(25, 20, 25, 0.14);
}

/* =========================================================================
   RESET
   ====================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--adn-bg);
	color: var(--adn-ink);
	font-family: var(--adn-body);
	font-size: var(--adn-step-0);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }

h1, h2, h3, h4 {
	font-family: var(--adn-display);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
}

h1 { font-size: var(--adn-step-4); }
h2 { font-size: var(--adn-step-3); }
h3 { font-size: var(--adn-step-2); }
h4 { font-size: var(--adn-step-1); }

a { color: var(--adn-hot); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
	outline: 3px solid var(--adn-hot);
	outline-offset: 3px;
	border-radius: 4px;
}

.adn-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.adn-skip {
	position: absolute; left: 50%; translate: -50% -120%;
	z-index: 100; padding: 0.75rem 1.25rem;
	background: var(--adn-ink); color: #fff;
	border-radius: 0 0 var(--adn-r) var(--adn-r);
	transition: translate 0.15s ease;
}
.adn-skip:focus { translate: -50% 0; }

/* =========================================================================
   LAYOUT
   ====================================================================== */

.adn-wrap {
	width: min(100% - (var(--adn-gutter) * 2), var(--adn-wide));
	margin-inline: auto;
}

.adn-wrap--text { max-width: var(--adn-text); }

.adn-section { padding-block: var(--adn-section); }

/* Colour-blocked full-bleed bands, the way Chillhouse separates content —
   sections are divided by colour, not by hairline rules. */
.adn-band { background: var(--adn-bg-alt); }
.adn-band--lilac { background: color-mix(in srgb, var(--adn-lilac) 22%, var(--adn-bg)); }
.adn-band--pink { background: color-mix(in srgb, var(--adn-hot) 12%, var(--adn-bg)); }
.adn-band--ink { background: var(--adn-ink); color: var(--adn-bg); }
.adn-band--ink h2, .adn-band--ink h3 { color: var(--adn-bg); }
.adn-band--ink a { color: var(--adn-aqua); }

.adn-head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.adn-head--center { margin-inline: auto; text-align: center; }

.adn-eyebrow {
	display: inline-flex; align-items: center; gap: 0.4em;
	font-family: var(--adn-body);
	font-size: var(--adn-step--1);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--adn-hot);
	margin: 0 0 0.75rem;
}

.adn-lede { font-size: var(--adn-step-1); line-height: 1.45; color: var(--adn-ink-soft); }

/* Sparkle divider — ✦ as a rule, a Y2K staple that costs nothing. */
.adn-sparkle {
	display: flex; align-items: center; gap: 0.75rem;
	color: var(--adn-lilac); font-size: 1.1rem;
	margin-block: var(--adn-section) 0;
}
.adn-sparkle::before,
.adn-sparkle::after {
	content: ""; flex: 1; height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--adn-line), transparent);
}

/* =========================================================================
   BUTTONS
   ====================================================================== */

.adn-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	padding: 0.85em 1.6em;
	font-family: var(--adn-display);
	font-size: var(--adn-step-0);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 2px solid var(--adn-ink);
	border-radius: var(--adn-r-pill);
	background: var(--adn-hot);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 0 var(--adn-ink);
	transition: translate 0.12s ease, box-shadow 0.12s ease;
}
.adn-btn:hover { translate: 0 -2px; box-shadow: 0 6px 0 var(--adn-ink); }
.adn-btn:active { translate: 0 3px; box-shadow: 0 1px 0 var(--adn-ink); }

.adn-btn--lg { padding: 1.05em 2.1em; font-size: var(--adn-step-1); }
.adn-btn--ghost { background: var(--adn-bg); color: var(--adn-ink); }
.adn-btn--lilac { background: var(--adn-lilac); color: var(--adn-ink); }

.adn-btn[disabled],
.adn-btn--disabled {
	background: var(--adn-muted); color: #fff;
	box-shadow: 0 4px 0 rgba(25, 20, 25, 0.35);
	pointer-events: none;
}

/* =========================================================================
   STICKERS + BADGES

   Chillhouse's badge system is the sanctioned version of the Y2K sticker.
   Used for availability, trust marks, and the "1 OF 1" on shop cards.
   ====================================================================== */

.adn-badge {
	display: inline-flex; align-items: center; gap: 0.35em;
	padding: 0.4em 0.85em;
	font-family: var(--adn-display);
	font-size: var(--adn-step--1);
	font-weight: 600;
	line-height: 1;
	border: 2px solid var(--adn-ink);
	border-radius: var(--adn-r-pill);
	background: var(--adn-butter);
	color: var(--adn-ink);
	white-space: nowrap;
}

.adn-badge--available { background: var(--adn-aqua); }
.adn-badge--reserved { background: var(--adn-butter); }
.adn-badge--sold { background: var(--adn-muted); color: #fff; }
.adn-badge--coming { background: var(--adn-lilac); }
.adn-badge--oneof { background: var(--adn-hot); color: #fff; }

/* The rotated corner sticker — this is the "one broken element" that keeps a
   perfectly regular grid from reading as a template. */
.adn-sticker {
	position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2;
	rotate: 6deg;
	box-shadow: 0 3px 0 var(--adn-ink);
}

/* Chrome type — for the wordmark and the one loud hero word. Falls back to
   solid ink where background-clip:text is unsupported. */
.adn-chrome {
	background: var(--adn-chrome);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--adn-ink);
	paint-order: stroke fill;
}
@supports not (background-clip: text) {
	.adn-chrome { color: var(--adn-ink); background: none; }
}

/* =========================================================================
   MASTHEAD + NAV

   The masthead scrolls away; only the nav bar is sticky. A pinned logo costs
   vertical space on every screen for something the visitor needs once, and on
   a site whose job is showing photographs that space is the product.
   ====================================================================== */

.adn-masthead {
	padding-block: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
	text-align: center;
}

.adn-brand {
	font-family: var(--adn-display);
	font-size: var(--adn-step-2);
	font-weight: 600;
	letter-spacing: -0.03em;
	text-decoration: none;
	color: var(--adn-ink);
}

.adn-masthead .custom-logo-link { display: inline-block; }

/* Sized off width, not height. The mark is a circular badge with script
   overhanging both sides, so a height cap makes it read far smaller than it
   measures — most of its bounding box is the badge, and the name is the part
   that has to be legible. */
.adn-masthead img {
	width: clamp(220px, 26vw, 340px);
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

/* The sticky bar: navigation only. */
.adn-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--adn-bg) 90%, transparent);
	backdrop-filter: blur(12px);
	border-block: 2px solid var(--adn-ink);
}

.adn-header__inner {
	display: flex; align-items: center; justify-content: center; gap: 1rem;
	padding-block: 0.5rem;
	min-height: 3rem;
}

/* A small wordmark that fades in only once the masthead has scrolled past, so
   the brand is still present when the logo is gone. Hidden from assistive tech
   because the masthead link above it says the same thing. */
.adn-header__mark {
	position: absolute; left: var(--adn-gutter);
	font-family: var(--adn-display);
	font-size: var(--adn-step-0);
	font-weight: 600;
	text-decoration: none;
	color: var(--adn-ink);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.adn-header[data-stuck="true"] .adn-header__mark { opacity: 1; pointer-events: auto; }

@media (max-width: 720px) {
	.adn-header__mark { display: none; }
}

.adn-nav ul {
	display: flex; align-items: center; justify-content: center;
	gap: clamp(0.6rem, 2vw, 1.6rem);
	list-style: none; margin: 0; padding: 0;
	flex-wrap: wrap;
}
.adn-nav a {
	display: inline-block;
	font-size: var(--adn-step--1);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--adn-ink);
	padding-block: 0.3rem;
	border-bottom: 2px solid transparent;
}
.adn-nav a:hover,
.adn-nav .current-menu-item > a { border-bottom-color: var(--adn-hot); }

.adn-nav__toggle { display: none; }

@media (max-width: 860px) {
	.adn-header__inner { justify-content: flex-start; }
	.adn-nav__toggle {
		display: inline-flex; align-items: center; gap: 0.5em;
		padding: 0.45em 1em;
		background: var(--adn-bg); color: var(--adn-ink);
		border: 2px solid var(--adn-ink); border-radius: var(--adn-r-pill);
		font-family: var(--adn-display); font-weight: 600; font-size: var(--adn-step--1);
		cursor: pointer;
	}
	.adn-nav ul {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 0.5rem var(--adn-gutter) 1.25rem;
		background: var(--adn-bg);
		border-bottom: 2px solid var(--adn-ink);
	}
	.adn-nav[data-open="true"] ul { display: flex; }
	.adn-nav li { border-bottom: 1px solid var(--adn-line); }
	.adn-nav a { display: block; padding: 0.9rem 0; border-bottom: none; font-size: var(--adn-step-0); }
}

/* =========================================================================
   HERO
   ====================================================================== */

.adn-hero { padding-block: clamp(2.5rem, 5vw, 5rem) var(--adn-section); }

.adn-hero__grid {
	display: grid; gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 900px) {
	.adn-hero__grid { grid-template-columns: 1.05fr 1fr; }
}

.adn-hero h1 { margin-bottom: 0.35em; }
.adn-hero__sub { font-size: var(--adn-step-1); color: var(--adn-ink-soft); max-width: 40ch; }
.adn-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.adn-hero__media {
	position: relative;
	border: 3px solid var(--adn-ink);
	border-radius: var(--adn-r-lg);
	overflow: hidden;
	box-shadow: var(--adn-shadow-lift);
	background: var(--adn-bg-alt);
	aspect-ratio: 4 / 5;
}
.adn-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.adn-hero__proof {
	display: flex; flex-wrap: wrap; gap: 0.6rem;
	margin-top: 1.75rem; padding: 0; list-style: none;
}

/* =========================================================================
   HOW IT WORKS

   Sits above the gallery on purpose. The Procreate-mockup-then-approve step is
   the actual differentiator against every mass-produced competitor, so it gets
   told before the work is shown.
   ====================================================================== */

.adn-steps {
	display: grid; gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	list-style: none; margin: 0; padding: 0;
	counter-reset: adn-step;
}

.adn-step {
	position: relative;
	padding: 2.25rem 1.5rem 1.5rem;
	background: var(--adn-bg);
	border: 3px solid var(--adn-ink);
	border-radius: var(--adn-r);
	box-shadow: var(--adn-shadow);
}
.adn-step::before {
	counter-increment: adn-step;
	content: counter(adn-step);
	position: absolute; top: -1.1rem; left: 1.25rem;
	display: grid; place-items: center;
	width: 2.4rem; height: 2.4rem;
	font-family: var(--adn-display); font-weight: 600;
	background: var(--adn-hot); color: #fff;
	border: 3px solid var(--adn-ink); border-radius: 50%;
}
.adn-step h3 { font-size: var(--adn-step-1); margin-bottom: 0.35em; }
.adn-step p { margin: 0; color: var(--adn-ink-soft); }

/* =========================================================================
   GALLERY GRID

   Fixed 4:5 tiles. Consistency is what makes a nail gallery read premium —
   twelve identically-framed sets beat forty inconsistent ones.
   ====================================================================== */

.adn-grid {
	display: grid; gap: clamp(0.75rem, 2vw, 1.5rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	list-style: none; margin: 0; padding: 0;
}

.adn-card {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--adn-bg);
	border: 3px solid var(--adn-ink);
	border-radius: var(--adn-r);
	overflow: hidden;
	box-shadow: var(--adn-shadow);
	transition: translate 0.15s ease, box-shadow 0.15s ease;
}
.adn-card:hover { translate: 0 -4px; box-shadow: var(--adn-shadow-lift); }

.adn-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--adn-bg-alt); }
.adn-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* The gloss sweep — high shine is both the aesthetic and the quality signal. */
.adn-card__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 42%);
}

.adn-card__body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.adn-card__title { font-family: var(--adn-display); font-size: var(--adn-step-1); margin: 0; }
.adn-card__title a { color: inherit; text-decoration: none; }
.adn-card__title a:hover { color: var(--adn-hot); }
.adn-card__meta { font-size: var(--adn-step--1); color: var(--adn-ink-soft); margin: 0; }
.adn-card__price { font-family: var(--adn-display); font-size: var(--adn-step-1); margin: 0; }
.adn-card__foot { margin-top: auto; padding-top: 0.5rem; }

.adn-card--sold .adn-card__media { filter: grayscale(0.7); opacity: 0.65; }

/* Style filter bar */
.adn-filters {
	display: flex; flex-wrap: wrap; gap: 0.5rem;
	list-style: none; margin: 0 0 2rem; padding: 0;
}
.adn-filters a {
	display: inline-block; padding: 0.45em 1em;
	font-size: var(--adn-step--1); font-weight: 600; text-decoration: none;
	color: var(--adn-ink); background: var(--adn-bg);
	border: 2px solid var(--adn-ink); border-radius: var(--adn-r-pill);
}
.adn-filters a:hover,
.adn-filters .is-active a { background: var(--adn-lilac); }

/* =========================================================================
   PRICING
   ====================================================================== */

.adn-tiers {
	display: grid; gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	list-style: none; margin: 0; padding: 0;
}

.adn-tier {
	display: flex; flex-direction: column; gap: 0.6rem;
	padding: 1.5rem 1.35rem;
	background: var(--adn-bg);
	border: 3px solid var(--adn-ink);
	border-radius: var(--adn-r);
	box-shadow: var(--adn-shadow);
}
.adn-tier--feature { background: color-mix(in srgb, var(--adn-hot) 10%, var(--adn-bg)); }
.adn-tier__name { font-family: var(--adn-display); font-size: var(--adn-step-1); margin: 0; }
.adn-tier__price { font-family: var(--adn-display); font-size: var(--adn-step-3); line-height: 1; margin: 0; }
.adn-tier__from { font-size: var(--adn-step--1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--adn-ink-soft); }
.adn-tier__blurb { margin: 0; color: var(--adn-ink-soft); font-size: var(--adn-step--1); }

.adn-addons { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.adn-addons th,
.adn-addons td { text-align: left; padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--adn-line); }
.adn-addons td:last-child { text-align: right; font-family: var(--adn-display); font-weight: 600; white-space: nowrap; }

.adn-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =========================================================================
   FORMS
   ====================================================================== */

.adn-form { display: flex; flex-direction: column; gap: 2rem; }

.adn-fieldset {
	border: 3px solid var(--adn-ink);
	border-radius: var(--adn-r);
	background: var(--adn-bg);
	padding: 1.5rem;
	margin: 0;
	box-shadow: var(--adn-shadow);
}
.adn-fieldset > legend {
	font-family: var(--adn-display);
	font-size: var(--adn-step-1);
	font-weight: 600;
	padding: 0.25em 0.9em;
	background: var(--adn-butter);
	border: 3px solid var(--adn-ink);
	border-radius: var(--adn-r-pill);
	margin-left: -0.25rem;
}

.adn-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; }
.adn-field:last-child { margin-bottom: 0; }
.adn-field > label { font-weight: 600; }
.adn-field .adn-help { font-size: var(--adn-step--1); color: var(--adn-ink-soft); }

.adn-row {
	display: grid; gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea {
	width: 100%;
	padding: 0.75em 0.9em;
	background: var(--adn-bg);
	color: var(--adn-ink);
	border: 2px solid var(--adn-ink);
	border-radius: var(--adn-r);
}
textarea { min-height: 8rem; resize: vertical; }

input[type="file"] {
	width: 100%;
	padding: 0.9em;
	background: var(--adn-bg-alt);
	border: 2px dashed var(--adn-ink);
	border-radius: var(--adn-r);
	cursor: pointer;
}

.adn-choices { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.adn-choice {
	display: inline-flex; align-items: center; gap: 0.5em;
	padding: 0.6em 1.1em;
	background: var(--adn-bg);
	border: 2px solid var(--adn-ink);
	border-radius: var(--adn-r-pill);
	cursor: pointer;
	font-weight: 600;
}
.adn-choice input { accent-color: var(--adn-hot); }
.adn-choice:has(input:checked) { background: var(--adn-lilac); }

.adn-check { display: flex; align-items: flex-start; gap: 0.7em; }
.adn-check input { margin-top: 0.3em; accent-color: var(--adn-hot); flex: none; }

/* Sizing grid — ten fingers, then ten toes. Kept as a compact grid so the
   whole hand is visible at once rather than as ten stacked fields. */
.adn-sizes {
	display: grid; gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
}
.adn-size { display: flex; flex-direction: column; gap: 0.3rem; }
.adn-size label { font-size: var(--adn-step--1); font-weight: 600; }
.adn-size input { padding: 0.55em 0.6em; text-align: center; }

/* Conditional blocks toggled by assets/js/main.js. Uses [hidden] so the form
   still degrades to fully visible with JavaScript off. */
[hidden] { display: none !important; }

.adn-notice {
	padding: 1rem 1.25rem;
	border: 3px solid var(--adn-ink);
	border-radius: var(--adn-r);
	background: var(--adn-butter);
	font-weight: 600;
}
.adn-notice--good { background: color-mix(in srgb, var(--adn-good) 22%, var(--adn-bg)); }
.adn-notice--bad { background: color-mix(in srgb, var(--adn-hot) 18%, var(--adn-bg)); }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.adn-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* =========================================================================
   FAQ + PROSE
   ====================================================================== */

.adn-prose > * + * { margin-top: 1.1em; }
.adn-prose h2 { margin-top: 1.8em; }
.adn-prose ul, .adn-prose ol { padding-left: 1.3em; }
.adn-prose li + li { margin-top: 0.4em; }

.adn-faq {
	border: 3px solid var(--adn-ink);
	border-radius: var(--adn-r);
	background: var(--adn-bg);
	padding: 1rem 1.25rem;
	margin-bottom: 0.85rem;
}
.adn-faq summary {
	font-family: var(--adn-display);
	font-size: var(--adn-step-1);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.adn-faq summary::-webkit-details-marker { display: none; }
.adn-faq summary::after { content: "+"; font-size: 1.5em; line-height: 1; color: var(--adn-hot); }
.adn-faq[open] summary::after { content: "–"; }
.adn-faq > *:not(summary) { margin-top: 0.85rem; color: var(--adn-ink-soft); }

/* =========================================================================
   FOOTER
   ====================================================================== */

.adn-footer {
	background: var(--adn-ink);
	color: var(--adn-bg);
	padding-block: var(--adn-section) 2rem;
	margin-top: var(--adn-section);
}
.adn-footer a { color: var(--adn-aqua); }
.adn-footer h2, .adn-footer h3 { color: var(--adn-bg); }

.adn-footer__grid {
	display: grid; gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.adn-footer ul { list-style: none; margin: 0; padding: 0; }
.adn-footer li + li { margin-top: 0.5rem; }

.adn-footer__bottom {
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
	margin-top: 3rem; padding-top: 1.5rem;
	border-top: 1px solid rgba(251, 247, 244, 0.2);
	font-size: var(--adn-step--1);
	color: rgba(251, 247, 244, 0.7);
}

/* =========================================================================
   PAGINATION + MISC
   ====================================================================== */

.adn-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 3rem; }
.adn-pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 2.75rem; height: 2.75rem; padding-inline: 0.75rem;
	text-decoration: none; font-weight: 600; color: var(--adn-ink);
	background: var(--adn-bg);
	border: 2px solid var(--adn-ink); border-radius: var(--adn-r-pill);
}
.adn-pagination .page-numbers.current { background: var(--adn-hot); color: #fff; }

.adn-empty {
	padding: 3rem 1.5rem; text-align: center;
	border: 3px dashed var(--adn-line); border-radius: var(--adn-r-lg);
	color: var(--adn-ink-soft);
}

@media print {
	.adn-header, .adn-footer, .adn-btn { display: none; }
	body { background: #fff; }
}

/* =========================================================================
   REVIEWS

   Rendered from the very first one. A single real review beats an empty
   section, and beats waiting until there are "enough" of them.
   ====================================================================== */

.adn-reviews {
	display: grid; gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	list-style: none; margin: 0; padding: 0;
}

.adn-review {
	display: flex; flex-direction: column; gap: 0.9rem;
	padding: 1.75rem 1.6rem;
	background: var(--adn-bg);
	border: 3px solid var(--adn-ink);
	border-radius: var(--adn-r);
	box-shadow: var(--adn-shadow);
}

.adn-stars {
	font-size: var(--adn-step-1);
	line-height: 1;
	color: var(--adn-hot);
	letter-spacing: 0.08em;
}

.adn-review__body {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: var(--adn-step-0);
	color: var(--adn-ink);
}
.adn-review__body p { margin: 0 0 0.8em; }
.adn-review__body p:last-child { margin-bottom: 0; }

.adn-review__who {
	margin: auto 0 0;
	padding-top: 0.5rem;
	display: flex; flex-direction: column; gap: 0.15rem;
	font-family: var(--adn-display);
}