/*
 * GENERATED FILE — do not edit directly.
 * Source: theme/src/styles/base.scss (+ _containers.scss, _forms.scss).
 * Regenerate with `npm run build:css` (see theme/package.json) after
 * editing the .scss files. Checked in as plain CSS so the site works
 * without requiring a build step on the box — only local dev needs sass.
 */

/* ---------------------------------------------------------------------
 * _containers.scss — gutter mechanics only (no bg-theme variants, image/
 * video, or scrim — those stay block-only). Needed here, unconditionally,
 * because WooCommerce's own archive/single-product templates and the
 * shortcode-rendered cart/checkout pages render zero theme/* blocks, so
 * nothing would ever trigger the Container block's own CSS to load.
 * --------------------------------------------------------------------- */
.section-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	color: var( --text );
}

.section-wrapper__inner {
	position: relative;
	z-index: 2;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp( 16px, 4vw, 64px );
}

.section-wrapper--pad-desktop-sm { padding-block: var( --space-sm ); }
.section-wrapper--pad-desktop-md { padding-block: var( --space-md ); }
.section-wrapper--pad-desktop-lg { padding-block: var( --space-lg ); }
.section-wrapper--pad-desktop-xl { padding-block: var( --space-xl ); }

@media ( max-width: 782px ) {
	.section-wrapper--pad-mobile-sm { padding-block: var( --space-sm ); }
	.section-wrapper--pad-mobile-md { padding-block: var( --space-md ); }
	.section-wrapper--pad-mobile-lg { padding-block: var( --space-lg ); }
	.section-wrapper--pad-mobile-xl { padding-block: var( --space-xl ); }
}

/* ---------------------------------------------------------------------
 * _forms.scss — sitewide, plain-element selectors. WooCommerce-scoped
 * overrides in woocommerce.css (higher specificity, !important-backed)
 * still win for WooCommerce's own forms; this is the baseline for
 * everything else (WP comment forms, theme/contact-form, any future form).
 * --------------------------------------------------------------------- */
label {
	display: inline-block;
	margin-bottom: 0.4em;
	font-weight: 600;
	font-size: 0.875em;
	color: var( --text );
	font-family: var( --font-body );
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='search'],
select,
textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.65em 0.85em;
	font-family: var( --font-body );
	font-size: 1em;
	color: var( --text );
	background: transparent;
	border: 1px solid color-mix( in srgb, var( --text ) 20%, transparent );
	border-radius: 6px;
	transition: border-color 0.15s ease;
}

textarea {
	min-height: 8em;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var( --accent );
}

select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2.5em;
	cursor: pointer;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172B36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.85em center;
	background-size: 14px;
}

input[type='checkbox'],
input[type='radio'] {
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.5em;
	accent-color: var( --button-bg );
	vertical-align: middle;
}

fieldset {
	border: 1px solid color-mix( in srgb, var( --text ) 15%, transparent );
	border-radius: 8px;
	padding: 1.5em;
}

legend {
	font-family: var( --font-heading );
	font-weight: 600;
	padding: 0 0.5em;
}

button,
input[type='submit'],
input[type='button'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var( --font-body );
	font-weight: 600;
	font-size: 1em;
	padding: 0.75em 1.5em;
	background: var( --button-bg );
	color: var( --button-text );
	border: none;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s ease, transform 0.1s ease;
}

button:hover,
input[type='submit']:hover,
input[type='button']:hover {
	opacity: 0.85;
}

button:active,
input[type='submit']:active,
input[type='button']:active {
	transform: translateY( 1px );
}

button:disabled,
input[type='submit']:disabled,
input[type='button']:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}