/* =================================================================
   File:    03-layout.css
   Purpose: The TWO layout classes that define the whole site.

   .liqui-container  -> centered, max-width 1600px. Use on PAGE content
                       (page.php, archive.php, single.php, single-product, etc.)
   .liqui-fullbleed  -> no max-width. Full viewport width with comfortable
                       side padding. Use on HEADER and FOOTER wrappers.

   These rules are LOCKED per user spec. Do not add a max-width to
   .liqui-fullbleed or remove the cap from .liqui-container.
   ================================================================= */

/* Centered, capped page content */
.liqui-container {
	width: 100%;
	max-width: var(--content-max);   /* 1600px */
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Edge-to-edge wrapper for header / footer / hero strip etc. */
.liqui-fullbleed {
	width: 100%;
	max-width: none;
	padding-inline: var(--fullbleed-padding);
}

/* Inner row inside a fullbleed bar — used to space children evenly without
   adding a max-width. Children flow across the entire bar. */
.liqui-fullbleed__row {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	width: 100%;
}

/* Section spacing (vertical rhythm between page sections) */
.liqui-section {
	padding-block: clamp(var(--space-6), 5vw, var(--space-9));
}
.liqui-section--tight  { padding-block: clamp(var(--space-5), 3vw, var(--space-7)); }
.liqui-section--loose  { padding-block: clamp(var(--space-8), 7vw, var(--space-10)); }

/* Generic grid helpers used by widgets */
.liqui-grid {
	display: grid;
	gap: var(--space-5);
	grid-auto-flow: dense;
}
.liqui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.liqui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.liqui-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.liqui-grid--auto-220 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.liqui-grid--auto-280 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

@media (max-width: 1024px) {
	.liqui-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.liqui-grid--3, .liqui-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.liqui-grid--2, .liqui-grid--3, .liqui-grid--4 { grid-template-columns: 1fr; }
}

/* Stack helper */
.liqui-stack > * + * { margin-block-start: var(--space-4); }
.liqui-stack--sm > * + * { margin-block-start: var(--space-2); }
.liqui-stack--lg > * + * { margin-block-start: var(--space-6); }

/* Cluster — inline group with wrap */
.liqui-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

/* Visually hidden but accessible */
.liqui-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* Skip link */
.liqui-skip-link {
	position: absolute;
	inset-inline-start: -10000px;
	top: 0;
	background: var(--c-ink);
	color: #fff;
	padding: var(--space-3) var(--space-4);
	z-index: var(--z-toast);
	border-radius: 0 0 var(--radius) var(--radius);
}
.liqui-skip-link:focus {
	inset-inline-start: var(--space-4);
}

/* Elementor Free integration: the theme shell stays full width while each
   Elementor container controls its own boxed/full-width content setting. */
.liqui-elementor-content,
.liqui-elementor-content > .elementor,
.liqui-elementor-site-part,
.liqui-elementor-site-part > .elementor {
	width: 100%;
	max-width: none;
}
.liqui-elementor-content { overflow: clip; }
.liqui-elementor-site-part { display: block; position: relative; z-index: var(--z-header); }
.liqui-elementor-site-part--header { min-height: 44px; }
.elementor-editor-active .liqui-elementor-content { overflow: visible; }

/* Optional boxed site canvas. Elementor pages continue to fill the selected
   canvas; their own containers still control inner boxed/full-width content. */
body.liqui-site-layout-boxed {
	width: min(100%, calc(var(--content-max) + (var(--gutter) * 2)));
	min-height: 100vh;
	margin-inline: auto;
	box-shadow: 0 0 64px -36px rgba(15, 23, 42, 0.35);
}

@supports not (overflow: clip) {
	.liqui-elementor-content { overflow-x: hidden; }
}