/**
 * Smoothiexchange — theme stylesheet (front end + editor).
 *
 * Only what theme.json cannot express lives here: media queries,
 * transforms, and rules that must not apply inside the editor canvas.
 */

/* ------------------------------------------------------------------
 * Responsive visibility — replaces Elementor's hide_mobile / hide_tablet /
 * hide_desktop. Breakpoints are Elementor's defaults (mobile ≤767,
 * tablet 768–1024, desktop ≥1025). Add the class under Advanced →
 * Additional CSS class(es). Never hidden in the editor canvas (the body
 * there is .editor-styles-wrapper) — editor-style.css marks them instead.
 * ------------------------------------------------------------------ */
/* A hidden first child still counts for core's `* + *` blockGap; the next
 * block is then the first visible one and gets no gap (Elementor's hidden
 * widgets took no space). */
@media (max-width: 767px) {
	body:not(.editor-styles-wrapper) .sx-hide-mobile {
		display: none !important;
	}

	body:not(.editor-styles-wrapper) .sx-hide-mobile:first-child + * {
		margin-block-start: 0;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	body:not(.editor-styles-wrapper) .sx-hide-tablet {
		display: none !important;
	}

	body:not(.editor-styles-wrapper) .sx-hide-tablet:first-child + * {
		margin-block-start: 0;
	}
}

@media (min-width: 1025px) {
	body:not(.editor-styles-wrapper) .sx-hide-desktop {
		display: none !important;
	}

	body:not(.editor-styles-wrapper) .sx-hide-desktop:first-child + * {
		margin-block-start: 0;
	}
}

/* A column's width includes its padding, like Elementor's (Hello's global
 * border-box reset): a 50% text column with 80px padding stays 50% instead
 * of squeezing the image column next to it. */
.wp-block-column {
	box-sizing: border-box;
}

/* Columns stack at the site's mobile breakpoint (≤767px, Elementor's), not
 * core's 781px: between 768 and 781px they stay side by side like live.
 * Core's `flex-basis: 100% !important` also overrides a column's inline
 * width, which CSS can't restore, so columns share the row equally there
 * (exact for the 50/50 splits the site uses). A percentage basis, not 0:
 * with border-box a 0 basis still adds each column's padding. */
@media (min-width: 768px) and (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: nowrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 50% !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile):has(> :nth-child(3)) > .wp-block-column {
		flex-basis: 33.33% !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile):has(> :nth-child(4)) > .wp-block-column {
		flex-basis: 25% !important;
	}
}

/* Columns that flip order when stacked (Elementor reverse_order_mobile). */
@media (max-width: 767px) {
	.wp-block-columns.sx-reverse-mobile {
		flex-direction: column-reverse;
	}
}

/* Links inside a coloured heading take the heading's colour (Elementor
 * heading widgets); uncoloured headings keep the Kale link colour like live
 * text-editor links. 0,2,1 beats the link element style and its hover. */
.wp-block-heading.has-text-color a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* ------------------------------------------------------------------
 * Buttons — Elementor "grow" hover animation on the live site.
 * ------------------------------------------------------------------ */
.wp-element-button,
.wp-block-button__link {
	transition: transform var(--wp--custom--transition--default);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: scale(var(--wp--custom--button--hover-scale));
	}
}

/* Button style "Order" (styles/block/button-order.json): ordering CTAs like
 * the home hero's BESTILL HER!, with a phone icon before the label (live:
 * Font Awesome blender-phone; here the header's assets/icons/mobile.svg). */
.wp-block-button.is-style-order .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.wp-block-button.is-style-order .wp-block-button__link::before {
	content: "";
	flex: 0 0 0.7em;
	height: 1.05em;
	background-color: currentColor;
	-webkit-mask: var(--sx-icon-mobile) center / contain no-repeat;
	mask: var(--sx-icon-mobile) center / contain no-repeat;
}

/* Back-to-top button (patterns/back-to-top.php): like the live Locations
 * button, a white 55×37px tab fixed to the right edge at 75% of the
 * viewport height. It stays in the flow in the editor so it can be edited. */
body:not(.editor-styles-wrapper) .sx-back-to-top {
	position: fixed;
	top: 75vh;
	right: 0;
	z-index: 10;
	margin: 0;
}

.sx-back-to-top .wp-block-button__link {
	padding: 10px 20px;
	box-shadow: var(--wp--preset--shadow--card);
	line-height: 17px;
}

/* Table style "Opening hours" (styles/block/table-hours.json): the store
 * cards' Weekdays / Saturday / Sunday rows, two equal columns without
 * core's cell borders, like live's two text columns. */
.wp-block-table.is-style-hours :where(td, th) {
	padding: 0 10px 0 0;
	border: 0;
	vertical-align: top;
	text-align: start;
}

/* An iframe from a Custom HTML block sits directly in its layout parent and
 * is inline by default, so the constrained layout's auto margins can't
 * centre it (Work's job list). As a block it centres like live's boxed
 * Elementor column. */
.is-layout-constrained > iframe {
	display: block;
}

/* Full-screen embed (Regnskogbevaring, class sx-embed-fullscreen on the
 * wrapping group): the iframe fills the viewport below the header, and the
 * page scrolls normally to the footer. Live locked html/body with
 * overflow: hidden instead, which cut off the iframe's last ~87px. */
.sx-embed-fullscreen iframe {
	display: block;
	width: 100%;
	height: calc(100dvh - var(--sx-header-height) - var(--wp-admin--admin-bar--height, 0px));
	border: 0;
}

/* ------------------------------------------------------------------
 * Group style "Menu card" (styles/block/group-menu-card.json) — a product
 * on the Menu page: image, name (h3) with an optional badge, ingredients,
 * Menu accordion. The badge is core's text-colour format (<mark>) inside
 * the h3, set in House Slant like live's h4 badges.
 * ------------------------------------------------------------------ */
.wp-block-group.is-style-menu-card > .wp-block-heading + p {
	margin-block-start: 0;
}

/* Italic bold + no synthesis: until the House Slant web font is in (#18)
 * the futura fallback looks like live's slanted badge; once it is, its
 * single upright face is used as is, not slanted or bolded again. */
.wp-block-group.is-style-menu-card .wp-block-heading mark {
	margin-inline-start: 0.25em;
	font-family: var(--wp--preset--font-family--house-slant);
	font-size: 0.75em; /* live: 17.28px next to a 23.04px name */
	font-synthesis: none;
}

/* ------------------------------------------------------------------
 * Accordion style "Menu" (styles/block/accordion-menu.json) — the live
 * Elementor toggles on the Menu page: Kale bars, white House Slant
 * uppercase titles with an info icon on the left, no gaps between rows,
 * 15px panels (12px bars on mobile). Core's "+" icon is hidden.
 * ------------------------------------------------------------------ */
:root {
	--sx-icon-info: url("../icons/info.svg");
}

/* Flow-layout margins stack on top of the 0 gap (gotchas 7.4). */
.wp-block-accordion.is-style-menu > .wp-block-accordion-item {
	margin-block-start: 0;
}

.wp-block-accordion.is-style-menu .wp-block-accordion-heading {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--house-slant);
	font-size: 1.08rem; /* live: 17.28px, no preset */
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.wp-block-accordion.is-style-menu .wp-block-accordion-heading__toggle {
	gap: 5px;
	padding: 15px;
	border-bottom: 1px solid #d5d8dc; /* Elementor's default toggle keyline */
	background-color: var(--wp--preset--color--kale);
}

.wp-block-accordion.is-style-menu .wp-block-accordion-heading__toggle::before {
	content: "";
	flex: 0 0 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--sx-icon-info) center / contain no-repeat;
	mask: var(--sx-icon-info) center / contain no-repeat;
}

.wp-block-accordion.is-style-menu .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.wp-block-accordion.is-style-menu .wp-block-accordion-heading__toggle-icon {
	display: none;
}

/* Panel: no flow-layout gap above it (the item is a flow layout, so the
 * panel otherwise gets the 20px block gap). The 15px box is margin on the
 * children, not panel padding: core zeroes a closed panel's padding, so
 * padding would change (and slide the text) on every open/close. */
.wp-block-accordion.is-style-menu .wp-block-accordion-item > .wp-block-accordion-panel {
	margin-block-start: 0;
	padding: 0;
}

/* Panel content sits tight like Elementor's toggle content: the source
 * often has one <ul> per nutrition line, which flow-layout gaps would
 * pull apart. Bullets hang just inside the panel edge instead of the
 * browser's 40px indent, which looked off in a narrow card. */
.wp-block-accordion.is-style-menu .wp-block-accordion-panel > * {
	margin: 0 15px;
}

.wp-block-accordion.is-style-menu .wp-block-accordion-panel > :first-child {
	margin-block-start: 15px;
}

.wp-block-accordion.is-style-menu .wp-block-accordion-panel > :last-child {
	margin-block-end: 15px;
}

.wp-block-accordion.is-style-menu .wp-block-accordion-panel .wp-block-list {
	padding-inline-start: 1.1em;
}

/* Slide open/closed like live (Elementor slideDown, ~400ms). Core hides a
 * closed panel with the hidden attribute (display: none), which can't
 * animate. Here the item becomes a grid whose panel row goes 0fr → 1fr.
 * The closed panel stays display: block but visibility: hidden (applied
 * after the collapse), so it is still out of the accessibility tree and
 * the tab order. Reduced motion keeps core's instant behaviour. */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-accordion.is-style-menu .wp-block-accordion-item {
		display: grid;
		grid-template-rows: auto 0fr;
		transition: grid-template-rows 0.4s ease;
	}

	.wp-block-accordion.is-style-menu .wp-block-accordion-item.is-open {
		grid-template-rows: auto 1fr;
	}

	.wp-block-accordion.is-style-menu .wp-block-accordion-item > .wp-block-accordion-panel {
		min-height: 0;
		overflow: hidden; /* also a BFC, so the children's margins stay inside */
		transition: visibility 0s linear 0s;
	}

	.wp-block-accordion.is-style-menu .wp-block-accordion-item > .wp-block-accordion-panel[hidden] {
		display: block;
		visibility: hidden;
		transition: visibility 0s linear 0.4s;
	}
}

@media (max-width: 767px) {
	.wp-block-accordion.is-style-menu .wp-block-accordion-heading__toggle {
		padding: 12px;
	}
}

/* ------------------------------------------------------------------
 * Header — patterns/header.php via parts/header.html, mobile menu in
 * parts/navigation-overlay.html. Values measured from the live ElementsKit
 * header (2026-10-20).
 *
 * Desktop ≥1025px: static Kale bar, 15px/30px padding, grid
 * logo | centred menu | ORDER ONLINE.
 * ≤1024px: fixed bar; tablet = logo | PRE-ORDER | toggle, mobile (≤767) =
 * toggle | PRE-ORDER | logo (live flips the order). The 1024px breakpoint is
 * theme-owned: core's block-visibility breakpoints (782px) and the
 * navigation block's own overlay switch (600px) don't match live
 * (codehouse-wp-gotchas 7.5), so both navigation blocks use fixed
 * overlayMenu values and CSS decides which one shows.
 * ------------------------------------------------------------------ */
:root {
	--sx-icon-mobile: url("../icons/mobile.svg");
	--sx-header-height: 80px;
}

/* No root blockGap between the header and the page. */
.wp-site-blocks > .wp-block-template-part:has(> .sx-header) + * {
	margin-block-start: 0;
}

.sx-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var(--wp--preset--spacing--30);
	padding: 15px 30px !important; /* live section 15px + column 15px; beats the block's own zero padding */
	color: var(--wp--preset--color--base);
}

.sx-header > * {
	grid-row: 1;
	margin: 0 !important; /* flow-layout block gap */
}

.sx-header > .sx-header__logo {
	grid-column: 1;
	justify-self: start;
	line-height: 0;
}

.sx-header__logo img {
	display: block;
	width: 43px;
	height: auto;
}

.sx-header > .sx-header__menu {
	grid-column: 2;
}

.sx-header > .sx-header__actions {
	grid-column: 3;
	justify-self: end;
}

.sx-header > .sx-header__toggle,
.sx-header__preorder {
	display: none !important;
}

/* Menu items: live ElementsKit menu is 20px (no font-size preset). */
.sx-header__menu .wp-block-navigation-item__content,
.sx-nav-overlay__menu .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--futura-pt-condensed);
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
	text-transform: uppercase;
}

.sx-header__menu > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0 5px 0 25px;
}

@media (max-width: 1280px) {
	.sx-header__menu > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-left: 15px;
	}
}

.sx-header__menu .wp-block-navigation-item__content:hover,
.sx-header__menu .wp-block-navigation-item__content:focus-visible,
.sx-header__menu .current-menu-item > .wp-block-navigation-item__content,
.sx-nav-overlay__menu .wp-block-navigation-item__content:hover,
.sx-nav-overlay__menu .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--lean-green);
}

.sx-header__menu .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--lean-green);
}

/* Desktop dropdown. 0,4,0 beats core's
 * `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container`
 * (white background + border), which loads after theme.css (gotchas 4.5). */
.sx-header .sx-header__menu:not(.has-background) .wp-block-navigation__submenu-container {
	min-width: 0;
	padding: 5px;
	border: 0;
	background-color: var(--wp--preset--color--kale);
	box-shadow: 0 10px 30px rgba(45, 45, 45, 0.2);
	color: var(--wp--preset--color--base);
}

/* 0,5,0: core pads submenu links 0.5em 1em via
 * `.wp-block-navigation .has-child .wp-block-navigation__submenu-container …`. */
.sx-header .sx-header__menu .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 5px 5px 0;
	white-space: nowrap;
}

/* Header buttons: ORDER ONLINE 10/20px, PRE-ORDER 15/30px, phone icon after
 * the label (live: Font Awesome mobile-alt; here assets/icons/mobile.svg). */
.sx-header__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	white-space: nowrap;
}

.sx-header__actions .wp-block-button__link::after {
	content: "";
	width: 0.7em;
	height: 1.05em;
	background-color: currentColor;
	-webkit-mask: var(--sx-icon-mobile) center / contain no-repeat;
	mask: var(--sx-icon-mobile) center / contain no-repeat;
}

.sx-header__preorder .wp-block-button__link {
	padding: 15px 30px;
}

@media (max-width: 1024px) {
	/* Fixed bar on the template-part wrapper (gotchas 4.6), page pushed down. */
	body:not(.editor-styles-wrapper) .wp-site-blocks > .wp-block-template-part:has(> .sx-header) {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		right: 0;
		left: 0;
		z-index: 100;
	}

	/* Only when there is a header: the Blank template has none. */
	body:not(.editor-styles-wrapper) .wp-site-blocks:has(> .wp-block-template-part > .sx-header) {
		padding-top: var(--sx-header-height);
	}

	/* In-page anchors (/menu/#fruity) land below the fixed bar. */
	.wp-site-blocks [id] {
		scroll-margin-top: calc(var(--sx-header-height) + var(--wp-admin--admin-bar--height, 0px));
	}

	.sx-header {
		min-height: var(--sx-header-height);
	}

	.sx-header__logo img {
		width: 5vw;
	}

	.sx-header > .sx-header__menu,
	.sx-header__order {
		display: none !important;
	}

	.sx-header__preorder,
	.sx-header > .sx-header__toggle {
		display: flex !important;
	}

	.sx-header > .sx-header__actions {
		grid-column: 2;
		justify-self: center;
	}

	.sx-header > .sx-header__toggle {
		grid-column: 3;
		justify-self: end;
	}

	/* Toggle: framed hamburger, white lines. */
	.sx-header__toggle .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 45px;
		height: 42px;
		border: 1px solid var(--wp--preset--color--base);
		color: var(--wp--preset--color--base);
	}

	.sx-header__toggle .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
	}

	/* Mobile menu: drawer from the left, 40% wide like live (min 200px so
	 * REGNSKOGBEVARING fits), dimmed page behind it. */
	.sx-header__toggle .wp-block-navigation__responsive-container.is-menu-open {
		right: auto;
		width: max(40vw, 200px);
		padding: 0;
		background-color: var(--wp--preset--color--kale) !important;
		box-shadow: 0 0 0 100vmax rgba(51, 51, 51, 0.5);
		overflow-y: auto;
	}

	.sx-nav-overlay__bar {
		padding: 22px 12px 0 !important;
	}

	.sx-nav-overlay .wp-block-navigation-overlay-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 45px;
		height: 42px;
		border: 1px solid rgba(0, 0, 0, 0.5);
		background: none;
		color: var(--wp--preset--color--base);
		font-size: 1rem;
	}

	.sx-nav-overlay > .sx-nav-overlay__menu {
		padding-top: 21px;
	}

	.sx-nav-overlay__menu .wp-block-navigation-item__content {
		padding: 10px 15px;
	}

	/* Submenus are always expanded in the drawer (live: accordion toggles).
	 * 0,4,0 beats core's `.wp-block-navigation__responsive-container.is-menu-open
	 * .wp-block-navigation__submenu-container` padding/gap. */
	.sx-header__toggle .is-menu-open .sx-nav-overlay__menu .has-child,
	.sx-header__toggle .is-menu-open .sx-nav-overlay__menu .wp-block-navigation__submenu-container {
		gap: 0;
		padding: 0;
	}

	.sx-header__toggle .is-menu-open .sx-nav-overlay__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 10px 15px 10px 30px;
	}
}

@media (max-width: 767px) {
	.sx-header {
		padding: 15px 30px 15px 15px !important; /* live: toggle 15px from the left, logo 30px from the right */
	}

	.sx-header > .sx-header__logo {
		grid-column: 3;
		justify-self: end;
	}

	.sx-header__logo img {
		width: clamp(39px, 10.4vw, 60px);
	}

	.sx-header > .sx-header__toggle {
		grid-column: 1;
		justify-self: start;
	}

	.sx-header__toggle .wp-block-navigation__responsive-container-open {
		height: 50px;
		border-width: 2px;
	}
}

/* Phones: the admin bar scrolls away (position: absolute ≤600px), so a fixed
 * header would sit under it — let the logged-in header scroll with it. */
@media (max-width: 600px) {
	body.admin-bar:not(.editor-styles-wrapper) .wp-site-blocks > .wp-block-template-part:has(> .sx-header) {
		position: absolute;
	}
}

/* ------------------------------------------------------------------
 * Footer — patterns/footer.php via parts/footer.html. Values measured
 * from the live ElementsKit footer (2026-10-20): Kale band, 30/20px
 * padding, three equal columns (wordmark | icons + e-mail | legal links +
 * copyright); ≤767px the wordmark column is hidden and the rest stacks.
 * ------------------------------------------------------------------ */

/* No root blockGap between the page and the footer. */
.wp-site-blocks > .wp-block-template-part:has(> .sx-footer) {
	margin-block-start: 0;
}

.sx-footer__columns > .wp-block-column > * {
	margin-block: 0;
}

.sx-footer__columns > .wp-block-column > * + * {
	margin-block-start: 10px;
}

.sx-footer__brand {
	padding: 20px;
}

.sx-footer__logo {
	width: 40%;
	margin-top: 20px !important;
	margin-inline: auto; /* centred in its column, like live */
}

.sx-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.sx-footer__contact {
	padding: 10px;
}

.sx-footer__legal {
	padding: 20px;
}

/* Social icons: white glyph on Kale, 40px in an 80px box, 5px apart,
 * 10% radius (core defaults to a pill and 0.25em padding). */
.sx-footer .sx-footer__social {
	gap: 5px;
	font-size: 40px;
}

.sx-footer .sx-footer__social .wp-social-link {
	border-radius: 10%;
}

.sx-footer .sx-footer__social .wp-social-link a {
	padding: 0.5em;
}

.sx-footer__link {
	line-height: 20px;
}

.sx-footer__link a {
	color: var(--wp--preset--color--lean-green);
	font-size: 1.375rem; /* live: 22px (20px ≤767), no preset */
	line-height: 20px;
	text-decoration: none;
}

.sx-footer__link a:hover,
.sx-footer__link a:focus-visible {
	color: var(--wp--preset--color--lunch-crunch);
}

.sx-footer__copyright {
	font-size: 15px;
	line-height: 1.15;
}

@media (max-width: 1024px) {
	.sx-footer__brand {
		padding: 35px 0 0;
	}

	.sx-footer .sx-footer__social {
		font-size: 30px;
	}
}

@media (max-width: 767px) {
	.sx-footer__contact {
		padding: 20px 10px 10px;
	}

	.sx-footer__columns > .sx-footer__contact > * + * {
		margin-block-start: 20px;
	}

	.sx-footer__legal {
		padding: 0 20px 20px;
	}

	.sx-footer__columns > .wp-block-column > .sx-footer__copyright {
		margin-block-start: 20px;
	}

	.sx-footer__link a {
		font-size: 1.25rem;
	}

	.sx-footer__copyright {
		line-height: 0.9;
	}
}

/* ------------------------------------------------------------------
 * Forms (WPForms on Egenmelding/Catering, the password form): the Elementor
 * kit's global form typography, at the kit's specificity (`.elementor-kit-6
 * label` = 0,1,1), so plugin form CSS overrides it exactly as it did on live.
 * ------------------------------------------------------------------ */
.wp-site-blocks label {
	font-family: var(--wp--preset--font-family--futura-pt-condensed);
	font-size: 20px;
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
}

.wp-site-blocks input:not([type="button"]):not([type="submit"]),
.wp-site-blocks textarea {
	font-family: var(--wp--preset--font-family--futura-pt-condensed);
	font-size: 20px;
	font-style: italic;
	font-weight: 500;
}

/* WPForms (classic markup) spaces its container 24px top and bottom; as the
 * only block in a group, core's first/last-child layout rules zeroed that.
 * Its submit button had Hello's 1.5 line height. */
.wp-site-blocks .wpforms-container.wpforms-block {
	margin-block: 24px;
}

/* A page heading standing in for the form title (Egenmelding's h1) keeps
 * the title's 10px gap. */
.wp-site-blocks .wp-block-heading + .wpforms-container.wpforms-block {
	margin-block-start: 10px;
}

.wp-site-blocks .wpforms-container button[type="submit"] {
	line-height: 1.5;
}

/* Password-protected pages (Egenmelding): core's password form, boxed and
 * centred like live's (Hello's .post-password-form). The submit keeps the
 * theme's button style. */
.wp-block-post-content > .post-password-form {
	box-sizing: border-box;
	max-width: 500px;
	margin-block: 50px;
	padding: 100px;
}

.post-password-form input[type="password"] {
	box-sizing: border-box;
	padding: 8px 16px;
	border: 1px solid #666;
	border-radius: 3px;
	text-transform: none;
}

@media (max-width: 767px) {
	.wp-block-post-content > .post-password-form {
		padding: 50px 0;
	}
}

/* ------------------------------------------------------------------
 * Third-party plugin output.
 * ------------------------------------------------------------------ */

/* WP Google Maps floats the map ("map alignment: left"). Elementor's widget
 * wrapper contained the float; in a core shortcode block it escapes, and the
 * next section lays out beside it (Locations cards squeezed to the right).
 * Once the map loads (after consent) the plugin also adds .wpgmza-auto-left,
 * `margin-left: 0 !important`, which pins it to the left edge of a
 * constrained group; 0,3,0 restores the group's centring. */
.wpgmza_map {
	float: none !important;
}

.is-layout-constrained > .wpgmza_map.wpgmza-auto-left {
	margin-inline: auto !important;
}

/* Complianz documents (Cookie page shortcode) cap themselves at 800px. A
 * constrained group centres them with core's `margin: auto !important`;
 * live left-aligns them with the page title, i.e. with the content box. */
.is-layout-constrained > .cmplz-document {
	margin-inline-start: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
}