/*
Theme Name: Butik Lusi
Theme URI: https://github.com/IsuDevelopment/butiklusi
Author: isuDev
Author URI: https://isudev.pl/
Description: Butik Lusi is the block theme of Butik LU-SI, a women's clothing boutique in Kalisz. It is built mobile first for WooCommerce, with a single design system in theme.json, self-hosted fonts and a monoline icon set.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: butik-lusi
Tags: e-commerce, block-patterns, block-styles, full-site-editing, template-editing, translation-ready
*/

/* ==========================================================================
   Layout
   ========================================================================== */

/* Desktop gutter (theme.json has no breakpoints); on body to outrank :root. */
@media (min-width: 1024px) {
	body {
		--wp--style--root--padding-left: var(--wp--custom--gutter--desktop);
		--wp--style--root--padding-right: var(--wp--custom--gutter--desktop);
	}
}

/* ==========================================================================
   Icons
   ========================================================================== */

/* Core icons lose their stroke attributes; see block-theme.instructions.md → Icons. */
svg.lusi-icon,
.wp-block-icon svg.lusi-icon {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: var(--lusi-icon-stroke, 1.5);
}

/* ==========================================================================
   Forms
   ========================================================================== */

/* WooCommerce's classic form fields (.form-row .input-text, selects,
 * select2) and extensions rendering the same markup (e.g. Gift Cards)
 * read these tokens; WooCommerce defines them 4px/gray on :root. The
 * cart/checkout block components hardcode their values instead and are
 * squared selector by selector in the sections below. On body rather
 * than :root so this wins the tie against WooCommerce's own :root
 * definition regardless of stylesheet order. */
body {
	--wc-form-border-color: var(--wp--preset--color--border-strong);
	--wc-form-border-radius: 0;
}

/* ==========================================================================
   WooCommerce — Mini cart
   ========================================================================== */

/* WooCommerce's outlined component buttons (e.g. the mini cart "View cart")
 * use currentColor and a hardcoded #1e1e1e hover; align them with the
 * theme's outline button style. The doubled class outranks WooCommerce's
 * own rules regardless of stylesheet order. */
.wc-block-components-button.wc-block-components-button:not(.is-link).outlined,
.wc-block-components-button.wc-block-components-button:not(.is-link).is-style-outline {
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-button.wc-block-components-button:not(.is-link).outlined:hover,
.wc-block-components-button.wc-block-components-button:not(.is-link).outlined:focus,
.wc-block-components-button.wc-block-components-button:not(.is-link).outlined:active,
.wc-block-components-button.wc-block-components-button:not(.is-link).is-style-outline:hover,
.wc-block-components-button.wc-block-components-button:not(.is-link).is-style-outline:focus,
.wc-block-components-button.wc-block-components-button:not(.is-link).is-style-outline:active {
	background-color: color-mix(in srgb, currentColor 5%, transparent);
	color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   WooCommerce — Cart & Checkout
   ========================================================================== */

/* Styles for WooCommerce blocks that can't be styled via the editor yet. */
/* https://github.com/woocommerce/woocommerce/issues/59322 */

.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-order-summary__title,
.wc-block-components-totals-coupon,
.wc-block-components-totals-item {
	color: var(--wp--preset--color--contrast);
}

.wp-block-woocommerce-checkout .wc-block-components-title {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.18;
}

.wc-block-components-form .wc-block-components-checkout-step {
	margin-bottom: var(--wp--preset--spacing--50);
}

.wc-block-components-checkout-step__heading-container {
	margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-woocommerce-checkout-order-summary-block {
	border-radius: 0;
}

/* Cart scope covers the shipping calculator fields, which reuse the same
 * components as the checkout form. */
.wp-block-woocommerce-cart .wc-block-components-text-input:not(.has-error) input,
.wp-block-woocommerce-cart .wc-block-components-textarea:not(.has-error),
.wp-block-woocommerce-cart .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select,
.wp-block-woocommerce-cart .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__container,
.wp-block-woocommerce-cart .wc-block-components-checkbox__input[type="checkbox"],
.wp-block-woocommerce-checkout .wc-block-components-text-input:not(.has-error) input,
.wp-block-woocommerce-checkout .wc-block-components-textarea:not(.has-error),
.wp-block-woocommerce-checkout .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__container,
.wp-block-woocommerce-checkout .wc-block-components-checkbox__input[type="checkbox"] {
	border-color: var(--wp--preset--color--border-strong);
	border-radius: 0;
}

.wp-block-woocommerce-cart .wc-block-components-text-input:not(.has-error) input:focus,
.wp-block-woocommerce-cart .wc-block-components-textarea:not(.has-error):focus,
.wp-block-woocommerce-cart .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input:not(.has-error) input:focus,
.wp-block-woocommerce-checkout .wc-block-components-textarea:not(.has-error):focus,
.wp-block-woocommerce-checkout .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--border-strong);
	box-shadow: 0 0 0 0.5px var(--wp--preset--color--border-strong);
}

/* Coupon and gift card fields sit in the order summary, where WooCommerce's
 * component styles tie the generic override above on specificity and load
 * later, keeping their rounded corners. The doubled component class wins
 * the tie; the cart block and extension fields that reuse the text-input
 * component (e.g. Gift Cards) get the same treatment. */
.wp-block-woocommerce-cart .wc-block-components-text-input.wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input.wc-block-components-text-input input {
	border-radius: 0;
}

/* The Gift Cards extension's cart/checkout panel ships its own text input
 * component with a hardcoded 4px radius; its classic product-page fields
 * read --wc-form-border-radius and need no override. */
.wc-gift-cards-text-input input {
	border-color: var(--wp--preset--color--border-strong);
	border-radius: 0;
}

/* WooCommerce Payments hardcodes a 5px radius and gray border on the
 * WooPay save-details phone input; match the other checkout fields. */
.woopay-save-new-user-container .save-details-form.form-row .phone-input.phone-input {
	border-color: var(--wp--preset--color--border-strong);
	border-radius: 0;
}

/* Square the remaining cart/checkout components WooCommerce rounds with
 * hardcoded 4px values (no variable, no editor UI). Doubled classes beat
 * WooCommerce's specificity ties regardless of stylesheet order. Radio
 * inputs keep their 50% radius; circular radios are intentional. The
 * express payment box outline is drawn in three pieces: two title-row
 * pseudo-elements hold its top corners and the content box its bottom
 * ones; the branded express buttons keep their own rounding. */
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container.wc-block-components-express-payment__title-container::before,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container.wc-block-components-express-payment__title-container::after,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__content.wc-block-components-express-payment__content,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option:first-child::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option:last-child::after,
.wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-address-card.wc-block-components-address-card,
.wc-block-components-local-pickup-select--multiple.wc-block-components-local-pickup-select--multiple,
.wc-block-components-address-autocomplete-suggestions.wc-block-components-address-autocomplete-suggestions {
	border-radius: 0;
}

/* WooCommerce rings the selected shipping/payment option with an inset
 * box-shadow. Theme-6 carries 20% alpha in every palette, so any ring
 * painted with it composites over the group's own border (same color)
 * and darkens the shared pixels. Drop the ring; the group border is the
 * outline and the filled radio dot carries the selected state. */
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: none;
}

/* WooCommerce strips the group border's top or bottom edge when the
 * first or last option is the selected one, expecting the ring to draw
 * that edge; with the ring gone, restore the sides and their margin
 * nudges so the box stays fully outlined. */
.wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked--first-selected::after {
	border-top: 1px solid var(--wp--preset--color--border-strong);
	margin-top: 0;
}

.wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked--last-selected::after {
	border-bottom: 1px solid var(--wp--preset--color--border-strong);
	margin-bottom: 0;
}

/* The boxes around these components are WooCommerce ::after overlays and
 * component borders drawn at 20% ink (or a hardcoded gray), a shade
 * darker than the theme-6 field borders beside them; align them all. */
.wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container.wc-block-components-express-payment__title-container::before,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container.wc-block-components-express-payment__title-container::after,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__content.wc-block-components-express-payment__content,
.wc-block-components-address-card.wc-block-components-address-card,
.wc-block-components-local-pickup-select--multiple.wc-block-components-local-pickup-select--multiple,
.wc-block-components-address-autocomplete-suggestions.wc-block-components-address-autocomplete-suggestions {
	border-color: var(--wp--preset--color--border-strong);
}

/* The separator lines between unselected options are 1px ::after
 * overlays painted with a 20% ink background, not a border. */
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option.wc-block-components-radio-control__option::after,
.wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option::after {
	background: var(--wp--preset--color--border-strong);
}

/* My Account: assets/css/account.css, loaded only on account pages (includes/account.php). */

/* Catalog: butiklusi/catalog (block-library) owns its CSS; Woo's catalog sorting/filter blocks are not used. */

/* Product page: butiklusi/product (block-library) styles itself; breadcrumb is desktop only (handoff 02). */
.bl-pdp-top {
	margin-bottom: 18px;
}

@media (max-width: 1023px) {

	.bl-pdp-breadcrumbs {
		display: none;
	}
}

/* ==========================================================================
   WooCommerce — Single product
   ========================================================================== */

.wp-block-product-specifications-item__value p {
	margin: 0
}

/* Checkbox alignment for reviews form
 * @todo remove once https://github.com/woocommerce/woocommerce/pull/68696 ships.
 */
.wp-block-woocommerce-product-review-form .comment-form-cookies-consent {
	align-items: flex-start;
}

:where(.wc-block-product-filter-chips__items) {
	gap: var(--wp--preset--spacing--10);
}

/* Closed accordion panels are server-rendered without [hidden] (the
 * Interactivity API only applies it after hydration), so they flash open
 * on load. Collapse them from first paint via the server-rendered
 * aria-expanded state. Scoped to scripting: enabled so no-JS visitors
 * keep the all-panels-open fallback. */
@media (scripting: enabled) {
	.wp-block-accordion-heading:has([aria-expanded="false"]) + .wp-block-accordion-panel {
		height: 0;
		overflow: visible clip;
	}
}

.wp-block-woocommerce-product-gallery-large-image-next-previous-is-layout-flex {
	gap: 0;
}

/* ==========================================================================
   WooCommerce — Cart
   ========================================================================== */

.wp-block-woocommerce-cart-order-summary-heading-block textarea {
	padding-inline-start: 0;
}

.wc-block-cart-item__quantity {
	margin-top: var(--wp--preset--spacing--20);
}

/* ==========================================================================
   Header (patterns/header.php) — handoff docs/01 "Info bar", "Header". Blocks
   (menu, search, icons, category row, mobile bars) style themselves; this is
   the layout. Desktop: sticky, the info bar scrolls away (negative top).
   ========================================================================== */

header.wp-block-template-part:has(.bl-site-header) {
	background: var(--wp--preset--color--base);
	position: relative;
	z-index: 20;
}

.bl-infobar {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--beige-200);
	font-size: 11px;
	letter-spacing: 0.08em;
	padding: 8px;
	text-align: center;

	& p {
		margin: 0;
	}

	& a {
		color: inherit;
		text-decoration: none;
	}

	& .bl-infobar__side {
		display: none;
	}
}

.bl-header__main {
	align-items: center;
	display: grid;
	grid-template-areas: "menu logo icons" "search search search";
	grid-template-columns: 1fr auto 1fr;
	padding: 6px 6px 4px;

	& > .bl-mobile-menu {
		grid-area: menu;
	}

	& > .bl-search {
		grid-area: search;
		padding: 2px 8px 8px;
	}

	& > .bl-header__icons {
		grid-area: icons;
		justify-self: end;
	}
}

.bl-header__logo {
	font-size: 20px;
	font-weight: 600;
	grid-area: logo;
	letter-spacing: var(--wp--custom--letter-spacing--wordmark);
	margin: 0;
	padding-left: var(--wp--custom--letter-spacing--wordmark);
	text-transform: uppercase;
	white-space: nowrap;

	& a {
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
	}
}

@media (min-width: 1024px) {

	header.wp-block-template-part:has(.bl-site-header) {
		border-bottom: 1px solid var(--wp--preset--color--border);
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--bl-infobar-height));
		transition: transform var(--wp--custom--transition);
	}

	/* Smart reveal (block-library mobile-bars/view.js): hidden while scrolling down, back on scroll up. */
	:root.is-header-concealed header.wp-block-template-part:has(.bl-site-header) {
		transform: translateY(-100%);
		transition-duration: 520ms;
	}

	:root {
		--bl-infobar-height: 33px;
	}

	.bl-infobar {
		box-sizing: border-box;
		display: grid;
		font-size: 12px;
		gap: 16px;
		grid-template-columns: 1fr auto 1fr;
		height: var(--bl-infobar-height);
		letter-spacing: normal;
		padding: 8px var(--wp--custom--gutter--desktop);

		& .bl-infobar__side {
			display: block;
			opacity: 0.8;
			text-align: start;
		}

		& .is-end {
			text-align: end;
		}
	}

	.bl-header__main {
		gap: 40px;
		grid-template-areas: "logo search icons";
		grid-template-columns: 200px 1fr auto;
		padding: 18px var(--wp--custom--gutter--desktop);

		& > .bl-search {
			padding: 0;
		}
	}

	.bl-header__logo {
		font-size: 28px;
		padding-left: 0;
	}

	.bl-header__icons .bl-header-icon {
		block-size: 46px;
		inline-size: 46px;
	}

	.bl-header__nav {
		padding: 0 28px;
	}
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {

	header.wp-block-template-part:has(.bl-site-header) {
		transition: none;
	}
}

/* ==========================================================================
   Footer (patterns/footer.php) — handoff docs/01 "Footer". Link columns are
   core/details: an accordion below 1024px, always open above (assets/js/footer.js
   sets [open]; ::details-content covers no-JS).
   ========================================================================== */

.bl-footer {
	font-size: 14px;
	line-height: 1.7;
	padding: 32px var(--wp--custom--gutter--mobile) 120px;
}

.bl-footer a {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--duration) var(--wp--custom--ease);
}

.bl-footer a:hover {
	color: var(--wp--preset--color--surface);
}

.bl-footer a:focus-visible,
.bl-footer summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--surface);
	outline-offset: 2px;
}

.bl-footer .bl-footer__top {
	display: grid;
	gap: 24px;
}

.bl-footer .bl-footer__top > *,
.bl-footer .bl-footer__bottom > * {
	margin-block: 0;
}

.bl-footer .bl-footer__wordmark {
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--body);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--wordmark);
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.bl-footer .bl-footer__about {
	margin: 14px 0 0;
	max-inline-size: 22em;
}

.bl-footer .bl-footer__column {
	border-block-start: 1px solid var(--wp--preset--color--footer-line);
}

.bl-footer .bl-footer__column:last-of-type {
	border-block-end: 1px solid var(--wp--preset--color--footer-line);
}

.bl-footer .bl-footer__column summary {
	align-items: center;
	color: var(--wp--preset--color--surface);
	cursor: pointer;
	display: flex;
	font-size: 15px;
	font-weight: 500;
	justify-content: space-between;
	list-style: none;
	min-block-size: 54px;
}

.bl-footer .bl-footer__column summary::-webkit-details-marker {
	display: none;
}

.bl-footer .bl-footer__column summary::after {
	color: var(--wp--preset--color--footer-text);
	content: "+";
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
}

.bl-footer .bl-footer__column[open] summary::after {
	content: "\2212";
}

.bl-footer .bl-footer__column > * {
	margin-block-start: 0;
}

/* Navigation copies its class onto the inner <ul>; pad the <nav> only. Rows 27px apart, as the reference. */
.bl-footer nav.bl-footer__links {
	line-height: 1.15;
	padding-block-end: 18px;
}

.bl-footer .bl-footer__links .wp-block-navigation__container {
	gap: 12px;
}

.bl-footer .wp-block-navigation-item__content {
	padding: 0;
}

.bl-footer .bl-footer__title {
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 12px;
}

.bl-footer .bl-footer__address {
	margin: 0;
}

.bl-footer .bl-footer__social {
	margin-block-start: 18px;
}

.bl-footer .bl-footer__bottom {
	align-items: center;
	border-block-start: 1px solid var(--wp--preset--color--footer-line);
	display: flex;
	flex-direction: column;
	font-size: 13px;
	gap: 12px;
	margin-block-start: 32px;
	padding-block: 22px 0;
	text-align: center;
}

.bl-footer .bl-footer__legal .wp-block-navigation__container {
	gap: 6px 16px;
	justify-content: center;
}

.bl-footer .bl-footer__legal a {
	color: var(--wp--preset--color--border-strong);
}

.bl-footer .bl-footer__legal a:hover {
	color: var(--wp--preset--color--surface);
}


.bl-footer .bl-footer__meta {
	font-size: 12px;
	margin: 0;
}

@media (min-width: 1024px) {
	.bl-footer {
		padding: 56px var(--wp--custom--gutter--desktop) 0;
	}

	.bl-footer .bl-footer__top {
		gap: 40px;
		grid-template-columns: 1.3fr 1fr 1fr 1fr 1.4fr;
	}

	.bl-footer .bl-footer__column,
	.bl-footer .bl-footer__column:last-of-type {
		border: 0;
	}

	.bl-footer .bl-footer__column summary {
		cursor: default;
		font-weight: 600;
		min-block-size: 0;
		padding-block-end: 12px;
		pointer-events: none;
	}

	.bl-footer .bl-footer__column summary::after {
		display: none;
	}

	/* Open without JS where supported; footer.js sets [open] for assistive tech. */
	.bl-footer .bl-footer__column::details-content {
		content-visibility: visible;
		display: block;
	}

	.bl-footer nav.bl-footer__links {
		padding-block-end: 0;
	}

	.bl-footer .bl-footer__title {
		font-weight: 600;
	}

	.bl-footer .bl-footer__social {
		margin-block-start: 22px;
	}

	.bl-footer .bl-footer__bottom {
		align-items: flex-start;
		gap: 14px;
		margin-block-start: 40px;
		padding-block: 22px 28px;
		text-align: start;
	}

	.bl-footer .bl-footer__legal .wp-block-navigation__container {
		gap: 6px 0;
		justify-content: flex-start;
	}

	/* One line on desktop, so the design's dot separators; on phones the wrapped rows would start with one. */
	.bl-footer .bl-footer__legal .wp-block-navigation-item + .wp-block-navigation-item::before {
		color: var(--wp--preset--color--subtle);
		content: "·";
		padding-inline: 10px;
	}

	.bl-footer .bl-footer__meta {
		font-size: 13px;
	}
}

/* ==========================================================================
   Vertical rhythm and block backgrounds (handoff 05 "Vertical rhythm", readme
   "Spacing and layout"). blockGap is 16px in theme.json; these add the steps it
   cannot express. `:root :where(...)` matches core's layout rules, so a spacing
   set on a block in the editor (inline style) still wins.
   ========================================================================== */

/* Text → next heading 48px; H6 eyebrow → heading 10px; text → buttons 24px. */
:root :where(.is-layout-flow, .is-layout-constrained) > :is(p, ul, ol, blockquote, .wp-block-table, .wp-block-image) + :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--70);
}

:root :where(.is-layout-flow, .is-layout-constrained) > h6 + :is(h1, h2, h3, h4, h5) {
	margin-block-start: 10px;
}

:root :where(.is-layout-flow, .is-layout-constrained) > * + .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Sections: full-width blocks sit a section gap from their neighbours (64 / 96px)… */
:root :where(.is-layout-flow, .is-layout-constrained) > .alignfull + *,
:root :where(.is-layout-flow, .is-layout-constrained) > * + .alignfull {
	margin-block-start: var(--wp--custom--section-gap--mobile);
}

/* …except two full-width backgrounds in a row, which join edge to edge. */
:root :where(.is-layout-flow, .is-layout-constrained) > .alignfull.has-background + .alignfull.has-background {
	margin-block-start: 0;
}

/* A background adds inner space: 24 / 32px, full width 48 / 64px top and bottom (sides keep the root gutter). */
:root :is(.wp-block-group, .wp-block-columns, .wp-block-column).has-background:not(.alignfull) {
	padding: var(--wp--preset--spacing--50);
}

:root :is(.wp-block-group, .wp-block-columns, .wp-block-cover).alignfull.has-background:not(.bl-footer) {
	padding-block: var(--wp--preset--spacing--70);
}

@media (min-width: 1024px) {
	:root :where(.is-layout-flow, .is-layout-constrained) > .alignfull + *,
	:root :where(.is-layout-flow, .is-layout-constrained) > * + .alignfull {
		margin-block-start: var(--wp--custom--section-gap--desktop);
	}

	:root :where(.is-layout-flow, .is-layout-constrained) > .alignfull.has-background + .alignfull.has-background {
		margin-block-start: 0;
	}

	:root :is(.wp-block-group, .wp-block-columns, .wp-block-column).has-background:not(.alignfull) {
		padding: var(--wp--preset--spacing--60);
	}

	:root :is(.wp-block-group, .wp-block-columns, .wp-block-cover).alignfull.has-background:not(.bl-footer) {
		padding-block: var(--wp--preset--spacing--80);
	}
}