/**
 * AWWO® CMS - Site
 * The site visitors see: the canvas, Top Bar, Header, Sub Header, the page,
 * the Footer and the site's buttons. Fonts, fields and the colours come
 * from awwo-cms-system.css (loaded first): the CMS's palette, light or
 * dark, with Settings' colours; borders and shadows are the CMS's too.
 * Sizes and layout are variables, set by Appearance (AppearanceRenderer);
 * the defaults here are the AWWO® theme's, for a page drawn without them.
 *
 * © AWWO® (Advertise What We Offer)
 * Unauthorized use, copying, modification, distribution, or reverse engineering is strictly prohibited without prior written authorization from CITIPRO WORLD™.
 * @license LicenseRef-Proprietary
 */

:root {
	--awwo-cms-site-canvas-width: 100%;
	--awwo-cms-site-canvas-padding: 0px;
	--awwo-cms-site-page-max-width: 1080px;
	--awwo-cms-site-button-timer: 0.6s;
}

/* Canvas ------------------------------------------------------------------ */

/* The window: the CMS's background; the canvas sits in it, its padding
   around the canvas. */
body.awwo-cms-site {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 100vh;
	margin: 0;
	padding: var(--awwo-cms-site-canvas-padding);
	background-color: var(--awwo-cms-bg);
	color: var(--awwo-cms-text);
	font: 15px/1.6 var(--awwo-cms-font);
	text-wrap: pretty;
}

/* The canvas: Top Bar to Footer, as wide as Content Width; placed top,
   centre or bottom in the window. */
.awwo-cms-site-canvas {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--awwo-cms-site-canvas-width);
	margin: 0 auto auto;
	/* Clipped, without becoming a scroll box (a sticky header still sticks). */
	overflow: clip;
}

/* Top: the canvas fills the window, so the Footer stays at its bottom. */
.awwo-cms-site-align-top .awwo-cms-site-canvas {
	flex: 1;
}

.awwo-cms-site-align-center .awwo-cms-site-canvas {
	margin: auto;
}

.awwo-cms-site-align-bottom .awwo-cms-site-canvas {
	margin: auto auto 0;
}

/* Zones: Top Bar, Sub Header, Footer ------------------------------------- */

/* Each zone runs the canvas's width, its content (menu and text) within
   its Max Width, on its block's surface; text and links muted, a link
   green when hovered (as the CMS's). */
.awwo-cms-site-zone {
	display: flex;
	justify-content: center;
	min-height: var(--zone-height);
	color: var(--awwo-cms-muted);
	--menu-link: var(--awwo-cms-muted);
	--menu-hover: var(--awwo-cms-ok);
}

/* The Top Bar and Bottom Bar: a hairline from the Navigation, as the CMS's rows. */
.awwo-cms-site-topbar {
	border-bottom: 1px solid var(--awwo-cms-border);
}

.awwo-cms-site-subheader {
	border-top: 1px solid var(--awwo-cms-border);
}

/* The Footer Bar under the Footer Widgets: the same hairline. */
.awwo-cms-site-footer-widgets + .awwo-cms-site-footer {
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-site-topbar {
	--zone-height: var(--awwo-cms-site-topbar-height, 40px);
	--zone-max-width: var(--awwo-cms-site-topbar-max-width, 1080px);
	--zone-menu-align: var(--awwo-cms-site-topbar-menu-align, flex-start);
}

.awwo-cms-site-subheader {
	--zone-height: var(--awwo-cms-site-subheader-height, 36px);
	--zone-max-width: var(--awwo-cms-site-subheader-max-width, 1080px);
	--zone-menu-align: var(--awwo-cms-site-subheader-menu-align, flex-start);
}

.awwo-cms-site-footer {
	--zone-height: var(--awwo-cms-site-footer-height, 60px);
	--zone-max-width: var(--awwo-cms-site-footer-max-width, 1080px);
	--zone-menu-align: var(--awwo-cms-site-footer-menu-align, flex-start);
}

.awwo-cms-site-zone-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--zone-max-width);
	padding: 8px 16px;
}

.awwo-cms-site-zone-text {
	margin: 0 0 0 auto;
	font-size: 13px;
}

.awwo-cms-site-zone .awwo-cms-site-menu {
	font-size: 13px;
}

/* Text + Menu: the text first, the menu pushed to the end. */
.awwo-cms-site-zone.is-text_menu .awwo-cms-site-zone-text {
	margin: 0;
}

.awwo-cms-site-zone.is-text_menu .awwo-cms-site-menu {
	margin-left: auto;
}

/* Stacked: one above the other, centred. */
.awwo-cms-site-zone.is-stacked_menu_text .awwo-cms-site-zone-inner,
.awwo-cms-site-zone.is-stacked_text_menu .awwo-cms-site-zone-inner {
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding-block: 8px;
}

.awwo-cms-site-zone.is-stacked_menu_text .awwo-cms-site-zone-text,
.awwo-cms-site-zone.is-stacked_text_menu .awwo-cms-site-zone-text {
	margin: 0;
	text-align: center;
}

/* Menu Only: placed by its Text Align. */
.awwo-cms-site-zone.is-menu_only .awwo-cms-site-zone-inner {
	justify-content: var(--zone-menu-align);
}

/* Text Only: the whole width (so the Footer's Text Align works). */
.awwo-cms-site-zone.is-text_only .awwo-cms-site-zone-text {
	flex: 1;
	margin: 0;
}

.awwo-cms-site-footer .awwo-cms-site-zone-text {
	text-align: var(--awwo-cms-site-footer-align, center);
}

.awwo-cms-site-footer.is-text_only .awwo-cms-site-zone-inner {
	justify-content: center;
}

.awwo-cms-site-zone a {
	color: inherit;
	text-decoration: none;
}

/* Footer ------------------------------------------------------------------ */

/* The Footer Canvas: one block around Footer Widgets and Footer Bar, the
   CMS's surface behind both, as wide as its Max
   Width, a hairline above the whole of it. */
.awwo-cms-site-footer-block {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--awwo-cms-site-footer-canvas-max-width, 100%);
	margin: 0 auto;
	background-color: var(--awwo-cms-surface);
	border-top: 1px solid var(--awwo-cms-border);
}

/* Footer Widgets: the page builder's content, in the CMS's colours. */
.awwo-cms-site-footer-widgets {
	display: flex;
	justify-content: center;
}

.awwo-cms-site-footer-widgets-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--awwo-cms-site-footer-widgets-max-width, 1080px);
	padding: var(--awwo-cms-site-footer-widgets-padding, 40px) 16px;
}

.awwo-cms-site-footer-widgets a {
	color: inherit;
	text-decoration: none;
}

/* Header ------------------------------------------------------------------ */

/* The Header Canvas: one block around Top Bar, Navigation and Bottom Bar,
   the CMS's surface behind all three, as wide
   as its Max Width, a hairline under the whole of it; Sticky keeps it at
   the top while the page scrolls. */
.awwo-cms-site-header-block {
	position: relative;
	z-index: 20;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--awwo-cms-site-header-canvas-max-width, 100%);
	margin: 0 auto;
	background-color: var(--awwo-cms-surface);
	border-bottom: 1px solid var(--awwo-cms-border);
}

.awwo-cms-site-header-block.is-sticky {
	position: sticky;
	top: 0;
}

/* The Navigation row: logo and menu. */
.awwo-cms-site-header {
	display: flex;
	justify-content: center;
	min-height: var(--awwo-cms-site-header-height, 80px);
}

.awwo-cms-site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--awwo-cms-site-logo-gap, 20px);
	box-sizing: border-box;
	width: 100%;
	max-width: var(--awwo-cms-site-header-max-width, 1080px);
	padding: 16px;
}

.awwo-cms-site-header .awwo-cms-site-menu {
	/* As the CMS's buttons: uppercase, a little spaced. */
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	--menu-link: var(--awwo-cms-muted);
	--menu-hover: var(--awwo-cms-ok);
	--menu-active: var(--awwo-cms-ok);
}

/* The menu and the light/dark switch (as the CMS's) together, opposite the logo. */
.awwo-cms-site-header-end {
	display: flex;
	align-items: center;
	gap: var(--awwo-cms-site-logo-gap, 20px);
	min-width: 0;
}

.awwo-cms-site-theme {
	flex: none;
}

/* The account's button (Connect, or Account) and the light/dark switch,
   12px apart as the backend's. Their dropdowns open 12px under the
   Header's bottom line (--awwo-cms-site-drop: how far under the buttons
   that line is, measured by awwo-cms-site.js), their arrow pointing up to
   their button. */
.awwo-cms-site-actions {
	--awwo-cms-site-drop-gap: calc(var(--awwo-cms-site-drop, 8px) + 12px);
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
}

/* The arrow: a square turned on its corner, the dropdown's surface and
   outline on its two upper sides, half above the dropdown's top edge. */
.awwo-cms-site-account-menu > .awwo-cms-site-account-cap::before,
.awwo-cms-site-cart-panel::after {
	content: "";
	position: absolute;
	top: -7px;
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	border: solid var(--awwo-cms-border);
	border-width: 1px 0 0 1px;
	border-radius: 2px 0 0 0;
	background: var(--awwo-cms-surface);
	transform: rotate(45deg);
}

.awwo-cms-site-account-menu > .awwo-cms-site-account-cap::before {
	left: calc(50% - 6px);
}

/* Under the cart button's middle (40px wide). */
.awwo-cms-site-cart-panel::after {
	right: 13px;
}

.awwo-cms-site-action {
	text-decoration: none;
}

/* Elsewhere than the Account page: its menu under the Account button, shown
   as its tooltip is (hovered or focused), centred under it; the Account
   page's sections, then Disconnect, as the site's dropdowns. */
.awwo-cms-site-account {
	position: relative;
	display: flex;
}

.awwo-cms-site-account-menu {
	position: absolute;
	top: calc(100% + var(--awwo-cms-site-drop-gap));
	left: 50%;
	z-index: 30;
	min-width: 200px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Drawn by its rows (so one can be cut out of it); the shadow follows them, cut and all. */
	filter: drop-shadow(0 8px 12px rgb(0 0 0 / 0.15));
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

/* The gap to the button stays part of it, so the pointer can reach the menu. */
.awwo-cms-site-account-menu::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: var(--awwo-cms-site-drop-gap);
}

.awwo-cms-site-account:hover .awwo-cms-site-account-menu,
.awwo-cms-site-account:focus-within .awwo-cms-site-account-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* While its menu shows (the pointer on it or in the menu, or focus there),
   its tooltip stays too. */
.awwo-cms-site-account:hover > .awwo-cms-site-action::after,
.awwo-cms-site-account:focus-within > .awwo-cms-site-action::after {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* While its menu shows, the Account button is filled (green, white icon). */
.awwo-cms-site-account:hover > .awwo-cms-site-action,
.awwo-cms-site-account:focus-within > .awwo-cms-site-action {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

/* The cart's button: how many items raised at its corner (green, white
   figures). Its dropdown (elsewhere than the Cart page) under it, its right
   edge on the button's (it stays on the screen), shown as the Account
   menu is: the first lines, the Subtotal, View Cart and Checkout. */
.awwo-cms-site-cart-button {
	position: relative;
}

.awwo-cms-site-cart-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 9px;
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.awwo-cms-site-cart-panel {
	position: absolute;
	top: calc(100% + var(--awwo-cms-site-drop-gap));
	right: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: min(320px, calc(100vw - 32px));
	box-sizing: border-box;
	padding: 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 12px;
	background: var(--awwo-cms-surface);
	box-shadow: 0 8px 12px rgb(0 0 0 / 0.15);
	color: var(--awwo-cms-text);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

/* The gap to the button stays part of it, so the pointer can reach it. */
.awwo-cms-site-cart-panel::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: var(--awwo-cms-site-drop-gap);
}

.awwo-cms-site-cart:hover .awwo-cms-site-cart-panel,
.awwo-cms-site-cart:focus-within .awwo-cms-site-cart-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.awwo-cms-site-cart-lines {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-site-cart-lines > li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
}

.awwo-cms-site-cart-image {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--awwo-cms-border);
	color: var(--awwo-cms-muted);
}

.awwo-cms-site-cart-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.awwo-cms-site-cart-name {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	font-weight: 700;
}

.awwo-cms-site-cart-name a {
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awwo-cms-site-cart-qty {
	color: var(--awwo-cms-muted);
	font-weight: 400;
}

.awwo-cms-site-cart-total {
	flex: none;
	font-weight: 700;
}

.awwo-cms-site-cart-empty,
.awwo-cms-site-cart-more {
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
	text-align: center;
}

.awwo-cms-site-cart-subtotal {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--awwo-cms-border);
	font-size: 14px;
}

.awwo-cms-site-cart-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Small buttons (as the Backend's .awwo-cms-button-small, whose stylesheet
   only some pages load), side by side on every page. */
.awwo-cms-site-cart-buttons > .awwo-cms-button {
	flex: 1 1 120px;
	min-width: 0;
	padding: 6px 14px;
	font-size: 12px;
	text-align: center;
}

/* On phones the dropdown hangs from the end of the header's buttons (not
   the cart's own), so it stays on the screen. */
@media (max-width: 600px) {
	.awwo-cms-site-actions {
		position: relative;
	}

	.awwo-cms-site-cart {
		position: static;
	}

	/* Its arrow still under the cart button: past the switch (40px) and
	   the 12px between them. */
	.awwo-cms-site-cart-panel::after {
		right: 65px;
	}
}

.awwo-cms-site-account-menu form {
	margin: 0;
}

.awwo-cms-site-account-menu a,
.awwo-cms-site-account-menu button {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 6px 8px;
	border: 0;
	background: transparent;
	color: var(--awwo-cms-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

/* The menu is its rows: each its slice of the card (its background, its
   left and right outline, no line above or below), between a top and a
   bottom cap that close it (12px corners). The cut moves from item to
   item at once (nothing fades), so no part of it lingers on the way. */
.awwo-cms-site-account-menu::after,
.awwo-cms-site-account-menu > li {
	border: solid var(--awwo-cms-border);
	border-width: 0 1px;
	background-color: var(--awwo-cms-surface);
}

.awwo-cms-site-account-menu > li {
	position: relative;
	padding: 0 0 0 8px;
}

/* Each row reaches 1px under the one above, so no hairline ever shows
   between them. */
.awwo-cms-site-account-menu > li:not(.awwo-cms-site-account-cap),
.awwo-cms-site-account-menu::after {
	margin-top: -1px;
}

/* The caps: the top one is the list's first row of its own (its gap to
   the button stays the list's ::before, its arrow its own ::before), the bottom one its ::after; as tall as
   their corners (12px), so these are never scaled down. */
.awwo-cms-site-account-menu > .awwo-cms-site-account-cap {
	box-sizing: border-box;
	height: var(--awwo-cms-radius);
	padding: 0;
	border-top-width: 1px;
	border-radius: var(--awwo-cms-radius) var(--awwo-cms-radius) 0 0;
}

.awwo-cms-site-account-menu::after {
	content: "";
	display: block;
	box-sizing: border-box;
	height: var(--awwo-cms-radius);
	border-bottom-width: 1px;
	border-radius: 0 0 var(--awwo-cms-radius) var(--awwo-cms-radius);
}

/* Hovered or focused, a row is cut out of the menu, as the Account page
   menu's open section out of its card: no background of the menu there
   (what is behind it shows through), its right edge open; the item itself
   rounded at its left (8px, set in), green under its label, fading to
   transparent by 85%, white text, outlined; the row (or cap) above and
   below close with a line on the item's and round into the cut (12px). */
.awwo-cms-site-account-menu > li:not(.awwo-cms-site-account-cap):is(:hover, :focus-within) {
	z-index: 1;
	border-right-color: transparent;
	/* The menu stays on the left of the item: its 8px inset and behind its
	   rounded corners (8px more), so nothing behind shows around them; the
	   cut opens to the right of that, clear. Drawn once over its whole box
	   (its left line kept), so it never repeats into its right edge. */
	background-color: transparent;
	background-image: linear-gradient(90deg, var(--awwo-cms-border) 1px, var(--awwo-cms-surface) 1px 17px, transparent 17px);
	background-origin: border-box;
	background-repeat: no-repeat;
}

.awwo-cms-site-account-menu > li:is(:hover, :focus-within) :is(a, button) {
	position: relative;
	border-radius: 8px 0 0 8px;
	background: linear-gradient(90deg, var(--awwo-cms-green), var(--awwo-cms-green) 40%, transparent 85%);
	color: var(--awwo-cms-white);
	outline: none;
}

/* Its outline: around its top, rounded left and bottom, on the line of
   the rows above and below, ending where their curves leave it (12px
   before the menu's right edge), graded from green into the menu's
   outline by 85%, as the backend's open tab. */
.awwo-cms-site-account-menu > li:is(:hover, :focus-within) :is(a, button)::before {
	content: "";
	position: absolute;
	inset: 0 calc(var(--awwo-cms-radius) - 1px) 0 0;
	border: 1px solid transparent;
	border-right: 0;
	border-radius: 8px 0 0 8px;
	background: linear-gradient(90deg, var(--awwo-cms-green), var(--awwo-cms-border) 85%) border-box;
	-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}

/* The rows next to it take their line on its outline's (their item
   pulled 1px in, so nothing moves). */
.awwo-cms-site-account-menu > li:has(+ li:is(:hover, :focus-within)) {
	border-bottom-width: 1px;
	border-bottom-right-radius: var(--awwo-cms-radius);
}

.awwo-cms-site-account-menu > li:has(+ li:is(:hover, :focus-within)) > :last-child {
	margin-bottom: -1px;
}

.awwo-cms-site-account-menu > li:not(.awwo-cms-site-account-cap):is(:hover, :focus-within) + li {
	border-top-width: 1px;
	border-top-right-radius: var(--awwo-cms-radius);
}

.awwo-cms-site-account-menu > li:not(.awwo-cms-site-account-cap):is(:hover, :focus-within) + li > :first-child {
	margin-top: -1px;
}

.awwo-cms-site-account-menu:has(> li:last-child:is(:hover, :focus-within))::after {
	border-top-width: 1px;
	border-top-right-radius: var(--awwo-cms-radius);
}

/* A cap next to it holds two corners on its right (its own and the one
   into the cut), half each, so they fit its height as they are and its
   left corner keeps its 12px. */
.awwo-cms-site-account-menu > .awwo-cms-site-account-cap:has(+ li:is(:hover, :focus-within)),
.awwo-cms-site-account-menu:has(> li:last-child:is(:hover, :focus-within))::after {
	border-top-right-radius: calc(var(--awwo-cms-radius) / 2);
	border-bottom-right-radius: calc(var(--awwo-cms-radius) / 2);
}

/* Stacked: the links centred under the logo on their own, the buttons hung
   after the last one (outside what is centred). */
.awwo-cms-site-header.is-stacked .awwo-cms-site-header-end {
	position: relative;
}

.awwo-cms-site-header.is-stacked .awwo-cms-site-actions {
	position: absolute;
	top: 50%;
	left: 100%;
	margin-left: var(--awwo-cms-site-logo-gap, 20px);
	transform: translateY(-50%);
}

/* Menu + Logo: the order swapped. */
.awwo-cms-site-header.is-menu_logo .awwo-cms-site-header-inner {
	flex-direction: row-reverse;
}

/* Stacked: the logo above the menu, centred. */
.awwo-cms-site-header.is-stacked .awwo-cms-site-header-inner {
	flex-direction: column;
	justify-content: center;
}

.awwo-cms-site-logo {
	font-size: 20px;
	font-weight: 700;
	color: var(--awwo-cms-text);
	text-decoration: none;
	transition: color 0.2s;
}

.awwo-cms-site-logo:hover {
	color: var(--awwo-cms-ok);
}

.awwo-cms-site-logo img {
	display: block;
	height: var(--awwo-cms-site-logo-height, 80px);
	width: auto;
	max-width: 100%;
}

/* Menus ------------------------------------------------------------------- */

/* A row of links; an item with items under it has an arrow and a dropdown
   (a CMS surface card), opened on hover, focus or the arrow. */
.awwo-cms-site-menu-list,
.awwo-cms-site-submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-site-menu-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.awwo-cms-site-menu-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
}

.awwo-cms-site-menu a {
	color: var(--menu-link);
	text-decoration: none;
	transition: color 0.2s;
}

.awwo-cms-site-menu a:hover,
.awwo-cms-site-menu a:focus-visible {
	color: var(--menu-hover);
}

.awwo-cms-site-menu-item.is-active > a {
	color: var(--menu-active, var(--menu-hover));
}

.awwo-cms-site-icon {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.awwo-cms-site-submenu-toggle,
.awwo-cms-site-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: 0;
	background: transparent;
	color: var(--menu-link);
	cursor: pointer;
}

.awwo-cms-site-submenu-toggle .awwo-cms-site-icon {
	width: 0.7em;
	height: 0.7em;
	transition: transform 0.3s ease;
}

.awwo-cms-site-menu-item.is-open > .awwo-cms-site-submenu-toggle .awwo-cms-site-icon {
	transform: rotate(180deg);
}

.awwo-cms-site-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: none;
	min-width: 200px;
	padding: 8px 0;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	background: var(--awwo-cms-surface);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
}

/* A dropdown inside a dropdown opens to its side. */
.awwo-cms-site-submenu .awwo-cms-site-submenu {
	top: -9px;
	left: 100%;
}

.awwo-cms-site-submenu .awwo-cms-site-menu-item {
	justify-content: space-between;
	padding: 6px 16px;
	white-space: nowrap;
}

.awwo-cms-site-submenu .awwo-cms-site-submenu-toggle .awwo-cms-site-icon {
	transform: rotate(-90deg);
}

.awwo-cms-site-menu-item.is-open > .awwo-cms-site-submenu,
.awwo-cms-site-menu-item:focus-within > .awwo-cms-site-submenu {
	display: block;
}

@media (hover: hover) {
	.awwo-cms-site-menu-item:hover > .awwo-cms-site-submenu {
		display: block;
	}
}

/* The phone menu button: only on phones. */
.awwo-cms-site-menu-toggle {
	display: none;
	font-size: 22px;
}

.awwo-cms-site-header {
	position: relative;
}

/* Preview only: what is still missing (no menu, no text, no logo image). */
.awwo-cms-site-missing {
	padding: 2px 8px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	text-transform: none;
	opacity: 0.7;
}

/* Page -------------------------------------------------------------------- */

/* A Draft, seen only by the Owner: marked above the page. */
.awwo-cms-site-draft {
	align-self: center;
	margin: 16px 0 0;
	padding: 2px 12px;
	border: 1px solid var(--awwo-cms-warn);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--awwo-cms-warn);
}

.awwo-cms-site-main {
	flex: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--awwo-cms-site-page-max-width);
	margin: 0 auto;
	padding: 16px;
}

.awwo-cms-site-main a {
	color: var(--awwo-cms-ok);
	text-decoration: none;
}

.awwo-cms-site-empty {
	margin: 48px 0;
	font-size: 13px;
	text-align: center;
	opacity: 0.6;
}

/* Buttons ----------------------------------------------------------------- */

.awwo-cms-site-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--awwo-cms-site-button-height, 40px);
	padding: 0 24px;
	overflow: hidden;
	/* As the CMS's: uppercase, a little spaced (Typography sets the weight). */
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	/* As the CMS's: outlined in green at rest, filled when hovered. */
	color: var(--awwo-cms-ok);
	background: transparent;
	border: 1px solid var(--awwo-cms-ok);
	border-radius: 8px;
}

a.awwo-cms-site-button:hover,
a.awwo-cms-site-button:focus-visible {
	color: var(--awwo-cms-white);
	background: var(--awwo-cms-green);
	border-color: var(--awwo-cms-green);
}

/* Lift (the CMS's 6px) and Scale move the button; Glow adds a green ring. */
.awwo-cms-site-buttons-lift a.awwo-cms-site-button:hover,
.awwo-cms-site-buttons-lift a.awwo-cms-site-button:focus-visible {
	transform: translateY(-6px);
}

.awwo-cms-site-buttons-scale a.awwo-cms-site-button:hover,
.awwo-cms-site-buttons-scale a.awwo-cms-site-button:focus-visible {
	transform: scale(1.05);
}

.awwo-cms-site-buttons-glow a.awwo-cms-site-button:hover,
.awwo-cms-site-buttons-glow a.awwo-cms-site-button:focus-visible {
	box-shadow: 0 0 20px var(--awwo-cms-green);
}

/* Sweep: the hover background wipes in from the left, under the text. */
.awwo-cms-site-buttons-sweep .awwo-cms-site-button {
	isolation: isolate;
}

.awwo-cms-site-buttons-sweep a.awwo-cms-site-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--awwo-cms-green);
	transform: scaleX(0);
	transform-origin: left;
}

.awwo-cms-site-buttons-sweep a.awwo-cms-site-button:hover,
.awwo-cms-site-buttons-sweep a.awwo-cms-site-button:focus-visible {
	background: transparent;
}

.awwo-cms-site-buttons-sweep a.awwo-cms-site-button:hover::after,
.awwo-cms-site-buttons-sweep a.awwo-cms-site-button:focus-visible::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
	.awwo-cms-site-buttons-fade .awwo-cms-site-button,
	.awwo-cms-site-buttons-lift .awwo-cms-site-button,
	.awwo-cms-site-buttons-scale .awwo-cms-site-button,
	.awwo-cms-site-buttons-sweep .awwo-cms-site-button,
	.awwo-cms-site-buttons-glow .awwo-cms-site-button,
	.awwo-cms-site-buttons-sweep .awwo-cms-site-button::after {
		transition: color var(--awwo-cms-site-button-timer) ease, background-color var(--awwo-cms-site-button-timer) ease,
			border-color var(--awwo-cms-site-button-timer) ease, border-width var(--awwo-cms-site-button-timer) ease,
			box-shadow var(--awwo-cms-site-button-timer) ease, transform var(--awwo-cms-site-button-timer) ease;
	}
}

/* Phones ------------------------------------------------------------------ */

@media (max-width: 600px) {
	/* Side by side becomes one above the other, the first on top. */
	.awwo-cms-site-zone-inner {
		flex-direction: column;
		justify-content: center;
		gap: 8px;
	}

	.awwo-cms-site-zone .awwo-cms-site-zone-text {
		margin: 0;
		text-align: center;
	}

	.awwo-cms-site-zone.is-text_menu .awwo-cms-site-menu {
		margin-left: 0;
	}

	.awwo-cms-site-header-inner {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.awwo-cms-site-header.is-stacked .awwo-cms-site-header-inner {
		justify-content: center;
	}

	/* The Header's menu folds behind its button and opens as a panel
	   under the header, dropdowns opening in place under their item. */
	.awwo-cms-site-menu-toggle {
		display: inline-flex;
	}

	.awwo-cms-site-header .awwo-cms-site-menu-list {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 16px;
		border-bottom: 1px solid var(--awwo-cms-border);
		background: var(--awwo-cms-surface);
		box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
	}

	.awwo-cms-site-header .awwo-cms-site-menu.is-open .awwo-cms-site-menu-list {
		display: flex;
	}

	.awwo-cms-site-header .awwo-cms-site-menu-item {
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 8px 0;
	}

	.awwo-cms-site-header .awwo-cms-site-submenu,
	.awwo-cms-site-header .awwo-cms-site-submenu .awwo-cms-site-submenu {
		position: static;
		flex-basis: 100%;
		min-width: 0;
		padding: 0 0 0 16px;
		border: 0;
		box-shadow: none;
	}

	.awwo-cms-site-header .awwo-cms-site-submenu .awwo-cms-site-menu-item {
		padding: 6px 0;
	}

	.awwo-cms-site-header .awwo-cms-site-submenu .awwo-cms-site-submenu-toggle .awwo-cms-site-icon {
		transform: none;
	}

	.awwo-cms-site-header .awwo-cms-site-menu-item:hover > .awwo-cms-site-submenu,
	.awwo-cms-site-header .awwo-cms-site-menu-item:focus-within:not(.is-open) > .awwo-cms-site-submenu {
		display: none;
	}

	.awwo-cms-site-header .awwo-cms-site-menu-item.is-open > .awwo-cms-site-submenu {
		display: block;
	}

	.awwo-cms-site-button {
		width: 100%;
	}
}

/* Account page ------------------------------------------------------------ */

/* The connected account's own (Page Type Account), after the page's content:
   its avatar, name and menu on one side, the open section on the other, in
   the CMS's boxes (awwo-cms-backend.css), 24px apart as the backend's. */
.awwo-cms-account {
	display: grid;
	/* The menu card 250px, the section's card 700px (narrower only when the
	   page is); one column on tablets and phones. */
	grid-template-columns: 250px minmax(0, 700px);
	/* Centred on the page. */
	justify-content: center;
	align-items: start;
	gap: 24px;
	text-align: left;
}

.awwo-cms-site-page:has(> *) + .awwo-cms-account {
	margin-top: 24px;
}

.awwo-cms-account-side {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.awwo-cms-account-who {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.awwo-cms-account-name {
	min-width: 0;
}

.awwo-cms-account-name strong {
	display: block;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.awwo-cms-account-name > span {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--awwo-cms-muted);
}

/* The menu: one link per section, the open one green with a bar at its side
   (as the AWWO® plugin's), Disconnect last. Scoped to the page's main, so
   neither the page's link colour nor Typography's Links change them. */
.awwo-cms-account-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 24px;
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-account-nav form {
	margin: 0;
}

.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-link {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 8px 12px;
	border: 0;
	border-left: 3px solid transparent;
	background: transparent;
	color: var(--awwo-cms-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-link:hover,
.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-link:focus-visible {
	color: var(--awwo-cms-ok);
}

/* The open section: as the backend menu's current page, an open tab of the
   canvas. It starts where the other links do, its left end rounded as
   theirs (8px), and reaches out of the card over its right outline (24px
   padding + 1px outline) into the page's canvas: green fading into the
   canvas colour by 85%, white text, a hairline above and below fading the
   same way (drawn in its background, so the rounding takes them too) up to
   where the card's outline curves into it above and below (the 12px
   radius): the card opens around it, nothing reaching past the curve. */
.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-link[aria-current="page"] {
	position: relative;
	width: calc(100% + 25px);
	margin-right: -25px;
	padding-left: 15px;
	border-left: 0;
	border-radius: 8px 0 0 8px;
	background:
		linear-gradient(90deg, var(--awwo-cms-green), var(--awwo-cms-border) 85%) left top / calc(100% - var(--awwo-cms-radius)) 1px no-repeat,
		linear-gradient(90deg, var(--awwo-cms-green), var(--awwo-cms-border) 85%) left bottom / calc(100% - var(--awwo-cms-radius)) 1px no-repeat,
		linear-gradient(90deg, var(--awwo-cms-green), var(--awwo-cms-bg) 85%);
	color: var(--awwo-cms-white);
}

.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-link[aria-current="page"]::before,
.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-link[aria-current="page"]::after {
	content: "";
	position: absolute;
	right: 0;
	width: var(--awwo-cms-radius);
	height: var(--awwo-cms-radius);
	pointer-events: none;
}

.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-link[aria-current="page"]::before {
	/* Its last row on the item's hairline (drawn inside the item), as the backend's on its border. */
	bottom: calc(100% - 1px);
	background: radial-gradient(circle at 0 0, transparent calc(var(--awwo-cms-radius) - 1px), var(--awwo-cms-border) calc(var(--awwo-cms-radius) - 1px) var(--awwo-cms-radius), var(--awwo-cms-bg) var(--awwo-cms-radius));
}

.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-link[aria-current="page"]::after {
	top: calc(100% - 1px);
	background: radial-gradient(circle at 0 100%, transparent calc(var(--awwo-cms-radius) - 1px), var(--awwo-cms-border) calc(var(--awwo-cms-radius) - 1px) var(--awwo-cms-radius), var(--awwo-cms-bg) var(--awwo-cms-radius));
}

/* Account Menu and its close button: phones only. */
.awwo-cms-account-menu-toggle,
.awwo-cms-account-menu-close {
	display: none;
}

.awwo-cms-account-menu-toggle {
	gap: 8px;
	width: 100%;
}

.awwo-cms-account-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.awwo-cms-account-content .awwo-cms-panel + .awwo-cms-panel {
	margin-top: 0;
}

/* Billing & Shipping's boxes: one under another, as the section's own. */
.awwo-cms-account-boxes {
	display: contents;
}

/* Billing & Shipping's switcher: one control per box; the opened one shows
   its icon and label (filled), the others only their icon (outline, the
   label in a tooltip); the house buttons' lift on hover. Switching, the
   boxes cross-fade (below). */
.awwo-cms-address-switch {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.awwo-cms-address-switch .awwo-cms-address-switch-item {
	gap: 8px;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	font-size: 12px;
}

.awwo-cms-address-switch-item .awwo-cms-icon {
	width: 16px;
	height: 16px;
}

.awwo-cms-address-switch-label {
	display: none;
}

.awwo-cms-address-switch-item.is-open .awwo-cms-address-switch-label {
	display: inline;
}

/* Switching, the box left fades out where it was (a copy, over the
   page, only to see) while the one opened fades in there: a cross-fade,
   never a blank moment. */
.awwo-cms-account-content {
	position: relative;
}

.awwo-cms-address-leaving {
	position: absolute;
	z-index: 1;
	box-sizing: border-box;
	margin: 0;
	pointer-events: none;
	animation: awwo-cms-fade-out 0.6s ease-in-out forwards;
}

.awwo-cms-address-coming {
	animation: awwo-cms-fade-in 0.6s ease-in-out;
}

@keyframes awwo-cms-fade-out {
	to {
		opacity: 0;
	}
}

@keyframes awwo-cms-fade-in {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.awwo-cms-address-leaving,
	.awwo-cms-address-coming {
		animation: none;
	}
}

.awwo-cms-address-switch .awwo-cms-address-switch-item.is-open {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

/* Tablets: the menu above the section, the avatar beside the name, the links
   in a row, the open one underlined. */
@media (max-width: 1024px) {
	.awwo-cms-account {
		grid-template-columns: minmax(0, 1fr);
	}

	.awwo-cms-account-who {
		flex-direction: row;
		justify-content: center;
		text-align: left;
	}

	.awwo-cms-account-nav {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-link {
		width: auto;
		border-left: 0;
		border-bottom: 3px solid transparent;
	}

	/* As the backend menu's current page in its tablet bar: green, underlined. */
	.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-link[aria-current="page"] {
		width: auto;
		margin: 0;
		padding: 8px 12px;
		border-bottom: 3px solid var(--awwo-cms-green);
		border-radius: 0;
		background: none;
		color: var(--awwo-cms-ok);
	}

	.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-link[aria-current="page"]::before,
	.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-link[aria-current="page"]::after {
		content: none;
	}
}

/* Phones: the menu folds behind Account Menu and opens over the page, its
   links one under the other, centred. */
@media (max-width: 600px) {
	.awwo-cms-account-menu-toggle {
		display: inline-flex;
	}

	.awwo-cms-account-nav {
		display: none;
	}

	.awwo-cms-account-nav.is-open {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 16px;
		border: 0;
		background: color-mix(in srgb, var(--awwo-cms-surface) 85%, transparent);
		backdrop-filter: blur(8px);
	}

	.awwo-cms-site-main .awwo-cms-account .awwo-cms-account-nav.is-open .awwo-cms-account-link {
		font-size: 15px;
		text-align: center;
	}

	.awwo-cms-account-nav.is-open .awwo-cms-account-menu-close {
		position: absolute;
		top: 16px;
		right: 16px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid var(--awwo-cms-border);
		border-radius: 8px;
		background: var(--awwo-cms-control);
		color: var(--awwo-cms-text);
		cursor: pointer;
	}
}

/* Dashboard: the registration as numbered steps on a line (as the AWWO®
   plugin's), each number in a ring. */
.awwo-cms-account-steps {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: awwo-cms-step;
}

.awwo-cms-account-steps li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 32px;
	counter-increment: awwo-cms-step;
}

.awwo-cms-account-steps li::before {
	content: counter(awwo-cms-step);
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border: 2px solid var(--awwo-cms-ok);
	border-radius: 8px;
	background: var(--awwo-cms-surface);
	color: var(--awwo-cms-ok);
	font-size: 13px;
	font-weight: 700;
}

/* The line between the rings. */
.awwo-cms-account-steps li + li::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 15px;
	width: 2px;
	height: 24px;
	background: var(--awwo-cms-border);
}

.awwo-cms-account-signature {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--awwo-cms-ok);
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

/* Clicked: Copied shows for 2 seconds, hovered or not. */
.awwo-cms-account-signature[data-awwo-cms-copied]::after {
	opacity: 1;
	transform: translate(-50%, 0);
}


/* Account page boxes: each title as the menu's current item, the green bar
   fading into the card, white text (the Dashboard's: its greeting; every
   other: its icon before its title). Each box's button sits at its bottom,
   as wide as the box (its error right above it); the markup stays the
   backend's, so saving works the same. */
.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head) h2 {
	/* As the navigation card's active entry, mirrored towards it: rounded at
	   its right, reaching out of the card over its left outline (24px padding
	   + 1px outline) into the canvas, green from its right fading into the
	   canvas by 85%, the card's outline curving into it above and below; its
	   icon on the green. */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-left: -25px;
	padding: 10px 15px;
	border-radius: 0 8px 8px 0;
	background:
		linear-gradient(270deg, var(--awwo-cms-green), var(--awwo-cms-border) 85%) right top / calc(100% - var(--awwo-cms-radius)) 1px no-repeat,
		linear-gradient(270deg, var(--awwo-cms-green), var(--awwo-cms-border) 85%) right bottom / calc(100% - var(--awwo-cms-radius)) 1px no-repeat,
		linear-gradient(270deg, var(--awwo-cms-green), var(--awwo-cms-bg) 85%);
	color: var(--awwo-cms-white);
}

.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head) h2::before,
.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head) h2::after {
	content: "";
	position: absolute;
	left: 0;
	width: var(--awwo-cms-radius);
	height: var(--awwo-cms-radius);
	pointer-events: none;
}

.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head) h2::before {
	bottom: calc(100% - 1px);
	background: radial-gradient(circle at 100% 0, transparent calc(var(--awwo-cms-radius) - 1px), var(--awwo-cms-border) calc(var(--awwo-cms-radius) - 1px) var(--awwo-cms-radius), var(--awwo-cms-bg) var(--awwo-cms-radius));
}

.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head) h2::after {
	top: calc(100% - 1px);
	background: radial-gradient(circle at 100% 100%, transparent calc(var(--awwo-cms-radius) - 1px), var(--awwo-cms-border) calc(var(--awwo-cms-radius) - 1px) var(--awwo-cms-radius), var(--awwo-cms-bg) var(--awwo-cms-radius));
}

.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head) h2 .awwo-cms-icon {
	flex: none;
	color: var(--awwo-cms-white);
}

/* The head's parts (and a box's inner form) join the box's column, so the
   button can go last. */
.awwo-cms-account-content .awwo-cms-box > .awwo-cms-box-head,
.awwo-cms-account-content .awwo-cms-box > form,
.awwo-cms-account-content .awwo-cms-box > form > .awwo-cms-box-head {
	display: contents;
}

.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head) h2 {
	order: -1;
}

.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head) .awwo-cms-box-message {
	order: 99;
	margin: 0;
}

.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head) > .awwo-cms-button,
.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head) > .awwo-cms-box-buttons {
	order: 100;
	width: 100%;
}

.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head) > .awwo-cms-box-buttons .awwo-cms-button {
	flex: 1;
}

/* The row comes first in the page's code though shown last: raised, so its
   buttons' tooltips (above them) show over the fields before it (a fields
   grid measuring its width for paired phones is a layer of its own). */
.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head) > .awwo-cms-box-buttons {
	position: relative;
	z-index: 2;
}

/* Measuring (awwo-cms-box-heads.js): the buttons at their own width, one
   line; too wide for the row, they all turn into icons (each its name in a
   tooltip above it), still sharing the row. */
.awwo-cms-account-content :is(.awwo-cms-box > .awwo-cms-box-head, .awwo-cms-box > form > .awwo-cms-box-head).is-measuring > .awwo-cms-box-buttons .awwo-cms-button {
	flex: none;
	min-width: 0 !important;
	white-space: nowrap;
}

/* Members page -------------------------------------------------------------- */

/* The site's members, after the page's content: cards 4 in a row, 24px apart
   (2 on tablets, 1 on phones), in the CMS's card look. */
.awwo-cms-members {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.awwo-cms-site-page:has(> *) + .awwo-cms-page-frame {
	margin-top: 24px;
}

/* The canvas's frame: where its shades fall from (top, bottom). */
.awwo-cms-page-frame {
	position: relative;
	display: flex;
	flex-direction: column;
}

.awwo-cms-page-canvas {
	flex: 1;
}

/* Computers: as the backend, the header and footer stay where they are and
   only the canvas scrolls, its content passing under its rounded edges. */
@media (min-width: 769px) {
	body.awwo-cms-site:has(.awwo-cms-page-frame) {
		height: 100vh;
		height: 100dvh;
		min-height: 0;
		overflow: hidden;
	}

	body.awwo-cms-site:has(.awwo-cms-page-frame) .awwo-cms-site-canvas {
		height: 100%;
		min-height: 0;
	}

	body.awwo-cms-site:has(.awwo-cms-page-frame) .awwo-cms-site-main {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.awwo-cms-page-frame {
		flex: 1;
		min-height: 0;
	}

	.awwo-cms-page-canvas {
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* The shades (as the backend's): while content slides under the canvas's top
   or bottom edge, it fades into the canvas's own colour there. */
.awwo-cms-page-frame::before,
.awwo-cms-page-frame::after {
	content: "";
	position: absolute;
	right: 1px;
	left: 1px;
	z-index: 2;
	height: 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s var(--awwo-cms-ease-out);
}

.awwo-cms-page-frame::before {
	top: 1px;
	border-radius: calc(var(--awwo-cms-radius) - 1px) calc(var(--awwo-cms-radius) - 1px) 0 0;
	background: linear-gradient(to bottom, var(--awwo-cms-bg), transparent);
}

.awwo-cms-page-frame::after {
	bottom: 1px;
	border-radius: 0 0 calc(var(--awwo-cms-radius) - 1px) calc(var(--awwo-cms-radius) - 1px);
	background: linear-gradient(to top, var(--awwo-cms-bg), transparent);
}

.awwo-cms-page-frame[data-awwo-cms-shade-top]::before,
.awwo-cms-page-frame[data-awwo-cms-shade-bottom]::after {
	opacity: 1;
}

/* Page numbers under the cards: the CMS's buttons (outlined, filled and
   lifted when hovered), square, centred, 8px apart; the current one filled. */
.awwo-cms-members-pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.awwo-cms-site-main .awwo-cms-members-page {
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
}

.awwo-cms-site-main .awwo-cms-members-page[aria-current="page"] {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

/* A page with a canvas (the Members and Account pages): around it the backend's frame
   colour (the surface, as its menu and top bar), the canvas darker. */
body.awwo-cms-site:has(.awwo-cms-page-frame) {
	background-color: var(--awwo-cms-surface);
}

/* There the header and footer are part of that frame, as the backend's top
   and footer bars: no lines between them and the page. */
body.awwo-cms-site:has(.awwo-cms-page-frame) :is(.awwo-cms-site-header-block, .awwo-cms-site-footer-block) {
	border: 0;
}

/* The canvas (Members and Account pages), as the backend's: outlined, its 12px radius,
   32px inside (16px on phones), the cards on it. */
.awwo-cms-page-canvas {
	padding: 32px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-bg);
}

.awwo-cms-page-canvas > :last-child {
	margin-bottom: 0;
}

/* The page's title, as the backend's (24px, 800), the number of cards shown
   raised after it, muted (its tooltip above). */
.awwo-cms-members-title {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.3;
	text-align: left;
}

.awwo-cms-members-title:has(+ .awwo-cms-members-lead) {
	margin-bottom: 4px;
}

/* A Draft's tag inside its canvas (Members, Account), above the title,
   aligned with it, 16px over it. */
.awwo-cms-page-draft {
	margin: 0 0 16px;
	text-align: left;
}

.awwo-cms-page-draft .awwo-cms-site-draft {
	display: inline-block;
	margin: 0;
}

.awwo-cms-account .awwo-cms-page-draft,
.awwo-cms-page-canvas > .awwo-cms-page-draft,
.awwo-cms-members-header.is-center .awwo-cms-page-draft {
	text-align: center;
}

.awwo-cms-members-header.is-right .awwo-cms-page-draft {
	text-align: right;
}

/* Its Content Alignment (Customizer): the title, its lead and the page
   buttons, left, centred or right. */
.awwo-cms-members-pages.is-left {
	justify-content: flex-start;
}

.awwo-cms-members-pages.is-right {
	justify-content: flex-end;
}

.awwo-cms-members-header.is-center :is(.awwo-cms-members-title, .awwo-cms-members-lead) {
	text-align: center;
}

.awwo-cms-members-header.is-right :is(.awwo-cms-members-title, .awwo-cms-members-lead) {
	text-align: right;
}

/* Its lead (a cinematic line, Greeting::crew()), muted, as the backend's. */
.awwo-cms-members-lead {
	margin: 0 0 24px;
	color: var(--awwo-cms-muted);
	text-align: left;
}

.awwo-cms-members-count {
	margin-left: 0.15em;
	color: var(--awwo-cms-muted);
	font-size: 0.55em;
	font-weight: 400;
	line-height: 0;
	vertical-align: super;
}

/* Above the cards: the toolbar (as the backend's): All Roles, All
   Countries, the order and Search side by side, the same width (2 in a row
   on tablets, one on phones), 24px over the cards. */
.awwo-cms-members-toolbar {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 24px;
	padding: 12px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-surface);
}

.awwo-cms-members-search {
	position: relative;
}

.awwo-cms-members-toolbar select.awwo-cms-input {
	width: 100%;
	min-width: 0;
}

.awwo-cms-members-search .awwo-cms-icon {
	position: absolute;
	top: 50%;
	left: 13px;
	width: 14px;
	height: 14px;
	color: var(--awwo-cms-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.awwo-cms-members-search .awwo-cms-input {
	padding-left: 36px;
}

.awwo-cms-members-empty {
	margin: 48px 0;
	font-size: 13px;
	text-align: center;
	color: var(--awwo-cms-muted);
}

.awwo-cms-member {
	padding: 24px;
	overflow: hidden;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-surface);
}

/* A Members card as tall as its row's tallest: its content in its middle. */
.awwo-cms-members > .awwo-cms-member {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.awwo-cms-member-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.awwo-cms-member-avatar-wrap {
	position: relative;
	display: inline-flex;
	margin-bottom: 8px;
}

/* Its country's flag (from its time zone), on the avatar's bottom right
   corner (the top one is Remove's): 24px wide in its own 4:3 shape,
   rounded, ringed in the card's colour. */
.awwo-cms-member-flag {
	position: absolute;
	right: -4px;
	bottom: -4px;
	box-sizing: border-box;
	width: 24px;
	height: 18px;
	border: 2px solid var(--awwo-cms-surface);
	border-radius: 4px;
	object-fit: cover;
}

.awwo-cms-member-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border: 3px solid var(--awwo-cms-green);
	border-radius: 50%;
	background: var(--awwo-cms-control);
	color: var(--awwo-cms-ok);
	font-size: 26px;
	font-weight: 800;
}

.awwo-cms-member-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.awwo-cms-member-name {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.awwo-cms-member-meta,
.awwo-cms-member-since {
	font-size: 13px;
	color: var(--awwo-cms-muted);
	overflow-wrap: anywhere;
}

/* Its website, green. */
.awwo-cms-site-main .awwo-cms-member-website {
	font-size: 13px;
	font-weight: 700;
	color: var(--awwo-cms-ok);
	overflow-wrap: anywhere;
}

/* A Hidden profile: its placeholders blurred, not to be read or picked. */
.awwo-cms-member.is-hidden .awwo-cms-member-body {
	filter: blur(6px);
	user-select: none;
	pointer-events: none;
}

/* Articles page --------------------------------------------------------------- */

/* The site's articles, after the page's content (in its canvas, with the
   Members page's title, toolbar and page numbers): cards 3 in a row, 24px
   apart (2 on tablets, 1 on phones), in the CMS's card look. */
.awwo-cms-articles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

/* A card: its Featured Image on top (16:9; without one, the newspaper sign
   on a green tint), then its Categories, title, Excerpt and, at its foot,
   Author and date. The whole card opens the article; hovered, its outline
   and title turn green. */
.awwo-cms-article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-surface);
	transition: border-color 0.2s;
}

.awwo-cms-article-card:has(a:hover, a:focus-visible) {
	border-color: var(--awwo-cms-green);
}

.awwo-cms-article-card-image {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background: color-mix(in srgb, var(--awwo-cms-green) 12%, var(--awwo-cms-surface));
	color: var(--awwo-cms-ok);
}

.awwo-cms-article-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.awwo-cms-article-card-image .awwo-cms-icon {
	width: 40px;
	height: 40px;
}

.awwo-cms-article-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}

/* Breadcrumbs, right above an article's, Category's or Tag's title:
   small, centred with it, › between them; links green, the rest plain. */
.awwo-cms-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
	list-style: none;
}

.awwo-cms-breadcrumbs li + li::before {
	content: "›";
	margin-right: 8px;
}

.awwo-cms-site-main .awwo-cms-breadcrumbs a {
	color: var(--awwo-cms-ok);
	font-weight: 700;
}

/* A Category's or Tag's: above its name (its count raised), 8px clear of it. */
.awwo-cms-members-header > .awwo-cms-breadcrumbs {
	margin: 0 0 8px;
}

/* A name not shown (a Hidden profile, as Members' hidden cards): blurred. */
.awwo-cms-redacted {
	filter: blur(4px);
	user-select: none;
}

/* Its Categories (and the Draft tag), small capitals in green. */
.awwo-cms-article-card-categories {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin: 0;
	color: var(--awwo-cms-ok);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.awwo-cms-article-card-categories .awwo-cms-site-draft {
	margin: 0;
}

.awwo-cms-article-card-title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
	text-align: left;
}

.awwo-cms-site-main .awwo-cms-article-card-title a {
	color: var(--awwo-cms-text);
	transition: color 0.2s;
}

.awwo-cms-site-main .awwo-cms-article-card-title a:is(:hover, :focus-visible) {
	color: var(--awwo-cms-ok);
	outline: none;
}

/* The title's link covers the whole card. */
.awwo-cms-article-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.awwo-cms-article-card-excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--awwo-cms-muted);
	font-size: 14px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.awwo-cms-article-card-meta {
	margin: auto 0 0;
	padding-top: 8px;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

/* An article: as wide as the canvas (as the Articles page's toolbar and
   cards), its head centred on the canvas (Categories, title, breadcrumbs,
   Author and date, reactions), then its box, its author and QR Code, its
   comments and the way back. */
.awwo-cms-article {
	margin: 0;
}

.awwo-cms-article-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	text-align: center;
}

.awwo-cms-article-header .awwo-cms-page-draft {
	margin-bottom: 8px;
}

.awwo-cms-article-header .awwo-cms-article-card-categories {
	justify-content: center;
}

.awwo-cms-article-title {
	margin: 0;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.25;
}

.awwo-cms-article-header .awwo-cms-article-card-meta {
	padding: 0;
}

.awwo-cms-article-image {
	display: block;
	width: 100%;
	margin: 0 0 24px;
	border-radius: var(--awwo-cms-radius);
}

/* Its Tags, rounded squares as the site's other controls; then the way
   back, as wide as the column. */
/* The article's own box (a card, as the Members cards), its Tags at its
   foot under a line; under it its author and QR Code, 24px apart and
   from it (as the cards are); then its comments and the way back. */
.awwo-cms-article-box {
	padding: 32px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-surface);
}

.awwo-cms-article-box > .awwo-cms-article-tags {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--awwo-cms-border);
}

/* A product's Reviews right after its box: 24px apart, as the cards are elsewhere. */
.awwo-cms-article-box + .awwo-cms-comments {
	margin-top: 24px;
}

.awwo-cms-article-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 24px;
}

/* With a QR Code: the author beside it, the QR Code as wide as it needs. */
.awwo-cms-article-about.has-qr {
	grid-template-columns: minmax(0, 1fr) auto;
}

/* The author's card, across: the avatar (and its flag) at the start, the
   name, @username · role, Member Since, About and website beside it,
   from the left, a thin line between them; both in the card's middle
   (as tall as the QR Code beside it). */
.awwo-cms-author-card {
	display: flex;
	align-items: center;
}

.awwo-cms-author-card .awwo-cms-member-body {
	flex-direction: row;
	align-items: center;
	gap: 24px;
	width: 100%;
	text-align: left;
}

.awwo-cms-author-side {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
}

.awwo-cms-author-card .awwo-cms-member-avatar-wrap {
	margin: 0;
}

.awwo-cms-author-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
	padding-left: 24px;
	border-left: 1px solid var(--awwo-cms-border);
}

/* Their Social Profiles at the card's end, after a thin line as the
   avatar's: the round buttons, smaller (32px), in vertical columns of
   four, top to bottom, then the next column. */
.awwo-cms-author-social {
	flex: none;
	padding-left: 24px;
	border-left: 1px solid var(--awwo-cms-border);
}

.awwo-cms-author-social .awwo-cms-member-social {
	display: grid;
	grid-auto-columns: 32px;
	grid-auto-flow: column;
	grid-template-rows: repeat(4, 32px);
	gap: 8px;
	margin: 0;
}

/* The card lets the top row's tooltip out above it, uncut. */

.awwo-cms-author-card:not(.is-hidden) {
	overflow: visible;
}

/* On a member's card (Members page, author card): smaller buttons (32px,
   8px apart), the hovered one (and its tooltip) over its neighbours; on a
   Members card under its details, centred. */
.awwo-cms-member-social {
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
}

.awwo-cms-member-social a {
	width: 32px;
	height: 32px;
}

.awwo-cms-member-social .awwo-cms-icon {
	width: 14px;
	height: 14px;
}

.awwo-cms-member-social a:is(:hover, :focus-visible) {
	z-index: 1;
}

.awwo-cms-author-bio {
	margin: 4px 0 0;
	color: var(--awwo-cms-muted);
	font-size: 14px;
	font-weight: 400;
}

.awwo-cms-article-qr {
	display: grid;
	place-items: center;
	padding: 24px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	/* As every QR Code box of the CMS, in both themes: the card colour (the code keeps its own). */
	background: var(--awwo-cms-surface);
}

.awwo-cms-article-qr-code svg {
	display: block;
	width: 160px;
	height: 160px;
}

.awwo-cms-article-footer {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 24px;
}

.awwo-cms-article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-site-main .awwo-cms-article-tag {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	color: var(--awwo-cms-muted);
	font-size: 13px;
	font-weight: 700;
	transition: border-color 0.2s, color 0.2s;
}

.awwo-cms-site-main .awwo-cms-article-tag:is(:hover, :focus-visible) {
	border-color: var(--awwo-cms-green);
	color: var(--awwo-cms-ok);
	outline: none;
}

.awwo-cms-article-back {
	width: 100%;
}

/* Reactions (an article under its date, a Category's or Tag's page under
   its name): Like (the heart, green) and Dislike (the poo, red), rounded
   squares as the site's controls, 24px apart and 16px under what is above
   (room for their badges); each count a badge at its top right corner, as
   the avatar's Remove (24px, rounded, ringed in the canvas's colour), only
   a third of it over the button (8px), the rest out above and to the
   right; filled when it is the viewer's own. */
.awwo-cms-reactions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin: 16px 0 0;
}

.awwo-cms-reaction {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	background: var(--awwo-cms-control);
	font: inherit;
	cursor: pointer;
	transition:
		background-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

/* House style: lifts 6px when hovered or focused, its badge with it. */
.awwo-cms-reaction:is(:hover:not(:disabled), :focus-visible) {
	transform: translateY(-6px);
}

/* A member's own profile: its counts, the buttons not pressable. */
.awwo-cms-reaction:disabled {
	cursor: default;
}

.awwo-cms-reaction.is-like {
	color: var(--awwo-cms-ok);
}

.awwo-cms-reaction.is-dislike {
	color: var(--awwo-cms-red);
}

.awwo-cms-reaction .awwo-cms-icon {
	width: 16px;
	height: 16px;
}

.awwo-cms-reaction-count {
	position: absolute;
	/* From inside its 1px border: 8px over the button, 16px out. */
	top: -17px;
	right: -17px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 4px;
	box-sizing: border-box;
	border: 2px solid var(--awwo-cms-bg);
	border-radius: 6px;
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.awwo-cms-reaction.is-dislike .awwo-cms-reaction-count {
	background: var(--awwo-cms-red);
}

/* Hovered (or focused), and the viewer's own: in full colour, green or
   red, the icon white. */
.awwo-cms-reaction:is(:hover, :focus-visible) {
	outline: none;
}

.awwo-cms-reaction.is-like:is(:hover:not(:disabled), :focus-visible, .is-on) {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-reaction.is-dislike:is(:hover:not(:disabled), :focus-visible, .is-on) {
	border-color: var(--awwo-cms-red);
	background: var(--awwo-cms-red);
	color: var(--awwo-cms-white);
}

/* Their tooltips above their badges (8px clear of them, as above any element). */
.awwo-cms-reaction[data-awwo-cms-tooltip-above]::after {
	bottom: calc(100% + 24px);
}

/* Dislike's tooltip is red, as the avatar's Remove. */
.awwo-cms-reaction.is-dislike[data-awwo-cms-tooltip] {
	--awwo-cms-tooltip-bg: var(--awwo-cms-red);
	--awwo-cms-tooltip-text: var(--awwo-cms-white);
}

/* A member's (their card, an article's author card): under the avatar,
   24px down so its badges are 8px clear of it, ringed in the card's colour. */
.awwo-cms-member .awwo-cms-reactions {
	/* The card's 8px gap and the avatar's 8px below it make the 24px. */
	margin: 8px 0 0;
}

/* On a Members card: thin lines across the card split it in three, the
   avatar and its reactions, the details, the Social Profiles; 16px either
   side of each line. */
.awwo-cms-members .awwo-cms-reactions {
	align-self: stretch;
	margin-bottom: 8px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--awwo-cms-border);
}

.awwo-cms-members .awwo-cms-member-social {
	align-self: stretch;
	padding-top: 16px;
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-author-side .awwo-cms-reactions {
	margin-top: 24px;
}

.awwo-cms-member .awwo-cms-reaction-count {
	border-color: var(--awwo-cms-surface);
}

/* A Category's or Tag's: under its name, its badges 8px clear of it (as
   an article's of its date), 24px over the toolbar, as the title is. */
.awwo-cms-members-header .awwo-cms-reactions {
	margin: 0 0 24px;
}

/* A card's likes, after its date. */
.awwo-cms-article-card-likes {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	color: var(--awwo-cms-ok);
	font-weight: 700;
}

.awwo-cms-article-card-likes .awwo-cms-icon {
	width: 12px;
	height: 12px;
}

/* An article's comments, between its Tags and the way back: the title with
   their count raised, the threads (each comment a card: avatar or initials,
   name and date, text, Reply; its replies set in under it, a line on their
   left), then the form (or Connect, or Comments are closed). */
.awwo-cms-comments {
	display: flex;
	flex-direction: column;
	gap: 16px;
	scroll-margin-top: 24px;
	/* Its own card, as the article's box. */
	padding: 32px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-surface);
}

.awwo-cms-comments-title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
}

.awwo-cms-comments-list,
.awwo-cms-comments-replies {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-comments-list > li {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-comments-replies {
	margin-left: 24px;
	padding-left: 24px;
	border-left: 1px solid var(--awwo-cms-border);
}

.awwo-cms-comment {
	display: flex;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	/* On the comments' card: the canvas's colour, so each stands out. */
	background: var(--awwo-cms-bg);
	scroll-margin-top: 24px;
}

/* Avatars stay round, as everywhere. */
.awwo-cms-comment-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 50%;
	background: var(--awwo-cms-bg);
	color: var(--awwo-cms-ok);
	font-size: 13px;
	font-weight: 800;
}

.awwo-cms-comment-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.awwo-cms-comment-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.awwo-cms-comment-meta {
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-comment-meta strong {
	color: var(--awwo-cms-text);
}

.awwo-cms-comment-meta .awwo-cms-site-draft {
	display: inline-block;
	margin: 0 0 0 4px;
}

.awwo-cms-comment-text {
	margin: 0;
}

.awwo-cms-site-main .awwo-cms-comment-reply {
	align-self: flex-start;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

/* Under a comment: Reply, then its Likes (n) and Dislikes (n), small
   outlined buttons (green, red) that lift and fill when hovered; the
   viewer's own filled; a member's own comment shows them, not pressable. */
.awwo-cms-comment-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 4px;
}

.awwo-cms-site-main .awwo-cms-comment-actions .awwo-cms-comment-reply {
	margin-top: 0;
}

.awwo-cms-comment-reactions {
	display: flex;
	gap: 8px;
	margin: 0;
}

.awwo-cms-comment-react {
	padding: 2px 8px;
	border: 1px solid currentColor;
	border-radius: 6px;
	background: transparent;
	color: var(--awwo-cms-ok);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-comment-react.is-dislike {
	color: var(--awwo-cms-red);
}

.awwo-cms-comment-react:is(:hover:not(:disabled), :focus-visible) {
	outline: none;
	transform: translateY(-6px);
}

.awwo-cms-comment-react.is-like:is(:hover:not(:disabled), :focus-visible, .is-on) {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-comment-react.is-dislike:is(:hover:not(:disabled), :focus-visible, .is-on) {
	border-color: var(--awwo-cms-red);
	background: var(--awwo-cms-red);
	color: var(--awwo-cms-white);
}

.awwo-cms-comment-react:disabled {
	cursor: default;
}

.awwo-cms-comments-notice {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid currentColor;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
}

.awwo-cms-comments-notice.is-ok {
	color: var(--awwo-cms-ok);
}

.awwo-cms-comments-notice.is-error {
	color: var(--awwo-cms-fail);
}

.awwo-cms-comments-closed {
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
	text-align: center;
}

.awwo-cms-comments-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	scroll-margin-top: 24px;
}

.awwo-cms-comments-label {
	font-size: 13px;
	font-weight: 700;
}

.awwo-cms-comments-form textarea {
	resize: vertical;
}

.awwo-cms-comments-form .awwo-cms-button,
.awwo-cms-comments-connect {
	width: 100%;
	margin-top: 8px;
}

.awwo-cms-comments-replying {
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

@media (max-width: 1024px) {
	.awwo-cms-members,
	.awwo-cms-members-toolbar,
	.awwo-cms-articles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.awwo-cms-members,
	.awwo-cms-articles,
	.awwo-cms-article-about.has-qr {
		grid-template-columns: minmax(0, 1fr);
	}

	.awwo-cms-article-box,
	.awwo-cms-comments {
		padding: 16px;
	}

	.awwo-cms-article-title {
		font-size: 24px;
	}

	.awwo-cms-page-canvas {
		padding: 16px;
	}

	.awwo-cms-members-toolbar {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The author card's Social Profiles under it, in a row. */
	.awwo-cms-author-card .awwo-cms-member-body {
		flex-wrap: wrap;
	}

	.awwo-cms-author-social {
		width: 100%;
		padding: 16px 0 0;
		border-top: 1px solid var(--awwo-cms-border);
		border-left: 0;
	}

	.awwo-cms-author-social .awwo-cms-member-social {
		display: flex;
		justify-content: center;
	}
}

/* In place, no page loaded again (awwo-cms-reactions.js, awwo-cms-comments.js):
   a count that changed pops; a new comment grows into the list from
   nothing, rising and fading in, its outline lit green for a moment; the
   notice and Replying to … fade in. None with reduced motion. */
.awwo-cms-reaction-count.is-popped,
.awwo-cms-comment-react-count.is-popped,
.awwo-cms-comments-title .is-popped {
	display: inline-block;
	animation: awwo-cms-pop 0.45s var(--awwo-cms-ease-out);
}

.awwo-cms-reaction-count.is-popped {
	display: flex;
}

@keyframes awwo-cms-pop {
	40% {
		scale: 1.35;
	}
}

.awwo-cms-comments-list li.is-new,
.awwo-cms-comments-replies li.is-new {
	display: grid;
	animation: awwo-cms-grow var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-comments-list li.is-new > .awwo-cms-comment,
.awwo-cms-comments-replies li.is-new > .awwo-cms-comment {
	min-height: 0;
	animation:
		awwo-cms-rise var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		awwo-cms-lit 2.4s var(--awwo-cms-ease-out);
}

@keyframes awwo-cms-grow {
	from {
		grid-template-rows: 0fr;
	}

	to {
		grid-template-rows: 1fr;
	}
}

@keyframes awwo-cms-rise {
	from {
		opacity: 0;
		translate: 0 16px;
	}
}

@keyframes awwo-cms-lit {
	from {
		border-color: var(--awwo-cms-green);
	}
}

.awwo-cms-comments-notice.is-new,
.awwo-cms-comments-replying.is-new {
	animation: awwo-cms-rise var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

@media (prefers-reduced-motion: reduce) {
	.is-popped,
	.awwo-cms-comments-list li.is-new,
	.awwo-cms-comments-replies li.is-new,
	.awwo-cms-comments-list li.is-new > .awwo-cms-comment,
	.awwo-cms-comments-replies li.is-new > .awwo-cms-comment,
	.awwo-cms-comments-notice.is-new,
	.awwo-cms-comments-replying.is-new {
		animation: none;
	}
}

/* Activity History (Account page): the backend's table (Event, Date &
   Time) inside its box, its outer cells level with the box's edges, sliding
   sideways where too narrow; page numbers under it, as the Members page's. */
.awwo-cms-activity-table-wrap {
	overflow-x: auto;
}

.awwo-cms-activity-table-wrap .awwo-cms-media-table :is(th, td):first-child {
	padding-left: 0;
}

.awwo-cms-activity-table-wrap .awwo-cms-media-table :is(th, td):last-child {
	padding-right: 0;
}

.awwo-cms-activity-table-wrap .awwo-cms-media-table th {
	padding-top: 0;
}

/* Its rows are read, not picked: no highlight here (the backend's keep theirs). */
.awwo-cms-activity-table-wrap .awwo-cms-media-table tbody tr:hover {
	background: none;
}

.awwo-cms-activity-pages {
	margin-top: 24px;
}

/* Shop (Storefront): a Category's image or a Brand's logo above its name;
   the product cards as the articles' (their price under the name, a sale's
   old price struck through, Out of Stock over the image). */
.awwo-cms-shop-term-image {
	display: block;
	max-width: 160px;
	max-height: 160px;
	margin: 0 auto 16px;
	border-radius: var(--awwo-cms-radius);
	object-fit: contain;
}

.awwo-cms-members-header.is-left .awwo-cms-shop-term-image {
	margin-left: 0;
}

.awwo-cms-members-header.is-right .awwo-cms-shop-term-image {
	margin-right: 0;
}

.awwo-cms-product-card .awwo-cms-article-card-image {
	position: relative;
}

.awwo-cms-product-card-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--awwo-cms-red);
	color: var(--awwo-cms-white);
	font-size: 12px;
	font-weight: 700;
}

.awwo-cms-product-card.is-out .awwo-cms-article-card-image img {
	opacity: 0.6;
}

.awwo-cms-product-card-price,
.awwo-cms-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin: 0;
}

.awwo-cms-product-card-price del,
.awwo-cms-product-price del {
	color: var(--awwo-cms-muted);
}

.awwo-cms-product-card-price strong {
	color: var(--awwo-cms-ok);
}

/* A product's page: its images beside its summary (one under the other
   on tablets and phones), 32px apart as the article's box pads them. */
.awwo-cms-product-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	margin-bottom: 32px;
}

.awwo-cms-product-gallery {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.awwo-cms-product-image {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--awwo-cms-radius);
	background: color-mix(in srgb, var(--awwo-cms-green) 12%, var(--awwo-cms-surface));
	object-fit: contain;
}

.awwo-cms-product-image-empty {
	display: grid;
	place-items: center;
	color: var(--awwo-cms-ok);
}

.awwo-cms-product-image-empty .awwo-cms-icon {
	width: 48px;
	height: 48px;
}

.awwo-cms-product-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-product-thumb {
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 2px solid var(--awwo-cms-border);
	border-radius: 8px;
	background: none;
	cursor: pointer;
	transition: border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-product-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.awwo-cms-product-thumb:hover,
.awwo-cms-product-thumb:focus-visible,
.awwo-cms-product-thumb[aria-pressed="true"] {
	border-color: var(--awwo-cms-green);
	outline: 0;
}

.awwo-cms-product-summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.awwo-cms-product-price {
	font-size: 24px;
}

.awwo-cms-product-price strong {
	color: var(--awwo-cms-ok);
}

.awwo-cms-product-suffix {
	color: var(--awwo-cms-muted);
	font-size: 14px;
}

.awwo-cms-product-stock {
	margin: 0;
	font-weight: 700;
}

.awwo-cms-product-stock-on {
	color: var(--awwo-cms-ok);
}

.awwo-cms-product-stock-low {
	color: var(--awwo-cms-warn);
}

.awwo-cms-product-stock-off {
	color: var(--awwo-cms-fail);
}

.awwo-cms-product-excerpt {
	margin: 0;
}

.awwo-cms-product-addon-note {
	margin: 8px 0 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-fields > .awwo-cms-product-addon-note {
	margin-top: -8px;
}

.awwo-cms-product-bundle ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

.awwo-cms-product-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--awwo-cms-border);
	font-size: 18px;
}

/* SKU, Categories, Tags, Brand (and Additional Information): a term and
   its value on a line, the value's links in the site's link colour. */
.awwo-cms-product-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	font-size: 14px;
}

.awwo-cms-product-meta > div {
	display: flex;
	gap: 8px;
}

.awwo-cms-product-meta dt {
	font-weight: 700;
}

.awwo-cms-product-meta dt::after {
	content: ":";
}

.awwo-cms-product-meta dd {
	margin: 0;
}

.awwo-cms-product-meta a {
	font-weight: 700;
	text-decoration: none;
}

/* Add to Cart: its choices, add-ons, Quantity and the button, 16px apart
   as the rest of the summary; the button as wide as its words. */
.awwo-cms-product-buy {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-product-buy > .awwo-cms-button {
	align-self: flex-start;
}

.awwo-cms-product-quantity .awwo-cms-input {
	max-width: 120px;
}

.awwo-cms-product-cart-notice a {
	margin-left: 8px;
	color: inherit;
	text-decoration: none;
}

/* The Cart page: each line a row (image, name and choices, Quantity,
   total; Remove on its top right corner), 16px apart; on phones the
   Quantity and total go under the name. */
.awwo-cms-cart {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.awwo-cms-cart .awwo-cms-members-title {
	margin-bottom: 0;
}

.awwo-cms-cart-empty {
	margin: 0;
	color: var(--awwo-cms-muted);
	text-align: center;
}

.awwo-cms-cart-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-cart-lines {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-cart-line {
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto minmax(96px, auto);
	align-items: center;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	background: var(--awwo-cms-surface);
}

.awwo-cms-cart-line.has-problem {
	border-color: var(--awwo-cms-fail);
}

.awwo-cms-cart-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 8px;
	background: var(--awwo-cms-border);
	color: var(--awwo-cms-muted);
}

.awwo-cms-cart-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.awwo-cms-cart-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.awwo-cms-cart-info p {
	margin: 0;
}

.awwo-cms-cart-name {
	font-weight: 700;
}

.awwo-cms-cart-name a {
	text-decoration: none;
}

.awwo-cms-cart-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-cart-details > div {
	display: flex;
	gap: 6px;
	min-width: 0;
}

.awwo-cms-cart-details dt::after {
	content: ":";
}

.awwo-cms-cart-details dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.awwo-cms-cart-unit {
	font-size: 14px;
}

.awwo-cms-cart-problem {
	color: var(--awwo-cms-fail);
	font-size: 13px;
	font-weight: 700;
}

.awwo-cms-cart-qty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.awwo-cms-cart-qty .awwo-cms-field-label {
	padding: 0;
	font-size: 12px;
	text-align: center;
}

/* Room for three digits, centred under its label. */
.awwo-cms-cart-qty .awwo-cms-input {
	width: 64px;
	text-align: center;
}

.awwo-cms-cart-total {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

/* Remove: the CMS's own (as the avatar's and the product editor's rows'):
   a small red square on the line's top right corner, a white ×, its
   tooltip red too. */
.awwo-cms-cart-remove {
	position: absolute;
	top: -8px;
	right: -8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 2px solid var(--awwo-cms-surface);
	border-radius: 6px;
	background: var(--awwo-cms-red);
	color: var(--awwo-cms-white);
	cursor: pointer;
	--awwo-cms-tooltip-bg: var(--awwo-cms-red);
	--awwo-cms-tooltip-text: var(--awwo-cms-white);
}

.awwo-cms-cart-remove .awwo-cms-icon {
	width: 12px;
	height: 12px;
}

.awwo-cms-cart-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 16px;
}

/* On phones two rows: the image and the name (its choices, its price);
   under them Quantity and the total. */
@media (max-width: 600px) {
	.awwo-cms-cart-line {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.awwo-cms-cart-image {
		width: 64px;
	}

	.awwo-cms-cart-info {
		grid-column: 2 / -1;
	}

	.awwo-cms-cart-total {
		text-align: left;
	}

	.awwo-cms-cart-actions > * {
		flex: 1 1 100%;
	}
}

/* The buying steps (Cart, Checkout, Order Received) above their pages'
   titles, as the Dashboard's steps (.awwo-cms-account-steps) in a row: a
   32px square each (2px outline, 8px corners) with its number, its name
   beside it, a 2px line between them; the current one filled green, those
   done green (links back), those to come muted. */
.awwo-cms-shop-steps ol {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-shop-steps li {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

/* The line between the squares (green up to the current one). */
.awwo-cms-shop-steps li + li::before {
	content: "";
	flex: none;
	width: 48px;
	height: 2px;
	background: var(--awwo-cms-border);
}

.awwo-cms-shop-steps li.is-done + li::before {
	background: var(--awwo-cms-ok);
}

.awwo-cms-shop-steps li > a,
.awwo-cms-shop-steps li > span {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--awwo-cms-muted);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.awwo-cms-shop-steps li.is-done > a,
.awwo-cms-shop-steps li.is-done > span,
.awwo-cms-shop-steps li.is-current > span {
	color: var(--awwo-cms-ok);
}

/* A step that leads to its page: its name green too, the pointer on it. */
.awwo-cms-shop-steps li > a {
	color: var(--awwo-cms-ok);
	cursor: pointer;
}

.awwo-cms-shop-steps li.is-next > a .awwo-cms-shop-step-mark {
	border-color: var(--awwo-cms-ok);
	color: var(--awwo-cms-ok);
}

.awwo-cms-shop-step-mark {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border: 2px solid var(--awwo-cms-border);
	border-radius: 8px;
	background: var(--awwo-cms-surface);
	color: var(--awwo-cms-muted);
	font-size: 13px;
	font-weight: 700;
}

.awwo-cms-shop-steps li.is-done .awwo-cms-shop-step-mark {
	border-color: var(--awwo-cms-ok);
	color: var(--awwo-cms-ok);
}

.awwo-cms-shop-steps li.is-current .awwo-cms-shop-step-mark {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-shop-steps a:hover .awwo-cms-shop-step-mark,
.awwo-cms-shop-steps a:focus-visible .awwo-cms-shop-step-mark {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

/* Cart's counter, raised at its name's end as a title's (a little larger: the name is smaller than a title). */
.awwo-cms-shop-step-name .awwo-cms-members-count {
	font-size: 0.75em;
}

/* On phones: the squares only, but the current step's name; shorter lines. */
@media (max-width: 600px) {
	.awwo-cms-shop-steps ol,
	.awwo-cms-shop-steps li {
		gap: 8px;
	}

	.awwo-cms-shop-steps li + li::before {
		width: 24px;
	}

	.awwo-cms-shop-steps li:not(.is-current) > a,
	.awwo-cms-shop-steps li:not(.is-current) > span {
		font-size: 0;
		gap: 0;
	}
}

/* The Cart, Checkout and Order Received pages: their title shown by the
   steps (its heading hidden), their header no box of its own, so no gap
   is kept for it (a Draft's tag and Order Received's thanks still show). */
:is(.awwo-cms-cart, .awwo-cms-checkout) > .awwo-cms-members-header {
	display: contents;
}

/* Checkout's two columns: the buyer's boxes (Billing, Shipping, Order
   Notes), then Your Order; one column on tablets and phones. */
.awwo-cms-checkout-columns {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	align-items: start;
	gap: 24px;
}

.awwo-cms-checkout-column {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* Its gap alone parts them (not the stacked panels' own margin too). */
.awwo-cms-checkout-column > .awwo-cms-panel + .awwo-cms-panel {
	margin-top: 0;
}

/* The buyer's boxes, an accordion: a title row opens and closes its box;
   an open box's parts 16px apart. */
.awwo-cms-checkout-box[data-open] .awwo-cms-notification-toggle {
	cursor: pointer;
}

.awwo-cms-checkout-box-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-checkout-box-body[hidden] {
	display: none;
}

@media (max-width: 1024px) {
	.awwo-cms-checkout-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Checkout: the CMS's boxes in one
   form; its fieldsets plain; a payment's instructions only once it is
   chosen (CSS, so without scripts too). */
.awwo-cms-checkout {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.awwo-cms-checkout .awwo-cms-members-title {
	margin-bottom: 0;
}

.awwo-cms-checkout .awwo-cms-members-title:has(+ .awwo-cms-members-lead) {
	margin-bottom: 4px;
}

.awwo-cms-checkout .awwo-cms-members-lead {
	margin: 0;
}

.awwo-cms-checkout-form {
	margin: 0;
}

.awwo-cms-checkout fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Ship To: only what is chosen shows (awwo-cms-checkout.js), a saved
   address as its lines. */
[data-awwo-cms-checkout-ship-option][hidden] {
	display: none;
}

.awwo-cms-checkout-ship-saved {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.6;
}

.awwo-cms-checkout-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	cursor: pointer;
}

.awwo-cms-checkout-check a {
	font-weight: 700;
	text-decoration: none;
}

.awwo-cms-checkout-lines {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-checkout-lines > li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}

.awwo-cms-checkout-line-name {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.awwo-cms-checkout-qty {
	color: var(--awwo-cms-muted);
}

.awwo-cms-checkout-line-total {
	flex: none;
	font-weight: 700;
}

.awwo-cms-checkout-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.awwo-cms-checkout-choices > legend {
	margin-bottom: 8px;
	padding: 0;
}

.awwo-cms-checkout-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
	transition: border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-checkout-option:has(input:checked) {
	border-color: var(--awwo-cms-green);
}

.awwo-cms-checkout-option-name {
	flex: 1;
	font-weight: 700;
}

.awwo-cms-checkout-option-cost {
	flex: none;
}

.awwo-cms-checkout-pay {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.awwo-cms-checkout-pay:not(:has(input:checked)) .awwo-cms-checkout-pay-note {
	display: none;
}

.awwo-cms-checkout-pay-note {
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-checkout-totals {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-checkout-totals > p {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	font-size: 14px;
}

.awwo-cms-checkout-totals > .awwo-cms-product-total {
	margin-top: 8px;
	font-size: 18px;
}

.awwo-cms-checkout-totals > .awwo-cms-checkout-tax {
	justify-content: flex-end;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-checkout-privacy {
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-checkout-privacy a {
	font-weight: 700;
	text-decoration: none;
}

.awwo-cms-checkout-place,
.awwo-cms-order-pay {
	width: 100%;
}

.awwo-cms-product-info {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-product-info h2 {
	margin: 0 0 16px;
	font-size: 18px;
}

@media (max-width: 900px) {
	.awwo-cms-product-top {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* A product's add-ons' checkboxes and checkout's (its radios round): the
   CMS's own (as the Backend's), filled green with a white tick when ticked. */
:is(.awwo-cms-product, .awwo-cms-checkout) input:is([type="checkbox"], [type="radio"]) {
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	place-content: center;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 5px;
	background: var(--awwo-cms-control);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

:is(.awwo-cms-product, .awwo-cms-checkout) input:is([type="checkbox"], [type="radio"])::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--awwo-cms-white);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: scale(0);
	transition: transform 0.15s;
}

:is(.awwo-cms-product, .awwo-cms-checkout) input:is([type="checkbox"], [type="radio"]):checked {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
}

:is(.awwo-cms-product, .awwo-cms-checkout) input:is([type="checkbox"], [type="radio"]):checked::before {
	transform: scale(1);
}

:is(.awwo-cms-product, .awwo-cms-checkout) input:is([type="checkbox"], [type="radio"]):hover:not(:disabled),
:is(.awwo-cms-product, .awwo-cms-checkout) input:is([type="checkbox"], [type="radio"]):focus-visible {
	border-color: var(--awwo-cms-ok);
}

:is(.awwo-cms-product, .awwo-cms-checkout) input:is([type="checkbox"], [type="radio"]):focus-visible {
	outline: 2px solid var(--awwo-cms-ok);
	outline-offset: 2px;
}

:is(.awwo-cms-product, .awwo-cms-checkout) input[type="radio"] {
	border-radius: 50%;
}

:is(.awwo-cms-product, .awwo-cms-checkout) input[type="radio"]::before {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	-webkit-mask: none;
	mask: none;
}

.awwo-cms-product .awwo-cms-menu-access label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.awwo-cms-product .awwo-cms-menu-access {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

/* Reviews' stars: five, the rating's filled in amber, the rest muted. */
.awwo-cms-stars {
	display: inline-flex;
	gap: 2px;
	vertical-align: middle;
}

.awwo-cms-star {
	display: inline-flex;
	color: var(--awwo-cms-border);
}

.awwo-cms-star .awwo-cms-icon {
	width: 16px;
	height: 16px;
}

.awwo-cms-star.is-on {
	color: var(--awwo-cms-warn);
}

.awwo-cms-comment-body > .awwo-cms-stars {
	margin: 4px 0 8px;
}

/* Under the price: its stars, average and how many reviews (to them). */
.awwo-cms-product-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.awwo-cms-product-rating-count {
	color: var(--awwo-cms-muted);
	font-weight: 400;
}

/* The form's Your Rating: five stars to choose from; hovered or chosen,
   that star and those before it fill (listed 5 to 1, drawn 1 to 5). */
.awwo-cms-rating-input {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.awwo-cms-rating-stars {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
}

.awwo-cms-rating-stars input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.awwo-cms-rating-stars label {
	display: inline-flex;
	color: var(--awwo-cms-border);
	cursor: pointer;
	transition: color 0.2s;
}

.awwo-cms-rating-stars label .awwo-cms-icon {
	width: 28px;
	height: 28px;
}

.awwo-cms-rating-stars input:checked ~ label,
.awwo-cms-rating-stars label:hover,
.awwo-cms-rating-stars label:hover ~ label {
	color: var(--awwo-cms-warn);
}

.awwo-cms-rating-stars input:focus-visible + label {
	outline: 2px solid var(--awwo-cms-ok);
	outline-offset: 2px;
	border-radius: 4px;
}

/* A product card's stars and how many reviews, under its price. */
.awwo-cms-product-card-rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

/* Builder content ----------------------------------------------------------
   The builder's sections (pages, articles, products, their terms, the
   footer), in the CMS's look: cards on the surface with a thin outline and
   12px corners, 16px between their parts, the site's buttons. Per content
   (its alignment, colours, how many in a row) the page's own stylesheet
   sets the rest (PageRenderer). */
.awwo-cms-el-title {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
}

.awwo-cms-el-text {
	margin: 0;
	color: var(--awwo-cms-muted);
	line-height: 1.6;
}

.awwo-cms-el-grid,
.awwo-cms-el-stats,
.awwo-cms-el-gallery {
	display: grid;
	gap: 16px;
}

/* Icon Box: a card as the others (the surface, a thin outline, 12px
   corners, 24px inside), its icon in a soft green square, then its title
   and text. A linked one: outlined in green when hovered. */
.awwo-cms-el-iconbox,
a.awwo-cms-el-iconbox {
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
	padding: 24px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s;
}

a.awwo-cms-el-iconbox.is-link:hover,
a.awwo-cms-el-iconbox.is-link:focus-visible {
	border-color: var(--awwo-cms-green);
}

.awwo-cms-el-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--awwo-cms-radius);
	background: color-mix(in oklab, currentColor 12%, transparent);
}

.awwo-cms-el-icon .awwo-cms-icon {
	width: 22px;
	height: 22px;
}

.awwo-cms-el-iconbox.is-link:hover .awwo-cms-el-title,
.awwo-cms-el-iconbox.is-link:focus-visible .awwo-cms-el-title {
	color: var(--awwo-cms-ok);
}

/* Accordion: each question a card that opens under it, one at a time. */
.awwo-cms-el-accordion {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.awwo-cms-el-acc {
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-surface);
}

.awwo-cms-el-acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.awwo-cms-el-acc > summary::-webkit-details-marker {
	display: none;
}

.awwo-cms-el-acc > summary .awwo-cms-icon {
	flex: none;
	width: 12px;
	height: 12px;
	color: var(--awwo-cms-muted);
	transition: transform 0.2s;
}

.awwo-cms-el-acc[open] > summary {
	color: var(--awwo-cms-ok);
}

.awwo-cms-el-acc[open] > summary .awwo-cms-icon {
	transform: rotate(180deg);
	color: var(--awwo-cms-ok);
}

.awwo-cms-el-acc-body {
	padding: 0 16px 16px;
	color: var(--awwo-cms-muted);
	line-height: 1.6;
}

/* Tabs: the tab list (shown by the page's script) over one card at a time;
   without it, every tab's text under its title. */
.awwo-cms-el-tabs {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-el-tab-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.awwo-cms-el-tab-list[hidden] {
	display: none;
}

.awwo-cms-el-tab {
	padding: 8px 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	background: transparent;
	color: var(--awwo-cms-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.awwo-cms-el-tab[aria-selected="true"],
.awwo-cms-el-tab:hover {
	border-color: var(--awwo-cms-green);
	color: var(--awwo-cms-ok);
}

.awwo-cms-el-tab-panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.awwo-cms-el-tabs.is-ready .awwo-cms-el-tab-title {
	display: none;
}

.awwo-cms-el-tab-panel[hidden] {
	display: none;
}

.awwo-cms-el-tab-title {
	margin: 0;
	font-size: 16px;
}

/* List: each line after its icon. */
.awwo-cms-el-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-el-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.6;
}

.awwo-cms-el-list .awwo-cms-icon {
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 0.3em;
	color: var(--awwo-cms-ok);
}

/* Call to Action: a card with its title, text and buttons. */
.awwo-cms-el-cta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-surface);
}

.awwo-cms-el-cta .awwo-cms-el-title {
	font-size: 24px;
}

.awwo-cms-el-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Counter: big numbers with their labels under them. */
.awwo-cms-el-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.awwo-cms-el-stat-number {
	color: var(--awwo-cms-ok);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.awwo-cms-el-stat-label {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Testimonials: each quote a card, who said it at its foot. */
.awwo-cms-el-quote {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 24px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-surface);
}

.awwo-cms-el-quote blockquote {
	margin: 0;
	font-style: italic;
	line-height: 1.6;
}

.awwo-cms-el-quote figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
}

.awwo-cms-el-quote figcaption > span:last-child {
	display: flex;
	flex-direction: column;
}

.awwo-cms-el-quote figcaption > span:last-child > span {
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-el-quote-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 50%;
	background: color-mix(in oklab, var(--awwo-cms-green) 15%, transparent);
	color: var(--awwo-cms-ok);
	font-weight: 700;
}

.awwo-cms-el-quote-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Pricing Table: each plan a card (a highlighted one outlined in green),
   its button at its foot. */
.awwo-cms-el-plan {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-surface);
}

.awwo-cms-el-plan.is-featured {
	border-color: var(--awwo-cms-green);
	box-shadow: 0 0 0 1px var(--awwo-cms-green);
}

.awwo-cms-el-plan .awwo-cms-el-list {
	flex: 1;
}

.awwo-cms-el-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
}

.awwo-cms-el-price strong {
	font-size: 32px;
	font-weight: 800;
}

.awwo-cms-el-price span {
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

/* Countdown: days, hours, minutes and seconds, each a small card. */
.awwo-cms-el-countdown {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.awwo-cms-el-count {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 72px;
	padding: 12px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-surface);
}

.awwo-cms-el-count[hidden],
.awwo-cms-el-countdown-done[hidden] {
	display: none;
}

.awwo-cms-el-count strong {
	font-size: 28px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.awwo-cms-el-count span {
	color: var(--awwo-cms-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.awwo-cms-el-countdown-done {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

/* Table: outlined, its header row bold, striped rows when asked; it scrolls
   sideways on its own when wider than its place. */
.awwo-cms-el-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
}

.awwo-cms-el-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.awwo-cms-el-table th,
.awwo-cms-el-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--awwo-cms-border);
	text-align: left;
}

.awwo-cms-el-table tr:last-child > td {
	border-bottom: 0;
}

.awwo-cms-el-table th {
	background: var(--awwo-cms-surface);
	font-weight: 700;
}

.awwo-cms-el-table.is-striped tbody tr:nth-child(even) {
	background: color-mix(in oklab, var(--awwo-cms-border) 35%, transparent);
}

/* Gallery: its images in a grid, each with its caption under it. */
.awwo-cms-el-shot {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.awwo-cms-el-shot a {
	display: block;
}

.awwo-cms-el-shot img {
	display: block;
	width: 100%;
}

.awwo-cms-el-shot figcaption {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	text-align: center;
}

/* Its larger view (the page's script): the image over a dark backdrop,
   Close, Previous and Next. */
.awwo-cms-el-lightbox {
	max-width: min(1100px, 100vw - 32px);
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--awwo-cms-radius);
	background: transparent;
	overflow: visible;
}

.awwo-cms-el-lightbox::backdrop {
	background: rgb(0 0 0 / 0.8);
}

.awwo-cms-el-lightbox img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 96px);
	margin: 0 auto;
	border-radius: var(--awwo-cms-radius);
}

.awwo-cms-el-lightbox p {
	margin: 8px 0 0;
	color: var(--awwo-cms-white);
	text-align: center;
}

.awwo-cms-el-lightbox-tools {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

/* Video: the player as wide as its place, in its shape. */
.awwo-cms-el-video {
	display: block;
	width: 100%;
	border-radius: var(--awwo-cms-radius);
	background: #000;
}

/* A video from another site: a dark card with Play (and what it comes
   from) until asked, then its player in its place; a map: its player,
   in an outlined card, from the start. */
.awwo-cms-el-embed {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-navy);
	color: var(--awwo-cms-white);
}

.awwo-cms-el-embed.is-map {
	border: 1px solid var(--awwo-cms-border);
	background: var(--awwo-cms-surface);
	color: inherit;
}

.awwo-cms-el-embed > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
}

/* (As a link, over the page's own link colour.) */
a.awwo-cms-el-embed-play {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	border: 1px solid var(--awwo-cms-green);
	border-radius: 8px;
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.awwo-cms-el-embed-play .awwo-cms-icon {
	width: 14px;
	height: 14px;
}

.awwo-cms-el-embed-note {
	position: relative;
	margin: 0;
	padding: 0 16px;
	font-size: 12px;
	text-align: center;
	opacity: 0.8;
}

.awwo-cms-el-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Menu: its links in a row or a column, as the site's links. */
.awwo-cms-el-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-el-menu a {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.awwo-cms-el-menu a:hover,
.awwo-cms-el-menu a:focus-visible,
.awwo-cms-el-menu a[aria-current="page"] {
	color: var(--awwo-cms-ok);
}

/* Previous and Next: the down arrow turned sideways. */
.awwo-cms-el-lightbox-prev .awwo-cms-icon {
	transform: rotate(90deg);
}

.awwo-cms-el-lightbox-next .awwo-cms-icon {
	transform: rotate(-90deg);
}

/* A Menu's items under an item, set in under it. */
.awwo-cms-el-submenu {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0 0 0 16px;
	list-style: none;
}

.awwo-cms-el-submenu a {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	text-decoration: none;
}

.awwo-cms-el-submenu a:hover,
.awwo-cms-el-submenu a:focus-visible,
.awwo-cms-el-submenu a[aria-current="page"] {
	color: var(--awwo-cms-ok);
}

/* Backend bar ---------------------------------------------------------------
   For connected Owners and Admins: a slim navy strip above the site (both
   themes), staying at the top as the page scrolls (a Sticky header under
   it); Backend, Edit (what the page shows), New Page, Appearance. On phones
   their icons only (their names stay for screen readers). */
.awwo-cms-site-bar {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	height: 40px;
	padding: 0 16px;
	overflow-x: auto;
	background: var(--awwo-cms-navy);
	scrollbar-width: none;
}

.awwo-cms-site-bar-link {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 12px;
	color: color-mix(in oklab, var(--awwo-cms-white) 75%, transparent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.2s;
}

.awwo-cms-site-bar-link:hover,
.awwo-cms-site-bar-link:focus-visible {
	color: var(--awwo-cms-green);
}

.awwo-cms-site-bar-link .awwo-cms-icon {
	width: 14px;
	height: 14px;
}

.has-site-bar .awwo-cms-site-header-block.is-sticky {
	top: 40px;
}

@media (max-width: 600px) {
	.awwo-cms-site-bar-link span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* A Map's Full Screen button: on its top right corner, as the site's
   buttons with icons (outlined, the surface behind); the map on the whole
   screen while it is, without its corners. */
.awwo-cms-el-fullscreen {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	background: var(--awwo-cms-surface);
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
	color: var(--awwo-cms-text);
	cursor: pointer;
}

.awwo-cms-el-fullscreen[hidden] {
	display: none;
}

.awwo-cms-el-fullscreen:hover,
.awwo-cms-el-fullscreen:focus-visible {
	border-color: var(--awwo-cms-green);
	color: var(--awwo-cms-ok);
}

.awwo-cms-el-fullscreen .awwo-cms-icon {
	width: 16px;
	height: 16px;
}

.awwo-cms-el-embed.is-map:fullscreen {
	height: 100%;
	border: 0;
	border-radius: 0;
}

/* Audio: the CMS's player, its caption under it. */
.awwo-cms-el-audio {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.awwo-cms-el-audio audio {
	width: 100%;
}

.awwo-cms-el-audio figcaption {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	text-align: center;
}

/* The Account page's Dashboard: the card and QR Code row 24px under the
   greeting, as its boxes are (their own gap, no margin of its own). */
.awwo-cms-account-content > .awwo-cms-article-about {
	margin-top: 0;
}

/* The Dashboard's second row: the QR Code where it is beside an author's
   card (its column on the right), the left kept for what comes next; on
   phones it takes the row, as an article's. */
.awwo-cms-account-qr-row .awwo-cms-article-qr {
	grid-column: 2;
	/* A perfect square of its own height, not stretched to Rewards beside it. */
	align-self: start;
	aspect-ratio: 1;
}

@media (max-width: 600px) {
	.awwo-cms-account-qr-row .awwo-cms-article-qr {
		grid-column: auto;
	}
}

/* The Account page's Orders: an order's number opens it (green, bold, as
   the site's links); its columns after the first centred, as the
   backend's tables. */
.awwo-cms-account-order-link {
	color: var(--awwo-cms-ok);
	font-weight: 700;
	text-decoration: none;
}

.awwo-cms-account-orders :is(th, td):nth-child(n + 2) {
	text-align: center;
}

/* The Account page's column: their profile's reactions under their name
   (over the menu's line), counts only; hovered, each fills with its colour
   and shows its name (no lift); its badges ringed in the column's colour. */
.awwo-cms-account-reactions {
	margin: 12px 0 0;
}

.awwo-cms-account-reactions .awwo-cms-reaction {
	cursor: default;
}

.awwo-cms-account-reactions .awwo-cms-reaction:hover {
	transform: none;
}

.awwo-cms-account-reactions .awwo-cms-reaction-count {
	border-color: var(--awwo-cms-surface);
}

/* Cart and Checkout, discounts (site/discounts): Coupon Code and Use
   Points each its field with Apply beside it; the coupons applied as
   chips (code, Remove ✕); the points a member has under them. */
.awwo-cms-discounts {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-discounts > .awwo-cms-comments-notice {
	margin: 0;
}

.awwo-cms-discount-apply {
	display: flex;
	gap: 16px;
}

.awwo-cms-discount-apply > .awwo-cms-input {
	flex: 1;
	min-width: 0;
}

.awwo-cms-discount-apply > .awwo-cms-button {
	flex: none;
}

.awwo-cms-discount-coupons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-discount-coupons li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 4px 4px 12px;
	border: 1px solid var(--awwo-cms-green);
	border-radius: 8px;
	color: var(--awwo-cms-ok);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

.awwo-cms-discount-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--awwo-cms-red);
	color: var(--awwo-cms-white);
	cursor: pointer;
}

.awwo-cms-discount-remove[data-awwo-cms-tooltip] {
	--awwo-cms-tooltip-bg: var(--awwo-cms-red);
	--awwo-cms-tooltip-text: var(--awwo-cms-white);
}

.awwo-cms-discount-remove .awwo-cms-icon {
	width: 12px;
	height: 12px;
}

.awwo-cms-discount-balance {
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

/* The Cart's totals: the Subtotal, each coupon (a minus amount), the Total. */
.awwo-cms-cart-totals {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.awwo-cms-cart-discount {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	font-size: 14px;
}

/* Its words where the Subtotal's and Total's start (their labels' 13px indent). */
.awwo-cms-cart-discount > span:first-child {
	padding-left: 13px;
}

@media (max-width: 767px) {
	.awwo-cms-discount-apply {
		flex-direction: column;
	}
}

/* The Dashboard's Rewards (beside the QR Code): four figures in a row
   (Your Points, Worth, Earned, Used), each centred in its column, a thin
   line between them, then the last three changes, each
   its name (and when, in brackets) on the left, its points (+ green,
   - red) on the right,
   a thin line between them. */
.awwo-cms-dashboard-rewards {
	grid-column: 1;
	min-width: 0;
}

/* Its figures and changes in the middle of what the title leaves: 24px
   above them (the box's 16px gap and 8px), 24px under the last (the box's
   padding, the last change without its own), any room left shared above
   and under (the box as tall as the QR Code beside it). */
.awwo-cms-dashboard-rewards > .awwo-cms-dashboard-rewards-stats {
	margin-top: auto;
	padding-top: 8px;
}

.awwo-cms-dashboard-rewards > :last-child {
	margin-bottom: auto;
}

.awwo-cms-dashboard-rewards-latest li:last-child {
	padding-bottom: 0;
}

.awwo-cms-dashboard-rewards-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
}

.awwo-cms-dashboard-rewards-stats > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	text-align: center;
}

/* A thin line between the figures, each centred in its column. */
.awwo-cms-dashboard-rewards-stats > div + div {
	border-left: 1px solid var(--awwo-cms-border);
}

.awwo-cms-dashboard-rewards-stats dd {
	max-width: 100%;
}

.awwo-cms-dashboard-rewards-stats dt {
	color: var(--awwo-cms-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.awwo-cms-dashboard-rewards-stats dd {
	margin: 0;
	overflow: hidden;
	font-size: 18px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awwo-cms-dashboard-rewards-latest {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-dashboard-rewards-latest li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-top: 1px solid var(--awwo-cms-border);
	font-size: 14px;
}

.awwo-cms-dashboard-rewards-what {
	min-width: 0;
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* When, in brackets after its name: quieter. */
.awwo-cms-dashboard-rewards-when {
	color: var(--awwo-cms-muted);
	font-weight: 400;
}

@media (max-width: 600px) {
	.awwo-cms-dashboard-rewards {
		grid-column: auto;
	}

	.awwo-cms-dashboard-rewards-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Two a row: the line only between a row's two. */
	.awwo-cms-dashboard-rewards-stats > div:nth-child(odd) {
		border-left: 0;
	}
}