/*
Theme Name: PGY Costume Child
Theme URI: https://pgy.org/
Description: Custom child theme for the PGY Costume Inventory & Rental System.
Author: PGY Development Team
Author URI: https://pgy.org/
Template: generatepress
Version: 2.0.0
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: pgy-costume
*/

/* Tokens taken from the live PGY Alumni Archive so the costume site reads as a
   sibling of the main site rather than a separate product. Scoped under
   .pgy-inventory so nothing here repaints the rest of the install. */

.pgy-inventory {
	--pgy-gold: #d9a441;
	--pgy-gold-d: #b5832b;
	--pgy-ink: #2a323a;
	--pgy-slate: #2c3e50;
	--pgy-muted: #6b7682;
	--pgy-line: #e4e0d6;
	--pgy-line-soft: #efebe0;
	--pgy-cream: #f5f1e6;
	--pgy-cream-hi: #fdf6e4;
	--pgy-cream-lo: #f6e9c8;
	--pgy-white: #ffffff;
	--pgy-serif: Georgia, "Times New Roman", serif;
	--pgy-radius: 10px;
	--pgy-card-shadow: 0 1px 3px rgba(42, 50, 58, .07), 0 6px 18px rgba(42, 50, 58, .06);
	--pgy-sticky-top: 0px;
}

/* Full bleed.
   GeneratePress wraps everything below the header in #page.grid-container,
   which is capped at the Customizer's container width. That crops the cream
   hero and the white facet bar to the content column and leaves white gutters
   down both sides. The bands have to reach the viewport edge - only their
   contents stay centred, via the --pgy-wide cap below.
   #page sits after .site-header in the markup, so nothing here touches the
   site header or the footer. */

.pgy-inventory {
	/* Matched to the Alumni Archive so the two pages line up when you flick
	   between them:
	     .pgyaa-hero  max-width 1160px, padding 50px 28px 48px
	     .pgyaa-shell max-width 1220px, padding 34px 28px 80px
	   The hero is deliberately the narrower of the two - its text is indented
	   slightly further than the content below it. */
	--pgy-wide: 1220px;
	--pgy-wide-hero: 1160px;
	--pgy-gutter: 28px;
}

.pgy-inventory #page {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.pgy-inventory .site-content,
.pgy-inventory .site-main {
	background: var(--pgy-cream);
	margin: 0;
	padding: 0;
}

.pgy-app {
	max-width: var(--pgy-wide);
	margin: 0 auto;
	/* No top padding: .pgy-resulthead carries it, matching the shell's 34px. */
	padding: 0 var(--pgy-gutter) 80px;
	color: var(--pgy-ink);
}

/* --- Shared bits -------------------------------------------------------- */

.pgy-eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pgy-gold-d);
}

.pgy-inventory .pgy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pgy-inventory .pgy-btn--gold {
	background: var(--pgy-gold);
	color: #3a2e10;
	box-shadow: 0 1px 2px rgba(42, 50, 58, .12);
}

.pgy-inventory .pgy-btn--gold:hover,
.pgy-inventory .pgy-btn--gold:focus {
	background: var(--pgy-gold-d);
	color: #fff;
}

.pgy-inventory .pgy-btn--white {
	background: var(--pgy-white);
	border-color: var(--pgy-line);
	color: var(--pgy-ink);
}

.pgy-inventory .pgy-btn--white:hover,
.pgy-inventory .pgy-btn--white:focus {
	border-color: var(--pgy-gold);
	color: var(--pgy-ink);
}

.pgy-inventory .pgy-btn--plain {
	padding: 7px 14px;
	background: transparent;
	border-color: var(--pgy-line);
	font-size: 13px;
	font-weight: 500;
	color: var(--pgy-muted);
}

.pgy-inventory .pgy-btn--plain:hover,
.pgy-inventory .pgy-btn--plain:focus {
	background: var(--pgy-white);
	color: var(--pgy-ink);
}

/* --- Hero --------------------------------------------------------------- */

.pgy-hero {
	background: linear-gradient(180deg, var(--pgy-cream-hi) 0%, var(--pgy-cream-lo) 100%);
}

.pgy-hero__inner {
	display: flex;
	align-items: center;
	gap: 46px;
	max-width: var(--pgy-wide-hero);
	margin: 0 auto;
	padding: 50px var(--pgy-gutter) 48px;
}

/* flex rather than the alumni page's 1.05fr/.95fr grid, so that a wardrobe
   with fewer than three photographed costumes - no collage - still fills the
   band instead of leaving half of it empty. */
.pgy-hero__text {
	flex: 1 1 0;
	min-width: 0;
}

.pgy-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-bottom: 18px;
	font-size: 13px;
	color: #8a7b5e;
}

.pgy-crumbs a {
	color: #8a7b5e;
	text-decoration: none;
}

.pgy-crumbs a:hover {
	color: var(--pgy-gold-d);
	text-decoration: underline;
}

.pgy-hero__title {
	margin: 0;
	font-family: var(--pgy-serif);
	font-size: clamp(38px, 5.4vw, 62px);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.01em;
	color: var(--pgy-ink);
}

.pgy-hero__title em {
	display: block;
	font-style: italic;
	color: var(--pgy-gold);
}

.pgy-hero__lede {
	max-width: 460px;
	margin: 20px 0 26px;
	font-size: 16px;
	line-height: 1.6;
	color: #5c6670;
}

.pgy-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* Search results reuse the hero band, but shallower - there is no collage and
   no lede, so the full 50px top padding would look like a mistake. */
.pgy-hero--slim .pgy-hero__inner {
	padding-top: 32px;
	padding-bottom: 30px;
}

.pgy-hero__title--slim {
	font-size: clamp(26px, 3.4vw, 38px);
}

.pgy-hero__title--slim em {
	display: inline;
}

/* --- Search form -------------------------------------------------------- */

.pgy-searchform {
	display: flex;
	gap: 8px;
	max-width: 540px;
	margin: 20px 0 0;
}

.pgy-inventory .pgy-searchform__input {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	background: var(--pgy-white);
	border: 1px solid var(--pgy-line);
	border-radius: 8px;
	font-size: 15px;
	color: var(--pgy-ink);
}

.pgy-inventory .pgy-searchform__input:focus {
	border-color: var(--pgy-gold);
	outline: 2px solid rgba(217, 164, 65, .22);
	outline-offset: 0;
}

/* The collage. Rotations are fixed rather than random so the layout does not
   reshuffle on every page load. */

.pgy-collage {
	position: relative;
	flex: 0 0 clamp(300px, 34%, 420px);
	height: 300px;
}

.pgy-collage__item {
	position: absolute;
	margin: 0;
	padding: 8px 8px 26px;
	background: var(--pgy-white);
	box-shadow: 0 4px 16px rgba(42, 50, 58, .18);
}

.pgy-collage__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.pgy-collage__item figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	text-align: center;
	font-family: var(--pgy-serif);
	font-style: italic;
	font-size: 13px;
	color: #8a7b5e;
}

.pgy-collage__item--1 {
	width: 158px;
	left: 0;
	top: 26px;
	transform: rotate(-6deg);
	z-index: 2;
}

.pgy-collage__item--2 {
	width: 166px;
	right: 0;
	top: 0;
	transform: rotate(5deg);
	z-index: 1;
}

.pgy-collage__item--3 {
	width: 150px;
	left: 92px;
	bottom: 0;
	transform: rotate(2deg);
	z-index: 3;
}

/* --- Colour rail -------------------------------------------------------- */

.pgy-filters {
	margin: 0;
}

/* The band is full width; the gutter lives on the inner element so its content
   box matches .pgy-app's exactly. Putting the padding on the band instead would
   leave the rail 28px wider than the grid on each side. */
.pgy-swatches {
	padding: 0;
}

.pgy-swatches__inner {
	max-width: var(--pgy-wide);
	margin: 0 auto;
	padding: 26px var(--pgy-gutter) 22px;
}

.pgy-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pgy-swatch {
	margin: 0;
}

.pgy-swatch input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pgy-swatch label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 13px 5px 6px;
	background: var(--pgy-white);
	border: 1px solid var(--pgy-line);
	border-radius: 999px;
	font-size: 13px;
	color: var(--pgy-ink);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.pgy-swatch label:hover {
	border-color: var(--pgy-gold);
}

/* The swatch always carries its name. A colour-only control is unusable if you
   cannot tell Silver from White, or cannot see colour at all. */
.pgy-swatch__dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--pgy-swatch, #c9ccc6);
	box-shadow: inset 0 0 0 1px rgba(42, 50, 58, .18);
	flex: none;
}

.pgy-swatch.is-on label {
	background: var(--pgy-slate);
	border-color: var(--pgy-slate);
	color: var(--pgy-white);
}

.pgy-swatch input:focus-visible + label {
	outline: 2px solid var(--pgy-gold);
	outline-offset: 2px;
}

/* --- Sticky facet bar --------------------------------------------------- */

/* The bar is a full-width white band; only .pgy-bar__inner is capped, so its
   controls line up with the grid below. */
.pgy-bar {
	position: sticky;
	top: var(--pgy-sticky-top);
	z-index: 20;
	background: var(--pgy-white);
	border-top: 1px solid var(--pgy-line);
	border-bottom: 1px solid var(--pgy-line);
	box-shadow: 0 1px 3px rgba(42, 50, 58, .05);
}

.pgy-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: var(--pgy-wide);
	margin: 0 auto;
	padding: 11px var(--pgy-gutter);
}

.pgy-bar__count {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pgy-gold-d);
	white-space: nowrap;
}

.pgy-bar__field {
	margin: 0;
}

.pgy-inventory .pgy-bar input[type="search"],
.pgy-inventory .pgy-bar select {
	padding: 8px 11px;
	background: var(--pgy-white);
	border: 1px solid var(--pgy-line);
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--pgy-ink);
	line-height: 1.3;
}

.pgy-bar__field--search input {
	min-width: 210px;
}

.pgy-inventory .pgy-bar input[type="search"]:focus,
.pgy-inventory .pgy-bar select:focus {
	border-color: var(--pgy-gold);
	outline: 2px solid rgba(217, 164, 65, .22);
	outline-offset: 0;
}

.pgy-inventory .pgy-bar__apply {
	padding: 8px 18px;
	font-size: 13.5px;
}

/* --- Drawer ------------------------------------------------------------- */

/* A native <details>, so the panel opens with no JavaScript at all. */

.pgy-drawer {
	position: relative;
}

.pgy-drawer__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	background: var(--pgy-slate);
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--pgy-white);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.pgy-drawer__toggle::-webkit-details-marker {
	display: none;
}

.pgy-drawer__toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s ease;
}

.pgy-drawer[open] .pgy-drawer__toggle::after {
	transform: translateY(1px) rotate(-135deg);
}

.pgy-drawer__badge {
	min-width: 18px;
	padding: 1px 6px;
	background: var(--pgy-gold);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	color: #3a2e10;
	text-align: center;
}

.pgy-drawer__panel {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	z-index: 30;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px 26px;
	width: min(640px, calc(100vw - 48px));
	padding: 20px 22px;
	background: var(--pgy-white);
	border: 1px solid var(--pgy-line);
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(42, 50, 58, .16);
}

.pgy-drawer__group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.pgy-drawer__group legend {
	padding: 0;
	margin-bottom: 8px;
}

.pgy-check {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	font-size: 13.5px;
	color: var(--pgy-ink);
	cursor: pointer;
}

.pgy-check input {
	accent-color: var(--pgy-gold-d);
	flex: none;
}

.pgy-check span {
	flex: 1;
	min-width: 0;
}

.pgy-check em {
	font-style: normal;
	font-size: 12px;
	color: #9aa3ac;
	font-variant-numeric: tabular-nums;
}

.pgy-drawer__actions {
	grid-column: 1 / -1;
	display: flex;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--pgy-line-soft);
}

/* --- Results heading ---------------------------------------------------- */

.pgy-results {
	transition: opacity .15s ease;
	scroll-margin-top: 80px;
}

.pgy-results.is-loading {
	opacity: .45;
	pointer-events: none;
}

.pgy-resulthead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	padding: 32px 0 20px;
}

.pgy-resulthead__title {
	margin: 0;
	font-family: var(--pgy-serif);
	font-size: 26px;
	font-weight: 400;
	color: var(--pgy-ink);
}

.pgy-resulthead__meta {
	margin: 0;
	font-size: 13.5px;
	color: var(--pgy-muted);
}

.pgy-resulthead__clear {
	font-size: 13px;
	color: var(--pgy-gold-d);
	text-decoration: underline;
}

.pgy-resulthead__add {
	margin-left: auto;
}

/* --- Grid & card -------------------------------------------------------- */

/* Three across, matching the Recent Memories row on the Alumni Archive.
   Fixed rather than auto-fill: auto-fill would give five at this width, and the
   count is a design decision here, not a function of the viewport.
   minmax(0, 1fr) rather than 1fr so a long costume name cannot widen its track
   and push the row out of alignment. */
.pgy-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px 24px;
}

.pgy-inventory .pgy-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--pgy-white);
	border-radius: 12px;
	box-shadow: var(--pgy-card-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}

.pgy-inventory .pgy-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 5px rgba(42, 50, 58, .09), 0 14px 30px rgba(42, 50, 58, .12);
}

/* The hover outline, in the costume's own colour.
   Sits at inset 1px with a 2px stroke centred on the path, so the outer edge
   of the line lands exactly on the card's edge.

   One colour for every card, on the client's instruction (2026-08-27). It used
   to take the costume's own colour term, so a wall of cards lit up in a
   different shade each - which drew the eye to the colour rather than to the
   card being hovered. costume-card.php still sets --pgy-trace; it is simply
   ignored now, so nothing needs re-uploading to remove it. */
.pgy-card__trace {
	position: absolute;
	inset: 1px;
	pointer-events: none;
}

.pgy-card__trace svg {
	display: block;
	width: 100%;
	height: 100%;
	/* SVG clips to its viewport by default, which would cut the outer half of
	   the stroke off. */
	overflow: visible;
}

.pgy-card__trace rect {
	fill: none;
	stroke: var(--pgy-gold);
	stroke-width: 2;
	/* Hidden by opacity, not by a dash offset. The outline used to be drawn on
	   with stroke-dasharray/stroke-dashoffset so it travelled around the card;
	   the client asked for the border to simply appear, so there is nothing to
	   animate and a plain show/hide is the honest way to write it. */
	opacity: 0;
}

/* Hover-capable pointers only. On a touchscreen :hover sticks after a tap,
   which would leave the outline drawn on whichever card was last touched. */
@media (hover: hover) and (pointer: fine) {

	.pgy-inventory .pgy-card:hover .pgy-card__trace rect {
		opacity: 1;
	}
}

/* A short landscape frame that never crops.
   The card had to come down from ~658px, and the photo is most of that height,
   so the frame is landscape 4:3 - 279px at a 372px card instead of 465px.
   But costume photographs are portrait (~0.91 w/h), so filling a landscape
   frame with object-fit: cover would take the crop out of the top and bottom
   and behead every model. 'contain' fits the whole garment inside the frame
   instead, on white, and lets the leftover width fall away at the sides.
   Nothing is ever cut off; the trade is empty space beside a tall photo. */
.pgy-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--pgy-white);
	overflow: hidden;
}

.pgy-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pgy-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.pgy-card__nophoto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #b3aa95;
}

.pgy-card__nophoto em {
	font-family: var(--pgy-serif);
	font-style: italic;
	font-size: 12.5px;
}

.pgy-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, .94);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: var(--pgy-ink);
}

.pgy-card__body {
	flex: 1;
	padding: 12px 14px 13px;
}

.pgy-card__meta {
	margin: 0 0 4px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--pgy-gold-d);
}

.pgy-card__meta a {
	color: inherit;
	text-decoration: none;
}

.pgy-card__meta a:hover {
	text-decoration: underline;
}

.pgy-card__title {
	margin: 0 0 5px;
	font-family: var(--pgy-serif);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.24;
}

.pgy-card__title a {
	color: var(--pgy-ink);
	text-decoration: none;
}

.pgy-card__title a:hover {
	color: var(--pgy-gold-d);
}

/* Two lines, not three. The PHP already caps the text at 15 words; the clamp
   fixes the block's height so every card in a row ends at the same point
   regardless of how long its description runs. */
.pgy-card__summary {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--pgy-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pgy-card__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

/* The price band. Separated by a hairline and sitting on the cream so the card
   reads as having a head, a body and a foot rather than one flat column. */
.pgy-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	border-top: 1px solid var(--pgy-line-soft);
}

.pgy-card__price {
	font-family: var(--pgy-serif);
	font-size: 19px;
	color: var(--pgy-ink);
	line-height: 1.1;
}

.pgy-card__price--none {
	font-family: inherit;
	font-size: 13px;
	color: var(--pgy-muted);
}

.pgy-card__size {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pgy-gold-d);
}

.pgy-inventory .pgy-term {
	padding: 3px 9px;
	background: var(--pgy-cream);
	border: 1px solid var(--pgy-line);
	border-radius: 999px;
	font-size: 11.5px;
	color: var(--pgy-muted);
	text-decoration: none;
}

.pgy-inventory .pgy-term:hover {
	background: var(--pgy-slate);
	border-color: var(--pgy-slate);
	color: var(--pgy-white);
}

.pgy-card__stock {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px;
	margin: 0;
	padding: 8px 14px;
	background: var(--pgy-cream);
	border-top: 1px solid var(--pgy-line-soft);
	font-size: 11.5px;
	color: var(--pgy-muted);
}

/* The inventory code, wherever it appears in a listing. Monospace so a run of
   them down a column lines up and a digit is never mistaken for a letter. */
.pgy-card__code {
	font-family: var(--pgy-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--pgy-gold-d);
}

/* A costume nobody has coded yet. Said quietly - staff work through the
   wardrobe over weeks, so a missing code is a not-yet, not a fault. */
.pgy-card__code.is-empty {
	font-family: inherit;
	font-weight: 400;
	font-style: italic;
	color: var(--pgy-muted);
	opacity: .75;
}

.pgy-card__loc::before {
	content: "\0020\00B7\0020";
	color: var(--pgy-line);
}

/* --- Pagination --------------------------------------------------------- */

.pgy-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 44px;
}

.pgy-inventory .pgy-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	background: var(--pgy-white);
	border: 1px solid var(--pgy-line);
	border-radius: 8px;
	font-size: 14px;
	color: var(--pgy-ink);
	text-decoration: none;
}

.pgy-inventory .pgy-pagination .page-numbers:hover {
	border-color: var(--pgy-gold);
}

.pgy-inventory .pgy-pagination .page-numbers.current {
	background: var(--pgy-gold);
	border-color: var(--pgy-gold);
	color: #3a2e10;
	font-weight: 600;
}

/* --- Empty state -------------------------------------------------------- */

.pgy-empty {
	padding: 72px 24px;
	margin-top: 8px;
	text-align: center;
	background: var(--pgy-white);
	border-radius: 12px;
	box-shadow: var(--pgy-card-shadow);
}

.pgy-empty h2 {
	margin: 0 0 8px;
	font-family: var(--pgy-serif);
	font-size: 24px;
	font-weight: 400;
}

.pgy-empty p {
	margin: 0 0 20px;
	color: var(--pgy-muted);
}

.pgy-empty__try {
	max-width: 460px;
	margin: 26px auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--pgy-line-soft);
}

.pgy-empty__try .pgy-card__terms {
	justify-content: center;
}

.pgy-empty__back {
	margin: 22px 0 0;
	font-size: 13.5px;
}

.pgy-empty__back a {
	color: var(--pgy-gold-d);
	font-weight: 600;
}

/* --- Costume detail ----------------------------------------------------- */

/* The item banner.
   Capped at --pgy-wide rather than --pgy-wide-hero, so the breadcrumb and title
   sit on the same left edge as the gallery and the detail card beneath them.
   The archive hero is deliberately narrower; here alignment matters more. */
.pgy-hero--item .pgy-hero__inner {
	align-items: flex-end;
	max-width: var(--pgy-wide);
	padding-top: 30px;
	padding-bottom: 30px;
}

.pgy-hero__title--item {
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.08;
}

.pgy-hero__back {
	flex: none;
	margin: 0;
}

.pgy-single {
	padding-top: 4px;
}

.pgy-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 34px 46px;
	align-items: start;
	margin-top: 18px;
}

/* Photos and description stack in the left column; the detail card spans both
   rows in the right. That span is what lets it stay with the reader all the
   way down - a sticky element can only travel inside its own grid area, which
   is why it used to stop dead where the photos ended and leave a gap. */
.pgy-single__media {
	grid-column: 1;
	grid-row: 1;
}

.pgy-single__body {
	grid-column: 1;
	grid-row: 2;
}

.pgy-single__detail {
	grid-column: 2;
	grid-row: 1 / span 4;
}

/* Thumbnail rail on the left, main photo taking the rest of the column.
   The rail is only printed when there is more than one photo, so a single-image
   costume gets the full column width with no empty gutter.
   Both .pgy-gallery__thumbs and .pgy-gallery__main are Swiper instances
   (assets/js/pgy-gallery.js), linked via Swiper's Thumbs module. Swiper owns
   the actual slide/scroll mechanics here - a hand-rolled overflow-x:auto strip
   ran into an unresolved real-device page-scroll bug, which is the whole
   reason this uses a real, battle-tested slider library instead. */
.pgy-gallery {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

.pgy-gallery__thumbs.swiper {
	flex: none;
	width: 64px;
	height: 500px;
}

/* No flex-direction rule on .swiper-wrapper here on purpose. Swiper's own
   stylesheet already sets it per orientation
   (.swiper-vertical > .swiper-wrapper { flex-direction: column }), and it
   follows the swiper-vertical/swiper-horizontal class the JS puts on the
   container. An unconditional column rule here overrode that and stacked
   every thumb on top of each other in horizontal (mobile) mode. */

/* Horizontal (mobile) only: a flex row stretches its children to the row's
   height by default, which squashed each thumb to the strip's height and
   defeated the 3:4 aspect-ratio below. flex-start lets each thumb keep its
   own aspect-derived height. Vertical mode needs no equivalent - the
   cross axis there is the width, which is already a fixed 64px. */
.pgy-gallery__thumbs.swiper-horizontal > .swiper-wrapper {
	align-items: flex-start;
}

/* Fixed 3:4 frame with object-fit: contain.
   Costume photographs arrive at whatever proportions the camera gave them, so
   a height:auto frame made the whole page jump on every slide change.
   'contain' rather than 'cover' because cropping a costume is destructive - a
   headdress or a hem is exactly the detail someone is checking. */
.pgy-gallery__main.swiper {
	flex: 1;
	min-width: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--pgy-white);
	border-radius: 12px;
	box-shadow: var(--pgy-card-shadow);
}

.pgy-gallery__main .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pgy-inventory .pgy-gallery__thumb {
	width: 64px;
	/* Swiper's own base CSS sets .swiper-slide { height: 100% }. Since the
	   thumbs container has a definite height (500px on desktop), that 100%
	   resolves to a definite value, and a definite height always wins over
	   aspect-ratio - so aspect-ratio alone never took effect until height
	   was explicitly overridden back to auto here. */
	height: auto;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--pgy-white);
	border: 2px solid var(--pgy-line);
	border-radius: 8px;
	cursor: pointer;
	line-height: 0;
}

/* Swiper's Thumbs module adds this class to whichever thumb matches the main
   swiper's current slide - it replaces the old hand-toggled .is-active. */
.pgy-inventory .swiper-slide-thumb-active.pgy-gallery__thumb {
	border-color: var(--pgy-gold);
}

/* Thumbs crop rather than letterbox - they are selectors, not the thing being
   examined, and equal-height tiles read as a set. */
.pgy-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pgy-gallery__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	background: #efeade;
	border-radius: 12px;
	font-family: var(--pgy-serif);
	font-style: italic;
	color: #b3aa95;
}

/* The detail rail. Sticky so the price and the request button stay on screen
   while the photos and the description scroll past - on a rental catalogue that
   is the whole path, and it is a long page.
   Sticky works here because .pgy-single__layout uses align-items: start; a
   stretched grid item would fill the row and have nothing to stick within. */
.pgy-single__detail {
	position: sticky;
	top: calc(var(--pgy-sticky-top) + 20px);
	padding: 22px 24px 24px;
	background: var(--pgy-white);
	border-radius: 12px;
	box-shadow: var(--pgy-card-shadow);
}

.pgy-single__status {
	display: inline-block;
	padding: 4px 12px;
	margin: 0 0 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
}

.pgy-single__status--yes {
	background: rgba(63, 122, 70, .12);
	color: #2f5c35;
}

.pgy-single__status--no {
	background: var(--pgy-cream);
	color: var(--pgy-muted);
}

/* The dates a visitor can actually book, on the detail card.

   Replaces "some dates are already booked", which named the problem and
   left them to go and find the answer in the calendar. Green, because it is
   the good news on a card whose other job is saying what a costume costs. */
/* No negative top margin any more: the status pill above it is only printed
   when the answer is "no", so on this path there is nothing to tuck under. */
.pgy-single__free {
	margin: 0 0 20px;
	padding: 12px 14px;
	background: #eaf4ea;
	border-left: 3px solid #7fae83;
	border-radius: 6px;
}

.pgy-single__free-lead {
	margin: 0 0 5px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #1f5c24;
}

.pgy-single__free-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pgy-single__free-list li {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--pgy-ink);
	font-variant-numeric: tabular-nums;
}

/* Second and later windows read as "and then", so they sit back a little. */
.pgy-single__free-list li + li {
	font-size: 13.5px;
	color: var(--pgy-muted);
}

.pgy-single__free-note {
	margin: 7px 0 0;
	font-size: 12px;
	color: var(--pgy-muted);
}

.pgy-single__price {
	margin: 0 0 22px;
	font-family: var(--pgy-serif);
	font-size: 28px;
	color: var(--pgy-ink);
}

.pgy-specs {
	margin: 0 0 26px;
	border-top: 1px solid var(--pgy-line);
}

.pgy-specs__row {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--pgy-line);
}

.pgy-specs dt {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pgy-gold-d);
}

.pgy-specs dd {
	margin: 0;
	font-size: 15px;
	color: var(--pgy-ink);
}

.pgy-specs dd a {
	color: var(--pgy-ink);
	text-decoration: underline;
	text-decoration-color: var(--pgy-line);
	text-underline-offset: 3px;
}

.pgy-specs dd a:hover {
	color: var(--pgy-gold-d);
	text-decoration-color: currentColor;
}

.pgy-single__cta {
	margin: 0 0 14px;
}

.pgy-single__edit {
	margin: 0;
	font-size: 13px;
}

.pgy-single__edit a {
	color: var(--pgy-muted);
}

/* Same column split as the layout above, so the suggestions panel lines up
   under the detail panel instead of leaving that half of the page empty. */
/* The description runs the full content width now that nothing sits beside
   it, so the measure is capped here instead - 1220px of unbroken prose is
   about 150 characters a line, well past readable. */
.pgy-single__body {
	max-width: 72ch;
}

.pgy-prose + .pgy-prose {
	margin-top: 32px;
}

.pgy-prose p {
	color: #4d565f;
	line-height: 1.7;
}

.pgy-prose > *:last-child {
	margin-bottom: 0;
}

/* --- Related costumes --------------------------------------------------- */

/* Fourth row of .pgy-single__layout, in the LEFT column. It used to sit in a
   separate grid below, because a sticky grid item is clamped to the grid
   CONTAINER rather than to its own spanned rows and the detail card travelled
   down over it. Moving the panel to column 1 removed that collision, so it can
   rejoin the grid - and that fourth row is exactly what lets the card stay with
   the reader to the foot of the page instead of stopping above this panel. */
.pgy-related {
	grid-column: 1;
	grid-row: 4;
	padding: 16px 18px 12px;
	background: var(--pgy-white);
	border-radius: 12px;
	box-shadow: var(--pgy-card-shadow);
}

/* Cards, not a list. A 46px thumbnail crops every costume differently and the
   row reads as a link rather than a garment - the point of a suggestion panel
   is that you can see what is being suggested. */
/* Three across, not two. At two the cards ran ~290px wide and dominated the
   column - these are suggestions sitting beside the description, not the main
   grid. Three brings them to roughly 150px, which is enough to recognise a
   costume and no more. */
/* A Swiper rather than a wrapped grid - the panel sits beside the description
   in a fixed slot, and a grid grew a new row every three costumes. Slide
   widths come from slidesPerView in assets/js/pgy-gallery.js. */
.pgy-related__grid.swiper {
	width: 100%;
}

/* The card size, set here rather than as a slide count - the panel is full
   width now, and a count sized against 1220px produced 320px cards. */
.pgy-related__grid .swiper-slide {
	width: 120px;
}

.pgy-inventory .pgy-related__card {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	background: var(--pgy-cream);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

.pgy-inventory .pgy-related__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(42, 50, 58, .12);
}

/* 4:5, matching the pgy-card image size exactly (600x750, hard cropped), so
   object-fit: cover shows the whole costume with nothing cut off and no
   letterbox bars either. Do not "shorten" this panel by squaring the frame -
   that crops a 4:5 photo top and bottom and takes the model's head and the
   garment's hem with it. The panel's height is set by how many slides are in
   view instead (slidesPerView in assets/js/pgy-gallery.js). */
.pgy-related__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #efeade;
}

.pgy-related__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pgy-related__body {
	display: block;
	padding: 7px 8px 9px;
}

.pgy-related__name {
	display: block;
	font-family: var(--pgy-serif);
	font-size: 12.5px;
	line-height: 1.22;
	color: var(--pgy-ink);
}

.pgy-inventory .pgy-related__card:hover .pgy-related__name {
	color: var(--pgy-gold-d);
}

.pgy-related__price {
	display: block;
	margin-top: 3px;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pgy-gold-d);
}

.pgy-related__all {
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--pgy-line-soft);
	font-size: 12.5px;
}

.pgy-related__all a {
	color: var(--pgy-gold-d);
	text-decoration: none;
	font-weight: 600;
}

.pgy-related__all a:hover {
	text-decoration: underline;
}

/* --- Rental request form ------------------------------------------------ */

.pgy-request {
	/* Third row of the left column, so the sticky detail card beside it keeps
	   travelling right down to the form instead of stopping at the text. */
	grid-column: 1;
	grid-row: 3;
	max-width: 720px;
	padding: 32px;
	background: var(--pgy-white);
	border-radius: 12px;
	box-shadow: var(--pgy-card-shadow);
	scroll-margin-top: 90px;
}

.pgy-request__title {
	margin: 0 0 6px;
	font-family: var(--pgy-serif);
	font-size: 25px;
	font-weight: 400;
}

.pgy-request__intro {
	margin: 0 0 24px;
	font-size: 14px;
	color: var(--pgy-muted);
}

.pgy-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 22px;
}

.pgy-field {
	margin: 0;
}

.pgy-field--wide {
	grid-column: 1 / -1;
}

.pgy-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pgy-ink);
}

.pgy-req {
	color: #a3121f;
}

.pgy-inventory .pgy-field input,
.pgy-inventory .pgy-field textarea {
	width: 100%;
	padding: 10px 12px;
	background: var(--pgy-white);
	border: 1px solid var(--pgy-line);
	border-radius: 8px;
	font-size: 15px;
	color: var(--pgy-ink);
}

.pgy-inventory .pgy-field input:focus,
.pgy-inventory .pgy-field textarea:focus {
	border-color: var(--pgy-gold);
	outline: 2px solid rgba(217, 164, 65, .22);
	outline-offset: 0;
}

/* Quantity is a number input for the mobile keypad and for the min/max the
   availability check sets, but the spinner arrows are noise on a field whose
   answer is nearly always 1. The value is still typed, and both the browser's
   own min/max and the server-side check in inc/rental.php still apply. */
.pgy-inventory .pgy-field input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.pgy-inventory .pgy-field input[type="number"]::-webkit-outer-spin-button,
.pgy-inventory .pgy-field input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pgy-field__hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--pgy-muted);
}

.pgy-field__error {
	display: block;
	min-height: 16px;
	margin-top: 4px;
	font-size: 12px;
	color: #a3121f;
}

/* Live availability under the date field. Green when there is room, red when
   the day is gone - it is the answer to "can I actually have this", so it
   carries the same weight as an error rather than sitting in muted grey. */
.pgy-field__avail {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
}

.pgy-field__avail.is-free {
	color: #2f5c35;
}

.pgy-field__avail.is-none {
	color: #a3121f;
}

/* Alternatives offered when the chosen date cannot serve the request. Only
   rendered at that moment, so it costs nothing the rest of the time. */
.pgy-field__suggest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 12px;
	color: var(--pgy-muted);
}

.pgy-field__suggest:empty {
	margin-top: 0;
}

.pgy-suggest__label {
	font-weight: 600;
	color: var(--pgy-ink);
}

.pgy-inventory .pgy-suggest__date {
	padding: 4px 10px;
	background: var(--pgy-white);
	border: 1px solid var(--pgy-line);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pgy-ink);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.pgy-inventory .pgy-suggest__date:hover,
.pgy-inventory .pgy-suggest__date:focus {
	background: var(--pgy-cream-hi);
	border-color: var(--pgy-gold);
}

.pgy-suggest__other {
	color: var(--pgy-gold-d);
	text-decoration: underline;
}

.pgy-inventory .pgy-field input.is-invalid,
.pgy-inventory .pgy-field textarea.is-invalid {
	border-color: #a3121f;
	outline: 2px solid rgba(163, 18, 31, .16);
	outline-offset: 0;
}

/* The honeypot has to be reachable by a bot parsing the HTML but invisible and
   unfocusable for everyone else, so it is moved off-screen rather than
   display:none - which some bots check for. */
.pgy-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pgy-notice {
	max-width: 720px;
	padding: 14px 16px;
	margin: 18px 0 0;
	border: 1px solid;
	border-radius: var(--pgy-radius);
	font-size: 14.5px;
}

.pgy-notice--ok {
	background: rgba(63, 122, 70, .08);
	border-color: rgba(63, 122, 70, .32);
	color: #2f5c35;
}

.pgy-notice--bad {
	background: rgba(163, 18, 31, .06);
	border-color: rgba(163, 18, 31, .3);
	color: #a3121f;
}

/* pgy-rental-form.js clones the notice above into this overlay on load and
   hides the inline original, so the same server-rendered markup is the
   content in both the JS-on and no-JS states. */
.pgy-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(42, 50, 58, .55);
}

.pgy-modal {
	max-width: 420px;
	width: 100%;
	padding: 28px 24px 24px;
	background: var(--pgy-white);
	border-radius: var(--pgy-radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	text-align: center;
}

.pgy-modal--ok strong {
	color: #2f5c35;
}

.pgy-modal--bad strong {
	color: #a3121f;
}

.pgy-modal__content {
	margin-bottom: 18px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pgy-ink);
}

.pgy-modal__close {
	padding: 10px 24px;
	background: var(--pgy-gold);
	border: none;
	border-radius: 8px;
	font-weight: 600;
	color: #3a2e10;
	cursor: pointer;
}

.pgy-modal__close:hover,
.pgy-modal__close:focus {
	background: var(--pgy-gold-d);
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1000px) {

	/* Title and the back button stop sharing a row once it gets tight - a long
	   costume name would otherwise squeeze the button to two lines. */
	.pgy-hero--item .pgy-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.pgy-single__body {
		max-width: none;
	}

	.pgy-single__layout {
		/* minmax(0, 1fr) rather than a bare 1fr - a bare track's automatic
		   minimum size is based on its content's min-content width, which was
		   forcing this column (and the page) wider than the viewport on a
		   costume with several photos. */
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.pgy-single__media,
	.pgy-single__body,
	.pgy-request,
	.pgy-related,
	.pgy-single__detail {
		grid-column: 1;
		grid-row: auto;
	}

	/* One column, so there is nothing left to stick to. */
	.pgy-single__detail {
		position: static;
	}

	.pgy-related {
		position: static;
	}

	/* The gallery would otherwise fill a tablet's full width at 3:4, which is
	   more than a screen tall. min-width: 0 is the other half of the fix
	   above - without it this grid item still refuses to shrink below its
	   content's natural width. */
	.pgy-single__media {
		max-width: 480px;
		min-width: 0;
	}

	/* The rail costs width that a narrow screen cannot spare, so the thumbs go
	   back under the photo as a horizontal Swiper instead of a vertical one -
	   the direction switch itself is a Swiper breakpoint in
	   assets/js/pgy-gallery.js; this is just the container's own size. */
	.pgy-gallery {
		flex-direction: column;
	}

	.pgy-gallery__thumbs.swiper {
		order: 2;
		width: 100%;
		/* auto, not a fixed height - the strip should be exactly as tall as one
		   thumb at its 3:4 aspect (~89px incl. borders). A fixed height that
		   disagrees with the aspect either clips the thumbs or leaves a gap. */
		height: auto;
	}

	.pgy-gallery__main.swiper {
		order: 1;
		width: 100%;
	}

	.pgy-collage {
		flex: 0 0 260px;
		height: 232px;
	}

	.pgy-collage__item--1 { width: 120px; }
	.pgy-collage__item--2 { width: 126px; }
	.pgy-collage__item--3 { width: 114px; left: 70px; }
}

@media (max-width: 820px) {

	.pgy-inventory {
		--pgy-gutter: 20px;
	}

	.pgy-hero__inner {
		padding: 30px 20px 34px;
	}

	/* The collage is decoration, and on a phone it costs a screenful of scroll
	   before anyone reaches a costume. */
	.pgy-collage {
		display: none;
	}

	.pgy-app {
		padding-bottom: 48px;
	}

	/* Two across on a tablet - three would put the cards below the width where
	   a costume photo is still readable. */
	.pgy-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 18px;
	}

	.pgy-request {
		padding: 22px 18px;
	}

	.pgy-specs__row {
		grid-template-columns: 1fr;
		gap: 3px;
	}

	.pgy-drawer {
		position: static;
	}

	.pgy-drawer__panel {
		left: 20px;
		right: 20px;
		width: auto;
	}

}

@media (max-width: 600px) {

	/* Two is kept on a phone rather than dropping to one - a single 3:4 card at
	   full width is most of a screen per costume, which makes browsing a chore. */
	.pgy-grid {
		gap: 16px 12px;
	}

	.pgy-hero__lede {
		font-size: 15px;
	}

	.pgy-bar__field--search {
		flex: 1 1 100%;
	}

	.pgy-bar__field--search input {
		width: 100%;
		min-width: 0;
	}

	.pgy-swatch__name {
		display: none;
	}

	.pgy-swatch label {
		padding: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pgy-inventory * {
		transition: none !important;
	}
}


/* --- Inventory home ----------------------------------------------------- */

/* Search-first. The hero is a centred column, not a two-column split - there is
   no collage on this page, and centring the search makes it the obvious first
   move rather than one element among several. */
.pgy-hero--home .pgy-hero__inner {
	display: block;
	max-width: 720px;
	padding: 46px var(--pgy-gutter) 40px;
	text-align: center;
}

.pgy-hero--home .pgy-hero__title {
	font-size: clamp(32px, 4.6vw, 50px);
}

/* Inline on this page: "The Costume Wardrobe" reads as one line centred, where
   the archive stacks it over two. */
.pgy-hero--home .pgy-hero__title em {
	display: inline;
}

.pgy-hero--home .pgy-hero__lede {
	max-width: 420px;
	margin: 14px auto 22px;
}

.pgy-searchform--hero {
	max-width: 480px;
	margin: 0 auto;
}

.pgy-inventory .pgy-searchform--hero .pgy-searchform__input {
	padding: 13px 16px;
	font-size: 15.5px;
}

.pgy-hero__hint {
	margin: 10px 0 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #8a7b5e;
}

/* Swatches as links rather than checkboxes - there is no facet form on this
   page, so each one is simply a pre-filtered archive URL. */
.pgy-colorlinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.pgy-colorlinks li {
	margin: 0;
}

.pgy-colorlinks a {
	display: block;
	padding: 2px;
	border-radius: 50%;
	line-height: 0;
}

.pgy-colorlinks__dot {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--pgy-swatch, #c9ccc6);
	box-shadow: inset 0 0 0 1px rgba(42, 50, 58, .18);
	transition: transform .15s ease;
}

.pgy-colorlinks a:hover .pgy-colorlinks__dot {
	transform: scale(1.16);
}

.pgy-colorlinks a:focus-visible {
	outline: 2px solid var(--pgy-gold);
	outline-offset: 1px;
}

.pgy-home {
	padding-top: 0;
}

.pgy-section {
	margin-top: 44px;
}

.pgy-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 16px;
}

.pgy-section__head .pgy-eyebrow {
	margin: 0;
}

.pgy-section__all {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pgy-gold-d);
	text-decoration: none;
}

.pgy-section__all:hover {
	text-decoration: underline;
}

/* --- Program labels ----------------------------------------------------- */

/* Labels, not tiles. Sized to their own content and wrapped in a row, so three
   programs read as a compact index rather than three large photo panels. */
.pgy-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.pgy-inventory .pgy-tile {
	display: block;
	padding: 13px 20px 14px;
	background: var(--pgy-white);
	border: 1px solid var(--pgy-line);
	border-radius: 10px;
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.pgy-inventory .pgy-tile:hover {
	border-color: var(--pgy-gold);
	transform: translateY(-2px);
	box-shadow: var(--pgy-card-shadow);
}

.pgy-tile__name {
	display: block;
	font-family: var(--pgy-serif);
	font-size: 19px;
	line-height: 1.2;
	color: var(--pgy-ink);
}

.pgy-tile__meta {
	display: block;
	margin-top: 3px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--pgy-gold-d);
}

@media (max-width: 820px) {

	.pgy-hero--home .pgy-hero__inner {
		padding: 32px 20px 30px;
	}

	.pgy-tiles {
		gap: 10px;
	}

	.pgy-tile__name {
		font-size: 17px;
	}

	.pgy-section {
		margin-top: 34px;
	}
}

@media (max-width: 520px) {

	.pgy-searchform--hero {
		flex-direction: column;
	}
}

@media (max-width: 500px) {

	/* One column rather than the two kept at tablet/large-phone width - below
	   500px two columns leaves each card under 140px wide, which is too
	   narrow for the photo plus title plus price to stay legible. */
	.pgy-grid {
		grid-template-columns: 1fr;
	}

	/* Full-width stacked cards read better than side-by-side chips once the
	   screen gets this narrow - bigger tap targets, and it matches the card
	   language the rest of the page already uses (costume cards below,
	   the colour swatches row above). Chips stay compact above this width,
	   where there is enough room for them to sit side by side. */
	.pgy-tiles {
		flex-direction: column;
	}

	.pgy-inventory .pgy-tile {
		width: 100%;
		padding: 20px 24px;
		text-align: center;
	}

	.pgy-tile__name {
		font-size: 19px;
	}

	.pgy-tile__meta {
		margin-top: 6px;
		font-size: 11px;
	}
}

/* --- Rental date calendar ------------------------------------------------ */

/* One calendar for both dates, replacing the pair of native date inputs.
   assets/js/pgy-datepicker.js builds everything below .pgy-dates__ui and hides
   .pgy-dates__native; with the script absent the two plain date fields show
   instead, which is why the fallback is markup rather than something JS
   renders. */

.pgy-inventory .pgy-dates__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pgy-ink);
}

/* [hidden] sets display:none at the lowest possible weight, so ANY display
   declaration on the element beats it. Without this the fallback pair stayed on
   screen and the old "Event date / Return date" labels sat above the calendar
   with nothing under them. */
.pgy-inventory .pgy-dates__native[hidden] {
	display: none;
}

.pgy-inventory .pgy-dates__native {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px 18px;
}

.pgy-inventory .pgy-cal__modes {
	display: inline-flex;
	margin-bottom: 10px;
	padding: 3px;
	background: var(--pgy-cream);
	border: 1px solid var(--pgy-line);
	border-radius: 999px;
}

.pgy-inventory .pgy-cal__mode {
	padding: 6px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--pgy-muted);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.pgy-inventory .pgy-cal__mode.is-on {
	background: var(--pgy-white);
	color: var(--pgy-ink);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.pgy-inventory .pgy-cal__trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	background: var(--pgy-white);
	border: 1px solid var(--pgy-line);
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
	line-height: 22px;
	color: var(--pgy-muted);
	text-align: left;
	cursor: pointer;
}

/* A calendar glyph drawn in CSS rather than shipped as an icon font or an SVG
   sprite for one symbol. */
.pgy-inventory .pgy-cal__trigger::before {
	content: "";
	flex: none;
	width: 15px;
	height: 14px;
	border: 1.5px solid currentColor;
	border-radius: 2px;
	border-top-width: 4px;
	opacity: .65;
}

.pgy-inventory .pgy-cal__trigger:hover,
.pgy-inventory .pgy-cal__trigger:focus-visible {
	border-color: var(--pgy-gold);
}

.pgy-inventory .pgy-cal__trigger.has-value {
	color: var(--pgy-ink);
	font-weight: 600;
}

.pgy-inventory .pgy-dates.is-invalid .pgy-cal__trigger {
	border-color: #a3121f;
}

.pgy-inventory .pgy-cal {
	margin-top: 10px;
	padding: 14px;
	background: var(--pgy-white);
	border: 1px solid var(--pgy-line);
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.pgy-inventory .pgy-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.pgy-inventory .pgy-cal__title {
	font-weight: 600;
	font-size: 15px;
	color: var(--pgy-ink);
}

/* Two things were wrong here. GeneratePress styles every <button> with
   padding: 10px 20px, and the old rule set a width but no padding - so the
   padding won, the button came out 42x32 instead of 32x32 and pushed the
   arrow 21px off its left edge. And the arrow itself was a typed glyph, which
   measured 6px wide and sat low on its baseline: small, faint and off-centre.
   Now the box is explicit and the arrow is drawn, so neither the theme nor the
   font can move it. */
.pgy-inventory .pgy-cal__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--pgy-line);
	border-radius: 6px;
	background: var(--pgy-white);
	/* Hides the single-angle arrows in the markup - it stays there so the button is never
	   empty if this rule fails to load, and the aria-label carries the meaning
	   for screen readers either way. */
	font-size: 0;
	color: var(--pgy-ink);
	cursor: pointer;
}

/* The arrow: two borders on a rotated square. Same weight as the rest of the
   UI at any font, and always dead centre. */
.pgy-inventory .pgy-cal__nav::before {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

/* Prev is the first child of the header, next is the last - the header is
   built as prev, title, next in assets/js/pgy-datepicker.js. The 2px nudge is
   optical: a rotated square's visual weight sits off its geometric centre. */
.pgy-inventory .pgy-cal__head .pgy-cal__nav:first-child::before {
	transform: rotate(-135deg);
	margin-left: 2px;
}

.pgy-inventory .pgy-cal__head .pgy-cal__nav:last-child::before {
	transform: rotate(45deg);
	margin-right: 2px;
}

.pgy-inventory .pgy-cal__nav:hover:not(:disabled) {
	border-color: var(--pgy-gold);
}

.pgy-inventory .pgy-cal__nav:disabled {
	opacity: .3;
	cursor: default;
}

.pgy-inventory .pgy-cal__row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.pgy-inventory .pgy-cal__wd {
	padding: 4px 0;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	color: var(--pgy-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.pgy-inventory .pgy-cal__cell {
	position: relative;
}

.pgy-inventory .pgy-cal__day {
	display: block;
	width: 100%;
	/* Deliberately generous: this is the one control on the form people use on
	   a phone, and a 44px target is the difference between picking a date and
	   picking the day next to it. */
	min-height: 40px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--pgy-cream);
	font: inherit;
	font-size: 14px;
	color: var(--pgy-ink);
	cursor: pointer;
}

.pgy-inventory .pgy-cal__cell.is-outside .pgy-cal__day {
	opacity: .38;
}

.pgy-inventory .pgy-cal__day.is-free {
	background: #eaf4ea;
	color: #1f5c24;
}

.pgy-inventory .pgy-cal__day.is-low {
	background: #fdf1dc;
	color: #8a5a12;
}

.pgy-inventory .pgy-cal__day.is-full {
	background: #f9e7e7;
	color: #a3121f;
}

.pgy-inventory .pgy-cal__day.is-today {
	box-shadow: inset 0 0 0 1.5px var(--pgy-gold-d);
}

.pgy-inventory .pgy-cal__day:disabled {
	cursor: not-allowed;
	opacity: .45;
	text-decoration: line-through;
}

.pgy-inventory .pgy-cal__day:not(:disabled):hover {
	border-color: var(--pgy-gold);
}

.pgy-inventory .pgy-cal__day:focus-visible {
	outline: 2px solid var(--pgy-gold-d);
	outline-offset: 1px;
}

/* Range selection. The middle of a range is tinted; the two ends are solid, so
   a multi-day booking reads as one block rather than a row of separate picks. */
.pgy-inventory .pgy-cal__cell.is-selected .pgy-cal__day {
	background: var(--pgy-cream-lo);
	color: var(--pgy-ink);
	border-color: transparent;
}

.pgy-inventory .pgy-cal__cell.is-start .pgy-cal__day,
.pgy-inventory .pgy-cal__cell.is-end .pgy-cal__day {
	background: var(--pgy-gold);
	color: #3a2e10;
	font-weight: 700;
}

.pgy-inventory .pgy-cal__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 12px;
	font-size: 11.5px;
	color: var(--pgy-muted);
}

.pgy-inventory .pgy-cal__key {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.pgy-inventory .pgy-cal__swatch {
	width: 11px;
	height: 11px;
	border-radius: 3px;
}

.pgy-inventory .pgy-cal__swatch.is-free { background: #eaf4ea; border: 1px solid #7fae83; }
.pgy-inventory .pgy-cal__swatch.is-low  { background: #fdf1dc; border: 1px solid #d5a24a; }
.pgy-inventory .pgy-cal__swatch.is-full { background: #f9e7e7; border: 1px solid #d08b8b; }

.pgy-inventory .pgy-cal__hint {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--pgy-muted);
}

.pgy-inventory .pgy-cal__foot {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--pgy-line-soft);
}

.pgy-inventory .pgy-cal__clear,
.pgy-inventory .pgy-cal__done {
	padding: 7px 16px;
	border-radius: 6px;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.pgy-inventory .pgy-cal__clear {
	border: 1px solid var(--pgy-line);
	background: var(--pgy-white);
	color: var(--pgy-muted);
}

.pgy-inventory .pgy-cal__done {
	border: 0;
	background: var(--pgy-gold);
	color: #3a2e10;
	font-weight: 600;
}

@media (max-width: 560px) {

	.pgy-inventory .pgy-cal {
		padding: 10px;
	}

	.pgy-inventory .pgy-cal__day {
		min-height: 44px;
		font-size: 15px;
	}

	.pgy-inventory .pgy-cal__modes {
		width: 100%;
	}

	.pgy-inventory .pgy-cal__mode {
		flex: 1;
		text-align: center;
	}
}

/* Helper and error slots reserve their line so a message appearing does not
   shove the form down. Empty is the common case though, and an empty block
   still takes its min-height and still shows a text cursor over dead space -
   which read as a stray caret and a gap under every field. */
.pgy-inventory .pgy-field__error:empty,
.pgy-inventory .pgy-field__avail:empty,
.pgy-inventory .pgy-field__suggest:empty,
.pgy-inventory .pgy-field__hint:empty {
	display: none;
}


/* An internal field a staff member has not filled in yet. Shown rather than
   hidden, so the row reads as "still to do" instead of simply being absent -
   staff-only rows only, never anything a visitor sees. */
.pgy-inventory .pgy-unset {
	color: var(--pgy-muted);
	font-style: italic;
	opacity: .75;
}

/* Divides the two halves of the staff-only "Code & location" row. Muted,
   because it separates rather than says anything. */
.pgy-inventory .pgy-rowsep {
	color: var(--pgy-line);
}

/* ==========================================================================
   Closed days on the calendar
   ==========================================================================
   Deliberately not the pink of a fully-booked day. "Booked" and "we are shut"
   are different answers, and a visitor who reads them as the same thing will
   keep trying other dates in the same week looking for one that is free.
   Hatched rather than tinted, so it reads as "not a day" instead of "a day in
   a different state". */

.pgy-inventory .pgy-cal__cell.is-closed .pgy-cal__day {
	background: repeating-linear-gradient(
		135deg,
		#f1efe9,
		#f1efe9 3px,
		#e3e0d7 3px,
		#e3e0d7 6px
	);
	color: #7b8189;
	text-decoration: none;
	opacity: 1;
}

.pgy-inventory .pgy-cal__swatch.is-closed {
	background: repeating-linear-gradient(
		135deg,
		#f1efe9,
		#f1efe9 2px,
		#e3e0d7 2px,
		#e3e0d7 4px
	);
	border: 1px solid #c9c5b8;
}


/* ==========================================================================
   Cancel-my-request screen
   ==========================================================================
   Reached from a link in an email, by somebody who is usually in a hurry and
   often on a phone. One card, one decision, nothing else on the page competing
   for the tap. */

.pgy-inventory .pgy-cancel {
	max-width: 620px;
	margin: 0 auto;
	padding: 56px 20px 80px;
}

.pgy-inventory .pgy-cancel__card {
	padding: 34px 32px 36px;
	background: var(--pgy-white);
	border: 1px solid var(--pgy-line);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(42, 50, 58, .06);
}

.pgy-inventory .pgy-cancel__title {
	margin: 0 0 12px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--pgy-ink);
}

.pgy-inventory .pgy-cancel__lead {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.65;
	color: #4d565f;
}

.pgy-inventory .pgy-cancel__meta {
	margin: 0 0 22px;
	padding: 14px 18px;
	background: var(--pgy-cream);
	border-left: 4px solid var(--pgy-gold);
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pgy-ink);
}

.pgy-inventory .pgy-cancel__label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: #4d565f;
}

.pgy-inventory .pgy-cancel__textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pgy-line);
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	resize: vertical;
}

.pgy-inventory .pgy-cancel__textarea:focus {
	outline: 2px solid var(--pgy-gold-d);
	outline-offset: 1px;
	border-color: var(--pgy-gold);
}

.pgy-inventory .pgy-cancel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 20px;
}

/* The way out is a plain link, not a second button. Two buttons side by side
   is where somebody taps the wrong one. */
.pgy-inventory .pgy-cancel__keep {
	font-size: 14px;
	font-weight: 600;
	color: #4d565f;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pgy-inventory .pgy-cancel__keep:hover,
.pgy-inventory .pgy-cancel__keep:focus {
	color: var(--pgy-ink);
}

/* Outlined rather than filled red. This is a legitimate thing to do, not a
   warning - a solid red block reads as "danger, stop", which is the wrong note
   for somebody who simply cannot make the date any more. */
.pgy-inventory .pgy-btn--danger {
	background: var(--pgy-white);
	border-color: #c0392b;
	color: #a3121f;
}

.pgy-inventory .pgy-btn--danger:hover,
.pgy-inventory .pgy-btn--danger:focus {
	background: #c0392b;
	border-color: #c0392b;
	color: #fff;
}


/* ==========================================================================
   Out of service
   ========================================================================== */

.pgy-inventory .pgy-repair {
	margin: 0 0 20px;
	padding: 14px 18px;
	background: #fdeceb;
	border-left: 4px solid #c0392b;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.55;
	color: #7a1f16;
}

.pgy-inventory .pgy-repair strong {
	display: block;
	margin-bottom: 2px;
	font-size: 15px;
}

/* ==========================================================================
   Waiting to be checked
   ==========================================================================
   Only when something is actually waiting - a short-lived pile rather than a
   standing view. Cream and gold
   rather than red - a costume waiting to be hung up is a normal Tuesday, not
   an alarm. */

.pgy-inventory .pgy-checkin {
	margin: 0 0 28px;
	padding: 20px 24px 22px;
	background: var(--pgy-cream-hi);
	border: 1px solid #e8dcbc;
	border-left: 4px solid var(--pgy-gold);
	border-radius: 10px;
}

.pgy-inventory .pgy-checkin__title {
	margin: 0 0 4px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--pgy-ink);
}

.pgy-inventory .pgy-checkin__lead {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
	color: #6b6250;
}

.pgy-inventory .pgy-checkin__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.pgy-inventory .pgy-checkin__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--pgy-white);
	border: 1px solid #ece3cd;
	border-radius: 8px;
}

.pgy-inventory .pgy-checkin__text {
	flex: 1 1 220px;
	min-width: 0;
}

.pgy-inventory .pgy-checkin__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pgy-ink);
	text-decoration: none;
}

.pgy-inventory .pgy-checkin__name:hover,
.pgy-inventory .pgy-checkin__name:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pgy-inventory .pgy-checkin__meta {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.4;
	color: #7c7566;
}

.pgy-inventory .pgy-checkin__flag {
	flex: 0 0 auto;
	padding: 3px 9px;
	background: #fdeceb;
	border: 1px solid #e6b3ad;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #a3121f;
}

.pgy-inventory .pgy-checkin__btn {
	flex: 0 0 auto;
	padding: 8px 16px;
	background: var(--pgy-gold);
	border: 1px solid var(--pgy-gold-d);
	border-radius: 7px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: #3a2e10;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.pgy-inventory .pgy-checkin__btn:hover,
.pgy-inventory .pgy-checkin__btn:focus {
	background: var(--pgy-gold-d);
	color: #fff;
}

.pgy-inventory .pgy-checkin__btn:disabled {
	opacity: .55;
	cursor: default;
}

/* ==========================================================================
   "Pick another costume" on the success notice
   ==========================================================================
   Set apart from the thank-you rather than run into it. Somebody booking a
   whole show reads the first line and stops; this has to still be there when
   they look back at the box wondering how to add the next one. */

.pgy-inventory .pgy-notice__more,
.pgy-inventory .pgy-modal .pgy-notice__more {
	display: block;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(42, 50, 58, .12);
	font-size: 14px;
	line-height: 1.55;
}

.pgy-inventory .pgy-notice__link {
	font-weight: 600;
	color: var(--pgy-gold-d);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.pgy-inventory .pgy-notice__link:hover,
.pgy-inventory .pgy-notice__link:focus {
	color: var(--pgy-ink);
}