/**
 * 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 Body Canvas's Max 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 at its sides only, without becoming a scroll box (a sticky header
	   still sticks); above and below free, so the Header's tooltips show whole. */
	overflow-x: clip;
	overflow-y: visible;
}

/* 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-inner-padding: var(--awwo-cms-site-header-inner-padding, 22px);
	--zone-height: var(--awwo-cms-site-topbar-height, 40px);
	--zone-max-width: var(--awwo-cms-site-topbar-max-width, 1080px);
	--zone-menu-align: center;
}

.awwo-cms-site-subheader {
	--zone-inner-padding: var(--awwo-cms-site-header-inner-padding, 22px);
	--zone-height: var(--awwo-cms-site-subheader-height, 36px);
	--zone-max-width: var(--awwo-cms-site-subheader-max-width, 1080px);
	--zone-menu-align: center;
}

.awwo-cms-site-footer {
	--zone-inner-padding: var(--awwo-cms-site-footer-inner-padding, 22px);
	--zone-height: var(--awwo-cms-site-footer-height, 110px);
	--zone-max-width: var(--awwo-cms-site-footer-max-width, 1080px);
	--zone-menu-align: center;
}

.awwo-cms-site-zone-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--zone-max-width);
	/* Its sides: its Canvas's Inner Padding (the Header's or the Footer's). */
	padding: 8px var(--zone-inner-padding);
}

.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 (the Footer Bar's buttons a row above or below too). */
.awwo-cms-site-zone:is(.is-stacked_menu_text, .is-stacked_text_menu, .is-buttons_above_menu_text, .is-buttons_below_menu_text, .is-buttons_above_text_menu, .is-buttons_below_text_menu) .awwo-cms-site-zone-inner {
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding-block: 8px;
}

.awwo-cms-site-zone:is(.is-stacked_menu_text, .is-stacked_text_menu, .is-buttons_above_menu_text, .is-buttons_below_menu_text, .is-buttons_above_text_menu, .is-buttons_below_text_menu) .awwo-cms-site-zone-text {
	margin: 0;
	text-align: center;
}

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

/* Text Only: the whole width. */
.awwo-cms-site-zone.is-text_only .awwo-cms-site-zone-text {
	flex: 1;
	margin: 0;
}

/* Every bar follows its Mode: Stacked and Only centred, side by side each at its own end. */
.awwo-cms-site-zone.is-text_only .awwo-cms-site-zone-text {
	text-align: center;
}

.awwo-cms-site-zone.is-menu_text .awwo-cms-site-zone-text {
	text-align: right;
}

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

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

/* The Footer Bar's Cookies and Back to Top: side by side, centred between
   its menu and text; at its two ends when it is centred (Stacked, Menu
   Only, Text Only), its content kept clear of them. */
.awwo-cms-site-footer-buttons {
	display: flex;
	justify-content: center;
	gap: 8px;
}

/* Side by side: three columns, the buttons on the bar's own centre. */
.awwo-cms-site-footer.has-buttons:is(.is-menu_text, .is-text_menu) .awwo-cms-site-zone-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.awwo-cms-site-footer.has-buttons:is(.is-menu_text, .is-text_menu) .awwo-cms-site-zone-inner > :first-child {
	justify-self: start;
	margin: 0;
}

.awwo-cms-site-footer.has-buttons:is(.is-menu_text, .is-text_menu) .awwo-cms-site-zone-inner > :last-child {
	justify-self: end;
	margin: 0;
}

.awwo-cms-site-footer.has-buttons .awwo-cms-site-zone-inner {
	position: relative;
}

.awwo-cms-site-footer.has-buttons:is(.is-stacked_menu_text, .is-stacked_text_menu, .is-menu_only, .is-text_only) .awwo-cms-site-zone-inner {
	padding-inline: calc(var(--awwo-cms-site-footer-inner-padding, 22px) * 2 + 40px);
}

/* Stacked at one side, the buttons at the other: menu and text one above
   the other, against their own end (left, or right when the buttons lead). */
.awwo-cms-site-footer:is(.is-stacked_menu_text_buttons, .is-stacked_text_menu_buttons, .is-buttons_stacked_menu_text, .is-buttons_stacked_text_menu) .awwo-cms-site-zone-inner {
	justify-content: space-between;
}

.awwo-cms-site-zone-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

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

.awwo-cms-site-footer:is(.is-buttons_stacked_menu_text, .is-buttons_stacked_text_menu) .awwo-cms-site-zone-stack {
	align-items: flex-end;
	margin-left: auto;
}

.awwo-cms-site-footer:is(.is-buttons_stacked_menu_text, .is-buttons_stacked_text_menu) .awwo-cms-site-zone-stack .awwo-cms-site-zone-text {
	text-align: right;
}

.awwo-cms-site-zone-inner > .awwo-cms-site-footer-cookies,
.awwo-cms-site-zone-inner > .awwo-cms-site-footer-top {
	position: absolute;
	top: 0;
	bottom: 0;
	margin-block: auto;
}

.awwo-cms-site-zone-inner > .awwo-cms-site-footer-cookies {
	left: var(--awwo-cms-site-footer-inner-padding, 22px);
}

.awwo-cms-site-zone-inner > .awwo-cms-site-footer-top {
	right: var(--awwo-cms-site-footer-inner-padding, 22px);
}

/* 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. */
/* Body Canvas's Outer Padding, or its Max Width under 100%: the header and footer bordered on every side, boxes on the page. */
.awwo-cms-site-boxed :is(.awwo-cms-site-header-block, .awwo-cms-site-footer-block) {
	border: 1px solid var(--awwo-cms-border);
}

.awwo-cms-site-footer-block {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--awwo-cms-site-footer-canvas-max-width, 100%);
	border-radius: var(--awwo-cms-site-footer-canvas-radius, 0);
	margin: 0 auto;
	background-color: var(--awwo-cms-surface);
	border-top: 1px solid var(--awwo-cms-border);
}

/* Sticky: kept at the window's bottom while the page scrolls (as the Header Canvas at its top). */
.awwo-cms-site-footer-block.is-sticky {
	position: sticky;
	bottom: 0;
	z-index: 20;
}

/* 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) var(--awwo-cms-site-footer-inner-padding, 22px);
}

.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%);
	border-radius: var(--awwo-cms-site-header-canvas-radius, 0);
	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 var(--awwo-cms-site-header-inner-padding, 22px);
}

.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 their own
   button, their arrow pointing up to it. */
.awwo-cms-site-actions {
	--awwo-cms-site-drop-gap: 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: calc(var(--awwo-cms-radius-tl, 12px) * 2 / 12) 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);
	/* Its colour only: Theme's Sweep keeps its own green wipe (below). */
	background-color: 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: calc(var(--awwo-cms-radius-tl, 12px) * 9 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 9 / 12) calc(var(--awwo-cms-radius-br, 12px) * 9 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 9 / 12);
	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: var(--awwo-cms-radius-tl, 12px) var(--awwo-cms-radius-tr, 12px) var(--awwo-cms-radius-br, 12px) var(--awwo-cms-radius-bl, 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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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-tl, var(--awwo-cms-radius)) var(--awwo-cms-radius-tr, 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-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, 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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) 0 0 calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) 0 0 calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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-br, 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-tr, 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-tr, 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(.is-stacked, .is-stacked_reverse) .awwo-cms-site-header-end {
	position: relative;
}

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

/* Reversed: hung before the first one instead. */
.awwo-cms-site-header.is-stacked_reverse .awwo-cms-site-actions {
	right: 100%;
	left: auto;
	margin-right: var(--awwo-cms-site-logo-gap, 20px);
	margin-left: 0;
}

/* Stacked Logo + Buttons / Menu: the logo centred on its row, the buttons
   at that row's right end (outside what is centred), the menu under it. */
.awwo-cms-site-header-logo-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.awwo-cms-site-header-logo-row .awwo-cms-site-actions {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

/* Reversed: at the row's left end. */
.awwo-cms-site-header.is-stacked_buttons_reverse .awwo-cms-site-header-logo-row .awwo-cms-site-actions {
	right: auto;
	left: 0;
}

/* Beside: the row as wide as the logo, the buttons just after it (before it, reversed). */
.awwo-cms-site-header:is(.is-stacked_beside, .is-stacked_beside_reverse) .awwo-cms-site-header-logo-row {
	width: auto;
}

.awwo-cms-site-header.is-stacked_beside .awwo-cms-site-header-logo-row .awwo-cms-site-actions {
	right: auto;
	left: 100%;
	margin-left: var(--awwo-cms-site-logo-gap, 20px);
}

.awwo-cms-site-header.is-stacked_beside_reverse .awwo-cms-site-header-logo-row .awwo-cms-site-actions {
	right: 100%;
	margin-right: var(--awwo-cms-site-logo-gap, 20px);
}

/* Buttons + Menu + Logo: the buttons first too (the whole of Logo + Menu + Buttons mirrored). */
.awwo-cms-site-header.is-buttons_menu_logo .awwo-cms-site-header-end {
	flex-direction: row-reverse;
}

/* Overlapping Logo + Menu + Buttons: the header ending at 60% of the logo,
   so 40% of it lies over the page (its own height then, not the Height
   setting's); the menu and buttons centred on the part left in the header. */
.awwo-cms-site-header.is-logo_overlap {
	min-height: 0;
}

.awwo-cms-site-header.is-logo_overlap .awwo-cms-site-header-inner {
	align-items: flex-start;
	padding-bottom: 0;
}

.awwo-cms-site-header.is-logo_overlap .awwo-cms-site-logo {
	position: relative;
	z-index: 1;
}

.awwo-cms-site-header.is-logo_overlap .awwo-cms-site-header-end {
	align-self: center;
}

.awwo-cms-site-header.is-logo_overlap .awwo-cms-site-logo-light {
	margin-bottom: calc(var(--awwo-cms-site-logo-height-light, 80px) * -0.4);
}

.awwo-cms-site-header.is-logo_overlap .awwo-cms-site-logo .awwo-cms-site-logo-ring {
	visibility: visible;
}

.awwo-cms-site-header.is-logo_overlap .awwo-cms-site-logo-dark {
	margin-bottom: calc(var(--awwo-cms-site-logo-height-dark, 80px) * -0.4);
}

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

/* Stacked: the logo above the menu, centred. */
.awwo-cms-site-header:is(.is-stacked, .is-stacked_reverse, .is-stacked_buttons, .is-stacked_buttons_reverse, .is-stacked_beside, .is-stacked_beside_reverse) .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-light, 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;
	/* Theme's Animation moves a menu link as it moves the buttons (they are links: no fill; Sweep only
	   recolours, as Fade), over its Transition Timer (None at once). */
	transition: color var(--awwo-cms-site-button-timer, 0.2s) var(--awwo-cms-ease-out), transform var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out),
		text-shadow var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out);
}

.awwo-cms-site-buttons-none .awwo-cms-site-menu a {
	transition: none;
}

.awwo-cms-site-buttons-lift .awwo-cms-site-menu a:is(:hover, :focus-visible) {
	transform: translateY(-6px);
}

.awwo-cms-site-buttons-float .awwo-cms-site-menu a:is(:hover, :focus-visible) {
	transform: translateY(-6px);
	text-shadow: 0 6px 10px rgb(0 0 0 / 0.25);
}

.awwo-cms-site-buttons-press .awwo-cms-site-menu a:is(:hover, :focus-visible) {
	transform: translateY(2px) scale(0.97);
}

.awwo-cms-site-buttons-scale .awwo-cms-site-menu a:is(:hover, :focus-visible) {
	transform: scale(1.08);
}

.awwo-cms-site-buttons-tilt .awwo-cms-site-menu a:is(:hover, :focus-visible) {
	transform: perspective(200px) rotateX(var(--awwo-cms-tilt-x, 0deg)) rotateY(var(--awwo-cms-tilt-y, 0deg));
}

.awwo-cms-site-buttons-glow .awwo-cms-site-menu a:is(:hover, :focus-visible) {
	text-shadow: 0 0 12px var(--awwo-cms-green);
}

.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-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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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;
}

.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: calc(var(--awwo-cms-radius-tl, 12px) * 4 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 4 / 12) calc(var(--awwo-cms-radius-br, 12px) * 4 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 4 / 12);
	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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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;
	/* An icon 8px from its words (as Show Map's). */
	gap: 8px;
	box-sizing: border-box;
	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: var(--awwo-cms-radius-small, 8px);
}

/* Theme's Border Radius on the site's fields, the CMS's own buttons and the icon buttons (Menu, Account, Cart,
   light / dark, Cookies, Back to Top, Social Profiles, Like and Dislike): two thirds of each corner (8px from 12px), their inner pieces (an icon
   square, a reveal button, a phone's country) one less, inside the outline. */
.awwo-cms-site :is(.awwo-cms-input, .awwo-cms-input-wrap, .awwo-cms-button, .awwo-cms-theme-toggle, .awwo-cms-social a, .awwo-cms-reaction) {
	border-radius: var(--awwo-cms-radius-small, 8px);
}

.awwo-cms-site .awwo-cms-input-wrap .awwo-cms-input {
	border-radius: 0;
}

.awwo-cms-site .awwo-cms-input-wrap .awwo-cms-input-icon,
.awwo-cms-site .awwo-cms-phone select.awwo-cms-input {
	border-radius: calc(var(--awwo-cms-radius-small-tl, 8px) - 1px) 0 0 calc(var(--awwo-cms-radius-small-bl, 8px) - 1px);
}

.awwo-cms-site .awwo-cms-input-wrap .awwo-cms-reveal {
	border-radius: 0 calc(var(--awwo-cms-radius-small-tr, 8px) - 1px) calc(var(--awwo-cms-radius-small-br, 8px) - 1px) 0;
}

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);
}

/* Float: the lift with a deeper shadow; Press: a little in; Tilt: leaning towards the pointer
   (awwo-cms-tilt.js sets the angles). */
.awwo-cms-site-buttons-float a.awwo-cms-site-button:hover,
.awwo-cms-site-buttons-float a.awwo-cms-site-button:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.35);
}

.awwo-cms-site-buttons-press a.awwo-cms-site-button:hover,
.awwo-cms-site-buttons-press a.awwo-cms-site-button:focus-visible {
	transform: translateY(2px) scale(0.97);
}

.awwo-cms-site-buttons-tilt a.awwo-cms-site-button:hover,
.awwo-cms-site-buttons-tilt a.awwo-cms-site-button:focus-visible {
	transform: perspective(400px) rotateX(var(--awwo-cms-tilt-x, 0deg)) rotateY(var(--awwo-cms-tilt-y, 0deg));
}

/* 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-float .awwo-cms-site-button,
	.awwo-cms-site-buttons-press .awwo-cms-site-button,
	.awwo-cms-site-buttons-tilt .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;
	}
}

/* Burger Menu ------------------------------------------------------------- */

/* Dropdown: the Account menu's own (its card, cap, rows and cut), under the
   menu button and shown with it (phones, tablets, a desktop's compact
   Navigation Mode), its Min Width; hovered, focused or tapped open. It
   lines up with the button's edge and opens toward the screen's middle
   (is-start: from its left edge, is-end: from its right, set by
   awwo-cms-site.js), its arrow still under the button. */
.awwo-cms-site-account.awwo-cms-site-burger {
	--awwo-cms-site-drop-gap: 12px;
	display: none;
}

.awwo-cms-site-burger .awwo-cms-site-account-menu {
	min-width: min(var(--awwo-cms-site-burger-min-width, 260px), calc(100vw - 32px));
}

.awwo-cms-site-burger.is-open .awwo-cms-site-account-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.awwo-cms-site-burger.is-open > .awwo-cms-site-action {
	border-color: var(--awwo-cms-green);
	background-color: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-site-burger:is(.is-start, .is-end) .awwo-cms-site-account-menu {
	transform: translate(0, -4px);
}

.awwo-cms-site-burger:is(.is-start, .is-end):is(:hover, :focus-within, .is-open) .awwo-cms-site-account-menu {
	transform: translate(0, 0);
}

.awwo-cms-site-burger.is-start .awwo-cms-site-account-menu {
	left: 0;
}

.awwo-cms-site-burger.is-end .awwo-cms-site-account-menu {
	right: 0;
	left: auto;
}

.awwo-cms-site-burger.is-start .awwo-cms-site-account-menu > .awwo-cms-site-account-cap::before {
	left: 14px;
}

.awwo-cms-site-burger.is-end .awwo-cms-site-account-menu > .awwo-cms-site-account-cap::before {
	right: 14px;
	left: auto;
}

/* The items under an item set in by their depth; the current page green. */
.awwo-cms-site-burger-menu > .awwo-cms-site-burger-depth-1 > a {
	padding-left: 20px;
}

.awwo-cms-site-burger-menu > .awwo-cms-site-burger-depth-2 > a {
	padding-left: 32px;
}

.awwo-cms-site-burger-menu > .awwo-cms-site-burger-depth-3 > a {
	padding-left: 44px;
}

.awwo-cms-site-burger-menu a[aria-current="page"] {
	color: var(--awwo-cms-green);
}

/* Modal: a card over the dimmed page, as the Backend's (its title and
   Close on its head row); Overlay: the
   whole screen, the items centred in it, Close at its top right in the
   Header buttons' look. Each its background's Opacity and Blur. The items
   one under another, an item's own opening in place under it; the page
   behind stays still. */
dialog.awwo-cms-site-burger-window {
	box-sizing: border-box;
	width: min(420px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: 24px;
	overflow-y: auto;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-corners, var(--awwo-cms-radius));
	background: var(--awwo-cms-surface);
	color: var(--awwo-cms-text);
	box-shadow: 0 24px 64px rgb(0 0 0 / 0.35);
	text-align: center;
}

dialog.awwo-cms-site-burger-window::backdrop {
	background: rgb(0 0 0 / var(--awwo-cms-site-burger-modal-opacity, 0.55));
	backdrop-filter: blur(var(--awwo-cms-site-burger-modal-blur, 4px));
}

dialog.awwo-cms-site-burger-window.is-overlay {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: color-mix(in oklab, var(--awwo-cms-surface) var(--awwo-cms-site-burger-overlay-opacity, 90%), transparent);
	box-shadow: none;
	backdrop-filter: blur(var(--awwo-cms-site-burger-overlay-blur, 8px));
}

dialog.awwo-cms-site-burger-window.is-overlay::backdrop {
	background: transparent;
	backdrop-filter: none;
}

dialog.awwo-cms-site-burger-window.is-overlay[open] {
	display: grid;
	grid-template-rows: auto 1fr;
}

html:has(dialog.awwo-cms-site-burger-window[open]) {
	overflow: hidden;
}

.awwo-cms-site-burger-title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

/* Overlay: the title as tall as Close beside it. */
dialog.awwo-cms-site-burger-window.is-overlay .awwo-cms-site-burger-title {
	margin-bottom: 8px;
	line-height: 40px;
}

/* Modal: a card as the Backend's, its head row the title at the left and
   Close (small) at the right; 24px from the head to the first item (the
   items' own 6px and these 18px), the last as far from the card's bottom
   as the head from its top (24px), 12px between the items. */
.awwo-cms-site-burger-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 36px;
}

/* Its title as the Backend cards' (small, muted, spaced capitals). */
.awwo-cms-site-burger-head .awwo-cms-site-burger-title {
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
}

.awwo-cms-site-burger-head .awwo-cms-button {
	flex: none;
	min-width: 0;
	padding: 6px 14px;
	font-size: 12px;
}

dialog.awwo-cms-site-burger-window.is-modal .awwo-cms-site-burger-list {
	margin: 18px 0 -6px;
}

dialog.awwo-cms-site-burger-window .awwo-cms-site-burger-close {
	position: absolute;
	top: 24px;
	right: 24px;
}

.awwo-cms-site-burger-list,
.awwo-cms-site-burger-sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

dialog.awwo-cms-site-burger-window.is-overlay .awwo-cms-site-burger-list {
	align-self: center;
	width: min(480px, 100%);
	margin: 0 auto;
	font-size: 1.25em;
}

dialog.awwo-cms-site-burger-window .awwo-cms-site-burger-list .awwo-cms-site-menu-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 0;
}

dialog.awwo-cms-site-burger-window .awwo-cms-site-burger-sub {
	display: none;
	flex-basis: 100%;
	font-size: 0.9em;
}

dialog.awwo-cms-site-burger-window .awwo-cms-site-menu-item.is-open > .awwo-cms-site-burger-sub {
	display: block;
}

dialog.awwo-cms-site-burger-window .awwo-cms-site-burger-list .awwo-cms-site-burger-sub .awwo-cms-site-menu-item {
	padding: 6px 0 0;
}

/* Phones and tablets: the Navigation ------------------------------------- */

@media (max-width: 1024px) {
	/* Phones and tablets: the Navigation in its Mobile or Tablet Mode instead of its Mode. Its
	   logo, menu button, Account, cart and light/dark switch are placed one
	   by one on a grid (the boxes holding them laid flat). */
	.awwo-cms-site-header[class] {
		min-height: var(--awwo-cms-site-header-height, 80px);
	}

	.awwo-cms-site-header[class] .awwo-cms-site-header-inner {
		display: grid;
		align-items: center;
		justify-content: stretch;
		gap: 12px;
		padding-bottom: 16px;
	}

	.awwo-cms-site-header-end,
	.awwo-cms-site-header-end > .awwo-cms-site-menu,
	.awwo-cms-site-actions,
	.awwo-cms-site-header-logo-row {
		display: contents;
	}

	.awwo-cms-site-header .awwo-cms-site-logo {
		grid-area: logo;
		justify-self: center;
	}

	.awwo-cms-site-header[class] .awwo-cms-site-logo img[class] {
		margin-bottom: 0;
	}

	/* Its shade and border with it: not over the page here (Tablet and Mobile Modes over Content bring them back). */
	.awwo-cms-site-header[class] .awwo-cms-site-logo .awwo-cms-site-logo-ring {
		visibility: hidden;
	}

	.awwo-cms-site-header .awwo-cms-site-menu-toggle {
		grid-area: menu;
	}

	.awwo-cms-site-header :is(.awwo-cms-site-account:not(.awwo-cms-site-cart, .awwo-cms-site-burger), .awwo-cms-site-actions > a.awwo-cms-site-action:not(.awwo-cms-site-cart-button)) {
		grid-area: account;
	}

	.awwo-cms-site-header :is(.awwo-cms-site-cart, .awwo-cms-site-actions > .awwo-cms-site-cart-button) {
		grid-area: cart;
	}

	.awwo-cms-site-header .awwo-cms-site-theme {
		grid-area: switch;
	}

	/* Burger Menu's Dropdown: its button and menu in the menu button's place. */
	.awwo-cms-site-header .awwo-cms-site-account.awwo-cms-site-burger {
		display: flex;
		grid-area: menu;
	}

	/* The Header's menu folds behind its button (opened as Burger Menu says). */
	.awwo-cms-site-menu-toggle {
		display: inline-flex;
	}

	.awwo-cms-site-header .awwo-cms-site-menu-list {
		display: none;
	}
}

/* Tablets: the Navigation in its Tablet Mode. */
@media (min-width: 601px) and (max-width: 1024px) {
	/* Menu + Account + Logo + Cart + Switch: one row, the logo between (over content too). */
	.awwo-cms-site-header:is(.is-tablet-menu_account_logo_cart_switch, .is-tablet-menu_account_logo_cart_switch_overlap) .awwo-cms-site-header-inner {
		grid-template-columns: auto auto 1fr auto auto;
		grid-template-areas: "menu account logo cart switch";
	}

	/* Logo + the four buttons in one row, the logo at the left end (or the right, the buttons first). */
	.awwo-cms-site-header.is-tablet-logo_menu_account_cart_switch .awwo-cms-site-header-inner {
		grid-template-columns: 1fr auto auto auto auto;
		grid-template-areas: "logo menu account cart switch";
	}

	.awwo-cms-site-header.is-tablet-logo_menu_account_cart_switch .awwo-cms-site-logo {
		justify-self: start;
	}

	.awwo-cms-site-header.is-tablet-menu_account_cart_switch_logo .awwo-cms-site-header-inner {
		grid-template-columns: auto auto auto auto 1fr;
		grid-template-areas: "menu account cart switch logo";
	}

	.awwo-cms-site-header.is-tablet-menu_account_cart_switch_logo .awwo-cms-site-logo {
		justify-self: end;
	}

	/* Logo / Menu + Account + Cart + Switch, and the buttons first, the logo under them. */
	.awwo-cms-site-header:is(.is-tablet-logo_buttons, .is-tablet-buttons_logo, .is-tablet-buttons_logo_overlap) .awwo-cms-site-header-inner {
		grid-template-columns: repeat(4, auto);
		justify-content: center;
	}

	.awwo-cms-site-header.is-tablet-logo_buttons .awwo-cms-site-header-inner {
		grid-template-areas: "logo logo logo logo" "menu account cart switch";
	}

	.awwo-cms-site-header:is(.is-tablet-buttons_logo, .is-tablet-buttons_logo_overlap) .awwo-cms-site-header-inner {
		grid-template-areas: "menu account cart switch" "logo logo logo logo";
	}

	/* Over content: the header ending at 60% of the logo, 40% of it over the
	   page (in one row, the buttons centred on the 60% left in the header). */
	.awwo-cms-site-header:is(.is-tablet-buttons_logo_overlap, .is-tablet-menu_account_logo_cart_switch_overlap)[class] {
		min-height: 0;
	}

	.awwo-cms-site-header:is(.is-tablet-buttons_logo_overlap, .is-tablet-menu_account_logo_cart_switch_overlap)[class] .awwo-cms-site-header-inner {
		padding-bottom: 0;
	}

	.awwo-cms-site-header:is(.is-tablet-buttons_logo_overlap, .is-tablet-menu_account_logo_cart_switch_overlap) .awwo-cms-site-logo {
		position: relative;
		z-index: 1;
		align-self: start;
	}

	.awwo-cms-site-header:is(.is-tablet-buttons_logo_overlap, .is-tablet-menu_account_logo_cart_switch_overlap) .awwo-cms-site-logo img.awwo-cms-site-logo-light {
		margin-bottom: calc(var(--awwo-cms-site-logo-height-light, 80px) * -0.4);
	}

	.awwo-cms-site-header:is(.is-tablet-buttons_logo_overlap, .is-tablet-menu_account_logo_cart_switch_overlap) .awwo-cms-site-logo .awwo-cms-site-logo-ring {
		visibility: visible;
	}

	.awwo-cms-site-header:is(.is-tablet-buttons_logo_overlap, .is-tablet-menu_account_logo_cart_switch_overlap) .awwo-cms-site-logo img.awwo-cms-site-logo-dark {
		margin-bottom: calc(var(--awwo-cms-site-logo-height-dark, 80px) * -0.4);
	}
}

/* Phones: the Navigation in its Mobile Mode. */
@media (max-width: 600px) {
	/* Menu + Account + Logo + Cart + Switch: one row, the logo between (over content too). */
	.awwo-cms-site-header:is(.is-phone-menu_account_logo_cart_switch, .is-phone-menu_account_logo_cart_switch_overlap) .awwo-cms-site-header-inner {
		grid-template-columns: auto auto 1fr auto auto;
		grid-template-areas: "menu account logo cart switch";
	}

	/* Logo + the four buttons in one row, the logo at the left end (or the right, the buttons first). */
	.awwo-cms-site-header.is-phone-logo_menu_account_cart_switch .awwo-cms-site-header-inner {
		grid-template-columns: 1fr auto auto auto auto;
		grid-template-areas: "logo menu account cart switch";
	}

	.awwo-cms-site-header.is-phone-logo_menu_account_cart_switch .awwo-cms-site-logo {
		justify-self: start;
	}

	.awwo-cms-site-header.is-phone-menu_account_cart_switch_logo .awwo-cms-site-header-inner {
		grid-template-columns: auto auto auto auto 1fr;
		grid-template-areas: "menu account cart switch logo";
	}

	.awwo-cms-site-header.is-phone-menu_account_cart_switch_logo .awwo-cms-site-logo {
		justify-self: end;
	}

	/* Logo / Menu + Account + Cart + Switch, and the buttons first, the logo under them. */
	.awwo-cms-site-header:is(.is-phone-logo_buttons, .is-phone-buttons_logo, .is-phone-buttons_logo_overlap) .awwo-cms-site-header-inner {
		grid-template-columns: repeat(4, auto);
		justify-content: center;
	}

	.awwo-cms-site-header.is-phone-logo_buttons .awwo-cms-site-header-inner {
		grid-template-areas: "logo logo logo logo" "menu account cart switch";
	}

	.awwo-cms-site-header:is(.is-phone-buttons_logo, .is-phone-buttons_logo_overlap) .awwo-cms-site-header-inner {
		grid-template-areas: "menu account cart switch" "logo logo logo logo";
	}

	/* Over content: the header ending at 60% of the logo, 40% of it over the
	   page (in one row, the buttons centred on the 60% left in the header). */
	.awwo-cms-site-header:is(.is-phone-buttons_logo_overlap, .is-phone-menu_account_logo_cart_switch_overlap)[class] {
		min-height: 0;
	}

	.awwo-cms-site-header:is(.is-phone-buttons_logo_overlap, .is-phone-menu_account_logo_cart_switch_overlap)[class] .awwo-cms-site-header-inner {
		padding-bottom: 0;
	}

	.awwo-cms-site-header:is(.is-phone-buttons_logo_overlap, .is-phone-menu_account_logo_cart_switch_overlap) .awwo-cms-site-logo {
		position: relative;
		z-index: 1;
		align-self: start;
	}

	.awwo-cms-site-header:is(.is-phone-buttons_logo_overlap, .is-phone-menu_account_logo_cart_switch_overlap) .awwo-cms-site-logo img.awwo-cms-site-logo-light {
		margin-bottom: calc(var(--awwo-cms-site-logo-height-light, 80px) * -0.4);
	}

	.awwo-cms-site-header:is(.is-phone-buttons_logo_overlap, .is-phone-menu_account_logo_cart_switch_overlap) .awwo-cms-site-logo .awwo-cms-site-logo-ring {
		visibility: visible;
	}

	.awwo-cms-site-header:is(.is-phone-buttons_logo_overlap, .is-phone-menu_account_logo_cart_switch_overlap) .awwo-cms-site-logo img.awwo-cms-site-logo-dark {
		margin-bottom: calc(var(--awwo-cms-site-logo-height-dark, 80px) * -0.4);
	}
}

/* Desktops: a Navigation Mode with the menu behind its button (the tablets' modes), laid out as on tablets. */
@media (min-width: 1025px) {
	/* Its logo, menu button, Account, cart and light/dark switch placed one
	   by one on a grid (the boxes holding them laid flat). */
	.awwo-cms-site-header.is-compact[class] {
		min-height: var(--awwo-cms-site-header-height, 80px);
	}

	.awwo-cms-site-header.is-compact[class] .awwo-cms-site-header-inner {
		display: grid;
		align-items: center;
		justify-content: stretch;
		gap: 12px;
		padding-bottom: 16px;
	}

	.awwo-cms-site-header.is-compact .awwo-cms-site-header-end,
	.awwo-cms-site-header.is-compact .awwo-cms-site-header-end > .awwo-cms-site-menu,
	.awwo-cms-site-header.is-compact .awwo-cms-site-actions,
	.awwo-cms-site-header.is-compact .awwo-cms-site-header-logo-row {
		display: contents;
	}

	.awwo-cms-site-header.is-compact .awwo-cms-site-logo {
		grid-area: logo;
		justify-self: center;
	}

	.awwo-cms-site-header.is-compact[class] .awwo-cms-site-logo img[class] {
		margin-bottom: 0;
	}

	.awwo-cms-site-header.is-compact[class] .awwo-cms-site-logo .awwo-cms-site-logo-ring {
		visibility: hidden;
	}

	.awwo-cms-site-header.is-compact .awwo-cms-site-menu-toggle {
		grid-area: menu;
	}

	.awwo-cms-site-header.is-compact :is(.awwo-cms-site-account:not(.awwo-cms-site-cart, .awwo-cms-site-burger), .awwo-cms-site-actions > a.awwo-cms-site-action:not(.awwo-cms-site-cart-button)) {
		grid-area: account;
	}

	.awwo-cms-site-header.is-compact :is(.awwo-cms-site-cart, .awwo-cms-site-actions > .awwo-cms-site-cart-button) {
		grid-area: cart;
	}

	.awwo-cms-site-header.is-compact .awwo-cms-site-theme {
		grid-area: switch;
	}

	.awwo-cms-site-header.is-compact .awwo-cms-site-account.awwo-cms-site-burger {
		display: flex;
		grid-area: menu;
	}

	/* The Header's menu folds behind its button (opened as Burger Menu says). */
	.awwo-cms-site-header.is-compact .awwo-cms-site-menu-toggle {
		display: inline-flex;
	}

	.awwo-cms-site-header.is-compact .awwo-cms-site-menu-list {
		display: none;
	}

	/* Menu + Account + Logo + Cart + Switch: one row, the logo between (over content too). */
	.awwo-cms-site-header.is-compact:is(.is-menu_account_logo_cart_switch, .is-menu_account_logo_cart_switch_overlap) .awwo-cms-site-header-inner {
		grid-template-columns: auto auto 1fr auto auto;
		grid-template-areas: "menu account logo cart switch";
	}

	/* Logo + the four buttons in one row, the logo at the left end (or the right, the buttons first). */
	.awwo-cms-site-header.is-compact.is-logo_menu_account_cart_switch .awwo-cms-site-header-inner {
		grid-template-columns: 1fr auto auto auto auto;
		grid-template-areas: "logo menu account cart switch";
	}

	.awwo-cms-site-header.is-compact.is-logo_menu_account_cart_switch .awwo-cms-site-logo {
		justify-self: start;
	}

	.awwo-cms-site-header.is-compact.is-menu_account_cart_switch_logo .awwo-cms-site-header-inner {
		grid-template-columns: auto auto auto auto 1fr;
		grid-template-areas: "menu account cart switch logo";
	}

	.awwo-cms-site-header.is-compact.is-menu_account_cart_switch_logo .awwo-cms-site-logo {
		justify-self: end;
	}

	/* Logo / Menu + Account + Cart + Switch, and the buttons first, the logo under them. */
	.awwo-cms-site-header.is-compact:is(.is-logo_buttons, .is-buttons_logo, .is-buttons_logo_overlap) .awwo-cms-site-header-inner {
		grid-template-columns: repeat(4, auto);
		justify-content: center;
	}

	.awwo-cms-site-header.is-compact.is-logo_buttons .awwo-cms-site-header-inner {
		grid-template-areas: "logo logo logo logo" "menu account cart switch";
	}

	.awwo-cms-site-header.is-compact:is(.is-buttons_logo, .is-buttons_logo_overlap) .awwo-cms-site-header-inner {
		grid-template-areas: "menu account cart switch" "logo logo logo logo";
	}

	/* Over content: the header ending at 60% of the logo, 40% of it over the
	   page (in one row, the buttons centred on the 60% left in the header). */
	.awwo-cms-site-header.is-compact:is(.is-buttons_logo_overlap, .is-menu_account_logo_cart_switch_overlap)[class] {
		min-height: 0;
	}

	.awwo-cms-site-header.is-compact:is(.is-buttons_logo_overlap, .is-menu_account_logo_cart_switch_overlap)[class] .awwo-cms-site-header-inner {
		padding-bottom: 0;
	}

	.awwo-cms-site-header.is-compact:is(.is-buttons_logo_overlap, .is-menu_account_logo_cart_switch_overlap) .awwo-cms-site-logo {
		position: relative;
		z-index: 1;
		align-self: start;
	}

	.awwo-cms-site-header.is-compact:is(.is-buttons_logo_overlap, .is-menu_account_logo_cart_switch_overlap) .awwo-cms-site-logo img.awwo-cms-site-logo-light {
		margin-bottom: calc(var(--awwo-cms-site-logo-height-light, 80px) * -0.4);
	}

	.awwo-cms-site-header.is-compact:is(.is-buttons_logo_overlap, .is-menu_account_logo_cart_switch_overlap) .awwo-cms-site-logo .awwo-cms-site-logo-ring {
		visibility: visible;
	}

	.awwo-cms-site-header.is-compact:is(.is-buttons_logo_overlap, .is-menu_account_logo_cart_switch_overlap) .awwo-cms-site-logo img.awwo-cms-site-logo-dark {
		margin-bottom: calc(var(--awwo-cms-site-logo-height-dark, 80px) * -0.4);
	}
}

@media (max-width: 600px) {
	.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-text {
	display: block;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.awwo-cms-account-name > span:not(.awwo-cms-account-name-text) {
	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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) 0 0 calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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;
}

/* A section's description (Appearance, Account Endpoints), right under its
   box's title: muted text, then a thin line (the core's dividers: the
   border's colour), 16px apart; the box's own 16px gap above and after it. */
.awwo-cms-account-lead {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Its text: Appearance's Font Size and Text Align (13px, centred by default). */
.awwo-cms-account-lead > .awwo-cms-box-text {
	font-size: var(--awwo-cms-site-account-lead-size, 13px);
	text-align: var(--awwo-cms-site-account-lead-align, center);
}

.awwo-cms-account-lead-divider {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--awwo-cms-border);
}

/* 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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
		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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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 calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) 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 Members, Articles and Shop pages: their own content inside their canvas, 24px above their toolbar (as their
   description and toolbar keep below them); none when it is empty. */
.awwo-cms-page-canvas > .awwo-cms-site-page {
	margin-bottom: 24px;
}

/* (By its id too: the page's own stylesheet sets its layout by it.) */
.awwo-cms-page-canvas > #awwo-cms-site-page.awwo-cms-site-page:not(:has(> *)) {
	display: none;
}

/* 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;
}

/* Theme's Framed Template, on computers: as the backend, the header and
   footer stay where they are and only the canvas scrolls, its content
   passing under its rounded edges (Boxed: the whole page scrolls). */
@media (min-width: 769px) {
	/* The page itself locked too, not only its body: a page scrolled on a phone and then widened (a window resized)
	   goes back to its top instead of staying scrolled past the locked body, a blank screen. */
	html:has(> body.awwo-cms-site-framed .awwo-cms-page-frame) {
		overflow: hidden;
	}

	body.awwo-cms-site-framed:has(.awwo-cms-page-frame) {
		height: 100vh;
		height: 100dvh;
		min-height: 0;
		overflow: hidden;
	}

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

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

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

	.awwo-cms-site-framed .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-tl, var(--awwo-cms-radius)) - 1px) calc(var(--awwo-cms-radius-tr, 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-br, var(--awwo-cms-radius)) - 1px) calc(var(--awwo-cms-radius-bl, 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);
}

/* Theme's Framed Template: every page in the backend's frame colour (the
   surface, as its menu and top bar), a page's canvas darker on it. */
body.awwo-cms-site-framed {
	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-framed :is(.awwo-cms-site-header-block, .awwo-cms-site-footer-block) {
	border: 0;
}

/* Nor between the Footer Widgets and the Footer Bar under them: one footer in the frame. */
body.awwo-cms-site-framed .awwo-cms-site-footer-widgets + .awwo-cms-site-footer {
	border-top: 0;
}

/* Framed: the header, the page and the footer start and end on the same
   lines. One width for all (Theme's Content Width), their blocks the whole
   window's (no Max Width of their own). The page's frame always on those
   lines; the header's and footer's content inset from them by their own
   canvas's Inner Padding (none: the logo, the frame and the footer's text
   on one line). */
body.awwo-cms-site-framed {
	--awwo-cms-site-page-max-width: var(--awwo-cms-site-content-width, 1080px);
}

body.awwo-cms-site-framed :is(.awwo-cms-site-header-block, .awwo-cms-site-footer-block) {
	max-width: none;
}

body.awwo-cms-site-framed :is(.awwo-cms-site-header-inner, .awwo-cms-site-zone-inner, .awwo-cms-site-footer-widgets-inner) {
	max-width: var(--awwo-cms-site-content-width, 1080px);
}

body.awwo-cms-site-framed .awwo-cms-site-main {
	padding-right: 0;
	padding-left: 0;
}

/* Their own Background Color (Header Canvas, Footer Canvas), transparent
   when none: the frame's colour through them. */
body.awwo-cms-site-framed .awwo-cms-site-header-block {
	background-color: var(--awwo-cms-site-header-canvas-bg, transparent);
}

body.awwo-cms-site-framed .awwo-cms-site-footer-block {
	background-color: var(--awwo-cms-site-footer-canvas-bg, transparent);
}

/* The canvas (Members and Account pages), as the backend's: outlined, its 12px radius,
   32px inside (16px on phones), the cards on it; a Full Width Wrap reaches past
   that padding (--awwo-cms-canvas-pad). */
.awwo-cms-page-canvas {
	--awwo-cms-canvas-pad: 32px;
	padding: var(--awwo-cms-canvas-pad);
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-corners, 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-corners, 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-corners, 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: calc(var(--awwo-cms-radius-tl, 12px) * 4 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 4 / 12) calc(var(--awwo-cms-radius-br, 12px) * 4 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 4 / 12);
	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;
}

/* The Shop's, Articles page's and Members page's cards: as many a row as
   their Customizer section's Columns say for each view (4, 3 and 2 by
   default). */
.awwo-cms-articles.awwo-cms-shop-grid {
	grid-template-columns: repeat(var(--awwo-cms-site-shop-columns, 4), minmax(0, 1fr));
}

.awwo-cms-articles.awwo-cms-articles-grid {
	grid-template-columns: repeat(var(--awwo-cms-site-articles-columns, 4), minmax(0, 1fr));
}

.awwo-cms-members.awwo-cms-members-grid {
	grid-template-columns: repeat(var(--awwo-cms-site-members-columns, 4), minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.awwo-cms-articles.awwo-cms-shop-grid {
		grid-template-columns: repeat(var(--awwo-cms-site-shop-columns-tablet, 3), minmax(0, 1fr));
	}

	.awwo-cms-articles.awwo-cms-articles-grid {
		grid-template-columns: repeat(var(--awwo-cms-site-articles-columns-tablet, 3), minmax(0, 1fr));
	}

	.awwo-cms-members.awwo-cms-members-grid {
		grid-template-columns: repeat(var(--awwo-cms-site-members-columns-tablet, 3), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.awwo-cms-articles.awwo-cms-shop-grid {
		grid-template-columns: repeat(var(--awwo-cms-site-shop-columns-mobile, 2), minmax(0, 1fr));
	}

	.awwo-cms-articles.awwo-cms-articles-grid {
		grid-template-columns: repeat(var(--awwo-cms-site-articles-columns-mobile, 2), minmax(0, 1fr));
	}

	.awwo-cms-members.awwo-cms-members-grid {
		grid-template-columns: repeat(var(--awwo-cms-site-members-columns-mobile, 2), minmax(0, 1fr));
	}
}

/* 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-corners, 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;
}

/* A product's or article's card without an image, its QR Code on: the code
   in the image box (its green shade, as with the sign, in both themes; the
   code keeps its own colour), centred, 60% of its height. */
.awwo-cms-card-qr > svg {
	display: block;
	width: auto;
	height: 60%;
	aspect-ratio: 1;
}

.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;
}

/* The builder's Articles, its Article Style. Row: one under another, the
   picture small and square at the left, a line between them (no card).
   Beside: the picture filling the card's left half. Overlay: the title over
   the picture's foot on a soft shade. Text First: the words above the
   picture. On phones Beside stacks as a card. */
.awwo-cms-articles.is-style-row {
	gap: 0;
}

.awwo-cms-articles.is-style-row .awwo-cms-article-card {
	flex-direction: row;
	align-items: center;
	gap: 24px;
	padding: 24px 0;
	border: 0;
	border-bottom: 1px solid var(--awwo-cms-border);
	border-radius: 0;
	background: none;
}

.awwo-cms-articles.is-style-row .awwo-cms-article-card:first-child {
	padding-top: 0;
}

.awwo-cms-articles.is-style-row .awwo-cms-article-card:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.awwo-cms-articles.is-style-row .awwo-cms-article-card-image {
	flex: 0 0 120px;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: var(--awwo-cms-radius-corners, var(--awwo-cms-radius));
}

.awwo-cms-articles.is-style-row .awwo-cms-article-card-body {
	padding: 0;
}

.awwo-cms-articles.is-style-beside .awwo-cms-article-card {
	flex-direction: row;
}

.awwo-cms-articles.is-style-beside .awwo-cms-article-card-body {
	justify-content: center;
}

.awwo-cms-articles.is-style-beside .awwo-cms-article-card-meta {
	margin-top: 0;
}

.awwo-cms-articles.is-style-beside .awwo-cms-article-card-image {
	flex: 0 0 45%;
	aspect-ratio: auto;
	min-height: 200px;
}

.awwo-cms-articles.is-style-overlay .awwo-cms-article-card-image {
	aspect-ratio: 4 / 3;
}

.awwo-cms-articles.is-style-overlay .awwo-cms-article-card-body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding-top: 48px;
	background: linear-gradient(to top, rgb(0 0 0 / 0.65), transparent);
}

.awwo-cms-articles.is-style-overlay :is(.awwo-cms-article-card-excerpt, .awwo-cms-article-card-meta) {
	display: none;
}

.awwo-cms-site-main .awwo-cms-articles.is-style-overlay .awwo-cms-article-card-title a {
	color: #fff;
}

.awwo-cms-articles.is-style-overlay .awwo-cms-article-card-categories {
	color: #fff;
}

.awwo-cms-articles.is-style-text-first .awwo-cms-article-card {
	flex-direction: column-reverse;
}

.awwo-cms-articles.is-style-text-first .awwo-cms-article-card-image {
	margin: 0 24px 24px;
	overflow: hidden;
	border-radius: var(--awwo-cms-radius-corners, var(--awwo-cms-radius));
}

@media (max-width: 600px) {
	.awwo-cms-articles.is-style-beside .awwo-cms-article-card {
		flex-direction: column;
	}

	.awwo-cms-articles.is-style-beside .awwo-cms-article-card-image {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.awwo-cms-articles.is-style-row .awwo-cms-article-card-image {
		flex-basis: 72px;
	}
}

/* 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-corners, 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-corners, 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-corners, 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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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;
	/* 12px across: the 1px line between two reactions (its own element) then has exactly 12px on each side. */
	gap: 24px 12px;
	align-items: center;
	margin: 16px 0 0;
}

/* A subtle line between two reactions, 12px from each, shorter than they are (60% of their 36px; the theme's
   border colour). An element of its own, so a reaction's hover (its lift, its Animation) never moves it. */
.awwo-cms-reactions-divider {
	flex: none;
	width: 1px;
	height: calc(36px * 0.6);
	background: var(--awwo-cms-border);
	pointer-events: none;
}

.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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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;
}

/* 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;
}


/* 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;
}

/* The Shop's and Articles pages' Card Alignment (Customizer): their cards' words centred or at the right (Left
   by default), their Categories', stars' and price's rows with them. */
.awwo-cms-articles.is-cards-center .awwo-cms-article-card-body {
	text-align: center;
}

.awwo-cms-articles.is-cards-right .awwo-cms-article-card-body {
	text-align: right;
}

/* The title too (its own Left gives way). */
.awwo-cms-articles:is(.is-cards-center, .is-cards-right) .awwo-cms-article-card-title {
	text-align: inherit;
}

.awwo-cms-articles.is-cards-center :is(.awwo-cms-article-card-categories, .awwo-cms-product-card-price, .awwo-cms-product-card-rating) {
	justify-content: center;
}

.awwo-cms-articles.is-cards-right :is(.awwo-cms-article-card-categories, .awwo-cms-product-card-price, .awwo-cms-product-card-rating) {
	justify-content: flex-end;
}

/* A product card's Add to Cart: its own row after the price, where Card Alignment puts the card's words, above the
   card's whole-card link (so it adds, not opens); just added, filled with a check for a moment. */
/* A Category's card (All Categories, the builder's Categories): its sub-categories, each its own link, above the
   card's; in the card's text colour, green when pointed at (white on a hovered card). */
.awwo-cms-term-card-children {
	position: relative;
	z-index: 2;
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-site-main .awwo-cms-term-card-children a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.awwo-cms-site-main .awwo-cms-term-card-children a:is(:hover, :focus-visible) {
	color: var(--awwo-cms-ok);
}

.awwo-cms-site-main .awwo-cms-article-card:is(:hover, :focus-within) .awwo-cms-term-card-children,
.awwo-cms-site-main .awwo-cms-article-card:is(:hover, :focus-within) .awwo-cms-term-card-children a:is(:hover, :focus-visible) {
	color: var(--awwo-cms-white);
}

.awwo-cms-articles.is-cards-center .awwo-cms-term-card-children {
	text-align: center;
}

.awwo-cms-articles.is-cards-right .awwo-cms-term-card-children {
	text-align: right;
}

.awwo-cms-product-card-add {
	position: relative;
	z-index: 2;
	display: flex;
	margin: 0;
}

.awwo-cms-articles.is-cards-center .awwo-cms-product-card-add {
	justify-content: center;
}

.awwo-cms-articles.is-cards-right .awwo-cms-product-card-add {
	justify-content: flex-end;
}

/* The button: small (as the cart dropdown's), no fill of its own until the pointer is on it, the card's hover
   being the one shown; on the card's green, white as the card's text. */
.awwo-cms-site .awwo-cms-site-main .awwo-cms-article-card.awwo-cms-product-card .awwo-cms-button.awwo-cms-product-card-cart.awwo-cms-product-card-cart {
	padding: 6px 14px;
	font-size: 12px;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	transform: none;
}

.awwo-cms-site .awwo-cms-site-main .awwo-cms-article-card.awwo-cms-product-card:is(:hover, :focus-within) .awwo-cms-button.awwo-cms-product-card-cart.awwo-cms-product-card-cart {
	border-color: var(--awwo-cms-white);
	color: var(--awwo-cms-white);
}

/* The pointer on the button itself: filled white, its label in the card's fill colour; it moves as Theme's
   Animation says (below). */
.awwo-cms-site .awwo-cms-site-main .awwo-cms-article-card.awwo-cms-product-card .awwo-cms-button.awwo-cms-product-card-cart.awwo-cms-product-card-cart:is(:hover, :focus-visible) {
	border-color: var(--awwo-cms-white);
	background-color: var(--awwo-cms-white);
	color: var(--awwo-cms-green);
}

/* Theme's Animation, as every site button: Lift and Float 6px up (Float with its deeper shadow), Press a little in,
   Scale larger (Fade, Sweep, Tilt and Glow: its white fill alone, on the card's green). */
.awwo-cms-site-buttons-lift.awwo-cms-site .awwo-cms-site-main .awwo-cms-article-card.awwo-cms-product-card .awwo-cms-button.awwo-cms-product-card-cart.awwo-cms-product-card-cart:is(:hover, :focus-visible) {
	transform: translateY(-6px);
}

.awwo-cms-site-buttons-float.awwo-cms-site .awwo-cms-site-main .awwo-cms-article-card.awwo-cms-product-card .awwo-cms-button.awwo-cms-product-card-cart.awwo-cms-product-card-cart:is(:hover, :focus-visible) {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.35);
}

.awwo-cms-site-buttons-press.awwo-cms-site .awwo-cms-site-main .awwo-cms-article-card.awwo-cms-product-card .awwo-cms-button.awwo-cms-product-card-cart.awwo-cms-product-card-cart:is(:hover, :focus-visible) {
	transform: translateY(2px) scale(0.97);
}

.awwo-cms-site-buttons-scale.awwo-cms-site .awwo-cms-site-main .awwo-cms-article-card.awwo-cms-product-card .awwo-cms-button.awwo-cms-product-card-cart.awwo-cms-product-card-cart:is(:hover, :focus-visible) {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: no-preference) {
	.awwo-cms-site .awwo-cms-site-main .awwo-cms-article-card.awwo-cms-product-card .awwo-cms-button.awwo-cms-product-card-cart.awwo-cms-product-card-cart {
		transition: color var(--awwo-cms-site-button-timer, 0.6s) ease, background-color var(--awwo-cms-site-button-timer, 0.6s) ease,
			border-color var(--awwo-cms-site-button-timer, 0.6s) ease, box-shadow var(--awwo-cms-site-button-timer, 0.6s) ease,
			transform var(--awwo-cms-site-button-timer, 0.6s) ease;
	}
}

/* Added: filled for 5 seconds (white on the card's green). */
.awwo-cms-site .awwo-cms-site-main .awwo-cms-article-card.awwo-cms-product-card .awwo-cms-button.awwo-cms-product-card-cart.awwo-cms-product-card-cart.is-added {
	border-color: var(--awwo-cms-green);
	background-color: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-site .awwo-cms-site-main .awwo-cms-article-card.awwo-cms-product-card:is(:hover, :focus-within) .awwo-cms-button.awwo-cms-product-card-cart.awwo-cms-product-card-cart.is-added {
	border-color: var(--awwo-cms-white);
	background-color: var(--awwo-cms-white);
	color: var(--awwo-cms-green);
}

/* Its window: the product page's add-on notes and Total as they are there, not centred as the window's own lines. */
.awwo-cms-card-cart-modal .awwo-cms-field-note {
	margin: 0;
	text-align: start;
}

.awwo-cms-card-cart-modal .awwo-cms-product-total {
	margin: 0;
}

.awwo-cms-product-card-cart[aria-busy="true"] {
	cursor: progress;
}

/* Its choices' window (a Variable product's options, add-ons): the product page's own fields, the price and stock as
   they change, Close and Add to Cart at the bottom. */
.awwo-cms-card-cart-modal {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
}

.awwo-cms-card-cart-modal .awwo-cms-product-price,
.awwo-cms-card-cart-modal .awwo-cms-product-stock {
	justify-content: center;
	margin: 0 0 16px;
	text-align: center;
}

.awwo-cms-card-cart-modal .awwo-cms-product-buy {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-card-cart-modal .awwo-cms-follow-modal-buttons .awwo-cms-button {
	min-width: 0;
	padding: 6px 14px;
	font-size: 12px;
}

/* Its bottom row: Quantity's label on top (6px above its box, as every field's), then its box, Close and Add to
   Cart on one line, three equal widths, all as tall as the box. */
/* (A window with only Close, an error's, keeps the window's own centred row.) */
.awwo-cms-card-cart-modal .awwo-cms-follow-modal-buttons:has(.awwo-cms-product-quantity) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 6px 8px;
}

.awwo-cms-card-cart-modal .awwo-cms-follow-modal-buttons :is(.awwo-cms-product-quantity, .awwo-cms-field) {
	display: contents;
}

.awwo-cms-card-cart-modal .awwo-cms-follow-modal-buttons .awwo-cms-field > label {
	grid-area: 1 / 1;
}

.awwo-cms-card-cart-modal .awwo-cms-follow-modal-buttons .awwo-cms-control {
	grid-area: 2 / 1;
}

.awwo-cms-card-cart-modal .awwo-cms-follow-modal-buttons:has(.awwo-cms-product-quantity) > .awwo-cms-button {
	grid-row: 2;
}

.awwo-cms-card-cart-modal .awwo-cms-follow-modal-buttons:has(.awwo-cms-product-quantity) > .awwo-cms-button:first-of-type {
	grid-column: 2;
}

.awwo-cms-card-cart-modal .awwo-cms-follow-modal-buttons:has(.awwo-cms-product-quantity) > [data-awwo-cms-product-add] {
	grid-column: 3;
}

.awwo-cms-card-cart-modal .awwo-cms-product-quantity .awwo-cms-input {
	width: 100%;
	max-width: none;
}

.awwo-cms-card-cart-modal .awwo-cms-follow-modal-buttons {
	margin-top: 16px;
}

.awwo-cms-card-cart-modal .awwo-cms-card-cart-error {
	margin: 16px 0 0;
	color: var(--awwo-cms-fail);
	text-align: center;
}

/* The Shop's and Articles pages' Image Box Type (Customizer): their cards' image box exactly 1 x 1, 16 x 9 or
   4 x 3, the photo laid over it and covering it (clipped to the box, never growing it or reaching the card's text
   below); a badge above the photo. */
:is(.awwo-cms-shop-grid, .awwo-cms-articles-grid) .awwo-cms-article-card-image {
	position: relative;
	min-height: 0;
	overflow: hidden;
}

:is(.awwo-cms-shop-grid, .awwo-cms-articles-grid) .awwo-cms-article-card-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:is(.awwo-cms-shop-grid, .awwo-cms-articles-grid) .awwo-cms-product-card-badge {
	z-index: 1;
}

.awwo-cms-shop-grid.is-square .awwo-cms-article-card-image {
	aspect-ratio: 1;
}

.awwo-cms-shop-grid.is-rectangular .awwo-cms-article-card-image {
	aspect-ratio: 16 / 9;
}

.awwo-cms-shop-grid.is-standard .awwo-cms-article-card-image {
	aspect-ratio: 4 / 3;
}

/* An Articles page's Image Box Type (Customizer): its cards' image box 1 x 1, or 4 x 3 (the default); 16 x 9 is the
   cards' own shape. */
.awwo-cms-articles.is-square .awwo-cms-article-card-image {
	aspect-ratio: 1;
}

.awwo-cms-articles.is-standard .awwo-cms-article-card-image {
	aspect-ratio: 4 / 3;
}

/* An Articles page's Cards Meta Hidden (Customizer): its cards without their Author and date; their likes stay
   (at the line's start), a card without likes without the line. */
.awwo-cms-articles.is-no-meta .awwo-cms-article-card-byline {
	display: none;
}

.awwo-cms-articles.is-no-meta .awwo-cms-article-card-meta:not(.has-likes) {
	display: none;
}

.awwo-cms-articles.is-no-meta .awwo-cms-article-card-likes {
	margin-left: 0;
}

.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-corners, var(--awwo-cms-radius));
	background: var(--awwo-cms-surface);
}

/* A product's tabs (the builder's): one card as its reviews' own; its Reviews tab's list and form laid out as there. */
/* The Reviews tab's count, raised after its name as after the Reviews title (the tab's text being smaller). */
.awwo-cms-el-tab .awwo-cms-members-count {
	font-size: 0.75em;
}

.awwo-cms-product-tab-reviews {
	display: flex;
	flex-direction: column;
	gap: 16px;
	scroll-margin-top: 24px;
}

.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-corners, 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: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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,
	.awwo-cms-profile-part {
		padding: 16px;
	}

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

	.awwo-cms-page-canvas {
		--awwo-cms-canvas-pad: 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-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);
}

@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 and Orders (Account page): the backend's lists' table,
   in its own frame inside the box (the panel's border, corners and colour),
   its cells padded as there, a row lit on hover, sliding sideways where too
   narrow; page numbers under it, as the Members page's. */
.awwo-cms-activity-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-tl, var(--awwo-cms-radius)) var(--awwo-cms-radius-tr, var(--awwo-cms-radius)) var(--awwo-cms-radius-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, var(--awwo-cms-radius));
	background: var(--awwo-cms-surface);
}

.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-corners, var(--awwo-cms-radius));
	object-fit: contain;
}

/* A Brand's page: its Slogan after its name, in brackets, the title's colour at normal weight (the name stays the bold part). */
.awwo-cms-members-slogan {
	font-weight: 400;
}

/* A Brand's page: its breadcrumbs under its name, 8px apart (as above a title elsewhere); the name's 24px after them. */
.awwo-cms-members-title:has(+ .awwo-cms-breadcrumbs) {
	margin-bottom: 8px;
}

.awwo-cms-members-title + .awwo-cms-breadcrumbs {
	margin-bottom: 24px;
}

.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;
}

/* An article or product card's image box rounded at the bottom too, as the card's corners (the card shows
   round them, green when hovered): the box and its image each rounded, nothing clipped, so the box keeps the
   image's own height. */
.awwo-cms-article-card .awwo-cms-article-card-image,
.awwo-cms-article-card .awwo-cms-article-card-image img {
	border-radius: 0 0 var(--awwo-cms-radius-br, var(--awwo-cms-radius)) var(--awwo-cms-radius-bl, var(--awwo-cms-radius));
}

.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: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	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);
}

/* The header's and Footer Bar's icon buttons (Menu, Account, Cart, light / dark, Cookies, Back to Top):
   filled green, their icon white, as the site's buttons fill, and moved by Theme's Animation as they are,
   over its Transition Timer (Sweep wipes the green in from the left); Account and Cart stay so while their
   menu shows. */
:is(.awwo-cms-site-action, .awwo-cms-site-theme) {
	transition: color var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out), border-color var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out),
		background-color var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out), background-size var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out),
		transform var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out), box-shadow var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out);
}

:is(:is(.awwo-cms-site-action, .awwo-cms-site-theme):is(:hover, :focus-visible), .awwo-cms-site-account:is(:hover, :focus-within) > .awwo-cms-site-action) {
	border-color: var(--awwo-cms-green);
	background-color: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-site-buttons-sweep :is(.awwo-cms-site-action, .awwo-cms-site-theme) {
	background-image: linear-gradient(var(--awwo-cms-green), var(--awwo-cms-green));
	background-repeat: no-repeat;
	background-size: 0 100%;
}

.awwo-cms-site-buttons-sweep :is(:is(.awwo-cms-site-action, .awwo-cms-site-theme):is(:hover, :focus-visible), .awwo-cms-site-account:is(:hover, :focus-within) > .awwo-cms-site-action) {
	background-color: var(--awwo-cms-control);
	background-size: 100% 100%;
}

.awwo-cms-site-buttons-none :is(.awwo-cms-site-action, .awwo-cms-site-theme) {
	transition: none;
}

.awwo-cms-site-buttons-lift :is(:is(.awwo-cms-site-action, .awwo-cms-site-theme):is(:hover, :focus-visible), .awwo-cms-site-account:is(:hover, :focus-within) > .awwo-cms-site-action) {
	transform: translateY(-6px);
}

.awwo-cms-site-buttons-float :is(:is(.awwo-cms-site-action, .awwo-cms-site-theme):is(:hover, :focus-visible), .awwo-cms-site-account:is(:hover, :focus-within) > .awwo-cms-site-action) {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.35);
}

.awwo-cms-site-buttons-press :is(:is(.awwo-cms-site-action, .awwo-cms-site-theme):is(:hover, :focus-visible), .awwo-cms-site-account:is(:hover, :focus-within) > .awwo-cms-site-action) {
	transform: translateY(2px) scale(0.95);
}

.awwo-cms-site-buttons-scale :is(:is(.awwo-cms-site-action, .awwo-cms-site-theme):is(:hover, :focus-visible), .awwo-cms-site-account:is(:hover, :focus-within) > .awwo-cms-site-action) {
	transform: scale(1.1);
}

.awwo-cms-site-buttons-tilt :is(:is(.awwo-cms-site-action, .awwo-cms-site-theme):is(:hover, :focus-visible), .awwo-cms-site-account:is(:hover, :focus-within) > .awwo-cms-site-action) {
	transform: perspective(200px) rotateX(var(--awwo-cms-tilt-x, 0deg)) rotateY(var(--awwo-cms-tilt-y, 0deg));
}

.awwo-cms-site-buttons-glow :is(:is(.awwo-cms-site-action, .awwo-cms-site-theme):is(:hover, :focus-visible), .awwo-cms-site-account:is(:hover, :focus-within) > .awwo-cms-site-action) {
	box-shadow: 0 0 16px var(--awwo-cms-green);
}

/* The CMS's own buttons on the site's pages (page numbers, Add to Cart, the Account page's...): filled as
   always (a danger one red; the current page's number stays filled), moved by Theme's Animation as the site's
   buttons are, over its Transition Timer, in place of their own lift. */
.awwo-cms-site .awwo-cms-button {
	--awwo-cms-sweep: var(--awwo-cms-green);
	transition: color var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out), border-color var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out),
		background-color var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out), background-size var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out),
		transform var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out), box-shadow var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out);
}

.awwo-cms-site .awwo-cms-button-danger {
	--awwo-cms-sweep: var(--awwo-cms-red);
}

.awwo-cms-site.awwo-cms-site-buttons-none .awwo-cms-button {
	transition: none;
}

.awwo-cms-site .awwo-cms-button:is(:hover:not(:disabled), :focus-visible) {
	transform: none;
}

.awwo-cms-site.awwo-cms-site-buttons-lift .awwo-cms-button:is(:hover:not(:disabled), :focus-visible) {
	transform: translateY(-6px);
}

.awwo-cms-site.awwo-cms-site-buttons-float .awwo-cms-button:is(:hover:not(:disabled), :focus-visible) {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.35);
}

.awwo-cms-site.awwo-cms-site-buttons-press .awwo-cms-button:is(:hover:not(:disabled), :focus-visible) {
	transform: translateY(2px) scale(0.97);
}

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

.awwo-cms-site.awwo-cms-site-buttons-tilt .awwo-cms-button:is(:hover:not(:disabled), :focus-visible) {
	transform: perspective(400px) rotateX(var(--awwo-cms-tilt-x, 0deg)) rotateY(var(--awwo-cms-tilt-y, 0deg));
}

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

/* Sweep: the colour wipes in from the left over the button's resting look. */
.awwo-cms-site.awwo-cms-site-buttons-sweep .awwo-cms-button:not([aria-current="page"]) {
	background-image: linear-gradient(var(--awwo-cms-sweep), var(--awwo-cms-sweep));
	background-repeat: no-repeat;
	background-size: 0 100%;
}

.awwo-cms-site.awwo-cms-site-buttons-sweep .awwo-cms-button:not([aria-current="page"]):is(:hover:not(:disabled), :focus-visible) {
	background-color: transparent;
	background-image: linear-gradient(var(--awwo-cms-sweep), var(--awwo-cms-sweep));
	background-size: 100% 100%;
}

/* Social Profiles buttons and Like / Dislike: filled as always (green, Dislike red; a reaction of the viewer's
   own stays filled), moved by Theme's Animation as the buttons are, over its Transition Timer. */
.awwo-cms-site :is(.awwo-cms-social a, .awwo-cms-reaction:not(:disabled)) {
	--awwo-cms-sweep: var(--awwo-cms-green);
	transition: color var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out), border-color var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out),
		background-color var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out), background-size var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out),
		transform var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out), box-shadow var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out);
}

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

.awwo-cms-site.awwo-cms-site-buttons-none :is(.awwo-cms-social a, .awwo-cms-reaction:not(:disabled)) {
	transition: none;
}

/* Their own lift gives way to the Animation's. */
.awwo-cms-site :is(.awwo-cms-social a:is(:hover, :focus-visible), .awwo-cms-reaction:is(:hover:not(:disabled), :focus-visible)) {
	transform: none;
}

.awwo-cms-site.awwo-cms-site-buttons-lift :is(.awwo-cms-social a:is(:hover, :focus-visible), .awwo-cms-reaction:is(:hover:not(:disabled), :focus-visible)) {
	transform: translateY(-6px);
}

.awwo-cms-site.awwo-cms-site-buttons-float :is(.awwo-cms-social a:is(:hover, :focus-visible), .awwo-cms-reaction:is(:hover:not(:disabled), :focus-visible)) {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.35);
}

.awwo-cms-site.awwo-cms-site-buttons-press :is(.awwo-cms-social a:is(:hover, :focus-visible), .awwo-cms-reaction:is(:hover:not(:disabled), :focus-visible)) {
	transform: translateY(2px) scale(0.95);
}

.awwo-cms-site.awwo-cms-site-buttons-scale :is(.awwo-cms-social a:is(:hover, :focus-visible), .awwo-cms-reaction:is(:hover:not(:disabled), :focus-visible)) {
	transform: scale(1.1);
}

.awwo-cms-site.awwo-cms-site-buttons-tilt :is(.awwo-cms-social a:is(:hover, :focus-visible), .awwo-cms-reaction:is(:hover:not(:disabled), :focus-visible)) {
	transform: perspective(200px) rotateX(var(--awwo-cms-tilt-x, 0deg)) rotateY(var(--awwo-cms-tilt-y, 0deg));
}

.awwo-cms-site.awwo-cms-site-buttons-glow :is(.awwo-cms-social a:is(:hover, :focus-visible), .awwo-cms-reaction:is(:hover:not(:disabled), :focus-visible)) {
	box-shadow: 0 0 16px var(--awwo-cms-sweep);
}

/* Sweep: the colour wipes in from the left over their resting colour. */
.awwo-cms-site.awwo-cms-site-buttons-sweep :is(.awwo-cms-social a, .awwo-cms-reaction:not(:disabled)) {
	background-image: linear-gradient(var(--awwo-cms-sweep), var(--awwo-cms-sweep));
	background-repeat: no-repeat;
	background-size: 0 100%;
}

.awwo-cms-site.awwo-cms-site-buttons-sweep :is(.awwo-cms-social a:is(:hover, :focus-visible), .awwo-cms-reaction:is(:hover:not(:disabled), :focus-visible)) {
	background-size: 100% 100%;
}

.awwo-cms-site.awwo-cms-site-buttons-sweep :is(.awwo-cms-social a:is(:hover, :focus-visible), .awwo-cms-reaction:not(.is-on):is(:hover:not(:disabled), :focus-visible)) {
	background-color: var(--awwo-cms-control);
}

/* An article, product or member card (one that opens something) hovered or
   reached by keyboard: filled green as the buttons fill, everything on it
   white, its outline green; the image stays as it is. Theme's Animation
   moves it as it moves the buttons (Lift 6px, Float higher in its shadow,
   Press a little in, Scale, Tilt towards the pointer, a Glow ring, a Sweep
   of the green from the left; Fade and None only fill), over the Transition
   Timer (None at once). */
:is(.awwo-cms-article-card, .awwo-cms-member.is-link) {
	--awwo-cms-card-timer: var(--awwo-cms-site-button-timer, 0.6s);
	transition: transform var(--awwo-cms-card-timer) var(--awwo-cms-ease-out), border-color var(--awwo-cms-card-timer) var(--awwo-cms-ease-out),
		background-color var(--awwo-cms-card-timer) var(--awwo-cms-ease-out), background-size var(--awwo-cms-card-timer) var(--awwo-cms-ease-out),
		box-shadow var(--awwo-cms-card-timer) var(--awwo-cms-ease-out), color var(--awwo-cms-card-timer) var(--awwo-cms-ease-out);
}

.awwo-cms-site-buttons-none :is(.awwo-cms-article-card, .awwo-cms-member.is-link) {
	--awwo-cms-card-timer: 0s;
}

.awwo-cms-article-card:is(:hover, :focus-within),
.awwo-cms-member.is-link:is(:hover, :focus-visible) {
	border-color: var(--awwo-cms-green);
	/* Only the card fills (its body is see-through): green behind its body and the image's rounded corners
	   alike, one colour at every moment of the fade. */
	background-color: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
	outline: none;
}

.awwo-cms-site-buttons-lift :is(.awwo-cms-article-card:is(:hover, :focus-within), .awwo-cms-member.is-link:is(:hover, :focus-visible)) {
	transform: translateY(-6px);
}

.awwo-cms-site-buttons-scale :is(.awwo-cms-article-card:is(:hover, :focus-within), .awwo-cms-member.is-link:is(:hover, :focus-visible)) {
	transform: scale(1.03);
}

.awwo-cms-site-buttons-glow :is(.awwo-cms-article-card:is(:hover, :focus-within), .awwo-cms-member.is-link:is(:hover, :focus-visible)) {
	box-shadow: 0 0 20px var(--awwo-cms-green);
}

.awwo-cms-site-buttons-float :is(.awwo-cms-article-card:is(:hover, :focus-within), .awwo-cms-member.is-link:is(:hover, :focus-visible)) {
	transform: translateY(-6px);
	box-shadow: 0 18px 32px -12px rgb(0 0 0 / 0.4);
}

.awwo-cms-site-buttons-press :is(.awwo-cms-article-card:is(:hover, :focus-within), .awwo-cms-member.is-link:is(:hover, :focus-visible)) {
	transform: translateY(2px) scale(0.98);
}

/* Tilt: leaning towards the pointer (awwo-cms-tilt.js sets the angles), a card further back in its 3D. */
.awwo-cms-site-buttons-tilt :is(.awwo-cms-article-card:is(:hover, :focus-within), .awwo-cms-member.is-link:is(:hover, :focus-visible)) {
	transform: perspective(900px) rotateX(var(--awwo-cms-tilt-x, 0deg)) rotateY(var(--awwo-cms-tilt-y, 0deg));
}

/* Sweep: the green wipes in from the left (the card's own colour behind it). */
.awwo-cms-site-buttons-sweep :is(.awwo-cms-article-card, .awwo-cms-member.is-link) {
	background-image: linear-gradient(var(--awwo-cms-green), var(--awwo-cms-green));
	background-repeat: no-repeat;
	background-size: 0 100%;
}

.awwo-cms-site-buttons-sweep :is(.awwo-cms-article-card:is(:hover, :focus-within), .awwo-cms-member.is-link:is(:hover, :focus-visible)) {
	background-color: var(--awwo-cms-surface);
	background-size: 100% 100%;
}

.awwo-cms-site-main .awwo-cms-article-card:is(:hover, :focus-within) :is(.awwo-cms-article-card-categories, .awwo-cms-article-card-categories a, .awwo-cms-article-card-title a, .awwo-cms-article-card-excerpt, .awwo-cms-article-card-meta, .awwo-cms-article-card-meta a, .awwo-cms-article-card-likes, .awwo-cms-product-card-rating, .awwo-cms-product-card-price, .awwo-cms-product-card-price del, .awwo-cms-product-card-price strong) {
	color: var(--awwo-cms-white);
}

/* 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-corners, 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;
}

/* A product's QR Code card: the code (100px) as every QR Code box of the CMS
   in both themes (the card colour, a thin outline; the code keeps its own
   colour). In its head's top right corner (the title kept centred clear of
   it; under the title on phones), or, without images, in the gallery's place
   at its own size, the summary beside it taking the rest of the width. */
.awwo-cms-qr-card {
	box-sizing: content-box;
	width: 100px;
	height: 100px;
	padding: 12px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-corners, var(--awwo-cms-radius));
	background: var(--awwo-cms-surface);
}

.awwo-cms-qr-card > svg {
	display: block;
	width: 100%;
	height: 100%;
}

.awwo-cms-article-header.has-qr {
	position: relative;
	min-height: 126px;
	padding-inline: 142px;
}

.awwo-cms-head-qr {
	position: absolute;
	top: 0;
	right: 0;
}

.awwo-cms-product-top.has-qr {
	grid-template-columns: auto minmax(0, 1fr);
}

/* In the gallery's place, inside the product's box: the page's own colour
   (the canvas's, darker than the box in dark, its equivalent in light). */
.awwo-cms-product-gallery > .awwo-cms-qr-card {
	background: var(--awwo-cms-bg);
}

@media (max-width: 767px) {
	.awwo-cms-article-header.has-qr {
		min-height: 0;
		padding-inline: 0;
	}

	.awwo-cms-head-qr {
		position: static;
		margin-top: 8px;
	}
}

.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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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-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;
}

/* Quantity and Add to Cart: the label on top (6px above its box, as every field's), then the box and the button,
   two equal columns, the button as tall as the box (as a product card's choices window). */
.awwo-cms-product-add-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 6px 8px;
}

.awwo-cms-product-add-row :is(.awwo-cms-product-quantity, .awwo-cms-field) {
	display: contents;
}

.awwo-cms-product-add-row .awwo-cms-field > label {
	grid-area: 1 / 1;
}

.awwo-cms-product-add-row .awwo-cms-control {
	grid-area: 2 / 1;
}

.awwo-cms-product-add-row .awwo-cms-control .awwo-cms-input {
	width: 100%;
	max-width: none;
}

.awwo-cms-product-add-row > .awwo-cms-button {
	grid-area: 2 / 2;
	min-width: 0;
	padding: 6px 14px;
	font-size: 12px;
}

.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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-border);
	color: var(--awwo-cms-muted);
}

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

/* A line's QR Code (a product without an image, its QR Code on): on the shop
   cards' green shade, the code in its own colour, 8px from the edges. */
.awwo-cms-cart-image.awwo-cms-cart-qr {
	padding: 8px;
	background: color-mix(in srgb, var(--awwo-cms-green) 12%, var(--awwo-cms-surface));
}

.awwo-cms-cart-qr > svg {
	display: block;
	width: 100%;
	height: 100%;
}

.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: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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;
}

/* Checkout, Local Pickup: Pickup Location over the chosen location's details, 16px apart. */
.awwo-cms-checkout-pickup {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.awwo-cms-checkout-pickup[hidden],
.awwo-cms-checkout-pickup > [hidden],
.awwo-cms-checkout-box[hidden] {
	display: none;
}

.awwo-cms-checkout-ship-saved {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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,
	.awwo-cms-product-top.has-qr {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Its images beside its summary: they stay in view while the summary scrolls on (32px under the top edge, as the
   box pads them; under the Backend's bar too where the whole page scrolls, Boxed). */
@media (min-width: 901px) {
	.awwo-cms-product-gallery {
		position: sticky;
		top: 32px;
		align-self: start;
	}

	body.has-site-bar:not(.awwo-cms-site-framed) .awwo-cms-product-gallery {
		top: 72px;
	}
}

/* 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: calc(var(--awwo-cms-radius-tl, 12px) * 5 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 5 / 12) calc(var(--awwo-cms-radius-br, 12px) * 5 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 5 / 12);
	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='3 3 18 18'%3E%3Cpath d='M4.6 12.6l4.8 4.8 10-10.4' fill='none' stroke='black' stroke-width='3.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='3 3 18 18'%3E%3Cpath d='M4.6 12.6l4.8 4.8 10-10.4' fill='none' stroke='black' stroke-width='3.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: calc(var(--awwo-cms-radius-tl, 12px) * 4 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 4 / 12) calc(var(--awwo-cms-radius-br, 12px) * 4 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 4 / 12);
}

/* 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-corners, 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-corners, var(--awwo-cms-radius));
	background: color-mix(in oklab, currentColor 12%, transparent);
}

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

/* Icon Box's Icon Style Bare: the icon alone, larger, no square around it. */
.awwo-cms-el-icon.is-bare {
	width: auto;
	height: auto;
	background: none;
}

.awwo-cms-el-icon.is-bare .awwo-cms-icon {
	width: 44px;
	height: 44px;
}

/* Icon Box's Show Picture: a small square picture in the icon's place (64px;
   a framed spot, as Image's Placeholder, until one is chosen). */
.awwo-cms-el-icon.is-picture {
	width: 64px;
	height: 64px;
	overflow: hidden;
	box-sizing: border-box;
	border: 1px dashed color-mix(in oklab, var(--afx-muted, var(--awwo-cms-muted)) 45%, transparent);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--afx-control, var(--awwo-cms-control));
	color: var(--afx-muted, var(--awwo-cms-muted));
}

.awwo-cms-el-icon.is-picture:has(img, .awwo-cms-placeholder) {
	border: 0;
}

.awwo-cms-el-icon.is-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Button's Style Link: a small text link in the palette's green, its icon
   8px before its words, the text's colour on hover, never underlined. */
.awwo-cms-el-text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--afx-ok, var(--awwo-cms-ok));
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.3s;
}

a.awwo-cms-el-text-link:hover {
	color: var(--afx-text, var(--awwo-cms-text));
}

.awwo-cms-el-text-link .awwo-cms-icon {
	width: 14px;
	height: 14px;
}

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

/* Image's Placeholder: the spot an image will take (the fields' own
   background, a dashed line in the border colour, a picture icon at its
   middle), the whole width it may take, its shape its Ratio. */
.awwo-cms-el-image-placeholder {
	display: flex;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--afx-control, var(--awwo-cms-control));
}

.awwo-cms-el-image-placeholder.is-landscape {
	aspect-ratio: 16 / 9;
}

.awwo-cms-el-image-placeholder.is-square {
	aspect-ratio: 1 / 1;
}

.awwo-cms-el-image-placeholder.is-portrait {
	aspect-ratio: 3 / 4;
}



/* Image in its frame (a Caption, Badge or Hover): the picture fills it, the
   words at its foot, centred, on a soft shade (Overlay) or a band in the
   palette's colour (Bar), a small badge above the title. Hover Zoom: the
   picture grows inside the frame; Lift: the frame rises 6px, as the buttons. */
.awwo-cms-el-figure {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0;
	transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.awwo-cms-el-figure > :is(.awwo-cms-site-image, .awwo-cms-el-image-placeholder) {
	width: 100%;
	transition: transform 0.6s ease;
}

.awwo-cms-el-figure > .awwo-cms-site-image {
	display: block;
	height: auto;
}

.awwo-cms-el-figure-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px 16px 16px;
	color: #fff;
	text-align: center;
}

.awwo-cms-el-figure.is-overlay .awwo-cms-el-figure-caption {
	background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent);
}

.awwo-cms-el-figure.is-bar .awwo-cms-el-figure-caption {
	padding: 12px 16px;
	background: var(--afx-ok, var(--awwo-cms-ok));
}

.awwo-cms-el-figure-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.awwo-cms-el-figure.is-bar .awwo-cms-el-figure-title {
	font-size: 15px;
}

.awwo-cms-el-figure-badge {
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--afx-ok, var(--awwo-cms-ok));
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.awwo-cms-el-figure.is-hover-zoom:hover > :is(.awwo-cms-site-image, .awwo-cms-el-image-placeholder) {
	transform: scale(1.06);
}

.awwo-cms-el-figure.is-hover-lift:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px rgb(0 0 0 / 0.15);
}

@media (prefers-reduced-motion: reduce) {
	.awwo-cms-el-figure,
	.awwo-cms-el-figure > :is(.awwo-cms-site-image, .awwo-cms-el-image-placeholder) {
		transition: none;
	}
}

/* Icon Position Beside: the icon at the left, the title and text beside it
   (a slim row); Box Style Plain: no card around it (no frame, no inside space). */
.awwo-cms-el-iconbox.is-beside {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	align-items: center;
	column-gap: 16px;
	row-gap: 4px;
}

.awwo-cms-el-iconbox.is-beside > .awwo-cms-el-icon {
	grid-row: span 2;
	align-self: start;
}

.awwo-cms-el-iconbox.is-beside > :not(.awwo-cms-el-icon) {
	grid-column: 2;
	margin: 0;
}

.awwo-cms-el-iconbox.is-plain {
	padding: 0;
	border: 0;
	background: none;
}

.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-corners, 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);
}

/* Numbered: the question's number in a soft square before it. Icon Side
   Left: the sign first, the question right after it. */
.awwo-cms-el-acc-title {
	flex: 1;
}

.awwo-cms-el-acc-number {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--awwo-cms-green) 12%, var(--awwo-cms-surface));
	color: var(--awwo-cms-ok);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.awwo-cms-el-accordion.is-icon-left .awwo-cms-el-acc > summary .awwo-cms-icon {
	order: -1;
}

/* The answer starts under its question, past the sign or the number. */
.awwo-cms-el-accordion.is-icon-left .awwo-cms-el-acc-body {
	padding-left: 40px;
}

.awwo-cms-el-acc:has(.awwo-cms-el-acc-number) .awwo-cms-el-acc-body {
	padding-left: 56px;
}

.awwo-cms-el-accordion.is-icon-left .awwo-cms-el-acc:has(.awwo-cms-el-acc-number) .awwo-cms-el-acc-body {
	padding-left: 80px;
}

.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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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);
}

/* List's Opening Hours: each line its days, then its hours;
   today's line in the text's own colour and bold, the others muted; Open
   Now first, its badge green while open (the palette's), else the text's. */
/* Its days and hours each kept whole: the hours at the line's end, under
   the days only where the column is too narrow for both. */
.awwo-cms-el-hours-line {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	justify-content: space-between;
	column-gap: 12px;
}

.awwo-cms-el-hours-days,
.awwo-cms-el-hours-badge,
.awwo-cms-el-hours-next {
	white-space: nowrap;
}

.awwo-cms-el-list.is-hours li:not(.awwo-cms-el-hours-now, .is-today) {
	color: var(--afx-muted, var(--awwo-cms-muted));
}

.awwo-cms-el-list.is-hours li.is-today {
	font-weight: 700;
}

.awwo-cms-el-hours-time {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.awwo-cms-el-hours-badge {
	font-weight: 700;
}

.awwo-cms-el-hours-now.is-open .awwo-cms-el-hours-badge {
	color: var(--afx-ok, var(--awwo-cms-ok));
}

/* List's line: its label before its words (muted, as a field label), or,
   Stacked, small above them (no icon); Align centre or right moves every
   line. */
.awwo-cms-el-list-label {
	color: var(--afx-muted, var(--awwo-cms-muted));
	font-weight: 600;
}

.awwo-cms-el-list.is-stacked .awwo-cms-el-list-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.awwo-cms-el-list.is-stacked .awwo-cms-el-list-label {
	font-size: 13px;
}

/* Stacked Opening Hours: Open Now without its icon, as every line, its
   badge above what comes next. */
.awwo-cms-el-list.is-stacked .awwo-cms-el-hours-now > .awwo-cms-icon {
	display: none;
}

.awwo-cms-el-list.is-stacked .awwo-cms-el-hours-now > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.awwo-cms-el-list.is-stacked.is-center .awwo-cms-el-hours-now > span {
	align-items: center;
}

.awwo-cms-el-list.is-center li {
	justify-content: center;
	text-align: center;
}

.awwo-cms-el-list.is-center .awwo-cms-el-list-body {
	align-items: center;
}

.awwo-cms-el-list.is-right li {
	justify-content: flex-end;
	text-align: right;
}

.awwo-cms-el-list.is-right .awwo-cms-el-list-body {
	align-items: flex-end;
}


/* List's links (Contact Details, a typed email or phone): the text's own
   colour and weight (a list of facts, every line alike), the palette's
   green on hover, never underlined. */
.awwo-cms-el-list a,
body.awwo-cms-site .awwo-cms-site-main .awwo-cms-el-list a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.3s;
}

.awwo-cms-el-list a:hover,
.awwo-cms-el-list a:focus-visible {
	color: var(--afx-ok, var(--awwo-cms-ok));
}

/* List's Save Contact: the site's button, 16px under the lines, aligned
   as they are. */
.awwo-cms-el-save-contact {
	margin-top: 16px;
}

.awwo-cms-el-list.is-center + .awwo-cms-el-save-contact,
.awwo-cms-el-list.is-right + .awwo-cms-el-save-contact {
	display: flex;
	width: fit-content;
	margin-left: auto;
}

.awwo-cms-el-list.is-center + .awwo-cms-el-save-contact {
	margin-right: auto;
}

/* Map's Every Location: Google's map filling the box, and a pin's card in
   the site's own look (its name, Open Now, its week, its one-tap lines,
   Save Contact), 8px between its parts. */
.awwo-cms-el-embed.is-pins {
	display: block;
}

.awwo-cms-el-pins {
	position: absolute;
	inset: 0;
}

.awwo-cms-el-pin-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 260px;
	padding: 4px 4px 8px;
	/* The palette's own dark: Google's card is always white. Its font the page's (set by the page's script). */
	color: var(--awwo-cms-navy);
	font-size: 13px;
	/* Regular (Google's card sets Light). */
	font-weight: 400;
	line-height: 1.5;
}

.awwo-cms-el-pin-name {
	font-size: 15px;
	font-weight: 700;
}

.awwo-cms-el-pin-now,
.awwo-cms-el-pin-week,
.awwo-cms-el-pin-lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-el-pin-now span {
	font-weight: 700;
}

.awwo-cms-el-pin-now.is-open span {
	color: var(--awwo-cms-green);
}

.awwo-cms-el-pin-week li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.awwo-cms-el-pin-week li.is-today {
	font-weight: 700;
}

.awwo-cms-el-pin-lines li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.awwo-cms-el-pin-lines .awwo-cms-icon {
	flex: none;
	width: 13px;
	height: 13px;
	margin-top: 0.25em;
	color: var(--awwo-cms-green);
}

.awwo-cms-el-pin-lines a,
body.awwo-cms-site .awwo-cms-site-main .awwo-cms-el-pin-lines a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.awwo-cms-el-pin-lines a:hover {
	color: var(--awwo-cms-green);
}

.awwo-cms-el-pin-save {
	align-self: flex-start;
	height: 34px;
	padding: 0 16px;
	font-size: 12px;
}

/* Social Icons: the site's Social Profiles in a row (the header's round
   buttons), 12px apart as theirs; none set yet, in a preview, where to set them. */
.awwo-cms-el-social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.awwo-cms-el-social-empty {
	margin: 0;
	color: var(--afx-muted, var(--awwo-cms-muted));
	font-size: 13px;
}

/* List's Style Framed: every line in a small box of its own (the fields'
   background, a thin line, two thirds of the corners), as time slots. */
.awwo-cms-el-list.is-framed li {
	box-sizing: border-box;
	padding: 10px 14px;
	border: 1px solid var(--afx-border, var(--awwo-cms-border));
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--afx-control, var(--awwo-cms-control));
}

/* 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-corners, 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;
}

/* Progress Bars: each label and value above its bar (Plain), or each in its
   own row, the label beside the bar (Framed); the fill in the palette's
   green on a soft track, rounded. Fill In View: empty until seen. */
.awwo-cms-el-bars {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

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

.awwo-cms-el-bar-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
}

.awwo-cms-el-bar-label {
	font-weight: 700;
}

.awwo-cms-el-bar-value {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.awwo-cms-el-bar-track {
	overflow: hidden;
	height: 8px;
	border-radius: 999px;
	background: color-mix(in oklab, var(--awwo-cms-border) 70%, transparent);
}

.awwo-cms-el-bar-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--awwo-cms-ok);
	transform-origin: left center;
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.awwo-cms-el-bars.is-waiting .awwo-cms-el-bar-fill {
	transform: scaleX(0);
	transition: none;
}

.awwo-cms-el-bars.is-framed .awwo-cms-el-bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	align-items: center;
	gap: 24px;
	padding: 16px 24px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-corners, var(--awwo-cms-radius));
	background: var(--awwo-cms-surface);
}

.awwo-cms-el-bars.is-framed .awwo-cms-el-bar-head {
	display: contents;
}

.awwo-cms-el-bars.is-framed .awwo-cms-el-bar-value {
	display: none;
}

@media (max-width: 600px) {
	.awwo-cms-el-bars.is-framed .awwo-cms-el-bar {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.awwo-cms-el-bar-fill {
		transition: none;
	}
}

/* Banner: the picture filling it (the CMS's own scene until one is chosen,
   Light or Dark as the page's mode), a shade over it, the words in a box at one of nine
   spots, 32px from the edges. Text Color Light: white words; Dark: the
   theme's. Box Style Card: the palette's card (the theme's words); Dark: the
   palette's dark (white words). Hover Zoom: the picture grows inside it. */
.awwo-cms-el-banner {
	position: relative;
	display: flex;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	padding: 32px;
	border-radius: var(--awwo-cms-radius-corners, var(--awwo-cms-radius));
	background: var(--afx-control, var(--awwo-cms-control));
	color: var(--afx-muted, var(--awwo-cms-muted));
}

.awwo-cms-el-banner-media {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: transform 0.6s ease;
}

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

/* The placeholder scene (until a picture is chosen), drawn in the page in
   the site's own palette (any palette, Custom too): Light View, a sky of its
   Neutral and Surface, a sun of its Accent, hills of Neutral with its Primary
   and Secondary; Dark View, a sky of its Secondary deepened, a moon of its
   Accent (its shadow cut from the sun, a crescent), hills of Secondary with
   a touch of Primary. */
.awwo-cms-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	--awwo-cms-ph-sky-top: color-mix(in oklab, var(--awwo-cms-grey-light) 60%, var(--awwo-cms-white));
	--awwo-cms-ph-sky-foot: var(--awwo-cms-grey-light);
	--awwo-cms-ph-sun: color-mix(in oklab, var(--awwo-cms-amber) 55%, var(--awwo-cms-white));
	--awwo-cms-ph-far: color-mix(in oklab, var(--awwo-cms-grey-light) 80%, var(--awwo-cms-green));
	--awwo-cms-ph-mid: color-mix(in oklab, var(--awwo-cms-grey-light) 72%, var(--awwo-cms-navy));
	--awwo-cms-ph-near: color-mix(in oklab, var(--awwo-cms-grey-light) 58%, var(--awwo-cms-navy));
}

:root[data-theme="dark"] .awwo-cms-placeholder {
	--awwo-cms-ph-sky-top: color-mix(in oklab, var(--awwo-cms-navy) 55%, #000);
	--awwo-cms-ph-sky-foot: color-mix(in oklab, var(--awwo-cms-navy) 72%, #000);
	--awwo-cms-ph-sun: color-mix(in oklab, var(--awwo-cms-amber) 40%, var(--awwo-cms-navy));
	--awwo-cms-ph-far: color-mix(in oklab, var(--awwo-cms-navy) 86%, var(--awwo-cms-green));
	--awwo-cms-ph-mid: var(--awwo-cms-navy);
	--awwo-cms-ph-near: color-mix(in oklab, var(--awwo-cms-navy) 82%, var(--awwo-cms-grey-light));
}

.awwo-cms-ph-sky-top { stop-color: var(--awwo-cms-ph-sky-top); }
.awwo-cms-ph-sky-foot { stop-color: var(--awwo-cms-ph-sky-foot); }
.awwo-cms-ph-sun { fill: var(--awwo-cms-ph-sun); }
.awwo-cms-ph-moon { fill: var(--awwo-cms-ph-sky-foot); opacity: 0; }
:root[data-theme="dark"] .awwo-cms-ph-moon { opacity: 1; }
.awwo-cms-ph-hill-far { fill: var(--awwo-cms-ph-far); }
.awwo-cms-ph-hill-mid { fill: var(--awwo-cms-ph-mid); }
.awwo-cms-ph-hill-near { fill: var(--awwo-cms-ph-near); }

.awwo-cms-el-banner-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.awwo-cms-el-banner.is-hover-zoom:hover .awwo-cms-el-banner-media {
	transform: scale(1.05);
}

.awwo-cms-el-banner-shade {
	position: absolute;
	inset: 0;
	background: #000;
	pointer-events: none;
}

.awwo-cms-el-banner-box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
}

.awwo-cms-el-banner.is-h-left { justify-content: flex-start; }
.awwo-cms-el-banner.is-h-center { justify-content: center; }
.awwo-cms-el-banner.is-h-right { justify-content: flex-end; }
.awwo-cms-el-banner.is-v-top { align-items: flex-start; }
.awwo-cms-el-banner.is-v-middle { align-items: center; }
.awwo-cms-el-banner.is-v-bottom { align-items: flex-end; }

.awwo-cms-el-banner.is-h-center .awwo-cms-el-banner-box { align-items: center; text-align: center; }
.awwo-cms-el-banner.is-h-right .awwo-cms-el-banner-box { align-items: flex-end; text-align: right; }

.awwo-cms-el-banner-label {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.awwo-cms-el-banner-title {
	margin: 0;
	line-height: 1.2;
}

.awwo-cms-el-banner-text {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
}

.awwo-cms-el-banner.is-text-light .awwo-cms-el-banner-box,
.awwo-cms-el-banner.is-text-light .awwo-cms-el-banner-title {
	color: #fff;
}

.awwo-cms-el-banner.is-text-dark .awwo-cms-el-banner-box,
.awwo-cms-el-banner.is-text-dark .awwo-cms-el-banner-title {
	color: var(--afx-text, var(--awwo-cms-text));
}

.awwo-cms-el-banner.is-box-card .awwo-cms-el-banner-box,
.awwo-cms-el-banner.is-box-dark .awwo-cms-el-banner-box {
	padding: 32px;
	border-radius: var(--awwo-cms-radius-corners, var(--awwo-cms-radius));
}

.awwo-cms-el-banner.is-box-card .awwo-cms-el-banner-box {
	border: 1px solid var(--awwo-cms-border);
	background: var(--awwo-cms-surface);
}

.awwo-cms-el-banner.is-box-card .awwo-cms-el-banner-box,
.awwo-cms-el-banner.is-box-card .awwo-cms-el-banner-title {
	color: var(--afx-text, var(--awwo-cms-text));
}

.awwo-cms-el-banner.is-box-dark .awwo-cms-el-banner-box {
	background: var(--awwo-cms-navy);
}

.awwo-cms-el-banner.is-box-dark .awwo-cms-el-banner-box,
.awwo-cms-el-banner.is-box-dark .awwo-cms-el-banner-title {
	color: #fff;
}

/* The words straight on its picture in light: the button the same pattern in
   white (outlined at rest, filled white when hovered, its words then dark),
   so it never fades into the photo. */
.awwo-cms-el-banner.is-box-none.is-text-light:has(.awwo-cms-el-banner-media :is(img, svg)) .awwo-cms-site-button {
	color: #fff;
	border-color: #fff;
}

.awwo-cms-el-banner.is-box-none.is-text-light:has(.awwo-cms-el-banner-media :is(img, svg)) a.awwo-cms-site-button:is(:hover, :focus-visible) {
	color: var(--awwo-cms-navy);
	background: #fff;
	border-color: #fff;
}

/* Button Style Filled: filled at rest (the theme's green; white with dark
   words on a photo in light), its hover a little deeper. */
.awwo-cms-el-banner a.awwo-cms-site-button.is-filled {
	color: var(--awwo-cms-white);
	background: var(--awwo-cms-green);
	border-color: var(--awwo-cms-green);
}

.awwo-cms-el-banner a.awwo-cms-site-button.is-filled:is(:hover, :focus-visible) {
	background: color-mix(in oklab, var(--awwo-cms-green) 85%, #000);
	border-color: color-mix(in oklab, var(--awwo-cms-green) 85%, #000);
}

.awwo-cms-el-banner.is-box-none.is-text-light:has(.awwo-cms-el-banner-media :is(img, svg)) a.awwo-cms-site-button.is-filled {
	color: var(--awwo-cms-navy);
	background: #fff;
	border-color: #fff;
}

.awwo-cms-el-banner.is-box-none.is-text-light:has(.awwo-cms-el-banner-media :is(img, svg)) a.awwo-cms-site-button.is-filled:is(:hover, :focus-visible) {
	background: color-mix(in oklab, #fff 85%, #000);
	border-color: color-mix(in oklab, #fff 85%, #000);
}

@media (max-width: 600px) {
	.awwo-cms-el-banner {
		padding: 16px;
	}

	.awwo-cms-el-banner.is-box-card .awwo-cms-el-banner-box,
	.awwo-cms-el-banner.is-box-dark .awwo-cms-el-banner-box {
		padding: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.awwo-cms-el-banner-media {
		transition: none;
	}
}

/* Slider: its slides side by side in a track (Slide: the track moves; Fade:
   stacked, the current one shown); without the script, the first alone.
   Arrows at its sides, dots at its foot, both in white on a soft shade. */
.awwo-cms-el-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	border-radius: var(--awwo-cms-radius-corners, var(--awwo-cms-radius));
	outline-offset: 4px;
}

.awwo-cms-el-slides {
	display: flex;
	transition: transform 0.6s ease;
}

.awwo-cms-el-slider .awwo-cms-el-slide {
	flex: 0 0 100%;
	border-radius: 0;
}

.awwo-cms-el-slider:not(.is-ready) .awwo-cms-el-slide:not(:first-child) {
	display: none;
}

.awwo-cms-el-slider.is-slide .awwo-cms-el-slides {
	transform: translateX(calc(var(--awwo-cms-slide, 0) * -100%));
}

.awwo-cms-el-slider.is-fade.is-ready .awwo-cms-el-slides {
	display: grid;
}

.awwo-cms-el-slider.is-fade.is-ready .awwo-cms-el-slide {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.awwo-cms-el-slider.is-fade.is-ready .awwo-cms-el-slide.is-current {
	opacity: 1;
}

.awwo-cms-el-slider-arrow {
	position: absolute;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.35);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.2s;
}

.awwo-cms-el-slider-arrow:is(:hover, :focus-visible) {
	background: rgb(0 0 0 / 0.6);
}

.awwo-cms-el-slider-arrow .awwo-cms-icon {
	width: 14px;
	height: 14px;
}

.awwo-cms-el-slider-arrow.is-prev { left: 16px; }
.awwo-cms-el-slider-arrow.is-next { right: 16px; }

.awwo-cms-el-slider-dots {
	position: absolute;
	right: 0;
	bottom: 16px;
	left: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.awwo-cms-el-slider-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.5);
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2);
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}

.awwo-cms-el-slider-dot[aria-current] {
	background: #fff;
	transform: scale(1.2);
}

/* Room for the arrows and dots: the words kept clear of them. */
.awwo-cms-el-slider .awwo-cms-el-banner {
	padding: 48px 72px;
}

@media (max-width: 600px) {
	.awwo-cms-el-slider .awwo-cms-el-banner {
		padding: 24px 16px 48px;
	}

	.awwo-cms-el-slider-arrow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.awwo-cms-el-slides,
	.awwo-cms-el-slider .awwo-cms-el-slide {
		transition: none;
	}
}

/* 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-corners, 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-corners, 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-amount {
	font-size: 32px;
	font-weight: 800;
}

.awwo-cms-el-price-period {
	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;
}

/* Too narrow for its four in a row (a slim column, a phone): two and two,
   never three and one. */
.afx-type-countdown {
	container-type: inline-size;
}

@container (max-width: 440px) {
	.awwo-cms-el-countdown {
		display: grid;
		grid-template-columns: repeat(2, max-content);
	}
}

.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-corners, 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-number {
	font-size: 28px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.awwo-cms-el-count-label {
	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;
}

/* Headings on the site (the builder's Heading, Cookies' title, headings in
   content): each level's Font Size from Appearance's Typography (30, 23, 18,
   17, 16 and 15px by default), its Headings font and weight too. Weightless
   (:where), so the CMS's own titles keep their own sizes. */
:where(body.awwo-cms-site h1) {
	font-size: var(--awwo-cms-site-h1-size, 30px);
}

:where(body.awwo-cms-site h2) {
	font-size: var(--awwo-cms-site-h2-size, 23px);
}

:where(body.awwo-cms-site h3) {
	font-size: var(--awwo-cms-site-h3-size, 18px);
}

:where(body.awwo-cms-site h4) {
	font-size: var(--awwo-cms-site-h4-size, 17px);
}

:where(body.awwo-cms-site h5) {
	font-size: var(--awwo-cms-site-h5-size, 16px);
}

:where(body.awwo-cms-site h6) {
	font-size: var(--awwo-cms-site-h6-size, 15px);
}

/* 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-corners, 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);
}

/* The builder's Cookies (the Security page's cookie list): its content's
   whole width, its title over the builder's Table look. */
.awwo-cms-cookie-list {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.awwo-cms-cookie-list .awwo-cms-site-heading {
	margin: 0;
}

.awwo-cms-cookie-list code {
	font-size: 13px;
	white-space: nowrap;
}

/* 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-corners, 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-corners, 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-corners, 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-corners, 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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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;
}

/* While one of the header's tooltips shows, the header over the bar, so the tooltip is never under it: the
   canvas holding it too (its own layer, under the bar's, would keep everything in it under the bar). */
.has-site-bar :is(.awwo-cms-site-canvas, .awwo-cms-site-header-block):has(.awwo-cms-site-header-block [data-awwo-cms-tooltip]:is(:hover, :focus-visible)),
.has-site-bar .awwo-cms-site-header-block:has([data-awwo-cms-tooltip]:is(:hover, :focus-visible)) {
	z-index: 41;
}

@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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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;
}


/* 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: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	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: calc(var(--awwo-cms-radius-tl, 12px) * 6 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 6 / 12) calc(var(--awwo-cms-radius-br, 12px) * 6 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 6 / 12);
	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;
	}
}

/* A profile's parts (Articles, Comments, Reviews): each its own card, as an article's Comments, 24px apart. */
.awwo-cms-profile-part {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
	padding: 32px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-corners, var(--awwo-cms-radius));
	background: var(--awwo-cms-surface);
}

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

/* Each comment or review: what it was written on, when (a review's stars first), then its text; a line between them. */
.awwo-cms-profile-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow-wrap: anywhere;
}

.awwo-cms-profile-item + .awwo-cms-profile-item {
	padding-top: 16px;
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-profile-item-title {
	font-weight: 700;
	color: var(--awwo-cms-text);
	text-decoration: none;
}

.awwo-cms-profile-item-title:hover {
	color: var(--awwo-cms-brand);
}

/* A review's stars, its date and time beside them. */
.awwo-cms-profile-item-rated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Its title with its date and time after it, in brackets, muted. */
.awwo-cms-profile-item-date {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	white-space: nowrap;
}

/* Its text, a history only: one line, cut with "…" (the whole of it where it was written). */
.awwo-cms-profile-item-body {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

/* A card that opens a profile page: as the article and product cards (above), its text white, the avatar
   ringed white and the flag ringed in the card's new colour. */
.awwo-cms-member.is-link {
	color: inherit;
	text-decoration: none;
}

.awwo-cms-member.is-link :is(.awwo-cms-member-meta, .awwo-cms-member-avatar, .awwo-cms-member-flag) {
	transition:
		border-color var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out),
		color var(--awwo-cms-site-button-timer, 0.6s) var(--awwo-cms-ease-out);
}

.awwo-cms-member.is-link:is(:hover, :focus-visible) .awwo-cms-member-meta {
	color: var(--awwo-cms-white);
}

.awwo-cms-member.is-link:is(:hover, :focus-visible) .awwo-cms-member-avatar {
	border-color: var(--awwo-cms-white);
}

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

/* An article with its QR Code: the code at the right, as tall as the entry, the entry's lines beside it. */
.awwo-cms-profile-item.has-qr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	row-gap: 4px;
}

.awwo-cms-profile-item.has-qr > :not(.awwo-cms-profile-item-qr-wrap) {
	grid-column: 1;
}

/* The code (how many times it was scanned: its corner's badge). */
.awwo-cms-profile-item-qr-wrap {
	display: flex;
	flex-direction: column;
	grid-column: 2;
	grid-row: 1 / span 2;
	align-items: center;
	align-self: center;
	gap: 4px;
}

.awwo-cms-profile-item-qr {
	display: block;
	width: 56px;
	height: 56px;
	padding: 4px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: calc(var(--awwo-cms-radius-tl, 12px) * 8 / 12) calc(var(--awwo-cms-radius-tr, 12px) * 8 / 12) calc(var(--awwo-cms-radius-br, 12px) * 8 / 12) calc(var(--awwo-cms-radius-bl, 12px) * 8 / 12);
	background: var(--awwo-cms-surface);
}

.awwo-cms-profile-item-qr svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* An article's author under its title: their name opens their profile page, green, never underlined. */
.awwo-cms-site-main .awwo-cms-article-author {
	font-weight: 700;
	color: var(--awwo-cms-ok);
	text-decoration: none;
}

.awwo-cms-site-main .awwo-cms-article-author:is(:hover, :focus-visible) {
	color: var(--awwo-cms-green);
	text-decoration: none;
}


/* A profile's Follow, in place of the name on its card: a link-style button, green and bold as the name was;
   Unfollow red. Never underlined. */
.awwo-cms-follow-form {
	margin: 0;
}

.awwo-cms-site-main .awwo-cms-follow {
	padding: 0;
	border: 0;
	background: none;
	color: var(--awwo-cms-ok);
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.awwo-cms-site-main .awwo-cms-follow.is-on {
	color: var(--awwo-cms-fail);
}

.awwo-cms-site-main .awwo-cms-follow:is(:hover, :focus-visible) {
	color: var(--awwo-cms-green);
	text-decoration: none;
}

.awwo-cms-site-main .awwo-cms-follow.is-on:is(:hover, :focus-visible) {
	color: var(--awwo-cms-red);
}

/* Unfollow's window (and the Footer Bar's Cookies): as the Backend's (its card, its title centred, its buttons side by side, Unfollow red). */
.awwo-cms-follow-modal {
	width: min(420px, calc(100vw - 32px));
	padding: 24px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius-corners, var(--awwo-cms-radius));
	background: var(--awwo-cms-surface);
	color: var(--awwo-cms-text);
	box-shadow: 0 24px 64px rgb(0 0 0 / 0.35);
}

.awwo-cms-follow-modal::backdrop {
	background: rgb(0 0 0 / 0.55);
}

.awwo-cms-follow-modal h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

.awwo-cms-follow-modal p {
	margin: 0 0 16px;
	text-align: center;
}

.awwo-cms-follow-modal-buttons {
	display: flex;
	justify-content: center;
	gap: 8px;
}

/* A form's Security Check In Modal (Captcha Protection), as the cards: Security Check top left (the cards' title:
   12px, bold, uppercase, muted), Cancel top right (a small button: 12px, 6px 14px); the widget without its own label,
   then the form's own button the whole width under it (locked until the check passes), 16px apart, small as Phone
   Verification's Send Code (12px, 6px 14px). */
.awwo-cms-form-captcha-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 36px;
	margin: 0 0 16px;
}

.awwo-cms-follow-modal .awwo-cms-form-captcha-head h2 {
	margin: 0;
	color: var(--awwo-cms-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
}

.awwo-cms-form-captcha-cancel {
	flex: none;
	min-width: 0;
	padding: 6px 14px;
	font-size: 12px;
}

.awwo-cms-form-captcha-modal .awwo-cms-captcha > .awwo-cms-field-label,
.awwo-cms-form-captcha-modal .awwo-cms-captcha .awwo-cms-label-row > label {
	display: none;
}

.awwo-cms-form-captcha-modal .afx-field {
	margin: 0 0 16px;
}

.awwo-cms-form-captcha-modal .awwo-cms-form-captcha-send {
	width: 100%;
	min-width: 0;
	padding: 6px 14px;
	font-size: 12px;
}

.awwo-cms-follow-modal .awwo-cms-button-danger {
	border-color: var(--awwo-cms-red);
	color: var(--awwo-cms-fail);
}

.awwo-cms-follow-modal .awwo-cms-button-danger:is(:hover, :focus-visible) {
	border-color: var(--awwo-cms-red);
	background: var(--awwo-cms-red);
	color: var(--awwo-cms-white);
}

/* The Account dashboard's News: one line each (who, what they did, where, when), a thin line between. */
.awwo-cms-dashboard-news-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-dashboard-news-list li {
	padding: 10px 0;
	overflow-wrap: anywhere;
}

.awwo-cms-dashboard-news-list li + li {
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-dashboard-news-list li:first-child {
	padding-top: 0;
}

.awwo-cms-dashboard-news-list li:last-child {
	padding-bottom: 0;
}

.awwo-cms-dashboard-news-list a {
	font-weight: 700;
	color: var(--awwo-cms-ok);
	text-decoration: none;
}

.awwo-cms-dashboard-news-list a:is(:hover, :focus-visible) {
	color: var(--awwo-cms-green);
	text-decoration: none;
}

.awwo-cms-dashboard-news-when {
	color: var(--awwo-cms-muted);
	font-size: 13px;
}


/* The Shop's toolbar: All Categories, the order, Min Price, Max Price and Search side by side (five); on
   tablets two in a row, Search the whole width; on phones the prices still side by side. */
.awwo-cms-shop-toolbar {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

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

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

	.awwo-cms-shop-toolbar .awwo-cms-members-search {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.awwo-cms-shop-toolbar > select {
		grid-column: 1 / -1;
	}
}

/* Min Price and Max Price: the word in their square at the start (as a field's icon), small bold capitals;
   the square a field icon's own (44px, fixed as the search's: Safari does not size a stretched box from its
   aspect-ratio, so it would shrink to the word). */
.awwo-cms-shop-price .awwo-cms-input-icon {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.awwo-cms-shop-price .awwo-cms-input {
	min-width: 0;
}

/* The Cookies window: each kind of cookie on its line (its name and what
   it is for), its state or switch at the end; a thin line between. */
.awwo-cms-cookies-modal {
	/* Wide enough for Reject All, Save Choices and Accept All on one line each. */
	width: min(560px, calc(100vw - 32px));
}

.awwo-cms-cookies-lead a {
	color: var(--awwo-cms-ok);
	font-weight: 700;
	text-decoration: none;
}

/* Reject All, Save Choices, Accept All (and Close): as equal as each other, the small buttons' 12px text (as the card's
   Add to Cart window). */
.awwo-cms-cookies-buttons .awwo-cms-button {
	flex: 1 1 0;
	min-width: 0;
	padding: 6px 14px;
	font-size: 12px;
}

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

.awwo-cms-cookies-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
}

.awwo-cms-cookies-row + .awwo-cms-cookies-row {
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-cookies-name {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
}

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

.awwo-cms-cookies-always {
	color: var(--awwo-cms-green);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}



/* A logo over the page (an Overlapping Logo layout): the page frame's own shade (as its top edge's, below) under
   the part of the logo that lies over the frame, so content sliding under the logo fades into the frame's colour
   around it as it does at the frame's edge; shown and hidden with that shade, nothing above the frame's edge. A
   shape of the logo's own (its image as a mask), in the frame's colour, its edge faded out about as far as the
   shade's 16px, cut where the content starts (awwo-cms-site.js, --awwo-cms-site-logo-cut); there only in the
   Overlapping Logo layouts (their rules above). */
.awwo-cms-site-logo .awwo-cms-site-logo-ring {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: var(--awwo-cms-site-logo-height-light, 80px);
	visibility: hidden;
	opacity: 0;
	filter: drop-shadow(0 0 4px var(--awwo-cms-bg)) drop-shadow(0 0 6px var(--awwo-cms-bg)) drop-shadow(0 0 6px var(--awwo-cms-bg));
	clip-path: inset(var(--awwo-cms-site-logo-cut, 60%) -24px -24px -24px);
	pointer-events: none;
	transition: opacity 0.2s var(--awwo-cms-ease-out);
}

body:has(.awwo-cms-page-frame[data-awwo-cms-shade-top]) .awwo-cms-site-logo .awwo-cms-site-logo-ring {
	opacity: 1;
}

/* Over the shade, the frame's own border (its 1px, the theme's border colour) carried around that part of the
   logo, always there as the frame's is. */
.awwo-cms-site-logo .awwo-cms-site-logo-ring.is-border {
	opacity: 1;
	filter: drop-shadow(0 1px 0 var(--awwo-cms-border)) drop-shadow(0 -1px 0 var(--awwo-cms-border)) drop-shadow(1px 0 0 var(--awwo-cms-border)) drop-shadow(-1px 0 0 var(--awwo-cms-border));
	transition: none;
}

.awwo-cms-site-logo .awwo-cms-site-logo-ring.awwo-cms-site-logo-dark {
	height: var(--awwo-cms-site-logo-height-dark, 80px);
}

.awwo-cms-site-logo .awwo-cms-site-logo-ring > span {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--awwo-cms-bg);
	mask: var(--awwo-cms-site-logo-mask-light) 0 0 / 100% 100% no-repeat;
}

.awwo-cms-site-logo .awwo-cms-site-logo-ring.awwo-cms-site-logo-dark > span {
	mask-image: var(--awwo-cms-site-logo-mask-dark);
}

/* The Navigation's Dark Logo and Light Logo: the one for the page's mode, each its own Max Height. */
.awwo-cms-site-logo img.awwo-cms-site-logo-dark {
	height: var(--awwo-cms-site-logo-height-dark, 80px);
}

:root[data-theme="dark"] .awwo-cms-site-logo-light,
:root:not([data-theme="dark"]) .awwo-cms-site-logo-dark {
	display: none;
}

/* A Brand's Light and Dark View Logo (its card, its page): the one for the page's mode. */
:root[data-theme="dark"] .awwo-cms-view-light,
:root:not([data-theme="dark"]) .awwo-cms-view-dark {
	display: none !important;
}

/* A tooltip above a button near the canvas's edge: lined up with the
   button's own right (or left) edge, not centred (awwo-cms-site.js). */
[data-awwo-cms-tooltip-above][data-awwo-cms-tooltip-end]::after {
	right: 0;
	left: auto;
	transform: translateY(4px);
}

[data-awwo-cms-tooltip-above][data-awwo-cms-tooltip-start]::after {
	right: auto;
	left: 0;
	transform: translateY(4px);
}

[data-awwo-cms-tooltip-above]:is([data-awwo-cms-tooltip-end], [data-awwo-cms-tooltip-start]):is(:hover, :focus-visible)::after {
	transform: translateY(0);
}