/* ==========================================================================
   Buy Tickets — card grid, order rail, filters
   --------------------------------------------------------------------------
   Replaces the price-grid table and the fixed bottom bar.

   Loaded only on the Buy Tickets template. Existing tokens throughout — no new
   colours, no new fonts. The design this follows was already drawn in our
   palette, so nothing here invents a value.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The card grid
   -------------------------------------------------------------------------- */

.idc-tgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
	margin-bottom: 44px;
}

.idc-tcard {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 20px;
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;

	/*
	 * THREE LAYERS, TOP TO BOTTOM — draft-01's mechanism.
	 *
	 *   1. the scrim, always present;
	 *   2. --card-bg, the photograph;
	 *   3. --card-tint, the day's own colour.
	 *
	 * --card-bg is literally `none` when the product has no photograph, and
	 * `none` is a legal background layer that draws nothing. So one rule serves
	 * both states with no modifier class and nothing to keep in sync.
	 *
	 * The scrim is NOT tuned to any particular photograph. Gold text over an
	 * arbitrary image fails contrast unpredictably, and a gradient that suits the
	 * first photo uploaded will not suit the fifth. It is heaviest at the bottom,
	 * where the price and the Add button sit.
	 */
	background-image:
		linear-gradient(
			180deg,
			rgba(var(--bg-rgb), .58) 0%,
			rgba(var(--bg-rgb), .84) 55%,
			rgba(var(--bg-rgb), .95) 100%
		),
		var(--card-bg, none),
		linear-gradient(
			150deg,
			var(--card-tint, transparent) 0%,
			var(--card-edge, transparent) 55%,
			transparent 100%
		);
	background-size: cover, cover, cover;
	background-position: center, center, center;
	background-repeat: no-repeat, no-repeat, no-repeat;
	/* The card colour sits under all three, so a failed image never shows white. */
	background-color: var(--bg-card);
}

.idc-tcard:hover {
	border-color: var(--border-hover);
	transform: translateY(-3px);
}

/*
 * With a photograph the tint is invisible beneath it; without one the tint IS
 * the card. That is the point of emitting it either way — a gradient-only
 * fallback gives forty identical charcoal rectangles, and nothing on them says
 * which day you are looking at.
 */
.idc-tcard.has-image {
	/* A photograph carries its own detail, so the day edge is not needed too. */
	--card-edge: transparent;
}

/* Everything above the scrim. */
.idc-tcard > * {
	position: relative;
	z-index: 1;
}

.idc-tcard-name {
	font-family: var(--font-heading);
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--text);
	margin: 0 0 6px;
	/* Ticket names on this site are long; wrap, never overflow. */
	overflow-wrap: break-word;
}

.idc-tcard-price {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--gold);
	line-height: 1.1;
	margin-top: auto;
}

.idc-tcard-stock {
	margin: 6px 0 12px;
	font-size: .76rem;
	font-weight: 600;
}

/* Words, not only colour — a dot alone tells a colour-blind reader nothing. */
.idc-tcard-stock.is-in { color: var(--success); }
.idc-tcard-stock.is-out { color: var(--text-dim); }

.idc-tcard.is-out { opacity: .6; }

.idc-tcard-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.idc-tcard-add {
	flex: 1;
	min-width: 84px;
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(var(--gold-rgb), .35);
	border-radius: var(--radius-pill);
	color: var(--gold);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}

.idc-tcard-add:hover,
.idc-tcard-add:focus-visible {
	background: var(--gold);
	color: var(--bg);
}

.idc-tcard-add:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.idc-tcard-add.is-adding {
	opacity: .55;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. Search input in the filter bar
   -------------------------------------------------------------------------- */

.idc-filter-search {
	width: 100%;
	max-width: 380px;
	min-height: 40px;
	padding: 8px 14px;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	color: var(--text);
	font-family: var(--font-body);
	font-size: .9rem;
}

.idc-filter-search::placeholder { color: var(--text-dim); }

.idc-filter-search:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .18);
}

/* --------------------------------------------------------------------------
   3. The order rail
   --------------------------------------------------------------------------
   Laid out, not floated. The previous bar was created in JS and appended to
   <body>, so it could only be position:fixed — which is why it overlaid the last
   section and why the confirmation toast needed a hand-tuned bottom offset.
   Being a real element in the flow removes both problems.
   -------------------------------------------------------------------------- */

.idc-rail[hidden] { display: none; }

/* --------------------------------------------------------------------------
   The two-column shop
   --------------------------------------------------------------------------
   The rail used to be position:fixed, floating over the page. It is laid out
   now, as the approved design has it: a grid whose second column holds a sticky
   summary. A laid-out rail cannot overlay the last section, which the fixed one
   could and did.

   minmax(0, 1fr) rather than 1fr on the first column: a grid track sized 1fr has
   an automatic minimum, so one wide element - a long ticket name that will not
   wrap - would push the column past its share and take the rail off screen.
   -------------------------------------------------------------------------- */

/* ONE COLUMN. The 340px filter rail was removed in favour of the category
   tabs at the top of the catalogue, so there is no second track to reserve.
   Kept as a grid rather than reverting to a block so the explicit placement
   rule further down still resolves and the max-width/padding stay in one
   place. The card grids inside are auto-fill, so they simply take the width
   the rail used to occupy and fit more cards per row. */
.idc-shop {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: start;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

/* The sections inside keep their own vertical rhythm; the column supplies the
   horizontal bound, so their containers no longer need to. */
.idc-shop-main { min-width: 0; }

.idc-shop-main > .section,
.idc-shop-main > .section-sm {
	padding-left: 0;
	padding-right: 0;
}

.idc-shop-main .container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/*
 * THE STICKY COLUMN.
 *
 * One sticky wrapper holding both blocks, not two sticky siblings: siblings of
 * different heights detach from one another as you scroll, so the filter and the
 * summary would drift apart.
 *
 * It scrolls internally because four controls, six day pills and an itemised
 * order together can exceed a laptop viewport, and a sticky element taller than
 * the screen just clips - there is no way to reach its bottom.
 */
.idc-side {
	position: sticky;
	top: 104px;
	max-height: calc(100vh - 128px);
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-right: 2px;
	scrollbar-width: thin;
	scrollbar-color: var(--gold-dark) transparent;
}

.idc-rail {
	display: flex;
	flex-direction: column;
	background: rgba(var(--bg-rgb), .92);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid var(--border-hover);
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	padding: 18px;
}

/*
 * The summary stays put with nothing in it, showing an empty state, exactly as
 * every shared design file does. It used to remove itself, which left the 340px
 * grid track reserved and empty - so the column read as missing rather than as
 * waiting.
 */
.idc-rail-empty {
	margin: 0;
	padding: 18px 4px;
	text-align: center;
	color: var(--text-dim);
	font-size: .82rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   The filter, narrow
   --------------------------------------------------------------------------
   A 340px column cannot take a four-across control grid. Controls stack, and the
   day pills go two-up so six of them cost three rows instead of six.
   -------------------------------------------------------------------------- */

.idc-side .idc-filter-controls {
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 14px;
}

.idc-side .idc-daypills {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	overflow: visible;
}

.idc-side .idc-daypill {
	/* In a grid track the pill fills its cell, so nowrap would overflow it. */
	width: 100%;
	padding: 8px 12px;
}

.idc-side .idc-daypill-name,
.idc-side .idc-daypill-date {
	white-space: normal;
}

/* All Days spans the row - it is the reset, not one of the five days. */
.idc-side .idc-daypill[data-tab="all"] {
	grid-column: 1 / -1;
}

/*
 * The rail is `hidden` until something is picked, so there is no slide-in
 * transform any more - a sticky element translated by 120% would simply be
 * gone. Revealing it is the state change; is-on is kept because the drawer
 * below still uses it.
 */
.idc-rail.is-on { transform: none; }

.idc-rail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.idc-rail-title {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--text);
	margin: 0;
}

/* Only meaningful in the drawer; on desktop the list is always open. */
.idc-rail-toggle { display: none; }

.idc-rail-items {
	list-style: none;
	margin: 0;
	padding: 12px 0 0;
	overflow-y: auto;
	display: grid;
	gap: 10px;
}

.idc-rail-item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 4px 10px;
	align-items: center;
	font-size: .84rem;
}

.idc-rail-item-name {
	color: var(--text);
	overflow-wrap: break-word;
}

.idc-rail-item-qty {
	color: var(--text-dim);
	font-variant-numeric: lining-nums tabular-nums;
}

.idc-rail-item-sum {
	color: var(--gold);
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
}

.idc-rail-item-remove {
	grid-column: 3;
	grid-row: 1;
	width: 26px;
	height: 26px;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: transparent;
	color: var(--text-dim);
	font-size: .8rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.idc-rail-item-remove:hover { border-color: var(--error); color: var(--error); }
.idc-rail-item-remove:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.idc-rail-foot {
	padding-top: 14px;
	margin-top: 12px;
	border-top: 1px solid var(--border);
	display: grid;
	gap: 8px;
}

.idc-rail-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.idc-rail-label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.idc-rail-count,
.idc-rail-total {
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--text);
	font-weight: 700;
}

.idc-rail-total {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	color: var(--gold);
}

.idc-rail-add {
	width: 100%;
	min-height: 46px;
	margin-top: 4px;
}

.idc-rail-add[disabled] { opacity: .6; cursor: default; }

.idc-rail-clear {
	background: none;
	border: 0;
	padding: 6px;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: .84rem;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.idc-rail-clear:hover { color: var(--text); }
.idc-rail-clear:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4. Drawer — below 1024px
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* One column, and the rail becomes a bottom sheet - which must leave the
	   flow again, so position returns to fixed at this width only. */
	.idc-shop {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 0;
	}

	/* The column stops being a column: the filter returns to normal flow at the
	   top of the page, and only the summary becomes a bottom sheet. */
	.idc-side {
		position: static;
		max-height: none;
		overflow: visible;
		gap: 0;
	}

	.idc-side .idc-filter-controls {
		grid-template-columns: 1fr 1fr;
	}

	.idc-side .idc-daypills {
		display: flex;
		overflow-x: auto;
	}

	.idc-side .idc-daypill { width: auto; }

	.idc-side .idc-daypill[data-tab="all"] { grid-column: auto; }

	.idc-rail {
		position: fixed;
		right: 0;
		left: 0;
		top: auto;
		bottom: 0;
		width: auto;
		max-height: 80vh;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		padding: 14px 18px 18px;
		transform: translateY(100%);
	}

	.idc-rail.is-on { transform: translateY(0); }

	/* Collapsed by default: the total is what a phone needs at a glance. The
	   list is one tap away, not desktop-only. */
	.idc-rail-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background: none;
		border: 0;
		padding: 6px;
		color: var(--gold);
		font-family: var(--font-body);
		font-size: .84rem;
		font-weight: 600;
		cursor: pointer;
	}

	.idc-rail-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

	.idc-rail-caret { transition: transform .2s ease; }
	.idc-rail-toggle[aria-expanded="true"] .idc-rail-caret { transform: rotate(180deg); }

	.idc-rail-items { display: none; }
	.idc-rail.is-open .idc-rail-items { display: grid; max-height: 42vh; }

	.idc-rail-title { font-size: 1rem; }
	.idc-rail-total { font-size: 1.25rem; }
}

@media (max-width: 600px) {
	.idc-tgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
	.idc-tcard { padding: 16px 14px; }
	.idc-tcard-name { font-size: .96rem; }
	.idc-filter-search { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   5. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.idc-rail,
	.idc-tcard,
	.idc-tcard-add,
	.idc-rail-caret,
	.idc-rail-item-remove {
		transition: none;
	}

	.idc-tcard:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Card anatomy — badge row, description, price unit
   --------------------------------------------------------------------------
   The approved design puts several short tags inline under the title and a
   sentence of description beneath them, replacing the single badge and the
   dot-joined meta line that used to sit here.

   Everything below is inside .idc-tcard-body, which carries z-index so it sits
   above the background image and its scrim.
   -------------------------------------------------------------------------- */

.idc-tcard-tags {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.idc-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 4px;
	border: 1px solid var(--border);
	background: var(--bg-surface);
	color: var(--text-muted);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	/* A long feature tag must not stretch the card. */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Tone is decoration, never the message. Each tag is read as text, so a tag
 * whose colour is invisible to the reader still says "only 6 left".
 */
.idc-tag.is-kind {
	border-color: rgba(var(--gold-rgb), .3);
	color: var(--gold-light);
}

.idc-tag.is-gold {
	border-color: rgba(var(--gold-rgb), .45);
	background: rgba(var(--gold-rgb), .12);
	color: var(--gold-light);
}

.idc-tag.is-crimson {
	border-color: rgba(181, 18, 27, .5);
	background: rgba(181, 18, 27, .16);
	color: #FF9E9E;
}

.idc-tcard-desc {
	position: relative;
	z-index: 1;
	margin: 0 0 14px;
	color: var(--text-muted);
	font-size: .84rem;
	line-height: 1.45;
	/*
	 * Capped at three lines so forty cards of uneven description length still
	 * grid evenly. The text is already trimmed to 18 words server-side; this is
	 * the belt to that braces, for a long word or a narrow column.
	 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * The price unit. "€95" beside "€250" is not comparable until you know one is
 * per person and the other covers four, which is the at-a-glance comparison the
 * removed price table used to provide.
 */
.idc-tcard-unit {
	display: block;
	margin-top: 2px;
	color: var(--text-dim);
	font-family: var(--font-body);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: none;
}

/* The description is the flexible part, so the price and Add stay bottom-aligned
   across a row of cards regardless of how much text each one has. */
.idc-tcard-price {
	margin-top: auto;
}

/*
 * Kids and parking keep the accent they had on the old badge.
 *
 * These rules used to tint .idc-tcard-badge, which no longer renders. Colour is
 * not the only carrier — the tag reads "Kids 5–10" or "Car Parking" as text — but
 * the tint is a genuine scanning aid on a grid of forty cards, so it moves to the
 * new element rather than being lost with the old one.
 */
.idc-tcard.is-kids .idc-tag.is-kind {
	color: var(--saffron);
	border-color: rgba(255, 107, 0, .35);
}

.idc-tcard.is-parking .idc-tag.is-kind {
	color: var(--success);
	border-color: rgba(74, 222, 128, .3);
}

/* The payment line, read from the enabled gateway rather than asserted. */
.idc-rail-pay {
	margin: 10px 0 0;
	text-align: center;
	color: var(--text-dim);
	font-size: .74rem;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Bundle cards — the description they were missing
   --------------------------------------------------------------------------
   Passes, combos and Kojagari carried a name, an admits line and a price, and
   nothing about what the bundle includes. They are the most expensive and least
   reversible things on the page, so they were asking for the biggest commitment
   on the least information.

   .combo-card-name keeps its flex:1 — it still absorbs the slack in a card, so
   a grid row of bundles stays bottom-aligned. This sits at natural height
   underneath, which is why adding it cannot disturb a card that has no
   description to show.
   -------------------------------------------------------------------------- */

.combo-card-desc {
	flex: 0 0 auto;
	margin: 0 0 14px;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: .8rem;
	line-height: 1.45;
	/* Server-side the text is capped at 22 words; this holds the shape when a
	   long word or a narrow column defeats that. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   The filter strip
   --------------------------------------------------------------------------
   Built to the approved design: a grid of labelled controls, then one row of
   date pills. Replaces five stacked chip rows.

   The pills carry their own class rather than reusing .day-tab. Those rules sit
   in pages.css behind !important and are sized for a full-width section band —
   a 56px bottom margin and 14px/22px padding — which is exactly what made this
   panel grow a dead gap and tower over the controls beneath it. Fighting that
   on every property would have been the wrong repair.
   ========================================================================== */

.idc-filterbar {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 20px;
}

.idc-filter-controls {
	display: grid;
	/* Find is the widest because a search box is unusable at select width. */
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 16px;
	margin-bottom: 18px;
}

.idc-filter-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* The label is the point of using a select here: "Morning" alone does not say
   which question it answers. */
.idc-filter-group label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold);
}

.idc-filter-input,
.idc-filter-select {
	width: 100%;
	padding: 10px 14px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: var(--font-body);
	font-size: .88rem;
	transition: border-color .16s ease;
}

.idc-filter-select { cursor: pointer; }

.idc-filter-input:focus,
.idc-filter-select:focus {
	border-color: var(--gold);
	outline: 2px solid rgba(var(--gold-rgb), .35);
	outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Date pills
   -------------------------------------------------------------------------- */

.idc-daypills {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--gold-dark) transparent;
}

.idc-daypill {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"dot name"
		"dot date";
	gap: 0 9px;
	align-items: center;
	padding: 8px 16px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	text-align: left;
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

/* Transparent, not absent, when the day has no colour — so every pill's text
   starts at the same x and the row does not look ragged. */
.idc-daypill-dot {
	grid-area: dot;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--chip-accent, transparent);
}

.idc-daypill-name {
	grid-area: name;
	font-size: .82rem;
	font-weight: 600;
	white-space: nowrap;
}

.idc-daypill-date {
	grid-area: date;
	font-size: .7rem;
	opacity: .8;
	white-space: nowrap;
}

.idc-daypill:hover {
	border-color: var(--border-hover);
	color: var(--text);
}

.idc-daypill.is-on {
	border-color: var(--gold);
	background: linear-gradient(135deg, rgba(var(--gold-rgb), .16), rgba(181, 18, 27, .16));
	color: var(--gold-light);
}

.idc-daypill:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.idc-filter-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
}

@media (max-width: 768px) {
	.idc-filter-controls {
		/* Two up rather than one: four full-width rows is the tall panel again. */
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.idc-filter-group--find { grid-column: 1 / -1; }

	.idc-filterbar { padding: 14px; }
}

/* ==========================================================================
   Filter as a disclosure — e-commerce pattern
   --------------------------------------------------------------------------
   Built on <details>/<summary>, so collapsing is native: keyboard operable,
   correctly announced, and working before any of our script runs.
   ========================================================================== */

/* Explicit grid placement, because the side column now comes FIRST in the
   markup so that a phone meets the filter before the catalogue. Placing both
   children by hand restores the desktop order without `order`, which would have
   split the visual order from the focus order. */
/* .idc-side is gone; the catalogue is the only child and takes the one track. */
.idc-shop > .idc-shop-main { grid-column: 1; grid-row: 1; }

.idc-filterbar-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 2px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text);
}

/* Safari still paints its own triangle without this. */
.idc-filterbar-head::-webkit-details-marker { display: none; }

/* Our own marker, so the affordance rotates with state. */
.idc-filterbar-head::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 2px solid var(--gold);
	border-bottom: 2px solid var(--gold);
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.idc-filterbar[open] > .idc-filterbar-head::after { transform: rotate(-135deg); }

.idc-filterbar-head:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Count of active filters. Hidden when empty rather than showing a bare 0. */
.idc-filterbar-badge:empty { display: none; }

.idc-filterbar-badge {
	display: inline-flex;
	align-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 7px;
	border-radius: var(--radius-pill);
	background: var(--gold);
	color: var(--bg);
	font-family: var(--font-body);
	font-size: .7rem;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Facet groups
   -------------------------------------------------------------------------- */

.idc-fgroup { border-top: 1px solid var(--border); padding-top: 10px; }

.idc-fgroup-head {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold);
	padding-bottom: 8px;
}

.idc-fgroup-head::-webkit-details-marker { display: none; }

.idc-fgroup-head::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .7;
	transition: transform .18s ease;
}

.idc-fgroup[open] > .idc-fgroup-head::after { transform: rotate(-135deg); }

.idc-fgroup-head:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* The groups supply their own headings now, so the old label column is gone. */
.idc-side .idc-filter-controls { display: block; }
.idc-side .idc-filter-group    { margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   Applied-filter chips
   --------------------------------------------------------------------------
   The panel can be shut, so something must still say what is narrowing the list.
   -------------------------------------------------------------------------- */

.idc-applied[hidden] { display: none; }

.idc-applied {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 0 4px;
}

.idc-applied-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 4px 10px;
	border: 1px solid rgba(var(--gold-rgb), .4);
	border-radius: var(--radius-pill);
	background: rgba(var(--gold-rgb), .1);
	color: var(--gold-light);
	font-size: .72rem;
	font-weight: 600;
}

.idc-applied-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 24px, so it is a real touch target rather than a decorative ×. */
	width: 24px;
	height: 24px;
	margin: -4px -2px -4px 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: inherit;
	font-size: .95rem;
	line-height: 1;
	cursor: pointer;
}

.idc-applied-x:hover { background: rgba(var(--gold-rgb), .22); }

.idc-applied-x:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
}

/* ==========================================================================
   Spacing — mobile first
   --------------------------------------------------------------------------
   These values were 23 inline style attributes in the template: margin-bottom
   48px, max-width 600px, padding 48px 40px, and so on. Inline styles outrank
   media queries, so a 48px gap between every section heading and its content
   could not be reduced on a 375px screen by any stylesheet. That is why mobile
   spacing could not be "fixed in the CSS" — the numbers had to leave the markup
   first.

   Written mobile-first: the phone value is the base and `min-width` adds room as
   the screen earns it. The rest of this file is still max-width; these are the
   rules that were rewritten, not a conversion of the whole sheet.
   ========================================================================== */

.idc-sechead   { margin-bottom: 24px; }
.idc-secfoot   { margin-top: 24px; text-align: center; }
.idc-stockline { justify-content: center; margin-bottom: 14px; }

/* A measure, not a fixed width: 60ch stays readable at any text size, where
   600px stops being a sensible line length as soon as the user scales up. */
.idc-seclede {
	max-width: 60ch;
	margin-inline: auto;
	color: var(--text-muted);
}

.idc-measure { max-width: 60ch; margin-inline: auto; }
.idc-measure--center { text-align: center; }

.idc-bignum {
	font-size: 2rem;
	margin-bottom: 12px;
	line-height: 1.1;
}

.idc-panel {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 16px;
	/* 48px 40px on a 375px screen left 295px of usable width. */
	padding: 24px 18px;
}

@media (min-width: 640px) {
	.idc-sechead   { margin-bottom: 36px; }
	.idc-secfoot   { margin-top: 32px; }
	.idc-stockline { margin-bottom: 18px; }
	.idc-bignum    { font-size: 2.5rem; margin-bottom: 14px; }
	.idc-panel     { padding: 32px 28px; }
	.idc-measure, .idc-seclede { max-width: 68ch; }
}

@media (min-width: 1025px) {
	.idc-sechead   { margin-bottom: 48px; }
	.idc-secfoot   { margin-top: 40px; }
	.idc-stockline { margin-bottom: 20px; }
	.idc-bignum    { font-size: 3rem; margin-bottom: 16px; }
	.idc-panel     { padding: 48px 40px; }
}

/* --------------------------------------------------------------------------
   The shop grid and cards, small screens
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	/* auto-fill at 230px forces two cramped columns on a 375px screen; one
	   readable card beats two unreadable ones. */
	.idc-tgrid {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-bottom: 28px;
	}

	.idc-tcard { padding: 16px; }

	/* Stacked, so Type / For / When are full-width taps rather than half-width. */
	.idc-side .idc-filter-controls { display: block; }

	.idc-side .idc-daypills {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		/* Momentum scrolling with a snap, so a pill never sits half off-screen. */
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.idc-side .idc-daypill {
		width: auto;
		scroll-snap-align: start;
	}

	.idc-shop { padding: 0 14px; gap: 0; }
}

/* ==========================================================================
   Checkbox facets
   --------------------------------------------------------------------------
   Replaces the three <select> dropdowns and the day pill row. A dropdown can
   only ever hold one value per axis, so "Adult and Kids" or "Morning and
   Evening" were not expressible at all — that, not the styling, is what changed.
   ========================================================================== */

.idc-fopts {
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.idc-fopt {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 2px 2px;
	border-radius: var(--radius-sm);
}

.idc-fopt:hover { background: rgba(var(--gold-rgb), .06); }

/*
 * The native box, tinted rather than replaced. A custom control would mean
 * rebuilding focus, checked and indeterminate states by hand, and getting one of
 * them wrong is how a filter becomes unusable by keyboard.
 */
.idc-fopt-box {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--gold);
	cursor: pointer;
	flex: none;
}

.idc-fopt-box:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.idc-fopt-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px 8px;
	/* The label is the touch target, so it gets the height, not the box. */
	min-height: 34px;
	padding: 4px 0;
	cursor: pointer;
	font-size: .84rem;
	color: var(--text);
	line-height: 1.3;
}

.idc-fopt-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--chip-accent, var(--gold));
	flex: none;
}

.idc-fopt-text { font-weight: 500; }

/* The date on a day row. Its own line at narrow widths, inline when there is room. */
.idc-fopt-sub {
	flex-basis: 100%;
	font-size: .7rem;
	color: var(--text-dim);
}

/*
 * The live count. Tabular figures so the column of numbers does not jitter as
 * they change, and aria-hidden in the markup because the running "N tickets"
 * total already announces the result.
 */
.idc-fopt-count {
	font-size: .72rem;
	color: var(--text-dim);
	font-variant-numeric: tabular-nums lining-nums;
	min-width: 2ch;
	text-align: right;
}

/*
 * An option that would return nothing is disabled, not hidden. Hiding it makes a
 * panel that reshuffles itself while you read it; dimming it says "this
 * combination is empty" and leaves the layout still.
 */
.idc-fopt.is-dead { opacity: .38; }

.idc-fopt.is-dead .idc-fopt-label,
.idc-fopt.is-dead .idc-fopt-box { cursor: not-allowed; }

.idc-fopt.is-dead:hover { background: none; }

/* A ticked row should be findable after scrolling the panel. */
.idc-fopt-box:checked + .idc-fopt-label .idc-fopt-text { color: var(--gold-light); }

/* Long facets get their own scroll rather than pushing the summary off-screen. */
.idc-fgroup .idc-fopts { max-height: 320px; overflow-y: auto; }

/* ==========================================================================
   Consistent card imagery, whatever the source file
   --------------------------------------------------------------------------
   The six ticket images are 2400x1792 today, but nothing guarantees the next
   one will be. `cover` on a card of fixed proportion means any source size — any
   ratio — is cropped to the same shape at every viewport, so the grid stays even
   and no card is taller than its neighbours because its photograph was.
   ========================================================================== */

.idc-tcard {
	/* A floor, not a fixed height: the card still grows for a long name or a
	   third line of description, but never collapses so far that the image
	   becomes a stripe. */
	min-height: 300px;
}

.combo-card,
.special-card { min-height: 280px; }

/* The stepper on a bundle card sits under the button, centred like it. */
.combo-card .idc-stepper,
.special-card .idc-stepper { margin: 10px auto 0; }

@media (max-width: 640px) {
	.idc-tcard { min-height: 260px; }
	.combo-card, .special-card { min-height: 240px; }
}

/* The filter box sat flush against the maroon date/venue strip above it, with
   no breathing room. .idc-shop-main (heading + cards) keeps its own rhythm
   untouched — only this column is nudged down. */
.idc-side {
	margin-top: 32px;
}

/* Readability: the card eyebrow / combo headline was --text-dim (too faint).
   Lift it to the readable muted tone with a touch more weight. Higher
   specificity so it wins over pages.css regardless of load order. */
.combo-card .combo-card-family {
    color: var(--text-muted);
    font-weight: 600;
}
.combo-card .combo-card-desc { color: var(--text-muted); }

/* ==========================================================================
   ORDER RAIL — bottom sheet at every width
   --------------------------------------------------------------------------
   The rail used to be the lower half of the 340px sticky column. That column
   was removed with the filter sidebar so the catalogue could use the full
   width, which left the basket summary with nowhere to sit.

   Rather than invent a desktop appearance for it, this promotes the treatment
   the design already specified for phones — fixed to the bottom, collapsed to
   the total, expanding on tap — to all widths. Those rules were already
   written and approved below at max-width:1024px; these are the same
   declarations, unconditional, and they come later in the file so they win
   without needing !important.
   ========================================================================== */
.idc-rail {
	position: fixed;
	right: 0;
	left: 0;
	top: auto;
	bottom: 0;
	width: auto;
	max-height: 80vh;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	padding: 14px 18px 18px;
	transform: translateY(100%);
	z-index: 70;
}

.idc-rail.is-on { transform: translateY(0); }

/* Collapsed to the total by default; the item list is one tap away. */
.idc-rail-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 6px;
	color: var(--gold);
	font-family: var(--font-body);
	font-size: .84rem;
	font-weight: 600;
	cursor: pointer;
}
.idc-rail-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.idc-rail-caret { transition: transform .2s ease; }
.idc-rail-toggle[aria-expanded="true"] .idc-rail-caret { transform: rotate(180deg); }

.idc-rail-items { display: none; }
.idc-rail.is-open .idc-rail-items { display: grid; max-height: 42vh; }

/* The sheet overlays the foot of the page, so the last section needs room to
   clear it — the column used to guarantee that simply by existing. */
.idc-shop-main { padding-bottom: 96px; }

/* Centred and bounded on wide screens: a full-bleed 1440px bar for one total
   reads as a cookie banner, not a basket. */
@media (min-width: 1025px) {
	.idc-rail {
		left: 50%;
		right: auto;
		transform: translate(-50%, 100%);
		width: min(680px, calc(100% - 48px));
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		border-left: 1px solid var(--border-hover);
		border-right: 1px solid var(--border-hover);
	}
	.idc-rail.is-on { transform: translate(-50%, 0); }
}