/**
 * Card UI — booking form, wishlist rail and My Account.
 *
 * These share one shell (page background → white card → three-column grid with
 * side rails) so /appointment/ and /my-account/ read as a single system.
 * Everything is `ags-`-prefixed and scoped under `.ags-booking`.
 *
 * ─── Structure, and where each part is headed ────────────────────────────
 *
 *  1 · SHELL          .ags-booking, __card, .ags-grid, .ags-rail, .ags-rule…
 *                     STAYS IN THE THEME. It is the design system both plugins
 *                     render into — they should depend on it, not duplicate it.
 *
 *  2 · BOOKING FORM   .ags-form, .ags-sec, .ags-type*, .ags-cal*, .ags-slot,
 *                     .ags-field, .ags-book…
 *                     → MOVES TO THE BOOKING PLUGIN, together with
 *                       assets/js/booking-form.js and the markup in
 *                       inc/booking-form-shortcode.php.
 *
 *  3 · WISHLIST RAIL  .ags-wishlist__*, .ags-dress*
 *                     → MOVES TO THE CATALOGUE PLUGIN (ags-production-catalogue)
 *                       once it ships the wishlist informer shortcode. Rendered
 *                       today by ags_boutique_wishlist_rail().
 *
 *  4 · MY ACCOUNT     .ags-account* + WooCommerce overrides
 *                     STAYS IN THE THEME (WooCommerce templates are the theme's
 *                     job). Deliberately scoped to .ags-account__content /
 *                     .ags-account__login-card so it never bleeds into the
 *                     shared rails.
 *
 *  5 · RESPONSIVE     breakpoints for 1–2.
 *
 * Palette: neutral cool greys keyed off the page background, declared once as
 * --agsb-* tokens on .ags-booking. Typeface is Jost — intentionally its own,
 * independent of the main theme fonts.
 *
 * @package ags-boutique
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · SHELL — stays in the theme
   ═══════════════════════════════════════════════════════════════════════════ */

.ags-booking {
	/* Neutral, cool greys keyed off the page background — no sandy tints. */
	--agsb-bg: #eaeaea;
	--agsb-card: #fff;
	--agsb-ink: #1a1a1a;
	--agsb-accent: #6d6d70;
	--agsb-muted: #94949a;
	--agsb-soft: #55555b;
	--agsb-line: #e6e6e8;
	--agsb-line-2: #d6d6da;
	--agsb-rule: #e2e2e5;
	--agsb-panel: #f3f3f4;

	font-family: 'Jost', system-ui, sans-serif;
	color: var(--agsb-ink);
	background: var(--agsb-bg);
	padding: clamp(20px, 4vw, 56px) var(--container-pad);
	-webkit-font-smoothing: antialiased;
}

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

.ags-booking__card {
	max-width: 1300px;
	margin: 0 auto;
	background: var(--agsb-card);
	border: 1px solid #e3e3e6;
	border-radius: 8px;
	box-shadow: 0 24px 60px -40px rgba(20, 20, 24, 0.35);
	overflow: hidden;
}

.ags-grid {
	display: grid;
	grid-template-columns: 300px 1fr 300px;
	align-items: stretch;
}

/* No wishlist rail (feature/plugin off) → two columns, centre expands */
.ags-grid:not(:has(.ags-rail--right)) {
	grid-template-columns: 300px 1fr;
}

/* ── Side rails (Welcome / Wishlist) ── */
.ags-rail {
	display: flex;
	flex-direction: column;
	padding: 34px 26px;
	min-width: 0; /* allow shrink — never force the grid wider than the card */
}

.ags-rail--left {
	border-right: 1px solid var(--agsb-line);
}

.ags-rail--right {
	border-left: 1px solid var(--agsb-line);
}

.ags-rail__title {
	margin: 0;
	font: 400 24px/1.1 'Jost', sans-serif;
	letter-spacing: -0.01em;
	color: var(--agsb-ink);
}

.ags-rail__text {
	margin: 16px 0 0;
	font: 400 13.5px/1.65 'Jost', sans-serif;
	color: var(--agsb-soft);
}

.ags-rule {
	height: 1px;
	border: 0;
	background: var(--agsb-rule);
	margin: 24px 0;
}

.ags-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ags-benefits li {
	display: flex;
	gap: 11px;
	align-items: baseline;
	font: 400 13px/1.4 'Jost', sans-serif;
	color: #36363a;
}

.ags-benefits li::before {
	content: "✓";
	color: var(--agsb-accent);
	font-size: 11px;
}

.ags-eyebrow {
	font: 500 10px/1 'Jost', sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--agsb-muted);
}

.ags-rail__phone {
	margin-top: 8px;
	font: 400 15px 'Jost', sans-serif;
}

.ags-rail__email {
	margin-top: 5px;
	font: 400 14px 'Jost', sans-serif;
}

.ags-rail__addr {
	margin-top: 5px;
	font: 400 13px/1.5 'Jost', sans-serif;
	font-style: normal;
	color: var(--agsb-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · BOOKING FORM — moves to the booking plugin
   (with assets/js/booking-form.js + inc/booking-form-shortcode.php)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Center: accordion form ── */
.ags-form {
	padding: 20px 36px 40px;
	min-width: 0; /* the 1fr track must be free to shrink (fixes overflow/scroll) */
}

.ags-sec {
	border-bottom: 1px solid var(--agsb-line);
}

.ags-sec__head {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 22px 2px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: 'Jost', sans-serif;
}

.ags-sec__head-l {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ags-sec__check {
	color: var(--agsb-accent);
	font-size: 13px;
	display: none;
}

.ags-sec__num {
	font: 500 11px 'Jost', sans-serif;
	letter-spacing: 0.2em;
	color: var(--agsb-accent);
	flex: none;
}

.ags-sec__title {
	font: 400 19px 'Jost', sans-serif;
	letter-spacing: -0.01em;
	color: var(--agsb-ink);
}

.ags-sec__summary {
	font: 400 13px 'Jost', sans-serif;
	color: var(--agsb-accent);
}

/* done state: hide number, show check */
.ags-sec.is-done .ags-sec__num {
	display: none;
}

.ags-sec.is-done .ags-sec__check {
	display: inline;
}

/* accordion body */
.ags-sec__body {
	display: none;
	padding: 4px 2px 28px;
}

.ags-sec.is-open .ags-sec__body {
	display: block;
}

/* ── Type picker ── */
.ags-types {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ags-type {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: flex-start;
	text-align: left;
	padding: 16px 18px;
	border: 1px solid var(--agsb-line-2);
	background: #fff;
	color: var(--agsb-ink);
	cursor: pointer;
	border-radius: 2px;
	font-family: 'Jost', sans-serif;
	transition: border-color 0.15s;
}

.ags-type:hover {
	border-color: var(--agsb-accent);
}

.ags-type.is-selected {
	border-color: var(--agsb-ink);
	background: var(--agsb-ink);
	color: #fff;
}

.ags-type__name {
	font: 500 15px 'Jost', sans-serif;
}

.ags-type__dur {
	font: 400 12px 'Jost', sans-serif;
	opacity: 0.6;
}

.ags-type-desc {
	margin-top: 20px;
	padding: 16px 18px;
	background: var(--agsb-panel);
	border-left: 2px solid var(--agsb-accent);
	font: 400 14px/1.6 'Jost', sans-serif;
	color: #45454a;
}

/* ── Date & time ── */
.ags-datetime {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: start;
}

.ags-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.ags-cal__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #dcdce0;
	background: #fff;
	cursor: pointer;
	color: var(--agsb-ink);
	border-radius: 2px;
	transition: border-color 0.15s;
}

.ags-cal__nav:hover:not(:disabled) {
	border-color: var(--agsb-accent);
}

.ags-cal__nav:disabled {
	opacity: 0.4;
	cursor: default;
}

.ags-cal__month {
	font: 500 14px 'Jost', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ags-cal__dow,
.ags-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.ags-cal__dow {
	margin-bottom: 8px;
}

.ags-cal__dow span {
	text-align: center;
	font: 500 10px 'Jost', sans-serif;
	letter-spacing: 0.1em;
	color: #a9a9b0;
}

.ags-day {
	width: 40px;
	height: 40px;
	margin: 0 auto;
	padding: 0;
	border: 0;
	font: 400 14px 'Jost', sans-serif;
	border-radius: 50%;
	background: transparent;
	color: var(--agsb-ink);
	cursor: pointer;
}

.ags-day--blank {
	visibility: hidden;
}

.ags-day--past {
	color: #d3d3d8;
	cursor: default;
}

.ags-day--blocked {
	color: #bfbfc6;
	cursor: not-allowed;
	text-decoration: line-through;
}

.ags-day.is-selected {
	background: var(--agsb-ink);
	color: #fff;
	font-weight: 500;
}

.ags-cal__legend {
	display: flex;
	gap: 18px;
	margin-top: 16px;
}

.ags-cal__legend span {
	display: flex;
	align-items: center;
	gap: 6px;
	font: 400 11px 'Jost', sans-serif;
	color: #85858c;
}

.ags-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.ags-dot--on { background: var(--agsb-ink); }
.ags-dot--off { background: #cfcfd5; }

.ags-times__label {
	font: 500 10px 'Jost', sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--agsb-muted);
	margin-bottom: 14px;
}

.ags-times__empty {
	font: 400 14px/1.6 'Jost', sans-serif;
	color: #a9a9b0;
	padding-top: 4px;
}

.ags-timegrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.ags-slot {
	height: 44px;
	border: 1px solid var(--agsb-line-2);
	background: #fff;
	color: var(--agsb-ink);
	font: 400 14px 'Jost', sans-serif;
	cursor: pointer;
	border-radius: 2px;
	white-space: nowrap;
	transition: border-color 0.15s;
}

.ags-slot:hover {
	border-color: var(--agsb-accent);
}

.ags-slot--off {
	border-color: #e8e8ea;
	background: var(--agsb-panel);
	color: #c9c3b6;
	cursor: not-allowed;
}

.ags-slot.is-selected {
	border: 1px solid var(--agsb-accent);
	background: var(--agsb-accent);
	color: #fff;
	font-weight: 500;
}

/* ── Field groups (bride / wedding / card) ── */
.ags-fields {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ags-row {
	display: grid;
	gap: 16px;
}

.ags-row--2 { grid-template-columns: 1fr 1fr; }
.ags-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.ags-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.ags-field__label {
	font: 500 10px/1 'Jost', sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--agsb-muted);
}

.ags-field__label sup {
	color: var(--agsb-accent);
	margin-left: 2px;
}

.ags-field input,
.ags-field select {
	width: 100%;
	min-width: 0;
	height: 46px;
	border: 1px solid var(--agsb-line-2);
	padding: 0 14px;
	font: 400 15px 'Jost', sans-serif;
	color: var(--agsb-ink);
	background: #fff;
	outline: none;
	border-radius: 2px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ags-field select {
	padding: 0 12px;
}

.ags-field input:focus,
.ags-field select:focus {
	border-color: var(--agsb-accent);
	box-shadow: 0 0 0 3px rgba(111, 109, 104, 0.12);
}

.ags-note {
	font: 400 12px/1.5 'Jost', sans-serif;
	color: var(--agsb-muted);
}

.ags-info {
	padding: 14px 16px;
	background: var(--agsb-panel);
	border-left: 2px solid var(--agsb-accent);
	font: 400 13px/1.6 'Jost', sans-serif;
	color: #45454a;
}

.ags-info strong { font-weight: 600; }

/* ── Submit ── */
.ags-submit {
	padding-top: 26px;
	margin-top: 2px;
}

.ags-book {
	width: 100%;
	height: 54px;
	background: var(--agsb-ink);
	color: #fff;
	border: 0;
	font: 500 12px 'Jost', sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 2px;
	transition: background 0.2s;
}

.ags-book:hover { background: #000; }

/* ═══════════════════════════════════════════════════════════════════════════
   3 · WISHLIST RAIL — moves to the catalogue plugin
   (rendered today by ags_boutique_wishlist_rail(); shared by the booking form
   and My Account, so both must keep rendering it identically)
   ═══════════════════════════════════════════════════════════════════════════ */

.ags-wishlist__sub {
	font: 500 10px/1 'Jost', sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--agsb-muted);
	margin-bottom: 14px;
}

.ags-wishlist__h3 {
	margin: 26px 0 6px;
	font: 400 16px/1.2 'Jost', sans-serif;
	letter-spacing: -0.01em;
	color: var(--agsb-ink);
}

.ags-wishlist__note {
	margin: 0 0 14px;
	font: 400 12px/1.55 'Jost', sans-serif;
	color: #85858c;
}

.ags-wishlist__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px 8px;
}

.ags-dress {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ags-dress__img {
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 3px;
	background: linear-gradient(135deg, #eeeef0 0%, #e0e0e4 100%);
}

.ags-dress__name {
	font: 400 12px/1.3 'Jost', sans-serif;
	color: #36363a;
}

.ags-wishlist__more {
	margin-top: 20px;
	width: 100%;
	height: 44px;
	background: none;
	color: var(--agsb-ink);
	border: 1px solid var(--agsb-line-2);
	font: 500 11px 'Jost', sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 2px;
	transition: border-color 0.15s;
}

.ags-wishlist__more:hover { border-color: var(--agsb-ink); }

/* ── Standalone /wishlist/ page ──────────────────────────────────────────────
   The catalogue plugin's [ags_wishlist] list (toolbar + flat product grid),
   wrapped by inc/wishlist-page.php in the shared card, laid out two-up:
   toolbar → left rail, product grid → main. No right rail.
   Styling the plugin markup; moves to the catalogue plugin with the rest of §3. */

.ags-wishlist-page .ags-pc-wishlist-list {
	/* keep the plugin's own tokens on the card's cool-grey palette */
	--ags-pc-wishlist-border: var(--agsb-line);
	--ags-pc-wishlist-muted: var(--agsb-muted);
	--ags-pc-wishlist-surface: var(--agsb-panel);

	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	align-items: stretch;
	max-width: 100%;
	min-width: 0;
	font-family: 'Jost', system-ui, sans-serif;
	color: var(--agsb-ink);
}

/* The canonical state frame is the only child of the outer two-column grid. */
.ags-wishlist-page .ags-pc-wishlist-state {
	grid-column: 1 / -1;
	min-width: 0;
}

/* The guest notice sits above the body and spans the full Wishlist card. */
.ags-wishlist-page .ags-pc-wishlist-list__guest-notice {
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 26px;
	background: var(--agsb-panel);
	border: 0;
	border-bottom: 1px solid var(--agsb-line);
	font: 400 13px/1.6 'Jost', sans-serif;
	color: var(--agsb-soft);
}

/* The body owns the same 300px/remaining-width columns as the old shell. */
.ags-wishlist-page .ags-pc-wishlist-body {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	min-width: 0;
}

.ags-wishlist-page .ags-pc-wishlist-state.has-no-left-rail .ags-pc-wishlist-body {
	grid-template-columns: minmax(0, 1fr);
}

.ags-wishlist-page .ags-pc-wishlist-left-rail {
	grid-column: 1;
	min-width: 0;
	border-right: 1px solid var(--agsb-line);
}

.ags-wishlist-page .ags-pc-wishlist-right-content {
	grid-column: 2;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ags-wishlist-page .ags-pc-wishlist-state.has-no-left-rail .ags-pc-wishlist-right-content {
	grid-column: 1;
}

/* Toolbar → left rail */
.ags-wishlist-page .ags-pc-wishlist-list__toolbar {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap; /* plugin sets wrap + children flex-basis:100% → a column child wraps into a 2nd column; forbid it */
	align-items: stretch;
	justify-content: flex-start; /* beat the plugin's space-between */
	gap: 22px;
	margin: 0;
	padding: 34px 36px;
}

.ags-wishlist-page .ags-pc-wishlist-list__toolbar-copy h2 {
	margin: 0 0 12px;
	font: 400 24px/1.1 'Jost', sans-serif;
	letter-spacing: -0.01em;
	color: var(--agsb-ink);
}

.ags-wishlist-page .ags-pc-wishlist-list__toolbar-copy p {
	margin: 0;
	font: 400 13.5px/1.65 'Jost', sans-serif;
	color: var(--agsb-soft);
}

/* Catalogue links styled as menu items (mirrors the account nav) — bordered
   rows, no button chrome, no fill. First link (the appointment CTA) is bold.
   The [href*=appointment] parts raise specificity to beat the black-CTA rule
   in blocks.css. */
.ags-wishlist-page .ags-pc-wishlist-list__actions {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.ags-wishlist-page .ags-pc-wishlist-list__action,
.ags-wishlist-page .ags-pc-wishlist-list__action[href*="/appointment"] {
	display: block;
	padding: 13px 0;
	border: 0;
	border-bottom: 1px solid var(--agsb-line);
	border-radius: 0;
	background: none;
	font: 400 14px 'Jost', sans-serif;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--agsb-ink);
	transition: color 0.15s;
}

.ags-wishlist-page .ags-pc-wishlist-list__action:first-child {
	border-top: 1px solid var(--agsb-line);
	font-weight: 600;
}

.ags-wishlist-page .ags-pc-wishlist-list__action:hover,
.ags-wishlist-page .ags-pc-wishlist-list__action[href*="/appointment"]:hover {
	background: none;
	color: var(--agsb-accent);
}

/* Bottom copy — mirrors the booking rail's "Questions?" block: an eyebrow
   label over the salon's contact lines. Sits last in the left rail, pushed to
   the bottom; reset the plugin's flex-basis:100% so it takes its own height. */
.ags-wishlist-page .ags-pc-wishlist-list__bottom-copy {
	flex: 0 0 auto;
	margin-top: 20px;
}

.ags-wishlist-page .ags-pc-wishlist-list__bottom-copy h3 {
	margin: 0 0 8px;
	font: 500 10px/1 'Jost', sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--agsb-muted);
}

.ags-wishlist-page .ags-pc-wishlist-list__bottom-copy p {
	margin: 0;
	font: 400 15px/1.7 'Jost', sans-serif;
	color: var(--agsb-ink);
}

.ags-wishlist-page .ags-pc-wishlist-list__bottom-copy a {
	color: inherit;
	text-decoration: none;
}

/* Grid → main column, three-up */
.ags-wishlist-page .ags-pc-wishlist-list__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-content: start;
	padding: 34px 36px 40px;
	min-width: 0;
}

/* Grouped unavailable copy mirrors the Wishlist top rail and shares the
   product grid's 36px horizontal content boundary. The nested grid keeps its
   own padding, so only the copy receives the alignment margin. */
.ags-wishlist-page .ags-pc-wishlist-list__unavailable-title {
	margin: 0 36px 12px;
	font: 400 24px/1.1 'Jost', sans-serif;
	letter-spacing: -0.01em;
	color: var(--agsb-ink);
}

.ags-wishlist-page .ags-pc-wishlist-list__unavailable-text {
	margin: 0 36px;
	font: 400 13.5px/1.65 'Jost', sans-serif;
	color: var(--agsb-soft);
}

/* Available-section copy — same type/spacing as the left rail and the
   unavailable heading. It sits inside the product grid (grid-column:1/-1) whose
   36px padding already provides the horizontal inset, so no 36px side margin
   here (that would double-indent it). Only these two elements are styled — they
   are optional and can be toggled off in the wishlist settings. */
.ags-wishlist-page .ags-pc-wishlist-list__available-title {
	margin: 0 0 12px;
	font: 400 24px/1.1 'Jost', sans-serif;
	letter-spacing: -0.01em;
	color: var(--agsb-ink);
}

.ags-wishlist-page .ags-pc-wishlist-list__available-text {
	margin: 0;
	font: 400 13.5px/1.65 'Jost', sans-serif;
	color: var(--agsb-soft);
}

.ags-wishlist-page .ags-pc-wishlist-item h3 {
	font-family: 'Jost', sans-serif;
}

/* ------------------------------------------------------------------
   3b · WISHLIST — EMPTY STATE (guest / nothing saved yet)
   Empty output uses the same canonical state/body/left/right boundary as the
   filled list. Featured recommendations stay inside the right content panel;
   the second card carries the existing how-to hint.
   ------------------------------------------------------------------ */

.ags-wishlist-page .ags-pc-wishlist-recommendations {
	min-width: 0;
	padding: 34px 36px 40px;
}

.ags-wishlist-page .ags-pc-wishlist-recommendations > h3 {
	margin: 0 0 30px;
	font: 500 11px/1 'Jost', sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--agsb-muted);
}

.ags-wishlist-page .ags-pc-wishlist-recommendations__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	min-width: 0;
}

/* The second recommendation is a normal card with the existing hint overlay. */
.ags-wishlist-page .ags-pc-wishlist-list__example {
	padding: 0;
	border: 0;
	background: none;
}

/* Shared product card — example and every recommendation render identically */
.ags-wishlist-page .ags-pc-wishlist-list__example-product,
.ags-wishlist-page .ags-pc-wishlist-recommendation {
	position: relative;
	display: block;
}

.ags-wishlist-page .ags-pc-wishlist-list__example-product {
	margin: 0;
}

.ags-wishlist-page .ags-pc-wishlist-list__example-image,
.ags-wishlist-page .ags-pc-wishlist-recommendation__image {
	display: block;
	overflow: hidden;
	background: #fff;
}

.ags-wishlist-page .ags-pc-wishlist-list__example-image img,
.ags-wishlist-page .ags-pc-wishlist-recommendation__image img {
	display: block;
	width: 100%;
	height: auto;
}

.ags-wishlist-page .ags-pc-wishlist-list__example-body {
	padding-top: 0;
}

.ags-wishlist-page .ags-pc-wishlist-list__example-body h3,
.ags-wishlist-page .ags-pc-wishlist-recommendation > h4 {
	margin: 12px 0 4px;
	font: 400 15px/1.3 'Jost', sans-serif;
	color: var(--agsb-ink);
}

.ags-wishlist-page .ags-pc-wishlist-list__example-body h3 a,
.ags-wishlist-page .ags-pc-wishlist-recommendation > h4 a {
	color: inherit;
	text-decoration: none;
}

.ags-wishlist-page .ags-pc-wishlist-list__example-body p,
.ags-wishlist-page .ags-pc-wishlist-recommendation__price {
	margin: 0;
	font: 400 14px/1.4 'Jost', sans-serif;
	color: var(--agsb-soft);
}

/* Hint — heart pinned top-right of the photo, bubble to its left.
   DOM order is text → button, so row keeps the heart on the edge. */
.ags-wishlist-page .ags-pc-wishlist-list__example-hint {
	position: absolute;
	top: 12px;
	right: 12px;
	margin-top: 0;
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}

.ags-wishlist-page .ags-pc-wishlist-list__example-hint .ags-pc-wishlist-button {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(252, 252, 251, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--agsb-soft);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	animation: ags-hint-ring 2.4s ease-out infinite;
}

/* The icon span carries its own colour — let it follow the button instead,
   so currentColor drives both the stroke and the filled-in state. */
.ags-wishlist-page .ags-pc-wishlist-list__example-hint .ags-pc-wishlist-button__icon {
	display: flex;
	color: inherit;
}

.ags-wishlist-page .ags-pc-wishlist-list__example-hint .ags-pc-wishlist-button:hover,
.ags-wishlist-page .ags-pc-wishlist-list__example-hint .ags-pc-wishlist-button.is-active,
.ags-wishlist-page .ags-pc-wishlist-list__example-hint .ags-pc-wishlist-button[aria-pressed='true'] {
	background: #fff;
	color: var(--agsb-ink);
}

/* Saved → fill the heart */
.ags-wishlist-page .ags-pc-wishlist-list__example-hint .ags-pc-wishlist-button.is-active .ags-pc-wishlist-heart-path,
.ags-wishlist-page .ags-pc-wishlist-list__example-hint .ags-pc-wishlist-button[aria-pressed='true'] .ags-pc-wishlist-heart-path {
	fill: currentColor;
}

/* The pointing bubble */
.ags-wishlist-page .ags-pc-wishlist-list__example-hint > span {
	position: relative;
	max-width: 158px;
	padding: 9px 11px;
	border-radius: 6px;
	background: var(--agsb-ink);
	color: #fff;
	font: 400 11px/1.45 'Jost', sans-serif;
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.75);
	animation: ags-hint-nudge 2.4s ease-in-out infinite;
	transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.ags-wishlist-page .ags-pc-wishlist-list__example-hint > span::after {
	content: '';
	position: absolute;
	top: 19px;
	right: -5px;
	width: 0;
	height: 0;
	transform: translateY(-50%);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid var(--agsb-ink);
}

/* Saved → retire the hint, keep the heart. Class swap is the plugin's
   signal; aria-pressed covers the moment before it lands. */
.ags-wishlist-page .ags-pc-wishlist-list__example:not(.start-hint) .ags-pc-wishlist-list__example-hint > span,
.ags-wishlist-page .ags-pc-wishlist-list__example-hint:has(.ags-pc-wishlist-button[aria-pressed='true']) > span {
	opacity: 0;
	visibility: hidden;
	transform: translateX(10px);
	animation: none;
}

.ags-wishlist-page .ags-pc-wishlist-list__example:not(.start-hint) .ags-pc-wishlist-button,
.ags-wishlist-page .ags-pc-wishlist-list__example-hint .ags-pc-wishlist-button[aria-pressed='true'] {
	animation: none;
}

@keyframes ags-hint-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.3);
	}
	70% {
		box-shadow: 0 0 0 11px rgba(26, 26, 26, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(26, 26, 26, 0);
	}
}

@keyframes ags-hint-nudge {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(-4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ags-wishlist-page .ags-pc-wishlist-list__example-hint > span,
	.ags-wishlist-page .ags-pc-wishlist-list__example-hint .ags-pc-wishlist-button {
		animation: none;
	}
}

@media (max-width: 640px) {
	.ags-wishlist-page .ags-pc-wishlist-list__example-hint {
		top: 8px;
		left: 8px;
		right: 8px;
		gap: 6px;
	}

	.ags-wishlist-page .ags-pc-wishlist-list__example-hint > span {
		flex: 1 1 auto;
		max-width: none;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.ags-wishlist-page .ags-pc-wishlist-list__example-hint > span::after {
		top: 17px;
	}

	.ags-wishlist-page .ags-pc-wishlist-list__example-hint .ags-pc-wishlist-button {
		height: 34px;
		width: 34px;
	}
}

/* Responsive — mirror the shell's own breakpoints */
@media (max-width: 980px) {
	.ags-wishlist-page .ags-pc-wishlist-list {
		grid-template-columns: 1fr;
	}

	.ags-wishlist-page .ags-pc-wishlist-state {
		grid-column: 1;
	}

	.ags-wishlist-page .ags-pc-wishlist-body {
		grid-template-columns: 1fr;
	}

	.ags-wishlist-page .ags-pc-wishlist-left-rail {
		grid-column: 1;
		border-right: 0;
		border-bottom: 1px solid var(--agsb-line);
	}

	.ags-wishlist-page .ags-pc-wishlist-right-content {
		grid-column: 1;
	}

	.ags-wishlist-page .ags-pc-wishlist-list__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ags-wishlist-page .ags-pc-wishlist-recommendations__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 · MY ACCOUNT — stays in the theme
   Reuses the shell above (card, grid, rails). See inc/ags-account.php and
   woocommerce/myaccount/my-account.php.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Logged out: one centred card holding only the login form */
.ags-account__login-card {
	max-width: 520px;
	padding: clamp(28px, 4vw, 48px);
}

/* ── Logged-out sign-in / register card (woocommerce/myaccount/form-login.php)
   One centred, focused surface with a Sign-in ⇄ Register toggle. ── */

/* Narrower than the dashboard card — a single-column auth surface. Two classes
   (0,2,0) outrank the shared .ags-booking__card width. */
.ags-account--login .ags-account__login-card {
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

/* Strip WooCommerce's default form chrome (grey border + inner padding). */
.ags-account__login-card form.login,
.ags-account__login-card form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.ags-login {
	max-width: 360px;
	margin: 0 auto;
}

.ags-login__pane[hidden] {
	display: none;
}

/* Header — restores a visible heading (the old rule hid every h2 here to mask
   WooCommerce's English "Login"; the template now owns the copy). */
.ags-login__head {
	margin-bottom: 26px;
	text-align: center;
}

.ags-account--login .ags-login__title {
	display: block;
	margin: 0 0 7px;
	font: 400 22px/1.25 'Jost', sans-serif;
	letter-spacing: -0.01em;
	color: var(--agsb-ink);
}

.ags-login__sub {
	margin: 0;
	font: 400 14px/1.55 'Jost', sans-serif;
	color: var(--agsb-muted);
}

/* Remember-me + forgot-password share one quiet line above the button. */
.ags-login__meta {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 6px 0 22px;
}

/* Centre the checkbox against its label text. The (0,3,1) selector outranks
   WooCommerce's .woocommerce .woocommerce-form-login .rememberme (0,3,0,
   inline-block) — otherwise the label blockifies and the box sits on the text
   baseline (too high). */
.ags-account .ags-login__meta label.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	white-space: nowrap;
}

.ags-login__lost {
	font: 400 13px 'Jost', sans-serif;
	color: var(--agsb-soft);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid var(--agsb-line-2);
	padding-bottom: 1px;
	transition: color 0.15s, border-color 0.15s;
}

.ags-login__lost:hover {
	color: var(--agsb-ink);
	border-color: var(--agsb-ink);
}

/* Primary action fills the column. The (0,4,1) selector outranks WooCommerce's
   own button rules — .woocommerce button.button (float:left, padding:.618em 1em)
   otherwise floats the login button (breaking the switch below it) and shrinks
   the register button. */
.ags-account--login .ags-account__login-card .ags-login__form button.ags-login__submit {
	float: none;
	width: 100%;
	margin: 0;
	padding: 16px 24px;
	line-height: 1;
}

/* Disabled register button (WooCommerce blocks submit until the password is
   strong enough). WooCommerce's own disabled style collapses the label colour
   into the background — force a legible, dimmed-black state instead. */
.ags-account--login .ags-account__login-card .ags-login__form button.ags-login__submit:disabled,
.ags-account--login .ags-account__login-card .ags-login__form button.ags-login__submit.disabled {
	color: var(--agsb-muted);
	background: var(--agsb-line);
	border-color: var(--agsb-line-2);
	opacity: 1;
	cursor: not-allowed;
}

.ags-login__note {
	margin: 0 0 22px;
	font: 400 13px/1.55 'Jost', sans-serif;
	color: var(--agsb-muted);
}

/* Password strength meter + hint (shown while typing a new password) —
   quiet helper text, tucked just under the field. WooCommerce prints these
   as siblings of .password-input inside the form-row. */
.ags-login .woocommerce-password-strength,
.ags-login .woocommerce-password-hint {
	display: block;
	margin-top: 8px;
	padding: 0;
	background: none;
	border: 0;
	font: 400 12px/1.5 'Jost', sans-serif;
	text-align: left;
}

.ags-login .woocommerce-password-hint {
	color: var(--agsb-muted);
}

/* Registration privacy notice (woocommerce_register_form) — a fine-print note,
   not body copy. */
.ags-login .woocommerce-privacy-policy-text {
	margin: 0 0 20px;
	font: 400 12.5px/1.55 'Jost', sans-serif;
	color: var(--agsb-muted);
}

.ags-login .woocommerce-privacy-policy-text a {
	color: var(--agsb-soft);
	text-decoration: underline;
}

/* Toggle between the two panes. */
.ags-login__switch {
	margin: 28px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--agsb-line);
	text-align: center;
	font: 400 14px 'Jost', sans-serif;
	color: var(--agsb-soft);
}

.ags-login__switch a {
	color: var(--agsb-ink);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--agsb-ink);
	padding-bottom: 1px;
	transition: opacity 0.15s;
}

.ags-login__switch a:hover {
	opacity: 0.65;
}

.ags-account__content {
	padding: 40px 36px;
	min-width: 0;
}

/* Headings inside the content stay subordinate to the 24px rail titles
   (WooCommerce leaves them at the browser default 24px/700). */
.ags-account__content h2,
.ags-account__content h3 {
	margin: 0 0 14px;
	font: 400 18px/1.3 'Jost', sans-serif;
	letter-spacing: -0.01em;
	color: var(--agsb-ink);
}

.ags-account__content p {
	margin: 0 0 14px;
	font: 400 15px/1.65 'Jost', sans-serif;
	color: var(--agsb-soft);
}

.ags-account__content a {
	color: var(--agsb-accent);
}

/* WooCommerce's own layout floats the nav (30%) and content (68%) side by side.
   The grid handles placement here, so undo it. Three classes (0,3,0) outrank
   WooCommerce's .woocommerce-account .woocommerce-MyAccount-* (0,2,0). */
.ags-account .ags-grid .woocommerce-MyAccount-navigation,
.ags-account .ags-grid .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* Account navigation in the left rail */
.ags-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ags-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid var(--agsb-line);
	font: 400 14px 'Jost', sans-serif;
	color: var(--agsb-ink);
	text-decoration: none;
	transition: color 0.15s;
}

.ags-account .woocommerce-MyAccount-navigation li a:hover,
.ags-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--agsb-accent);
}

/* ── Fields ── */
.ags-account label {
	display: block;
	margin-bottom: 7px;
	font: 500 10px/1 'Jost', sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--agsb-muted);
}

.ags-account input:not([type="checkbox"]):not([type="hidden"]):not([type="submit"]),
.ags-account select {
	width: 100%;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--agsb-line-2);
	border-radius: 2px;
	background: #fff;
	font: 400 15px 'Jost', sans-serif;
	color: var(--agsb-ink);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ags-account textarea {
	width: 100%;
	min-width: 0;
	min-height: 120px;
	padding: 12px 14px;
	border: 1px solid var(--agsb-line-2);
	border-radius: 2px;
	background: #fff;
	font: 400 15px 'Jost', sans-serif;
	color: var(--agsb-ink);
	outline: none;
	resize: vertical;
}

.ags-account input:focus,
.ags-account select:focus,
.ags-account textarea:focus {
	border-color: var(--agsb-accent);
	box-shadow: 0 0 0 3px rgba(111, 109, 104, 0.12);
}

.ags-account .form-row,
.ags-account .woocommerce-form-row {
	margin: 0 0 18px;
	padding: 0;
}

/* Login: submit row keeps the button and "remember me" on one line.
   Field rows also carry .form-row, hence the :not(). */
.ags-account .woocommerce-form-login .form-row:not(.woocommerce-form-row) {
	display: flex;
	align-items: center;
	gap: 18px;
}

.ags-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 400 14px 'Jost', sans-serif;
	letter-spacing: normal;
	text-transform: none;
	color: var(--agsb-soft);
	cursor: pointer;
}

.ags-account input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	background: #fff;
	border: 1px solid var(--agsb-line-2);
	border-radius: 2px;
	cursor: pointer;
	position: relative;
	transition: background 0.15s, border-color 0.15s;
}

.ags-account input[type="checkbox"]:checked {
	background: var(--agsb-ink);
	border-color: var(--agsb-ink);
}

.ags-account input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Password show/hide eye — opt out of the button styling below */
.ags-account .password-input {
	display: block;
	position: relative;
}

.ags-account button.show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: auto;
	height: auto;
	padding: 6px;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--agsb-muted);
	letter-spacing: normal;
}

.ags-account .woocommerce-LostPassword {
	margin: 16px 0 0;
	font: 400 14px 'Jost', sans-serif;
}

/* ── Buttons ──
   Scoped to the account's own areas, never the shared rails — the wishlist
   column must keep the exact styling it has in the booking form. */
.ags-account__content button,
.ags-account__content button.button,
.ags-account__content a.button,
.ags-account__content input[type="submit"],
.ags-account__login-card button,
.ags-account__login-card button.button,
.ags-account__login-card a.button,
.ags-account__login-card input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 16px 30px;
	background: var(--agsb-ink);
	color: #fff;
	border: 1px solid var(--agsb-ink);
	border-radius: 2px;
	font: 500 12px 'Jost', sans-serif;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.25s;
}

.ags-account__content button:hover,
.ags-account__content a.button:hover,
.ags-account__content input[type="submit"]:hover,
.ags-account__login-card button:hover,
.ags-account__login-card input[type="submit"]:hover {
	opacity: 0.82;
}

/* ── Password change fieldset — read as one tinted block ── */
.ags-account__content fieldset {
	margin: 26px 0 22px;
	padding: clamp(20px, 2.4vw, 28px);
	background: var(--agsb-panel);
	border: 1px solid var(--agsb-line);
	border-radius: 2px;
}

/* float pulls the legend out of its border slot, so it sits inside the block
   instead of notching the top border */
.ags-account__content fieldset legend {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 18px;
	font: 500 10px/1 'Jost', sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--agsb-muted);
}

.ags-account__content fieldset legend + * {
	clear: both;
}

/* Inputs sit on the tint — keep them white so they still read as fields */
.ags-account__content fieldset .form-row:last-child,
.ags-account__content fieldset .woocommerce-form-row:last-child {
	margin-bottom: 0;
}

/* Breathing room before "Save changes" */
.ags-account__content fieldset ~ p {
	margin-top: 0;
}

/* ── Password eye — smaller and quieter.
   The icon is a background SVG with its colour baked in, so opacity (not
   `color`) is what actually tones it down. ── */
.ags-account .show-password-input::before {
	width: 16px;
	height: 16px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.4;
	transition: opacity 0.15s;
}

.ags-account .show-password-input:hover::before {
	opacity: 0.7;
}

/* ── Addresses ── */
/* Stacked: the address columns are too narrow to sit the heading and the
   button on one line without the title wrapping mid-word. */
.ags-account__content .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

.ags-account__content .woocommerce-Address-title h2,
.ags-account__content .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 16px;
}

/* "Add / Edit address" — a small outline button rather than a bare link */
.ags-account__content .woocommerce-Address-title a.edit {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border: 1px solid var(--agsb-ink);
	border-radius: 2px;
	font: 500 10px 'Jost', sans-serif;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--agsb-ink);
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.ags-account__content .woocommerce-Address-title a.edit:hover {
	background: var(--agsb-ink);
	color: #fff;
}

.ags-account__content address {
	font: 400 14px/1.7 'Jost', sans-serif;
	font-style: normal;
	color: var(--agsb-soft);
}

/* Order view: billing/shipping block as the theme's soft panel */
.ags-account__content .woocommerce-customer-details address {
	padding: 16px 18px;
	background: var(--agsb-panel);
	border: 1px solid var(--agsb-line);
	border-radius: 2px;
}

/* ── Tables (orders, order details) — no outer frame, just row rules ── */
.ags-account__content table,
.ags-account__content table.shop_table {
	width: 100%;
	margin: 0 0 24px;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	font: 400 14px 'Jost', sans-serif;
}

.ags-account__content table th,
.ags-account__content table td {
	padding: 13px 12px 13px 0;
	border: 0;
	border-bottom: 1px solid var(--agsb-line);
	text-align: left;
	background: none;
}

.ags-account__content table thead th {
	font: 500 10px 'Jost', sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--agsb-muted);
}

.ags-account__content table tfoot th,
.ags-account__content table tfoot td {
	font-weight: 400;
}

/* Action buttons inside tables stay small */
.ags-account__content table .button,
.ags-account__content table a.button,
.ags-account__content table button {
	padding: 9px 16px;
	font-size: 10px;
	letter-spacing: 0.14em;
}

/* ── Notices ──
   Neutralise the default WooCommerce look (blue 3px top rule + WooCommerce
   icon-font glyph) and re-cast the notice in the account's monochrome system:
   a flat panel with an ink left accent, message on the left and any inline CTA
   (e.g. "verify e-mail") pinned to the right on the same row. */
.ags-account .woocommerce-message,
.ags-account .woocommerce-info,
.ags-account .woocommerce-error {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(14px, 3vw, 30px);
	margin: 0 0 24px;
	padding: 18px 22px;
	list-style: none;
	background: var(--agsb-panel);
	border: 1px solid var(--agsb-line);
	border-left: 3px solid var(--agsb-ink);
	border-radius: 2px;
	font: 400 14px/1.6 'Jost', sans-serif;
	color: var(--agsb-soft);
}

/* Hide the WooCommerce icon-font pseudo (blue, off-brand). */
.ags-account .woocommerce-message::before,
.ags-account .woocommerce-info::before,
.ags-account .woocommerce-error::before {
	display: none;
}

/* Inline CTA: drop the WooCommerce float, sit right, slightly compact. */
.ags-account .woocommerce-message .button,
.ags-account .woocommerce-info .button,
.ags-account .woocommerce-error .button {
	order: 2;
	float: none;
	margin: 0 0 0 auto;
	flex-shrink: 0;
	padding: 13px 26px;
	font-size: 11px;
	letter-spacing: 0.12em;
}

@media (max-width: 560px) {
	.ags-account .woocommerce-message .button,
	.ags-account .woocommerce-info .button,
	.ags-account .woocommerce-error .button {
		width: 100%;
		margin-left: 0;
		text-align: center;
	}
}

/* ── Select2 (Country / State on the address forms) ── */
.ags-account .select2-container--default .select2-selection--single {
	height: auto;
	background: #fff;
	border: 1px solid var(--agsb-line-2);
	border-radius: 2px;
}

.ags-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 13px 14px;
	line-height: 1.4;
	font: 400 15px 'Jost', sans-serif;
	color: var(--agsb-ink);
}

.ags-account .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 10px;
}

/* The dropdown is appended to <body>, so scope it by the page class */
.woocommerce-account .select2-dropdown {
	border-color: var(--agsb-line-2, #ded9cf);
	border-radius: 2px;
	font-family: 'Jost', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5 · RESPONSIVE — shell + booking form
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
	.ags-grid {
		grid-template-columns: 1fr;
	}

	.ags-rail--left { border-right: 0; border-bottom: 1px solid var(--agsb-line); order: 0; }
	.ags-form { order: 1; }
	.ags-rail--right { border-left: 0; border-top: 1px solid var(--agsb-line); order: 2; }
}

/* Below 920px drop the card chrome entirely — flat, edge-to-edge form */
@media (max-width: 920px) {
	.ags-booking {
		background: none;
		padding: 0;
	}

	.ags-booking__card {
		max-width: none;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

@media (max-width: 560px) {
	.ags-form { padding: 12px 20px 32px; }
	.ags-types { grid-template-columns: 1fr; }
	.ags-datetime { grid-template-columns: 1fr; }
	.ags-row--2,
	.ags-row--3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · APPOINTMENT PLUGIN FORM  (ags-appointments · [ags_appointment_form])
   The plugin already renders the prototype's 3-rail structure (guidance /
   main / wishlist rail with the shared .ags-pc-wishlist-informer). These
   rules only close the visual gap to the [ags_booking_form] mock and are
   loaded AFTER the plugin's own stylesheet. No markup changes required.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grey band behind the white card (mirrors the prototype's .ags-booking). */
.site-main--sections:has(> .ags-appointment-form) {
	background: #eaeaea;
	padding: clamp(20px, 4vw, 56px) var(--container-pad);
}

.ags-appointment-form {
	/* Full palette so the shared wishlist informer (.ags-rule, .ags-wishlist__*)
	   resolves every token it references, same as under .ags-booking. */
	--agsb-bg: #eaeaea;
	--agsb-card: #fff;
	--agsb-ink: #1a1a1a;
	--agsb-accent: #6d6d70;
	--agsb-muted: #94949a;
	--agsb-soft: #55555b;
	--agsb-line: #e6e6e8;
	--agsb-line-2: #d6d6da;
	--agsb-rule: #e2e2e5;
	--agsb-panel: #f3f3f4;
	margin: 0 auto;
	font-family: 'Jost', system-ui, sans-serif;
	color: var(--agsb-ink);
}

/* Side columns match the prototype's fixed 300px rails. */
.ags-appointment-form__layout {
	grid-template-columns: 300px minmax(0, 1fr) 300px;
}

.ags-appointment-form[data-show-left-panel="0"] .ags-appointment-form__layout {
	grid-template-columns: minmax(0, 1fr) 300px;
}

.ags-appointment-form[data-show-wishlist-panel="0"] .ags-appointment-form__layout {
	grid-template-columns: 300px minmax(0, 1fr);
}

/* ── Rails ── */
.ags-appointment-form__guidance,
.ags-appointment-form__wishlist-rail {
	padding: 34px 26px;
}

/* "Questions?" contact rows — drop the Phone/Email/Address labels, one column
   like the prototype's plain contact lines. */
.ags-appointment-form__questions-row {
	grid-template-columns: minmax(0, 1fr);
}

.ags-appointment-form__questions-row > span:first-child {
	display: none;
}

.ags-appointment-form__guidance-title,
.ags-appointment-form__wishlist-title {
	font-size: 24px;
	letter-spacing: -0.01em;
}

/* The appointment shell supplies a legacy static "Your wishlist" heading.
   The Informer owns the configured Wishlist top title, so keep one heading
   and style it exactly like the main Wishlist rail title. */
.ags-appointment-form__wishlist-title {
	display: none;
}

.ags-appointment-form__wishlist-rail .ags-pc-wishlist-informer__title {
	margin: 0 0 12px;
	font: 400 24px/1.1 'Jost', sans-serif;
	letter-spacing: -0.01em;
	color: var(--agsb-ink);
}

.ags-appointment-form__wishlist-rail .ags-pc-wishlist-informer__text,
.ags-appointment-form__wishlist-rail .ags-pc-wishlist-informer__empty-text {
	margin: 0;
	font: 400 13.5px/1.65 'Jost', sans-serif;
	color: var(--agsb-soft);
}

.ags-appointment-form__wishlist-rail .ags-pc-wishlist-informer .ags-pc-wishlist-list__actions {
	align-items: flex-start;
	flex-direction: column;
	margin-top: 18px;
}

.ags-appointment-form__wishlist-rail .ags-pc-wishlist-informer .ags-pc-wishlist-list__action {
	box-sizing: border-box;
	flex: 0 0 auto;
	justify-content: center;
	max-width: 100%;
	min-width: 245px;
	text-align: center;
	width: max-content;
}

.ags-appointment-form__guidance-highlights li::before {
	color: var(--agsb-accent);
}

/* ── Accordion steps ── */
.ags-appointment-form__step-num {
	letter-spacing: 0.2em;
	color: var(--agsb-accent);
}

.ags-appointment-form__step-title {
	font-size: 19px;
	letter-spacing: -0.01em;
}

.ags-appointment-form__step-summary {
	color: var(--agsb-accent);
}

/* ── Type picker — two columns, filled selection ── */
.ags-appointment-form__types {
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ags-appointment-form__type-card {
	border-radius: 2px;
	border-color: var(--agsb-line-2);
}

.ags-appointment-form__type-card:hover,
.ags-appointment-form__type-card--focused {
	border-color: var(--agsb-accent);
}

.ags-appointment-form__type-card--selected {
	border-color: var(--agsb-ink);
	background: var(--agsb-ink);
	color: #fff;
	box-shadow: none;
}

.ags-appointment-form__type-card--selected .ags-appointment-form__type-dur,
.ags-appointment-form__type-card--selected .ags-appointment-form__type-duration {
	color: rgba(255, 255, 255, 0.65);
}

.ags-appointment-form__type-desc {
	margin-top: 20px;
	padding: 16px 18px;
	background: var(--agsb-panel);
	border-left: 2px solid var(--agsb-accent);
	font-size: 14px;
	line-height: 1.6;
	color: #45454a;
}

/* ── Calendar — round day cells, filled selection ── */
.ags-appointment-form__cal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 34px;
	min-height: 34px;
	padding: 0;
	border-color: #dcdce0;
	border-radius: 2px;
	color: var(--agsb-ink);
	font-size: 16px;
	line-height: 1;
}

.ags-appointment-form__cal-nav:hover {
	border-color: var(--agsb-accent);
}

.ags-appointment-form__cal-month {
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ags-appointment-form__cal-dow span {
	font-weight: 500;
	letter-spacing: 0.1em;
	color: #a9a9b0;
}

.ags-appointment-form__day,
.ags-appointment-form__day-blank {
	min-height: 0;
	height: auto;
	aspect-ratio: 1; /* square cells that shrink with the calendar */
}

.ags-appointment-form__day {
	width: 100%;
	max-width: 40px; /* fluid circle, never larger than 40px */
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 14px;
}

.ags-appointment-form__day:hover,
.ags-appointment-form__day:focus-visible {
	border: 0;
	outline: none;
	background: #f0f0f2;
}

.ags-appointment-form__day--selected,
.ags-appointment-form__day--selected:hover {
	border: 0;
	background: var(--agsb-ink);
	color: #fff;
	font-weight: 500;
}

.ags-appointment-form__day:disabled {
	color: #d3d3d8;
	background: transparent;
}

/* Center column is a query container so the date/time layout responds to its
   OWN width — in the 3-rail layout the column gets narrow long before the
   viewport hits a mobile breakpoint. Below ~520px the times drop under the
   calendar instead of squeezing it. */
.ags-appointment-form__main {
	container: agsform / inline-size;
}

@container agsform (max-width: 520px) {
	.ags-appointment-form__datetime {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
}

/* ── Time slots — clean 3-up buttons, hide the native input ── */
.ags-appointment-form__slots-title {
	margin-bottom: 14px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--agsb-muted);
}

.ags-appointment-form__slots-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.ags-appointment-form__slot-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ags-appointment-form__slot-card {
	justify-content: center;
	gap: 0;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--agsb-line-2);
	border-radius: 2px;
	font-size: 14px;
	white-space: nowrap;
}

.ags-appointment-form__slot-card:hover {
	border-color: var(--agsb-accent);
}

.ags-appointment-form__slot-card--selected {
	border-color: var(--agsb-accent);
	background: var(--agsb-accent);
	color: #fff;
	box-shadow: none;
}

/* ── Fields — uppercase eyebrow labels, taller inputs ── */
/* Don't stretch a field to its row-mate's height (the phone field is taller —
   iti wrapper + help text — which was pulling the email input tall). */
.ags-appointment-form__row {
	align-items: start;
}

.ags-appointment-form__field {
	gap: 7px;
}

.ags-appointment-form__field > span:first-child {
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--agsb-muted);
}

.ags-appointment-form__field input,
.ags-appointment-form__field select {
	min-height: 46px;
	padding: 0 14px;
	border-color: var(--agsb-line-2);
	border-radius: 2px;
	font-size: 15px;
}

.ags-appointment-form__field input:focus,
.ags-appointment-form__field select:focus {
	border-color: var(--agsb-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(111, 109, 104, 0.12);
}

.ags-appointment-form__phone-help,
.ags-appointment-form__consent-hint {
	color: var(--agsb-muted);
}

/* ── Submit — full-width, tall, uppercase ── */
.ags-appointment-form__submit-section {
	margin-top: 26px;
}

.ags-appointment-form__btn-submit {
	width: 100%;
	min-height: 54px;
	background: var(--agsb-ink);
	border-color: var(--agsb-ink);
	border-radius: 2px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ags-appointment-form__btn-submit:hover:not(:disabled) {
	background: #000;
}

/* ── Responsive rails (override the plugin's straight 3→1 jump) ──
   Wide: 3 columns. ≤1100: the wishlist rail drops to a full-width band below,
   while the left panel + form stay side by side. ≤760: everything stacks and
   the left panel spans the full width. */
@media (max-width: 1100px) {
	.ags-appointment-form__layout {
		grid-template-columns: 300px minmax(0, 1fr);
	}

	.ags-appointment-form__guidance {
		border: 0;
		border-right: 1px solid var(--agsb-line);
	}

	.ags-appointment-form__wishlist-rail {
		grid-column: 1 / -1;
		border: 0;
		border-top: 1px solid var(--agsb-line);
	}
}

@media (max-width: 760px) {
	.ags-appointment-form__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ags-appointment-form__guidance {
		border: 0;
		border-bottom: 1px solid var(--agsb-line);
	}

	.ags-appointment-form__wishlist-rail {
		grid-column: auto;
	}
}

@media (max-width: 600px) {
	.site-main--sections:has(> .ags-appointment-form) {
		padding-left: 0;
		padding-right: 0;
	}

	.ags-appointment-form__types {
		grid-template-columns: 1fr;
	}
}

/* ── Appointments account (ags-customer-account — plugin markup) ─────────────
   Theme presentation only, scoped under .ags-account__content to sit above the
   plugin's own rules. Text sized like the other account tabs; the Upcoming/Past
   tabs share the "Back to appointments" link look; View reuses the address
   "edit" outline button; booking-view request forms stretch full width. */
.ags-account__content .ags-customer-account {
	font-size: 15px;
	line-height: 1.6;
}

.ags-account__content .ags-customer-account dt,
.ags-account__content .ags-customer-account dd,
.ags-account__content .ags-customer-account time,
.ags-account__content .ags-customer-account p,
.ags-account__content .ags-customer-account li {
	font-size: 15px;
}

.ags-account__content .ags-customer-account h3 {
	font: 400 18px/1.3 'Jost', sans-serif;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
	color: var(--agsb-ink);
}

/* h4 (request titles) — drop the extra vertical margin */
.ags-account__content .ags-customer-account h4 {
	font: 700 15px/1.4 'Jost', sans-serif;
	margin: 0 0 10px;
}

/* Upcoming / Past tabs + "Back to appointments" — one quiet text-link look
   (strip the plugin's boxed-button chrome so they read like the back link). */
.ags-account__content .ags-customer-account__tabs a,
.ags-account__content .ags-customer-account__back a {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font: 400 15px 'Jost', sans-serif;
	color: var(--agsb-soft);
	text-decoration: none;
	transition: color 0.15s;
}

.ags-account__content .ags-customer-account__tabs a:hover,
.ags-account__content .ags-customer-account__back a:hover {
	color: var(--agsb-ink);
}

.ags-account__content .ags-customer-account__tabs {
	display: flex;
	gap: 22px;
	margin: 0 0 22px;
}

.ags-account__content .ags-customer-account__tabs a[aria-current="page"] {
	color: var(--agsb-ink);
	font-weight: 600;
	text-decoration: none;
}

/* View — the same small outline button as the address "edit" link */
.ags-account__content .ags-customer-account__row a {
	justify-self: start;
	align-self: center;
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border: 1px solid var(--agsb-ink);
	border-radius: 2px;
	font: 500 10px 'Jost', sans-serif;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--agsb-ink);
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.ags-account__content .ags-customer-account__row a:hover {
	background: var(--agsb-ink);
	color: #fff;
}

/* Booking view — stretch the request forms to the full content width */
.ags-account__content .ags-customer-account__request-form {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.ags-account__content .ags-customer-account__request-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.ags-account__content .ags-customer-account__request-form textarea,
.ags-account__content .ags-customer-account__request-form label {
	width: 100%;
	box-sizing: border-box;
}

/* ── Dashboard promo grid (see inc/account-promo.php) ────────────────────────
   Left = wedding photo, middle = evening photo, right column split into
   Orders / Appointments. Frosted white label over each card. */
.ags-account-promo {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: clamp(24px, 3vw, 34px);
}

.ags-account-promo__col {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 14px;
	min-height: 0;
}

.ags-account-promo__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: 3px;
	text-decoration: none;
	background-color: var(--agsb-ink);
	background-image: var(--ags-promo-img, none);
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease;
}

.ags-account-promo__card--tall {
	aspect-ratio: 3 / 4;
}

.ags-account-promo__card--half {
	min-height: 116px;
}

/* Soft bottom shade so the frosted label reads on any photo */
.ags-account-promo__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(20, 18, 15, 0.22), transparent 42%);
	pointer-events: none;
}

.ags-account-promo__label {
	position: relative;
	z-index: 1;
	width: 100%;
	box-sizing: border-box;
	padding: 13px 15px;
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--agsb-ink);
	font: 500 12px 'Jost', sans-serif;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	transition: background 0.25s ease;
}

.ags-account-promo__card:hover .ags-account-promo__label {
	background: rgba(255, 255, 255, 0.68);
}

@media (max-width: 600px) {
	.ags-account-promo {
		grid-template-columns: 1fr;
	}

	.ags-account-promo__card--tall {
		aspect-ratio: 16 / 10;
	}
}