/*
 * Kauppakeskus Plaza — child theme styles, loaded after the Louhosteema bundle.
 *
 * Figma is drawn at 2560px (content 2160px, 200px gutters). Sizes here are
 * fluid between a 390px phone and ~1920px; the Figma pixel values are reached
 * at the widest screens. See docs/toteutussuunnitelma.md, section 4.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	/* Brand green #5B9570 (Figma). With light text it is 3.2:1, which passes
	   AA only as large text (≥ 18.66px bold): buttons and filter links are
	   kept bold and ≥ 19px. Links in running text use the darker #467A59
	   (4.6:1) — see --louhos-link-color. */
	--louhos-primary: #5b9570;
	--louhos-primary-rgb: 91, 149, 112;
	--louhos-primary-dark: #293f42;
	--louhos-accent: #bf5836;
	--louhos-link-color: #467a59;

	--plaza-green: #5b9570;
	--plaza-green-light: #83ad90;    /* Figma subnav: #5B9570 at 75 % on the background */
	--plaza-fs-large-ui: clamp(1.1875rem, 1.15rem + 0.1vw, 1.25rem); /* 19 → 20, bold = AA "large text" */
	--plaza-petrol: #293f42;
	--plaza-petrol-rgb: 41, 63, 66;
	--plaza-orange: #e07a19;
	--plaza-salmon: #f18865;
	--plaza-brick: #bf5836;
	--plaza-bg: #fcf3f1;
	--plaza-bg-rgb: 252, 243, 241;
	--plaza-card: #fff;
	--plaza-placeholder: #d9d9d9;

	/* Neutrals */
	--louhos-headings: #000;
	--louhos-body-color: #333;
	--louhos-grey: #fcf3f1;
	--louhos-border: #d9d9d9;
	--louhos-border-rgb: 217, 217, 217;

	/* Dark surfaces (footer) */
	--louhos-dark-1: #293f42;
	--louhos-dark-1-rgb: 41, 63, 66;
	--louhos-dark-2: #1f3033;
	--louhos-dark-2-rgb: 31, 48, 51;

	/* Shape */
	--louhos-radius: 5px;
	--louhos-radius-lg: 10px;

	/* Type */
	--louhos-font-family: "Aventa", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--plaza-fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);        /* 16 → 20 */
	--plaza-fs-small: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);      /* 14 → 16 */
	--plaza-fs-h1: clamp(2rem, 1.55rem + 1.5vw, 3.125rem);          /* 32 → 50 */
	--plaza-fs-h2: clamp(1.625rem, 1.3rem + 1.1vw, 2.5rem);         /* 26 → 40 */
	--plaza-fs-h3: clamp(1.375rem, 1.18rem + 0.65vw, 1.875rem);     /* 22 → 30 */
	--plaza-fs-h4: clamp(1.125rem, 1.08rem + 0.15vw, 1.25rem);      /* 18 → 20 */

	/* Layout */
	--plaza-gutter: clamp(1rem, 7.8vw, 12.5rem);                   /* 200px @2560 */
	--plaza-section: clamp(3rem, 5vw, 7.5rem);
	--louhos-header-height: 131px;

	/* Bootstrap runtime bridges */
	--bs-body-bg: var(--plaza-bg);
	--bs-body-font-size: var(--plaza-fs-body);
	--bs-body-line-height: 1.5;
	--bs-link-hover-color: var(--plaza-petrol);
	/* Bootstrap 5.3 draws links from the -rgb pair (compiled blue otherwise). */
	--bs-link-color-rgb: 70, 122, 89;
	--bs-link-hover-color-rgb: 41, 63, 66;
}

@media (min-width: 1200px) {
	:root {
		--louhos-header-height: clamp(5.5rem, 4.9vw, 7.8125rem); /* 125px @2560 */
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background-color: var(--plaza-bg);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
	font-weight: 900;
	line-height: 1.15;
	color: var(--louhos-headings);
}

h1, .h1 { font-size: var(--plaza-fs-h1); }
h2, .h2 { font-size: var(--plaza-fs-h2); }
h3, .h3 { font-size: var(--plaza-fs-h3); }
h4, .h4 { font-size: var(--plaza-fs-h4); }

/* Links inside running text: bold green (Figma) + underline, so the link is
   not identified by colour alone (WCAG 1.4.1). */
:where(.entry-content, .plaza-prose) a:not(.btn) {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Media in text never wider than the column (feedback 22.10): imported
   captions carry an inline width (style="width: 1024px"), embeds a fixed
   width attribute. */
.plaza-prose img,
.plaza-prose video,
.plaza-prose iframe,
.plaza-prose embed,
.plaza-prose object,
.plaza-prose .wp-caption {
	max-width: 100%;
}

.plaza-prose img,
.plaza-prose video {
	height: auto;
}

.plaza-prose iframe[src*="youtube"],
.plaza-prose iframe[data-src-cmplz*="youtube"],
.plaza-prose iframe[src*="vimeo"],
.plaza-prose iframe[data-src-cmplz*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Tietoa meistä: the info columns and the contacts intro use the same
   standalone link style as the rest of the page, no underline (feedback 16.10). */
.plaza-info a:not(.btn),
.plaza-contacts__intro a:not(.btn) {
	text-decoration: none;
}

/* Links are bold already: bold set in the editor inside a link
   (<a><strong>) would otherwise jump to Black (900). */
:where(.entry-content, .plaza-prose) a :where(strong, b) {
	font-weight: inherit;
}

/* Link styles, one rule for the whole site (feedback 12.10):
   - links inside running text: bold green + underline, hover petrol
   - standalone links (menus, header, footer, cards, share, lists): no
     underline, hover changes the colour (green, or petrol on green links). */
/* Only prose (article text, intros), not every link inside a block page. */
.plaza-prose a:not(.btn):hover {
	color: var(--plaza-petrol);
}

.plaza-article__back a {
	font-weight: 700;
	text-decoration: none;
}

.plaza-article__back a:hover,
.plaza-article__back a:focus-visible {
	color: var(--plaza-petrol);
}

:focus-visible {
	outline-color: var(--plaza-petrol);
}

.section--dark :focus-visible {
	outline-color: var(--plaza-bg);
}

.skip-link {
	background: var(--plaza-petrol);
	color: var(--plaza-bg);
}

/* 2160px content column with the Figma side gutters. */
.container-plaza {
	width: 100%;
	max-width: calc(2160px + 2 * var(--plaza-gutter));
	margin-inline: auto;
	padding-inline: var(--plaza-gutter);
}

.plaza-section {
	padding-block: var(--plaza-section);
}

.plaza-icon {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
}

/* ==========================================================================
   Buttons — 5px radius, bold label, green → petrol on hover (Figma)
   ========================================================================== */

.btn {
	--bs-btn-font-weight: 700;
	--bs-btn-font-size: var(--plaza-fs-large-ui);
	--bs-btn-padding-x: clamp(1.75rem, 2.4vw, 3.8rem);
	--bs-btn-padding-y: clamp(0.75rem, 0.75vw, 1.2rem);
	--bs-btn-border-radius: var(--louhos-radius);
	--bs-btn-border-width: 0;
}

.btn-primary {
	--bs-btn-color: var(--plaza-bg);
	--bs-btn-bg: var(--louhos-primary);
	--bs-btn-hover-color: var(--plaza-bg);
	--bs-btn-hover-bg: var(--plaza-petrol);
	--bs-btn-active-color: var(--plaza-bg);
	--bs-btn-active-bg: var(--plaza-petrol);
	--bs-btn-focus-shadow-rgb: var(--louhos-primary-rgb);
	--bs-btn-disabled-color: var(--plaza-bg);
	--bs-btn-disabled-bg: var(--louhos-primary);
}

.btn-secondary {
	--bs-btn-color: var(--plaza-bg);
	--bs-btn-bg: var(--plaza-petrol);
	--bs-btn-hover-color: var(--plaza-bg);
	--bs-btn-hover-bg: var(--louhos-primary);
	--bs-btn-active-color: var(--plaza-bg);
	--bs-btn-active-bg: var(--louhos-primary);
}

.louhos-btn {
	min-height: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.plaza-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	color: var(--louhos-body-color);
}

/* Translucent blurred bar on a pseudo-element: backdrop-filter on the header
   itself would become the containing block of the fixed offcanvas menu. */
.plaza-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(var(--plaza-bg-rgb), 0.75);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.admin-bar .plaza-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.plaza-header__inner {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"brand toggle"
		"today today";
	align-items: center;
	justify-content: space-between;
	row-gap: 0.75rem;
	min-height: var(--louhos-header-height);
	padding-block: 1.25rem 0.75rem;
}

.plaza-header__brand {
	grid-area: brand;
	display: inline-block;
	line-height: 0;
}

.plaza-header__brand img {
	width: clamp(7.5rem, 6.7vw, 10.75rem);   /* 121px mobile → 172px @2560 */
	height: auto;
}

.plaza-header__toggle {
	grid-area: toggle;
	justify-self: end;   /* lines end on the content edge, like the logo starts on it (feedback 22.10) */
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--louhos-body-color);
}

/* Burger: three 38×2px bars (Figma), turns into an X in the open menu. */
.plaza-burger,
.plaza-burger::before,
.plaza-burger::after,
.plaza-burger > span {
	display: block;
	width: 2.4rem;
	height: 2px;
	border-radius: 50px;
	background: currentColor;
}

.plaza-burger {
	position: relative;
	background: none;
}

.plaza-burger::before,
.plaza-burger::after {
	content: "";
	position: absolute;
	left: 0;
}

.plaza-burger::before { top: -0.85rem; }
.plaza-burger::after { top: 0.85rem; }

.plaza-burger.is-open > span { display: none; }
.plaza-burger.is-open::before { top: 0; transform: rotate(45deg); }
.plaza-burger.is-open::after { top: 0; transform: rotate(-45deg); }

/* "Tänään avoinna" */
.plaza-today {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-size: var(--plaza-fs-small);
	line-height: 1.2;
}

.plaza-today--header {
	grid-area: today;
	justify-content: center;
}

/* Phones: first line on one row, "Tänään avoinna" centred under the clock. */
.plaza-today__list li {
	white-space: nowrap;
}

@media (max-width: 400px) {
	.plaza-today {
		gap: 0.6rem;
		font-size: 0.8125rem;
	}
}

/* Phones: "Tänään avoinna" lines up with the logo's left edge, the clock
   centred above its label (feedback 16.10). */
@media (max-width: 639.98px) {
	.plaza-today--header {
		justify-content: flex-start;
		/* "Tänään avoinna" sits on the same baseline as the last line
		   ("Katso liikekohtaiset aukioloajat"). */
		align-items: flex-end;
		align-items: last baseline;
	}
}

/* The same in the mobile menu (menu body centres its children). */
.plaza-today--menu {
	align-self: stretch;
	justify-content: flex-start;
	align-items: flex-end;
	align-items: last baseline;
}

/* Open menu: today's hours in the head row on tablets (feedback 22.10),
   under it on phones. */
.plaza-today--menuhead {
	display: none;
}

@media (min-width: 640px) and (max-width: 1199.98px) {
	.plaza-menu .plaza-menu__head {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "brand today toggle";   /* brand/toggle areas come from the header */
		column-gap: 1.5rem;
		align-items: center;
		min-height: var(--louhos-header-height);
		padding-block: 1rem;   /* = .plaza-header__inner on tablets */
	}

	.plaza-today--menuhead {
		grid-area: today;
		display: flex;
		justify-content: center;
	}

	.plaza-today--menu {
		display: none;
	}
}

/* Tablets: logo · today · burger on one row (feedback 40). */
@media (min-width: 640px) and (max-width: 1199.98px) {
	:root {
		--louhos-header-height: 5.75rem;   /* one row on tablets */
	}

	.plaza-header__inner {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "brand today toggle";
		column-gap: 1.5rem;
		padding-block: 1rem;
	}

	.plaza-today--header .plaza-today__label {
		flex-direction: column;
	}
}

.plaza-today__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
}

/* One line also in the fallback font, which is wider than Aventa: a wrapped
   label made the header 17px taller until the font swapped in (CLS). */
.plaza-today__label span {
	white-space: nowrap;
}

.plaza-today__icon {
	width: 2.2rem;
	height: 2.2rem;
}

.plaza-today__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-today__list a {
	color: inherit;
	text-decoration: none;
}

.plaza-today__list a {
	transition: color 0.2s ease;
}

/* Like the main navigation: green, no underline. In the light header the
   darker link green keeps the text AA (the footer's light green would be 2.3:1). */
.plaza-today__list a:hover,
.plaza-today__list a:focus-visible {
	color: var(--louhos-link-color);
}

/* Navigation */
.plaza-nav__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--louhos-body-color);
	text-decoration: none;
}

.plaza-nav__link:hover,
.plaza-nav__link:focus-visible {
	color: var(--louhos-link-color);
}

.plaza-nav__item.is-active .plaza-nav__link {
	font-weight: 700;
}

.plaza-nav__icon {
	width: 2.25rem;
	height: 2.25rem;
}

/* Mobile / tablet menu: full-screen overlay (Bootstrap offcanvas). */
@media (max-width: 1199.98px) {
	.plaza-menu.offcanvas-top {
		height: 100vh;
		height: 100dvh;
		border: 0;
		background: rgba(var(--plaza-bg-rgb), 0.92);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	.plaza-menu__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1.25rem var(--plaza-gutter) 0;
	}

	.plaza-menu__body {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		padding: 1rem var(--plaza-gutter) 2rem;
		overflow-y: auto;
	}

	.plaza-nav__list {
		flex-direction: column;
		gap: 0.6rem;
	}

	.plaza-nav__list--social {
		padding-top: 1.5rem;
		border-top: 1px solid var(--louhos-body-color);
	}

	/* Filled social logos fill their whole box: inset them to the 35px of
	   the Figma menu so they match the outline icons above. */
	.plaza-nav__list--social .plaza-nav__icon {
		box-sizing: border-box;
		padding: 0.375rem;
	}

	.plaza-nav__link {
		gap: 0.75rem;
		font-size: 1.125rem;
		min-height: 3rem;
	}

	.plaza-nav__icon {
		width: 2.5rem;
		height: 2.5rem;
	}
}

@media (min-width: 1200px) {
	.plaza-header__inner {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "brand nav today";
		column-gap: 2rem;
		padding-block: 0.75rem;
	}

	.plaza-menu {
		grid-area: nav;
		justify-self: center;
	}

	.plaza-menu__body {
		display: block;
	}

	.plaza-nav__list {
		gap: clamp(1.5rem, 2vw, 3.125rem);
	}

	.plaza-nav__link {
		font-size: clamp(0.9375rem, 0.5rem + 0.45vw, 1.25rem);
		white-space: nowrap;
	}

	.plaza-nav__icon {
		width: clamp(2rem, 1.95vw, 3.125rem);
		height: clamp(2rem, 1.95vw, 3.125rem);
	}

	.plaza-today--header {
		justify-content: flex-end;
	}

	.plaza-today--header .plaza-today__label {
		flex-direction: row-reverse;
		font-size: 0.75rem;
		max-width: 9.5rem;
		text-align: right;
	}

	.plaza-today--header .plaza-today__label span {
		max-width: 3.5rem;
		white-space: normal;
	}

	.plaza-today__icon {
		width: clamp(1.75rem, 1.6vw, 2.1rem);
		height: clamp(1.75rem, 1.6vw, 2.1rem);
	}

	.plaza-today--header .plaza-today__list {
		font-size: clamp(0.875rem, 0.5rem + 0.4vw, 1.25rem);
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.plaza-footer {
	border-top: 0;   /* parent theme's 1px primary line */
	/* Light text on dark: greyscale smoothing keeps the Black weight from
	   looking bloated (macOS), feedback 12.10. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-block: clamp(3rem, 3.9vw, 6.25rem) 2rem;
	background: var(--plaza-petrol);
	color: var(--plaza-bg);
}

.plaza-footer a:not(.btn) {
	color: var(--plaza-bg);
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Header and footer links: no underline, light green on hover (feedback
   12.10). #8DB79A on the petrol background = 5.0:1. */
.plaza-footer a:not(.btn):hover,
.plaza-footer a:not(.btn):focus-visible {
	color: #8db79a;
	text-decoration: none;
}

.plaza-footer__grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 768px) {
	.plaza-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.plaza-footer__intro {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1200px) {
	.plaza-footer__grid {
		grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 3vw, 5rem);
	}

	.plaza-footer__intro {
		grid-column: auto;
		padding-right: clamp(0rem, 4vw, 12rem);
	}
}

.plaza-footer__title {
	margin-bottom: 1.5rem;
	font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2.5rem);                /* 24 → 40 */
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0.015em;   /* a little air between Black letters on dark */
}

.plaza-footer__lead {
	font-size: clamp(1.125rem, 0.85rem + 0.6vw, 1.875rem);           /* 18 → 30 */
	font-weight: 900;
	line-height: 1.3;
}

.plaza-footer__heading {
	margin-bottom: 1.25rem;
	font-size: clamp(1.125rem, 0.85rem + 0.6vw, 1.875rem);           /* = lead, 30px @2560 */
	color: var(--plaza-bg);
}

.plaza-footer__menu {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 700;
}

.plaza-footer__menu a {
	text-decoration: none;
}

.plaza-icon-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.plaza-icon-link .plaza-icon {
	width: 1.6em;
	height: 1.6em;
}

.plaza-social {
	display: flex;
	gap: clamp(1.5rem, 2vw, 3.125rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-social a {
	display: inline-flex;
	line-height: 0;
}

.plaza-social .plaza-icon {
	width: clamp(2rem, 1.95vw, 3.125rem);
	height: clamp(2rem, 1.95vw, 3.125rem);
}

.plaza-footer__legal {
	margin-top: clamp(3rem, 5vw, 8rem);
}

.plaza-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-footer__legal li + li::before {
	content: "|";
	margin-inline: 0.75rem;
}

.plaza-footer__legal a {
	text-decoration: none;
}

/* Opening hours list (footer + block) */
.plaza-hours {
	display: grid;
	gap: 1.5rem;
}

.plaza-hours__title {
	margin: 0;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.plaza-hours p,
.plaza-hours__rows {
	margin: 0;
}

.plaza-hours__rows div {
	display: flex;
	gap: 0.35em;
}

.plaza-hours__rows dt {
	font-weight: 400;
}

.plaza-hours__rows dd {
	margin: 0;
}

.plaza-hours__note a {
	color: var(--louhos-link-color);
	font-weight: 700;
	text-decoration: none;
}

.plaza-footer .plaza-hours__note a {
	font-weight: 400;
}

.plaza-hours__note a:hover,
.plaza-hours__note a:focus-visible {
	color: var(--plaza-petrol);
}

.plaza-hours a[href^="tel:"] {
	font-weight: 700;
	text-decoration: none;
}

.plaza-hours a[href^="tel:"]:hover,
.plaza-hours a[href^="tel:"]:focus-visible {
	color: var(--plaza-petrol);
}

.plaza-footer .plaza-hours a[href^="tel:"] {
	font-weight: 400;
}

.plaza-footer .plaza-hours a:hover,
.plaza-footer .plaza-hours a:focus-visible {
	color: #8db79a;   /* = footer link hover, not the petrol of light areas */
}

/* ==========================================================================
   Store listing (block plaza/liikelistaus)
   ========================================================================== */

.plaza-listing__title {
	margin-bottom: clamp(1.25rem, 2vw, 2.5rem);
}

.plaza-listing__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: clamp(1.5rem, 2vw, 2.5rem);
}

.plaza-filters {
	flex: 1 1 0;
	min-width: min(100%, 20rem);
}

.plaza-filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem clamp(1.25rem, 2vw, 3.125rem);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--plaza-fs-large-ui);
}

/* Green filter links are bold and ≥ 19px (AA large text, 3.2:1). */
.plaza-filters a {
	display: inline-block;
	padding-block: 0.25rem;
	color: var(--louhos-primary);
	font-weight: 700;
	text-decoration: none;
}

.plaza-filters a:hover,
.plaza-filters a:focus-visible {
	color: var(--plaza-petrol);
}

.plaza-filters a[aria-current="page"] {
	color: var(--louhos-body-color);
}

.plaza-sort__toggle {
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--louhos-primary);
	font-size: var(--plaza-fs-large-ui);
	font-weight: 700;
}

/* Menu items, not text links: no underline (feedback 16.10). */
.plaza-sort .dropdown-item {
	text-decoration: none;
}

.plaza-sort .dropdown-item.active {
	background: var(--plaza-petrol);
}

.plaza-store-grid,
.plaza-offer-grid {
	display: grid;
	gap: clamp(0.75rem, 1vw, 1.5625rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-store-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
}

@media (min-width: 1400px) {
	.plaza-store-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.plaza-store-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: clamp(1rem, 1.25vw, 2rem) 1rem 1.5rem;
	border-radius: var(--louhos-radius);
	background: var(--plaza-card);
	text-align: center;
	transition: box-shadow 0.2s ease;
}

.plaza-store-card:hover,
.plaza-store-card:focus-within {
	box-shadow: 0 0.5rem 1.5rem rgba(var(--plaza-petrol-rgb), 0.12);
}

.plaza-store-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(100%, 9.375rem);
	aspect-ratio: 1;
	margin-bottom: 1rem;
}

.plaza-store-card__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.plaza-store-card__placeholder {
	width: 100%;
	height: 100%;
	border-radius: var(--louhos-radius);
	background: var(--plaza-placeholder);
}

.plaza-store-card__title {
	margin-bottom: 0.5rem;
	font-size: var(--plaza-fs-h4);
}

@media (min-width: 1400px) {
	.plaza-store-card__title {
		font-size: clamp(1.25rem, 0.6rem + 0.6vw, 1.875rem);
	}
}

.plaza-store-card__title a {
	color: inherit;
	text-decoration: none;
}

.plaza-store-card:hover .plaza-store-card__title a,
.plaza-store-card__title a:focus-visible {
	color: var(--louhos-link-color);
}

.plaza-store-card__hours,
.plaza-hours-table {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0.15rem 1.5rem;
	margin: 0;
	text-align: left;
}

.plaza-store-card__hours {
	font-size: var(--plaza-fs-body);
}

.plaza-store-card__hours div,
.plaza-hours-table div {
	display: contents;
}

.plaza-store-card__hours dt,
.plaza-hours-table dt {
	font-weight: 400;
}

/* "Ma-Pe" never breaks at the hyphen (feedback 16.10); in the hours the
   dash is glued by the |plaza_nobreak filter, other text may still wrap. */
.plaza-store-card__hours dt,
.plaza-hours-table dt {
	white-space: nowrap;
}

.plaza-store-card__hours dd,
.plaza-hours-table dd {
	margin: 0;
}

.plaza-hours-table__reason {
	color: #5c5c5c;
}

/* ==========================================================================
   Store page
   ========================================================================== */

.plaza-store__top {
	display: grid;
	gap: 2rem;
	align-items: start;
	margin-bottom: clamp(2rem, 3vw, 4rem);
}

@media (min-width: 992px) {
	.plaza-store__top {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.1fr);
		column-gap: clamp(2rem, 4vw, 6rem);
	}
}

.plaza-store__subtitle {
	font-size: var(--plaza-fs-h2);
}

.plaza-store__logo {
	display: flex;
	justify-content: center;
}

.plaza-store__logo img {
	max-width: min(100%, 17rem);
	height: auto;
}

.plaza-store__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}

.plaza-store__thumb {
	padding: 0;
	border: 0;
	border-radius: var(--louhos-radius);
	overflow: hidden;
	background: none;
	cursor: zoom-in;
}

.plaza-store__thumb:first-child {
	grid-column: 1 / -1;
}

.plaza-store__thumb img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.4s ease;
}

.plaza-store__thumb:hover img,
.plaza-store__thumb:focus-visible img {
	transform: scale(1.04);
}

.plaza-lightbox {
	max-width: min(92vw, 80rem);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--louhos-radius);
	background: var(--plaza-petrol);
}

.plaza-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

.plaza-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(92vh - 4rem);
	margin-inline: auto;
	object-fit: contain;
}

.plaza-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 0.75rem;
	color: var(--plaza-bg);
}

.plaza-lightbox__btn {
	padding: 0.4rem 1rem;
	border: 1px solid var(--plaza-bg);
	border-radius: var(--louhos-radius);
	background: none;
	color: var(--plaza-bg);
	font-weight: 700;
}

.plaza-lightbox__btn:hover,
.plaza-lightbox__btn:focus-visible {
	background: var(--plaza-bg);
	color: var(--plaza-petrol);
}

.plaza-lightbox__close {
	margin-left: auto;
}

.plaza-listing__floor {
	margin: clamp(1.5rem, 3vw, 3rem) 0 1rem;
	font-size: var(--plaza-fs-h3);
}

.plaza-store__info {
	display: grid;
	gap: 2rem;
	margin-bottom: clamp(2.5rem, 4vw, 5rem);
}

@media (min-width: 768px) {
	.plaza-store__info {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.plaza-store__info {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.plaza-store__info .h3,
.plaza-store__subheading {
	margin-bottom: 1rem;
}

.plaza-store__subheading {
	margin-top: 2rem;
}

.plaza-contact-list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-contact-list a {
	color: var(--louhos-link-color);
	font-weight: 700;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.plaza-contact-list a:hover,
.plaza-contact-list a:focus-visible {
	color: var(--plaza-petrol);
}

.plaza-contact-list .plaza-icon {
	width: 1.6em;
	height: 1.6em;
}

.plaza-social--dark a {
	color: var(--louhos-body-color);
}

.plaza-social--dark a:hover {
	color: var(--louhos-link-color);
}

/* ==========================================================================
   Offer card
   ========================================================================== */

.plaza-offer-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
	gap: clamp(1.5rem, 2vw, 3rem) clamp(0.75rem, 2vw, 3rem);
}

@media (min-width: 1200px) {
	.plaza-offer-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.plaza-offer {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	text-align: center;
}

.plaza-offer__image {
	width: min(100%, 21.375rem);    /* 342px @2560 */
	aspect-ratio: 1;
	margin-bottom: 1rem;
	overflow: hidden;
	border-radius: var(--louhos-radius);
	background: var(--plaza-card);
}

.plaza-offer__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.plaza-offer__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--plaza-placeholder);
}

/* Campaign frame: drawn around the image, never on top of it (Figma note). */
.plaza-offer--framed .plaza-offer__image {
	position: relative;
	overflow: visible;
	outline: 0.5rem solid var(--plaza-campaign-frame, var(--plaza-brick));
}

.plaza-offer__badge {
	position: absolute;
	top: -0.5rem;
	left: 50%;
	z-index: 1;
	padding: 0.2rem 0.9rem 0.35rem;
	transform: translate(-50%, -25%);
	border-radius: var(--louhos-radius);
	background: var(--plaza-campaign-frame, var(--plaza-brick));
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
}


.plaza-offer__store {
	margin-bottom: 0.75rem;
}

.plaza-offer__title {
	margin-bottom: 1rem;
	font-size: var(--plaza-fs-h4);
	line-height: 1.3;
}

.plaza-offer__title a {
	color: inherit;
	text-decoration: none;
}

.plaza-offer:hover .plaza-offer__title a,
.plaza-offer__title a:focus-visible {
	color: var(--louhos-link-color);
}

.plaza-offer p {
	margin-bottom: 0.75rem;
}

.plaza-offer__lowest {
	color: #5c5c5c;
}

/* ==========================================================================
   Media helper: image / video / placeholder filling its box
   ========================================================================== */

.plaza-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--plaza-placeholder);
}

.plaza-media__el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.plaza-media__placeholder {
	display: block;
	background: var(--plaza-placeholder);
}

/* ==========================================================================
   Front page: kollaasi (carousel + 4 image links)
   ========================================================================== */

.plaza-kollaasi {
	padding-block: clamp(0.5rem, 1vw, 1.25rem) var(--plaza-section);
}

.plaza-kollaasi__grid {
	display: grid;
	overflow: hidden;
	border-radius: var(--louhos-radius-lg);
}

@media (min-width: 992px) {
	.plaza-kollaasi__grid {
		grid-template-columns: 982fr 1178fr;
		aspect-ratio: 2160 / 1122;
	}
}

.plaza-carousel,
.plaza-carousel .carousel-inner,
.plaza-carousel .carousel-item {
	height: 100%;
}

.plaza-carousel {
	position: relative;
	color: #fff;
}

@media (max-width: 991.98px) {
	.plaza-carousel {
		aspect-ratio: 390 / 412;
	}
}

@media (min-width: 576px) and (max-width: 991.98px) {
	.plaza-carousel {
		aspect-ratio: 16 / 10;
	}
}

@media (min-width: 992px) {
	.plaza-carousel {
		min-height: 26rem;
	}
}

.plaza-carousel .plaza-media {
	position: absolute;
	inset: 0;
}

/* Figma "Shadow+Blur": 5px backdrop blur and a #333 fade to 75 %. The fade is
   drawn on a layer that starts --plaza-fade above the caption and eases in
   (16-stop "scrim" curve, no visible edge or banding). Behind the text it is
   ≥ 55 % at the title (white ≥ 3.3:1, AA large text) and ≥ 70 % behind the
   small text (≥ 4.9:1), plus the Figma text shadow. */
.plaza-carousel__caption,
.plaza-tile__caption {
	--plaza-fade: clamp(1.5rem, 2.75vw, 4.25rem);
	text-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.plaza-carousel__caption::before,
.plaza-tile__caption::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--plaza-fade)) 0 0;
	z-index: -1;
	background: linear-gradient(to bottom,
		rgba(51, 51, 51, 0.000) 0,
		rgba(51, 51, 51, 0.007) calc(var(--plaza-fade) * 0.0667),
		rgba(51, 51, 51, 0.027) calc(var(--plaza-fade) * 0.1333),
		rgba(51, 51, 51, 0.057) calc(var(--plaza-fade) * 0.2000),
		rgba(51, 51, 51, 0.096) calc(var(--plaza-fade) * 0.2667),
		rgba(51, 51, 51, 0.142) calc(var(--plaza-fade) * 0.3333),
		rgba(51, 51, 51, 0.194) calc(var(--plaza-fade) * 0.4000),
		rgba(51, 51, 51, 0.248) calc(var(--plaza-fade) * 0.4667),
		rgba(51, 51, 51, 0.303) calc(var(--plaza-fade) * 0.5333),
		rgba(51, 51, 51, 0.356) calc(var(--plaza-fade) * 0.6000),
		rgba(51, 51, 51, 0.408) calc(var(--plaza-fade) * 0.6667),
		rgba(51, 51, 51, 0.454) calc(var(--plaza-fade) * 0.7333),
		rgba(51, 51, 51, 0.493) calc(var(--plaza-fade) * 0.8000),
		rgba(51, 51, 51, 0.523) calc(var(--plaza-fade) * 0.8667),
		rgba(51, 51, 51, 0.543) calc(var(--plaza-fade) * 0.9333),
		rgba(51, 51, 51, 0.550) var(--plaza-fade),
		rgba(51, 51, 51, 0.7) calc(var(--plaza-fade) + 2.5rem),
		rgba(51, 51, 51, 0.75) 100%);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	-webkit-mask-image: linear-gradient(to bottom,
		rgba(0, 0, 0, 0.000) 0,
		rgba(0, 0, 0, 0.013) calc(var(--plaza-fade) * 0.0667),
		rgba(0, 0, 0, 0.049) calc(var(--plaza-fade) * 0.1333),
		rgba(0, 0, 0, 0.104) calc(var(--plaza-fade) * 0.2000),
		rgba(0, 0, 0, 0.175) calc(var(--plaza-fade) * 0.2667),
		rgba(0, 0, 0, 0.259) calc(var(--plaza-fade) * 0.3333),
		rgba(0, 0, 0, 0.352) calc(var(--plaza-fade) * 0.4000),
		rgba(0, 0, 0, 0.450) calc(var(--plaza-fade) * 0.4667),
		rgba(0, 0, 0, 0.550) calc(var(--plaza-fade) * 0.5333),
		rgba(0, 0, 0, 0.648) calc(var(--plaza-fade) * 0.6000),
		rgba(0, 0, 0, 0.741) calc(var(--plaza-fade) * 0.6667),
		rgba(0, 0, 0, 0.825) calc(var(--plaza-fade) * 0.7333),
		rgba(0, 0, 0, 0.896) calc(var(--plaza-fade) * 0.8000),
		rgba(0, 0, 0, 0.951) calc(var(--plaza-fade) * 0.8667),
		rgba(0, 0, 0, 0.987) calc(var(--plaza-fade) * 0.9333),
		rgba(0, 0, 0, 1.000) var(--plaza-fade));
	mask-image: linear-gradient(to bottom,
		rgba(0, 0, 0, 0.000) 0,
		rgba(0, 0, 0, 0.013) calc(var(--plaza-fade) * 0.0667),
		rgba(0, 0, 0, 0.049) calc(var(--plaza-fade) * 0.1333),
		rgba(0, 0, 0, 0.104) calc(var(--plaza-fade) * 0.2000),
		rgba(0, 0, 0, 0.175) calc(var(--plaza-fade) * 0.2667),
		rgba(0, 0, 0, 0.259) calc(var(--plaza-fade) * 0.3333),
		rgba(0, 0, 0, 0.352) calc(var(--plaza-fade) * 0.4000),
		rgba(0, 0, 0, 0.450) calc(var(--plaza-fade) * 0.4667),
		rgba(0, 0, 0, 0.550) calc(var(--plaza-fade) * 0.5333),
		rgba(0, 0, 0, 0.648) calc(var(--plaza-fade) * 0.6000),
		rgba(0, 0, 0, 0.741) calc(var(--plaza-fade) * 0.6667),
		rgba(0, 0, 0, 0.825) calc(var(--plaza-fade) * 0.7333),
		rgba(0, 0, 0, 0.896) calc(var(--plaza-fade) * 0.8000),
		rgba(0, 0, 0, 0.951) calc(var(--plaza-fade) * 0.8667),
		rgba(0, 0, 0, 0.987) calc(var(--plaza-fade) * 0.9333),
		rgba(0, 0, 0, 1.000) var(--plaza-fade));
	pointer-events: none;
}

/* Hero carousel and image links: a light band (0 → 55 %) that fades in along a long, eased
   curve — the blur too — so there is no visible top edge. The texts rely on a
   strong shadow for contrast; check with the final 4D images (very light
   images may need a darker band). */
.plaza-carousel__caption {
	--plaza-fade: clamp(2rem, 4vw, 6rem);
	padding-bottom: clamp(3rem, 3.75vw, 6rem);
}

.plaza-tile__caption {
	--plaza-fade: clamp(1.5rem, 2.5vw, 4rem);
}

.plaza-carousel__caption::before,
.plaza-tile__caption::before {
	background: linear-gradient(to bottom,
		rgba(51, 51, 51, 0) 0%,
		rgba(51, 51, 51, 0.01) 8%,
		rgba(51, 51, 51, 0.04) 16%,
		rgba(51, 51, 51, 0.08) 24%,
		rgba(51, 51, 51, 0.14) 32%,
		rgba(51, 51, 51, 0.21) 40%,
		rgba(51, 51, 51, 0.29) 50%,
		rgba(51, 51, 51, 0.37) 60%,
		rgba(51, 51, 51, 0.43) 70%,
		rgba(51, 51, 51, 0.48) 80%,
		rgba(51, 51, 51, 0.52) 90%,
		rgba(51, 51, 51, 0.55) 100%);
	-webkit-mask-image: linear-gradient(to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.04) 10%,
		rgba(0, 0, 0, 0.15) 20%,
		rgba(0, 0, 0, 0.32) 30%,
		rgba(0, 0, 0, 0.52) 40%,
		rgba(0, 0, 0, 0.7) 50%,
		rgba(0, 0, 0, 0.84) 60%,
		rgba(0, 0, 0, 0.94) 70%,
		rgba(0, 0, 0, 1) 80%);
	mask-image: linear-gradient(to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.04) 10%,
		rgba(0, 0, 0, 0.15) 20%,
		rgba(0, 0, 0, 0.32) 30%,
		rgba(0, 0, 0, 0.52) 40%,
		rgba(0, 0, 0, 0.7) 50%,
		rgba(0, 0, 0, 0.84) 60%,
		rgba(0, 0, 0, 0.94) 70%,
		rgba(0, 0, 0, 1) 80%);
}

.plaza-carousel__title,
.plaza-carousel__caption p,
.plaza-tile__title,
.plaza-tile__text {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Same zoom as the image links on the big carousel image (feedback 3). */
.plaza-carousel .plaza-media__el {
	transition: transform 0.4s ease;
}

.plaza-carousel:hover .carousel-item.active .plaza-media__el,
.plaza-carousel:focus-within .carousel-item.active .plaza-media__el {
	transform: scale(1.04);
}

.plaza-carousel__caption {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	padding: clamp(1.25rem, 2vw, 3rem) clamp(1.25rem, 4vw, 5rem) clamp(3.5rem, 4.5vw, 7rem);
	text-align: center;
}

.plaza-carousel__title {
	margin-bottom: 0.5rem;
	color: #fff;
	font-size: clamp(1.5rem, 0.6rem + 1.6vw, 3.125rem);   /* 50px @2560 */
}

.plaza-carousel__title a {
	color: inherit;
	text-decoration: none;
}

.plaza-carousel__title a::after {
	content: "";
	position: absolute;
	/* The whole slide is the link (feedback 22.10): the caption is the
	   positioned box, so reach up and sideways over the image; the
	   carousel's overflow: hidden clips it to the slide. The dots sit above. */
	inset: -200vh -100vw 0;
}

.plaza-carousel__title a:focus-visible {
	outline: 0;
}

/* No underline, like the image links: zoom on hover, white frame on focus
   (on the slide: the link's ::after is clipped). */
.plaza-carousel .carousel-item:has(.plaza-carousel__title a:focus-visible) {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

.plaza-carousel__caption p {
	max-width: 36rem;
	margin: 0 auto;
	font-size: clamp(0.875rem, 0.6rem + 0.45vw, 1.25rem);   /* 20px @2560 */
	font-weight: 700;
}

.plaza-carousel__controls {
	position: absolute;
	inset: auto 0 clamp(1rem, 2vw, 2.5rem);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.plaza-carousel__dots {
	display: flex;
	gap: 0.5rem;
}

.plaza-carousel__dots button {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 2px solid var(--plaza-green);
	border-radius: 50%;
	background: #fff;
}

.plaza-carousel__dots button.active {
	background: var(--plaza-green);
	box-shadow: inset 0 0 0 3px #fff;
}

/* Pause/play button (article hero video). */
.plaza-carousel__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.plaza-carousel__pause:hover,
.plaza-carousel__pause:focus-visible {
	opacity: 1;
}



/* Pause (two bars) ↔ play (triangle) drawn with CSS. */
.plaza-carousel__pause-icon {
	width: 0.7rem;
	height: 0.8rem;
	border-inline: 0.22rem solid currentColor;
}

.plaza-carousel__pause.is-paused .plaza-carousel__pause-icon {
	width: 0;
	height: 0;
	margin-left: 0.2rem;
	border-block: 0.45rem solid transparent;
	border-inline: 0.7rem solid currentColor;
	border-right-width: 0;
}

.plaza-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

.plaza-tile {
	position: relative;
	display: block;
	height: 100%;
	min-height: 11rem;
	color: #fff;
	text-decoration: none;
}

.plaza-tile .plaza-media {
	position: absolute;
	inset: 0;
}

.plaza-tile .plaza-media__el {
	transition: transform 0.4s ease;
}

.plaza-tile:hover .plaza-media__el,
.plaza-tile:focus-visible .plaza-media__el {
	transform: scale(1.04);
}

.plaza-tile:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

/* Hero texts stay white on hover (feedback 12.10): Bootstrap's a:hover
   colour would otherwise win over .plaza-tile. */
.plaza-tile:hover,
.plaza-tile:focus-visible,
.plaza-carousel__title a:hover,
.plaza-carousel__title a:focus-visible {
	color: #fff;
}

.plaza-tile__caption {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	display: grid;
	gap: 0.35rem;
	padding: clamp(1.25rem, 2vw, 3rem) clamp(1rem, 2vw, 3rem) clamp(0.875rem, 1.6vw, 2.5rem);
}

.plaza-tile__title {
	font-size: clamp(1.125rem, 0.35rem + 1.25vw, 2.5rem);   /* 40px @2560 */
	font-weight: 900;
	line-height: 1.15;
}

.plaza-tile__text {
	display: none;
	font-size: clamp(0.875rem, 0.6rem + 0.45vw, 1.25rem);   /* 20px @2560 */
	font-weight: 700;
}

@media (min-width: 768px) {
	.plaza-tile {
		min-height: 15rem;
	}

	.plaza-tile__text {
		display: block;
	}
}

/* ==========================================================================
   Front page: tarjousnosto, logokaruselli
   ========================================================================== */

.plaza-nosto__grid,
.plaza-logos__grid {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

/* Grid items default to min-width: auto; the max-content marquee would
   otherwise widen the column and the whole page on small screens. */
.plaza-kollaasi__grid > *,
.plaza-nosto__grid > *,
.plaza-logos__grid > * {
	min-width: 0;
}

@media (min-width: 576px) {
	.plaza-nosto__offers {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 992px) {
	.plaza-nosto__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		column-gap: clamp(2rem, 4vw, 6rem);
	}

	.plaza-nosto__offers {
		grid-template-columns: repeat(3, 1fr);
	}

	.plaza-logos__grid {
		grid-template-columns: minmax(0, 1280fr) minmax(0, 880fr);
		column-gap: clamp(2rem, 5vw, 8rem);
	}
}

.plaza-nosto__intro .btn,
.plaza-logos__intro .btn {
	margin-top: 1rem;
}

.plaza-logos__marquee {
	position: relative;
	display: grid;
	gap: clamp(0.75rem, 1vw, 1.5rem);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.plaza-logos__row {
	display: flex;
	width: max-content;
}

.plaza-logos__track {
	display: flex;
	flex-shrink: 0;
	gap: clamp(0.75rem, 1vw, 1.5rem);
	margin: 0;
	padding: 0 clamp(0.75rem, 1vw, 1.5rem) 0 0;
	list-style: none;
	animation: plaza-marquee 90s linear infinite;
}



.plaza-logos__marquee:hover .plaza-logos__track,
.plaza-logos__marquee:focus-within .plaza-logos__track,
.plaza-logos__marquee.is-paused .plaza-logos__track {
	animation-play-state: paused;
}

@keyframes plaza-marquee {
	to {
		transform: translateX(-100%);
	}
}

.plaza-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(6.5rem, 7.6vw, 12.2rem);
	aspect-ratio: 1;
	padding: 0.75rem;
	border-radius: var(--louhos-radius);
	background: #fff;
}

.plaza-logos__item img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.plaza-logos__marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.plaza-logos__track {
		animation: none;
	}

	.plaza-logos__track[aria-hidden="true"] {
		display: none;
	}
}

/* ==========================================================================
   Kuvapaneeli: full-width image with an optional light text panel
   ========================================================================== */

.plaza-kuvapaneeli {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(22rem, 32.8vw, 52.5rem);
	padding-block: clamp(2rem, 4vw, 6rem);
}

.plaza-kuvapaneeli--image-only {
	min-height: 0;
	aspect-ratio: 2560 / 840;
	padding: 0;
}

.plaza-kuvapaneeli__bg {
	position: absolute;
	inset: 0;
}

.plaza-kuvapaneeli .container-plaza {
	position: relative;
}

.plaza-kuvapaneeli__panel {
	max-width: 60.75rem;
	padding: clamp(1.5rem, 2.5vw, 4rem);
	border-radius: var(--louhos-radius);
	background: rgba(var(--plaza-bg-rgb), 0.95);
}

/* ==========================================================================
   Ajankohtaista: article grid + single article
   ========================================================================== */

.plaza-article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
	gap: clamp(2rem, 3vw, 4rem) clamp(0.75rem, 2vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 992px) {
	.plaza-article-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.plaza-article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.plaza-article-card__image {
	width: min(100%, 27.7rem);   /* 443px @2560 */
	aspect-ratio: 1;
	margin-bottom: 0.75rem;
	border-radius: var(--louhos-radius);
}

/* Non-square image (old banners): shown whole in its own proportions, no
   empty panel around it, so the banner text is never cropped. */
.plaza-article-card__image--contain {
	aspect-ratio: auto;
	background: none;
}

.plaza-article-card__image--contain .plaza-media__el {
	position: static;
	display: block;
	width: 100%;
	height: auto;
}

.plaza-article-card__date {
	margin-bottom: 1rem;
}

.plaza-article-card__title {
	margin-bottom: 1rem;
	font-size: var(--plaza-fs-h4);
	line-height: 1.3;
}

.plaza-article-card__title a {
	color: inherit;
	text-decoration: none;
}

.plaza-article-card__title a:hover {
	color: var(--louhos-link-color);
}

.plaza-articles__more {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: clamp(2rem, 3vw, 4rem);
}

.plaza-article {
	padding-block: clamp(0.5rem, 1vw, 1.25rem) var(--plaza-section);
}

.plaza-article__hero {
	aspect-ratio: 16 / 9;
	margin-bottom: clamp(2rem, 4vw, 6rem);
	border-radius: var(--louhos-radius);
}

/* An image hero keeps its own proportions so banner texts are never cropped. */
.plaza-article__hero--image {
	aspect-ratio: auto;
	overflow: hidden;
	background: none;
}

.plaza-article__hero--image img {
	display: block;
	width: 100%;
	height: auto;
}

.plaza-article__pause {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
}

.plaza-article__body {
	max-width: 110rem;
	margin-inline: auto;
	padding-inline: clamp(0rem, 2.5vw, 3.125rem);
}

.plaza-article__meta {
	margin-bottom: 0.5rem;
	font-size: var(--plaza-fs-small);
}

.plaza-article .entry-content > * {
	max-width: 100%;   /* full column, never wider (imported captions have an inline width) */
	margin-inline: 0;
}

.plaza-article__share {
	margin-top: clamp(2.5rem, 4vw, 5rem);
	padding-top: clamp(2rem, 3vw, 4rem);
	border-top: 1px solid var(--louhos-primary);
}

[data-plaza-share-status] {
	margin-top: 1rem;
	font-weight: 700;
	color: var(--louhos-link-color);
}

.plaza-share {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin: 1.5rem 0 2rem;
	padding: 0;
	list-style: none;
}

.plaza-share__copy {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--louhos-link-color);
	font-weight: 700;
}

.plaza-share__copy:hover,
.plaza-share__copy:focus-visible {
	color: var(--plaza-petrol);
}

.plaza-share__copy .fa-solid {
	font-size: 1.4em;
}

/* "Katso sijainti kartalla" with the Figma location icon (feedback 29). */
.plaza-map-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--louhos-link-color);   /* like the other standalone links (feedback 12.10) */
	font-weight: 700;
	text-decoration: none;
}

.plaza-map-link a::before {
	content: "";
	flex-shrink: 0;
	width: 1.6em;
	height: 1.6em;
	background: currentColor;
	-webkit-mask: url("../img/icons/location.svg") center / contain no-repeat;
	mask: url("../img/icons/location.svg") center / contain no-repeat;
}

.plaza-map-link a:hover,
.plaza-map-link a:focus-visible {
	color: var(--plaza-petrol);
}

.plaza-share a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--louhos-link-color);   /* same green as the app buttons (feedback 16.10) */
	font-weight: 700;
	text-decoration: none;
}

.plaza-share a:hover,
.plaza-share a:focus-visible {
	color: var(--plaza-petrol);
}

.plaza-share .fa-brands {
	font-size: 1.6em;
}

/* ==========================================================================
   Sub page intro (plaza/intro)
   ========================================================================== */

.plaza-intro {
	padding-block: clamp(0.5rem, 1vw, 1.25rem) clamp(1rem, 2vw, 3rem);
}

.plaza-intro__grid {
	display: grid;
	gap: 1.5rem 2rem;
	align-items: start;
}

/* Phones and tablets (also iPad landscape): the image comes before the text
   (feedback 35, 42). */
@media (max-width: 1199.98px) {
	.plaza-intro__image {
		order: -1;
	}
}

@media (min-width: 1200px) {
	.plaza-intro__grid {
		grid-template-columns: minmax(20rem, 640fr) minmax(0, 1520fr);
	}

	.plaza-intro__text {
		padding: clamp(2rem, 4.3vw, 6.8rem) clamp(0rem, 1vw, 3rem) 0;
	}
}

/* Narrow column only next to the image (desktop); stacked on phones and
   tablets the text uses the full width (feedback 22.10). */
@media (min-width: 1200px) {
	.plaza-intro__lead {
		max-width: 30rem;
	}
}

.plaza-intro__image {
	aspect-ratio: 1520 / 600;
	border-radius: var(--louhos-radius);
}

/* ==========================================================================
   Tietoa meistä: subnav, info columns, map, mosaic, contacts
   ========================================================================== */

.plaza-subnav {
	position: sticky;
	top: var(--plaza-header-actual, var(--louhos-header-height));
	z-index: 1020;
	/* Figma: white Regular text on translucent brand green + background blur.
	   Figma's green at 75 % (#83AD90) gives white only 2.3:1, so a darker
	   green at 85 %: ≈ #577F65 on the page background, white 4.6:1 (AA). */
	background: rgba(58, 106, 76, 0.85);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.admin-bar .plaza-subnav {
	top: calc(var(--plaza-header-actual, var(--louhos-header-height)) + var(--wp-admin--admin-bar--height, 0px));
}

.plaza-subnav ul {
	display: flex;
	flex-wrap: wrap;               /* phones: two rows, every link visible (feedback 37) */
	justify-content: flex-start;
	gap: 0 clamp(1rem, 2.5vw, 4rem);
	margin: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.plaza-subnav li:first-child {
	margin-left: auto;
}

.plaza-subnav li:last-child {
	margin-right: auto;
}

@media (max-width: 767.98px) {
	.plaza-subnav ul {
		justify-content: center;
		column-gap: 1.25rem;
	}

	.plaza-subnav li:first-child,
	.plaza-subnav li:last-child {
		margin-inline: 0;
	}

	/* li a: wins over the base .plaza-subnav a rule further down. */
	.plaza-subnav li a {
		padding-block: 0.35rem;
	}

	.plaza-subnav ul {
		padding-block: 0.15rem;
	}
}

.plaza-subnav a {
	display: block;
	padding-block: clamp(0.75rem, 1vw, 1.5rem);
	color: #fff;
	font-size: var(--plaza-fs-body);
	font-weight: 400;
	white-space: nowrap;
	text-decoration: none;
}

.plaza-subnav a:hover,
.plaza-subnav a:focus-visible {
	color: #fff;   /* no green hover (feedback 12.10), no underline (feedback 24) */
}

.plaza-subnav a {
	padding-inline: 0.5rem;
	border-radius: var(--louhos-radius);
}

.plaza-subnav a:focus-visible {
	outline-color: #fff;
	outline-offset: -3px;
}

/* Phones and tablets: on a page with a subnav only the subnav sticks; the
   header scrolls away so the sticky band stays small (feedback 16.10). */
@media (max-width: 1199.98px) {
	body:has(.plaza-subnav) .plaza-header {
		position: relative;
	}

	body:has(.plaza-subnav) .plaza-subnav {
		top: 0;
	}

	body:has(.plaza-subnav) .entry-content [id] {
		scroll-margin-top: 6.5rem;
	}
}

@media (min-width: 601px) and (max-width: 1199.98px) {
	.admin-bar:has(.plaza-subnav) .plaza-subnav {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

/* Anchored sections land below the sticky header + subnav. */
.entry-content [id] {
	scroll-margin-top: calc(var(--plaza-header-actual, var(--louhos-header-height)) + 4rem);
}

.plaza-info {
	gap: clamp(2rem, 4vw, 6rem);
}

.plaza-info h2 {
	margin-bottom: 1.25rem;
}

.plaza-block-hours .plaza-hours__title {
	font-size: var(--plaza-fs-h4);
	font-weight: 900;
}

.plaza-map__image {
	aspect-ratio: 703 / 442;
	border-radius: var(--louhos-radius);
}

.plaza-map__img {
	object-fit: contain;
	background: #fff;
}

.plaza-map__button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.plaza-map__open {
	margin: 1.5rem 0 0;
}

.plaza-map__image + .plaza-map__intro {
	margin-top: 1.5rem;
}

/* Stores by floor (until HyperIn delivers the floor maps): native
   <details>, one per floor. */
.plaza-floors {
	border-top: 1px solid var(--louhos-primary);
}

.plaza-floors__floor {
	border-bottom: 1px solid var(--louhos-primary);
}

.plaza-floors__floor summary,
.plaza-holidays summary {
	display: flex;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0.85rem 0;
	cursor: pointer;
	list-style: none;
}

.plaza-floors__floor summary::-webkit-details-marker,
.plaza-holidays summary::-webkit-details-marker {
	display: none;
}

.plaza-floors__floor summary::after,
.plaza-holidays summary::after {
	content: "";
	flex-shrink: 0;
	width: 0.6em;
	height: 0.6em;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s ease;
}

.plaza-floors__floor[open] summary::after,
.plaza-holidays[open] summary::after {
	transform: translateY(25%) rotate(-135deg);
}

.plaza-floors__name {
	font-size: var(--plaza-fs-h4);
	font-weight: 900;
	color: var(--louhos-headings);
}

.plaza-floors__count {
	color: var(--louhos-body-color);
}

.plaza-floors__floor summary:hover .plaza-floors__name {
	color: var(--louhos-link-color);
}

/* Holiday hours (Aukioloajat block): same <details> look as the floors. */
.plaza-holidays {
	border-top: 1px solid var(--louhos-primary);
	border-bottom: 1px solid var(--louhos-primary);
}

.plaza-holidays summary:hover .plaza-hours__title {
	color: var(--louhos-link-color);
}

/* Words never break mid-word (Itsenäisyys|päivä); a too narrow column
   scrolls sideways instead. */
.plaza-block-hours,
.plaza-holidays {
	min-width: 0;   /* grid items: let the table scroll instead of widening the page */
}

.plaza-holidays__scroll {
	overflow-x: auto;
}

.plaza-holidays__table {
	width: 100%;
	margin: 0 0 1.25rem;
	overflow-wrap: normal;
	word-break: normal;
	border-collapse: collapse;
	font-size: var(--plaza-fs-small);
	line-height: 1.35;
}

.plaza-holidays__table th,
.plaza-holidays__table td {
	padding: 0.5rem 0.5rem 0.5rem 0;
	border-bottom: 1px solid rgba(41, 63, 66, 0.15);
	text-align: left;
	vertical-align: top;
}

.plaza-holidays__table th {
	font-weight: 700;
}

.plaza-holidays__date {
	font-weight: 400;
	white-space: nowrap;
}

.plaza-holidays__table a {
	color: var(--louhos-link-color);
	font-weight: 700;
	text-decoration: none;
}

.plaza-holidays__table a:hover,
.plaza-holidays__table a:focus-visible {
	color: var(--plaza-petrol);
}

.plaza-floors__list {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0 0 1.25rem;
	list-style: none;
}

.plaza-floors__list a {
	color: var(--louhos-body-color);
	text-decoration: none;
}

.plaza-floors__list a:hover,
.plaza-floors__list a:focus-visible {
	color: var(--louhos-link-color);
}

@media (prefers-reduced-motion: reduce) {
	.plaza-floors__floor summary::after,
	.plaza-holidays summary::after {
		transition: none;
	}
}

.plaza-mosaic__grid {
	display: grid;
	gap: 2rem clamp(2rem, 4vw, 6rem);
	align-items: center;
}

@media (min-width: 1200px) {
	.plaza-mosaic__grid {
		grid-template-columns: minmax(0, 1520fr) minmax(0, 560fr);
	}
}

.plaza-mosaic__images {
	display: grid;
	grid-template-columns: 521fr 974fr;
	gap: clamp(0.5rem, 1vw, 1.5rem);
}

.plaza-mosaic__image {
	border-radius: var(--louhos-radius);
}

.plaza-mosaic__image--1 {
	grid-column: 1 / -1;
	aspect-ratio: 1520 / 520;
}

.plaza-mosaic__image--2,
.plaza-mosaic__image--3 {
	aspect-ratio: auto;
	min-height: clamp(7rem, 11.4vw, 18.2rem);
}



.plaza-contacts__intro {
	margin-bottom: clamp(1.5rem, 3vw, 4rem);
}

.plaza-contacts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 2rem clamp(2rem, 4vw, 6rem);
	max-width: 110rem;
}

.plaza-contacts__group .h4 {
	margin-bottom: 1rem;
}

.plaza-contacts__row {
	margin-bottom: 1rem;
}

.plaza-contacts__label {
	margin-bottom: 0.25rem;
	font-weight: 700;
}

.plaza-contacts__row a {
	font-weight: 700;
	text-decoration: none;
}

.plaza-contacts__row .plaza-icon-link {
	color: var(--louhos-link-color);   /* phone + email green like other standalone links */
}

.plaza-contacts__row a:hover,
.plaza-contacts__row a:focus-visible {
	color: var(--plaza-petrol);
}

.plaza-contacts__row .plaza-icon {
	width: 1.5em;
	height: 1.5em;
}

/* ==========================================================================
   Plain pages (legal texts, Complianz documents)
   ========================================================================== */

.plaza-page {
	padding-block: clamp(2rem, 4vw, 6rem) var(--plaza-section);
}

.plaza-page__title {
	margin-bottom: clamp(1.5rem, 2.5vw, 3rem);
}

.plaza-page__content {
	max-width: 52rem;
}

.plaza-page__content :is(h2, h3, h4) {
	margin-top: 2.25rem;
	margin-bottom: 0.75rem;
}

.plaza-page__content h2 {
	font-size: var(--plaza-fs-h3);
}

.plaza-page__content :is(h3, h4) {
	font-size: var(--plaza-fs-h4);
}

/* Complianz documents: site typography instead of the plugin's own sizes
   (the plugin styles #cmplz-document, so the overrides use the id too). */
.plaza-page #cmplz-document {
	max-width: none;
	font-size: var(--plaza-fs-body);
	line-height: 1.5;
}

.plaza-page #cmplz-document :is(p, li, span, a, td, th) {
	font-size: inherit;
	line-height: inherit;
}

.plaza-page #cmplz-document a {
	color: var(--louhos-link-color);
	font-weight: 700;
}

.plaza-page #cmplz-document :is(details, .cmplz-dropdown) summary,
.plaza-page #cmplz-document .cmplz-service-header {
	background: #fff;
	border-radius: var(--louhos-radius);
}

.plaza-page #cmplz-document :is(h2, h3, h4) {
	color: var(--louhos-headings);
	font-weight: 900;
	margin-top: 2.25rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0;
}

.plaza-page #cmplz-document h2 {
	font-size: var(--plaza-fs-h3);
}

.plaza-page #cmplz-document :is(h3, h4) {
	font-size: var(--plaza-fs-h4);
}

/* ==========================================================================
   Complianz cookie banner in Plaza colours. Complianz drives the banner from
   CSS variables in uploads/complianz/css/banner-*.css; these win by specificity.
   Accept and Deny are equally prominent (EU guidance: refusing must be as
   easy as accepting); buttons are bold ≥ 19px so #5B9570 passes AA.
   ========================================================================== */

body .cmplz-cookiebanner {
	--cmplz_banner_background_color: var(--plaza-bg);
	--cmplz_banner_border_color: var(--plaza-petrol);
	--cmplz_banner_border_width: 1px;
	--cmplz_banner_border_radius: var(--louhos-radius);
	--cmplz_text_color: var(--louhos-body-color);
	--cmplz_text_font_size: 1rem;
	--cmplz_title_font_size: 1.25rem;
	--cmplz_link_font_size: 0.9375rem;
	--cmplz_hyperlink_color: var(--louhos-link-color);
	--cmplz_category_header_title_font_size: 1rem;
	--cmplz_category_header_active_font_size: 0.875rem;
	--cmplz_category_body_font_size: 0.9375rem;
	--cmplz_category_header_always_active_color: var(--louhos-link-color);
	--cmplz_button_font_size: 1.1875rem;
	--cmplz_button_border_radius: var(--louhos-radius);
	--cmplz_button_accept_background_color: var(--louhos-primary);
	--cmplz_button_accept_border_color: var(--louhos-primary);
	--cmplz_button_accept_text_color: var(--plaza-bg);
	--cmplz_button_deny_background_color: var(--plaza-petrol);
	--cmplz_button_deny_border_color: var(--plaza-petrol);
	--cmplz_button_deny_text_color: var(--plaza-bg);
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: var(--plaza-petrol);
	--cmplz_button_settings_text_color: var(--plaza-petrol);
	--cmplz_slider_active_color: var(--louhos-primary);
	--cmplz_slider_inactive_color: #8a8a8a;
	--cmplz_slider_bullet_color: #fff;
	font-family: var(--louhos-font-family);
	box-shadow: 0 0.75rem 2.5rem rgba(var(--plaza-petrol-rgb), 0.25);
}

body .cmplz-cookiebanner .cmplz-title {
	font-weight: 900;
	color: var(--louhos-headings);
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn,
body .cmplz-cookiebanner .cmplz-btn {
	font-family: inherit;
	font-weight: 700;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
body .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
	background-color: var(--louhos-link-color);
	border-color: var(--louhos-link-color);
}

body .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
body .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover {
	background-color: var(--plaza-petrol);
	color: var(--plaza-bg);
}

body .cmplz-cookiebanner .cmplz-links a {
	font-weight: 700;
}

body .cmplz-cookiebanner :focus-visible {
	outline: 3px solid var(--plaza-petrol);
	outline-offset: 2px;
}

/* "Hallinnoi suostumusta" tab after a choice has been made. */
body #cmplz-manage-consent .cmplz-manage-consent {
	background: var(--plaza-petrol);
	color: var(--plaza-bg);
	font-family: var(--louhos-font-family);
	font-weight: 700;
}

/* Round cookie button, fully visible (Complianz's tab hid all but ~15px).
   The text stays in the button (font-size 0) as its accessible name; JS
   copies it to title for a hover tooltip. */
body #cmplz-manage-consent .cmplz-manage-consent {
	left: auto;
	right: 1rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	min-width: 0;
	padding: 0;
	border-radius: 50%;
	font-size: 0;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	animation: none;
}

/* Complianz slides the tab up/down on hover and focus; this button stays put. */
body #cmplz-manage-consent .cmplz-manage-consent:hover,
body #cmplz-manage-consent .cmplz-manage-consent:focus {
	bottom: 1rem;
	animation: none;
}

body #cmplz-manage-consent .cmplz-manage-consent:focus-visible {
	outline: 3px solid var(--plaza-petrol);
	outline-offset: 3px;
}

body #cmplz-manage-consent .cmplz-manage-consent::before {
	content: "";
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	background: currentColor;
	-webkit-mask: url("../img/icons/cookie.svg") center / contain no-repeat;
	mask: url("../img/icons/cookie.svg") center / contain no-repeat;
}


/* Complianz "manage consent" on the Evästeasetukset page. The plugin styles
   #cmplz-manage-consent-container.cmplz-manage-consent-container … so the
   overrides repeat that chain under .plaza-page. */
.plaza-page #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
	margin-bottom: 0.5rem;
	border-radius: var(--louhos-radius);
	background: #fff;
}

.plaza-page #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category summary {
	border-radius: var(--louhos-radius);
	cursor: pointer;
}

.plaza-page #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
	padding: 0.85rem 1.25rem;
	background: transparent;
}

.plaza-page #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-title {
	font-weight: 700;
	color: var(--louhos-headings);
}

.plaza-page #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-always-active {
	color: var(--louhos-link-color);
	font-size: 0.9375rem;
	font-weight: 700;
}

.plaza-page #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--louhos-link-color);
	cursor: pointer;
}

.plaza-page #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description {
	padding: 0 1.25rem 1rem;
}