/*
 * Shop pages (ticket list, cart "Teilnehmende", checkout, thank-you page, my account, single
 * tickets), after the Figma design "Hebammenkongress.at (Copy)", frame 2016:510
 * (.plan/shop-design.md). Measures of the 1728 px frame: header on the gradient, from 105 px a
 * white band across the window down to 50 px above the footer; content from 180 px, 1092 px wide;
 * title at 159 px, steps at 270 px. Fields, buttons and notices keep their look (theme.css).
 */

/* Frame */

/* The gradient of the design (and of the text pages) instead of background.png: the frosted
   header of phones lays the same gradient over it, so header and page match (Dennis, 13.11.). */
html:has(> body.shop-page),
body.shop-page {
	background: linear-gradient(90deg, #99f 44.231%, #9bff8c 81.731%);
}

body.shop-page {
	color: #000;
}

body.shop-page .site-main {
	max-width: none;
	margin: 3.1875rem 0 0 !important; /* white from 105 px: the header is 54 px high (theme.css sets 2rem !important) */
	padding: 3.375rem var(--text-edge) 6.25rem var(--text-start); /* title at 159 px */
	border-radius: 0;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.75rem;
}

body.shop-page .site-main > * {
	max-width: 68.25rem; /* 1092 px */
}

body.shop-page .text-footer {
	margin-top: 3.125rem; /* 50 px below the white band */
}

/* Page title: as the text pages, in the purple of the design */

body.shop-page :is(.entry-title, .product_title) {
	margin: 0 0 4.0625rem; /* steps at 270 px */
	color: #99f;
	font-family: var(--font-base);
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.15;
}

/* Steps: "1 Tickets  2 Teilnehmende  3 Bezahlen", filled circles, the current one green */

body.shop-page .maia-steps ol {
	gap: 0.5rem 2.5rem;
	margin: 0 0 6.25rem;
}

body.shop-page .maia-step {
	color: #000;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.75rem;
	text-transform: uppercase;
}

body.shop-page .maia-step,
body.shop-page .maia-step a {
	display: flex;
	gap: 0.375rem;
	align-items: center;
}

body.shop-page .maia-step-number {
	width: 1.45rem; /* 23 px */
	height: 1.45rem;
	border: 0;
	background: #969eff;
	color: #fff;
	font-size: 1rem;
	letter-spacing: 0;
	line-height: 1;
}

body.shop-page .maia-step--current .maia-step-number {
	background: #9bff8c;
	color: #000;
}

/* The hand on everything that can be clicked (Dennis, 13.11.). */
body.shop-page :is(.maia-steps a, .maia-ticket-details summary, table.cart a.remove) {
	cursor: pointer;
}

body.shop-page .site-main .maia-steps a:hover .maia-step-label {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Ticket list: group title, ticket title with its dates, one row per price between lines */

body.shop-page .maia-tickets-group + .maia-tickets-group {
	margin-top: 5.9375rem; /* 95 px */
}

body.shop-page .maia-tickets-group-title {
	margin: 0 0 3.1875rem; /* ticket title at 477 px */
	font-size: 1.875rem;
	font-weight: 500;
	line-height: 1.75rem;
}

/* The closing line below "Details", so the ticket reads as one group. */
body.shop-page .maia-ticket {
	margin: 0;
	padding: 0 0 1.5rem;
	border: 0;
	border-bottom: 1px solid #000;
	border-radius: 0;
}

body.shop-page .maia-ticket + .maia-ticket {
	margin-top: 3.75rem;
}

body.shop-page .maia-ticket-title {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.75rem;
	text-transform: uppercase;
}

body.shop-page .maia-ticket-meta {
	margin: 0;
	color: rgb(0 0 0 / 0.5);
}

body.shop-page .maia-ticket-options {
	margin: 1.0625rem 0 0; /* first line 17 px below the dates */
}

/* The counter keeps its look of before (theme.css) and fills the 139 px of the placeholder. At
   least 24 px between it and anything around it, lines and text, at every width (Dennis, 13.11.):
   it starts 24 px below the line, name and price put their first line on its middle. */
body.shop-page .maia-tickets {
	--qty-height: 3.0625rem; /* 49 px: the counter of theme.css */
	--qty-gap: 1.5rem;
}

body.shop-page .maia-ticket-option {
	grid-template-columns: 1fr auto minmax(8.6875rem, auto);
	column-gap: 1.3125rem;
	align-items: start;
	box-sizing: border-box;
	padding: var(--qty-gap) 0;
	border-top: 1px solid #000;
}

body.shop-page :is(.maia-ticket-option-name, .maia-ticket-option-price),
body.shop-page .maia-ticket--single :is(.maia-ticket-header, .maia-ticket-not-bookable) {
	margin-top: max(0px, calc((var(--qty-height) - 1lh) / 2));
}

body.shop-page .maia-ticket-option-proof {
	color: inherit;
	font-size: inherit;
}

body.shop-page .maia-ticket-option-price {
	text-align: right;
	white-space: nowrap;
}

body.shop-page .maia-ticket-option .maia-qty {
	justify-self: end;
	margin-block: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
}

body.shop-page .maia-ticket-not-bookable {
	border-top-color: #000;
}

/* A ticket with several prices (categories, one counter each): the closing line doubled, so it
   stands apart from the price rows inside (Dennis, 13.11.). Two 1 px lines 4 px apart: the
   border, and a line drawn as background just above it ("double" would make the lines thicker as
   the gap grows). */
body.shop-page .maia-ticket:not(.maia-ticket--single) {
	background: linear-gradient(#000, #000) left 0 bottom 4px / 100% 1px no-repeat;
}

/* A ticket with one price (Maia: maia-ticket--single): title and dates on the row of price and
   counter, a line above and below the ticket; several of them one after another form a list with
   one line between (Dennis, 13.11.). The option's own name cell is empty but for a proof note. */
body.shop-page .maia-ticket--single {
	display: grid;
	grid-template-columns: 1fr auto minmax(8.6875rem, auto);
	column-gap: 1.3125rem;
	align-items: start;
	padding-top: var(--qty-gap);
	border-top: 1px solid #000;
}

body.shop-page .maia-ticket--single + .maia-ticket--single {
	margin-top: 0;
	border-top: 0;
}

body.shop-page .maia-ticket--single :is(.maia-ticket-options, .maia-ticket-option) {
	display: contents;
}

body.shop-page .maia-ticket--single .maia-ticket-header {
	grid-area: 1 / 1;
}

body.shop-page .maia-ticket--single .maia-ticket-option-name {
	grid-area: 2 / 1;
}

body.shop-page .maia-ticket--single .maia-ticket-option-price {
	grid-area: 1 / 2;
}

body.shop-page .maia-ticket--single :is(.maia-qty, .maia-ticket-soldout) {
	grid-area: 1 / 3;
	justify-self: end;
}

body.shop-page .maia-ticket--single .maia-ticket-details {
	grid-area: 3 / 1 / auto / -1;
	margin-top: var(--qty-gap);
}

/* "Buchbar ab …" instead of price and counter: on the title's row, at the right. */
body.shop-page .maia-ticket--single .maia-ticket-not-bookable {
	grid-area: 1 / 2 / auto / -1;
	margin: 0;
	padding: 0;
	border: 0;
}

/* "Details" below the options, as the toggle of the programme */

body.shop-page .maia-ticket-details {
	margin-top: 0;
}

/* Chrome's scroll anchoring would shift the page back while a ticket's details grow
   (assets/js/details.js), which makes the tickets below stutter; as on the programme. */
body.shop-page .maia-tickets-form {
	overflow-anchor: none;
}

body.shop-page .maia-ticket-details summary {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	font-size: 1rem;
	letter-spacing: 0.03em;
	list-style: none;
	text-transform: uppercase;
}

body.shop-page .maia-ticket-details summary::-webkit-details-marker {
	display: none;
}

body.shop-page .maia-ticket-details summary::after {
	content: "";
	width: 1.0859rem;
	height: 1.0859rem;
	background: url("../img/details-arrow.svg") center / contain no-repeat;
	transition: transform 0.2s; /* as fast as the opening (assets/js/details.js) */
}

body.shop-page .maia-ticket-details[open] summary::after {
	transform: rotate(180deg);
}

/* While the text folds in (assets/js/details.js), the arrow shows the closed state already. */
body.shop-page .maia-ticket-details[open].is-closing summary::after {
	transform: none;
}

body.shop-page .maia-ticket-details summary:hover {
	text-decoration: underline;
}

body.shop-page .maia-ticket-details summary:focus-visible {
	outline: 2px solid #000;
	outline-offset: 4px;
}

/* The text (or only the link "Mehr zum Ticket") a little away from "Details". */
body.shop-page .maia-ticket-details summary + * {
	margin-top: 0.75rem;
}

body.shop-page .maia-ticket-details-text p,
body.shop-page .maia-ticket-details > p {
	margin: 0 0 0.75rem;
}

body.shop-page .maia-ticket-details > :last-child {
	margin-bottom: 0;
}

body.shop-page .maia-tickets-footer {
	margin-top: 3.75rem;
}

/* Section titles of cart, checkout, thank-you page and account: as the group titles */

body.shop-page :is(
	.cart_totals > h2,
	.woocommerce-billing-fields > h3,
	.woocommerce-additional-fields > h3,
	[id="order_review_heading"], /* not #…: an id in :is() would outweigh the rule below */
	.u-column1 > h2,
	.u-column2 > h2,
	.woocommerce-order-details__title,
	.woocommerce-column__title,
	.woocommerce-MyAccount-content > h2,
	.woocommerce-MyAccount-content > h3
) {
	margin: 3.75rem 0 2rem;
	font-size: 1.875rem;
	font-weight: 500;
	line-height: 1.75rem;
}

body.shop-page .woocommerce :is(.u-column1, .u-column2, .woocommerce-billing-fields) > :is(h2, h3):first-child {
	margin-top: 0;
}

/* Tables (cart, order review, totals, orders): no box, the rows between black lines as the
   ticket options. */

body.shop-page .woocommerce table.shop_table {
	margin: 0 0 3rem;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}

body.shop-page .woocommerce table.shop_table :is(th, td) {
	padding: 1rem 1.3125rem 1rem 0;
	border: 0;
	border-top: 1px solid #000;
	background: none;
	font-weight: 500;
	line-height: 1.75rem;
	vertical-align: top; /* every cell starts on the same line (Dennis, 13.11.) */
}

body.shop-page .woocommerce table.shop_table :is(th, td):last-child {
	padding-right: 0;
}

/* Amounts on the right: the last column of cart, order review and totals */
body.shop-page .woocommerce :is(table.cart, .woocommerce-checkout-review-order-table, .cart_totals table, .woocommerce-table--order-details) :is(th, td):last-child:not([colspan]) {
	text-align: right;
}

body.shop-page .woocommerce table.shop_table thead th {
	padding-top: 0;
	border-top: 0;
	font-size: 1rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

body.shop-page .woocommerce table.shop_table > :last-child > tr:last-child > * {
	border-bottom: 1px solid #000;
}

/* The total: one weight, as large as the rest (theme.css makes it larger and bold elsewhere). */
body.shop-page .woocommerce :is(.cart_totals, .woocommerce-checkout-review-order-table) tr.order-total .amount {
	font-size: inherit;
	font-weight: 500;
	line-height: inherit;
}

/* Attendee and days below a ticket in the order review: "Gilt an: Tag 1 …" on one line like
   "Teilnehmer:in: …" (WooCommerce floats the key and sets the value as a paragraph, which drops
   below it), the link back to step 2 on a line of its own below the name (Dennis, 13.11.). */
body.shop-page .woocommerce table.shop_table dl.variation {
	margin: 0.5rem 0 0;
}

body.shop-page .woocommerce table.shop_table dl.variation :is(dt, dd) {
	display: inline;
	float: none;
	margin: 0;
	padding: 0;
	font-weight: 500;
}

body.shop-page .woocommerce table.shop_table dl.variation dd::after {
	content: "\A";
	white-space: pre;
}

body.shop-page .woocommerce table.shop_table dl.variation dd p {
	display: inline;
	margin: 0;
}

body.shop-page .woocommerce table.shop_table dl.variation dd p + p {
	display: block;
}

/* The link back to step 2 in purple, underlined on hover only (Dennis, 13.11.). */
body.shop-page .site-main a.maia-edit-attendee {
	color: #99f;
	text-decoration: none;
}

body.shop-page .site-main a.maia-edit-attendee:hover {
	text-decoration: underline;
}

/* A value ending with that link is already a block: no extra line break after it. */
body.shop-page .woocommerce table.shop_table dl.variation dd:has(p + p)::after {
	content: none;
}

/* The link into the cart lands on the ticket's fields below the sticky header of phones. */
body.shop-page .maia-attendee {
	scroll-margin-top: 8rem;
}

/* Cart "Teilnehmende": one ticket per row, its price on the right; no empty picture column */

body.shop-page .woocommerce table.cart :is(th, td).product-thumbnail {
	display: none;
}

/* The cross beside the ticket title, centred on its first line (Dennis, 13.11.). */
body.shop-page .woocommerce table.cart td.product-remove {
	width: 2.5rem;
	padding-right: 0.5rem;
	vertical-align: top;
}

/* Remove a ticket: the cross of the open menu button (site-menu.css), two thin lines corner to
   corner of a 47 × 38 box, in purple (Dennis, 13.11.). The "×" stays for screen readers in the
   link's label; WooCommerce colours it red with !important. */
body.shop-page .woocommerce table.cart a.remove {
	position: relative;
	display: block;
	width: 1.5rem;
	height: calc(1.5rem * 38 / 47.28);
	margin-top: calc((1.75rem - 1.5rem * 38 / 47.28) / 2);
	border-radius: 0;
	background: none !important;
	color: transparent !important;
	font-size: 0;
}

body.shop-page .woocommerce table.cart a.remove::before,
body.shop-page .woocommerce table.cart a.remove::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 2px;
	background: #99f;
	transition: background-color 0.15s;
}

body.shop-page .woocommerce table.cart a.remove::before {
	transform: rotate(39deg);
}

body.shop-page .woocommerce table.cart a.remove::after {
	transform: rotate(-39deg);
}

body.shop-page .woocommerce table.cart a.remove:hover::before,
body.shop-page .woocommerce table.cart a.remove:hover::after {
	background: #000;
}

body.shop-page .woocommerce table.cart a.remove:focus-visible {
	outline: 2px solid #000;
	outline-offset: 4px;
}

body.shop-page .woocommerce table.cart :is(th, td).product-price {
	text-align: right;
	white-space: nowrap;
}

body.shop-page .woocommerce table.cart td.actions {
	padding: 1.5rem 0;
}

/* Buttons inside notices ("E-Mail-Adresse bestätigen", "Warenkorb anzeigen") and the actions of
   an order in "My account" (Bezahlen, Anzeigen, Abbrechen): plain text links, as the other links
   of the page; the actions one below the other, with room between (Dennis, 13.11.). */
body.shop-page .woocommerce :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) .button,
body.shop-page .woocommerce .woocommerce-orders-table__cell-order-actions .button {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

body.shop-page .woocommerce :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) .button:hover,
body.shop-page .woocommerce .woocommerce-orders-table__cell-order-actions .button:hover {
	background: none;
	color: inherit;
	text-decoration-thickness: 2px;
}

body.shop-page .woocommerce :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) .button {
	margin-left: 1.5rem;
}

body.shop-page .woocommerce .woocommerce-orders-table__cell-order-actions .button {
	display: block;
	width: fit-content;
	margin: 0;
}

body.shop-page .woocommerce .woocommerce-orders-table__cell-order-actions .button + .button {
	margin-top: 0.5rem;
}

/* Navigation of "My account": only the page shown is underlined, the others on hover, as the
   links of the header (Dennis, 13.11.). */
body.shop-page .woocommerce-MyAccount-navigation ul {
	margin: 0 0 2rem; /* on phones the content follows below */
	padding: 0;
	list-style: none; /* no bullets (Dennis, 13.11.) */
}

body.shop-page .woocommerce-MyAccount-navigation li + li {
	margin-top: 0.75rem; /* room between the links (Dennis, 13.11.) */
}

body.shop-page .woocommerce-MyAccount-navigation a,
body.shop-page .woocommerce-orders-table__cell-order-number a {
	text-decoration: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* The order numbers in the list as well: underlined on hover only (Dennis, 13.11.). */
body.shop-page .woocommerce-MyAccount-navigation :is(li.is-active a, a:hover),
body.shop-page .woocommerce-orders-table__cell-order-number a:hover {
	text-decoration-line: underline;
}

/* Notices: 64 px below the last of them, before what follows (a ticket group, the cart, the
   list of orders); between two notices their usual room (Dennis, 13.11.). */
body.shop-page :is(.woocommerce-error, .woocommerce-info, .woocommerce-message, .maia-notice):not(:has(+ :is(.woocommerce-error, .woocommerce-info, .woocommerce-message, .maia-notice))) {
	margin-bottom: 4rem;
}

@media (max-width: 900px) {
	body.shop-page :is(.woocommerce-error, .woocommerce-info, .woocommerce-message, .maia-notice):not(:has(+ :is(.woocommerce-error, .woocommerce-info, .woocommerce-message, .maia-notice))) {
		margin-bottom: 3rem;
	}
}

/* Login, registration and the login on the checkout: the fields without a box around them */

body.shop-page .woocommerce form:is(.login, .register, .lost_reset_password, .checkout_coupon) {
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* Square corners for buttons, notices and fields (Dennis, 13.11.); the counter stays a pill.
   !important: theme.css and WooCommerce round them with selectors of many weights. */

body.shop-page :is(
	.button,
	input:not([type="checkbox"], [type="radio"]),
	select,
	textarea,
	.select2-selection,
	.select2-dropdown,
	.woocommerce-error,
	.woocommerce-info,
	.woocommerce-message,
	.maia-notice,
	.maia-attendee-warning,
	.maia-transfer-deadline,
	.maia-thankyou-proof
) {
	border-radius: 0 !important;
}

body.shop-page input[type="file"]::file-selector-button {
	border-radius: 0;
}

/* WooCommerce frames every field it has checked: valid ones green, wrong ones red. Only what
   is wrong stands out (Dennis, 13.11.): valid fields keep their usual frame; while typing in
   them the purple focus stays. */
body.shop-page .woocommerce form .form-row.woocommerce-validated :is(input.input-text, select):not(:focus),
body.shop-page .woocommerce form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection {
	border-color: var(--color-field-border);
}

/* WooCommerce focuses a new notice for screen readers (role="alert"); the browser then draws its
   focus ring around it. The notice is no control: no ring. */
body.shop-page :is(.woocommerce-error, .woocommerce-info, .woocommerce-message):focus {
	outline: 0;
}

/* Tablets and phones: the type of the text pages */

@media (max-width: 900px) {
	body.shop-page .site-main {
		padding-top: 2.5rem;
		padding-bottom: 4rem;
		font-size: 1.0625rem;
		line-height: 1.5;
	}

	body.shop-page :is(.entry-title, .product_title) {
		margin-bottom: 2rem;
		font-size: 1.75rem;
	}

	body.shop-page .maia-steps ol {
		gap: 0.5rem 1.5rem;
		margin-bottom: 3rem;
	}

	body.shop-page .maia-tickets-group + .maia-tickets-group {
		margin-top: 4rem;
	}

	body.shop-page .maia-tickets-group-title,
	body.shop-page :is(
		.cart_totals > h2,
		.woocommerce-billing-fields > h3,
		.woocommerce-additional-fields > h3,
		[id="order_review_heading"],
		.u-column1 > h2,
		.u-column2 > h2,
		.woocommerce-order-details__title,
		.woocommerce-column__title,
		.woocommerce-MyAccount-content > h2,
		.woocommerce-MyAccount-content > h3
	) {
		margin-bottom: 2rem;
		font-size: 1.375rem;
		line-height: 1.2;
	}

	body.shop-page .maia-ticket + .maia-ticket {
		margin-top: 2.5rem;
	}

	/* One-row tickets one after another stay a list, as on the desktop. */
	body.shop-page .maia-ticket--single + .maia-ticket--single {
		margin-top: 0;
	}

	body.shop-page .maia-ticket-title {
		font-size: 1.0625rem;
		line-height: 1.5;
	}

}

/* Phones: WooCommerce stacks the cells of cart and totals; one line above each ticket only */

@media (max-width: 768px) {
	body.shop-page .woocommerce table.cart tr.cart_item > td {
		border-top: 0;
	}

	/* The cross at the right of the ticket title instead of on a row of its own. */
	body.shop-page .woocommerce table.cart tr.cart_item {
		position: relative;
	}

	body.shop-page .woocommerce table.cart tr.cart_item > td.product-remove {
		position: absolute;
		top: calc(1rem + 1px); /* the padding and the line of the title's cell */
		right: 0;
		width: auto;
		padding: 0;
	}

	body.shop-page .woocommerce table.cart tr.cart_item > td.product-name {
		padding-right: 2.5rem;
		border-top: 1px solid #000;
	}


	body.shop-page .woocommerce table.shop_table_responsive tr td::before {
		font-weight: 500;
	}

	/* A link inside a notice below its text instead of floating into it. */
	body.shop-page .woocommerce :is(.woocommerce-error, .woocommerce-info, .woocommerce-message):has(> .button) {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	body.shop-page .woocommerce :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) > .button {
		order: 1;
		float: none;
		margin: 0.5rem 0 0;
	}

	/* Orders in "My account": the number on top (WooCommerce hides it here), one line above each
	   order, the actions on the right below each other. */
	body.shop-page .woocommerce .woocommerce-orders-table tbody th {
		display: block;
		padding: 1rem 0 0.25rem;
		border-top: 1px solid #000;
	}

	/* Between the fields of one order a light grey line, between the orders the black one
	   (Dennis, 13.11.). */
	body.shop-page .woocommerce .woocommerce-orders-table tbody td {
		padding: 0.5rem 0;
		border-top: 1px solid var(--color-border);
	}

	/* Each order ends with some room; only the last one with a line (the rule for the last row
	   of every table above draws one below each of its cells). */
	body.shop-page .woocommerce table.shop_table.woocommerce-orders-table > tbody > tr > :last-child {
		padding-bottom: 1rem;
	}

	body.shop-page .woocommerce table.shop_table.woocommerce-orders-table > tbody > tr:last-child > * {
		border-bottom: 0;
	}

	body.shop-page .woocommerce table.shop_table.woocommerce-orders-table > tbody > tr:last-child > :last-child {
		border-bottom: 1px solid #000;
	}

	body.shop-page .woocommerce .woocommerce-orders-table__cell-order-actions .button {
		margin-left: auto;
	}
}

/* Phones: name above, price and counter below it on the right */

@media (max-width: 560px) {
	body.shop-page .maia-ticket-option {
		grid-template-columns: 1fr auto;
		row-gap: var(--qty-gap);
		align-items: center;
	}

	/* Name and title above the counter here, price beside it: no shifting down. */
	body.shop-page :is(.maia-ticket-option-name, .maia-ticket-option-price),
	body.shop-page .maia-ticket--single :is(.maia-ticket-header, .maia-ticket-not-bookable) {
		margin-top: 0;
	}

	body.shop-page .maia-ticket-option-name {
		grid-column: 1 / -1;
	}

	body.shop-page .maia-ticket-option-price {
		justify-self: end;
	}

	body.shop-page .maia-ticket--single {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	body.shop-page .maia-ticket--single .maia-ticket-header,
	body.shop-page .maia-ticket--single .maia-ticket-option-name {
		grid-column: 1 / -1;
	}

	body.shop-page .maia-ticket--single .maia-ticket-option-price {
		grid-area: 3 / 1;
		justify-self: end;
		margin-top: var(--qty-gap);
	}

	body.shop-page .maia-ticket--single .maia-ticket-option :is(.maia-qty, .maia-ticket-soldout) {
		grid-area: 3 / 2;
		margin-top: var(--qty-gap);
	}

	body.shop-page .maia-ticket--single .maia-ticket-details {
		grid-row: 4;
	}

	body.shop-page .maia-ticket--single .maia-ticket-not-bookable {
		grid-area: 3 / 1 / auto / -1;
		margin-top: 0.5rem;
	}

	/* Maia puts the counter on a row of its own below 480 px. */
	body.shop-page .maia-ticket-option :is(.maia-qty, .maia-ticket-soldout) {
		grid-column: auto;
	}
}