/* Act One Rental System — storefront styles. v0.4.0
   Matches the CodeCanvas header/home design language:
   Archivo display, Inter body, IBM Plex Mono for data,
   green #28DB92 / pink #ED1E79 / violet #8237DF / blue #2497C8. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

.ao {
	--g: #28DB92;
	--p: #ED1E79;
	--v: #8237DF;
	--b: #2497C8;
	--ink: #101012;
	--ink-2: #33343a;
	--mut: #6E6E76;
	--line: #E7E7E4;
	--bg: #FFFFFF;
	--bg-2: #F6F6F4;
	--rad: 10px;
	--rad-lg: 16px;
	--shadow: 0 14px 40px rgba(16, 16, 18, .10);
	--font-d: 'Archivo', sans-serif;
	--font-b: 'Inter', sans-serif;
	--font-m: 'IBM Plex Mono', monospace;
	font-family: var(--font-b);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

/* -------- theme armour: WordPress themes bleed colours into a/button ----- */
.ao a { color: inherit !important; text-decoration: none !important; box-shadow: none !important; }
.ao a:hover, .ao a:focus { color: inherit !important; text-decoration: none !important; }
.ao button { font-family: inherit; }
.ao img { max-width: 100%; height: auto; border: 0; }
.ao code { font-family: var(--font-m); font-size: .82em; background: var(--bg-2); padding: .1em .4em; border-radius: 4px; color: var(--ink-2); }

.ao-wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

.ao-kick {
	font-family: var(--font-m); font-size: 11px; letter-spacing: .22em;
	text-transform: uppercase; color: var(--v); margin: 0 0 10px;
}
.ao-title {
	font-family: var(--font-d); font-weight: 800; letter-spacing: -.02em;
	font-size: clamp(28px, 3.6vw, 44px); line-height: 1.06; margin: 0 0 10px; color: var(--ink);
}
.aors-muted { color: var(--mut); font-size: 14px; line-height: 1.6; margin: 4px 0; }

/* --------------------------------------------------------------- buttons */
.ao-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--font-d); font-weight: 700; font-size: 14px; letter-spacing: .02em;
	padding: 13px 22px; border-radius: 8px; cursor: pointer;
	border: 1.5px solid var(--ink) !important;
	background: transparent !important; color: var(--ink) !important;
	transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
	text-decoration: none !important;
}
.ao-btn:hover { transform: translateY(-1px); background: var(--ink) !important; color: #fff !important; }
.ao-btn--green {
	background: var(--g) !important; border-color: var(--g) !important; color: var(--ink) !important;
}
.ao-btn--green:hover { background: #1fc582 !important; border-color: #1fc582 !important; color: var(--ink) !important; }
.ao-btn:disabled { opacity: .45; pointer-events: none; }
.ao-btn.is-busy, button.is-busy { opacity: .6; pointer-events: none; }

.aors-toolbtn {
	font: 600 13px/1 var(--font-b); color: var(--ink-2); background: var(--bg);
	border: 1px solid var(--line); border-radius: 7px; padding: 9px 14px; cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.aors-toolbtn:hover { border-color: var(--ink); color: var(--ink); }
.aors-toolbtn.is-danger:hover { border-color: var(--p); color: var(--p); }
.aors-toolbtn:disabled { opacity: .4; pointer-events: none; }

.aors-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
	background: var(--bg); color: var(--mut); cursor: pointer; transition: .15s;
}
.aors-iconbtn svg { width: 16px; height: 16px; }
.aors-iconbtn:hover { border-color: var(--p); color: var(--p); }
.aors-iconbtn:disabled { opacity: .4; pointer-events: none; }

/* ---------------------------------------------------------------- badges */
.aors-badge {
	display: inline-flex; align-items: center; font: 500 11px/1 var(--font-m);
	letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 5px;
	background: var(--bg-2); color: var(--mut);
}
.aors-badge.is-open { background: rgba(40, 219, 146, .14); color: #0d7a4f; }
.aors-badge.is-submitted { background: rgba(130, 55, 223, .1); color: var(--v); }

.aors-chip {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	font: 500 10px/1 var(--font-m); letter-spacing: .1em; text-transform: uppercase;
	background: rgba(255, 255, 255, .92); color: var(--ink-2);
	padding: 6px 9px; border-radius: 5px; backdrop-filter: blur(4px);
}
.aors-chip.is-strong { background: var(--g); color: var(--ink); }

/* ---------------------------------------------------------------- crumbs */
.aors-crumbs {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	font: 500 12px/1 var(--font-m); letter-spacing: .04em; color: var(--mut);
	padding: 26px 0 4px;
}
.aors-crumbs a:hover { color: var(--v) !important; }
.aors-crumbs i { font-style: normal; opacity: .5; }
.aors-crumbs span { color: var(--ink-2); }

/* ===================================================================== SHOP */
.aors-shop { padding-bottom: 90px; }
.aors-shop__head { padding: 34px 0 22px; }
.aors-shop__layout { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 40px; align-items: start; }

.aors-rail { position: sticky; top: 96px; display: grid; gap: 22px; }
.aors-rail__group h3 {
	font: 700 12px/1 var(--font-m); letter-spacing: .16em; text-transform: uppercase;
	color: var(--ink); margin: 0 0 10px;
}
.aors-searchbox { position: relative; display: flex; }
.aors-searchbox input[type="search"] {
	width: 100%; padding: 11px 42px 11px 13px; font: 400 14px/1.2 var(--font-b);
	border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink);
}
.aors-searchbox input[type="search"]:focus { outline: none; border-color: var(--v); }
.aors-cam {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center;
	border-radius: 6px; color: var(--mut) !important; transition: .15s;
}
.aors-cam svg { width: 17px; height: 17px; }
.aors-cam:hover { color: var(--v) !important; background: var(--bg-2); }

.aors-checks { display: grid; gap: 2px; max-height: 300px; overflow: auto; padding-right: 4px; }
.aors-checks label {
	display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2);
	padding: 6px 6px; border-radius: 6px; cursor: pointer;
}
.aors-checks label:hover { background: var(--bg-2); }
.aors-checks input { accent-color: var(--g); width: 15px; height: 15px; }
.aors-checks .aors-count { margin-left: auto; font: 400 11px/1 var(--font-m); color: var(--mut); }

.aors-rail select, .aors-minmax input {
	width: 100%; padding: 10px 12px; font: 400 13.5px/1.2 var(--font-b);
	border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink);
}
.aors-rail select:focus, .aors-minmax input:focus { outline: none; border-color: var(--v); }
.aors-minmax { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; color: var(--mut); }
.aors-rail__actions { display: flex; gap: 10px; align-items: center; }
.aors-rail__actions .ao-btn { padding: 10px 16px; font-size: 13px; }
.aors-rail__clear { font: 500 13px/1 var(--font-b); color: var(--mut); }
.aors-rail__clear:hover { color: var(--p) !important; }

.aors-results__bar {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	margin: 0 0 18px; color: var(--mut); font-size: 13.5px;
}

.aors-grid {
	display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
	gap: 30px 24px;
}

/* ----------------------------------------------------------------- card */
.ao-piece { position: relative; display: grid; gap: 8px; }
.ao-piece__media {
	position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
	background: var(--bg-2); border-radius: var(--rad);
}
.ao-piece__media img {
	width: 100%; height: 100%; object-fit: contain; padding: 9%;
	transition: transform .35s ease;
}
.ao-piece:hover .ao-piece__media img { transform: scale(1.035); }
.aors-card__actions {
	position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
	display: flex; gap: 8px; opacity: 0; transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.ao-piece:hover .aors-card__actions,
.ao-piece:focus-within .aors-card__actions { opacity: 1; transform: none; pointer-events: auto; }
.ao-piece__add {
	flex: 1; font: 700 12.5px/1 var(--font-d); letter-spacing: .02em;
	background: var(--ink); color: #fff; border: 0; border-radius: 7px;
	padding: 11px 12px; cursor: pointer; transition: background .15s;
}
.ao-piece__add:hover { background: var(--g); color: var(--ink); }
.ao-piece__add.is-added { background: var(--g); color: var(--ink); }
.aors-card__qv {
	width: 38px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .95);
	color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s, color .15s;
}
.aors-card__qv svg { width: 17px; height: 17px; }
.aors-card__qv:hover { background: var(--v); color: #fff; }
.ao-piece__name { font: 600 14.5px/1.35 var(--font-b); color: var(--ink); }
.ao-piece__name:hover { color: var(--v) !important; }
.ao-piece__meta { display: flex; gap: 8px; align-items: baseline; margin: 0; font-size: 12.5px; color: var(--mut); }
.ao-piece__meta b { font: 500 12.5px/1 var(--font-m); color: var(--ink); }

/* pagination */
.aors-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.aors-pagination .page-numbers {
	min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
	padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
	font: 500 13px/1 var(--font-m); color: var(--ink-2) !important; transition: .15s;
}
.aors-pagination .page-numbers:hover { border-color: var(--ink); }
.aors-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.aors-pagination .page-numbers.dots { border: 0; }

.aors-empty-state {
	text-align: center; padding: 70px 20px; border: 1.5px dashed var(--line);
	border-radius: var(--rad-lg); display: grid; gap: 16px; justify-items: center;
}
.aors-empty-state p { margin: 0; color: var(--mut); max-width: 46ch; }

/* =================================================================== SINGLE */
.aors-single { padding-bottom: 90px; }
.aors-single__layout {
	display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: 56px; align-items: start; padding-top: 18px;
}
.aors-gallery-view { position: sticky; top: 96px; display: grid; gap: 12px; }
.aors-gallery-view__main {
	margin: 0; background: var(--bg-2); border-radius: var(--rad-lg);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.aors-gallery-view__main img { width: 100%; max-height: 620px; object-fit: contain; padding: 4%; }
.aors-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.aors-thumb {
	width: 66px; height: 66px; padding: 0; border-radius: 9px; overflow: hidden;
	border: 2px solid transparent; background: var(--bg-2); cursor: pointer;
	transition: border-color .15s, transform .15s;
}
.aors-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aors-thumb:hover { transform: translateY(-2px); }
.aors-thumb.is-active { border-color: var(--v); }

.aors-buy { display: grid; gap: 16px; align-content: start; }
.aors-buy__title {
	font-family: var(--font-d); font-weight: 800; letter-spacing: -.02em;
	font-size: clamp(26px, 3vw, 38px); line-height: 1.08; margin: 0; color: var(--ink);
}
.aors-h2 { font: 700 22px/1.2 var(--font-d); margin: 0 0 20px; color: var(--ink); }
.aors-buy__pricerow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.aors-buy__price { font: 700 24px/1 var(--font-d); }
.aors-buy__price span { font: 400 14px/1 var(--font-b); color: var(--mut); }
.aors-cleared {
	display: inline-flex; align-items: center; gap: 6px;
	font: 500 11px/1 var(--font-m); letter-spacing: .1em; text-transform: uppercase;
	color: #0d7a4f; background: rgba(40, 219, 146, .14); padding: 7px 10px; border-radius: 6px;
}
.aors-specs { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.aors-specs th, .aors-specs td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.aors-specs th { font: 500 11px/1.5 var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); width: 130px; font-weight: 500; }
.aors-specs td { color: var(--ink-2); }

.aors-dates { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.aors-dates__field { display: grid; gap: 6px; }
.aors-dates__field label { font: 500 11px/1 var(--font-m); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.aors-dates__field input[type="date"] {
	padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 8px;
	font: 400 14px/1.2 var(--font-b); color: var(--ink); background: var(--bg); width: 100%;
}
.aors-dates__field input[type="date"]:focus { outline: none; border-color: var(--v); }
.aors-dates__check { padding: 12px 18px; font-size: 13px; white-space: nowrap; }

.aors-avail { min-height: 20px; margin: 0; font: 500 13.5px/1.5 var(--font-b); }
.aors-avail.is-ok { color: #0d7a4f; }
.aors-avail.is-bad { color: var(--p); }

.aors-buy__add { width: 100%; padding: 15px 22px; font-size: 15px; }
.aors-note { font-size: 12.5px; color: var(--mut); line-height: 1.6; margin: 0; }
.aors-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.aors-tag {
	display: inline-block; font: 500 11px/1 var(--font-m); letter-spacing: .08em; text-transform: uppercase;
	color: var(--ink-2) !important; background: var(--bg-2); padding: 7px 11px; border-radius: 6px; transition: .15s;
}
a.aors-tag:hover { background: var(--ink); color: #fff !important; }

.aors-details { margin-top: 70px; }
.aors-details__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; }
.aors-prose { font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.aors-prose p { margin: 0 0 1em; }
.aors-piece-list { border: 1px solid var(--line); border-radius: var(--rad-lg); padding: 22px 24px; }
.aors-piece-list h3 { font: 700 15px/1.3 var(--font-d); margin: 0 0 12px; }
.aors-piece-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.aors-piece-list li {
	display: flex; gap: 14px; align-items: baseline; padding: 9px 0;
	border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.aors-piece-list li:last-child { border-bottom: 0; }
.aors-piece-list i { font: 500 12px/1 var(--font-m); font-style: normal; color: var(--v); min-width: 34px; }
.aors-piece-list span { color: var(--ink-2); }

.aors-related { margin-top: 74px; }
.aors-related h2 { font: 700 22px/1.2 var(--font-d); margin: 0 0 22px; }

/* ================================================================ SET LISTS */
.aors-lists { padding-bottom: 90px; }
.aors-lists__head { padding: 40px 0 8px; max-width: 640px; }
.aors-create { display: flex; gap: 10px; margin: 22px 0 34px; max-width: 640px; }
.aors-create input {
	flex: 1; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 8px;
	font: 400 14.5px/1.2 var(--font-b); color: var(--ink); background: var(--bg);
}
.aors-create input:focus { outline: none; border-color: var(--g); }
.aors-lists__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.aors-list-card {
	border: 1px solid var(--line); border-radius: var(--rad-lg); overflow: hidden;
	display: grid; grid-template-rows: 1fr auto; transition: border-color .15s, box-shadow .2s, transform .2s;
}
.aors-list-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.aors-list-card__body { display: block; padding: 22px 22px 14px; }
.aors-list-card__body h2 { font: 700 17px/1.3 var(--font-d); margin: 0 0 6px; }
.aors-list-card__foot {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 16px 12px 22px; border-top: 1px solid var(--line); background: var(--bg-2);
}

/* ================================================================= SET LIST */
.aors-setlist { padding-bottom: 90px; }
.aors-setlist__head {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
	flex-wrap: wrap; padding: 12px 0 26px;
}
.aors-setlist__name { margin: 0; }
.aors-setlist__tools { display: flex; gap: 8px; flex-wrap: wrap; }
.aors-setlist__layout { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 44px; align-items: start; }

.aors-items { display: grid; gap: 14px; }
.aors-item {
	display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px;
	border: 1px solid var(--line); border-radius: var(--rad-lg); padding: 16px;
}
.aors-item__media {
	display: block; aspect-ratio: 1 / 1; background: var(--bg-2); border-radius: 9px; overflow: hidden;
}
.aors-item__media img { width: 100%; height: 100%; object-fit: contain; padding: 7%; }
.aors-item__body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.aors-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.aors-item__name { font: 600 15.5px/1.3 var(--font-b); }
.aors-item__name:hover { color: var(--v) !important; }
.aors-item__avail { font: 500 11.5px/1.4 var(--font-m); white-space: nowrap; }
.aors-item__avail.is-ok { color: #0d7a4f; }
.aors-item__avail.is-bad { color: var(--p); }
.aors-item__meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--mut); }
.aors-item__meta b { font: 500 12.5px/1 var(--font-m); color: var(--ink); }
.aors-item__note { margin: 0; font-size: 13px; color: var(--ink-2); font-style: italic; }
.aors-item__controls { display: flex; gap: 10px; align-items: flex-start; }
.aors-qty { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.aors-qty input {
	width: 62px; padding: 9px 8px; border: 1.5px solid var(--line); border-radius: 7px;
	font: 400 13.5px/1 var(--font-b); text-align: center;
}
.aors-qty input:focus { outline: none; border-color: var(--v); }
.aors-comment { position: relative; flex: 1; display: block; }
.aors-comment textarea {
	width: 100%; resize: vertical; min-height: 38px; padding: 9px 58px 9px 12px;
	border: 1.5px solid var(--line); border-radius: 7px; font: 400 13px/1.5 var(--font-b);
	color: var(--ink-2); background: var(--bg);
}
.aors-comment textarea:focus { outline: none; border-color: var(--v); }
.aors-comment__saved {
	position: absolute; right: 10px; top: 10px; font: 500 10px/1 var(--font-m);
	letter-spacing: .1em; text-transform: uppercase; color: #0d7a4f;
	opacity: 0; transition: opacity .2s;
}
.aors-comment__saved.is-on { opacity: 1; }

.aors-summary { position: sticky; top: 96px; }
.aors-summary__card {
	border: 1px solid var(--line); border-radius: var(--rad-lg); padding: 24px;
	display: grid; gap: 14px; box-shadow: 0 8px 30px rgba(16, 16, 18, .05);
}
.aors-summary__price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.aors-summary__price b { font: 700 28px/1 var(--font-d); }
.aors-summary__price span { color: var(--mut); font-size: 14px; }
.aors-summary__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aors-summary__check { width: 100%; padding: 12px 16px; font-size: 13.5px; }
.aors-summary__hold { width: 100%; padding: 15px 20px; font-size: 15px; }

.aors-breakdown { display: grid; gap: 4px; }
.aors-breakdown p { display: flex; justify-content: space-between; gap: 14px; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.aors-breakdown p b { font: 500 13.5px/1.4 var(--font-m); }
.aors-breakdown__range { font: 500 12px/1.5 var(--font-m); color: var(--mut) !important; letter-spacing: .02em; }
.aors-breakdown .is-total { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; font-weight: 600; color: var(--ink); }
.aors-breakdown__warn { color: var(--p) !important; font-size: 12.5px !important; line-height: 1.55; }

.aors-private {
	display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0;
	font-size: 12px; color: var(--mut); line-height: 1.55;
}
.aors-private svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* --------------------------------------------------------------- modals */
body.aors-lock { overflow: hidden; }
.aors-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.aors-modal[hidden] { display: none; }
.aors-modal__scrim { position: absolute; inset: 0; background: rgba(16, 16, 18, .55); backdrop-filter: blur(3px); }
.aors-modal__panel {
	position: relative; background: var(--bg); border-radius: var(--rad-lg);
	box-shadow: var(--shadow); max-height: calc(100vh - 60px); overflow: auto;
	animation: aorsPop .22s ease;
}
@keyframes aorsPop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.aors-modal__close {
	position: absolute; top: 12px; right: 12px; z-index: 3;
	width: 36px; height: 36px; border: 0; border-radius: 8px; background: var(--bg-2);
	font-size: 20px; line-height: 1; color: var(--ink-2); cursor: pointer; transition: .15s;
}
.aors-modal__close:hover { background: var(--ink); color: #fff; }

/* quick view */
.aors-qv__panel, .aors-modal__panel.aors-qv { width: min(880px, 100%); }
.aors-qv__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.aors-qv__loading { grid-column: 1 / -1; padding: 60px; text-align: center; color: var(--mut); }
.aors-qv__media { background: var(--bg-2); display: flex; align-items: center; justify-content: center; min-height: 380px; }
.aors-qv__media img { width: 100%; max-height: 480px; object-fit: contain; padding: 6%; }
.aors-qv__info { padding: 34px 32px; display: grid; gap: 12px; align-content: center; }
.aors-qv__info h2 { font: 700 24px/1.15 var(--font-d); margin: 0; }
.aors-qv__price { margin: 0; font-size: 14px; color: var(--mut); }
.aors-qv__price b { font: 700 19px/1 var(--font-d); color: var(--ink); }
.aors-qv__meta { margin: 0; font-size: 13px; color: var(--mut); line-height: 1.7; }
.aors-qv__short { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.aors-qv__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.aors-qv__actions .ao-btn { padding: 12px 18px; font-size: 13.5px; }

/* hold request */
.aors-modal__panel.aors-hold { width: min(600px, 100%); padding: 34px 34px 30px; }
.aors-hold__title { font: 700 26px/1.1 var(--font-d); margin: 0 0 4px; }
.aors-hold__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.aors-hold__grid label { display: grid; gap: 6px; }
.aors-hold__grid label.is-wide { grid-column: 1 / -1; }
.aors-hold__grid span { font: 500 11px/1 var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.aors-hold__grid input, .aors-hold__grid textarea {
	padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 8px;
	font: 400 14px/1.4 var(--font-b); color: var(--ink); background: var(--bg); width: 100%;
}
.aors-hold__grid input:focus, .aors-hold__grid textarea:focus { outline: none; border-color: var(--v); }
.aors-hold__error { color: var(--p); font-size: 13.5px; margin: 14px 0 0; line-height: 1.55; }
.aors-hold__submit { width: 100%; margin-top: 18px; padding: 15px 20px; font-size: 15px; }
.aors-hold__success { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 14px 4px 4px; }
.aors-hold__success h2 { font: 700 24px/1.1 var(--font-d); margin: 4px 0 0; }
.aors-hold__success p { margin: 0; color: var(--ink-2); max-width: 40ch; line-height: 1.6; }
.aors-hold__check {
	width: 62px; height: 62px; border-radius: 50%; background: var(--g);
	display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.aors-hold__check svg { width: 30px; height: 30px; }

/* list picker popover */
.aors-picker {
	position: absolute; z-index: 10000; width: 264px; background: var(--bg);
	border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
	padding: 8px; animation: aorsPop .18s ease;
}
.aors-picker__label { margin: 4px 8px 6px; font: 500 10.5px/1 var(--font-m); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.aors-picker__item {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	width: 100%; padding: 10px 10px; border: 0; border-radius: 8px; background: none;
	font: 500 13.5px/1.2 var(--font-b); color: var(--ink); cursor: pointer; text-align: left;
}
.aors-picker__item:hover { background: var(--bg-2); }
.aors-picker__item span { font: 400 11px/1 var(--font-m); color: var(--mut); }
.aors-picker__new { display: flex; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.aors-picker__new input {
	flex: 1; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 7px;
	font: 400 13px/1.2 var(--font-b);
}
.aors-picker__new input:focus { outline: none; border-color: var(--g); }
.aors-picker__go {
	width: 36px; border: 0; border-radius: 7px; background: var(--g); color: var(--ink);
	font-size: 18px; cursor: pointer; transition: background .15s;
}
.aors-picker__go:hover { background: #1fc582; }

/* toasts */
.aors-toasts {
	position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
	z-index: 10001; display: grid; gap: 8px; justify-items: center; pointer-events: none;
}
.aors-toast {
	background: var(--ink); color: #fff; font: 500 13.5px/1.3 var(--font-b);
	padding: 12px 18px; border-radius: 9px; box-shadow: var(--shadow);
	opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
	max-width: min(420px, 86vw); text-align: center;
}
.aors-toast.is-in { opacity: 1; transform: none; }
.aors-toast.is-bad { background: var(--p); }

/* ============================================================ IMAGE SEARCH */
.aors-imgsearch { padding-bottom: 90px; }
.aors-imgsearch__head { padding: 40px 0 22px; max-width: 640px; }
.aors-drop {
	display: grid; justify-items: center; align-content: center; gap: 6px;
	min-height: 240px; border: 2px dashed var(--line); border-radius: var(--rad-lg);
	background: var(--bg-2); cursor: pointer; padding: 26px; text-align: center;
	transition: border-color .2s, background .2s; position: relative; overflow: hidden;
}
.aors-drop:hover, .aors-drop.is-drag { border-color: var(--g); background: rgba(40, 219, 146, .05); }
.aors-drop__inner { display: grid; gap: 6px; justify-items: center; color: var(--mut); font-size: 13px; }
.aors-drop__inner svg { width: 40px; height: 40px; color: var(--ink-2); margin-bottom: 4px; }
.aors-drop__inner b { font: 700 15.5px/1.3 var(--font-d); color: var(--ink); }
.aors-drop__preview { max-height: 300px; width: auto; max-width: 100%; border-radius: 10px; object-fit: contain; }
.aors-drop.has-preview { min-height: 0; }
.aors-drop.has-preview .aors-drop__inner b::after { content: ' — tap to change'; font-weight: 400; color: var(--mut); }
.aors-imgsearch__status { min-height: 22px; font: 500 14px/1.5 var(--font-b); color: var(--ink-2); margin: 16px 0 22px; }
.aors-imgsearch__status.is-bad { color: var(--p); }
.aors-imgsearch__results { margin-top: 4px; }
.aors-imgsearch__foot { margin-top: 34px; }

/* ================================================================== GATE */
.aors-gate { display: grid; place-items: center; min-height: 55vh; padding: 60px 0; }
.aors-gate__card {
	max-width: 460px; text-align: center; display: grid; gap: 14px; justify-items: center;
	border: 1px solid var(--line); border-radius: var(--rad-lg); padding: 46px 40px; box-shadow: 0 8px 30px rgba(16,16,18,.05);
}
.aors-gate__card p { margin: 0; color: var(--mut); line-height: 1.65; }
.aors-gate__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
	.aors-single__layout { grid-template-columns: 1fr; gap: 34px; }
	.aors-gallery-view { position: static; }
	.aors-details__grid { grid-template-columns: 1fr; gap: 34px; }
	.aors-setlist__layout { grid-template-columns: 1fr; gap: 30px; }
	.aors-summary { position: static; }
	.aors-grid { --cols: 3; }
}
@media (max-width: 900px) {
	.aors-shop__layout { grid-template-columns: 1fr; gap: 26px; }
	.aors-rail { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
	.aors-rail__group.is-search, .aors-rail__group.is-collections { grid-column: 1 / -1; }
	.aors-checks { max-height: 190px; }
	.aors-lists__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 660px) {
	.ao-wrap { padding: 0 18px; }
	.aors-grid { --cols: 2 !important; gap: 22px 14px; }
	.aors-rail { grid-template-columns: 1fr; }
	.aors-qv__body { grid-template-columns: 1fr; }
	.aors-qv__media { min-height: 240px; }
	.aors-hold__grid { grid-template-columns: 1fr; }
	.aors-lists__grid { grid-template-columns: 1fr; }
	.aors-item { grid-template-columns: 84px minmax(0, 1fr); gap: 13px; }
	.aors-item__controls { flex-wrap: wrap; }
	.aors-dates { grid-template-columns: 1fr 1fr; }
	.aors-dates__check { grid-column: 1 / -1; }
	.aors-create { flex-direction: column; }
	.aors-setlist__head { align-items: flex-start; flex-direction: column; }
	.aors-card__actions { opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------- v0.7 ---------- */
.aors-hold__grid label small{display:block;margin-top:5px;font-size:.74rem;line-height:1.5;color:#6E6E76;}
.aors-req{font-style:normal;color:#ED1E79;}
.aors-account__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px;}
.aors-account__tools{display:flex;gap:8px;}
.aors-account__tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid #E6E6E2;margin-bottom:22px;}
.aors-account__tabs a{flex:0 0 auto;padding:14px 16px;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#6E6E76!important;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none!important;}
.aors-account__tabs a:hover{color:#101012!important;}
.aors-account__tabs a.is-active{color:#101012!important;border-bottom-color:#28DB92;}
.aors-account__alert{display:grid;gap:10px;margin-bottom:22px;}
.aors-returncard{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border-radius:8px;background:rgba(40,219,146,.10);border:1px solid rgba(40,219,146,.35);}
.aors-returncard.is-late{background:rgba(237,30,121,.08);border-color:rgba(237,30,121,.35);}
.aors-returncard__due{text-align:right;font-weight:600;}
.aors-returncard__due span{display:block;font-weight:400;font-size:.8rem;color:#6E6E76;}
.aors-acctable{width:100%;border-collapse:collapse;font-size:.9rem;}
.aors-acctable th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#6E6E76;padding:10px 12px;border-bottom:1px solid #E6E6E2;}
.aors-acctable td{padding:14px 12px;border-bottom:1px solid #F0F0EE;}
.aors-acclists{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.aors-acclist{display:block;padding:18px;border:1px solid #E6E6E2;border-radius:8px;text-decoration:none!important;transition:border-color .25s,transform .25s;}
.aors-acclist:hover{border-color:#8237DF;transform:translateY(-2px);}
.aors-acclist b{display:block;margin-bottom:4px;}
.aors-acclist span{display:block;font-size:.8rem;color:#6E6E76;margin-bottom:8px;}
.aors-accgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px;}
@media (max-width:620px){.aors-acctable thead{display:none;}.aors-acctable td{display:block;border:0;padding:4px 0;}.aors-acctable tr{display:block;padding:14px 0;border-bottom:1px solid #F0F0EE;}}

/* ==========================================================================
   v0.8 — SIGN IN / REGISTER / RESET
   Replaces wp-login.php. Two columns on desktop, one on a phone; the aside
   is decoration only and is hidden from screen readers.
   ========================================================================== */
.aors-auth{display:grid;grid-template-columns:1fr;gap:0;max-width:1020px;margin:0 auto;
  padding:clamp(24px,5vw,64px) clamp(16px,4vw,32px);}
.aors-auth__card{background:#fff;border:1px solid var(--aors-line,#E6E6E2);border-radius:14px;
  padding:clamp(24px,4vw,40px);}
.aors-auth__kick{font-family:var(--aors-mono,'IBM Plex Mono',monospace);font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--aors-muted,#6E6E76);margin:0 0 10px;
  display:flex;align-items:center;gap:9px;}
.aors-auth__kick::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--aors-green,#28DB92);}
.aors-auth__title{font-family:var(--aors-display,'Archivo',sans-serif);font-size:clamp(1.6rem,4vw,2.2rem);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 8px;}
.aors-auth__sub{color:var(--aors-muted,#6E6E76);font-size:.92rem;line-height:1.6;margin:0 0 22px;}
.aors-auth__note{margin:0 0 18px;padding:12px 14px;border-radius:10px;font-size:.88rem;line-height:1.5;}
.aors-auth__note.is-ok{background:rgba(40,219,146,.14);color:#0C7A50;}
.aors-auth__note.is-bad{background:rgba(237,30,121,.10);color:#B0135C;}
.aors-auth__form{display:grid;gap:16px;}
.aors-auth__f{display:grid;gap:7px;}
.aors-auth__f > span{font-family:var(--aors-mono,'IBM Plex Mono',monospace);font-size:.58rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--aors-muted,#6E6E76);}
.aors-auth__f > span i{font-style:normal;color:var(--aors-pink,#ED1E79);}
.aors-auth__f input{width:100%;min-width:0;padding:13px 14px;border:1px solid var(--aors-line,#E6E6E2);
  border-radius:10px;font-size:.95rem;background:#fff;color:inherit;}
.aors-auth__f input:focus{outline:none;border-color:var(--aors-green,#28DB92);
  box-shadow:0 0 0 3px rgba(40,219,146,.16);}
.aors-auth__f em{font-style:normal;font-size:.76rem;color:var(--aors-muted,#6E6E76);}
.aors-auth__row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.86rem;}
.aors-auth__check{display:flex;align-items:center;gap:8px;cursor:pointer;}
.aors-auth__check input{width:16px;height:16px;accent-color:var(--aors-green,#28DB92);}
.aors-auth__row a{color:var(--aors-violet,#8237DF);}
.aors-auth__go{width:100%;padding:15px 20px;border:0;border-radius:10px;cursor:pointer;
  background:var(--aors-green,#28DB92);color:#0A241A;
  font-family:var(--aors-display,'Archivo',sans-serif);font-weight:600;font-size:.98rem;
  transition:transform .2s ease,box-shadow .2s ease;}
.aors-auth__go:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(40,219,146,.32);}
.aors-auth__alt{margin-top:20px;padding-top:18px;border-top:1px solid var(--aors-line,#E6E6E2);
  display:grid;gap:8px;font-size:.9rem;}
.aors-auth__alt a{color:var(--aors-violet,#8237DF);font-weight:500;}
.aors-auth__quiet{color:var(--aors-muted,#6E6E76);font-size:.84rem;}
.aors-auth__aside{display:none;}
.aors-auth__stripe{display:flex;gap:5px;margin-bottom:18px;}
.aors-auth__stripe i{width:26px;height:5px;border-radius:3px;}
.aors-auth__stripe i:nth-child(1){background:var(--aors-green,#28DB92);}
.aors-auth__stripe i:nth-child(2){background:var(--aors-blue,#2497C8);}
.aors-auth__stripe i:nth-child(3){background:var(--aors-violet,#8237DF);}
.aors-auth__stripe i:nth-child(4){background:var(--aors-pink,#ED1E79);}
.aors-auth__quote{font-family:var(--aors-display,'Archivo',sans-serif);font-size:1.15rem;line-height:1.45;
  letter-spacing:-.01em;margin:0 0 20px;}
.aors-auth__list{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.aors-auth__list li{position:relative;padding-left:24px;font-size:.9rem;color:var(--aors-muted,#6E6E76);}
.aors-auth__list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;
  border-radius:50%;background:var(--aors-green,#28DB92);}
/* honeypot — off screen, never display:none (bots skip hidden fields) */
.aors-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
@media (min-width:900px){
  .aors-auth{grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center;}
  .aors-auth__aside{display:block;padding-left:8px;}
}

/* ==========================================================================
   0.14.0 — CLIENT ROUND: SHOP ON A PHONE, AND THE SET LIST PAGE
   Appended, not edited in place, so every rule above is untouched and this
   whole block can be deleted in one piece if anything here is wrong.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · THE SHOP ON A PHONE.  "make this mobile responsive… it should be easy
   to see which art has the price etc… make centered and adjust the spacing,
   or make one box for each art."

   WHAT WAS WRONG. Two columns of bare artwork with the name and price loose
   underneath, and 22px of vertical gap between rows against 14px between
   columns — so the gap ACROSS was tighter than the gap DOWN, and the eye
   pairs each price with the wrong picture. Nothing enclosed a piece, so
   there was no edge to say where one artwork stopped and the next started.

   WHAT THIS DOES. Below 660px each piece becomes ONE CARD: white, bordered,
   rounded, with the image on its own tinted ground and the name, price and
   set/single line stacked and centred inside the same box. The row gap goes
   up and the column gap comes down so the two now read as a grid rather than
   four independent columns.

   ONE COLUMN UNDER 420px. At 390px a two-up card is 170px wide, and
   "CA$1,275.00 / week · Set of 12" cannot sit on one line in it. One column
   is wider than two half-empty ones.

   THE ADD BUTTON IS ALWAYS VISIBLE HERE. It was revealed on hover, and a
   phone has no hover — the existing rule already handled that, but it
   floated over the artwork. In a card it sits under the price where it can
   be read before it is tapped.
   -------------------------------------------------------------------------- */
@media (max-width: 660px) {
	.aors-grid { --cols: 2 !important; gap: 14px 12px; }

	.aors-grid .ao-piece {
		gap: 0;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 14px;
		overflow: hidden;
		box-shadow: 0 1px 2px rgba(16, 16, 18, .04);
	}
	.aors-grid .ao-piece__media {
		border-radius: 0;
		border-bottom: 1px solid var(--line-2, #F0F0EC);
	}
	.aors-grid .ao-piece__media img { padding: 7%; }

	/* everything below the picture is one centred stack with real padding */
	.aors-grid .ao-piece__name {
		display: block;
		padding: 11px 12px 0;
		text-align: center;
		font: 600 13.5px/1.35 var(--font-b);
	}
	.aors-grid .ao-piece__meta {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 6px 12px 12px;
		text-align: center;
		font-size: 12px;
	}
	/* the price is the thing being looked for, so it is the loudest line */
	.aors-grid .ao-piece__meta b {
		font: 600 14px/1.2 var(--font-m);
		color: var(--ink);
	}

	/* the actions sit in the card, not floating on the artwork */
	.aors-grid .aors-card__actions {
		position: static;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		padding: 0 12px 12px;
		gap: 7px;
	}
	.aors-grid .ao-piece__add { padding: 10px; font-size: 12px; border-radius: 8px; }
	.aors-grid .aors-card__qv { width: 36px; border: 1px solid var(--line); }
}

@media (max-width: 420px) {
	/* two-up is too narrow for a price line at this width */
	.aors-grid { --cols: 1 !important; gap: 14px; }
	.aors-grid .ao-piece__media { aspect-ratio: 4 / 3; }
	.aors-grid .ao-piece__name { font-size: 15px; padding-top: 13px; }
	.aors-grid .ao-piece__meta {
		flex-direction: row;
		justify-content: center;
		align-items: baseline;
		gap: 9px;
	}
}

/* --------------------------------------------------------------------------
   2 · THE SET LIST PAGE.  "not optimized properly, visuals are bad, spacing,
   right side bar is also not good. make it clean."

   THE SIDEBAR. It was a 336px column with a 44px gutter and no internal
   rhythm — the price, the dates, the button and the small print all sat at
   the same distance from each other, so nothing led. Now: the price block is
   separated by a rule, the dates and the two buttons are one group, and the
   note and privacy line are pushed down as a quieter foot. Sticky offset
   raised so it clears the sticky site header.

   THE ITEMS. 24px between rows was not enough to separate two white cards on
   a white page; the note box and the bin button were competing for the same
   corner. The bin is now a quiet square that colours on hover, and the note
   spans the width under the meta rather than fighting it.
   -------------------------------------------------------------------------- */
.aors-setlist__layout { gap: 34px; }
.aors-items { display: grid; gap: 14px; }

.aors-item {
	padding: 14px;
	border-radius: 14px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.aors-item__body { gap: 9px; }
.aors-item__top { align-items: flex-start; }
.aors-item__name { font-size: 16px; letter-spacing: -.01em; }
.aors-item__meta { gap: 7px; row-gap: 2px; }
.aors-item__controls { align-items: stretch; gap: 9px; }
.aors-comment { flex: 1; min-width: 0; }
.aors-comment textarea { border-radius: 9px; padding: 9px 11px; }

/* the bin: a quiet square that only shouts once you are on it */
.aors-item .aors-iconbtn {
	flex: none; width: 40px; align-self: flex-start;
	border-radius: 9px;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.aors-item .aors-iconbtn:hover { border-color: var(--p); color: var(--p); }

/* the summary card */
.aors-summary { top: 104px; }
.aors-summary__card { display: grid; gap: 16px; padding: 22px; border-radius: 16px; }
.aors-summary__price { align-items: baseline; }
.aors-summary__price b { font-size: 30px; letter-spacing: -.02em; }
/* the price block is its own thing, so it gets a line under it */
.aors-summary__card > .aors-muted {
	margin: -8px 0 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line-2, #F0F0EC);
	font-size: 13px;
}
.aors-summary__dates { gap: 12px; }
.aors-summary__dates label {
	display: block; margin-bottom: 5px;
	font: 500 10.5px/1 var(--font-m); letter-spacing: .16em; text-transform: uppercase;
	color: var(--mut);
}
.aors-summary__dates input { width: 100%; padding: 11px 10px; border-radius: 9px; }
.aors-summary__check { margin-top: -4px; }
.aors-summary__hold { margin-top: 2px; }
/* the small print is a foot, not another paragraph in the stack */
.aors-summary .aors-note {
	margin: 0; padding-top: 14px;
	border-top: 1px solid var(--line-2, #F0F0EC);
	font-size: 12.5px; line-height: 1.6; color: var(--mut);
}

/* --------------------------------------------------------------------------
   3 · BROWSE MORE ARTWORK — the client could not get from a Set List back
   into the catalogue. It is the primary action on the page, so it leads the
   tool row and the outline buttons follow it.
   -------------------------------------------------------------------------- */
.aors-setlist__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aors-setlist__browse {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 18px; font-size: 13.5px; border-radius: 999px;
	margin-right: 4px;
}
.aors-setlist__browse svg { width: 15px; height: 15px; flex: none; }

.aors-lists__browse { margin: 0 0 22px; }
.aors-lists__browse a {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 2px; border-bottom: 2px solid var(--g);
	font: 600 14px/1 var(--font-d); color: var(--ink) !important;
	transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.aors-lists__browse a:hover { color: var(--p) !important; border-color: var(--p); gap: 13px; }
.aors-lists__browse svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   4 · THE HOLD FORM. The client asked for the buyer-name title to sit on its
   own line above its box; that is `width: full` on the field, which this
   makes span both columns. The static Set name row is styled as a fact, not
   an input, because it is read rather than typed into.
   -------------------------------------------------------------------------- */
.aors-hold__grid .is-wide { grid-column: 1 / -1; }
.aors-hold__f { display: block; min-width: 0; }
.aors-hold__f > span {
	display: block; margin-bottom: 6px;
	font: 500 11px/1.3 var(--font-m); letter-spacing: .12em; text-transform: uppercase;
	color: var(--mut);
}
.aors-hold__static {
	display: block; padding: 11px 13px;
	background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px;
	font: 600 15px/1.3 var(--font-b); color: var(--ink);
}

@media (max-width: 660px) {
	.aors-setlist__layout { gap: 24px; }
	.aors-setlist__tools { width: 100%; }
	.aors-setlist__browse { flex: 1 0 100%; justify-content: center; }
	.aors-summary__card { padding: 18px; }
	.aors-summary__price b { font-size: 26px; }
	.aors-item { padding: 12px; }
	.aors-item__controls { flex-wrap: nowrap; }
}

/* ==========================================================================
   0.14.1 — ADDING TO, AND THE REBUILT PICKER
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE ?list= BANNER. Green because it is a confirmation, not a warning, and
   because it has to read as connected to the green Add buttons it modifies.
   Full width above the grid, so it is impossible to start adding without
   having seen where things are going.
   -------------------------------------------------------------------------- */
.aors-adding {
	display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
	margin: 0 0 20px; padding: 12px 15px;
	border-radius: 12px;
	background: rgba(40, 219, 146, .10);
	border: 1px solid rgba(40, 219, 146, .42);
}
.aors-adding svg { width: 17px; height: 17px; flex: none; color: #0C7A50; }
.aors-adding > span { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }
.aors-adding i {
	font-style: normal; font-family: var(--font-m);
	font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
	color: #0C7A50; flex: none;
}
.aors-adding b {
	font: 600 15px/1.3 var(--font-d); color: var(--ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.aors-adding a { color: var(--ink) !important; border-bottom: 1px solid transparent; }
.aors-adding a:hover b { color: var(--v); }
.aors-adding .aors-adding__off {
	margin-left: auto; flex: none;
	font: 500 10.5px/1 var(--font-m); letter-spacing: .16em; text-transform: uppercase;
	color: var(--mut) !important; border-bottom: 1px solid currentColor; padding-bottom: 2px;
	transition: color .2s ease;
}
.aors-adding .aors-adding__off:hover { color: var(--p) !important; }

/* --------------------------------------------------------------------------
   THE PICKER. Rebuilt to match the product page's, because two different
   pickers on one site is itself the confusion the client reported. Lists
   first, one per row, coloured dot and count pill; the create field is a
   labelled row underneath rather than a bare "+".
   -------------------------------------------------------------------------- */
.aors-picker { width: 280px; padding: 11px; border-radius: 14px; }
.aors-picker__label {
	margin: 0 2px 9px;
	font: 500 10.5px/1 var(--font-m); letter-spacing: .18em; text-transform: uppercase;
	color: var(--mut);
}
.aors-picker__lists {
	max-height: 232px; overflow-y: auto; overscroll-behavior: contain;
	margin: 0 -3px; padding: 0 3px;
	scrollbar-width: thin; scrollbar-color: #DCDCD6 transparent;
}
.aors-picker__lists::-webkit-scrollbar { width: 5px; }
.aors-picker__lists::-webkit-scrollbar-thumb { background: #DCDCD6; border-radius: 999px; }

.aors-picker .aors-picker__item {
	display: flex; align-items: center; gap: 10px;
	width: 100%; min-height: 46px; margin-bottom: 5px; padding: 10px 11px;
	border: 1px solid var(--line); border-radius: 10px;
	background: #fff; cursor: pointer; text-align: left;
	transition: border-color .2s ease, transform .18s ease;
}
/* the same four tints, in the same order, as the shop cards and the header
   cart — so a list looks like the same object wherever you meet it */
.aors-picker__item:nth-child(4n+1) { --c: #28DB92; --tint: #EAFBF4; }
.aors-picker__item:nth-child(4n+2) { --c: #ED1E79; --tint: #FDEDF4; }
.aors-picker__item:nth-child(4n+3) { --c: #8237DF; --tint: #F3EDFC; }
.aors-picker__item:nth-child(4n+4) { --c: #2497C8; --tint: #E9F4FA; }
.aors-picker .aors-picker__item:hover,
.aors-picker .aors-picker__item:focus-visible {
	border-color: var(--c, #28DB92); transform: translateX(2px);
}
.aors-picker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, #28DB92); flex: none; }
.aors-picker__item b {
	flex: 1; min-width: 0; font: 600 13.5px/1.3 var(--font-b); color: var(--ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aors-picker__item > span {
	flex: none; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px;
	background: var(--tint, var(--bg-2)); color: var(--ink);
	font: 500 11px/24px var(--font-m); text-align: center;
}

.aors-picker__new {
	display: flex; gap: 7px; margin-top: 9px; padding-top: 10px;
	border-top: 1px solid var(--line);
}
.aors-picker__new input {
	flex: 1; min-width: 0; padding: 10px 11px;
	border: 1px solid var(--line); border-radius: 9px;
	font: 400 13px/1.3 var(--font-b); color: var(--ink); background: #fff;
}
.aors-picker__new input:focus {
	outline: none; border-color: var(--g); box-shadow: 0 0 0 3px rgba(40, 219, 146, .14);
}
.aors-picker .aors-picker__go {
	flex: none; width: 42px; border: 1px solid var(--g); border-radius: 9px;
	background: var(--g); color: var(--ink);
	font: 600 17px/1 var(--font-d); cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.aors-picker .aors-picker__go:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

@media (max-width: 660px) {
	.aors-adding { gap: 8px; padding: 11px 13px; }
	.aors-adding .aors-adding__off { margin-left: 0; }
	/* on a phone the picker is wider than the card that opened it, so it is
	   pinned to the viewport rather than to the button */
	.aors-picker { width: calc(100vw - 24px); max-width: 340px; }
}

/* ==========================================================================
   0.15.0 — THE LONG-TERM GATE AND THE COLLECTION-DAY NOTE
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAST TWO WEEKS THERE IS NO TOTAL, THERE IS THIS.

   The client: "if they see the calculated price as is, they would NEVER rent
   from Act One Art." So the figures are not dimmed or struck through — they
   are replaced. A price that would not be honoured should not be on screen in
   any form, because a struck-through number is still a number people anchor
   to.

   Violet, matching the "Long-term rental? Get a price" button on the product
   page and the modal's kicker, so the whole long-term path is one colour
   wherever it is met.
   -------------------------------------------------------------------------- */
.aors-longnote {
	margin: 10px 0 4px; padding: 15px 16px;
	border-radius: 11px;
	background: #F3EDFC; border-left: 3px solid var(--v);
}
.aors-longnote__t {
	margin: 0 0 7px;
	font: 700 15px/1.3 var(--font-d); letter-spacing: -.01em; color: var(--ink);
}
.aors-longnote p { margin: 0; font-size: 13.5px; line-height: 1.65; color: #3A3A42; }
.aors-longnote .aors-longnote__btn {
	display: block; width: 100%; margin-top: 12px; padding: 12px 16px;
	border: 0; border-radius: 9px;
	background: var(--v); color: #fff;
	font: 600 14px/1 var(--font-d); cursor: pointer;
	transition: background-color .2s ease, transform .18s ease;
}
.aors-longnote .aors-longnote__btn:hover { background: var(--ink); transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   THE COLLECTION-DAY NOTE. Appears only when a chosen date has been moved,
   and says which day it was and which day it became — a date silently
   changing under someone is worse than not restricting it at all.
   -------------------------------------------------------------------------- */
.aors-daynote {
	display: block; margin-top: 6px;
	font: 500 11.5px/1.5 var(--font-b); color: var(--v);
}
.aors-daynote[hidden] { display: none; }

/* ==========================================================================
   0.16.0 — THE COLLECTION-DAY CALENDAR  (client point 7A)

   "Grey out all the days except Monday, Wednesday and Friday."
   Drawn by aors-shop.js in place of the native date picker, which cannot
   grey individual weekdays. Lives on <body> at a fixed position so no
   panel's overflow can clip it. The .aors-cal-input class marks the field
   as popup-driven; the input itself stays a real date input underneath.
   ========================================================================== */
.aors-cal-input { cursor: pointer; }

.aors-cal {
	position: fixed; z-index: 99995; width: 272px;
	background: #fff; border: 1px solid var(--line); border-radius: 12px;
	padding: 12px 12px 10px;
	box-shadow: 0 14px 40px rgba(16, 16, 18, .16);
	font-family: var(--font-b);
}
.aors-cal__head {
	display: flex; align-items: center; justify-content: space-between;
	margin: 0 2px 8px;
}
.aors-cal__head b { font: 700 13.5px/1 var(--font-d); letter-spacing: -.01em; color: var(--ink); }
.aors-cal__nav {
	width: 28px; height: 28px; display: grid; place-items: center;
	border: 0; border-radius: 8px; background: var(--bg-2); color: var(--ink);
	font-size: 16px; line-height: 1; cursor: pointer;
}
.aors-cal__nav:hover { background: var(--ink); color: #fff; }
.aors-cal__grid {
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.aors-cal__wd {
	text-align: center; padding: 2px 0 4px;
	font: 500 9.5px/1 var(--font-m); letter-spacing: .1em; color: var(--mut);
}
.aors-cal__day {
	height: 32px; display: grid; place-items: center;
	border: 0; border-radius: 8px; background: transparent;
	font: 500 12.5px/1 var(--font-b); color: var(--ink);
}
button.aors-cal__day { cursor: pointer; }
button.aors-cal__day:hover { background: var(--g); color: var(--ink); }
/* the point of the whole control: a day we do not collect on is visibly
   dead — printed grey, no hover, no hand cursor, not a button at all */
.aors-cal__day.is-off { color: #C9C9C6; cursor: default; }
.aors-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--line); }
.aors-cal__day.is-sel { background: var(--ink); color: #fff; }
button.aors-cal__day.is-sel:hover { background: var(--ink); color: #fff; }
.aors-cal__note {
	margin: 8px 2px 0;
	font: 500 10.5px/1.5 var(--font-b); color: var(--mut);
}

/* ==========================================================================
   0.16.0 — NOTES BOX IN THE SUMMARY PANEL  (client photo 5)

   "Add a spot right here under the request button where they can add notes
   or requests." Sits under Request a Hold; aors-shop.js carries its value
   into the hold form. Styled to read as part of the card, not a form of
   its own.
   ========================================================================== */
.aors-summary__note { display: block; margin-top: 14px; }
.aors-summary__note > span {
	display: block; margin-bottom: 6px;
	font: 600 11px/1 var(--font-d); letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
.aors-summary__note > span i { font: 500 10.5px/1 var(--font-b); letter-spacing: 0; text-transform: none; color: var(--mut); font-style: normal; }
.aors-summary__note textarea {
	width: 100%; box-sizing: border-box; resize: vertical; min-height: 68px;
	padding: 10px 12px;
	border: 1px solid var(--line); border-radius: 9px;
	background: #fff; color: var(--ink);
	font: 400 13px/1.55 var(--font-b);
}
.aors-summary__note textarea::placeholder { color: var(--mut); }
.aors-summary__note textarea:focus { outline: none; border-color: var(--g); box-shadow: 0 0 0 3px rgba(40, 219, 146, .18); }